Trying to display a base64 image from webcam on dashboard

Dashboard
1

I have seen a few suggestions on here to display a camera picture (base64 grabbed from my cam via the onvif node), on the dashboard. None seem to work for me, I imported a couple of flows with variations of the template node, but none display a picture.
This is the last function node with template I tried:


[{"id":"36238576.a6929a","type":"template","z":"70856be3b8bea8cd","name":"","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<img width=\"320px\" height=\"240px\" src=\"{{{payload}}}\">","output":"str","x":560,"y":400,"wires":[["1ab473af56702995"]]},{"id":"1ab473af56702995","type":"ui_template","z":"70856be3b8bea8cd","group":"c7a43587.2944e8","name":"","order":7,"width":"0","height":"0","format":"<div ng-bind-html=\"msg.payload\"></div>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":740,"y":400,"wires":[[]]},{"id":"c7a43587.2944e8","type":"ui_group","name":"Default","tab":"fbd536a.22bf9c8","order":1,"disp":true,"width":"6","collapse":false},{"id":"fbd536a.22bf9c8","type":"ui_tab","name":"Home","icon":"dashboard"}]

This is a partial grab from the debug node

image

2

The base64 image is in msg.payload.image.base64 according to your screenshot

Also if you set output of template node to msg.template

nodes help info.

Using msg.template:
You can also define the template content via msg.template , so you can use external files for example.
Template will be reloaded on input if it has changed.
Code written in the Template field will be ignored when msg.template is present.
e.g.

[{"id":"36238576.a6929a","type":"template","z":"452103ea51141731","name":"","field":"template","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<img width=\"320px\" height=\"240px\" src=\"{{{payload.image.base64}}}\">","output":"str","x":283.00000762939453,"y":3980.0001182556152,"wires":[["1ab473af56702995"]]},{"id":"1ab473af56702995","type":"ui_template","z":"452103ea51141731","group":"c7a43587.2944e8","name":"","order":7,"width":"0","height":"0","format":"","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":463.00000762939453,"y":3980.0001182556152,"wires":[[]]},{"id":"c7a43587.2944e8","type":"ui_group","name":"Default","tab":"fbd536a.22bf9c8","order":1,"disp":true,"width":"6","collapse":false},{"id":"fbd536a.22bf9c8","type":"ui_tab","name":"Home","icon":"dashboard"}]
3

Thats working. Is there a way to resize the picture (make it bigger) ? I tried changing the size by adjusting the template image size, but that didnt work. Also tried adjusting the width in the onvif node, but that didnt work either. I guess the image size is given by what the camera sends ?
It is sending a x value of 240 and 7 of 180 in msg.payload.config. I guess thats the image size coming from the camera ? It does not look as if I can change it in the camera

4

I actually managed to change in in the camera, now its I think 250x320px. And adjusting the layout in dashboard layout has increased the size of the displayed picture.

5

A quick google will give you many ways to size a image using html/css

6

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.