Step 1 of 4. Click here for main article.

First Step is to define which colors we want to use. We can use the 20 colors Google declares or just 2 colors.
For every color you want to use, you had to research the color code of this color. Blue for example is #2196f3 and yelow is #ffeb3b

Step 1 is splitted in Part A B C

Part A – Variable Declaration

Go to the watchface, click Customize watch.

Search for the field Script. You can click on the watch symbol in the left bottom corner an then scroll down to script.

The variable declaration could look like this:

var_colorcode = {'2196f3','ffeb3b'}

if we want to show the names of the colors in the watchface you could althoug decline:

var_colorname = {'Blue','Yellow'}

then we need a variable to choose, which color or name of the variables should be shown.

var_color = 1

1 is the start color, in this example blue, 2 is the yellow color or name. We use later the following expression to use a color or name

var_colorcode[var_color]
var_colorname[var_color]

This makes the color blue and the name blue, because the variable var_color is 1 and that is the first of the colors of the variable var_colorcode. If we change the variable var_color to 2, the the color switches to yellow.

but we want to use all 22 Colors(20 from Google plus dark grey and white an we want to start with the color number 4, names Deep Purple, so we use this:

var_color = 4

var_colorcode = {'f44336','e91e63','9c27b0','673ab7','3f51b5','2196f3','03a9f4','00bcd4','009688',
'4caf50','8bc34a','cddc39','ffeb3b','ffc107','ff9800','ff5722','795548','9e9e9e','607d8b','262626','fffffe'}

var_colorname = {'Red','Pink','Purple','Deep Purple','Indigo','Blue','Light Blue','Cyan','Teal','Green','Light Green','Lime','Yellow','Amber','Orange','Deep Orange','Brown','Grey','Blue Gray','Dark Grey','White'}

Part B – Declare function to change the color

We need to tell watchmaker, what to do if we click on a point on the watch to change the color. Or in other words: We need code to count up the variable var_color to change the color.

At first we choose the function name that later is triggered by tapping the face:

function change_color()
CODE HERE ……..
end

then we use code to count the variable one up, but if we reach the last color it begins at 1:

var_color = var_color + 1
if var_color == 22
then var_color = 1
end

If you use want to use for example only the first 10 of the colors, you exchange the 22 with an 11.

Together:

function change_color()
var_color = var_color + 1
if var_color == 22
then var_color = 1
end


Part C (optional) – Code to show the name of the color and fade it in and out.

wm_schedule
{
{ action='tween', tween='showcolorname', from=0, to=100, duration=0.5, easing=linear },
{ action='sleep', sleep=0.5 },
{ action='tween', tween='showcolorname', from=100, to=0, duration=0.5, easing=linear},
}

In short: In 0,5 seconds the opacitiy changes from 0 to 100, it stay for 0,5 seconds and then in another 0,5 seconds it disappears.

Detailed Explanation in Step 4(optional):Show name of Color in Popup

Complete Code:

var_color = 4

var_colorcode = {‚f44336′,’e91e63′,’9c27b0′,’673ab7′,’3f51b5′,’2196f3′,’03a9f4′,’00bcd4′,’009688‘,
‚4caf50′,’8bc34a‘,’cddc39′,’ffeb3b‘,’ffc107′,’ff9800′,’ff5722′,’795548′,’9e9e9e‘,’607d8b‘,’262626′,’fffffe‘}

var_colorname = {‚Red‘,’Pink‘,’Purple‘,’Deep Purple‘,’Indigo‘,’Blue‘,’Light Blue‘,’Cyan‘,’Teal‘,’Green‘,’Light Green‘,’Lime‘,’Yellow‘,’Amber‘,’Orange‘,’Deep Orange‘,’Brown‘,’Grey‘,’Blue Gray‘,’Dark Grey‘,’White‘}

function change_color()
var_color = var_color + 1
if var_color == 22
then var_color = 1
end
wm_schedule
{
{ action=’tween‘, tween=’showcolorname‘, from=0, to=100, duration=0.5, easing=linear },
{ action=’sleep‘, sleep=0.5 },
{ action=’tween‘, tween=’showcolorname‘, from=100, to=0, duration=0.5, easing=linear},
}
end

Continue in Step 2