Rotating ImageSprite on meter display

I'm trying to create something like a VU-meter with an animated needle. But whenever I rotate the needle it jumps to a higher location in the canvas and doesn't align with the meter image.

The meter canvas is 450x240 pixels, showing a typical VU-meter quantrant display, arranged from 135 to 45 degrees per the AI2 coordinates. I then place a needle (just an ImageSprite of a red line on a transparent background) to align with the zero point on the meter.

Note that the rotation point is outside the canvas boundary, though even resizing the canvas to include it didn't help.

What am I doing wrong?m1 meter

Try drawing (and redrawing) a line, perhaps with a clock timer for many values, start x,y will always be the same, end x,y your point on the scale (calculated to work on the canvas)

Hmm, think I've got it. I needed to make the ImageSprite the same width as the canvas image. To have the correct rotation point it also need to be square, so the same height as the width. The canvas image can them be shorter so as to look more like a typical meter. e.g. 500x200 for the canvas, and 500x500 for the ImageSprite.

My experiments might be useful Steven.


Smeter.aia (98.1 KB)

Good luck. When you get a perfect solution, please post it. You may have to squash the meter a bit (a square probably not needed) and lower the Sprite1 Y coordinate. Experiment.

Hi SteveJG,

I think I've got it almost perfect. I still needed to keep the imagesprite the same width as the canvas image, and it needs to be high enough to align the point of rotation with the (off canvas) axis of the meter's arc.


I say almost perfect since though it works great in landscape mode, or on a tablet with sufficient horizontal resolution in portrait mode, it gets a bit funky on a phone in portrait mode.

I also changed the canvas image, but that was just for ascetics and shouldn't affect the function (though it's now about 110 degrees of arc instead of 90). The aia also converts the 0-255 scale that I get from the radio to the angle scale for the needle.

CAT_meter_test.aia (261.3 KB)

I am a bit late to the party, but you may want to look here:

You can use HighCharts offline by signing up for a free account and downloading the js files required
Highcharts Setup on AI2

1 Like

hi congratulations on the project
and if I wanted to make it move to the rhythm of a sound (player music) how could I do?

Keep feeding it data....

can you give me an example, I'm not giving where to start

I used the example aia project above, and added a clock timer with a random integer block.

Press Start

CAT_meter_test_with_timer.aia (262.6 KB)

SimpleDecibelMeter.aia (584.2 KB)
may not so accurate.But be aanimation.