GNOME.org
 

[gtk+/wip/css: 16/16] gtk-demo: Add animated pixbufs example

commit bea7f308f2fa7b0379a13f33ad67a822136ee8ce
Author: Benjamin Otte <otte redhat com>
Date:   Tue May 22 13:41:05 2012 +0200

    gtk-demo: Add animated pixbufs example

 demos/gtk-demo/Makefile.am        |    2 +
 demos/gtk-demo/css_pixbufs.c      |  127 +++++++++++++++++++++++++++++++++++++
 demos/gtk-demo/css_pixbufs.css    |   74 +++++++++++++++++++++
 demos/gtk-demo/demo.gresource.xml |   12 ++++
 4 files changed, 215 insertions(+), 0 deletions(-)
---
diff --git a/demos/gtk-demo/Makefile.am b/demos/gtk-demo/Makefile.am
index 3d6e540..3d533d2 100644
--- a/demos/gtk-demo/Makefile.am
+++ b/demos/gtk-demo/Makefile.am
@@ -16,6 +16,7 @@ demos =						\
 	colorsel.c				\
 	combobox.c				\
 	css_basics.c				\
+	css_pixbufs.c				\
 	dialog.c				\
 	drawingarea.c				\
 	editable_cells.c			\
@@ -113,6 +114,7 @@ RESOURCES=	application.ui			\
 		gtk-logo-24.png			\
 		gtk-logo-48.png			\
 		css_basics.css			\
+		css_pixbufs.css			\
 		reset.css
 
 IMAGEFILES=	alphatest.png		\
diff --git a/demos/gtk-demo/css_pixbufs.c b/demos/gtk-demo/css_pixbufs.c
new file mode 100644
index 0000000..c2b32b5
--- /dev/null
+++ b/demos/gtk-demo/css_pixbufs.c
@@ -0,0 +1,127 @@
+/* CSS Theming/Animated backgrounds
+ *
+ * This demo is done in honour of the Pixbufs demo further down. It is done exclusively
+ * with CSS as the background of the window.
+ */
+
+#include <gtk/gtk.h>
+
+static GtkWidget *window = NULL;
+
+static void
+show_parsing_error (GtkCssProvider *provider,
+                    GtkCssSection  *section,
+                    const GError   *error,
+                    GtkTextBuffer  *buffer)
+{
+  GtkTextIter start, end;
+  const char *tag_name;
+
+  gtk_text_buffer_get_iter_at_line_index (buffer,
+                                          &start,
+                                          gtk_css_section_get_start_line (section),
+                                          gtk_css_section_get_start_position (section));
+  gtk_text_buffer_get_iter_at_line_index (buffer,
+                                          &end,
+                                          gtk_css_section_get_end_line (section),
+                                          gtk_css_section_get_end_position (section));
+
+  if (g_error_matches (error, GTK_CSS_PROVIDER_ERROR, GTK_CSS_PROVIDER_ERROR_DEPRECATED))
+    tag_name = "warning";
+  else
+    tag_name = "error";
+
+  gtk_text_buffer_apply_tag_by_name (buffer, tag_name, &start, &end);
+}
+                    
+static void
+css_text_changed (GtkTextBuffer  *buffer,
+                  GtkCssProvider *provider)
+{
+  GtkTextIter start, end;
+  char *text;
+
+  gtk_text_buffer_get_start_iter (buffer, &start);
+  gtk_text_buffer_get_end_iter (buffer, &end);
+  gtk_text_buffer_remove_all_tags (buffer, &start, &end);
+
+  text = gtk_text_buffer_get_text (buffer, &start, &end, FALSE);
+  gtk_css_provider_load_from_data (provider, text, -1, NULL);
+  g_free (text);
+
+  gtk_style_context_reset_widgets (gdk_screen_get_default ());
+}
+
+static void
+apply_css (GtkWidget *widget, GtkStyleProvider *provider)
+{
+  gtk_style_context_add_provider (gtk_widget_get_style_context (widget), provider, G_MAXUINT);
+  if (GTK_IS_CONTAINER (widget))
+    gtk_container_forall (GTK_CONTAINER (widget), (GtkCallback) apply_css, provider);
+}
+
+GtkWidget *
+do_css_pixbufs (GtkWidget *do_widget)
+{
+  if (!window)
+    {
+      GtkWidget *paned, *container, *child;
+      GtkStyleProvider *provider;
+      GtkTextBuffer *text;
+      GBytes *bytes;
+      
+      window = gtk_window_new (GTK_WINDOW_TOPLEVEL);
+      gtk_window_set_transient_for (GTK_WINDOW (window), GTK_WINDOW (do_widget));
+      gtk_window_set_default_size (GTK_WINDOW (window), 400, 300);
+      g_signal_connect (window, "destroy",
+                        G_CALLBACK (gtk_widget_destroyed), &window);
+
+      paned = gtk_paned_new (GTK_ORIENTATION_VERTICAL);
+      gtk_container_add (GTK_CONTAINER (window), paned);
+
+      /* Need a filler so we get a handle */
+      child = gtk_box_new (GTK_ORIENTATION_VERTICAL, 0);
+      gtk_container_add (GTK_CONTAINER (paned), child);
+
+      text = gtk_text_buffer_new (NULL);
+      gtk_text_buffer_create_tag (text,
+                                  "warning",
+                                  "underline", PANGO_UNDERLINE_SINGLE,
+                                  NULL);
+      gtk_text_buffer_create_tag (text,
+                                  "error",
+                                  "underline", PANGO_UNDERLINE_ERROR,
+                                  NULL);
+
+      provider = GTK_STYLE_PROVIDER (gtk_css_provider_new ());
+      
+      container = gtk_scrolled_window_new (NULL, NULL);
+      gtk_container_add (GTK_CONTAINER (paned), container);
+      child = gtk_text_view_new_with_buffer (text);
+      gtk_container_add (GTK_CONTAINER (container), child);
+      g_signal_connect (text,
+                        "changed",
+                        G_CALLBACK (css_text_changed),
+                        provider);
+
+      bytes = g_resources_lookup_data ("/css_pixbufs/gtk.css", 0, NULL);
+      gtk_text_buffer_set_text (text, g_bytes_get_data (bytes, NULL), g_bytes_get_size (bytes));
+
+      g_signal_connect (provider,
+                        "parsing-error",
+                        G_CALLBACK (show_parsing_error),
+                        gtk_text_view_get_buffer (GTK_TEXT_VIEW (child)));
+
+      apply_css (window, provider);
+    }
+
+  if (!gtk_widget_get_visible (window))
+    gtk_widget_show_all (window);
+  else
+    {
+      gtk_widget_destroy (window);
+      window = NULL;
+    }
+
+  return window;
+}
diff --git a/demos/gtk-demo/css_pixbufs.css b/demos/gtk-demo/css_pixbufs.css
new file mode 100644
index 0000000..003caf2
--- /dev/null
+++ b/demos/gtk-demo/css_pixbufs.css
@@ -0,0 +1,74 @@
+/* You can edit the text in this window to change the
+ * appearance of this Window.
+ * Be careful, if you screw it up, nothing might be visible
+ * anymore. :)
+ */
+
+/* This CSS resets all properties to their defaults values
+ *    and overrides all user settings and the theme in use */
+ import url("reset.css");
+
+ keyframes move-the-image {
+0% { background-position: 50.00% 75.00%, 67.68% 67.68%, 75.00% 50.00%, 67.68% 32.32%, 50.00% 25.00%, 32.32% 32.32%, 25.00% 50.00%, 32.32% 67.68%, 0% 0%; }
+3.125% { background-position: 55.19% 76.11%, 72.14% 64.79%, 76.11% 44.81%, 64.79% 27.86%, 44.81% 23.89%, 27.86% 35.21%, 23.89% 55.19%, 35.21% 72.14%, 0% 0%; }
+6.25% { background-position: 60.79% 76.04%, 76.04% 60.79%, 76.04% 39.21%, 60.79% 23.96%, 39.21% 23.96%, 23.96% 39.21%, 23.96% 60.79%, 39.21% 76.04%, 0% 0%; }
+9.375% { background-position: 66.46% 74.64%, 79.06% 55.78%, 74.64% 33.54%, 55.78% 20.94%, 33.54% 25.36%, 20.94% 44.22%, 25.36% 66.46%, 44.22% 79.06%, 0% 0%; }
+12.5% { background-position: 71.84% 71.84%, 80.89% 50.00%, 71.84% 28.16%, 50.00% 19.11%, 28.16% 28.16%, 19.11% 50.00%, 28.16% 71.84%, 50.00% 80.89%, 0% 0%; }
+15.625% { background-position: 76.55% 67.74%, 81.32% 43.77%, 67.74% 23.45%, 43.77% 18.68%, 23.45% 32.26%, 18.68% 56.23%, 32.26% 76.55%, 56.23% 81.32%, 0% 0%; }
+18.75% { background-position: 80.21% 62.51%, 80.21% 37.49%, 62.51% 19.79%, 37.49% 19.79%, 19.79% 37.49%, 19.79% 62.51%, 37.49% 80.21%, 62.51% 80.21%, 0% 0%; }
+21.875% { background-position: 82.54% 56.47%, 77.58% 31.57%, 56.47% 17.46%, 31.57% 22.42%, 17.46% 43.53%, 22.42% 68.43%, 43.53% 82.54%, 68.43% 77.58%, 0% 0%; }
+25% { background-position: 83.33% 50.00%, 73.57% 26.43%, 50.00% 16.67%, 26.43% 26.43%, 16.67% 50.00%, 26.43% 73.57%, 50.00% 83.33%, 73.57% 73.57%, 0% 0%; }
+28.125% { background-position: 82.54% 43.53%, 68.43% 22.42%, 43.53% 17.46%, 22.42% 31.57%, 17.46% 56.47%, 31.57% 77.58%, 56.47% 82.54%, 77.58% 68.43%, 0% 0%; }
+31.25% { background-position: 80.21% 37.49%, 62.51% 19.79%, 37.49% 19.79%, 19.79% 37.49%, 19.79% 62.51%, 37.49% 80.21%, 62.51% 80.21%, 80.21% 62.51%, 0% 0%; }
+34.375% { background-position: 76.55% 32.26%, 56.23% 18.68%, 32.26% 23.45%, 18.68% 43.77%, 23.45% 67.74%, 43.77% 81.32%, 67.74% 76.55%, 81.32% 56.23%, 0% 0%; }
+37.5% { background-position: 71.84% 28.16%, 50.00% 19.11%, 28.16% 28.16%, 19.11% 50.00%, 28.16% 71.84%, 50.00% 80.89%, 71.84% 71.84%, 80.89% 50.00%, 0% 0%; }
+40.625% { background-position: 66.46% 25.36%, 44.22% 20.94%, 25.36% 33.54%, 20.94% 55.78%, 33.54% 74.64%, 55.78% 79.06%, 74.64% 66.46%, 79.06% 44.22%, 0% 0%; }
+43.75% { background-position: 60.79% 23.96%, 39.21% 23.96%, 23.96% 39.21%, 23.96% 60.79%, 39.21% 76.04%, 60.79% 76.04%, 76.04% 60.79%, 76.04% 39.21%, 0% 0%; }
+46.875% { background-position: 55.19% 23.89%, 35.21% 27.86%, 23.89% 44.81%, 27.86% 64.79%, 44.81% 76.11%, 64.79% 72.14%, 76.11% 55.19%, 72.14% 35.21%, 0% 0%; }
+50% { background-position: 50.00% 25.00%, 32.32% 32.32%, 25.00% 50.00%, 32.32% 67.68%, 50.00% 75.00%, 67.68% 67.68%, 75.00% 50.00%, 67.68% 32.32%, 0% 0%; }
+53.125% { background-position: 45.44% 27.07%, 30.57% 37.01%, 27.07% 54.56%, 37.01% 69.43%, 54.56% 72.93%, 69.43% 62.99%, 72.93% 45.44%, 62.99% 30.57%, 0% 0%; }
+56.25% { background-position: 41.65% 29.85%, 29.85% 41.65%, 29.85% 58.35%, 41.65% 70.15%, 58.35% 70.15%, 70.15% 58.35%, 70.15% 41.65%, 58.35% 29.85%, 0% 0%; }
+59.375% { background-position: 38.68% 33.06%, 30.02% 46.03%, 33.06% 61.32%, 46.03% 69.98%, 61.32% 66.94%, 69.98% 53.97%, 66.94% 38.68%, 53.97% 30.02%, 0% 0%; }
+62.5% { background-position: 36.49% 36.49%, 30.89% 50.00%, 36.49% 63.51%, 50.00% 69.11%, 63.51% 63.51%, 69.11% 50.00%, 63.51% 36.49%, 50.00% 30.89%, 0% 0%; }
+65.625% { background-position: 34.97% 39.96%, 32.28% 53.53%, 39.96% 65.03%, 53.53% 67.72%, 65.03% 60.04%, 67.72% 46.47%, 60.04% 34.97%, 46.47% 32.28%, 0% 0%; }
+68.75% { background-position: 34.02% 43.38%, 34.02% 56.62%, 43.38% 65.98%, 56.62% 65.98%, 65.98% 56.62%, 65.98% 43.38%, 56.62% 34.02%, 43.38% 34.02%, 0% 0%; }
+71.875% { background-position: 33.50% 46.72%, 36.01% 59.35%, 46.72% 66.50%, 59.35% 63.99%, 66.50% 53.28%, 63.99% 40.65%, 53.28% 33.50%, 40.65% 36.01%, 0% 0%; }
+75% { background-position: 33.33% 50.00%, 38.21% 61.79%, 50.00% 66.67%, 61.79% 61.79%, 66.67% 50.00%, 61.79% 38.21%, 50.00% 33.33%, 38.21% 38.21%, 0% 0%; }
+78.125% { background-position: 33.50% 53.28%, 40.65% 63.99%, 53.28% 66.50%, 63.99% 59.35%, 66.50% 46.72%, 59.35% 36.01%, 46.72% 33.50%, 36.01% 40.65%, 0% 0%; }
+81.25% { background-position: 34.02% 56.62%, 43.38% 65.98%, 56.62% 65.98%, 65.98% 56.62%, 65.98% 43.38%, 56.62% 34.02%, 43.38% 34.02%, 34.02% 43.38%, 0% 0%; }
+84.375% { background-position: 34.97% 60.04%, 46.47% 67.72%, 60.04% 65.03%, 67.72% 53.53%, 65.03% 39.96%, 53.53% 32.28%, 39.96% 34.97%, 32.28% 46.47%, 0% 0%; }
+87.5% { background-position: 36.49% 63.51%, 50.00% 69.11%, 63.51% 63.51%, 69.11% 50.00%, 63.51% 36.49%, 50.00% 30.89%, 36.49% 36.49%, 30.89% 50.00%, 0% 0%; }
+90.625% { background-position: 38.68% 66.94%, 53.97% 69.98%, 66.94% 61.32%, 69.98% 46.03%, 61.32% 33.06%, 46.03% 30.02%, 33.06% 38.68%, 30.02% 53.97%, 0% 0%; }
+93.75% { background-position: 41.65% 70.15%, 58.35% 70.15%, 70.15% 58.35%, 70.15% 41.65%, 58.35% 29.85%, 41.65% 29.85%, 29.85% 41.65%, 29.85% 58.35%, 0% 0%; }
+96.875% { background-position: 45.44% 72.93%, 62.99% 69.43%, 72.93% 54.56%, 69.43% 37.01%, 54.56% 27.07%, 37.01% 30.57%, 27.07% 45.44%, 30.57% 62.99%, 0% 0%; }
+100% { background-position: 50.00% 75.00%, 67.68% 67.68%, 75.00% 50.00%, 67.68% 32.32%, 50.00% 25.00%, 32.32% 32.32%, 25.00% 50.00%, 32.32% 67.68%, 0% 0%; }
+}
+
+ keyframes size-the-image {
+    0% { background-size: 96px, 12px, 96px, 12px, 96px, 12px, 96px, 12px, 100% }
+    100% { background-size: 12px, 96px, 12px, 96px, 12px, 96px, 12px, 96px, 100% }
+}
+
+GtkWindow {
+    background-image: url("apple-red.png"),
+                      url("gnome-applets.png"),
+                      url("gnome-calendar.png"),
+                      url("gnome-foot.png"),
+                      url("gnome-gmush.png"),
+                      url("gnome-gimp.png"),
+                      url("gnome-gsame.png"),
+                      url("gnu-keys.png"),
+                      url("background.jpg");
+    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, repeat;
+    animation: move-the-image infinite linear 3s, size-the-image infinite alternate ease-in-out 0.75s;
+}
+
+/* Make the text editor has a nice style */
+.view, .scrollbar, .pane-separator {
+  color: black;
+  background-color: rgba(255,255,255,0.5);
+}
+
+.view:selected {
+  background-color: rgba(127,127,255,0.5);
+}
diff --git a/demos/gtk-demo/demo.gresource.xml b/demos/gtk-demo/demo.gresource.xml
index b86960c..c26ebb8 100644
--- a/demos/gtk-demo/demo.gresource.xml
+++ b/demos/gtk-demo/demo.gresource.xml
@@ -14,4 +14,16 @@
   <gresource prefix="/css_basics">
     <file alias="gtk.css">css_basics.css</file>
   </gresource>
+  <gresource prefix="/css_pixbufs">
+    <file alias="gtk.css">css_pixbufs.css</file>
+    <file>background.jpg</file>
+    <file>apple-red.png</file>
+    <file>gnome-applets.png</file>
+    <file>gnome-calendar.png</file>
+    <file>gnome-foot.png</file>
+    <file>gnome-gmush.png</file>
+    <file>gnome-gimp.png</file>
+    <file>gnome-gsame.png</file>
+    <file>gnu-keys.png</file>
+  </gresource>
 </gresources>
[Date Prev][Date Next]   [Thread Prev][Thread Next]   [Thread Index] [Date Index] [Author Index]