Toggle between 2-5 custom Bezels or Images

Okay so I have three different Bezels in different colors that I want to have the user toggle between.
Each basil has the code required in rotation to rotate the bezel +/- 1 or 5 minute increments as the original.

But now I would like to be able to have the user switch between three different color schemes just for the bezel I don’t know how to reference each bezel to a toggle variable.

I have tried putting the toggle variable expression in the opacity section of each color bezel to know avail.

I’m not quite sure how to tag the new bezel so that the tap area to change the bezel will work.

I know I can stack the variable tap areas so that’s not the issue.

If someone can please help that would be nice I would appreciate it.

It seemed I did do it once but in order to make it work I had to make the original opacity zero. But I wasn’t paying attention to the fields to see what I did.

1 Like

To illustrate the answer, create a blank test face, add a text field to show the value of #VAR_1# and another one to show the value of (#VAR_1%3) then add a button to increment (not toggle) VAR1.

VAR1 will keep incrementing for ever, but the result of the modulo function % will keep cycling from 0 to 2 only.

Using that principle, test the value of (#VAR_1%3) to see which of the 3 bezels to display, whether by moving it off screen or by changing opacity. A value of 0 for the first bezel, 1 for the second, etc. Likewise if you had say 7 bezels, you would test the value of (#VAR_1%7) and it would cycle 0 to 6.

2 Likes

. I don’t quite understand

Where am I placing the VAR code increment in my element fields?
I already have a VAR formula for changing the rotation in the rotation field.

(#VAR_1#)*30+(#VAR_2#)*6))

I have this formula in all three bezels in the rotation field the only thing I have left is the opacity field.
Do I need to add the new variable to the formula that already exists?
What would that look like?

My watch face works great with one bezel, so I figured I would have to duplicate the formula for the other two that I like to add with a different color background.

So my variable would not be var1 or VAR 2. But would have to start with VAR 3.

Can you give me an example of what I would need to write that is add to my rotation code in order to achieve three separate bezels. I think I understand the formula for multiple elements.

1 Like

You didn’t share the particulars of the face you’re working with, so I was replying somewhat blind, but now I know VAR1 and VAR 2 are already used.

So, your button to swap bezels would be using VAR3. In the opacity field of each of the 3 bezels you would use that basic formula to test VAR3 with the modulo function, and decide whether to show or hide each bezel using its opacity:
Bezel 1: $(#VAR_3#%3)==0?100:0$
Bezel 2: $(#VAR_3#%3)==1?100:0$
Bezel 3: $(#VAR_3#%3)==2?100:0$

Here’s a sample test you might want to inspect. I’m using dummy text fields instead of the bezels. I hope this makes it more clear.

3 Likes

Yes… Thanks for help… Works great!

So to add more bezels $(#VAR_3#%3)==0?100:0$ increase the “%number” and “Number?”

$(#VAR_3#%5)==0?100:0$
$(#VAR_3#%5)==1?100:0$
$(#VAR_3#%5)==2?100:0$
$(#VAR_3#%5)==3?100:0$
$(#VAR_3#%5)==4?100:0$

Put the expression in the Opacity field of the bezel. For your first option, place the first expression that defines that element with 0, the first expression above, in the opacity field. Continue with your other elements with increasing numbers. The second element you want as an option will have the number one, or the second expression above

and add ONE #VAR_3# increment button. Now the number variable increment that you would use is depending upon whether or not you’ve already used a few or not. If you have not used any then you could use variable one in increment in this example. For me I already had two that were used so I had to start with the next one in line.

3 Likes

Exactly, glad it worked!

So basically $(#VAR_3#%A)==B?100:0$ where A is the total number of bezels (or any other element for that matter), and B is the “bezel number” (counting from 0).

5 Likes

Great Tutorial @kourosh. Topic Bookmarked. @parbib Yuo may wish to change the Title of the Topic as using Theme in there could be mislead with the Facer Colour Theme Facility which is different and not switched with VAR. Just use the description of Bezels or Images.
Looking forward to seeing the Result.

1 Like

Here is the link to the published watch face… Thanks for all your help Kourosh,

3 Likes

Good stuff . You got the Foundations Of Most of the VAR Stuff there .

Yeah this is really helped in helping me understand at least the basic usages as far as the formulas go

I’m still learning that stuff even the simple ones.

I know somewhere on this site is an explanation of all the symbols that are used in the coding I’ll have to find them and refresh my memory on that stuff

But I have copied these formulas onto a Word document and instructions on how to use them so the more that I use them of course the better I’ll get at using them

1 Like

Hi
@parbib thanks for the topic which i’ve been looking for
@kourosh thanks for the solution

i’ve tried it with my latest published design
https://www.facer.io/watchface/2ue44x3wW6?watchModel=gw5progray

and how it looks in promotional image:

Thanks again for Community member and wish you have a great weekend

1 Like

I am glad that this topic turned out this way. It will be useful for many newbies that don’t understand how to write code yet.

Wow! Great work!

The possibilities :smiley:

2 Likes