COCKOS
CONFEDERATED FORUMS
Cockos : REAPER : NINJAM : Forums
Forum Home : Register : FAQ : Members List : Search :
Old 01-16-2020, 12:41 PM   #1
Tugrul
Human being with feelings
 
Join Date: Nov 2016
Posts: 18
Default Easy way to design a gui

Hi,
Is there a tool to make gui things easier in the framework IPLUG2?
the exact position of knobs , slider , and others...

Thanks in advance
Tuğrul
Tugrul is offline   Reply With Quote
Old 01-17-2020, 12:43 PM   #2
Tunca
Human being with feelings
 
Join Date: Apr 2016
Posts: 240
Default

Quote:
Originally Posted by Tugrul View Post
Hi,
Is there a tool to make gui things easier in the framework IPLUG2?
the exact position of knobs , slider , and others...

Thanks in advance
Tuğrul
Absolutely, i need advice, too!

Even, i can't add background as .png. And examples don't show it.

At the moment, i talking with someone from forum. If i sort it, i will share info.
Tunca is offline   Reply With Quote
Old 01-17-2020, 11:44 PM   #3
Tugrul
Human being with feelings
 
Join Date: Nov 2016
Posts: 18
Default

Quote:
Originally Posted by Tunca View Post
Absolutely, i need advice, too!

Even, i can't add background as .png. And examples don't show it.

At the moment, i talking with someone from forum. If i sort it, i will share info.

Hi,
This is a sample of code that I have made, I put here important parts.

#define BACKGROUND_FN "2RuleFilterNewBack2.png"
#define KNOB_FN "knob_med.png"
#define SLIDE_FN "hslider_med2.png"
#define BUTTON_FN "button_sm.png"
.
.

mLayoutFunc = [&](IGraphics* pGraphics) {
pGraphics->AttachBackground( BACKGROUND_FN);
IBitmap knobBitMap = pGraphics->LoadBitmap(KNOB_FN, 63, FALSE,2);
IBitmap switchBitMap = pGraphics->LoadBitmap(SLIDE_FN, 3,TRUE,3);
IBitmap buttonBitMap = pGraphics->LoadBitmap(BUTTON_FN, 2,FALSE,3);
.
.


control = new IBKnobControl( parameterProperties[i].x, parameterProperties[i].y, knobBitMap, parameterProperties[i].ID);

pGraphics->AttachControl(control);

};

But my problem is different. I always to try to guess the coordinate x, y of the gui components , and compile the code and see if it is correct :-) It takes time to find the correct x,y coordinate :-)
Tugrul is offline   Reply With Quote
Old 01-18-2020, 01:59 AM   #4
Tunca
Human being with feelings
 
Join Date: Apr 2016
Posts: 240
Default

Code:
control = new IBKnobControl( parameterProperties[i].x, parameterProperties[i].y, knobBitMap, parameterProperties[i].ID);

pGraphics->AttachControl(control);
I can't handle this...

Also, where should i initialize "control"?

Confused...

Also, i'm using GIMP to find coordinates.

Import your background.png to GIMP as a new layer. Then, import your knob.png as a new layer. Move your knob to where it should be and move your mouse pointer to knob's left top corner. Then you will see coordinates under GIMP's main window.

EDIT

Found the way!

Code:
pGraphics->AttachControl(new IBKnobControl( 100, 100, bitmap1, kGain));

Last edited by Tunca; 01-18-2020 at 02:09 AM.
Tunca is offline   Reply With Quote
Old 01-18-2020, 02:52 AM   #5
Tugrul
Human being with feelings
 
Join Date: Nov 2016
Posts: 18
Default

Quote:
Originally Posted by Tunca View Post
Code:
control = new IBKnobControl( parameterProperties[i].x, parameterProperties[i].y, knobBitMap, parameterProperties[i].ID);

pGraphics->AttachControl(control);
I can't handle this...

Also, where should i initialize "control"?

Confused...

Also, i'm using GIMP to find coordinates.

Import your background.png to GIMP as a new layer. Then, import your knob.png as a new layer. Move your knob to where it should be and move your mouse pointer to knob's left top corner. Then you will see coordinates under GIMP's main window.

EDIT

Found the way!

Code:
pGraphics->AttachControl(new IBKnobControl( 100, 100, bitmap1, kGain));


Yes I forget to write the control definition " IControl* control;" . As you mentioned , you can shortcut this, by using "new IBKnobControl" directly in the parameter of AttachedControl(..) function. "control" is temporary variable , it is not to necessary to use it.
Tugrul is offline   Reply With Quote
Old 01-18-2020, 03:09 AM   #6
Tunca
Human being with feelings
 
Join Date: Apr 2016
Posts: 240
Default

Quote:
Originally Posted by Tugrul View Post
Yes I forget to write the control definition " IControl* control;" . As you mentioned , you can shortcut this, by using "new IBKnobControl" directly in the parameter of AttachedControl(..) function. "control" is temporary variable , it is not to necessary to use it.
Thanks.

I'm able to add all GUI files but i have strange problem!

For example, i have 5 knob files. I can add 4 knobs but can't add last one! I can compile but it crashing DAW. So strange!

I changed its name but no luck. I can't add OUT.png with OUT_FN name.

Even, i copied one of .png files and renamed it OUT.png and worked! But i can't add original .png with OUT name.

My file is not broken. But, it's 3MB! Is this issue?

Also, possible to use jpg files as GUI image to reduce size with IPlug2, right?
Tunca is offline   Reply With Quote
Old 01-18-2020, 04:35 AM   #7
olilarkin
Human being with feelings
 
Join Date: Apr 2009
Location: UK
Posts: 1,194
Default

iPlug2 supports JPGs, but you should also think about using SVGs (vector graphics).

Maybe one day i will find time to do a tutorial about making a GUI in iPlug2
__________________
VirtualCZ | pMix | Endless Series | iPlug2 | Linkedin | Facebook
Available for Audio Dev tuition via Skype (IPlug/JUCE/C++)
olilarkin is offline   Reply With Quote
Old 01-18-2020, 05:18 AM   #8
Tugrul
Human being with feelings
 
Join Date: Nov 2016
Posts: 18
Default

Quote:
Originally Posted by olilarkin View Post
iPlug2 supports JPGs, but you should also think about using SVGs (vector graphics).

Maybe one day i will find time to do a tutorial about making a GUI in iPlug2
Hi Oli Larkin,

I watched in youtube IPLUG2 presentation and you insist on SVG. You are right, for multiplatform
as web, iOS etc.. it is more appropriate to use SVG. But it is for a little bit difficult to design good looking gui. by using SVG :-) I have to work on it.
Thanks
Tuğrul
Tugrul is offline   Reply With Quote
Old 01-18-2020, 06:18 AM   #9
Tunca
Human being with feelings
 
Join Date: Apr 2016
Posts: 240
Default

I found something is really annoying in IPlug2.

Using image is not possible if height is larger than 16000 pixel.

But my fader's height is 20008 pixel.

Is this bug?

Or possible to extend this range?
Tunca is offline   Reply With Quote
Old 01-18-2020, 08:25 AM   #10
Tugrul
Human being with feelings
 
Join Date: Nov 2016
Posts: 18
Default

Quote:
Originally Posted by Tunca View Post
I found something is really annoying in IPlug2.

Using image is not possible if height is larger than 16000 pixel.

But my fader's height is 20008 pixel.

Is this bug?

Or possible to extend this range?
Yes I tried your case, it seems that you are right.
but 20008 is very a big number for a gui. but of course I am talking about a general gui design. you may be doing something special.

Tuğrul
Tugrul is offline   Reply With Quote
Old 01-18-2020, 08:51 AM   #11
Tunca
Human being with feelings
 
Join Date: Apr 2016
Posts: 240
Default

Quote:
Originally Posted by Tugrul View Post
Yes I tried your case, it seems that you are right.
but 20008 is very a big number for a gui. but of course I am talking about a general gui design. you may be doing something special.

Tuğrul
It's fader with 61 frames. It's already working with IPlug1 but no luck with IPlug2.

Now, trying to solve this issue...
Tunca is offline   Reply With Quote
Old 01-18-2020, 09:00 AM   #12
Tugrul
Human being with feelings
 
Join Date: Nov 2016
Posts: 18
Default

Quote:
Originally Posted by Tunca View Post
It's fader with 61 frames. It's already working with IPlug1 but no luck with IPlug2.

Now, trying to solve this issue...
But 20008/61 = 328 pixel is very high for a knob in the screen.
knobs is generally 30-100 pixels height in a screen

here there are some examples
https://www.g200kg.com/en/webknobman/gallery.php
Tugrul is offline   Reply With Quote
Old 01-18-2020, 10:59 AM   #13
Tunca
Human being with feelings
 
Join Date: Apr 2016
Posts: 240
Default

Quote:
Originally Posted by Tugrul View Post
But 20008/61 = 328 pixel is very high for a knob in the screen.
knobs is generally 30-100 pixels height in a screen

here there are some examples
https://www.g200kg.com/en/webknobman/gallery.php
I'm using 3D design for GUI. It's already OK with knobs but long faders causes issue with IPlug2.

As i said, no problem with IPlug1...
Tunca is offline   Reply With Quote
Old 01-19-2020, 03:04 PM   #14
olilarkin
Human being with feelings
 
Join Date: Apr 2009
Location: UK
Posts: 1,194
Default

iPlug1 uses LICE a software renderer. iPlug2 defaults to nanovg, a GPU renderer, but the preferred renderer is SKIA which can use either GPU or CPU. NanoVG via Metal and OpenGL doesn't seem to like very large/tall textures. Metal's max height/width seems to be 16384 but it may vary depending on GPU don't know about GL. Looks like Skia doesn't have an issue with your file. It also doesn't have artifacts on resizing (i think we can fix that with nanovg)

I wrote some docs about switching graphics backends:

https://github.com/iPlug2/iPlug2/wik...phics_backends
__________________
VirtualCZ | pMix | Endless Series | iPlug2 | Linkedin | Facebook
Available for Audio Dev tuition via Skype (IPlug/JUCE/C++)
olilarkin is offline   Reply With Quote
Old 01-19-2020, 03:26 PM   #15
Tunca
Human being with feelings
 
Join Date: Apr 2016
Posts: 240
Default

Quote:
Originally Posted by olilarkin View Post
iPlug1 uses LICE a software renderer. iPlug2 defaults to nanovg, a GPU renderer, but the preferred renderer is SKIA which can use either GPU or CPU. NanoVG via Metal and OpenGL doesn't seem to like very large/tall textures. Metal's max height/width seems to be 16384 but it may vary depending on GPU don't know about GL. Looks like Skia doesn't have an issue with your file. It also doesn't have artifacts on resizing (i think we can fix that with nanovg)

I wrote some docs about switching graphics backends:

https://github.com/iPlug2/iPlug2/wik...phics_backends
Thanks for info.

At the moment, i'm OK with nanovg. I can use your method.

But, resizing is not OK. No matter Lice, NanoVG or Skia. There is always leak from next frame when i use strips. Tried everything but no luck. Going deeper...

EDIT:

Also, i see that Skia is recommended but when i try it, plugin working really laggy and slow. Resize is laggy, too.

https://github.com/iPlug2/iPlug2/wik...end-comparison

Nanovg working smoother and faster...

Last edited by Tunca; 01-19-2020 at 03:35 PM.
Tunca is offline   Reply With Quote
Old 01-21-2020, 03:12 AM   #16
olilarkin
Human being with feelings
 
Join Date: Apr 2009
Location: UK
Posts: 1,194
Default

Quote:
Originally Posted by Tunca View Post

https://github.com/iPlug2/iPlug2/wik...end-comparison

Nanovg working smoother and faster...
Can you share a build of your plugin privately (can chat via slack). I also found NanoVG to be faster for a plugin with lots of bitmaps... but i expect we can improve how it works with skia
__________________
VirtualCZ | pMix | Endless Series | iPlug2 | Linkedin | Facebook
Available for Audio Dev tuition via Skype (IPlug/JUCE/C++)
olilarkin is offline   Reply With Quote
Reply

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT -7. The time now is 07:38 AM.


Powered by vBulletin® Version 3.8.11
Copyright ©2000 - 2020, vBulletin Solutions Inc.