Adding a Use a picture button
In order to add a button that will allow the user to use a picture instead of the video stream from his/her webcam we only need to add a button having the JeeWidgetFileInputButton id. The Jeeliz Widget API automatically finds the button on page load and binds a click listener. Simply add the following block of HTML to your code:
<button id="JeeWidgetFileInputButton"> Use a picture </button>
The button will let the user upload a picture and show it in the canvas, with the glasses frame added.
Adding an Adjust/Move the glasses button
The Jeeliz VTO Widget API implements an adjust mode, which is a mode where the user can scale up and down the glasses by scrolling, or move the glasses by clicking and dragging his/her mouse on the canvas element. The adjust mode is enabled by clicking on a button bearing the JeeWidgetAdjust id:
<button id="JeeWidgetAdjust"> Adjust the glasses </button>
In order to exit the adjust mode, we wi’ll need to add a div to our page bearing the JeeWidgetAdjustNotice id. This element should be hidden by default (set to display: none; ), so that the Jeeliz VTO Widget API can show it or hide it when necessary. This element will be displayed when the adjust mode is enabled. When this is done, we should add inside the div we just created a button bearing the JeeWidgetAdjustExit id. The Jeeliz VTO Widget will find this button on page load, and add to it a listener so that it disables the adjust mode when the user clicks on it. This is the basic structure for our adjust notice:
<div id="JeeWidgetAdjustNotice"> This is the notice <button id="JeeWidgetAdjustExit">Quit the adjust mode</button> </div>
Here we go! Our adjust mode is up and running.
The VTO Widget can also be used as an item list or a catalogue in which our user will be able to quickly switch between several glasses frames. This is done by using the .load() method of the Jeeliz VTO Widget API. We create a button, and bind to it the .load() method. We provide the sku value of the frame we want to show when the user clicks on the button:
<button onclick="JEEWIDGET.load('sku_of_the_glasses_to_show')"> Change model </button>
Let us reload. And tada ! Upon click our new glasses frame is displayed.
We saw together how to enrich our VTO Widget with a use a picture button, a move/scale button and a change model feature. An online demo is made available to see all of these features in actions. Bear in mind that a lot of models are available for free to use with the Widget; you can check the sku list here. And if you need any more info on the library please reach out.