Accéder au contenu principal

Writing a custom spinner

What are spinners

A spinner is a widget in charge of displaying some indefinite amount of activity via a spinning circle-ish image. They use de "spinner" style class and are visible when the "active" state flag is set.

Turning a widget into a spinner

Turning a widget into a spinner is pretty simple, just add the "spinner" style class to the widget's style context! But now your widget is probably invisible, and that's normal: as said just before, spinners are drawn only if they have the "active" state flag on, just set your widget's state flags and you're done!

Now, depending on the widget you make spin you may have very different results. If your widget is a GtkImage, it will start spinning as if it was a spinner itself, funky results (and vomit) guaranteed! All the other widgets I tested (GtkLabel, GtkBox, …) don't change (they are visible and they don't spin).

If you want to render a spinner on an existing widget, you'll have to subclass it and to override its gtk_widget_draw() method to draw it and then render the spinner with gtk_render_activity().

If you want to render a spinner on an image, you'll unfortunately have to write a custom widget drawing the image and then the spinner on top of it.

Writing a custom spinner widget

Now that we know how to turn a widget into a spinner, we can build our very own custom spinner widgets!

I wrote a widget rendering a thumbnail for Boxes' list view. To do so:

  • I inherited GtkDrawingArea,
  • I overrode its gtk_widget_draw() method to draw it as I wanted,
  • I added the "spinner" style class to the widget so it can render the spinner,
  • I set the widget as active so it can be visible despite the "spinner" style class,
  • I drew the base of my widget as I wanted it to be,
  • I drew the spinner with gtk_render_activity() on top when I wanted it to be drawn.

Unfortunately you can't use the "active" state as a trigger without removing the "spinner" style class, hence it is simpler to just let them always on and add a custom trigger to draw the spinner itself or not.

Customizing the spinner

You can customize a spinner with CSS! As an exemple, if you want to slow down the spinner a bit, you can write the following "slow-spinner" class and add it to any spinner's style context:

.slow-spinner {
    animation-duration: 2s;
}

If you know or learn anything interesting about spinners, don't hesitate to share you knowledge in the comments! =)

Commentaires

Posts les plus consultés de ce blog

Moving the Blog

I am moving this blog to greener lands: https://fediverse.blog/~/AdrienPlazas . The existing articles will remain here on Blogger, and new articles will land on the fediverse.blog Plume instance.

libhandy 0.0.10

libhandy 0.0.10 just got released, and it comes with a few new adaptive widgets for your GTK app. You can get this new version here . The View Switcher GNOME applications typically use a GtkStackSwitcher to switch between their views. This design works fine on a desktop, but not so well on really narrow devices like mobile phones, so Tobias Bernard designed a more modern and adaptive replacement — now available in libhandy as the HdyViewSwitcher . In many ways, the HdyViewSwitcher functions very similarly to a GtkStackSwitcher : you assign it a GtkStack containing your application's pages, and it will display a row of side-by-side, homogeneously-sized buttons, each representing a page. It differs in that it can display both the title and the icon of your pages, and that the layout of the buttons automatically adapts to a narrower version, depending on the available width. We have also added a view switcher bar, designed to be used at he bottom of the window: HdyView

Monster and Naoki Urasawa

Monster Thanks to summer granting me some free time, I've finally been able to complete the Naoki Urasawa's Monster manga series. If you don't know Monster, it's a psychological thriller telling the story of Dr. Kenzō Tenma, a young Japanese neurosurgeon working in Düsseldorf, who decided to save the life of the young Johan Liebert rather than the the one of the mayor the city who arrived at the hospital roughly later. His life then changed when a series of murders happened in the hospital, all of persons whose death would improve the hero's career, making him the prime suspect of these cases. But it turns out that the little boy he saved may not be innocent to this cases… This very well paced story—full of thrills and mystery and served on a background of dreadful psychological experiments—asks lots of questions about the price of life, the right to choose which life to save, the good, the bad, humanity, and ultimately, the price of death. All of that is