menu using paint routine

[ulrik]

At first this was a question for David at his Patreon page, but the patreon page didn't allow to write so much text, and code so David was only able to read a small portion of it :)
So I'll post the question and example code here instead.

I watched Davids tutorials regarding paint routine in Hise, and making vector menus, thank you David, great tutorials!

So my question is how to get rid off the marked menu item in my menu panel? I'll show you some pictures what I mean.

This shows my menu, when clicked it opens a window and the menu item will get marked

and when clicked again on the same menu item it will close it, and the menu item will not be marked anymore, so far so good

But when on Init, the menu will have, always the first menu item marked, so if the user want to open the marked menu item, he will have to click 2 times to open it. The first click will take away the mark and second click will open the window. That is the behaviour that I want to get rid off.

this is an excerpt of the code I'm using:

//  paintroutine for Vertical menu  ======================================
const var MenuPaintRoutineVertical = function(g)
{
    var items = itemsMenu1;
    this.data.items = items;
    var w = this.getWidth();
    var h = this.getHeight();
    
    g.fillAll(this.get("bgColour"));
	g.setFont("Oxygen", this.get("borderRadius"));
	
	for(i=0; i<items.length; i++)
    {
        //  filled rectangle Hover function
        if(this.data.hover == 1 && this.data.hoverIndex == i)
            {
                g.setColour("0x22FFFFFF");
            }
        else
        {
            g.setColour(this.get("bgColour"));
        }
        g.fillRect([0, h / items.length * i+1, w, h / items.length-2]);
        
        //  rectangles Clicked function
        if(this.getValue() == i)
        {
            g.setColour(this.get("itemColour"));
        }
        else
        {
            g.setColour(this.get("itemColour2"));
        }
        g.fillRoundedRectangle([0, h / items.length * i+1, w, h / items.length-2], 2);
        //g.fillRect([0, h / items.length * i+1, w, h / items.length-2]);
        
        //  items text
        g.setColour(this.get("textColour"));
        g.drawAlignedText(items[i], [0, h / items.length * i+2, w, h / items.length-4], "centred");
    }
}

//  Mouse Callback  --------------------------------------------------------------------------
const var MenuMouseCallbackVertical = function(event)
{
    var value = (Math.floor(event.y / this.getHeight()* this.data.items.length));
    
	if(event.mouseUp)
    {
        if(this.getValue() == value)
        {
            this.setValue(-1);
            this.repaint();
            this.changed();
        }
        else
        {
            this.setValue(value);
            this.repaint();
            this.changed();
        }
        
    }
    else
    {
        this.data.hoverIndex = value;
        this.data.hover = event.hover;
        this.repaint();
    }
}

//


const var itemsMenu1 = ["VOLUME", "REVERB", "VIBRATO", "SHAKE", "VEL&EXPR", "DEMO"];
const var menu1Panels = [Content.getComponent("VolumePnl"),
                         Content.getComponent("ReverbPnl"),
                         Content.getComponent("VibratoPnl"),
                         Content.getComponent("LFOPanel"),
                         Content.getComponent("VelPnl"),
                         Content.getComponent("DemoSongsPnl")];
                         
Menu1Pnl.setPaintRoutine(MenuPaintRoutineVertical);
Menu1Pnl.setMouseCallback(MenuMouseCallbackVertical);


inline function onMenu1PnlControl(component, value)
{
    var visibleIndex = "";
    for(i=0; i<itemsMenu1.length; i++)
    {
        if(menu1Panels[i].get("visible") == true)
        {
            visibleIndex = i;
        }
        menu1Panels[i].set("visible", false);
    }
    if(visibleIndex == value)
    {
        visibleIndex = "";
    }
    else
    {
        if(value == -1)
        {
            visibleIndex = "";
        }
        else
        {
            menu1Panels[value].set("visible", true);
        }   
    }
};

Content.getComponent("Menu1Pnl").setControlCallback(onMenu1PnlControl);

[Christoph Hart]

Add this in the onInit:

Menu1Pnl.set("saveInPreset", false);
Menu1Pnl.setValue(-1);

[ulrik]

@Christoph-Hart Beautiful, the

Menu1Pnl.setValue(-1);

did it, thank you maestro!