Rotating an image (FR965)

Heyho fellow Garmin enthusiasts,

I am working on my first watch face and having a hard time finding my way around. Getting all the software requirements to work properly was kind of an ordeal, but stuff is running smoothly now. For the most party.

I decided to create an analog clock watchface. For that purpose I created the watch face in Illustrator and exported it as a *.png file with transparent background. (Well, does transparency even work or a FR965? I'll put that aside for later). Putting the watch face on the screen was easy enough. Now I want to rotate that whole watch face in intervals of 1 hour. +30° at 1 o'clock, +60° for 2 o 'clock and so on. You get the idea. The stuff that you'd expect a clock hand to do, just that it isn't a clock hand.

Of course I did some research on the topic and the results are pretty confusing. It seems there is no easy way to do this.

Could someone give me a hint on where to look for the right and actually preferred solution?

Ty in advance,

mike

0 kemppaij over 1 year ago

If you search with affineTransform here in the forum, it points you to the right direction!

0 kemppaij over 1 year ago in reply to kemppaij

forums.garmin.com/.../1634475

0 Freakay over 1 year ago in reply to kemppaij

Thanks a bunch,

I found this thread before but didn't really get it, to be honest. Guess I'll take a deep dive into this topic and try to learn the basics.

0 Freakay over 1 year ago

So, obviously this stuff is a bit hard to grasp for me.

Instead of my bitmap I am greeted by an IQ with an exclamation mark. I guess that means my code crashed the simulator.

        // Get Hour
        var currentHour = System.getClockTime().hour;

        // calculate rotation
        var rotationDegrees = (currentHour * 30) % 360;
        var rotationRadians = rotationDegrees * (Math.PI / 180);

        // create affine transform matrix
        var transform = new AffineTransform();

        // do the rotation
        transform.rotate(rotationRadians);

        // create parameters
        var parameters = {
            :bitmapX => 6,  // X-Pos on screen
            :bitmapY => 6,  // Y-Pos on screen
            :bitmapWidth => 443,  // width of bitmap
            :bitmapHeight => 443,  // height of bitmap
            :transform => transform  // Affine Transformation
        };

        // Call the parent onUpdate function to redraw the layout
        View.onUpdate(dc);

        // draw bitmap
        dc.drawBitmap2(6, 6, dialBitmap, parameters);

Hum ... difficult. I'm pretty sure I am missing something super obvious I just can't see it just yet.