gtkdialog GTK3 question setting window size

For discussions about programming, and for programming questions and advice


Moderator: Forum moderators

User avatar
fredx181
Posts: 3431
Joined: Tue Dec 03, 2019 1:49 pm
Location: holland
Has thanked: 462 times
Been thanked: 1507 times
Contact:

Re: gtkdialog GTK3 question setting window size

Post by fredx181 »

MochiMoppel wrote: Fri Apr 11, 2025 2:47 am
fredx181 wrote: Thu Apr 10, 2025 8:26 pm

So I'd say something like this for setting the font name the same for GTK3 and GTK2 in every system: (for me it's "DejaVu Sans")
SYSTEM_UI=$(fc-match system-ui | awk '/:/' | cut -d\" -f2) # get default font name
And in the stylesheet blocks e.g. font: 10pt "'$SYSTEM_UI'"; (GTK3) and font_name="'$SYSTEM_UI' Bold Italic 10" (GTK2)

I don't understand the purpose of this exercise.

Yes, not me either (on second thought, the next day ;) ).

User avatar
don570
Posts: 796
Joined: Sat Nov 21, 2020 4:43 pm
Has thanked: 6 times
Been thanked: 156 times

Re: gtkdialog GTK3 question setting window size

Post by don570 »

I was mistaken from my previous post .
In Bookwormpup
GTKDIALOGVERS is 3 not 2
___________________________________

I checked script in Easy OS Scarthgap 6.6.2
GTKDIALOGVERS is 2 but the script is still useful.
I wrote report....
viewtopic.php?p=146720#p146720
__________________________________________

User avatar
MochiMoppel
Posts: 1363
Joined: Mon Jun 15, 2020 6:25 am
Location: Japan
Has thanked: 23 times
Been thanked: 548 times

Re: gtkdialog GTK3 question setting window size

Post by MochiMoppel »

fredx181 wrote: Fri Apr 11, 2025 6:14 am

Yes, not me either (on second thought, the next day ;) ).

Never mind :lol:
Now that this thread reeled sufficiently off-topic it might be OK if I throw in some CSS variations. Instead of setting the background etc. for all text widgets or even the whole window, the following code sets the style for each text container individually. I prefer to use the box widget because it allows some room around the text. Works only for GTK3 (I'm too lazy to search for the appropriate parameters in GTK2).

Screenshot.png
Screenshot.png (23.74 KiB) Viewed 634 times

Code: Select all

#!/bin/sh
GTKDIALOG=gtkdialog
# uncomment this line to test with gtk2dialog (if exist)
#~ [ $(command -v gtk2dialog) ] && GTKDIALOG=gtk2dialog || exit 0
grep -q  'GTK+ 3' $(type -p $GTKDIALOG) && GTKDIALOGVERS=3 || GTKDIALOGVERS=2

if [ "$GTKDIALOGVERS" = "3" ]; then # GTK3
STYLES='--styles=/tmp/gtkdialog-test'
echo '
  box#mybox1 {
  background-color:firebrick;
}
  box#mybox2 {
  background-color:springgreen4
}
#mybox1,#mybox2 {
  color:white;
  font: 12px mono;
  padding: 5px;
  border-radius: 8px;
}
button {
  padding-top: 12px;
  padding-bottom: 12px;
  border-radius: 300px;
}
button:hover {
  color: white;
  background: linear-gradient(to bottom, red1, red4);
}
' > /tmp/gtkdialog-test
fi

export MAIN_DIALOG='
<window title="Test size">
<vbox>
	<vbox name="mybox1">
		<text width-chars="49" label="Lorem ipsum Morbi erat ex, lacinia nec efficitur eget, sagittis ut orci. Etiam in dolor placerat, pharetra ligula et, bibendum neque.">
		</text>
	</vbox>
	<text label="Google translation:"></text>
	<vbox name="mybox2">
		<text width-chars="49" label="Lorem very soccer was out of, skirt, nor is it becomes a chemical, arrows to the clinical. Even in the consumer estate, quiver Reserved and drink or.">
		</text>
	</vbox>
	<hbox>
		<button ok></button>
	</hbox>
</vbox>
</window>'
$GTKDIALOG -c "$STYLES" >/dev/null
User avatar
Sofiya
Posts: 2540
Joined: Tue Dec 07, 2021 9:49 pm
Has thanked: 1570 times
Been thanked: 1727 times

Re: gtkdialog GTK3 question setting window size

Post by Sofiya »

Great! Then the button should be completely round.

Code: Select all

#!/bin/sh
GTKDIALOG=gtkdialog
# uncomment this line to test with gtk2dialog (if exist)
# [ $(command -v gtk2dialog) ] && GTKDIALOG=gtk2dialog || exit 0
grep -q  'GTK+ 3' $(type -p $GTKDIALOG) && GTKDIALOGVERS=3 || GTKDIALOGVERS=2

if [ "$GTKDIALOGVERS" = "3" ]; then # GTK3
STYLES='--styles=/tmp/gtkdialog-test'
echo '
  box#mybox1 {
  background-color:firebrick;
}
  box#mybox2 {
  background-color:springgreen4
}
#mybox1,#mybox2 {
  color:white;
  font: 12px mono;
  padding: 5px;
  border-radius: 8px;
}
button {
  padding-top: 13px;
  padding-bottom: 13px;
  padding-left: 5px;
  padding-right: 5px;
  border-radius: 50%;
}
button:hover {
  color: white;
  background: linear-gradient(to bottom, red1, red4);
  transition: 0.3s;
}
' > /tmp/gtkdialog-test
fi

export MAIN_DIALOG='
<window title="Test size">
<vbox>
	<vbox name="mybox1">
		<text width-chars="49" label="Lorem ipsum Morbi erat ex, lacinia nec efficitur eget, sagittis ut orci. Etiam in dolor placerat, pharetra ligula et, bibendum neque.">
		</text>
	</vbox>
	<text label="Google translation:"></text>
	<vbox name="mybox2">
		<text width-chars="49" label="Lorem very soccer was out of, skirt, nor is it becomes a chemical, arrows to the clinical. Even in the consumer estate, quiver Reserved and drink or.">
		</text>
	</vbox>
	<hbox>
		<button ok></button>
	</hbox>
</vbox>
</window>'
$GTKDIALOG -c "$STYLES" >/dev/null
Attachments
2025-04-12_17-57.png
2025-04-12_17-57.png (26.71 KiB) Viewed 625 times
2025-04-12_17-48.png
2025-04-12_17-48.png (26.95 KiB) Viewed 626 times

KL-Linux https://sofijacom.github.io
KL LINUX Simple fast free

User avatar
Sofiya
Posts: 2540
Joined: Tue Dec 07, 2021 9:49 pm
Has thanked: 1570 times
Been thanked: 1727 times

Re: gtkdialog GTK3 question setting window size

Post by Sofiya »

no frame

Code: Select all

#!/bin/sh

GTKDIALOG=gtkdialog

# uncomment this line to test with gtk2dialog (if exist)
#[ $(command -v gtk2dialog) ] && GTKDIALOG=gtk2dialog || exit 0
GTKDIALOGVERS=$($GTKDIALOG -v | grep -o "GTK+.*" | awk '{print $2}' | tr -d ,)

TEXTOPTS='visible="false" width-chars="49"'
TEXTVAR='<variable>VBOX</variable>'
TEXTSHOW='<action signal="map-event">show:VBOX</action>'

if [ "$GTKDIALOGVERS" = "3" ]; then # GTK3
# create stylesheet /tmp/gtkdialog-test
echo 'box * {
  font: 10pt system-ui;
  font-style: normal;
  font-weight: normal;
  padding: 0;
  margin: 1px;
  border-radius: 8px;
  border-color: DarkViolet;
}
label {
  /*color: lightgoldenrodyellow;*/
  background-image: linear-gradient(to top right, blue 20%, #000000 80%);
}
button {
  /* color: #000000; */
  border-color: #cbd6ee;
  border-radius: 40px;
  padding-left: 5px;
  padding-right: 5px;
  background: linear-gradient(to bottom, #00acee, #0072e0);
}
button:hover {
  transition: .4s;
  box-shadow: 0 0 0 1px #cbd6ee;
}
button:focus{
  outline: none;
}
' > /tmp/gtkdialog-test

else # GTK2
# create stylesheet /tmp/gtkdialog-test
echo 'style "gtkdialog-splash" { bg[NORMAL] = "#ffaa7f" } class "GtkWindow" style "gtkdialog-splash" style "notebook" { bg[NORMAL] = "#59290f" xthickness = 1 ythickness = 1 } class "GtkNotebook" style "notebook" style "font" { font_name="DejaVu Sans Bold Italic 11" text[NORMAL]="#ffc91c" fg[NORMAL]="#000000" } class "GtkLabel" style "font"
' > /tmp/gtkdialog-test
fi

export TEST='
  <window title="Test size">
   <vbox>
    <vbox>
<text '$TEXTOPTS' align="0.5"><label>"Lorem ipsum Morbi erat ex, lacinia nec efficitur eget, sagittis ut orci. Etiam in dolor placerat, pharetra ligula et, bibendum neque. Vestibulum vitae congue lectus, sed ultricies augue. Nam iaculis elit nec velit luctus, vitae rutrum nunc imperdiet. Nunc vel turpis sit amet lectus pellentesque tincidunt. Proin commodo tincidunt enim, at sodales mi dictum ac. Maecenas molestie, metus quis malesuada dictum, leo erat egestas lacus, sit amet tristique urna magna a diam. Donec ultricies dui sit amet mi ornare egestas. Phasellus ultricies lectus non interdum pellentesque. Cras nisi tellus, feugiat sed enim quis, tristique interdum lacus. Sed vel pharetra arcu, ac fermentum neque. Morbi mollis sollicitudin varius. Ut sit amet vulputate velit.

Mauris semper neque quis lacinia volutpat. Aenean vestibulum diam ex, sit amet posuere dolor luctus non. Ut consectetur felis blandit ipsum convallis, non lobortis justo facilisis. Ut vitae velit pulvinar, pharetra libero semper, dignissim urna. Nullam quam quam, viverra eget feugiat a, interdum et erat. Morbi fringilla, eros et consequat iaculis, ligula nunc hendrerit neque, ac tincidunt massa sem vitae tortor. Nunc volutpat massa at dapibus pulvinar. Etiam risus sem, dignissim vel blandit eget, maximus lacinia purus.
  "</label>'$TEXTVAR'</text>
    </vbox>
    <hbox>
     <button ok>
      <action>EXIT:ok</action>
     </button>
    </hbox>
   </vbox>
   '$TEXTSHOW'
  </window>'
$GTKDIALOG -cp TEST --styles=/tmp/gtkdialog-test >/dev/null
Attachments
2025-04-13_03-46.png
2025-04-13_03-46.png (140.12 KiB) Viewed 579 times

KL-Linux https://sofijacom.github.io
KL LINUX Simple fast free

User avatar
MochiMoppel
Posts: 1363
Joined: Mon Jun 15, 2020 6:25 am
Location: Japan
Has thanked: 23 times
Been thanked: 548 times

Re: gtkdialog GTK3 question setting window size

Post by MochiMoppel »

fredx181 wrote: Wed Apr 09, 2025 4:19 pm

I think that I like the method from @MochiMoppel the most (without --geometry and with width-chars=..)

This may not always be the best solution. Especially when dealing with text of unknown length it is advisable to restrict the dimension to sensible values. Making the text scrollable will not only force gtkdialog and gtk2dialog to honor dimension settings, it will also avoid the need for the hacks we discussed (unless you see this as just another hack :lol: ).

Based on your original code here is a variant to play with. Using the <text> widget produces 2 same size windows, but the content format varies due to the different line wrap policies of GTK3 and GTK2. See also what happens when you run it without --dimension or with scrollable="false".

The content becomes identical when you replace <text> with <edit>. The <edit> widget seems more "stable" and provides a lot of formatting options and can be formatted to mimic a <text> widget. The only drawback is that it can't be pangofied.

Code: Select all

export TEST='
<window title="Test size">
<vbox>
	<vbox scrollable="true">
		<text>
			<input file>/usr/local/apps/ROX-Filer/Help/README</input>
		</text>
	</vbox>        
	<hbox>
		<button ok></button>
	</hbox>
</vbox>
</window>'
gtkdialog --geometry=600x400 -cp TEST >/dev/null
edit-text.jpg
edit-text.jpg (64.57 KiB) Viewed 545 times
User avatar
Sofiya
Posts: 2540
Joined: Tue Dec 07, 2021 9:49 pm
Has thanked: 1570 times
Been thanked: 1727 times

Re: gtkdialog GTK3 question setting window size

Post by Sofiya »

:thumbup:

Code: Select all

#!/bin/bash

export TEST='
<window title="Test size">
<vbox>
	<vbox scrollable="true">
		<edit>
			<input file>/home/spot/Downloads/README.md</input>
		</edit>
	</vbox>
	<hbox>
		<button ok></button>
	</hbox>
</vbox>
</window>'
gtkdialog --geometry=600x400 -cp TEST >/dev/null
Attachments
2025-04-14_15-17.png
2025-04-14_15-17.png (44.42 KiB) Viewed 521 times

KL-Linux https://sofijacom.github.io
KL LINUX Simple fast free

User avatar
don570
Posts: 796
Joined: Sat Nov 21, 2020 4:43 pm
Has thanked: 6 times
Been thanked: 156 times

hover button effect

Post by don570 »

I found a interesting effect with a button (see gif image)
using my work I published here
I made a modification to the script of Sofiya by changing the button to a SVG image.
I am using BookwormPup - ( gtkdialog not gtk2dialog )
viewtopic.php?p=146809#p146809

Code: Select all

#!/bin/sh

#make round button
FILL=white
TEXT="MY TEXT"
FONTSIZE=15

X1=$(echo "$TEXT"|wc -c)  # number of letters
W=$((${X1}*${FONTSIZE}*6*95/31/20)) # width

DISPLACE=$(($W/6+5)) # vertical value


echo '<svg version="1.1"> 
      <rect
      style="fill:'$FILL';fill-opacity:.7;stroke-width:2;stroke:black;stroke-opacity:1;"
     width='\"$W\"' height="36" rx="10" ry="10" x="1" y="1"/>
           <text style="font-family:DejaVu;font-size:'"$FONTSIZE"';fill-opacity:1"
      x='\"$DISPLACE\"'  y="25" >
'$TEXT'
     </text>
</svg>
'>/tmp/SVG_"$TEXT".svg





GTKDIALOG=gtkdialog
# uncomment this line to test with gtk2dialog (if exist)
# [ $(command -v gtk2dialog) ] && GTKDIALOG=gtk2dialog || exit 0
grep -q  'GTK+ 3' $(type -p $GTKDIALOG) && GTKDIALOGVERS=3 || GTKDIALOGVERS=2

if [ "$GTKDIALOGVERS" = "3" ]; then # GTK3
STYLES='--styles=/tmp/gtkdialog-test'
echo '
  box#mybox1 {
  background-color:firebrick;
}
  box#mybox2 {
  background-color:springgreen4
}
#mybox1,#mybox2 {
  color:white;
  font: 12px mono;
  padding: 5px;
  border-radius: 8px;
}
button {
  padding-top: 13px;
  padding-bottom: 13px;
  padding-left: 5px;
  padding-right: 5px;
  border-radius: 50%;
}
button:hover {
  color: white;
  background: linear-gradient(to bottom, red1, red4);
  transition: 0.3s;
}
' > /tmp/gtkdialog-test
fi

export MAIN_DIALOG='
<window title="Test size">
<vbox>
	<vbox name="mybox1">
		<text width-chars="49" label="Lorem ipsum Morbi erat ex, lacinia nec efficitur eget, sagittis ut orci. Etiam in dolor placerat, pharetra ligula et, bibendum neque.">
		</text>
	</vbox>
	<text label="Google translation:"></text>
	<vbox name="mybox2">
		<text width-chars="49" label="Lorem very soccer was out of, skirt, nor is it becomes a chemical, arrows to the clinical. Even in the consumer estate, quiver Reserved and drink or.">
		</text>
	</vbox>
	<hbox> 
	<button>
            <input file>/tmp/SVG_'"$TEXT"'.svg</input>
            <action>exit:EXIT</action>
     </button>
	</hbox>
</vbox>
</window>'
$GTKDIALOG -c "$STYLES" >/dev/null
hover2-ezgif.com-resize.gif
hover2-ezgif.com-resize.gif (323.92 KiB) Viewed 483 times
User avatar
don570
Posts: 796
Joined: Sat Nov 21, 2020 4:43 pm
Has thanked: 6 times
Been thanked: 156 times

Re: gtkdialog GTK3 question setting window size

Post by don570 »

Using BookwormPup

Continuing from post above....

Shape of button should be the same as the SVG image so I
rounded corners to a value of 10. The result looks nicer... :thumbup2:
(see image)

Note that button text can have an apostrophe
example --> John's text

Code: Select all

#!/bin/sh

#make round button
FILL=white
TEXT="MY TEXT"
FONTSIZE=15

X1=$(echo "$TEXT"|wc -c)  # number of letters
W=$((${X1}*${FONTSIZE}*6*95/31/20)) # width

DISPLACE=$(($W/6+5)) # vertical value


echo '<svg version="1.1"> 
      <rect
      style="fill:'$FILL';fill-opacity:.7;stroke-width:2;stroke:black;stroke-opacity:1;"
     width='\"$W\"' height="36" rx="10" ry="10" x="1" y="1"/>
           <text style="font-family:DejaVu;font-size:'"$FONTSIZE"';fill-opacity:1"
      x='\"$DISPLACE\"'  y="25" >
'$TEXT'
     </text>
</svg>
'>/tmp/SVG_"$TEXT".svg





GTKDIALOG=gtkdialog
# uncomment this line to test with gtk2dialog (if exist)
# [ $(command -v gtk2dialog) ] && GTKDIALOG=gtk2dialog || exit 0
grep -q  'GTK+ 3' $(type -p $GTKDIALOG) && GTKDIALOGVERS=3 || GTKDIALOGVERS=2

if [ "$GTKDIALOGVERS" = "3" ]; then # GTK3
STYLES='--styles=/tmp/gtkdialog-test'
echo '
  box#mybox1 {
  background-color:firebrick;
}
  box#mybox2 {
  background-color:springgreen4
}
#mybox1,#mybox2 {
  color:white;
  font: 12px mono;
  padding: 5px;
  border-radius: 8px;
}
button {
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 5px;
  padding-right: 5px;
  border-radius: 10%;
}
button:hover {
  color: white;
  background: linear-gradient(to bottom, red1, red4);
  transition: 0.3s;
}
' > /tmp/gtkdialog-test
fi

export MAIN_DIALOG='
<window title="Test size">
<vbox>
	<vbox name="mybox1">
		<text width-chars="49" label="Lorem ipsum Morbi erat ex, lacinia nec efficitur eget, sagittis ut orci. Etiam in dolor placerat, pharetra ligula et, bibendum neque.">
		</text>
	</vbox>
	<text label="Google translation:"></text>
	<vbox name="mybox2">
		<text width-chars="49" label="Lorem very soccer was out of, skirt, nor is it becomes a chemical, arrows to the clinical. Even in the consumer estate, quiver Reserved and drink or.">
		</text>
	</vbox>
	<hbox> 
	<button>
            <input file>/tmp/SVG_'"$TEXT"'.svg</input>
            <action>exit:EXIT</action>
     </button>
	</hbox>
</vbox>
</window>'
$GTKDIALOG -c "$STYLES" >/dev/null
hover10.gif
hover10.gif (128.82 KiB) Viewed 95 times
Post Reply

Return to “Programming”