[TOMAJA Tutorial] Temperature Line Chart - Weather Forecast Diagram

[Tomas]

In the Facer Creator there is not possible to connect directly two points with a simple line at the moment (December 2017). Therefore, I was trying to draw a line between point A and B using the Width and Rotation functions of a standard Line Object. However, I was not able to realize is successfully in the whole range of changed angle between points. This problem is described here.

In this tutorial another method for drawing lines between points (up to the angle of app. 45 degree with the same X-axis distance) is described. Example of a temperature forecast line diagram at a watch face:

Correlation between the points distance in the Y-axis and Rotation was observed in the first line:

The distance in the Y-axis is shown with the black number. In the following table an example of correlation is presented:

It would be possible to cover almost whole range of the points position. However for a simplicity I was using only a line correlation. The disadvantage of this solution is an inaccurate connection between two points at higher distances.

The probability of such high angles at the outside temperature is low:

Therefore the simple line correlation was used at this Temperature Line Chart. Example of the first “red line”:

Y-Axis: (200+(#WCT# - #WTH#))

Rotation: (#WTH# - #WFAH#)

To have a dynamic scale with the current temperature always in the middle (“200” is the starting point - current temperature) all lines are connected (calculated) according to the current temperature. Great advantage of this solution is a system which is working in Fahrenheit and Celsius parallel.

Here are all dynamic parameters (expressions) for lines for a 3 days forecast:

Redline A
X-axis: 60
Y-axis: (200+(#WCT#-#WTH#))
Rotation: (#WTH#-#WFAH#)

Redline B
X: 120
Y: (200+(#WCT#-#WFAH#))
R: (#WFAH#-#WFBH#)

Redline C
X: 240
Y: (200+(#WCT#-#WFBH#))
R: (#WFBH#-#WFCH#)

Blueline A
X-axis: 60
Y-axis:(200+(#WCT#-#WTL#))
Rotation: (#WTL#-#WFAL#)

Blueline B
X: 120
Y: (200+(#WCT#-#WFAL#))
R: (#WFAL#-#WFBL#)

Blueline C
X: 240
Y: (200+(#WCT#-#WFBL#))
R: (#WFBL#-#WFCL#)

The (length) width of lines is not consider in this examples due to another technique how to cut the line (hiding the line behind an rectangle object with the same color as the background) at the proper point in this way:

The only one element to change due to the temperature unit is the scale:

If you are interesting in, you could inspect the example watch face in detail at the inspection mode here: www.facer.io/watchface/HvsmViVEXU/inspect

Watch to sync:

[eradicator09]

Definitely neat approach. I did a little different method for my bar chart. I came up with averages and then rotated based on the center point between the different forecasted days.

I went ahead and enabled inspection on mine if you want to compare.

[eradicator09]

If you want to get really fancy, check out the math on the “Heat Index/Feels Like”. Unfortunately it’s not terribly useful in December, unless you live in Australia.

[Tomas]

Hello @eradicator09 , this is the watch face I was inspired with thanks for the inspection mode - excellent job. I tried your “engine” with extreme values and its well the same effect. However, to rotate lines in the middle helps a lot with minimizing the “gap”. Yours are only the half on mines

Maybe we will get a proper instrument for dawing lines soon

Did you even tried to calculate the angle with a sin function? It is still my problem.

[Tomas]

…are you speaking about this?

Source: Heat index - Wikipedia

Did somebody already used it for a watch face here at facer?

[elv3n12]

Hi Thomas, sorry for being honest, I hate the design of your watchface, it has poor typography, and look like a neo-futurist thing from the 60’s… Other than that, you’re a genius for making this tut. Thanks a lot!

[Tomas]

Hi @elv3n12! you are so right with the design description . Let’s take this watch face as an expample how bad the final result could be, if a designer is strongly focused (only) on the funcionality of one “technical feature”… (I am working on a the next watch face with the integrated temperature forecast chart right now - however I am so lazy to move the chart position that it could be a disaster watch face no. 2) Anyway I would be happy if you comment it honest again

[eradicator09]

Yeah, that’s the one. I have a tutorial on the calculation for it ready to go. Fun stuff.

On the lines, all mine uses simple math. I leave all the heavy stuff to @Mellin. The way it worked for me was cheating by using a dial element. I think I chose seconds or minutes, then uploaded a simple png for the “hand”. This allowed me to fix the mid point as a rotation center. From there the simple average was calculated, then a ratio added to the rotation to adjust for the height of the graph.
Keeping the graph fixed also simplified things. This meant a simple conversion ratio can be used for any change in value.

For determining length of the line, I cheated again by only utilizing a fixed width. The round ball points effectively cover the overshoot I built into each line. There is about 16 pixels worth of excess that are normally hidden behind the points. With the graph being fixed, only temperature swings in excess of 20-30 degrees would “break” the effect and show that the lines don’t reach. Although I’m sure if you wanted to be extra anal you could develop a formula to increase its size based on the temperature variance between each day.

All that said, using the center point of the hand dial is what ended up being the factor for me. I think the original image was a simple 2x2 pixel square. You can always change the size in the creator to create a line effect.

[Tomas]

Thanks for additional explanation. What I saw is in the inspection mode is your perfect description of every element you use - and there are many…

[joelrubin408]

I appreciate your humility and open-mindedness. Very nice.

[bradtc]

Thanks guys for the above discussion & tutorial. I had actually worked much of the graph out prior to finding this tutorial, but it was instrumental in drawing lines between data points. So I really appreciate this thread! Currently I can only confirm that it works in Celsius, and if data points get far above the 5 day average high/low, things can get a bit wonky, but so far generally work. The scale isn’t fixed but rather dependent upon the 5 day average high and the 5 day average low. The idea was to show the trends & hopefully I was able to modern the graph up a bit.

[bradtc]

To avoid some wonky results, I’ve been tweaking the expressions for joining the lines between the data points to use Pythagoreans theorem. For instance the width of the line between day 1 high and day 2 high can be re-written as:
sqrt(30*30+((210+((50*(((#WFAH#+#WFBH#+#WFCH#+#WFDH#+#WFEH#)/5)-#WFAH#))/(((#WFAH#+#WFBH#+#WFCH#+#WFDH#+#WFEH#)/5)-((#WFAL#+#WFBL#+#WFCL#+#WFDL#+#WFEL#)/5)))))-(210+((50*(((#WFAH#+#WFBH#+#WFCH#+#WFDH#+#WFEH#)/5)-#WFBH#))/(((#WFAH#+#WFBH#+#WFCH#+#WFDH#+#WFEH#)/5)-((#WFAL#+#WFBL#+#WFCL#+#WFDL#+#WFEL#)/5))))))*((50*(((#WFAH#+#WFBH#+#WFCH#+#WFDH#+#WFEH#)/5)-#WFAH#))/(((#WFAH#+#WFBH#+#WFCH#+#WFDH#+#WFEH#)/5)-((#WFAL#+#WFBL#+#WFCL#+#WFDL#+#WFEL#)/5)))))-(210+((50*(((#WFAH#+#WFBH#+#WFCH#+#WFDH#+#WFEH#)/5)-#WFBH#))/(((#WFAH#+#WFBH#+#WFCH#+#WFDH#+#WFEH#)/5)-((#WFAL#+#WFBL#+#WFCL#+#WFDL#+#WFEL#)/5)))))))

And the rotational value using simple tan theta=(opposite/hypotenuse) can be re-written as:
tan(((210+((50*(((#WFAH#+#WFBH#+#WFCH#+#WFDH#+#WFEH#)/5)-#WFAH#))/(((#WFAH#+#WFBH#+#WFCH#+#WFDH#+#WFEH#)/5)-((#WFAL#+#WFBL#+#WFCL#+#WFDL#+#WFEL#)/5)))))-(210+((50*(((#WFAH#+#WFBH#+#WFCH#+#WFDH#+#WFEH#)/5)-#WFBH#))/(((#WFAH#+#WFBH#+#WFCH#+#WFDH#+#WFEH#)/5)-((#WFAL#+#WFBL#+#WFCL#+#WFDL#+#WFEL#)/5))))))/30)

The values that come up on the creator look reasonable, and graphically it seems to work. But I can’t seem to save or send to the watch when I use these longer expressions. Is there a limit?

[ThaMattie]

I don’t think there is a limit. I’ve had longer expressions than that.
What you really need to get the lines and dots to match is inverted tan (atan),
which is not supported on WearOs watches (so it seems).

Fortunately someone made an expression to get an approximate value and it works well:

Inverse trigonometric functions

Facer has an atan function that works in the designer, however it does not work on the actual watch (neither do asin or acos). Unfortunately, Facer refuses to even acknowledge* the problem, much less solve it. You can however, approximate atan, with some error. Obviously, this is not ideal, but then the whole situation isn’t ideal, so here you go: atan(x) ≈ (((pi*x*(0.596227+x))/(2*x*(1.192454+x)+2)-(pi*(0.596227-x)*x)/(2*(x-1.192454)*x+2))*(1+abs(x)/x))/2+(pi*(0.596227-x)*x)/(2*(x-1.192454)*x+…

In this example you can see how I made the length of the line stay between the 2 points and in the center of the dots:

The red line is using atan (and does not work on a WearOs watch), the turquoise line is using the atan expression from the post I added. These lines are linked to battery percentage for testing purposes (inspect is on)

(I added the yellow line linked to current minute, so it also moves when viewing in preview)

[bradtc]

Thank you very much @ThaMattie for this very informative explanation. You put a lot of effort into this reply and I appreciate it. Very useful example too, thank you for opening up inspection mode.

I can’t beleive I didn’t think of using aTan(x) instead of Tan(x). I guess it’s been 35 years for me since high school - ha ha! I’m now getting into this aTan expression & with your explanation above I think I can crack it!

By the way I solved the above large expression for the length of line (the hypotenuse & Width in Creator) by breaking down the expression into a simplified algebraic version of itself:
((30**2+((50*(#WFAH#-#WFBH#))/( ((#WFAH#+#WFBH#+#WFCH#+#WFDH#+#WFEH#)/5) - ((#WFAL#+#WFBL#+#WFCL#+#WFDL#+#WFEL#)/5) ))**2)**0.5)
It works quite well…

[bradtc]

Thanks again @ThaMattie for your input. I was able to crack the rotation expressions code. Turned out to be a fairly long expression, but it works, it saves, it sync’s to the watch.

(deg((((pi*(((50*(#WFAH#-#WFBH#))/(((#WFAH#+#WFBH#+#WFCH#+#WFDH#+#WFEH#)/5)-((#WFAL#+#WFBL#+#WFCL#+#WFDL#+#WFEL#)/5)))/30)*(0.596227+(((50*(#WFAH#-#WFBH#))/(((#WFAH#+#WFBH#+#WFCH#+#WFDH#+#WFEH#)/5)-((#WFAL#+#WFBL#+#WFCL#+#WFDL#+#WFEL#)/5)))/30)))/(2*(((50*(#WFAH#-#WFBH#))/(((#WFAH#+#WFBH#+#WFCH#+#WFDH#+#WFEH#)/5)-((#WFAL#+#WFBL#+#WFCL#+#WFDL#+#WFEL#)/5)))/30)*(1.192454+(((50*(#WFAH#-#WFBH#))/(((#WFAH#+#WFBH#+#WFCH#+#WFDH#+#WFEH#)/5)-((#WFAL#+#WFBL#+#WFCL#+#WFDL#+#WFEL#)/5)))/30))+2)-(pi*(0.596227-(((50*(#WFAH#-#WFBH#))/(((#WFAH#+#WFBH#+#WFCH#+#WFDH#+#WFEH#)/5)-((#WFAL#+#WFBL#+#WFCL#+#WFDL#+#WFEL#)/5)))/30))*(((50*(#WFAH#-#WFBH#))/(((#WFAH#+#WFBH#+#WFCH#+#WFDH#+#WFEH#)/5)-((#WFAL#+#WFBL#+#WFCL#+#WFDL#+#WFEL#)/5)))/30))/(2*((((50*(#WFAH#-#WFBH#))/(((#WFAH#+#WFBH#+#WFCH#+#WFDH#+#WFEH#)/5)-((#WFAL#+#WFBL#+#WFCL#+#WFDL#+#WFEL#)/5)))/30)-1.192454)*(((50*(#WFAH#-#WFBH#))/(((#WFAH#+#WFBH#+#WFCH#+#WFDH#+#WFEH#)/5)-((#WFAL#+#WFBL#+#WFCL#+#WFDL#+#WFEL#)/5)))/30)+2))*(1+abs((((50*(#WFAH#-#WFBH#))/(((#WFAH#+#WFBH#+#WFCH#+#WFDH#+#WFEH#)/5)-((#WFAL#+#WFBL#+#WFCL#+#WFDL#+#WFEL#)/5)))/30))/(((50*(#WFAH#-#WFBH#))/(((#WFAH#+#WFBH#+#WFCH#+#WFDH#+#WFEH#)/5)-((#WFAL#+#WFBL#+#WFCL#+#WFDL#+#WFEL#)/5)))/30)))/2+(pi*(0.596227-(((50*(#WFAH#-#WFBH#))/(((#WFAH#+#WFBH#+#WFCH#+#WFDH#+#WFEH#)/5)-((#WFAL#+#WFBL#+#WFCL#+#WFDL#+#WFEL#)/5)))/30))*(((50*(#WFAH#-#WFBH#))/(((#WFAH#+#WFBH#+#WFCH#+#WFDH#+#WFEH#)/5)-((#WFAL#+#WFBL#+#WFCL#+#WFDL#+#WFEL#)/5)))/30))/(2*((((50*(#WFAH#-#WFBH#))/(((#WFAH#+#WFBH#+#WFCH#+#WFDH#+#WFEH#)/5)-((#WFAL#+#WFBL#+#WFCL#+#WFDL#+#WFEL#)/5)))/30)-1.192454)*(((50*(#WFAH#-#WFBH#))/(((#WFAH#+#WFBH#+#WFCH#+#WFDH#+#WFEH#)/5)-((#WFAL#+#WFBL#+#WFCL#+#WFDL#+#WFEL#)/5)))/30)+2)))

Now I’ve got a proper length of line with pythagorean theorem and a proper rotation using atan(x). Such a relief to have accurate math and no more wonky charts due to over simplifying things.

I was able to update my weather trend watchface above, and my Earthshade Weather Trend one below. Awesome!

[ThaMattie]

Good to see it all worked out!

[bradtc]

Now that we are in colder temperatures, I have found that Facer messes up the values of things when subtracting negative temperature tags. Say for instance if you are working with:
(#WFAH#-#WFBH#)
You will find if the value of #WFBH# is negative, it won’t correctly do the math. You have to re-write the expression to:
(#WFAH#-(#WFBH#))
and then it will work. Weird, and mathematically no different, but it fixes the errors I have been getting when forecasted temperatures are -1C and lower.

Due to this, I have to re-write all my expressions in about 8 watch faces I have published - darn! For those curious and wanting an update, the updated expressions are as follows:

Y coordinate for Day 1 High:
((210+((50*(((#WFAH#+#WFBH#+#WFCH#+#WFDH#+#WFEH#)/5)-(#WFAH#))) / (((#WFAH#+#WFBH#+#WFCH#+#WFDH#+#WFEH#)/5)-((#WFAL#+#WFBL#+#WFCL#+#WFDL#+#WFEL#)/5)))))

Width of line from Day 1 to Day 2 (based on 30 pixels between data points):
((30**2+((50*(#WFAH#-(#WFBH#)))/( ((#WFAH#+#WFBH#+#WFCH#+#WFDH#+#WFEH#)/5) - ((#WFAL#+#WFBL#+#WFCL#+#WFDL#+#WFEL#)/5) ))**2)**0.5)

Rotation of line from Day 1 to Day 2 (based on 30 pixels between data points):
(deg((((pi*(((50*(#WFAH#-(#WFBH#)))/(((#WFAH#+#WFBH#+#WFCH#+#WFDH#+#WFEH#)/5)-((#WFAL#+#WFBL#+#WFCL#+#WFDL#+#WFEL#)/5)))/30)*(0.596227+(((50*(#WFAH#-(#WFBH#)))/(((#WFAH#+#WFBH#+#WFCH#+#WFDH#+#WFEH#)/5)-((#WFAL#+#WFBL#+#WFCL#+#WFDL#+#WFEL#)/5)))/30)))/(2*(((50*(#WFAH#-(#WFBH#)))/(((#WFAH#+#WFBH#+#WFCH#+#WFDH#+#WFEH#)/5)-((#WFAL#+#WFBL#+#WFCL#+#WFDL#+#WFEL#)/5)))/30)*(1.192454+(((50*(#WFAH#-(#WFBH#)))/(((#WFAH#+#WFBH#+#WFCH#+#WFDH#+#WFEH#)/5)-((#WFAL#+#WFBL#+#WFCL#+#WFDL#+#WFEL#)/5)))/30))+2)-(pi*(0.596227-(((50*(#WFAH#-(#WFBH#)))/(((#WFAH#+#WFBH#+#WFCH#+#WFDH#+#WFEH#)/5)-((#WFAL#+#WFBL#+#WFCL#+#WFDL#+#WFEL#)/5)))/30))*(((50*(#WFAH#-(#WFBH#)))/(((#WFAH#+#WFBH#+#WFCH#+#WFDH#+#WFEH#)/5)-((#WFAL#+#WFBL#+#WFCL#+#WFDL#+#WFEL#)/5)))/30))/(2*((((50*(#WFAH#-(#WFBH#)))/(((#WFAH#+#WFBH#+#WFCH#+#WFDH#+#WFEH#)/5)-((#WFAL#+#WFBL#+#WFCL#+#WFDL#+#WFEL#)/5)))/30)-1.192454)*(((50*(#WFAH#-(#WFBH#)))/(((#WFAH#+#WFBH#+#WFCH#+#WFDH#+#WFEH#)/5)-((#WFAL#+#WFBL#+#WFCL#+#WFDL#+#WFEL#)/5)))/30)+2))*(1+abs((((50*(#WFAH#-(#WFBH#)))/(((#WFAH#+#WFBH#+#WFCH#+#WFDH#+#WFEH#)/5)-((#WFAL#+#WFBL#+#WFCL#+#WFDL#+#WFEL#)/5)))/30))/(((50*(#WFAH#-(#WFBH#)))/(((#WFAH#+#WFBH#+#WFCH#+#WFDH#+#WFEH#)/5)-((#WFAL#+#WFBL#+#WFCL#+#WFDL#+#WFEL#)/5)))/30)))/2+(pi*(0.596227-(((50*(#WFAH#-(#WFBH#)))/(((#WFAH#+#WFBH#+#WFCH#+#WFDH#+#WFEH#)/5)-((#WFAL#+#WFBL#+#WFCL#+#WFDL#+#WFEL#)/5)))/30))*(((50*(#WFAH#-(#WFBH#)))/(((#WFAH#+#WFBH#+#WFCH#+#WFDH#+#WFEH#)/5)-((#WFAL#+#WFBL#+#WFCL#+#WFDL#+#WFEL#)/5)))/30))/(2*((((50*(#WFAH#-(#WFBH#)))/(((#WFAH#+#WFBH#+#WFCH#+#WFDH#+#WFEH#)/5)-((#WFAL#+#WFBL#+#WFCL#+#WFDL#+#WFEL#)/5)))/30)-1.192454)*(((50*(#WFAH#-(#WFBH#)))/(((#WFAH#+#WFBH#+#WFCH#+#WFDH#+#WFEH#)/5)-((#WFAL#+#WFBL#+#WFCL#+#WFDL#+#WFEL#)/5)))/30)+2)))

Update: All weather trend watch faces in my collection have been updated now. Sure wish Facer had a way to push these updates or advise all the users of the update, since there are lots of them… ¯_(ツ)_/¯

[russellcresser]

Astonishing. I thought the Formulas for Rotating the Moon were HD. I cannot Imaging how you come up with this level of Maths. Respect to you and the others in the community who help those like myself who struggle with HD.

[bradtc]

I don’t think anyone really watches this old tutorial, but in case someone does, the recent (not so recent anymore) WearOS changes to Facer killed the weather graphing lines with zero slope. It hasn’t been much of a priority to me to fix this as I still use my old Tizen Galaxy watch, which still works fine. Nonetheless, I have poked around with working on a fix now and then, and finally have it now. Thank you @russellcresser for the testing. Any way, the fix is in the line rotation field, as the old rotation field generated a NiL value which WearOS didn’t like. The new fix adds a conditional to clear this issue. The updated sample of daily high graph line rotation value from Day1 to Day2 is:

$(#WFAH#-#WFBH#)==0?0:((#WFAH#-#WFBH#)/abs(#WFAH#-#WFBH#)(deg(acos(30/((30**2+((50(#WFAH#-#WFBH#))/( ((#WFAH#+#WFBH#+#WFCH#+#WFDH#+#WFEH#)/5) - ((#WFAL#+#WFBL#+#WFCL#+#WFDL#+#WFEL#)/5) ))**2)**0.5)))))$

I’ve got over 100 watch faces that this needs to be implemented on. Several have been updated, but many more to go. If a user wished a specific update, I’ll get on it right away. Otherwise i’ll eventually get to them all.

[russellcresser]

Imagine all the Faces that will never get Updated . I found one I used Glow on the other day . I think the Face has a couple of dozen syncs .Self respect makes you sort them out :::)))