# Showing/hiding ui controls - "tabbed" interfaces



## kotori (May 6, 2006)

As you might know the K2.1 update makes it possible to hide ui controls by moving them to position 0, 0. This makes it possible to do very flexible user interfaces without being limited by the 6x6 size limitation of the UI area. While trying out this new feature I came up with a nice way of switching between views that I like to share. Say you have a menu that you want to use for switching between two different views (like having two tabs). Then you can do something like this:
```*on init*
``````*declare* show1```_{ 1 when page 1 is shown, 0 otherwise }_
``````*declare* show2```_{ 1 when page 2 is shown, 0 otherwise }_ 
``````_{ ... }_
```*end on*
```
```*on ui_control*(menu)
``````_{ initialize boolean variables }_
``````*if* menu = 1
`````````show1 := 1
`````````show2 := 0
``````*else*
`````````show1 := 0
`````````show2 := 1
``````*end if*
``````
``````_{ show/hide controls on first page }_
``````move_control(control1, show1*3, show1*3) _{ move to 3, 3 or hide }_
``````move_control(control2, show1*4, show1*3) _{ move to 4, 3 or hide }_
``````move_control(control3, show1*2, show1*4) _{ move to 2, 4 or hide }_
``````move_control(control4, show1*4, show1*4) _{ move to 4, 4 or hide }_```
``````
``````_{ show/hide controls on second page }_
``````move_control(control6, show2*3, show2*3) _{ move to 3, 3 or hide }_
``````move_control(control7, show2*4, show2*3) _{ move to 4, 3 or hide }_
``````move_control(control8, show2*2, show2*4) _{ move to 2, 4 or hide }_
``````move_control(control9, show2*4, show2*4) _{ move to 4, 4 or hide }_```
```*end on*


The trick here is to multiple each coordinate to move_control with a value of zero or one depending on whether it should be shown. When shown1 is 0 all of the controls in the first section are moved to 0, 0 and hence hidden. When shown1 is 1 all these controls will be shown and placed at the correct place. By setting shown1 and shown2 to different values you switch between showing these two sets of user controls.

Cheers,
Nils


----------



## sbkp (May 6, 2006)

*Re: Showing/hiding ui controls - "tabbed interfaces"*

Clever 

Thanks for the tip.


----------



## midphase (May 6, 2006)

Don't you mean?

on init 
``````declare show1```{ clever! } 
``````
```end on


----------



## Thonex (May 6, 2006)

midphase @ Sat May 06 said:


> Don't you mean?
> 
> on init
> ``````declare show1```{ clever! }
> ...



:?: :?:


----------



## kotori (May 6, 2006)

Thonex @ Sat May 06 said:


> midphase @ Sat May 06 said:
> 
> 
> > Don't you mean?
> ...


I think it was meant as a joke.



Thonex @ Sat May 06 said:


> Hey Nils... Great idea!!!!
> 
> I never even considered using a move_control() outside of an 'on init'. That's literally thinking "outside the box" :wink:


 :lol: 
Being able to use move_control() inside all callbacks is a new feature in K2.1. It really opens up new possibilities. Please see my latest script for an example of a dynamic GUI.

Cheers,
Nils


----------



## Thonex (May 6, 2006)

midphase @ Sat May 06 said:


> Don't you mean?
> 
> on init
> ``````declare show1```{ clever! }
> ...



Oh... I get it now... you were referring to me :lol: :lol: 

I'm a little slower than usual today  

Cheers,

T


----------



## Big Bob (May 6, 2006)

Good Show Nils,

I might have known that you'd be the first to start using the new KSP features :wink: . I've got plans for them of course but nothing tangible yet. Also Kudos for your new alternation script using dynamic controls *and* background skins. You're a real blessing to everyone in the K2 community my friend.

God Bless,

Bob


----------



## Big Bob (May 10, 2006)

Here's a small refinement of Nil's tabbed control panel idea. I lifted this fragment from the new version of the SLS in process. The routine name Show_Panel allows you to display any one of a series of control panels (in place of the current panel that has the focus). The illustration shows two different panels indexed with their tab numbers named Main_Tab and User_Tab. To change the active panel, all you have to do is call the function Show_Panel(tab), where 'tab' is the name (or number) of the desired panel's index tab. The routine hides the current panel and then gives the requested panel the focus. More controls can be added as indicated and more control panels can also be created as indicated.

God Bless,

Bob


*on init*
``*declare* PresetParms[200]
``
``*declare* ui_label XFadeHdr2 (2,1)````_{ XFade Contouring Header }_
``set_text(XFadeHdr2,"--- Crossfade Contouring Controls ---")
``*declare* ui_knob AtkFade(10,100,100)
``AtkFade := PresetParms[1]``_{ Seg 1 rise time as percentage of XTime }_
``*declare* ui_knob RlsFade (0,100,100)
``RlsFade := PresetParms[6]``_{ Release Fade-out time as percent of XTime }_
``_{ etc }_
``_{ | }_
``Main_Panel(Show)
``
``*declare* ui_button MyP1
``*declare* ui_button MyP2
``_{ etc }_
``_{ | }_
``User_Panel(Hide)
``
``*declare* ActvTab := Main_Tab``_{ Current Tab with Focus }_ 
*end on*

*function* Show_Panel(tab)
_(* Replaces the current control panel with the requested one *)_
``*if* (ActvTab # tab)
````Hide_Tab(ActvTab)``_{ Hide current panel }_
````Show_Tab(tab)``````_{ Display new panel }_
````ActvTab := tab`````_{ Update current tab }_
``*end if*
*end function* _{ Show_Panel }_

_{------------------Support Routines------------------}_
*function* Hide_Tab(tab)
_(* Hides requested control panel *)_
``*select*(tab)
``*case* Main_Tab
````Main_Panel(Hide)
``*case* User_Tab
````User_Panel(Hide)
``_{ etc }_
``_{ | }_
``*end select*
*end function* _{ Hide_Tab }_

*function* Show_Tab(tab)
_(* Displays the requested control panel *)_
``*select*(tab)
``*case* Main_Tab
````Main_Panel(Show)
``*case* User_Tab
````User_Panel(Show)
``_{ etc }_
``_{ | }_
``*end select*
*end function* _{ Hide_Tab }_

*function* Main_Panel(mode)
_(* Displays or Hides the Main Control Panel, named Main_Tab *)_
``*declare* global *const* Main_Tab := 1
``set_control(XFadeHdr2,2,1,mode)
``set_control(AtkFade,2,2,mode)
``set_control(RlsFade,2,4,mode)
``_{ etc }_
``_{ | }_
*end function* _{ Main_Panel }_

*function* User_Panel(mode)
_(* Displays or Hides the User Preset Control Panel, named User_Tab *)_
``*declare* global *const* User_Tab := 2
``set_control(MyP1,2,2,mode)
``set_control(MyP2,2,4,mode)
``_{ etc }_
``_{ | }_
*end function* _{ User Panel }_

*function* set_control(control_name,x,y,mode)
_(* Moves control to either x,y or 0,0 depending on mode = Show or Hide *)_
``*declare* global *const* Hide := 0
``*declare* global *const* Show := 7
``move_control(control_name, x .*and*. mode, y .*and*. mode)
*end function* _{ set_control }_


----------



## kotori (May 10, 2006)

Hi Bob,
thanks for posting this. Nice code.  
Since my editor is needed to compile the code anyway you might want to consider using the new 'Copy as BBCode' function with which you can post syntax highlighted code. Just a thought. Thanks again.

Cheers,
Nils


----------



## Big Bob (May 10, 2006)

kotori @ Wed May 10 said:


> Hi Bob,
> thanks for posting this. Nice code.
> Since my editor is needed to compile the code anyway you might want to consider using the new 'Copy as BBCode' function with which you can post syntax highlighted code. Just a thought. Thanks again.
> 
> ...


Yes Indeed, That's what I was trying to do but I missed that 'Copy as BBCode' thing. I've edited the post and now it's like I wanted it to be in the first place. Thanks Nils.

God Bless,

Bob


----------



## kotori (Dec 3, 2009)

Just a short update to this since I got a request for the link to this post. It's possible to save a couple of lines by using bitmasks for the menu items (using the sh_left/sh_right functions):

*on init*````
``*declare* ui_menu menu
``add_menu_item(menu, 'Page 1', sh_left(1, 0))
``add_menu_item(menu, 'Page 2', sh_left(1, 1))
``add_menu_item(menu, 'Page 3', sh_left(1, 2))
``_{ ... }_
*end on*

*function* showhide
``*declare* show1```_{ 1 when page 1 is shown, 0 otherwise }_
``*declare* show2```_{ 1 when page 2 is shown, 0 otherwise }_
``*declare* show3```_{ 1 when page 3 is shown, 0 otherwise }_``
``
``show1 := sh_right(menu, 0) .*and*. 1``
``show2 := sh_right(menu, 1) .*and*. 1``
``show3 := sh_right(menu, 2) .*and*. 1``````
``
``move_control(control1, show1*3, show1*3) _{ show/hide controls on first page }_
``move_control(control2, show1*4, show1*3) 
``move_control(control3, show2*2, show2*4) _{ show/hide controls on second page }_
``move_control(control4, show2*4, show2*4) 
``move_control(control5, show3*3, show3*3) _{ show/hide controls on third page }_
``move_control(control6, show3*4, show3*3) 
*end function*

*on ui_control*(menu)
``show_hide
*end on*


----------

