OpenHAB-kleinere Widgets

Aus Debacher-Wiki
Zur Navigation springenZur Suche springen

Die folgenden kleineren Widgets sind weniger zur direkten Nutzung gedacht, als mehr zum Darstellen von Möglichkeiten. Diese Punkte sind mir untergekommen beim Erstellen meines Widget OpenHAB Animation zur Sun2000. Sie sind teilweise mit englischen Texten versehen, dann habe ich sie auch in der OpenHAB Community veröffentlicht.

Animationen in OpenHAB

A0bc7013c81d67685091e1e1a5bfe14376a7e60a.gif 

uid: ud_animation_widget
tags:
  - Animation Widget V 2.0
props:
  parameters:
    - default: 1;0
      description: Direction of animation
      name: direction
      required: false
      type: TEXT
      limitToOptions: true
      options:
        - label: forward
          value: 0;1
        - label: backwards
          value: 1;0
    - default: 8s
      description: duration of animation
      label: Animationsdauer
      name: duration
      required: false
      type: TEXT
      options:
        - label: 1 second
          value: 1s
        - label: 4 seconds
          value: 4s
        - label: 8 seconds
          value: 8s
        - label: 16 seconds
          value: 16s
  parameterGroups: []
timestamp: Mar 28, 2024, 12:27:25 PM
component: f7-card
config:
  style:
    border: 3px solid green
    border-radius: 20px
    height: auto
    text-align: center
    width: 200px
  title: Watch animation!
  footer: =props.duration+((props.direction=='0;1')?' forward':' backwards')
slots:
  content:
    - component: svg
      config:
        style:
          width: 200px
          height: 110px
        xmlns: http://www.w3.org/2000/svg
      slots:
        default:
          - component: path
            config:
              d: M0,15 h20 q60,0 60,45 t60,45 h20
              fill: none
              id: examplepath
              stroke: orange
              stroke-width: 1
          - component: circle
            config:
              fill: orange
              r: 6
              visible: true
            slots:
              default:
                - component: animateMotion
                  config:
                    dur: =props.duration
                    keyPoints: =props.direction
                    keyTimes: 0;1
                    repeatCount: indefinite
                    calcMode: linear
                  slots:
                    default:
                      - component: mpath
                        config:
                          xlink:href: "#examplepath"

Die Animation besteht aus vier Komponenten innerhalb eines übergeordneten Elements.

  • Die erste Komponente beschreibt den Pfad (component: path)
  • die zweite Komponente beschreibt das Objekt, das bewegt wird (component: circle)
  • die dritte Komponente beschreibt die Bewegung (component: animateMotion)
  • die vierte Komponente bindet die Animation an den Pfad (component: mpath) über die id: examplepath

Die erwähnten Schlüsselwörter in der Auflistung sind SVG-Elemente. Die Dokumentation zu SVG-Elementen finden Sie auf der Mozilla-Website: SVG-Attribut-Referenz.

Eine kurze Beschreibung des Pfades, hier wird die Linienzeichnung beschrieben: 

   d: M0,15 h20 q60,0 60,45 t60,45 h20

Konkret wird hier folgendes definiert (das Komma steht immer zwischen den Komponenten eines Punktes)

  • Bewegen zu Punkt (0,15)
  • Linie horizontal 20 Punkte
  • Quadratische Bézierkurve zum Punkt (60,45) mit dem Kontrollpunkt (60,0)
  • Quadratische Bézierkurve wie oben, aber gespiegelt am Punkt (60,45)
  • Horizontale Linie 20 Punkte

Sie können die Bewegungsrichtung und die Geschwindigkeit über die props settings anpassen, aber die Animation sollte auch ohne weitere Eingaben funktionieren.

Mich interessierte vor allem die Möglichkeit, mit BOOLEAN-Parametern zu arbeiten und die Optionen für TEXT-Parameter.

Widget mit PupUp aus dem gleichen widget

Ce05b4cde57aa602166ffaa194cca99fa982ecbd.png 

uid: ud_popup_widget_text
tags: []
props:
  parameters: []
  parameterGroups: []
timestamp: Mar 20, 2024, 10:16:53 PM
component: f7-card
config:
  style:
    border: 3px solid green
    border-radius: 20px
    text-align: center
    width: 200px
  title: Klick text in box to test
slots:
  default:
    - component: oh-link
      config:
        action: popover
        popoverOpen: ="#infopopup"
        style:
          font-size: 22px
        text: Klick here
    - component: f7-popover
      config:
        id: infopopup
        closeByBackdropClick: true
        closeByOutsideClick: true
        closeOnEscape: true
        style:
          color: blue
          height: auto
          width: 250px
      slots:
        default:
          - component: oh-list
            config:
              simpleList: false
            slots:
              default:
                - component: oh-list-item
                  config:
                    title: You did it ;-)
                - component: oh-list-item
                  config:
                    title: Bravo!

Die Auflistung besteht aus zwei Teilen

  • die erste Hälfte erzeugt einen klickbaren Text
  • die zweite Hälfte generiert das Popup

Die beiden Hälften sind über den Klassenbezeichner infopopup verbunden

Ich habe alle Parameter im Listing weggelassen, damit es direkt im Entwicklungsfenster getestet werden kann.

Man kann auch ein Icon anklickbar machen, aber das Problem dabei ist, dass der oh-link nur f7-Icons zulässt. Aber oh-link hat einen Slot, durch den man andere Elemente, wie z.B. ein oh-icon, integrieren kann.

99b4e9eceb53c76fa7b9a7c8fb0b5a17f3cfe0fd.png 

uid: ud_popup_widget_icon
tags: []
props:
  parameters: []
  parameterGroups: []
timestamp: Mar 20, 2024, 10:45:43 PM
component: f7-card
config:
  style:
    border: 3px solid green
    border-radius: 20px
    text-align: center
    width: 200px
  title: Klick icon in box to test
slots:
  default:
    - component: oh-link
      config:
        action: popover
        popoverOpen: ="#infopopup"
      slots:
        default:
          - component: oh-icon
            config:
              height: 70px
              icon: if:game-icons:push
    - component: f7-popover
      config:
        id: infopopup
        closeByBackdropClick: true
        closeByOutsideClick: true
        closeOnEscape: true
        style:
          color: blue
          height: auto
          width: 250px
      slots:
        default:
          - component: oh-list
            config:
              simpleList: false
            slots:
              default:
                - component: oh-list-item
                  config:
                    title: You did it ;-)
                - component: oh-list-item
                  config:
                    title: Bravo!

Arbeiten mit Variablen oder genauer Konstanten in widgets

Basierend auf mehreren Beiträgen von @JustinG habe ich eine Liste von verschiedenen Möglichkeiten zusammengestellt, mit Variablen bzw. Konstanten in Widgets zu arbeiten:

Parameter

Die Verwendung von Parametern ist ein einfacher Weg: 

uid: ud_constant_widget_props
tags: []
props:
  parameters:
    - default: ="This is "+"the first line"
      name: mytext
      required: false
      type: TEXT
  parameterGroups: []
timestamp: Mar 23, 2024, 5:43:07 PM
component: f7-card
config:
  style:
    border: 3px solid green
    border-radius: 20px
    width: 200px
slots:
  default:
    - component: oh-list
      config:
        simpleList: false
      slots:
        default:
          - component: oh-list-item
            config:
              title: =props.mytext
          - component: oh-list-item
            config:
              title: This is the second line

6b26dd7ca4aafe6488bbed9ef01bed9201bf2145.png

Es gibt einige Nachteile:

  • die Werte können nicht berechnet werden (siehe Screenshot)
  • mindestens 4 Zeilen Code

oh-repeater

Der von @JustinG mehrfach beschriebene Weg verwendet oh-repeater: 

uid: ud_constant_widget_repeater
tags: []
props:
  parameters: []
  parameterGroups: []
timestamp: Mar 23, 2024, 5:38:55 PM
component: oh-repeater
config:
  for: dummy
  sourceType: array
  in:
    - mytext1: ="This is "+"the first line"
      mytext2: ="This is "+"the second line"
  fragment: true
slots:
  default:
    - component: f7-card
      config:
        style:
          border: 3px solid green
          border-radius: 20px
          text-align: center
          width: 200px
          color: black
      slots:
        default:
          - component: oh-list
            config:
              simpleList: false
            slots:
              default:
                - component: oh-list-item
                  config:
                    title: =loop.dummy.mytext1
                - component: oh-list-item
                  config:
                    title: =loop.dummy.mytext2

0903944a4069424428aadd6042b383a519f863ac.png

Vorteile:

  • die Werte können berechnet werden
  • weniger Code auch bei mehreren Daten

oh-link

Der Beitrag Multiple Widget Actions hat mich dazu inspiriert, einen dritten Ansatz zu versuchen.

Allerdings erfordert dieser Ansatz, dass die Konstanten in einem Popup oder einem ähnlichen Konstrukt verwendet werden, da ein Mausklick notwendig ist. 

uid: ud_constant_widget_oh-link
tags: []
props:
  parameters: []
  parameterGroups: []
timestamp: Mar 23, 2024, 5:36:12 PM
component: oh-link
config:
  action: variable
  actionVariable: mytext
  actionVariableValue: ="This is "+"the second line"
  style:
    pointer-events: none
slots:
  default:
    - component: f7-card
      config:
        style:
          border: 3px solid green
          border-radius: 20px
          text-align: center
          width: 200px
          color: black
        title: Klick text in box to test
      slots:
        default:
          - component: oh-link
            config:
              action: popover
              popoverOpen: ="#infopopup"
              style:
                font-size: 22px
                pointer-events: auto
              text: Klick here
    - component: f7-popover
      config:
        id: infopopup
        closeByBackdropClick: true
        closeByOutsideClick: true
        closeOnEscape: true
        style:
          color: blue
          height: auto
          width: 250px
      slots:
        default:
          - component: oh-list
            config:
              simpleList: false
            slots:
              default:
                - component: oh-list-item
                  config:
                    title: This ist the first line
                - component: oh-list-item
                  config:
                    title: =vars.mytext

Cd3c277424516a3b2d8beecd9995c5b3d7694d10.png

Die Auflistung ist etwas umfangreicher, da ich ein Popup benötige, damit dies Sinn macht.

Abgerufen von „https://www.debacher.de/uwiki/index.php?title=OpenHAB-kleinere_Widgets&oldid=13819“