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! =)

Libellés :

Commentaires

Enregistrer un commentaire

Posts les plus consultés de ce blog

GTK+ Apps on Phones

As some of you may already know, I recently joined Purism to help developing GTK+ apps for the upcoming Librem 5 phone . Purism and GNOME share a lot of ideas and values, so the GNOME HIG and GNOME apps are what we will focus on primarily: we will do all we can to not fork nor to reinvent the wheel but to help allowing existing GTK+ applications to work on phones. How Fit are Existing GTK+ Apps? Phones are very different from laptops and even tablets: their screen is very small and their main input method is a single thumb on a touchscreen. Luckily, many GNOME applications are touch-friendly and are fit for small screens. Many applications present you a tree of information you can browse and I see two main layouts used by for GNOME applications to let you navigate it. A first kind of layout is found in applications like Documents, I'll call it stack UI : it uses all the available space to display the collection of information sources (in that case, documents), clicking a...
24 commentaires
Lire la suite

Games 3.18.0 released

Do you like video games but don't like how inconsistent and annoying it can be to enjoy them on a personal computer? Then read on, I have something for you! And if you're not such a gamer, you'll probably learn fun things in the article nonetheless. In this article I'll present you the new GNOME application called Games , whose first preview version (labelled 3.18.0) just came out. https://wiki.gnome.org/Apps/Games Your games library Video games on personal computers exist in lots of shapes and formats, each of these being accessible in very different ways: games installed from Software are found alongside the applications, Steam games are listed in the Steam client, video game consoles and retro computers games are handled as ROM files, disk images or archives, each one playable with a different application depending on the original platform, some game engines have their games distributed as packages that have to be run with the cor...
23 commentaires
Lire la suite

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 Collection Games 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...
18 commentaires
Lire la suite