tips:dynamiccolor
Differences
This shows you the differences between two versions of the page.
Both sides previous revisionPrevious revisionNext revision | Previous revision | ||
tips:dynamiccolor [2015/01/21 21:16] – rahul_pawa | tips:dynamiccolor [2016/07/05 19:32] (current) – Correcting this entry to match below (which is correct) wmissimer | ||
---|---|---|---|
Line 16: | Line 16: | ||
- | Transition Color As Battery Drains, From Green to Yellow to Red | + | Gradually |
- | {bl} >= 66 and string.format(' | + | {bl} > 66 and string.format(' |
Line 26: | Line 26: | ||
Changing colors dynamically could be useful for making information stand out when it is most important, or to use color in familiar ways to represent information. | Changing colors dynamically could be useful for making information stand out when it is most important, or to use color in familiar ways to represent information. | ||
- | When creating code that sets the color of an object, it's important to understand how that code looks and what it means. Color code is a 6 digit hexadecimal number that represents the amount of red, green and blue in that color. The first two digits are the amount of red, the middle two digits are the amount of green and the last two digits are the amount of blue. Each pair of digits has a minimum value of 00 (none of that color at all), and a maximum value of FF. The code ' | + | When creating code that sets the color of an object, it's important to understand how that code looks and what it means. Color code is a 6 digit hexadecimal number that represents the amount of red, green and blue in that color. The first two digits are the amount of red, the middle two digits are the amount of green and the last two digits are the amount of blue. Each pair of digits has a minimum value of 00 (none of that color at all), and a maximum value of FF. Hexadecimal FF is equivalent to 255 in decimal. The code ' |
Hexadecimal is a number system that uses base 16, instead of the base 10 that our decimal number system uses. This means the numbers 0-15 can be represented by a single digit, to represent those numbers past 9, alphabet characters are used (i.e. 10 in decimal is A in hexadecimal, | Hexadecimal is a number system that uses base 16, instead of the base 10 that our decimal number system uses. This means the numbers 0-15 can be represented by a single digit, to represent those numbers past 9, alphabet characters are used (i.e. 10 in decimal is A in hexadecimal, | ||
- | We can use LUA code in Watchmaker to set the color of an object | + | In Watchmaker, you can insert |
Line 50: | Line 50: | ||
- | ==== Transition Color As Battery Drains, From Green to Yellow to Red ==== | + | ==== Gradually |
- | {bl} >= 66 and string.format(' | + | {bl} > 66 and string.format(' |
+ | |||
+ | 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(' | ||
+ | |||
+ | 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/ | ||
+ | |||
+ | 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' | ||
+ | |||
+ | 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/ | ||
+ | |||
+ | 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 result is that the color changes from bright green to bright yellow with each battery decrease. | ||
+ | |||
+ | 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(' | ||
+ | |||
+ | 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. | ||
+ | |||
+ | And finally, if the battery is below 16 the color will be bright red: | ||
+ | |||
+ | or ' | ||
+ | |||
+ | |||
+ | I put this code into a circle that is shaded using the segment shader option, with the code {bl}*3.6 for " | ||
+ | |||
+ | |||
+ | For help with selecting colors, visit [[http:// |
tips/dynamiccolor.txt · Last modified: 2016/07/05 19:32 by wmissimer