Rich custom GUI with Glade and CSS by Juan Pablo Ugarte GU ADEC - PowerPoint PPT Presentation

Rich custom GUI with Glade and CSS by Juan Pablo Ugarte GU ADEC 2013 Brno, Czech Republic August 1 - 8 TM Conference The GNOME ● GUADEC ●

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

Graphical User Intefaces Graphical User Intefaces XMMS/Audacious Winamp classic interface Audacious Gtk Interface

SyncTV Desktop Player - Mockup SyncTV Desktop Player - Mockup SyncTV artist design

SyncTV Desktop Player - Gtk 2.0 SyncTV Desktop Player - Gtk 2.0

SyncTV Desktop Player - Gtk 2.0 SyncTV Desktop Player - Gtk 2.0

Rich custom GUI with Glade and CSS 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 Baccarat Mockup << Min/Max Bet Frame Use images for: ∙ Logo ∙ Backgrounds ∙ Icons CSS for: ∙ all text << Play Grid ∙ custom elements (frames and grid) << Information Frame

Glade and the widget hierarchy Glade and the widget hierarchy

Glade + CSS Glade + CSS

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

Implementing Info Frame Implementing Info Frame GtkFrame.frame_shadow { border: 0px; padding: 0px 4px 4px 0px; border-radius: 16px; background-color: #47423F; } + Player: 43 GtkFrame.frame_default { Banker:23 = border: 0px; padding: 0px; border-radius: 16px; Tie: 03 background-color: #5c7dbe; } + .font_default { color: white; font-size: 42px; text-shadow: 2px 2px 2px black; }

Implementing the Play Grid 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 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 Baccarat CSS/GTK implementation Finished Product

To Do List 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 <style type="text/css" href="file.css"> * to GtkBuilder?????????? * */ while (slow ()) make_it_faster ();

BTW this presentation was made with Glade and CSS

Thank You Gracias Email: juanpablougarte@gmail.com jpu@gnome.org Blog: blogs.gnome.org/xjuan ██████████████ ██ ██ ██ ██ ██████ ██████████████ IRC: xjuan ██ ██ ████████ ██ ██ ██ ██ ██ ██ ██ ██████ ██ ██████ ██ ██ ██ ██ ██████ ██ ██ ██████ ██ ██████ ████ ████████ ██ ██ ██████ ██ ██ ██████ ██ ██ ████ ██ ██ ██ ██████ ██ ██ ██ ████ ██ ████████ ██ ██ ██████████████ ██ ██ ██ ██ ██ ██ ██ ██████████████ ██ ████████████████ ████████ ██ ██ ██████████████████ ██ ██████ ██ ██ ██ ██ ██ ██ ██ ████ ████████████ ██ ████ ████ ██████████ ██ ██ ████ ██ ████ ██████████ ████████ ████ ██ ████████████ ██ ██ ████ ██ ██████ ████████ ██ ██ ██ ████ ████ ████ ████ ██ ████ ██ ████ ██████ ████████████ ██ ██ ██ ██████ ████████ ████ ██ ██ ██ ██ ██ ██████ ██ ██ ████ ██████████ ██ ██ ██ ██ ████ ██ ██ ████ ██ ██ ████ ██ ██ ██ ████ ██ ██ ██████ ██████ ██████ ██ ██ ██ ████ ██ ██████████ ██████ ██ ████ ██ ██ ████ ████████ ██ ██ ██████ ██████████████ Handout: ██ ██ ██ ██ ██ ██████████ ██████████████ ████ ██████████ ██ ████ ██ ██ ██ ██ ██████████ ██ ██ ██ ████ http://people.gnome.org/~jpu/docs\ ██ ██████ ██ ██ ████ ████ ████████████████ ██ ██████ ██ ██ ████ ██████ ██ ██ ████ ██ ██ ██ ██████ ██ ██ ██ ████ ██████ ██ ██ ██ ██ /2013-GUADEC/ ██ ██ ██████ ██ ██████ ██ ████████ ██ ██████████████ ██ ██ ██ ██████ ██ ██