LinearBarVertical

[spiffo-smith]

Any reason why LinearBarVertical wasn't imported into Ctrlr from the JUCE Slider Class, only I could really do with it right now?

[Ted-juh]

I guess for the same reason that there is no twoValueSlider or a threeValueSlider or a rotaryHorizontalVerticalDrag, because they weren't added to Juce when Ctrlr was being developed. (And never added afterward.)

I think it's an easy task to implement a linearBarVertical by overriding a rotaryVerticalDrag with LookAndFeel.

[spiffo-smith]

Ted-juh, yep that's probably the answer.
Could you elaborate a bit on "overriding a rotaryVerticalDrag with LookAndFeel" that's a trick I haven't pulled yet, could be interesting?

[Ted-juh]

I'll post a working example later. It is working right now without a label name and textbox for the value. Will take a look if it's possible to add those.

[Ted-juh]

As promised a small demo panel.

linear slider.zip

Basically, you select a "uiSlider" and set it to rotaryVerticalDrag. Then set/ assign a custom LookAndFeel to that modulator. If all the modulators get the same L&F, then apply the L&F to the canvas, but you can set them separately as well. (See init file)

If you set the L&F in the init file, it's visible right from the start. But you can also switch l&f with a button (not working in this demo panel, the button has no use at the moment).

[spiffo-smith]

Ted-juh, that's Great! I have never used a Custom Look and Feel before so that is all new to me!
I think I can follow what's going on here and how you could implement the button to change the whole panel at will.

Q. Unless I'm missing something the function "setLookAndFeel" isn't necessary ???

Q. "myLookAndFeel" and "anotherLookAndFeel" are basically LUA Tables with one entry which is a Function, so essentially trying to emulate a Class or Structure???

Excuse my ignorance, I'm not a programmer but trying to learn!

[Ted-juh]

Q1: The setLookAndFeel function isn't necessary indeed. It's just there to do a quick repaint because when an L&F is applied to the canvas, the only way to repaint is to save the panel and reopen it. Gets tedious after a while.

Q2: I think you are right about the way you described it. Except there is more than one entry possible. This is just a "drawRotarySlider" but what if you want to assign an l&f to a Button or a Combobox? (See LLookAndFeel.h in Ctrlr/Source/Lua/JuceClasses for all possible options.) Then you can extend it by doing:

myLookAndFeel = {
drawRotarySlider = function(g, x, y, width, height, sliderPosProportional, rotaryStartAngle, rotaryEndAngle, slider)

-- draw routine for a rotary slider

end,

void drawLinearSlider (Graphics &g, int x, int y, int width, int height, float sliderPos, float minSliderPos, float maxSliderPos, const Slider::SliderStyle sliderStyle, Slider &slider);

-- draw routine for a linear slider

end,

void drawTickBox (Graphics &g, Component &component, float x, float y, float w, float h, bool ticked, bool isEnabled, bool isMouseOverButton, bool isButtonDown);

-- draw routine for a button as a tickbox

end,

} -- end table

This way you can transform almost every component of your panel with one script.

[spiffo-smith]

Great, thanks for that, I feel another experimental panel coming on!

[spiffo-smith]

OK, so I managed to create a Look and Feel for a LinearHorizontalSlider (modulator-5) where ZERO is in the middle and you slide the bar out to the left for -ve values and to the right for +ve values.

Q1 Why doesn't this work for a uiFixedSlider, whatever I tried nothing worked for modulator-3?
Q2 Why is the drawn bar for modulator-5 slightly offset to the left from the Ctrlr Modulator?

Look and Feel Experiment.zip

[Ted-juh]

Ok, good on the -ve values. But there is no visual bar, only when you slide to the right (+ve). Keep in mind that the -ve value is actually only a visual presentation, but your synth might only accept values above 0. To handle that, you need modulatorValueExpressions (see modulator section of your slider in the editor pane). And I fixed the bar "filling" to the left for you.

Q1: Well.. long story short. I found out a few days ago how to get L&F applied to a uiSlider but I'm still investigating if there's an easier method.

Q2. Because the "width" in the L&F function for the slider seems to be a different width than the component actually is. I have to admit that it is quite confusing but if you just take the component width, the bar is the full width of the component. (Also, see the attached panel.)

And for your information. I also found out how to get the "horizontalLinearBar" without all the L&F mumbo jumbo. But haven't had time to test it thoroughly.

Spiffo L&F.zip

[spiffo-smith]

That's weird I see a light blue bar drawn out to the left for -ve values, works for me! Oh and yes my synth does not accept -ve values that's why there is a modulatorValue+128 in the modulatorValueExpression.

The solution seems ok to me, maybe a bit over complicated for what I was originally trying to do but it's adaptable if you want to do more complex things?

Your panel draws to the left and right for me but then my original one did for me, weird!

OK, yeah so just use sliderWidth = slider:getWidth() to get the component width, problem solved!

[Ted-juh]

Sometimes when you change a function it doesn't update properly in-between saves untill you close and re-open the panel. That might have happened.

The l&f class is a very deep rabbit hole indeed with many undiscovered territories. See what Dnaldoog has posted to get a linearBar out of the box. Or how to apply a l&f to a uiFixedSlider. I don't mind Dnaldoog posting that code but keep in mind that:

The reason I didn't post that code is because I don't know how it behaves on the long run. Sometimes Ctrlr shuts down with an exception error and that's scary because it would flush all the work invested down the drain if that happens with a standalone version. As a matter of fact, I don't even know if it holds up if you export it to vst. So, see it as highly experimental.

(Nice trick with the transparency btw, Dnaldoog.)

So yeah, just like the custom component there's a can of possibilities to be explored concerning L&F. And if you work out the graphics class/ L&F then the possibilities are endless.

[dnaldoog]

I got this code from @Ted-juh, so I don't want to take credit for it, but seeing as I was experimenting with his code I thought I would share it.

You can create a vertical bar using this code at startup: Here I have 7 regular uiSlider and 1 uiFixedSlider with names level1 ... level8

The trick is to set value background colour to transparent 00FFFFFF or set the alpha to something like 22FFFF00 but it overlays the
Thumb colour colour (see LEVEL 7) , so if it's set to an opaque value e.g. FFFFFFFF you won't see the vertical bar.

init = function(--[[ CtrlrInstance --]] type)
    for i = 1, 8 do
        local sType = panel:getComponent("level" .. i):getProperty("uiType")
        if sType == "uiSlider" then
            panel:getSlider("level" .. i):getOwnedSlider():setSliderStyle(Slider.LinearBarVertical)
        elseif sType == "uiFixedSlider" then
            panel:getFixedSlider("level" .. i):getOwnedSlider():setSliderStyle(Slider.LinearBarVertical)
        end
    end
end

LinearBarVertical_2_0.zip

---

[spiffo-smith]

OK, yes that is definitely the simplest way of doing what I originally asked!

However I feel that now I've discovered Look And Feel there's no going back, another rabbit hole for me to disappear down :-(

[dnaldoog]

Yes, I have been looking at it too with the help of @Ted-juh. It opens up many possibilities I wasn't so aware of. Good luck!