[OH3] Main UI Examples

Hello,
I wanted to collect examples of what you have already done with the new user interface. Maybe there are some inspirations for all of us. So have fun :slight_smile:

This is how my overview page looks like on a tablet at the moment.

Best regards,
Manfred

12 Likes
2 Likes

After 2 months of work :slight_smile:

14 Likes

Good idea

4 Likes

Hi Michael,

could you please share the code for this view:

Thanks!

Yep. I’m quite sure there is room for improvement, as this was one of my first custom widgets. It is in german, but hope it helps.

uid: Wetter_Widget
tags: []
props:
  parameters:
    - context: item
      description: Aktuelles Wetter
      label: Item
      name: cond
      required: true
      type: TEXT
    - context: item
      description: Aktuelle Temperatur
      label: Item
      name: temp
      required: true
      type: TEXT
    - context: item
      description: Minimale Temperatur
      label: Item
      name: mintemp
      required: true
      type: TEXT
    - context: item
      description: Maximale Temperatur
      label: Item
      name: maxtemp
      required: true
      type: TEXT
    - context: item
      description: Sonnenaufgang
      label: Item
      name: sunrise
      required: true
      type: TEXT
    - context: item
      description: Sonnenuntergang
      label: Item
      name: sunset
      required: true
      type: TEXT
timestamp: Mar 6, 2021, 11:12:02 AM
component: f7-row
slots:
  default:
    - component: f7-col
      config:
        width: "100"
        xlarge: "33"
        class:
          - display-flex
          - justify-content-center
          - padding-bottom
        style:
          //background-color: rgba(255,255,255,.15)
          top: 0
          left: 0
          border-radius: 3px
          display: flex
          flex-direction: row
          align-items: center
      slots:
        default:
          - component: f7-icon
            config:
              f7: "=(items['localCurrentIconId'].state === '01d') ? 'sun_max_fill' : (items['localCurrentIconId'].state === '01n') ? 'moon_stars_fill' : (items['localCurrentIconId'].state === '02d') ? 'cloud_sun_fill' : (items['localCurrentIconId'].state === '02n') ? 'cloud_moon_fill' : (items['localCurrentIconId'].state === '03d') ? 'cloud_fill' : (items['localCurrentIconId'].state === '03n') ? 'cloud_fill' : (items['localCurrentIconId'].state === '04d') ? 'cloud_fill' : (items['localCurrentIconId'].state === '04n') ? 'cloud_fill' : (items['localCurrentIconId'].state === '09d') ? 'cloud_heavyrain_fill' : (items['localCurrentIconId'].state === '09n') ? 'cloud_heavyrain_fill' : (items['localCurrentIconId'].state === '10d') ? 'cloud_sun_rain_fill' : (items['localCurrentIconId'].state === '10n') ? 'cloud_moon_rain_fill' : (items['localCurrentIconId'].state === '11d') ? 'cloud_sun_bolt_fill' : (items['localCurrentIconId'].state === '11n') ? 'cloud_moon_bolt_fill' : (items['localCurrentIconId'].state === '13d') ? 'cloud_snow_fill' : (items['localCurrentIconId'].state === '13n') ? 'cloud_snow_fill' : (items['localCurrentIconId'].state === '50d') ? 'cloud_fog_fill' : (items['localCurrentIconId'].state === '50n') ? 'cloud_fog_fill' : '?'"
              size: 50
          - component: oh-link
            config:
              text: =items[props.cond].state
              color: white
              action: popup
              actionModal: widget:Wetter_OneCall
              actionModalConfig:
                forecastHours: "12"
                forecastDays: "5"
                sunIndicator: true
                dateFormat: true
                pressure: Netatmo_Innen_Luftdruck
                trend: Netatmo_Innen_Luftdrucktrend
                wind: Netatmo_Gust_Staerke
                uv: OWMUVIndex_ForecastToday_Uvindex
                windrichtung: Netatmo_Gust_Richtung
                wordingForecastHours: -Stunden Prognose
                wordingForecastDays: -Tages Prognose
                wordingNow: Jetzt
                wordingToday: Heute
                wordingSunrise: Sonnenaufgang
                wordingSunset: Sonnenuntergang
              style:
                font-size: 22px
                margin-left: 15px
    - component: f7-col
      config:
        width: "100"
        xlarge: "33"
        class:
          - display-flex
          - justify-content-center
          - padding-bottom
        style:
          //background-color: rgba(255,255,255,.15)
          top: 0
          left: 0
          border-radius: 3px
          display: flex
          flex-direction: row
          align-items: center
      slots:
        default:
          - component: f7-icon
            config:
              f7: thermometer
              size: 45
              style:
                margin-left: 0px
          - component: oh-link
            config:
              color: "=(items[props.temp].state < 0) ? 'darkblue' : (items[props.temp].state < 5) ? 'blue' : (items[props.temp].state < 10) ? 'lightblue' : (items[props.temp].state < 20) ? 'yellow' : (items[props.temp].state < 30) ? 'orange' : 'red'"
              text: =items[props.temp].displayState
              action: analyzer
              actionAnalyzerItems: =[props.temp]
              style:
                font-size: 22px
                margin-left: 10px
          - component: Label
            config:
              text: = "( Min " + ":" + " "  + items[props.mintemp].displayState
              style:
                font-size: 18px
                margin-left: 10px
          - component: Label
            config:
              text: = "Max " + ":" + " " + items[props.maxtemp].displayState + " )"
              style:
                font-size: 18px
                margin-left: 10px
    - component: f7-col
      config:
        width: "100"
        xlarge: "33"
        class:
          - display-flex
          - justify-content-center
          - padding-bottom
        style:
          //background-color: rgba(255,255,255,.15)
          top: 0
          left: 0
          border-radius: 3px
          display: flex
          flex-direction: row
          align-items: center
      slots:
        default:
          - component: f7-icon
            config:
              f7: sunrise
              size: 45
              style:
                margin-left: 0px
          - component: Label
            config:
              text: =items[props.sunrise].displayState
              action: analyzer
              actionAnalyzerItems: =[props.sunrise]
              style:
                font-size: 22px
                margin-left: 10px
          - component: f7-icon
            config:
              f7: sunset
              size: 45
              style:
                margin-left: 40px
          - component: Label
            config:
              text: =items[props.sunset].displayState
              action: analyzer
              actionAnalyzerItems: =[props.sunset]
              style:
                font-size: 22px
                margin-left: 10px

4 Likes

Thanks a lot, german is fine for me :grinning:

You can probably improve this line:
f7: "=(items['localCurrentIconId'].state === '01d') ? 'sun_max_fill' : (items['localCurrentIconId'].state === '01n') ? 'moon_stars_fill' : (items['localCurrentIconId'].state === '02d') ? 'cloud_sun_fill' : (items['localCurrentIconId'].state === '02n') ? 'cloud_moon_fill' : (items['localCurrentIconId'].state === '03d') ? 'cloud_fill' : (items['localCurrentIconId'].state === '03n') ? 'cloud_fill' : (items['localCurrentIconId'].state === '04d') ? 'cloud_fill' : (items['localCurrentIconId'].state === '04n') ? 'cloud_fill' : (items['localCurrentIconId'].state === '09d') ? 'cloud_heavyrain_fill' : (items['localCurrentIconId'].state === '09n') ? 'cloud_heavyrain_fill' : (items['localCurrentIconId'].state === '10d') ? 'cloud_sun_rain_fill' : (items['localCurrentIconId'].state === '10n') ? 'cloud_moon_rain_fill' : (items['localCurrentIconId'].state === '11d') ? 'cloud_sun_bolt_fill' : (items['localCurrentIconId'].state === '11n') ? 'cloud_moon_bolt_fill' : (items['localCurrentIconId'].state === '13d') ? 'cloud_snow_fill' : (items['localCurrentIconId'].state === '13n') ? 'cloud_snow_fill' : (items['localCurrentIconId'].state === '50d') ? 'cloud_fog_fill' : (items['localCurrentIconId'].state === '50n') ? 'cloud_fog_fill' : '?'"

by defining options in your item’s state description metadata like

01d=sun_max_fill
01n=moon_stars_fill
02d=cloud_sun_fill
...

(or the MAP transformation with a .map file would work too I guess), and then it becomes just:
f7: "=items['localCurrentIconId'].displayState

5 Likes

@michaeljoos
Could u please provide me some information about your background images for the oh-location-cards? What I’m interested in is the yaml code if possible and what kind of css styling properties you might have used? Last would be nice to know which resolution and aspect ratio your images have?

You can easily set a background for these location cards like this:

/static is folder \openHAB-conf\html\

My pictures a quite small to not have too much data from remote (approx 10kB, 400x225 pixel)

How did you get the selection below?

you have to create a tabbed page

Thank you

Great to see all the examples. Every time I look at the forum I see more things that I would like to implement too… :smiley:

This is very much a work in progress. Had an idea of how I wanted the interface to look like and started looking at examples of interfaces, graphics, etc. It’s still rough around the edges and the YAML for the widgets is definitely not the most efficient way of doing things but I’m learning. The interface is used on an iPad mini and specifically made for that (a lot of absolute positioning because I didn’t have time yet to look into responsiveness, grid, etc.). There’s so much to learn from the forum here but unfortunately time is the main limiting factor :frowning_face:

Still need to create a proper Home page and other screens but for now I have the main screens for lighting and environmental monitoring (the rest will come after I’ve made some more progress on the hardware side of things).

I put together a Media Center based on OSMC with a second RPI with a touch screen used to host the AMBI light software and some other stuff.

Touch screen for the Media Center.

8 Likes

Hi @mag2000,

can you tell me how you arranged your widgets? Did you use cells or culomns? I do not have an indea how to arrange my widgets.
Thanks for your help.

Hi,
for the overview I used the masonry, because I waste the least space with it. But maybe you should wait a little bit, because with OH 3.1 there will be a habpanel like layout as well.

Hey @rbuurveld ,

Great work !

Would you please be so kind and post the YAML for the different examples?
Thanks a lot.

Based on the Idea of the “Location Tab Page” I’ve created a room widget by own. At a first look, it looks a bit overloaded but really practical to see all values on one page.

EDIT: updated with YAML codes

Overview

config:
  label: Mein Zuhause
  sidebar: true
blocks:
  - component: oh-block
    config: {}
    slots:
      default:
        - component: oh-grid-row
          config: {}
          slots:
            default:
              - component: oh-grid-col
                config:
                  large: "20"
                  xlarge: "20"
                  medium: "33"
                  width: "50"
                slots:
                  default:
                    - component: widget:Cell_Card_1
                      config:
                        title: Aktiviere Szene
                        header: Morgen
                        icon: sunrise
                        item: Szene
                        command: "1"
                        bgcolor: rgba(233, 196, 106, 0.5)
              - component: oh-grid-col
                config:
                  large: "20"
                  xlarge: "20"
                  medium: "33"
                  width: "50"
                slots:
                  default:
                    - component: widget:Cell_Card_1
                      config:
                        title: Aktiviere Szene
                        header: Tag
                        icon: sun_max
                        item: Szene
                        command: "2"
                        bgcolor: rgba(244, 162, 97, 0.5)
              - component: oh-grid-col
                config:
                  large: "20"
                  xlarge: "20"
                  medium: "33"
                  width: "50"
                slots:
                  default:
                    - component: widget:Cell_Card_1
                      config:
                        title: Aktiviere Szene
                        header: Abend
                        icon: sunset
                        item: Szene
                        command: "3"
                        bgcolor: rgba(231, 111, 81, 0.5)
              - component: oh-grid-col
                config:
                  large: "20"
                  xlarge: "20"
                  medium: "33"
                  width: "50"
                slots:
                  default:
                    - component: widget:Cell_Card_1
                      config:
                        title: Aktiviere Szene
                        header: Nacht
                        icon: moon_zzz
                        item: Szene
                        command: "4"
                        bgcolor: rgba(38, 70, 83, 0.5)
              - component: oh-grid-col
                config:
                  large: "20"
                  xlarge: "20"
                  medium: "33"
                  width: "50"
                slots:
                  default:
                    - component: widget:Cell_Card_1
                      config:
                        title: Hauptschalter
                        header: Alles aus
                        icon: zzz
                        bgcolor: rgba(2, 48, 71, 0.8)
                        item: Szene
                        command: "5"
  - component: oh-block
    config: {}
    slots:
      default:
        - component: oh-grid-row
          config: {}
          slots:
            default:
              - component: oh-grid-col
                config:
                  width: "100"
                  xsmall: "100"
                  small: "100"
                  medium: "40"
                  large: "40"
                  xlarge: "40"
                slots:
                  default:
                    - component: widget:Cell_Weather_1
                      config:
                        title: Wetter
                        header: Alles aus
                        icon: zzz
                        item: Szene
                        command: "5"
              - component: oh-grid-col
                config:
                  width: "100"
                  xsmall: "100"
                  small: "100"
                  medium: "30"
                  large: "30"
                  xlarge: "30"
                slots:
                  default:
                    - component: widget:Cell_Weather_Actual_1
                      config:
                        title: Aussen
                        item_temp: Wetterstation_Aussentemperatur
                        item_hum: Wetterstation_Luftfeuchtigkeit
                        item_rain: Wetterstation_Regenheute
                        item_strike: Wetterstation_LightningStrikeCount
                        item_ill: Wetterstation_Helligkeit
                        item_wind: Wetterstation_WindDurchschnitt
                        item_wind_dir: Wetterstation_Windrichtung
                        page: Test2
              - component: oh-grid-col
                config:
                  width: "50"
                  xsmall: "50"
                  small: "50"
                  medium: "10"
                  large: "10"
                  xlarge: "10"
                slots:
                  default:
                    - component: widget:Cell_Garden_1
                      config:
                        title: Garten
                        item_zone: WateringAutomatic_CurrentZone
                        item_soil_hum: SensorSensorSoilHumidity
              - component: oh-grid-col
                config:
                  width: "50"
                  xsmall: "50"
                  small: "50"
                  medium: "10"
                  large: "10"
                  xlarge: "10"
                slots:
                  default:
                    - component: widget:Cell_Pool_1
                      config:
                        title: Pool
                        item_temp: SHELLY_Temperatur_Pool
                        item_pump: SHELLY_PoolPump_OnOff
              - component: oh-grid-col
                config:
                  width: "50"
                  xsmall: "50"
                  small: "50"
                  medium: "10"
                  large: "10"
                  xlarge: "10"
                slots:
                  default:
                    - component: widget:Cell_Settings_1
                      config:
                        item_battery: GroupBatteryLevelCritical
                        page: page_29fff8448f
  - component: oh-block
    config: {}
    slots:
      default:
        - component: oh-grid-row
          config: {}
          slots:
            default:
              - component: oh-grid-col
                config:
                  large: "25"
                  xlarge: "25"
                  medium: "33"
                  small: "50"
                  width: "100"
                slots:
                  default:
                    - component: widget:Card_room_12
                      config:
                        text_header: Wohnzimmer
                        status: LichterWohnung
                        heating: SHELLY_Heizung_Wohnung
                        temp: SHELLY_Temperatur_Wohnung_correct
                        settemp: SHELLY_Soll_Temperatur_Wohnung
                        humidity: SHELLY_Humidity_Wohnung
                        page: page_37d05f1a2b
                        blinds_closed: StorenState
                        speakers: SonosWohnzimmer_Fernbedienung
                        windows: GroupWindowsWohnzimmerState
                        windows_numbers: GroupWindowsWohnzimmerNumber
                        illuminance: GroupIlluminanceWohnzimmer
                        iconimage: livingroom
              - component: oh-grid-col
                config:
                  width: "100"
                  xlarge: "25"
                  large: "25"
                  medium: "33"
                  small: "50"
                slots:
                  default:
                    - component: widget:Card_room_12
                      config:
                        text_header: Eltern
                        status: Group_Lights_ElternSchlafzimmer
                        heating: SHELLY_Heizung_Zimmer_Eltern
                        temp: SHELLY_Temperatur_Zimmer_Eltern_correct
                        settemp: SHELLY_Soll_Temperatur_Zimmer_Eltern
                        humidity: SHELLY_Humidity_Zimmer_Eltern
                        speakers: SonosEltern_Fernbedienung
                        page: ZimmerEltern
                        iconimage: myparents
              - component: oh-grid-col
                config:
                  width: "100"
                  small: "50"
                  medium: "33"
                  large: "25"
                  xlarge: "25"
                slots:
                  default:
                    - component: widget:Card_room_12
                      config:
                        text_header: GIRL
                        heating: SHELLY_Heizung_Zimmer_GIRL
                        temp: SHELLY_Temperatur_Zimmer_GIRL_correct
                        settemp: SHELLY_Soll_Temperatur_Zimmer_GIRL
                        humidity: SHELLY_Humidity_Zimmer_GIRL
                        status: LichterGIRL
                        speakers: SonosGIRL_Fernbedienung
                        page: ZimmerGIRL
                        windows: FensterGIRL1_Contact
                        illuminance: FensterGIRL1_Lux
                        iconimage: mygirl
              - component: oh-grid-col
                config:
                  width: "100"
                  small: "50"
                  medium: "33"
                  large: "25"
                  xlarge: "25"
                slots:
                  default:
                    - component: widget:Card_room_12
                      config:
                        text_header: BOY
                        iconimage: myboy
                        heating: SHELLY_Heizung_Zimmer_BOY
                        temp: SHELLY_Temperatur_Zimmer_BOY_correct
                        settemp: SHELLY_Soll_Temperatur_Zimmer_BOY
                        humidity: SHELLY_Humidity_Zimmer_BOY
                        status: LichterBOY
                        speakers: SonosBOY_Fernbedienung
                        page: ZimmerBOY
                        windows: FensterBOY_Contact
                        illuminance: FensterBOY_Lux
              - component: oh-grid-col
                config:
                  width: "100"
                  small: "50"
                  medium: "33"
                  large: "25"
                  xlarge: "25"
                slots:
                  default:
                    - component: widget:Card_room_12
                      config:
                        text_header: Eingangsbereich
                        iconimage: myfrontdoor
                        door_lock: SmartLock_Action
                        door_state: SmartLock_DoorSensorState
                        boiler_temp: Boiler_Temperatur
                        status: LichterEingang
                        page: page_c498bc9132
              - component: oh-grid-col
                config:
                  width: "100"
                  small: "50"
                  medium: "33"
                  large: "25"
                  xlarge: "25"
                slots:
                  default:
                    - component: widget:Card_room_12
                      config:
                        text_header: Bad/WC
                        iconimage: bathroom
                        status: LichterBadWC
                        temp: ShellyHTSHHT1_Temperatur
                        humidity: ShellyHTSHHT1_Luftfeuchtigkeit
                        page: page_b986cb7442
              - component: oh-grid-col
                config:
                  width: "100"
                  small: "50"
                  medium: "33"
                  large: "25"
                  xlarge: "25"
                slots:
                  default:
                    - component: widget:Card_room_12
                      config:
                        text_header: Hobbyraum / Keller
                        heating: SHELLY_Heizung_Hobbyraum
                        temp: SHELLY_Temperatur_Hobbyraum_correct
                        settemp: SHELLY_Soll_Temperatur_Hobbyraum
                        humidity: SHELLY_Humidity_Hobbyraum
                        iconimage: myhobbyroom
                        status: LichterHobbyraum
                        page: ZimmerHobby
                        illuminance: LichtsensorUG_Beleuchtungsstarke
              - component: oh-grid-col
                config:
                  width: "100"
                  small: "50"
                  medium: "33"
                  large: "25"
                  xlarge: "25"
                slots:
                  default:
                    - component: widget:Card_room_12
                      config:
                        text_header: Waschküche
                        iconimage: mylaundry
                        temp: SensorWaschkuche_Sensortemperature
                        humidity: SensorWaschkuche_Sensorrelativehumidity
                        page: page_9a9ffe53b4
masonry: []

Settings popup:


I think this is really custom, and YAML Code is not interesting (there are only oh-lis-cards used)

Room page:

config:
  label: Zimmer Wohnzimmer
  sidebar: true
blocks:
  - component: oh-block
    config: {}
    slots:
      default:
        - component: oh-grid-row
          config: {}
          slots:
            default:
              - component: oh-grid-col
                config:
                  width: "50"
                slots:
                  default:
                    - component: widget:Cell_Light_Card_1
                      config:
                        title: Licht
                        header: Wohnen
                        icon: lightbulb
                        item_schalter: LichtWohnzimmer_Schalter
                        item_brightness: LichtWohnzimmer_Helligkeit
              - component: oh-grid-col
                config:
                  width: "50"
                slots:
                  default:
                    - component: widget:Cell_Light_Card_1
                      config:
                        title: Licht
                        header: Essen
                        icon: lightbulb
                        item_schalter: LichtEssen_Schalter
                        item_brightness: LichtEssen_Helligkeit
              - component: oh-grid-col
                config:
                  width: "50"
                slots:
                  default:
                    - component: widget:Cell_Light_Card_1
                      config:
                        title: Licht
                        header: Gang
                        icon: lightbulb
                        item_schalter: LichtWohnzimmerGang_Schalter
                        item_brightness: LichtWohnzimmerGang_Helligkeit
              - component: oh-grid-col
                config:
                  width: "50"
                slots:
                  default:
                    - component: widget:Cell_Light_Card_1
                      config:
                        title: Licht
                        header: Küche
                        icon: lightbulb
                        item_schalter: LichtKuche_Schalter
                        item_brightness: LichtKuche_Helligkeit
  - component: oh-block
    config: {}
    slots:
      default:
        - component: oh-grid-row
          config: {}
          slots:
            default:
              - component: oh-grid-col
                config:
                  width: "100"
                  xlarge: "50"
                  large: "50"
                slots:
                  default:
                    - component: widget:Cell_Temp_Card_1
                      config:
                        title: Temperatur
                        icon: thermometer
                        temp_item: SHELLY_Temperatur_Wohnung_correct
                        set_temp_item: SHELLY_Soll_Temperatur_Wohnung
                        humidity_item: SHELLY_Humidity_Wohnung
                        heating_item: SHELLY_Heizung_Wohnung
              - component: oh-grid-col
                config:
                  width: "100"
                  xlarge: "50"
                  large: "50"
                  medium: "100"
                  small: "100"
                  xsmall: "100"
                slots:
                  default:
                    - component: widget:Cell_Speaker_Card_1
                      config:
                        title: Sonos
                        header: Playbar
                        icon: speaker_3
                        item: SonosWohnzimmer_Fernbedienung
                        item_volume: SonosWohnzimmer_Lautstarke
                        item_cover: SonosWohnzimmer_Coverbild
              - component: oh-grid-col
                config:
                  width: "50"
                  xlarge: "33"
                  large: "33"
                slots:
                  default:
                    - component: widget:Cell_Shutter_Card_1
                      config:
                        title: Storen
                        header: Essen 1
                        icon: arrow_up_arrow_down
                        item: StorenEssen1_Steuerung0offen100geschlossen
              - component: oh-grid-col
                config:
                  width: "50"
                  xlarge: "33"
                  large: "33"
                slots:
                  default:
                    - component: widget:Cell_Shutter_Card_1
                      config:
                        title: Storen
                        header: Essen 2
                        icon: arrow_up_arrow_down
                        item: StorenEssen2_Steuerung0offen100geschlossen
              - component: oh-grid-col
                config:
                  width: "50"
                  xlarge: "33"
                  large: "33"
                slots:
                  default:
                    - component: widget:Cell_Shutter_Card_1
                      config:
                        title: Storen
                        header: Wohnen
                        icon: arrow_up_arrow_down
                        item: StorenWohnen_Steuerung0offen100geschlossen
masonry: null

Another room page:

Weather data chart:

config:
  chartType: day
  label: WetterChart
slots:
  grid:
    - component: oh-chart-grid
      config:
        includeLabels: true
        height: 35%
        top: 50px
    - component: oh-chart-grid
      config:
        includeLabels: true
        height: 35%
        bottom: 50px
        show: false
  xAxis:
    - component: oh-time-axis
      config:
        gridIndex: 0
    - component: oh-time-axis
      config:
        gridIndex: 1
    - component: oh-category-axis
      config:
        gridIndex: 1
        categoryType: day
        weekdayFormat: default
        monthFormat: default
        show: false
  yAxis:
    - component: oh-value-axis
      config:
        name: °C
        scale: true
        gridIndex: 0
    - component: oh-value-axis
      config:
        name: "%"
        scale: true
        gridIndex: 0
    - component: oh-value-axis
      config:
        name: mm
        scale: true
        gridIndex: 1
    - component: oh-value-axis
      config:
        name: km/h
        scale: true
        gridIndex: 1
  series:
    - component: oh-time-series
      config:
        name: Aussentemperatur
        gridIndex: 0
        xAxisIndex: 0
        yAxisIndex: 0
        type: line
        item: Wetterstation_Aussentemperatur
        smooth: true
    - component: oh-time-series
      config:
        name: Luftfeuchtigkeit
        gridIndex: 0
        xAxisIndex: 0
        yAxisIndex: 1
        type: line
        item: Wetterstation_Luftfeuchtigkeit
        smooth: true
    - component: oh-time-series
      config:
        name: Regen letzte Stunde
        gridIndex: 1
        xAxisIndex: 1
        yAxisIndex: 2
        type: line
        item: Wetterstation_RegenletzteStunde
        smooth: true
    - component: oh-time-series
      config:
        name: Wind Durchschnitt
        gridIndex: 1
        xAxisIndex: 1
        yAxisIndex: 3
        type: line
        item: Wetterstation_WindDurchschnitt
        aggregationFunction: average
        dimension1: hour
        smooth: true
        lineStyle:
          color: rgba(70, 123, 168,0.2)
        markPoint:
          itemStyle:
            color: rgba(70, 123, 168,1)
          data:
            - type: max
              name: Max
    - component: oh-aggregate-series
      config:
        name: Wind Durchschnitt
        gridIndex: 1
        xAxisIndex: 2
        yAxisIndex: 3
        type: line
        item: Wetterstation_WindDurchschnitt
        aggregationFunction: average
        dimension1: hour
        smooth: true
  tooltip:
    - component: oh-chart-tooltip
      config:
        show: true
        orient: vertical
        trigger: axis
  legend:
    - component: oh-chart-legend
      config:
        bottom: 3
        type: scroll
  dataZoom:
    - component: oh-chart-datazoom
      config:
        type: inside

I have treated myself to an iPad wall mount, which now hangs on the wall in the living room.

The design is responsive and designed for dark mode:

44 Likes

HI Man,
it looks nice your :slight_smile:
could u please show me your code for the multi information tab :wink:
like for “Aussen” with all the temperature and as well for the “pool” tab please :).

/bg nick

1 Like

Hi Marcus, sure, no problem. Just finished with the menu structure for my UI and saving the back-up text files now :smiley: Will try to post the YAML tonight.

1 Like