menu using paint routine



  • 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

    click to open.png

    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

    click to close.png

    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.

    on init.png

    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);
    
    


  • Add this in the onInit:

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


  • @Christoph-Hart Beautiful, the

    Menu1Pnl.setValue(-1);
    

    did it, thank you maestro! 👍


Log in to reply
 

7
Online

551
Users

2.1k
Topics

16.1k
Posts