Custom LookAndFeel drawRotarySlider need C++ help...

ustk

I've added two functions for rotary and linear slider in the custom LAF, almost ready for a pull request ;)

All works great exept I can't get a rid of the old textBox of the rotary.
Unlike linear sliders, where disabling the textBox in the property editor works as expected, it doesn't for rotary sliders.
I tried to find a way to add this to the object but I couldn't make it work as the reference doesn't exist in juce::Slider
Probably because it is an additional layer of Hise...

So how can I get a rid of it when using custom LAF?

here's what I got working so far:
There's a lot of different values so we are not limited when drawing shapes

void ScriptingObjects::ScriptedLookAndFeel::Laf::drawRotarySlider(Graphics &g_, int /*x*/, int /*y*/, int width, int height, float /*sliderPosProportional*/, float /*rotaryStartAngle*/, float /*rotaryEndAngle*/, Slider &s)
{
	if (auto l = get())
	{
		DynamicObject::Ptr obj = new DynamicObject();

		obj->setProperty("area", ApiHelpers::getVarRectangle(s.getLocalBounds().toFloat()));
		obj->setProperty("text", s.getName());
		obj->setProperty("value", s.getValue());
		obj->setProperty("valueNormalized", (s.getValue() - s.getMinimum()) / (s.getMaximum() - s.getMinimum()));
		obj->setProperty("valueSuffixString", s.getTextFromValue(s.getValue()));
		obj->setProperty("suffix", s.getTextValueSuffix());
		obj->setProperty("skew", s.getSkewFactor());
		obj->setProperty("min", s.getMinimum());
		obj->setProperty("max", s.getMaximum());

		obj->setProperty("clicked", s.isMouseButtonDown());
		obj->setProperty("hover", s.isMouseOver());

		obj->setProperty("bgColour", s.findColour(HiseColourScheme::ComponentOutlineColourId).getARGB());

		obj->setProperty("itemColour1", s.findColour(HiseColourScheme::ComponentFillTopColourId).getARGB());

		obj->setProperty("itemColour2", s.findColour(HiseColourScheme::ComponentFillBottomColourId).getARGB());

		obj->setProperty("textColour", s.findColour(HiseColourScheme::ComponentTextColourId).getARGB());

		if (l->callWithGraphics(g_, "drawRotarySlider", var(obj)))
			return;
	}

	GlobalHiseLookAndFeel::drawRotarySlider(g_, -1, -1, width, height, -1, -1, -1, s);
}


void ScriptingObjects::ScriptedLookAndFeel::Laf::drawLinearSlider(Graphics &g, int x, int y, int width, int height, float sliderPos, float minSliderPos, float maxSliderPos, const Slider::SliderStyle style, Slider &slider)
{
	if (auto l = get())
	{
		DynamicObject::Ptr obj = new DynamicObject();

		obj->setProperty("area", ApiHelpers::getVarRectangle(slider.getLocalBounds().toFloat()));
		obj->setProperty("text", slider.getName());
		obj->setProperty("value", slider.getValue());
		obj->setProperty("valueNormalized", (slider.getValue() - slider.getMinimum()) / (slider.getMaximum() - slider.getMinimum()));
		obj->setProperty("valueSuffixString", slider.getTextFromValue(slider.getValue()));
		obj->setProperty("suffix", slider.getTextValueSuffix());
		obj->setProperty("skew", slider.getSkewFactor());
		obj->setProperty("min", slider.getMinimum());
		obj->setProperty("max", slider.getMaximum());

		obj->setProperty("style", slider.getSliderStyle());	// Horizontal:2, Vertical:3, Range:9

		// When style is "Range"
		obj->setProperty("valueRangeStyleMin", slider.getMinValue());
		obj->setProperty("valueRangeStyleMax", slider.getMaxValue());
		obj->setProperty("valueRangeStyleMinNormalized", (slider.getMinValue() - slider.getMinimum()) / (slider.getMaximum() - slider.getMinimum()));
		obj->setProperty("valueRangeStyleMaxNormalized", (slider.getMaxValue() - slider.getMinimum()) / (slider.getMaximum() - slider.getMinimum()));

		obj->setProperty("clicked", slider.isMouseButtonDown());
		obj->setProperty("hover", slider.isMouseOver());
		
		obj->setProperty("bgColour", slider.findColour(HiseColourScheme::ComponentOutlineColourId).getARGB());

		obj->setProperty("itemColour1", slider.findColour(HiseColourScheme::ComponentFillTopColourId).getARGB());

		obj->setProperty("itemColour2", slider.findColour(HiseColourScheme::ComponentFillBottomColourId).getARGB());

		obj->setProperty("textColour", slider.findColour(HiseColourScheme::ComponentTextColourId).getARGB());

		if (l->callWithGraphics(g, "drawLinearSlider", var(obj)))
			return;
	}

	GlobalHiseLookAndFeel::drawLinearSliderBackground (g, x, y, width, height, sliderPos, minSliderPos, maxSliderPos, style, slider);
	GlobalHiseLookAndFeel::drawLinearSliderThumb (g, x, y, width, height, sliderPos, minSliderPos, maxSliderPos, style, slider);
}

LightandSound

@ustk assuming you mean the lower text section, I believe it's added with https://docs.juce.com/master/classSlider.html#ab6d7dff67151c029b9cb53fc40b4412f, so just noTextBox for that.

ustk

@LightandSound Ah ok thanks! It worked by adding this:

s.setTextBoxStyle (Slider::NoTextBox, false, -1, -1);

I'm a very C++ noob so can you confirm I haven't made any mistake?

void ScriptingObjects::ScriptedLookAndFeel::Laf::drawRotarySlider(Graphics &g_, int /*x*/, int /*y*/, int width, int height, float /*sliderPosProportional*/, float /*rotaryStartAngle*/, float /*rotaryEndAngle*/, Slider &s)
{
	if (auto l = get())
	{
		DynamicObject::Ptr obj = new DynamicObject();

		s.setTextBoxStyle (Slider::NoTextBox, false, -1, -1);

		obj->setProperty("area", ApiHelpers::getVarRectangle(s.getLocalBounds().toFloat()));
		obj->setProperty("text", s.getName());
		obj->setProperty("value", s.getValue());
		obj->setProperty("valueNormalized", (s.getValue() - s.getMinimum()) / (s.getMaximum() - s.getMinimum()));
		obj->setProperty("valueSuffixString", s.getTextFromValue(s.getValue()));
		obj->setProperty("suffix", s.getTextValueSuffix());
		obj->setProperty("skew", s.getSkewFactor());
		obj->setProperty("min", s.getMinimum());
		obj->setProperty("max", s.getMaximum());

		obj->setProperty("clicked", s.isMouseButtonDown());
		obj->setProperty("hover", s.isMouseOver());

		obj->setProperty("bgColour", s.findColour(HiseColourScheme::ComponentOutlineColourId).getARGB());

		obj->setProperty("itemColour1", s.findColour(HiseColourScheme::ComponentFillTopColourId).getARGB());

		obj->setProperty("itemColour2", s.findColour(HiseColourScheme::ComponentFillBottomColourId).getARGB());

		obj->setProperty("textColour", s.findColour(HiseColourScheme::ComponentTextColourId).getARGB());

		if (l->callWithGraphics(g_, "drawRotarySlider", var(obj)))
			return;
	}

	GlobalHiseLookAndFeel::drawRotarySlider(g_, -1, -1, width, height, -1, -1, -1, s);
}

ustk

@d-healey I've made a pull request for the Rotary & Linear custom LAF ;)

ustk

Now I am not able to get the ID:

obj->setProperty("id", slider.getComponentID());

returns an empty string... Any IDea? :)

d.healey

@ustk getComponentId(); Maybe?

ustk

@d-healey That is what I have tried at first but the known member in juce::Slider is getComponentID(), not Id

Christoph Hart

Where do you set the ID? It‘s empty by default AFAIK...

ustk

@Christoph-Hart In both the rotary and linear slider custom LAF:

void ScriptingObjects::ScriptedLookAndFeel::Laf::drawRotarySlider(Graphics &g_, int /*x*/, int /*y*/, int width, int height, float /*sliderPosProportional*/, float /*rotaryStartAngle*/, float /*rotaryEndAngle*/, Slider &s)
{
	if (auto l = get())
	{
		DynamicObject::Ptr obj = new DynamicObject();

		s.setTextBoxStyle (Slider::NoTextBox, false, -1, -1);

		obj->setProperty("id", s.getComponentID());   // <= HERE
		obj->setProperty("text", s.getName());
		obj->setProperty("area", ApiHelpers::getVarRectangle(s.getLocalBounds().toFloat()));

		obj->setProperty("value", s.getValue());
		obj->setProperty("valueNormalized", (s.getValue() - s.getMinimum()) / (s.getMaximum() - s.getMinimum()));
		obj->setProperty("valueSuffixString", s.getTextFromValue(s.getValue()));
		obj->setProperty("suffix", s.getTextValueSuffix());
		obj->setProperty("skew", s.getSkewFactor());
		obj->setProperty("min", s.getMinimum());
		obj->setProperty("max", s.getMaximum());

		obj->setProperty("clicked", s.isMouseButtonDown());
		obj->setProperty("hover", s.isMouseOver());

		obj->setProperty("bgColour", s.findColour(HiseColourScheme::ComponentOutlineColourId).getARGB());

		obj->setProperty("itemColour1", s.findColour(HiseColourScheme::ComponentFillTopColourId).getARGB());

		obj->setProperty("itemColour2", s.findColour(HiseColourScheme::ComponentFillBottomColourId).getARGB());

		obj->setProperty("textColour", s.findColour(HiseColourScheme::ComponentTextColourId).getARGB());

		if (l->callWithGraphics(g_, "drawRotarySlider", var(obj)))
			return;
	}

	GlobalHiseLookAndFeel::drawRotarySlider(g_, -1, -1, width, height, -1, -1, -1, s);
}

Having access to the ID would allow us to create different custom LAF rules, if it is safe enough...?

Natan

@ustk Sir, Is This Ready To Use?
Any Examples Is Much Appreciated

Custom LookAndFeel drawRotarySlider need C++ help...

48

1.7k

11.6k

101.4k