HTML Elements
The mymy-makeup.js file injects serveral html elements into the user-provided app and button containers. All these elements can be styled or moved around, however the hierarchy is relatively fixed. For instance, it wouldn't make sense to move the #mymy-canvas-overlay from outside the canvas, as it is meant to show the loading animation over the top of the canvas.
User defined elements
The following elements must be implemented by the developer.
- .mymy-swatch — swatch class can be added to any HTML element to create a clickable swatch to switch between products. Must give this element a data-name attribute of the makeup name value for switching between products to work automatically. Add the optional 'active' class to one mymy-swatch element to make it the default product to applied to the face.
Injected elements
The following elements are all handled by the javascript - this is an explanation of them.
#mymy-app-container — starting point of the app
#mymy-canvas-section — contains canvas#mymy-canvas plus #mymy-notification, #mymy-canvas-overlay, #mymy-canvas-button-bar, and #mymy-amount-container which are all placed within here so they can easily overlay the whole canvas
canvas#mymy-canvas — the canvas element which displays the uploaded image plus makeup
#mymy-notification — displays instructions to the user on top of the canvas
#mymy-canvas-overlay — while waiting for results from the server can show a loading animation
#mymy-loader-container — holds the loading spinner
- .mymy-loader — default loading spinner
#mymy-amount-container — fader container for blending makeup
- input#mymy-amount — the fader element
.mymy-button-container — contains the buttons for user interaction
.mymy-input-file — initial button to load an image
#mymy-toggle-buttons — contains the buttons to toggle result image
button#mymy-base-toggle — toggle base makeup
button#mymy-before-toggle — toggle before/after
button#mymy-zoom-toggle — toggle zoom