- Glimmer DSL for LibUI Basic Examples
- Basic Window
- Basic Child Window
- Basic Button
- Basic Entry
- Simple Notepad
- Font Button
- Color Button
- Date Time Picker
- Form
- Basic Table
- Basic Table Image
- Basic Table Image Text
- Basic Table Button
- Basic Table Checkbox
- Basic Table Checkbox Text
- Basic Table Progress Bar
- Basic Table Color
- Basic Table Selection
- Basic Area
- Basic Scrolling Area
- Basic Image
- Basic Transform
- Basic Draw Text
- Basic Code Area
- Basic Composite Shape
- Basic Custom Shape
Run with this command from the root of the project if you cloned the project:
ruby -r './lib/glimmer-dsl-libui' examples/basic_window.rb
Run with this command if you installed the Ruby gem:
ruby -r glimmer-dsl-libui -e "require 'examples/basic_window'"
Mac | Windows | Linux |
---|---|---|
Glimmer DSL for LibUI Version:
require 'glimmer-dsl-libui'
include Glimmer
window('hello world', 300, 200, true) {
on_closing do
puts 'Bye Bye'
end
}.show
Glimmer DSL for LibUI Version 2 (setting window
properties instead of arguments):
require 'glimmer-dsl-libui'
include Glimmer
window { # first 3 args can be set via properties with 4th arg has_menubar=true by default
title 'hello world'
content_size 300, 200
on_closing do
puts 'Bye Bye'
end
}.show
examples/basic_child_window.rb
Run with this command from the root of the project if you cloned the project:
ruby -r './lib/glimmer-dsl-libui' examples/basic_child_window.rb
Run with this command if you installed the Ruby gem:
ruby -r glimmer-dsl-libui -e "require 'examples/basic_child_window.rb'"
Mac | Windows | Linux |
---|---|---|
Run with this command from the root of the project if you cloned the project:
ruby -r './lib/glimmer-dsl-libui' examples/basic_button.rb
Run with this command if you installed the Ruby gem:
ruby -r glimmer-dsl-libui -e "require 'examples/basic_button'"
Mac | Windows | Linux |
---|---|---|
Glimmer DSL for LibUI Version:
require 'glimmer-dsl-libui'
include Glimmer
window('hello world', 300, 200) {
button('Button') {
on_clicked do
msg_box('Information', 'You clicked the button')
end
}
on_closing do
puts 'Bye Bye'
end
}.show
Run with this command from the root of the project if you cloned the project:
ruby -r './lib/glimmer-dsl-libui' examples/basic_entry.rb
Run with this command if you installed the Ruby gem:
ruby -r glimmer-dsl-libui -e "require 'examples/basic_entry'"
Mac | Windows | Linux |
---|---|---|
Glimmer DSL for LibUI Version (with data-binding):
Glimmer DSL for LibUI Version 2 (without data-binding):
Run with this command from the root of the project if you cloned the project:
ruby -r './lib/glimmer-dsl-libui' examples/simple_notepad.rb
Run with this command if you installed the Ruby gem:
ruby -r glimmer-dsl-libui -e "require 'examples/simple_notepad'"
Mac | Windows | Linux |
---|---|---|
Run with this command from the root of the project if you cloned the project:
ruby -r './lib/glimmer-dsl-libui' examples/font_button.rb
Run with this command if you installed the Ruby gem:
ruby -r glimmer-dsl-libui -e "require 'examples/font_button'"
Mac | Windows | Linux |
---|---|---|
Glimmer DSL for LibUI Version (with data-binding):
require 'glimmer-dsl-libui'
class FontButton
include Glimmer
attr_accessor :font_descriptor
def launch
window('hello world', 300, 200) {
font_button {
font <=> [self, :font_descriptor, after_write: -> { p font_descriptor }]
}
on_closing do
puts 'Bye Bye'
end
}.show
end
end
FontButton.new.launch
Glimmer DSL for LibUI Version 2 (without data-binding):
require 'glimmer-dsl-libui'
include Glimmer
window('hello world', 300, 200) {
font_button { |fb|
on_changed do
font_descriptor = fb.font
p font_descriptor
end
}
on_closing do
puts 'Bye Bye'
end
}.show
Run with this command from the root of the project if you cloned the project:
ruby -r './lib/glimmer-dsl-libui' examples/color_button.rb
Run with this command if you installed the Ruby gem:
ruby -r glimmer-dsl-libui -e "require 'examples/color_button'"
Mac | Windows | Linux |
---|---|---|
New Glimmer DSL for LibUI Version (with data-binding):
require 'glimmer-dsl-libui'
class ColorButton
include Glimmer
attr_accessor :selected_color
def initialize
@selected_color = :blue
end
def launch
window('color button', 240) {
color_button {
color <=> [self, :selected_color, after_write: ->(color) {p color}]
}
}.show
end
end
ColorButton.new.launch
New Glimmer DSL for LibUI Version 2 (without data-binding):
require 'glimmer-dsl-libui'
include Glimmer
window('color button', 240) {
color_button { |cb|
color :blue
on_changed do
rgba = cb.color
p rgba
end
}
}.show
Run with this command from the root of the project if you cloned the project:
ruby -r './lib/glimmer-dsl-libui' examples/date_time_picker.rb
Run with this command if you installed the Ruby gem:
ruby -r glimmer-dsl-libui -e "require 'examples/date_time_picker'"
Mac | Windows | Linux |
---|---|---|
Glimmer DSL for LibUI Version (with data-binding):
Glimmer DSL for LibUI Version 2 (without data-binding):
Run with this command from the root of the project if you cloned the project:
ruby -r './lib/glimmer-dsl-libui' examples/form.rb
Run with this command if you installed the Ruby gem:
ruby -r glimmer-dsl-libui -e "require 'examples/form'"
Mac | Windows | Linux |
---|---|---|
New Glimmer DSL for LibUI Version (with data-binding):
require 'glimmer-dsl-libui'
class Form
include Glimmer
attr_accessor :first_name, :last_name, :phone, :email
def launch
window('Form') {
margined true
vertical_box {
form {
entry {
label 'First Name' # label property is available when control is nested under form
text <=> [self, :first_name] # bidirectional data-binding of entry text property to self first_name attribute
}
entry {
label 'Last Name' # label property is available when control is nested under form
text <=> [self, :last_name]
}
entry {
label 'Phone' # label property is available when control is nested under form
text <=> [self, :phone]
}
entry {
label 'Email' # label property is available when control is nested under form
text <=> [self, :email]
}
}
button('Display Info') {
stretchy false
on_clicked do
msg_box('Info', "#{first_name} #{last_name} has phone #{phone} and email #{email}")
end
}
}
}.show
end
end
Form.new.launch
New Glimmer DSL for LibUI Version 2 (without data-binding):
require 'glimmer-dsl-libui'
include Glimmer
window('Form') {
margined true
vertical_box {
form {
@first_name_entry = entry {
label 'First Name' # label property is available when control is nested under form
}
@last_name_entry = entry {
label 'Last Name' # label property is available when control is nested under form
}
@phone_entry = entry {
label 'Phone' # label property is available when control is nested under form
}
@email_entry = entry {
label 'Email' # label property is available when control is nested under form
}
}
button('Display Info') {
stretchy false
on_clicked do
msg_box('Info', "#{@first_name_entry.text} #{@last_name_entry.text} has phone #{@phone_entry.text} and email #{@email_entry.text}")
end
}
}
}.show
Run with this command from the root of the project if you cloned the project:
ruby -r './lib/glimmer-dsl-libui' examples/basic_table.rb
Run with this command if you installed the Ruby gem:
ruby -r glimmer-dsl-libui -e "require 'examples/basic_table'"
Mac | Windows | Linux |
---|---|---|
Glimmer DSL for LibUI Version:
require 'glimmer-dsl-libui'
include Glimmer
data = [
%w[cat meow],
%w[dog woof],
%w[chicken cock-a-doodle-doo],
%w[horse neigh],
%w[cow moo]
]
window('Animal sounds', 300, 200) {
horizontal_box {
table {
text_column('Animal')
text_column('Description')
cell_rows data
}
}
on_closing do
puts 'Bye Bye'
end
}.show
Note that behavior varies per platform (i.e. how table
chooses to size images by default).
Run with this command from the root of the project if you cloned the project:
ruby -r './lib/glimmer-dsl-libui' examples/basic_table_image.rb
Run with this command if you installed the Ruby gem:
ruby -r glimmer-dsl-libui -e "require 'examples/basic_table_image'"
Mac | Windows | Linux |
---|---|---|
Glimmer DSL for LibUI Version (passing file url as image):
# frozen_string_literal: true
# NOTE:
# This example displays images that can be freely downloaded from the Studio Ghibli website.
require 'glimmer-dsl-libui'
include Glimmer
IMAGE_ROWS = []
50.times do |i|
url = format('https://www.ghibli.jp/gallery/thumb-redturtle%03d.png', (i + 1))
puts "Processing Image: #{url}"; $stdout.flush # for Windows
IMAGE_ROWS << [url] # array of one column cell
rescue StandardError => e
warn url, e.message
end
window('The Red Turtle', 310, 350, false) {
horizontal_box {
table {
image_column('www.ghibli.jp/works/red-turtle')
cell_rows IMAGE_ROWS
}
}
on_closing do
puts 'Bye Bye'
end
}.show
Glimmer DSL for LibUI Version 2 (automatic construction of image
):
# NOTE:
# This example displays images that can be freely downloaded from the Studio Ghibli website.
require 'glimmer-dsl-libui'
include Glimmer
IMAGE_ROWS = []
50.times do |i|
url = format('https://www.ghibli.jp/gallery/thumb-redturtle%03d.png', (i + 1))
puts "Processing Image: #{url}"; $stdout.flush # for Windows
IMAGE_ROWS << [image(url)] # array of one column cell
rescue StandardError => e
warn url, e.message
end
window('The Red Turtle', 310, 350, false) {
horizontal_box {
table {
image_column('www.ghibli.jp/works/red-turtle')
cell_rows IMAGE_ROWS
}
}
on_closing do
puts 'Bye Bye'
end
}.show
Glimmer DSL for LibUI Version 3 (manual construction of image
from image_part
):
# NOTE:
# This example displays images that can be freely downloaded from the Studio Ghibli website.
require 'glimmer-dsl-libui'
require 'chunky_png'
require 'open-uri'
include Glimmer
IMAGE_ROWS = []
50.times do |i|
url = format('https://www.ghibli.jp/gallery/thumb-redturtle%03d.png', (i + 1))
puts "Processing Image: #{url}"
f = URI.open(url)
canvas = ChunkyPNG::Canvas.from_io(f)
f.close
data = canvas.to_rgba_stream
width = canvas.width
height = canvas.height
img = image {
image_part(data, width, height, width * 4)
}
IMAGE_ROWS << [img] # array of one column cell
rescue StandardError => e
warn url, e.message
end
window('The Red Turtle', 310, 350, false) {
horizontal_box {
table {
image_column('www.ghibli.jp/works/red-turtle', 0)
cell_rows IMAGE_ROWS
}
}
on_closing do
puts 'Bye Bye'
end
}.show
Note that behavior varies per platform (i.e. how table
chooses to size images by default).
examples/basic_table_image_text.rb
Run with this command from the root of the project if you cloned the project:
ruby -r './lib/glimmer-dsl-libui' examples/basic_table_image_text.rb
Run with this command if you installed the Ruby gem:
ruby -r glimmer-dsl-libui -e "require 'examples/basic_table_image_text'"
Mac | Windows | Linux |
---|---|---|
New Glimmer DSL for LibUI Version (passing file url as image):
# frozen_string_literal: true
# NOTE:
# This example displays images that can be freely downloaded from the Studio Ghibli website.
require 'glimmer-dsl-libui'
include Glimmer
IMAGE_ROWS = []
5.times do |i|
url = format('https://www.ghibli.jp/gallery/thumb-redturtle%03d.png', (i + 1))
puts "Processing Image: #{url}"; $stdout.flush # for Windows
text = url.sub('https://www.ghibli.jp/gallery/thumb-redturtle', '').sub('.png', '')
IMAGE_ROWS << [[url, text], [url, text]] # cell values are dual-element arrays
rescue StandardError => e
warn url, e.message
end
window('The Red Turtle', 670, 350) {
horizontal_box {
table {
image_text_column('image/number')
image_text_column('image/number (editable)') {
editable true
}
cell_rows IMAGE_ROWS
}
}
}.show
New Glimmer DSL for LibUI Version 2 (automatic construction of image
):
# NOTE:
# This example displays images that can be freely downloaded from the Studio Ghibli website.
require 'glimmer-dsl-libui'
include Glimmer
IMAGE_ROWS = []
5.times do |i|
url = format('https://www.ghibli.jp/gallery/thumb-redturtle%03d.png', (i + 1))
puts "Processing Image: #{url}"; $stdout.flush # for Windows
text = url.sub('https://www.ghibli.jp/gallery/thumb-redturtle', '').sub('.png', '')
img = image(url)
IMAGE_ROWS << [[img, text], [img, text]] # cell values are dual-element arrays
rescue StandardError => e
warn url, e.message
end
window('The Red Turtle', 670, 350) {
horizontal_box {
table {
image_text_column('image/number')
image_text_column('image/number (editable)') {
editable true
}
cell_rows IMAGE_ROWS
}
}
}.show
New Glimmer DSL for LibUI Version 2 (manual construction of image
from image_part
):
# NOTE:
# This example displays images that can be freely downloaded from the Studio Ghibli website.
require 'glimmer-dsl-libui'
require 'chunky_png'
require 'open-uri'
include Glimmer
IMAGE_ROWS = []
5.times do |i|
url = format('https://www.ghibli.jp/gallery/thumb-redturtle%03d.png', (i + 1))
puts "Processing Image: #{url}"
f = URI.open(url)
canvas = ChunkyPNG::Canvas.from_io(f)
f.close
data = canvas.to_rgba_stream
width = canvas.width
height = canvas.height
img = image {
image_part(data, width, height, width * 4)
}
text = url.sub('https://www.ghibli.jp/gallery/thumb-redturtle', '').sub('.png', '')
IMAGE_ROWS << [[img, text], [img, text]] # cell values are dual-element arrays
rescue StandardError => e
warn url, e.message
end
window('The Red Turtle', 670, 350) {
horizontal_box {
table {
image_text_column('image/number')
image_text_column('image/number (editable)') {
editable true
}
cell_rows IMAGE_ROWS
}
}
}.show
examples/basic_table_button.rb
Run with this command from the root of the project if you cloned the project:
ruby -r './lib/glimmer-dsl-libui' examples/basic_table_button.rb
Run with this command if you installed the Ruby gem:
ruby -r glimmer-dsl-libui -e "require 'examples/basic_table_button'"
Mac | Windows | Linux |
---|---|---|
New Glimmer DSL for LibUI Version (with explicit data-binding):
require 'glimmer-dsl-libui'
class BasicTableButton
BasicAnimal = Struct.new(:name, :sound)
class Animal < BasicAnimal
def action
'delete'
end
end
include Glimmer
attr_accessor :animals
def initialize
@animals = [
Animal.new('cat', 'meow'),
Animal.new('dog', 'woof'),
Animal.new('chicken', 'cock-a-doodle-doo'),
Animal.new('horse', 'neigh'),
Animal.new('cow', 'moo'),
]
end
def launch
window('Animal sounds', 400, 200) {
horizontal_box {
table {
text_column('Animal')
text_column('Description')
button_column('Action') {
on_clicked do |row|
# Option 1: direct data deletion is the simpler solution
# @animals.delete_at(row) # automatically deletes actual table row due to explicit data-binding
# Option 2: cloning only to demonstrate table row deletion upon explicit setting of animals attribute (cloning is not recommended beyond demonstrating this point)
new_animals = @animals.clone
new_animals.delete_at(row)
self.animals = new_animals # automatically loses deleted table row due to explicit data-binding
end
}
cell_rows <= [self, :animals, column_attributes: {'Animal' => :name, 'Description' => :sound}]
# explicit unidirectional data-binding of table cell_rows to self.animals
on_changed do |row, type, row_data|
puts "Row #{row} #{type}: #{row_data}"
$stdout.flush
end
}
}
}.show
end
end
BasicTableButton.new.launch
New Glimmer DSL for LibUI Version 2 (with implicit data-binding):
require 'glimmer-dsl-libui'
include Glimmer
data = [
%w[cat meow delete],
%w[dog woof delete],
%w[chicken cock-a-doodle-doo delete],
%w[horse neigh delete],
%w[cow moo delete]
]
window('Animal sounds', 300, 200) {
horizontal_box {
table {
text_column('Animal')
text_column('Description')
button_column('Action') {
on_clicked do |row|
data.delete_at(row) # automatically deletes actual table row due to implicit data-binding
end
}
cell_rows data # implicit data-binding
on_changed do |row, type, row_data|
puts "Row #{row} #{type}: #{row_data}"
end
}
}
}.show
examples/basic_table_checkbox.rb
Run with this command from the root of the project if you cloned the project:
ruby -r './lib/glimmer-dsl-libui' examples/basic_table_checkbox.rb
Run with this command if you installed the Ruby gem:
ruby -r glimmer-dsl-libui -e "require 'examples/basic_table_checkbox'"
Mac | Windows | Linux |
---|---|---|
examples/basic_table_checkbox_text.rb
Run with this command from the root of the project if you cloned the project:
ruby -r './lib/glimmer-dsl-libui' examples/basic_table_checkbox_text.rb
Run with this command if you installed the Ruby gem:
ruby -r glimmer-dsl-libui -e "require 'examples/basic_table_checkbox_text'"
Mac | Windows | Linux |
---|---|---|
examples/basic_table_progress_bar.rb
Run with this command from the root of the project if you cloned the project:
ruby -r './lib/glimmer-dsl-libui' examples/basic_table_progress_bar.rb
Run with this command if you installed the Ruby gem:
ruby -r glimmer-dsl-libui -e "require 'examples/basic_table_progress_bar'"
Mac | Windows | Linux |
---|---|---|
New Glimmer DSL for LibUI Version:
require 'glimmer-dsl-libui'
include Glimmer
data = [
['task 1', 0],
['task 2', 15],
['task 3', 100],
['task 4', 75],
['task 5', -1],
]
window('Task Progress', 300, 200) {
vertical_box {
table {
text_column('Task')
progress_bar_column('Progress')
cell_rows data # implicit data-binding
}
button('Mark All As Done') {
stretchy false
on_clicked do
data.each_with_index do |row_data, row|
data[row][1] = 100 # automatically updates table due to implicit data-binding
end
end
}
}
}.show
Run with this command from the root of the project if you cloned the project:
ruby -r './lib/glimmer-dsl-libui' examples/basic_table_color.rb
Run with this command if you installed the Ruby gem:
ruby -r glimmer-dsl-libui -e "require 'examples/basic_table_color'"
Mac | Windows | Linux |
---|---|---|
Glimmer DSL for LibUI Version (with explicit data-binding to model rows using a presenter)
Glimmer DSL for LibUI Version 2 (with implicit data-binding to raw data rows)
Glimmer DSL for LibUI Version 3 (with implicit data-binding to raw data rows and manual construction of libui image
from image_part
)
examples/basic_table_selection.rb
Run with this command from the root of the project if you cloned the project:
ruby -r './lib/glimmer-dsl-libui' examples/basic_table_selection.rb
Run with this command if you installed the Ruby gem:
ruby -r glimmer-dsl-libui -e "require 'examples/basic_table_selection'"
Version 1 (automatic sorting and data-binding):
examples/basic_table_selection.rb
Version 2 (custom sorting and data-binding):
examples/basic_table_selection2.rb
Version 3 (custom sorting without data-binding):
examples/basic_table_selection3.rb
Run with this command from the root of the project if you cloned the project:
ruby -r './lib/glimmer-dsl-libui' examples/basic_area.rb
Run with this command if you installed the Ruby gem:
ruby -r glimmer-dsl-libui -e "require 'examples/basic_area'"
Mac | Windows | Linux |
---|---|---|
Glimmer DSL for LibUI Version 1 (shortcut syntax declarative retained mode):
Glimmer DSL for LibUI Version 2 (shortcut syntax semi-declarative immediate mode on_draw
dynamic path
approach):
Glimmer DSL for LibUI Version 3 (explicit libui syntax declarative retained mode):
Glimmer DSL for LibUI Version 4 (explicit libui syntax semi-declarative immediate mode on_draw
dynamic path
approach):
examples/basic_scrolling_area.rb
Run with this command from the root of the project if you cloned the project:
ruby -r './lib/glimmer-dsl-libui' examples/basic_scrolling_area.rb
Run with this command if you installed the Ruby gem:
ruby -r glimmer-dsl-libui -e "require 'examples/basic_scrolling_area'"
Mac | Windows | Linux |
---|---|---|
New Glimmer DSL for LibUI Version:
require 'glimmer-dsl-libui'
class BasicScrollingArea
include Glimmer
SCROLLING_AREA_WIDTH = 800
SCROLLING_AREA_HEIGHT = 400
SCROLLING_AREA_PADDING_X = 20
SCROLLING_AREA_PADDING_Y = 20
def initialize
@x = SCROLLING_AREA_PADDING_X
@y = SCROLLING_AREA_HEIGHT - SCROLLING_AREA_PADDING_Y
create_gui
Glimmer::LibUI.timer(0.01) do
@x += SCROLLING_AREA_PADDING_X
@y = [[@y + rand(SCROLLING_AREA_PADDING_Y*4)*(rand(2) == 0 ? -1 : 1), SCROLLING_AREA_PADDING_Y].max, SCROLLING_AREA_HEIGHT - SCROLLING_AREA_PADDING_Y].min
@graph.content { # re-open @graph's content and add a line
line(@x, @y)
}
# if there is a need to enlarge scrolling area, call `@scrolling_area.set_size(new_width, new_height)`
@scrolling_area.scroll_to(@x - (SCROLLING_AREA_WIDTH/2), @y) # 3rd and 4th arguments for width and height are assumed as those of main window by default if not supplied
# return false to stop timer once @x exceeds scrolling area width - padding
false if @x >= (SCROLLING_AREA_WIDTH - SCROLLING_AREA_PADDING_X*2)
end
end
def launch
@main_window.show
end
def x_axis
polyline(SCROLLING_AREA_PADDING_X, SCROLLING_AREA_HEIGHT - SCROLLING_AREA_PADDING_Y, SCROLLING_AREA_WIDTH - SCROLLING_AREA_PADDING_X*2, SCROLLING_AREA_HEIGHT - SCROLLING_AREA_PADDING_Y) {
stroke :black, thickness: 3
}
((SCROLLING_AREA_WIDTH - SCROLLING_AREA_PADDING_X*4) / SCROLLING_AREA_PADDING_X).times do |x_multiplier|
x = x_multiplier*SCROLLING_AREA_PADDING_X + SCROLLING_AREA_PADDING_X*2
y = SCROLLING_AREA_HEIGHT - SCROLLING_AREA_PADDING_Y
polyline(x, y, x, y + SCROLLING_AREA_PADDING_Y/2) {
stroke :black, thickness: 2
}
end
end
def y_axis
polyline(SCROLLING_AREA_PADDING_X, SCROLLING_AREA_PADDING_Y, SCROLLING_AREA_PADDING_X, SCROLLING_AREA_HEIGHT - SCROLLING_AREA_PADDING_Y) {
stroke :black, thickness: 3
}
((SCROLLING_AREA_HEIGHT - SCROLLING_AREA_PADDING_Y*3) / SCROLLING_AREA_PADDING_Y).times do |y_multiplier|
x = SCROLLING_AREA_PADDING_X
y = y_multiplier*SCROLLING_AREA_PADDING_Y + SCROLLING_AREA_PADDING_Y*2
polyline(x, y, x - SCROLLING_AREA_PADDING_X/2, y) {
stroke :black, thickness: 2
}
end
end
def create_gui
@main_window = window('Basic Scrolling Area', SCROLLING_AREA_WIDTH / 2, SCROLLING_AREA_HEIGHT) {
resizable false
@scrolling_area = scrolling_area(SCROLLING_AREA_WIDTH, SCROLLING_AREA_HEIGHT) {
x_axis
y_axis
@graph = figure(SCROLLING_AREA_PADDING_X, SCROLLING_AREA_HEIGHT - SCROLLING_AREA_PADDING_Y) {
stroke :blue, thickness: 2
}
}
}
end
end
BasicScrollingArea.new.launch
Please note the caveats of Area Image (Alpha Feature) with regards to this example.
Run with this command from the root of the project if you cloned the project:
ruby -r './lib/glimmer-dsl-libui' examples/basic_image.rb
Run with this command if you installed the Ruby gem:
ruby -r glimmer-dsl-libui -e "require 'examples/basic_image'"
Mac | Windows | Linux |
---|---|---|
New Glimmer DSL for LibUI Version:
require 'glimmer-dsl-libui'
include Glimmer
window('Basic Image', 96, 96) {
area {
# image is not a real LibUI control. It is built in Glimmer as a custom control that renders
# tiny pixels/lines as rectangle paths. As such, it does not have good performance, but can
# be used in exceptional circumstances where an image control is really needed.
#
# Furthermore, adding image directly under area is even slower due to taking up more memory for every
# image pixel rendered. Check basic_image2.rb for a faster alternative using on_draw manually.
#
# It is recommended to pass width/height args to shrink image and achieve faster performance.
image(File.expand_path('../icons/glimmer.png', __dir__), height: 96) # width is automatically calculated from height while preserving original aspect ratio
# image(File.expand_path('../icons/glimmer.png', __dir__), width: 96, height: 96) # you can specify both width, height options as alternative
# image(File.expand_path('../icons/glimmer.png', __dir__), 96, 96) # you can specify width, height args as alternative
# image(File.expand_path('../icons/glimmer.png', __dir__), 0, 0, 96, 96) # you can specify x, y, width, height args as alternative
# image(File.expand_path('../icons/glimmer.png', __dir__), x: 0, y: 0, width: 96, height: 96) # you can specify x, y, width, height options as alternative
}
}.show
New Glimmer DSL for LibUI Version 2 (better performance via on_draw
):
require 'glimmer-dsl-libui'
include Glimmer
window('Basic Image', 96, 96) {
area {
on_draw do |area_draw_params|
image(File.expand_path('../icons/glimmer.png', __dir__), height: 96)
end
}
}.show
New Glimmer DSL for LibUI Version 3 (explicit properties):
require 'glimmer-dsl-libui'
include Glimmer
window('Basic Image', 96, 96) {
area {
# image is not a real LibUI control. It is built in Glimmer as a custom control that renders
# tiny pixels/lines as rectangle paths. As such, it does not have good performance, but can
# be used in exceptional circumstances where an image control is really needed.
#
# Furthermore, adding image directly under area is even slower due to taking up more memory for every
# image pixel rendered. Check basic_image4.rb for a faster alternative using on_draw manually.
#
# It is recommended to pass width/height args to shrink image and achieve faster performance.
image {
file File.expand_path('../icons/glimmer.png', __dir__)
# x 0 # default
# y 0 # default
# width 96 # gets calculated from height while preserving original aspect ratio of 512x512
height 96
}
}
}.show
New Glimmer DSL for LibUI Version 4 (better performance with on_draw
when setting explicit properties):
require 'glimmer-dsl-libui'
include Glimmer
window('Basic Image', 96, 96) {
area {
on_draw do |area_draw_params|
image {
file File.expand_path('../icons/glimmer.png', __dir__)
height 96
}
end
}
}.show
New Glimmer DSL for LibUI Version 5 (fully manual pixel-by-pixel rendering):
# frozen_string_literal: true
# This is the manual way of rendering an image unto an area control.
# It could come in handy in special situations.
# Otherwise, it is recommended to simply utilize the `image` control that
# can be nested under area or area on_draw listener to automate all this work.
require 'glimmer-dsl-libui'
require 'chunky_png'
include Glimmer
puts 'Parsing image...'; $stdout.flush
f = File.open(File.expand_path('../icons/glimmer.png', __dir__))
canvas = ChunkyPNG::Canvas.from_io(f)
f.close
canvas.resample_nearest_neighbor!(96, 96)
data = canvas.to_rgba_stream
width = canvas.width
height = canvas.height
puts "Image width: #{width}"
puts "Image height: #{height}"
puts 'Parsing colors...'; $stdout.flush
color_maps = height.times.map do |y|
width.times.map do |x|
r = data[(y*width + x)*4].ord
g = data[(y*width + x)*4 + 1].ord
b = data[(y*width + x)*4 + 2].ord
a = data[(y*width + x)*4 + 3].ord
{x: x, y: y, color: {r: r, g: g, b: b, a: a}}
end
end.flatten
puts "#{color_maps.size} pixels to render..."; $stdout.flush
puts 'Parsing shapes...'; $stdout.flush
shape_maps = []
original_color_maps = color_maps.dup
indexed_original_color_maps = Hash[original_color_maps.each_with_index.to_a]
color_maps.each do |color_map|
index = indexed_original_color_maps[color_map]
@rectangle_start_x ||= color_map[:x]
@rectangle_width ||= 1
if color_map[:x] < width - 1 && color_map[:color] == original_color_maps[index + 1][:color]
@rectangle_width += 1
else
if color_map[:x] > 0 && color_map[:color] == original_color_maps[index - 1][:color]
shape_maps << {x: @rectangle_start_x, y: color_map[:y], width: @rectangle_width, height: 1, color: color_map[:color]}
else
shape_maps << {x: color_map[:x], y: color_map[:y], width: 1, height: 1, color: color_map[:color]}
end
@rectangle_width = 1
@rectangle_start_x = color_map[:x] == width - 1 ? 0 : color_map[:x] + 1
end
end
puts "#{shape_maps.size} shapes to render..."; $stdout.flush
puts 'Rendering image...'; $stdout.flush
window('Basic Image', 96, 96) {
area {
on_draw do |area_draw_params|
shape_maps.each do |shape_map|
path {
rectangle(shape_map[:x], shape_map[:y], shape_map[:width], shape_map[:height])
fill shape_map[:color]
}
end
end
}
}.show
Run with this command from the root of the project if you cloned the project:
ruby -r './lib/glimmer-dsl-libui' examples/basic_transform.rb
Run with this command if you installed the Ruby gem:
ruby -r glimmer-dsl-libui -e "require 'examples/basic_transform'"
Mac | Windows | Linux |
---|---|---|
New Glimmer DSL for LibUI Version:
require 'glimmer-dsl-libui'
include Glimmer
window('Basic Transform', 350, 350) {
area {
square(0, 0, 350) {
fill r: 255, g: 255, b: 0
}
40.times do |n|
square(0, 0, 100) {
fill r: [255 - n*5, 0].max, g: [n*5, 255].min, b: 0, a: 0.5
stroke :black, thickness: 2
transform {
unless OS.windows?
skew 0.15, 0.15
translate 50, 50
end
rotate 100, 100, -9 * n
scale 1.1, 1.1
if OS.windows?
skew 0.15, 0.15
translate 50, 50
end
}
}
end
}
}.show
New Glimmer DSL for LibUI Version 2:
require 'glimmer-dsl-libui'
include Glimmer
window('Basic Transform', 350, 350) {
area {
path {
square(0, 0, 350)
fill r: 255, g: 255, b: 0
}
40.times do |n|
path {
square(0, 0, 100)
fill r: [255 - n*5, 0].max, g: [n*5, 255].min, b: 0, a: 0.5
stroke :black, thickness: 2
transform {
unless OS.windows?
skew 0.15, 0.15
translate 50, 50
end
rotate 100, 100, -9 * n
scale 1.1, 1.1
if OS.windows?
skew 0.15, 0.15
translate 50, 50
end
}
}
end
}
}.show
Run with this command from the root of the project if you cloned the project:
ruby -r './lib/glimmer-dsl-libui' examples/basic_draw_text.rb
Run with this command if you installed the Ruby gem:
ruby -r glimmer-dsl-libui -e "require 'examples/basic_draw_text'"
Mac | Windows | Linux |
---|---|---|
Glimmer DSL for LibUI Version:
require 'glimmer-dsl-libui'
# Michael Ende (1929-1995)
# The Neverending Story is a fantasy novel by German writer Michael Ende,
# The English version, translated by Ralph Manheim, was published in 1983.
class BasicDrawText
include Glimmer
def alternating_color_string(initial: false, &block)
@index = 0 if initial
@index += 1
string {
if @index.odd?
color r: 0.5, g: 0, b: 0.25, a: 0.7
else
color r: 0, g: 0.5, b: 0, a: 0.7
end
block.call + "\n\n"
}
end
def launch
window('Michael Ende (1929-1995) The Neverending Story', 600, 400) {
margined true
area {
text { # default arguments for x, y, and width are (0, 0, area_draw_params[:area_width])
# align :left # default alignment
default_font family: 'Georgia', size: 13, weight: :medium, italic: :normal, stretch: :normal
alternating_color_string(initial: true) {
' At last Ygramul sensed that something was coming toward ' \
'her. With the speed of lightning, she turned about, confronting ' \
'Atreyu with an enormous steel-blue face. Her single eye had a ' \
'vertical pupil, which stared at Atreyu with inconceivable malignancy. '
}
alternating_color_string {
' A cry of fear escaped Bastian. '
}
alternating_color_string {
' A cry of terror passed through the ravine and echoed from ' \
'side to side. Ygramul turned her eye to left and right, to see if ' \
'someone else had arrived, for that sound could not have been ' \
'made by the boy who stood there as though paralyzed with ' \
'horror. '
}
alternating_color_string {
' Could she have heard my cry? Bastion wondered in alarm. ' \
"But that's not possible. "
}
alternating_color_string {
' And then Atreyu heard Ygramuls voice. It was very high ' \
'and slightly hoarse, not at all the right kind of voice for that ' \
'enormous face. Her lips did not move as she spoke. It was the ' \
'buzzing of a great swarm of hornets that shaped itself into ' \
'words. '
}
}
}
}.show
end
end
BasicDrawText.new.launch
Glimmer DSL for LibUI Version 2:
require 'glimmer-dsl-libui'
# Michael Ende (1929-1995)
# The Neverending Story is a fantasy novel by German writer Michael Ende,
# The English version, translated by Ralph Manheim, was published in 1983.
class BasicDrawText
include Glimmer
def alternating_color_string(initial: false, &block)
@index = 0 if initial
@index += 1
string {
if @index.odd?
color r: 0.5, g: 0, b: 0.25, a: 0.7
else
color r: 0, g: 0.5, b: 0, a: 0.7
end
block.call + "\n\n"
}
end
def launch
window('Michael Ende (1929-1995) The Neverending Story', 600, 400) {
margined true
area {
on_draw do |area_draw_params|
text { # default arguments for x, y, and width are (0, 0, area_draw_params[:area_width])
# align :left # default alignment
default_font family: 'Georgia', size: 13, weight: :medium, italic: :normal, stretch: :normal
alternating_color_string(initial: true) {
' At last Ygramul sensed that something was coming toward ' \
'her. With the speed of lightning, she turned about, confronting ' \
'Atreyu with an enormous steel-blue face. Her single eye had a ' \
'vertical pupil, which stared at Atreyu with inconceivable malignancy. '
}
alternating_color_string {
' A cry of fear escaped Bastian. '
}
alternating_color_string {
' A cry of terror passed through the ravine and echoed from ' \
'side to side. Ygramul turned her eye to left and right, to see if ' \
'someone else had arrived, for that sound could not have been ' \
'made by the boy who stood there as though paralyzed with ' \
'horror. '
}
alternating_color_string {
' Could she have heard my cry? Bastion wondered in alarm. ' \
"But that's not possible. "
}
alternating_color_string {
' And then Atreyu heard Ygramuls voice. It was very high ' \
'and slightly hoarse, not at all the right kind of voice for that ' \
'enormous face. Her lips did not move as she spoke. It was the ' \
'buzzing of a great swarm of hornets that shaped itself into ' \
'words. '
}
}
end
}
}.show
end
end
BasicDrawText.new.launch
Run with this command from the root of the project if you cloned the project:
ruby -r './lib/glimmer-dsl-libui' examples/basic_code_area.rb
Run with this command if you installed the Ruby gem:
ruby -r glimmer-dsl-libui -e "require 'examples/basic_code_area'"
Mac | Windows | Linux |
---|---|---|
New Glimmer DSL for LibUI Version:
(this is the method-based custom shape version of Basic Custom Shape)
examples/basic_composite_shape.rb
Run with this command from the root of the project if you cloned the project:
ruby -r './lib/glimmer-dsl-libui' examples/basic_composite_shape.rb
Run with this command if you installed the Ruby gem:
ruby -r glimmer-dsl-libui -e "require 'examples/basic_composite_shape.rb'"
(this is the class-based custom shape version of Basic Composite Shape)
examples/basic_custom_shape.rb
Run with this command from the root of the project if you cloned the project:
ruby -r './lib/glimmer-dsl-libui' examples/basic_custom_shape.rb
Run with this command if you installed the Ruby gem:
ruby -r glimmer-dsl-libui -e "require 'examples/basic_custom_shape.rb'"