Need assistance drawing Arrow or Polygon with Orientation along the Edge of a Round watch.

Hello,

I'm trying to draw a triangle/arrow/polygon with an orientation property that moves along the edge of round watch faces, but I can't seem to get it. I feel like I'm close but can't quite get it right. I'm trying to write code that is applicable to all round watch faces, kind of feel like I'm hardcoding numbers here that won't be robust or simply my approach is wrong? Should I be using layout.xml?

Thank you for your consideration and help.

//Currently this draws large triangle/polygons spanning from onside of the screen to the other with correct orientation.
//I'd like to draw smaller/configurable arrows.

_______CODE_________

function drawArrow(dc, cx, cy, screenSize, orientation) {
var radius = size/.3;

dc.setColor(colorInput, Graphics.COLOR_TRANSPARENT);

var pt1 = convertToCartesian(center_x, center_y, orientation, radius); //First point
var pt2 = convertToCartesian(center_x, center_y, (orientation + 171 * Math.PI/180), radius); //Second point with 171 number made it look good
var pt3 = convertToCartesian(center_x, center_y, (orientation + 189 * Math.PI/180), radius); //Second point with 189 number made it look good

dc.drawLine(pt1[0], pt1[1], pt2[0], pt2[1]);
dc.drawLine(pt2[0], pt2[1], pt3[0], pt3[1]);
dc.drawLine(pt1[0], pt1[1], pt3[0], pt3[1]);
}

function convertToCartesian(cx, cy, radian, radius) {
var x = cx - radius * Math.sin(radian);
var y = cy - radius * Math.cos(radian);

return [Math.ceil(x), Math.ceil(y)];
}

Top Replies

seilogramp over 4 years ago in reply to 9635560 +1

9635560 said:
I accidentally reported myself as abusive

Saw that and assumed it was a mistake so I approved it.
jim_m_58 over 4 years ago +1 suggested

What you want to do is actually very similar to what's done with a hand in an analog watch face and hackable code can be found in the drawHand function in the analog sample.

You need 3 points. The…

All Replies

0 9635560 over 4 years ago

You're on the right track, I think. But it can be simplified.

Here's some pseudo code:

// 1. Workout how your arrow should look at 0 radians. EG: Hardcoded is fine.
// Us proportion of radius for the coordinates, so x3 might be 1 meaning the full radius
// where x1 might be 0.1 meaning start at 0.1 * radius
var p = [[x1,y1],[x2,y1],[x3,(y1+y2)/2],[x2,y2],[x1,y2]];
// Calculate cos sin
var cos = Math.cos(clockRads);
var sin = Math.sin(clockRads);
// Manipulate en masse
for(var i=0;i<p.size();i++) {
    p[i][0] = cx + p[i][0] * cos * radius;
    p[i][1] = cy + p[i][1] * sin * radius;
}
// USe it
dc.fillPolygon(p);

0 9635560 over 4 years ago

You're on the right track, I think. But it can be simplified.

Here's some pseudo code:

// 1. Workout how your arrow should look at 0 radians. EG: Hardcoded is fine.
// Use proportion of radius for the coordinates, so x3 might be 1 meaning the full radius
// where x1 might be 0.1 meaning start at 0.1 * radius
var p = [[x1,y1],[x2,y1],[x3,(y1+y2)/2],[x2,y2],[x1,y2]];
// 2. Calculate cos and sin for where you want it to point to.
var cos = Math.cos(clockRads);
var sin = Math.sin(clockRads);
// 3. Manipulate the whole set en masse
for(var i=0;i<p.size();i++) {
    p[i][0] = cx + p[i][0] * cos * radius;
    p[i][1] = cy + p[i][1] * sin * radius;
}
// 4. Then use it
dc.drawPolygon(p);

0 9635560 over 4 years ago in reply to 9635560

Weird.
I tried editing and duplicated a load.

More worryingly, when I went to delete one, I accidentally reported myself as abusive.

0 seilogramp over 4 years ago in reply to 9635560

9635560 said:
I accidentally reported myself as abusive

Saw that and assumed it was a mistake so I approved it.

0 9635560 over 4 years ago in reply to seilogramp

What’s worse is I realise I wasn’t thinking properly in any case as all points will be along the radius which isn’t right.

Needs to be modified to be relative to radius. Which I’m not going to do while typing on a phone.

0 jim_m_58 over 4 years ago

What you want to do is actually very similar to what's done with a hand in an analog watch face and hackable code can be found in the drawHand function in the analog sample.

You need 3 points. The center point, and the two inner ones. With radius and degrees you can calculate the center one. For the two lower ones, use a smaller radius and an offset from the angle. Then just use a fill polygon.

Here's an app where I do that with hacked code from the analog sample. I use similar code for the dots and E,S,W location.

0 OffGridCoder over 4 years ago in reply to jim_m_58

I think I've got it. I very much appreciate your response and everyone else who replied, especially given it was Thanksgiving... hope everyone was able to make the best of it.