Home

Adjustable TabWindow

Tabbed Window with the Power of Adjustable Containers. Every tab is an adjustable container and with that has all it‘s perks.

The functionality is very similar to GUIFrame just with a bit more of flexibility as tabs can dropped anywhere on the screen an the tabwindows can also be located anywhere.

A new tabwindow is created for example by using:

  tabwindow =
    tabwindow or
    Adjustable.TabWindow:new(
      {
        name = "tabwindow",
        x = 0,
        y = 0,
        width = "30%",
        height = "40%",
        tabBarHeight ="10%",
        tabs = {"MyGauge","Tab1", "Tab2", "Tab3", "MapTab"},
      }
    )

The values in tabs are then the tabnames. Be aware that every tab name has to be unique all across the profile and other tabwindows.

Put an element in a Tab

Every tab is composed of 2 components, one is the tab itself and the other is the central tab container which contains the elements (for example mapper, a miniconsole…)

To put something into the central tab use the containername tabname+center for example to put a mapper into the tab MapTab use:

 mapper =
    mapper or Geyser.Mapper:new({x = 0, y = 0, width = "100%", height = "100%", name="mapper"}, tabwindow.MapTabcenter)

Change the Tab position by left mouse click

Now it‘s possible to drag and drop the tab wherever you want by just using the left mouse. If dragged to another tabwindow the tab will be added to that one, if dragged onto an empty space of the window the tab will create it‘s own (adjustable container) window.

By pressing the restore icon the window can be reverted to be a tab.

Change the Tab position by DoubleClick

Another method to send tabs to another window is to doubleclick the tab (also possible when the tab is a window).

After double clicking the tab the tabwindows tabbar will be highlighted and the tab can be send to any tabwindow by clicking on the right spot on the tabbar, this also allows to send the tab to a UserWindow.

Create TabWindow by dropping tab on floating window

If you drop a Tab into an floating TabWindow it will automatically creating it's own tempTabWindow which behaves like a normal TabWindow with the difference that it will disappear if it doesn't contain any tab anymore. TempTabWindows will be also saved by using the save/load options

Create tempTabWindow by the right-click option "tabify"

Your floating TabWindows have a right-click menu with the custom option tabify. This will also create a tempTabWindow and put your floating TabWindow in it.

"tabify" any Geyser.Container

Even after the creation of your TabWindow and your Geyser.Container it is possible to use the function tabwindow:addToTabWindow(container) which allows you to put any container into a tab. This can be saved/loaded by tabwindow:save()/load().

add Tabify menu to your Adjustable Container

To add the tabify menu to any Adjustable Container just use.

tabwindow:addTabifyMenu(myadjustablecontainer)

To add the option to all your Adjustable.Container at once it is possible to use the Adjustable.Container:doAll function:

Adjustable.Container:doAll(function(s) tabwindow:addTabifyMenu(s) end)

Save/Load

The position and even the container (if in a UserWindow) are saveable and loadable by using for example:

tabwindow:save()

This will save the position of all created tabs (even them of other tabwindows, it is similar to the Adjustable.Container:saveAll() function) It is also possible to save into different slots. For example:

tabwindow:save(1)

To (re)load all settings use:

tabwindow:load()

For loading settings saved in slot 1

tabwindow:load(1)

Both of the functions will only work if the TabWindows and the tabs are all created already!

Only exception are tabified Containers and tempTabWindows which will be (re)created on reloading

Adjustable TabWindow functions

Other functions are:

tabwindow:removeTab(tabname or position) -- this removes a tab (use name or position of the tab)
tabwindow:addTab(tabname, [position]) -- this can also be used to change the position of an already existing tab in this tabwindow
tabwindow:setTabText(tabname or position, text) this --allows you to change the text of the given tab (tabname or position)
tabwindow:changeTabContainer(tabname, tabwindowname, position) -- changes the tabwindow of your tab
tabwindow:transformTabContainer(tabname) -- transforms your tab into a window (adjustable.container)
tabwindow:restoreTab(tabname, tabwindowname) -- restores your before transformed tab and adds it to the given tabwindow
tabwindow:setGap(gap)  -- sets the amount of space between tabs and tabcontainer
tabwindow:setTabHeight(height)  -- sets the height of the tabBar and therefore the tabs
tabwindow:setTabBarColor(color) -- sets the color to use for the tab bar background 
tabwindow:setTabBarStyle(css) -- sets the CSS to use for the tab box which contains the tabs for the object 
tabwindow:setActiveTabBGColor(color) -- sets the BG color for the active tab. 
tabwindow:setInactiveTabBGColor(color) -- sets the BG color for the inactive tab. 
tabwindow:setActiveTabFGColor(color) -- sets the text color for the active tab. 
tabwindow:setInactiveTabFGColor(color) -- sets the text color for the inactive tab. 
tabwindow:setSingleTabFont(tabname, font) -- sets the font for a single tab. If you use setTabFont this will be overridden 
tabwindow:setTabFont(font) -- sets the font for all tabs in tabwindow 
tabwindow:addToTabWindow(container)  	-- adds your Geyser.Container to your tabwindow and creates a tab from it 
 			 	 	--(tabtext will be the container name). this is saveable/loadable by tabwindow:save/load
tabwindow:tabify(adjustable container)  -- changes your adjustable container into a temp tabwindow. 
 			 	 	--this is saveable/loadable by tabwindow:save/load
tabwindow:addTabifyMenu(adjcontainer) 	-- adds a custom menu to your adjustable.container right click menu which allows you to transform
 	 	 	 	 	-- it into a tempTabWindow
tabwindow:save([slot], [directory]) 	-- saves all your tabwindows settings (including tempTabWindows and tabified Containers)
tabwindow:load([slot], [directory]) 	-- loads all your tabwindows settings (including tempTabWindows and tabified Containers)
 	 	 	 	 	

Constraints

Possible constraints (mostly for styling purposes) are:

tabs 			= names of the tabs
tabTxtColor 		= color of the tab text
tabPadding 		= padding of the tabs in window mode
activeTabFGColor 	= What color to use for the text on the active tab. Any Geyser Color works
inactiveTabFGColor 	= What color to use for the text on the inactive tab. Any Geyser Color works
activeTabBGColor 	= What BG color to use for the active tab? activeTabCSS overrides this.
                          Any Geyser Color works
inactiveTabBGColor 	= What BG color to use for the inactive tab? inactiveTabStyle overrides this
                          Any Geyser Color works
tabBarColor 		= What color to use for the tabBar? overridden by tabBarStyle
                          Any Geyser Color works
tabBarStyle 		= CSS for the tabBar *in its entirety* 
color1 			= one of the 2 colors if standard style are used, this one is used for example for the activeTab
color2 			= one of the 2 colors if standard style are used, this one is used for the inactive Tab
tabBarHeight 		= height of the tabbar (can be given as number(pixels) or as percentage for example "10%")
footerStyle 		= style of the footer where the tab container is in the tabwindow
centerStyle 		= style of the central container in the tab window
containerStyle 		= style of the tab window container
inactiveTabStyle 	= style of the inactive tab 
activeTabStyle 		= style of the active tab
chosenTabStyle 		= style of the by double click chosen tab
overlayStyle 		= style of the overlay to show the tabbars
gap 		 	= How many pixels to put between the tabs and the tab containers
tempWindowConf 		= Configuration of your tempWindows. As the tempWindow is an Adjustable Container it uses the same constraints.
			  It is a table value. For example tempWindowConf = {padding = 9, buttonsize = 12} 
			  see: https://wiki.mudlet.org/w/Manual:Geyser#Change_Adjustable_Container_Style

Style your TabWindow

Example of a tabwindow with a (slightly) different standardstyle:

  tabwindow2 =
    tabwindow2 or
    Adjustable.TabWindow:new(
      {
        name = "tabwindow2",
        x = 0,
        y = 0,
        width = "100%",
        height = "100%",
        tabs = {"EMCO","Tab5", "Tab6"},
        color1 = "rgb(100,0,100)",
        color2 = "rgb(100,0,70)",
      },
      tabwin2
    )

Give your EMCO Adjustable TabWindow functionality

If you don't know what EMCO is check this out: https://github.com/demonnic/EMCO/wiki Since version 1.1 it is possible to directly give your already established EMCO all the functionality and perks of Adjustable TabWindows by just using

  Adjustable.TabWindow.convertEMCO(myEMCO) --myEMCO is your EMCO in this case

After that you can just use your EMCO as usual. To save your tab-positions just use your EMCOs save and load functions.

  myEMCO:save() -- to save all your EMCO settings and if EMCO was converted to a TabWindow also your EMCO tab/window positions
  myEMCO:load() -- reloads all the saved settings

Transfer your EMCO to an Adjustable TabWindow

Note: This is only needed if you want to transfer your EMCO to an already existing AdjustableTabWindow. If you just want your EMCO to have Adjustable TabWindow functionality it is better to use the function above https://github.com/Edru2/AdjustableTabWindow/wiki#give-your-emco-adjustable-tabwindow-functionality

To transfer your EMCO tabs into an Adjustable TabWindow just use:

tabwindow:transferEMCO(myEMCO) -- this will transfer your EMCO tabs from "myEMCO" to the tabwindow "tabwindow"

Note that saving and loading of your Tabwindows should also take place after your EMCO-tabs are transferred.