Create Spirit level mobile application using SAP AppGyver

If you don't have any understanding of how the accelerometer works in AppGyver, then check out my previous blog on the accelerometer sensor in AppGyver.

To create this application, you need to know how layout positioning works. If you already know it, you can skip the explanation part by clicking here.

Layout position:

Layout position is one of the important properties for positioning a component on the application screen. Basically, there are two types of positioning, relative and absolute.

To understand clearly, I have created three containers with different background colors grown to their full width property, and removed all the default padding and spacing between the components.

Relative Positioning:

When I selected container 2 and changed the position to Relative and set 100px from the top. You can see container 2 moved 100px down from container 1 and container 3 was in the same position. Confusing? Don't worry, read further about absolute positioning.

Absolute Positioning:

When I selected container 2 and changed the position to absolute and set 100px from the top. You can see container 2 moved 100px down from the top of the screen and container 3 moved below container 1.

The main difference between relative and absolute position is the base point reference given to position the component. The offset distance is given in pixels. If an offset distance is not given, it is considered as 0px. We can provide two offsets as input for positioning the component. Container 2 width is reduced as it is not relative.

Spirit Level mobile application

Spirit level is used to indicate whether the surface is flat or not. As in most mobile phones, we have a good accelerometer sensor, we can create an application to achieve this easily using AppGyver.

Step 1: This application is going to consist of only one page stretched to the viewport height. I have disabled the navigation header bar and menu bar. Then create one base container with a height and width of 100%.

Step 2: Create a circle container with a width of 50px and any background color.

How to create a circle container?

• For better understanding, drag and drop a container under the base container and rename the component to circle.

• In the LAYOUT tab, select Exact Size and set the height and width of the container to 50px.

• In the STYLE tab, un branch SHAPE and set Fully round as the corner radius property.

Step 3: As you know, if the device is placed on a flat surface, then the value of X from the sensor is zero and the bubble will be in the center of the instrument. So let's give some offset for the circle container to be in the center as default.

How to offset the circle to the center of the device?

• Select the Circle container, go to the LAYOUT tab and set the position as Absolute, give some top offset of 25px and click on the left offset to provide the formula. I have chosen the formula as the width is different for each device.

• Provide the formula ( systemVars.dimensions.screen.width / 2 ) - 25

Step 4: Install the Start accelerometer poller from the flow function market place and trigger it once the page is mounted.

Step 5: My device's accelerometer reading is -10 to 10, as shown in my previous blog. It differs based on devices. When the device is placed on a flat surface, the value of X will be 0 and the device will be around +10 or -10 when the device is at 90 degrees. So let's add the accelerometer value to the left offset of the circle container.

Step 6: Since the range of sensor values is from -10 to 10 and the circle width is 50px, we are not able to see much difference in the movement if we are keeping the mobile at an angle.

If you shake the mobile, you can see the circle container moving left and right clearly as the value of the sensor will be more like 70.

How to overcome this and get a clear level indication?

• Let's multiply the sensor variable values by 10 to make the movement more visible, like shaking.

Step 7: Add a container to indicate how flat the surface is, like below.

Viola! The application is completed now.

Now you can add more components or add another indicator along the Y axis using systemVars.dimensions.screen.height and sensorVars.accelerometer.latestValue.x to make the app look great.

Suggestions and feedback are much appreciated. It encourages me to improve and share more content based on my experience with no code tools. If you have any doubts or queries, drop them in the comment section.