jean-emmanuel / open-stage-control

Libre and modular OSC / MIDI controller
https://openstagecontrol.ammd.net
GNU General Public License v3.0
702 stars 88 forks source link

[Bug] Inconsistent, accepted formats for widget color properties leads to errors and performance degradation #755

Closed TheRaztoR closed 2 years ago

TheRaztoR commented 2 years ago

Affected widgets:

  1. RGB Widget
  2. Modal Widget. Issue likely exist in other widgets as well.

OSC Version: 1.10.3

Issue: Fetching values from an RGB widget to control another widget's color properties results in the following error being generated:

Uncaught Error: unknown format: rgba(xxx.xx, xxx.xx, xxx.xx, x) at r (node_modules/chroma-js/chroma.js:1:0) at r (node_modules/chroma-js/chroma.js:1:0) at rgb (src/client/ui/scrollbar-color.js:21:61)

Only the "colorText" property accepts values containing a point decimal (i.e 154.34) without generating an error. Furthermore, the color properties of a modal widget does not accept the array format provided by an RGB widget directly.

Example of a computed value for "colorFill" when fetching the values from an RGB widget using _@{your_rgb_widgetid}:

[ 176.61, 46.43, 46.43, 1 ]

Note the square brackets that are automatically sent to the property, preventing the simple solution of prefixing the data with rgba(...)

However, by accessing the RGB widget's values as an indexed array, you can retrieve each value separately and repackage them directly inside the modal's color properties: _#{@{your_modal_widget_id}[0]}, #{@{your_modal_widgetid}[1]} etc. The modal color properties can then be dynamically updated while retrieving data from an RGB widget. However, this results in an error being reported every time the values are retrieved. The error is generated when specifically updating a modal's "colorWidget", "colorStroke" and "colorFill" properties using the retrieved values from an RGB widget. The "colorText" property updates as it should without any errors being generated.

Steps to reproduce:

  1. Make sure that the console is enabled and visible.
  2. Create two widgets, one of type modal and the other of type RGB.
  3. Make sure that each widget has an unique ID, i.e. _modaltest and _rgbtest
  4. In the RGB widget under the "rgb" properties section, make sure that the property alpha is set to true.
  5. In the modal widget under the "style" properties section, set the value for property "colorText" to the following (change "rgb_id" to match the RGB widget ID you use): rgba(#{@{rgb_id}[0]},#{@{rgb_id}[1]},#{@{rgb_id}[2]},#{@{rgb_id}[3]}
  6. Move the RGB widget's alpha slider to the far right.
  7. Move the RGB widget's XY pad around and observe the shifting colors of the modal widget's text. No error reports should be generated here.
  8. Cut and paste the same values you wrote at step 6 to the modal's "colorFill" style property.
  9. Move the RGB widget's XY pad around and observe the shifting colors of the modal widget's color.
  10. Note the error reports inside of the console.
jean-emmanuel commented 2 years ago

The error message will be prevented in next release, it occurs only with colorWidget/colorFill because of a particular usage containers make of this properties (ie changing their scrollbar color).

Furthermore, the color properties of a modal widget does not accept the array format provided by an RGB widget directly.

That's expected. Another way to remove the bracket is to convert the array to a string:

#{"rgba(" + String(@{rgb_1}) + ")"}
TheRaztoR commented 2 years ago

The error message will be prevented in next release, it occurs only with colorWidget/colorFill because of a particular usage containers make of this properties (ie changing their scrollbar color).

Furthermore, the color properties of a modal widget does not accept the array format provided by an RGB widget directly.

That's expected. Another way to remove the bracket is to convert the array to a string:

#{"rgba(" + String(@{rgb_1}) + ")"}

That makes sense. I had tried converting the array to a string earlier using the "toString()" method, but your idea is more sensible. Thank you for the suggestion