Up North

Went to town and bought an ipod touch during the weekend in order to be able to try out the UI a bit first hand. Quite a lot of the effects and animations should be possible to implement in a GTK+ UI fairly easily while some others will obviously want some kind of 3D acceleration.

I hacked up a quick test for making the kind of “unlock slider” that the ipod have for locking the screen from input. I am simply subclassing the GtkHScale and adding some animation to it.

For better resolution, see unlock-slider.mov

I started by adding my own handler for value-changed which checks whether the threshold for when to emit the unlocked signal is met. Otherwise an animation to bring the slider back to the original state is started:

static void
slider_value_changed (GtkRange *range)
{
	UnlockSliderPriv *priv;

	priv = GET_PRIV (range);

	if (priv->start_value != 0.0) {
		return;
	}

	if (gtk_range_get_value (range) < THRESHOLD) {
		priv->start_value = gtk_range_get_value (range);
		gtk_timeline_start (priv->timeline);
	} else {
		gtk_range_set_value (range, 1.0);
		priv->start_value = 0.0;
		g_signal_emit (range, signals[UNLOCKED], 0);
	}
}

This is using the GtkTimeline from #444659 . I’m then using the frame and finished signals from the timeline to update the slider to create the desired animation.

static void
slider_frame_cb (GtkTimeline  *timeline,
				 gdouble       progress,
				 UnlockSlider *slider)
{
	UnlockSliderPriv *priv;

	priv = GET_PRIV (slider);

	gtk_range_set_value (GTK_RANGE (slider), (1.0 - progress) * priv->start_value);
}

static void
slider_finished_cb (GtkTimeline *timeline, UnlockSlider *slider)
{
	UnlockSliderPriv *priv;

	priv = GET_PRIV (slider);

	gtk_range_set_value (GTK_RANGE (slider), 0.0);
	priv->start_value = 0.0;
	gtk_timeline_rewind (priv->timeline);
}

That’s about it for creating a simple animation looking as the video above. The full code (including the boilerplate and window creation code can be found in our git repository.

It would obviously need some artistic love and subclassing the GtkHScale is probably not the approach I would take for a real world application but it served well for a quick example.