luxe-colorpicker/colorpicker.wren
2021-05-01 13:49:10 +02:00

133 lines
No EOL
4.1 KiB
Text

import "luxe: world" for Entity, UIClear
import "luxe: ui/control" for Control
import "luxe: ui/list" for UIList
import "luxe: ui/button" for UIButton
var Color_spaces = [
{
"name": "RGB",
"components": ["r", "g", "b"],
"componentsFull": ["Red", "Green", "Blue"],
},
{
"name": "HSV",
"components": ["h", "s", "v"],
"componentsFull": ["Hue", "Saturation", "Value"],
},
{
"name": "HSL",
"components": ["h", "s", "l"],
"componentsFull": ["Hue", "Saturation", "Lightness"],
},
{
"name": "Oklab",
"components": ["L", "a", "b"],
"componentsFull": ["Lightness", "red/green", "blue/yellow"],
}
]
var Modes = [
//I wanted to do unicode icons but it doesnt render with the current font
{
"name": "Triangle",
"icon": "tri", //▲
},
{
"name": "Square",
"icon": "box", //■
},
{
"name": "Circle",
"icon": "round" //●
}
]
class ColorPicker{
static create(ui: Entity) : Control{
//setup root
var root = Control.create(ui)
Control.set_size(root, 350, 400)
//setup colorspace buttons
//todo: this should be a dropdown???
var colorspace_list = UIList.create(ui) //could use naked control but logically its a list?
Control.child_add(root, colorspace_list)
//base button size is 92x32 btw
var space_button_height = 30
var space_button_width = 50
for(i in 0...Color_spaces.count){
var space = Color_spaces[i]
var colorspace_button = UIButton.create(ui)
Control.set_size(colorspace_button, space_button_width, space_button_height)
UIList.add(colorspace_list, colorspace_button)
UIButton.set_text(colorspace_button, space["name"])
Control.set_pos(colorspace_button, i * space_button_width, 0) //manually set position
//todo: add event to actually do stuff here
}
Control.set_size(colorspace_list, Control.get_width(root).min(space_button_width * Color_spaces.count), space_button_height)
//UIList.refresh(colorspace_list) //uilist can only do vertical ordering so far :(
//setup uimode buttons
//todo: this should be a dropdown???
var mode_list = UIList.create(ui)
Control.child_add(root, mode_list)
Control.set_pos(mode_list, 0, space_button_height)
//base button size is 92x32 btw
var mode_button_height = 30
var mode_button_width = 50
for(i in 0...Modes.count){
var mode = Modes[i]
var mode_button = UIButton.create(ui)
Control.set_size(mode_button, mode_button_width, mode_button_height)
UIList.add(mode_list, mode_button)
UIButton.set_text(mode_button, mode["icon"])
Control.set_pos(mode_button, i * mode_button_width, 0) //manually set position
//todo: add event to actually do stuff here
}
Control.set_size(mode_list, Control.get_width(root).min(mode_button_width * Modes.count), mode_button_height)
//setup main editor
var main_editor_root = Control.create(ui)
Control.child_add(root, main_editor_root)
Control.set_size(main_editor_root, 200, 200)
Control.set_pos(main_editor_root, 0, mode_button_height + space_button_height)
//todo: configurable default editor
build_triangle_editor(ui, main_editor_root)
//setup sliders
var sliders_root = Control.create(ui)
Control.child_add(root, sliders_root)
Control.set_size(sliders_root, 300, 140)
Control.set_pos(sliders_root, 0, mode_button_height + space_button_height + 200)
//setup text input/output
var text_io_root = Control.create(ui)
Control.child_add(root, text_io_root)
Control.set_size(text_io_root, 150, 100)
Control.set_pos(text_io_root, 200, 160)
//setup preview field (old => new)
var preview_root = Control.create(ui)
Control.child_add(root, preview_root)
Control.set_size(preview_root, 150, 100)
Control.set_pos(preview_root, 200, 60)
//other stuff? gamma/linear? scene color pick? range toggle (0-1/0-255)? HDR??
//todo
return root
}
static build_triangle_editor(ui: Entity, root: Control){
Control.clear(root, UIClear.destroy)
}
static build_square_editor(ui: Entity, root: Control){
Control.clear(root, UIClear.destroy)
}
static build_circle_editor(ui: Entity, root: Control){
Control.clear(root, UIClear.destroy)
}
}