Gadget size differents ???

Linux specific forum
Joris
Addict
Addict
Posts: 885
Joined: Fri Oct 16, 2009 10:12 am
Location: BE

Gadget size differents ???

Post by Joris »

Hi,

I'm quit new on linux (Ubuntu, Raspberry Pi). Latest PB version 6.00 beta 2.

Trying to use some code made earlier on windows, I notice quit a difference in size of the gadgets.
Also when imported as form (.pbf).
For example the TextGadget seems to keep it's size height, but the ButtonGadget is quit double in height :
txt =TextGadget(#PB_Any, 5, 6, 198, 20, "PORT",#PB_Text_Center)
btn = ButtonGadget(#PB_Any, 210, 140, 40, 20, "Clear")
Where can I find the references about all these differences ?
Is there no Linux PB help file online (for the moment, as the PB help doesn't work) ?

Thanks
Yeah I know, but keep in mind ... Leonardo da Vinci was also an autodidact.
Marc56us
Addict
Addict
Posts: 1477
Joined: Sat Feb 08, 2014 3:26 pm

Re: Gadget size differents ???

Post by Marc56us »

Under Linux, graphic objects that contain text grow according to the size of the text (height and length).
It is therefore impossible to set the size of these elements below a minimum size.

There is a way to override this "feature" in the GTK settings, but I don't know where I saw that or how to do it with cPB.
:|
User avatar
StarBootics
Addict
Addict
Posts: 984
Joined: Sun Jul 07, 2013 11:35 am
Location: Canada

Re: Gadget size differents ???

Post by StarBootics »

On linux the Button height as a minimum height of 34 pixels and as you said it's not documented anywhere. What I'm doing with the interfaces of my programs is test them on each platform and arrange them to look good. What I'm actually doing is repeating the gadgets in sections inside a CompilerSelect like this :

Code: Select all

CompilerSelect #PB_Compiler_OS
    
  CompilerCase #PB_OS_Windows ; The Interface for Windows
    
  CompilerCase #PB_OS_Linux ; The Interface for Linux
    
  CompilerCase #PB_OS_MacOS ; The Interface for MacOS
    
CompilerEndSelect
Best regards
StarBootics
The Stone Age did not end due to a shortage of stones !
User avatar
mk-soft
Always Here
Always Here
Posts: 5335
Joined: Fri May 12, 2006 6:51 pm
Location: Germany

Re: Gadget size differents ???

Post by mk-soft »

That bothers me too, but it's because of gtk.

The sizes are not correct because of gtk css styles. The minimum sizes are stored in these. So buttons, etc. always have a minimum size.
There was a code somewhere to remove this limitation. But I can't find it again.
My Projects ThreadToGUI / OOP-BaseClass / EventDesigner V3
PB v3.30 / v5.75 - OS Mac Mini OSX 10.xx - VM Window Pro / Linux Ubuntu
Downloads on my Webspace / OneDrive
Joris
Addict
Addict
Posts: 885
Joined: Fri Oct 16, 2009 10:12 am
Location: BE

Re: Gadget size differents ???

Post by Joris »

mk-soft wrote: Fri Jan 21, 2022 6:13 pmThe sizes are not correct because of gtk css styles. The minimum sizes are stored in these. So buttons, etc. always have a minimum size.
Will changing the sizes in those gtk css styles have any effect when the compiled program runs on another (user) computer ?
Or does this user also have to change his/here gtk css styles ?

This place seems to be interesting (I need to study on all that, un less somebody did it before ...):
https://docs.gtk.org/gtk3/method.Widget ... quest.html

Thanks
Yeah I know, but keep in mind ... Leonardo da Vinci was also an autodidact.
deeproot
Enthusiast
Enthusiast
Posts: 269
Joined: Thu Dec 17, 2009 12:00 pm
Location: Llangadog, Wales, UK
Contact:

Re: Gadget size differents ???

Post by deeproot »

@Joris - the previous comments are exactly right, it is normal behaviour with GTK3.

It should be noted that it is easier to set the gadget size using the GTK2 and QT subsystems.

I cannot recommend GTK2 for a new project as it officially at "end-of-life" status. However, I still use GTK2 for my large project which was converted from Windows when that was still the default subsystem in PureBasic. It has very many gadgets, densely arranged, and the result is pretty good IMHO. Conversion to GTK3 has not been possible so far due to this and other issues. I may try again or perhaps it will one day use QT?
User avatar
mk-soft
Always Here
Always Here
Posts: 5335
Joined: Fri May 12, 2006 6:51 pm
Location: Germany

Re: Gadget size differents ???

Post by mk-soft »

So stupid of me,

I found it again how to adjust the GTK3 CSS styles. Also the minimum height of gadget and button padding.
The best thing is that I wrote it myself. :twisted:

Update v1.01.1
- Fixed C-backend

Update v1.02.1
- Link: GTK3 Gadget CSS-Provider

Code: Select all

;-TOP

; Linux GTK CSS Gadget Style
; by      : mk-soft
; Version : v1.01.1
; Create  : 28.12.2018
; Update  : 22.01.2022

DeclareModule GtkGadgetStyle
  
  Declare AddCssProvider(Widget, StyleID, CSSData.s)
  Declare RemoveCssProvider(Widget, StyleID)
  Declare AddCssProviderForScreen(Widget, StyleID, CSSData.s)
  Declare RemoveCssProviderForScreen(Widget, StyleID)
  
  Declare.s CSSColorString(color.l)
  
EndDeclareModule

Module GtkGadgetStyle
  
  EnableExplicit
  
  CompilerIf Not Defined(PB_Compiler_Backend, #PB_Constant)
    #PB_Compiler_Backend = 0
    #PB_Backend_Asm = 0
    #PB_Backend_C = 1
  CompilerEndIf
  
  ;- Imports
  ImportC ""
    gtk_widget_get_screen(*Widget.GtkWidget)
    gtk_widget_get_style_context(*Widget.GtkWidget)
    gtk_css_provider_new()
    gtk_css_provider_load_from_data(*CSSProvider, CSSData.P-UTF8, Length, *Error.GError)
    gtk_style_context_add_provider(*CSSContext, *CSSProvider, Priority)
    gtk_style_context_remove_provider(*CSSContext, *CSSProvider)
    gtk_style_context_add_provider_for_screen(*CSSContext, *CSSProvider, Priority)
    gtk_style_context_remove_provider_for_screen(*CSSContext, *CSSProvider)
  EndImport
  
  ;- Constants
  #GTK_STYLE_PROVIDER_PRIORITY_FALLBACK = 1
  #GTK_STYLE_PROVIDER_PRIORITY_THEME = 200
  #GTK_STYLE_PROVIDER_PRIORITY_SETTINGS = 400
  #GTK_STYLE_PROVIDER_PRIORITY_APPLICATION = 600
  #GTK_STYLE_PROVIDER_PRIORITY_USER  = 800
  
  ;- Maps
  Global NewMap CSSProviderList()
  Global NewMap CSSProviderForScreenList()
  
  ; ---------------------------------------------------------------------------
  
  Procedure AddCssProvider(Widget, StyleID, CSSData.s)
    Protected CSSProvider, CSSContext
    CSSProvider = gtk_css_provider_new()
    CSSContext = gtk_widget_get_style_context(Widget)
    If FindMapElement(CSSProviderList(), Hex(Widget) + "/" + Hex(StyleID))
      gtk_style_context_remove_provider(CSSContext, CSSProviderList())
    EndIf
    CSSProviderList(Hex(Widget) + "/" + Hex(StyleID)) = CSSProvider
    gtk_css_provider_load_from_data(CSSProvider, CSSData, -1, 0)
    gtk_style_context_add_provider(CSSContext, CSSProvider, #GTK_STYLE_PROVIDER_PRIORITY_USER)
    g_object_unref_(CSSProvider)
  EndProcedure
  
  ; ---------------------------------------------------------------------------
  
  Procedure RemoveCssProvider(Widget, StyleID)
    Protected CSSContext
    CSSContext = gtk_widget_get_style_context(Widget)
    If FindMapElement(CSSProviderList(), Hex(Widget) + "/" + Hex(StyleID))
      gtk_style_context_remove_provider(CSSContext, CSSProviderList())
      DeleteMapElement(CSSProviderList())
    EndIf
  EndProcedure
  
  ; ---------------------------------------------------------------------------
  
  Procedure AddCssProviderForScreen(Widget, StyleID, CSSData.s)
    Protected CSSProvider, CSSContext
    CSSProvider = gtk_css_provider_new()
    CSSContext = gtk_widget_get_screen(Widget)
    If FindMapElement(CSSProviderForScreenList(), Hex(Widget) + "/" + Hex(StyleID))
      gtk_style_context_remove_provider_for_screen(CSSContext, CSSProviderForScreenList())
    EndIf
    CSSProviderForScreenList(Hex(Widget) + "/" + Hex(StyleID)) = CSSProvider
    gtk_css_provider_load_from_data(CSSProvider, CSSData, -1, 0)
    gtk_style_context_add_provider_for_screen(CSSContext, CSSProvider, #GTK_STYLE_PROVIDER_PRIORITY_APPLICATION)
    g_object_unref_(CSSProvider)
  EndProcedure
  
  ; ---------------------------------------------------------------------------
  
  Procedure RemoveCssProviderForScreen(Widget, StyleID)
    Protected CSSContext
    CSSContext = gtk_widget_get_screen(Widget)
    If FindMapElement(CSSProviderForScreenList(), Hex(Widget) + "/" + Hex(StyleID))
      gtk_style_context_remove_provider_for_screen(CSSContext, CSSProviderForScreenList())
      DeleteMapElement(CSSProviderForScreenList())
    EndIf
  EndProcedure
  
  ; ---------------------------------------------------------------------------
  
  Procedure.s CSSColorString(color.l)
    CompilerIf #PB_Compiler_Backend = #PB_Backend_Asm
      !mov eax, dword [p.v_color]
      !bswap eax
      !shr eax, 8
      !mov dword [p.v_color], eax
    CompilerElse
      !v_color=__builtin_bswap32(v_color);
      !v_color=((unsigned int)v_color >> 8);
    CompilerEndIf
    ProcedureReturn "#" + RSet(Hex(Color, #PB_Long), 6, "0")
  EndProcedure
  
  ; ---------------------------------------------------------------------------
  
EndModule

; *******************************************************************************

CompilerIf #PB_Compiler_IsMainFile
  
  UseModule GtkGadgetStyle
  
  Define css_string.s, css_all.s, css_all_button.s, css_fr.s, css_bg1.s, css_bg2.s
  Define css_color.s
  
  If OpenWindow(0, 0, 0, 270, 140, "CSS-Gadget", #PB_Window_SystemMenu | #PB_Window_ScreenCentered)
    
    css_all = "* {min-height: 20px}"
    AddCssProviderForScreen(WindowID(0), 1, css_all) ; Gilt für alle Gadgets ab den Level
    css_all_button = "button {padding-bottom: 2px; padding-left: 8px; padding-right: 8px; padding-top: 2px}"
    AddCssProviderForScreen(WindowID(0), 2, css_all_button) ; Gilt für alle Gadgets ab den Level
    
    StringGadget(0, 10, 10, 250, 20, "StringGadget")
    ButtonGadget(1, 10, 45, 120, 20, "Toggle", #PB_Button_Toggle)  
    ButtonGadget(2, 140, 45, 120, 20, "Remove")  
    
    css_color = CSSColorString(RGB(255,255,0))
    
    css_string = "entry {color: darkred; background-color: gray} entry > selection {background-color: " + css_color + "}"
    css_fr = "button {color: blue}"
    css_bg1 = "* button {background: yellow;}"
    css_bg2 = "* button {background: green;}"
    
    AddCssProviderForScreen(WindowID(0), 3, css_fr) ; Gilt für alle Gadgets ab den Level
    
    AddCssProvider(GadgetID(0), 1, css_string)
    AddCssProvider(GadgetID(1), 2, css_bg1)
    AddCssProvider(GadgetID(2), 3, css_bg2)
    
    Repeat
      Select WaitWindowEvent()
        Case #PB_Event_CloseWindow
          Break
        Case #PB_Event_Gadget
          Select EventGadget()
            Case 1
              If GetGadgetState(1)
                AddCssProvider(GadgetID(1), 2, css_bg2)
              Else
                AddCssProvider(GadgetID(1), 2, css_bg1)
              EndIf  
            Case 2
              RemoveCssProvider(GadgetID(1), 2)
          EndSelect
      EndSelect
    ForEver
  EndIf
  
CompilerEndIf
Last edited by mk-soft on Sun Jan 23, 2022 1:29 pm, edited 1 time in total.
My Projects ThreadToGUI / OOP-BaseClass / EventDesigner V3
PB v3.30 / v5.75 - OS Mac Mini OSX 10.xx - VM Window Pro / Linux Ubuntu
Downloads on my Webspace / OneDrive
Joris
Addict
Addict
Posts: 885
Joined: Fri Oct 16, 2009 10:12 am
Location: BE

Re: Gadget size differents ???

Post by Joris »

mk-soft,

Thanks very much.

That looks like nice sized gadgets, beautiful.
A lot of stuff to be studied and searched. I'm getting old.
aarrgghhh .... :wink:
Yeah I know, but keep in mind ... Leonardo da Vinci was also an autodidact.
User avatar
mk-soft
Always Here
Always Here
Posts: 5335
Joined: Fri May 12, 2006 6:51 pm
Location: Germany

Re: Gadget size differents ???

Post by mk-soft »

Linux Inspector GTK3

Activate on Terminal:
gsettings set org.gtk.Settings.Debug enable-inspector-keybinding true

Start:
- Focus on gtk3 program
- <Shift><Ctrl><i>

Inspector:
- Open tree and select GtkEntry or GtkButton or ...
- ToolBar (i)
- Combobox Detail -> CSS-Node
My Projects ThreadToGUI / OOP-BaseClass / EventDesigner V3
PB v3.30 / v5.75 - OS Mac Mini OSX 10.xx - VM Window Pro / Linux Ubuntu
Downloads on my Webspace / OneDrive
deeproot
Enthusiast
Enthusiast
Posts: 269
Joined: Thu Dec 17, 2009 12:00 pm
Location: Llangadog, Wales, UK
Contact:

Re: Gadget size differents ???

Post by deeproot »

@mk-soft - - really good code and information as always - will be very useful :)
Joris wrote: Sun Jan 23, 2022 10:50 amA lot of stuff to be studied and searched. I'm getting old.
aarrgghhh .... :wink:
... Me too :!:
Joris
Addict
Addict
Posts: 885
Joined: Fri Oct 16, 2009 10:12 am
Location: BE

Re: Gadget size differents ???

Post by Joris »

mk-soft wrote: Sun Jan 23, 2022 11:55 am Linux Inspector GTK3

Activate on Terminal:
gsettings set org.gtk.Settings.Debug enable-inspector-keybinding true

Start:
- Focus on gtk3 program
- <Shift><Ctrl><i>
This I can do.
mk-soft wrote: Sun Jan 23, 2022 11:55 am Inspector:
- Open tree and select GtkEntry or GtkButton or ...
- ToolBar (i)
- Combobox Detail -> CSS-Node
What or where in that program should I find this exactly (my version here on Ubuntu is in Dutch language ...)
So... which tree do you mean ? (I can open more then one but have no clue which one). Maybe this all isn't ment for my simple brain...
Yeah I know, but keep in mind ... Leonardo da Vinci was also an autodidact.
User avatar
mk-soft
Always Here
Always Here
Posts: 5335
Joined: Fri May 12, 2006 6:51 pm
Location: Germany

Re: Gadget size differents ???

Post by mk-soft »

The Linux Inspector (GTK3) is already installed and only needs to be activated via Terminal.
There you can use the Inspector to check the windows and widgets from running program.
Just try out what the Inspector can display.
My Projects ThreadToGUI / OOP-BaseClass / EventDesigner V3
PB v3.30 / v5.75 - OS Mac Mini OSX 10.xx - VM Window Pro / Linux Ubuntu
Downloads on my Webspace / OneDrive
Post Reply