Show Camera Image on Dashboard

Dashboard
21

Just wanted to report I've got my AI detection images showing on the dashboard. I'm clearly not understanding some issues with dashboard, but its more than usable, its close to exactly what I'd envisioned with minimal effort!

When I view the UI in chromium I get my three elements in a single row and have a scroll bar below the resized image.

On my cell phone it works exactly as I'd have hoped it would. My three elements are are in a column and the image zooms when I pinch expand. Although it still seems to have a bit of a "scroll" to it in the image "window".

Works wonders for setting up the camera view on the headless "stand-alone" software only AI system I plan to loan out to friends and neighbors when they are away.

Obviously I've more to learn to get the exact behavior I want or understand why I can't, but like most of my experience with node-red I'm finding the default behaviors to be very reasonable and usually just fine.

Thanks all!

22

thx sir its working on my node :slight_smile:

23

Hello, I am just trying to get a live feed from my Raspberry Pi camera to show up on my Node-Red Dashboard. Did I miss it here? Has anybody accomplished that? Please share code if so! Thank you!

24

@WillWelker did you create a folder called videostream ? or does it only work with IP camera and not with a rpi camera ?

25

The best I'm able to do is this flow:

[{"id":"975a228f.06f2b","type":"tab","label":"Flow 1","disabled":false,"info":""},{"id":"44ba5bee.acd204","type":"mqtt in","z":"975a228f.06f2b","name":"ImageBuffer","topic":"ImageBuffer","qos":"2","broker":"cbadd1a9.3d104","x":255,"y":140,"wires":[["5fba3fdf.5bb5","dfc4657e.b2c108"]]},{"id":"5fba3fdf.5bb5","type":"base64","z":"975a228f.06f2b","name":"","action":"str","property":"payload","x":420,"y":140,"wires":[["6c2036ee.d49e58"]]},{"id":"6c2036ee.d49e58","type":"template","z":"975a228f.06f2b","name":"","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<img width=\"640px\" height=\"360px\" src=\"data:image/jpg;base64,{{{payload}}}\">","output":"str","x":560,"y":140,"wires":[["8559876e.01d588"]]},{"id":"8559876e.01d588","type":"ui_template","z":"975a228f.06f2b","group":"a6261a09.c4c278","name":"Viewer","order":1,"width":"13","height":"7","format":"<div ng-bind-html=\"msg.payload\"></div>","storeOutMessages":false,"fwdInMessages":true,"templateScope":"local","x":700,"y":140,"wires":[[]]},{"id":"be21baae.f2dda8","type":"mqtt in","z":"975a228f.06f2b","name":"ImageName","topic":"ImageName","qos":"2","broker":"cbadd1a9.3d104","x":250,"y":190,"wires":[["dfc4657e.b2c108","b1e9ab15.712cd8"]]},{"id":"dfc4657e.b2c108","type":"debug","z":"975a228f.06f2b","name":"","active":false,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","x":435,"y":245,"wires":[]},{"id":"b1e9ab15.712cd8","type":"ui_button","z":"975a228f.06f2b","name":"filename","group":"a6261a09.c4c278","order":2,"width":"12","height":"1","passthru":true,"label":"{{msg.payload}}","tooltip":"","color":"#101010","bgcolor":"#83ed7b","icon":"","payload":"","payloadType":"str","topic":"","x":415,"y":190,"wires":[[]]},{"id":"cbadd1a9.3d104","type":"mqtt-broker","z":"","name":"","broker":"ai_i5","port":"1883","clientid":"","usetls":false,"compatmode":true,"keepalive":"60","cleansession":true,"birthTopic":"","birthQos":"0","birthPayload":"","closeTopic":"","closeQos":"0","closePayload":"","willTopic":"","willQos":"0","willPayload":""},{"id":"a6261a09.c4c278","type":"ui_group","z":"","name":"Group","tab":"982adac1.e01448","order":null,"disp":true,"width":"14","collapse":false},{"id":"982adac1.e01448","type":"ui_tab","z":"","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]

But it does drop connections from time to time. There has been lots of discussion about long duration dashboard connections dropping. No solution has worked for me so far.

I'm sending jpeg images as mqtt buffers as ImageBuffer MQTT topic to localhost broker on the Pi.

Python code reads the camera, runs Movidius AI person detection, and pushes the results out as jpeg images via mqtt buffers.
I'm sending the file name as a separate topic for reasons you probably aren't interested in.

Hope this helps

26

@dceejay Dceejay’s post seems to be the authoritative answer to the problem of refreshing an image on the dashboard.

I tried that suggestion, but couldn‘t get it to work and found it a little bit difficult to troubleshoot. The task at hand is to refresh a jpg image, which us stored in httpStatic on the dashboard whenever the file changes.

I tried that solution, but it just wouldn‘t show on the dashboard. When I tried to look at the debug output, i could really see discern what the cause of the error could be. I don‘t really have a clue where to look. The image file itself is ok. Therer is some base64 output, but it is truncated in the debug window. Therefore I could check that. It‘s probably something so elementary that I am being really stupid. TLDR: image doesn‘t show up on dashboard. Any ideas?

I‘d appreciate your input very much.

27

To anyone reading this: It was indeed a simple layout mistake. I was barking up the wrong tree. The image was inserted into http://localhost:1880/ui/#!/1 instead of „0“.

Now it‘s working. Thank you, @dceejay, for posting the working example code.

28

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