IceDesign GUI designer

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

Re: IceDesign (New) modern GUI designer

Post by ChrisR »

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.
User avatar
Caronte3D
Addict
Addict
Posts: 1027
Joined: Fri Jan 22, 2016 5:33 pm
Location: Some Universe

Re: IceDesign (New) modern GUI designer

Post by Caronte3D »

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 :D
User avatar
ChrisR
Addict
Addict
Posts: 1127
Joined: Sun Jan 08, 2017 10:27 pm
Location: France

Re: IceDesign (New) modern GUI designer

Post by ChrisR »

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

Enumeration Gadgets
  #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)
  If OpenWindow(#MainWindow, X, Y, Width, Height, "Test Porportional Resize", #PB_Window_SystemMenu | #PB_Window_MinimizeGadget | #PB_Window_MaximizeGadget | #PB_Window_SizeGadget | #PB_Window_ScreenCentered)
    PanelGadget(#Panel_1, 170, 10, 180, 250)
      AddGadgetItem(#Panel_1, -1, "Tab_0")
      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")
      AddGadgetItem(#Panel_1, -1, "Tab_1")
    CloseGadgetList()   ; #Panel_1
    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)
    Panel_1_WidthIni = GadgetWidth(#Panel_1) : Panel_1_HeightIni = GadgetHeight(#Panel_1)
    ; 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
      SendMessage_(GadgetID(#Panel_1), #TCM_GETITEMRECT, 0, @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
User avatar
Caronte3D
Addict
Addict
Posts: 1027
Joined: Fri Jan 22, 2016 5:33 pm
Location: Some Universe

Re: IceDesign (New) modern GUI designer

Post by Caronte3D »

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 :wink:
User avatar
ChrisR
Addict
Addict
Posts: 1127
Joined: Sun Jan 08, 2017 10:27 pm
Location: France

Re: IceDesign (New) modern GUI designer

Post by ChrisR »

IceDesign has been updated in version 1.3.2

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

Image


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 :wink:
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

    Case #PB_Event_Gadget
      Select EventGadget()
      EndSelect
  EndSelect
ForEver
Or

Code: Select all

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

    Case #PB_Event_Gadget
      Select EventGadget()
      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.
ShadowStorm
Enthusiast
Enthusiast
Posts: 237
Joined: Tue Feb 14, 2017 12:07 pm

Re: IceDesign (New) modern GUI designer

Post by ShadowStorm »

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.

I have sometimes problems of expression
I am sometimes quite clumsy, please excuse me and let me know.
User avatar
ChrisR
Addict
Addict
Posts: 1127
Joined: Sun Jan 08, 2017 10:27 pm
Location: France

Re: IceDesign (New) modern GUI designer

Post by ChrisR »

Bonjour ShadowStorm,
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 :wink:

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 ?
ShadowStorm
Enthusiast
Enthusiast
Posts: 237
Joined: Tue Feb 14, 2017 12:07 pm

Re: IceDesign (New) modern GUI designer

Post by ShadowStorm »

Thank you for the answers.
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.

I have sometimes problems of expression
I am sometimes quite clumsy, please excuse me and let me know.
User avatar
ChrisR
Addict
Addict
Posts: 1127
Joined: Sun Jan 08, 2017 10:27 pm
Location: France

Re: IceDesign (New) modern GUI designer

Post by ChrisR »

Hi Shadow,
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
ShadowStorm
Enthusiast
Enthusiast
Posts: 237
Joined: Tue Feb 14, 2017 12:07 pm

Re: IceDesign (New) modern GUI designer

Post by ShadowStorm »

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.

I have sometimes problems of expression
I am sometimes quite clumsy, please excuse me and let me know.
User avatar
ChrisR
Addict
Addict
Posts: 1127
Joined: Sun Jan 08, 2017 10:27 pm
Location: France

Re: IceDesign (New) modern GUI designer

Post by ChrisR »

@Shadow, as said, I know what you mean and I've already thought about it.
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+
ShadowStorm
Enthusiast
Enthusiast
Posts: 237
Joined: Tue Feb 14, 2017 12:07 pm

Re: IceDesign (New) modern GUI designer

Post by ShadowStorm »

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.

I have sometimes problems of expression
I am sometimes quite clumsy, please excuse me and let me know.
User avatar
ChrisR
Addict
Addict
Posts: 1127
Joined: Sun Jan 08, 2017 10:27 pm
Location: France

Re: IceDesign (New) modern GUI designer

Post by ChrisR »

Thanks Shadow, you're welcome
:)
User avatar
ChrisR
Addict
Addict
Posts: 1127
Joined: Sun Jan 08, 2017 10:27 pm
Location: France

Re: IceDesign (New) modern GUI designer

Post by ChrisR »

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
Addict
Addict
Posts: 834
Joined: Thu Mar 25, 2004 2:15 pm
Location: Spain

Re: IceDesign (New) modern GUI designer

Post by zikitrake »

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.

Thank you for your work
Post Reply