[libadwaita/wip/exalm/recoloring: 15/15] Add an animation demo
- From: Alexander Mikhaylenko <alexm src gnome org>
- To: commits-list gnome org
- Cc:
- Subject: [libadwaita/wip/exalm/recoloring: 15/15] Add an animation demo
- Date: Sun, 23 May 2021 20:30:09 +0000 (UTC)
commit ea80c689ea00353b81809c85413f478d87a8d555
Author: Alexander Mikhaylenko <alexm gnome org>
Date: Fri May 21 12:17:24 2021 +0500
Add an animation demo
(Replaces the view switcher demo, this part isn't gonna be merged)
examples/adw-view-switcher-demo-window.c | 197 +++++++++++++++++++++++++
examples/adw-view-switcher-demo-window.ui | 231 ++++++++++++++++++++++--------
examples/meson.build | 4 +-
3 files changed, 372 insertions(+), 60 deletions(-)
---
diff --git a/examples/adw-view-switcher-demo-window.c b/examples/adw-view-switcher-demo-window.c
index 5522a52c..791cfb5b 100644
--- a/examples/adw-view-switcher-demo-window.c
+++ b/examples/adw-view-switcher-demo-window.c
@@ -5,6 +5,9 @@
struct _AdwViewSwitcherDemoWindow
{
AdwWindow parent_instance;
+
+ GtkCssProvider *provider;
+ gint64 start_time;
};
G_DEFINE_TYPE (AdwViewSwitcherDemoWindow, adw_view_switcher_demo_window, ADW_TYPE_WINDOW)
@@ -17,10 +20,204 @@ adw_view_switcher_demo_window_class_init (AdwViewSwitcherDemoWindowClass *klass)
gtk_widget_class_set_template_from_resource (widget_class,
"/org/gnome/Adwaita/Demo/ui/adw-view-switcher-demo-window.ui");
}
+static void
+set_color (AdwViewSwitcherDemoWindow *self,
+ GdkRGBA *rgba)
+{
+ g_autofree char *color = NULL;
+ g_autofree char *style = NULL;
+
+ color = gdk_rgba_to_string (rgba);
+ style = g_strdup_printf ("@define-color theme_selected_bg_color %s;", color);
+
+ gtk_css_provider_load_from_data (self->provider, style, -1);
+}
+
+static graphene_vec3_t
+rgb_to_xyz (graphene_vec3_t *rgb)
+{
+ graphene_matrix_t m;
+ static float m_values[] = {
+ 0.5767309, 0.1855540, 0.1881852, 0,
+ 0.2973769, 0.6273491, 0.0752741, 0,
+ 0.0270343, 0.0706872, 0.9911085, 0,
+ 0, 0, 0, 1
+ };
+ graphene_vec3_t xyz;
+
+ graphene_matrix_init_from_float (&m, m_values);
+
+ graphene_matrix_transform_vec3 (&m, rgb, &xyz);
+
+ return xyz;
+}
+
+static graphene_vec3_t
+xyz_to_rgb (graphene_vec3_t *xyz)
+{
+ graphene_matrix_t m_inv;
+ static float m_inv_values[] = {
+ 2.0413690, -0.5649464, -0.3446944, 0,
+ -0.9692660, 1.8760108, 0.0415560, 0,
+ 0.0134474, -0.1183897, 1.0154096, 0,
+ 0, 0, 0, 1
+ };
+ graphene_vec3_t rgb;
+
+ graphene_matrix_init_from_float (&m_inv, m_inv_values);
+
+ graphene_matrix_transform_vec3 (&m_inv, xyz, &rgb);
+
+ return rgb;
+}
+
+static GdkRGBA
+interpolate_rgba (GdkRGBA *a,
+ GdkRGBA *b,
+ float t)
+{
+ GdkRGBA ret;
+ graphene_vec3_t rgb, rgb1, rgb2, xyz, xyz1, xyz2;
+
+ graphene_vec3_init (&rgb1, a->red, a->green, a->blue);
+ graphene_vec3_init (&rgb2, b->red, b->green, b->blue);
+
+ xyz1 = rgb_to_xyz (&rgb1);
+ xyz2 = rgb_to_xyz (&rgb2);
+
+ graphene_vec3_scale (&xyz1, 1 - t, &xyz1);
+ graphene_vec3_scale (&xyz2, t, &xyz2);
+ graphene_vec3_add (&xyz1, &xyz2, &xyz);
+
+ rgb = xyz_to_rgb (&xyz);
+
+ ret.red = graphene_vec3_get_x (&rgb);
+ ret.green = graphene_vec3_get_y (&rgb);
+ ret.blue = graphene_vec3_get_z (&rgb);
+ ret.alpha = 1;
+
+ return ret;
+}
+
+#define PARSE_RGB(rgb) { \
+ ((rgb >> 16) & 0xff) / 255.0f, \
+ ((rgb >> 8) & 0xff) / 255.0f, \
+ ((rgb) & 0xff) / 255.0f, \
+ 1 \
+}
+
+const GdkRGBA BLUE_1 = PARSE_RGB(0x99c1f1);
+const GdkRGBA BLUE_2 = PARSE_RGB(0x62a0ea);
+const GdkRGBA BLUE_3 = PARSE_RGB(0x3584e4);
+const GdkRGBA BLUE_4 = PARSE_RGB(0x1c71d8);
+const GdkRGBA BLUE_5 = PARSE_RGB(0x1a5fb4);
+const GdkRGBA GREEN_1 = PARSE_RGB(0x8ff0a4);
+const GdkRGBA GREEN_2 = PARSE_RGB(0x57e389);
+const GdkRGBA GREEN_3 = PARSE_RGB(0x33d17a);
+const GdkRGBA GREEN_4 = PARSE_RGB(0x2ec27e);
+const GdkRGBA GREEN_5 = PARSE_RGB(0x26a269);
+const GdkRGBA YELLOW_1 = PARSE_RGB(0xf9f06b);
+const GdkRGBA YELLOW_2 = PARSE_RGB(0xf8e45c);
+const GdkRGBA YELLOW_3 = PARSE_RGB(0xf6d32d);
+const GdkRGBA YELLOW_4 = PARSE_RGB(0xf5c211);
+const GdkRGBA YELLOW_5 = PARSE_RGB(0xe5a50a);
+const GdkRGBA ORANGE_1 = PARSE_RGB(0xffbe6f);
+const GdkRGBA ORANGE_2 = PARSE_RGB(0xffa348);
+const GdkRGBA ORANGE_3 = PARSE_RGB(0xff7800);
+const GdkRGBA ORANGE_4 = PARSE_RGB(0xe66100);
+const GdkRGBA ORANGE_5 = PARSE_RGB(0xc64600);
+const GdkRGBA RED_1 = PARSE_RGB(0xf66151);
+const GdkRGBA RED_2 = PARSE_RGB(0xed333b);
+const GdkRGBA RED_3 = PARSE_RGB(0xe01b24);
+const GdkRGBA RED_4 = PARSE_RGB(0xc01c28);
+const GdkRGBA RED_5 = PARSE_RGB(0xa51d2d);
+const GdkRGBA PURPLE_1 = PARSE_RGB(0xdc8add);
+const GdkRGBA PURPLE_2 = PARSE_RGB(0xc061cb);
+const GdkRGBA PURPLE_3 = PARSE_RGB(0x9141ac);
+const GdkRGBA PURPLE_4 = PARSE_RGB(0x813d9c);
+const GdkRGBA PURPLE_5 = PARSE_RGB(0x613583);
+const GdkRGBA BROWN_1 = PARSE_RGB(0xcdab8f);
+const GdkRGBA BROWN_2 = PARSE_RGB(0xb5835a);
+const GdkRGBA BROWN_3 = PARSE_RGB(0x986a44);
+const GdkRGBA BROWN_4 = PARSE_RGB(0x865e3c);
+const GdkRGBA BROWN_5 = PARSE_RGB(0x63452c);
+const GdkRGBA LIGHT_1 = PARSE_RGB(0xffffff);
+const GdkRGBA LIGHT_2 = PARSE_RGB(0xf6f5f4);
+const GdkRGBA LIGHT_3 = PARSE_RGB(0xdeddda);
+const GdkRGBA LIGHT_4 = PARSE_RGB(0xc0bfbc);
+const GdkRGBA LIGHT_5 = PARSE_RGB(0x9a9996);
+const GdkRGBA DARK_1 = PARSE_RGB(0x77767b);
+const GdkRGBA DARK_2 = PARSE_RGB(0x5e5c64);
+const GdkRGBA DARK_3 = PARSE_RGB(0x3d3846);
+const GdkRGBA DARK_4 = PARSE_RGB(0x241f31);
+const GdkRGBA DARK_5 = PARSE_RGB(0x000000);
+
+const GdkRGBA colors[] = {
+ BLUE_3,
+ GREEN_3,
+ YELLOW_5,
+ ORANGE_4,
+ RED_3,
+ PURPLE_3,
+ BROWN_3,
+ DARK_1
+};
+
+static double
+ease_in_out_cubic (double t)
+{
+ double p = t * 2;
+
+ if (p < 1)
+ return 0.5 * p * p * p;
+
+ p -= 2;
+
+ return 0.5 * (p * p * p + 2);
+}
+
+static gboolean
+tick_cb (AdwViewSwitcherDemoWindow *self,
+ GdkFrameClock *clock)
+{
+ gint64 time = gdk_frame_clock_get_frame_time (clock);
+ double progress;
+ gint index1, index2;
+ GdkRGBA color1, color2, color;
+
+ if (!self->start_time)
+ self->start_time = time;
+
+ progress = (time - self->start_time) / 1000000.0;
+ progress = fmod (progress, G_N_ELEMENTS (colors));
+
+ index1 = (int) floor (progress) % G_N_ELEMENTS (colors);
+ index2 = (int) ceil (progress) % G_N_ELEMENTS (colors);
+ progress = fmod (progress, 1.0);
+
+ color1 = colors[index1];
+ color2 = colors[index2];
+
+ color = interpolate_rgba (&color1, &color2, (float) progress);
+
+ set_color (self, &color);
+
+ return G_SOURCE_CONTINUE;
+}
+
static void
adw_view_switcher_demo_window_init (AdwViewSwitcherDemoWindow *self)
{
+
gtk_widget_init_template (GTK_WIDGET (self));
+
+ self->provider = gtk_css_provider_new ();
+
+ gtk_style_context_add_provider_for_display (gdk_display_get_default (),
+ GTK_STYLE_PROVIDER (self->provider),
+ GTK_STYLE_PROVIDER_PRIORITY_APPLICATION);
+
+ gtk_widget_add_tick_callback (GTK_WIDGET (self), (GtkTickCallback) tick_cb, self, NULL);
}
AdwViewSwitcherDemoWindow *
diff --git a/examples/adw-view-switcher-demo-window.ui b/examples/adw-view-switcher-demo-window.ui
index 06fb8476..da95598b 100644
--- a/examples/adw-view-switcher-demo-window.ui
+++ b/examples/adw-view-switcher-demo-window.ui
@@ -4,99 +4,212 @@
<requires lib="gtk" version="4.0"/>
<requires lib="libadwaita" version="1.0"/>
<template class="AdwViewSwitcherDemoWindow" parent="AdwWindow">
- <property name="modal">True</property>
- <property name="title" translatable="yes">AdwViewSwitcher Demo</property>
- <child>
+ <property name="title" translatable="yes">Colors Demo</property>
+ <property name="child">
<object class="GtkBox">
<property name="orientation">vertical</property>
+ <property name="spacing">12</property>
<child>
- <object class="AdwHeaderBar">
- <property name="centering-policy">strict</property>
- <property name="title-widget">
- <object class="AdwViewSwitcherTitle" id="switcher_title">
- <property name="stack">stack</property>
- <property name="title" bind-source="AdwViewSwitcherDemoWindow" bind-property="title"
bind-flags="sync-create"/>
+ <object class="GtkHeaderBar">
+ <child type="end">
+ <object class="GtkSwitch">
+ <property name="active">True</property>
</object>
- </property>
+ </child>
+ <child type="end">
+ <object class="GtkSwitch"/>
+ </child>
</object>
</child>
<child>
- <object class="GtkStack" id="stack">
- <property name="transition-type">crossfade</property>
+ <object class="GtkGrid">
+ <property name="column-spacing">12</property>
+ <property name="margin-start">12</property>
+ <property name="margin-end">12</property>
<property name="vexpand">True</property>
+ <property name="column-homogeneous">True</property>
<child>
- <object class="GtkStackPage">
- <property name="name">page1</property>
- <property name="title" translatable="yes">World</property>
- <property name="icon-name">clock-world-symbolic</property>
- <property name="child">
- <object class="GtkLabel">
- <property name="margin-top">24</property>
- <property name="margin-bottom">24</property>
- <property name="margin-start">24</property>
- <property name="margin-end">24</property>
- <property name="label" translatable="yes">World</property>
+ <object class="GtkProgressBar">
+ <property name="show-text">True</property>
+ <property name="fraction">0.5</property>
+ <layout>
+ <property name="column">0</property>
+ <property name="row">0</property>
+ <property name="column-span">2</property>
+ </layout>
+ </object>
+ </child>
+ <child>
+ <object class="GtkLevelBar">
+ <property name="mode">discrete</property>
+ <property name="value">2.5</property>
+ <property name="max-value">5</property>
+ <property name="valign">center</property>
+ <offsets>
+ <offset name="low" value="1.25"/>
+ <offset name="high" value="3.75"/>
+ <offset name="full" value="5"/>
+ </offsets>
+ <layout>
+ <property name="column">0</property>
+ <property name="row">1</property>
+ <property name="column-span">2</property>
+ </layout>
+ </object>
+ </child>
+ <child>
+ <object class="GtkCheckButton">
+ <property name="label">Check 1</property>
+ <layout>
+ <property name="column">3</property>
+ <property name="row">0</property>
+ </layout>
+ </object>
+ </child>
+ <child>
+ <object class="GtkCheckButton">
+ <property name="label">Check 2</property>
+ <property name="active">True</property>
+ <layout>
+ <property name="column">4</property>
+ <property name="row">0</property>
+ </layout>
+ </object>
+ </child>
+ <child>
+ <object class="GtkCheckButton" id="check">
+ <property name="label">Radio</property>
+ <layout>
+ <property name="column">3</property>
+ <property name="row">1</property>
+ </layout>
+ </object>
+ </child>
+ <child>
+ <object class="GtkCheckButton">
+ <property name="label">Radio</property>
+ <property name="group">check</property>
+ <property name="active">True</property>
+ <layout>
+ <property name="column">4</property>
+ <property name="row">1</property>
+ </layout>
+ </object>
+ </child>
+ <child>
+ <object class="GtkEntry">
+ <property name="text">Entry with some text</property>
+ <layout>
+ <property name="column">0</property>
+ <property name="row">3</property>
+ <property name="column-span">2</property>
+ </layout>
+ </object>
+ </child>
+ <child>
+ <object class="GtkEntry">
+ <property name="placeholder-text">Entry with progress…</property>
+ <property name="progress-fraction">0.5</property>
+ <property name="valign">end</property>
+ <layout>
+ <property name="column">0</property>
+ <property name="row">4</property>
+ <property name="column-span">2</property>
+ </layout>
+ </object>
+ </child>
+ <child>
+ <object class="GtkScale">
+ <property name="adjustment">
+ <object class="GtkAdjustment">
+ <property name="lower">0</property>
+ <property name="upper">5</property>
+ <property name="value">2.5</property>
</object>
</property>
+ <layout>
+ <property name="column">3</property>
+ <property name="row">3</property>
+ <property name="column-span">2</property>
+ </layout>
</object>
</child>
<child>
- <object class="GtkStackPage">
- <property name="name">page2</property>
- <property name="title" translatable="yes">Alarm</property>
- <property name="icon-name">clock-alarm-symbolic</property>
- <property name="child">
- <object class="GtkLabel">
- <property name="margin-top">24</property>
- <property name="margin-bottom">24</property>
- <property name="margin-start">24</property>
- <property name="margin-end">24</property>
- <property name="label" translatable="yes">Alarm</property>
+ <object class="GtkScale">
+ <property name="adjustment">
+ <object class="GtkAdjustment">
+ <property name="lower">0</property>
+ <property name="upper">5</property>
+ <property name="value">3</property>
</object>
</property>
+ <marks>
+ <mark value="0"/>
+ <mark value="1"/>
+ <mark value="2"/>
+ <mark value="3"/>
+ <mark value="4"/>
+ <mark value="5"/>
+ </marks>
+ <layout>
+ <property name="column">3</property>
+ <property name="row">4</property>
+ <property name="column-span">2</property>
+ </layout>
</object>
</child>
+ </object>
+ </child>
+ <child>
+ <object class="GtkNotebook" id="notebook1">
+ <property name="margin-bottom">12</property>
+ <property name="margin-start">12</property>
+ <property name="margin-end">12</property>
+ <layout>
+ <property name="column">0</property>
+ <property name="row">3</property>
+ <property name="column-span">2</property>
+ </layout>
+ <property name="hexpand">True</property>
<child>
- <object class="GtkStackPage">
- <property name="name">page3</property>
- <property name="title" translatable="yes">Stopwatch</property>
- <property name="icon-name">clock-stopwatch-symbolic</property>
+ <object class="GtkNotebookPage">
<property name="child">
<object class="GtkLabel">
- <property name="margin-top">24</property>
- <property name="margin-bottom">24</property>
- <property name="margin-start">24</property>
- <property name="margin-end">24</property>
- <property name="label" translatable="yes">Stopwatch</property>
+ <property name="label" translatable="yes">Page 1</property>
+ <property name="margin-top">12</property>
+ <property name="margin-bottom">12</property>
+ <property name="margin-start">12</property>
+ <property name="margin-end">12</property>
+ </object>
+ </property>
+ <property name="tab">
+ <object class="GtkLabel">
+ <property name="label" translatable="yes">Page 1</property>
</object>
</property>
</object>
</child>
<child>
- <object class="GtkStackPage">
- <property name="name">page4</property>
- <property name="title" translatable="yes">Timer</property>
- <property name="icon-name">clock-timer-symbolic</property>
+ <object class="GtkNotebookPage">
<property name="child">
<object class="GtkLabel">
- <property name="margin-top">24</property>
- <property name="margin-bottom">24</property>
- <property name="margin-start">24</property>
- <property name="margin-end">24</property>
- <property name="label" translatable="yes">Timer</property>
+ <property name="label" translatable="yes">Page 2</property>
+ <property name="margin-top">12</property>
+ <property name="margin-bottom">12</property>
+ <property name="margin-start">12</property>
+ <property name="margin-end">12</property>
+ </object>
+ </property>
+ <property name="tab">
+ <object class="GtkLabel">
+ <property name="label" translatable="yes">Page 2</property>
</object>
</property>
</object>
</child>
</object>
</child>
- <child>
- <object class="AdwViewSwitcherBar" id="switcher_bar">
- <property name="stack">stack</property>
- <property name="reveal" bind-source="switcher_title" bind-property="title-visible"
bind-flags="sync-create"/>
- </object>
- </child>
</object>
- </child>
+ </property>
</template>
</interface>
diff --git a/examples/meson.build b/examples/meson.build
index 798b23cf..55462f6e 100644
--- a/examples/meson.build
+++ b/examples/meson.build
@@ -18,9 +18,11 @@ adwaita_demo_sources = [
libadwaita_generated_headers,
]
+m_dep = cc.find_library('m', required: false)
+
adwaita_demo = executable('adwaita-@0@-demo'.format(apiversion),
adwaita_demo_sources,
- dependencies: libadwaita_dep,
+ dependencies: [libadwaita_dep, m_dep],
gui_app: true,
install: true,
)
[
Date Prev][
Date Next] [
Thread Prev][
Thread Next]
[
Thread Index]
[
Date Index]
[
Author Index]
