PTZ camera feed

Thanks for reporting, I have fixed this now as it seems the default value was causing it to fail. Try installing it now.

1 Like

Hi @matt1, in your post for the clickable camera widget you also reference this “default naming”. Do you have a link to the documentation? My search-fu is too weak it seems.

There are two ways to achieve the same result.

  1. Create Equipment from thing.
  2. Add equipment from model.

This auto creates the items for you based on what the binding developer has tagged the channel to be. So it will save time choosing a name for the item, plus what type of item and the semantic tags are often now auto selected for you. This also makes setup easier in widgets if you use this naming of the items, so if people prefer textual methods it would be a good idea to copy the same naming structure.

Link to where this is shown with pictures and step by step guide…

Semantic Model | openHAB

Hi Matt,
Thanks for this nice Widget. It works just fine buty my Camera hast two problems.
First is → I need To invert Tilt and Pan … but i but the widget supports only inverting tilt :wink:
(I found hou to fix that in the code :wink: )
However because of the secont prolem i have this is not even a relevant problem.

Second: When I hit an arrow the cam just moves and there is no way to stop it moving.
I think its because the cam seems to use continuous Movements so waiting for a stop.

I read you wrote “supporting continuous movements are out of scope for this post”. So i guess you do not plan to support anytime soon …if at all.
Do you know a similar Widget that will support Continuous Moving. Or you have a hint how i could try to implement it myself. Im new to Openhab and a compleate noob wit cams and onvif … but not a compleat noob in coding;-)
I did nit even know about relative and Continuous moving stuff until today … hmmm
Regards and Thanks

Rolf

I could not work out a way to detect when the mouse button is down and when it was released with the newer v3 framework.

The binding supports continuous moves and if you use the widget for habpanel it works as it does not have that same limitation or my lack of knowing how to do it.

There is a way to work around it if there is no way to detect button releases and that is to send a stop command after a preset time like 1 second. This would need to be implemented into the binding.

There is another way to move and this is with onvif presets. This would be a preferred way as it is repeatable to move back to an exact location. The widget supports this, but the presets need to be created in other software like onvif device manager.

Sadly not all cameras have decent onvif support and either miss features or have badly working features so it can be hit and miss especially with cheaper cameras.

As a workarround, a seperate button to send a stop could work too maybe…
So if arrow klicked the camera is moving to the selcted direction until the Stop is sent.

Yes that could be done easily. Issue is if your phone or tablet does not see the stop press the camera keeps moving so that is my least favourite way of moving cameras. Presets seem to be the best for me.

I managed to implement a button that stops all Movments. For me this is better than Preset Locations.
What i did so far:

  • Implement Pan and Tilt can now be inverted
  • Preset Location Icon can be hidden
  • Stop Button to stop all Movments (P T and Z) Button can be hidden

Not sure if i should Post the Code here…

Like this it is fine for me … hmm.

Well… i had to manage to override the default mpeg location. because i am behind a reversproxy and the adress can not point to an IP it has to point to https://mydomain//ipcamera/xxxxx/ipcamera.mjpeg
For this i changed the MPEG URL Point to Setpoint so i was able to give it a custom Value :wink:

Please do post it here between code fences to keep formatting correct.
I can update the main widget for others and give u credit for changes in first post.

A separate check box for pan and tilt inverting. And a way to hide and show the stop control would seem like two good additions. Can the third change you wanted get done as a option to change the displayed url? Been a while since I made widgets so I am a little rusty of what can be done.

OK my Changes:
Hide Button for Preset Locations:

  • Line: 22-25 and 195

Stop Button: (stops any movement of PT or Z by sending an OFF to _Pan)

  • Line 18-21 (hide) and 170- 183 (Button and Action)

Invert Pan ind addition to (allready there Invert tilt)

  • Line 30-33 and 93 and 133
uid: ClickablePTZCamera
tags: []
props:
  parameters:
    - context: item
      label: Select the Camera to Control
      name: camera
      required: true
      type: TEXT
    - label: Show Equipment Controls
      name: showSettings
      required: true
      type: BOOLEAN
    - label: Show Discrete PTZ Controls
      name: showControls
      required: true
      type: BOOLEAN
    - label: Show Stop Move Button
      name: showMoveStop
      required: true
      type: BOOLEAN
    - label: Show Preset Locations
      name: showPreset
      required: true
      type: BOOLEAN
    - label: Invert Tilt Control
      name: invertTilt
      required: true
      type: BOOLEAN
    - label: Invert Pan Control
      name: invertPan
      required: true
      type: BOOLEAN
    - label: Show Alarm Overlays
      name: showAlarms
      required: true
      type: BOOLEAN
    - context: item
      label: Item for Switch
      name: switchItem
      required: false
      type: TEXT
  parameterGroups: []
timestamp: May 12, 2022, 11:35:05 PM
component: f7-card
config:
  class: no-margin
  expandable: true
  style:
    --f7-card-margin-horizontal: 0px
    border-radius: 6px
    height: 9rem
    width: 16rem
slots:
  default:
    - component: f7-card-content
      config:
        class: card-opened-fade-out
        style:
          background-image: ="url('"+items[props.camera + "_MJPEGURL"].state+"')"
          background-repeat: no-repeat
          background-size: 17rem 10rem
          border-radius: 6px
          color: var(--f7-card-header-text-color)
          z-index: -1
    - component: f7-card-content
      config:
        class: card-opened-fade-in
        style:
          background-image: ="url('"+items[props.camera + "_MJPEGURL"].state+"')"
          background-position: center
          background-repeat: no-repeat
          background-size: 100% auto
          color: var(--f7-card-header-text-color)
          z-index: -1
    - component: oh-link
      config:
        action: toggle
        actionCommand: ON
        actionCommandAlt: OFF
        actionItem: =props.switchItem
        class: card-prevent-open
        iconF7: power
        iconSize: 22
        style:
          color: "=(items[props.switchItem].state === 'ON') ? 'cyan' : 'var(--f7-card-header-text-color)'"
          margin: 0em 0.2em
          opacity: "=(items[props.switchItem].state === 'ON') ? '0.4' : '0.3'"
        visible: =props.switchItem !== undefined
    - component: oh-link
      config:
        action: command
        actionCommand: "=(props.invertPan) ? 'INCREASE' : 'DECREASE'"
        actionItem: =props.camera + "_Pan"
        class: card-prevent-open
        iconF7: arrow_left
        iconSize: 22
        style:
          color: var(--f7-card-header-text-color)
          margin: 0 0.2em
          opacity: 0.3
        visible: =props.showControls === true
    - component: oh-link
      config:
        action: command
        actionCommand: "=(props.invertTilt) ? 'INCREASE' : 'DECREASE'"
        actionItem: =props.camera + "_Tilt"
        class:
          - card-prevent-open
        iconF7: arrow_up
        iconSize: 22
        style:
          color: var(--f7-card-header-text-color)
          margin: 0 0.2em
          opacity: 0.3
        visible: =props.showControls === true
    - component: oh-link
      config:
        action: command
        actionCommand: "=(props.invertTilt) ? 'DECREASE' : 'INCREASE'"
        actionItem: =props.camera + "_Tilt"
        class: card-prevent-open
        iconF7: arrow_down
        iconSize: 22
        style:
          color: var(--f7-card-header-text-color)
          margin: 0 0.2em
          opacity: 0.3
        visible: =props.showControls === true
    - component: oh-link
      config:
        action: command
        actionCommand: "=(props.invertPan) ? 'DECREASE' : 'INCREASE'"
        actionItem: =props.camera + "_Pan"
        class: card-prevent-open
        iconF7: arrow_right
        iconSize: 22
        style:
          color: var(--f7-card-header-text-color)
          margin: 0 0.2em
          opacity: 0.3
        visible: =props.showControls === true
    - component: oh-link
      config:
        action: command
        actionCommand: INCREASE
        actionItem: =props.camera + "_Zoom"
        class: card-prevent-open
        iconF7: plus
        iconSize: 22
        style:
          color: var(--f7-card-header-text-color)
          margin: 0 0.2em
          opacity: 0.3
        visible: =props.showControls === true
    - component: oh-link
      config:
        action: command
        actionCommand: DECREASE
        actionItem: =props.camera + "_Zoom"
        class:
          - card-prevent-open
        iconF7: minus
        iconSize: 22
        style:
          color: var(--f7-card-header-text-color)
          margin: 0 0.2em
          opacity: 0.3
        visible: =props.showControls === true
    - component: oh-link
      config:
        action: command
        actionCommand: OFF
        actionItem: =props.camera + "_Pan"
        class:
          - card-prevent-open
        iconF7: stop_circle
        iconSize: 22
        style:
          color: var(--f7-card-header-text-color)
          margin: 0 0.2em
          opacity: 0.3
        visible: =props.showMoveStop === true
    - component: oh-link
      config:
        action: options
        actionItem: =props.camera + "_GoToPreset"
        class: card-prevent-open
        iconF7: list_number
        iconSize: 22
        style:
          color: var(--f7-card-header-text-color)
          margin: 0 0.2em
          opacity: 0.3
        visible: =props.showPresets === true
    - component: oh-link
      config:
        action: group
        actionGroupPopupItem: =props.camera
        class: card-prevent-open
        iconF7: gear_alt
        iconSize: 22
        style:
          color: var(--f7-card-header-text-color)
          margin: 0 0.2em
          opacity: 0.3
        visible: =props.showSettings === true
    - component: oh-link
      config:
        iconF7: eye
        iconSize: 18
        style:
          color: var(--f7-card-header-text-color)
          opacity: "=(items[props.camera + '_MotionAlarm'].state === 'ON') ? '0.5' : '0'"
          position: absolute
          right: 0.2rem
          top: 7.8rem
        visible: =props.showAlarms === true
    - component: oh-link
      config:
        iconF7: ear
        iconSize: 18
        style:
          color: var(--f7-card-header-text-color)
          left: 0rem
          opacity: "=(items[props.camera + '_AudioAlarm'].state === 'ON') ? '0.5' : '0'"
          position: absolute
          top: 7.7rem
        visible: =props.showAlarms === true

The other Change that would be handy that would be the possibility to override the default MPEG URL
So the widget would use the alternative URL to display the MPEG Strean instead of camera default.
.
I dont know if and how this would be possible from the Widget configuration.
Not so important to me anymore bcause i have a working workarround. (manipulation the Item MPEG Location into type Setpoint so i could manually sett the Value to hold my alternative URL)

Thanks, I updated the widget and also added the ability to hide/show the audio and motion alarms separately as it was throwing an item not created warning in the logs if one of the items was missing.

Updated widget to now better support items that the widget SWITCHES on and off if you set the optional item to switch config. It now changes the icon color to indicate the state of the item if it is a COLOR, SWITCH or DIMMER item.

1 Like

In my scenario i need to use fixed layout rather than responsive, but when i use the widget it popups only blurred…
Can someone help me to fix this?
I did not change the code in any way, jsut using the code from Post #1. Secondly I need to mention, when I use responsive layout, It works perfectly