Creating dynamic color using an accelerometer sensor for mobile applications

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

In this application, I am going to make use of the RGB color function provided by AppGyver. The RGB function is used to generate a color based on the given red, green, blue, and alpha values. As we have X, Y, and Z values available from accelerometer sensors, I am going to pass only red, green, and blue as input to the RGB function.

RGB function

Each input parameter to the RGB function defines the intensity of the color as an integer between 0 and 255.

RGB(red: Number, green: Number, blue: Number, alpha: Number = 1) => String

How am I going to use accelerometer sensor values?

As you know, my accelerometer sensor value range is from -10 to 10 while rotating or tilting, I am going to multiply this value by 25.5 as 255 is the maximum intensity of the color.

You might wonder what happens if the device is shaken. Doesn't the accelerometer sensor return values greater than 10?

Yes, when you are shaking the device fast, it is going to return values more than 10, but the specialty of this function is that it will return the rgb color code as 255 even if the color intensity has passed more than 255.

For example, see the output of the below image, in which I passed all the three input parameters of the function greater than 255.

The RGB function even takes care of rounding the input numbers.

Background, border and text color changing application

• Create a new page/container where you want to add dynamic color changes based on the accelerometer sensor.

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

• Provide the below formula for the respective text/background/border color. You can ignore the warnings.

"rgb("+ ABS(sensorVars.accelerometer.latestValue.x) * 25.5 +","+ ABS(sensorVars.accelerometer.latestValue.y)*25.5 + ","+ ABS(sensorVars.accelerometer.latestValue.z)*25.5 +")" 

• Viola!! Your application settings are ready. Shake, rotate, tilt, or rotate your device to see if it works. Click here to see how the application looks.

Why is ABS required in the formula?

The value of the accelerometer sensor will be in the range of -10 to 10. So sometimes negative values will be passed to the formula, and RGB will convert negative values to 0.

How to provide the formula for text color?

• Select the text component, then go to STYLE tab -> Text color -> click on bound icon -> Choose Formula as binding type -> click Create Formula -> paste the above formula -> SAVE

How to provide the formula for border color?

• Select the container component, then go to STYLE tab -> border color -> click on bound icon -> Choose Formula as binding type -> click Create Formula -> paste the above formula-> SAVE

How to provide the formula for background color?

• Select the container component, then go to STYLE tab -> background color -> click on NEW PALETTE -> Choose Formula as binding type -> paste the above formula -> SUBMIT -> select any content color which can allocated specifically for this -> CONVERT

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.