From f22580b848cba6607731a601ea51ec56a3335a19 Mon Sep 17 00:00:00 2001 From: Ronja Date: Sat, 27 Nov 2021 17:14:50 +0100 Subject: [PATCH] hdr pass --- colorpicker.wren | 330 +++++++++++++++++++++++++++++++---------------- 1 file changed, 220 insertions(+), 110 deletions(-) diff --git a/colorpicker.wren b/colorpicker.wren index 3a2016b..6a36354 100644 --- a/colorpicker.wren +++ b/colorpicker.wren @@ -37,10 +37,21 @@ class ColorPickerData { allow_hdr:Bool{_allow_hdr} allow_hdr=(v:Bool){_allow_hdr = v} - toString{"Data - HSV:[%(h), %(s), %(v)] - RGB:[%(r), %(g), %(b)] - A:[%(a)]"} + show_hdr:Bool{_show_hdr && allow_hdr} + show_hdr=(v:Bool){_show_hdr=v} + + show_components:String{_show_components} + show_components(v:String){_show_components=v} + + debug=(v){_debug=v} + + toString{"Data - HSV:[%(h), %(s), %(v)] - RGB:[%(r), %(g), %(b)] - A:[%(a)] "+ + "(srgb:%(srgb), hdr:(intensity:%(hdr_multiplier)%(allow_hdr?", allowed":"")%(show_hdr?", shown":"")), "+ + "show components:%(show_components))%(_debug?("debug: "+_debug):"")"} construct new(){ _hdr_mul = 1 + _show_components = "rgb" set_rgba(Color.hex(0xFFAABB)) } @@ -82,6 +93,7 @@ class ColorPickerData { set_rgba(col: Color){set_rgba(col, srgb, true)} set_rgba(col: Color, srgb: Bool){set_rgba(col, srgb, true)} set_rgba(col: Color, srgb: Bool, update_spaces: Bool){ + if(col.r > 1 || col.g > 1 || col.b > 1) Fiber.abort(col) if(srgb) CPHelper.unapply_srgb(col) if(!CPHelper.approx(_r, col.r)) _r = col.r @@ -126,12 +138,13 @@ class ColorPickerData { if(!CPHelper.approx(_b, rgb.b)) _b = rgb.b } - set_rgba_component(index: Num, value: Num){ - var current = get_rgba() + set_rgba_component(index: Num, value: Num){set_rgba_component(index, value, srgb)} + set_rgba_component(index: Num, value: Num, srgb: Bool){ + var current = get_rgba(srgb, false) current[index] = value set_rgba(current) } - get_rgba_component(index: Num){get_rgba_component(index, srgb, allow_hdr)} + get_rgba_component(index: Num){get_rgba_component(index, srgb, false)} get_rgba_component(index: Num, srgb: Bool){get_rgba_component(index, srgb, false)} get_rgba_component(index: Num, srgb: Bool, hdr: Bool){ return get_rgba(srgb, hdr)[index] @@ -203,6 +216,9 @@ class ColorPicker{ UIButton.set_text(hsva_button, "hsv") Control.child_add(component_choice, hsva_button) + var srgb_switch = CPHelper.colorspace_choice(ui, color_view) + Control.child_add(component_choice, srgb_switch) + var rgba_components = CPHelper.rgba_values(ui, color_view) Control.child_add(color_view, rgba_components) @@ -227,6 +243,9 @@ class ColorPicker{ var hex_field = CPHelper.hex_input(ui, color_view) Control.child_add(color_view, hex_field) + var hdr_settings = CPHelper.hdr_settings(ui, color_view) + Control.child_add(color_view, hdr_settings) + var bottom_offset = Control.create(ui) Control.set_size(bottom_offset, 0, 8) Control.set_behave(bottom_offset, UIBehave.left) @@ -238,6 +257,158 @@ class ColorPicker{ #hidden class CPHelper{ + static hdr_settings(ui: UI, data_control: Control){ + var data: ColorPickerData = Control.get_state_data(data_control) + var root = Control.create(ui) + Control.set_behave(root, UIBehave.left | UIBehave.hfill) + Control.set_contain(root, UIContain.column | UIContain.vfit) + + var hdr_header = Control.create(ui) + Control.set_contain(hdr_header, UIContain.start | UIContain.row | UIContain.vfit) + Control.set_behave(hdr_header, UIBehave.left | UIBehave.hfill) + Control.child_add(root, hdr_header) + + var hdr_label = UILabel.create(ui) + UILabel.set_text(hdr_label, "HDR: ") + UILabel.set_text_size(hdr_label, 14) + UILabel.set_align_vertical(hdr_label, TextAlign.center) + Control.set_margin(hdr_label, 8, 8, 0, 0) + Control.set_behave(hdr_label, UIBehave.left | UIBehave.top) + Control.set_size(hdr_label, 32, 20) + Control.child_add(hdr_header, hdr_label) + + var hdr_toggle = UICheck.create(ui) //this should probably be a proper vertical swoopline + Control.set_margin(hdr_toggle, 8, 4, 0, 0) + Control.set_size(hdr_toggle, 32, 20) + Control.set_behave(hdr_toggle, UIBehave.left) + Control.child_add(hdr_header, hdr_toggle) + Control.set_events(hdr_toggle){ |event| + if(event.type == UIEvent.change){ + if(data.show_hdr == event.change) return + data.show_hdr = event.change + data.debug = "hdr toggle" + UI.events_emit(data_control, UIEvent.change, data) + } + } + + var hdr_intensity = Control.create(ui) + Control.set_margin(hdr_intensity, 0, 8, 0, 0) + Control.set_contain(hdr_intensity, UIContain.start | UIContain.row | UIContain.vfit) + Control.set_behave(hdr_intensity, UIBehave.left | UIBehave.hfill) + Control.child_add(root, hdr_intensity) + + var hdr_mult_label = UILabel.create(ui) + UILabel.set_text(hdr_mult_label, "Intensity:") + //UILabel.set_text_size(hdr_mult_label, 12) + UILabel.set_color(hdr_mult_label, [0.8, 0.8, 0.8, 1]) + Control.set_margin(hdr_mult_label, 8, 0, 0, 0) + Control.set_size(hdr_mult_label, 64, 32) + Control.set_behave(hdr_mult_label, UIBehave.left | UIBehave.top) + Control.child_add(hdr_intensity, hdr_mult_label) + + var hdr_intensity_number = UINumber.create(ui) + UINumber.set_value(hdr_intensity_number, 1) + UINumber.set_validation(hdr_intensity_number) { |input: Num| + return input.max(0) + } + Control.set_size(hdr_intensity_number, 64, 32) + Control.set_margin(hdr_intensity_number, 8, 0, 0, 0) + Control.set_behave(hdr_intensity_number, UIBehave.left | UIBehave.top) + Control.child_add(hdr_intensity, hdr_intensity_number) + Control.set_events(hdr_intensity_number){|event| + if(event.type == UIEvent.change){ + if(approx(data.hdr_multiplier, event.change)) return + data.hdr_multiplier = event.change + data.debug = "hdr intensity input" + UI.events_emit(data_control, UIEvent.change, data) + } + } + Control.set_events(data_control){|event| + if(event.type == UIEvent.change){ + System.print(event.change) + UINumber.set_value(hdr_intensity_number, data.hdr_multiplier) + } + } + + var hdr_numbers = Control.create(ui) + Control.set_margin(hdr_numbers, 0, 0, 0, 0) + Control.set_contain(hdr_numbers, UIContain.start | UIContain.row | UIContain.vfit) + Control.set_behave(hdr_numbers, UIBehave.left | UIBehave.hfill) + Control.child_add(root, hdr_numbers) + + var hdr_number_display = UILabel.create(ui) + UILabel.set_text(hdr_number_display, "[%(Str.fixed(data.r, 3)), %(Str.fixed(data.g, 3)), %(Str.fixed(data.b, 3)), %(Str.fixed(data.a, 3))]") + UILabel.set_color(hdr_number_display, Color.hex(0x808080)) + Control.set_size(hdr_number_display, 180, 32) + Control.set_margin(hdr_number_display, 8, 0, 0, 0) + Control.set_behave(hdr_number_display, UIBehave.left | UIBehave.hfill) + Control.child_add(hdr_numbers, hdr_number_display) + Control.set_events(data_control){ |event| + if(event.type == UIEvent.change){ + var hdr = data.color_hdr + UILabel.set_text(hdr_number_display, "[%(Str.fixed(hdr.r, 3)), %(Str.fixed(hdr.g, 3)), %(Str.fixed(hdr.b, 3)), %(Str.fixed(hdr.a, 3))]") + } + } + + var maximize_ldr_button = UIButton.create(ui) + UIButton.set_text(maximize_ldr_button, "maximize LDR") + UIButton.set_text_size(maximize_ldr_button, 12) + Control.set_size(maximize_ldr_button, 80, 24) + Control.set_behave(maximize_ldr_button, UIBehave.left | UIBehave.top) + Control.set_margin(maximize_ldr_button, 8, 4, 8, 0) + Control.child_add(hdr_numbers, maximize_ldr_button) + Control.set_events(maximize_ldr_button) {|event| + if(event.type == UIEvent.press){ + if(data.v < 1 && data.v > 0.001){ + var multiplier = data.hdr_multiplier.min(1/data.v).max(1) + data.hdr_multiplier = data.hdr_multiplier / multiplier + data.set_hsva_component(2, data.v * multiplier) + data.debug = "hdr maximize ldr" + UI.events_emit(data_control, UIEvent.change, data) + } + } + } + + var color_hdr = UIPanel.create(ui) + UIPanel.set_color(color_hdr, data.color_hdr) + UIPanel.set_border(color_hdr, 0, Color.clear) + Control.set_size(color_hdr, 64, 32) + Control.set_margin(color_hdr, 8, 4, 8, 0) + Control.set_behave(color_hdr, UIBehave.left | UIBehave.top) + Control.child_add(root, color_hdr) + Control.set_events(data_control){|event| + if(event.type == UIEvent.change){ + var color = data.color_hdr + color.a = 1 + UIPanel.set_color(color_hdr, color) + } + } + + //todo: color steps and more polish + + if(!data.allow_hdr){ + Control.set_visible(hdr_header, false) + } + + if(!data.show_hdr){ + Control.set_visible(hdr_intensity, false) + Control.set_visible(hdr_numbers, false) + Control.set_visible(color_hdr, false) + } + + Control.set_events(data_control){ |event| + if(event.type == UIEvent.change){ + Control.set_visible(hdr_intensity, data.show_hdr) + Control.set_visible(hdr_numbers, data.show_hdr) + Control.set_visible(color_hdr, data.show_hdr) + + Control.set_visible(hdr_header, data.allow_hdr) + } + } + + return root + } + static color_display(ui: UI, data_control: Control){ var data: ColorPickerData = Control.get_state_data(data_control) @@ -285,84 +456,43 @@ class CPHelper{ } } - var hdr_header = UILabel.create(ui) - UILabel.set_text(hdr_header, "HDR:") - UILabel.set_text_size(hdr_header, 14) - Control.set_margin(hdr_header, 8, 8, 0, 0) - Control.set_behave(hdr_header, UIBehave.left | UIBehave.top) - Control.set_size(hdr_header, 64, 32) - Control.child_add(root, hdr_header) + return root + } - var hdr_mult_label = UILabel.create(ui) - UILabel.set_text(hdr_mult_label, "multiplier:") - UILabel.set_text_size(hdr_mult_label, 12) - UILabel.set_color(hdr_mult_label, [0.8, 0.8, 0.8, 1]) - Control.set_margin(hdr_mult_label, 8, -10, 0, 0) - Control.set_size(hdr_mult_label, 64, 32) - Control.set_behave(hdr_mult_label, UIBehave.left | UIBehave.top) - Control.child_add(root, hdr_mult_label) + static colorspace_choice(ui, data_control){ + var data: ColorPickerData = Control.get_state_data(data_control) - var hdr_number = UINumber.create(ui) - UINumber.set_value(hdr_number, 1) - UINumber.set_validation(hdr_number) { |input: Num| - return input.max(0) - } - Control.set_size(hdr_number, 64, 32) - Control.set_margin(hdr_number, 8, -4, 0, 0) - Control.set_behave(hdr_number, UIBehave.left | UIBehave.top) - Control.child_add(root, hdr_number) - Control.set_events(hdr_number){|event| + var root = Control.create(ui) + Control.set_behave(root, UIBehave.left) + Control.set_contain(root, UIContain.row | UIContain.hfit | UIContain.vfit | UIContain.start) + Control.set_margin(root, 8, 0, 0, 0) + + var srgb_label = UILabel.create(ui) + Control.set_size(srgb_label, 36, 32) + UILabel.set_text(srgb_label, "srgb") + Control.set_behave(srgb_label, UIBehave.left) + Control.child_add(root, srgb_label) + + var srgb_toggle = UICheck.create(ui) + Control.set_size(srgb_toggle, 32, 20) + Control.set_behave(srgb_toggle, UIBehave.left) + Control.child_add(root, srgb_toggle) + + Control.set_events(data_control) {|event| if(event.type == UIEvent.change){ - data.hdr_multiplier = event.change + var data: ColorPickerData = event.change + UICheck.set_state(srgb_toggle, data.srgb) + } + } + + Control.set_events(srgb_toggle){ |event| + if(event.type == UIEvent.change){ + var input = event.change + data.srgb = input + data.debug = "srgb toggle" UI.events_emit(data_control, UIEvent.change, data) } } - Control.set_events(data_control){|event| - if(event.type == UIEvent.change){ - UINumber.set_value(hdr_number, data.hdr_multiplier) - } - } - - var color_hdr = UIPanel.create(ui) - UIPanel.set_color(color_hdr, data.color_hdr) - UIPanel.set_border(color_hdr, 0, Color.clear) - Control.set_size(color_hdr, 64, 32) - Control.set_margin(color_hdr, 8, 4, 8, 0) - Control.set_behave(color_hdr, UIBehave.left | UIBehave.top) - Control.child_add(root, color_hdr) - Control.set_events(data_control){|event| - if(event.type == UIEvent.change){ - var color = data.color_hdr - color.a = 1 - UIPanel.set_color(color_hdr, color) - } - } - - var maximize_ldr_button = UIButton.create(ui) - UIButton.set_text(maximize_ldr_button, "maximize LDR") - UIButton.set_text_size(maximize_ldr_button, 12) - Control.set_size(maximize_ldr_button, 80, 24) - Control.set_behave(maximize_ldr_button, UIBehave.left | UIBehave.top) - Control.set_margin(maximize_ldr_button, 0, 4, 8, 0) - Control.child_add(root, maximize_ldr_button) - Control.set_events(maximize_ldr_button) {|event| - if(event.type == UIEvent.press){ - if(data.v < 1 && data.v > 0.001){ - var multiplier = data.hdr_multiplier.min(1/data.v).max(1) - data.hdr_multiplier = data.hdr_multiplier / multiplier - data.set_hsva_component(2, data.v * multiplier) - UI.events_emit(data_control, UIEvent.change, data) - } - } - } - - if(!data.allow_hdr){ - Control.set_visible(hdr_header, false) - Control.set_visible(hdr_mult_label, false) - Control.set_visible(hdr_number, false) - Control.set_visible(maximize_ldr_button, false) - Control.set_visible(color_hdr, false) - } return root } @@ -402,38 +532,12 @@ class CPHelper{ var color = hex_string_to_color(input) if(color){ data.set_rgba(color) + data.debug = "hex input" UI.events_emit(data_control, UIEvent.change, data) } } } - var srgb_label = UILabel.create(ui) - Control.set_size(srgb_label, 36, 32) - UILabel.set_text(srgb_label, "srgb") - Control.set_behave(srgb_label, UIBehave.left) - Control.set_margin(srgb_label, 8, 0, 0, 0) - Control.child_add(root, srgb_label) - - var srgb_toggle = UICheck.create(ui) - Control.set_size(srgb_toggle, 32, 20) - Control.set_behave(srgb_toggle, UIBehave.left) - Control.child_add(root, srgb_toggle) - - Control.set_events(data_control) {|event| - if(event.type == UIEvent.change){ - var data: ColorPickerData = event.change - UICheck.set_state(srgb_toggle, data.srgb) - } - } - - Control.set_events(srgb_toggle){ |event| - if(event.type == UIEvent.change){ - var input = event.change - data.srgb = input - UI.events_emit(data_control, UIEvent.change, data) - } - } - return root } @@ -520,6 +624,7 @@ class CPHelper{ Control.set_events(number) { |event: UIEvent| if(event.type == UIEvent.change){ if(approx(UISlider.get_value(slider), event.change, 0.001)) return + System.print("number display: %(event.change)") UI.events_emit(base, UIEvent.change, event.change) } } @@ -527,6 +632,7 @@ class CPHelper{ Control.set_events(slider) { |event: UIEvent| if(event.type == UIEvent.change){ if(approx(UINumber.get_value(number), event.change, 0.001)) return + System.print("slider display: %(event.change)") UI.events_emit(base, UIEvent.change, event.change) } } @@ -546,16 +652,18 @@ class CPHelper{ Control.set_events(base) {|event| if(event.type == UIEvent.change){ - var color: ColorPickerData = Control.get_state_data(color_view) + var data: ColorPickerData = Control.get_state_data(color_view) if(space == "rgb"){ - if(approx(event.change, color.get_rgba_component(index))) return - color.set_rgba_component(index, event.change) + if(approx(event.change, data.get_rgba_component(index))) return + if(event.change > 1) Fiber.abort(event) + data.set_rgba_component(index, event.change) } else if(space == "hsv"){ - if(approx(event.change, color.get_hsva_component(index))) return - color.set_hsva_component(index, event.change) + if(approx(event.change, data.get_hsva_component(index))) return + data.set_hsva_component(index, event.change) } - Control.set_state_data(color_view, color) - UI.events_emit(color_view, UIEvent.change, color) + Control.set_state_data(color_view, data) + data.debug = "component display" + UI.events_emit(color_view, UIEvent.change, data) } } @@ -589,6 +697,7 @@ class CPHelper{ var picker_state: ColorPickerData = Control.get_state_data(data_root) var hsv = [hue, picker_state.s, picker_state.v, picker_state.a] picker_state.set_hsva(hsv, false) + data.debug = "ring" UI.events_emit(data_root, UIEvent.change, picker_state) } else if(state["triangle"] == "captured"){ //if we're editing the triangle (saturation & value) var picker_state: ColorPickerData = Control.get_state_data(data_root) @@ -614,6 +723,7 @@ class CPHelper{ //calculate and apply relevant values var hsv = [picker_state.h, saturation, value, picker_state.a] picker_state.set_hsva(hsv, false) + data.debug = "triangle" UI.events_emit(data_root, UIEvent.change, picker_state) } else { //if we're not editing anything, lets check what we're hovering over! var picker_state: ColorPickerData = Control.get_state_data(data_root)