OH3 User Interface: From beginner for beginners

I started with smarthome/OH (3) a couple of months ago. Having only little programming experience and being used to Office-functionality I totally underestimated how much time and effort I’d have to invest to get the results I wanted. Things that should’ve been really simple (in my naive expectation) often turned out to be very time consuming. Had I known that from the beginning, I might have stuck to a very simple solution. But it’s always been: let me just do this, can’t be a big thing …
I might have saved a lot of time if I’d found more solutions which I could simply have adapted to my needs. So here I post my (current) main page with different functionalities that might be interesting to some of you. If so, let me know and I’ll post the code and some explanations (as far as I still can remember…).
And I’d like to thank the community (especially @rlkoshak , @JustinG and @RGroll who’ve been extremely patient with me …)
What else to say: I’m aware that my “solution” is far from perfect (appearance, functionality and especially the coding) but I’m happy I got this far. So this is NOT A TUTORIAL but more something like a “solution” which you might find helpful for adapting/learning purposes.

  1. Electricity generation and electric car settings (connected to openwb)
    First line: opens graph (1b), changes color when hovering above;; “EVU” changes color (negative = green, positive = red; meaning buying and selling electricity)
    a)Drop-Down with several action-items in a line

b) rather simple graph, when clicking on the red icon (upper left)

  1. Some basic climatic information (inside, outside); colors depend on values (e.g. red when hot or high CO2-ppm)

  2. Simple item buttons, but with icons and black text color
    a) Harmony Hub - media control
    Looks nicer on smartphones, where the remote control appears below the left section, not next to it. The remote control is a widget I found here: OH3 Harmony Widget - #7 by matt1
    Because it doesn’t allow direct control of specific devices, I added the left part. Here I can control the receiver (loudness and Input) and the Fire TV directly. The three actions (Aktion Kino, FireTV, XBox) trigger Harmony-actions (e.g. turn on projector, receiver, Xbox and put receiver-input to Xbox). These can be triggered by Alexa-voice commands, too.

b) Alexa-output
Here I have some drop down-fields where I can tell which device should be used, the music source (playlists and radio-stations), some music information. Furthermore I can enter commands or text which will be send to the selected device (e.g. to call a kid -our house is quite large and this reduces shouting/walking)

  1. Controls for / information about lights, windows, connected internet devices, heat control
    a) Lights (took some work; repeater function is used…):

b) windows: shows open/closed windows and how many windows are open (similar to the “how many lights are turned on”-functionality

c) internet devices: which are online, offline, when were they last seen? I wanted a graph that shows online/offline times somewhat like this:


But since Ithat was too difficult for me, here’s the simpler solution:

Clicking on a device opens a graph like:

  1. Just simple buttons that trigger alexa voice commands (tell kid to stop playing, to come to eat), they can be triggered by voice commands, too.

The basic idea was to have one central site which offers most of the needed functionality with a maximum of one click. I intentionally didn’t use the standard overview page for that due to its limitations (e.g. no background colors)

So, if you’d like some more detailed information (especially the code) about some of these functionalities, let me know and I’ll post them here.

Next things to do will be:

  • add some devices for which I’d like to use Zigbee2MQTT but I still have trouble installing the zzh-hub correctly
  • add a calling list from the fritzbox, still struggling here too, but I’ll post here when/if I manage to get an acceptable solution.
14 Likes

Looks really nice, would you mind sharing your YAML configs…

1 Like

Thanks. Yes I’ll share the YAML and maybe some rule-codes, too. It might take a while, so later today …

3 Likes

So here are the codes. Keep in mind that I’m not an IT-professional and that the code is not exactly elegant. Since I don’t know how to comment in YAML, there are no comments to explain things, which I regret. And I don’t understand all of the lines myself because some are copied from other places.

To begin with, I wanted to post the entire code of the page. This might help if you use a text-search function to find something specific. But that exceeds the limi, I might post this seperately.

So I’ll start with the details:

  1. Electricity
component: oh-list-card
config:
  accordionList: true
  noChevron: true
  style:
    background: linear-gradient(to bottom,#e6e6e6 0%,#8c8c8c 100%)
slots:
  default:
    - component: f7-list-item
      config:
        accordionItem: true
      slots:
        content:
          - component: oh-button
            config:
              class:
                - margin
                - display-flex
                - flex-direction-column
              icon-f7: waveform_path_ecg
              iconColor: blue
              style:
                --f7-button-bg-color: red
                --f7-button-hover-bg-color: blue
                --f7-button-pressed-bg-color: blue
                height: auto
              action: navigate
              actionModal: page:z_EVU_PV
              actionPage: page:z_EVU_PV
          - component: Label
            config:
              text: =("EVU " + (items.openWBVerbindung_openWB_EVU.state))
              style:
                margin-top: 0px
                left: 0px
                font-size: 24px
                color: '=(items.openWBVerbindung_openWB_EVU.state < "0") ? "green" : "red"'
          - component: oh-label-item
            config:
              title: PV
              item: openWBVerbindung_openWB_PV
    - component: f7-list-item
      config:
        accordionItem: true
      slots:
        content:
          - component: oh-list-item
            config:
              title: Garage/Zoe
          - component: oh-label-item
            config:
              icon: oh:battery
              iconUseState: true
              item: openWBVerbindung_OpenWBLP1SoC
          - component: oh-button
            config:
              class:
                - margin
                - display-flex
                - flex-direction-column
              icon-f7: square_arrow_right
              iconColor: '=(items.openWBVerbindung_openWBLP1angeschlossen.state === "0") ?
                "gray" : ((items.openWBVerbindung_openWBLP1ladend.state === "1")
                ? "green" : "orange")'
              style:
                --f7-button-bg-color: transparent
                --f7-button-hover-bg-color: transparent
                --f7-button-pressed-bg-color: transparent
                height: auto
          - component: oh-label-item
            config:
              item: openWBVerbindung_openWBLP1ladeleistung
        default:
          - component: f7-accordion-content
            slots:
              default:
                - component: f7-list-item
                  config:
                    accordionItem: true
                  slots:
                    content:
                      - component: oh-button
                        config:
                          class:
                            - margin
                            - display-flex
                            - flex-direction-column
                          action: command
                          actionItem: openWBVerbindung_openWB_LP1_lademodus
                          actionCommand: ="2"
                          icon-f7: sun_max
                          iconColor: '=(items.openWBVerbindung_openWB_LP1_lademodus.state === "2") ?
                            "blue" : "grey"'
                          text: PV
                          textColor: '=(items.openWBVerbindung_openWB_LP1_lademodus.state === "2") ?
                            "blue" : "grey"'
                          style:
                            --f7-button-bg-color: transparent
                            --f7-button-hover-bg-color: transparent
                            --f7-button-pressed-bg-color: transparent
                            font-size: 8px
                            height: auto
                      - component: oh-button
                        config:
                          class:
                            - margin
                            - display-flex
                            - flex-direction-column
                          action: command
                          actionItem: openWBVerbindung_openWB_LP1_lademodus
                          actionCommand: ="0"
                          icon-f7: timer
                          iconColor: '=(items.openWBVerbindung_openWB_LP1_lademodus.state === "0") ?
                            "blue" : "grey"'
                          text: Sofort
                          textColor: '=(items.openWBVerbindung_openWB_LP1_lademodus.state === "0") ?
                            "blue" : "grey"'
                          style:
                            --f7-button-bg-color: transparent
                            --f7-button-hover-bg-color: transparent
                            --f7-button-pressed-bg-color: transparent
                            font-size: 8px
                            height: auto
                      - component: oh-button
                        config:
                          class:
                            - margin
                            - display-flex
                            - flex-direction-column
                          action: command
                          actionItem: openWBVerbindung_openWB_LP1_lademodus
                          actionCommand: ="4"
                          icon-f7: pause_circle
                          iconColor: '=(items.openWBVerbindung_openWB_LP1_lademodus.state === "4") ?
                            "blue" : "grey"'
                          text: Standby
                          textColor: '=(items.openWBVerbindung_openWB_LP1_lademodus.state === "4") ?
                            "blue" : "grey"'
                          style:
                            --f7-button-bg-color: transparent
                            --f7-button-hover-bg-color: transparent
                            --f7-button-pressed-bg-color: transparent
                            font-size: 8px
                            height: auto
                      - component: oh-button
                        config:
                          class:
                            - margin
                            - display-flex
                            - flex-direction-column
                          action: command
                          actionItem: openWBVerbindung_openWB_LP1_lademodus
                          actionCommand: ="3"
                          icon-f7: stop_circle
                          iconColor: '=(items.openWBVerbindung_openWB_LP1_lademodus.state === "3") ?
                            "blue" : "grey"'
                          text: Stop
                          textColor: '=(items.openWBVerbindung_openWB_LP1_lademodus.state === "3") ?
                            "blue" : "grey"'
                          style:
                            --f7-button-bg-color: transparent
                            --f7-button-hover-bg-color: transparent
                            --f7-button-pressed-bg-color: transparent
                            font-size: 8px
                            height: auto
                      - component: oh-button
                        config:
                          class:
                            - margin
                            - display-flex
                            - flex-direction-column
                          action: command
                          actionItem: openWBVerbindung_openWB_LP1_lademodus
                          actionCommand: ="1"
                          icon-f7: sun_haze
                          iconColor: '=(items.openWBVerbindung_openWB_LP1_lademodus.state === "1") ?
                            "blue" : "grey"'
                          text: Min+PV
                          textColor: '=(items.openWBVerbindung_openWB_LP1_lademodus.state === "1") ?
                            "blue" : "grey"'
                          style:
                            --f7-button-bg-color: transparent
                            --f7-button-hover-bg-color: transparent
                            --f7-button-pressed-bg-color: transparent
                            font-size: 8px
                            height: auto
                - component: f7-list-item
                  config:
                    accordionItem: true
                  slots:
                    default:
                      - component: oh-slider-item
                        config:
                          title: Sofortladen - Stärke
                          item: openWBVerbindung_openWB_LP1_sofortladensollstromstaerke
                          min: 6
                          max: 32
                          step: 1
                          label: true
                          scale: true
                          unit: A
                - component: f7-list-item
                  config:
                    accordionItem: true
                  slots:
                    default:
                      - component: oh-slider-item
                        config:
                          title: Sofort bis SoC
                          item: openWB_LP1_DirectChargeSoc
                          min: 0
                          max: 100
                          step: 5
                          label: true
                          scale: true
                          scaleSteps: 10
                          scaleSubSteps: 1
                - component: f7-list-item
                  config:
                    accordionItem: true
                  slots:
                    content:
                      - component: oh-label-item
                        config:
                          title: kWh heute
                          item: openWBVerbindung_openWBLP1Tagesladung
                          icon: oh:energy
                      - component: oh-label-item
                        config:
                          item: openWBVerbindung_openWBLP1ladeleistung
                          title: "lädt:"
                          action: analyzer
                          actionAnalyzerItems:
                            - openWBVerbindung_openWBLP1ladeleistung

  1. Temperatures
component: oh-list-card
config:
  accordionList: true
  noChevron: true
  style:
    background: linear-gradient(to bottom,#e6e6e6 0%,#8c8c8c 100%)
slots:
  default:
    - component: f7-list-item
      config:
        accordionItem: true
      slots:
        content:
          - component: oh-button
            config:
              class:
                - margin
                - display-flex
                - flex-direction-column
              icon-f7: thermometer
              iconColor: blue
              style:
                --f7-button-bg-color: red
                --f7-button-hover-bg-color: blue
                --f7-button-pressed-bg-color: blue
                height: auto
              action: navigate
              actionModal: page:z_Temperaturen
              actionPage: page:z_Temperaturen
          - component: Label
            config:
              text: =("Out " + (Math.round((items.Netatmoaussen_Temperatur.state)*10)/10) +
                "°C ")
              style:
                margin-top: 0px
                left: 0px
                font-size: 24px
                color: '=(Math.round(items.Netatmoaussen_Temperatur.state) < "19") ? "blue" :
                  (Math.round(items.Netatmoaussen_Temperatur.state) > "22") ?
                  "red" : "green"'
          - component: Label
            config:
              text: =("EZ " + Math.round((items.NetatmoEsszimmer_Temperatur.state)*10)/10) +
                "°C"
              style:
                margin-top: 0px
                left: 0px
                font-size: 24px
                color: '=(Math.round(items.NetatmoEsszimmer_Temperatur.state) < "19") ? "blue" :
                  (Math.round(items.NetatmoEsszimmer_Temperatur.state) > "22") ?
                  "red" : "green"'
          - component: Label
            config:
              text: =items.NetatmoEsszimmer_CO2Gehalt.state
              style:
                margin-top: 0px
                left: 0px
                font-size: 24px
                color: '=(Math.round(items.NetatmoEsszimmer_CO2Gehalt.state.split(" ")[0]) <
                  "900") ? "green" :
                  (Math.round(items.NetatmoEsszimmer_CO2Gehalt.state.split("
                  ")[0]) > "1200") ? "red" : "yellow"'
    - component: f7-list-item
      config:
        accordionItem: true
      slots:
        content:
          - component: oh-button
            config:
              class:
                - margin
                - display-flex
                - flex-direction-column
              icon-f7: drop
              iconColor: blue
              style:
                --f7-button-bg-color: red
                --f7-button-hover-bg-color: blue
                --f7-button-pressed-bg-color: blue
                height: auto
              action: navigate
              actionModal: page:z_Feucht
              actionPage: page:z_Feucht
          - component: Label
            config:
              text: =("Out " +items.Netatmoaussen_Luftfeuchtigkeit.state)
              style:
                margin-top: 0px
                left: 0px
                font-size: 24px
                color: '=(items.Netatmoaussen_Luftfeuchtigkeit.state < "40") ? "red" :
                  (items.Netatmoaussen_Luftfeuchtigkeit.state > "60") ? "blue" :
                  "green"'
          - component: Label
            config:
              text: =("EZ " +items.NetatmoEsszimmer_Luftfeuchtigkeit.state)
              style:
                margin-top: 0px
                left: 0px
                font-size: 24px
                color: '=(items.NetatmoEsszimmer_Luftfeuchtigkeit.state < "40") ? "red" :
                  (items.NetatmoEsszimmer_Temperatur.state > "60") ? "blue" :
                  "green"'
          - component: Label
            config:
              text: =("Bad " +items.KlimainfoBad_Luftfeuchtigkeit.state)
              style:
                margin-top: 0px
                left: 0px
                font-size: 24px
                color: '=(items.KlimainfoBad_Luftfeuchtigkeit.state < "40") ? "red" :
                  (items.KlimainfoBad_Luftfeuchtigkeit.state > "60") ? "blue" :
                  "green"'



seperate posts are necessary due to size …
3) List buttons - this is a little more
a) main page:

component: oh-list-card
config:
  style:
    background: linear-gradient(to bottom,#e6e6e6 0%,#8c8c8c 100%)
slots:
  default:
    - component: f7-list-item
      slots:
        header:
          - component: f7-row
            config:
              class:
                - align-items-center
              style:
                height: 20px
                flex-wrap: nowrap
                width: fit-content
            slots:
              default:
                - component: f7-col
                  config:
                    class:
                      - display-flex
                      - flex-direction-row
                      - align-items-center
                      - margin-top
                      - margin-bottom
                      - justify-content-flex-start
                    style:
                      height: 100%
                      width: fit-content
                  slots:
                    default:
                      - component: oh-list-item
                        config:
                          icon: oh:projector
                - component: f7-col
                  config:
                    class:
                      - display-flex
                      - flex-direction-row
                      - align-items-center
                      - margin-top
                      - margin-bottom
                    style:
                      height: 100%
                      width: fit-content
                  slots:
                    default:
                      - component: oh-list-item
                        config:
                          title: Harmony
                          action: popup
                          listButton: true
                          actionModal: page:Harmony
                          color: black
    - component: f7-list-item
      slots:
        header:
          - component: f7-row
            config:
              class:
                - align-items-center
              style:
                height: 20px
                flex-wrap: nowrap
                width: fit-content
            slots:
              default:
                - component: f7-col
                  config:
                    class:
                      - display-flex
                      - flex-direction-row
                      - align-items-center
                      - margin-top
                      - margin-bottom
                      - justify-content-flex-start
                    style:
                      height: 100%
                      width: fit-content
                  slots:
                    default:
                      - component: oh-list-item
                        config:
                          icon: oh:receiver
                - component: f7-col
                  config:
                    class:
                      - display-flex
                      - flex-direction-row
                      - align-items-center
                      - margin-top
                      - margin-bottom
                    style:
                      height: 100%
                      width: fit-content
                  slots:
                    default:
                      - component: oh-list-item
                        config:
                          title: Alexa
                          action: popup
                          listButton: true
                          actionModal: page:Alexa
                          color: black
    - component: f7-list-item
      slots:
        header:
          - component: f7-row
            config:
              class:
                - align-items-center
              style:
                height: 20px
                flex-wrap: nowrap
                width: fit-content
            slots:
              default:
                - component: f7-col
                  config:
                    class:
                      - display-flex
                      - flex-direction-row
                      - align-items-center
                      - margin-top
                      - margin-bottom
                      - justify-content-flex-start
                    style:
                      height: 100%
                      width: fit-content
                  slots:
                    default:
                      - component: oh-list-item
                        config:
                          icon: oh:sun_clouds
                - component: f7-col
                  config:
                    class:
                      - display-flex
                      - flex-direction-row
                      - align-items-center
                      - margin-top
                      - margin-bottom
                    style:
                      height: 100%
                      width: fit-content
                  slots:
                    default:
                      - component: oh-list-item
                        config:
                          title: Wetter PV
                          action: popup
                          listButton: true
                          actionModal: page:z_Wetter_Sonneneinstrahlung
                          color: black
    - component: f7-list-item
      slots:
        header:
          - component: f7-row
            config:
              class:
                - align-items-center
              style:
                height: 20px
                flex-wrap: nowrap
                width: fit-content
            slots:
              default:
                - component: f7-col
                  config:
                    class:
                      - display-flex
                      - flex-direction-row
                      - align-items-center
                      - margin-top
                      - margin-bottom
                      - justify-content-flex-start
                    style:
                      height: 100%
                      width: fit-content
                  slots:
                    default:
                      - component: oh-list-item
                        config:
                          icon: oh:humidity
                - component: f7-col
                  config:
                    class:
                      - display-flex
                      - flex-direction-row
                      - align-items-center
                      - margin-top
                      - margin-bottom
                    style:
                      height: 100%
                      width: fit-content
                  slots:
                    default:
                      - component: oh-list-item
                        config:
                          title: Wetter-allgemein
                          action: popup
                          actionModal: widget:weatherPopup
                          listButton: true
                          actionModalConfig:
                            itemPrefix: OneCallAPIweatherandforecast_
                            itemPrefix2: Localweatherandforecast_
                            wordingFeel: Gefühlt
                            wordingHumidity: Luftfeuchtigkeit
                            wordingWind: Wind
                            wordingPrecipitation: "%-Niederschlag"
                          color: black
    - component: f7-list-item
      slots:
        header:
          - component: f7-row
            config:
              class:
                - align-items-center
              style:
                height: 20px
                flex-wrap: nowrap
                width: fit-content
            slots:
              default:
                - component: f7-col
                  config:
                    class:
                      - display-flex
                      - flex-direction-row
                      - align-items-center
                      - margin-top
                      - margin-bottom
                      - justify-content-flex-start
                    style:
                      height: 100%
                      width: fit-content
                  slots:
                    default:
                      - component: oh-list-item
                        config:
                          icon: oh:energy
                - component: f7-col
                  config:
                    class:
                      - display-flex
                      - flex-direction-row
                      - align-items-center
                      - margin-top
                      - margin-bottom
                    style:
                      height: 100%
                      width: fit-content
                  slots:
                    default:
                      - component: oh-list-item
                        config:
                          title: openWB pop
                          action: popup
                          listButton: true
                          actionModal: page:z_openWB
                          color: black
    - component: f7-list-item
      slots:
        header:
          - component: f7-row
            config:
              class:
                - align-items-center
              style:
                height: 20px
                flex-wrap: nowrap
                width: fit-content
            slots:
              default:
                - component: f7-col
                  config:
                    class:
                      - display-flex
                      - flex-direction-row
                      - align-items-center
                      - margin-top
                      - margin-bottom
                      - justify-content-flex-start
                    style:
                      height: 100%
                      width: fit-content
                  slots:
                    default:
                      - component: oh-list-item
                        config:
                          icon: oh:energy
                - component: f7-col
                  config:
                    class:
                      - display-flex
                      - flex-direction-row
                      - align-items-center
                      - margin-top
                      - margin-bottom
                    style:
                      height: 100%
                      width: fit-content
                  slots:
                    default:
                      - component: oh-list-item
                        config:
                          title: openWB neu
                          listButton: true
                          action: url
                          actionUrl: http://192.168.178.56/openWB/web/index.php
                          color: black

b1) Code of subpage “Harmony”:

config:
  label: Harmony
  sidebar: true
  style:
    background: linear-gradient(to bottom right,#33cc33 0%,#006600 100%)
blocks:
  - component: oh-block
    config: {}
    slots:
      default:
        - component: oh-grid-row
          config: {}
          slots:
            default:
              - component: oh-grid-col
                config:
                  width: "100"
                  small: "50"
                  medium: "33"
                slots:
                  default:
                    - component: oh-list-card
                      config:
                        style:
                          background: linear-gradient(to bottom,#e6e6e6 0%,#8c8c8c 100%)
                        accordionList: true
                      slots:
                        default:
                          - component: oh-list-item
                            config: {}
                          - component: f7-badge
                            config:
                              bgColor: black
                              style:
                                position: absolute
                                left: 5px
                                width: 180px
                                height: 30px
                                border-radius: 12px
                          - component: oh-link
                            config:
                              style:
                                position: absolute
                                left: 10px
                                color: white
                              iconF7: speaker_1_fill
                              iconSize: 25
                              action: rule
                              actionRule: Harmony_Receiver_viel_leiser
                          - component: oh-link
                            config:
                              style:
                                position: absolute
                                left: 45px
                                color: white
                              iconF7: speaker_1
                              iconSize: 25
                              action: rule
                              actionRule: Harmony_Receiver_leiser
                          - component: oh-link
                            config:
                              style:
                                position: absolute
                                left: 80px
                                color: white
                              iconF7: speaker_zzz
                              iconSize: 25
                              action: rule
                              actionRule: Harmony_Receiver_mute
                          - component: oh-link
                            config:
                              style:
                                position: absolute
                                left: 115px
                                color: white
                              iconF7: speaker_3
                              iconSize: 25
                              action: rule
                              actionRule: Harmony_Receiver_lauter
                          - component: oh-link
                            config:
                              style:
                                position: absolute
                                left: 150px
                                color: white
                              iconF7: speaker_3_fill
                              iconSize: 25
                              action: rule
                              actionRule: Harmony_Receiver_viel_lauter
                          - component: oh-list-item
                            config: {}
                          - component: f7-badge
                            config:
                              bgColor: black
                              style:
                                position: absolute
                                left: 5px
                                width: 120px
                                height: 30px
                                border-radius: 12px
                          - component: oh-link
                            config:
                              style:
                                position: absolute
                                left: 15px
                                color: white
                              iconF7: backward
                              iconSize: 25
                              action: rule
                              actionRule: Harmony_FireTV_SkipBackward
                          - component: oh-link
                            config:
                              style:
                                position: absolute
                                left: 50px
                                color: white
                              iconF7: playpause
                              iconSize: 25
                              action: rule
                              actionRule: Harmony_FireTV_zentral
                          - component: oh-link
                            config:
                              style:
                                position: absolute
                                left: 85px
                                color: white
                              iconF7: forward
                              iconSize: 25
                              action: rule
                              actionRule: Harmony_FireTV_SkipForward
                          - component: oh-list-item
                            config: {}
                          - component: f7-badge
                            config:
                              bgColor: black
                              style:
                                position: absolute
                                left: 5px
                                width: 120px
                                height: 30px
                                border-radius: 12px
                          - component: oh-link
                            config:
                              style:
                                position: absolute
                                left: 15px
                                color: white
                              iconF7: arrow_uturn_left
                              iconSize: 25
                              action: rule
                              actionRule: Harmony_FireTV_back
                          - component: oh-link
                            config:
                              style:
                                position: absolute
                                left: 50px
                                color: white
                              iconF7: house
                              iconSize: 25
                              action: rule
                              actionRule: Harmony_FireTV_home
                          - component: oh-link
                            config:
                              style:
                                position: absolute
                                left: 85px
                                color: white
                              iconF7: menu
                              iconSize: 25
                              action: rule
                              actionRule: Harmony_FireTV_menu
                          - component: oh-list-item
                            config: {}
                          - component: f7-badge
                            config:
                              bgColor: black
                              style:
                                position: absolute
                                left: 5px
                                width: 180px
                                height: 30px
                                border-radius: 12px
                          - component: oh-link
                            config:
                              style:
                                position: absolute
                                left: 10px
                                color: white
                              iconF7: arrow_left_circle
                              iconSize: 25
                              action: rule
                              actionRule: Harmony_FireTV_links
                          - component: oh-link
                            config:
                              style:
                                position: absolute
                                left: 45px
                                color: white
                              iconF7: arrow_right_circle
                              iconSize: 25
                              action: rule
                              actionRule: Harmony_FireTV_rechts
                          - component: oh-link
                            config:
                              style:
                                position: absolute
                                left: 80px
                                color: white
                              iconF7: app
                              iconSize: 25
                              action: rule
                              actionRule: Harmony_FireTV_zentral
                          - component: oh-link
                            config:
                              style:
                                position: absolute
                                left: 115px
                                color: white
                              iconF7: arrow_up_circle
                              iconSize: 25
                              action: rule
                              actionRule: Harmony_Receiver_hoch
                          - component: oh-link
                            config:
                              style:
                                position: absolute
                                left: 150px
                                color: white
                              iconF7: arrow_down_circle
                              iconSize: 25
                              action: rule
                              actionRule: Harmony_Receiver_runter
                          - component: oh-list-item
                            config:
                              title: T
                          - component: oh-list-item
                            config:
                              title: Input Receiver
                            slots:
                              accordion:
                                - component: oh-list
                                  config: {}
                                  slots:
                                    default:
                                      - component: oh-list-item
                                        config:
                                          title: FireTV
                                          listButton: true
                                          action: rule
                                          actionRule: Harmony_Receiver_FireTV
                                      - component: oh-list-item
                                        config:
                                          title: Extern
                                          listButton: true
                                          action: rule
                                          actionRule: Harmony_Receiver_extern
                                      - component: oh-list-item
                                        config:
                                          title: XBox
                                          listButton: true
                                          action: rule
                                          actionRule: Harmony_Receiver_XBox
                                      - component: oh-list-item
                                        config:
                                          title: Sat-TV
                                          listButton: true
                                          action: rule
                                          actionRule: Harmony_Receiver_Sat
                          - component: oh-toggle-item
                            config:
                              title: Aktion Kino
                              item: Alexa_Schalter_Kino
                          - component: oh-toggle-item
                            config:
                              title: Aktion FireTV
                              item: Alexa_Schalter_FireTV
                          - component: oh-toggle-item
                            config:
                              title: Aktion XBox
                              item: Alexa_Schalter_Xbox
              - component: oh-grid-col
                config:
                  width: "100"
                  small: "50"
                  medium: "33"
                slots:
                  default:
                    - component: widget:harmony
                      config:
                        harmony: HarmonyHubHarmonyHub
              - component: oh-grid-col
                config:
                  width: "100"
                  medium: "33"
                  small: "50"
                slots:
                  default: []
        - component: oh-grid-row
          config: {}
          slots:
            default: []
  - component: oh-block
    config: {}
    slots:
      default:
        - component: oh-grid-cells
          config: {}
          slots:
            default: []
masonry: null

b2) example of a rule that is triggered whin clicking a button (in this case: “much louder” → pushes the louder button 10-times

triggers: []
conditions: []
actions:
  - inputs: {}
    id: "1"
    configuration:
      type: application/javascript
      script: |-
        for ( x = 0; x <= 10; x++ ) 
        {
          device ="AVReceiver_SendButtonPress";
          command = "VolumeUp"; 
          events.sendCommand(device, command);
        }  
    type: script.ScriptAction

b1) Alexa-Site
This contains 2 interesting drop-down lists which are created with oh-repeater-functionality and a specific item definition (see below, b2).
Another thing worth mentioning is the conversion of the playing time from seconds to a format like 4:15. However, when it’s only a 1 digit second-value, it gets displayed without a leading 0, like 4:5 instead of 4:05. I might have used a few if-conditions to change that but didn’t :wink:

config:
  label: Alexa
  sidebar: true
  order: "2"
  style:
    background: linear-gradient(to bottom right,#ccccff 0%,#0066ff 100%)
blocks:
  - component: oh-block
    config: {}
    slots:
      default:
        - component: oh-grid-row
          config: {}
          slots:
            default:
              - component: oh-grid-col
                config: {}
                slots:
                  default:
                    - component: oh-list-card
                      config:
                        noHairlinesBetween: true
                        style:
                          background: linear-gradient(to bottom,#e6e6e6 0%,#8c8c8c 100%)
                      slots:
                        default:
                          - component: oh-list-item
                            config:
                              title: =items.Alexa_Device.state
                              after: =items.Alexa_Device.displayState
                              smartSelect: true
                              icon: f7:music_albums
                              iconColor: default
                              popupOpen: .PopupDevice
                              style:
                                border: 1px solid lightgray
                                border-radius: 5px
                          - component: f7-popup
                            config:
                              class: PopupDevice
                            slots:
                              default:
                                - component: f7-page
                                  slots:
                                    default:
                                      - component: f7-navbar
                                        config:
                                          title: Gerät
                                          style:
                                            position: sticky
                                        slots:
                                          left:
                                            - component: oh-link
                                              config:
                                                iconIos: f7:arrow_left
                                                iconMd: material:arrow_back
                                                iconAurora: f7:arrow_left
                                                popup-close: true
                                      - component: f7-list
                                        config:
                                          virtualList: true
                                        slots:
                                          default:
                                            - component: oh-repeater
                                              config:
                                                sourceType: itemStateOptions
                                                itemOptions: Alexa_Device
                                                for: option
                                                fragment: true
                                              slots:
                                                default:
                                                  - component: oh-list-item
                                                    config:
                                                      title: =loop.option.label
                                                      actionFeedback: ='{ "text":"You selected <b>' + loop.option.label +
                                                        '</b><br>Sending command
                                                        <b>'
                                                        +  loop.option.value +
                                                        '</b> to item",
                                                        "position":"center","icon":"<i
                                                        style=\\"color:green\\"
                                                        class=\\"f7-icons\\">checkmark_alt</i>
                                                        }'
                                                      noChevron: true
                                                      radio: true
                                                      checked: "=loop.option.value === items['Alexa_Device'].state ? true : false"
                                                      popupClose: true
                                                      action: command
                                                      actionItem: Alexa_Device
                                                      actionCommand: =loop.option.value
                          - component: oh-list-item
                            config:
                              title: ="Musik - " + items.Alexa_Musik.state
                              after: =items.Alexa_Musik.displayState
                              smartSelect: true
                              icon: f7:music_albums
                              iconColor: default
                              popupOpen: .PopupMusik
                              style:
                                border: 1px solid lightgray
                                border-radius: 5px
                          - component: f7-popup
                            config:
                              class: PopupMusik
                            slots:
                              default:
                                - component: f7-page
                                  slots:
                                    default:
                                      - component: f7-navbar
                                        config:
                                          title: Musik
                                          style:
                                            position: sticky
                                        slots:
                                          left:
                                            - component: oh-link
                                              config:
                                                iconIos: f7:arrow_left
                                                iconMd: material:arrow_back
                                                iconAurora: f7:arrow_left
                                                popup-close: true
                                      - component: f7-list
                                        config:
                                          virtualList: true
                                        slots:
                                          default:
                                            - component: oh-repeater
                                              config:
                                                sourceType: itemStateOptions
                                                itemOptions: Alexa_Musik
                                                for: option
                                                fragment: true
                                              slots:
                                                default:
                                                  - component: oh-list-item
                                                    config:
                                                      title: =loop.option.label
                                                      actionFeedback: ='{ "text":"You selected <b>' + loop.option.label +
                                                        '</b><br>Sending command
                                                        <b>'
                                                        +  loop.option.value +
                                                        '</b> to item",
                                                        "position":"center","icon":"<i
                                                        style=\\"color:green\\"
                                                        class=\\"f7-icons\\">checkmark_alt</i>
                                                        }'
                                                      noChevron: true
                                                      radio: true
                                                      checked: "=loop.option.value === items['Alexa_Musik'].state ? true : false"
                                                      popupClose: true
                                                      action: command
                                                      actionItem: Alexa_Musik
                                                      actionCommand: =loop.option.value
                          - component: oh-toggle-item
                            config:
                              title: Alexa starten
                              item: Alexa_Start
                          - component: f7-list-item
                            slots:
                              header:
                                - component: f7-row
                                  config:
                                    class:
                                      - align-items-center
                                    style:
                                      height: 20px
                                      flex-wrap: nowrap
                                      width: fit-content
                                  slots:
                                    default:
                                      - component: f7-col
                                        config:
                                          class:
                                            - display-flex
                                            - flex-direction-row
                                            - align-items-center
                                            - margin-top
                                            - margin-bottom
                                            - justify-content-flex-start
                                          style:
                                            height: 100%
                                            width: fit-content
                                        slots:
                                          default:
                                            - component: Label
                                              config:
                                                text: =Math.floor(Math.round(items.AlexaHolger_MedienSpielzeit.state.split('
                                                  ')[0])/ 60) + ":" +
                                                  (Math.round(items.AlexaHolger_MedienSpielzeit.state.split('
                                                  ')[0])-Math.floor(Math.round(items.AlexaHolger_MedienSpielzeit.state.split('
                                                  ')[0])/ 60)*60) + "/" +
                                                  Math.floor(Math.round(items.AlexaHolger_MedienLange.state.split('
                                                  ')[0])/ 60) + ":" +
                                                  (Math.round(items.AlexaHolger_MedienLange.state.split('
                                                  ')[0])-Math.floor(Math.round(items.AlexaHolger_MedienLange.state.split('
                                                  ')[0])/ 60)*60)
                                      - component: f7-col
                                        config:
                                          class:
                                            - display-flex
                                            - flex-direction-row
                                            - align-items-center
                                            - margin-top
                                            - margin-bottom
                                          style:
                                            height: 100%
                                            width: fit-content
                                        slots:
                                          default:
                                            - component: oh-player-item
                                              config:
                                                item: =items.Alexa_Device.state+"_Musikwiedergabe"
                                                showRewindFFward: false
                                                trackItem: =items.Alexa_Device.state+"_Titel"
                          - component: oh-label-item
                            config:
                              item: =items.Alexa_Device.state+"_Titel"
                              title: Titel
                          - component: f7-list-item
                            slots:
                              header:
                                - component: f7-row
                                  config:
                                    class:
                                      - align-items-center
                                    style:
                                      height: 20px
                                      flex-wrap: nowrap
                                      width: fit-content
                                  slots:
                                    default:
                                      - component: f7-col
                                        config:
                                          class:
                                            - display-flex
                                            - flex-direction-row
                                            - align-items-center
                                            - margin-top
                                            - margin-bottom
                                            - justify-content-flex-start
                                          style:
                                            height: 100%
                                            width: fit-content
                                        slots:
                                          default:
                                            - component: oh-label-item
                                              config:
                                                item: =items.Alexa_Device.state+"_Untertitel1"
                                      - component: f7-col
                                        config:
                                          class:
                                            - display-flex
                                            - flex-direction-row
                                            - align-items-center
                                            - margin-top
                                            - margin-bottom
                                          style:
                                            height: 100%
                                            width: fit-content
                                        slots:
                                          default:
                                            - component: oh-label-item
                                              config:
                                                item: =items.Alexa_Device.state+"_Untertitel2"
                          - component: oh-slider-item
                            config:
                              item: =items.Alexa_Device.state+"_Lautstarke"
                              title: Lautstärke
                              min: 0
                              max: 100
                              scale: true
                              scaleSteps: 10
                          - component: oh-toggle-item
                            config:
                              title: Zufallswiedergabe
                              item: =items.Alexa_Device.state+"_Zufall"
                          - component: oh-input-item
                            config:
                              sendButton: true
                              item: =items.Alexa_Device.state+"_MusikSprachbefehl"
                              placeholder: Spiele meine Playlist Holger
                              title: Musiksprachbefehl
                              name: Input Name
                              type: text
                          - component: oh-input-item
                            config:
                              sendButton: true
                              item: =items.Alexa_Device.state+"_Sprich"
                              title: Sprich
                              name: Input Name
                              type: text
                          - component: oh-slider-item
                            config:
                              item: =items.Alexa_Device.state+"_SprichLautstarke"
                              title: Lautstärke
                              min: 0
                              max: 100
                              scale: true
                              scaleSteps: 10
                          - component: oh-input-item
                            config:
                              sendButton: true
                              item: =items.Alexa_Device.state+"_Befehl"
                              title: Befehl
                              name: Input Name
                              type: text
                          - component: oh-label-item
                            config:
                              item: =items.Alexa_Device.state+"_LetzterSprachbefehl"
                              title: Letzter Sprachbefehl
        - component: oh-grid-row
          config: {}
          slots:
            default:
              - component: oh-grid-col
                config: {}
                slots:
                  default:
                    - component: oh-image-card
                      config:
                        item: =items.Alexa_Device.state+"_BildURL"
masonry: null

b2) example of item-definition for drop-down field (Alexa devices, same for music sources): settings/items/metadata/state description:

  1. lights, windows, online, heater
    The most interesting part are the lights. Windows are basically the same, just simpler. Online devices and heater are not very special. So I focus on highlighting the lights. (YAML-code is everything, though).
  • a repeater is used again, so it’s easy to add new lights
  • when clicking on a lightbulb, it’s brightess is set to 80
  • the number of running lights is derived from an item whose value is calculated with a rule (see below YMAL code)
  • similar with the button for switching off all lights.
    For some reason, this doesn’t always work like it should. Sometimes I need to press the buttons twice.

YAML-code:

component: oh-list-card
config:
  noChevron: true
  style:
    background: linear-gradient(to bottom,#e6e6e6 0%,#8c8c8c 100%)
slots:
  default:
    - component: f7-list-item
      config:
        accordionItem: true
      slots:
        content:
          - component: f7-row
            config:
              class:
                - align-items-center
              style:
                width: 100%
                height: 25px
                flex-wrap: nowrap
            slots:
              default:
                - component: f7-col
                  config:
                    class:
                      - display-flex
                      - flex-direction-row
                      - align-items-center
                      - margin-top
                      - margin-bottom
                    style:
                      height: 100%
                      width: fit-content
                      min-width: 100px
                  slots:
                    default:
                      - component: oh-button
                        config:
                          icon-f7: lightbulb_fill
                          iconColor: '=(items.AnzahlLampenAn.state === "0") ? "gray" : "yellow"'
                          style:
                            --f7-button-bg-color: transparent
                            --f7-button-hover-bg-color: transparent
                            --f7-button-pressed-bg-color: transparent
                      - component: oh-label-item
                        config:
                          item: AnzahlLampenAn
                - component: f7-col
                  config:
                    class:
                      - display-flex
                      - align-items-center
                      - justify-content-flex-end
                    style:
                      height: 100%
                      width: 100%
                  slots:
                    default:
                      - component: oh-list-item
                        config:
                          title: Alle aus
                          action: command
                          listButton: true
                          actionItem: AlleLichterAus
                          actionCommand: ON
                          color: black
        default:
          - component: f7-accordion-content
            slots:
              default:
                - component: oh-repeater
                  config:
                    sourceType: array
                    for: devices
                    in:
                      - actionitem: LeuchteHuegross_Farbe
                        label: AZ-H
                      - actionitem: LeuchteHueklein_Farbe
                        label: AZ-E
                      - actionitem: LeuchteMobil_Farbe
                        label: SZ-M
                      - actionitem: LeuchteWohnzimmer_Farbe
                        label: WZ
                      - actionitem: EsszimmerTisch_Farbe
                        label: EZ-T
                      - actionitem: EsszimmerWein_Farbe
                        label: EZ-W
                      - actionitem: EsszimmerKlavier_Farbe
                        label: EZ-K
                      - actionitem: Frosch_Farbe
                        label: EZ-F
                  slots:
                    default:
                      - component: f7-list-item
                        slots:
                          content:
                            - component: f7-row
                              config:
                                class:
                                  - align-items-center
                                style:
                                  width: 100%
                                  height: 25px
                                  flex-wrap: nowrap
                              slots:
                                default:
                                  - component: f7-col
                                    config:
                                      class:
                                        - display-flex
                                        - flex-direction-row
                                        - align-items-center
                                        - margin-top
                                        - margin-bottom
                                      style:
                                        height: 100%
                                        width: fit-content
                                        min-width: 100px
                                    slots:
                                      default:
                                        - component: oh-button
                                          config:
                                            action: command
                                            actionItem: =loop.devices.actionitem
                                            actionCommand: '=(items[loop.devices.actionitem].state.split(",")[2] === "0") ?
                                              items[loop.devices.actionitem].state.split(",")[0]+
                                              "," +
                                              items[loop.devices.actionitem].state.split(",")[1]
                                              + ",80" :
                                              items[loop.devices.actionitem].state.split(",")[0]
                                              + "," +
                                              items[loop.devices.actionitem].state.split(",")[1]
                                              + ",0"'
                                            icon-f7: lightbulb_fill
                                            iconColor: '=(items[loop.devices.actionitem].state.split(",")[2] === "0") ?
                                              "gray" : "yellow"'
                                            style:
                                              --f7-button-bg-color: transparent
                                              --f7-button-hover-bg-color: transparent
                                              --f7-button-pressed-bg-color: transparent
                                        - component: oh-button
                                          config:
                                            action: popup
                                            actionModal: widget:Widget_farben
                                            actionModalConfig:
                                              leuchte: =loop.devices.actionitem
                                            text: =loop.devices.label
                                            color: blue
                                            style:
                                              --f7-button-bg-color: transparent
                                              --f7-button-hover-bg-color: transparent
                                              --f7-button-pressed-bg-color: transparent
                                  - component: f7-col
                                    config:
                                      class:
                                        - display-flex
                                        - align-items-center
                                      style:
                                        height: 100%
                                        width: 100%
                                    slots:
                                      default:
                                        - component: oh-colorpicker
                                          config:
                                            sliderLabel: true
                                            sliderValue: true
                                            item: =loop.devices.actionitem
                                            modules:
                                              - brightness-slider
    - component: f7-list-item
      config:
        accordionItem: true
      slots:
        content:
          - component: f7-row
            config:
              class:
                - align-items-center
              style:
                width: 100%
                height: 25px
                flex-wrap: nowrap
            slots:
              default:
                - component: f7-col
                  config:
                    class:
                      - display-flex
                      - flex-direction-row
                      - align-items-center
                      - margin-top
                      - margin-bottom
                    style:
                      height: 100%
                      width: fit-content
                      min-width: 100px
                  slots:
                    default:
                      - component: oh-button
                        config:
                          icon-f7: logo_windows
                          iconColor: '=(items.AnzahlFensterAuf.state === "0") ? "gray" : "red"'
                          style:
                            --f7-button-bg-color: transparent
                            --f7-button-hover-bg-color: transparent
                            --f7-button-pressed-bg-color: transparent
                      - component: oh-label-item
                        config:
                          item: AnzahlFensterAuf
                          title: offen
        default:
          - component: f7-accordion-content
            slots:
              default:
                - component: oh-repeater
                  config:
                    sourceType: array
                    for: devices
                    in:
                      - actionitem: WC_Fensterstatus
                        label: WC
                      - actionitem: WC_Fensterstatus
                        label: Weitere XXX
                  slots:
                    default:
                      - component: f7-list-item
                        slots:
                          content:
                            - component: f7-row
                              config:
                                class:
                                  - align-items-center
                                style:
                                  width: 100%
                                  height: 25px
                                  flex-wrap: nowrap
                              slots:
                                default:
                                  - component: f7-col
                                    config:
                                      class:
                                        - display-flex
                                        - flex-direction-row
                                        - align-items-center
                                        - margin-top
                                        - margin-bottom
                                      style:
                                        height: 100%
                                        width: fit-content
                                        min-width: 100px
                                    slots:
                                      default:
                                        - component: oh-button
                                          config:
                                            icon-f7: logo_windows
                                            iconColor: '=(items[loop.devices.actionitem].state === "CLOSED") ? "gray" :
                                              "red"'
                                            style:
                                              --f7-button-bg-color: transparent
                                              --f7-button-hover-bg-color: transparent
                                              --f7-button-pressed-bg-color: transparent
                                        - component: oh-button
                                          config:
                                            text: =loop.devices.label
                                            color: blue
                                            style:
                                              --f7-button-bg-color: transparent
                                              --f7-button-hover-bg-color: transparent
                                              --f7-button-pressed-bg-color: transparent
    - component: f7-list-item
      config:
        accordionItem: true
      slots:
        content:
          - component: oh-list-item
            config:
              title: Geräte Online?
              icon: oh:network
              height: 25px
        default:
          - component: f7-accordion-content
            slots:
              default:
                - component: oh-repeater
                  config:
                    sourceType: array
                    for: devices
                    in:
                      - icon: network
                        iconState: HolgerGalaxyNote8_Online
                        title: Holger-Smartphone
                        action: page:z_Holger_Smartphone
                        afterState: HolgerGalaxyNote8_Zuletztgesehen
                      - icon: network
                        iconState: HolgerGamingPC_Online
                        title: Holger-PC
                        action: page:z_HolgerGamingPC
                        afterState: HolgerGamingPC_Zuletztgesehen
                      - icon: network
                        iconState: HolgerMacBookPro_Online
                        title: Holger-Mac
                        action: page:z_HolgerMacBookPro
                        afterState: HolgerMacBookPro_Zuletztgesehen
                      - icon: network
                        iconState: BennetSmartphone_Online
                        title: Bennet-Phone
                        action: page:z_BennetSmartphone_Online
                        afterState: BennetSmartphone_Zuletztgesehen
                      - icon: network
                        iconState: BennetPC_Online
                        title: Bennet-PC
                        action: page:z_BennetPC_Online
                        afterState: BennetPC_Zuletztgesehen
                      - icon: network
                        iconState: EvaSmartphoneHonor_Online
                        title: Eva-Phone
                        action: page:z_EvaSmartphoneHonor_Online
                        afterState: EvaSmartphoneHonor_Zuletztgesehen
                      - icon: network
                        iconState: EvaMariasMacBookPro_Online
                        title: Eva-Mac
                        action: page:z_EvaMariasMacBookPro_Online
                        afterState: EvaMariasMacBookPro_Zuletztgesehen
                      - icon: network
                        iconState: FelixSmartphone_Online
                        title: Felix-Phone
                        action: page:z_FelixSmartphone_Online
                        afterState: FelixSmartphone_Zuletztgesehen
                      - icon: network
                        iconState: EvasaltesNotebookFELIX_Online
                        title: FelixEvaPC
                        action: page:z_EvasaltesNotebookFELIX_Online
                        afterState: EvasaltesNotebookFELIX_Zuletztgesehen
                      - icon: network
                        iconState: FireTV_Online
                        title: FireTV-Wohn
                        action: page:z_FireTV_Online
                        afterState: FireTV_Zuletztgesehen
                      - icon: network
                        iconState: XBox1_Online
                        title: XBox1
                        action: page:z_XBox1_Online
                        afterState: XBox1_Zuletztgesehen
                      - icon: network
                        iconState: NASArndt_Online
                        title: NAS
                        action: page:z_NASArndt_Online
                        afterState: NASArndt_Zuletztgesehen
                    fragment: true
                  slots:
                    default:
                      - component: f7-list-item
                        config:
                          accordionItem: true
                        slots:
                          content:
                            - component: oh-button
                              config:
                                color: gray
                                class:
                                  - no-padding
                                  - display-flex
                                  - justify-content-flex-start
                                style:
                                  overflow: hidden
                                  color: var(--f7-block-text-color)
                              slots:
                                default:
                                  - component: oh-icon
                                    config:
                                      icon: =loop.devices.icon
                                      state: =items[loop.devices.iconState].state
                                      style:
                                        width: 25px
                                      class:
                                        - margin-right-half
                                  - component: oh-list-item
                                    config:
                                      title: =loop.devices.title
                                      listButton: true
                                      action: popup
                                      actionModal: =loop.devices.action
                                      style:
                                        font-weight: normal
                                        text-overflow: ellipsis
                                        overflow: hidden
                          after:
                            - component: oh-button
                              config:
                                text: =items[loop.devices.afterState].displayState
                                color: gray
                                class:
                                  - no-padding
                                style:
                                  font-weight: normal
                                  color: var(--f7-block-text-color)
    - component: f7-list-item
      config:
        accordionItem: true
      slots:
        content:
          - component: oh-list-item
            config:
              accordionItem: true
              title: Heizkörper
              icon: oh:heating
        default:
          - component: f7-accordion-content
            slots:
              default:
                - component: oh-repeater
                  config:
                    sourceType: array
                    for: devices
                    in:
                      - temp_ist: HeizkorperSchlafzimmer_AktuelleTemperatur
                        temp_soll: HeizkorperSchlafzimme_Solltemperatur
                        label: Schlaf
                      - temp_ist: HeizkorperSchlafzimmer_AktuelleTemperatur
                        temp_soll: HeizkorperSchlafzimme_Solltemperatur
                        label: Schlaf XXX
                  slots:
                    default:
                      - component: oh-slider-item
                        config:
                          title: =loop.devices.label
                          subtitle: =items[loop.devices.temp_ist].state
                          item: =loop.devices.temp_soll
                          label: true
                          min: 15
                          max: 25
                          scaleSteps: 10
                          scaleSubSteps: 1
                          step: 0.5
                          scale: true
                          unit: " °C"

rule for calulation of running lights:

triggers:
  - id: "2"
    configuration:
      groupName: Fenster_Alle
    type: core.GroupStateChangeTrigger
conditions: []
actions:
  - inputs: {}
    id: "1"
    configuration:
      type: application/javascript
      script: >-
        var logger =
        Java.type('org.slf4j.LoggerFactory').getLogger('org.openhab.rule.' +
        ctx.ruleUID);

        var Collectors = Java.type("java.util.stream.Collectors");


        logger.info("Collectors imported, about to filter the Group members");

        var numOnList = ir.getItem("Fenster_Alle")
                      .members
                      .stream()
                      .filter(function(i){ 
                          logger.info("Processing Item " + i.name + " whose current state is " + i.state);
                          var currState = i.getStateAs(OpenClosedType.class);
                          logger.info(i.name +"'s state is " + currState);
                          return currState == OPEN; 
                      })
                      .collect(Collectors.toList());
        logger.info("The filter returned the following Items: " + numOnList.toString());

        logger.info("There are " + numOnList.size() + " windows that are ON");

        events.sendCommand("AnzahlFensterAuf", numOnList.size());


        /*


        anzahl = 0;


        if (items["WC_Fensterstatus"] =="OPEN" ) {anzahl=anzahl+1;}

  
    type: script.ScriptAction

rule to switch lights off (all lights a members of the same group which is addressed here)

triggers:
  - id: "2"
    configuration:
      itemName: AlleLichterAus
      state: ON
    type: core.ItemStateChangeTrigger
conditions: []
actions:
  - inputs: {}
    id: "1"
    configuration:
      type: application/javascript
      script: >+
        var logger =
        Java.type('org.slf4j.LoggerFactory').getLogger('org.openhab.rule.' +
        ctx.ruleUID);

        events.sendCommand("Leuchten_Alle",OFF);


    type: script.ScriptAction

  1. Alexa-speach commands
    nothing special:
component: oh-list-card
config:
  noChevron: true
  accordionList: true
  style:
    background: linear-gradient(to bottom,#e6e6e6 0%,#8c8c8c 100%)
slots:
  default:
    - component: oh-list-item
      config:
        title: Alle zum Essen
        listButton: true
        color: black
        action: rule
        actionRule: Alexa_Alle_Essen
    - component: oh-list-item
      config:
        title: Bennet zum Essen
        listButton: true
        color: black
        action: rule
        actionRule: Alexa_Bennet_Essen
    - component: oh-list-item
      config:
        title: Felix - letztes Spiel
        listButton: true
        color: black
        action: rule
        actionRule: Alexa_Felix_Spielende

The buttons call rules which make Alexa devices say something. E.g. call for lunch on all devices (there are different, Alexa groups: All devices, just those on ground floor, …)

triggers: []
conditions: []
actions:
  - inputs: {}
    id: "1"
    configuration:
      type: application/javascript
      script: |+
        
        ausgabe = "Essen ist gleich fertig, kommt bitte in die Küche!";

        events.sendCommand("AlexaAlle_SprichLautstarke","100"); 
        events.sendCommand("AlexaAlle_Sprich",ausgabe); 


    type: script.ScriptAction

So, that’s basically it. I hope this is of use for some of you. If you have suggestions for improvement (as this is by far not perfect, just good enough in my opinion), feel free to post.

Thanks for sharing, really inspiring…

2 Likes

Indeed, thank you for sharing! Examples like this are very valuable to the community.

2 Likes

Glad you like it :wink:
I wanted to give something back to the community. I hope it’s useful to some of us…

You might check the following, makes your rules obsolete…

1 Like

That’s very interesting, I didn’t know about aggregation functions (and adding groups like the way described) yet. But in this case at least for me the info comes a little late AND if I interpret the current discussion in the thread correctly, this approach doesn’t work dynamically?

What do you mean by acting dynamically?
When you add a new device, you just need to add the items (batteryLevel, batteryAlarm e.g.) to the groups, thats all. Item change events change the group item state…

1 Like

I wasn’t aware of that. Then it’s a very useful approach!

4 posts were split to a new topic: openWB and Zoe

Shorter solution:
=dayjs().startOf('day').add(items.DurationInSeconds.state, 'seconds').format(items.DurationInSeconds.state < 3600 ? 'm:ss' : 'H:mm:ss')
Won’t work after 23:59:59.

(Note that day.js has a duration plugin but it cannot be used because it’s not loaded at the moment.)

1 Like

This looks much nicer. However when I replace my old expression with your code, I get errors:

I guess I need to exchange some values in your code but don’t understand what .startOf and .add are supposed to do …

YAML doesn’t like when you have a : in your value since it already uses it to split the key name and the value, so you have to surround the entire expression (including the leading =) with "".

1 Like

Now it works fine. For documentation’s sake, the part that can be replaced incl. conversion:

text: "=dayjs().startOf('day').add(items.AlexaHolger_MedienSpielzeit.state.split(' ')[0], 'seconds').format(items.AlexaHolger_MedienSpielzeit.state.split(' ')[0] < 3600 ? 'm:ss' : 'H:mm:ss')"
1 Like

@Ursusprimus I am just starting out with MainUI. Couple of requests for you,

  1. Where do i paste the Yaml code you have pasted? For instance does it go in Pages>Overview>Code
  2. Please can you share the semantic model for your Harmony remote. I am trying to figure out where it should sit in the model.

I’ll do that but it might take a while; I’m on vacation with limited internet access.