Cge tutorial - custom colors

CGE TUTORIAL - CUSTOM COLORS

If you have Facer premium, you can design watch faces and utilize the theme picker (color picker) which is pretty cool and offers end users to choose a theme. To do this you simply tap on the paint brush of any layer that you wish to be theme-able.

But, what if some of the Facer theme colors don’t work with your idea? If you want to create your own custom palette, you can do so using VAR functions.
In this tutorial I will be using custom backgrounds but you can use the theory for many other things.
1st, create the number of backgrounds (layers) you want, and choose the custom color for each background.
In the opacity setting for each layer you will use the following code:

$#VAR_1#%A==B?100:0$

Change A to the total number of backgrounds you have and keep it the same for every layer.
Change B for each layer starting at 0 and increase consecutively to the last layer.
For example, if you only wanted 3 backgrounds you would create three layers and in each opacity field you would enter the following:
1.

$#VAR_1#%3==0?100:0$

$#VAR_1#%3==1?100:0$

$#VAR_1#%3==2?100:0$

In my example face attached, I have 10 colors (layers), so the 1st layer (white) uses

$#VAR_1#%10==0?100:0$

Layer two uses:

$#VAR_1#%10==1?100:0$

and so on.

Finally, add a VAR increment and VAR decrement layer so that your users can cycle through your chosen themes. Please let me know if you have any questions, and remember to have FUN!!

10 Likes

Great idea and nice tutorial!

2 Likes

Thank you for this, a great solution to the very limited Theme option and a shame Facer developers never pushed/added such features.
Just tried this out on various elements and works well, ideal for those wanting to design watches with only a pre-set/certain colour range (i.e. pastel ranges).

2 Likes

Excellently explained, great Tutorial thanks @thomasfmal :beers:

1 Like

Thanks for this tutorial, it’s really useful, I didn’t know how exactly to use VAR Now I’ll try to see if I succeed. Thanks alot

1 Like

This code works fine when it starts clicking on next color, but when it starts clicking on last color, the code hangs on white color.

I used this code and it seems to have worked better:

$(#VAR_1#%10)==9?100:0$$(#VAR_1#%10)==-0?100:0$
$(#VAR_1#%10)==8?100:0$$(#VAR_1#%10)==-1?100:0$
$(#VAR_1#%10)==7?100:0$$(#VAR_1#%10)==-2?100:0$
$(#VAR_1#%10)==6?100:0$$(#VAR_1#%10)==-3?100:0$
$(#VAR_1#%10)==5?100:0$$(#VAR_1#%10)==-4?100:0$
$(#VAR_1#%10)==4?100:0$$(#VAR_1#%10)==-5?100:0$
$(#VAR_1#%10)==3?100:0$$(#VAR_1#%10)==-6?100:0$
$(#VAR_1#%10)==2?100:0$$(#VAR_1#%10)==-7?100:0$
$(#VAR_1#%10)==1?100:0$$(#VAR_1#%10)==-8?100:0$
$(#VAR_1#%10)==0?100:0$

This code I used was from Pascal - Spes lucis

Pascal - Spes lucis - watch face for Apple Watch, Samsung Gear S3, Huawei Watch, and more - Facer

Thanks Pascal for releasing your code, it helps the community a lot, by the way, thanks to everyone who releases their code for inspection.

1 Like

@chaficfeguri I note after Inspecting the work of Pascal you have flagged he does not use the VAR for the Colour changing on the Face but the Facer Theme . This Tutorial was specifically about changing Colours with VAR . The thing with these Tutorials is to keep them simple for People who are starting out on thier Face Making Journey not at the End Like Myself .

4 Likes

Very well scored, I sing more simply explained so that we can use Facer to the maximum. I think there are others like me who don’t know programming and we look at some formulas and then put our hands in our heads because we don’t know what to do with them.

2 Likes

Some use the Descriptive form of maths . Peter is brilliant as well . I will not invoke him but you see him here as petruuccios I have removed the @ as I keep invoking him . Again well done @thomasfmal .
You will be surprised what you are able to remember and do after you have put in your 1000 hours . I would say to myself I can never remember this .

That is the way Increment and decrement works in this example. White is the 1st background (0) so think of it as the default. If you tap on reset it brings you back to white. So, the decrement (or back) works as intended, not going back beyond the default.

2 Likes

I did a test with this code on my watch . It did not hang , Modulo ensured that it started round the cycle again Exactly as Modulo is suppose to work . Having decrement and Reset is a Luxury .

Hi I’m new to the Facer Creator and just published my first few faces.
I will try this coding. I think it’s great people are willing to share and pass on thoughts and their own ideas.
Could you possibly help with a tutorial or better still coding to create a mask for a font?
Ian[quote=“thomasfmal, post:1, topic:86708, full:true”]
CGE TUTORIAL - CUSTOM COLORS

If you have Facer premium, you can design watch faces and utilize the theme picker (color picker) which is pretty cool and offers end users to choose a theme. To do this you simply tap on the paint brush of any layer that you wish to be theme-able.

But, what if some of the Facer theme colors don’t work with your idea? If you want to create your own custom palette, you can do so using VAR functions.
In this tutorial I will be using custom backgrounds but you can use the theory for many other things.
1st, create the number of backgrounds (layers) you want, and choose the custom color for each background.
In the opacity setting for each layer you will use the following code:

$#VAR_1#%A==B?100:0$

Change A to the total number of backgrounds you have and keep it the same for every layer.
Change B for each layer starting at 0 and increase consecutively to the last layer.
For example, if you only wanted 3 backgrounds you would create three layers and in each opacity field you would enter the following:
1.

$#VAR_1#%3==0?100:0$

$#VAR_1#%3==1?100:0$

$#VAR_1#%3==2?100:0$

In my example face attached, I have 10 colors (layers), so the 1st layer (white) uses

$#VAR_1#%10==0?100:0$

Layer two uses:

$#VAR_1#%10==1?100:0$

and so on.

Finally, add a VAR increment and VAR decrement layer so that your users can cycle through your chosen themes. Please let me know if you have any questions, and remember to have FUN!!
[/quote]

Brill! I will try this.
Can you possibly help with setting up a mask for a font. I’ve tried to find if anyone has addressed anything about this but couldn’t find anything.
Ian

What do you mean by that? Please describe what should it do.

For changing text color you have to use same principle as for background, prepare multiple duplicates of your text layer adjust their individual colors and use the formulas with variable tag like in those examples given above. Or inspect the one below

1 Like

Hi,

What I’m trying (without success) is to have the minutes font not as 1 colour but the font having a gradient colour (I’m calling this a mask) so that when the number is on screen the number is a coloured gradient. Example is Gulliver’s watchface GLL - BN 3.0 BIG NUMBERS

Ian

I think the Face you refer to is created with transparent images as numbers (Like cut out numbers so to speak) then a rotating colored background under the image layers. I could be wrong but its what it seems like to me :slight_smile:

Inspect this example. It changes colors fluently. The font has all letters and digits as full black squares with hollow glyphs and the gradient runs below them.

3 Likes

Not sure I follow.
Very new to this.
Thanks anyway.
Ian

Im very confused. I cant find an A or a B. When I use that top code it justy turns opacity to 0.
\

2 Likes

@brandonfortin11 If you are talking about this .
It is a way of explaining that the number A can can be tested by B to give TRUE and run the option .

$#VAR_1#%A==B?100:0$

I could be something like this .

$#VAR_1#%6==3?100:0$

Remember that Vars start at Zero so the highest number for your test will be 5 .

Test it . You might be better of looking at the toggle VAR which gives you 0 or 1.

Thanks for the reply. Thats way over my head. I would need to have someone walk me through it step by step.

1 Like