[TOMAJA Tutorial] Animated Battery Power Level Icon Indicator - Simple Basic Linear and Rotating Effects with Objects and Hand Dials

Resources Expressions
22

Oh, many thanks for your advice! I actully will use those tutorials in future watchfaces, so thank you for that :slight_smile:
What I have in mind is a speedometer-like battery indicator. A needle that shows current battery percentage, see this watchface with the smaller circle 0-100, which should represent the percentage stats.

1 Like
23

Sounds great! Thereā€™s lots of tutorials out there for itā€¦ I think searching ā€œgaugeā€ or ā€œfuelā€ can help. TOMAJA has some great tutorials!

I used one of them to make a fuel/battery gauge. I have inspection mode turned on if you want to see:

You need to know the starting angle, and the ending angle - typically for a speedometer style gauge (like the one you show), it will be either -120 or +240 degrees. Then measure how far you want the needle to rotate (Say 240 degrees - so that it will rotate from -120 degrees to +120 degrees from vertical).

Take that, and then use the expression builder with the battery PERCENT (I donā€™t use the integer) - and donā€™t forget your parenthesis around the formula:

(-120+((#BLP#/100)*240))

That basically means:
([THE START ANGLE]+([Batt % / 100]) * [The total angle you want the needle to move])

This will move the needle from LEFT (full) to RIGHT (Empty). - To reverse the direction, just invert the whole formula:

(120-((#BLP#/100)*240))

Hope this helps!

3 Likes
24

Wow, that really helps a lot! Thanks for being so patient with me, complete novice!!!
Now I know NEARLY everything I need.
Last thing I donā€™t understand is WHERE I enter all these codes? Itā€™s not in the Facer editor, is it? :blush:
Also, if I click the ā€œoption iconā€ next to your watch, I donā€™t get the ā€œinspection modeā€, only ā€œReportā€ :flushed:

25

Yep, in the editor/creator.

As far as inspection mode goes, you have to click on the name of the watch, if you see a little rocketship on the left, inspect mode is available. Alternately, you can just add /inspect to the url of a watch.

INSPECT MODE:

26

Thanks again dear sir! I do appreciate your kindness, tomorrow I will check it out! Finally I can work on some more complicated faces :slight_smile:
Have a great one @cth4242 :slight_smile:

27

Firstly let me say thank you. This is a very easy to understand tutorial. I have a question about the battery dial version.
I have done everything that you have suggested but have noticed an anomaly. When testing the indicator with time lapse, at 4 mins to midnight, the dial hand returns to the upright 12 position rather than remaining at empty and then going straight to full.
To explain it using your pictures, the hand is placed in the dial at the 12 oā€™clock position. The Ā±150 work perfectly, but at the 4 minutes to midnight the dial goes from empty to 12 oā€™clock position and sits there until midnight and then moves to the full position. Have I done something wrong?

Thanks in advance.

28

well i have read these tutorial 1000s of times and they make less and less sense to me, sorry but making a dial for battery life is not as easy as this tutorial makes out and ive tried every day for months

29

Hi @jase_nunn, thanks for your feedback. I was just comparing this tutorial with some of my other like

or

In this comparison, maybe you agree too, that this one is very simple.

30

No I cant agree on any of these being simple, you base the tutorial on the fact that some people have previous knowledge of the coding etc ,some maybe most do not have previous knowledge and as such are beginners , maybe a beginners guide would be more suitable with step by step instructions , the whole of facer can be quite confusing to a beginner things such as #BLN# maybe simple to those that know but a beginner will have no idea what it means or what its for

31

I cant even get the pointer to align correctly with full empty or 50 % when trying to create a battery dial, ll this before i even attempt to get the dial itself working

20190227_143750.jpg2851Ɨ2138 2.83 MB

32

ok, I seeā€¦ please try to check this oneā€¦ maybe this could be good to start withā€¦ cheers. tomas

33

Yes that is super simple and whilst I appreciate your efforts you are Somewhat missing the point, I can create a face without any trouble at all however what I want but canā€™t add are battery dials amongst other things so a Basic more simple tutorial on dials would be appreciated, the one u have is complicated in my opinion when I follow all the steps u list I still have issues hopefully u saw my picture

34

such a lack of help on this forum , a so called community its actually shocking

35

Hi @jase_nunn
I have a battery dial in my watch face here:

Inspection mode should be enabled (let me know if not)

If you select the battery dial hand and look at the ā€œrotationā€ settings you should see how to use.

(-90+(#BLN#*1.8))

battery-dial.png274Ɨ534 70 KB

  • When you initially import your dial-hand image it should be set to the 12:00 position.
  • The red tick marker (0% battery) is -90 degrees from the 12:00 position and so this becomes its starting poistion.
  • The hand has to rotate 180 degrees from the red marker (0%) to the opposite white marker (100% battery) so we multiply the Battery Level Number (BLN) by 1.8 (180degrees/100 percent).

I hope this makes sense!

2 Likes
36

Thanks for replying, sadly I find this all very confusing so Iā€™ve given up, shame facer doesnā€™t have dial templates like some other face making apps

37

It can seem very confusing at first I agree, but persevere.

  1. Firstly you should understand that Facer sees the top point of a dial/circle as 0 degrees.

  2. Next, you need to work out the angle position of your markers for 0% battery level and 100% battery level.
    In my example above, the 0% marker (red) is -90 degrees from the top of the dial and the 100% marker is +90 degrees from the top of the dial. This means in total the hand has to rotate 180 degrees (90 degrees from -90 to 0, then 90 degrees from 0 to +90)

  3. Next, the battery is represented as a percentage, which means it has 100 x 1% increments.
    To work out how far the hand has to rotate for each 1%, we divide the total rotation amount (180) by 100 which gives us 1.8 degrees (180/100=1.8).
    So we now know the hand has to rotate 1.8 degrees for each 1% increment of the battery level.

  4. Now we can put the formula together:

START ANGLE POSITION + (BATTERY PERCENT NUMBER * 1.8)
or
(-90 + ( #BLN# * 1.8) )

4 Likes
38

Well, i think this doesnā€˜t help him a lot.

He wantā€˜s a quick and dirty solution - with predefined hands, bezels, formulae ā€¦ an easy assembling system without any effort.

39

Thatā€™s a shame.

It can be a steep learning curve for people who may never have used any code before, but I believe with a little perseverance most people can do it.

40

I agree, but we are nowadays seem to live in a world where people donā€˜t have endurance. They donā€˜t want effort, donā€˜t want to learn.

And besides: the tone of his texts wasnā€˜t very niceā€¦

ā€žSuch a lack of help on this forum , a so called community its actually shockingā€œ

If he asked friendly i maybe would have spend him some of my dials, dials that took me time and effort to create.

2 Likes
41

I canā€™t imagine Facer want to turn people away from creating faces just because they canā€™t make the more complex elements themselves so maybe some of the experienced people on here should start a service for those who canā€™t/wonā€™t code. There could be a repository of stock modules like dials, gauges, basic animations etc.

A nice way to give back to the community.