www.damionmullins.com Damion Mullins, MS, MBA

mEmMini

Version 1.0, developed in 2021



mEmMini is a JavaScript plugin that makes HTML tags drawable. By simply adding the mEmMini data attribute, an HTML tag, such as a div, form, or body gets wrapped in a transparent canvas for drawing and commenting on. With its light-weight user interface, mEmMini can be toggled on and off for viewing, editing, adding, and deleting drawings and comments. The drawings and comments can easily be passed for a server request and response, as well as written to a file or saved in a database. Moreover, drawings and comments can be managed locally for personal use. Many options in mEmMini are controlled by adding simple data attribute configurations. Below is a list of features mEmMini offers:

Use Cases & Benefits:

Working Examples on Various Elements:

DIV example

I'm a div

UL example

TEXTAREA example

INPUT type text example

DIV example (readonly) populated with response data

Scribble
Below is the response data shown in a visible textarea:

Usage Instructions

First, link mEmMini.js to your entire website or application, or to any web page, as you would with any other JavaScript file.

Second, add data-mEmMini="1" to any HTML element you would like mEmMini to make drawable. For multiple HTML elements, just increase the count in consecutive order (i.e. data-mEmMini="2", data-mEmMini="3", data-mEmMini="4", etc...)

Third, add any restrictions (option exclusions) by adding data-mEmMiniExcludedMenuOptions="" to each mEmMini element. For example, to exclude all options, you would add data-mEmMiniExcludedMenuOptions="draw,view,pin,upload,comments" .
  • draw: removes all draw options, and makes mEmMini element read only
  • view: removes all view options
  • pin: removes all client-side save options
  • upload: removes option to upload an image, instead of drawing an image
  • comments: removes option to add comments to a drawing both locally and for server requests
Fourth, the element that holds the mEmMini data for a server request has the name and id: mEmMiniPostData. This element is a hidden textarea and the data is written in JSON. For example:

{"3":{"alwaysVisible":"","readOnly":"","opacity":"","text":"This is a test comment","dataUrl":"data:image/png;base64..."},"4":{"alwaysVisible":"","readOnly":"","opacity":"","text":"Here is a another test comment","dataUrl":"data:image/png;base64..."}}

When sending back the data in a server response, you can configure the below object name values:
  • Set alwaysVisible = 1 to render the element's drawing and comments on page load
  • Set readOnly = 1 to render only the element's drawing and comments without any menu options
Please note that the text in this file can be quite large and the text will need to be escaped first before passing in a URL.

Fifth, to get the data from a server response, you must populate a hidden textarea with the response JSON data, and then pass the id of that textarea to initializeResponseDataPopulation on page load, as shown below:

    (new MemMiniJsCommands())
        .initializeResponseDataPopulation(
            'yourIdHere'
        );
    

Additional Information

If you want to require a user to draw on a mEmMini element before saving their record, you can use the following validation method:

    // Bool returns true or false
    (new MemMiniJsCommands())
        .validateRequiredDrawing(
            mEmMiniCount
        );
    

Local usage is provided using indexedDb. mEmMini will create a local data store on the user's browser.
Download More Projects!