Using customComponents to draw knobs and sliders

[dasfaker]

Hi Atom

I’m building a panel where all sliders and knobs are custom components.
As I’m adding more custom components, redrawing the panel is slowing more and more. It seems Juce isn’t very fast with the drawing routines. I remember there was an experimental OpenGL feature in Ctrlr some time ago. Was that finally implemented, and could improve the graphics performance?

[atom]

Well i can add that again to Ctrlr no problem, but i doubt it will increase the performance of drawing itself. It’s how you draw with JUCE, how much and what you repaint. Did you look at the Rendering DEMO and compared it’s performance with your components ? I don’t know how much overhead is happening in luabind i wanted to try to replace lua with luaJIT that is faster, but i don’t know how well it will work with luabind.

Maybe you could provide some test cases for drawing i could try and experiment with, i could try to do some tests with those new features and see if they will help before i’ll do a full implementation. There are 3 things i can test quickly (opengl, luaJIT, and your code).

I wouldn’t put too much faith in opengl and luaJIT, they will give us some performance bumps but i doubt they will be significant. Worth a try anyway.

[dasfaker]

Thanks for your explanation.

Yes, I will send you the panel so you can experiment with it, I have to clean it before as is an old panel with a lot of stuff.

I see there is lag when all custom components need a redraw at the same time or when dragging a window over the panel. Redrawing a custom component is about 50% slower than a default juce slider, but it’s ok; no matter how much I draw (paths, gradients, transforms…), luabind seems fast enough, but as the custom component increase their size their performance decay.

It is worse when I use the custom panel background callback, as it needs to be repainted everytime a custom component change, and this is a big canvas.

The idea was to make the panel without external resources and draw everything with Lua (I don’t like the standard juce looking), so when you zoom the panel there is no blur in the graphics, but zooming decreases performance a lot.

[atom]

There is a 3rd option that i was working on. That is implementing a custom look and feel in Lua for the default components. This is possible and would be faster (since JUCE would do the work). I’ll prepare a demo for this and you can have a look if it suits your needs (look and feel covers ALL components in JUCE)

[dasfaker]

That would be fantastic. I’ve searched in the juce forum and some people draw their custom knobs with these look and feel stuff, but I didn’t understand how, as the look and feel I know only change the colours and other stuff, the standard variables of components, but not the design of the elements.

I think I’m giving you a lot of work, sorry!!

[msepsis]

With all due respect to the OP, this in my opinion should be put *much further* down the list of priorities than functionality develpment.. Like getting snapshots and the program manager working. Right now there are many ways to go about creating custom looks for knobs and buttons. Get jknobman. There are thousands of knobs you can download and customize fot it.

Monstrum Media | Music, Sound & Software Design, Chicago / San Francisco listen

[zeoka]

There is case of using jknob image in slider is limited even with
expressions , lua and maxval minval properties :

osc1 octave : min val 0 max 96 interv 12
valexpression : modulatorValue + 16
valexpresion rev : midiValue – 16
I MUST start by 0 BECAUSE it is an Imageslider
If it was a simple slider I just would do
osc1 octave : min val 16 max 112 interv 12

panel:getModulatorWithProperty("vstIndex",64):setModulatorValue((writemods:getByte(1)) - 16,false,false,false) 
panel:getModulatorWithProperty("vstIndex",65):setModulatorValue((writemods:getByte(2)) - 52,false,false,false)
panel:getModulatorWithProperty("vstIndex",66):setModulatorValue(writemods:getByte(3),false,false,false)
panel:getModulatorWithProperty("vstIndex",67):setModulatorValue((writemods:getByte(4)) - 40,false,false,false)
panel:setModulatorValuesFromData(writemods:getRange(5,9),"vstIndex", CtrlrPanel.EncodeNormal, 68, 1, false)
panel:getModulatorWithProperty("vstIndex",77):setModulatorValue((writemods:getByte(17)) - 16,false,false,false) 
panel:getModulatorWithProperty("vstIndex",78):setModulatorValue((writemods:getByte(18)) - 52,false,false,false)
panel:getModulatorWithProperty("vstIndex",79):setModulatorValue(writemods:getByte(19),false,false,false)
panel:getModulatorWithProperty("vstIndex",80):setModulatorValue((writemods:getByte(20)) - 40,false,false,false)
panel:setModulatorValuesFromData(writemods:getRange(21,9),"vstIndex", CtrlrPanel.EncodeNormal, 81, 1, false)
panel:getModulatorWithProperty("vstIndex",90):setModulatorValue((writemods:getByte(33)) - 16,false,false,false) 
panel:getModulatorWithProperty("vstIndex",91):setModulatorValue((writemods:getByte(34)) - 52,false,false,false)
panel:getModulatorWithProperty("vstIndex",92):setModulatorValue(writemods:getByte(35),false,false,false)
panel:getModulatorWithProperty("vstIndex",93):setModulatorValue((writemods:getByte(36)) - 40,false,false,false)
panel:setModulatorValuesFromData(writemods:getRange(37,7),"vstIndex", CtrlrPanel.EncodeNormal, 94, 1, false)
panel:setModulatorValuesFromData(writemods:getRange(49,3),"vstIndex", CtrlrPanel.EncodeNormal, 101, 1, false)
panel:getModulatorWithProperty("vstIndex",104):setModulatorValue(writemods:getByte(53),false,false,false)
panel:setModulatorValuesFromData(writemods:getRange(56,2),"vstIndex", CtrlrPanel.EncodeNormal, 105, 1, false)

If I use image slider ,like you see I must parse modulators update more

May be using custom comp with single images instead of frameimage in an ImageSlider I will be fine

For velocity knobs 1-127 I must use a specific image frame with 128 or 129 images
I’m not remember but a specific frameimage……

I think Dasfaker prepares something of crazy 🙂

• This reply was modified 9 years, 7 months ago by zeoka.

Attachments:

You must be logged in to view attached files.

[dasfaker]

msepsis wrote:

With all due respect to the OP, this in my opinion should be put *much further* down the list of priorities than functionality develpment.. Like getting snapshots and the program manager working. Right now there are many ways to go about creating custom looks for knobs and buttons. Get jknobman. There are thousands of knobs you can download and customize fot it.

I’m not telling Atom to do this now (and I never did), I’m just asking some questions, and I think none of us should tell Atom what is important and what not.
To me snapshots and program managers are as functionality developments as the look and feel stuff, and as you can make your own program manager with Lua they aren’t so needed, but that’s just my opinion.

zeoka wrote:

May be using custom comp with single images instead of frameimage in an ImageSlider I will be fine

Yes, with a custom component you can do this, and many other things a normal component can’t.

zeoka wrote:

I think Dasfaker prepares something of crazy 🙂

Like this?

Seriously, I was just messing with custom components and their viability to replace normal components.

[zeoka]

:d Fun !!
but the draw script isn’t working 🙁 I can’t play !
That’s true customcomp could be incredible !
I like to play sometimes to the vst cyclop game after many time of sound
or even it gives an idea

I must remember the post where you discuss about assign the customComponent drawing to its modulatorValue

[dasfaker]

You must use the latest Ctrlr

[zeoka]

You have set the game level high !!

Do you know what is clip regions ??

What is the difference in juce
dragging up, dragging down i can’t find in juce

[dasfaker]

I didn’t added a timer to control fps, so if it’s too fast just resize the component to your taste. In my slow computer it was just fine this size.

Clip regions are related to paths. Yo can draw path1 inside path2 and by clipping it, if some part of path1 it’s outside path2 it will not be drawn.

I don’t know what’s dragging up or down. For the mouse wheel there is incX and incY. Where did you see that?

[atom]

There was a topic on drag and drop for custom component, i can’t find it, anyway the new build has this implemented and a DEMO panel has been added.

This is missing drag and drops from external programs (like files and text), but this is also possible i just need to implement this.

[zeoka]

Thx Dasfaker
I would say dragging up/down with the mouse how Juce recognize when I mouve up the mouse and when but it’s a stupid question I realize.

and nice for the drag&drop features Atom !

Actually I would fill a path on envelope component
seen in virus and tried to get it but fail

I’ve to dig drawing codes too !
I don’t know for now how to recognize my 3 points especially because two of them
could be superposed but I will try

Attachments:

You must be logged in to view attached files.

[dasfaker]

There is a method for mouse movement in customComponents, there you can use this to know x and y mouse coords.

componentMouseMove = function(component,mouseEvent)
mousePositionX = mouseEvent.x
mousePositionY = mouseEvent.y
end

[zeoka]

Thx I understand
the problem will be when two “dragging zones” will be superposed
I’m beaten about fill a specific area I’m surprised there is no FillPolygon() function

Attachments:

You must be logged in to view attached files.

[dasfaker]

Create a poligon inside the path and fill the path.

When two points overlap, you can’t know which one you click, at least with my code. Usually the one on top is the latest point coded. Just move the point you click and see if it’s the one you wanted 😛

[zeoka]

envpath =  Path()
--envpath:startNewSubPath(14,80) -- don't know the settings 
envpath:lineTo (14,80,af + 14,16)
envpath:lineTo (af + 14,16,df+af+ 14,80 - math.floor(sf/2) - 1)
envpath:lineTo (df+af+12,80 - math.floor(sf/2) - 1,rf+12,80 - math.floor(sf/2) - 1)
envpath:lineTo (rf+12,80 - math.floor(sf/2) - 1,418,79)
envpath:lineTo (14,80,418,79)
g:fillPath (envpath)

lua stops but no error message

for dragging you’re right ,may be not a problem 🙂

[dasfaker]

lineTo only admits two coordinates, x and y. You set four.

LineTo adds a line from the shape’s last position (startNewSubPath point if it’s the first element of the path) to a new x&y point.

[zeoka]

oohhh
😮

Thank you !

[Author]

Posts