Panel Scaling in the Scripts

Help creating logic scripts for Air Manager Instruments

Moderators: russ, Ralph

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

Re: Panel Scaling in the Scripts

#11 Post by JackZ »

RoundEngine wrote: Tue Jul 06, 2021 1:27 am That is what I was thinking of. The only difference is the panel - the area containing the instruments would be resized so the buttons line up neatly - each row being the width, each column the height but it's not doable so I'll work around that.

Oh, yes. I'd have to have an array to handle the each button's function.

Thank you all for the input. I'll have to think on this for a while.
Oh I see.
The only way to workaround this would be to set some user properties for the “panel” width & length (ie the background) and calculate everything from that. The background rectangle would be created at runtime using canvas.
Quite some maths involved, but no rocket science either.

Maybe using a viewport_rect at the panel level could work too, have never tried this new feature.

And the instrument itself would be the only instrument displayed on a transparent panel.
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: Panel Scaling in the Scripts

#12 Post by Keith Baxter »

HI,

I knocked up this quick panel concept so that peeps can see what can be done.

The video is just to show you how to use the button and dials.
Just copy and paste the code into a 1920x1080 instrument and run.
Should you want help further. Look me up on the discord and i will assist in allocating buttons, switches etc...



Code: Select all

---Create moving resizable panel

---Text Styles
arbR_40bluC="font:arimo_bold.ttf; size:40px; color: #05fcfe; halign:center; valign:center;"
arbR_100bluC="font:arimo_bold.ttf; size:100px; color: #05fcfe; halign:center; valign:center;"

---Add all the Canvases in Z order
panel_background_canvas             =canvas_add(0,0,1920,1080)
panel_main_canvas                   =canvas_add(0,0,1920,1080)
switch_canvas                       =canvas_add(0,0,1920,1080)
switches_canvas                     =canvas_add(0,0,1920,1080)
config_indicator_button             =canvas_add(0,0,1920,1080)
config_menu                         =canvas_add(0,0,1920,1080) visible(config_menu,false)

---Create empty groups
config_group                        =group_add()visible(config_group,false)
resize_group                        =group_add()
panel_group                         =group_add()

---draw the basic panel canvases
canvas_draw(panel_background_canvas,function()
   _rect(0,0,1920,1080)
   _fill("#2a2a2a")  
end)
canvas_draw(panel_main_canvas,function()
   _move_to(200,2)
   _line_to(1720,2)
   _quad_to(1920,70,1920,290)
   _arc(1880,490,0,90,40)
   _arc(42,490,90,180,40)
   _arc(52,300,180,190,50)
   _quad_to(70,0,200,2)
   _fill("#fbebcd")  
end)
---Draw the configure options menu
canvas_draw(config_menu,function()
   _rect(700,50,450,200)
   _fill("#c68c8c")
   _rect(700,50,450,200)
   _move_to(700,150)
   _line_to(1150,150)
   _move_to(700,250)
   _line_to(1150,250)
   _move_to(925,50)
   _line_to(925,250)   
     
   _stroke("#ff5353",8)
   _move_to(670,35)
   _line_to(1154,35)   
   _move_to(685,50)
   _line_to(685,254)   
   _stroke("#ff5353",30)

   _txt("WIDTH",arbR_40bluC,925,35)  
   _txt("H",arbR_40bluC,685,90)   
   _txt("I",arbR_40bluC,685,120)   
   _txt("G",arbR_40bluC,685,150)  
   _txt("H",arbR_40bluC,685,180)   
   _txt("T",arbR_40bluC,685,210)     
   _txt("↔",arbR_100bluC,812.5,90)   
   _txt("↕",arbR_100bluC,1037.5,95) 
   _txt("COLUMN",arbR_40bluC,812.5,200)   
   _txt("ROW",arbR_40bluC,1037.5,200)   
end)
---Draw the Config button for demo purposes 
canvas_draw(config_indicator_button,function()
   _circle(35,35,15)
   _fill("blue")
   _circle(35,1000,15)
   _fill("red")
   _circle(1895,1000,15)
   _fill("green")
end)
   canvas_draw(switch_canvas,function()
      _rect(100,400,305,100)
      _fill("#8c8c8c")	  	  
      _rect(100,400,305,100)	  
      _stroke("black",3)  
   end)

---Configuration Functions
function switch_config()
   canvas_draw(switch_canvas,function()
      _rect(100+x_axis_var,400+y_axis_var,305+width_var,100+hight_var)
      _fill("#8c8c8c")
      _rect(100+x_axis_var,400+y_axis_var,305+width_var,100+hight_var)
      _stroke("black",3)	  
   end)   
   sw_width=(300+width_var)/column_var
   sw_hight=(100+hight_var)/row_var
   canvas_draw(switches_canvas,function()  
      for i1 = 1,row_var do   
         for i=1,column_var do
          _rect(-sw_width+(105+x_axis_var)+sw_width*i,-sw_hight+(405+y_axis_var)+sw_hight*i1,sw_width-5,sw_hight-5)
          _fill("white")   
        end
      end		
   end)
end

---Add the configuration controls
--Scale Dial
sc_var=100
function scale_dial_rotate(dir)
   sc_var=var_cap(sc_var-dir,50,100)
   move(panel_group,0+(x_pos_var*10),0+(Y_pos_var*10),19.20*sc_var,10.80*sc_var)
print(sc_var)
end
scale_dial=dial_add(nil,0,0,70,70,scale_dial_rotate)
--X Position Dial
x_pos_var=0
function x_pos_dial_rotate(dir)
   x_pos_var=var_cap(x_pos_var+dir,0,100)
   move(panel_group,0+(x_pos_var*10),0+(Y_pos_var*10),19.20*sc_var,10.80*sc_var)
print(sc_var)
end
x_pos_dial=dial_add(nil,0,1000,70,70,x_pos_dial_rotate)

--Y Position Dial
Y_pos_var=0
function Y_pos_dial_rotate(dir)
   Y_pos_var=var_cap(Y_pos_var+dir,0,100)
   move(panel_group,0+(x_pos_var*10),0+(Y_pos_var*10),19.20*sc_var,10.80*sc_var)
print(sc_var)
end
Y_pos_dial=dial_add(nil,1850,1000,70,70,Y_pos_dial_rotate)

--X Axis
x_axis_var=0
function x_axis_dial_rotate(dir)
   x_axis_var=var_cap(x_axis_var+(dir*2),-100,1000)
switch_config()
end
x_axis_dial=dial_add(nil,700,50,200,100,x_axis_dial_rotate)
--Y Axix
y_axis_var=0
function y_axis_dial_rotate(dir)
   y_axis_var=var_cap(y_axis_var+(dir*2),-400,1000)
switch_config()
end
y_axis_dial=dial_add(nil,950,50,200,100,y_axis_dial_rotate)
--Hight dial add
hight_var=0
function hight_dial_rotate(dir)
   hight_var=var_cap(hight_var+(dir*2),-50,100)
switch_config()
end
hight_dial=dial_add(nil,670,50,30,200,hight_dial_rotate)
--Width Dial add
width_var=0
function width_dial_rotate(dir)
   width_var=var_cap(width_var+(dir*2),-50,300)
switch_config()
end
width_dial=dial_add(nil,700,35,450,30,width_dial_rotate)
--Number of Columns Dial
column_var=1
function column_dial_rotate(dir)
   column_var=var_cap(column_var+dir,1,8)
switch_config()
end
column_dial=dial_add(nil,700,150,200,100,column_dial_rotate)
--Number of Rows Dial
row_var=1
function row_dial_rotate(dir)
   row_var=var_cap(row_var+dir,1,3)
switch_config()
end
row_dial=dial_add(nil,925,150,200,100,row_dial_rotate)

--Config Button
cf_var=0
function config_button_press()
   cf_var=cf_var+1
   if cf_var>1 then cf_var =0 end
   visible(config_group,cf_var==1)
   visible(config_menu,cf_var==1)
end
config_button=button_add(nil,nil,20,20,30,30,config_button_press)

---Add nodes to groups
group_obj_add(config_group,scale_dial,x_pos_dial,Y_pos_dial,hight_dial,width_dial,x_axis_dial,y_axis_dial,column_dial)
group_obj_add(panel_group,panel_main_canvas,switch_canvas,switches_canvas)

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 

RoundEngine
Posts: 122
Joined: Thu Sep 12, 2019 8:27 pm

Re: Panel Scaling in the Scripts

#13 Post by RoundEngine »

Oh. Hmm. I need to think about this. So I have a real panel -what shows up in the panel page of AM that is transparent but my instruments (buttons) are on that and can be resized.

Thank you.

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

Re: Panel Scaling in the Scripts

#14 Post by JackZ »

Nice work with Canvas draw, @Keith Baxter !
I like the idea of having a graphic UI directly in the instrument instead of relying on user properties.

One question though:
From your code, I gather that you draw white boxes in canvas, but how do you turn these boxes into buttons with specific functions for each button, which was the initial problem of the OP?

Here we need to create an array of buttons with button_add(), so the user can press any of theses and perform various functions.
Guess that in this case one has to overlay the canvas rectangles with buttons with nil images?
I tend to prefer in that case the good ol’ method of using png images directly in the button_add(), as this allows to animate the press of a button. Could probably be done in canvas as well, but more complicated IMHO

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

RoundEngine
Posts: 122
Joined: Thu Sep 12, 2019 8:27 pm

Re: Panel Scaling in the Scripts

#15 Post by RoundEngine »

Some interesting ideas and I need to think about them all.
Thanks.

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

Re: Panel Scaling in the Scripts

#16 Post by Keith Baxter »

JackZ wrote: Tue Jul 06, 2021 9:27 pm Nice work with Canvas draw, @Keith Baxter !
I like the idea of having a graphic UI directly in the instrument instead of relying on user properties.

One question though:
From your code, I gather that you draw white boxes in canvas, but how do you turn these boxes into buttons with specific functions for each button, which was the initial problem of the OP?

Here we need to create an array of buttons with button_add(), so the user can press any of theses and perform various functions.
Guess that in this case one has to overlay the canvas rectangles with buttons with nil images?
I tend to prefer in that case the good ol’ method of using png images directly in the button_add(), as this allows to animate the press of a button. Could probably be done in canvas as well, but more complicated IMHO

Jacques
Jacques,

Thank you for the kind words.

Yes button_add(), switch_add() etc have to be added to the script so that they are initialized on first run.
In most of my instruments I have a "bits_and_bobs.lua" library with all the font styles, canvas_add()'s tables etc. You cannot put the button_add() and switch_add() in this file as the calback function needs to be before the add.
This bits_and_bobs.lua is an init file and is the first function in the logic.lua.
I would also have a table with all the different .png names in. So something like this.

Code: Select all

activator_images={nil,"my_image1.png","my_image2.png","my_image3.png","my_image4.png"}

I will do a few examples later today so that peeps get a better 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