[GUIDE] Masking to implement swaping of element

[Knightwing]

Hi,

if anyone wants to toggle on and off elements to do swaping , currently masking is the only way. And also used of the customization editor to merge the elements styles.

My example here toggles on and off the analog hands but at same time does the reverse to digital clock = swap.

Credit to @rollergold question

this is my outcome in my example

masking basics

1. put the “mask” meaning for this case the transparent image as the layer on top of the digital clock.
2. select the mask and the digital clock layer
3. right click and select mask.
   I used mask for the digital clock

for analog hands I used just another option which is the transparent image.
select the image (hand ) then click the + sign next to style to add another option.

you should see as I circled.

take note of the order of the style options.
digital clock default is transparent.
but analog hands default is the image of the hand.

after doing all this steps you can do a merge in customization editor by clicking “customization editor”

a transparent image for you to used.

image_transparent.zip (1.0 KB)

in case anyone doesnt know how to create transparent mask

P.s hope there can be a way to just use boolean tags (on tap) to toggle, it be much easier

Edit:

For complication though, masking doesnt work.
Only a empty complication will hide the complication

[hirnverbrandt]

Wow, that’s awesome! I have just tried it out and I was actually able to reproduce your example. Great tip, I did not know that you could merge styles in the customization editor. A whole new world of options now

[parisienne17]

Surely I’m dumb but this just doesn’t work for me and one step I don’t understant as it is not covered here is the opening explorer window when I click the + sign in style.
What am I supposed to choose ? The transparent image ? The hand image ? And HOW the hand image disappear to show the text image and forth ?

[russellcresser]

You have to work through this tutorial Step by step . You see that someone else has got it working . It is an advanced tutorial . As I see it there are Two layers . One with Digital clock and one with a hand . I have not worked through the Tutorial . I need to do it practically to completely understand . Keep at it .

[parisienne17]

So…

1. It (so far) only works with picture on top, revealed thru the bottom masked element.
2. 2. The top picture must be in the mask group, in top layer.
3. It’s in no way a swap thing, just restraining the shape display of the top image by/thru the shape of the bottom one.

II have a face displaying a collapsing circle housing “Step count” text with its value underneath, fading to the smae circle housing antother text/value that I was eager to mimic.

Somewhere I’ve read that it is only achievable in … android studio or something like that and coding. Is that true ?

[Peter]

lets have multiple texts that we want to cycle trough by picking style laying one over another in same place

lets create same number masking images, each image will be in same spot, covering whole text

each image will start as transparent if you want to have one more style where none of texts is displayed, or one of them will be white and others start transparent

add as many styles as many optional texts you want to display. if its the first mask that started as white add only transparent ones. if its the second in row, add first style white all other transparent and so on.

open customization editor
shift all styles into one set

unzip attached file and test it in preview switching styles
MaskingSwap.zip (165.8 KB)

[russellcresser]

Nice one Peter. Topic Bookmarked. Thank you.

[Knightwing]

First under what masking mean. You are styling the mask not the image.

A transparent mask made image disappeared, other type of mask makes image changes color etc.

Then follow peter’s example

Make use of grouping /merge styles to mimic swaping

As u see style 1 (first style selection) will show hand

As for style 2 it will show digital clock

[parisienne17]

If I’m not mistaken, it’s unfortunately quite ‘fixed’ swap, as one has to :

• Go to customizing the actual face.
• Select the desired style.

I was looking for an auto cycling like this : sorry (as I got notifications that “my browser doesn’t support that codec” (X264 or MP4 or AVI), I guess that the site doesn’t allow videos when these extensions are valid in explorer windows), so the video is nonpublic in youtube

[Gondwana]

I don’t think that automatic swapping could be achieved entirely in WFS. However, if you extract the watchface.xml and add a WFF block based on [SEC], you should be able to have elements swap based on time. You’d have to build and install the modified code independently of WFS.

The x-scaling might also be possible; it would also need to be triggered by [SEC].

The underlying constraints are that WFF is declarative rather than procedural (functional), and WFS doesn’t expose the full capabilities of WFF.

[parisienne17]

Oky. Let’s talk earthly rather than martian : first, what’s WFF ?

[Gondwana]

WFF. WFS creates WFF.

[Knightwing]

Wff = watch face format

[Knightwing]

Play with opacity and the [sec] tag?

Base on time. And the size, of image with [SEC]

Or any time base tag. No need to extract wff.

What u asking is beyond the scope of this guide.

But might be doable. Please start another thread to ask for help

[Peter]

@parisienne17

I was looking for an auto cycling like this

Ok, you could have said it earlier. In general WFS can not make such smooth animated width shift, as it can not change the texts aspect ratio. Some transition could be arranged, but I do not expect it to look good. Yet simple swapping based on time is easy.
lets have 3 elements to cyclically swap and stay for 2 seconds. their opacity could be like this
first 0+(([SEC]%6==0)+([SEC]%6==1))*100
second 0+(([SEC]%6==2)+([SEC]%6==3))*100
third 0+(([SEC]%6==4)+([SEC]%6==5))*100

[Gondwana]

WFS can’t scale text, but WFF can. See “Sep 24” in the attached pic (which is just my playgound project). More here. Admittedly, this approach is messier than WFS.