Generelle Fragen zu Openhab 3 Widgets

[guinnes]

Hallo
Ich habe zu Openhab 3 Widgets einige Fragen :

• 1. Kann man in einem Widget Javascript hinterlegen ? ( wenn ja, wie ?)

• 2. Kann man in einem Widget lokale Variablen definieren ? ( wenn ja, wie ?)

Eine programmierung ohne lokale Variablen hab ich ansonsten noch nicht gesehen

• 3. Wo und wie kann man diese seltsamen "vars" definieren ?

Ich habe in sehr vielen Custom-Widges vars gesehen, aber in keinem wurde eins angelegt

• 4. wobei bzw. wofür machen diese vars Sinn ?

Ich habe in den besagten Widgets keinen Sinn für die Verwendung dieser vars gefunden

Danke im Voraus

[peter-pan]

Zu 1: - Keine Ahnung

Zu 2 u. 3: So genau habe ich das noch nicht verstanden.
Es gibt wohl irgendwelche CSS-Standard-Variablen. Und auch Hinweise in der OH-Doku. Aber eigentlich sind das ja mehr oder weniger Konstanten. Man kann da aber sicherlich auch Berechnungen, etc. hinein stellen.

Hier noch ein Custom-Widget von mir, in dem ich mal versucht habe mit diesen Variablen zu arbeiten:

Code: Alles auswählen

uid: sonos_equalizer_v1
tags:
  - equalizer
  - in progress
  - peter pan
props:
  parameters:
    - default: "300"
      description: Breite des Widgets in px (default:300)
      label: Widget Breite
      name: size
      required: false
  parameterGroups: []
timestamp: Sep 20, 2022, 11:28:38 PM
component: f7-card
config:
  border: no
  style:
    --cardCorners: 20px
    --cardHigh: auto
    background: '=(props.background1) ? props.background1 : "linear-gradient(122deg, rgba(34,193,195,1) 0%, rgba(253,187,45,1) 100%)"'
    border-radius: '=(props.corners) ? props.corners : "var(--cardCorners)"'
    font-size: 30px
    height: auto
    margin: 5px
    noShadow: true
    padding: 10px
    width: '=(props.size) ? (props.size) * 1.0 + "px" : "300px"'
  title: Equalizer
slots:
  default:
    - component: f7-card
      config:
        border: no
        style:
          background: '=(props.background1) ? props.background1 : "radial-gradient(circle, lightgreen, yellow, lightblue 20%, #6fa8dc 60% ,#ffe74c 95%)"'
          border-radius: '=(props.corners) ? props.corners : "var(--cardCorners)"'
          height: var(--cardHigh)
        title: Arbeitszimmer
      slots:
        default:
          - component: oh-list
            config:
              mediaList: true
            slots:
              default:
                - component: oh-stepper-item
                  config:
                    autorepeat: true
                    autorepeatDynamic: true
                    color: blue
                    iconColor: red
                    item: AZ_Sonos_Treble
                    max: 30
                    min: -30
                    raised: true
                    round: true
                    step: 1
                    title: Treble
                - component: oh-stepper-item
                  config:
                    autorepeat: true
                    autorepeatDynamic: true
                    color: blue
                    iconColor: red
                    item: AZ_Sonos_Bass
                    max: 30
                    min: -30
                    raised: true
                    round: true
                    step: 1
                    title: Bass
                - component: oh-toggle-item
                  config:
                    color: blue
                    item: AZ_Sonos_Loudness
                    title: Loudness
    - component: f7-card
      config:
        border: no
        style:
          background: '=(props.background2) ? props.background2 : "linear-gradient(to top right,#B0E0E6 20%,#1E90FF 30%,#FFC0CB 60%)"'
          border-radius: '=(props.corners) ? props.corners : "var(--cardCorners)"'
          height: var(--cardHigh)
        title: Garten
      slots:
        default:
          - component: oh-list
            config:
              mediaList: true
            slots:
              default:
                - component: oh-stepper-item
                  config:
                    autorepeat: true
                    autorepeatDynamic: true
                    color: blue
                    iconColor: red
                    item: GA_Sonos_Treble
                    max: 30
                    min: -30
                    raised: true
                    round: true
                    step: 1
                    title: Treble
                - component: oh-stepper-item
                  config:
                    autorepeat: true
                    autorepeatDynamic: true
                    color: blue
                    iconColor: red
                    item: GA_Sonos_Bass
                    max: 30
                    min: -30
                    raised: true
                    round: true
                    step: 1
                    title: Bass
                - component: oh-toggle-item
                  config:
                    color: blue
                    item: GA_Sonos_Loudness
                    title: Loudness
    - component: f7-card
      config:
        border: no
        style:
          background: '=(props.background3) ? props.background3 : "linear-gradient(to top left,green 0%,lightblue 60%)"'
          border-radius: '=(props.corners) ? props.corners : "var(--cardCorners)"'
          height: var(--cardHigh)
        title: Wohnzimmer
      slots:
        default:
          - component: oh-list
            config:
              mediaList: true
            slots:
              default:
                - component: oh-stepper-item
                  config:
                    autorepeat: true
                    autorepeatDynamic: true
                    color: blue
                    iconColor: red
                    item: WZ_Sonos_Treble
                    max: 30
                    min: -30
                    raised: true
                    round: true
                    step: 1
                    title: Treble
                - component: oh-stepper-item
                  config:
                    autorepeat: true
                    autorepeatDynamic: true
                    color: blue
                    iconColor: red
                    item: WZ_Sonos_Bass
                    max: 30
                    min: -30
                    raised: true
                    round: true
                    step: 1
                    title: Bass
                - component: oh-toggle-item
                  config:
                    color: blue
                    item: WZ_Sonos_Loudness
                    title: Loudness
    - component: f7-card
      config:
        border: no
        style:
          background: '=(props.background4) ? props.background4 : "radial-gradient(closest-side at 60% 55%, red, yellow, darkorange)"'
          border-radius: '=(props.corners) ? props.corners : "var(--cardCorners)"'
          height: var(--cardHigh)
        title: Reserve

Mit ...

Code: Alles auswählen

  style:
    --cardCorners: 20px
    --cardHigh: auto

... habe ich die Variablen definiert, und dann mit "var(--cardCorners)" und "var(--cardHigh)" benutzt.

Wie gesagt, das ist eine Möglichkeit die ich mir bisher erschlossen habe.

Zu 4: Unter "Techniques for Styling Widgets" in der vorgenannten Doku steht dazu einiges, das du als Programmierer vielleicht besser verstehst. Aber es scheint wohl u. a. so zu sein, dass man bestimmte vordefinierte Variablen ( standard Vue.js attributes s. Doku) verwenden.

[guinnes]

Hallo Peter-pan
Vielen Dank für deine Antwort:

Zu 2 u. 3: So genau habe ich das noch nicht verstanden.
Es gibt wohl irgendwelche CSS-Standard-Variablen. Und auch Hinweise in der OH-Doku. Aber eigentlich sind das ja mehr oder weniger Konstanten. Man kann da aber sicherlich auch Berechnungen, etc. hinein stellen.

Wir sprechen von verschiedenen Variablen : Es gibt "Variablen" die man so einsetzen kann :

Code: Alles auswählen

fill: '=vars.objVar.selectThing=="Security" ? true : false'

Hab ich aus dem Widget https://community.openhab.org/t/oh3-mai ... ard/139035
Sind also was ganz anderes, als das, was du benutzt
Ich hab jetzt nach wirklich Wochenlanger Suche was gefunden, aber da erschließt sich mir der Sinn auch nicht :
Man kann auf der "Page" ( Also auf der Seite, auf der die Widgets liegen ) unter "Code" diese Vars anlegen :

Code: Alles auswählen

 defineVars:
    tasmotimerurl: "http://192.168.178.192"

Damit steht allen Widgets auf der Seite eine "Variable" unter dem Namen "vars.tasmotimerurl" zur Verfügung. Angeblich soll sich der Inhalt der Variablen auch ändern lassen, allerdings nur über Komponenten, die eine Manuelle Interaktion erfordern.
Welchen Sinn das machen soll, verstehe ich nicht.
( Was ich auch nicht verstehe, ist : Warum kriegt man mit items[Itemname] nur kastrierte Items zurück ? Kein .label, kein .category, bei .members bin ich mir nicht sicher )

Zu 4: Unter "Techniques for Styling Widgets" in der vorgenannten Doku steht dazu einiges, das du als Programmierer vielleicht besser verstehst. Aber es scheint wohl u. a. so zu sein, dass man bestimmte vordefinierte Variablen ( standard Vue.js attributes s. Doku) verwenden.

Da hab ich mich auch durchgewühlt, aber nichts gefunden, was ich gesucht habe.
Es geht mir u.A. um solche Abfragen :

Code: Alles auswählen

 text: >
           =((Number.parseFloat(items[props.Max_Group].state) > 10) ? "4"  : 
             (Number.parseFloat(items[props.Max_Group].state) > 5) ? "2" : 
             (Number.parseFloat(items[props.Max_Group].state) > 2) ? "1" : "0.4")

oder ( noch schlimmer ) :

Code: Alles auswählen

                                                   
= ((Number.parseFloat(items[props.OC_Prefix + loop.Minute.toString().padStart(2,'0') + props.OC_Prec_Suffix].state) > 10) ? "pink" :
(Number.parseFloat(items[props.OC_Prefix + loop.Minute.toString().padStart(2,'0') + props.OC_Prec_Suffix].state) > 5) ? "red": 
(Number.parseFloat(items[props.OC_Prefix + loop.Minute.toString().padStart(2,'0') + props.OC_Prec_Suffix].state) > 2) ? "yellow" : "green") 

Dabei wird 3 Mal der Name eines Items berechnet und 3 Mal der Status des selben Items geholt, weil es ( scheinbar ) keine Möglichkeit gibt, irgentwelche Werte lokal zwischenzuspeichern

[peter-pan]

Hallo guinnes,
wie gesagt, mit dem programmieren hab ich's nicht so unbedingt, aber das mit der Variablen, die du meinst, habe ich jetzt ( ein bisschen) kapiert.
Wenn du hier nicht fündig wirst, solltest du mal im internationalen Forum schauen, evtl. direkt bei "hmerk". Eine weitere Möglichkeit wäre evtl "JustinG". Der hat mir auch schon ein paar Tipps zur Gestaltung von Widgets (CSS) gegeben.

text: >
=((Number.parseFloat(items[props.Max_Group].state) > 10) ? "4" :
(Number.parseFloat(items[props.Max_Group].state) > 5) ? "2" :
(Number.parseFloat(items[props.Max_Group].state) > 2) ? "1" : "0.4")

Soweit ich diesen Vergleich verstehe ist das doch richtig, oder ?
Das sieht zwar ein bisschen komisch aus(und ist es auch), weil es nur "entweder / oder " gibt. Deshalb muss man bei Mehrfachvergleichen in den "oder-Teil" einen neuen "entweder /oder "-Vergleich einbauen. So ähnlich wie "If .. else If...else".

Zu dem "loop." kann ich dir auch nichts sagen. Nur soviel, dass es wohl in Verbindung mit einem "oh-repeater" steht.

Stell dein Widget doch einfach mal im international Forum vor. Ich könnte mir vorstellen, dass du da sofort Antworten bekommst !

[guinnes]

Eine weitere Möglichkeit wäre evtl "JustinG". Der hat mir auch schon ein paar Tipps zur Gestaltung von Widgets (CSS) gegeben.

Da hab ich das mit dem "defineVars" her. Hilft mir aber aus besagten gründen in dem Fall nicht weiter

Code: Alles auswählen

 text: >
           =((Number.parseFloat(items[props.Max_Group].state) > 10) ? "4"  : 
             (Number.parseFloat(items[props.Max_Group].state) > 5) ? "2" : 
             (Number.parseFloat(items[props.Max_Group].state) > 2) ? "1" : "0.4")

Soweit ich diesen Vergleich verstehe ist das doch richtig, oder ?

Das ist richtig, das ist ein Vergleich und der tut auch. Was mich dabei stört ist, daß 3 Mal der State von dem selben Item geholt werden muß ( Zeitverschwendung )
Mein Wunsch ( und das ist mit (fast) jeder Programmiersprache so möglich :

Code: Alles auswählen

var float Itemstate = Number.parseFloat(items[props.Max_Group].state)
text     =(Itemstate  > 10) ? "4"  : 
             (Itemstate  > 5) ? "2" : 
             (Itemstate  > 2) ? "1" : "0.4")

Das sieht zwar ein bisschen komisch aus(und ist es auch), weil es nur "entweder / oder " gibt. Deshalb muss man bei Mehrfachvergleichen in den "oder-Teil" einen neuen "entweder /oder "-Vergleich einbauen. So ähnlich wie "If .. else If...else".

Das ist eine vereinfachte Schreibweise ( stammt wohl aus C ). Dabei ist der Doppelpunkt das "else"

Zu dem "loop." kann ich dir auch nichts sagen. Nur soviel, dass es wohl in Verbindung mit einem "oh-repeater" steht.

Das ist mir klar. "loop" steht für den repeater, "Minute" für die Laufvariable, "tostring" macht daraus eine Zeichenkette und "padStart(2,'0')" sorgt dafür, daß die erzeugte Zeichenkette am Anfang auf 2 Stellen mit "0" aufgefüllt wird, wenn da kein anderes Zeichen ist, also :
1 wird zu "01", 2 zu "02", 10 zu "10) usw.

Stell dein Widget doch einfach mal im international Forum vor. Ich könnte mir vorstellen, dass du da sofort Antworten bekommst !

Dafür ist mein "Schreib-Englisch" zu schlecht.

Ich probiere z.Z. noch deinen Vorschlag :

Code: Alles auswählen

style:
    --cardCorners: 20px
    --cardHigh: auto

aus. Die Variablen scheinen grundsätzlich nur Strings anzunehmen, aber das ist in jedem Fall mal ein Anfang, vielleicht kann ich ja damit was angangen. Ich werde mich in jedem Fall dazu nochmal melden.

[peter-pan]

Hallo guinness,

Danke für deine ausführlichen Erläuterungen. Ich werde mir dein Widget in den nächsten Tagen mal etwas genauer anschauen und vielleicht kann ich im Zusammenhang mit deinen Erklärungen ein bisschen mehr von der Syntax verstehen.

Gruss
Peter