Bitmap Transformation

Same again. 6.2.0 introduces new features, but no examples. Everyone has to reinvent the wheel (except senior SW architects around, but I can imagine, also they have difficulties in case of Bitmap Tranformation feature). Bitmap Tranformation seems to be very interesting. Scalable Fonts are only avalable on some devices, so not interesting (only in some years if majority of devices in the field are supporting).

Top Replies

ftrimboli over 1 year ago +3
Ok, so the Affine transformations stuff is heaps of fun!!

I'll be making some trippy watch faces for you folks

Here's a snippet of my code;
```
  // define our bitmap offset
  var x_off = 0;
 …
```
Travis.ConnectIQ over 1 year ago in reply to el34rob +2

Yes, composing transforms is backward from the order you expect.

In case anyone finds it helpful, here is a cut down version of the test app I used when working on the feature. I used a greyscale version…
FlowState over 1 year ago in reply to jim_m_58 +1

jim_m_58 said:
With the AffineTransformation stuff, I got to admit I don't even really understand what the basic calls are about.

TL;DR it's using matrix math to transform images (e.g. translate, rotate…

All Replies

Jacquers 7 months ago in reply to Freakay

Check the 'debug console' tab if you're using VS Code for more info. Which watch are you coding for?

You also probably want to have a more accurate angle for the hour, e.g.

// each hour is 30° + 0.5° per minute

var angle = (dateInfo.hour * 30 + dateInfo.min * 0.5 + 270) * _toRads;

var angle = ((dateInfo.hour + dateInfo.min / 60.0) * 30 + 270) * _toRads;

where toRads = Math.PI / 180

And for the transform you probably need to do a translate as well to position it correctly.

Freakay 7 months ago in reply to Jacquers

So, for starters I figured out why the app crashed in the first place: there was an issue with the color palette of my png file. Adding

 packingFormat="png"

in my drawables.xml solved this problem. Stupid mistake.

Thank you for your support. Yes, accurate angles are the way to go for sure. But first I need to figure the basic stuff out.

At the moment I'm struggling to get my image to show up at all. I just found out that it's there, but rotated out of sight. A quick research (*coughcopilotcough*) pointed out, that the image doesn't get rotated around it's own center point by default, but rather around the, uhm ... "origin" [0,0]

So I had to move the image to the "origin" first, rotate it and then move it back in this designated place.

 // move graphic to origin
        transform.translate(-dialBitmap.getWidth() / 2, -dialBitmap.getHeight() / 2);

        // rotate
        transform.rotate(rotationRadians);

        // move graphic to designated place
        transform.translate(dialBitmap.getWidth() / 2, dialBitmap.getHeight() / 2);

In the end it's still not in the place where I'd expect it to be. *scratches head*

Jacquers 7 months ago in reply to Freakay

You shouldn't need to translate twice.

mTransform.initialize();

//mTransform.scale(0.8, 0.8);

mTransform.rotate(Math.toRadians(time.sec * 6).toFloat());

mTransform.translate(-19.0, -185.0);

my image is the following hand:

Freakay 7 months ago in reply to Jacquers

The double translation is supposed to be necessary. At least that's what I found on the web. To rotate the image around it's own center (that's what I'm trying to do) I need to move it to the origin point, then rotate it and then move it back where it is supposed to be. Btw: ftrimboli doesn something like that in his code on page 2, too.

At the moment it neither get's drawn in the right place (but somewhere off-screen), nor is the rotation correct, as far as I can see, when I manage to put it somewhat in place manually by putting in weird x and y values in the drawbitmap2.

Jacquers 7 months ago in reply to Freakay

This works for me. It rotates around it's center. The code that Travis posted has an image slightly off center (which can easily be changed to be centered) and does it with one rotate + translate iirc. The order seems backwards, like Travis said. You don't actually need the initialize and this example is unoptimized.

The screen and image is 416x416. You'll see it's a pixel off on some positions, but I think that's just a quirk with Garmin and drawLine() or the image I'm using.

And this is also an interesting video for anyone who wants to better understand how these transforms work. Affine transformations in 5 minutes - YouTube

Freakay 7 months ago in reply to Jacquers

This is just super ... weird. Your code works perfectly. That's almost exactly what I wanted to do.

It bugs me like crazy that I couldn't figure it out, but I'll keep learning and practicing.

Thank you for your patience and support. And the video, of course.