; Module/File: Window_BackgroundImageCssGtk3_Demo2.pb ; Function: Set an Window background image with optional animation by CSS - Linux gtk3/PB5.46 ; Author: Omi ; Date: Jun. 06, 2018 ; Version: 0.1 ; Target Compiler: 5.42/5.46/5.62/5.7 ; Target OS: Linux: (X/K/L)ubuntu, Mint, 32/64, Ascii/Uni ; Link to topic: http://www.purebasic.fr/english/viewtopic.php?f=15&t=64409 ;-------------------------------------------------------------- ;The visibility of the image depends on the distro + version + 'theme'/'Gtk-Design'. ;from an gtk3-example ... ; Problems with the new Layout in PB5.46+ 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) gdk_screen_get_rgba_visual(*screen.GdkScreen) gtk_widget_is_composited(*widget.GtkWidget) gdk_rgba_parse(*rgba, spec.p-utf8) gtk_widget_override_background_color(*widget.GtkWidget, state, color) EndImport ; Object constants #Win_Main= 0 #But1 = 0 #But2 = 1 #But3 = 2 #But4 = 3 #But5 = 4 CompilerIf Defined(GdkRGBA, #PB_Structure) CompilerElse Structure GdkRGBA red.d green.d blue.d alpha.d EndStructure CompilerEndIf 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$ + "}" Global bgcolor.GdkRGBA Procedure Window_SetBkGndMovingImage(Window, File.s, BGPosition.s, BGRepeat.s) Protected.s WinBkGndCSS= ".background {" + #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= ".background {" + #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= ".background {" + #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. CSS-background-img (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) ;for older gtk3 - as long as it may work ... CompilerIf #PB_Compiler_Version > 545 Protected *Layout.GtkLayout= g_list_nth_data_(gtk_container_get_children_(gtk_bin_get_child_(WindowID(#Win_Main))), 0) gdk_rgba_parse(@bgcolor, "rgba(1,1,1,0.0)") gtk_widget_override_background_color(*Layout, 0, bgcolor) CompilerEndIf 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") Debug "Transparency : " + Str(gdk_screen_get_rgba_visual(gdk_screen_get_default_())); '0' is no transparency available Debug "Alpha channel: " + Str(gtk_widget_is_composited(WindowID(#Win_Main))); has alpha channel 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 gQuit g_object_unref_(*gProvider) ; IDE Options = PureBasic 5.70 LTS beta 3 (Linux - x64) ; CursorPosition = 12 ; Folding = -- ; EnableXP ; EnableUnicode