Color type item as background of the widget

Setup, Configuration and Use Items & Sitemaps
,
1

Hello,
I’m trying to play with OH3 and I stuck in the simple custom widget :frowning:
I have AirQuality Binding which and related Color type Item LocalAirQuality_AQIColor.
I try to use value of this Item as the background color in custom widget. Unfortunately with no success :frowning:

uid: widget_2366c2df3a
tags: []
props:
  parameters:
    - description: A text prop
      label: Prop 1
      name: prop1
      required: false
      type: TEXT
    - context: item
      description: An item to control
      label: Item
      name: item
      required: false
      type: TEXT
    - context: item
      description: AQI color item
      label: Item
      name: ColorValue
      required: false
      type: TEXT
  parameterGroups: []
timestamp: Jan 9, 2021, 8:06:55 PM
component: f7-card
config:
  style:
    max-height: 200px
    background: '"rgb(" + =items[props.ColorValue].state + ")"'
  title: '=(props.item) ? "State of " + props.item : "Set props to test!"'
  footer: =props.prop1
  content: =items[props.item].displayState || items[props.item].state

image

Could somebody provide me a sample how to us it correctly?

TIA

2

ok, I’ve managed it by myself :slight_smile:

the working wersion is:
background: '="rgb(" + items[props.ColorValue].state + ")"'

image

3

Hi there,

I know, it’s a while ago, but I struggled with the same issue that you did, and I wanted use a set of colors that were consistent with other widgets, so I chose:

'=(Number.parseInt(items.LocalAirQuality_AirQualityIndex.state) < 50) ? "green" : (Number.parseInt(items.LocalAirQuality_AirQualityIndex.state) < 100 ) ? "yellow" : (Number.parseInt(items.LocalAirQuality_AirQualityIndex.state) < 150 ) ? "orange" : (Number.parseInt(items.LocalAirQuality_AirQualityIndex.state) < 200 ) ? "red" : (Number.parseInt(items.LocalAirQuality_AirQualityIndex.state) < 300 ) ? "purple" : "brown"'

Just a idea.

/// Bjarne

1 Like
4

I came across this post while I was trying to use a color from a color picker as background color of a button.

Maybee thats usefull for somebody else.
The code is converting a HSB color value from the color picker to a HSL color value used in css.
It is based on the following Algroithem: HSL and HSV - Wikipedia
Because it is not possible to use variables (at least I don’t know how) the code got very uggly, but it is working.

 - component: oh-button
                  config:
                    action: popup
                    actionModal: widget:colorPopup
                    actionModalConfig:
                      colorItem: = props.color
                    large: true
                    fill: true
                    tooltip: choose color
                    style:
                      width: 80px
                      height: 80px
                      border-radius: 40px
                      border-color: hsl(200,80%,80%)
                      background-color: > 
                        = "hsl(" 
                        + items[props.color].state.split(",")[0]+ ","
                        + ((0 === 100* (Number.parseInt( items[props.color].state.split(",")[2] )/100 * (1-0.5 * Number.parseInt( items[props.color].state.split(",")[1])/100)))
                        || (100 === 100* (Number.parseInt( items[props.color].state.split(",")[2] )/100 * (1-0.5 * Number.parseInt( items[props.color].state.split(",")[1])/100)))
                        ? 0 : 100* ((Number.parseInt( items[props.color].state.split(",")[2] ) - 100* (Number.parseInt( items[props.color].state.split(",")[2] )/100 * (1-0.5 * Number.parseInt( items[props.color].state.split(",")[1])/100)))
                        / Math.min(100* (Number.parseInt( items[props.color].state.split(",")[2] )/100 * (1-0.5 * Number.parseInt( items[props.color].state.split(",")[1])/100)), 100- 100* (Number.parseInt( items[props.color].state.split(",")[2] )/100 * (1-0.5 * Number.parseInt( items[props.color].state.split(",")[1])/100))))) +"%,"
                        + 100* (Number.parseInt( items[props.color].state.split(",")[2] )/100 * (1-0.5 * Number.parseInt( items[props.color].state.split(",")[1])/100)) +"%)"   
                      border-width: 3px
                      position: absolute
                      left: 50%
                      margin: 10px