How to implement a button that continuously changes color, as demonstrated in this video example:

The Designer View

Create a simple user interface with two buttons – one to start the color change and the other to stop the color changes. In the button properties, set the button shape to “oval”.

 

Drag a clock component into the Designer – the Clock will appear as a non-visible component at the bottom of the Viewer.

Blocks Code

The key to making color change continuously is the use of the clock as a timer. The clock generates an event at a specified interval – think of this as being like a “clock tick”. At each clock tick, the color property of the button is set to a new color.

By making the tick events occur rapidly, the color value may be adjusted in small increments.

In the previous tutorial on button colors, the color property was set using “color swatches”. However, colors may also be generated from a set of numbers. All possible colors may be created by mixing various levels of red, green and blue colors. In App Inventor, the “amount” of each color red, green or blue is specified with a number from 0 to 255.

We begin by creating 3 variables to hold the values of red, green and blue, plus one extra variable that specifies the amount and direction of the color change.  If positive, then the color value is incremented by the amount shown; if negative, then the color changes in the other direction.

When the program starts, the timer is turned off by setting the Clock1.TimerEnabled property to false. The button handler for the start button sets TimerEnabled to true, and the stop button handler sets it to false.

The interesting part of the program that changes the color are the two part inside the Clock1.Timer event handler: (1) the use of the make color block, and (2) the method of selecting and changing the colors at each timer tick.

Make Color

The make color block converts three numbers (for red, green and blue) into a color value for assigning to the button’s BackgroundColor. As you can see below, the three values are bundled into a list.

How do we make the color change gradually? By adjusting the value of one or more of the colors at each clock tick. To keep this simple, the code adjusts only the red color value between 100 and 255. Each through the loop the number representing the red color is incremented by the value of the ColorChangeRate variable, which is either 10 or -10. (Experiment by using different values!)

Lower numbers are dark red and higher numbers are a brighter red.  The starting value is 100 to avoid very dark red colors. Initially, the ColorChangeRate is added to Red. If we start at 100, then at the next timer tick, Red is set to 110, then 120, then 130, and so on, until it exceeds 255. At that point, the ColorChangeRate is set to -10; thereafter, at each timer tick, the value of Red goes downwards until it is less than 100, at which point, the color direction is reversed.  This results in the button gradually becoming brighter, then darker, then brighter, then darker.

The timer event occurs every 10 milliseconds – you can change this value in the Designer by selecting the Clock1 component and changing the properties for the clock.

The make color block takes 3 input values, in the order shown: red, green, and blue. Each color value should be in the range 0 to 255. To experiment, adjust the color values in the Initialize blocks at the beginning of the program. You may also create a more complex color change scheme by changing the values of all three colors (Experiment!)

Key Features Shown

• Use of the clock timer to generate an event
• Use of make color to create colors by mixing red, green and blue values.
• This technique could be used for other components and component properties.
• This technique may use additional battery power due to the processing of the timer ticks at frequent intervals while the app is running.

Experiment

Experiment by changing the ColorChangeRate, changing the initial values of all of the colors or changing the start/stop values of 100 and 255 to other values.

Downloads

• Source code App Inventor “.aia” source file (App Inventor source code files have the filename extension .aia)
• Download the source code to your computer. Then, in App Inventor, go to the Projects menu and select “Import project (.aia) from my computer…”

Please Share on Social Media

Please click on the buttons below this post to share with your friends on Facebook or other social media.

If you are not already following this blog, click on the following links to like on Facebook, add to your Google+ circles or follow on Twitter or in your RSS news reader. Thank you for visiting!