Matrix Modulation Feedback

Christoph Hart

Orvillain

I'm trying to do this:

inline function setupModulationControlPanelLAF(numDraggers)
    {
        Console.print("rescaling triggers the setupModulationControlPanelLAF, and UI_SCALE is: " + SharedData.UI_SCALE);
        local wPct = 100.0 / numDraggers;
        local fontPx = Math.round(12 * SharedData.UI_SCALE);
        Console.print("fontpx is: " + fontPx);
        local laf = Content.createLocalLookAndFeel();
        laf.setInlineStyleSheet("
            
        #controller
        {
            display:flex;
            flex-wrap:nowrap;
            align-items:center;
            width:100%;
            padding:0;
            gap: 2px;
            border-radius:0;
            background:#333;
            overflow:hidden;
        }
        
        .control-button
        {
            display:none;
        }

        .dragger
        {
            display:block;
            flex:0 0 " + wPct + "%;
            width:" + wPct + "%;
            height:100%;
            min-width:0;
            box-sizing:border-box;
            white-space:nowrap;
            overflow:hidden;
            text-overflow:ellipsis;
            text-align:center;
            background-color:rgba(76, 76, 76, 1);
            opacity: 0.8;
            font-size:" + fontPx + "px;
        }

        .dragger::before
        {
            content: '';	
            background-color: white;
            background-image: var(--dragPath);
            width: 24px;
            margin: 2px;
        }

        .dragger:checked
        {
            background-color:rgba(255, 0, 0, 1);
            opacity: 1.0;
        }

        ");

        local tile = Content.getComponent("ft_modcontroller");
        tile.setLocalLookAndFeel(laf);
    }

This function is called at init, but is also called when I rescale my UI (which is all code that definitely works) ... but my font doesn't resize.

The flex and width of the draggers does seem to update. So I think I'm doing the right technique???

Orvillain

Or maybe I'm better off making custom panels with callbacks, and doing all of the scaling stuff I want to do inside regular LAF, rather than css ??

Orvillain

@Orvillain I solved my issue by making my font size a percentage of the dragger, but it was a bit weird. Everything I tried simply would not update the font size. Even doing a setStylePropertyblahblahblah call on the LAF object didn't work.

Christoph Hart

@Orvillain wait, how do you rescale your UI? Settings.setZoomFactor() should scale all fonts correctly.

Orvillain

@Christoph-Hart said in Matrix Modulation Feedback:

@Orvillain wait, how do you rescale your UI? Settings.setZoomFactor() should scale all fonts correctly.

No I'm not doing that. I have a custom scaling namespace that does a bunch of math, but ultimately what it does is update the properties of any UI widge - so x, y, w, h, fontSize, etc etc.

This kind of thing:

    inline function rescaleAll()
    {
        // Order of operations:
        // Resize interface
        // Re-apply panel bounds
        // Re-apply control bounds
        // Re-apply control style props (font, radii, etc.)
        // Reposition zoom handle

        // Resize the window
        Content.makeFrontInterface(SharedData.getScaledWidth(), SharedData.getScaledHeight());

        // Panels first (so parents are sized before children)
        for (i = 0; i < _layout.length; i++)
            _applyScaledBounds(_layout[i]);

        // Controls: bounds then props
        for (i = 0; i < _controls.length; i++)
        {
            _applyScaledBounds(_controls[i]);
            _applyScaledProps(_controls[i]);
        }

        LogicalZoom.onRescaled();
    }

Effectively, I'm scaling everything manually. Not using the automatic zoom factor way to do it. I don't have a reason other than coder ego!!

And this all works fine, but setting the font-size property in the modulation controller didn't seem to update in any of the ways I tried.

Christoph Hart

@Orvillain now you have another reason. Also all dialogs / other inbuilt components will not scale correctly like this.

Orvillain

@Christoph-Hart said in Matrix Modulation Feedback:

@Orvillain now you have another reason. Also all dialogs / other inbuilt components will not scale correctly like this.

Ah cool beans. Yeah that was trivial to implement in my existing code, and actually makes the whole thing a lot simpler. Sorry, I thought the whole thing was originally a bug to do with the matrix mod controller and how it processed css - hence tagging onto this thread!

The only slight loss is, my approach was working inside HISE directly, without having to compile the plugin in order to double check zoom/rescale performance.

Christoph Hart

@Orvillain You can still check this within HISE - basically the zoom factor in the interface designer does exactly that and if you want to check the actual behaviour with the zoom setting set by the user you can use a second floating tile window that you add a "Main Interface" to - this respects the zoom setting (unlike the popup interface that appears when you click on the house button).

Orvillain

@Christoph-Hart Good to know, cheers!!

Matrix Modulation Feedback

42

1.9k

12.5k

108.5k