Suggestions for smoother GUI layout.
-
I have done a few gui's and I have a few suggestions to make things easier.
Some of these things might be possible and I have just not found a way.- Images should have the option of letting mouseclicks through like the label does. This opens up a lot of layout options. Once you start layering this can quickly become a problem.I think this is pretty essential and could just be an option" allow mousethrough"
Example 1 : If you make a button , then use them in a radio configuration, its simpler to just render one button and make text or icon (in Photoshop)separately to put on top of each button. Right now this will get in the way of a mouse click.
The alternative is to have to render 3 buttons with the icon or text on top and then you might want to change the text and you have to do it all over again.Example 2. Sometimes its better to render a slider or a moving image that is shown behind a transparent portion of the Background image , so the Bkg acts as a mask. If an image allowed mouse through you could essentially place a slider or whatever behind the the background image (Shown through transparency) and still be able to move it.
- Not as essential but a use case nonetheless.
Say you want to make a vertical slider, sometimes its much better to just make an image of the knob&slider cap itself and be able to move that along a "path" or a height parameter. This negates the need to render a slider and a track, this saves on imagestrips and the track image sits on the background.Also opens up using vectors and pngs in the same item. Maybe this could be programmed though ?
3.Import images "As is" ...no resizing ,its possible i am doing something wrong but I find myself having to resize and place images as I gather them into the gui rather then counting on just opening the image and its in the correct size.
Maybe an option "As is"I just spent the day making GUI and this is what I encountered, issue #1 is essential in my opinion ,probably #3 as well but I might be overlooking a way to do that ? I might add or remove from these suggestions as I get more familiar with Hise. :)
-
1: Use a film strip for the button, no need to layer anything.
2: You could use a mouse callback over a transparent panel for this. This can also be used for #1 too.
3: Set the width/height of the image control in the property editor.
-
- I am using filmstrips. I want to be able to place an image of text or an icon on top of my filmstrip button but without rendering it on the button , if i place an image on top of my filmstrip a mouseclick will not go through.
But your suggestion is just place my filmstrip knob , then my text image on top and then have panel on top that has a mousecallback that controls the button , right ?
- When I set width and height it , that means i always have to check the size of the imported image, just simpler to not stretch it , when do you want to stretch it ? Also I have been having a werid resizing problem so maybe that plays into my frustration with that ?
-
The reason why it's like that is that this way retina images will handled automatically - just add the image with its half native resolution as position and it will be displayed with twice the resolution on retina displays.
IIRC if you set the
enabledproperty to false, it will not handle mouse clicks. -
@Christoph-Hart said in Suggestions for smoother GUI layout.:
IIRC if you set the enabled property to false, it will not handle mouse clicks.
Awesome ! Thanks
-
@Christoph-Hart said in Suggestions for smoother GUI layout.:
IIRC if you set the
enabledproperty to false, it will not handle mouse clicks.Controls that are disabled are greyed out.
-
In my case I am using an image , and with that disabled allows mouseclicks going trough.:)
