OH3 oh-cell color with trendline

Setup, Configuration and Use Beginners
, ,
1
  • Platform information:
    • Hardware: _amd64
    • OS: Windows 10/10.0
    • Java Runtime Environment: 11.0.9.1 (Zulu11.43+55-CA)
    • openHAB version: openHAB 3.1.0.M5

Hi All

Is it possible to set the color of an oh-cell while also using the trendline features?

I have:

component: oh-cell
config:
  color: red
  on: true
  action: popover
  actionModal: widget:widget_with_chart
  actionModalConfig:
    mainsPower: ShellyEM_MAINS_Watt
    upsPower: ShellyEM_UPS_Watt
  title: Power Usage
  trendItem: ShellyEM_MAINS_Watt
slots: null

However the color does not work unless I remove trendItem: ShellyEM_MAINS_Watt

So without the trendItem the color is applied correctly?

Any ideas?
Mark

2

At the moment, the cell color and trendlines are mutually exclusive.

3

Has there been a solution or workaround in the mean time?

4

In the case of the oh-cell the workaround is not trivial. The format of the cells is very precisely defined and the only way to override that is to directly modify the css. However, the cells also are difficult to ID individually if you have more than one cell on a page and want different background colors. You need to wrap each cell in a container that you can give a unique identifier to so that you have distinct selectors.

To get:
image

This is the widget code

uid: demo:cell-color
props:
  parameterGroups: []
  parameters: []
tags: []
component: f7-page
config:
  stylesheet: >
    .red-cell > .oh-cell {
      background: #ffcccc;
    }
    .blue-cell > .oh-cell {
      background: #ccccff;
    }
slots:
  default:
    - component: f7-block
      config:
        class: red-cell
        style:
          margin: 0
          padding: 0
      slots:
        default:
          - component: oh-cell
            config:
              trendItem: Outside_Temperature
    - component: f7-block
      config:
        class: blue-cell
        style:
          margin: 0
          padding: 0
      slots:
        default:
          - component: oh-cell
            config:
              trendItem: Outside_Temperature
1 Like