how to rotate polygon pentagon dial

Former Member
Former Member

I cant figure out how to rotate this polygon

dc.fillPolygon([ [223, 125], [120, 125], [120, 115], [223, 115], [230, 120] ]);

iknow i have to use Math.sin(alpha) and  Math.cos(alpha) alpha being var alpha = Math.PI/6*(1.0*clockTime.hour+clockTime.min/60.0);

but i cant figure it out. Any help would be super nice.

  • I never remember whether x should be sin or cos, but if you’re consistent nobody will know if you have it backwards...

    However: one of them is r * cos the other is r* sin and a loop through all five points gets you a polygon. 

    Something like

    var r = 90;

    var cx = dc.getWidth()/2;

    var cy = dc.getHeight()/2;

    var alpha = 0; // set to start angle

    var points = new [5];

    var delta = 2 * Math.PI / 5;

    var i = 0;

    do {

    var x = cx + Math.sin(alpha) * r;

    var y = cy + Math.cos(alpha) * r;

    points[i] = [x,y];

    i++;

    alpha += delta;

    } while(i<5);

    dc.drawPolygon(points);

    Then you adjust the start value of alpha to rotate. 

  • Not sure how you plan to use this, but an option is to build a table for the polygons you need.  That eliminates the need to do math all the time, and it's a simple table reference.  It will take more memory but would help battery and the power budget if you are doing a 1hz WF.

  • There is sample code in samples/Analog/source/AnalogView.mc that does exactly what you are looking for. Here is a snip:

    var result = new [4];
    
    var cos = Math.cos(angle);
    var sin = Math.sin(angle);
    
    // Transform the coordinates
    for (var i = 0; i < 4; i += 1) {
        var x = (coords[i][0] * cos) - (coords[i][1] * sin) + 0.5;
        var y = (coords[i][0] * sin) + (coords[i][1] * cos) + 0.5;
    
        result[i] = [centerPoint[0] + x, centerPoint[1] + y];
    }

    It is hard-coded to transform 4 coordinates, but you could easily just take in an input array of coordinates and generate an output array of transformed coordinates.

  • Former Member
    0 Former Member over 5 years ago in reply to jim_m_58

    I'm trying to make better hand dials and yes its for a 1 hz WF. and the power budget is important. when i use polygon with math it exceeds the power budget.

  • Former Member
    0 Former Member over 5 years ago in reply to 9635560

    i'll check this out. thanks

  • Former Member
    0 Former Member over 5 years ago in reply to jim_m_58

    Could you show me an example of the table ref?

  • If you're using this for 1hz, I'd use  whats in the analog sample as  Travis suggested.  I use that in a few things for an analog style second hand.

  • How close to the power budget are you?  Take a look at how you are setting your clip regions as that alone could be the issue.  The number of rows is really important (the display  is updated by row)  In a typical analog face with a second hand, there will be peaks at 12 and 6 o'clock, and low usage at 3 and 9 o'clock.

  • Former Member
    0 Former Member over 5 years ago in reply to jim_m_58

    I'm using the analog clock example

    Heres my code. I have other dials that i'm using but i want better ones :-) 

    I'm very close to the budget unfortunatly.

    function drawSecondHand(dc, xPos, yPos, clockTime) {
    var secondHand = (clockTime.sec / 60.0) * Math.PI * 2 - RAD_90_DEG;
    drawHand(dc, xPos, yPos, secondHand, 108, 2, cSecondHandColor);
    // clean up the center
    dc.setColor(cSecondHandColor, Gfx.COLOR_TRANSPARENT);
    }

    function onPartialUpdate(dc) {
    // no need to do anything if partial updates aren't allowed or if we
    // don't have an off-screen buffer allocated
    if (!$.gPartialUpdatesAllowed || dcOffscreenBuffer == null) {
    return;
    }
    drawBackground(dc);
    middleY = 120;
    middleX = 120;
    clockTime = System.getClockTime();
    drawHands(dc, middleX, middleY, clockTime);
    dcCurClip = calculateSecondHandClip(clockTime.sec, 108);
    dc.setClip(dcCurClip[0], dcCurClip[1], dcCurClip[2], dcCurClip[3]);
    drawSecondHand(dc, 120, 120, clockTime);
    drawHandCenter(dc, middleX, middleY, true);
    }

    function calculateSecondHandClip(seconds, SecondHandLength) {
    var angle = (seconds / 60.0) * Math.PI * 2 - RAD_90_DEG;
    var points = [
    middleX+(Math.cos(angle) * SecondHandLength),
    middleY+(Math.sin(angle) * SecondHandLength),
    middleX+(Math.cos(angle+Math.PI) * SecondHandLength * 0.17), // add PI to get 180 deg (opposite dir)
    middleY+(Math.sin(angle+Math.PI) * SecondHandLength * 0.17) // add PI to get 180 deg
    ];
    var bbox = [
    (points[0] < points[2] ? points[0] : points[2])-2,
    (points[1] < points[3] ? points[1] : points[3])-2,
    (points[0]-points[2]).abs()+4,
    (points[1]-points[3]).abs()+4
    ];
    points = null;
    // need to adjust the bounding box to handle the tail and the hand centers
    if (bbox[0] > middleX-13) {
    bbox[0] = middleX-13;
    bbox[2] += 13;
    }
    if (bbox[1] > middleY-13) {
    bbox[1] = middleY-13;
    bbox[3] += 13;
    }
    if (bbox[0]+bbox[2] < middleX+13) {
    bbox[2] = middleX+13-bbox[0];
    }
    if (bbox[1]+bbox[3] < middleY+13) {
    bbox[3] = middleY+13-bbox[1];
    }
    return (bbox);
    }

  • I suspect it may be the size of your clip region.  Try making the second had something like 1/2 the length, with the clip region needed for that and see how you're doing with the power budget (make the 108 maybe 70)