INSTAR Deutschland GmbHINSTAR Deutschland GmbH

OpenHAB 3 Camera Widget



Erstellen der Kamera

Zuerst müssen wir unsere Kamera als Equipment hinzufügen. Gehen Sie dazu auf Settings und klicken Sie auf Model:

Trying out OpenHAB 3 in Docker

Klicken Sie dort auf Create Equipment from Thing:

Trying out OpenHAB 3 in Docker

Und wählen Sie Ihre Kamera, die Sie mit dem Camera Binding hinzugefügt hatten:

Trying out OpenHAB 3 in Docker

Achten Sie darauf, dass Sie auf show advanced klicken, um alle Kanäle zu sehen und mindestens die Kanäle Pan, Tilt, Zoom, GoToPreset und MJPEG URL auswählen.

Erstellen des Widget Templates

Momentan (12.01.2021) ist das Kamera-Widget noch nicht Teil der Standard-OpenHAB-Widgets und muss manuell erstellt werden. Dafür müssen wir unseren Widget-Code über das Menü Developer Tools hinzufügen. Klicken Sie auf Create Widget und kopieren Sie den folgenden Code in das Eingabefeld:

Trying out OpenHAB 3 in Docker

uid: ClickablePTZCamera
props:
  parameters:
    - context: item
      label: Select the Camera to Control
      name: camera
      required: true
      type: TEXT
    - context: item
      label: Item for Switch
      name: switchItem
      required: false
      type: TEXT
    - label: Invert Tilt Controls
      name: invertTilt
      required: true
      type: BOOLEAN
    - label: Show Discrete Controls
      name: showControls
      required: true
      type: BOOLEAN
  parameterGroups: []
timestamp: Dec 29, 2020, 11:56:36 AM
component: f7-card
config:
  class: no-margin
  expandable: true
  style:
    border-radius: 6px
    --f7-card-margin-horizontal: 0px
    width: 16rem
    height: 9rem
slots:
  default:
    - component: f7-card-content
      config:
        class: card-opened-fade-out
        style:
          color: white
          background-image: ="url('"+items[props.camera + "_MJPEGURL"].state+"')"
          background-size: 17rem 10rem
          background-repeat: no-repeat
          border-radius: 6px
          z-index: -1
    - component: f7-card-content
      config:
        class: card-opened-fade-in
        style:
          color: white
          background-image: ="url('"+items[props.camera + "_MJPEGURL"].state+"')"
          background-size: 100% auto
          background-position: center
          background-repeat: no-repeat
          z-index: -1
    - component: oh-link
      config:
        class: card-prevent-open
        style:
          margin: 0em 0.2em
          color: "=(items[props.switchItem].state === 'ON') ? 'cyan' : 'white'"
          opacity: "=(items[props.switchItem].state === 'ON') ? '0.4' : '0.3'"
        visible: =props.switchItem !== undefined
        iconF7: power
        iconSize: 22
        action: toggle
        actionItem: =props.switchItem
        actionCommand: ON
        actionCommandAlt: OFF
    - component: oh-link
      config:
        class: card-prevent-open
        style:
          margin: 0 0.2em
          color: white
          opacity: 0.3
        visible: =props.showControls === true
        iconF7: arrow_left
        iconSize: 22
        action: command
        actionItem: =props.camera + "_Pan"
        actionCommand: INCREASE
    - component: oh-link
      config:
        class:
          - card-prevent-open
        style:
          margin: 0 0.2em
          color: white
          opacity: 0.3
        visible: =props.showControls === true
        iconF7: arrow_up
        iconSize: 22
        action: command
        actionItem: =props.camera + "_Tilt"
        actionCommand: "=(props.invertTilt) ? 'INCREASE' : 'DECREASE'"
    - component: oh-link
      config:
        class: card-prevent-open
        style:
          margin: 0 0.2em
          color: white
          opacity: 0.3
        visible: =props.showControls === true
        iconF7: arrow_down
        iconSize: 22
        action: command
        actionItem: =props.camera + "_Tilt"
        actionCommand: "=(props.invertTilt) ? 'DECREASE' : 'INCREASE'"
    - component: oh-link
      config:
        class: card-prevent-open
        style:
          margin: 0 0.2em
          color: white
          opacity: 0.3
        visible: =props.showControls === true
        iconF7: arrow_right
        iconSize: 22
        action: command
        actionItem: =props.camera + "_Pan"
        actionCommand: DECREASE
    - component: oh-link
      config:
        class: card-prevent-open
        style:
          margin: 0 0.2em
          color: white
          opacity: 0.3
        visible: =props.showControls === true
        iconF7: plus
        iconSize: 22
        action: command
        actionItem: =props.camera + "_Zoom"
        actionCommand: INCREASE
    - component: oh-link
      config:
        class:
          - card-prevent-open
        style:
          margin: 0 0.2em
          color: white
          opacity: 0.3
        visible: =props.showControls === true
        iconF7: minus
        iconSize: 22
        action: command
        actionItem: =props.camera + "_Zoom"
        actionCommand: DECREASE
    - component: oh-link
      config:
        class: card-prevent-open
        style:
          margin: 0 0.2em
          color: white
          opacity: 0.3
        iconF7: list_number
        iconSize: 22
        action: options
        actionItem: =props.camera + "_GoToPreset"
    - component: oh-link
      config:
        class: card-prevent-open
        style:
          margin: 0 0.2em
          color: white
          opacity: 0.3
        iconF7: gear_alt
        iconSize: 22
        action: group
        actionGroupPopupItem: =props.camera
    - component: oh-link
      config:
        style:
          position: absolute
          top: 7.8rem
          right: 0.2rem
          color: white
          opacity: "=(items[props.camera + '_MotionAlarm'].state === 'ON') ? '0.5' : '0'"
        iconF7: eye
        iconSize: 18
    - component: oh-link
      config:
        style:
          position: absolute
          top: 7.7rem
          left: 0rem
          color: white
          opacity: "=(items[props.camera + '_AudioAlarm'].state === 'ON') ? '0.5' : '0'"
        iconF7: ear
        iconSize: 18

Wenn Sie nun Ihre OpenHAB Seite bearbeiten, haben Sie die Möglichkeit, ein Personal Widget mit dem Namen ClickablePTZCamera hinzuzufügen:

Trying out OpenHAB 3 in Docker

Wählen Sie unter Select the Camera to Control die Kamera aus, die Sie in Schritt 1 erstellt haben:

Trying out OpenHAB 3 in Docker

Mit dem Widget können Sie Ihre Kamera schwenken und neigen sowie auf das Live-Video Ihrer Kamera und alle Funktionen zugreifen, die Sie beim Erstellen Ihrer Kamera in Schritt 1 ausgewählt haben:

Trying out OpenHAB 3 in Docker