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

The Path to GNOME Games 3.26

Games received a non-negligible amount of changes that you will find in 3.26. These changes can be big as much small, and more are to come!Building the Games CollectionGames presents your games collection and if everything goes as expected, it does so without the need of any input from you. From an implementation point of view it sounds simple to do, just ask Tracker “Hey, gimme all the games” and it’s done. If only it was that simple! 😃 The system has no idea which files represent games and which doesn’t, but it can associate a MIME type to each file thanks to shared-mime-info. shared-mime-info already had a few video game related MIME types and we added a lot more such as application/x-genesis-rom.That done, we can query Tracker for files having specific MIME types that we know to often represent video game files. Unfortunately, each of these files doesn’t necessarily represent a game and a game isn’t necessarily represented by a single file: some files may be invalid and hence rep…

GNOME Games 3.24

GNOME 3.24 will be out in a few weeks and with it will come Games 3.24. This new version will offer a few new features and many refinements, some of which have been implemented by new contributors theawless and Radhika Dua, kudos to them!Find how to get the latest nightly and (soon) stable Flatpak versions of Games on its web page.A Libretro Core Descriptor SpecificationIn its version 3.22, Games stopped using a hardcoded list of well known Libretro cores and instead looked for the right one to run a game by parsing files describing their corresponding Libretro core's capabilities. These files came from the libretro-super repository and were slightly modified to better suit Games' needs.The concept was great but the format of these files proved to be not very well suited for the job: many information were not useful to Games, some information it needed were lacking, the syntax wasn't specified, complex cases like firmwares were implemented in a messy way, some useful infor…

GNOME Gaming Handheld

Recently I got myself a GPD Win, to make it simple it's a PC in a Nintendo 3DS XL form factor, with a keyboard and a game controller. It comes with Windows 10 and many not too demanding games work perfectly on it: it's perfect to run indie games from Steam and for retro consoles emulation.But who simply want to play video games, let's make it fun, let's put a penguin in it! On this GNOME wiki page I'll report all my findings on Linux support on this machine, focusing mainly on OpenSUSE for the moment. Wouldn't it be awesome to have a fully working and easily installable GNOME desktop running Games and Steam on this machine? 😃