API

Initialisation

MyMy requires two HTML container elements (div or section) to be present for the javascript API to plug into. Upon initialisation, the remaining HTML elements will be injected into these containers with a bunch of mymy- appended classes and ID's to allow for easy customisation. One container will host the canvas to display the image and results, the canvas loader overlay, and the notification overlay. The other will host the file upload button where the user can upload their image to begin the process and after, any canvas control buttons configured to display.

To set up the app, call the MyMy function on the canvas container element with a configuration object parameter as defined below.

.MyMy({}) function

This is the initialisation function which should be called on the canvas container element to initialise the app. All parameters, except server_url, are optional and have default values.

Parameters

Key	Description	Default
server_url: string*	The URL where the server is set up to. Required.	/
n_images: int	The amount of images to blend between. Set to 2 to blend between makeup and 1 to just display one unblended makeup image.	1
base_presets: array	Array of strings for the base preset.	['base_2']
default_products: string	Strings for the default product to be applied. Can be also achieved with a HTML element containing the classes 'mymy-swatch' & 'active'. See HTML elements for more details.
original_presets: string	String for a preset to be applied to the original side of the image.	false
display_option: enum	Either 'standard', 'swipe' or 'fade'.	'standard'
zoom_and_pan: boolean	If display option is not 'swipe' and this is true, mobile users will be able to zoom and pan the canvas with finger gestures.	false
max_zoom_factor: int	The maximum scale to zoom in by.	4
start_function: function()	The first MyMy function to be called on the uploaded image. MyMy.send_and_show will upload the image and start processing it. This is what the majority will use.	MyMy.send_and_show
image_data: Blob	If image_data is set, the usual upload file work flow will be skipped.	null
canvas_width: int	Set the canvas width.	400
canvas_height: int	Set the canvas height.	400
upload_button_text: string	The upload button text.	'Upload Photo'
max_upload_size_mb: float	The max size of the file to upload. An error will be thrown in error_callback if file uploaded is larger.	4
button_container_id: string	The ID for the button container.	'mymy-button-container'
reverse_swipe: boolean	If display option is 'swipe', setting this to true switches which side of the swipe slider the result is shown.	false
loader: bool	A loading overlay is displayed over the canvas when loading/processing.	false
loader_content: HTMLElement or string	Add an element or string to innerHTML of the .mymy-loader-container	''
swipe_handle_content: HTMLElement or string	Add an element or string to innerHTML of the #mymy-swipe-handle element	''
initial_fade_value: int	Set the faders initial value for when n_images is greater than 1.	50
before_after_toggle: object	Object describing the Before/After button configuration. See before_after_toggle object below.	See below
apply_base_toggle: object	Object describing the Apply Base button configuration. See apply_base_toggle object below.	See below
zoom_toggle: object	Object describing the Zoom button configuration. See zoom_toggle object below.	See below
image_uploaded_callback: function()	A callback for when the image the user uploads, is successfully uploaded and returned to the canvas.	function() {}
image_processed_callback: function()	A callback for everytime an image has completed processing. Every swatch switch or base application completion.	function() {}
switch_swatch_callback: function(swatch)	A callback to use when a swatch is switched. Return the clicked swatch Element.	function(swatch) {}
error_text: object	Object describing various user facing error text messages. See error_text object below.	See below
error_callback: function(error)	A callback to use when a user facing error is thrown. Returns the error given. See example for a list of potential errors	function(error) {}

Example Usage

document.getElementById('mymy-app-container').MyMy({
    server_url: 'https://server.url',
    n_images: 1, 
    base_presets: ['base_2'],
    default_products: 'diormaximiser',
    original_presets: 'preset:clean',
    display_option: 'swipe',
    zoom_and_pan: false,
    max_zoom_factor: 4,
    start_function: MyMy.send_and_show,
    image_data: null,
    canvas_height: 500,
    canvas_width: 500,
    upload_button_text: 'Upload Photo: To Try On',
    max_upload_size_mb: 4,
    button_container_id: 'mymy-button-container',
    reverse_swipe: false,
    loader: true,
    loader_content: document.createElement('img'),
    swipe_handle_content: document.createElement('img'),
    initial_fade_value: 50,
    before_after_toggle: {
        show: false
    },
    apply_base_toggle: {
        show: true,
        initial_state: 0,
    },
    zoom_toggle: {
        on_text: 'Step Back',
        off_text: 'Closer Look',
        initial_state: 1,
        callback: function(state) {
            console.log('zoomed' + state);
        }
    },
    image_uploaded_callback: function() {
        console.log('successfully uploaded');
    },
    image_processed_callback: function() {
        console.log('image successfully processed');
    },
    switch_swatch_callback: function(swatch) {
        console.log(swatch.getAttribute('data-name'));
    },
    error_text: {
        face_not_found: 'Single face not found, try again.',
        multiple_faces_found: 'Too many faces found, try again.',
        server_busy: 'Server currently busy, try again.'
    },
    error_callback: function(error) {
        switch(error) {
            case "Face not found":
                // display error
                break;
            case "Multiple faces found":
                // display error
                break;
            case "Error: server too busy":
                // display error
                break;
            case "Server not running.":
                // display error
                break;
            case "Invalid file type":
                // display error
                break;
            case "Invalid file size":
                // display error
                break;
            default:
                // do something
                break;
        }
    }
}); 

MyMy.user_selected_image() function

This function kick starts the image processing process using the start_function parameter which can be overloaded in the initialisation function

Example Usage

// document.getElementById('mymy-app-container').MyMy({...}); has been called previously
MyMy.user_selected_image()

MyMy.set_image_data(blob) function

This function can be called after the initialisation function to overload the image_data attribute of the config object. MyMy.user_selected_image() must be called afterwards to process the new image data added.

Parameters

Key	Description	Default
blob: Blob*	Image data from getUserMedia for example.	``

Example Usage

// canvas has the video from getUserMedia drawn onto it
canvas.toBlob(function(blob) {

    // document.getElementById('mymy-app-container').MyMy({...}); has already been called
    MyMy.set_image_data(blob);
    MyMy.user_selected_image(); 

}, 'image/jpeg', 1);

MyMy.toggle_zoom() function

Zooms the canvas in or out. By default is attached to the Toggle Zoom button

Example Usage

document.getElementById('my-custom-zoom').addEventListener('click', function(event) {
    MyMy.toggle_zoom();
});

MyMy.toggle_before_after_button() function

Switches between the original image and the processed image. By default is attached to the Before/After button

Example Usage

document.getElementById('my-custom-before-after').addEventListener('click', function(event) {
    MyMy.toggle_before_after_button();
});

MyMy.toggle_base_button() function

Switches between base foundation and no base foundation, if set. By default is attached to the Toggle Base button

Example Usage

document.getElementById('my-custom-base').addEventListener('click', function(event) {
    MyMy.toggle_base_button();
});

MyMy.fullsize_result(callback) function

Returns a callback function with image url for the jpeg image of the fullsize result with the current fade value and products applied.

Parameters

Key	Description	Default
callback: function*	Callback function which takes the url as the only parameter	``

Example Usage

document.getElementById('save-image').addEventListener('click', function(event) {
    MyMy.fullsize_result(function(url) {
        saved_image.src = url;
    });
});

MyMy.set_fade_value(value) function

Sets the fade value to an integer between 0 and 100, inclusive, and re-renders the canvas.

Parameters

Key	Description	Default
value: int*	value between 0 and 100. It will be capped, if out of bounds.	``

Example Usage

document.getElementById('my-custom-slider').addEventListener('change', function(event) {
    MyMy.set_fade_value(this.value);
});

MyMy.inq_fade_value() function

Returns the current fade value integer

Return integer

before_after_toggle object

Object describing the before/after button's configuration, to be used with the initialisation function. Note: initial_state can be set to describe how the result will be displayed even if show is set to false.

Parameters

Key	Description	Default
show: bool	To display the button or not.	true
on_text: string	Text to display when the button is in the on state.	'Show Original'
off_text: string	Text to display when the button is in the on state.	'Show Result'
initial_state: int	Describing whether the button is on (1) or off (0).	1
callback: function(state)	A callback that fires when the button is pressed. The new state of the button is a parameter.	function(state) {}

apply_base_toggle object

Object describing the apply base button's configuration, to be used with the initialisation function. Note: initial_state can be set to describe how the result will be displayed even if show is set to false.

Parameters

Key	Description	Default
show: bool	To display the button or not.	false
on_text: string	Text to display when the button is in the on state.	'Remove Base'
off_text: string	Text to display when the button is in the on state.	'Apply Base'
initial_state: int	Describing whether the button is on (1) or off (0).	0
callback: function(state)	A callback that fires when the button is pressed. The new state of the button is a parameter.	function(state) {}

zoom_toggle object

Object describing the zoom button's configuration, to be used with the initialisation function. Note: initial_state can be set to describe how the result will be displayed even if show is set to false.

Parameters

Key	Description	Default
show: bool	To display the button or not.	true
on_text: string	Text to display when the button is in the on state.	'Zoom Out'
off_text: string	Text to display when the button is in the on state.	'Zoom In'
initial_state: int	Describing whether the button is on (1) or off (0).	1
callback: function(state)	A callback that fires when the button is pressed. The new state of the button is a parameter.	function(state) {}

error_text object

Object describing various user facing error text messages, to be used with the initialisation function.

Parameters

Key	Description	Default
face_not_found: string	Displays in the notification bar on the canvas when no faces are not found in the image.	Face not found, try again.
multiple_faces_found: string	Displays in the notification bar on the canvas when multiple faces are found in the image (more than 1 face).	Single face not found, try again.
server_busy: string	Displays in the notification bar on the canvas when the server is too busy to handle the request.	'Server currently busy, try again.'
invalid_file_uploaded: string	Displays in the notification bar on the canvas when the file uploaded is invalid.	'Please upload a jpg or png image file.'
file_too_large: string	Displays in the notification bar on the canvas when the file uploaded is too large.	'Please upload a smaller file.'