[TOMAJA Tutorial] Temperature Line Chart - Weather Forecast Diagram

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:

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.

1 Like

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.

Hello @eradicator09 , this is the watch face I was inspired with :slight_smile: 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 :+1:

Maybe we will get a proper instrument for dawing lines soon :slight_smile:

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

…are you speaking about this? :fearful:

Source: Heat index - Wikipedia

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

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!

Hi @elv3n12! you are so right with the design description :slight_smile: . 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 :wink:

1 Like

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.

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…

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