Function Rotate(Angle As Float) As Image

Ask about the individual Gambas components here.
User avatar
Askjerry
Posts: 64
Joined: Saturday 18th August 2018 9:06pm
Location: Kyle, Texas, USA
Contact:

Function Rotate(Angle As Float) As Image

Post by Askjerry »

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...

Code: Select all

Public Sub Button1_Click()
 ' --- What goes here????
End
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.

Code: Select all

Function Rotate(Angle As Float) As Image
' --- Again... I have no clue.
End
If I get this... I can make some awesome gauges in Inkscape and have the dials rotate as needed.

Thanks,
Jerry
User avatar
stevedee
Posts: 518
Joined: Monday 20th March 2017 6:06pm

Re: Function Rotate(Angle As Float) As Image

Post by stevedee »

Askjerry wrote: Tuesday 27th April 2021 2:32am I see that there is a function to rotate an image...
Take a look at the Image class: https://gambaswiki.org/wiki/comp/gb.qt4/image

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:-
  imgThisImage = Image.Load(sImageFile)
  PicBox.Image = imgThisImage
...
  imgRotImage = imgThisImage.Rotate(10.0)
  PicBox.Image = imgRotImage
...but I haven't tested this. I've just scratched this out over breakfast!
User avatar
Askjerry
Posts: 64
Joined: Saturday 18th August 2018 9:06pm
Location: Kyle, Texas, USA
Contact:

Re: Function Rotate(Angle As Float) As Image

Post by Askjerry »

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
User avatar
stevedee
Posts: 518
Joined: Monday 20th March 2017 6:06pm

Re: Function Rotate(Angle As Float) As Image

Post by stevedee »

Askjerry wrote: Wednesday 28th April 2021 12:52am ...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:-
Public Sub Form_Open()
  
  PicBox1.Alignment = 3   'central alignment
  PicBox1.Tag = 0.0         'use Tag as a counter
  
End

Public Sub btnRotate_Click()
Dim imgThisImage As Image
Dim imgRotImage As Image

  imgThisImage = Image.Load("Dial.png")
  PicBox1.Image = imgThisImage

  imgRotImage = imgThisImage.Rotate(PicBox1.Tag)
  PicBox1.Image = imgRotImage
 
  Inc PicBox1.Tag
End
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:-
DialRotate.png
DialRotate.png (22.95 KiB) Viewed 6810 times

EDIT:-

I just remembered, use Rad for degrees to radians
imgRotImage = imgThisImage.Rotate(Rad(PicBox1.Tag))
User avatar
cogier
Site Admin
Posts: 1118
Joined: Wednesday 21st September 2016 2:22pm
Location: Guernsey, Channel Islands

Re: Function Rotate(Angle As Float) As Image

Post by cogier »

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
User avatar
Askjerry
Posts: 64
Joined: Saturday 18th August 2018 9:06pm
Location: Kyle, Texas, USA
Contact:

Re: Function Rotate(Angle As Float) As Image

Post by Askjerry »

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 :D
User avatar
stevedee
Posts: 518
Joined: Monday 20th March 2017 6:06pm

Re: Function Rotate(Angle As Float) As Image

Post by stevedee »

Askjerry wrote: Wednesday 5th May 2021 1:38am ...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: https://forum.gambas.one/viewtopic.php?f=4&t=1106

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.
User avatar
Askjerry
Posts: 64
Joined: Saturday 18th August 2018 9:06pm
Location: Kyle, Texas, USA
Contact:

Re: Function Rotate(Angle As Float) As Image

Post by Askjerry »

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.

http://askjerry.info/SVG/

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

Thanks,
Jerry
User avatar
stevedee
Posts: 518
Joined: Monday 20th March 2017 6:06pm

Re: Function Rotate(Angle As Float) As Image

Post by stevedee »

Askjerry wrote: Sunday 30th May 2021 3:32am ...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;
AskJerry.png
AskJerry.png (78.87 KiB) Viewed 6221 times
User avatar
tincho
Posts: 57
Joined: Wednesday 10th July 2019 1:12pm

Re: Function Rotate(Angle As Float) As Image

Post by tincho »

Askjerry wrote: Tuesday 27th April 2021 2:32am 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.
Public Sub Form_Open()
  Dim pic As Picture
  pic = Image.Load("./pg.svg").Stretch(PictureBox1.w, PictureBox1.h).Picture
  PictureBox1.Picture = pic
End
Image
Note: I took the liberty of using your svg image.
Regards
Martin.
Attachments
sample-svg-load-for-jerry-0.0.1.tar.gz
(14.06 KiB) Downloaded 268 times
Post Reply