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.
- Create Equipment from thing.
- 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…
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 
(I found hou to fix that in the code )
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
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
I have the same problem, when I use the widget in Canvas Card it fades out blurred. Does anyone have a fix for this?
Updated widget because:
Older openHAB versions created this…
Doorbell_MJPEGURL
newer versions now create this
Doorbell_MJPEG_URL
Widgets now uses the newer naming structure.