Introduction

MeepMeep! (ACT II)

MeepMeep! (ACT II), a Super-cool, Animated Modal Dialog Class for Excel 2013/2016 (32bit & 64bit) 2013 & 2016 (32bit or 64bit)

MeepMeep is a sleek, super-cool animated Dialog Box with Lightbox for Excel following on from ACT I which shipped with Carbon. MeepMeep uses Base64 encoded/embedded Images as Icons, Base64 encoded/embedded Skins for its GUI and encoded/embedded Animations for its entrances and exits onto the Screen. The Animations have been grouped together from Animations by Daniel Eden and Animista. The MeepMeep File is Compressed and Cleaned using VBADecompiler.exe by Orlando. Here is 'MyFirstMeep()' using a GreenMeep Theme featuring a Font Awesome Icon and a DarkGeometric Skin:



Prerequisites

  • Excel 2013-2019, preferrably Version 16.0
  • Basic Excel skills. Basic to moderate VBA Skills
  • Windows PC · NOT a Mac!

Features

  • 1 Call to MeepMeep()
  • Quick, smooth configurable (paired) In and Out Animations (expandable if required)
  • A single Class. The UserForms and WebBrowser Objects are dynamically created and destroyed at run-time
  • MeepMeep uses 2 Professional Google Fonts, Oswald and Comfortaa (expandable if required)
  • Choose from a variety of Base64 Encoded Carbon Skins from the guys at www.toptotal
  • Choose from lots of embedded Font Awesome SVG's or create your own using the Font Awesome Cheat Sheet (download their free files of SVG's first)
  • Capture return values for the Modal Dialog Exit Codes, Escape Key, Cancel, Close, Bespoke
  • Use Input Boxes, Checkboxes, Radiobuttons, Dropdown Combo Boxes and Selection Boxes to capture users Input
  • Use Ordered (roman, alpha, number) and Unordered (bullet) lists
  • Works on light and dark Excel background Colours
  • Ultra-smooth, white Lightbox
  • Modal Dialog using CSS, built around the Code featured here by Hunzaboy
  • Selected Animations may include animations from Animate by Daniel Eden or ported from Animista

Installation

MeepMeep is ready to use. Extract the Zip Archive. Open the MeepMeep Workbook and run the Demo. Go into the Code and test the Examples. You can use MeepMeep to begin a new Project as it is or add MeepMeep into your own Projects. To add MeepMeep to your own Project drag the IMeepMeep Class and the Meep Code Module into your Workbook via the Explorer Window in the VBE. Then, move the 'Sheet999' Sheet into your own Project (this is required as all the Icons, Animations and Skins are embedded into this Worksheet. You can move the Sheet by right-clicking on the Tab and then set it to Hidden or Very Hidden





Usage

1 Call to MeepMeep with/without using Named Arguments

Using Named Arguments means that you can specify any Argument in any order and omit any Optional Arguments without specifying a comma (,). MeepMeep is called using the following Named Arguments either directly or indirectly (some Parameters are Optional):

  • Meep.Meep()

  • Theme:=BlueMeep  * the Colour of the Theme which changes the Icon, Text and Button Hover Colours (expandable)

    Action:=VibrateBounceDown  * the Animation pairing, can be any of the embedded Animations. VibrateBounceDown will Vibrate in and then Bounce out downwards (expandable)

    Icon:=Info  * the Icon, can be any of the embedded Icons ie. Cogs, Info, Quote etc.

    Font:=Comfortaa,  * the Google Font: Comfortaa or Oswald (expandable)

    Speed:=Zippy  * the Speed of the Animations in and out ie. WileECoyote, Snail, Roadrunner etc.

    Title:="MeepMeep!"  * the Title: a String ie. "MeepMeep!" including optional Tags

    Message:="This is a Jello animation entrance with a Bouncing exit"  * the Message: a String ie. "This is a Jello animation entrance with a Bouncing exit" with optional Tags

    Position:=BottomRight,  * the Position of the Modal Dialog: Center, TopRight, CenterRight, BottomRight, CenterBottom, BottomLeft, CenterLeft, TopLeft, CenterTop (when using positions different to the Screen Center I have set the Modal Dialog Corner Radius to 0px)

    CloseButtonText:="Close",  * the Close Button Text: a String ie. "I love MeepMeep". Please Note: you can generate a second Button by passing in a pipe (|) Delimited pair of values ie. "Yes|No"

    CornerRadius:=16  * the Modal Dialog Corner Radius: 0, None, 2, 4, 6 etc.

    GetInput:="radiobutton|Check this|... or this...|or maybe this"  * the Input String for Checkboxes, Radiobuttons and Selection Boxes - these have various other parameters that can passed with the String, for example to format the width

    List:="unordered|List Item 1|List Item 2|List Item 3"  * the Input String for Ordered or Unordered lists

    BorderSize:=24  * the Border Size, adds a thicker Border to the Dialog


Available Animations

I have selected what I believe to be the most professional looking pairings of Animations for MeepMeep, however this does not stop you loading in any Animation from a Text File and pairing it up but you will have to do this yourself - check out Carbon which contains 98 Animations that you can save as a Text File. Most of my Animations were ported from Animations using the Animation Library called Animate by Daniel Eden with the remainder generated by Animista. The MeepMeep one was found on CodePen and I just ported it into Excel with a slight modification




Tweaks

Highlighting Text for the Message

To highlight, lowlight, themelight or theme Text you will need to add wrap a span with the relevant id Tag around the words that you want the style to affect - drop these directly into a Title or Message parameter to test:


"This <span id=highlight>setting</span> is used to create a highlight effect"

"This <span id=lowlight>setting</span> is used to create a lowlight effect"

"This <span id=themelight>setting</span> is used to create a themelight Colour effect"

"This <span id=theme>setting</span> is used to create a theme colour effect"


Resizing Excel

When the Excel Window is resized MeepMeep will try to fit it as best that it can. You can make the Dialog smaller, but this will affect the size when Excel is resized, so it is best not to tweak the Markup that is written to the WebBrowser Control. This is what happens when you change the Window Size to a tiny Excel Window:






Capturing the Exit Codes of the Dialog: Meep.Meep(0)

MeepMeep uses a Variant Array to return information via the Meep Wrapper ie. for Exit Codes (0), Input Text(1), Checkboxes and Radiobuttons(2). Considering it is a Wrapper, this gives MeepMeep a fair bit of flexibility in its methods of returning information. It allows us to examine the Return Codes for an exit whilst considering list choices. If it was a Class as opposed to a Wrapper. this would be easier as you could trap the results using Class Members. Anyhow, you can capture the Exit Codes by referencing the Zero-based Index of the Meep.Meep() Array Function. The return values are Long values, 0={Esc}, 1=Cancel, 2=Close, 3=Bespoke or via a TModalResult Enum, EscapeKey=0, DialogCancelButton=1, DialogCloseButton=2, DialogBespokeButton=3. The methods are similar, the first is shown here:


Dim vbResult As Variant
vbResult = Meep.Meep(BlueMeep, JackInTheBoxBounceDown, Question, Comfortaa, Zippy, Title, _
                     "Which of the following <span id=lowlight>devices do you have?</span><br />(use ctrl+left button or drag)</span><br id=break><hr id=line>", , _
                     "I have made my selections", , _
                     "select|250|120|Smartphone|Smart TV|Laptop|PC|Smart Watch|iPad|Tablet", , DarkGeometric)
Debug.Print vbResult(0)

To simply capture the return value you can also use if Meep.Meep(...)(0) = DialogCloseButton=2 then ... do something, see easy!



Adding a Text Input Box to Capture Input or a Password from a User: Meep.Meep(1)

You can use one technique to produce a normal Input Box or a Password Input Box - the only difference is the replacement of the words 'type=text' with the words 'type=password'. When using an Input Text Box we will use the number 1 slot of the Meep.Meep() Array Return value ie. Meep.Meep(1). To allow a user to enter Text and then capture that input you need to add a 'getinput' Tag together with the relevant Element Name as part of the Message that you write. Then you just need to capture the CarbonMsg(1) value, like this (notice I just suffixed it to the Function). MeepMeep must have the 'onblur' function added manually and an optional 'onkeydown' function if you want the Dialog dissmissed iwhen Enter is pressed by the user:


' Example Tag usage (change type=text to type=password for a Password Input Box)
Dim InputText As String
InputText = Meep.Meep(LightPurple, Spinner, Quote, Comfortaa, Quick, "Input Report Name", _
 "Name: <input type=text id=getinput name=getinput onblur='UpdateTextInputs();' onkeydown='Enter();'>", , "OK")(1)
    
If InputText <> vbNullString Then _
 Meep.Meep LightPurple, VibrateBounce, Info, Comfortaa, Quick, "Input Report Name", "Thank you.  You entered: " & InputText, , "OK"


We can also retrieve any number of Input Box entries by adding more input Tags and then examining the Meep.Meep(1) return result by using a Variant:


   Const Title As String = "Input testing for MeepMeep"
   Dim vbResult As Variant
   Dim Username As String
   Dim Password As String
   vbResult = Meep.Meep(BurntPinkMeep, Spinner, Key, Comfortaa, Quick, Title, _
                        "<span style='width:75px;display:inline-block;'>UserName:</span> <input type=text id=getinput name=getinput onblur='UpdateTextInputs();' onkeydown='Enter();'><br id=break>" & _
                        "<span style='width:75px;display:inline-block;'>Password:</span> <input type=password id=getinput name=getinput onblur='UpdateTextInputs();' onkeydown='Enter();'>", , "OK")
    
   Username = Split(vbResult(1), "|")(0)
   Password = Split(vbResult(1), "|")(1)

   If Username <> vbNullString Or Password <> vbNullString Then
      Meep.Meep BurntPinkMeep, VibrateBounce, Key, Comfortaa, Quick, Title, "You entered<hr id=line> Username: " & Username & "<br id=break> Password: " & Password, , "OK"
   Else
      Meep.Meep BurntPinkMeep, VibrateBounce, Key, Comfortaa, Quick, Title, "Oops, you did not enter anything!", , "OK"
   End If









Adding Checkboxes to Capture Input from a User: Meep.Meep(2)

When using Checkboxes we will use the number 2 slot of the Meep.Meep() Array Return value ie. Meep.Meep(2). To add Checkboxes you need to use the GetInput Parameter, passing a String of Options where the very first part is the specifier (Case Sensitive) and the next part is the list of Items ie. "checkbox|Smartphone|Smart TV|Laptop|PC|Smart Watch|iPad|Tablet". So, to add 7 Checkboxes and capture the return results, you would use Code like this (the second code section only runs if the user has not dismissed the MeepMeep via the Escape {ESC} Key or the Cancel Button):


   Dim vbResult As Variant
   Dim Selections As Variant

   vbResult = Meep.Meep(Theme:=TurquoiseMeep, _
                        Action:=TaDaBounce, _
                        Icon:=Plug, _
                        Font:=Comfortaa, _
                        Speed:=Zippy, _
                        Title:=Title, _
                        Message:="Which <span id=lowlight>device do you have?</span><br />(select an item from the dropdown)</span><br id=break><hr id=line>", _
                        CloseButtonText:="I have made my selection", _
                        GetInput:="checkbox|Smartphone|Smart TV|Laptop|PC|Smart Watch|iPad|Tablet")

   If vbResult(0) > DialogCancelButton And vbResult(2) <> vbNullString Then
      Selections = Split(vbResult(2), "|")

      Meep.Meep Theme:=TurquoiseMeep, _
                Action:=WobbleBounce, _
                Icon:=Info, _
                Font:=Comfortaa, _
                Speed:=Zippy, _
                Title:=Title, _
                Message:="You have <span id=lowlight> " & UBound(Selections) + 1 & " device(s)</span><hr id=line>" & Replace(vbResult(2), "|", ", ") & "", _
                CloseButtonText:="OK"
   End If







Adding Radiobuttons to Capture Input from a User: Meep.Meep(2)

When using Radiobuttons we will use the number 2 slot of the Meep.Meep() Array Return value ie. Meep.Meep(2). To add Radiobuttons you need to use the GetInput Parameter, passing a String of Options where the very first part is the specifier (Case Sensitive) and the next part is the list of Items ie. "radiobutton|Smartphone|Smart TV|Laptop|PC|Smart Watch|iPad|Tablet". So, to add 7 Radiobutton and capture the return result, you would use Code like this (the second code section only runs if the user has not dismissed the MeepMeep via the Escape {ESC} Key or the Cancel Button):


   Const Options As String = "radiobutton|Smartphone|Smart TV|Laptop|PC|Smart Watch|iPad|Tablet"
   Dim vbResult As Variant
   '@Ignore VariableNotUsed
   Dim Selections As Variant

   vbResult = Meep.Meep(Theme:=BurntCaramelMeep, _
                        Action:=Spinner, _
                        Icon:=Plug, _
                        Font:=Comfortaa, _
                        Speed:=Zippy, _
                        Title:=Title, _
                        Message:="Which <span id=lowlight>device do you have?</span><br />(select an item from the dropdown)</span><br id=break><hr id=line>", _
                        CloseButtonText:="I have made my selection", _
                        GetInput:=Options)

   If vbResult(0) > DialogCancelButton And vbResult(2) <> vbNullString Then
      Selections = Split(vbResult(2), "|")

      Meep.Meep Theme:=BurntCaramelMeep, _
                Action:=SlideBounce, _
                Icon:=Info, _
                Font:=Comfortaa, _
                Speed:=Zippy, _
                Title:=Title, _
                Message:="You have <span id=lowlight> Option " & Replace(vbResult(2), "|", ", ") & "</span> which is a " & Split(Options, "|")(vbResult(2)), _
                CloseButtonText:="OK"
   End If







Adding a Dropdown Combo Box to Capture Input from a User: Meep.Meep(2)

When using a Dropdown Combo Box we will use the number 2 slot of the Meep.Meep() Array Return value ie. Meep.Meep(2). To add a Dropdown Combo Box you need to use the GetInput Parameter, passing a String of Options where the very first part is the specifier (Case Sensitive), the next part is the width of the Dropdown Combo Box and the last parts being the list of Items, with the first Item ususally Blank or a Line ie. "dropdown|150|-|Smartphone|Smart TV|Laptop|PC|Smart Watch|iPad|Tablet". So, to add a Dropdown Combo Box with 7 Items and capture the return result, you would use Code like this (the second code section only runs if the user has not dismissed the MeepMeep via the Escape {ESC} Key or the Cancel Button):


   Dim vbResult As Variant
   Dim Selections As Variant

   vbResult = Meep.Meep(Theme:=PurpleMeep, _
                        Action:=JackInTheBoxBounce, _
                        Icon:=Cogs, _
                        Font:=Comfortaa, _
                        Speed:=Zippy, _
                        Title:=Title, _
                        Message:="Which <span id=lowlight>device do you have?</span><br />(select an item from the dropdown)</span><br id=break><hr id=line>", _
                        CloseButtonText:="I have made my selection", _
                        GetInput:="dropdown|150|-|Smartphone|Smart TV|Laptop|PC|Smart Watch|iPad|Tablet")

   If vbResult(0) > DialogCancelButton And vbResult(2) <> vbNullString Then
      Selections = Split(vbResult(2), "|")

      Meep.Meep Theme:=PurpleMeep, _
                Action:=WobbleBounce, _
                Icon:=Info, _
                Font:=Comfortaa, _
                Speed:=Zippy, _
                Title:=Title, _
                Message:="You chose<hr id=line>" & Replace(vbResult(2), "|", ", ") & "", _
                CloseButtonText:="OK"
   End If
   






Adding aSelection Box to Capture Input from a User: Meep.Meep(2)

When using a Selection Box we will use the number 2 slot of the Meep.Meep() Array Return value ie. Meep.Meep(2). To add a Selection Box you need to use the GetInput Parameter, passing a String of Options where the very first part is the specifier (Case Sensitive), the next part is the width of the Selection Box, the next part after that is the height of the Selection Box and the last parts being the list of Items ie. "select|250|120|Smartphone|Smart TV|Laptop|PC|Smart Watch|iPad|Tablet". So, to add a Selection Box with 7 Items and capture the return result, you would use Code like this (the second code section only runs if the user has not dismissed the MeepMeep via the Escape {ESC} Key or the Cancel Button):


   Const Title As String = "You <span id=themelight>can have</span> a long Title if you want - <span id=theme>MeepMeep!</span>"
   Dim vbResult As Variant
   Dim Selections As Variant

   vbResult = Meep.Meep(BlueMeep, JackInTheBoxBounceDown, Question, Comfortaa, Zippy, Title, _
                        "Which of the following <span id=lowlight>devices do you have?</span><br />(use ctrl+left button or drag)</span><br id=break><hr id=line>", , _
                        "I have made my selections", , _
                        "select|250|120|Smartphone|Smart TV|Laptop|PC|Smart Watch|iPad|Tablet", , DarkGeometric)

   If vbResult(0) > DialogCancelButton And vbResult(2) <> vbNullString Then
   
      Selections = Split(vbResult(2), "|")

      Meep.Meep Theme:=BlueMeep, _
                Action:=VibrateBounceDown, _
                Icon:=Info, _
                Font:=Comfortaa, _
                Speed:=Zippy, _
                Title:=Title, _
                Message:="You have <span id=lowlight> " & UBound(Selections) + 1 & " device(s)</span><hr id=line>" & Replace(vbResult(2), "|", ", ") & "", _
                CloseButtonText:="OK"
   End If
   






Adding a Line to the Modal Dialog Message Parameter to Separate Text

You can use the '3d effect', line Tag to separate Text in a Message like this <hr id=line>. See the image below:




Using other Tags to do Stuff in Messages

We already covered off using 'id=themelight' etc. to highlight Text via Tags, but you can use Tags to do other stuff in MeepMeep when writing the Message, for example you can add line Breaks with slightly better sizes than the standard BR Tag - check out the list of additional Tags below - I use these in the many Examples that come with the MeepMeep! (ACT II) File


' Line Breaks
<br id=break> = a line break of 200% which is slightly more than the normal BR when using the Flex container with the Font's line-height
<br id=doublebreak> = a line break of 300% which is about 3/4's of 2 normal BR's



Using Ordered (roman, alpha, number) and Unordered (bullet) Lists

You can use ordered and unordered list in MeepMeep. A Scrollbar will be displayed for any overflow to enable you to still read the lists. You pass a Pipe (|) delimited list of data where the first word is either ordered or unordered. The second word for ordered lists can be either roman, alpha or decimal. The second word for unordered lists can be either circle, square or disc. To change the prefix use a List Parameter like this (this method does not return any results other than the Exit Codes):


' Ordered (roman, alpha or number ie. I,II,III or a,b,c or 1,2,3)
   Meep.Meep BurntRed, ThumpingHeartbeatBounce, Eraser, Comfortaa, Zippy, _
             "<span id=themelight>MeepMeep!</span>", _
             "Colours of the <span id=themelight>Rainbow</span><br id=break><hr id=line>", , _
             "Cool", , , "ordered|alphaRed|Orange|Yellow|Green|Blue|Indigo|Violet"
' Unordered
   Meep.Meep BurntRed, ThumpingHeartbeatBounce, Eraser, Comfortaa, Zippy, _
             "<span id=themelight>MeepMeep!</span>", _
             "Colours of the <span id=themelight>Rainbow</span><br id=break><hr id=line>", , _
             "Cool", , , "unordered|disc|alphaRed|Orange|Yellow|Green|Blue|Indigo|Violet"







Border Size

You can tweak the Border Size of the Dialog using the Optional BorderSize Parameter. Here is a Dialog with a Border resized to 24:



FAQ

There are currently no frequently asked questions for MeepMeep! (ACT II)

Bugs, Fixes & Future Builds

Lightbox Fading In/Out on repeated calls to Meep.Meep()

- ideally the Lightbox should not Fade In/Out between repeated Calls to Meep.Meep() (open)

             

28.04.2020 a retro-fit fix to minimise the time elapse between repeated calls if Text is entered and ensure rapid response which looks pretty neat
TBH in normal operation one would assume the user will do something with the value entered
Unfortunately using the Wrapper the UserForms are destroyed each time they are created via Kill()


Lightbox Click to exit Modal

- a Click anywhere on the Lightbox could be used to dismiss the Modal (open)

Padding Wrap for Span Elements

- tag elements used to style lowlight, highlight and themelight appear to disregard the padding when words are wrapped for various Excel Window sizes (open)

Presenting a Checked Checkbox before running CarbonMsg ignores the Result

- the JavaScript only runs as a user checks a Checkbox, hence pre-setting Checkboxes to Checked before running CarbonMsg is not yet captured (open)

Screen Shots

My First MeepMeep - Bello World



My Next MeepMeep



Input Boxes



Checkboxes



Radiobuttons



Dropdwon Combo Boxes





Selection Box (check out the longer Title)





Ordered and Unordered Lists





Changing the default Border Size of the Dialog from 1 to 24



MeepMeep! Videos

Here I run through a Video of MeeMeep, for Excel demonstrating a series of Modal Dialogs and Animations

Support

Please remember you have purchased very affordable Software and you have not paid for a full-time Software design agency - I am but one man. Occasionally I may help with small tweaks, but these requests will be put on a much lower priority due to their nature. You have not PAID for Support, Support is 100% optional and I provide it for your convenience, so please be patient, polite and respectful

Support (limited) for my Software includes

  • Responding to questions or problems regarding the Software and its features
  • Fixing valid (replicated) bugs and reported issues for the VERSION I HAVE WRITTEN

Software support does not include

  • Customization and installation services
  • Support for third party software or ANY kind of development whatsoever

Before seeking support

  • Make sure your question is a valid Software Issue and not a customization request
  • Make sure you have read through the FAQ's, online documentation and any related video guides before asking support on how to accomplish a task
  • Ensure that you access to the VBOM is allowed and that Macros can run in Excel
  • Make sure to provide 'proof of purchase' and state the name / version of the Software that you are having issues with when requesting support by Email or via Facebook

How to get Support

Contact Mark Kubiszyn on the Email address provided when you purchased the Software, including the Order Number
...or Contact Mark Kubiszyn via our Facebook Page - remember to be patient, if there has been an issue with your download, Mark will always respond within 48 hours and will Email you the File directly if neccessary or via Messenger. For other issues the response time may be considerably longer and I may choose to respond to specific questions only (as is my right), depending on what has been asked

Changelog

Read more information on the status of each release below
- the latest Version including a description of any changes made is always shown first

MeepMeep! (ACT II)


01.06.2020, Version 1 released