{"id":385,"date":"2014-11-20T13:02:01","date_gmt":"2014-11-20T21:02:01","guid":{"rendered":"http:\/\/appinventor.pevest.com\/?p=385"},"modified":"2026-01-11T03:42:00","modified_gmt":"2026-01-11T03:42:00","slug":"changing-an-app-inventor-buttons-color-continuously","status":"publish","type":"post","link":"https:\/\/coldstreams.com\/appinventor\/2014\/11\/20\/changing-an-app-inventor-buttons-color-continuously\/","title":{"rendered":"Changing an App Inventor button&#8217;s color continuously"},"content":{"rendered":"<p>How to implement a button that\u00a0continuously changes color, as demonstrated in this\u00a0<a href=\"https:\/\/www.youtube.com\/watch?v=xGlSakV49LI\">video example<\/a>:<\/p>\n<p><iframe loading=\"lazy\" src=\"\/\/www.youtube.com\/embed\/xGlSakV49LI\" width=\"560\" height=\"315\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n<p><strong>The Designer View<\/strong><\/p>\n<p>Create a simple user interface with two buttons &#8211; one to start the color change\u00a0and the other to stop the color changes. In the button properties, set the button shape to &#8220;oval&#8221;.<\/p>\n<p><a href=\"http:\/\/appinventor.pevest.com\/wp-content\/uploads\/2014\/11\/ButtonChangeColors3-Designer.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-383\" src=\"http:\/\/appinventor.pevest.com\/wp-content\/uploads\/2014\/11\/ButtonChangeColors3-Designer.png\" alt=\"ButtonChangeColors3-Designer\" width=\"306\" height=\"504\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p>Drag a clock component into the Designer &#8211; the Clock\u00a0will appear as a non-visible component at the bottom of the Viewer.<\/p>\n<p><strong>Blocks Code<\/strong><\/p>\n<p><!--more--><\/p>\n<p>The key to making color\u00a0change continuously is the use of the clock as a timer. The clock generates an event at a specified interval &#8211; think of this as being like a &#8220;clock tick&#8221;. At each clock tick, the color property of the button is set to a new color.<\/p>\n<p>By making the tick events occur rapidly, the color value may be adjusted in small increments.<\/p>\n<p>In the previous tutorial on button colors, the color property was set using &#8220;color swatches&#8221;. 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 &#8220;amount&#8221; of each color red, green or blue is\u00a0specified with a number from 0 to 255.<\/p>\n<p>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. \u00a0If positive, then the color value is incremented by the amount shown; if negative, then the color changes in the other direction.<\/p>\n<p><a href=\"http:\/\/appinventor.pevest.com\/wp-content\/uploads\/2014\/11\/ButtonColors3-VarInit.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-403 size-medium\" src=\"http:\/\/appinventor.pevest.com\/wp-content\/uploads\/2014\/11\/ButtonColors3-VarInit-300x177.png\" alt=\"ButtonColors3-VarInit\" width=\"300\" height=\"177\" \/><\/a><\/p>\n<p>When the program starts, the timer is turned off by setting the <em>Clock1.TimerEnabled<\/em> property to false. The button handler for the start button sets <em>TimerEnabled<\/em> to true, and the stop button handler sets it to false.<\/p>\n<p><a href=\"http:\/\/appinventor.pevest.com\/wp-content\/uploads\/2014\/11\/ButtonColors3-Buttons.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-medium wp-image-405\" src=\"http:\/\/appinventor.pevest.com\/wp-content\/uploads\/2014\/11\/ButtonColors3-Buttons-300x190.png\" alt=\"ButtonColors3-Buttons\" width=\"300\" height=\"190\" \/><\/a><\/p>\n<p>The interesting part of the program that changes the color are the two parts inside the <em>Clock1.Timer<\/em> event handler: (1) the use of the<em> make color<\/em> block, and (2) the method of selecting and changing the colors at each timer tick.<\/p>\n<p><em><strong>Make Color<\/strong><\/em><\/p>\n<p>The <em>make color<\/em> block converts three numbers (for red, green and blue) into a color value for assigning to the button&#8217;s <em>BackgroundColor<\/em>. As you can see below, the three values are bundled into a list.<\/p>\n<p>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 time through the loop the number representing the red color is incremented by the value of the <em>ColorChangeRate<\/em> variable, which is either 10 or -10. (Experiment by using different values!)<\/p>\n<p>Lower numbers are dark red and higher numbers are a brighter red.<\/p>\n<p>The starting value is 100 to avoid very dark red colors. Initially, the <em>ColorChangeRate<\/em> is added to <em>Red<\/em>. If we start at 100, then at the next timer tick, <em>Red<\/em> is set to 110, then 120, then 130, and so on, until it exceeds 255. At that point, the <em>ColorChangeRate<\/em> is set to -10; thereafter, at each timer tick, the value of <em>Red<\/em> goes downwards until it is less than 100, at which point, the color direction is reversed. \u00a0This results in the button gradually becoming brighter, then darker, then brighter, then darker.<\/p>\n<p><a href=\"http:\/\/appinventor.pevest.com\/wp-content\/uploads\/2014\/11\/ButtonsColors3-Timer.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-406 size-full\" src=\"http:\/\/appinventor.pevest.com\/wp-content\/uploads\/2014\/11\/ButtonsColors3-Timer.png\" alt=\"ButtonsColors3-Timer\" width=\"722\" height=\"380\" \/><\/a><\/p>\n<p>The timer event occurs every 10 milliseconds &#8211; you can change this value in the Designer by selecting the <em>Clock1<\/em> component and changing the properties for the clock.<\/p>\n<p>The <em>make color<\/em> 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!)<\/p>\n<p><strong>Key Features Shown<\/strong><\/p>\n<ul>\n<li>Use of the clock timer to generate an event<\/li>\n<li>Use of <em>make color<\/em> to create colors by mixing red, green and blue values.<\/li>\n<li>This technique could be used for other components and component properties.<\/li>\n<li>This technique may use additional battery power due to the processing of the timer ticks at frequent intervals while the app is running.<\/li>\n<\/ul>\n<p><strong>Experiment<\/strong><\/p>\n<p>Experiment by changing the <em>ColorChangeRate<\/em>, changing the initial values of all of the colors or changing the start\/stop values of 100 and 255 to other values.<\/p>\n<p><strong>Downloads<\/strong><\/p>\n<ul>\n<li><a href=\"http:\/\/appinventor.pevest.com\/source\/tutorials\/ButtonChangeColors3.aia\">Source code App Inventor \u201c.aia\u201d source file<\/a>\u00a0(App Inventor source code files have the filename extension .aia)<\/li>\n<li>Download the source code to your computer. Then, in App Inventor, go to the Projects menu and select \u201cImport project (.aia) from my computer\u2026\u201d<\/li>\n<\/ul>\n<p><strong>Please Share on Social Media<\/strong><\/p>\n<p>Please click on the buttons below this post to share with your friends on Facebook or other social media.<\/p>\n<p>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!<\/p>\n<p><a href=\"https:\/\/www.facebook.com\/appinventor2\"><img decoding=\"async\" class=\"aligncenter\" src=\"http:\/\/appinventor.pevest.com\/wp-content\/uploads\/2014\/10\/facebook-like.png\" alt=\"\" width=\"150\" \/><\/a><a href=\"http:\/\/appinventor.pevest.com\/?feed=rss2\"><img decoding=\"async\" class=\"aligncenter\" src=\"http:\/\/coldstreams.com\/images\/rss.png\" alt=\"\" \/><\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>How to implement a button that\u00a0continuously changes color, as demonstrated in this\u00a0video example: The Designer View Create a simple user interface with two buttons &#8211; one to start the color change\u00a0and the other to stop the color changes. In the button properties, set the button shape to &#8220;oval&#8221;. &nbsp; Drag a clock component into the &hellip; <a href=\"https:\/\/coldstreams.com\/appinventor\/2014\/11\/20\/changing-an-app-inventor-buttons-color-continuously\/\" class=\"more-link\">Continue reading <span class=\"screen-reader-text\">Changing an App Inventor button&#8217;s color continuously<\/span> <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5,10],"tags":[],"class_list":["post-385","post","type-post","status-publish","format-standard","hentry","category-components","category-programming-method"],"_links":{"self":[{"href":"https:\/\/coldstreams.com\/appinventor\/wp-json\/wp\/v2\/posts\/385","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/coldstreams.com\/appinventor\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/coldstreams.com\/appinventor\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/coldstreams.com\/appinventor\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/coldstreams.com\/appinventor\/wp-json\/wp\/v2\/comments?post=385"}],"version-history":[{"count":2,"href":"https:\/\/coldstreams.com\/appinventor\/wp-json\/wp\/v2\/posts\/385\/revisions"}],"predecessor-version":[{"id":1852,"href":"https:\/\/coldstreams.com\/appinventor\/wp-json\/wp\/v2\/posts\/385\/revisions\/1852"}],"wp:attachment":[{"href":"https:\/\/coldstreams.com\/appinventor\/wp-json\/wp\/v2\/media?parent=385"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/coldstreams.com\/appinventor\/wp-json\/wp\/v2\/categories?post=385"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/coldstreams.com\/appinventor\/wp-json\/wp\/v2\/tags?post=385"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}