Graduations and half circle

Help and techniques for creating Air Manager Instrument Graphics

Moderators: russ, Ralph

Message
Author
JackZ
Posts: 2262
Joined: Mon Feb 22, 2016 1:02 pm

Re: Graduations and half circle

#11 Post by JackZ »

Before AM 3.5 or so this kind of feat was tricky to achieve.
To have a needle rotate where you wanted it to be, one had to create an image TWICE the length of the needle, so the « center » of the needle was right in the middle of the image.
This because the rotate() function used to rotate an image only by its center.

Nowadays it is way more easier since the center of rotation can be defined directly in the rotate() function.

https://siminnovations.com/wiki/index.php?title=Rotate

Use:

Code: Select all

rotate(node_id, degrees, anchor_x, anchor_y, anchor_z)
Where anchor_x and anchor_y are the location of the center of rotation respective to your image (with the top left corner of the image being 0/0).
Leave anchor_z to 0.
Could you publish here your instrument, so we can have an idea of the shape of the needle?

Jacques
My YouTube Chanel on the A320 (Real SOPs by an Airline Pilot IRL):
https://www.youtube.com/playlist?list=P ... 0Q6SBASRqJ

oscarDelta77
Posts: 57
Joined: Sat Nov 26, 2016 9:58 pm

Re: Graduations and half circle

#12 Post by oscarDelta77 »

I've just tried to use this command line, with some values for X and Y.

Code: Select all

rotate(img_needle,i, 256, 256, 0)
Still not good. What should be the size and position of the needle picture ? Big doubt !

Image

Here's a link to my instrument (is it the good way to publish it here ?) https://wetransfer.com/downloads/a32022 ... 725/187e2f

User avatar
Ralph
Posts: 7878
Joined: Tue Oct 27, 2015 7:02 pm
Location: De Steeg
Contact:

Re: Graduations and half circle

#13 Post by Ralph »

Note that an image always rotates from the center. So if you want it to rotate from the bottom of the red needle, dan the image has to be twice as long.

User avatar
Keith Baxter
Posts: 4674
Joined: Wed Dec 20, 2017 11:00 am
Location: Botswana

Re: Graduations and half circle

#14 Post by Keith Baxter »

hi,

Post the two images and I will have a look and give you the code so that you can see how it is done. I need the original .png files please.

Keith
AMD RYZEN 9 5950X CPU, Corsair H80I cooler, ASUS TUF GAMING B550-PLUS AMD Ryzen Mother Board,  32Gb ram Corsair Vengeance 3000Mh, MSI GTX960 4G graphics card 

oscarDelta77
Posts: 57
Joined: Sat Nov 26, 2016 9:58 pm

Re: Graduations and half circle

#15 Post by oscarDelta77 »

@Ralph

If i double the size of the picture, it's not good at all.
Sorry for the misunderstanding.


@Keith Baxter

I'm missing something. :oops:

Here are the png files:

Image

Image

thanks for your help and explanations !

User avatar
Keith Baxter
Posts: 4674
Joined: Wed Dec 20, 2017 11:00 am
Location: Botswana

Re: Graduations and half circle

#16 Post by Keith Baxter »

Hi,

I ran this quick code to see how the images line up. The pointer is positioned slightly to the right. However I am not sure if the pointer is to low or the center-point of the pointer is where the cross hair lines intersect.

Code: Select all

-- Load and display the dial
dial = img_add("iWYWKgK.png", 100, 100, 200, 200)



--Create cross hair linse to check alignment.
rectangle_id = canvas_add(100, 100, 200, 200, function()
	_move_to(99,0)
	_line_to(99,200)
	
	_move_to(0,99)
	_line_to(200,99)	
	
	
	_stroke("white",2)
end)
-- Load and display the pointer
pointer = img_add("1FE0UEb.png", 100, 100, 200, 200)

rotate(pointer,30)
ice_screenshot_20211215-000622.png
ice_screenshot_20211215-000622.png (68.91 KiB) Viewed 2878 times
ice_screenshot_20211215-001135.png
ice_screenshot_20211215-001135.png (70.41 KiB) Viewed 2878 times
Keith
AMD RYZEN 9 5950X CPU, Corsair H80I cooler, ASUS TUF GAMING B550-PLUS AMD Ryzen Mother Board,  32Gb ram Corsair Vengeance 3000Mh, MSI GTX960 4G graphics card 

User avatar
Keith Baxter
Posts: 4674
Joined: Wed Dec 20, 2017 11:00 am
Location: Botswana

Re: Graduations and half circle

#17 Post by Keith Baxter »

Hi,


In this example I wanted to ascertain the position of the pointer if it rotated at the bottom end.

Code: Select all

-- Load and display the dial
dial = img_add("iWYWKgK.png", 100, 100, 200, 200)

--Create cross hair linse to check alignment.
rectangle_id = canvas_add(100, 100, 200, 200, function()
	_move_to(100,0)
	_line_to(100,200)
	
	_move_to(0,100)
	_line_to(200,100)	
	
	_move_to(0,115)
	_line_to(200,115) ---This line is to determine the bottom of the pointer y coordinate
		
	_stroke("white",2)
end)
-- Load and display the pointer
pointer = img_add("1FE0UEb.png", 100, 100, 200, 200)

--Rotate the pointer using the y coordinate {rotate(node_id, degrees, anchor_x, anchor_y, anchor_z)}
rotate(pointer,-30,100,115,0)
ice_screenshot_20211215-003113.png
I think this should assist. If not just shout.

Keith

EDIT: Remember when drawing lines. Take into account the stroke thickness. Canvas uses center align not left or top align .
Last edited by Keith Baxter on Wed Dec 15, 2021 6:30 pm, edited 1 time in total.
AMD RYZEN 9 5950X CPU, Corsair H80I cooler, ASUS TUF GAMING B550-PLUS AMD Ryzen Mother Board,  32Gb ram Corsair Vengeance 3000Mh, MSI GTX960 4G graphics card 

oscarDelta77
Posts: 57
Joined: Sat Nov 26, 2016 9:58 pm

Re: Graduations and half circle

#18 Post by oscarDelta77 »

@Keith Baxter

You're my hero ! :D

I've made some tests and the needle is ok now ! I will finish this instrument and post the result.

Thanks again ! :)

JackZ
Posts: 2262
Joined: Mon Feb 22, 2016 1:02 pm

Re: Graduations and half circle

#19 Post by JackZ »

Aha sorry for not being your hero, tried my best though… :lol:
Keith used another route, that is a needle drawn in canvas draw.

That was not the object of your original question, which was: « how to rotate an image when the center of rotation is not at the center of it? »
Ralph and I provided the answer, let me come back from work and as “a picture is worth a thousand words”, you’ll understand immediately.

After that it will be a matter of choice,both solutions have their Pro and Cons, personally I tend to be avoid drawing everything in canvas, because this often leads to complicated calculations IMHO.

Jacques
My YouTube Chanel on the A320 (Real SOPs by an Airline Pilot IRL):
https://www.youtube.com/playlist?list=P ... 0Q6SBASRqJ

User avatar
Keith Baxter
Posts: 4674
Joined: Wed Dec 20, 2017 11:00 am
Location: Botswana

Re: Graduations and half circle

#20 Post by Keith Baxter »

JackZ wrote: Wed Dec 15, 2021 4:39 pm Aha sorry for not being your hero, tried my best though… :lol:
Keith used another route, that is a needle drawn in canvas draw.

That was not the object of your original question, which was: « how to rotate an image when the center of rotation is not at the center of it? »
Ralph and I provided the answer, let me come back from work and as “a picture is worth a thousand words”, you’ll understand immediately.

After that it will be a matter of choice,both solutions have their Pro and Cons, personally I tend to be avoid drawing everything in canvas, because this often leads to complicated calculations IMHO.

Jacques
Jacques,

You are mistaken my cousin. I suspect speed reading whilst at work :P .
Congratulations on working again. I am glad for you. Still flying or doing something else?

I used the dial & pointer .png files that the OP supplied.

I simply drew a Grid in canvas as a tool to determine the rotate offset which is 115. Take a look at the code and you will see what I did. The canvas will be deleted and only two images remain. I left the canvas in code just to demonstrate the tool. So now all know how it is done. :idea:


Keith
AMD RYZEN 9 5950X CPU, Corsair H80I cooler, ASUS TUF GAMING B550-PLUS AMD Ryzen Mother Board,  32Gb ram Corsair Vengeance 3000Mh, MSI GTX960 4G graphics card 

Post Reply