# Rotating an Image

Hey all,

I recently started using Logoist (thanks Sasha - GREAT app!) to make a knob I am going to have in my app. I’m trying to make this a control that I can adapt for multiple numbers of stops, etc. as it rotates. Below is a picture of the knob:

I want to be able to rotate the knob around the axis. I’ve tried using Chrstian’s Picture.RotateMBS method, but as the center of rotation that I want is not actually the center of the image, the rotation doesn’t work correctly. Plus there is shadowing and “lighting” on the image which doesn’t stay in the correct spot of I use his method to rotate the image.

So my next brilliant idea is to generate 360 different images all rotated by a degree. I’m trying to figure out if there’s a way in Logoist to automate something like this but so far no luck. Maybe I don’t need 360 different possible stops - maybe just a stop every 10 degrees but that’s still 36 different images. Seems like a lot of images to have to load into a control, etc.

Is that the best way to do this though? Create an array of images in the control and then load the one for the particular stop position that you want to be at?

Thanks!

• normailze the size of the image, so that the actual center IS the rotation point
• use PixMapShape… no plugins required

I made a tank game using this method, and it worked out great

Its quite easy to rotate the image.
Use the image as a PictureShape, displaying using the Object2D methods, and you can apply rotation to it for any angle.

But

No rotation method is going to cater for shadows and highlights
To do that, you need to be rendering a 3D object, where a light source and textures lead to shadows and highlights. Yes, you can create 360 images and display the right one.
Maybe you can use OpenGL to render on the fly

If I may: it would be simpler to use a simpler control.
Consider this one:

Since the highlights don’t need to move, all you need to do is place the DOT at the correct point around the perimeter…?

Thanks Dave. The way I have it drawn in Logoist, the center of rotation is set to the center of the picture which is why I am surprised that Christians method didnt work.

I see Jeff has replied as well. Thanks to you both. Ive never PixMapShape or PictureShape so Ill try that out. Sounds easy enough.

As for the shading, yeah I get it. Maybe Ill just ignore that.

Thanks for the knob Jeff, maybe Ill try that.

The centre of the picture isn’t the point around which the dial rotates.
There’s a lump, which makes the centre of the picture about 5% too far to the right.

[quote=388074:@Jeff Tullin]The centre of the picture isn’t the point around which the dial rotates.
There’s a lump, which makes the centre of the picture about 5% too far to the right.[/quote]

Yes. I understand. It has to be the way the picture gets exported from Logoist as in Logoist the center of the knob is the rotational axis.

So as an update, I ended up creating a PixMapShape object and rotating that. Even though the image has highlighting on it would should technically not move as the “knob” is moved, I am just ignoring that and rotating things. So the “light” rotates with it - who cares.

Thanks for the help guys.

Jeff Tullin - do you have the image file for your knob?

(snicker)

I just searched Google for ‘Dial Images’
Warning: Do NOT search for ‘knob images’

Oh. ok.

Boy do I feel silly!

This is where you can license that knob for commercial use:
https://graphicriver.net/item/royce-gui-graphical-user-interface/411333

Thanks, Tim.

But I’m sticking with my original knob for now. I’ve actually developed quite a nice control around it.