IceDesign GUI designer

[ChrisR]

My answer didn't make it clear with my poor english but yes, no worries, that's how I understood it

[williamvanhoecke]

Hi ChrisR
I ran into another problem.
I gues that the code

Code: Select all

PostEvent(#PB_Event_SizeWindow, #WinTest, 0)

at the end of opening a window is to fire a resize event so that the static variables WinTest_WidthIni and WinTest_HeightIni to original window values.

I don't know exactly what happens, I gues the Resize event fires to late or something.
For some reason later resizes do not resize all gadgets correctly
My Test below demonstrates the problem

link to the image: https://www.listrik.be/TEMP/desktop.png

Code: Select all

EnableExplicit

;- Enumerations
Enumeration Window
  #WinTest
EndEnumeration

Enumeration Gadgets
  #WinTest_Img_1
  #WinTest_Cont_1
  #WinTest_Btn_scherm_1
  #WinTest_Btn_scherm_2
  #WinTest_Btn_Licentie_kopen
  #WinTest_Btn_Listrik_niet_starten
EndEnumeration

Enumeration Image
  #WinTest_Imag_0
EndEnumeration

Enumeration Font
  #WinTest_Font_0
EndEnumeration

CompilerIf #PB_Compiler_IsMainFile
  Structure GadgetImages
    Image.i
    PressedImage.i
    Width.i
    Height.i
  EndStructure
CompilerEndIf

;- Load Images
UsePNGImageDecoder()

CatchImage(#WinTest_Imag_0, ?WinTest_Imag_0)

;- Load Fonts
LoadFont(#WinTest_Font_0, "", 12, #PB_Font_Bold)

;- Declare
Declare Event_WinTest_Btn_scherm_1()
Declare Event_WinTest_Btn_scherm_2()
Declare Event_WinTest_Btn_Licentie_kopen()
Declare Event_WinTest_Btn_Listrik_niet_starten()
CompilerIf #PB_Compiler_IsMainFile : Declare ResizeGadgetImage(Gadget, OriginalImage, OriginalPressedImage = #PB_Ignore) : CompilerEndIf
Declare Resize_WinTest()
Declare Open_WinTest(X = 0, Y = 0, Width = 900, Height = 820)

CompilerIf #PB_Compiler_IsMainFile : XIncludeFile "WinTest_Lang.pb" : CompilerEndIf

Procedure Event_WinTest_Btn_scherm_1()
  Select EventType()
    Case #PB_EventType_LeftClick
  EndSelect
EndProcedure

Procedure Event_WinTest_Btn_scherm_2()
  Select EventType()
    Case #PB_EventType_LeftClick
  EndSelect
EndProcedure

Procedure Event_WinTest_Btn_Licentie_kopen()
  Select EventType()
    Case #PB_EventType_LeftClick
  EndSelect
EndProcedure

Procedure Event_WinTest_Btn_Listrik_niet_starten()
  Select EventType()
    Case #PB_EventType_LeftClick
  EndSelect
EndProcedure

CompilerIf #PB_Compiler_IsMainFile
  Procedure ResizeGadgetImage(Gadget, OriginalImage, OriginalPressedImage = #PB_Ignore)
    Protected Image, Width, Height
    Static NewMap GadgetImage.GadgetImages()

    If IsGadget(Gadget) And IsImage(OriginalImage)
      Width = DesktopScaledX(GadgetWidth(Gadget)) : Height = DesktopScaledY(GadgetHeight(Gadget))
      If Width > 0 And Height > 0
        If GadgetImage(Str(Gadget))\Width <> Width Or GadgetImage(Str(Gadget))\Height <> Height
          GadgetImage()\Width  =  Width :  GadgetImage()\Height =  Height

          Image = CopyImage(OriginalImage, #PB_Any)
          If Image
            ResizeImage(Image, Width, Height)
            Select GadgetType(Gadget)
              Case #PB_GadgetType_ButtonImage
                SetGadgetAttribute(Gadget, #PB_Button_Image, ImageID(Image))
              Case #PB_GadgetType_Image
                SetGadgetState(Gadget, ImageID(Image))
            EndSelect
            If GadgetImage()\Image And IsImage(GadgetImage()\Image)
              FreeImage(GadgetImage()\Image)
            EndIf
            GadgetImage()\Image = Image
          EndIf

          If GadgetType(Gadget) = #PB_GadgetType_ButtonImage And IsImage(OriginalPressedImage)
            Image = CopyImage(OriginalPressedImage, #PB_Any)
            If Image
              ResizeImage(Image, Width, Height)
              SetGadgetAttribute(Gadget, #PB_Button_PressedImage, ImageID(Image))
              If GadgetImage()\PressedImage And IsImage(GadgetImage()\PressedImage)
                FreeImage(GadgetImage()\PressedImage)
              EndIf
              GadgetImage()\PressedImage = Image
            EndIf
          EndIf

        EndIf    ; If GadgetImage(Str(Gadget))\Width <> Width Or GadgetImage(Str(Gadget))\Height <> Height
      EndIf      ; If Width > 0 And Height > 0
    EndIf        ; If IsGadget(Gadget) And IsImage(OriginalImage)
  EndProcedure
CompilerEndIf

Procedure Resize_WinTest()
  Protected ScaleX.f, ScaleY.f
  Static WinTest_WidthIni, WinTest_HeightIni
  If WinTest_WidthIni = 0
    WinTest_WidthIni = WindowWidth(#WinTest) : WinTest_HeightIni = WindowHeight(#WinTest)
  EndIf

  ScaleX = WindowWidth(#WinTest) / WinTest_WidthIni : ScaleY = WindowHeight(#WinTest) / WinTest_HeightIni
  ResizeGadget(#WinTest_Img_1, ScaleX * 70, ScaleY * 10, ScaleX * 750, ScaleY * 140)
  ResizeGadgetImage(#WinTest_Img_1, #WinTest_Imag_0)
  ResizeGadget(#WinTest_Cont_1, ScaleX * 20, ScaleY * 170, ScaleX * 3, ScaleY * 380)
  ResizeGadget(#WinTest_Btn_scherm_1, ScaleX * 10, ScaleY * 720, ScaleX * 430, ScaleY * 40)
  ResizeGadget(#WinTest_Btn_scherm_2, ScaleX * 460, ScaleY * 720, ScaleX * 430, ScaleY * 40)
  ResizeGadget(#WinTest_Btn_Licentie_kopen, ScaleX * 10, ScaleY * 770, ScaleX * 430, ScaleY * 40)
  ResizeGadget(#WinTest_Btn_Listrik_niet_starten, ScaleX * 460, ScaleY * 770, ScaleX * 430, ScaleY * 40)
EndProcedure

Procedure Open_WinTest(X = 0, Y = 0, Width = 900, Height = 820)
  If OpenWindow(#WinTest, X, Y, Width, Height, "", #PB_Window_BorderLess | #PB_Window_ScreenCentered)
      SetWindowColor(#WinTest, RGB(0, 64, 128))
    ImageGadget(#WinTest_Img_1, 70, 10, 750, 140, ImageID(#WinTest_Imag_0))
    ContainerGadget(#WinTest_Cont_1, 20, 170, 3, 380, #PB_Container_BorderLess)
      SetGadgetColor(#WinTest_Cont_1, #PB_Gadget_BackColor, RGB(0, 0, 255))
    CloseGadgetList()   ; #WinTest_Cont_1
    ButtonGadget(#WinTest_Btn_scherm_1, 10, 720, 430, 40, GetInterfaceLang("WinTest_Btn_scherm_1"), #PB_Button_MultiLine)
      SetGadgetFont(#WinTest_Btn_scherm_1, FontID(#WinTest_Font_0))
    ButtonGadget(#WinTest_Btn_scherm_2, 460, 720, 430, 40, GetInterfaceLang("WinTest_Btn_scherm_2"))
      SetGadgetFont(#WinTest_Btn_scherm_2, FontID(#WinTest_Font_0))
    ButtonGadget(#WinTest_Btn_Licentie_kopen, 10, 770, 430, 40, GetInterfaceLang("WinTest_Btn_Licentie_kopen"))
      SetGadgetFont(#WinTest_Btn_Licentie_kopen, FontID(#WinTest_Font_0))
      DisableGadget(#WinTest_Btn_Licentie_kopen, #True)
    ButtonGadget(#WinTest_Btn_Listrik_niet_starten, 460, 770, 430, 40, GetInterfaceLang("WinTest_Btn_Listrik_niet_starten"))
      SetGadgetFont(#WinTest_Btn_Listrik_niet_starten, FontID(#WinTest_Font_0))

    BindGadgetEvent(#WinTest_Btn_scherm_1, @Event_WinTest_Btn_scherm_1())
    BindGadgetEvent(#WinTest_Btn_scherm_2, @Event_WinTest_Btn_scherm_2())
    BindGadgetEvent(#WinTest_Btn_Licentie_kopen, @Event_WinTest_Btn_Licentie_kopen())
    BindGadgetEvent(#WinTest_Btn_Listrik_niet_starten, @Event_WinTest_Btn_Listrik_niet_starten())
    BindEvent(#PB_Event_SizeWindow, @Resize_WinTest(), #WinTest)
    PostEvent(#PB_Event_SizeWindow, #WinTest, 0)
  EndIf
EndProcedure

CompilerIf #PB_Compiler_IsMainFile
ExamineDesktops()  
Open_WinTest()

Debug DesktopUnscaledX((DesktopWidth(0)-760)/2)
Debug DesktopUnscaledY((DesktopHeight(0)-640)/2)
Debug DesktopUnscaledX(760)
Debug DesktopUnscaledY(640)

;if dpi > 100% this window may be larger than the desktop so resize it according to dpi settings
;ResizeWindow(#WinTest,DesktopUnscaledX((DesktopWidth(0)-760)/2),DesktopUnscaledY((DesktopHeight(0)-640)/2),DesktopUnscaledX(760),DesktopUnscaledY(640))
Repeat : Until WaitWindowEvent() = #PB_Event_CloseWindow
CompilerEndIf

;- DataSection
DataSection
  WinTest_Imag_0: : IncludeBinary "C:\Users\willi\Mijn Drive\BAS_PUREBASIC\LISTRIK2\BUTTONS\desktop.png"
EndDataSection

[ChrisR]

Hi william,

Yes, PostEvent(#PB_Event_SizeWindow, #WinTest, 0) is used to initialize WinTest_WidthIni and WinTest_HeightIni static variables

But, with your example and a window larger than the desktop, I've just realized that the initialization isn't right (see below).
Also worth knowing that a borderless window are not automatically resized by windows, while other window styles are auto resized.

So in your case with a borderless windows, the buttons are there, but not visible because they are below the taskbar.
Ex here, with a screen resolution of 1980*1080 and 150% scaling, the working area Size is 1280*680
and with your borderless windows example, the buttons are there in Y position 720 and 750, but not visible because they are below the taskbar.

You'll have to resize the windows, with, after Open_WinTest():

Code: Select all

; Size of work area without taskbar
Define DesktopRect.RECT
SystemParametersInfo_(#SPI_GETWORKAREA, 0, @DesktopRect.RECT, 0)
If DesktopUnscaledX(DesktopRect\right - DesktopRect\left) < 900
  ResizeWindow(#WinTest, #PB_Ignore, #PB_Ignore, DesktopUnscaledX(DesktopRect\right - DesktopRect\left), #PB_Ignore)
EndIf
If DesktopUnscaledY(DesktopRect\bottom - DesktopRect\top) < 820
  ResizeWindow(#WinTest, #PB_Ignore, #PB_Ignore, #PB_Ignore, DesktopUnscaledY(DesktopRect\bottom - DesktopRect\top))
EndIf

Or

Code: Select all

; Desktop size, including taskbar
If DesktopUnscaledX(DesktopWidth(0)) < 900
  ResizeWindow(#WinTest, #PB_Ignore, #PB_Ignore, DesktopUnscaledX(DesktopWidth(0)), #PB_Ignore)
EndIf
If DesktopUnscaledY(DesktopHeight(0)) < 820
  ResizeWindow(#WinTest, #PB_Ignore, #PB_Ignore, #PB_Ignore, DesktopUnscaledY(DesktopHeight(0)))
EndIf

Also, the initialization I do with PostEvent and WindowWidth, WindowHeight is wrong, if windows are auto resized, or as above for borderless windows.
WinTest_WidthIni and WinTest_HeightIni are initialized to the size of the resized window, while the Gadgets retain their initial position (hard-coded).
(Here, 900*680 for the window size, while the buttons retain their initial Y positions of 720 and 750, that's wrong)

To work properly for window larger than the desktop, the window size must be hard initialized like for gadgets.
In Procedure Resize_WinTest() replaces:

Code: Select all

Static WinTest_WidthIni, WinTest_HeightIni
If WinTest_WidthIni = 0
  WinTest_WidthIni = WindowWidth(#WinTest) : WinTest_HeightIni = WindowHeight(#WinTest)
EndIf

=> By

Code: Select all

Protected WinTest_WidthIni = 900, WinTest_HeightIni = 820

Let me know if it sound good for you so that I'll modify the window size initialization in IceDesign.

[williamvanhoecke]

ChrisR
A lot is explained now I know that borderless windows are NOT AUTO resized !!!!???. Even worse... resize them manually with dpi setting higher than 100% do not even work correctly.
That is a serious problem because I need to re-position and unhide small borderless-windows all the time. Moving (Repositioning) is done be resize().
Al work very well untill... dpi setting differ from 100% then things get messy (not the football player )

I am now trying to figure out to calculate X and Y values to move borderless windows by code so that it works ok for dpi = 100%, 125%, 150%, 175% AND both on desktop(0) and desktop(1)

However not solving all problems I gues you can make your modifications to IceDesign.
Thanks

[ChrisR]

I also hadn't noticed before that borderless windows aren't automatically resized when they're larger than the desktop, as is done for other windows.
No choice, positioning, dimensioning must be done in the code, DesktopScaledX(), DesktopScaledY() should help with DPI scaling.

IceDesign has been updated in version 1.9.7

Change window and container initialization for window resizing.
Required if the window is auto-resized, when larger than the desktop or for borderless windows resized before initialization.
And a few small details

[williamvanhoecke]

Hi ChrisR

Another thing that might be an enhancement for IceDisign.
When resizing windows down eiher by code or maualy the image-gadget and canvas-gadget (not imagebutton gadgets) are redrawn leaving part of the old larger image behind.
The screen handling is terrible and the SmartWindowRefresh(#Window, State) isn't much of a cure either.

I have solved this by hiding all canvas and image gadgets at the very start of the resizing routine and
unhiding them again after the resize.

This solves the poor screen-redraw.
However I can not use it as a general routine because I do not now how to determine upfront if a gadget is hidden or not.
Mayby you can ???

[ChrisR]

Hi William,
Redisplays, flickering are a mess on Windows, often a nightmare.
I don't know what could be added and I don't think it would be a good idea to do something in the code generated.
There is no universal method to suit all cases, in any case, I couldn't find one for myself.

Hiding gadgets and then showing them again is probably not the best way to go.
For your question, to find out whether a gadget is Visible or Hidden, you can use the : IsWindowVisible_(GadgetID(#Gadget)) Api

Otherwise, instead of SmartWindowRefresh(#Window, State) here are a some Window's Api you can try out:

• WM_SETREDRAW Message:
  SendMessage_(GadgetID(#Gadget), #WM_SETREDRAW, #False, 0) to prevent changes in that gadget, window from being redrawn (Or WindowID(#Window)).
  SendMessage_(GadgetID(#Gadget), #WM_SETREDRAW, #True, 0) to allow changes in that gadget, window to be redrawn.

• RedrawWindow: Updates the specified rectangle or region in a gadget, window's client area. This Api is quite flexible with all available flags
  Ex: RedrawWindow_(GadgetID(#Gadget), #Null, #Null, #RDW_INVALIDATE | #RDW_ERASE | #RDW_ALLCHILDREN | #RDW_UPDATENOW) ; with the right flags.

• InvalidateRect: Adds a rectangle to the gadget, window region to be redrawn.
  Ex: InvalidateRect_(GadgetID(#Gadget), #Null, #True)

• UpdateWindow: Updates immediately the client area of the specified gadget, window by sending a WM_PAINT message.
  Ex: UpdateWindow_(GadgetID(#Gadget))

It is often done by blocking the redrawn function (on window, container or Gadget), before resizing.
Then allow it to be redrawn and finally, call the RedrawWindow. ex:

Code: Select all

SendMessage_(GadgetID(#Gadget), #WM_SETREDRAW, #False, 0)
ResizeGadget.....
ResizeGadget.....
SendMessage_(GadgetID(#Gadget), #WM_SETREDRAW, #True, 0)
RedrawWindow_(GadgetID(#Gadget), #Null, #Null, #RDW_INVALIDATE | #RDW_ERASE | #RDW_ALLCHILDREN | #RDW_UPDATENOW)

Here is an interesting answer on stackoverflow that explains the differences between InvalidateRect, RedrawWindow and UpdateWindow

InvalidateRect does not immediately redraw the window. It simply "schedules" a future redraw for a specific rectangular area of the window. Using InvalidateRect you may schedule as many areas as you want, making them accumulate in some internal buffer. The actual redrawing for all accumulated scheduled areas will take place later, when the window has nothing else to do. (Of course, if the window is idle at the moment when you issue the InvalidateRect call, the redrawing will take place immediately).

You can also force an immediate redraw for all currently accumulated invalidated areas by calling UpdateWindow. But, again, if you are not in a hurry, explicitly calling UpdateWindow is not necessary, since once the window is idle it will perform a redraw for all currently invalidated areas automatically.

RedrawWindow, on the other hand, is a function with a much wider and flexible set of capabilities. It can be used to perform invalidation scheduling (i.e. the same thing InvalidateRect does) or it can be used to forcefully perform immediate redrawing of the specified area, without doing any "scheduling". In the latter case calling RedrawWindow is virtually equivalent to calling InvalidateRect and then immediately calling UpdateWindow.

[williamvanhoecke]

Thanks ChrisR

[ChrisR]

IceDesign has been updated in version 1.9.8

• InitScintilla Compatibility for PB 6.10 and previous versions by adding inside and in generated code:

  Code: Select all

  CompilerIf #PB_Compiler_Version < 610 : If InitScintilla() : CompilerEndIf  ; And the same for the EndIf

  To avoid a compiler warning: depreciated function

• Add a title in the Context Menu, with the current Gadget name

• Remove, Reduce flicker when using the 3 Splitters

[ChrisR]

Oops, a small display error on initialization, it's fixed now and uploaded.

[ChrisR]

I've updated to further reduce flicker when using the Splitter between Properties and the Design area, with a lot of resizing involved.
It's better with almost no flicker now

[le_magn]

Hi, im new to IceDesign, i used only PureForm(by gnozal), in PureForm i have the possibility to update the code without touch the event Loop, pureform only write the window and gadget code, and i'am able to add new gadget, new windows withoute erase my code, i try for the first time IceDesign but it always overwrite entire source codes, also if i disable eventloop generation, i not find the setting or IceDesign is unable to do this? And if there are no option is possibile to add this feature in next update? Thank's

[ChrisR]

Hi le_magn,
Sorry for the late reply, I'm quite busy at the moment.
I don't have this and I don't really see how it could be done!
How to know what to keep and what to replace when creating code!

I don't have gnozal's PureForm. Maybe it could help me to see and understand what is done.
If you have a version with a modification example, I would appreciate if you could share it with me by PM.

Otherwise, with IceDesign or other Designers, it's best not to touch the generated code, let the tool do it only.
This way, if you modify the form, you don't have to worry about recreating the code as a replacement.
And to do this, use the "Compile IsMainFile" option in the settings and Create a Main .pb source file with all the forms included and the event loop, ex:

Code: Select all

EnableExplicit

XIncludeFile "test1.pb"  ; A First  Window Form with: #Window_1 And #Button_1  
XIncludeFile "test2.pb"  ; A Second Window Form with: #Window_2 And #Button_2

Open_Window_1()

Repeat
  Select WaitWindowEvent()
    Case #PB_Event_CloseWindow
      Break
      
    Case #PB_Event_Menu
      Select EventMenu()
      EndSelect
      
    Case #PB_Event_Gadget
      Select EventGadget()
        Case #Button_1   ;
          Open_Window_2()
          CloseWindow(#Window_1)
        Case #Button_2     
          Open_Window_1()
          CloseWindow(#Window_2)
      EndSelect
      
  EndSelect
ForEver

[le_magn]

Otherwise, with IceDesign or other Designers, it's best not to touch the generated code, let the tool do it only.
This way, if you modify the form, you don't have to worry about recreating the code as a replacement.
And to do this, use the "Compile IsMainFile" option in the settings and Create a Main .pb source file with all the forms included and the event loop, ex:

Code: Select all

EnableExplicit

XIncludeFile "test1.pb"  ; A First  Window Form with: #Window_1 And #Button_1  
XIncludeFile "test2.pb"  ; A Second Window Form with: #Window_2 And #Button_2

Open_Window_1()

Repeat
  Select WaitWindowEvent()
    Case #PB_Event_CloseWindow
      Break
      
    Case #PB_Event_Menu
      Select EventMenu()
      EndSelect
      
    Case #PB_Event_Gadget
      Select EventGadget()
        Case #Button_1   ;
          Open_Window_2()
          CloseWindow(#Window_1)
        Case #Button_2     
          Open_Window_1()
          CloseWindow(#Window_2)
      EndSelect
      
  EndSelect
ForEver

Yes thank you i use this example or i let icedesign to create a temp source and i am able to copy and paste in main source, sorry if maybe my request could seem a little senseless, and how the solution is very simple, but I am far from the programming for 10 years and I am very rusty, and I decided to start again from about ten days ago, the first thing that I did it was to buy Icedesign because PureForm has become obsolete, I never liked the original form designer of the PureBasic, I also have purevision but Icedesign convinces me more, thanks for your great job

[ChrisR]

IceDesign has been updated in version 2.0.2

• Added the SplitterGadget, All PureBasic Gadgets are now supported
  It wasn't really easy to add it and I push my ass to do it but cool, glad I did it now
  The 2 child gadgets are locked and resized along with the Splitter (with a little blinking) and the position can be changed via the properties only.
  Note: To delete a Splitter while keeping the Child Gadgets, you can Select and Copy them, Delete the Splitter and then Paste the Child Gadgets.

• To help with Multi-Window support, the window name is now always added to the Image, Font and the Quit variable names.
  Ex: #MainWindow -> #MainWindow_Imag_0(1,2..), #MainWindow_Font_0(1,2..), Quit_MainWindow = #True : Until Quit_MainWindow

• Added the #PB_Web_Edge flag for WebGadget. It is added if the target PB version is > 6.10, otherwise it is just indicated in comment.

SplitterGadget Demo :