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:
- Draw over most HTML tags
- Upload an image over most HTML tags
- Include comments with your drawings
- View, edit, and delete your drawings and comments
- Save your drawings and comments locally in your browser
- Toggle between different view modes for printing and greater visual access
- A modern browser is the only requirement
- For server requests and responses, access the drawings and comment data (JSON) from a hidden textarea to pass to a server,
and then repopulate the textarea with the drawings and comment data (JSON) to render on a form
Use Cases & Benefits:
- Easy way to allow users to sign and/or initial forms
- Adds another type of data entry input for a form
- Combines drawings with traditional inputs to a form record
- Great way for testers to markup input forms for improved application development requirements and details
- Users can note/markup specific things within an input form locally, and later review those notes/markups
- Can be used as a techincal support feature
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.