Rich custom GUI with Glade and CSS

by Juan Pablo Ugarte

GUADEC 2013 Brno, Czech Republic August 1 - 8

TM The GNOME Conference ●GUADEC● Graphical User Intefaces

GNOME 2.10 screenshot showing Rhythmbox, GThumb, gedit and Nautilus Graphical User Intefaces

XMMS/Audacious Winamp classic interface

Audacious Gtk Interface SyncTV Desktop Player - Mockup

SyncTV artist design SyncTV Desktop Player - Gtk 2.0 SyncTV Desktop Player - Gtk 2.0 Rich custom GUI with Glade and CSS

Enough with the screenshots!

∙ Case Study: Baccarat display for Casinos ∙ Artist mockup ∙ CSS implementation ∙ Final Product Baccarat Mockup

Use images for: << Min/Max Bet Frame ∙ Logo ∙ Backgrounds ∙ Icons

CSS for: ∙ all text ∙ custom elements << Play Grid (frames and grid)

<< Information Frame Glade and the widget hierarchy Glade + CSS Implementing Bet Frame

.font_bet { color: #47423f; font-size: 44px; font-weight:bold; } + MIN: 10 GtkFrame.frame_bet { = border: 6px solid; MAX: 50 border-color: #c1c0bf; border-radius: 24px; background-color: white; box-shadow: 2px 2px 4px black inset; } Implementing Info Frame

GtkFrame.frame_shadow { border: 0px; padding: 0px 4px 4px 0px; border-radius: 16px; background-color: #47423F; }

+ Player: 43 GtkFrame.frame_default { border: 0px; padding: 0px; = Banker: 23 border-radius: 16px; background-color: #5c7dbe; Tie: 03 }

+ .font_default { color: white; font-size: 42px; text-shadow: 2px 2px 2px black; } Implementing the Play Grid

GtkFrame.frame_grid { border: 8px solid #c1c0bf; GtkGrid.frame_grid > GtkImage { border-radius: 32px; box-shadow: 2px 2px 2px grey inset; background-image: -gtk-gradient (linear, } left top, right bottom, GtkImage.grid_child_odd { from(#9d9a99), to(#d6d5d4)); background-color: #ededeb; box-shadow: 2px 2px 2px grey inset; } } Baccarat CSS/GTK implementation

@keyframes player_transition { 0% { background-image: none;} 100% { background-image: url("blue.png");} }

GtkImage.grid_top_left { GtkImage.grid_top_right { border-radius: border-radius: 22px 0px 0px 0px; 0px 22px 0px 0px; } }

GtkImage.grid_bottom_left { GtkImage.grid_bottom_right { border-radius: border-radius: 0px 0px 0px 22px; 0px 0px 22px 0px; } }

GtkGrid.frame_grid > GtkImage.bg_player_anim { animation: player_transition .5s 1 linear; } Baccarat CSS/GTK implementation

Finished Product To Do List xjuan@Xjuan:~/sources/glade$ git checkout master xjuan@Xjuan:~/sources/glade$ git rebase css

/* * TODO: * * Add a way to disable CSS animations * in the workspace. * * Add