For us design luvvers that do get itchy...

[bijlevel]

#596 (reply in thread)

@Ted-juh Leef je nog?😋

I have studied your post (see link above in this post) about the custom rotary slider, because I like the design and I'm at the moment busy with a panel design. Am I right in my understanding that the outer red ring is a L&F v4 slider and the rest a "painted" rotary slider. So a combination? Maybe you could post a panel-example with this slider?

This is wat I'm aiming at (very roughly, colours have to change...), a L&F v4 rotary combined with some button image:

[damiensellier]

I've never seen a knob like this :)
You have 4 circles in there, that's a lot. I'm not sure what you want to do. Is it like a dual-concentric/stacked knob?
If not you need to use the slider lookandfeelmethod drawRotarySlider() to draw your different elements.

https://docs.juce.com/master/structSlider_1_1LookAndFeelMethods.html#ae63a9d8adce084cd5dbe02b960c73a9a
https://docs.juce.com/master/tutorial_look_and_feel_customisation.html

Some custom exemples for the sliders are available in the JUCE demorunner in the lookandfeel category.

[bijlevel]

I'm no sure if you mean the knob of @Ted-juh or 'my not yet functional' knob picture. If mine, then I just wanted to get rid of the flatness of the standard Juce rotary slider by filling up the empty space in the middle with some 3D knob representation. But looking at the code of Ted-juh it is probably possible to design it completely within Juce/Lua without using the standard slider.

[Ted-juh]

Sorry for the delay. Got home late last night and crashed right away.

I decided against posting the whole panel because it would make it unnecessarily complicated. But here is the L&F for "that" button:

`
slidLF1 = {

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

------------------------------------------------------------------------------------------------------------

centre = width * 0.5					-- centre of component, given that width and height are the same
innerSize = width * 0.35				-- inner ring of dial to hold the image for the knob

------------------------------------------------------------------------------------------------------------

diam4		= width * 0.65
rad4		        = diam4 * 0.5
rotEll		= 0
frRad		= 0
toRad		= math.pi * 2
pathStr4	= width * 0.04

grad1x 		= width * 0.6
grad1y		= width * 0.275
grad2x		= width * 0.5
grad2y		= 0.67

slidMin = rotaryStartAngle
slidMax = rotaryStartAngle + sliderPosProportional * (rotaryEndAngle - rotaryStartAngle)

arcP = Path()
g:setColour(Colour(0xFFFF0000))
arcP:addCentredArc(centre , centre, rad4, rad4, rotEll, slidMin, slidMax, true )
g:strokePath(arcP, PathStrokeType(pathStr4), AffineTransform())

------------------------------------------------------------------------------------------------------------

-- (3a) Knob, Inner Black Circle, because of transparancy, need to fill a black bg.

diam3 	= width * 0.55
rad3 	= diam3 * 0.5
iRC3x	= centre - rad3

grad1x	= width * 0.5
grad1y	= 0
grad2x 	= width * 0.5
grad2y	= width * 0.4

circHolder = Path()
g:setColour(Colour(0xC8000000))
circHolder:addEllipse(iRC3x,iRC3x,diam3,diam3)
g:fillPath(circHolder, AffineTransform())

------------------------------------------------------------------------------------------------------------

-- (3b) Knob, Inner Red Circle

diam3 	= width * 0.55
rad3 	= diam3 * 0.5
iRC3x	= centre - rad3

grad1x	= width * 0.6
grad1y	= 0
grad2x 	= width * 0.5
grad2y	= width * 0.53

circHolder = Path()
gradient1 = ColourGradient(Colour(0x99FFFFFF), grad1x, grad1y, Colour(0x609E282B) , grad2x, grad2y, true)
g:setGradientFill(gradient1)
circHolder:addEllipse(iRC3x,iRC3x,diam3,diam3)
g:fillPath(circHolder, AffineTransform())

------------------------------------------------------------------------------------------------------------

-- (4) Red Outer Ring Around Inner Knob
-- this uses addCentredArc, drawEllipse can also be used and is even more convenient
-- g:drawEllipse(rx,ry,rw,rh,1.0) 1.0 = thickness of the outer circle

diam4		= width * 0.45
rad4		= diam4 * 0.5
rotEll		= 0
frRad		= 0
toRad		= math.pi * 2
pathStr4	= width * 0.03

grad1x 		= width * 0.6
grad1y		= width * 0.275
grad2x		= width * 0.5
grad2y		= 0.67

arcP = Path()
gradient3 = ColourGradient(Colour(0xFFFFFFFF), grad1x, grad1y, Colour(0xFF7D0000) , grad2x, grad2y, true)
g:setGradientFill(gradient3)
arcP:addCentredArc(centre , centre, rad4, rad4, rotEll, frRad, toRad, true )
g:strokePath(arcP, PathStrokeType(pathStr4), AffineTransform())

------------------------------------------------------------------------------------------------------------

-- (5) Outer Ring, Silver Shiny
-- see 4 for drawEllipse comment.

diam5 		= width * 0.55
rad5 		= diam3 * 0.5
iRC5x		= centre - rad3
rotEll		= 0
frRad		= 0
toRad		= math.pi * 2
pathStr5	= width * 0.06

grad1x		= width * 0.6
grad1y		= width * 0.1
grad2x		= width * 0.5
grad2y		= width * 0.67

gradient2 = ColourGradient(Colour(0xFFFFFFFF), grad1x, grad1y, Colour(0xFF2b2b2b) , grad2x, grad2y, true)
g:setGradientFill(gradient2)
arcP = Path()
arcP:addCentredArc(centre , centre, rad5, rad5, rotEll, frRad, toRad, true )
g:strokePath(arcP, PathStrokeType(pathStr5), AffineTransform())

------------------------------------------------------------------------------------------------------------

-- (6) sliderpointer.. not the same way as in the juce tutorials but does the same.

angle = rotaryStartAngle + sliderPosProportional * (rotaryEndAngle - rotaryStartAngle)

g:setColour(Colour(0xFFFF0000))
pointert	= Path()
pointert:addRectangle(centre , width * 0.2 , width * 0.03, width * 0.06)
rotation = AffineTransform.rotation(angle ,centre,centre)
g:fillPath(pointert,rotation)

end,

}
`
The complicating factor in this L&F is the gradient and transparency to get that "3D Metallic" effect but once you get the hang of it, it's quite easy. Remember that if you use the graphics class in Juce, you paint from bottom to top.

In this case, the outer "red" ring is a visual aid because the "pointer" got very small depending on the button's size. It fills the value from 0 to where the pointer is. With a little help from drawText, you can even show the Value of the slider in the middle of the button instead of TextBoxBelow. Either way, you can go crazy with those designs. And the beauty of it all is that it's just paint routines and you can resize the button freely.

@damiensellier: A button never seen before makes it a unique button ;-).

[bijlevel]

@Ted-juh: pet-juh af!

Thanks a lot for the code! I will try to implement it, will take probably some time, and let you know about my experiences and "designs".

[Ted-juh]

I'll post some pictures later tonight of a few designs I made. Mr dnaldoog also made a cool design. But those experiments were almost 2 years ago(?) so I need to dig deep in my test-case folders to find them.

[Ted-juh]

A few designs. Some were solely made to figure out movement in combination with the Graphics Class. Others were made as an understudy to use in a panel later.

And a design from Dnaldoog:

[bijlevel]

Wom man, never knew that this was possible in CTRLR! Very inspiring! Also compliments to Dnaldoog's design, comes close to what I want to achieve.

[dnaldoog]

That pitch dial is pretty cool!

[dnaldoog]

Hi @bijlevel Here are some panels Tedjuh and I were working on, including:

Enjoy.

My Look and feel experiments_tedjuh dnaldoog.zip

[bijlevel]

Thanks a lot! Will be a great source of inspiration, I'm sure! One of the advantages over Knobman is of course scalability (while keeping the resolution) and probably flexibility (and even more advantages which I will encounter).

[dnaldoog]

That’s true. I try to use bitmap based graphics as little as possible these days.

[bijlevel]

I did look at the various demo panels and the one called 'My look and feel experiments' looks very promising, beause one can set the various graphic aspects of a component by changing the value of the sliders 'aaa' to 'hhh'. Took some time to figure out how it works exactly, but I gradually got the hang of it 😋. A question though: how can it be adapted to a horizontal or vertical slider?

[Ted-juh]

Well, the answer is in Dnaldoog's reply. Set the slider style to linearBarVertical or linearBarHorizontal. Or any of the other ones that can be set as slider style from the Juce slider class.

Not all can be set in Ctrlr. For example the threeValueSlider but if you apply it with Lua even that one shows up. But if I remember correctly not all sliders are implemented in the L&F for Ctrlr. Therefore the threeValueSlider will show up but only in the L&F that's applied to the whole panel.

If you mean horizontal or vertical as the way you have to drag it, that also depends on the slider style. But Dnaldoog found a way to drag that's both horizontal and vertical. I think you can call it multi-directional. Verry awesome, and to be honest, a more intuitive way to control a slider. Especially when a panel is close to the edge of the screen and you can't drag the mouse any further.

I can post that later if John doesn't mind. Or he can post it himself because, again, I have to weed through a lot of panels to find the right file.

[dnaldoog]

Here's another less impressive but very useful piece of code. You can create vertical linear bars using code like:

panel:getSlider("lfo rate"):getOwnedSlider():setSliderStyle(Slider.LinearBarVertical)

on panel load. The trick here is to set Value background colour to 00000000

I don't think this can be set in the editor as far as I can see. Linear Bar always goes left to right.

---

Set Linear Bar Vertical_1.zip

[dobo365]

Very interesting...Especially the wave selector and the linear vertical bars.
For all the buttons I'm just using jknobman but indeed it is different...
For the vertical bars, I drew them in a custom component but they are static. I may replace that using your trick to have them dynamic.

[Ted-juh]

The wave selector is a custom component. If I remember correctly it uses a timer to get the waveshape to loop because it's just 2 or 2,5 squares, blocks or waves. Figured it out with the help of Dnaldoog.

[dnaldoog]

Very interesting...Especially the wave selector and the linear vertical bars. For all the buttons I'm just using jknobman but indeed it is different... For the vertical bars, I drew them in a custom component but they are static. I may replace that using your trick to have them dynamic.

I use it often because they do look nice, design wise. But I don’t think I could’ve discovered that trick - it must’ve been Tedjuh who discovered it when we were working on ‘look and feel’ a while back. Just to give credit where credit is due!

[Ted-juh]

Coming up with, sometimes crazy, ideas isn't that hard. But to put them to code is a different thing. It was a successful partnership. So, credits where credits are due.