Dynamic GUI & Font creating [Modules] - The new easy Way

Share your advanced PureBasic knowledge/code with the community.
User avatar
Saki
Addict
Addict
Posts: 830
Joined: Sun Apr 05, 2020 11:28 am
Location: Pandora

Dynamic GUI & Font creating [Modules] - The new easy Way

Post by Saki »

Dynamic GUI & Font creating [Modules] - The new easy Way

A new method which allows to create dynamic GUI with dynamic text and fonts with the available PB gadgets.
No more complicated , buggy or limited programs are needed to create such a thing.

This tool can also turn any CanvasGadget, ImageGadget, ButtonImageGadget, into a ColorButton with multiline text. :shock:

You can now write text in a CanvasGadget, ImageGadget, ButtonImageGadget, in exactly the same way with a simple function,
as in a ButtonGadget, but automatically fitted, colored, centred, left, right and colored.

It has never been easier to create perfect CanvasGadget, ImageGadget, ButtonImageGadget, based CustomButtons or TextGadgets.
It is nothing more than a function call.

It's absolutely simple and new. :shock:
With automatic font management.
Existing code does not need to be modified.
Simple new Set...FW commands do everything that is necessary.

Very fast, All OS, DPI aware - Works also fine with Subsystem QT.

Please add the Font_Wizzard_BF module to this code, you found here :
viewtopic.php?f=12&t=76338

Image

Code: Select all

; ================== Dynamic GUI Creating Module ========================
DeclareModule CreateGUI_1
  EnableExplicit
  UseModule Font_Wizzard_BF
  Declare CreateGUI_1(window_x , window_y , window_width_output , window_height_output)
EndDeclareModule

Module CreateGUI_1
  
  ; (c) walbus
  ; You can integrate and optimize this Module code into your codes and also publish it
  ; Copyright text and references may not be removed or changed
  
  Global window_width_developing=920 ; Developing size
  Global window_height_developing=350
  
  Global window_min_width=40 ; Minimum window size
  Global window_min_height=80
  
  Global window_x , window_y , window_width_output , window_height_output
  Global window_flags=#PB_Window_SystemMenu|#PB_Window_SizeGadget|#PB_Window_ScreenCentered|#PB_Window_MinimizeGadget|#PB_Window_MaximizeGadget|#PB_Window_Invisible 
  Global window_ID=OpenWindow(#PB_Any , 0 , 0 , window_width_developing , window_height_developing,
                              "Dynamic Window and GUI creating" , Window_flags)
  WindowBounds(window_ID , window_min_width , window_min_height , #PB_Ignore , #PB_Ignore)
  
  Global SwapText$="Try any text"+#LF$+#LF$+"Without any Problems"+#LF$+#LF$+"Have fun"
  
  ; Create ButtonGadget 1 for using ========================================== 
  Global ButtonGadget_1_x=310
  Global ButtonGadget_1_y=20
  Global ButtonGadget_1_width=300
  Global ButtonGadget_1_height=90
  Global ButtonGadget_1_text$="Resizable Window Demo"+#LF$+"This is a ButtonGadget"+#LF$+" - Resize the Window -"
  Global ButtonGadget_1_ID=ButtonGadget(#PB_Any , 0 , 0 , 0 , 0 , ButtonGadget_1_text$ , #PB_Button_MultiLine)
  
  ; Create ButtonGadget 2 for using ========================================== 
  Global ButtonGadget_2_x=20
  Global ButtonGadget_2_y=135
  Global ButtonGadget_2_width=500
  Global ButtonGadget_2_height=95
  Global ButtonGadget_2_text$="Create Gadgets and GUI with automatically fitted Text"+#LF$+#LF$+ 
                              "Try any Text, It's magic"+#LF$+#LF$+ 
                              "Works with any Rectangles and Gadgets"+#LF$+#LF$+
                              "- Click the Gadgets -"
  
  Global ButtonGadget_2_ID=ButtonGadget(#PB_Any , 0 , 0 , 0 , 0 , "" , #PB_Button_MultiLine)
  
  ; Create HyperlinkGadget 1 for using ======================================= 
  Global HyperlinkGadget_1_x=30
  Global HyperlinkGadget_1_y=90
  Global HyperlinkGadget_1_width=260
  Global HyperlinkGadget_1_height=25
  Global HyperlinkGadget_1_text$="This is a HyperlinkGadget"
  
  Global HyperlinkGadget_1_ID=HyperLinkGadget(#PB_Any , 0 , 0 , 0 , 0 , "" , $FF0000 , #PB_HyperLink_Underline)
  
  ; Create TextGadget 1 for using ============================================ 
  Global TextGadget_1_x=650
  Global TextGadget_1_y=95
  Global TextGadget_1_width=225
  Global TextGadget_1_height=30
  Global TextGadget_1_text$="This is a TextGadget"
  
  Global TextGadget_1_ID=TextGadget(#PB_Any , 0 , 0 , 0 , 0 , "")
  
  ; Create SpinGadget 1 for using ============================================ 
  Global SpinGadget_1_x=650
  Global SpinGadget_1_y=20
  Global SpinGadget_1_width=225
  Global SpinGadget_1_height=25
  Global SpinGadget_1_Text$="This is a SpinGadget"
  
  Global SpinGadget_1_ID=SpinGadget(#PB_Any , 0 , 0 , 0 , 0 , 0 , 100)
  
  ; Create StringGadget 1 for using ========================================== 
  Global StringGadget_1_x=30
  Global StringGadget_1_y=20
  Global StringGadget_1_width=225
  Global StringGadget_1_height=25
  Global StringGadget_1_Text$="This is a StringGadget"
  Global StringGadget_2_Text$="With text fitting"
  
  Global StringGadget_1_ID=StringGadget(#PB_Any , 0 , 0 , 0 , 0 , StringGadget_1_Text$)
  
  ; Create CanvasGadget 1 for using ======================================== 
  Global CanvasGadget_1_x=540
  Global CanvasGadget_1_y=135
  Global CanvasGadget_1_width=360
  Global CanvasGadget_1_height=95
  Global text_color=#Blue
  Global background_color=#Yellow
  Global headletter_mode_text_stretching_x=0
  Global headletter_mode_text_stretching_y=0
  Global flag=1 ; Text center = 1 - Text right = 2 - Text vertical = 3
  Global mode=0 ; Revers text mode = 1 - RTL text mode = 2
  
  Global CanvasGadget_1_text$="This is a CanvasGadget"+#LF$+#LF$+ 
                              "All OS"+#LF$+#LF$+
                              "It's very simple"
  
  Global CanvasGadget_ID=CanvasGadget(#PB_Any,
                                      CanvasGadget_1_x,
                                      CanvasGadget_1_y,
                                      CanvasGadget_1_width,
                                      CanvasGadget_1_height,
                                      #PB_Canvas_Border)
  
  Global canvas_background_color_0=#Red
  Global canvas_background_color_1=#Yellow
  
  ; Create ButtonImageGadget 1 for using ======================================== 
  Global ButtonImageGadget_1_x=45
  Global ButtonImageGadget_1_y=240
  Global ButtonImageGadget_1_width=450
  Global ButtonImageGadget_1_height=95
  Global text_color=#Blue
  Global background_color=#Yellow
  Global headletter_mode_text_stretching_x=0
  Global headletter_mode_text_stretching_y=0
  Global flag=1 ; Text center = 1 - Text right = 2 - Text vertical = 3
  Global mode=0 ; Revers text mode = 1 - RTL text mode = 2
  
  Global ButtonImageGadget_1_text$="This is a ButtonImageGadget"+#LF$+#LF$+
                                   "Simplest created"+#LF$+#LF$+
                                   "With exactelly fitted text"
  
  Global ButtonImageGadget_ID=ButtonImageGadget(#PB_Any,
                                                ButtonImageGadget_1_x,
                                                ButtonImageGadget_1_y,
                                                ButtonImageGadget_1_width,
                                                ButtonImageGadget_1_height,
                                                0)
  
    ; Create ImageGadget 1 for using ======================================== 
  Global ImageGadget_1_x=540
  Global ImageGadget_1_y=240
  Global ImageGadget_1_width=355
  Global ImageGadget_1_height=95
  Global text_color=#Blue
  Global background_color=#Yellow
  Global headletter_mode_text_stretching_x=0
  Global headletter_mode_text_stretching_y=0
  Global flag=1 ; Text center = 1 - Text right = 2 - Text vertical = 3
  Global mode=0 ; Revers text mode = 1 - RTL text mode = 2
  
  Global ImageGadget_1_text$="This is a ImageGadget"+#LF$+#LF$+
                             " With automatically image caching"+#LF$+
                             "and image refresh"+#LF$+#LF$+
                             "With exactelly fitted text"
  
  Global ImageGadget_ID=ImageGadget(#PB_Any,
                                    ImageGadget_1_x,
                                    ImageGadget_1_y,
                                    ImageGadget_1_width,
                                    ImageGadget_1_height,
                                    0)
  
  Global canvas_background_color_0=#Red
  Global canvas_background_color_1=#Yellow
  
  ; =========================================================================== 
  
  ; ############## Resize procedure for callback ##############################
  Procedure WindowResizing_BindEvent_CreateGUI_1()
    
    ; =============Init the scaling variables ============== 
    Protected set_x.f=100/window_width_developing*WindowWidth(window_ID)/100
    Protected set_y.f=100/window_height_developing*WindowHeight(window_ID)/100
    
    ; Resize CanvasGadget 1 =================================================== 
    SetImageBasedGadget_FW(CanvasGadget_ID,
                           "Georgia",
                           #PB_Font_Bold,
                           CanvasGadget_1_x*set_x,
                           CanvasGadget_1_y*set_y,
                           CanvasGadget_1_width*set_x,
                           CanvasGadget_1_height*set_y,
                           #Black,                    ; Text color
                           0,                         ; Text adjustment  - 0=center - 1=left - 2=right
                           canvas_background_color_1, ; Background_color - Ignore = -1
                           CanvasGadget_1_text$,
                           20*set_x,                  ; Padding x
                           10*set_y,                  ; Padding y
                           1)                         ; resize_factor.f
    
    ; Resize ButtonImageGadget 1 =================================================== 
    SetImageBasedGadget_FW(ButtonImageGadget_ID,
                           "Georgia",
                           #PB_Font_Bold,
                           ButtonImageGadget_1_x*set_x,
                           ButtonImageGadget_1_y*set_y,
                           ButtonImageGadget_1_width*set_x,
                           ButtonImageGadget_1_height*set_y,
                           #Red,                      ; Text color
                           0,                         ; Text adjustment  - 0=center - 1=left - 2=right
                           -1,                        ; Background_color - Ignore = -1
                           ButtonImageGadget_1_text$,
                           10*set_x,                  ; Padding x
                           10*set_y,                  ; Padding y
                           1)                         ; resize_factor.f
    
    ; Resize ImageGadget 1 =================================================== 
    SetImageBasedGadget_FW(ImageGadget_ID,
                           "Georgia",
                           #PB_Font_Bold,
                           ImageGadget_1_x*set_x,
                           ImageGadget_1_y*set_y,
                           ImageGadget_1_width*set_x,
                           ImageGadget_1_height*set_y,
                           #Blue,               ; Text color
                           0,                   ; Text adjustment  - 0=center - 1=left - 2=right
                           -1,                  ; Background_color - Ignore = -1
                           ImageGadget_1_text$,
                           10*set_x,            ; Padding x
                           10*set_y,            ; Padding y
                           1)                   ; resize_factor.f
    
    ; Resize ButtonGadget 1 =================================================== 
    SetGadget_FW(ButtonGadget_1_ID,
                 "Georgia",
                 #PB_Font_Bold,
                 ButtonGadget_1_x*set_x,
                 ButtonGadget_1_y*set_y,
                 ButtonGadget_1_width*set_x,
                 ButtonGadget_1_height*set_y,
                 ButtonGadget_1_text$,
                 10*set_x, ; Padding x
                 10*set_y, ; Padding y
                 1)        ; resize_factor.f
    
    ; Resize ButtonGadget 2 =================================================== 
    SetGadget_FW(ButtonGadget_2_ID,
                 "Arial",
                 #PB_Font_Bold,
                 ButtonGadget_2_x*set_x,
                 ButtonGadget_2_y*set_y,
                 ButtonGadget_2_width*set_x,
                 ButtonGadget_2_height*set_y,
                 ButtonGadget_2_text$,
                 10*set_x, ; Padding x
                 10*set_y, ; Padding y
                 1)        ; resize_factor.f
    
    ; Resize HyperlinkGadget 1 ================================================ 
    SetGadget_FW(HyperlinkGadget_1_ID,
                 "Georgia",
                 #PB_Font_Bold,
                 HyperlinkGadget_1_x*set_x,
                 HyperlinkGadget_1_y*set_y,
                 HyperlinkGadget_1_width*set_x,
                 HyperlinkGadget_1_height*set_y,
                 HyperlinkGadget_1_text$,
                 0*set_y, ; Padding x
                 5*set_y, ; Padding y
                 1.0)     ; resize_factor.f
    
    ; Resize TextGadget 1 ===================================================== 
    SetGadget_FW(TextGadget_1_ID,
                 "",
                 #PB_Font_Bold,
                 TextGadget_1_x*set_x,
                 TextGadget_1_y*set_y,
                 TextGadget_1_width*set_x,
                 TextGadget_1_height*set_y,
                 TextGadget_1_text$,
                 0*set_y,  ; Padding x
                 10*set_y, ; Padding y
                 1.0)      ; resize_factor.f
    
    ; Resize SpinGadget 1 ===================================================== 
    SetGadget_FW(SpinGadget_1_ID,
                 "Arial",
                 #PB_Font_Bold,
                 SpinGadget_1_x*set_x,
                 SpinGadget_1_y*set_y,
                 SpinGadget_1_width*set_x,
                 SpinGadget_1_height*set_y,
                 SpinGadget_1_Text$,
                 20*set_x, ; Padding x
                 5*set_y,  ; Padding y
                 1.1)      ; resize_factor.f
    
    ; Resize StringGadget 1 =================================================== 
    SetGadget_FW(StringGadget_1_ID,
                 "Arial",
                 #PB_Font_Bold,
                 StringGadget_1_x*set_x,
                 StringGadget_1_y*set_y,
                 StringGadget_1_width*set_x,
                 StringGadget_1_height*set_y,
                 StringGadget_1_Text$,
                 5*set_x, ; Padding x
                 5*set_y, ; Padding y
                 1.1)     ; resize_factor.f
    
    ; ========================================================================= 
    
    ; The Set...BF functions returns the determined font ID so that it can easily also be inherit on to other gadgets
    ; As you can see above , the Set...FW functions can not only set the text, but also reposition and resize the gadgets
    
  EndProcedure
  
  ; =========================================================================== 
  
  Procedure CreateGUI_1(window_x , window_y , window_width_output , window_height_output)
    
    ; ================ Calculate the output position and size ================= 
    If window_x=-1 : window_x=WindowX(window_ID)-(window_width_output-WindowWidth(window_ID))/2 : EndIf
    If window_y=-1 : window_y=WindowY(window_ID)-(window_height_output-WindowHeight(window_ID))/2 : EndIf
    ResizeWindow(window_ID , window_x , window_y , window_width_output , window_height_output)
    
    ; ================= Init the resize procedure callback ====================== 
    BindEvent(#PB_Event_SizeWindow , @WindowResizing_BindEvent_CreateGUI_1())
    
    ; ====== Init all gadgets - Call simple the resize callback procedure ======= 
    Macro Refresh_all_Gadgets ; Refresh the gadgets
      WindowResizing_BindEvent_CreateGUI_1()
    EndMacro
    
    ; ============================= Show the result ============================= 
    
    Refresh_all_Gadgets
    
    HideWindow(window_ID , 0)
    
    Repeat
      Define win_event=WaitWindowEvent()
      Select EventGadget()
        Case ButtonGadget_1_ID, ButtonGadget_2_ID, HyperlinkGadget_1_ID, ButtonImageGadget_ID ; Gadget events
          If Not EventType()
            Define temp_text$=SwapText$ : SwapText$=ButtonGadget_2_Text$ : ButtonGadget_2_text$=temp_text$ 
            Define temp_text$=StringGadget_1_text$ : StringGadget_1_text$=StringGadget_2_Text$ : StringGadget_2_text$=temp_text$
            Refresh_all_Gadgets ; Refresh all gadgets
          EndIf
        Case CanvasGadget_ID ; CanvasGadget 1 event
          If EventType()=#PB_EventType_LeftButtonDown
            Swap canvas_background_color_0, canvas_background_color_1
            Define temp_text$=SwapText$ : SwapText$=ButtonGadget_2_Text$ : ButtonGadget_2_text$=temp_text$ 
            Refresh_all_Gadgets ; Refresh all gadgets
          EndIf
      EndSelect
    Until win_event=#PB_Event_CloseWindow
    
  EndProcedure
  
EndModule
UseModule CreateGUI_1

EnableExplicit

; =========================== Run the modules ===================================== 
CreateGUI_1(-1 , -1 , 900 , 500) ; x , y , width , height - x=-1 center the output x - y=-1 center the output y
Last edited by Saki on Sat Dec 05, 2020 12:22 pm, edited 25 times in total.
地球上の平和
User avatar
Kwai chang caine
Always Here
Always Here
Posts: 5357
Joined: Sun Nov 05, 2006 11:42 pm
Location: Lyon - France

Re: Dynamic GUI & Font creating [Modules] - The new easy Way

Post by Kwai chang caine »

Very nice effect, no flickering on resizing :shock:
Thanks a lot for sharing 8)
ImageThe happiness is a road...
Not a destination
User avatar
Saki
Addict
Addict
Posts: 830
Joined: Sun Apr 05, 2020 11:28 am
Location: Pandora

Re: Dynamic GUI & Font creating [Modules] - The new easy Way

Post by Saki »

Hi Kwai, many thanks again.

The codes are now extended and updated.

Have fun.
地球上の平和
User avatar
Kwai chang caine
Always Here
Always Here
Posts: 5357
Joined: Sun Nov 05, 2006 11:42 pm
Location: Lyon - France

Re: Dynamic GUI & Font creating [Modules] - The new easy Way

Post by Kwai chang caine »

I have tested it and that works too :wink:
Thanks 8)
ImageThe happiness is a road...
Not a destination
User avatar
Saki
Addict
Addict
Posts: 830
Joined: Sun Apr 05, 2020 11:28 am
Location: Pandora

Re: Dynamic GUI & Font creating [Modules] - The new easy Way

Post by Saki »

Hi Kwai, many thanks again.

The code is updated again.
ImageGadget and ButtonImageGadgets are now included.

A single identical Set command works
for CanvasGadget, ImageGadget and ButtonImageGadget at the same.

The font size can now also be preset or
also a smallest and a largest can be defined on the Font_Wizzard_BF.

The result are perfect OS same ColorButtons. :wink:

Have fun
地球上の平和
User avatar
Kwai chang caine
Always Here
Always Here
Posts: 5357
Joined: Sun Nov 05, 2006 11:42 pm
Location: Lyon - France

Re: Dynamic GUI & Font creating [Modules] - The new easy Way

Post by Kwai chang caine »

Hello SAKI
I have try your new code :wink:

For do that i have put all the code of "Font_Wizzard_BF" in a "Font_Wizzard_BF.pbi" file
viewtopic.php?f=12&t=76338
and all the code of "Dynamic GUI & Font creating [Modules]" in a "test.pb" file beside the "Font_Wizzard_BF.pbi" file
I have replace "XIncludeFile("./Font_Wizzard_BF.pbi")" by "XIncludeFile("Font_Wizzard_BF.pbi")"
and i have the error "SetCanvasGadget_FW(CanvasGadget_ID," is not a function :|
ImageThe happiness is a road...
Not a destination
User avatar
Saki
Addict
Addict
Posts: 830
Joined: Sun Apr 05, 2020 11:28 am
Location: Pandora

Re: Dynamic GUI & Font creating [Modules] - The new easy Way

Post by Saki »

Hi Kwai, thanks a lot for your testing.

Today I made the extensions for the ImageGadget and the ButtonImageGadget.

With Linux and subsystem QT, also gtk2/3 and Windows
there were incompatibilities and it was quite a mess and annoying.

I just copied the new codes to the forum.
Now everything works again.

Best Regards Saki
地球上の平和
User avatar
Kwai chang caine
Always Here
Always Here
Posts: 5357
Joined: Sun Nov 05, 2006 11:42 pm
Location: Lyon - France

Re: Dynamic GUI & Font creating [Modules] - The new easy Way

Post by Kwai chang caine »

Yes you have right :wink:
All works now, resize without flickering
Thanks for sharing 8)
ImageThe happiness is a road...
Not a destination
Post Reply