## IceDesign (New) modern GUI designer

Applications, Games, Tools, User libs and useful stuff coded in PureBasic
ChrisR
Enthusiast
Posts: 409
Joined: Sun Jan 08, 2017 10:27 pm
Location: France

### Re: IceDesign (New) modern GUI designer

Hi Caronte3D!
Caronte3D wrote: Sun Sep 19, 2021 6:34 pm Proportional doesn't work with containers, (I mean gadgets inside) to solve it, you can use the initial position of the container instead of the window it self.
It seems that I haven't tested enough this new feature!
I modified so that the gadgets are based on the initial position of its parent, window or container, now.
Before I update, can you test with the demo version
And tell me if it looks good to you.
Caronte3D wrote: Sun Sep 19, 2021 6:34 pm Another feature request is to limit the size of the window when the user scale it, something like on this forum thread:
viewtopic.php?f=13&t=21869
Hmm, I don't intend to set up a callback procedure.
It could possibly be implemented via WindowBounds but I don't have the fields available to do so currently.
Caronte3D
Enthusiast
Posts: 227
Joined: Fri Jan 22, 2016 5:33 pm
Location: Spain

### Re: IceDesign (New) modern GUI designer

Works correct now, except the Panel container, I think it's because the Tab selector (at top) not must be part of the size used.

EDIT:
The PB "WindowBounds" works like a charm with only a line of code, you only need to implemente the UI on the IceDesign to set it
ChrisR
Enthusiast
Posts: 409
Joined: Sun Jan 08, 2017 10:27 pm
Location: France

### Re: IceDesign (New) modern GUI designer

Yes, to work properly, the size of the tabs must be resized as well
I tried with SendMessage TCM_GETITEMRECT to get the initial width/height of a tab and then, resize it portionally with TCM_SETITEMSIZE.
I'm not really fan of including windows APIs in the generated code, but here, for this case, it seems not too bad.
if you can try

Code: Select all

EnableExplicit

;- Enumerations
Enumeration Window
#MainWindow
EndEnumeration

#Panel_1
#Btn_Button_4
#Btn_Button_5
#Btn_Button_6
#Btn_Button_1
#Btn_Button_2
#Btn_Button_3
EndEnumeration

;- Declare
Declare PropFactorX(X = 0)
Declare PropFactorY(Y = 0)
Declare Resize_MainWindow()
Declare Open_MainWindow(X = 0, Y = 0, Width = 360, Height = 270)

Global WinWidthIni, WinHeightIni
Global Panel_1_WidthIni, Panel_1_HeightIni, Panel_1_TabHeight, Panel_1_TabWidth

Procedure PropFactorX(X = 0)
ProcedureReturn Round(WindowWidth(#MainWindow) * X / WinWidthIni, #PB_Round_Nearest)
EndProcedure

Procedure PropFactorY(Y = 0)
ProcedureReturn Round(WindowHeight(#MainWindow) * Y / WinHeightIni, #PB_Round_Nearest)
EndProcedure

Procedure Resize_MainWindow()
ResizeGadget(#Panel_1, PropFactorX(170), PropFactorY(10), PropFactorX(WinWidthIni - 180), PropFactorY(WinHeightIni - 20))
; Specific for panels and proportional resizing, the tabs must also be resized proportionally and as a result the internal area also
CompilerIf #PB_Compiler_OS = #PB_OS_Windows
SendMessage_( GadgetID(#Panel_1), #TCM_SETITEMSIZE, 0, (PropFactorY(Panel_1_TabHeight)<<16) | PropFactorX(Panel_1_TabWidth))
CompilerEndIf
ResizeGadget(#Btn_Button_4, PropFactorX(10), PropFactorY(10), PropFactorX(Panel_1_WidthIni - 30), PropFactorY(Panel_1_HeightIni - 200))
ResizeGadget(#Btn_Button_5, PropFactorX(10), PropFactorY(90), PropFactorX(Panel_1_WidthIni - 30), PropFactorY(Panel_1_HeightIni - 200))
ResizeGadget(#Btn_Button_6, PropFactorX(10), PropFactorY(160), PropFactorX(Panel_1_WidthIni - 30), PropFactorY(Panel_1_HeightIni - 200))
ResizeGadget(#Btn_Button_1, PropFactorX(10), PropFactorY(20), PropFactorX(WinWidthIni - 210), PropFactorY(WinHeightIni - 220))
ResizeGadget(#Btn_Button_2, PropFactorX(10), PropFactorY(100), PropFactorX(WinWidthIni - 210), PropFactorY(WinHeightIni - 220))
ResizeGadget(#Btn_Button_3, PropFactorX(10), PropFactorY(180), PropFactorX(WinWidthIni - 210), PropFactorY(WinHeightIni - 220))
EndProcedure

Procedure Open_MainWindow(X = 0, Y = 0, Width = 360, Height = 270)
ButtonGadget(#Btn_Button_4, 10, 10, 150, 50, "Button_4")
ButtonGadget(#Btn_Button_5, 10, 90, 150, 50, "Button_5")
ButtonGadget(#Btn_Button_6, 10, 160, 150, 50, "Button_6")
ButtonGadget(#Btn_Button_1, 10, 20, 150, 50, "Button_1")
ButtonGadget(#Btn_Button_2, 10, 100, 150, 50, "Button_2")
ButtonGadget(#Btn_Button_3, 10, 180, 150, 50, "Button_3")

WinWidthIni = WindowWidth(#MainWindow) : WinHeightIni = WindowHeight(#MainWindow)
; Specific for panels and proportional resizing, the tabs must also be resized proportionally and as a result the internal area also
CompilerIf #PB_Compiler_OS = #PB_OS_Windows
Define r.rect
Panel_1_TabHeight = r\bottom - r\top : Panel_1_TabWidth = r\right - r\left
CompilerEndIf

BindEvent(#PB_Event_SizeWindow, @Resize_MainWindow(), #MainWindow)
EndIf
EndProcedure

;- Main Program
Open_MainWindow()

Repeat : Until WaitWindowEvent() = #PB_Event_CloseWindow

Caronte3D
Enthusiast
Posts: 227
Joined: Fri Jan 22, 2016 5:33 pm
Location: Spain

### Re: IceDesign (New) modern GUI designer

Works better, but still not perfect at smallest sizes.
Maybe let the tabs unscaled (so you don't need winApi) and using the client area of the Panel instead of the whole size to scale the gadgets works better?
Thanks
ChrisR
Enthusiast
Posts: 409
Joined: Sun Jan 08, 2017 10:27 pm
Location: France

### Re: IceDesign (New) modern GUI designer

IceDesign has been updated in version 1.3.2

Still, New Options (in the red boxes) to Personalize the created code to your Liking :

Add minimum and maximum window sizes in the properties to be used with WindowBounds. To note that 0 = #PB_Ignore
WindowBounds: Changes the minimal and maximal #Window dimensions (in pixels). This is useful to prevent a window from becoming too small or too big when the user resizes it.

Bind All Gadgets Events. Create the Event Procedures for All Gadgets, including menu, resize and close Window events for a complete event-handling.

Proportional Size for All Gadgets. To resize All the controls according to the size of the Window and Containers.
For the Panel, due to the tabs, it is based on its internal size, it works but it is not really perfect.

Bind Event in an IncludeFile. Split the generated code in 2 source files .
One with the Main code and the Window Form and the other with All the Event Procedures (ex: MyForm.pb , MyForm_Event.pb), like a certain event designer
To be applied according to your tastes,your project and the desired organization.

Use AppQuit Variable to Exit the Event-Loop.
So 2 choices in the event-loop, "Repeat : Break : ForEver" or "Repeat : AppQuit = #True : Until AppQuit" ex:

Code: Select all

Repeat
Select WaitWindowEvent()
Case #PB_Event_CloseWindow
Break

EndSelect
EndSelect
ForEver
Or

Code: Select all

Repeat
Select WaitWindowEvent()
Case #PB_Event_CloseWindow
AppQuit = #True

EndSelect
EndSelect
Until AppQuit

To note that IceDesign works only under Windows but the generated code is 100% compatible with Linux or MacOS, ready to be recompiled.
Except a few Windows control styles that should not be selected to be cross-platform.
They are well marked in the constants list for this, they are at the bottom and they start with a # (ex: #BS_Bottom, #BS_Top)

And, as a reminder:
On high-DPI screens, if your toolbar is too blurry, you can Run "IceDesign.exe DPI" to create a new exe: IceDesign_DPI.exe, without the Windows auto scaling.

Feel free to use the demo version to create your basic windows form, less than 16 Gadgets.
Or test and evaluate it...
Enjoy
Last edited by ChrisR on Fri Sep 24, 2021 1:45 pm, edited 1 time in total.
Enthusiast
Posts: 138
Joined: Tue Feb 14, 2017 12:07 pm

### Re: IceDesign (New) modern GUI designer

Hello, ideas:

Be able to cut a container !
When I copy a container, I want all the container to be copied, gadget included !
Esc key close a container, and / or maybe when I double click on a gadget or the window ?

anchoring, it must be in relation to its parent, the window if the gadget is on the window, or on the gadget (container) if it is above!
I am French, I do not speak English.
My apologies for the mistakes.
ChrisR
Enthusiast
Posts: 409
Joined: Sun Jan 08, 2017 10:27 pm
Location: France

### Re: IceDesign (New) modern GUI designer

ShadowStorm wrote: Fri Sep 24, 2021 12:51 pm Be able to cut a container !
When I copy a container, I want all the container to be copied, gadget included !
It is intended to cut, copy a container with all its childish gadgets, I just haven't found the time to do it yet. I have only 10 fingers
However, I have already added a lot of functionality since v1, I believe

ShadowStorm wrote: Fri Sep 24, 2021 12:51 pm Esc key close a container, and / or maybe when I double click on a gadget or the window ?
It is already possible to close a container from a child gadget by using a double right click.
Otherwise, just a reminder, there are currently 3 possibilities to open or close a container:
• Double Left click to open a container and Double Right click to close a container
• The 2 buttons in the toolbar : "Open Container", "Close Container"
• Double Left click and Double Right click are also available from the "List Controls" tree
But yes, I note it, why not the Esc key to close a container

ShadowStorm wrote: Fri Sep 24, 2021 12:51 pm anchoring, it must be in relation to its parent, the window if the gadget is on the window, or on the gadget (container) if it is above!
Isn't it already like that ?
Enthusiast
Posts: 138
Joined: Tue Feb 14, 2017 12:07 pm

### Re: IceDesign (New) modern GUI designer

No, for the parent it's not that!

Create a container, put a button, put proportional and test ^^
When you resize the window, the button changes size, while the container does not ^^
I am French, I do not speak English.
My apologies for the mistakes.
ChrisR
Enthusiast
Posts: 409
Joined: Sun Jan 08, 2017 10:27 pm
Location: France

### Re: IceDesign (New) modern GUI designer

hmm, I see what you mean
The resizing is done on the window so the proportional factor must be based on it.
But, it doesn't make sense to put the proportional resizing on a gadget and not on its parent container.
For me, it's a user design issue.

However, possibly, I can remove the proportional resize flags from all childrens of a container if it does not have this flag, at the code creation time.
But it makes a hierarchical loop in addition and there will be questions like, why my button is not resized, the proportional flag is On...
Cheers
Enthusiast
Posts: 138
Joined: Tue Feb 14, 2017 12:07 pm

### Re: IceDesign (New) modern GUI designer

Hello,

Here is how to do it dear friend, you look at who owns the gadget.

If I have for example a container, with a gadget in it, if my gadget has the proportional resize (not the container, the gadget in it), then it is proportional to the parent of it, here the parent is the container!

Good luck with the hierarchies, it's not easy!
I am French, I do not speak English.
My apologies for the mistakes.
ChrisR
Enthusiast
Posts: 409
Joined: Sun Jan 08, 2017 10:27 pm
Location: France

### Re: IceDesign (New) modern GUI designer

It would not make sense to create a procédure to calculate the proportional factor based on a container, if it does not have that flag.
The proportional factor would be always 1 and it would multiply the number of procedures for nothing.
The best is to consider it as a user design issue or to set the flag to Off if the porportional flag of its parent container is Off

ps: no worries with the hierarchical loop, as you can guess, there are already several in the project.
A+
Enthusiast
Posts: 138
Joined: Tue Feb 14, 2017 12:07 pm

### Re: IceDesign (New) modern GUI designer

If the container does not resize with the window, then yes..., I think you are right...

Your program is cool, I'm impressed!
Thanks for your very quick answers, I wish you good luck and I follow the project with attention
I am French, I do not speak English.
My apologies for the mistakes.
ChrisR
Enthusiast
Posts: 409
Joined: Sun Jan 08, 2017 10:27 pm
Location: France

### Re: IceDesign (New) modern GUI designer

ChrisR
Enthusiast
Posts: 409
Joined: Sun Jan 08, 2017 10:27 pm
Location: France

### Re: IceDesign (New) modern GUI designer

ShadowStorm wrote: Fri Sep 24, 2021 12:51 pm Esc key close a container...
It's done and uploaded on server.
It can be useful but as it is only a small addition, I have not updated the version number 1.3.2
zikitrake
Enthusiast
Posts: 758
Joined: Thu Mar 25, 2004 2:15 pm
Location: Spain
Contact:

### Re: IceDesign (New) modern GUI designer

I'm really impressed with the look of your project
Two questions I have:

1º Can you work with multiple forms from a single project (like some 3rd party software does)?
2º Are you planning to add multilanguage?

If they are answered, I'm sorry, but I couldn't find it.