I see that there is a function to rotate an image… I just can't seem to figure it out.

Lets say that I have an image called "round_thing" and I make a button… obviously when I click it I will get…


What I want to do is something like   round_thing.rotate(5)  to rotate the image 5 degrees in this case… but I just don't understand where and how to use the function.


If I get this… I can make some awesome gauges in Inkscape and have the dials rotate as needed.

Thanks,
Jerry

Askjerry said

I see that there is a function to rotate an image…

Take a look at the Image class: /comp/gb.qt4/image - Gambas Documentation

Basically .Rotate returns a rotated copy of an image which you will then need to display (i.e. it doesn't just rotate an image directly on the screen)

Maybe something like:-

…but I haven't tested this. I've just scratched this out over breakfast!

I kinda see where you are getting..

1. There exists an image.
2. It makes a copy into memory.
3. It makes changes to this copy.
4. The copy is loaded into the image box as if it were an image.
5. The user sees the copy which has taken the place of the source image.

If that is the case, we can load the image into a variable… pass it through the routine like a filter with rotate=0.
Then for any other value, repeat the step with the associated angle value.

I get the theory… but still not quite sure how to implement it. The lat time I made a 3D model of a servo and then used a program to animate it… I exported the animation as image so i had SERVO-000.png to SERVO-100.png and simply loaded the image I wanted based on the number 1 to 100. (Using math to pick the image number.) Goofy perhaps… but it worked. I could do that with a transparent png for a gauge… just trying to do it as a rotate because then I could do it without making an animation. But if I can't figure it out… that is always another means to do it.

Thanks,
Jerry

Askjerry said

…I get the theory… but still not quite sure how to implement it. …

I guess it will depend on what you want the final image to look like, so having a number of pre-made images could be your best approach.

But since you wanted to try .Rotate here are a few more of my 'breakfast scratchings'

Process:-

•  Open Gimp and create a new transparent image (I made mine 300 x 300).
• Use the Ellipse selection tool to create a circle, then fill it with white paint.
• Save in your Gambas project folder.
• Add a PictureBox (300x300) and a Button to a Gambas form and write some code:-

Once again, this is a just a breakfast prototype/proof-of-concept.

It looks like the .Rotate is in Radians, but I'll leave you to work out how to scale it.

My simple dial looks like this as Angle is incremented:-

(Click to enlarge)

<COLOR color="#BF0000">EDIT:-

I just remembered, use Rad for degrees to radians</COLOR>

Have a look at the following programs on the Gambas Farm: -

An excellent 'example' program Painting 1.0.0
This one uses the Paint Class to redraw the clock Analogue_clock 1.0.0

Stevedee: First time I've been on in a bit, I wanted to thank you for the code… it works! I'll need to tinker with it to see if I can dissect it better and get a better feel for it. I did notice that the image is a bit fuzzy as compared to the original image… so I think I will stick to the animation trick of making a series of images… even if it does take a bit more memory and means an image load each time. I've run it so fast that your eyes can't keep up with it and it still ran smoothly… so it may be that it can load just as fast as it can perform the rotational math.

Give Inkscape  a try for graphic generation… it is a vector graphics so you have transparency, gradients, etc. Then when you get the image you like, you can export it as a PNG at any resolution you want to make incredibly detailed graphics. As soon as I have a chance, I'll make a demo to show some of the things you can accomplish with this method… hopefully help someone else along the way.

Cogier: I'll take a look at those… thanks!

~ Jerry  

Askjerry said

…I did notice that the image is a bit fuzzy as compared to the original image… so I think I will stick to the animation trick of making a series of images…

…Give Inkscape  a try for graphic generation…

Jerry, you may be interested in a recent post & example by Doctor Watson about fuzzy images, and how using vector graphics is a better approach: The benefits of using vector graphics - revisited - Gambas ONE

Thanks for the tip on Inkscape. I do quite a bit of photography using RawTherapee to convert RAW to Tiff then edit with Gimp, which can do pretty much most things including convert to many formats, but it may be a little over-blown for some tasks.

I will look at the link you sent… if I can use SVG natively in Gambas it would be great.
I don't know if you are aware or not, but in the SVG format everything is named… or has a reference. This means that you can tell the file to make changes.

Rather than explain it all, I'll send you to a page I wrote as an experiment… in the sample Gauge, the pointer is named "POINTER" so i can basically tell it to rotate the pointer 45 degrees and it looks great. Have a look and play with these two examples to see what i'm talking about. You can also embed things like button clicks on individual components.

SVG Experiments

Let me know what you think. Again… I'll check out your links.

Thanks,
Jerry

Askjerry said

…Let me know what you think…

I love both of your gauges Jerry, especially the shadow detail that changes as the dial rotates on this one;

(Click to enlarge)

Askjerry said

If I get this… I can make some awesome gauges in Inkscape and have the dials rotate as needed.

Hi Jerry,
It is possible to use svg files in the graphic interfaces of gambas in different controls, from buttons to picturebox, the quality is excellent, it has no comparison with a pixel image.
Here is an example that loads your image of the pressure gauge.
If you wish, you can also take a look at tradukisto in gambas farm where i use SVG for icons and other things.
<IMG src="https://i.imgur.com/DpEAUQK.png"> </IMG>
Note: I took the liberty of using your svg image.
Regards
Martin.

 I'm very happy you liked the samples and could get them to load.

The shadow in the gauge is really easy… create a pointer and name it as such, make a copy and name it shadow.
Then color the shadow black, set it to be partially transparent, and offset it slightly.
Then rotate both the same amount.

If we can reference the SVG subcomponents and apply movement and/or rotation… awesome GUI could be created.

Jerry

Askjerry said

If we can reference the SVG subcomponents and apply movement and/or rotation… awesome GUI could be created.

it is possible, i will try to do the pointer rotation.
Regards

 ok, I have managed to alter the properties of the sub components, the coordinates for the case of the indicator needle and the text. But something is wrong because the result is not as expected.
I'm going to try using another graphical element, like a line.
Jerry: How did you do it in javascript?
Regards.
Martin.

Here are a couple of files to play with…
SVG Experiments