Window background image on gtk3 with CSS
Posted: Sat Dec 26, 2015 10:00 am
I've made trials on a code, to show window background images on gtk3 and for weeks it runs without 'warnings' and 'errors' - but on the used Kubuntu / KDE and my 'theme' nothing was to see 
.
And so I didn't notice that it works and continued with new attempts
.
This morning i've done a quick trial on Xubuntu - and it works, even visible
. Then i've tested it successfully on other distros (Mint 17.2, Lubuntu, Kubuntu) with good 'themes'.
That's why i made a demo out of this code, to show once the benefits of gtk3 .
It uses CSS and doesn't require a decoder for PNG images.Have fun with it - if your theme let you ...
Best Regard and nice days, Charly
PS: [edit] removed 2 unused imports from code
.And so I didn't notice that it works and continued with new attempts
.This morning i've done a quick trial on Xubuntu - and it works, even visible
. Then i've tested it successfully on other distros (Mint 17.2, Lubuntu, Kubuntu) with good 'themes'.That's why i made a demo out of this code, to show once the benefits of gtk3
.It uses CSS and doesn't require a decoder for PNG images.
Code: Select all
;On Kubuntu 15.x use e.g. gtk3-Design 'Zukitwo', Default. Others may not show the images as on Std.-Ubuntu 13.x
;from an gtk3-example ...
;Omi:
EnableExplicit
ImportC ""
gtk_css_provider_load_from_data(*css_provider, data_.p-utf8, length, *error.GError)
gtk_css_provider_new()
gtk_style_context_add_provider(*context, *provider, priority)
gtk_widget_get_style_context(*widget.GtkWidget)
EndImport
; Object constants
#Win_Main= 0
#But1 = 0
#But2 = 1
#But3 = 2
#But4 = 3
#But5 = 4
Global.i gEvent, gEventWin, gQuit
Global *gProvider
Global.s gImgFile= #PB_Compiler_Home + "./logo.png"; no PngImgDecoder required
Global.s gMoveImage= "@keyframes move-the-image {" + #LF$ +
"0% { background-position: 40.00% 75.00%; }" + #LF$ +
"3.125% { background-position: 45.19% 76.11%; }" + #LF$ +
"6.25% { background-position: 50.79% 76.04%; }" + #LF$ +
"9.375% { background-position: 56.46% 74.64%; }" + #LF$ +
"12.5% { background-position: 61.84% 71.84%; }" + #LF$ +
"15.625% { background-position: 66.55% 67.74%; }" + #LF$ +
"18.75% { background-position: 70.21% 62.51%; }" + #LF$ +
"21.875% { background-position: 72.54% 56.47%; }" + #LF$ +
"25% { background-position: 73.33% 50.00%; }" + #LF$ +
"28.125% { background-position: 72.54% 43.53%; }" + #LF$ +
"31.25% { background-position: 70.21% 37.49%; }" + #LF$ +
"34.375% { background-position: 66.55% 32.26%; }" + #LF$ +
"37.5% { background-position: 61.84% 28.16%; }" + #LF$ +
"40.625% { background-position: 56.46% 25.36%; }" + #LF$ +
"43.75% { background-position: 50.79% 23.96%; }" + #LF$ +
"46.875% { background-position: 45.19% 23.89%; }" + #LF$ +
"50% { background-position: 40.00% 25.00%; }" + #LF$ +
"53.125% { background-position: 35.44% 27.07%; }" + #LF$ +
"56.25% { background-position: 31.65% 29.85%; }" + #LF$ +
"59.375% { background-position: 28.68% 33.06%; }" + #LF$ +
"62.5% { background-position: 26.49% 36.49%; }" + #LF$ +
"65.625% { background-position: 24.97% 39.96%; }" + #LF$ +
"68.75% { background-position: 24.02% 43.38%; }" + #LF$ +
"71.875% { background-position: 23.50% 46.72%; }" + #LF$ +
"75% { background-position: 23.33% 50.00%; }" + #LF$ +
"78.125% { background-position: 23.50% 53.28%; }" + #LF$ +
"81.25% { background-position: 24.02% 56.62%; }" + #LF$ +
"84.375% { background-position: 24.97% 60.04%; }" + #LF$ +
"87.5% { background-position: 26.49% 63.51%; }" + #LF$ +
"90.625% { background-position: 28.68% 66.94%; }" + #LF$ +
"93.75% { background-position: 31.65% 70.15%; }" + #LF$ +
"96.875% { background-position: 35.44% 72.93%; }" + #LF$ +
"100% { background-position: 40.00% 75.00%; }" + #LF$ + "}"
Global.s gPumpingImage= "@keyframes size-the-image {" + #LF$ +
"0% { background-size: 64px }" + #LF$ +
"100% { background-size: 36px }" + #LF$ + "}"
Procedure Window_SetBkGndMovingImage(Window, File.s, BGPosition.s, BGRepeat.s)
Protected.s WinBkGndCSS= "GtkWindow {" + #LF$ +
"background-image: url(" + #DQUOTE$ + File + #DQUOTE$ + ");" + #LF$ +
"background-position: " + BGPosition + ";" + #LF$ +
"background-repeat: " + BGRepeat + ";" + #LF$ +
"animation: move-the-image infinite linear 3s;" + #LF$ + "}"
gtk_css_provider_load_from_data(*gProvider, gMoveImage + WinBkGndCSS, -1, #Null)
gtk_style_context_add_provider(gtk_widget_get_style_context(WindowID(Window)), *gProvider, 800)
EndProcedure
Procedure Window_SetBkGndPumpingImage(Window, File.s, BGPosition.s, BGRepeat.s)
Protected.s WinBkGndCSS= "GtkWindow {" + #LF$ +
"background-image: url(" + #DQUOTE$ + File + #DQUOTE$ + ");" + #LF$ +
"background-position: " + BGPosition + ";" + #LF$ +
"background-repeat: " + BGRepeat + ";" + #LF$ +
"animation: size-the-image infinite alternate ease-in-out 0.50s;" + #LF$ + "}"
gtk_css_provider_load_from_data(*gProvider, gPumpingImage + WinBkGndCSS, -1, #Null)
gtk_style_context_add_provider(gtk_widget_get_style_context(WindowID(Window)), *gProvider, 800)
EndProcedure
Procedure Window_SetBkGndImage(Window, File.s, BGPosition.s, BGSize.s, BGRepeat.s)
Protected.s WinBkGndCSS= "GtkWindow {" + #LF$ +
"background-image: url(" + #DQUOTE$ + File + #DQUOTE$ + ");" + #LF$ +
"background-position: " + BGPosition + ";" + #LF$ +
"background-repeat: " + BGRepeat + ";" + #LF$ +
"background-size: " + BGSize + ";" + #LF$ + "}"
gtk_css_provider_load_from_data(*gProvider, WinBkGndCSS, -1, #Null)
gtk_style_context_add_provider(gtk_widget_get_style_context(WindowID(Window)), *gProvider, 800)
EndProcedure
Procedure Create_WinMain()
If OpenWindow(#Win_Main, 300, 200, 500, 200, "Window w. background-pic (gtk3)", #PB_Window_SystemMenu | #PB_Window_ScreenCentered)
TextGadget(#PB_Any, 5, 5, 200, 22, "Choose display-mode ...")
OptionGadget(#But1, 5, 30, 200, 26, "Pic repeated")
OptionGadget(#But2, 5, 55, 200, 26, "Pic centered, no repeat")
OptionGadget(#But3, 5, 80, 200, 26, "Pic centered, no repeat, fullsize")
OptionGadget(#But4, 5, 105, 200, 26, "Moving picture")
OptionGadget(#But5, 5, 130, 200, 26, "Pumping picture")
SetGadgetState(#But2, #True)
EndIf
EndProcedure
Create_WinMain()
*gProvider= gtk_css_provider_new()
; Position: center, top, right, bottom, left, x%, xpx
; Size: auto, x%
; Repeat: repeat, no-repeat, repeat-x, repeat-y, space, round
Window_SetBkGndImage(#Win_Main, gImgFile, "center center", "auto auto", "no-repeat")
Repeat
gEvent = WaitWindowEvent()
gEventWin= EventWindow()
If gEventWin = #Win_Main
Select gEvent
Case #PB_Event_CloseWindow
gQuit= #True
Case #PB_Event_Gadget
Select EventGadget()
Case #But1; image repeated
Window_SetBkGndImage(#Win_Main, gImgFile, "0% 0%", "auto auto", "repeat"); WindowID, ImgFilename, Pos, Size, Repeat
Case #But2; image centered + autosize
Window_SetBkGndImage(#Win_Main, gImgFile, "center center", "auto auto", "no-repeat")
Case #But3; image fullsize
Window_SetBkGndImage(#Win_Main, gImgFile, "center center", "100% 100%", "no-repeat")
Case #But4; image with elliptical move
Window_SetBkGndMovingImage(#Win_Main, gImgFile, "0% 0%", "no-repeat")
Case #But5; image with pumping size
Window_SetBkGndPumpingImage(#Win_Main, gImgFile, "center center", "no-repeat")
EndSelect
EndSelect
EndIf
Until gQuitBest Regard and nice days, Charly
PS: [edit] removed 2 unused imports from code