Color Element

The Color Element allows controlling a color value for a light emitting element using color notations in the xRRGGBB or xWWRRGGBB format and brightness 0…100. A special Web UI is available.

The value generated by the color element can be used to control light elements like

Light Element for PWM driven output.
MY9291 Element for controlling RGB stripes or power LEDs.
Neo Element for controlling WS2816 based LEDs.

The color element provides wRGB and brightness values directly to the elements linked using the connect configuration.

Web UI for the Color Element

There is a dedicated card for this element that allows controlling the value using sliders:

Color Element Web UI

The Web UI of the color element includes:

Output of the current value in string notation and as a color element.
The color element can be clicked to select a new color using a standart input[type=color] element.
A slider to control the white part of the color value separately.
A slider to control the overall brightness.
Buttons to control the mode and animations.

The slider for the white part of the value is only shown in WRGB mode.

The color value and the effective color from the sliders 1-3 is shown above the hue slider while the white value from the sliders 4 is not shown.

Element Configuration

The following properties are available for configuration of the color element.

config - The color can be set to RGB or WRGB to include the white part in the value. Default is RGB.

mode - The effect to be used. possible values are fix, fade, wheel and pulse.
The default setting is is fix. See explanation for Color mode below.

value - Is used to set the new color value in mode fix or fade.

duration - This parameter is used to specify the time for a transition in mode fade, wheel and pulse.

brightness - This parameter is used to specify the overall brightness of a light as a factor to the given color value and effects.

connect – This parameter contains a list of light element that are directly controlled by the color element.

onValue - These actions are send when the color value has changed.

onBrightness - These actions are send when the brightness has changed.

From the base element implementation the following properties are available for configuration:

title – Caption text for the element. Used by the element specific cards on the dash boards.

description – A line of text that gives a short description of the device used in the web UI.

room – The location of the device.

loglevel – This property holds the element specific log level. The default value is LOGGER_LEVEL_ERR == 1.

startup – This property can be used to start the element using a different initialization phase. Possible values are “sys”, “net”, “time”. See The Startup sequence.

Colors

Colors can be specified by the notation xWWRRGGBB or xRRGGBB similar to the web color values.

Some named color values are supported:

black – x00000000
red – x00FF0000
green – x0000FF00
blue – x000000FF
white – xFFFFFFFF

Color modes

fix – by this mode the new color and brightness values are applied immediately.

fade – by this mode the new color and brightness values are applied slowly controlled by the duration parameter.

pulse – This mode is an animation where the brightness is pulsed with the given color. The duration parameter is used to specify the number you of milliseconds for a complete cycle. Example: color/l1?mode=pulse

wheel – This mode is an animation where one color is applied by fading slowly through colors by changing the hue value. The duration parameter is used to specify the number you of milliseconds for a complete cycle. Example: color/l1?mode=wheel

flow – This mode is an animation where all hue values will flow through the pixels. It is directly supported by the new element. The duration parameter is used to specify the number you of milliseconds for a complete cycle.

mode	color	light	my9291	stripe
fix	X	X	X	X
fade	X
pulse	X
wheel	X
flow				X

Example configuration

See Bulb board

Color and Light Element linking

The Color element can control light elements using actions or using a direct connect.

To connect using actions the onvalue and onbrightness actions must be configured to send the color and brightness values to the corresponding light element.

Here is an example where a color element is controlling a NeoElement with 8 LEDS using actions:

{

  "neo": {
    "d2": {
      "pin": "D4",
      "count": 8
    }
  },
  "color": {
    "l": {
      "title": "Color Control",
      "config": "RGB",
      "mode": "fix",
      "duration": "12s",
      "value": "xFF0000",
      "brightness": 20,
      "onvalue": "neo/d2?value=$v",
      "onbrightness": "neo/d2?brightness=$v"
    }
  }
}

When using fast animations within the color element the color element can send the current value and brightness to a light element

Here is the same example where a color element is controlling a NeoElement with 8 LEDS but using a direct connect:

{
  "neo": {
    "d4": {
      "pin": "D4",
      "config": "rgb",
      "count": 8
    }
  },
  "color": {
    "l": {
      "title": "Color Control",
      "config": "RGB",
      "mode": "fix",
      "duration": "12s",
      "value": "xFF0000",
      "brightness": "20",
      "connect": [
        "neo/d4"
      ]
    }
  }
}