Building Pages in the OH3 UI: documentation draft (2/3)

uid: Licht-Widget
component: oh-list-card
config:
  title: Licht Steuerung
  accordionList: true
slots:
  default:
    - component: oh-list-item
      config:
        title: Flur
        icon: oh:corridor
        badge: =items.Licht_Flur_Power.state
        badgeColor: '=items.Licht_Flur_Power.state === "ON" ? "green" : "red"'
      slots:
        accordion:
          - component: oh-list
            config:
              accordionList: true
              class:
                - margin-left
            slots:
              default:
                - component: oh-list-item
                  config:
                    title: Steuerung allgemein
                    footer: '=items.Licht_Flur_Power.state === "ON" ? items.Licht_Flur_Watt.state : ""'
                    badge: =items.Licht_Flur_Power.state
                    badgeColor: '=items.Licht_Flur_Power.state === "ON" ? "green" : "red"'
                  slots:
                    accordion:
                      - component: oh-list
                        config:
                          accordionList: true
                          class:
                            - margin-left
                        slots:
                          default:
                            - component: oh-toggle-item
                              config:
                                title: Power
                                item: Licht_Flur
                                icon: oh:switch
                            - component: oh-slider-item
                              config:
                                item: Licht_Flur_R
                                title: Rot
                            - component: oh-slider-item
                              config:
                                item: Licht_Flur_G
                                title: Grün
                            - component: oh-slider-item
                              config:
                                item: Licht_Flur_B
                                title: Blau                                                                                                
                            - component: oh-slider-item
                              config:
                                item: Licht_Flur_Gain
                                title: Helligkeit
                            - component: oh-slider-item
                              config:
                                item: Licht_Flur_W
                                title: Weiß                                                               
                - component: oh-list-item
                  config:
                    title: Steuerung vorne
                    footer: '=items.Licht_Flur_vorne_Power.state === "ON" ? items.Licht_Flur_vorne_Watt.state : ""'
                    badge: =items.Licht_Flur_vorne_Power.state
                    badgeColor: '=items.Licht_Flur_vorne_Power.state === "ON" ? "green" : "red"'                    
                  slots:
                    accordion:
                      - component: oh-list
                        config:
                          accordionList: true
                          class:
                            - margin-left
                        slots:
                          default:
                            - component: oh-toggle-item
                              config:
                                title: Power
                                item: Licht_Flur_vorne_Power
                                icon: oh:switch
                            - component: oh-slider-item
                              config:
                                item: Licht_Flur_vorne_R
                                title: Rot
                            - component: oh-slider-item
                              config:
                                item: Licht_Flur_G
                                title: Grün
                            - component: oh-slider-item
                              config:
                                item: Licht_Flur_vorne_B
                                title: Blau                                                                                                
                            - component: oh-slider-item
                              config:
                                item: Licht_Flur_vorne_Gain
                                title: Helligkeit
                            - component: oh-slider-item
                              config:
                                item: Licht_Flur_vorne_W
                                title: Weiß   
                - component: oh-list-item
                  config:
                    title: Steuerung hinten
                    footer: '=items.Licht_Flur_hinten_Power.state === "ON" ? items.Licht_Flur_hinten_Watt.state : ""'
                    badge: =items.Licht_Flur_vorne_Power.state
                    badgeColor: '=items.Licht_Flur_vorne_Power.state === "ON" ? "green" : "red"'                    
                  slots:
                    accordion:
                      - component: oh-list
                        config:
                          accordionList: true
                          class:
                            - margin-left
                        slots:
                          default:
                            - component: oh-toggle-item
                              config:
                                title: Power
                                item: Licht_Flur_hinten_Power
                                icon: oh:switch
                            - component: oh-slider-item
                              config:
                                item: Licht_Flur_R
                                title: Rot
                            - component: oh-slider-item
                              config:
                                item: Licht_Flur_hinten_G
                                title: Grün
                            - component: oh-slider-item
                              config:
                                item: Licht_Flur_hinten_B
                                title: Blau                                                                                                
                            - component: oh-slider-item
                              config:
                                item: Licht_Flur_hinten_Gain
                                title: Helligkeit
                            - component: oh-slider-item
                              config:
                                item: Licht_Flur_hinten_W
                                title: Weiß   
    - component: oh-list-item
      config:
        title: Wohnzimmer
        icon: oh:sofa
        badge: =items.Licht_Wohnzimmer_Power.state
        badgeColor: '=items.Licht_Wohnzimmer_Power.state === "ON" ? "green" : "red"'
        background-color: red
      slots:
        accordion:
          - component: oh-list
            config:
              accordionList: true
              class:
                - margin-left
            slots:
              default:
                - component: oh-list-item
                  config:
                    title: Steuerung allgemein
                    footer: '=items.Licht_Wohnzimmer_Power.state === "ON" ? items.Licht_Wohnzimmer_Watt.state : ""' 
                    badge: =items.Licht_Wohnzimmer_Power.state
                    badgeColor: '=items.Licht_Wohnzimmer_Power.state === "ON" ? "green" : "red"'                    
                  slots:
                    accordion:
                      - component: oh-list
                        config:
                          accordionList: true
                          class:
                            - margin-left
                        slots:
                          default:
                            - component: oh-toggle-item
                              config:
                                title: Power
                                item: Licht_Wohnzimmer_Power
                                icon: oh:switch
                            - component: oh-slider-item
                              config:
                                item: Licht_Wohnzimmer_R
                                title: Rot
                            - component: oh-slider-item
                              config:
                                item: Licht_Wohnzimmer_G
                                title: Grün
                            - component: oh-slider-item
                              config:
                                item: Licht_Wohnzimmer_B
                                title: Blau
                            - component: oh-slider-item
                              config:
                                item: Licht_Wohnzimmer_Gain
                                title: Helligkeit                                                                                                
                            - component: oh-slider-item
                              config:
                                item: Licht_Wohnzimmer_W
                                title: Weiß                                
                - component: oh-list-item
                  config:
                    title: Steuerung TV
                    footer: '=items.Licht_Wohnzimmer_TV_Dimmer.state === "ON" ? items.MeterWatts.state : ""'
                    badge: =items.Licht_Wohnzimmer_TV_Dimmer.state
                    badgeColor: '=items.Licht_Wohnzimmer_TV_Dimmer.state === "ON" ? "green" : "red"'                    
                  slots:
                    accordion:
                      - component: oh-list
                        config:
                          accordionList: true
                          class:
                            - margin-left
                        slots:
                          default:
                            - component: oh-toggle-item
                              config:
                                title: Power
                                item: Licht_Wohnzimmer_TV_Dimmer
                                icon: oh:switch
                            - component: oh-slider-item
                              config:
                                item: Licht_Wohnzimmer_TV_R
                                title: Rot
                            - component: oh-slider-item
                              config:
                                item: Licht_Wohnzimmer_TV_G
                                title: Grün
                            - component: oh-slider-item
                              config:
                                item: Licht_Wohnzimmer_TV_B
                                title: Blau
                            - component: oh-slider-item
                              config:
                                item: Licht_Wohnzimmer_TV_H
                                title: Helligkeit
                            - component: oh-slider-item
                              config:
                                item: Licht_Wohnzimmer_TV_W
                                title: Weiß
                - component: oh-list-item
                  config:
                    title: Steuerung Kamin
                    footer: '=items.Licht_Wohnzimmer_Kamin_Dimmer.state === "ON" ? items.MeterWatts_K.state : ""'
                    badge: =items.Licht_Wohnzimmer_Kamin_Dimmer.state
                    badgeColor: '=items.Licht_Wohnzimmer_Kamin_Dimmer.state === "ON" ? "green" : "red"'                    
                  slots:
                    accordion:
                      - component: oh-list
                        config:
                          accordionList: true
                          class:
                            - margin-left
                        slots:
                          default:
                            - component: oh-toggle-item
                              config:
                                title: Power
                                item: Licht_Wohnzimmer_Kamin_Dimmer
                                icon: oh:switch
                            - component: oh-slider-item
                              config:
                                item: Licht_Wohnzimmer_Kamin_R
                                title: Rot
                            - component: oh-slider-item
                              config:
                                item: Licht_Wohnzimmer_Kamin_G
                                title: Grün
                            - component: oh-slider-item
                              config:
                                item: Licht_Wohnzimmer_Kamin_B
                                title: Blau
                            - component: oh-slider-item
                              config:
                                item: Licht_Wohnzimmer_Kamin_H
                                title: Helligkeit
                            - component: oh-slider-item
                              config:
                                item: Licht_Wohnzimmer_Kamin_W
                                title: Weiß                                
                - component: oh-list-item
                  config:
                    title: Steuerung Fenster
                    footer: '=items.Licht_Wohnzimmer_Fenster_Dimmer.state === "ON" ? items.MeterWatts_F.state : ""'
                    badge: =items.Licht_Wohnzimmer_Fenster_Dimmer.state
                    badgeColor: '=items.Licht_Wohnzimmer_Fenster_Dimmer.state === "ON" ? "green" : "red"'                    
                  slots:
                    accordion:
                      - component: oh-list
                        config:
                          accordionList: true
                          class:
                            - margin-left
                        slots:
                          default:
                            - component: oh-toggle-item
                              config:
                                title: Power
                                item: Licht_Wohnzimmer_Fenster_Dimmer
                                icon: oh:switch
                            - component: oh-slider-item
                              config:
                                item: Licht_Wohnzimmer_Fenster_R
                                title: Rot
                            - component: oh-slider-item
                              config:
                                item: Licht_Wohnzimmer_Fenster_G
                                title: Grün
                            - component: oh-slider-item
                              config:
                                item: Licht_Wohnzimmer_Fenster_B
                                title: Blau
                            - component: oh-slider-item
                              config:
                                item: Licht_Wohnzimmer_Fenster_H
                                title: Helligkeit
                            - component: oh-slider-item
                              config:
                                item: Licht_Wohnzimmer_Fenster_W
                                title: Weiß

Is it possible to format a number value in a badge.
If i do this

badge: =items.Power_Office.state

all decimal values are shown as well. i just want e. g. 2 decimal numbers

Also tried it with the following - without success:

  color: ='(items.HM_WZ_Heizung_Humidity.state) > '50' ? "green"'
  color: ='(items.HM_WZ_Heizung_Humidity.state) > 50 ? "green"'
  color: ='(items.HM_WZ_Heizung_Humidity.state as Number) > '50' ? "green"'
  color: ='(items.HM_WZ_Heizung_Humidity.state as Number) > 50 ? "green"'

Could someone help me and tell me what the correct term should be?

You’re missing the ‘else’ statement in your expression and have to enclose the whole expression with the quotes (including the =) - like this:

color: '=(items.HM_WZ_Heizung_Humidity.state > 50 )  ? "green" : ""'

That doesnt work, too - the colors dont change:

  color: '=(items.HM_WZ_Heizung_Humidity.state) > 50 ? "green" : "red"'

I was wondering if someone could help me too.

I’ve got a virtual switch ‘Presence’, this has been placed on a label card on the Overview page.

I wanted some conditional formatting to change the background color based on its state.

I’ve got the following:

background: "=(items.Presence.state == ON) ? '#77dd77' : '#ff6961'"

Now, the issue is that the background color always defaults to the false color…any ideas why? I’m certain that the switch is ‘ON’.

Any help would be greatly appreciated :slight_smile:

I’d guess that your item is not number then, isn’t it? Or at least it is formated as a ‘Number:Dimensionless’ - in that case you have to do:

'=(items.HM_WZ_Heizung_Humidity.state > "50 %") ? "green" : "red"'

Hi @Jeevs

In case of the ‘oh-label-card’ the background is a config parameter, which only applies to the content part - if this is enough for your scenario, just put your background expression in the config-part.

Any other background styles get overwritten by the standard widget itself.

That doesnt work, too. The item is formated just as number, but has a pattern at meta description (i think this doesnt matter?).

It shouldn’t as the .state just takes the raw item state. Could you try to create this custom widget please and tell me what’s happening with the background and whats the title label:

uid: test
component: f7-card
config:
  title: =items.HM_WZ_Heizung_Humidity.state
  style:
    background: '=(items.HM_WZ_Heizung_Humidity.state > 50) ? "green" : "red"'

Oh, and maybe it would be better to create a new topic for your problem as we spam this thread a bit too much with specific problems that doesn’t belong here…

At the seperate widget it works fine. After i added “style:” to the card-yaml it works fine, too.

Many thanks for your help!

Hi @RGroll

Yes, I’m using the ‘oh-label-card’. Not sure I quite understand that content part? Do you mean with the standard widget I can only change the background color of the text itself? Rather than the whole box?

This is my YAML for the widget:

component: oh-label-card
config:
  title: Presence
  item: Presence
  background: "=(items.Presence.state == ON) ? '#4cd964' : '#ff3b30'"
  icon: oh:presence

Thank you!

I answered here to not messing up this thread anymore.

1 Like

Can’t find a way to access the label of an item in custom widget.
Sorry if this have been answered already somewhere …

In the props section, I’m going to ask for some items, e.g.:

props:
  parameters:
    - context: item
      label: PowerState Item
      name: powerstateItem
      required: true
      type: TEXT
      ...

Later in the widget’s components, I’d like to access the items states but also sometimes the label of the item what I trying to interact with, e.g.:

        slots:
          default:
            - component: Label
              config:
                text: = items[props.powerstateItem].label

… which is not working that way :frowning:

What’s the intended way to access the label of an item for use in a widget?

This was already discussed and answered here - this isn’t possible (yet)

1 Like

Fiddling around with the new possibilities like others here, I’m searching for a way to specify the column width of f7-col item.
grafik

The code for this is:

config:
style:
  border-radius: 20px
  background-color: rgba(6,25,36)
  --text-color: rgba(255,255,255,1)
slots:
  default:
  - component: f7-block
  config:
    class:
      - padding
  slots:
    default:
      - component: f7-row
        config:
          class:
            - padding-top
        slots:
          default:
            - component: f7-block
              slots:
                default:
                  - component: f7-row
                    slots:
                      default:
                        - component: f7-col
                          slots:
                            default:
                              - component: oh-image
                                config:
                                  url: /static/icons/tv.svg
                                  style:
                                    width: 25px
                        - component: f7-col
                          slots:
                            default:
                              - component: Label
                                config:
                                  text: ="TVAV Zimmer"
                                  style:
                                    color: var(--text-color)
                                    font-size: 18px
                                    line-height: 30px
                                    text-align: right
                                    white-space: nowrap
                                    overflow: hidden
                                    text-overflow: ellipsis

The column containing the tv.svg image I like to justify in width

component: f7-col
slots:
 default:
 - component: oh-image
   config:
     url: /static/icons/tv.svg
      style:
      width: 25px

Any suggestion is welcome.

Generally you could set the width of each column with the config parameter width: as described here

But I think in your case it would be more usefull to get rid of the columns at all and just use the row where you align your contents in - something like:

component: f7-card
config:
  style:
    border-radius: 20px
    background-color: rgba(6,25,36)
    --text-color: rgba(255,255,255,1)
slots:
  default:
    - component: f7-block
      config:
        class:
          - padding
      slots:
        default:
          - component: f7-row
            config:
              style:
                flex-wrap: nowrap
            slots:
              default:
                - component: f7-icon
                  config:
                    f7: tv
                    size: 30
                    color: white
                    class:
                      - padding-right
                - component: Label
                  config:
                    text: ="TVAV Zimmer"
                    style:
                      color: var(--text-color)
                      font-size: 18px
                      line-height: 30px
                      text-align: left
                      white-space: nowrap
                      overflow: hidden
                      text-overflow: ellipsis

image

1 Like

Thank you!

These widgets look great. But how do I have to use the source code provided at GitHub - rgrollfitz/oh3-widgets ? I added them on the developer page and now I have them under “Personal Widgets”.

But I only have sliders and switches on the widget. Now I want to use them for thermostats, displaying actual temperature history as a graph in the background and setting the desired temperature. Plus, I would like to show the humidity. This is shown in the images above for the dimmer control, but what are the required settings?

  • How to include the nice graph in the widget background?
  • Where should I put the images provided in the github archive?
  • How can I include those images?
  • How can I add the humidity information?

Sorry for posting so many questions, but for me, this widget topic is quite confusing and beyond any experience… Thanks!

Hey @Tobi77

this was one of my first experiments with the YAML structure and wasn’t updated since - so there might be some missing parts in documentation as well as in function.

It was more a first proof-of-concept how standard components of the MainUI would fit into a custom widget. So please be indulgent :slight_smile:

You can enable/disable every control-element using the widget-configuration.
image

There’s no support for graphs in this widget. It could be added but wouldn’t fit the look & feel very well - The used oh-trend component isn’t very flexible regarding styling atm.

image

Setting the desired temperature is possible with one of the control-elements (like slider, stepper buttons and so on) after you’ve defined the item you want to control (also in the widget-configuration setting)

If I got you right you want to show 2 values in the widget at the same time - like for example current temperature and humidity - this also isn’t supported as it was planned as a very simplistic approch to control & show a single item (yet?!).

Added an example with the integration of the oh-trend component below

I updated the widget, that you don’t have to define the liquid-background anymore (as it’s implemented as an encoded inline-svg now)

You can set the path to the ‘hero-image’ (the one in the top-right corner) also inside the widget-configuration. The standard path would be /static/brightness_icon.svg which corresponds to the path /etc/openhab/html/in your OH-setup. But as said, you can set any url here.

What exactly you mean with ‘include’? Putting it inside the widget so you don’t need to load any images from another server? If you want to, you can customize the code so it loads the encoded svg as css-attirbute (this converter might help you with that)

But it remains - this widget still serves more a proof-of-concept approach (and maybe some small real-life usecases) as it’s not finished. Maybe I’ll find time to make it more configurable (and usable) in the future - but this isn’t my first priority right now tbh.

Nevertheless I updated the widget a bit to make it at least a bit more accessible and cleaned up the configuration section…

Widget YAML
uid: darkLiquid_card
tags:
  - small
  - dark
  - custom
  - liquid
props:
  parameters:
    - context: item
      description: Set an item which you want to control
      label: Item
      name: item
      required: false
      type: TEXT
      groupName: general
    - label: Value symbol
      description: The value symbol shown after the item-value
      name: valueSymbol
      required: false
      type: TEXT
      groupName: general
    - description: valueSymbol high or low
      label: Value symbol position
      name: valueSymbolPos
      required: false
      type: BOOLEAN
      groupName: general
      advanced: true
    - description: Set the lowest value, that your item can have. (<b>default:</b> 0)
      label: Items MIN value
      name: minValue
      required: false
      type: TEXT
      groupName: general
    - description: Set the highest value, that your item can have. (<b>default:</b> 100)
      label: Items MAX value
      name: maxValue
      required: false
      type: TEXT
      groupName: general
    - description: Show trend graph instead of liquid background
      label: Trend graph
      name: showTrend
      required: false
      type: BOOLEAN
      groupName: general
    - label: Headline text
      name: headline
      required: false
      type: TEXT
      groupName: header
    - label: Subheadline text
      name: subheadline
      required: false
      type: TEXT
      groupName: header   
    - label: Hero icon image url
      name: heroIcon
      required: false
      type: TEXT
      groupName: images
    - description: Activating Stepper element to control item which you selected above
      label: Show stepper buttons
      name: showStepper
      required: false
      type: BOOLEAN
      groupName: controls
    - description: Activating Toggle element to control item which you selected above
      label: Show toggle
      name: showToggle
      required: false
      type: BOOLEAN
      groupName: controls
    - description: Activating Slider element to control item which you selected above
      label: Show slider
      name: showSlider
      required: false
      type: BOOLEAN
      groupName: controls

  parameterGroups:
    - name: general
      label: General settings
      description: Most important widget settings
    - name: header
      label: Header area  
    - name: controls
      label: Control settings
      description: Controls to manipulate your item-state (only use one of them)
    - name: images
      label: Images
timestamp: Jan 9, 2021, 11:43:36 AM
component: f7-block
config:
  style:
    position: relative
    -ms-user-select: None
    -moz-user-select: None
    -webkit-user-select: None
    user-select: None
  class:
    - no-padding
    - no-margin
slots:
  default:
    - component: oh-image
      config:
        url: "=props.heroIcon ? props.heroIcon : ''"
        style:
          position: absolute
          top: -15px
          right: -10px
          width: 100%
          max-width: min(max(50px, 15vw), 80px)
          z-index: 99
    - component: f7-card
      config:
        style:
          max-height: 200px
          background-color: rgb(57,60,76)
          border-radius: 20px
          overflow: hidden
          position: relative
      slots:
        default:
          - component: oh-repeater
            config:
              visible: "=props.showTrend ? false : true"
              sourceType: range
              for: liquid
              rangeStart: "=!props.minValue ? 0 : Number(props.minValue)"
              rangeStop: "=!props.maxValue ? 100 : Number(props.maxValue)"         
            slots:
              default:
                - component: f7-block
                  config:
                    visible: =items[props.item].state == loop.liquid_idx
                    style:
                      background-image: url('data:image/svg+xml,%3C%3Fxml version="1.0" encoding="UTF-8" standalone="no"%3F%3E%3C!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"%3E%3Csvg width="100%25" height="100%25" viewBox="0 0 100%25 100%25" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;"%3E%3Cg transform="matrix(1,0,0,1.16583,0,-41.4573)"%3E%3Cpath d="M2100,51C1877.85,82.213 1653.26,55.095 1427.19,70.645C1309.15,78.764 1091.86,41.538 882.9,59.37C605.267,83.062 300.648,21.379 0,51L0,250L2100,250L2100,51Z" style="fill:url(%23_Linear1);"/%3E%3C/g%3E%3Cdefs%3E%3ClinearGradient id="_Linear1" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-2,-214.44,250,-1.71552,1149,250)"%3E%3Cstop offset="0" style="stop-color:rgb(255,136,0);stop-opacity:1"/%3E%3Cstop offset="1" style="stop-color:rgb(255,197,28);stop-opacity:1"/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E%0A')
                      position: absolute
                      height: 100%
                      width: 100%
                      left: 0
                      bottom: "=Math.fround((Number(loop.liquid) - (!props.maxValue ? 100 : Number(props.maxValue))) * (100 / (!props.maxValue ? 100 : Number(props.maxValue) - (!props.minValue ? 0 : Number(props.minValue))))) + '%'"
                      z-index: 1
          - component: f7-card-content
            config:
              style:
                height: 100%
                display: flex
                flex-direction: column
                position: relative
                z-index: 999
            slots:
              default:
                - component: f7-row
                  config:
                    style:
                      z-index: 999
                  slots:
                    default:
                      - component: f7-col
                        slots:
                          default:
                            - component: Label
                              config:
                                propsParameterGroup: header
                                text: '=(props.headline) ? props.headline : "Headline"'
                                style:
                                  white-space: nowrap
                                  text-overflow: ellipsis
                                  overflow: hidden
                                  display: block
                                  width: 100%
                                  color: rgba(255,255,255,1)
                                  letter-spacing: .75px
                                  font-size: min(max(14px, 4vw), 21px)
                                  font-weight: 600
                            - component: Label
                              config:
                                actionPropsParameterGroup: header
                                text: '=(props.subheadline) ? props.subheadline : "Subheadline"'
                                style:
                                  white-space: nowrap
                                  text-overflow: ellipsis
                                  overflow: hidden
                                  color: rgba(255,255,255,.7)
                                  letter-spacing: .75px
                                  font-size: min(max(9px, 2.5vw), 12px)
                - component: f7-row
                  config:
                    style:
                      z-index: 999
                  slots:
                    default:
                      - component: f7-col
                        config:
                          class: '=props.valueSymbolPos ? props.valueSymbolPos : "align-items-flex-end"'
                          style:
                            display: flex
                            justify-content: flex-start
                            position: relative
                        slots:
                          default:
                            - component: Label
                              config:
                                text: =items[props.item].state
                                style:
                                  color: rgba(255,255,255,1)
                                  text-shadow: 2px 2px rgba(0,0,0,.25)
                                  font-size: min(max(32px, 9vw), 51px)
                                  font-weight: 600
                            - component: Label
                              config:
                                text: =props.valueSymbol
                                style:
                                  color: rgba(255,255,255,1)
                                  text-shadow: 2px 2px rgba(0,0,0,.25)
                                  font-size: min(max(21px, 5.75vw), 32px)
                                  font-weight: 600
                      - component: f7-col
                        config:
                          style:
                            display: flex
                            align-self: center
                            justify-content: flex-end
                            align-items: flex-end
                            flex-direction: column
                        slots:
                          default:
                            - component: oh-icon
                              config:
                                icon: power
                                visible: =items[props.item].state === "0"
                                action: command
                                actionOptions: COMMAND
                                actionItem: =props.item
                                actionPropsParameterGroup: action
                                actionCommand: ON
                                width: 20
                                height: 20
                                style:
                                  cursor: pointer
                                  filter: invert()
                            - component: oh-icon
                              config:
                                icon: power
                                visible: =items[props.item].state > "0"
                                action: command
                                actionOptions: COMMAND
                                actionItem: =props.item
                                actionCommand: OFF
                                width: 20
                                height: 20
                                style:
                                  cursor: pointer
                                  filter: invert(14%) sepia(99%) saturate(7416%) hue-rotate(0deg) brightness(94%) contrast(114%)
                - component: f7-row
                  slots:
                    default:
                      - component: f7-col
                        config:
                          class: '=props.alignActionLeft ? props.alignActionLeft : "justify-content-flex-end"'
                          style:
                            height: 28px
                            max-height: 28px
                            display: flex
                        slots:
                          default:
                            - component: oh-stepper
                              config:
                                class: '=props.showStepper ? props.showStepper : "display-none"'
                                raised: true
                                buttonsOnly: true
                                small: true
                                autorepeat: true
                                min: =props.minValue
                                max: =props.maxValue
                                step: 1
                                color: white
                                style:
                                  list-style-type: none
                                item: =props.item
                            - component: oh-toggle
                              config:
                                class: '=props.showToggle ? props.showToggle : "display-none"'
                                color: yellow
                                item: =props.item
                                style:
                                  align-self: flex-end
                            - component: oh-slider
                              config:
                                class: '=props.showSlider ? props.showSlider : "display-none"'
                                step: "1"
                                min: =props.minValue
                                max: =props.maxValue
                                item: =props.item
                                style:
                                  align-self: flex-end
                                  font-color: yellow
                            - component: oh-trend
                              config:
                                visible: "=props.showTrend ? true : false"
                                trendItem: =props.item
                                trendGradient:
                                  - "#FFE7DD"
                                  - "#FFD1BD"
                                style:
                                  position: absolute
                                  bottom: 0
                                  left: 0
                                  width: 100%
                                  height: 100%