Node Red: A widget based dashboard working with Homey trough MQTT

@Satoer

How did you manage to scale the Dashboard for your ipad. No matter how much i shuffle or change formats, it keeps looking like Frankenstein.

On PC:

ON IPAD 2:

Look if you can find the API documentation of Hikvision camera’s.

I have a doorbird and can use calls to see streaming video, or collect snapshots.

Streaming video, doorbel (snapshot when someone rings and just a motion snapshot (the last motion picture).
http://192.168.x.x/bha-api/video.cgi?http-user={your userid}&http-password={your password}
http://192.168.x.x/bha-api/history.cgi?event=doorbell&index=1?http-user={your userid}&http-password={your password}
http://192.168.x.x/bha-api/history.cgi?event=motionsensor&index=1?http-user={your userid}&http-password={your password}

Maybe here:
https://www.hikvision.com/Support/Downloads/SDK

A template for the camera
[{"id":"829f50ca.1a254","type":"ui_template","z":"ae3ce1f2.c696d","group":"92785f6b.fb5af8","name":"Doorbird IP Cam live","order":3,"width":9,"height":7,"format":"<html>\n <center>\n \t\t<img src=\"http://192.168.x.x/bha-api/video.cgi?http-user={your userid}&http-password={your password}\" width=\"460px\"/>\n </center>\n</html>","storeOutMessages":true,"fwdInMessages":false,"templateScope":"local","x":120,"y":840,"wires":[[]]},{"id":"92785f6b.fb5af8","type":"ui_group","z":"","name":"Camera's","tab":"ac2a9b06.c631b","order":1,"disp":true,"width":"27","collapse":false},{"id":"ac2a9b06.c631b","type":"ui_tab","z":"","name":"Experimenten","icon":"dashboard","order":3,"disabled":false,"hidden":false}]

My guess is that your iPad 2 is too old (specifically the browser).

@robertklep

I really wish that was the case. But unfortunately i have tried on a Samsung A10 tab, Ipad mini, Iphone XR and none of them are acceptable enough to use. I tried to move them around, change width, but there is just no way to get them properly alligned, or even slightly towards what @satoer has shown on his initial post.

I have absolutely no idea how you managed to get a totally different template on the ipad compared to the web browser.

It works fine on my iPad2 (the second iPad, not the air 2) running iOS 9.3.5
There are a couple of small problems though, that I still need to fix. The slider controls are less long than the should be. And sometimes the button’s don’t react on a touch, but got selected. The buttons have a “hover” state, and when you quickly touch a button it shows it’s hover state instead of a click. Probably a piece of javascript can fix it.

I did remove touch scrolling from the page, so the page does not slide up and down when you accentually slide your finger. Makes it more behave like an app. You can still swipe to a different tab.
if you want this: add this piece of script inside a (blue green) template node (add to the head section option):

<script>
document.ontouchmove = function (e) {
  e.preventDefault();
}
</script>

I changed the color myself in between taking pictures, but that’s not the point. it’s the layout thats shifting like crazy. yours is properly boxed inside of a square. Mines looks like an unorganized compiled dashboard. i can try to disable scrolling, maybe it will automatically resize to fit in one page.

Are you using a content blocker or PiHole or something like that?

Nothing. We don’t have anything special installed, no ADD blockers.

Node red is running on Rasbian, on a Pi 3b+.

Tested on:
Iphone XR (both landscape / portrait mode)
Ipad 2
Ipad mini (latest)
Samsung tab A10
Rasbian internet explorer (Fits same way as desktop)
Windows 10 Chrome (shows correctly)

Should they normally look exactly the same? - i mean on Tablets, phones and PC?
the '‘result’ im seeing on the tablets is similar to the effect i have on desktop when i change web page size % (by pressing Ctrl + scroll wheel)

It looks the same, but the layout changes based on the resolution. On the iPad2 3 groups fit beside each other, but on my iPhone11 Pro Max the groups get stacked on top of each other (in portrait). On my iPad pro 4 beside each other (in landscape) and iPad air2 3 groups beside each other. On all devices it looks good.
These are the settings I used to fit exactly 3 groups beside each other on the iPad 2:

  • every group is “6” units width (or 12 or 18)

hi friends of nodes :slight_smile:

I would like to send values via mqtt to my awtrix display - but I do not know how to bring a value of my mqtt source to the mqtt output order

I would like to fill the “pv wert” with the mqtt value…

{
“ID”: 1,
“icon”: 350,
“text”: “pv-wert”,
“color”: [
60,
255,
0
]
}

any ideas?

Hi,
First, we can’t test the JSON code you posted. The code is soiled with text formatting. for example, the quotes are changed to smart quotes:
this " to this If you paste code, make sure you keep the formatting. (best is to edit the original post with the edit post button, instead creating new posts)

Looking at the mqtt value you want to send, it is just a Javascript object with variables and a array.
Javascript object explaining:
https://www.w3schools.com/js/js_objects.asp
Javascript aray explaining:
https://www.w3schools.com/js/js_arrays.asp

You can use a function node:
afbeelding
to create the object in the msg.payload (and send it with the mqtt out)

thx a lot @Satoer

Tom Scott just made an interesting video about this :grin::

1 Like

Hi after following the tutorial serveral times can anyone help me? what i am doing wrong? when i switch the light button nothing happens… on / off

Hi, first of all I would change the topic:
afbeelding
in something more reasonable inside the Homey MQTT hub. You will get a migraine if you need to remember/type this topic every time you add a control. (Don’t forget to restart Homey MQTT hub after that).

I see you have the MQTT receiver connected to a debug node. So you see MQTT messages appear in the debug window when you switch the light?
did you add /set behind the lightname/onoff?

I may need a little bit of help over here. I have a couple of Foscam camera’s (FI9900P) at home and can get a snapshot of my camera. The URL for the snapshot is as follows:

http://IP:PORT/cgi-bin/CGIProxy.fcgi?cmd=snapPicture2&usr=USERNAME&pwd=PASSWORD

But when i use this part:

msg.payload = “http://IP:PORT/cgi-bin/CGIProxy.fcgi?cmd=snapPicture2&usr=USERNAME&pwd=PASSWORD?”+Math.random();
return msg;

It tries to get a picture every second but it will not work due to the fact that my password is not correct. This because there is a random number added at the end.

Does anyone have a working solution for this? It would really contribute to my dashboard :smile:

OK, I’ve tried a lot, but I can’t figure it out. I’m hoping someone is willing to help, because I got some rookie questions. I’ve recently got a Foscam and a Synology NAS. I managed to run Node Red on the NAS via Docker. I still need to transfer my existing dashboard from my android device to the NAS, but that’s another story.

I’m trying to get a video stream in the Node Red dashboard. More specifically, the Foscam transmits and RTSP-stream. The Surveillance Station receives this and, so it seems, is capable of sharing the stream path. This is either RTSP or RTSP over HTTP. I’m guessing this won’t do the trick, as this is not an MJPEG stream. Roco explained to me before that he used an MJPEG stream in an example, when I asked about streaming the video to Chromecast.

So I started looking around (thank you Google) and found out I needed to use VLC or similar to convert the stream from RTSP to something Node Red can actually display. What would be the easiest way to display the feed in Node Red? Can’t my NAS transcode the video stream live, won’t it get terribly slow? And what nodes to use in Node Red, once I get a readable stream. I’m guessing http in to (dashboard) template out? I’m probably in over my head on this one, but I would like to try this.

Just to clarify, I don’t want to install VLC on my laptop, as this means the laptop should always be up and running in order to transcode the video. I’d prefer the NAS to do the transcoding, if possible.

Hehe i changed it directly. Thanks dot that. The light switches are working now :grin:

Can you tell me how did you configure the panel with Light bulbs icons etc. I want to made this too. image

Instead of a question mark, use an ampersand after PASSWORD:

msg.payload = "http://IP:PORT/cgi-bin/CGIProxy.fcgi?cmd=snapPicture2&usr=USERNAME&pwd=PASSWORD&"+Math.random();

You can change the icons in the settings of the switch. Also, take a look at the help bar in the editor. There’s lot’s of helpful information over there. For example where to look for icons.


How to wire those nodes, so the node gets switched and is able to switch, I really encourage you to take a look at the tutorial in the first post. This part: