Home

Welcome to the giu wiki!

giu is a immediate mode gui framework. Immediate mode gui is a concept of "GUI widgets doesn't retain any internal state", as a oppsite concept of retain mode gui (Qt, WxWidget, etc...).

Layout

giu uses a declerative layout system.

First of all, let's see giu.Widget interface.

type Widget interface {
  Build()
}

It defines a single method named "Build", which will be used to create the widget.

And the sencond concept is giu.Layout which is a simple []giu.Widget. It also implements the Widget interface and in it's Build method it will invoke Build method of all the widgets it contains.

So the layout system is very simple and easy to understand.

Each element of a giu.Layout will be place in a line.

If you want to place multiple widgets one next to another in a same line, use giu.Line widget.

With this system, if you want to create a part of UI dynamically, just create function returns giu.Layout or giu.Widget.

Widgets

Most of the widgets are easy to understand by seeing it's function signiture.

If you want to know more about how to use a specified widget, check examples/simple/, it contains the usage of all widgets.

To creata custom widget, check examples/customwidget

Event handling

To check key/mouse events against specified widget, place following APIs below the widget.

// Create a button
giu.Button("Click Me", nil)
// Place the event handling APIs right after the button to capture key/mouse events.
giu.Custom(func() {
  if giu.IsItemHovered() {
    // Do event handling here. 
  }
}

The tooltip and context menu works in the same way.

Multi-thread handling

giu.Call, giu.CallErr, giu.CallVar is provided to invoke GUI creation related code in another goroutine.

Since giu has a mechanism to only redraw the GUI when user events (keyboard/mouse) occurred, so if you update a variable in a goroutine, call giu.Update() to inform GUI to redraw immediately.

Check examples/update

Note that giu.NewTextureFromRgba should be called in a new goroutine to keep GUI alive.

Drawing

Check examples/canvas for usage.

Font related

Check examples/dynamicfont for usage.

To use several fonts, do it like this:

var (
  font1 imgui.Font
  font2 imgui.Font
)
func initFont() {
  fonts := giu.Context.IO().Fonts()
  font1 = fonts.AddFontFromFileTTFV(
      "/System/Library/Fonts/STHeiti Light.ttc", <- Font file path
      14,                                        <- Font size
      imgui.DefaultFontConfig,                   <- Usually you don't need to modify this
      fonts.GlyphRangesChineseFull())            <- Add Chinese glyph ranges to display chinese characters

  font2 = fonts.AddFontFromFileTTFV(
      "/System/Library/Fonts/STHeiti Light.ttc", 
      24,
      imgui.DefaultFontConfig,
      fonts.GlyphRangesDefault())               <- Add a big font for ASCII
}

func loop() {
  ...
  giu.PushFont(font2)
  giu.Label("I'm a label with big font")
  giu.PopFont()
  ...
}

Style related

TBD

Deployment

TBD