Seite 1 von 2

erste Berühung mit OH3 und der neuen Overview

Verfasst: 29. Jun 2021 14:19
von Kahzia
Hey zusammen,

ich bin seit Jahren glücklicher Nutzer von OH2 und habe hier so ziemlich alles per code umgesetzt.
Das neue Design finde ich ganz gut, auch dass man jetzt alles "easy" verknpüfen kann. (nahezu ohne Fehler)

Leider fühle ich mich trotz großer Anleitungen von OH zum Thema Pages komplett verloren.
Aktuell drehe ich mich einfach nur noch im Kreis und komme nicht so wirklich weiter oder finde nicht die Information die ich bräuchte in den gängigen Foren.

Daher einfach mal in die Runde gefragt.

Grundsätzlich mein Verständnis:
Ich definiere mit dem neuen Model zuerst meinen -- OG oder EG -> Raum -> Gerät -> Messwerte.
Soweit so gut, die passenden Widgets werden automatisch erstellt -> top.

Natürlich bedarf es noch einiger Änderungen in sachen Namen etc aber das ist kein Problem.

Jetzt kommt die erste Frage:
Das Tutorial von OH -> https://www.openhab.org/docs/tutorial/model.html
-> Textstelle: Überschrift: Building the Locations Model
Ist die Rede von "more accurate semantic class" "Here we use "GroundFloor"".

Ich hatte jetzt gedacht, dass man hier das Gerät einträgt und nicht zusätzlich noch den Raum oder ?
Da fehlt mir der Zusammenhang, wieso das so gemacht wird.

Vielleicht kann mich ja einer aufklären.


Mein zweites Problem sind die "Pages".
Ich bekomme einfach keine angezeigt.
Bild
Ist das richtig so ? obwohl ich 2 Pages definiert habe ?

Mein Hauptproblem ist allerdings, dass die Overview Seite immer leer bleibt, obwohl ich hier verschiedene Test Widgets (mit Funktion) bereits angelegt habe.
Bild
Bild

Das sind natürlich alles basic Fragen, ich hoffe dennoch das sich jemand erbarmt und mich abholt :)
Der Umstieg bringt viele neue Möglichkleiten mit sich, die erstmal zu erkunden und vertstehen sind.

als letzten Nachtrag, es macht keinen Sinn ins HABpanel noch zu investieren oder ?
Ich kam Jahre zurecht ohne ein Tablet an der Wand, die Dames des Hauses möchte das aber in Zukunft haben... daher wäre die Umsetzung wie oben genannt, ich meine das HABpanel wird irgendwann abgeschalten oder ?

VG
Christian

Re: erste Berühung mit OH3 und der neuen Overview

Verfasst: 1. Jul 2021 07:13
von Quautiputzli
Hallo,

zum ersten Punkt.
Ich denke da gehört schon der z.B. der Raum ausgewählt, mir ist das bei mir noch gar nicht so richtig aufgefallen. Ich habe am Anfang von OH3 meine Item Liste aus dem Textfile eingelesen, und bei den meisten Räumen steht an dieser Stelle auch der richtige Raum, bei manchen einfach nur "Room"

zum zweiten Punkt:
Ja, das passt so. "Home Page" und "Overview" sind standardmaßig vorhanden, und erscheinen nicht an der Seite.

zum dritten Punkt:
Das ist allerdings seltsam. Ich muss aber sagen, dass es bei mir etwas anders aussieht. Bei mir steht da ganz oben "Add Block" und es ist nicht so in einem grauen Kasten
Bild_2021-07-01_071119.png
Welche Version hast du?
Hast du alles gespeichert?
Was ist wenn du in den "Run Mode" schaltest.

Edit:
Du hast aber nicht die Page "overview" nochmal selbst erstellt oder. Ich denke die ist schon von Anfang an da.

Re: erste Berühung mit OH3 und der neuen Overview

Verfasst: 1. Jul 2021 10:18
von Kahzia
Hi,

sehr interessant mit der Raumbezeichnung :) dann stimmt das wohl alles so.

das mit dem grauen Kasten kann ich erklären, ich habe dort die feste Variante ausgewählt (fürs Tablet) -> sprich die Größe des Feldes ist vorgegeben von mir.
Tatsächlich hab ich rausgefunden, warum mir nie etwas angezeigt wurde an der Seite... der Button "Show on sidebar" hatte ich nicht damit in Zusammenhang gebracht.

Ziemlich tricky bzw Neuland...

Ich habe im Forum ein gutes "Layout" gefunden, bzw vorgefertige Widgets mit dem rumprobiert werden konnte, dass hat viel geholfen.

Aktuell hänge ich daran, dass mein Widget nur "kurzzeitig" Werte anzeigt.

Verhalten:
Das Widget bildet die Luftfeuchtigkeit ab, das Item welches gelinked ist funktioniert (aktualisiert auch bei Bedarf) geprüft im Log und es ist auch schon seit Jahren auf der BasicUI in Gebrauch.

Komischerweise sobald ich das Item definiere, wird die Luftfeuchtigkeit für Zeit "X" auf dem Widget angezeigt.
Irgendwann verschwindet diese.. Abhilfe bringt nur das Item zu switchen auf einen anderen Raum oder ähnlich... ich verstehe nicht so ganz was da passiert.
Im Log steht natürlich nichts, da dass Item einwandfrei funktioniert...

Siehe Bilder -> neben dem Tropfen sollte normal die Feuchtigkeit in % dauerhaft ausgegeben werden.

Bild
Bild
Widget YAML

Code: Alles auswählen

component: widget:Card_room_12
config:
  text_header: Büro
  temp: ThermostatThermostatBuro_Temperatur
  settemp: ThermostatThermostatBuro_Solltemperatur
  humidity: BuroSensorLUMI_Humidity
  page: Test
  iconimage: Test
Code fürs Widget

Code: Alles auswählen

uid: Card_room_12
tags: []
props:
  parameters:
    - label: Header
      name: text_header
      required: false
      type: TEXT
    - description: icon name without ".png", located in static/icons/ folder
      label: Icon
      name: iconimage
      required: false
      type: TEXT
    - description: HEX or rgba
      label: Backgroundcolor
      name: bgcolor
      required: false
      type: TEXT
    - description: Page which will be opened as popup
      label: Page ID
      name: page
      required: false
    - context: item
      description: select group for status lights
      label: Item
      name: status
      required: false
      type: TEXT
    - context: item
      description: select item for heating
      label: Item
      name: heating
      required: false
      type: TEXT
    - context: item
      description: select item for temperature
      label: Item
      name: temp
      required: false
      type: TEXT
    - context: item
      description: select item for set temperature
      label: Item
      name: settemp
      required: false
      type: TEXT
    - context: item
      description: select item for humidity
      label: Item
      name: humidity
      required: false
      type: TEXT
    - context: item
      description: select item for illuminance
      label: Item
      name: illuminance
      required: false
      type: TEXT
    - context: item
      description: select item for door state(s)
      label: Item
      name: door_state
      required: false
      type: TEXT
    - context: item
      description: select item for door lock(s)
      label: Item
      name: door_lock
      required: false
      type: TEXT
    - context: item
      description: select item for blinds group (SUM)
      label: Item
      name: blinds_closed
      required: false
      type: TEXT
    - context: item
      description: select item for speaker(s)
      label: Item
      name: speakers
      required: false
      type: TEXT
    - context: item
      description: select item for windows(s)
      label: Item
      name: windows
      required: false
      type: TEXT
    - context: item
      description: select item for numbers of windows
      label: Item
      name: windows_numbers
      required: false
      type: TEXT
    - context: item
      description: select item for boiler temp
      label: Item
      name: boiler_temp
      required: false
      type: TEXT
timestamp: Jun 30, 2021, 7:18:12 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: 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.text_header ? props.text_header : '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.status ? true : false"
              text: "=(Number(items[props.status].state) > 0) ? items[props.status].state : ''"
              iconColor: "=themeOptions.dark === 'dark' ? 'white' : 'black'"
              iconF7: "=(Number(items[props.status].state) > 0) ? 'lightbulb' : 'lightbulb_slash'"
              iconSize: 18
          - component: f7-chip
            config:
              style:
                --f7-chip-bg-color: rgba(255, 255, 255, 0)
              visible: =items[props.heating].state === 'ON'
              text: "=items[props.heating].state === 'ON' ? '' : ''"
              iconColor: "=themeOptions.dark === 'dark' ? 'white' : 'black'"
              iconF7: flame
              iconSize: 18
          - component: f7-chip
            config:
              style:
                --f7-chip-bg-color: rgba(255, 255, 255, 0)
              visible: "=props.door_state ? true : false"
              text: "=items[props.door_state].state === 'ON' ? '' : ''"
            slots:
              media:
                - component: oh-icon
                  config:
                    icon: "=items[props.door_state].state === 'ON' ? 'door-open' : 'door-closed'"
                    style:
                      filter: "='brightness(' + (themeOptions.dark === 'dark' ? '1' : '0.4') + ')'"
                      height: 18px
          - component: f7-chip
            config:
              style:
                --f7-chip-bg-color: rgba(255, 255, 255, 0)
              visible: "=items[props.windows].state === 'OPEN' ? true : false"
              text: "=items[props.windows_numbers].state > 0 ? items[props.windows_numbers].state : ''"
            slots:
              media:
                - component: oh-icon
                  config:
                    icon: window-open
                    style:
                      filter: "='brightness(' + (themeOptions.dark === 'dark' ? '1' : '0.4') + ')'"
                      height: 18px
          - 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 === 'ON' ? '' : ''"
              iconColor: "=themeOptions.dark === 'dark' ? 'white' : 'black'"
              iconF7: "=items[props.door_lock].state === 'ON' ? 'lock_open' : 'lock'"
              iconSize: 18
          - component: f7-chip
            config:
              style:
                --f7-chip-bg-color: rgba(255, 255, 255, 0)
              visible: "=(Number(Math.floor(items[props.blinds_closed].state)) > 0) ? true : false"
              text: "=(Number(items[props.blinds_closed].state) === 0) ? '' : Math.floor(items[props.blinds_closed].state)"
            slots:
              media:
                - component: oh-icon
                  config:
                    icon: "=(Number(items[props.blinds_closed].state) === 0) ? 'cinemascreen-30' : 'cinemascreen-100'"
                    style:
                      filter: "='brightness(' + (themeOptions.dark === 'dark' ? '100' : '0.3') + ')'"
                      height: 18px
          - component: f7-chip
            config:
              style:
                --f7-chip-bg-color: rgba(255, 255, 255, 0)
              visible: "=items[props.speakers].state === 'PLAY' ? true : false"
              iconColor: "=themeOptions.dark === 'dark' ? 'white' : 'black'"
              iconF7: "=items[props.speakers].state === 'PLAY' ? 'speaker_2' : 'speaker'"
              iconSize: 18
          - component: f7-chip
            config:
              style:
                --f7-chip-bg-color: rgba(255, 255, 255, 0)
              visible: "=props.illuminance ? true : false"
              text: =items[props.illuminance].displayState
              iconColor: "=themeOptions.dark === 'dark' ? 'white' : 'black'"
              iconF7: sun_min
              iconSize: 18
    - 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].state) +  (props.settemp ? ' (' + items[props.settemp].state + ')' : '')"
              iconColor: "=themeOptions.dark === 'dark' ? 'white' : 'black'"
              iconF7: thermometer
              iconSize: 18
          - component: f7-chip
            config:
              style:
                --f7-chip-bg-color: rgba(255, 255, 255, 0)
              visible: "=props.humidity ? true : false"
              text: =items[props.humidity].displayState
              iconColor: "=themeOptions.dark === 'dark' ? 'white' : 'black'"
              iconF7: drop
              iconSize: 18
          - component: f7-chip
            config:
              style:
                --f7-chip-bg-color: rgba(255, 255, 255, 0)
              visible: "=props.boiler_temp ? true : false"
              text: =items[props.boiler_temp].state
            slots:
              media:
                - component: oh-icon
                  config:
                    icon: waterheater2
                    style:
                      filter: "='invert(' + (themeOptions.dark === 'dark' ? '1' : '0') + ')'"
                      height: 18px
    - 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: popup
        actionModal: ='page:' + props.page
        style:
          position: absolute
          left: 0px
          top: 0px
          height: 110px
          width: 100%

Re: erste Berühung mit OH3 und der neuen Overview

Verfasst: 1. Jul 2021 12:24
von Quautiputzli
Hab dieses Widget mal bei mir ausprobiert, nur mit Temp und Feuchte, bei mir wird es schonmal angezeitgt:
Bild_2021-07-01_121748.png
Versuche mal in dieser Zeile die Konfiguration aus dem Widget zu nehmen, da wird es ja unsichtbar geschaltet, ich weiß aber nicht, ob das auch für den Tropfen gelten müsste:

Code: Alles auswählen

visible: "=props.humidity ? true : false"

Re: erste Berühung mit OH3 und der neuen Overview

Verfasst: 1. Jul 2021 12:45
von Kahzia
Mh, das hat leider nicht funktioniert.
Damit sollte ja auch eigentlich nur der "Tropfen" ausgeschalten / eingeschalten werden wenn ich mich nicht täusche.
Entferne ich die Spalte, ist der Tropfen natürlich dauerhaft da (logisch).

Aber die Prozentzahl ist nur temporär vorhanden. -> Tropfen bleibt nachdem die Prozentzahl sporadisch verschwindet bestehen.
Das ist ziemlich verwirrend, da dass Item ja fest hinterlegt ist und auch weitehrin geupdated wird um die Prozentzahl anzuzeigen.

ist hier evtl etwsa falsch ?

Code: Alles auswählen

text: =items[props.humidity].displayState

Re: erste Berühung mit OH3 und der neuen Overview

Verfasst: 1. Jul 2021 12:58
von Quautiputzli
du kannst anstatt "displayState" mal einfach nur "state" probieren.

In der Tat etwas kurious.

Re: erste Berühung mit OH3 und der neuen Overview

Verfasst: 1. Jul 2021 16:47
von Kahzia
ich nehm es einfach erstmal hin, ab und zu funktioniert es ja.
Aktuell versuche ich auch einfach mehr zu "verstehen" und betreibe gerade ein wenig try and error.

Momentan beschäftige ich mich mit Charts die im Widget angezeigt werden.
Ziel:
Bild

Mir wird der Graph im Hintergrund leider nicht angezeigt.
Bild
Ich weiß nicht genau wie die Funktion aktuell heißt, wenn ich das Widget anklicke komme ich zum "Hauptchart?" das funktioniert schonmal.
Bild

Daher hätte ich gedacht, dass der Graph im Hintergrund von der Hauptübersicht auch funktionieren müsste.
Code zum Widget:

Code: Alles auswählen

uid: Cell_Temp_Card_1
tags: []
props:
  parameters:
    - description: Small title on top of the card
      label: Title
      name: title
      required: false
      type: TEXT
    - description: Icon on top of the card (only f7 icons (without f7:))
      label: Icon
      name: icon
      required: false
      type: TEXT
    - description: in rgba() or HEX or empty
      label: Background Color
      name: bgcolor
      required: false
      type: TEXT
    - context: item
      label: Current Temperature
      name: temp_item
      required: false
      type: TEXT
    - context: item
      label: Set Temperature
      name: set_temp_item
      required: false
      type: TEXT
    - context: item
      label: Current Humidity
      name: humidity_item
      required: false
      type: TEXT
    - context: item
      description: on/off item
      label: Heating control item
      name: heating_item
      required: false
      type: TEXT
  parameterGroups: []
timestamp: Jul 1, 2021, 4:39:28 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: 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
              size: 18
              style:
                margin-right: 10px
              visible: "=props.icon ? true : false"
          - component: Label
            config:
              text: "=props.title ? props.title : ''"
              style:
                font-size: 12px
                margin-top: 0px
    - component: f7-block
      config:
        style:
          position: absolute
          bottom: -20px
          left: 16px
          flex-direction: row
      slots:
        default:
          - component: Label
            config:
              text: "=items[props.temp_item].displayState ? items[props.temp_item].displayState : items[props.temp_item].state"
              style:
                font-size: 22px
                font-weight: 400
                margin-left: 0px
                margin-top: 0px
    - component: f7-block
      config:
        style:
          position: absolute
          bottom: -40px
          left: 12px
          flex-direction: row
          display: flex
      slots:
        default:
          - component: f7-icon
            config:
              f7: drop
              size: 18
              visible: "=props.humidity_item ? true : false"
          - component: Label
            config:
              visible: "=props.humidity_item ? true : false"
              text: =items[props.humidity_item].displayState
              style:
                font-size: 12px
                margin-left: 5px
                margin-top: 0px
    - component: f7-block
      config:
        style:
          position: absolute
          bottom: -63px
          left: 12px
          flex-direction: row
          display: flex
      slots:
        default:
          - component: f7-icon
            config:
              visible: "=props.heating_item ? true : false"
              f7: flame
              size: 18
          - component: Label
            config:
              visible: "=props.heating_item ? true : false"
              text: =items[props.heating_item].state
              style:
                font-size: 12px
                margin-left: 5px
                margin-top: 0px
    - component: oh-button
      config:
        visible: "=props.set_temp_item ? true : false"
        iconColor: red
        iconF7: arrow_up_circle
        iconSize: 35
        action: command
        actionItem: =props.set_temp_item
        actionCommand: =Number(items[props.set_temp_item].state.split(' ')[0]) + 0.5
        style:
          position: absolute
          top: 12px
          right: 10px
          height: 35px
          background: transparent
    - component: oh-button
      config:
        visible: "=props.set_temp_item ? true : false"
        iconColor: red
        iconF7: arrow_down_circle
        iconSize: 35
        action: command
        actionItem: =props.set_temp_item
        actionCommand: =Number(items[props.set_temp_item].state.split(' ')[0]) - 0.5
        style:
          position: absolute
          top: 74px
          right: 10px
          height: 35px
          background: transparent
    - component: Label
      config:
        visible: "=props.set_temp_item ? true : false"
        text: =items[props.set_temp_item].state
        style:
          font-size: 12px
          position: absolute
          right: 15px
          top: 50px
    - component: f7-block
      config:
        style:
          position: absolute
          top: 15px
          left: 15px
          width: "=props.set_temp_item ? 'calc(100% - 55px)' : '100%' "
          height: 120px
      slots:
        default:
          - component: oh-trend
            config:
              trendItem: =props.temp_item
              trendGradient:
                - "#aa2b1d"
                - "#cc561e"
                - "#ef8d32"
                - "#beca5c"
              style:
                --f7-theme-color-bg-color: transparent
                background: var(--f7-theme-color-bg-color)
                filter: opacity(30%)
                position: absolute
                width: 100%
                height: 100%
                top: 0px
                left: 0px
                z-index: 1
    - component: oh-link
      config:
        actionAnalyzerChartType: day
        action: analyzer
        actionAnalyzerItems: "=props.set_temp_item ? [props.temp_item, props.humidity_item, props.set_temp_item] : (props.humidity_item ? [props.temp_item, props.humidity_item] : [props.temp_item])"
        actionAnalyzerCoordSystem: time
        style:
          position: absolute
          left: 0px
          top: 0px
          height: 120px
          width: "=props.set_temp_item ? 'calc(100% - 55px)' : '100%' "
Das Item wird so wie ich es sehe, korrekt zugewiesen.
Da alles andere funktioniert, müsste das eigentlich auch funktioneren...
Hier bin ich zumindest gerade am verzweifeln...

vielleicht hast du ja eine Idee ?
Ich wäre für jeden Tipp dankbar :)

Re: erste Berühung mit OH3 und der neuen Overview

Verfasst: 1. Jul 2021 18:41
von Quautiputzli
Auch dieses Widget habe ich schnell ausprobiert:
Bild_2021-07-01_184033.png
Bei dir ist allerdings selbst in der Chart-Ansicht nicht viel zu sehen. Lass das mal eine Weile laufen und mit Daten füllen, ich denke das kommt noch.

Re: erste Berühung mit OH3 und der neuen Overview

Verfasst: 1. Jul 2021 21:21
von Kahzia
Tatsächlich lag es daran, danke dir.
Bevor ich einen neue Thread erstelle, frag ich einfach nochmal hier nach.

Frage 1:
Wie kann ich ein Icon benutzen, welches nicht F7 ist ?
per Default nutzen alle wohl static/"xyz.png".
Das funktioniert bei mir irgendwie nicht...
Bild
Ich habe im HTML Ordner den Ordner Static erstellt.
Die Readme Datei ist eigentlich auch hilfreich, ich kann das Icon unter der IP/static/iconname aufrufen... aber wieso kann das Widget das Bild nicht darstellen ? es ist ein normales Glühlampen Icon

Code: Alles auswählen

component: widget:Cell_Light_Color_Card_2
config:
  title: Licht
  header: Stehlampe
  iconimage: idea
  item_schalter: TRADFRIGluehlampeWhz_Farbe
  item_color: TRADFRIGluehlampeWhz_Farbe
Code vom Widget

Code: Alles auswählen

uid: Cell_Light_Color_Card_2
tags: []
props:
  parameters:
    - description: Small title on top of the card
      label: Title
      name: title
      required: false
      type: TEXT
    - description: Header big sized
      label: Header
      name: header
      required: false
      type: TEXT
    - description: icon name without ".png", located in static/icons/ folder
      label: Icon
      name: iconimage
      required: false
      type: TEXT
    - description: rgba or HEX
      label: Background Color
      name: bgcolor
      required: false
      type: TEXT
    - context: item
      description: Item to control on/off
      label: Item ON OFF
      name: item_schalter
      required: false
      type: TEXT
    - context: item
      description: Item to control color
      label: Item light color
      name: item_color
      required: false
      type: TEXT
  parameterGroups: []
timestamp: Jul 1, 2021, 7:45:18 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: 165px
    margin-left: 5px
    margin-right: 5px
slots:
  default:
    - component: f7-card-content
      config:
        class:
          - display-flex
          - flex-direction-column
          - justify-content-flex-start
          - align-items-left
        style:
          --f7-color-picker-slider-size: 18px
          --f7-color-picker-slider-knob-size: 20px
      slots:
        default:
          - component: f7-row
            config:
              style:
                position: absolute
                top: 10px
                left: 40px
                flex-direction: row
                display: flex
            slots:
              default:
                - component: Label
                  config:
                    text: "=props.title ? props.title : ''"
                    style:
                      font-size: 12px
                      margin-top: 0px
    - component: f7-block
      config:
        class:
          - no-padding
        style:
          position: absolute
          top: 40px
          left: 10px
          flex-direction: row
      slots:
        default:
          - component: Label
            config:
              text: "=props.header ? props.header : 'Set Props'"
              style:
                font-size: 17px
                font-weight: 600
                margin-left: 0px
                margin-top: 0px
    - component: f7-block
      config:
        class:
          - no-padding
        style:
          position: absolute
          top: 70px
          left: 10px
          flex-direction: row
          width: calc(100% - 100px)
          margin-top: 7px
          --f7-range-bar-size: 12px
          --f7-range-bar-border-radius: 10px
          --f7-range-knob-size: 20px
          --f7-range-bar-active-bg-color: transparent
          --f7-range-bar-bg-color: linear-gradient(to right, rgba(246,158,81,0.8), rgba(246,158,81,0))
          --f7-range-knob-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3)
          --f7-range-label-text-color: black
          --f7-color-picker-slider-size: 12px
          --f7-color-picker-slider-knob-size: 20px
          z-index: 99 !important
      slots:
        default:
          - component: oh-colorpicker
            config:
              color: red
              label: true
              item: =props.item_color
              modules:
                - hsb-sliders
    - component: oh-toggle
      config:
        item: =props.item_color
        style:
          position: absolute
          top: 15px
          right: 90px
    - component: oh-button
      config:
        iconColor: red
        iconF7: app_fill
        iconSize: 34
        action: command
        actionItem: =props.item_color
        actionCommand: 0,100,100
        style:
          position: absolute
          top: 10px
          right: 35px
          height: 35px
          background: transparent
    - component: oh-button
      config:
        iconColor: deeporange
        iconF7: app_fill
        iconSize: 34
        action: command
        actionItem: =props.item_color
        actionCommand: 15,100,100
        style:
          position: absolute
          top: 45px
          right: 35px
          height: 34px
          background: transparent
    - component: oh-button
      config:
        iconColor: orange
        iconF7: app_fill
        iconSize: 34
        action: command
        actionItem: =props.item_color
        actionCommand: 30,100,100
        style:
          position: absolute
          top: 80px
          right: 35px
          height: 35px
          background: transparent
    - component: oh-button
      config:
        iconColor: yellow
        iconF7: app_fill
        iconSize: 34
        action: command
        actionItem: =props.item_color
        actionCommand: 60,100,100
        style:
          position: absolute
          top: 115px
          right: 35px
          height: 35px
          background: transparent
    - component: oh-button
      config:
        iconColor: purple
        iconF7: app_fill
        iconSize: 34
        action: command
        actionItem: =props.item_color
        actionCommand: 300,100,100
        style:
          position: absolute
          top: 10px
          right: 0px
          height: 33px
          background: transparent
    - component: oh-button
      config:
        iconColor: blue
        iconF7: app_fill
        iconSize: 34
        action: command
        actionItem: =props.item_color
        actionCommand: 240,100,100
        style:
          position: absolute
          top: 45px
          right: 0px
          height: 33px
          background: transparent
    - component: oh-button
      config:
        iconColor: lightblue
        iconF7: app_fill
        iconSize: 34
        action: command
        actionItem: =props.item_color
        actionCommand: 180,100,100
        style:
          position: absolute
          top: 80px
          right: 0px
          height: 33px
          background: transparent
    - component: oh-button
      config:
        iconColor: green
        iconF7: app_fill
        iconSize: 34
        action: command
        actionItem: =props.item_color
        actionCommand: 120,100,100
        style:
          position: absolute
          top: 115px
          right: 0px
          height: 33px
          background: transparent
    - component: oh-image
      config:
        url: ='static/icons/' + props.iconimage + '.png'
        style:
          position: absolute
          left: 10px
          top: 10px
          height: 25px
          opacity: 0.7
        visible: "=props.iconimage ? true : false"
Bild



Frage 2:
Wie erhalte ich diese Tabs ?
Bild
Der Aufbau meines Model schaut so aus:
Bild
Bild
Etage -> Raum -> Sensor -> Werte

Ich bin nach der Anleitung von OH vorgegangen -> https://www.openhab.org/docs/tutorial/a ... rview.html
Irgendwo mache ich einen Fehler oder verstehe das Konzept nicht ganz.


Frage 3: aufbauend auf Frage 2
Ich möchte die Gruppe für meine Rolläden steuern.
In der Gruppe Rolladen befinden sich beiden Rolläden -> wieso können diese darüber nicht gesteuert werden ?
Abhilfe ist aktuell, dass ich ein Alibi Item angelegt habe, welches beide Channel verlinkt hat -> wäre erstmal i.O sieht mir aber falsch aus.

Bild

Falls du mir hier noch unter die Arme greifen würdest, wäre ich sehr dankbar :)

Re: erste Berühung mit OH3 und der neuen Overview

Verfasst: 2. Jul 2021 07:11
von Quautiputzli
Hi,

Frage 1 kann ich leider nicht beantworten, für mich sieht das alles richtig aus. Ich kann es mal bei mir ausprobieren, wenn ich mal zuhause bin. Ich denke ich hab grad kein *.png in dem Ordner. Mit *.jpeg funktioniert es jedenfalls nicht.

Zu Frage 2:
Wenn du nun noch Points anlegest, die direkt unter dem Raum hängen, erscheint diese Leiste.
Bild_2021-07-02_070935.png
Bild_2021-07-02_071002.png
Bild_2021-07-02_071105.png