Log in
Register
  • Hi Guest!

    We are extremely excited to announce the release of our first Beta for VaM2, the next generation of Virt-A-Mate which is currently in development.
    To participate in the Beta, a subscription to the Entertainer or Creator Tier is required. Once subscribed, download instructions can be found here.

    Click here for information and guides regarding the VaM2 beta. Join our Discord server for more announcements and community discussion about VaM2.
CustomTabUI

Plugins + Scripts CustomTabUI

Overview Updates (2) Reviews (3) History Discussion Dependency Usage (2)
※ Reporting bugs or issues will help me improve the plugin and help others.
CustomTabUI
● This .cs for new style tab UI implementation for developer.
● Supports FullLine Tab, HalfLine (Left/Right) Tab (v0.2)
● Supports tab hierarchy traversing function (v0.3)
● Supports dynamic tab append/delete function (v0.3)
● Supports auto hide for UI elements when changing tabs. (no need to remove UI elements manualy)
● Supports tabs using icons as well as text
● For verification of CustomTabUI, I used the library in AutoFlutterHip in the link below.
14mhz.Plugin-AutoFlutterHip.3.jpg
hub.virtamate.com

AutoFlutterHip - Plugins + Scripts -

※ Reporting bugs or issues will help me improve the plugin and help others. This plugin consists of two parts: AutoFlutterHip and AutoFlutterHipTechnic. AutoFlutterHip ● This plugin can apply morph depending on the angle at which you bend your...
hub.virtamate.com hub.virtamate.com
● You can extract CustomTabUI.cs and free modify/use it. CustomTabUI.cs does not have any dependencies
● add : support dynamic tab append/delete function
● add : support tab hierarchy traversing
● fix : failed to process (JSONStorableAction)
● fix : minor bug fix

C#: 
CustomTabUI tui = new CustomTabUI(this, CreateUIElement);
Tab a = tui.newTab(this, "TabA");
{
    a.add(initSlider("SliderA"));
    a.add(initToggle("ToggleA"));
}
Tab b = tui.newTab(this, "TabB");
{
    b.add(initSlider("SliderB"));
    b.add(initToggle("ToggleB"));
}
---- full traverse ----
foreach (KeyValuePair<String, Tab>pair in tui.getTabs())
{
    String    key = pair.Key;    // TabA, TabB key
    Tab       tab = pair.Value;  // TabA, TabB instance
    for (int i = 0; i < tab.elements.Count; i++)
    {
         object o = elements[i]; // JSONStorableParam or JSONStorableAction
    }
}
---- key traverse ----
Tab a = tui.getTab("TabA");
Tab b = tui.getTab("TabB");
JSONStorableFloat j == a.get("SliderA") == tui.getElement("TabA", "SliderA") as JSONStorableFloat;
JSONStorableBool  j == a.get("ToggleA") == tui.getElement("TabA", "ToggleA") as JSONStorableBool;
JSONStorableFloat j == b.get("SliderB") == tui.getElement("TabB", "SliderB") as JSONStorableFloat;
JSONStorableBool  j == b.get("ToggleB") == tui.getElement("TabB", "ToggleB") as JSONStorableBool;
---- also, dynamic obtaining UIDynamic via JSONStorable ----
UIDynamicSlider      u = Tools.JSONStorable2UIDynamic(instance of JSONStorableFloat) as UIDynamicSlide;
UIDynamicToggle      u = Tools.JSONStorable2UIDynamic(instance of JSONStorableBool) as UIDynamicToggle;
UIDynamicColorPicker u = Tools.JSONStorable2UIDynamic(instance of JSONStorableColor) as UIDynamicToggle;
UIDynamicTextField   u = Tools.JSONStorable2UIDynamic(instance of JSONStorableString) as UIDynamicTextField;
UIDynamicPopup       u = Tools.JSONStorable2UIDynamic(instance of JSONStorableStringChooser) as UIDynamicPopup;
UIDynamicButton      u = Tools.JSONStorable2UIDynamic(instance of JSONStorableAction) as UIDynamicButton;
● add : Support Left/Right Side Tab
● add : Support Change Tab Text Color
● add: Support Change Tab Background Color
● fix : minor bug fix
14mhz.Plugin-CustomTabUI.2.jpg

The code below is all you need.
C#: 
using TabUI;
CustomTabUI tabuiL;
CustomTabUI tabuiR;
at Init() method :::
tabuiL = new CustomTabUIHalf(this, CreateUIElement, "TabTextUI-L", true, selctedTab)
             .setTextColor(new Color(1f, 1f, 1f, 0.3f), Color.yellow)
             .setBackgroundColor(new Color(0.53f, 0.19f, 0.32f, 0.9f));
for (int i = 0; i < 4; i++)
{
    String txt = "Tab " + i.ToString();
    Tab    tab = tabuiL.newTab(this, txt, 80);
    tab.add(Utils.SetupButton(this, txt + " - button (left)", null, true));
    tab.add(Utils.SetupToggle(this, txt + " - toggle (left)", false, true));
    tab.add(Utils.SetupSliderFloat(this, txt + " - slider (left)", 0f, 0f, 1f, true));
    tab.add(Utils.SetupStringChooser(this, txt + " - chooser (left)", new List<string>{ "None", "1", "2", "3"  }, true));
    tab.add(Utils.SetupColor(this, txt + " - color picker (left)", Color.white, true));
    tab.add(Utils.SetupSpacer(this, 10, true));
}

////

Icon  icon = new Icon(this, 20, 4, 36, 36, "/src/resource/star(64x64)_t_w.png");
tabuiR = new CustomTabUIHalf(this, CreateUIElement, "TabTextUI-R", false, selctedTab);
for (int i = 0; i < 4; i++)
{
    String txt = "Tab " + i.ToString();
    Tab    tab = tabuiR.newTab(this, txt, 80, icon);
    tab.add(Utils.SetupColor(this, txt + " - color picker (right)", Color.white, false));
    tab.add(Utils.SetupStringChooser(this, txt + " - chooser (right)", new List<string>{ "None", "1", "2", "3"  }, false));
    tab.add(Utils.SetupButton(this, txt + " - button (right)", null, false));
    tab.add(Utils.SetupToggle(this, txt + " - toggle (right)", false, false));
    tab.add(Utils.SetupSliderFloat(this, txt + " - slider (right)", 0f, 0f, 1f, false));
    tab.add(Utils.SetupSpacer(this, 10, false));
}

at Start() method :::
if (tabuiL != null) tabuiL.selectTab(0); // select first tab
if (tabuiR != null) tabuiR.selectTab(0); // select first tab

at OnDestroy() method :::
if (tabuiL != null) tabuiL.close(this);
if (tabuiR != null) tabuiR.close(this);
14mhz.Plugin-CustomTabUI.2.Exam#2.jpg

Also, The code below is all you need.
C#: 
using TabUI;
CustomTabUI tabui;
at Init() method :::
tabui = new CustomTabUI(this, CreateUIElement, "TabTextUI")
            .setTextColor(new Color(1f, 1f, 1f, 0.3f), Color.yellow)
            .setBackgroundColor(new Color(0.53f, 0.19f, 0.32f, 0.9f));
for (int i = 0; i < 8; i++)
{
    String txt = "Tab " + i.ToString();
    Tab    tab = tabui.newTab(this, txt);

    tab.add(Utils.SetupButton(this, txt + " - button (left)", null, true));
    tab.add(Utils.SetupToggle(this, txt + " - toggle (left)", false, true));
    tab.add(Utils.SetupSliderFloat(this, txt + " - slider (left)", 0f, 0f, 1f, true));
    tab.add(Utils.SetupStringChooser(this, txt + " - chooser (left)", new List<string>{ "None", "1", "2", "3" }, true));
    tab.add(Utils.SetupColor(this, txt + " - color picker (left)", Color.white, true));
    tab.add(Utils.SetupSpacer(this, 10, true));
    tab.add(Utils.SetupButton(this, txt + " - button (right)", null, false));
    tab.add(Utils.SetupToggle(this, txt + " - toggle (right)", false, false));
    tab.add(Utils.SetupSliderFloat(this, txt + " - slider (right)", 0f, 0f, 1f, false));
    tab.add(Utils.SetupStringChooser(this, txt + " - chooser (right)", new List<string>{ "None", "1", "2", "3"  }, false));
    tab.add(Utils.SetupColor(this, txt + " - color picker (right)", Color.white, false));
    tab.add(Utils.SetupSpacer(this, 10, false));
}

at Start() method :::
if (tabui != null) tabui.selectTab(0);

at OnDestroy() method :::
if (tabui != null) tabui.close(this);
14mhz.Plugin-CustomTabUI.2.Exam#3.jpg

The code below is all you need, too.
C#: 
using TabUI;
CustomTabUI tabui;
at Init() method :::
Icon  ico0 = new Icon(this, 20, 4, 36, 36, "/src/resource/woman2(64x64)_t_w.png");
Icon  ico1 = new Icon(this, 20, 4, 36, 36, "/src/resource/businessperson(64x64)_t_w.png");
Icon  ico2 = new Icon(this, 20, 4, 36, 36, "/src/resource/star(64x64)_t_w.png");
Icon  ico3 = new Icon(this, 20, 4, 36, 36, "/src/resource/flower(64x64)_t_w.png");
Icon[]icon = new Icon[] { ico0, ico1, ico2, ico3 };

tabui = new CustomTabUI(this, CreateUIElement, "TabTextUI", selctedTab);
for (int i = 0; i < 8; i++)
{
    String txt = "Tab " + i.ToString();
    Tab    tab = tabui.newTab(this, txt, 80, icon[i%4]);
 
    tab.add(Utils.SetupButton(this, txt + " - button (left)", null, true));
    tab.add(Utils.SetupToggle(this, txt + " - toggle (left)", false, true));
    tab.add(Utils.SetupSliderFloat(this, txt + " - slider (left)", 0f, 0f, 1f, true));
    tab.add(Utils.SetupStringChooser(this, txt + " - chooser (left)", new List<string>{ "None", "1", "2", "3"  }, true));
    tab.add(Utils.SetupColor(this, txt + " - color picker (left)", Color.white, true));
    tab.add(Utils.SetupSpacer(this, 10, true));
    tab.add(Utils.SetupButton(this, txt + " - button (right)", null, false));
    tab.add(Utils.SetupToggle(this, txt + " - toggle (right)", false, false));
    tab.add(Utils.SetupSliderFloat(this, txt + " - slider (right)", 0f, 0f, 1f, false));
    tab.add(Utils.SetupStringChooser(this, txt + " - chooser (right)", new List<string>{ "None", "1", "2", "3" }, false));
    tab.add(Utils.SetupColor(this, txt + " - color picker (right)", Color.white, false));
    tab.add(Utils.SetupSpacer(this, 10, false));
}

at Start() method :::
if (tabui != null) tabui.selectTab(0);

at OnDestroy() method :::
if (tabui != null) tabui.close(this);
14mhz.Plugin-CustomTabUI.2.Exam#4.jpg

C#: 
using TabUI;
CustomTabUI TabTextUI = null;
CustomTabUI TabIconUI = null;
CustomTabUI TabOther1 = null;
CustomTabUI TabOther2 = null;
at Init() method :::
TabTextUI = initTabTextUI();
TabIconUI = initTabIconUI();
TabOther1 = initTabOther1();
TabOther2 = initTabOther2();

CustomTabUI initTabTextUI()
{
    String[]label =  new String []{ "This is a Tab Zero", "Tab one", "Customazing Tab two", "T03" };
    int   []width =  new int []{ 300, 140, 340, 80 };
 
    CustomTabUI tabui = new CustomTabUI(this, CreateUIElement, "TabTextUI", selctedTab)
                                    .setTextColor(new Color(1f, 1f, 1f, 0.3f), Color.yellow)
                                    .setBackgroundColor(new Color(0.53f, 0.19f, 0.32f, 0.9f));
    for (int i = 0; i < 4; i++)
    {
        String txt = label[i];
        Tab    tab = tabui.newTab(this, txt, width[i]);
        tab.add(Utils.SetupButton(this, txt + " - button (left)", null, true));
        tab.add(Utils.SetupButton(this, txt + " - button (right)", null, false));
        if (i%2 == 1) tab.add(Utils.SetupToggle(this, txt + " - toggle (left)", false, true));
        if (i%2 == 1) tab.add(Utils.SetupToggle(this, txt + " - toggle (right)", false, false));
    }
    return tabui;
}

CustomTabUI initTabIconUI()
{
    Icon  ico0 = new Icon(this, 20, 4, 36, 36, "/src/resource/woman2(64x64)_t_w.png");
    Icon  ico1 = new Icon(this, 20, 4, 36, 36, "/src/resource/businessperson(64x64)_t_w.png");
    Icon  ico2 = new Icon(this, 20, 4, 36, 36, "/src/resource/star(64x64)_t_w.png");
    Icon  ico3 = new Icon(this, 20, 4, 36, 36, "/src/resource/flower(64x64)_t_w.png");
    Icon[]icon = new Icon[] { ico0, ico1, ico2, ico3 };
    CustomTabUI tabui = new CustomTabUI(this, CreateUIElement, "TabTextUI", selctedTab);
    for (int i = 0; i < 8; i++)
    {
        String txt = "Tab " + i.ToString();
        Tab    tab = tabui.newTab(this, txt, 80, icon[i%4]);
        tab.add(Utils.SetupButton(this, txt + " - button (left)", null, true));
        tab.add(Utils.SetupButton(this, txt + " - button (right)", null, false));
        tab.add(Utils.SetupToggle(this, txt + " - toggle (left)", false, true));
        tab.add(Utils.SetupToggle(this, txt + " - toggle (right)", false, false));
        if (i%2 == 1) tab.add(Utils.SetupSliderFloat(this, txt + " - slider (left)", 0f, 0f, 1f, true));
        if (i%2 == 1) tab.add(Utils.SetupSliderFloat(this, txt + " - slider (right)", 0f, 0f, 1f, false));
        if (i%2 == 1) tab.add(Utils.SetupStringChooser(this, txt + " - chooser (left)", new List<string>{ "None", "1", "2", "3" }, true));
        if (i%2 == 1) tab.add(Utils.SetupStringChooser(this, txt + " - chooser (right)", new List<string>{ "None", "1", "2", "3" }, false));
    }
    return tabui;
}

CustomTabUI initTabOther1()
{
    String[]label =  new String []{ "Tab0", "Tab1", "Tab2", "Tab3", "Tab4", "Tab5", "Tab6", "Tab7" };
    int   []width =  new int []{ 100, 80, 100, 80, 100, 80, 100, 80 };
 
    Icon  icon = new Icon(this, 20, 4, 36, 36, "/src/resource/star(64x64)_t_w.png");
    CustomTabUI tabui = new CustomTabUIHalf(this, CreateUIElement, "TabTextUI", true, selctedTab)
                                   .setTextColor(new Color(0.6f, 0.2f, 0.6f, 0.9f), Color.black)
                                   .setBackgroundColor(new Color(0.13f, 0.69f, 0.32f, 0.6f));
    for (int i = 0; i < 4; i++)
    {
        String txt = label[i];
        Tab    tab = tabui.newTab(this, txt, width[i], i%2 == 0 ? null : icon);
        tab.add(Utils.SetupButton(this, txt + " - button (left)", null, true));
        tab.add(Utils.SetupToggle(this, txt + " - toggle (left)", false, true));
        tab.add(Utils.SetupSliderFloat(this, txt + " - slider (left)", 0f, 0f, 1f, true));
        tab.add(Utils.SetupStringChooser(this, txt + " - chooser (left)", new List<string>{ "None", "1", "2", "3" }, true));
        if (i%2 == 1) tab.add(Utils.SetupColor(this, txt + " - color picker (left)", Color.white, true));
    }
    return tabui;
}

CustomTabUI initTabOther2()
{
    String[]label =  new String []{ "Tab0", "Tab1", "Tab2", "Tab3", "Tab4", "Tab5", "Tab6", "Tab7" };
    int   []width =  new int []{ 80, 100, 80, 100, 80, 100, 80, 100 };
 
    Icon  icon = new Icon(this, 20, 4, 36, 36, "/src/resource/flower(64x64)_t_w.png");
    CustomTabUI tabui = new CustomTabUIHalf(this, CreateUIElement, "TabTextUI", false, selctedTab)
                                   .setTextColor(new Color(1f, 1f, 1f, 0.3f), Color.yellow)
                                   .setBackgroundColor(new Color(0.23f, 0.19f, 0.82f, 0.9f));
    for (int i = 0; i < 4; i++)
    {
        String txt = label[i];
        Tab    tab = tabui.newTab(this, txt, width[i], i%2 == 1 ? null : icon);
        tab.add(Utils.SetupStringChooser(this, txt + " - chooser (right)", new List<string>{ "None", "1", "2", "3" }, false));
        tab.add(Utils.SetupSliderFloat(this, txt + " - slider (right)", 0f, 0f, 1f, false));
        tab.add(Utils.SetupToggle(this, txt + " - toggle (right)", false, false));
        tab.add(Utils.SetupButton(this, txt + " - button (right)", null, false));
        if (i%2 == 1) tab.add(Utils.SetupColor(this, txt + " - color picker (right)", Color.white, false));
    }
    return tabui;
}

at Start() method :::
if (TabTextUI != null) TabTextUI.selectTab(0);
if (TabIconUI != null) TabIconUI.selectTab(0);
if (TabOther1 != null) TabOther1.selectTab(0);
if (TabOther2 != null) TabOther2.selectTab(0);

at OnDestroy() method :::
if (TabTextUI != null) TabTextUI.close(this);
if (TabIconUI != null) TabIconUI.close(this);
if (TabOther1 != null) TabOther1.close(this);
if (TabOther2 != null) TabOther2.close(this);
14mhz.Plugin-CustomTabUI.3.jpg

The code below is all you need.
C#: 
using TabUI;
CustomTabUI tabui;
at Init() method :::
Utils.SetupButton(this, "Append Tab", addTab, true);
Utils.SetupButton(this, "Delete Tab", delTab, false);
tabui = new CustomTabUI(this, CreateUIElement, "TabTextUI");

public void addTab()
{
    SuperController.LogMessage("[INF] append Tab ...");
    String txt = "Tab " + tabui.getTabCount().ToString();
    Tab    tab = tabui.newTab(this, tabui.isValid(txt) ? txt : avoidDuplecatedName(txt));
    tab.add(Utils.SetupButton(this, txt + " - button (left)", null, true));
    tab.add(Utils.SetupToggle(this, txt + " - toggle (left)", false, true));
    tab.add(Utils.SetupSliderFloat(this, txt + " - slider (left)", 0f, 0f, 1f, true));
    tab.add(Utils.SetupStringChooser(this, txt + " - chooser (left)", new List<string>{ "None", "1", "2", "3" }, true));
    tab.add(Utils.SetupColor(this, txt + " - color picker (left)", Color.white, true));
    tab.add(Utils.SetupSpacer(this, 10, true));
    tab.add(Utils.SetupButton(this, txt + " - button (right)", null, false));
    tab.add(Utils.SetupToggle(this, txt + " - toggle (right)", false, false));
    tab.add(Utils.SetupSliderFloat(this, txt + " - slider (right)", 0f, 0f, 1f, false));
    tab.add(Utils.SetupStringChooser(this, txt + " - chooser (right)", new List<string>{ "None", "1", "2", "3"  }, false));
    tab.add(Utils.SetupColor(this, txt + " - color picker (right)", Color.white, false));
    tab.add(Utils.SetupSpacer(this, 10, false));
    tabui.redraw(); // repaint ...
}

public void delTab()
{
    SuperController.LogMessage("[INF] delete Tab ... ");
    tabui.delTab(this, tabui.getSelectSeq());
    tabui.redraw();  // repaint ...
}

at OnDestroy() method :::
if (tabui != null) tabui.close(this);
Credits :
MacGruber Utils / By: MacGruber / License: CC-BY
hub.virtamate.com

MacGruber Utils - Plugins + Scripts -

Collection of various utility functions helpful for plugin development. You should not need to manually download this, unless you are a plugin creator. This is a separate release of my MacGruber_Utils.cs which I'm using in most of my plugins. I...
hub.virtamate.com hub.virtamate.com
I extracted some of the functionality for creating the UI elements needed for Example1,2,3,4 from [MacGruber_Utils.cs] and placed it into [Utils.cs].
As always, Thanks to @MacGruber for sharing his beautiful code !!!
Download [0.08 MB] Support me at...
Author
14mhz
Views
4,505
Downloads
4,505
Favorites
6
Packages
2
Total size
0.08 MB
Version
3
First release
Last update
Join the discussion

More resources from 14mhz

Share this resource

Latest updates

  1. CustomTabUI v0.3 20250328

    ● add : support dynamic tab append/delete function ● add : support tab hierarchy traversing ●...

  2. CustomTabUI v0.2 20250326

    ● add : Support Left/Right Side Tab ● add : Support Change Tab Text Color ● add: Support Change...
Read more…

Latest reviews

VamEssentials
Positive
VamEssentials
Version: 3
Posted:
If anyone wants to see an example of this used on a plugin, I used it on ExpressionRouter to create a 17 tab structured plugin. This resource was great and helped make that possible. Thank you! :)
Upvote 0
PrettyFrank
Positive
PrettyFrank
Version: 2
Posted:
Will be giving this a try ASAP... we've def been lacking framework tools like this, to the point I've even considered writing one for the community. Love that you've beaten me to it!! :)
Upvote 0
F
Positive
Frk411
Version: 1
Posted:
This is great - so easy to use, saves a lot of hassles. Using it right now for a plugin I'm working on. Nice work!
Upvote 0
Read more…
Back
Top Bottom