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.

Have You Played Atari Today? 🎵

This is a guest article by Laurent « Hell Pé » Pointecouteau, the Alfred Pennyworth of GNOME Games who relentlessly works in the shadows to help make Games what it is, when he’s not busy writing in French about video games or slacking on Twitter. I used to be really excited at New Stable Release Blog Posts™ like this one, back in the day when you had to wait six months for getting new GNOME stable releases (and matching Ubuntu PPAs) in order to discover what was new in your favourite apps. But nowadays, these blog posts, while still a delight to read, are just a little less surprising than before, and we’ve got Flatpak to thank for that! So, here’s a quick reminder: Games can be obtained by two ways. The old-school way, with the version provided by your distro; and soon, hopefully, your distro will upgrade to the brand-new 3.26 stable version that we’ve just released. And the Flatpak way, the one we actually recommend if your system is ready for it: it’ll give you the choice betwe

Games 3.30: Features Overload

With a new version of GNOME always comes a new version of Games, and this new version comes packed with new features, bug fixes and developer experience improvements. Install Games 3.30 Platforms View and Developers View As part of his GSoC project, Saurabh implemented two new views of your games collection: one filtering games by their developers and another one filtering them by their platforms. To know more, read Saurabh's Segregating views and Description view articles on his blog. To implement this he needed to work a lot on the Grilo front, check his explanations in his Adding self registering keys to lua-factory article. He also started to work on a new page displaying many details about a game like the number of players and a description, it was unfortunately not ready on time for this release but will hopefully land in 3.32. Gamepad Navigation You can now navigate the UI with your gamepads! Select your collection view with the shoulder buttons, browse