[Watchface] Outdoor with step count target

I wanted to create a bold, bright watch face for outdoor use. It is digital, the numbers are part of the step counter - 1K, 2K… and the red circle shows progress to the daily target, 12K steps.

Feedback welcome!
Thanks

5 Likes

I really like the step counter progress bar and how you used the hour numbers to count them. Good work!

1 Like

Thank you for the good feedback!

Hi,
Can you help me with the math please. I am trying to use your math but I stink at it.

I have the steps labeled “Steps” for the hand rotation. I want the hand to go from 90-270 but can’t get the math right.

Like the watch too. Great use of white space for something different.

Thanks,
D

Hi @feonix_07,

Rotation

(90+(#BLN#*1.8))

should works for you :wink:

That worked. Thanks. I notice a slight glitch, at the end of the day it goes to 0 position for a brief moment (done in very fast view). But I think it’s on my internet.

I notice that happen to a lot of my hands when viewing the creator in fast forward mode. I’ve never seen it happen on my actual watch. I’m sure yours will be the same way .

good to know. I have found some interesting things happen in fast forward.

I am confused again, so I used the (90+(#BLN#*1.8)) for the steps rotation but than what is the formula for the battery rotation.

Hi and sorry, sure the #BLN# expression is for the watch battery level. For steps up to let say 9999 it could looks as follow:

(90+((#ZSC#/9999)*180))

:wink:

OK so much better. I know my math sucks but I thought I was losing my mind. Whew.

I don’t know if you can use illustrator, but I have a graphic quesiton. I am trying to rotate around the dark circle. I have create several different watches, but for some reason I can’t get the rotation to work around the dark circle. I am trying to offset but don’t know what I am doing wrong. Illustrator, 362X362, export png medium 150 ppi, I like working with higher resolution (if you have better file structure, all eyes). I can export out the dark circle and it centers fine. But can’t get the loop to center. It’s off by a few px or pts. It spins weird, don’t know if it’s that fast forward thing but I know something is off.

Hi again,

basically all objects turns around the center point… so this should be your right position:

:wink:

Yes but the center point is either at the top, center, or bottom- correct? So in looking at your pic it would rotate at the point, half way down or at the base, it would not rotate at the red center. Unless you broke up the the red area, but still the rotation of the “hand” would be just above the red or at the bottom. I took your picture and tried it out, no matter what I do, it doesn’t rotate where I would guess you would rotate (around the red). Do I need to keep the bounding box (the red square, this would be invisible via drawing program)?

@feonix,
Add more transparent dead space to the bottom of your hand PNG so that the red dot is in the center vertically.
Of you look at @Tomas image above you’ll see there’s more space at the bottom than the top. Hands will rotate from the center of the PNG image so play with the transparent space to force your red dot to the center of the image.

John

Well, this would be a direct comparison of our pictures :wink:

The red line (picture border) and the red dot (picture center) in my picture shows only the the principle of picture rotation. All picture should be transparent except the hand. :wink:

So maybe we are saying the same thing but misunderstanding. In looking at your @tomas pic, excluding the border, the actual center is really where the triangle meets the circle, correct? I made two pics based on your example, and the only time the red dot was the center was with the border.
Or when you export, do you put an invisible border to force the center to be the red dot? I have done this with some of my watch hands when the center point needs to be forced.

Hi @feonix_07,

I hope we are on the same page right now :wink:

I use the red color (line & dot) in the picture just to visualize the rotation principle, in the case somebody ask how to get the correct position of the hand. I use it just for explanation purposes - if there were no “red line” at the border, it would be hart to see the hand position (transparent + white background = white).

That is an awesome idea for your step counter. First time I’ve seen anyone use the hours for that. Very ingenius!!

Thank you!!