Help with template

Dashboard
1

I'm having a template which shows a video from my camera .
I wanted to be able to click on the video and doing so it directly opens the video on a new window.
I'm able to make it with the links on the botton but no way by pushing on the video, any help with this template?

image

The idea is to be able to select with a switch on the top when I'm connected through my internal network or external that makes the video be shown properly through the lan IP or my domain, this works fine.
I made two links on the bottom to open in local or remote and this also works but the target is to remove the bottom links and be able directly to click on the video and open on another window as per msg.payload injected .

Thanks in advance for any support

<div  ng-click= href= {{msg.payload}}>
<img src= {{msg.payload}} width="280"><br/>
<a href="http://192.168.1.156:8081" target="_blank">Camara 1 local</a>
<a href="http://mydomain:8081" target="_blank">Camara 1 remote</a>

</div>
2

Here is a way you could do it (if I understand what you want) This assumes you are using the ui-template node.

First you have to use msg.topic (or something else) to pass an even or odd value and with the payload (which is the image location) Next you have to add an ng-style to both <a…> statements like this:

<a ng-style="{display: (msg.topic || 0) % 2 === 0 ?  'none' : 'block'}" href="http://192.168.1.156:8081" target="_blank">Local</a>
<a ng-style="{display: (msg.topic || 0) % 2 === 0 ?  'block' : 'none'}" href="http://mydomain:8081" target="_blank">Remote</a>

What this will do is if the value is ODD, the <a…> for the local camera will display and the <a…> for the remote will NOT display. If the value is EVEN, the <a…> for the remote camera will display and the <a…> for the local will NOT display.

This is my test flow showing this you will have to change the url for your image in the change node:

[{"id":"f9e3e4e8.c9d9a8","type":"ui_template","z":"9728229a.e316b","group":"c802ad.2e912d5","name":"","order":0,"width":"9","height":"9","format":"<div>\n<a ng-style=\"{display: (msg.topic || 0) % 2 === 0 ?  'none' : 'block'}\" href=\"http://192.168.1.156:8081\" target=\"_blank\">Local</a>\n<a ng-style=\"{display: (msg.topic || 0) % 2 === 0 ?  'block' : 'none'}\" href=\"http://mydomain:8081\" target=\"_blank\">Remote</a>\n<img src= {{msg.payload}} width=\"280\"><br/>\n\n</div>\n","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":460,"y":160,"wires":[["e9e45c4.75022a"]]},{"id":"10695bd2.a74f54","type":"inject","z":"9728229a.e316b","name":"Local Camera","topic":"","payload":"1","payloadType":"num","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":150,"y":80,"wires":[["888b7571.b440c8"]]},{"id":"c97db1ce.df44e","type":"inject","z":"9728229a.e316b","name":"Remote Camera","topic":"","payload":"2","payloadType":"num","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":160,"y":220,"wires":[["888b7571.b440c8"]]},{"id":"e9e45c4.75022a","type":"debug","z":"9728229a.e316b","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","x":680,"y":160,"wires":[]},{"id":"888b7571.b440c8","type":"change","z":"9728229a.e316b","name":"","rules":[{"t":"move","p":"payload","pt":"msg","to":"topic","tot":"msg"},{"t":"set","p":"payload","pt":"msg","to":"http://localhost/pmw.jpg","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":280,"y":160,"wires":[["f9e3e4e8.c9d9a8"]]},{"id":"c802ad.2e912d5","type":"ui_group","z":"","name":"Default","tab":"40e4dd7b.57ed44","disp":true,"width":"12","collapse":false},{"id":"40e4dd7b.57ed44","type":"ui_tab","z":"","name":"Home","icon":"dashboard"}]
3

Hello Senofmud

Thanks a lot for your help, I tried and this is not exactly what I’m trying to do.

The target is to be able to clock on the video directly and this should open directly on a blank the address received as {{msg.payload}}.(that actually is what is shown as video.

Regards

5

Ohh, in that case it is simple - msg.payload contains the link you want to go to and the is what you are looking at and going to click:

<div>
<a  href="{{msg.payload}}" target="_blank"><img src="http://localhost/pmw.jpg" width="280"></a>
</div>
1 Like
6

Ohhhhhhhh thanks a lot :slight_smile: I own you a beer

7

I believe you can just replace your “Camera 1 xxxx” string with the <img ...> element
to make the image “clickable” (untested):

<div>
    <a href="{{msg.payload}}" target="_blank">
        <img src="{{msg.payload}}" width="280">
    </a>
</div>

You don’t say what the incoming payload contains exactly, but assuming it is a url of either http://192.168.1.156:8081 or http://mydomain:8081 then you should be able to include it directly into the href attribute as well as the image src attribute.

1 Like
8

Aha! - Paul, you beat me to it…

1 Like
9

Thanks guys, I already started from the sample from zenofmud but replacing the http://localhost/pmw.jpg by msg.payload to match what I was looking for.

Regards