GTK3: gtkdialog-splash

[fredx181]

gtkdialog-splash for GTK3:

Update 2022-10-07, modified version by adding some more options (edit: such as -close click), see viewtopic.php?p=69032#p69032

EDIT 2022-09-22 re-attached gtk3splash.tar.gz, some fixes, see: viewtopic.php?p=67452#p67452
EDIT 2023-02-05 re-attached gtk3splash.tar.gz, example script warn_msg had the wrong permissions, fixed.

gtk3splash.tar.gz

(247.72 KiB) Downloaded 48 times

(continued my investigation to make a colored splash screen by using CSS styling, see here: viewtopic.php?t=5343 )
Based on '/usr/lib/gtkdialog/box_splash' included in latest Puppy versions.
(formerly named 'gtkdialog-splash' and before that 'yaf-splash')
Modified to work with GTK3 gtkdialog.
Includes the improvements made by forum members MochiMoppel, Argolance and myself. (e.g. support for .gif images)

See also here: http://murga-linux.com/puppy/viewtopic.php?t=114446

Some Puppies may have GTK3 gtkdialog included, not sure which ones (newest Slacko ?) anyway I know that KLV-Airedale has it. (EDIT: and Vanilla Dpup too).

GTK2 may be supported for some time, but there will probably come a day that will be completely replaced by GTK3 (or GTK4 ).

Required is gtkdialog built with GTK3, for "mksplash" (see also below) required is YAD version 0.37 or higher.

How to make this work: (ReadMe included in attached tar.gz)

• Extract attached gtk3splash.tar.gz

• Place the "gtkdialog-splash" script somewhere in PATH, e.g. in /usr/local/bin/ (should "override" the existing gtkdialog-splash, see issue here: viewtopic.php?p=67949#p67949)
  EDIT: Could be that another path is the first in PATH (check with echo $PATH ), if it's e.g. /bin/ , then place it there.
  (same for "gtkdialog" included, built with GTK3, 64-bit, if not already in PATH)
  Type gtkdialog-splash --help for the options to show.

• Run "mksplash" script (YAD GUI) for to create a splash screen script (has "Preview" option).

• Some (silly ) examples included,
  (for the "klv_welcome" script, to show the .gif image, place "klv.gif" in /usr/share/pixmaps (or edit the script to another path (-icon '/path/to/klv.gif') ).

Don't expect this to be perfectly accurate (e.g. margin size cannot be IMO because it depends very much on font type and more).
Content of help (gtk3-splash --help edit: updated, extra options for the "mod" viewtopic.php?p=69032#p69032):

Code: Select all

usage: /usr/local/bin/gtk3-splash [OPTIONS] [-timeout SEC] -text TEXT | -kill PID
  -text "EXPRESSION"
  -timeout COUNT (in seconds)
  -icon GTK-XXX (for example: gtk-info all gtk-stock-symbols, default: none)
    OR path/to/pixmap.png|gif|jpeg|svg
  -icon_width WIDTH in pixels (0 = original width, default)
   (gif can be resized, but then the animation is lost, for animated gif use 0 )
  -bg COLOR (background color red, blue, yellow... or hex value, default: grey)
  -bgimg , e.g. /path/to/image.jpg, select background image
   (bg color only for border color then) 
  -bg_gradient true|false (default: true)
  -bg_gradient_sens Gradient sensitivity (soft|medium|strong)
  -ontop true|false (default: false)
  -fg COLOR (font color red, blue, yellow... or hex value, default: black)
  -placement center|mouse|top|bottom|top-right|top-left|bottom-right|bottom-left (default: center)
  -close never|mouseover|box|click (default is mouseover)
  -deco TITLE (shows windows decorations, with title)
  -font "NAME"
  -fontsize SIZE
  -fonttype (normal|italic)
  -fontweight (bold|normal|bolder|lighter)
  -align ALIGNMENT left, right or center
  -margin_width SIZE (negative value supported, e.g. -20, default: 10)
  (not perfectly accurate as depends on the font type/style)
  -margin_height SIZE (negative value supported, e.g. -20, default: 10)
  (not perfectly accurate as depends on the font type/style)
  -margin SIZE (width and height, will disable margin_width and margin_height setting)
  -border true|false (default: true)
  -wrap true|false (default: true)
  -kill PID (process ID called before:
    PID=0 auto-search for the last one,
    PID=xxxxx kill the last one read by PID=$!
  -cssfile , e.g. /path/to/custom.css (advanced) use custom css,
  (this will disable some of the other options such as font and style options)

2022-09-20_15-56-54.gif (51.78 KiB) Viewed 1714 times

2022-09-20_15-48-42.png (19.56 KiB) Viewed 1714 times

[fredx181]

Create Splash Screen script ("mksplash" script, included in above attachment, yad version 0.37 or higher required and "gtkdialog-splash" must be located in PATH).
First run "Preview" to see how it would look, then if OK, run "Generate".

2022-09-21_17-18-38.png (146.35 KiB) Viewed 1711 times

[rockedge]

Nice!

I made some small changes to have gtkdialog (gtk2+) and gtkdialog3 (gtk3+) side by side on a Bionic64. Works so far.

I am definitely going to put this in KLV-Airedale rootfs.

[Clarity]

This offers a great way for some "toast" announcements on the desktop upon an event's action; Other uses as well.

Hope the WoofCE development community sees this or has knowledge of this as their current thrust of all new PUPs are GTK3 based. Thus, if it does not show up in their generated ISOs, it will be in their repos of the generated.

Question
Is there a audio component definition that can accompany the action?

BTW: I laughed at the "Warning ..." picture you posted in the opening post. Hope others appreciate the humor, too!

[fredx181]

Question
Is there a audio component definition that can accompany the action?

Hah ! You want it all !
Well, always possible to make a simple script that shows the splash screen and play audio at the same time
Rocket Sound ? https://oldforum.puppylinux.com/viewtop ... 7#p1007097 (further in that thread @ITSMERSH shared something like that (with audio), but the attachments seem to be gone in the old forum).
EDIT: No, links from datafilehost won't work anymore, attachments are still there.

[fredx181]

I am definitely going to put this in KLV-Airedale rootfs.

I was going to suggest that later, but thought it needs some more testing first, btw better put it in 10gtkdialogGTK3_filemnt64.sfs (replace usr/local/bin/gtkdiaog-splash)

[rockedge]

Yes some more testing would be wise. But I think we can risk it for now and try it out. I will add the package to 10gtkdialogGTK3_filemnt64.sfs

[rockedge]

@fredx181 I am running into a small bug. Running on Fossapup64.
when I generate the splash it is making a syntax error in the script.
this is fresh generated and will not work. ->

Code: Select all

#!/bin/bash

# variable SPROG for the program
SPROG="gtkdialog-splash"

"$SPROG" -text "Notification Test on Fossapup64" -placement center -close mouseover -align left -bg_gradient_sens medium -icon '/root/my-documents/clipart/klv.gif' -icon_width 130 -font 'Stencilia-A' -fontsize 16 -fontstyle normal -fontweight bold -fg '#000000' -bg '#BEBEBE' -margin_width 10 -margin_height 10 -timeout 0 -bg_gradient true -border true -wrap true -ontop false 

Then I remove the quotes around $SPROG which is throwing an error. So this is working ->

Code: Select all

#!/bin/bash

# variable SPROG for the program
SPROG="gtkdialog-splash"

$SPROG  -text "Notification Test on Fossapup64" -placement center -close mouseover -align left -bg_gradient_sens medium -icon '/root/my-documents/clipart/klv.gif' -icon_width 130 -font 'Stencilia-A' -fontsize 16 -fontstyle normal -fontweight bold -fg '#000000' -bg '#BEBEBE' -margin_width 10 -margin_height 10 -timeout 0 -bg_gradient true -border true -wrap true -ontop false 

I see the nested quotations in the mksplash script but waiting for you to access the fix.

Screenshot(31).jpg (10.43 KiB) Viewed 1586 times

[MochiMoppel]

@fredx181 I removed the GTK3 restriction and ran the klv_welcome example in GTK2 because that's all I have.
Didn't bother to change the icon path and expected at least the splash text to appear but ran into syntax errors:

Code: Select all

# /root/test/klv_welcome
/root/test/gtkdialog-splash: line 309: [: : integer expression expected
/root/test/gtkdialog-splash: line 312: 30-: syntax error: operand expected (error token is "-")

Let's take this apart:

Line 309: if [ "$IM_HEIGHT" -ge "$HEIGHT" ]; then
Error occurs because the variable IM_HEIGHT is not defined. That's a coding mistake. But even with an unassigned IM_HEIGHT the line would work if double brackets were used. In this case IM_HEIGHT would have a value of 0 instead of being empty.
To avoid similar problems in other lines I suggest to change all single brackets to double brackets.

Line 312:DIFF=$(($HEIGHT-$IM_HEIGHT))
The undefined IM_HEIGHT strikes again. Code would work without dollar signs in the expression part: $((HEIGHT-IM_HEIGHT)).
What's interesting here is that an undefined variable with a preceding $ sign evaluates to 0 when it's the first of 2 arguments, but produces errors when it's the second: $(($IM_HEIGHT-30)) results in -30 , $((30-$IM_HEIGHT)) results in error.
Bottomline: Don't use dollar signs in an arithmetic $((...)) expression. Also makes the code easier to read.

However the root cause of the problems starts in line 289:

Code: Select all

IM_WIDTH=$(file "$ICON" | awk -F " x " '{print $1}' | awk '{print $NF}' | sed 's/,//')
IM_HEIGHT=$(file "$ICON" | awk -F " x " '{print $2}' | awk '{print $1}' | sed 's/,//')

case $ICON in
gtk*)
IM_WIDTH=25
IM_HEIGHT=25
;;
esac

No proper fallback in case of file $ICON not being found or file format not supported (like JPG, which also produces above errors).

[fredx181]

@fredx181 I am running into a small bug. Running on Fossapup64.
when I generate the splash it is making a syntax error in the script.
this is fresh generated and will not work. ->

Strange... for me it works OK, anyway I changed to how you suggest ($SPROG without quotes) how it's handled in mksplash.

Looking at the border style on your screenshot it seems to me that you are not using gtkdialog GTK3 or/and not using my gtkdialog-splash version.
(border looks different with GTK3 style).

Also, note that gif images can be resized by gtkdialog, but then loses it's animation, so to have animated gif, set -icon_width 0 (= original size).
(I've added this info to the helptext).
Btw, gif images can be resized by using gifsicle.

@MochiMoppel , yes, thanks, indeed if the path to the icon is wrong the error occurs.
I think I fixed it by checking (line 299) if the output of IM_WIDTH is a number, if not make IM_WIDTH and IM_HEIGHT 25.
(now if path to icon is wrong it should show the stock icon for no-icon).

Re-attached gtk3splash.tar.gz at first post.

[rockedge]

@fredx181 it works in it's original form on KLV-Airedale, only in this Fossapup64 is it giving me problems. I am trying to use both types of gtkdialog and I have to look into why the new gtkdialog-splash isn't getting priority.

Most likely the problems were created by me trying it out with gtk2 being used for most things and gtk3 for this on the same system that is really modified to begin with.

Any way I have it in KLV's gtkdialog SFS ready to go in beta20.

[Sofiya]

2022-09-20_15-56-54.gif
2022-09-20_15-48-42.png

for some reason i can't get gif - Puppy Vanilla Dpup 9.2.x

[fredx181]

2022-09-20_15-56-54.gif
2022-09-20_15-48-42.png

for some reason i can't get gif - Puppy Vanilla Dpup 9.2.x

Yes, tried just now on vanilladpup and found that the cause is that /usr/local/bin/ is not the first in PATH (copied my new gtkdialog-splash to there, but still the built-in (for gtk2 gtkdialog) has priority then):

Code: Select all

~$ which gtkdialog-splash
/bin/gtkdialog-splash 
~$ echo $PATH
/bin:/usr/bin:/sbin:/usr/sbin:/usr/local/bin:/root/my-applications/bin:/usr/games

Solution is to copy the new gtkdialog-splash to /bin/ (overwrite existing, but backup the old one first), only then it will be used (the built-in gtkdialog-splash doesn't have .gif support and isn't made to work properly with GTK3).
EDIT: Or you can leave it in /usr/local/bin and edit your splash script to /usr/local/bin/gtkdialog-splash <options> (or whatever path where the new gtkdialog-splash is located).
--------------------------------------------------------------------------------------------------------------------------------------------------------------
EDIT2: @rockedge thinking now that a similar cause could be why it didn't work properly on FossaPup for you.
EDIT3: Yes, checked FossaPup now and first in PATH is also /bin/ .
Edited first post now:

- Place the "gtkdialog-splash" script somewhere in PATH, e.g. in /usr/local/bin/ (should "override" the existing gtkdialog-splash, see issue here: viewtopic.php?p=67949#p67949)
EDIT: Could be that another path is the first in PATH (check with: echo $PATH ), if it's e.g. /bin/ , then place it there.

I am used to that most distro's have /usr/local/bin as first in PATH (so it has priority), but apparently this standard has changed ....

[Sofiya]

Code: Select all

~$ which gtkdialog-splash
/bin/gtkdialog-splash 
~$ echo $PATH
/bin:/usr/bin:/sbin:/usr/sbin:/usr/local/bin:/root/my-applications/bin:/usr/games

Thank you very much ! @fredx181 everything worked,now my puppy is alive

Code: Select all

#!/bin/bash

# variable SPROG for the program
SPROG="/usr/local/bin/gtkdialog-splash"

$SPROG -text "Welcome to Vanilla Dpup Lxde !" -placement center -close mouseover -align left -icon '/usr/share/pixmaps/Wqez.gif' -icon_width 0 -font 'DejaVu Sans' -fontsize 19 -fontstyle italic -fontweight bold -fg '#ffe92b' -bg '#1b4363' -margin_width 0 -margin_height 0 -timeout 10 -bg_gradient false -border true -wrap true -ontop false 

with a gif with a transparent background, you can change any color of the window

[Sofiya]

[fredx181]

EDIT: Or you can leave it in /usr/local/bin and edit your splash script to /usr/local/bin/gtkdialog-splash <options> (or whatever path where the new gtkdialog-splash is located)

# variable SPROG for the program
SPROG="/usr/local/bin/gtkdialog-splash"

On second thought need to say:
On itself the splash-screen code works OK when making it full path "/usr/local/bin/gtkdialog-splash" .
But... the GUI for easlily creating the splash-screen code, mksplash, doesn't work properly for the Preview then, it depends on new gtkdialog-splash being first in PATH .
Workaround can be to edit line 7 in the mksplash script from: export SPROG=gtkdialog-splash to: export SPROG=/usr/local/bin/gtkdialog-splash (should match with the location of the new gtkdialog-splash).

Or as I said, make sure that the new gtkdialog-splash is the first in PATH by replacing it in e.g. /bin .

[Sofiya]

On second thought need to say:
On itself the splash-screen code works OK when making it full path "/usr/local/bin/gtkdialog-splash" .
But... the GUI for easlily creating the splash-screen code, mksplash, doesn't work properly for the Preview then, it depends on new gtkdialog-splash being first in PATH .
Workaround can be to edit line 7 in the mksplash script from: export SPROG=gtkdialog-splash to: export SPROG=/usr/local/bin/gtkdialog-splash (should match with the location of the new gtkdialog-splash).

Or as I said, make sure that the new gtkdialog-splash is the first in PATH by replacing it in e.g. /bin .

I fixed it there too, but forgot to write about it here
Thank you! @fredx181

**back up plan if for some reason the"new wrapper" doesnt work
if you have problems you could rename gtkdialog-splash.orig back to
gtkdialog-splash

I have three desktop environments and each launches its own splash screen
here is my script

Code: Select all

#!/bin/bash

sleep 5
CURRENTWM=`cat /etc/windowmanager`
SPROG="/usr/local/bin/gtkdialog-splash"

#lxde
if [ "${CURRENTWM}" = "startlxde" ]; then
  $SPROG -text "Welcome to Vanilla Dpup Lxde !" -placement center -close never -align left -bg_gradient_sens strong -icon '/usr/share/pixmaps/Wqez.gif' -icon_width 0 -font 'DejaVu Sans' -fontsize 19 -fontstyle italic -fontweight bold -fg '#000000' -bg '#006A80' -margin_width 0 -margin_height 0 -timeout 10 -bg_gradient true -border true -wrap true -ontop false &
  mpv /usr/share/audio/desktop-login.ogg 
fi 

#jwm
if [ "${CURRENTWM}" = "jwm" ]; then 
  $SPROG -text "Welcome to Vanilla Dpup JWM !" -placement center -bg '#F7E2BD' -fg '#000000' -close never -align left -bg_gradient_sens strong -icon '/usr/share/pixmaps/Wqez.gif' -icon_width 0 -font 'DejaVu Sans' -fontsize 19 -fontstyle italic -fontweight bold -margin_width 0 -margin_height 0 -timeout 10 -bg_gradient true -border true -wrap true -ontop false &
  mpv /usr/share/audio/desktop-login.ogg 
fi

#bspwm
if [ "${CURRENTWM}" = "bspwm" ]; then
  yaf-splash -placement top -icon "/usr/share/pixmaps/bspwm_logo.png" -bg white -fg black -timeout 5 -text "Vanilla Dpup Bspwm is starting" 
fi

[Sofiya]

rounded corners are in fashion now
If only this could be added to the script it would be great.

Code: Select all

{
border-radius: 12px;						
}

if the output is in css, according to the idea, this should work
these are my thoughts, never mind

[fredx181]

I have three desktop environments and each launches its own splash screen

Nice !

Code: Select all

{
border-radius: 12px;						
}

I tried that (but not familiar with border-radius setting) and got this (on XFCE):

Screenshot(1).png (52.94 KiB) Viewed 1146 times

Works somehow but not quite. Does it work OK for you on one of the environments ?

Code: Select all

#!/bin/bash
#set -x
# splash window example for GTK3 gtkdialog
# equivalent of GTK2_RC_FILES= (gtk2)
# some gtk3 css examples: https://docs.gtk.org/gtk3/css-overview.html

# text to display
msg="`echo -e "Besides being able to define color names,
the CSS parser is also able to read
different color expressions, which can
also be nested, providing a rich language
to define colors which are derived from a
set of base colors."`"

########################## gtk3 style theme css ############################
# create dir structure for write gtk.css inside
mkdir -p /tmp/gtk3-splash/share/themes/gtk-splash_gtkrc/gtk-3.0
# write gtk.css
echo '* {
  border-radius: 12px;
  	
/* for border (gradient) */ 
background-image: -gtk-gradient (linear, center top, center bottom,
                                     from (shade (#4e9a06, 1.0)),
                                     to (shade (#4e9a06, 1.3)));
					
}
box * {

font: 15px "DejaVu Sans";
font-style: italic;
font-weight: bold;

/* background (gradient) */ 
background-image: -gtk-gradient (linear, center top, center bottom,
                                     from (shade (#4e9a06, 1.6)),
                                     to (shade (#4e9a06, 0.8)));

/* or use solid background instead of above */
/* background-color: green; */

 /* foreground (font) color */
color: #fce94f;
padding: 0;

}
' > /tmp/gtk3-splash/share/themes/gtk-splash_gtkrc/gtk-3.0/gtk.css


export GTK_DATA_PREFIX=/tmp/gtk3-splash   # gtk3 prefix, can be any folder name
export GTK_THEME=gtk-splash_gtkrc   # gtk3 theme name
##################################################################

export GTKDIALOG_SPLASH='
<window title="box_splash" type-hint="6" focus-on-map="false" skip-taskbar-hint="true" icon-name="gtk-preferences" resizable="false" decorated="false" >
<vbox>
  <notebook show-tabs="false" show-border="true" space-expand="true" space-fill="true">
    <hbox>
        <vbox>
<pixmap width-request="-1" space-expand="true" space-fill="true">
	  <width>-1</width>
	  <input file stock="gtk-info"></input>
	</pixmap>
</vbox>
      <text justify="0" width-chars="0" wrap="false" space-expand="true" space-fill="true">
        <label>"'$msg'"</label>
      </text>
      <vbox><button><input file stock="gtk-close"></input> <height>20</height><action type="exit">Exit on click close-box</action></button></vbox>
    </hbox>
  </notebook>
</vbox>

</window>'

exec gtkdialog --class=gtkdialog-splash -p GTKDIALOG_SPLASH --center --geometry=493x198

[Sofiya]

Works somehow but not quite. Does it work OK for you on one of the environments ?

boundary corners are black in all environments

[fredx181]

Works somehow but not quite. Does it work OK for you on one of the environments ?

boundary corners are black in all environments

Mmm... would be nice indeed to have rounded corners, but don't know how to make it work properly.
Btw, not sure, but I think that not all CSS styling options work with GTK3 / gtkdialog.

[Sofiya]

Mmm... would be nice indeed to have rounded corners, but don't know how to make it work properly.
Btw, not sure, but I think that not all CSS styling options work with GTK3 / gtkdialog.

Yes, as it turns out GTK3 / gtkdialog is not as simple as gtk2
I have "obconf" installed in lxde, it makes the corners rounded, and if I set the radius to 12px here and there, then I don't have black corners
If I understand correctly, this happens through the window manager
apparently you need a transparent window and overlay an image with a radius on it

inclusion in the script export GTK_CSD=1 did not work, or my hands are crooked

[dimkr]

Rounded corners using border-radius work just fine under Wayland. AFAIK you need a compositor like picom for this to work under X as well.

[Sofiya]

Rounded corners using border-radius work just fine under Wayland. AFAIK you need a compositor like picom for this to work under X as well.

Thanks@dimkr
I'll try it now

[Sofiya]

Rounded corners using border-radius work just fine under Wayland. AFAIK you need a compositor like picom for this to work under X as well.

didn't work with picom

[Sofiya]

an attempt to make the corners transparent was not successful
the lower black block is, as it were, tightly fixed, you can neither change the color nor the transparency

Code: Select all

#!/bin/bash
#set -x
# splash window example for GTK3 gtkdialog
# equivalent of GTK2_RC_FILES= (gtk2)
# some gtk3 css examples: https://docs.gtk.org/gtk3/css-overview.html  linear

# text to display
msg="`echo -e "Besides being able to define color names,
the CSS parser is also able to read
different color expressions, which can
also be nested, providing a rich language
to define colors which are derived from a
set of base colors."`"

########################## gtk3 style theme css ############################ 
# create dir structure for write gtk.css inside
mkdir -p /tmp/gtk3-splash/share/themes/gtk-splash_gtkrc/gtk-3.0
# write gtk.css
if [ "$GTKDIALOG_BUILD" = 'GTK3' ] ; then
echo '* { 
     font: 14px "DejaVu Sans";   /* font size */
     font-style: italic;
     font-weight: bold;		 
     color: rgba(9, 9, 9, 1);  /* font color */ 
      -border-radius: 10px;      /* radius inside the border */
     padding: 0;
     margin: 0;
     
/* for border (gradient) */          	         
background-image: -gtk-gradient (linear, center top, center bottom,
                                     from (shade (rgba(0, 206, 209, 0.7), 1.0)),
                                     to (shade (rgba(0, 206, 209, 0.7), 1.3)));

}
window {
     border-radius: 12px;    /* window radius */
     -background: rgba(0, 206, 209, 0.7);        /* background color */ 
     -background: red;        /* background color */         
}
window label {
     -background: no-repeat center/100% url("/usr/share/backgrounds/preview.jpg");
     background-color: rgba(22, 219, 14, 0.7);   /* Background color and transparency value */
     border-radius: 20px;          /* label radius */ 
}	
box * {
/* background (gradient) */ 		  
    background-image: -gtk-gradient (linear, center top, center bottom,
                                     from (shade (rgba(0, 206, 209, 0.7), 1.6)),
                                     to (shade (rgba(0, 206, 209, 0.7), 0.8)));
                                     
/* or use solid background instead of above */
/* background-color: xxxxxx; */                                      

}' > /tmp/gtk3-splash/share/themes/gtk-splash_gtkrc/gtk-3.0/gtk.css
fi

export GTK_DATA_PREFIX=/tmp/gtk3-splash   # gtk3 prefix, can be any folder name
export GTK_THEME=gtk-splash_gtkrc   # gtk3 theme name
##################################################################

export GTKDIALOG_SPLASH='
<window title="box_splash" type-hint="6" focus-on-map="false" skip-taskbar-hint="true" icon-name="gtk-preferences" resizable="false" decorated="false" >
<vbox>
  <notebook show-tabs="false" show-border="true" space-expand="true" space-fill="true">
    <hbox>
        <vbox>
<pixmap width-request="-1" space-expand="true" space-fill="true">
	  <width>-1</width>
	  <input file stock="gtk-info"></input>
	</pixmap>
</vbox>
      <text justify="0" width-chars="0" wrap="false" space-expand="true" space-fill="true">
        <label>"'$msg'"</label>
      </text>
      <vbox><button><input file stock="gtk-close"></input> <height>20</height><action type="exit">Exit on click close-box</action></button></vbox>
    </hbox>
  </notebook>
</vbox>

</window>'

exec gtkdialog --class=gtkdialog-splash -p GTKDIALOG_SPLASH --center --geometry=493x198

[Sofiya]

rgba(239, 12, 12, 0.97) also in rgba the last value sets the color brightness from " 0 to 1 / 0.1...0.5...07....0.75...0.85...0.97 " so up to the value "1" (color red)
0 - no color
1 - full color brightness
you can use an image instead of a color
background: no-repeat center/100% url("/usr/share/backgrounds/preview.jpg");

[fredx181]

Thanks, I like the option of an image as background:
EDIT: Could only make it display properly without border (should be possible with border, I guess, but can't figure out how (without (ugly) repeating around the icon)), this gtk3 css thingy ain't easy .
BTW, your check for gtkdialog version: if [ "$GTKDIALOG_BUILD" = 'GTK3' ] ; then .... .... fi , does not work for me, so removed it.
Replace the path /usr/share/backgrounds/test.jpg in the below script with /path/to/image of your choice.

2022-10-04_12-18-39.png (137.36 KiB) Viewed 1265 times

Code: Select all

#!/bin/bash
#set -x
# splash window example for GTK3 gtkdialog
# equivalent of GTK2_RC_FILES= (gtk2)
# some gtk3 css examples: https://docs.gtk.org/gtk3/css-overview.html 

# text to display
msg="`echo -e "Besides being able to define color names,
the CSS parser is also able to read
different color expressions, which can
also be nested, providing a rich language
to define colors which are derived from a
set of base colors."`"

########################## gtk3 style theme css ############################ linear,  #4e9a06;
# create dir structure for write gtk.css inside
mkdir -p /tmp/gtk3-splash/share/themes/gtk-splash_gtkrc/gtk-3.0
# write gtk.css

echo '* { 
     font: 17px "DejaVu Sans";   /* font size */
     font-style: italic;
     font-weight: bold;		 
     color: #ffffff;  /* font color */ 

     padding: 0;
     margin: 0;         	         
}

window {
     background: no-repeat center/100% url("/usr/share/backgrounds/test.jpg");

}	
' > /tmp/gtk3-splash/share/themes/gtk-splash_gtkrc/gtk-3.0/gtk.css

export GTK_DATA_PREFIX=/tmp/gtk3-splash   # gtk3 prefix, can be any folder name
export GTK_THEME=gtk-splash_gtkrc   # gtk3 theme name
##################################################################

export GTKDIALOG_SPLASH='
<window title="box_splash" type-hint="6" focus-on-map="false" skip-taskbar-hint="true" icon-name="gtk-preferences" resizable="false" decorated="false" >
<vbox>
  <notebook show-tabs="false" show-border="true" space-expand="true" space-fill="true">
    <hbox>
        <vbox>
<pixmap width-request="-1" space-expand="true" space-fill="true">
	  <width>-1</width>
	  <input file stock="gtk-info"></input>
	</pixmap>
</vbox>
      <text justify="0" width-chars="0" wrap="false" space-expand="true" space-fill="true">
        <label>"'$msg'"</label>
      </text>
      <vbox><button><input file stock="gtk-quit"></input> <height>20</height><action type="exit">Exit on click close-box</action></button></vbox>
    </hbox>
  </notebook>
</vbox>

</window>'

exec gtkdialog --class=gtkdialog-splash -p GTKDIALOG_SPLASH --center --geometry=555x260

[Sofiya]

I do not quite understand what you mean about the repetition around the icon
was not possible to make the corners completely transparent, but that's how progress is already at least not black corners.

Replace the path /usr/share/backgrounds/test.jpg in the below script with /path/to/image of your choice.

Code: Select all

#!/bin/bash
#set -x
# splash window example for GTK3 gtkdialog
# equivalent of GTK2_RC_FILES= (gtk2)
# some gtk3 css examples: https://docs.gtk.org/gtk3/css-overview.html 

# text to display
msg="`echo -e "Besides being able to define color names,
the CSS parser is also able to read
different color expressions, which can
also be nested, providing a rich language
to define colors which are derived from a
set of base colors."`"

########################## gtk3 style theme css ############################ 
# create dir structure for write gtk.css inside
mkdir -p /tmp/gtk3-splash/share/themes/gtk-splash_gtkrc/gtk-3.0
# write gtk.css

echo '* { 
     font-family: DejaVu Sans;   /* font size */
     font-size: 12pt;                  /* font size */
     font-style: italic;
     font-weight: bold;		 
     color: rgba(255, 255, 255, 1);  /* font color */
     padding: 0px;
     margin: 0px;
}     	 
window {                                                     
     background-image: url("/usr/share/backgrounds/test.jpg");     /* image path */
     box-shadow: 0px 0px 0px 10px rgba(255, 255, 255, 0.5);         /*  box shade color */
     background-repeat: no-repeat;   /* ​​​​​image is not repeated */
     background-position: center;   /* font size */
     background-size: 100% 100%;        /* image size */
     border: 3px solid #00f000;   /* border thickness, color */
     border-radius: 10px;	     /* corner rounding */                        
}	
' > /tmp/gtk3-splash/share/themes/gtk-splash_gtkrc/gtk-3.0/gtk.css

export GTK_DATA_PREFIX=/tmp/gtk3-splash   # gtk3 prefix, can be any folder name
export GTK_THEME=gtk-splash_gtkrc   # gtk3 theme name
##################################################################

export GTKDIALOG_SPLASH='
<window title="box_splash" type-hint="6" focus-on-map="false" skip-taskbar-hint="true" icon-name="gtk-preferences" resizable="false" decorated="false" >
<vbox>
  <notebook show-tabs="false" show-border="true" space-expand="true" space-fill="true">
    <hbox>
        <vbox>
<pixmap width-request="-1" space-expand="true" space-fill="true">
	  <width>-1</width>
	  <input file stock="gtk-info"></input>
	</pixmap>
</vbox>
      <text justify="0" width-chars="0" wrap="false" space-expand="true" space-fill="true">
        <label>"'$msg'"</label>
      </text>
      <vbox><button><input file stock="gtk-quit"></input> <height>20</height><action type="exit">Exit on click close-box</action></button></vbox>
    </hbox>
  </notebook>
</vbox>

</window>'

exec gtkdialog --class=gtkdialog-splash -p GTKDIALOG_SPLASH --center --geometry=500x210

[fredx181]

@Sofiya

I do not quite understand what you mean about the repetition around the icon

Well, I tried by modifying the simple css created by gtkdialog-splash, can't really remember what (that caused the repeating) (and this css styling thing is not really my talent I guess ).
What you did with settings for border etc... is nice, I have in mind to make some additions (e.g. background image) for the gtkdialog-splash script, but don't want it over-complicated, no more than just ideas at the moment.