[OH3] Main UI Examples

Yes, of course. Variable declarations are in German, I hope this is not a problem.

uid: Livevisu Heizungsgraph Boden
tags:
  - Live
  - MainUI
props:
  parameters:
    - label: Raumbezeichnung
      name: raum
      required: false
      type: TEXT
    - label: Hintergrundfarbe
      name: bgcolor
      required: false
      type: TEXT
    - context: item
      label: Ist Temperatur
      name: isttemp
      required: false
      type: TEXT
    - context: item
      label: Soll Temperatur
      name: solltemp
      required: false
      type: TEXT
    - context: item
      label: Stellgröße Boden
      name: stellbo
      required: false
      type: TEXT
  parameterGroups: []
timestamp: Dec 12, 2021, 6:33:43 PM
component: f7-card
config:
  style:
    noShadow: false
    padding: 0px
    border-radius: var(--f7-card-expandable-border-radius)
    box-shadow: 5px 5px 10px 1px rgba(0,0,0,0.1)
    background-color: "=props.bgcolor ? props.bgcolor : ''"
    height: 340px
    margin-left: 5px
    margin-right: 5px
slots:
  content:
    - component: f7-block
      config:
        style:
          position: absolute
          top: -5px
          left: 16px
          flex-direction: row
          display: flex
      slots:
        default:
          - component: f7-icon
            config:
              f7: thermometer
              size: 18
              style:
                margin-right: 10px
          - component: Label
            config:
              text: "=props.raum ? props.raum : ''"
              style:
                font-size: 12px
                margin-top: 0px
    - component: f7-block
      config:
        style:
          position: absolute
          top: 48px
          left: 16px
          flex-direction: row
      slots:
        default:
          - component: Label
            config:
              text: Heizungsdaten
              style:
                font-size: 17px
                font-weight: 600
                margin-left: 0px
                margin-top: 0px
    - component: f7-block
      config:
        style:
          margin-top: 10px
          margin-left: -11px
          margin-right: -11px
          padding-left: 0px
          padding-right: 0px
      slots:
        default:
          - component: oh-chart
            config:
              chartType: day
            slots:
              grid:
                - component: oh-chart-grid
                  config:
                    containLabel: false
                    show: true
                    top: "90"
                    bottom: "20"
                    right: 30
                    left: 30
              xAxis:
                - component: oh-time-axis
                  config:
                    gridIndex: 0
              yAxis:
                - component: oh-value-axis
                  config:
                    gridIndex: 0
                    scale: true
                    min: "13"
                    max: "25"
                - component: oh-value-axis
                  config:
                    gridIndex: 0
                    min: "0"
                    max: "100"
              series:
                - component: oh-time-series
                  config:
                    name: Ist Temperatur
                    gridIndex: 0
                    xAxisIndex: 0
                    yAxisIndex: 0
                    type: line
                    item: =props.isttemp
                - component: oh-time-series
                  config:
                    name: Soll Temperatur
                    gridIndex: 0
                    xAxisIndex: 0
                    yAxisIndex: 0
                    type: line
                    item: =props.solltemp
                - component: oh-time-series
                  config:
                    name: Stellgröße Boden
                    gridIndex: 0
                    xAxisIndex: 0
                    yAxisIndex: 1
                    type: bar
                    item: =props.stellbo
              tooltip: []
              raum: []
              toolbox: []
              dataZoom: []
              legend:
                - component: oh-chart-legend
                  config:
                    show: true
                    top: 53
                    left: 2
              visualMap: []

1 Like

Can you share your widget code?

This is awesome @kuczerek! I like the clean design and structure of your overviews. Is it possible to share your yaml code of the implementations? Or at least share some background information about how you build it? Did u use the default oh cards/items/cells? Or did u rely on f7 components? I’m still looking around to build my own overview page :slight_smile:

Really cool design @kuczerek I like it a lot.
Could you please give me a hint/tutorial how to create a widget like your “Übersicht aktuelle Heizungsdaten/Temperaturen im Heizungssystem”?
I ask because I planned a similar thing but with a little bit other pictures. I would like to add an heat-pump picture and replace the radiators with an “Fußbodenheizung” picture.
Thanks in advance

Hi @Eisi1482

thank you! I used a mix of f7 and openhab components, based on the widgets and page design of @integer. Every “card” in the page is an individual built widget, as you can see in the yaml code. The page design is based on openhab components, which are also working with the openhab page designer. I built the widgets by duplicating the examples of @integer and customizing the cards to my own needs. Most of them rely on f7 components. Since I was new to f7 and yaml it took a while to get a clue how to put everything together, especially to understand the interaction between f7 components and openhab. I often used the developer tools of my chrome browser, to investigate which css styles and css variables have to be changed, to get what I want.

For the pages I used the responsive design, because of that it is possible to use all pages on my mobile phone. Here comes the yaml code für the two dashboards. (I changed some descriptions for privacy reasons):

This is the general overview (first page)

  layoutType: responsive
  label: Übersicht
  sidebar: false
blocks:
  - component: oh-block
    config: {}
    slots:
      default:
        - component: oh-grid-row
          config: {}
          slots:
            default:
              - component: oh-grid-col
                config: {}
                slots:
                  default:
                    - component: widget:Livevisu Titel
                      config:
                        header: Statusübersicht
        - component: oh-grid-row
          config: {}
          slots:
            default:
              - component: oh-grid-col
                config: {}
                slots:
                  default:
                    - component: widget:Livevisu Trenner
                      config:
                        header: Wetter und Familie
        - component: oh-grid-row
          config: {}
          slots:
            default:
              - component: oh-grid-col
                config:
                  xlarge: "50"
                  width: "100"
                slots:
                  default:
                    - component: widget:Livevisu Wettervorhersage
                      config:
                        title: Wettervorhersage für XXX
              - component: oh-grid-col
                config:
                  width: "100"
                  xlarge: "50"
                slots:
                  default:
                    - component: widget:Livevisu Owntracks Übersicht
                      config: {}
  - component: oh-block
    config: {}
    slots:
      default:
        - component: oh-grid-row
          config: {}
          slots:
            default:
              - component: oh-grid-col
                config: {}
                slots:
                  default:
                    - component: widget:Livevisu Trenner
                      config:
                        header: Allgemeine Infos
        - component: oh-grid-row
          config: {}
          slots:
            default:
              - component: oh-grid-col
                config:
                  width: "100"
                  xlarge: "33"
                slots:
                  default:
                    - component: widget:Livevisu ID3
                      config: {}
              - component: oh-grid-col
                config:
                  width: "100"
                  xlarge: "33"
                slots:
                  default:
                    - component: widget:Livevisu Robaert
                      config: {}
              - component: oh-grid-col
                config:
                  width: "100"
                  xlarge: "33"
                slots:
                  default:
                    - component: widget:Livevisu Kamera Eingang
                      config: {}
  - component: oh-block
    config: {}
    slots:
      default:
        - component: oh-grid-row
          config: {}
          slots:
            default:
              - component: oh-grid-col
                config: {}
                slots:
                  default:
                    - component: widget:Livevisu Trenner
                      config:
                        header: Statusinformationen
        - component: oh-grid-row
          config: {}
          slots:
            default:
              - component: oh-grid-col
                config:
                  width: "5"
                  xlarge: "20"
                slots:
                  default: []
              - component: oh-grid-col
                config:
                  xlarge: "10"
                  width: "33"
                slots:
                  default:
                    - component: widget:Livevisu Aussenhaut Übersicht
                      config:
                        door_numbers: hTuerOffenAnzahl
                        lock_numbers: hSchlossOffenAnzahl
                        window_numbers: hFensterOffenAnzahl
                        neeingang_cont: KNXSteuerEGNebeneingangstuerabgeschlossen
                        page: liveAussenhaut
              - component: oh-grid-col
                config:
                  width: "33"
                  xlarge: "10"
                slots:
                  default:
                    - component: widget:Livevisu Störungen Übersicht
                      config:
                        title: Störungen
                        icon_active: exclamationmark_triangle_fill
                        page: liveStoerungen
                        stoerungen_numbers: hStoerungen
                        icon_titel: info_circle
                        icon: checkmark_circle
                        icon_haupt: exclamationmark_circle
              - component: oh-grid-col
                config:
                  width: "33"
                  xlarge: "10"
                slots:
                  default:
                    - component: widget:Livevisu Störungen Übersicht
                      config:
                        title: Alarme
                        icon: checkmark_circle
                        icon_titel: info_circle
                        icon_active: exclamationmark_triangle_fill
                        page: liveAlarme
                        stoerungen_numbers: hAlarme
                        icon_haupt: exclamationmark_triangle
              - component: oh-grid-col
                config:
                  width: "33"
                  xlarge: "10"
                slots:
                  default:
                    - component: widget:Livevisu Linkkarte mit Status Übersicht
                      config:
                        title: Heizung
                        icon_titel: info_circle
                        icon: flame
                        page: liveHeizungssteuerung
                        praefix: "Ø "
                        status: hHeizungStellantriebeDurchschnitt
                        bgcolor_acive: "#d5b1e6"
                        bgcolor_active: "#dad3f2"
              - component: oh-grid-col
                config:
                  width: "33"
                  xlarge: "10"
                slots:
                  default:
                    - component: widget:Livevisu Linkkarte mit Status Übersicht
                      config:
                        title: Beschattung
                        icon_titel: info_circle
                        icon: sun_max
                        page: liveBeschattung
                        status: hBeschattungAktiv
                        bgcolor_acive: lightgreen
                        bgcolor_active: lightgreen
              - component: oh-grid-col
                config:
                  width: "33"
                  xlarge: "10"
                slots:
                  default:
                    - component: widget:Livevisu Linkkarte mit Status Übersicht
                      config:
                        title: Bewässerung
                        icon_titel: info_circle
                        icon: drop
                        status: hBewaesserungAktiv
                        page: liveBewaesserung
                        bgcolor_acive: lightgreen
                        bgcolor_active: lightgreen
              - component: oh-grid-col
                config:
                  width: "100"
                  xlarge: "20"
                slots:
                  default: []
masonry: null
grid: []

This is the room overview (second page):

config:
  label: Räume und Orte
  layoutType: responsive
blocks:
  - component: oh-block
    config: {}
    slots:
      default:
        - component: oh-grid-row
          config: {}
          slots:
            default:
              - component: oh-grid-col
                config: {}
                slots:
                  default:
                    - component: widget:Livevisu Titel
                      config:
                        header: Aktuelle Raum- und Ortsübersicht
        - component: oh-grid-row
          config: {}
          slots:
            default:
              - component: oh-grid-col
                config: {}
                slots:
                  default:
                    - component: widget:Livevisu Trenner
                      config:
                        header: Haus Erdgeschoss
        - component: oh-grid-row
          config: {}
          slots:
            default:
              - component: oh-grid-col
                config:
                  width: "100"
                  small: "50"
                  medium: "33"
                  large: "25"
                  xlarge: "25"
                slots:
                  default:
                    - component: widget:Livevisu Raumkarte
                      config:
                        text_header: Windfang
                        iconimage: windfang
                        lights: hEgWfVisuLichtAnAnzahl
                        power: hEgWfVisuSteckdosenAnAnzahl
                        heating: KNXHeizEGWindfangStatusStellgrosse
                        temp: KNXHeizEGWindfangIstTemperatur
                        settemp: KNXHeizEGWindfangSollTemperatur
                        door_state: KNXSteuerEGHaustuergeoffnet
                        door_lock: KNXSteuerEGHaustuerabgeschlossen
                        ort: Windfang
                        page: liveHausWindfang
              - component: oh-grid-col
                config:
                  width: "100"
                  small: "50"
                  medium: "33"
                  large: "25"
                  xlarge: "25"
                slots:
                  default:
                    - component: widget:Livevisu Raumkarte
                      config:
                        text_header: Küche
                        iconimage: kueche
                        lights: hEgKueVisuLichtAnAnzahl
                        heating: KNXHeizEGKucheStatusStellgrosse
                        settemp: KNXHeizEGKucheSollTemperatur
                        temp: KNXHeizEGKucheIstTemperatur
                        blinds_closed: hEgKueVisuRolladenstellung
                        windows_numbers: hEgKueVisuFensterOffenAnzahl
                        windows: hEgKueFenster
                        ort: Küche
                        page: liveHausKueche
              - component: oh-grid-col
                config:
                  width: "100"
                  small: "50"
                  medium: "33"
                  large: "25"
                  xlarge: "25"
                slots:
                  default:
                    - component: widget:Livevisu Raumkarte
                      config:
                        text_header: Wohnzimmer
                        iconimage: wohnzimmer
                        lights: hEgWoVisuLichtAnAnzahl
                        power: hEgWoVisuSteckdosenAnAnzahl
                        blinds_closed: hEgWoVisuRolladenstellung
                        windows_numbers: hEgWoVisuFensterOffenAnzahl
                        heating: KNXHeizEGWohnzimmerStatusStellgrosse
                        temp: KNXHeizEGWohnzimmerIstTemperatur
                        settemp: KNXHeizEGWohnzimmerSollTemperatur
                        windows: hEgWoFenster
                        ort: Wohnzimmer
                        page: liveHausWohnzimmer
              - component: oh-grid-col
                config:
                  width: "100"
                  small: "50"
                  medium: "33"
                  large: "25"
                  xlarge: "25"
                slots:
                  default:
                    - component: widget:Livevisu Raumkarte
                      config:
                        text_header: Terasse
                        iconimage: terasse
                        lights: aTeVisuLichtAnAnzahl
                        power: aTeVisuSteckdosenAnAnzahl
                        blinds_closed: aTeVisuRolladenstellung
                        ort: Terasse
                        page: liveAussenTerasse
        - component: oh-grid-row
          config: {}
          slots:
            default:
              - component: oh-grid-col
                config:
                  width: "100"
                  small: "50"
                  medium: "33"
                  large: "25"
                  xlarge: "25"
                slots:
                  default:
                    - component: widget:Livevisu Raumkarte
                      config:
                        text_header: Gästezimmer
                        iconimage: gaestezimmer
                        lights: hEgGaeVisuLichtAnAnzahl
                        power: hEgGaeVisuSteckdosenAnAnzahl
                        blinds_closed: hEgGaeVisuRolladenstellung
                        windows_numbers: hEgGaeVisuFensterOffenAnzahl
                        heating: KNXHeizEGGastezimmerStatusStellgrosse
                        temp: KNXHeizEGGastezimmerIstTemperatur
                        settemp: KNXHeizEGGastezimmerSollTemperatur
                        windows: hEgGaeFenster
                        ort: Gästezimmer
                        page: liveHausGaestezimmer
              - component: oh-grid-col
                config:
                  width: "100"
                  small: "50"
                  medium: "33"
                  large: "25"
                  xlarge: "25"
                slots:
                  default:
                    - component: widget:Livevisu Raumkarte
                      config:
                        text_header: WC
                        iconimage: wc
                        lights: hEgWcVisuLichtAnAnzahl
                        blinds_closed: hEgWcVisuRolladenstellung
                        windows_numbers: hEgWcVisuFensterOffenAnzahl
                        heating: hEgWcVisuAVGStellgroesse
                        temp: KNXHeizEGWCIstTemperatur
                        settemp: KNXHeizEGWCSollTemperatur
                        windows: hEgWcFenster
                        ort: WC
                        page: liveHausWc
              - component: oh-grid-col
                config:
                  width: "100"
                  small: "50"
                  medium: "33"
                  large: "25"
                  xlarge: "25"
                slots:
                  default:
                    - component: widget:Livevisu Raumkarte
                      config:
                        text_header: Hauswirtschaftsraum
                        iconimage: hauswirtschaftsraum
                        lights: hEgHwVisuLichtAnAnzahl
                        blinds_closed: hEgHwVisuRolladenstellung
                        windows_numbers: hEgHwVisuFensterOffenAnzahl
                        heating: KNXHeizEGHWRStatusStellgrosse
                        temp: KNXHeizEGHauswirtschaftsraumIstTemperatur
                        settemp: KNXHeizEGHauswirtschaftsraumSollTemperatur
                        windows: hEgHwFenster
                        door_state: KNXSteuerEGNebeneingangsturgeoffnet
                        door_lock: KNXSteuerEGNebeneingangstuerabgeschlossen
                        ort: Hauswirtschaftsraum
                        page: liveHausHauswirtschaftsraum
              - component: oh-grid-col
                config:
                  width: "100"
                  small: "50"
                  medium: "33"
                  large: "25"
                  xlarge: "25"
                slots:
                  default:
                    - component: widget:Livevisu Raumkarte
                      config:
                        text_header: Flur
                        iconimage: flur-eg
                        lights: hEgFlurVisuLichtAnAnzahl
                        power: hEgFlurVisuSteckdosenAnAnzahl
                        ort: Flur
                        page: liveHausFlurEg
  - component: oh-block
    config: {}
    slots:
      default:
        - component: oh-grid-row
          config: {}
          slots:
            default:
              - component: oh-grid-col
                config: {}
                slots:
                  default:
                    - component: widget:Livevisu Trenner
                      config:
                        header: Haus Obergeschoss
        - component: oh-grid-row
          config: {}
          slots:
            default:
              - component: oh-grid-col
                config:
                  width: "100"
                  small: "50"
                  medium: "33"
                  large: "25"
                  xlarge: "25"
                slots:
                  default:
                    - component: widget:Livevisu Raumkarte
                      config:
                        text_header: Schlafzimmer
                        iconimage: schlafzimmer
                        lights: hOgSchlafVisuLichtAnAnzahl
                        blinds_closed: hOgSchlafVisuRolladenstellung
                        windows_numbers: hOgSchlafVisuFensterOffenAnzahl
                        heating: KNXHeizOGSchlafzimmerStatusStellgrosse
                        temp: KNXHeizOGSchlafzimmerIstTemperatur
                        settemp: KNXHeizOGSchlafzimmerSollTemperatur
                        windows: hOgSchlafFenster
                        ort: Schlafzimmer
                        page: liveHausSchlafzimmer
              - component: oh-grid-col
                config:
                  width: "100"
                  small: "50"
                  medium: "33"
                  large: "25"
                  xlarge: "25"
                slots:
                  default:
                    - component: widget:Livevisu Raumkarte
                      config:
                        text_header: Kind1
                        iconimage: Kind1
                        lights: hOgNaVisuLichtAnAnzahl
                        blinds_closed: hOgNaVisuRolladenstellung
                        windows_numbers: hOgNaVisuFensterOffenAnzahl
                        heating: KNXHeizOGKind1StatusStellgrosse
                        temp: KNXHeizOGKind1IstTemperatur
                        settemp: KNXHeizOGKind1SollTemperatur
                        windows: hOgNaFenster
                        ort: Kind1
                        page: liveHausKind1
              - component: oh-grid-col
                config:
                  width: "100"
                  small: "50"
                  medium: "33"
                  large: "25"
                  xlarge: "25"
                slots:
                  default:
                    - component: widget:Livevisu Raumkarte
                      config:
                        text_header: Arbeitszimmer
                        iconimage: arbeitszimmer
                        lights: hOgArVisuLichtAnAnzahl
                        power: hOgArVisuSteckdosenAnAnzahl
                        windows_numbers: hOgArVisuFensterOffenAnzahl
                        heating: KNXHeizOGArbeitszimmerStatusStellgrosse
                        temp: KNXHeizOGArbeitszimmerIstTemperatur
                        settemp: KNXHeizOGArbeitszimmerSollTemperatur
                        windows: hOgArFenster
                        ort: Arbeitszimmer
                        page: liveHausArbeitszimmer
              - component: oh-grid-col
                config:
                  width: "100"
                  small: "50"
                  medium: "33"
                  large: "25"
                  xlarge: "25"
                slots:
                  default:
                    - component: widget:Livevisu Raumkarte
                      config:
                        text_header: Kind2
                        iconimage: Kind2
                        lights: hOgNoVisuLichtAnAnzahl
                        blinds_closed: hOgNoVisuRolladenstellung
                        windows_numbers: hOgNoVisuFensterOffenAnzahl
                        heating: KNXHeizOGKind2StatusStellgrosse
                        temp: KNXHeizOGKind2IstTemperatur
                        settemp: KNXHeizOGKind2SollTemperatur
                        windows: hOgNoFenster
                        ort: Kind2
                        page: liveHausKind2
        - component: oh-grid-row
          config: {}
          slots:
            default:
              - component: oh-grid-col
                config:
                  width: "100"
                  small: "50"
                  medium: "33"
                  large: "25"
                  xlarge: "25"
                slots:
                  default:
                    - component: widget:Livevisu Raumkarte
                      config:
                        text_header: Badezimmer
                        iconimage: badezimmer
                        lights: hOgBadVisuLichtAnAnzahl
                        blinds_closed: hOgBadVisuRolladenstellung
                        windows_numbers: hOgBadVisuFensterOffenAnzahl
                        heating: hOgBadVisuAVGStellgroesse
                        temp: KNXHeizOGBadIstTemperatur
                        settemp: KNXHeizOGBadSollTemperatur
                        windows: hOgBadFenster
                        page: liveHausBadezimmer
                        ort: Badezimmer
              - component: oh-grid-col
                config:
                  width: "100"
                  small: "50"
                  medium: "33"
                  large: "25"
                  xlarge: "25"
                slots:
                  default:
                    - component: widget:Livevisu Raumkarte
                      config:
                        text_header: Wurstekammer
                        iconimage: wurstekammer
                        lights: hOgWuVisuLichtAnAnzahl
                        ort: Wurstekammer
                        page: liveHausTechnik
              - component: oh-grid-col
                config:
                  width: "100"
                  small: "50"
                  medium: "33"
                  large: "25"
                  xlarge: "25"
                slots:
                  default:
                    - component: widget:Livevisu Raumkarte
                      config:
                        text_header: Flur
                        iconimage: flur-og
                        lights: hOgFlVisuLichtAnAnzahl
                        ort: Flur
                        page: liveHausFlurOg
              - component: oh-grid-col
                config:
                  width: "100"
                  small: "50"
                  medium: "33"
                  large: "25"
                  xlarge: "25"
                slots:
                  default:
                    - component: widget:Livevisu Raumkarte
                      config:
                        text_header: Dachboden
                        iconimage: dachboden
                        lights: hOgDachVisuLichtAnAnzahl
                        windows_numbers: hOgDachVisuFensterOffenAnzahl
                        windows: hDgFenster
                        ort: Dachboden
                        page: liveHausDachboden
  - component: oh-block
    config: {}
    slots:
      default:
        - component: oh-grid-row
          config: {}
          slots:
            default:
              - component: oh-grid-col
                config: {}
                slots:
                  default:
                    - component: widget:Livevisu Trenner
                      config:
                        header: Außenbereich
        - component: oh-grid-row
          config: {}
          slots:
            default:
              - component: oh-grid-col
                config:
                  width: "100"
                  small: "50"
                  medium: "33"
                  large: "25"
                  xlarge: "25"
                slots:
                  default:
                    - component: widget:Livevisu Raumkarte
                      config:
                        text_header: Garage
                        iconimage: garage
                        lights: gVisuLichtAnAnzahl
                        temp: KNXHeiz1wireGarageIstTemperatur
                        ort: Garage
                        page: liveGarage
              - component: oh-grid-col
                config:
                  width: "100"
                  small: "50"
                  medium: "33"
                  large: "25"
                  xlarge: "25"
                slots:
                  default:
                    - component: widget:Livevisu Raumkarte
                      config:
                        text_header: Auffahrt
                        iconimage: auffahrt
                        lights: aAufVisuLichtAnAnzahl
                        power: aAufVisuSteckdosenAnAnzahl
                        temp: KNXHeiz1wireAussenIstTemperatur
                        ort: Auffahrt
                        page: liveAuffahrt
              - component: oh-grid-col
                config:
                  width: "100"
                  small: "50"
                  medium: "33"
                  large: "25"
                  xlarge: "25"
                slots:
                  default:
                    - component: widget:Livevisu Raumkarte
                      config:
                        text_header: Garten
                        iconimage: garten
                        lights: aGaVisuLichtAnAnzahl
                        power: aGaVisuSteckdosenAnAnzahl
                        temp: KNXHeiz1wireAussenIstTemperatur
                        ort: Garten
                        page: liveGarten
              - component: oh-grid-col
                config:
                  width: "100"
                  small: "50"
                  medium: "33"
                  large: "25"
                  xlarge: "25"
                slots:
                  default:
                    - component: widget:Livevisu Raumkarte
                      config:
                        text_header: Gewächshaus
                        iconimage: gewaechshaus
                        lights: aGeVisuLichtAnAnzahl
                        ort: Gewächshaus
                        page: liveGewaechshaus
masonry: []
grid: []

To center the cards in the middle of the page, for example the status cards in the bottom of the first dashboard, I created empty columns. Another possibility is changing the default css styles of the oh-pages, but I didn’t found a solution which was compatible with the openhab page designer.

The only problem is the perfomance of the pages. It takes a while (maybe two or three seconds) to load a new page. I’ve seen some other threads discussing this problem, but obviously there is no solution for this problem right now. I think most of the time is needed by Java Script operations in the client, because the time to load the page ist very dependent on my different clients. Right now I’m going to install a wall panel driven by a raspberry pie, I’m curious how this will work.

1 Like

Hi @ToSa,

I picked some SVG graphics from https://www.svgrepo.com/ and combined them with https://inkscape.org/ to this SVG:

heizung

The widget displays the SVG image and puts temperature items to the right places. The temperature items are hardcoded and not defined via widget properties, because I didn’t need different instances of this widget

… replace the radiators with an “Fußbodenheizung” picture.

:slight_smile: That would by nice. I didn’t find a self-explanatory picture for my underfloor heating. If you have a good proposal you’ll be welcome!

This is my yaml code:

uid: Livevisu Heizung Temperaturen
tags:
  - Live
  - MainUI
props:
  parameters:
    - description: rgba oder HEX
      label: Hintergrundfarbe
      name: bgcolor
      required: false
      type: TEXT
  parameterGroups: []
timestamp: Dec 9, 2021, 6:49:43 PM
component: f7-card
config:
  style:
    noShadow: false
    padding: 0px
    border-radius: var(--f7-card-expandable-border-radius)
    box-shadow: 5px 5px 10px 1px rgba(0,0,0,0.1)
    background-color: "=props.bgcolor ? props.bgcolor : ''"
    height: 340px
    margin-left: 5px
    margin-right: 5px
slots:
  content:
    - component: f7-block
      config:
        style:
          position: absolute
          top: -5px
          left: 16px
          flex-direction: row
          display: flex
      slots:
        default:
          - component: f7-icon
            config:
              f7: flame
              size: 18
              style:
                margin-right: 10px
          - component: Label
            config:
              text: Temperaturen im Heizungssystem
              style:
                font-size: 12px
                margin-top: 0px
    - component: f7-block
      config:
        style:
          margin-top: 10px
          flex-direction: row
          display: flex
          align-items: center
          justify-content: space-around
      slots:
        default:
          - component: f7-block
            slots:
              default:
                - component: oh-image
                  config:
                    url: /static/icons/heizung.svg
                    style:
                      height: 290px
                      opacity: 0.7
                - component: f7-chip
                  config:
                    text: "='Vorlauf: '+ items['KNXHeiz1wireSolarVorlaufIstTemperatur'].displayState"
                    style:
                      position: absolute
                      top: 250px
                      left: 130px
                      font-size: 14px
                - component: f7-chip
                  config:
                    text: "='Rücklauf: '+ items['KNXHeiz1wireSolarRucklaufIstTemperatur'].displayState"
                    style:
                      position: absolute
                      top: 85px
                      left: 130px
                      font-size: 14px
                - component: f7-chip
                  config:
                    text: "='Vorlauf: '+ items['KNXHeiz1wireHeizungVorlaufIstTemperatur'].displayState"
                    style:
                      position: absolute
                      top: 85px
                      left: 545px
                      font-size: 14px
                - component: f7-chip
                  config:
                    text: "='Rücklauf: '+ items['KNXHeiz1wireHeizungRucklaufIstTemperatur'].displayState"
                    style:
                      position: absolute
                      top: 255px
                      left: 545px
                      font-size: 14px
                - component: f7-chip
                  config:
                    text: "='Schicht: '+ items['KNXHeiz1wirePufferspeicherOben1IstTemperatur'].displayState"
                    style:
                      position: absolute
                      top: 54px
                      left: 348px
                      font-size: 14px
                - component: f7-chip
                  config:
                    text: "='Schicht: '+ items['KNXHeiz1wirePufferspeicherOben2IstTemperatur'].displayState"
                    style:
                      position: absolute
                      top: 101px
                      left: 348px
                      font-size: 14px
                - component: f7-chip
                  config:
                    text: "='Schicht: '+ items['KNXHeiz1wirePufferspeicherMitteIstTemperatur'].displayState"
                    style:
                      position: absolute
                      top: 148px
                      left: 348px
                      font-size: 14px
                - component: f7-chip
                  config:
                    text: "='Schicht: '+ items['KNXHeiz1wirePufferspeicherUnten1IstTemperatur'].displayState"
                    style:
                      position: absolute
                      top: 195px
                      left: 348px
                      font-size: 14px
                - component: f7-chip
                  config:
                    text: "='Schicht: '+ items['KNXHeiz1wirePufferspeicherUnten2IstTemperatur'].displayState"
                    style:
                      position: absolute
                      top: 242px
                      left: 348px
                      font-size: 14px

Wow :blush: Thanks a lot. Will have a deeper look the next days. I’m also new to the f7 framework and like you struggling with the interaction between oh and f7 components. So it’s good to have a starting point to customize from.

Hi, after some work I have a first draft version working.
The 3 way valve in the picture is switching according to the state of the item “HeishamonOutletDirection”.

Everything is hard coded and I’m not finished yet. But I would let you show my actual widget.

I painted the .svg with https://app.diagrams.net/ and saved it in Openhab Config folder /icons/classic. With the pictured saved in this directory the url paths in the yaml will work.

This is the yaml code

uid: Livevisu Heizung Temperaturen
tags:
  - Live
  - MainUI
props:
  parameters:
    - description: rgba oder HEX
      label: Hintergrundfarbe
      name: bgcolor
      required: false
      type: TEXT
  parameterGroups: []
timestamp: Dec 21, 2021, 7:35:46 PM
component: f7-card
config:
  style:
    noShadow: false
    padding: 0px
    border-radius: var(--f7-card-expandable-border-radius)
    box-shadow: 5px 5px 10px 1px rgba(0,0,0,0.1)
    background-color: "=props.bgcolor ? props.bgcolor : ''"
    height: 480px
    margin-left: 5px
    margin-right: 5px
slots:
  content:
    - component: f7-block
      config:
        style:
          position: absolute
          top: -5px
          left: 16px
          flex-direction: row
          display: flex
      slots:
        default:
          - component: f7-icon
            config:
              f7: flame
              size: 18
              style:
                margin-right: 10px
          - component: Label
            config:
              text: Temperaturen im Heizungssystem
              style:
                font-size: 12px
                margin-top: 0px
    - component: f7-block
      config:
        style:
          margin-top: 10px
          flex-direction: row
          display: flex
          align-items: center
          justify-content: space-around
      slots:
        default:
          - component: f7-block
            slots:
              default:
                - component: oh-image
                  config:
                    lazy: true
                    position: absolute
                    visible: 0
                    url: "=items['HeishamonOutletDirection'].state === '1' ? '/icon/heizung3.svg?format=svg&anyFormat=true' : '/icon/heizung4.svg?format=svg&anyFormat=true'"
                    style:
                      height: 420px
                      opacity: 0.7
                - component: f7-chip
                  config:
                    text: "='Vorlauf: '+ items['HeizungKesselThermischTempKesselDegreesSolarVorlauf'].displayState"
                    style:
                      position: absolute
                      top: 259px
                      left: 128px
                      font-size: 14px
                - component: f7-chip
                  config:
                    text: "='Rücklauf: '+ items['HeizungKesselThermischTempKesselDegreesSolarRuecklauf'].displayState"
                    style:
                      position: absolute
                      top: 334px
                      left: 128px
                      font-size: 14px
                - component: f7-chip
                  config:
                    text: "='Vorlauf: '+ items['HeatmeterFlowTemperature'].displayState"
                    style:
                      position: absolute
                      top: 300px
                      left: 620px
                      font-size: 14px
                - component: f7-chip
                  config:
                    text: "='Rücklauf: '+ items['HeatmeterReturnTemperature'].displayState"
                    style:
                      position: absolute
                      top: 334px
                      left: 620px
                      font-size: 14px
                - component: f7-chip
                  config:
                    text: "='Oben: '+ items['HeizungKesselThermischTempKesselDegreesKesselOben'].displayState"
                    style:
                      position: absolute
                      top: 58px
                      left: 417px
                      font-size: 14px
                - component: f7-chip
                  config:
                    text: "='Mitte: '+ items['HeizungKesselThermischTempKesselDegreesKesselMitte'].displayState"
                    style:
                      position: absolute
                      top: 200px
                      left: 417px
                      font-size: 14px
                - component: f7-chip
                  config:
                    text: "='Unten: '+ items['HeizungKesselThermischTempKesselDegreesKesselUnten'].displayState"
                    style:
                      position: absolute
                      top: 320px
                      left: 417px
                      font-size: 14px
2 Likes

Hi Boris,

awsome design :wink:

can you share the widget code aswell for the overviews?

cheers

Hi yekomS,

the most descriptions in the widgets are in German, but I hope that’s OK. This are the widgets:

uid: Livevisu Wettervorhersage
tags:
  - Live
  - MainUI
props:
  parameters:
    - description: Small title on top of the card
      label: Title
      name: title
      required: false
      type: TEXT
    - label: Background Color
      name: bgcolor
      required: false
      type: TEXT
    - label: Backgroundimage
      name: bgimage
      required: false
      type: TEXT
  parameterGroups: []
timestamp: Dec 15, 2021, 6:18:03 PM
component: f7-card
config:
  style:
    noShadow: false
    class:
      - padding: 0px
    border-radius: var(--f7-card-expandable-border-radius)
    box-shadow: 5px 5px 10px 1px rgba(0,0,0,0.1)
    background-color: "=props.bgcolor ? props.bgcolor : ''"
    height: 150px
    margin-left: 5px
    margin-right: 5px
slots:
  content:
    - component: f7-block
      config:
        style:
          position: absolute
          top: -5px
          left: 16px
          flex-direction: row
          display: flex
      slots:
        default:
          - component: f7-icon
            config:
              f7: cloud_sun
              size: 18
              style:
                margin-right: 10px
          - component: Label
            config:
              text: "=props.title ? props.title : ''"
              style:
                font-size: 12px
                margin-top: 0px
    - component: f7-block
      config:
        style:
          position: absolute
          top: 60px
          left: 16px
          width: 100%
      slots:
        default:
          - component: f7-row
            config:
              class:
                - text-align-center
            slots:
              default:
                - component: f7-col
                  config:
                    style:
                      background: rgba(233, 196, 106, 0)
                  slots:
                    default:
                      - component: Label
                        config:
                          text: Außentemp.
                          style:
                            font-weight: 400
                            margin-bottom: 8px
                - component: f7-col
                  config:
                    style:
                      background: rgba(233, 196, 106, 0)
                  slots:
                    default:
                      - component: Label
                        config:
                          text: Heute
                          style:
                            font-weight: 400
                            margin-bottom: 8px
                - component: f7-col
                  config:
                    style:
                      background: rgba(233, 196, 106, 0)
                  slots:
                    default:
                      - component: Label
                        config:
                          text: =dayjs().add(1,'day').startOf('day').format('dd')
                          style:
                            font-weight: 400
                            margin-bottom: 8px
                - component: f7-col
                  config:
                    style:
                      background: rgba(233, 196, 106, 0)
                  slots:
                    default:
                      - component: Label
                        config:
                          text: =dayjs().add(2,'day').startOf('day').format('dd')
                          style:
                            font-weight: 400
                            margin-bottom: 8px
                - component: f7-col
                  config:
                    style:
                      background: rgba(233, 196, 106, 0)
                  slots:
                    default:
                      - component: Label
                        config:
                          text: =dayjs().add(3,'day').startOf('day').format('dd')
                          style:
                            font-weight: 400
                            margin-bottom: 8px
          - component: f7-row
            config:
              style:
                margin-top: 0px
              class:
                - text-align-center
            slots:
              default:
                - component: f7-col
                  config:
                    style:
                      background: rgba(233, 196, 106, 0)
                      border-right: 4
                  slots:
                    default:
                      - component: Label
                        config:
                          text: =items['KNXHeiz1wireAussenIstTemperatur'].displayState
                          style:
                            font-size: 28px
                            line-height: 25px
                - component: f7-col
                  config:
                    style:
                      background: rgba(233, 196, 106, 0)
                  slots:
                    default:
                      - component: f7-icon
                        config:
                          f7: "=(items.LokaleWettervorhersageOneCallAPI_forecastTodayIconID.state === '01d') ? 'sun_max' : (items.LokaleWettervorhersageOneCallAPI_forecastTodayIconID.state === '01n') ? 'moon_stars' : (items.LokaleWettervorhersageOneCallAPI_forecastTodayIconID.state === '02d') ? 'cloud_sun' : (items.LokaleWettervorhersageOneCallAPI_forecastTodayIconID.state === '02n') ? 'cloud_moon' : (items.LokaleWettervorhersageOneCallAPI_forecastTodayIconID.state === '03d') ? 'cloud' : (items.LokaleWettervorhersageOneCallAPI_forecastTodayIconID.state === '03n') ? 'cloud' : (items.LokaleWettervorhersageOneCallAPI_forecastTodayIconID.state === '04d') ? 'cloud' : (items.LokaleWettervorhersageOneCallAPI_forecastTodayIconID.state === '04n') ? 'cloud' : (items.LokaleWettervorhersageOneCallAPI_forecastTodayIconID.state === '09d') ? 'cloud_heavyrain' : (items.LokaleWettervorhersageOneCallAPI_forecastTodayIconID.state === '09n') ? 'cloud_heavyrain' : (items.LokaleWettervorhersageOneCallAPI_forecastTodayIconID.state === '10d') ? 'cloud_sun_rain' : (items.LokaleWettervorhersageOneCallAPI_forecastTodayIconID.state === '10n') ? 'cloud_moon_rain' : (items.LokaleWettervorhersageOneCallAPI_forecastTodayIconID.state === '11d') ? 'cloud_sun_bolt' : (items.LokaleWettervorhersageOneCallAPI_forecastTodayIconID.state === '11n') ? 'cloud_moon_bolt' : (items.LokaleWettervorhersageOneCallAPI_forecastTodayIconID.state === '13d') ? 'cloud_snow' : (items.LokaleWettervorhersageOneCallAPI_forecastTodayIconID.state === '13n') ? 'cloud_snow' : (items.LokaleWettervorhersageOneCallAPI_forecastTodayIconID.state === '50d') ? 'cloud_fog' : (items.LokaleWettervorhersageOneCallAPI_forecastTodayIconID.state === '50n') ? 'cloud_fog' : '?'"
                          size: 30
                          style:
                            margin-bottom: 8px
                - component: f7-col
                  config:
                    style:
                      background: rgba(233, 196, 106, 0)
                  slots:
                    default:
                      - component: f7-icon
                        config:
                          f7: "=(items.LokaleWettervorhersageOneCallAPI_forecastTomorrowIconID.state === '01d') ? 'sun_max' : (items.LokaleWettervorhersageOneCallAPI_forecastTomorrowIconID.state === '01n') ? 'moon_stars' : (items.LokaleWettervorhersageOneCallAPI_forecastTomorrowIconID.state === '02d') ? 'cloud_sun' : (items.LokaleWettervorhersageOneCallAPI_forecastTomorrowIconID.state === '02n') ? 'cloud_moon' : (items.LokaleWettervorhersageOneCallAPI_forecastTomorrowIconID.state === '03d') ? 'cloud' : (items.LokaleWettervorhersageOneCallAPI_forecastTomorrowIconID.state === '03n') ? 'cloud' : (items.LokaleWettervorhersageOneCallAPI_forecastTomorrowIconID.state === '04d') ? 'cloud' : (items.LokaleWettervorhersageOneCallAPI_forecastTomorrowIconID.state === '04n') ? 'cloud' : (items.LokaleWettervorhersageOneCallAPI_forecastTomorrowIconID.state === '09d') ? 'cloud_heavyrain' : (items.LokaleWettervorhersageOneCallAPI_forecastTomorrowIconID.state === '09n') ? 'cloud_heavyrain' : (items.LokaleWettervorhersageOneCallAPI_forecastTomorrowIconID.state === '10d') ? 'cloud_sun_rain' : (items.LokaleWettervorhersageOneCallAPI_forecastTomorrowIconID.state === '10n') ? 'cloud_moon_rain' : (items.LokaleWettervorhersageOneCallAPI_forecastTomorrowIconID.state === '11d') ? 'cloud_sun_bolt' : (items.LokaleWettervorhersageOneCallAPI_forecastTomorrowIconID.state === '11n') ? 'cloud_moon_bolt' : (items.LokaleWettervorhersageOneCallAPI_forecastTomorrowIconID.state === '13d') ? 'cloud_snow' : (items.LokaleWettervorhersageOneCallAPI_forecastTomorrowIconID.state === '13n') ? 'cloud_snow' : (items.LokaleWettervorhersageOneCallAPI_forecastTomorrowIconID.state === '50d') ? 'cloud_fog' : (items.LokaleWettervorhersageOneCallAPI_forecastTomorrowIconID.state === '50n') ? 'cloud_fog' : '?'"
                          size: 30
                          style:
                            margin-bottom: 8px
                - component: f7-col
                  config:
                    style:
                      background: rgba(233, 196, 106, 0)
                  slots:
                    default:
                      - component: f7-icon
                        config:
                          f7: "=(items.LokaleWettervorhersageOneCallAPI_forecastDay2IconID.state === '01d') ? 'sun_max' : (items.LokaleWettervorhersageOneCallAPI_forecastDay2IconID.state === '01n') ? 'moon_stars' : (items.LokaleWettervorhersageOneCallAPI_forecastDay2IconID.state === '02d') ? 'cloud_sun' : (items.LokaleWettervorhersageOneCallAPI_forecastDay2IconID.state === '02n') ? 'cloud_moon' : (items.LokaleWettervorhersageOneCallAPI_forecastDay2IconID.state === '03d') ? 'cloud' : (items.LokaleWettervorhersageOneCallAPI_forecastDay2IconID.state === '03n') ? 'cloud' : (items.LokaleWettervorhersageOneCallAPI_forecastDay2IconID.state === '04d') ? 'cloud' : (items.LokaleWettervorhersageOneCallAPI_forecastDay2IconID.state === '04n') ? 'cloud' : (items.LokaleWettervorhersageOneCallAPI_forecastDay2IconID.state === '09d') ? 'cloud_heavyrain' : (items.LokaleWettervorhersageOneCallAPI_forecastDay2IconID.state === '09n') ? 'cloud_heavyrain' : (items.LokaleWettervorhersageOneCallAPI_forecastDay2IconID.state === '10d') ? 'cloud_sun_rain' : (items.LokaleWettervorhersageOneCallAPI_forecastDay2IconID.state === '10n') ? 'cloud_moon_rain' : (items.LokaleWettervorhersageOneCallAPI_forecastDay2IconID.state === '11d') ? 'cloud_sun_bolt' : (items.LokaleWettervorhersageOneCallAPI_forecastDay2IconID.state === '11n') ? 'cloud_moon_bolt' : (items.LokaleWettervorhersageOneCallAPI_forecastDay2IconID.state === '13d') ? 'cloud_snow' : (items.LokaleWettervorhersageOneCallAPI_forecastDay2IconID.state === '13n') ? 'cloud_snow' : (items.LokaleWettervorhersageOneCallAPI_forecastDay2IconID.state === '50d') ? 'cloud_fog' : (items.LokaleWettervorhersageOneCallAPI_forecastDay2IconID.state === '50n') ? 'cloud_fog' : '?'"
                          size: 30
                          style:
                            margin-bottom: 8px
                - component: f7-col
                  config:
                    style:
                      background: rgba(233, 196, 106, 0)
                  slots:
                    default:
                      - component: f7-icon
                        config:
                          f7: "=(items.LokaleWettervorhersageOneCallAPI_forecastDay3IconID.state === '01d') ? 'sun_max' : (items.LokaleWettervorhersageOneCallAPI_forecastDay3IconID.state === '01n') ? 'moon_stars' : (items.LokaleWettervorhersageOneCallAPI_forecastDay3IconID.state === '02d') ? 'cloud_sun' : (items.LokaleWettervorhersageOneCallAPI_forecastDay3IconID.state === '02n') ? 'cloud_moon' : (items.LokaleWettervorhersageOneCallAPI_forecastDay3IconID.state === '03d') ? 'cloud' : (items.LokaleWettervorhersageOneCallAPI_forecastDay3IconID.state === '03n') ? 'cloud' : (items.LokaleWettervorhersageOneCallAPI_forecastDay3IconID.state === '04d') ? 'cloud' : (items.LokaleWettervorhersageOneCallAPI_forecastDay3IconID.state === '04n') ? 'cloud' : (items.LokaleWettervorhersageOneCallAPI_forecastDay3IconID.state === '09d') ? 'cloud_heavyrain' : (items.LokaleWettervorhersageOneCallAPI_forecastDay3IconID.state === '09n') ? 'cloud_heavyrain' : (items.LokaleWettervorhersageOneCallAPI_forecastDay3IconID.state === '10d') ? 'cloud_sun_rain' : (items.LokaleWettervorhersageOneCallAPI_forecastDay3IconID.state === '10n') ? 'cloud_moon_rain' : (items.LokaleWettervorhersageOneCallAPI_forecastDay3IconID.state === '11d') ? 'cloud_sun_bolt' : (items.LokaleWettervorhersageOneCallAPI_forecastDay3IconID.state === '11n') ? 'cloud_moon_bolt' : (items.LokaleWettervorhersageOneCallAPI_forecastDay3IconID.state === '13d') ? 'cloud_snow' : (items.LokaleWettervorhersageOneCallAPI_forecastDay3IconID.state === '13n') ? 'cloud_snow' : (items.LokaleWettervorhersageOneCallAPI_forecastDay3IconID.state === '50d') ? 'cloud_fog' : (items.LokaleWettervorhersageOneCallAPI_forecastDay3IconID.state === '50n') ? 'cloud_fog' : '?'"
                          size: 30
                          style:
                            margin-bottom: 8px
          - component: f7-row
            config:
              style:
                margin-top: 0px
              class:
                - text-align-center
            slots:
              default:
                - component: f7-col
                  config:
                    style:
                      background: rgba(233, 196, 106, 0)
                  slots:
                    default:
                      - component: Label
                        config:
                          text: ""
                - component: f7-col
                  config:
                    style:
                      background: rgba(233, 196, 106, 0)
                  slots:
                    default:
                      - component: Label
                        config:
                          text: =Math.round(items.LokaleWettervorhersageOneCallAPI_forecastTodayMinimaleTemperatur.state.split(' ')[0] * 1) / 1 + '° / ' + Math.round(items.LokaleWettervorhersageOneCallAPI_forecastTodayMaximaleTemperatur.state.split(' ')[0] * 1) / 1 + '°'
                - component: f7-col
                  config:
                    style:
                      background: rgba(233, 196, 106, 0)
                  slots:
                    default:
                      - component: Label
                        config:
                          text: =Math.round(items.LokaleWettervorhersageOneCallAPI_forecastTomorrowMinimaleTemperatur.state.split(' ')[0] * 1) / 1 + '° / ' + Math.round(items.LokaleWettervorhersageOneCallAPI_forecastTomorrowMaximaleTemperatur.state.split(' ')[0] * 1) / 1 + '°'
                - component: f7-col
                  config:
                    style:
                      background: rgba(233, 196, 106, 0)
                  slots:
                    default:
                      - component: Label
                        config:
                          text: =Math.round(items.LokaleWettervorhersageOneCallAPI_forecastDay2MinimaleTemperatur.state.split(' ')[0] * 1) / 1 + '° / ' + Math.round(items.LokaleWettervorhersageOneCallAPI_forecastDay2MaximaleTemperatur.state.split(' ')[0] * 1) / 1 + '°'
                - component: f7-col
                  config:
                    style:
                      background: rgba(233, 196, 106, 0)
                  slots:
                    default:
                      - component: Label
                        config:
                          text: =Math.round(items.LokaleWettervorhersageOneCallAPI_forecastDay3MinimaleTemperatur.state.split(' ')[0] * 1) / 1 + '° / ' + Math.round(items.LokaleWettervorhersageOneCallAPI_forecastDay3MaximaleTemperatur.state.split(' ')[0] * 1) / 1 + '°'
    - component: oh-link
      config:
        action: popup
        actionModal: ='page:liveWetter'
        style:
          position: absolute
          left: 0px
          top: 0px
          height: 150px
          width: 100%

uid: Livevisu Owntracks Übersicht
tags:
  - Live
  - MainUI
props:
  parameters:
    - label: Background Color
      name: bgcolor
      required: false
      type: TEXT
    - label: Backgroundimage
      name: bgimage
      required: false
      type: TEXT
  parameterGroups: []
timestamp: Dec 17, 2021, 11:58:31 AM
component: f7-card
config:
  style:
    noShadow: false
    class:
      - padding: 0px
    border-radius: var(--f7-card-expandable-border-radius)
    box-shadow: 5px 5px 10px 1px rgba(0,0,0,0.1)
    background-color: "=props.bgcolor ? props.bgcolor : ''"
    height: 150px
    margin-left: 5px
    margin-right: 5px
slots:
  content:
    - component: f7-block
      config:
        style:
          position: absolute
          top: -5px
          left: 16px
          flex-direction: row
          display: flex
      slots:
        default:
          - component: f7-icon
            config:
              f7: placemark
              size: 18
              style:
                margin-right: 10px
          - component: Label
            config:
              text: Wo sind denn alle?
              style:
                font-size: 12px
                margin-top: 0px
    - component: f7-block
      config:
        style:
          position: absolute
          top: 60px
          left: 16px
          width: 100%
          --f7-grid-gap: 5px
      slots:
        default:
          - component: f7-row
            config:
              class:
                - text-align-center
            slots:
              default:
                - component: f7-col
                  config:
                    style:
                      background: rgba(233, 196, 106, 0)
                  slots:
                    default:
                      - component: Label
                        config:
                          text: Familie
                          style:
                            font-weight: 400
                            margin-bottom: 8px
                - component: f7-col
                  config:
                    style:
                      background: rgba(233, 196, 106, 0)
                  slots:
                    default:
                      - component: Label
                        config:
                          text: Person1
                          style:
                            font-weight: 400
                            margin-bottom: 8px
                - component: f7-col
                  config:
                    style:
                      background: rgba(233, 196, 106, 0)
                  slots:
                    default:
                      - component: Label
                        config:
                          text: Person2
                          style:
                            font-weight: 400
                            margin-bottom: 8px
                - component: f7-col
                  config:
                    style:
                      background: rgba(233, 196, 106, 0)
                  slots:
                    default:
                      - component: Label
                        config:
                          text: Person3
                          style:
                            font-weight: 400
                            margin-bottom: 8px
                - component: f7-col
                  config:
                    style:
                      background: rgba(233, 196, 106, 0)
                  slots:
                    default:
                      - component: Label
                        config:
                          text: Person4
                          style:
                            font-weight: 400
                            margin-bottom: 8px
          - component: f7-row
            config:
              style:
                margin-top: 0px
              class:
                - text-align-center
            slots:
              default:
                - component: f7-col
                  config:
                    style:
                      background: rgba(233, 196, 106, 0)
                      border-right: 4
                  slots:
                    default:
                      - component: oh-image
                        config:
                          action: navigate
                          actionPage: page:owntracksFamilie
                          actionPageTransition: f7-dive
                          url: /static/icons/familie.png
                          style:
                            height: 40px
                - component: f7-col
                  config:
                    style:
                      background: rgba(233, 196, 106, 0)
                  slots:
                    default:
                      - component: oh-image
                        config:
                          action: popup
                          actionModal: page:owntracksPerson1
                          actionModalTransition: f7-dive
                          url: /static/icons/Person1.png
                          style:
                            height: 40px
                - component: f7-col
                  config:
                    style:
                      background: rgba(233, 196, 106, 0)
                  slots:
                    default:
                      - component: oh-image
                        config:
                          action: popup
                          actionModal: page:owntracksPerson2
                          actionModalTransition: f7-dive
                          url: /static/icons/Person2.png
                          style:
                            height: 40px
                - component: f7-col
                  config:
                    style:
                      background: rgba(233, 196, 106, 0)
                  slots:
                    default:
                      - component: oh-image
                        config:
                          action: popup
                          actionModal: page:owntracksPerson3
                          actionModalTransition: f7-dive
                          url: /static/icons/Person3.png
                          style:
                            height: 40px
                - component: f7-col
                  config:
                    style:
                      background: rgba(233, 196, 106, 0)
                  slots:
                    default:
                      - component: oh-image
                        config:
                          action: popup
                          actionModal: page:owntracksPerson4
                          actionModalTransition: f7-dive
                          url: /static/icons/Person4.png
                          style:
                            height: 40px
          - component: f7-row
            config:
              style:
                margin-top: 0px
              class:
                - text-align-center
            slots:
              default:
                - component: f7-col
                  config:
                    style:
                      background: rgba(233, 196, 106, 0)
                  slots:
                    default:
                      - component: Label
                        config:
                          text: ""
                - component: f7-col
                  config:
                    style:
                      background: rgba(233, 196, 106, 0)
                  slots:
                    default:
                      - component: Label
                        config:
                          text: =items['hPerson1PositionLastUpdateSince'].state
                - component: f7-col
                  config:
                    style:
                      background: rgba(233, 196, 106, 0)
                  slots:
                    default:
                      - component: Label
                        config:
                          text: =items['hPerson2PositionLastUpdateSince'].state
                - component: f7-col
                  config:
                    style:
                      background: rgba(233, 196, 106, 0)
                  slots:
                    default:
                      - component: Label
                        config:
                          text: =items['hPerson3PositionLastUpdateSince'].state
                - component: f7-col
                  config:
                    style:
                      background: rgba(233, 196, 106, 0)
                  slots:
                    default:
                      - component: Label
                        config:
                          text: =items['hPerson4PositionLastUpdateSince'].state

The car and the mower widget are nearly the same, just with different pictures and items. This is the mover widget:
robart

uid: Livevisu Robaert
tags:
  - Live
  - MainUI
props:
  parameters:
    - description: rgba oder HEX
      label: Hintergrundfarbe
      name: bgcolor
      required: false
      type: TEXT
    - description: Popup Seite
      label: Page ID
      name: page
      required: false
  parameterGroups: []
timestamp: Dec 22, 2021, 5:01:45 PM
component: f7-card
config:
  style:
    noShadow: false
    padding: 0px
    border-radius: var(--f7-card-expandable-border-radius)
    box-shadow: 5px 5px 10px 1px rgba(0,0,0,0.1)
    background-color: "=props.bgcolor ? props.bgcolor : ''"
    height: 360px
    margin-left: 5px
    margin-right: 5px
slots:
  content:
    - component: f7-block
      config:
        style:
          position: absolute
          top: -5px
          left: 16px
          flex-direction: row
          display: flex
      slots:
        default:
          - component: f7-icon
            config:
              f7: tree
              size: 18
              style:
                margin-right: 10px
          - component: Label
            config:
              text: Robärt
              style:
                font-size: 12px
                margin-top: 0px
    - component: f7-block
      config:
        style:
          display: flex
          justify-content: center
          align-content: center
          margin-top: 35px
      slots:
        default:
          - component: oh-image
            config:
              url: ='/static/icons/robaert_schatten.png'
              style:
                width: 280px
                margin: 0px
    - component: f7-block
      config:
        style:
          justify-content: center
          display: flex
      slots:
        default:
          - component: f7-block
            config:
              style:
                margin-top: 60px
                width: 250px
                display: flex
                flex-direction: column
            slots:
              default:
                - component: f7-row
                  slots:
                    default:
                      - component: f7-col
                        config:
                          width: 70
                        slots:
                          default:
                            - component: Label
                              config:
                                text: Status
                      - component: f7-col
                        config:
                          width: 30
                        slots:
                          default:
                            - component: Label
                              config:
                                text: =items['GardenaRobart_Status'].state
                - component: f7-row
                  slots:
                    default:
                      - component: f7-col
                        config:
                          width: 70
                        slots:
                          default:
                            - component: Label
                              config:
                                text: Ladezustand
                      - component: f7-col
                        config:
                          width: 30
                        slots:
                          default:
                            - component: Label
                              config:
                                text: =items['GardenaRobart_Batterieladung'].displayState
                - component: f7-row
                  slots:
                    default:
                      - component: f7-col
                        config:
                          width: 70
                        slots:
                          default:
                            - component: Label
                              config:
                                text: Aktivität
                      - component: f7-col
                        config:
                          width: 30
                        slots:
                          default:
                            - component: Label
                              config:
                                text: =items['GardenaRobart_Aktivitat'].displayState
                - component: f7-row
                  slots:
                    default:
                      - component: f7-col
                        config:
                          width: 70
                        slots:
                          default:
                            - component: Label
                              config:
                                text: Verbindungsstatus
                      - component: f7-col
                        config:
                          width: 30
                        slots:
                          default:
                            - component: Label
                              config:
                                text: =items['GardenaRobart_Verbinungsstatus'].state
    - component: oh-link
      config:
        action: popup
        actionModal: ='page:' + props.page
        actionModalTransition: f7-dive
        style:
          position: absolute
          left: 0px
          top: 0px
          height: 360px
          width: 100%

camera

uid: Livevisu Kamera Eingang
tags:
  - Live
  - MainUI
props:
  parameters:
    - description: rgba oder HEX
      label: Hintergrundfarbe
      name: bgcolor
      required: false
      type: TEXT
  parameterGroups: []
timestamp: Dec 17, 2021, 9:56:37 AM
component: f7-card
config:
  style:
    noShadow: false
    padding: 0px
    border-radius: var(--f7-card-expandable-border-radius)
    box-shadow: 5px 5px 10px 1px rgba(0,0,0,0.1)
    background-color: "=props.bgcolor ? props.bgcolor : ''"
    height: 360px
    margin-left: 5px
    margin-right: 5px
slots:
  content:
    - component: f7-block
      config:
        style:
          position: absolute
          top: -5px
          left: 16px
          flex-direction: row
          display: flex
      slots:
        default:
          - component: f7-icon
            config:
              f7: videocam_fill
              size: 18
              style:
                margin-right: 10px
          - component: Label
            config:
              text: Kamera Eingang
              style:
                font-size: 12px
                margin-top: 0px
    - component: f7-block
      config:
        style:
          display: flex
          justify-content: center
          align-content: center
          margin-top: 20px
      slots:
        default:
          - component: oh-image
            config:
              url: ='http://192.x.x.x:8081/ipcamera.mjpeg'
              action: popup
              actionModal: ='page:liveKamera'
              style:
                height: 310px

2 Likes

aussen

uid: Livevisu Aussenhaut Übersicht
tags:
  - Live
  - MainUI
props:
  parameters:
    - description: rgba oder HEX
      label: Hintergrundfarbe
      name: bgcolor
      required: false
      type: TEXT
    - description: Popup Seite
      label: Page ID
      name: page
      required: false
    - context: item
      label: Türgruppe (Number)
      name: door_numbers
      required: false
      type: TEXT
    - context: item
      label: Schlossruppe (Number)
      name: lock_numbers
      required: false
      type: TEXT
    - context: item
      label: Fenstergruppe (Number)
      name: window_numbers
      required: false
      type: TEXT
    - context: item
      label: Nebeneingangstürschloss (Contact)
      name: neeingang_cont
      required: false
      type: TEXT
  parameterGroups: []
timestamp: Dec 12, 2021, 1:16:06 PM
component: f7-card
config:
  style:
    noShadow: false
    padding: 0px
    border-radius: var(--f7-card-expandable-border-radius)
    box-shadow: 5px 5px 10px 1px rgba(0,0,0,0.1)
    background-color: "=items[props.window_numbers].state == 0 ? (items[props.door_numbers].state == 0 ? (items[props.neeingang_cont].state == 'OPEN' ? (props.bgcolor ? props.bgcolor : '') : 'orange' ) : 'orange' ) : 'orange'"
    height: 150px
    margin-left: 5px
    margin-right: 5px
slots:
  content:
    - component: f7-block
      config:
        style:
          position: absolute
          top: -5px
          left: 16px
          flex-direction: row
          display: flex
      slots:
        default:
          - component: f7-icon
            config:
              f7: info_circle
              size: 18
              style:
                margin-right: 10px
          - component: Label
            config:
              text: Verschluss Außenhaut
              style:
                font-size: 12px
                margin-top: 0px
    - component: f7-block
      config:
        style:
          position: absolute
          bottom: -90px
          left: 10px
          flex-direction: row
          display: flex
      slots:
        default:
          - component: f7-icon
            config:
              f7: house
              size: 100
    - component: f7-block
      config:
        style:
          position: absolute
          top: 60px
          right: 15px
      slots:
        default:
          - component: f7-row
            config:
              class:
                - justify-content-right
                - align-items-center
                - align-content-center
            slots:
              default:
                - component: f7-col
                  slots:
                    default:
                      - component: oh-image
                        config:
                          url: "=items[props.door_numbers].state > 0 ? '/static/icons/tuer-offen.svg' : '/static/icons/tuer-geschlossen.svg'"
                          style:
                            height: 25px
                            margin-bottom: 3px
                - component: f7-col
                  slots:
                    default:
                      - component: Label
                        config:
                          text: =items[props.door_numbers].state
                          style:
                            margin-left: 17px
                            margin-bottom: 7px
          - component: f7-row
            config:
              class:
                - justify-content-right
                - align-items-center
                - align-content-center
            slots:
              default:
                - component: f7-col
                  slots:
                    default:
                      - component: f7-icon
                        config:
                          f7: "=items[props.lock_numbers].state < 2 ? 'lock_open' : 'lock_fill'"
                          size: 25
                          style:
                            color: black
                            margin-bottom: 8px
                - component: f7-col
                  slots:
                    default:
                      - component: Label
                        config:
                          text: =2 - items[props.lock_numbers].state
                          style:
                            margin-left: 17px
                            margin-bottom: 7px
          - component: f7-row
            config:
              class:
                - justify-content-right
                - align-items-center
                - align-content-center
            slots:
              default:
                - component: f7-col
                  slots:
                    default:
                      - component: oh-image
                        config:
                          url: "=items[props.window_numbers].state > 0 ? '/static/icons/fenster-offen.svg' : '/static/icons/fenster-geschlossen.svg'"
                          style:
                            height: 25px
                - component: f7-col
                  slots:
                    default:
                      - component: Label
                        config:
                          text: =items[props.window_numbers].state
                          style:
                            margin-left: 17px
                            margin-bottom: 7px
    - component: oh-link
      config:
        action: navigate
        actionPageTransition: f7-dive
        actionPage: ='page:' + props.page
        style:
          position: absolute
          left: 0px
          top: 0px
          height: 150px
          width: 100%

The following widget ist used for failure and alarm
störungen

uid: Livevisu StörungsWarnungskarte
tags:
  - Live
  - MainUI
props:
  parameters:
    - label: Gerätebezeichung
      name: raum
      required: false
      type: TEXT
    - label: F7 Icon Header
      name: icon_header
      required: false
      type: TEXT
    - label: Störungsbezeichnung
      name: stoerbez
      required: false
      type: TEXT
    - description: rgba oder HEX
      label: Hintergrundfarbe Normaler Zustand
      name: bgcolor
      required: false
      type: TEXT
    - description: rgba oder HEX
      label: Hintergrundfarbe Aktivierter Zustand
      name: bgcolor_open
      required: false
      type: TEXT
    - label: F7 Icon Normaler Zustand
      name: icon
      required: false
      type: TEXT
    - label: F7 Icon Aktivierter Zustand
      name: icon_active
      required: false
      type: TEXT
    - context: item
      label: Switch
      name: switch
      required: false
      type: TEXT
  parameterGroups: []
timestamp: Dec 15, 2021, 1:37:43 PM
component: f7-card
config:
  style:
    noShadow: false
    padding: 0px
    border-radius: var(--f7-card-expandable-border-radius)
    box-shadow: 5px 5px 10px 1px rgba(0,0,0,0.1)
    background-color: "=props.bgcolor_open ? (items[props.switch].state == 'ON' ? 'red' : props.bgcolor ? props.bgcolor : '') : props.bgcolor ? props.bgcolor : ''"
    height: 120px
    margin-left: 5px
    margin-right: 5px
slots:
  content:
    - component: f7-block
      config:
        style:
          position: absolute
          top: -5px
          left: 16px
          flex-direction: row
          display: flex
      slots:
        default:
          - component: f7-icon
            config:
              f7: =props.icon_header
              size: 18
              style:
                margin-right: 10px
              visible: "=props.icon_header ? true : false"
          - component: Label
            config:
              text: "=props.raum ? props.raum : ''"
              style:
                font-size: 12px
                margin-top: 0px
    - component: f7-block
      config:
        style:
          position: absolute
          bottom: -15px
          left: 16px
          flex-direction: row
      slots:
        default:
          - component: Label
            config:
              text: "=props.stoerbez ? props.stoerbez : 'Set Props'"
              style:
                font-size: 17px
                font-weight: 600
                margin-left: 0px
                margin-top: 0px
    - component: f7-block
      config:
        style:
          position: absolute
          bottom: -53px
          left: 16px
          flex-direction: row
      slots:
        default:
          - component: Label
            config:
              text: =items[props.switch].displayState
    - component: f7-icon
      config:
        f7: "=items[props.switch].state == 'ON' ? props.icon_active : props.icon"
        size: 88
        style:
          position: absolute
          bottom: -70px
          right: 20px
          opacity: 0.7

The following widget ist used for heating, shading and irrigation
beschattung

uid: Livevisu Linkkarte mit Status Übersicht
tags:
  - Live
  - MainUI
props:
  parameters:
    - label: Title
      name: title
      required: false
      type: TEXT
    - label: f7 Icon Titel
      name: icon_titel
      required: false
      type: TEXT
    - label: f7 Icon normal
      name: icon
      required: false
      type: TEXT
    - label: Status Präfix
      name: praefix
      required: false
      type: TEXT
    - label: Status Suffix
      name: suffix
      required: false
      type: TEXT
    - context: item
      label: Statusitem
      name: status
      required: false
      type: TEXT
    - description: rgba oder HEX
      label: Hintergrundfarbe
      name: bgcolor
      required: false
      type: TEXT
    - description: rgba oder HEX
      label: Hintergrundfarbe bei Statusitem > 0 oder ON
      name: bgcolor_active
      required: false
      type: TEXT
    - description: Popup Seite
      label: Page ID
      name: page
      required: false
  parameterGroups: []
timestamp: Dec 13, 2021, 2:27:25 PM
component: f7-card
config:
  style:
    noShadow: false
    padding: 0px
    border-radius: var(--f7-card-expandable-border-radius)
    box-shadow: 5px 5px 10px 1px rgba(0,0,0,0.1)
    background-color: "=items[props.status].state > 0 ? (props.bgcolor_active ? props.bgcolor_active : '') : (items[props.status].state == 'ON' ? (props.bgcolor_active ? props.bgcolor_active : '') : (props.bgcolor ? props.bgcolor : ''))"
    height: 150px
    margin-left: 5px
    margin-right: 5px
slots:
  content:
    - component: f7-block
      config:
        style:
          position: absolute
          top: -5px
          left: 16px
          flex-direction: row
          display: flex
      slots:
        default:
          - component: f7-icon
            config:
              f7: "=props.icon_titel ? props.icon_titel : ''"
              size: 18
              style:
                margin-right: 10px
          - component: Label
            config:
              text: "=props.title ? props.title : ''"
              style:
                font-size: 12px
                margin-top: 0px
    - component: f7-block
      config:
        style:
          position: absolute
          bottom: -90px
          left: 16px
          flex-direction: row
          display: flex
      slots:
        default:
          - component: f7-icon
            config:
              f7: "=props.icon ? props.icon : ''"
              size: 100
    - component: f7-block
      config:
        style:
          position: absolute
          top: 128px
          right: 0px
      slots:
        default:
          - component: Label
            config:
              text: "=props.praefix ? (props.suffix ? props.praefix + items[props.status].displayState + props.suffix : props.praefix + items[props.status].displayState ) : (props.suffix ? items[props.status].displayState + props.suffix : items[props.status].displayState )"
              style:
                margin-right: 10px
    - component: oh-link
      config:
        action: navigate
        actionPageTransition: f7-dive
        actionPage: ='page:' + props.page
        style:
          position: absolute
          left: 0px
          top: 0px
          height: 150px
          width: 100%

room

uid: Livevisu Raumkarte
tags:
  - Live
  - MainUI
props:
  parameters:
    - label: Ortsbezeichnung
      name: ort
      required: false
      type: TEXT
    - description: Icon Name ohne ".png", im Ordner static/icons/
      label: Icon
      name: iconimage
      required: false
      type: TEXT
    - description: HEX or rgba
      label: Hintergrundfarbe
      name: bgcolor
      required: false
      type: TEXT
    - description: Popup Seite
      label: Page ID
      name: page
      required: false
    - context: item
      label: Licht (Number)
      name: lights
      required: false
      type: TEXT
    - context: item
      label: Steckdosen (Number)
      name: power
      required: false
      type: TEXT
    - context: item
      label: Rolladengruppe (Number)
      name: blinds_closed
      required: false
      type: TEXT
    - context: item
      label: Fenstergruppe (Number)
      name: windows_numbers
      required: false
      type: TEXT
    - context: item
      label: Stellgröße
      name: heating
      required: false
      type: TEXT
    - context: item
      label: Ist-Temperatur
      name: temp
      required: false
      type: TEXT
    - context: item
      label: Soll-Temperatur
      name: settemp
      required: false
      type: TEXT
    - context: item
      label: Fenstergruppe (Contact)
      name: windows
      required: false
      type: TEXT
    - context: item
      label: Türstatus
      name: door_state
      required: false
      type: TEXT
    - context: item
      label: Türschloss Status
      name: door_lock
      required: false
      type: TEXT
timestamp: Dec 9, 2021, 7:42:02 AM
component: f7-card
config:
  style:
    noShadow: false
    class:
      - padding: 0px
    border-radius: var(--f7-card-expandable-border-radius)
    box-shadow: 5px 5px 10px 1px rgba(0,0,0,0.1)
    background-color: "=props.bgcolor ? props.bgcolor : ''"
    height: 125px
    margin-left: 5px
    margin-right: 5px
slots:
  content:
    - component: f7-block
      config:
        style:
          position: absolute
          top: -5px
          left: 50px
      slots:
        default:
          - component: Label
            config:
              text: "=props.ort ? props.ort : 'Set Props'"
              style:
                font-size: 17px
                font-weight: 600
                margin-left: 0px
                margin-top: 0px
    - component: f7-block
      config:
        style:
          position: absolute
          bottom: -37px
          left: 16px
      slots:
        default:
          - component: f7-chip
            config:
              style:
                --f7-chip-bg-color: rgba(255, 255, 255, 0)
              visible: "=props.lights ? true : false"
              text: "=(Number(items[props.lights].state) > 0) ? items[props.lights].state : ''"
              iconColor: "=themeOptions.dark === 'dark' ? 'white' : 'black'"
              iconF7: "=(Number(items[props.lights].state) > 0) ? 'lightbulb' : 'lightbulb_slash'"
              iconSize: 18
          - component: f7-badge
            config:
              style:
                --f7-badge-bg-color: rgba(255, 255, 255, 0)
              visible: "=props.power ? true : false"
            slots:
              default:
                - component: oh-image
                  config:
                    url: "=items[props.power].state > 0 ? '/static/icons/steckdose.svg' : '/static/icons/steckdose_slash.svg'"
                    style:
                      height: 18px
                - component: f7-chip
                  config:
                    style:
                      --f7-chip-bg-color: rgba(255, 255, 255, 0)
                      --f7-chip-padding-horizontal: 5px
                    text: "=items[props.power].state > 0 ? items[props.power].state : ''"
          - component: f7-chip
            config:
              style:
                --f7-chip-bg-color: rgba(255, 255, 255, 0)
                --f7-chip-padding-horizontal: 10px
              visible: "=props.heating ? (items[props.heating].state > 0 ? true : false) : false"
              text: "=items[props.heating].state > 0 ? '' : ''"
              iconColor: "=themeOptions.dark === 'dark' ? 'white' : 'black'"
              iconF7: flame
              iconSize: 18
          - component: f7-badge
            config:
              style:
                --f7-badge-bg-color: rgba(255, 255, 255, 0)
                padding-right: 13px
              visible: "=props.door_state ? true : false"
              text: "=items[props.door_state].state === 'ON' ? '' : ''"
            slots:
              default:
                - component: oh-image
                  config:
                    url: "=items[props.door_state].state === 'OPEN' ? '/static/icons/tuer-offen.svg' : '/static/icons/tuer-geschlossen.svg'"
                    style:
                      height: 18px
          - component: f7-badge
            config:
              style:
                --f7-badge-bg-color: rgba(255, 255, 255, 0)
              visible: "=items[props.windows].state === 'OPEN' ? true : false"
            slots:
              default:
                - component: oh-image
                  config:
                    url: ='/static/icons/fenster-offen.svg'
                    style:
                      height: 18px
                - component: f7-chip
                  config:
                    style:
                      --f7-chip-bg-color: rgba(255, 255, 255, 0)
                      --f7-chip-padding-horizontal: 8px
                    visible: "=items[props.windows].state === 'OPEN' ? true : false"
                    text: "=items[props.windows_numbers].state > 0 ? items[props.windows_numbers].state : ''"
          - component: f7-chip
            config:
              style:
                --f7-chip-bg-color: rgba(255, 255, 255, 0)
              visible: "=props.door_lock ? true : false"
              text: "=items[props.door_lock].state === 'CLOSED' ? '' : ''"
              iconColor: "=themeOptions.dark === 'dark' ? 'white' : 'black'"
              iconF7: "=items[props.door_lock].state === 'CLOSED' ? 'lock_open' : 'lock'"
              iconSize: 18
          - component: f7-badge
            config:
              style:
                --f7-badge-bg-color: rgba(255, 255, 255, 0)
              visible: "=props.blinds_closed ? (items[props.blinds_closed].state > 0 ? true : false) : false"
            slots:
              default:
                - component: oh-image
                  config:
                    url: ='/static/icons/rolladen.svg'
                    style:
                      height: 18px
                - component: f7-chip
                  config:
                    style:
                      --f7-chip-bg-color: rgba(255, 255, 255, 0)
                      --f7-chip-padding-horizontal: 8px
                    text: "=items[props.blinds_closed].state == 0 ? 'oben' : Number(Math.floor(items[props.blinds_closed].state * 100)) + ' %'"
    - component: f7-block
      config:
        style:
          position: absolute
          bottom: -65px
          left: 16px
      slots:
        default:
          - component: f7-chip
            config:
              style:
                --f7-chip-bg-color: rgba(255, 255, 255, 0)
              visible: "=props.temp ? true : false"
              text: "=(items[props.temp].displayState  ? items[props.temp].displayState : items[props.temp].displayState) +  (props.settemp ? ' (' + items[props.settemp].displayState + ')' : '')"
              iconColor: "=themeOptions.dark === 'dark' ? 'white' : 'black'"
              iconF7: thermometer
              iconSize: 18
    - component: oh-image
      config:
        url: ='/static/icons/' + props.iconimage + '.png'
        style:
          position: absolute
          left: 16px
          top: 10px
          height: 25px
          opacity: 0.7
        visible: "=props.iconimage ? true : false"
    - component: oh-link
      config:
        action: navigate
        actionPageTransition: f7-dive
        actionPage: ='page:' + props.page
        style:
          position: absolute
          left: 0px
          top: 0px
          height: 110px
          width: 100%

3 Likes

First of all @Integer thanks for your nice work !
I’ve updated your weather widget to allow configuration through the props of all used data.
If the names of the items in your system are not identically as in the code, you get ? as also shown in sceenshot from @BG56 .
Bellow the updated code.
Also a question : Where do I need to put the OneCall API Thing ? Any specific file location (I’m using RPI 3). Would be great to get this also working :slight_smile:

uid: Cell_Weather_2
#Added forecast data with props to accomodate with individual coding
tags: []
props:
  parameters:
    - description: Small title on top of the card
      label: Title
      name: title
      required: false
      type: TEXT
    - label: Background Color
      name: bgcolor
      required: false
      type: TEXT
    - label: Backgroundimage
      name: bgimage
      required: false
      type: TEXT
    - context: item
      description: Item of Forecast today IconID
      label: Forecast_Today_IconID
      name: item_Forecast_Today_IconID
      required: false
      type: TEXT
    - context: item
      description: Item of Forecast tomorrow IconID
      label: Forecast_Tomorrow_IconID
      name: item_Forecast_Tomorrow_IconID
      required: false
      type: TEXT
    - context: item
      description: Item of Forecast Day2 IconID
      label: Forecast_Day2_IconID
      name: item_Forecast_Day2_IconID
      required: false
      type: TEXT
    - context: item
      description: Item of Forecast Day3 IconID
      label: Forecast_Day3_IconID
      name: item_Forecast_Day3_IconID
      required: false
      type: TEXT
    - context: item
      description: Item of Forecast Day4 IconID
      label: Forecast_Day4_IconID
      name: item_Forecast_Day4_IconID
      required: false
      type: TEXT
    - context: item
      description: Item of Forecast today MinTemp
      label: Forecast_Today_MinTemp
      name: item_Forecast_Today_MinTemp
      required: false
      type: TEXT
    - context: item
      description: Item of Forecast tomorrow MinTemp
      label: Forecast_Tomorrow_MinTemp
      name: item_Forecast_Tomorrow_MinTemp
      required: false
      type: TEXT
    - context: item
      description: Item of Forecast Day2 MinTemp
      label: Forecast_Day2_MinTemp
      name: item_Forecast_Day2_MinTemp
      required: false
      type: TEXT
    - context: item
      description: Item of Forecast Day3 MinTemp
      label: Forecast_Day3_MinTemp
      name: item_Forecast_Day3_MinTemp
      required: false
      type: TEXT
    - context: item
      description: Item of Forecast Day4 MinTemp
      label: Forecast_Day4_MinTemp
      name: item_Forecast_Day4_MinTemp
      required: false
      type: TEXT
    - context: item
      description: Item of Forecast today MaxTemp
      label: Forecast_Today_MaxTemp
      name: item_Forecast_Today_MaxTemp
      required: false
      type: TEXT
    - context: item
      description: Item of Forecast tomorrow MaxTemp
      label: Forecast_Tomorrow_MaxTemp
      name: item_Forecast_Tomorrow_MaxTemp
      required: false
      type: TEXT
    - context: item
      description: Item of Forecast Day2 MaxTemp
      label: Forecast_Day2_MaxTemp
      name: item_Forecast_Day2_MaxTemp
      required: false
      type: TEXT
    - context: item
      description: Item of Forecast Day3 MaxTemp
      label: Forecast_Day3_MaxTemp
      name: item_Forecast_Day3_MaxTemp
      required: false
      type: TEXT
    - context: item
      description: Item of Forecast Day4 MaxTemp
      label: Forecast_Day4_MaxTemp
      name: item_Forecast_Day4_MaxTemp
      required: false
      type: TEXT
  parameterGroups: []
timestamp: Dec 25, 2021, 2:41:53 PM
component: f7-card
config:
  style:
    noShadow: false
    class:
      - padding: 0px
    border-radius: var(--f7-card-expandable-border-radius)
    box-shadow: 5px 5px 10px 1px rgba(0,0,0,0.1)
    background-color: "=props.bgcolor ? props.bgcolor : ''"
    height: 150px
    margin-left: 5px
    margin-right: 5px
slots:
  content:
    - component: f7-block
      config:
        style:
          position: absolute
          top: -5px
          left: 16px
          flex-direction: row
          display: flex
      slots:
        default:
          - component: f7-icon
            config:
              f7: cloud_sun
              size: 18
              style:
                margin-right: 10px
          - component: Label
            config:
              text: "=props.title ? props.title : ''"
              style:
                font-size: 12px
                margin-top: 0px
    - component: f7-block
      config:
        style:
          position: absolute
          top: 60px
          left: 16px
          width: 100%
      slots:
        default:
          - component: f7-row
            config:
              class:
                - text-align-center
            slots:
              default:
                - component: f7-col
                  config:
                    style:
                      background: rgba(233, 196, 106, 0)
                  slots:
                    default:
                      - component: Label
                        config:
                          text: Vandaag
                          style:
                            font-weight: 400
                            margin-bottom: 8px
                - component: f7-col
                  config:
                    style:
                      background: rgba(233, 196, 106, 0)
                  slots:
                    default:
                      - component: Label
                        config:
                          text: =dayjs().add(1,'day').startOf('day').format('dd')
                          style:
                            font-weight: 400
                            margin-bottom: 8px
                - component: f7-col
                  config:
                    style:
                      background: rgba(233, 196, 106, 0)
                  slots:
                    default:
                      - component: Label
                        config:
                          text: =dayjs().add(2,'day').startOf('day').format('dd')
                          style:
                            font-weight: 400
                            margin-bottom: 8px
                - component: f7-col
                  config:
                    style:
                      background: rgba(233, 196, 106, 0)
                  slots:
                    default:
                      - component: Label
                        config:
                          text: =dayjs().add(3,'day').startOf('day').format('dd')
                          style:
                            font-weight: 400
                            margin-bottom: 8px
                - component: f7-col
                  config:
                    style:
                      background: rgba(233, 196, 106, 0)
                  slots:
                    default:
                      - component: Label
                        config:
                          text: =dayjs().add(4,'day').startOf('day').format('dd')
                          style:
                            font-weight: 400
                            margin-bottom: 8px
          - component: f7-row
            config:
              style:
                margin-top: 0px
              class:
                - text-align-center
            slots:
              default:
                - component: f7-col
                  config:
                    style:
                      background: rgba(233, 196, 106, 0)
                  slots:
                    default:
                      - component: f7-icon
                        config:
                          f7: "=(items[props.item_Forecast_Today_IconID].state === '01d') ? 'sun_max' : (items[props.item_Forecast_Today_IconID].state === '01n') ? 'moon_stars' : (items[props.item_Forecast_Today_IconID].state === '02d') ? 'cloud_sun' : (items[props.item_Forecast_Today_IconID].state === '02n') ? 'cloud_moon' : (items[props.item_Forecast_Today_IconID].state === '03d') ? 'cloud' : (items[props.item_Forecast_Today_IconID].state === '03n') ? 'cloud' : (items[props.item_Forecast_Today_IconID].state === '04d') ? 'cloud' : (items[props.item_Forecast_Today_IconID]d.state === '04n') ? 'cloud' : (items[props.item_Forecast_Today_IconID].state === '09d') ? 'cloud_heavyrain' : (items[props.item_Forecast_Today_IconID].state === '09n') ? 'cloud_heavyrain' : (items[props.item_Forecast_Today_IconID].state === '10d') ? 'cloud_sun_rain' : (items[props.item_Forecast_Today_IconID].state === '10n') ? 'cloud_moon_rain' : (items[props.item_Forecast_Today_IconID].state === '11d') ? 'cloud_sun_bolt' : (items[props.item_Forecast_Today_IconID].state === '11n') ? 'cloud_moon_bolt' : (items[props.item_Forecast_Today_IconID].state === '13d') ? 'cloud_snow' : (items[props.item_Forecast_Today_IconID].state === '13n') ? 'cloud_snow' : (items[props.item_Forecast_Today_IconID].state === '50d') ? 'cloud_fog' : (items[props.item_Forecast_Today_IconID].state === '50n') ? 'cloud_fog' : '?'"
                          size: 30
                          style:
                            margin-bottom: 8px
                - component: f7-col
                  config:
                    style:
                      background: rgba(233, 196, 106, 0)
                  slots:
                    default:
                      - component: f7-icon
                        config:
                          f7: "=(items[props.item_Forecast_Tomorrow_IconID].state === '01d') ? 'sun_max' : (items[props.item_Forecast_Tomorrow_IconID].state === '01n') ? 'moon_stars' : (items[props.item_Forecast_Tomorrow_IconID].state === '02d') ? 'cloud_sun' : (items[props.item_Forecast_Tomorrow_IconID].state === '02n') ? 'cloud_moon' : (items[props.item_Forecast_Tomorrow_IconID].state === '03d') ? 'cloud' : (items[props.item_Forecast_Tomorrow_IconID].state === '03n') ? 'cloud' : (items[props.item_Forecast_Tomorrow_IconID].state === '04d') ? 'cloud' : (items[props.item_Forecast_Tomorrow_IconID].state === '04n') ? 'cloud' : (items[props.item_Forecast_Tomorrow_IconID].state === '09d') ? 'cloud_heavyrain' : (items[props.item_Forecast_Tomorrow_IconID].state === '09n') ? 'cloud_heavyrain' : (items[props.item_Forecast_Tomorrow_IconID].state === '10d') ? 'cloud_sun_rain' : (items[props.item_Forecast_Tomorrow_IconID].state === '10n') ? 'cloud_moon_rain' : (items[props.item_Forecast_Tomorrow_IconID].state === '11d') ? 'cloud_sun_bolt' : (items[props.item_Forecast_Tomorrow_IconID].state === '11n') ? 'cloud_moon_bolt' : (items[props.item_Forecast_Tomorrow_IconID].state === '13d') ? 'cloud_snow' : (items[props.item_Forecast_Tomorrow_IconID].state === '13n') ? 'cloud_snow' : (items[props.item_Forecast_Tomorrow_IconID].state === '50d') ? 'cloud_fog' : (items[props.item_Forecast_Tomorrow_IconID].state === '50n') ? 'cloud_fog' : '?'"
                          size: 30
                          style:
                            margin-bottom: 8px
                - component: f7-col
                  config:
                    style:
                      background: rgba(233, 196, 106, 0)
                  slots:
                    default:
                      - component: f7-icon
                        config:
                          f7: "=(items[props.item_Forecast_Day2_IconID].state === '01d') ? 'sun_max' : (items[props.item_Forecast_Day2_IconID].state === '01n') ? 'moon_stars' : (items[props.item_Forecast_Day2_IconID].state === '02d') ? 'cloud_sun' : (items[props.item_Forecast_Day2_IconID].state === '02n') ? 'cloud_moon' : (items[props.item_Forecast_Day2_IconID].state === '03d') ? 'cloud' : (items[props.item_Forecast_Day2_IconID].state === '03n') ? 'cloud' : (items[props.item_Forecast_Day2_IconID].state === '04d') ? 'cloud' : (items[props.item_Forecast_Day2_IconID].state === '04n') ? 'cloud' : (items[props.item_Forecast_Day2_IconID].state === '09d') ? 'cloud_heavyrain' : (items[props.item_Forecast_Day2_IconID].state === '09n') ? 'cloud_heavyrain' : (items[props.item_Forecast_Day2_IconID].state === '10d') ? 'cloud_sun_rain' : (items[props.item_Forecast_Day2_IconID].state === '10n') ? 'cloud_moon_rain' : (items[props.item_Forecast_Day2_IconID].state === '11d') ? 'cloud_sun_bolt' : (items[props.item_Forecast_Day2_IconID].state === '11n') ? 'cloud_moon_bolt' : (items[props.item_Forecast_Day2_IconID].state === '13d') ? 'cloud_snow' : (items[props.item_Forecast_Day2_IconID].state === '13n') ? 'cloud_snow' : (items[props.item_Forecast_Day2_IconID].state === '50d') ? 'cloud_fog' : (items[props.item_Forecast_Day2_IconID].state === '50n') ? 'cloud_fog' : '?'"
                          size: 30
                          style:
                            margin-bottom: 8px
                - component: f7-col
                  config:
                    style:
                      background: rgba(233, 196, 106, 0)
                  slots:
                    default:
                      - component: f7-icon
                        config:
                          f7: "=(items[props.item_Forecast_Day3_IconID].state === '01d') ? 'sun_max' : (items[props.item_Forecast_Day3_IconID].state === '01n') ? 'moon_stars' : (items[props.item_Forecast_Day3_IconID].state === '02d') ? 'cloud_sun' : (items[props.item_Forecast_Day3_IconID].state === '02n') ? 'cloud_moon' : (items[props.item_Forecast_Day3_IconID].state === '03d') ? 'cloud' : (items[props.item_Forecast_Day3_IconID].state === '03n') ? 'cloud' : (items[props.item_Forecast_Day3_IconID].state === '04d') ? 'cloud' : (items[props.item_Forecast_Day3_IconID].state === '04n') ? 'cloud' : (items[props.item_Forecast_Day3_IconID].state === '09d') ? 'cloud_heavyrain' : (items[props.item_Forecast_Day3_IconID].state === '09n') ? 'cloud_heavyrain' : (items[props.item_Forecast_Day3_IconID].state === '10d') ? 'cloud_sun_rain' : (items[props.item_Forecast_Day3_IconID].state === '10n') ? 'cloud_moon_rain' : (items[props.item_Forecast_Day3_IconID].state === '11d') ? 'cloud_sun_bolt' : (items[props.item_Forecast_Day3_IconID].state === '11n') ? 'cloud_moon_bolt' : (items[props.item_Forecast_Day3_IconID].state === '13d') ? 'cloud_snow' : (items[props.item_Forecast_Day3_IconID].state === '13n') ? 'cloud_snow' : (items[props.item_Forecast_Day3_IconID].state === '50d') ? 'cloud_fog' : (items[props.item_Forecast_Day3_IconID].state === '50n') ? 'cloud_fog' : '?'"
                          size: 30
                          style:
                            margin-bottom: 8px
                - component: f7-col
                  config:
                    style:
                      background: rgba(233, 196, 106, 0)
                  slots:
                    default:
                      - component: f7-icon
                        config:
                          f7: "=(items[props.item_Forecast_Day4_IconID].state === '01d') ? 'sun_max' : (items[props.item_Forecast_Day4_IconID].state === '01n') ? 'moon_stars' : (items[props.item_Forecast_Day4_IconID].state === '02d') ? 'cloud_sun' : (items[props.item_Forecast_Day4_IconID].state === '02n') ? 'cloud_moon' : (items[props.item_Forecast_Day4_IconID].state === '03d') ? 'cloud' : (items[props.item_Forecast_Day4_IconID].state === '03n') ? 'cloud' : (items[props.item_Forecast_Day4_IconID].state === '04d') ? 'cloud' : (items[props.item_Forecast_Day4_IconID].state === '04n') ? 'cloud' : (items[props.item_Forecast_Day4_IconID].state === '09d') ? 'cloud_heavyrain' : (items[props.item_Forecast_Day4_IconID].state === '09n') ? 'cloud_heavyrain' : (items[props.item_Forecast_Day4_IconID].state === '10d') ? 'cloud_sun_rain' : (items[props.item_Forecast_Day4_IconID].state === '10n') ? 'cloud_moon_rain' : (items[props.item_Forecast_Day4_IconID].state === '11d') ? 'cloud_sun_bolt' : (items[props.item_Forecast_Day4_IconID].state === '11n') ? 'cloud_moon_bolt' : (items[props.item_Forecast_Day4_IconID].state === '13d') ? 'cloud_snow' : (items[props.item_Forecast_Day4_IconID].state === '13n') ? 'cloud_snow' : (items[props.item_Forecast_Day4_IconID].state === '50d') ? 'cloud_fog' : (items[props.item_Forecast_Day4_IconID].state === '50n') ? 'cloud_fog' : '?'"
                          size: 30
                          style:
                            margin-bottom: 8px
          - component: f7-row
            config:
              style:
                margin-top: 0px
              class:
                - text-align-center
            slots:
              default:
                - component: f7-col
                  config:
                    style:
                      background: rgba(233, 196, 106, 0)
                  slots:
                    default:
                      - component: Label
                        config:
                          text: =Math.round(items[props.item_Forecast_Today_MinTemp].state.split(' ')[0] * 1) / 1 + '° / ' + Math.round(items[props.item_Forecast_Today_MaxTemp].state.split(' ')[0] * 1) / 1 + '°'
                - component: f7-col
                  config:
                    style:
                      background: rgba(233, 196, 106, 0)
                  slots:
                    default:
                      - component: Label
                        config:
                          text: =Math.round(items[props.item_Forecast_Tomorrow_MinTemp].state.split(' ')[0] * 1) / 1 + '° / ' + Math.round(items[props.item_Forecast_Tomorrow_MaxTemp].state.split(' ')[0] * 1) / 1 + '°'
                - component: f7-col
                  config:
                    style:
                      background: rgba(233, 196, 106, 0)
                  slots:
                    default:
                      - component: Label
                        config:
                          text: =Math.round(items[props.item_Forecast_Day2_MinTemp].state.split(' ')[0] * 1) / 1 + '° / ' + Math.round(items[props.item_Forecast_Day2_MaxTemp].state.split(' ')[0] * 1) / 1 + '°'
                - component: f7-col
                  config:
                    style:
                      background: rgba(233, 196, 106, 0)
                  slots:
                    default:
                      - component: Label
                        config:
                          text: =Math.round(items[props.item_Forecast_Day3_MinTemp].state.split(' ')[0] * 1) / 1 + '° / ' + Math.round(items[props.item_Forecast_Day3_MaxTemp].state.split(' ')[0] * 1) / 1 + '°'
                - component: f7-col
                  config:
                    style:
                      background: rgba(233, 196, 106, 0)
                  slots:
                    default:
                      - component: Label
                        config:
                          text: =Math.round(items[props.item_Forecast_Day4_MinTemp].state.split(' ')[0] * 1) / 1 + '° / ' + Math.round(items[props.item_Forecast_Day4_MaxTemp].state.split(' ')[0] * 1) / 1 + '°'
2 Likes

Love the simplicity of your widgets!

With the Climate/thermostat one, do you know how I would modify in a way that clicking the button turns on the main air conditioning switch?

Hi Boris,

thx a lot :slight_smile:

btw: deutsch ist kein Problem :wink:

Hey,
how do setup your lights to count them?

Thanks!

Simply create a group, base type “Number”, aggregation type “SUM”.
Then add your items to that group.
Example for an “Open Windows Counter” for one of my rooms:

Ok, it‘s working. Thanks!
But I get a strange result. If I turn on a light, it will show not 1, instead it shows 0,56. because it‘s a dimmable light.
Do you have a solution therefore?

Straight forward I’d link a second item of type “Switch” to the same channel and use this instead of the dimmer item in the group. This should give the expected result. Just tried it, worked fine.

Great! It works! :grinning:
But how can I format the output? The UI shows now 1.0. I‘ve tried with „%.0f“ but nothing changes.

hi guys,i just started with main.ui .I have a question,i need a oh-label-card that can send a ON command and if it is ON when i press it open a popup with keypad widget.Can this be done?