Watchmaker Wiki

The ultimate watch maker for Android Wear!

User Tools

Site Tools


tips:dynamiccolor

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revisionPrevious revision
Next revisionBoth sides next revision
tips:dynamiccolor [2015/01/28 05:38] – [Examples] rahul_pawatips:dynamiccolor [2015/01/28 05:43] – [Gradually Transition Color As Battery Drains, From Green to Yellow to Red] rahul_pawa
Line 53: Line 53:
  
  
-   {bl} > 66 and string.format('%x%s',(100-{bl})*255/33,'FF00') or {bl} > 16 and string.format('%s%x%s','FF',({bl}-16)*255/50,'00') or 'FF0000'+   {bl} > 66 and string.format('%x.2%s',(100-{bl})*255/33,'FF00') or {bl} > 16 and string.format('%s%.2x%s','FF',({bl}-16)*255/50,'00') or 'FF0000'
  
-Here again we are using a condition to set the color value of an object, this time the condition is {bl} > 66, and the value we get is a function of the battery level: string.format('%x%s',(100-{bl})*255/33,'FF00'). I will explain what that means, but the idea is the amount of red increases as the battery lowers from 100 to 66, effectively transitioning the color from a bright green to a bright yellow.+Here again we are using a condition to set the color value of an object, this time the condition is {bl} > 66, and the value we get is a function of the battery level: string.format('%.2x%s',(100-{bl})*255/33,'FF00'). I will explain what that means, but the idea is the amount of red increases as the battery lowers from 100 to 66, effectively transitioning the color from a bright green to a bright yellow.
  
-The string.format function is how you build a string in LUA. I am using it here to convert the decimal number generated by the formula (100-{bl})*255/33 into a hexadecimal number that is part of a 6 digit string that is the color code I want displayed. The part in the parenthesis after string.format are the function arguments, each argument is separated by a comma. So the first argument is '%x%s', second is (100-{bl})*255/33 and third is 'FF00'.+The string.format function is how you build a string in LUA. I am using it here to convert the decimal number generated by the formula (100-{bl})*255/33 into a hexadecimal number that is part of a 6 digit string that is the color code I want displayed. The part in the parenthesis after "string.formatare the function arguments, each argument is separated by a comma. So the first argument is '%.2x%s', second is (100-{bl})*255/33 and third is 'FF00'.
  
-Let's talk about that first argument, you always need something like this when you use string.format. It always needs the single quotes (' '), and in those quotes is a code that tells LUA what our string will look like. In this case, %tells it the first thing in our string will be a hexadecimal number, and %s tells us it will be followed by a string (some letters or numbers). The formatting here is also important, note that there is no space between %and %s, this tells LUA that there shouldn't be a space between the hexadecimal number and the string.+Let's talk about that first argument, you always need something like this when you use string.format. It always needs the single quotes (' '), and in those quotes is a code that tells LUA what our string will look like. In this case, %.2x tells it the first thing in our string will be a 2 digit hexadecimal number, and %s tells us it will be followed by a string (some letters or numbers). The formatting here is also important, note that there is no space between %.2x and %s, this tells LUA that there shouldn't be a space between the hexadecimal number and the string.
  
-The second argument is a linear formula that uses the battery level as its variable. It correlates to the %in the first argument. The formula itself is: (100-{bl})*255/33. I'm using this formula to set the red value of the color, I want it to be 0 when the battery is at 100, and 255 when the battery is at 67. Since this code only runs when the battery is greater than 66, the formula 100-{bl} will give us a number between 0 and 33. I then multiply by 255 and divide by 33 to change that range to 0-255. Simply putting %in the first argument does the hard work of converting the result into hexadecimal.+The second argument is a linear formula that uses the battery level as its variable. It correlates to the %.2x in the first argument. The formula itself is: (100-{bl})*255/33. I'm using this formula to set the red value of the color, I want it to be 0 when the battery is at 100, and 255 when the battery is at 67. Since this code only runs when the battery is greater than 66, the formula 100-{bl} will give us a number between 0 and 33. I then multiply by 255 and divide by 33 to change that range to 0-255. Simply putting %.2x in the first argument does the hard work of converting the result into hexadecimal.
  
 The third argument is a string that is simply the rest of the color code, in this case I want maximum green and no blue. The third argument is a string that is simply the rest of the color code, in this case I want maximum green and no blue.
Line 69: Line 69:
 There is similar code in the second condition to transition from yellow to red when the battery level is between 16 and 66: There is similar code in the second condition to transition from yellow to red when the battery level is between 16 and 66:
  
-   {bl} > 16 and string.format('%s%x%s','FF',({bl}-16)*255/50,'00')+   {bl} > 16 and string.format('%s%.2x%s','FF',({bl}-16)*255/50,'00')
  
 In the above you should note there are now four arguments in the string.format function. The three codes each correspond to arguments 2-4 in order. The formula has changed a little because I am using a bigger range, I've decided that I want the gradual transition from yellow to red to start at battery level = 66, and end at battery level = 16. In the above you should note there are now four arguments in the string.format function. The three codes each correspond to arguments 2-4 in order. The formula has changed a little because I am using a bigger range, I've decided that I want the gradual transition from yellow to red to start at battery level = 66, and end at battery level = 16.
tips/dynamiccolor.txt · Last modified: 2016/07/05 19:32 by wmissimer