Fade out single image on tap then fade back in automatically after 2 seconds

I like to overlay the lower part of the watch face (lower half of circle) with a single image that basically hides a layer underneath that image.

Now, I like the user to be able to tap the lower part of the screen (overlaid image) to initiate a fade out of that image thus revealing the layer below. Then after 2 or 3 seconds the image should fade back in automatically thereby hiding the lower layer again.

Any help would be greatly appreciated. Thanks in advance!

1 Like

Hey @timeasart Welcome to the Facer User Community.

You must know you have to be a PRO User to get involved with any Tap interaction.

Without that you coud fade a mask on an off with the accelerometer sensor. ( wrist action.)

When We know which opton is best for You we can continue. It would be really good if you could post a link to your draft to save us doing all the slog making a test.

Get back with some sort of picture.

1 Like

Hi russellcresser. Thanks for the warm welcome and reply - very much appreciated.

If this is something that is possible then I definitely will become a Pro member since the ‘tap’ event would be preferred.

I have attached a diagram. Basically I have a .png image (Layer A) that covers the layer below (Layer B). I would like it to behave that once the user clicks on Layer A it then fades out via opacity and reveals Layer B. After 3 seconds Layer A then automatically fades back in via opacity and hides Layer B. So we basically would have to control only one .png image on Layer A to do the actions as described above.

Hopefully something like this is possible. Any help and pointers would be greatly valued.

1 Like

OK. So when I get a moment I will make a Test. But I know it is something to do with #VAR_1_TE#. I need to be on my PC to do anything. I see from you Profile you have not published anything. I will say that to start your Face Making Journey with something like this is jumping in at the Deep End. You obviously have Graphics skills.

You will have to Subscribe to PRO for what you want to do and in the meantime check out the Facer Documents.
You can always post a link to a draft here so we can see where you are in your journey.

Here is a quick Pre Breakfast test . It is a WIP so keep an eye on it . It just switches at the moment . Fading is just a matter of playing with the running number . Ha Ha . You might be able to take it from here .

I presume you know how to Inspect this . Click on the Title and the little rocket on the left.

1 Like

Hello, well you are my hero…! This is exactly what I was looking for! Thanks also for the hint on inspection which I would not have known.

I went through your setup in the inspection mode and can follow the coding - one thing I could not figure out is how/where the timer is set for 3 seconds or is this only visible in Pro mode (I also can get the 3 day trial in Pro mode). Another quick question: I checked the documentation and could not find what #VAR_1_TE# stands for - there is only a reference to #VAR_1_T#.

And let me ask you this - and this is only optional since you gave already so much of your time: would it be possible to fade things in/out rather than on/off?

… and let me say this - your generous and quick support & help to my question is outstanding and I truly appreciated it - you made my day!

1 Like

Hello again - have figured out the 3 second timer - I just didn’t scroll the ‘Opacity’ field of the ‘Date’ and the ‘Shape’ layers. I just wondered why the expressions ended with a ‘.’ until I figured out there is more (sorry newbie issue).

But if you could get back to my other questions:

  1. #VAR_1_TE#: what does this stand for or is this just a custom variable?
  2. Possibility of fade in/fade out

Thanks again for everything and sticking with me here while I get used to the UI and coding…!

1 Like

Hey @timeasart I will continue as you have come back . I am not a teacher so I can only lead with example . The fading will be a bit of Voodoo as I am not a Mathematician and My code is creative . Once we have something we can always see if the Cavalry can Improve things . Keep an Eye on the WIP . I will try have something sorted in an Hour or so .

Sorry I am surprised TE ids no in the docs .

Right down the bottom .

Hello russellcresser - thanks for all the perseverance, patience and good will in helping to solve this riddle.

Ah yes, the #VAR_1_TE# is defined at the end of the ‘Tags’ page - I had searched the forum but couldn’t find anything - thanks for the hint!

Let’s keep fingers crossed we can figure things out… I totally understand the Mathematician note same here…

Thanks again for sticking with me here - it is so much appreciated and thanks for making my first experience in the forum such a positive and pleasant one!

1 Like

Check the WIP . It is a bit of Voodoo .
See the code . It just over runs but we don’t see the effect . It is not a problem it is quite common to have runaway numbers in the background ,


You obviously understand the structure of the conditional . I am a bit old school and don’t like to meddle with the structure too much but what happens in-between is our business .
So I have reduced the VAR to count 1/10 second so it counts up to 100 in a second lighting the layer . So after two seconds we do some subtraction and run a large negative number who cares . You can play carefully to see if you can adjust it .
If you don’t like Black Magic you could show it on the Community not saying it was my Fault and see if someone could improve on it .

BTW . I have never played with TE before so you must forgive the Creative approach .

1 Like

Hello @russellcresser . Well I said in my previous email you ‘made my day’ - let me re-phrase - you ‘made my week’.

Thank you so very much for all your kind help and efforts - it is exemplary! As for the Voodoo coding - I believe there are many paths leading to the mountain top - so there is really no ‘right’ one. As long as the path leads you to your destination it is great!

Yes, let me play with this a little to find my way and see what effects value changes have. One nifty thing would be if the fade-in layer could fade in, then stay at 100% for about 2 seconds (for readability) and then fade out. One way I can think about how to do this could be 2 copies of the same fade-in layer: one that fades in, then stays at 100%, the second copy then hides the first copy and fade itself out?

In any case - let me say a zillion thanks to you and thank you for taking on the challenge - you made the facer coding a little more understandable for me and helped me to realize something that was just an idea in my head…

1 Like

Yeah the fades at the moment are 1 second obviously. Leaving a 1 second hold… So you have tw choices. Extend the whole event to 4 seconds. 1+2+1. Or have a half second fade. I felt that might be a bit Zippy. But have a play and if you get stuck get back. I am very pleased to say you can not break any thing by changing those numbers.
There are ways to limit the Range of numbers being generated with clamp. But I think you have enough on your plate at the moment.

Thank you so much again. Yes, let me play a little with the setup. I assume I have to re-create the setup since when in inspector mode the small watch preview (right side) does not animate and the larger ‘Showcase’ preview does not take the modified values since saving is disabled. Please let me know if I miss anything here… but no need to reply, you already gave so much.

And thanks for you offer for further assistance if needed… :wink:

1 Like

No you are right. But on inspection you can play and copy and paste thr code into a test of your own or Notepad. Something that does not format the text.
I am as confused as you about where and what simulates this and that. The apps simulate Gyro stuff but not interactives. That is why this stuff is difficult when you are learning.

Hello @russellcresser Thanks so much for the note. I was able to play with your code a little and found it to be very flexible and adaptable and I think it will be just perfect since timings can be changed easily - so thank you very much again!

I wasn’t aware that facer uses a vibration event for taps - I had dabbled a little in Samsung’s Watch Face Designer and there it is handled more subtle with only a tap highlight - but it looks like that’s just how it is.

I hope to have a few watch faces up in the coming weeks. I am also thinking of using something with the ‘gyro’ sensor - so let’s see how things go.

One thing I wanted to ask you - is there any nifty code to automatically switch the digital hours between 12/24 hours depending on the users watch settings?

Thanks again!

1 Like

Facer does not use Vibration to pick up ,the TAP .It is the capacitive sensor on the display .

There are several ways of doing 12/24 hrs Digital

The default #Db#:#DmZ# Gives you that .

If you do (pad((#Db#),2)):#DmZ# you get a leading zero on both .

If you scroll down to the bottom of the sliders you will see the 12 24 hrs sim .

If you want to switch on an image or some hands use #DTIMEFORMAT# which returns 12 or 24 in a conditional .

BTW you may have seen my Motion Detector Face I have found the most reliable is accelerometerRawY()

Hello @russellcresser. Thanks so much for the hints on the 12/24 time switch - it is all very, very helpful!

I also checked a little on your ‘Motion Detector Face’ (thanks for the hint) and played with some values in a simple setup that only includes a simple basic rectangular shape. It looks like the accelerometerRawY() function works quite well for vertical movement on the watch when the wrist is turned and the shape moved up and down on the watch screen.

But the x-direction tilt around the center point of the watch somehow does not seem to work - at least on my Galaxy Watch 4. I tried to achieve something like an airplane instrument horizon that tilts only left & right around the center point of the watch (without vertical up & down) as the user moves the arm but so far without success. Is there any trick to it since I tried to scan the forum and the gyro function does not seem to be much used or explored?

Thanks again for all your help thus far!

1 Like

Yeah it is not easy. accX sets itself back to the center after a bit. Gyro is inverted but I think gyro raw y is worth looking at. As you see I put it all on my test so it can all be checked on a watch. I did most of my work on a Galaxy Active. I think GW4 is pretty much the same.
BTW once you have sent you test draft to your Watch you can continue to test code changes after you have saved them by looking at your WatchBox and simulate it there. If you are using Accelerometer.

Check this one.

So sorry. I have just checked back and the Gyro and Accelerometer do not sim on the Apps any more. Things keep changing. So it is test on you watch only.

Hello @russellcresser - thanks so much for posting a sample- very much appreciated.
I really like your various techniques and nifty coding approaches in your facer portfolio - it is very inspiring!

1 Like

Thank you very much. Exactly what I had always intended. That each face might have something novel in it. Sometimes it is quite hidden. I had no intention to accumulate Syncs or followers. I have repeated myself a bit but that happens sometimes. Looking forward to Monitoring your Development.

Hello @russellcresser . I am trying to get a couple of watch faces ready and then post them in batch rather than piecemeal - so far so good :slight_smile !

1 Like