IceDesign GUI designer

[le_magn]

@le_magn
I don't know purelibrary from gnozal !
A screenshot would be appreciated, to understand what this library offered.
Currently, there's an option "Window Transaprency" in the settings to adjust the transparency of the entire window with its gadgets.

Hi Chris, this is an example, textgadget gadget_0 is with normal background and gadget_1 is with transparent background, this is possibile in pureform using PureColor library.



As I had already written to you in PM if you want I can send you all the libraries of gnozal and pureform, which by now have become incompatible with the latest versions of purebasic and gnozal is gone, so maybe you can study it and if there is some interesting functionality you can put it in icedesign as well, that would be great

[ChrisR]

Hi le_magn,
You can do this by using the ObjectTheme option in settings

[le_magn]

pureform:

url immagine

icedesign:


it's not the same thing as you can see, the pureform one works differently, it removes the gadget background and you are free to use it where you want.., also it's better than being free in deciding whether to use object theme or not.. i tell you again that in my opinion the best thing is to have a look at other gui designer as well, to take a cue and implement useful features, another useful feature is found in purevision, it allows you to create the windows of any shape and not soo squared....let's be clear i am happy with your IceDesign, currently it is the best and without it i would be bad to use others....

p.s. the same transparency are available in pureform+purecolor also for some othe gadget, like checkbox gadget or other gadget have the text exposed...

PUREFORM:


ICEDESIGN:



p.s. Chris if i want to add new window to same project I don't know where is the option, I can't find the option to add more, for example if I want to create a project where there are main_window,opt_window,user_window and other widows is it possible in icedesign or do I have to create a new project for each single window? thanks

[ChrisR]

There's no concept of project in IceDesign, it's all window by window.
It's still easy enough to assemble them into a main program using XIncludeFile, with calls to Open_Window() and the appropriate event loop.
Since it wasn't designed to manage projects, it would be too difficult to do so now.

[ChrisR]

Thanks for the screenshots, I now understand better the request.
So ObjectTheme is something other than Gnozal's Pureform+Purecolor.

I don't know how it is made by Gnozal but based on netmaestro's second code here TextGadget Transparent Background
Here's a sample for Static Gadget Transparent Background, to improve.
But apart from writing the background image in hard, I don't know how to retrieve it easily depending on whether it's done with:
ImageGadget+DisableGadget or with GCL_HBRBACKGROUND message or if the parent is a drawn Canvas Container...

Code: Select all

; Static Gadget Transparent Background sample
; Based on NetMaestro's second code here: https://www.purebasic.fr/english/viewtopic.php?p=488045#p488045
EnableExplicit

Enumeration Window
  #MainWindow
EndEnumeration

Enumeration Gadgets
  #Btn : #Check : #Frame : #Img_Backgound : #Opt_1 : #Opt_2 : #Txt
EndEnumeration

Enumeration Images
  #Image_Background
EndEnumeration

Enumeration Fonts
  #Font_Broadway_12_B
EndEnumeration

Structure GadgetImages
  Image.i
  PressedImage.i
  Width.i
  Height.i
EndStructure

Structure GadgetBrush
  IDGadget.i
  X.i
  Y.i
  Width.i
  Height.i
  BackgroundBrush.i
EndStructure

UsePNGImageDecoder()

CatchImage(#Image_Background, ?Image_Background)

LoadFont(#Font_Broadway_12_B, "Broadway", 12, #PB_Font_Bold)

Declare GetGadgetBackgroundBrush(IDGadget)
Declare WinCallback(hWnd, uMsg, wParam, lParam)
Declare ResizeGadgetImage(Gadget, OriginalImage, OriginalPressedImage = #PB_Ignore)
Declare Resize_MainWindow()
Declare Open_MainWindow(X = 0, Y = 0, Width = 420, Height = 280)

Procedure GetGadgetBackgroundBrush(IDGadget)
  Protected Gadget = GetDlgCtrlID_(IDGadget), X = GadgetX(Gadget), Y = GadgetY(Gadget), Width = GadgetWidth(Gadget), Height = GadgetHeight(Gadget)
  Protected CopyImage, GrabImage
  Static OldBrush.GadgetBrush
  If IDGadget <> OldBrush\IDGadget Or X <> OldBrush\X  Or Y <> OldBrush\Y  Or Width <> OldBrush\Width Or Height <> OldBrush\Height
    OldBrush\IDGadget = IDGadget : OldBrush\X = X : OldBrush\Y = Y : OldBrush\Width = Width : OldBrush\Height = Height
    If OldBrush\BackgroundBrush
      DeleteObject_(OldBrush\BackgroundBrush)
    EndIf
    If IsImage(#Image_Background) And Width And Height
      SetWindowTheme_(IDGadget, "", "")
      CopyImage = CopyImage(#Image_Background, #PB_Any)
      ResizeImage(CopyImage, DesktopScaledX(GadgetWidth(#Img_Backgound)), DesktopScaledY(GadgetHeight(#Img_Backgound)))
      GrabImage = GrabImage(CopyImage, #PB_Any, DesktopScaledX(X), DesktopScaledY(Y), DesktopScaledX(Width), DesktopScaledY(Height))
      FreeImage(CopyImage)
      OldBrush\BackgroundBrush = CreatePatternBrush_(ImageID(GrabImage))
      FreeImage(GrabImage)
    Else
      OldBrush\BackgroundBrush = GetStockObject_(#NULL_BRUSH)
    EndIf
  EndIf
  ProcedureReturn OldBrush\BackgroundBrush
EndProcedure

Procedure WinCallback(hWnd, uMsg, wParam, lParam)
  Select uMsg
    Case #WM_CTLCOLORSTATIC   ; CheckBoxGadget, FrameGadget, OptionGadget, TextGadget, TrackBarGadget
      SetTextColor_(wParam, #Cyan)
      SetBkMode_(wparam, #TRANSPARENT)
      ProcedureReturn GetGadgetBackgroundBrush(lparam)
  EndSelect
  ProcedureReturn #PB_ProcessPureBasicEvents
EndProcedure

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

Procedure Resize_MainWindow()
  Protected MainWindow_WidthIni = 420, MainWindow_HeightIni = 280
  Protected ScaleX.f, ScaleY.f

  ScaleX = WindowWidth(#MainWindow) / MainWindow_WidthIni : ScaleY = WindowHeight(#MainWindow) / MainWindow_HeightIni
  ResizeGadget(#Check, ScaleX * 20, ScaleY * 20, ScaleX * 160, ScaleY * 22)
  ResizeGadget(#Frame, ScaleX * 20, ScaleY * 60, ScaleX * 360, ScaleY * 70)
  ResizeGadget(#Opt_1, ScaleX * 30, ScaleY * 90, ScaleX * 160, ScaleY * 22)
  ResizeGadget(#Opt_2, ScaleX * 210, ScaleY * 90, ScaleX * 160, ScaleY * 22)
  ResizeGadget(#Txt, ScaleX * 20, ScaleY * 150, ScaleX * 160, ScaleY * 22)
  ResizeGadget(#Btn, ScaleX * 20, ScaleY * 200, ScaleX * 380, ScaleY * 50)
  ResizeGadget(#Img_Backgound, 0, 0, WindowWidth(#MainWindow), WindowHeight(#MainWindow))
  ResizeGadgetImage(#Img_Backgound, #Image_Background)
  CompilerIf #PB_Compiler_OS = #PB_OS_Windows : RedrawWindow_(WindowID(#MainWindow), #Null, #Null, #RDW_INVALIDATE | #RDW_ERASE | #RDW_ALLCHILDREN | #RDW_UPDATENOW) : CompilerEndIf
EndProcedure

Procedure Open_MainWindow(X = 0, Y = 0, Width = 420, Height = 280)
  If OpenWindow(#MainWindow, X, Y, Width, Height, "Title", #PB_Window_SystemMenu | #PB_Window_SizeGadget | #PB_Window_ScreenCentered)
    SetGadgetFont(#PB_Default, FontID(#Font_Broadway_12_B))
    ;Protected BrushWindowBackground = CreatePatternBrush_(ImageID(#Image_Background)) : SetClassLongPtr_(WindowID(#MainWindow), #GCL_HBRBACKGROUND, BrushWindowBackground)
    ImageGadget(#Img_Backgound, 0, 0, 420, 280, ImageID(#Image_Background)) : DisableGadget(#Img_Backgound, #True)
    CheckBoxGadget(#Check, 20, 20, 160, 22, "CheckBox")
    FrameGadget(#Frame, 20, 60, 360, 70, "Frame")
    OptionGadget(#Opt_1, 30, 90, 160, 22, "Option_1")
    OptionGadget(#Opt_2, 210, 90, 160, 22, "Option_2")
    TextGadget(#Txt, 20, 150, 160, 22, "Text_blablabla")
    ButtonGadget(#Btn, 20, 200, 380, 50, "Button")
    
    SetWindowCallback(@WinCallback(), #MainWindow)
    BindEvent(#PB_Event_SizeWindow, @Resize_MainWindow(), #MainWindow)
    PostEvent(#PB_Event_SizeWindow, #MainWindow, 0)
    ProcedureReturn #True
  EndIf
EndProcedure

If Open_MainWindow()
  Repeat : Until WaitWindowEvent() = #PB_Event_CloseWindow
EndIf

DataSection
  Image_Background: : IncludeBinary #PB_Compiler_Home  + "Examples\3D\Data\Water\Foam.png"
EndDataSection

[le_magn]

Ok thanks, this code works, it does the job, then if you can in a future version of icedesign to include this transparency option it would be very convenient, for now thank you very much for the work you do on IceDesign

[ChrisR]

Yes, a transparency option for Static Gadgets would be nice, but at the moment I don't know how to do it if the parent isn't the Window.
For example, for Static Gadgets included in a container with a disabled background image included, or for Static Gadgets in a drawn canvas container.
Is this done with PureColor ?

[le_magn]

Yes, a transparency option for Static Gadgets would be nice, but at the moment I don't know how to do it if the parent isn't the Window.
For example, for Static Gadgets included in a container with a disabled background image included, or for Static Gadgets in a drawn canvas container.
Is this done with PureColor ?

I don't know if I got it right, but I created a panel_gadget and inserted as child the gadget_texts and the image

If you want to try yourself you need purecolor library and pureform, you can download it from https://www.rsbasic.de/backups
You need purebasic 4.30-4.31 i think, i tested it with purebasic 4.31

Here is an overview of purecolor features from archive.org https://web.archive.org/web/20090211081 ... COLOR_.htm


Another nice function in pureform is the possibility to "create" custom gadget

[ChrisR]

Not really easy, but I managed to do a few tests with pureform and purecolor library and with PB 3.94 and a few changes to the generated code.
It does not work here with PB v4.xx, PureColor seems to need StringExtension and other xxxExtension library.

The result looks good at first glance, but not as soon as you change the text.
Exactly what NetMaestro describes here in TextGadget Transparent Background

I can't let this one go by without offering my two cents. This code has been kicking around the forums for at least as long as I've been here and that's ten years. But there's a hole in it you could drive a truck through. It looks fine and dandy until you go to change the text to something different. Then you realize that the hollow brush won't erase what was there before and everything turns to crap.

Voici le code généré avec PureCOLOR pour PB v3.94, Click the button to see the result of SetGadgetText

Code: Select all

;{- Enumerations / DataSections
;{ Windows
Enumeration
  #Window_0
EndEnumeration
;}
;{ Gadgets
Enumeration
  #Panel_0
  #Image_1
  #CheckBox_2
  #Option_3
  #Option_4
  #Text_5
  #Button_6
EndEnumeration
;}
;{ Images
Enumeration
  #Image_Image_1
EndEnumeration
;}
;{ Included Images
DataSection
  Image_Image_1:
  IncludeBinary "C:\Program Files\PureBasic\Examples\3D\Data\Water\Foam.png"
EndDataSection
;}
;{ Image Plugins
UsePNGImageDecoder()
;}
Global.l Event.l, EventWindow.l, EventGadget.l, EventType.l, EventMenu.l
;}
Procedure OpenWindow_Window_0()
  If OpenWindow(#Window_0, 0, 0, 320, 240, #PB_Window_SystemMenu|#PB_Window_ScreenCentered|#PB_Window_TitleBar, "Window_0")
    If CreateGadgetList(WindowID(#Window_0))
      PanelGadget(#Panel_0, 10, 10, 300, 220)
        ; Tab #1
        AddGadgetItem(#Panel_0, -1, "Tab #1")
        ImageGadget(#Image_1, 0, 0, 516, 516, CatchImage(#Image_Image_1, ?Image_Image_1))
        DisableGadget(#Image_1, 1)
        CheckBoxGadget(#CheckBox_2, 80, 20, 140, 20, "CheckBox_Gadget")
        OptionGadget(#Option_3, 80, 50, 140, 20, "Option 2")
        OptionGadget(#Option_4, 80, 70, 140, 20, "Option 1")
        TextGadget(#Text_5, 80, 110, 140, 20, "This is a Text Gadget")
        ButtonGadget(#Button_6, 20, 150, 260, 40, "SetGadgetText Button")
      CloseGadgetList()
      ; Gadget Colors
      PureCOLOR_SetGadgetColor(#CheckBox_2, $FFFFFF, #PureCOLOR_DontSetBackColor)
      PureCOLOR_SetGadgetColor(#Option_3, $FF00, #PureCOLOR_DontSetBackColor)
      PureCOLOR_SetGadgetColor(#Option_4, $FF00, #PureCOLOR_DontSetBackColor)
      PureCOLOR_SetGadgetColor(#Text_5, $FF, #PureCOLOR_DontSetBackColor)
      PureCOLOR_SetButtonColor(#Button_6, $800000, #PureCOLOR_SystemColor)
    EndIf
  EndIf
EndProcedure

OpenWindow_Window_0()

;{- Event loop
Repeat
  Event = WaitWindowEvent()
  Select Event
    ; ///////////////////
    Case #PB_Event_Gadget
      EventGadget = EventGadgetID()
      EventType = EventType()
      If EventGadget = #Button_6
      SetGadgetText(#CheckBox_2, "Hello World!")
      SetGadgetText(#Option_3, "Hello World!")
      SetGadgetText(#Option_4, "Hello World!")
      SetGadgetText(#Text_5, "Hello World!")
      EndIf
    ; ////////////////////////
    Case #PB_Event_CloseWindow
      Break
  EndSelect
ForEver
;}

[ChrisR]

Another nice function in pureform is the possibility to "create" custom gadget

Currently there is JellyButton as Custom Gadget but it's the only one.
There could be others, but custom Gadgets would have to use the WM_Print message.
This is what I use to get the real Gadgets captured (print), the same as you'd see with compiled code.
I don't want to draw them, I want to capture them to be close to the real one.
But the WM_Print messages are Not, or rarely, implemented for custom gadgets, as it is made for default PB gadgets.

[ChrisR]

IceDesign has been updated in version 2.1.6

• Added Deutsch (German) language, thanks to SiRprise

• Some improvements, corrections in ObjectTheme

• Fixed a bug in menu item names

[le_magn]

Thank's for the update Chris!!!

[Michael Vogel]

Thanks for the update and new features, maybe the options for the cloning position function could get a redesign?
If reducing the input fields to OffsetX and OffsetY and a dropdown menu with entries like 'Offsets X and Y', 'Offset X', 'Offset Y', 'Width + Offset X' and 'Height + Offset Y' (similar to Constant/Variable menu for prefixes and suffixes) it would be more easy to switch between creating horizontal and vertical aligned objects (offset values doesn't have to be changed then).

[ChrisR]

It could be done that way too, it's more or less the same thing.
But yes, it's maybe easier to change with a ComboBox. I saw it as a default setting that doesn't really need to be changed once done.
For now, I'll update with a few changes.

[ChrisR]

IceDesign has been updated in version 2.1.7

• Fix the constant (or variable) names for fonts and images, keeping only allowed characters, e.g:
  For font: @Mx437 HP 100LX 6x8, 20, Bold, the constant name will be: #Font_Mx437_HP_100LX_6x8_20_B
  and the font loading will be: LoadFont(#Font_Mx437_HP_100LX_6x8_20_B, "@Mx437 HP 100LX 6x8", 20, #PB_Font_Bold)

• Change the code generated for the background image, in settings, using now:
  SetClassLongPtr, GCL_HBRBACKGROUND instead of a disabled background image

• Variables Brush_Background and Quit (to exit the loop) use the window's short name, prefix and suffix, as it is done for the other constants, variables.

The package on GitHub is divided into 2 parts now: IceDesign.zip (x64 version) and IceDesign_x86.zip
To avoid the many false anti-virus alarms on the optional x86 version Let me know if anyone uses it.