Added !NEW! SimpleColor action block

[elsoazemelet]

The expected behaviour and design proposal is described in the ticket that this PR closes. See below.

Closes #912

[github-actions]

Visit the preview URL for this PR (updated for commit b0314a5):

https://grid-editor-web--pr928-feat-colorpicker-fsug8m36.web.app

_{(expires Tue, 25 Mar 2025 21:14:04 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: 2b65ba6ef19c55d367eaffd04e46bcde25305d6f}

[danim1130]

Can we move the ColorPicker components to the uikit library?

[Greg-Orca]

Test Failed:

Issues:

• Module LEDs do not receive the color.
• Not working: Each active keyframe can be selected on the preview display, but R, G, B, and alpha values are not loaded for the given keyframe.
• Cannot write RGB and alpha values in the text box; displays 'NaN'.

env: MacOS

Screen.Recording.2025-02-13.at.11.30.16.mov

[narayb]

We'll issue an updated design for the colorbar as it looks too much like a slider and causes the user expectation that it's clickable and slide-able. That's on the design, we'll fix it.

Aside from this the feature looks as specified. Nice!

However I can only echo the sentiments of @Greg-Orca above:

• slider does not update position or values when switching between color states min, mid or max
• layer 0 does not exist, therefore it should not be a default layer (layers are 1 or 2)
• typing into the value fields does not produce a change, fields become NaN
• any kind of configuration created doesn't run on the nightly firmware currently, possibly awaiting a new FW patch to implement the functionality itself (this could be the cause of the above problems as well?)
• the parameters should match already existing, similar blocks in design (LED Number input field followed by Layer input field)

• resizing the panel causes the colorwheel to grow unnecessarily large, the colorwheel size should probably stay static

• 'Easy Color' is not the name I would give to the block itself, something akin to Simple Color would suit it better
• the randomization of a new added color wasn't part of the specification, and the way Editor hadles it causes it to change the configuration constantly

Also the sequence of events when adding new colors is wrong. Now what it does is:
1, Has a color at the max, then you add a second color.
2, The color previously at the max moves to the min position.

What it should be doing instead:
1, Has a color at the max, then you add a second color.
2, The color previously at the max should still stay at the max position and the second color should move into the min position.

[elsoazemelet]

• Color picker Square Y axis and Circle radius should set brightness 50 to 100 and render picker accordingly
• Selection order when adding new should follow visual adding (max, min, middle)
• Selection should be more visible (not pretty)
• Fix square pickers out of bound selection
• Make VM more lightweight

[Greg-Orca]

Test Failed

• Variables are not working in the RGBA input fields

• HSL sliders jumping while adjusting

• Still cant write any parameters to the RGBA input fields

[Greg-Orca]

Test Failed

• Variables not working in RGBA, Classic, and HSL input fields
• The circle is out of the color picker when using a low number or 0

• circle is not jumps to the corresponding RGBA and Classic value
  

• HSL still jumps while adjusting parameters

[narayb]

Color picker design change

The current design fails to serve the user on the following points:

• it has no way to display dark colours on the colour picker
• the user is not able to pick dark colours on the colour picker
• the intensity does not fulfill the part of "darkening" either

The Solution is to use a design that solves these issues.

Taken from https://rgbcolorpicker.com/

The truth is, for this the block has to work like this:

1, It has fields for color code entry in multiple formats (RGB, HSV, HSL, HEX etc), but has only one color picker to display the result.
2, Color code entry happens and then gets transformed to a format that can be properly displayed on the - normally - HSL color picker above.

[Greg-Orca]

Test Failed

• Color change not synchronized while dragging and dropping the picker; only when releasing the picker. (The previous version had this functionality.)

• at RGB 0, 0, 0 picker out of the circle

• The picker is not perfectly aligned with the color palette. On the right side, I can pull it out, but on the left side, I cannot.

• Opening and closing the Action block fails to maintain the chosen color picker state.

[Greg-Orca]

Test Result

Passed:

• smooth transitions
• live update
• picker is always in correct positions

Failed:

• Intensity not updates now if I switch in color "stage"
  

• Intensity can't be adjusted only to the middle stage; it influences the right endpoint
  

[SukuWc]

Functionality can now be tested on real modules!

1. Get a real module
2. Update to nightly firmware: https://github.com/intechstudio/grid-fw/raw/preview/Preview/Firmware/grid_esp32_nightly.uf2
3. Clear all configuration
4. Select the system element and add the following code to its setup event:

for i = 0, #element do
    element[i].led_color = function(self, l, c)
        print("Easy color triggered", l, #c)
        local up = table.unpack
        local i, x, y, z = self:element_index(), c[1], c[2], c[#c]
        if #c == 1 then
            x = {0, 0, 0, 0}
            y = {z[1] // 2, z[2] // 2, z[3] // 2, z[4] / 2}
        elseif #c == 2 then
            y = {(x[1] + z[1]) // 2, (x[2] + z[2]) // 2, (x[3] + z[3]) // 2, (x[4] + z[4]) / 2}
        elseif #c == 3 then
        end
        led_color_min(i, l, up(x))
        led_color_mid(i, l, up(y))
        led_color_max(i, l, up(z))
    end
end
print("Easy color installed")

5. Now you can use the Easy Color action on the control elements.
6. Note that led intensity should be set to -1, this causes the firmware to calculate the correct color mix between minimum and maximum value.

[SukuWc]

Bug found:
Adding or removing keyframes send Syncs with grid before sending new config out (reactivity order is reversed, dispatch("sync") runs befor the reactive $: statment on the data store)

  function handleAddLayer() {
    const last = get(data).previewColors.at(-1);
    data.addLayer(last);

    dispatch("sync");
  }

  function handleRemoveLayer() {
    const selected = get(data).selectedIndex;
    data.removeLayer(selected);

    dispatch("sync");
  }

[Greg-Orca]

Test Failed

The editor freezes when I use a function (e.g., self:encoder_value()) in an input field and then close and reopen the Simple Color block (or copy and paste)

[SukuWc]

Parsing bug fixed for red, green, blue and alpha input fields!
Num and layer fields are special due to underlying parsing strategy, these do not produce runtime error but parsing can be incorrect!

Separate issues created to track upcoming work:
#1040
#1041