Correct rotation calculation for vectorized progress bars

Watch Face Studio
1

Hey guys

I finally was able to create my own progress bars upper left for battery and lower right for steps.

For batterybar I’m using:
0+(64*[BATT_PER])/100

For stepsbar I’m using:
0+([SC]*64)/[SC_GOAL]

The bars covering 64° of 360°

But now my problem is that the bars aren’t working correctly. The battery bar looks like the battery is 30% instead of 70% and the steps bar looks like stepcounter shows 2500 steps instead of 7500.
Can someone point me in the right direction? IDK how to calculate them correctly.

Any help is much appreciatet. THX

image
image1920×1080 216 KB

2

I’m not sure if this is what you need since I can’t see how you did it, but mathematically it solves the problem you described:

For batterybar:
100-(64*[BATT_PER])/100

For stepsbar:
[SC_GOAL]-([SC]*60)/[SC_GOAL]

3

thanks for your fast response. I tried the calculations you mentioned.
I removed the cover layer above the bars to show you where the bars are now located

image
image1920×1080 244 KB

4

This is how I export my png from illustrator all files are 450x450 pixels.
So I just have to work with rotaion calculations.

image
image1920×1080 93.9 KB

5

Okay, I see what you are doing. You basically want 0 degrees to be 100%, so we need to remove the difference in your calculation.

For batterybar:
0+(64*(100-[BATT_PER]))/100

For stepsbar:
0+(([SC_GOAL]-[SC])*60)/[SC_GOAL]

1 Like
6

Is this just diy project or do you want to sell it ? :smiley:

For Steps just use something like this: -[SC_PER]*0.63

  1. rotate image to the starting position
  2. note rotation
  3. then move to the ending rotation
  4. note rotation
  5. then just substract two values & use -[SC_PER]*(substractedvalue/100)
  6. set rotation property back to starting value

Do same with battery [BATT_PER] but opposite direction (+)

3 Likes
7

That’s great! Awesome!

Can you share the WFS file?

8

This was the calculation that solved my problem, yes you’re right I want 0° to be 100%. Really Awesome! It works!!

Is there a way of “If this than that” rule we can use in Watch Face Studio? Because when stepgoal is reached I want the steps bar to stop. e.g. Stepgoal is 10000 the progress bar should stop moving at 10000.

Something like
[SC] => [SC_GOAL] and (([SC_GOAL]-[SC])*60)/[SC_GOAL] or 0

thanks for your support!

9

This one is just to discover the possibilities of Watch Face Studio. Why do you ask? :slight_smile:

Thanks for your rsponse and your support :slight_smile:

By the way you’re creating really great watchfaces I just had a look at your webiste :slight_smile: great work!

1 Like
10

Thanks for your support, but sorry I don’t want to share my WFS files with anyone :wink:

11
1 Like
13

Great! thats exactly what I’m searching for :slight_smile:

14

0+([SC]>=[SC_GOAL]?0:(([SC_GOAL]-[SC])*60)/[SC_GOAL])

1 Like
15

Thanks ! :slight_smile: it just reminds me a little of one of my watch faces, but it’s cool. I think you will get a much better effect when you make cuts in the base layer and the actual bars will slide under it.

It’s a little more complicated but the effect is better

x (20)

16

Yes this is exactly how I made it :slight_smile: a shape with cuts covering the progress bars. :slight_smile: Oh no believe me I haven’t copied one of yours. Looks really great.

I guess I’m done for my needs now. What do you think?

But I have a question about the colors. I would like to have my own deafult colors, e.g blue for battery, green for steps and red for hrm and the option to enable theme colors.

Screenshot_20211003_184202_sysui

1 Like
17

Its fine :slight_smile: Looks good too.
I think that this is currently not possible. You would need to invert these progress bar (make them black - 75% transparent) and then just create one or more colorful layers under base layer.

1 Like
18

Thanks :slight_smile:

Ok then I have to wait until samsung (maybe) offers more possibilities. :sweat_smile:

Is it possible to create tap actions to enable or disable layers?

19

Works like I need! Thanks :slight_smile:

1 Like
20

Yep, just use transparent layers with tap to change or new styles option with black / transparent layers :slightly_smiling_face:

1 Like
21

How can I add tap to change? :smiley:

I just have the option tap to open app, tap to measure heart rate and none.

Further I want to ask where do you get things like UV or precipitations probability I saw your watchfaces on playstore and some of them show these. I can’t find tag expressions in Watch Face Studio for that