Contents
On-Screen Interface Elements
MyWebAR allows you to create on-screen buttons and other UI elements using the PRO editor. In this article you'll learn how to create a simple button that will take the user to an external website when they tap on it.
To access the PRO Editor you need to create a new project or open an existing one and click on the PRO Editor button in the bottom left corner of the screen.
Once in the PRO Editor, select your Scene on the layers tab on the right.
Click on the NEW button under the SCRIPT section and click EDIT to open the code editor.
Copy and paste the following code into the code editor:
let uiContainer = {
id: 'welcome-btn-ui',
domElement: undefined,
imgElement: undefined,
}
function start(){
unloadHTMLUI = loadHTMLUI();
}
function stop() {
uiContainer.domElement && uiContainer.domElement.remove()
uiContainer = {};
}
function loadHTMLUI() {
const container = document.createElement('div');
container.id = uiContainer.id;
uiContainer.domElement = container;
Object.assign(container.style, {
postion: 'absolute',
position: 'absolute',
display: 'flex',
'align-items': 'center',
'justify-content': 'center',
bottom:'5vh',
width:'100%',
zIndex: 1,
})
const a = document.createElement('a')
// put the link that will open when the user taps on a button below //
a.href='https://mywebar.com/';
a.target='_blank';
const img = document.createElement('img');
uiContainer.imgElement = img;
Object.assign(img.style, {
'max-width': '48vw',
height: 'auto'
})
// put the image you want to use as a button below //
img.src = 'https://mywebar-a.akamaihd.net/1150/130384/btn.png';
a.appendChild(img);
container.appendChild(a);
document.body.appendChild(container);
const unloadHTMLUI = () => {
document.body.removeChild(container)
}
return unloadHTMLUI
}
function update( event ) {}
To specify the link that will open when the user taps on a button, change the a.href value in this part of your code:
const a = document.createElement('a')
a.href='https://mywebar.com/';
a.target='_blank';
To change the looks of your button replace the img.src value with a link to your own image:
img.src = 'https://mywebar-a.akamaihd.net/1150/130384/btn.png';
a.appendChild(img);
container.appendChild(a);
You can adjust the position of your button by changing the following values:
const container = document.createElement('div');
container.id = uiContainer.id;
uiContainer.domElement = container;
Object.assign(container.style, {
postion: 'absolute',
position: 'absolute',
display: 'flex',
'align-items': 'center', // align items by left, right or center of the screen //
'justify-content': 'center',
bottom:'5vh', // set the padding from the top, bottom, left or right side of the screen //
width:'100%', // set the width of your button //
zIndex: 1,
Once your button script is complete, you need to export your scene from the PRO Editor. You can do it by clicking on the File option on the top bar, then selecting Export.
A .zip archive will be downloaded on your computer. Extract it into any folder and find the app.json file inside.
Go back to your MyWebAR dashboard, create a new project or open an existing one and find the JSON MAE object type on the left panel.
Click on the + icon next to it and select the app.json file you've extracted from the archive to import it into your project.
Please note that the button itself will not be visible in the editor, but you can see it in the preview* or when you launch the experience on your mobile device.
*The element in the preview mode is displayed relative to the size of the window and does not reflect its actual size on a mobile device.
*The element in the preview mode is displayed relative to the size of the window and does not reflect its actual size on a mobile device.
Related Topics: