Support for spinner-like widget in glimmer-dsl-libui?

[rubyFeedback]

Hey there Andy,

I already wrote a proposal for libui-ng in regards to spinner-widgets.

In ruby-gtk3 the spinner widget can be used to indicate an activity is ongoing.

See here as an example for the spinner in gtk:

https://docs.gtk.org/gtk4/class.Spinner.html

I use this, for example, to a GUI where the user can modify meta-data of a .mp4 file, via ffmpeg. That part works fine.

Now I was thinking to make this available on windows too. ffmpeg.exe works on windows, I already know that.

So my idea was to use glimmer-dsl-libui for that. But as far as I am aware there is no spinner functionality in upstream libui. Would it be possible to simulate or fake such a spinner widget, in glimmer-dsl-libui?

I don't have a good way to propose this, but two ideas I have on the top of my head are:

• Use several images and display them in a rotating manner after a specify delay set. This could be a button too but need not necessarily be; could be a box container that just shows an image.

or alternatively:

• Perhaps as a free-drawing canvas that is quite small-ish, like 20px 20px or something like that. Then, like every "tick", say 0.3 seconds or something like that, it could be redrawn a bit to indicate rotation (activity). This can be a super-simple circle too, perhaps perfect-shape allows for partial colour fills. Then we could say the upper top right quadrant is red, when before it black. Then the lower right quadrant colour is red, and the upper top right is now black again, and so forth. So in other words to fake a spinner-like widget.

Does not have to look pretty. The main idea behind the spinner is to indicate to the user that the application is still working, so the user does not get bored and knows that things are still happening as-is.

I don't know how easy it would be for glimmer-dsl-libui to support it or whether you think it is useful. The above two points in regards how to implement it are just examples; perhaps there are more ways to think about this.

[AndyObtiva]

You can simply implement a spinner with area vector graphics using Glimmer::LibUI::timer.

I added a section to the README called Area Animation that documents how to do it.

Spinner example that has a fully customizable method-based custom control called spinner, which is destroyed if you click on it (you may copy/paste in girb):

require 'glimmer-dsl-libui'

class SpinnerExample
  include Glimmer

  SIZE = 120

  def initialize
    create_gui
  end

  def launch
    @main_window.show
  end

  def create_gui
    @main_window = window {
      title 'Spinner'
      content_size SIZE*2, SIZE*2

      horizontal_box {
        padded false

        vertical_box {
          padded false

          spinner(size: SIZE)
          spinner(size: SIZE, fill_color: [42, 153, 214])
        }

        vertical_box {
          padded false

          spinner(size: SIZE/2.0, fill_color: :orange)
          spinner(size: SIZE/2.0, fill_color: {x0: 0, y0: 0, x1: SIZE/2.0, y1: SIZE/2.0, stops: [{pos: 0.25, r: 204, g: 102, b: 204}, {pos: 1, r: 2, g: 2, b: 254}]})
          spinner(size: SIZE/2.0, fill_color: :green, unfilled_color: :yellow)
          spinner(size: SIZE/2.0, fill_color: :white, unfilled_color: :gray, background_color: :black)
        }
      }
    }
  end

  def spinner(size: 40.0, fill_color: :gray, background_color: :white, unfilled_color: {r: 243, g: 243, b: 243}, donut_percentage: 0.25)
    arc1 = arc2 = nil
    area { |the_area|
      rectangle(0, 0, size, size) {
        fill background_color
      }
      circle(size/2.0, size/2.0, size/2.0) {
        fill fill_color
      }
      arc1 = arc(size/2.0, size/2.0, size/2.0, 0, 180) {
        fill unfilled_color
      }
      arc2 = arc(size/2.0, size/2.0, size/2.0, 90, 180) {
        fill unfilled_color
      }
      circle(size/2.0, size/2.0, (size/2.0)*(1.0 - donut_percentage)) {
        fill background_color
      }

      on_mouse_up do
        the_area.destroy
      end
    }.tap do
      Glimmer::LibUI.timer(0.05) do
        delta = 10
        arc1.start_angle += delta
        arc2.start_angle += delta
      end
    end
  end
end

SpinnerExample.new.launch

As you can see, the spinner custom control is fully customizable with options like size (you can set to 20 if you like) and fill_color (which can even be a gradient).

If you click on any of the spinners, they are destroyed. This is how you can remove them in your application once there is no more work to do that needs a spinner, by calling the #destroy method on the area object.

To add them, you simply call code like this (assuming you declared a some_box variable as vertical_box or horizontal_box):

some_box.content { spinner(size: 20) }

BTW, it works on Windows too:

Also, it works on Linux:

If there is anything that is not clear enough or you have any further questions, feel free to ask me by replying to this issue (even if closed) or opening a new one if needed.

Cheers!