IPopUpMenu with multiple columns?

[Jansku]

Hi gurus,

I have a ICaptionControl for patch selection in plugin UI from values 0-100. I have two questions:

1. How can this menu be columnized to lets say 4*25 items?
It's quite annoying to scroll to the bottom of the list if you want to check items from there.

In cakewalk z3ta you can see this kind of menu in action when choosing different presets from the menu and I would like to implement this functionality to my works as well

Thanks for your help!

[stw]

You need to create IPopupMenu menus for each submenue and add it to the corresponding parent menue. Take a look at IPopupMenu.cpp. There're several overloaded functions for adding menu items. Guess you'd want to use

IPopupMenuItem* IPopupMenu::AddItem(const char* text, int index, IPopupMenu* submenu)

or

IPopupMenuItem* IPopupMenu::AddItem(const char* text, IPopupMenu* submenu)

You can treat these submenues the same way as your main menue.
IIRC you have to track the selected menue and item to implement proper item checks since they're all indepedent and each menue could hold checked items even though you set "CheckItemAlone".

[earlevel]

He's not talking about a hierarchical menu, but a pop-up selector with a matrix of choices.

I haven't written such a control. It could be done with text, but simpler (and less potential font-difference issues cross-platform) to use a graphic with the choices, and a highlight method during tracking (a colored rectangular outline, for instance).

I've done similar selectors, where a button control pops up another control that handles the mouse-drag to select from a vertical or horizontal graphical list (could be image or rendered text—for example, I have a "note" button that pops up horizontal list of notes (whole, half, quarter, eight...), and a horizontal drag highlights the note that the mouse is over, selecting it on release. It can be super easy for a one-dimensional (horizontal or vertical) list, because you can pre-render the highlights for each note. (If there are six choices, for instance, you can image the entire list six times, with each image having the next choice highlighted. Then it's just a trivial override of IKnobMultiControl.)

It would be a little more complicated with a matrix, but not much. Obviously, if your item names change, you couldn't use a pre-rendered graphic and the drawing part becomes more complicated, but the tracking and highlighting is pretty simple.

[stw]

Originally Posted by earlevel

He's not talking about a hierarchical menu, but a pop-up selector with a matrix of choices.

oops...should have read more carefully

EDIT: However for my current project i've done this:

Originally Posted by earlevel

It could be done with text, but simpler (and less potential font-difference issues cross-platform) to use a graphic with the choices, and a highlight method during tracking (a colored rectangular outline, for instance).

So if one is interested...

[earlevel]

Originally Posted by stw

So if one is interested...

I can give more code details, or even submit the addition as a pull request...but not right now, sorry, severe time deficit...

[stw]

Originally Posted by earlevel

I can give more code details, or even submit the addition as a pull request...but not right now, sorry, severe time deficit...

I don't need it, i have it working (at least the bitmap version)...

[Jansku]

Yeah I meant matrix / columns of names which can be chosen

Any advice would be great to get out from that old-school dropdown with scrolling.

Image as attachment.

[Jansku]

Originally Posted by earlevel

Obviously, if your item names change, you couldn't use a pre-rendered graphic and the drawing part becomes more complicated, but the tracking and highlighting is pretty simple.

The items would be static with Program 1, Program 2 etc.

[stw]

This is my IControl which has a bitmap as matrix source and returns the number of the selected cell. You'd need to init the param with the corresponding amount of items.

.h

class IGridOverlayControl : public ISwitchControl

// Based on IBitmapOverlayControl
// Returns the selected cell nr.
// Cell order from left->right and top->bottom

{
public:
    IGridOverlayControl(IPlugBase* pPlug, int x, int y, int paramIdx, IBitmap* pBitmap, IRECT pTargetArea, int cols = 1, int rows = 1)
    : ISwitchControl(pPlug, x, y, paramIdx, pBitmap), mTargetArea(pTargetArea), mCols(cols), mRows(rows), close(false)
    {
        width = mRECT.R - mRECT.L;
        hight = mRECT.B - mRECT.T;
        mCellHight = hight / mRows;
        mCellWidth = width / mCols;
        mCells = mRows * mCols;
    }
    
    ~IGridOverlayControl() {}
    
    bool close;
    void OnMouseOver(int x, int y, IMouseMod* pMod);
    void OnMouseDown(int x, int y, IMouseMod* pMod);
    void OnMouseUp(int x, int y, IMouseMod* pMod);
    bool Draw(IGraphics* pGraphics);
    
private:
    
    int mCol, mCols, mRow, mRows, mCells, width, hight;
    int mCellWidth, mCellHight;
    const int margin = 4;
    IRECT lastRect;
    
protected:
    IRECT mTargetArea;  // Keep this around to swap in & out.
};

.cpp


void IGridOverlayControl::OnMouseOver(int x, int y, IMouseMod* pMod){
    
    mCol = mCols * (x - mRECT.L) / width;
    mRow = mRows * (y - mRECT.T) / hight;
    Redraw();
}

void IGridOverlayControl::OnMouseDown(int x, int y, IMouseMod* pMod){
    
    int cell = mValue * mCells;
    int row =  cell / mCols;
    int col = cell - row * mCols;
    x = mCellWidth * col + mRECT.L + margin;
    y = mCellHight * row + mRECT.T + margin;
    lastRect = IRECT(x, y, x + mCellWidth - 2 * margin, y + mCellHight - 2 * margin);
    Redraw();
}

void IGridOverlayControl::OnMouseUp(int x, int y, IMouseMod* pMod){
    
    if(close){     // change val only on bitmap close
        mValue = (double) (mCol + mCols * mRow) / mCells;
        SetDirty();
    }
    else Redraw();
    close = !close;
}

bool IGridOverlayControl::Draw(IGraphics* pGraphics)
{
    if (!close)
    {
        mTargetRECT = mTargetArea;
        return true;  // Don't draw anything.
    }
    else
    {
        int x = mCol * mCellWidth + mRECT.L + margin;
        int y = mRow * mCellHight + mRECT.T + margin;
        IRECT rect = IRECT(x, y, x + mCellWidth - 2 * margin, y + mCellHight - 2 * margin);
        
        mTargetRECT = mRECT;
        IBitmapControl::Draw(pGraphics);
        
        pGraphics->RoundRect(&COLOR_GRAY, &lastRect, 0, 3, true);      // Draw Rect at last selected cell
        pGraphics->RoundRect(&COLOR_WHITE, &rect, 0, 3, true);         // Draw Rect at hovered cell
        return true;
    }
    return true;
}

[Jansku]

Ok I will give this a shot later on to see how I can get it up and running!
Will post my questions / findings later on.