HTML Elements

The mymy-makeup.js file references serveral html elements which must be available for it to work. 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.

• #mymy-app-container — contains #mymy-product-img and #mymy-canvas-section

  • img#mymy-product-image — can be used as a default product image

  • #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

    • button.mymy-canvas-button — general canvas button class

• mymy-button-container — contains some 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

  • button.mymy-toggle — general toggle button class

  • button.mymy-button — general button class

• mymy-swatch — swatch class. Must give this element a name attribute of the makeup name value for switching between products to work automatically.