grkek / iu

UI framework based on the Fusion/libui.cr library, with elements from watzon/cru.

IU

UI framework based on the Fusion/libui.cr library, with custom elements from watzon/cru.

Motivation

Currently avaliable Crystal UI frameworks are either not maintained anymore or the documentation is scarce and a single error might cause a developer to lose motivation, which is why I decided to build IU on top of the LibUI framework which is a multi-platform powerful UI toolkit.

Build status

Features

Widgets

• Horizontal box, Vertical box, Checkbox, Combobox, Editable combobox.
• Button, Font button, Color button, Radio button.
• Datetime picker, Progress bar, Slider, Spinbox.
• Text entry, Multiline text entry.
• Form, Grid, Group, Table, Tab, Separator.
• Image, Label.
• Window, Menubar, Area.
• Many more.

Platforms

• Mac OSX
• Linux
• Windows (Once crystal will be available on Windows)

Code example

require "iu"

module Example
  include Iu::Components

  # Ability to reuse components extracted to other classes.
  class MyComponent < Iu::ReusableComponent
    def initialize(@id : Int32); end

    def render : Iu::Component
      Group
        .new(title: "MyComponent", margined: true)
        .adopt(
          VerticalBox
            .new(padded: true)
            .adopt(
              Label.new(text: "Hello, World ##{@id}!"),
              stretchy: true
            )
            .adopt(
              Button.new(text: "Click Me!"),
              stretchy: true
            )
        )
    end
  end

  # :nodoc:
  class Application < Iu::Application
    def initialize_component
      window =
        Window.new(
          title: "Example",
          width: 800,
          height: 600,
          menu_bar: false
        )
      
      window.margined = true

      window
        .adopt(
          HorizontalBox
            .new(padded: true)
            .adopt(
              MyComponent.new(1),
              stretchy: true
            )
            .adopt(
              MyComponent.new(2),
              stretchy: true
            )
            .adopt(
              MyComponent.new(3),
              stretchy: true
            )
        )

      window.closing.on do
        exit(0)
      end
      
      window.show
    end
  end
end

app = Example::Application.new

app.should_quit.on do
  exit(0)
end

app.start

Installation

1. Follow the instructions for installation laid out in andlabs/libui.
2. Copy the compiled files from step 1 (i.e. files in build/out) to /usr/lib for OSX and Linux users.
3. Go to your shard.yml file, and enter this in:

dependencies:
  iu:
    github: grkek/iu

4. Run shards install.

iu's Issues

Is there any documentation yet ?

Standalone image example?

Could a standalone image example be added to demonstrate the view-image functionality?

I know it is possible because ruby libui does it. Would be nice to have copy/paste-able code
in crystal as-is to just modify it a little bit for already existing images.

Crash when Area component callback accesses instance variable

A class inherits Iu::Components::Area and implements on_* callback, will crash program when its instance access instance variables:

class MyArea < Iu::Components::Area
    def initialize(width = nil, height = width)
      @blah = "blah"
      super(width, height)
    end

    def on_draw(params : UI::AreaDrawParams)
       puts @blah
    end

    def on_mouse_event(mouse_event : UI::AreaMouseEvent);end
    def on_mouse_crossed(left : Bool);end
    def on_drag_broken;end
    def on_key_event(key_event : UI::AreaKeyEvent);end
end

I'm not familiar with Crystal. I think the reason is that the callback function passed to the libui C library forms a closure. The Iu shard wraps libui, a new member "data" is added to the AreaHandler structure to store pointers to an area objects. This allows libui to call back the on_* method implemented by the MyArea class, I'm not sure if this is the scenario described in Crystal document. After testing, this bug can be solved in this way:

@@on_mouse_event_cb = Proc(UI::AreaHandler*, UI::Area*, UI::AreaMouseEvent*, Nil).new { |h, a, e|
        # h.value.data.as(Area*).value.on_mouse_event(e.value).as(Nil)
        ::Box(Area).unbox(h.value.data).on_mouse_event(e.value).as(Nil)
}

# @handler.data = self.as(Void*)
@handler.data = ::Box.box(self)