Summary

Adding elements, such as buttons, all follow the same idea:

• Create a new element with a name
• Select its type
• Enter mandatory and optional information

Note that, due to you setting the dimensions of the must-see-area in the previous step (to 500x400), the canvas on which you can place elements is 500x400 pixels.
After the elements have been placed on the canvas, it will then be scaled up to fit the screen, scaling the elements accordingly to keep a consistent look.

How to

• At the bottom of the list, locate the Create a new element-field, and enter the name for the button (e.g. Measurement button).
• Click the add-button next to it to create it.
• The button should have appeared above. Locate it, and give it the title Start measurement.
• Click on the Element type-field, and select button.
• Click on the On click, go to-field, and select 02.01 - aoxQuickConnectScanner.
  • This is one of the pre-build pages you loaded in earlier, and the start of the measurement process. Clicking this button will now jump to the page 02.01 - aoxQuickConnectScanner, which will start the process.
    Starting the measurement is one of the functions a page can execute, and will not be covered in this tutorial.
• Set the button's width to 200px, and its height to 50px.
  • Note that some unit needs to be given to these values, in this case px. If you don't enter any unit, the value will be ignored by the application.
• For the button's position, select a left-position of 150px and a top-position of 300px.
  • This moves it 150px away from the left edge of the screen, and 300px away from the top of the screen.
  • Due to the canvas being 500 pixels wide, and the button being 200 pixels wide, leaving a space of 150 pixels left of it results in a space of the same width right of it, effectively centering the button.
• Save and preview the page again.

Optional settings

While the button now works and is positioned correctly, it looks very simple. The following steps are optional, but will allow you to create a more appealing button.

• Below the last field of the button, find the Add key-field. Entering a name here, and clicking the Add-button next to it, creates a new property of the button.
• Next to this new property, a value-field will appear, which has to be filled in order to specify the property's value.
• Create the property border-radius, with a value of 10px
• Create the property color, with a value of #FFFFFF
• Create the property background-color, with a value of #9c9d92
• Create the property font-size, with a value of 15px
• Create the property font-family, with a value of "Georgia", serif
  
• Save and preview the page again.

Done? Use the new page as the home screen