Page 1 of 2
Premium GUI elments
Posted: 23 Sep 2017 19:30
by denoiser
Recently i've shared my summer nights project where i tried to create flash style (gradient heavy) gui elements; premium knob and fader.
Lemur doesn't have angular gradient, and creating it on the fly takes a lot of resources and more math than one could like, but it's possible and therefore why not.
Some things currently as of ver 5.3.2 i cannot make, but i've spend a lot of time to make it as good as it can be.
If you have any comments or constructive ideas, or if something in code is unclear, do not hasitate to ask.
Greets
d
Re: Premium GUI elments
Posted: 23 Sep 2017 23:59
by Phil999
this is great work. Magnificent. The brushed aluminium background is incredible. Never thought such things could be possible in Lemur. Excessive use of rand(), never seen something like this. The recently released Fader will go into my WIP Mixbus template, it was exactly what I was looking for.
I was thinking of using my 'Buchla'-Fader, which is nice, but not visually suitable for a DAW controller. Creating a new fader would take me a lot of time, and now it's already there, created by you. I'm very grateful for what you've done. Working with Canvas is not my speciality, so I'm also grateful to learn so much from your work.
The Buchla-Fader:
https://forum.liine.net/viewtopic.php?f ... hilit=west
P.S.: I went to the forum to open a discussion about the 'premium' material, and now the thread is already there.
Re: Premium GUI elments
Posted: 24 Sep 2017 20:58
by denoiser
Thank you for you reply. I hope that fader will serve you well
Re: Premium GUI elments
Posted: 25 Sep 2017 15:41
by schoko
Thanks very much for this, thanks, thanks thanks!!! looks great!
Re: Premium GUI elments
Posted: 29 Sep 2017 16:41
by Phil999
I still haven't found out how to change the colour of the Fader frame.
Re: Premium GUI elments
Posted: 29 Sep 2017 20:14
by denoiser
If you mean border around fader, code for handling that is in FaderBackground, under build() subrutine.
Code looks like this:
Code: Select all
if (border) {
shape[0] = createBorder(border);
shape[1] = 3;
shape[2] = 0;
shape[3] = {1, .8, .8, .8}; <<< here are alpha, r, g, b values
shape[7] = 0;
addShape(shape);
}
Also, above code is a good example how things are drawn on all canvases.
Usually onLoad subrutine calls build() subrutine.
Here you define shapes, colors etc:
shape[0] holds drawing path (made with rect, lineTo, arc etc.)
shape[1] is line ticknes for stroking, if value is 0, then shape will be filled.
shape[2] is line cap (if shape is filled, this is ignored)
shape[3] holds gradient for filling, or, like above vector for stroking (currently stroking with gradient is not possible)
shape[4 if gradient or 7 if vector] used for rotation. Values are -2 to rotate, or 0.
Then, when needed, all shapes stored in vector are drawn in onRedraw()
Sorry for only few comments in code.
Few days ago i did some updates on Fader (i've added live meter) and will upload it soon.
Re: Premium GUI elments
Posted: 01 Oct 2017 17:42
by Phil999
thank you very much for the explanation. Now I understand. Also thanks for the tip how to work with Canvas objects.
Re: Premium GUI elments
Posted: 07 Oct 2017 12:45
by schoko
hi denoiser, i tried to implement the knob into my template, on the tablet i can't see: theknob, the ledring, just the background and screws, do you know why(just on the computer)?
can i resize the whole knob incl. ledring? i need it way smaller...
it would be really nice if you could upload your new fader with led, want to use it!
nice work!
thank you
Re: Premium GUI elments
Posted: 07 Oct 2017 20:05
by Phil999
resizing is possible with the underlying object itself. The canvas will follow its size.
I think it's best to export your project as jzml, load the entire Premium project, and import your project.
Re: Premium GUI elments
Posted: 10 Oct 2017 23:24
by denoiser
schoko wrote:hi denoiser, i tried to implement the knob into my template, on the tablet i can't see: theknob, the ledring, just the background and screws, do you know why(just on the computer)?
can i resize the whole knob incl. ledring? i need it way smaller...
it would be really nice if you could upload your new fader with led, want to use it!
nice work!
thank you
Hi schoko,
knob consists of three parts needed to work:
KnobBase - this is original lemur knob. select it in browser, bring it to front, make changes and send it back.
KnobMask- this is canvas that draws knob background. In onLoad () function there is variable 'parent', change its value to hold new name if you changed orig. lemur knobs name
KnobHead - this is canvas that draws knob foreground. Same rule for assigning parent appplies to this one.
This is specialy important if you have multiple knobs, hence each one will have unique name. ie. KnobBase1, KnobBase2... so changing 'parent' var in those canvases is a must in order to work properly.
I will upload fader soon, just need few checks.
i've just 'finished' something, i hope you will like 'one'
EDIT: I've uploaded updated fader.
Greets
d