Drawing a rounded line diagram

Hi,

I would like to design a widget with a graph (line diagram) like that one in ActiFace: https://apps.garmin.com/de-DE/apps/7ef071c3-4a14-4eb3-aca9-e3a531262711

Saying this, calculating coordinates for a couple of points is easy and I am wondering how Petr did that rounding in his app. The native elements in connect IQ are circle, line and polygon, rectangle, arc and ellipse. In my opinion Petr has done that with arcs. Maybe the deviation is calculated of the line in each single point on both sides of the graph and a certain arc is drawn then. Nevertheless, the crossing from the arcs to the lines looks brilliant and I am wondering how he did this. Any hints?

topcaser over 6 years ago

No one?

PlayItLoud over 6 years ago

Hi topcaser, did you tried to contact him directly? I did it once because I had a question and he did took the time to write back.

topcaser over 6 years ago

Thanks for your answer. I will try this.

There was an additional answer from the user FlowState: he posted an example here but the post was removed. I don't know why. @mods: Why? I wanted to try that out.

FlowState over 6 years ago

Deleted my answer again, because:
- I misunderstood the question (which I sort of guessed before)
- A better answer exists below

Ghostme over 6 years ago

Are you talking about this?community.garmin.com/.../1443385.png

Ghostme over 6 years ago

in fact it's Bézier curve .
the code is here:

var point = [[40,40],[60,70],[80,40],[100,70],[120,50],[140,80],[160,40],[180,80]];
for (var i = 0;i<7;i++) {
var t = 0;
var y1;var y2;var y3;var y4;
for (var n = 0;n<10;n++) {
var half = (point[i+1][0] - point[0])/2.0;
var tmpy = Cal(point[1],point[1],point[i+1][1],point[i+1][1],t);
var tmpx = Cal(point[0],point[0]+half,point[0]+half,point[i+1][0],t);
dc.drawPoint(tmpx,tmpy);
t = t + 0.1;
}
}

function Cal(y1,y2,y3,y4,t) {
var tmpy = y1*(1-t)*(1-t)*(1-t)
+3*y2*t*(1-t)*(1-t)
+3*y3*t*t*(1-t)
+y4*t*t*t;
return tmpy;
}

PlayItLoud over 6 years ago

Awesome! I’ll be trying to add that in a watch face :)

ksweber007 over 1 year ago in reply to Ghostme

Thanks a lot, this helped me rounding my temperature line diagram:

The above code is using drawPoint to plot the graph which needs a lot of points and some older watches might be stressed by this amount of cpu need.

I kept using drawLine, but gaining rounding by one interpolated additional point from the Bezier curve. Adding 5 or 10 additional points inbetween my measurements was not changing the result any more.