Greetings,
I'm currently developing the first version of node-red-contrib-ui-media. The main idea with this node is to create an easy way to display videos and images on the dashboard.
All 'constructive' feedback is welcome before I publish it on npm. For now you can install it directly from GitHub
npm install netsmarttech/node-red-contrib-ui-media
This node uses new Dashboard API (it is a Widget) introduced in version 2.10.0
(announcement ). So, use it with latest version of Node-RED dashboard.
Cheers
6 Likes
Hi @steuck13,
Nice !!!
This is so a coincidence. I started last night on a new node-red-contrib-ui-camera node, to display streaming video from camera's. I had already added the option for playing video file (like your node), but it didn't really fitted into my 'camera' concept. So I'm glad you have published your node, so I can remove the video file part from mine and focus 100% on camera's.
BTW I see you also added already a 'loop' and 'show controls' option, so I have nothing further to add. Great contribution ...
Bart
Hi @steuck13,
I have some layout troubles with my own node, and you seem to have solved them in your code...
I would appreciate very much if you could explain why you have used the following settings:
<style>
video{
width: 100%;
height: auto;
max-height: 98%;
position: relative;
top: 50%;
transform: translateY(-50%);
}
</style>
<video id="${video_name}" src="${path}" ${controls_string}
My CSS knowledge is rather limited ...
Thanks a lot !
Bart
Sure, no problem, I don't know that much but I'll try
width: 100%;
height: auto;
Here we define that the video element will fill the whole horizontal space available on the parent element and the height will adjust automatically. You´ll see this a lot when people try to make an element responsive to resizing.
max-height: 100%;
Since height is automatically set, I defined that the video height can be no bigger than 100% of the parent element size. If I'm not mistaken, this means that if the parent element have the same width as the video but a smaller height, the video will scale down by the height instead of overflowing and showing scroll bars.
position: relative;
top: 50%;
transform: translateY(-50%);
This is a tricky one. In some cases I found out that the scroll bar still appear, usually because a few pixels overflowed. When you transform an element the sizes are adjusted because of the movement, so I used this trick to eliminate the scroll bar on these rare cases.
Cheers
1 Like
Hello all,
the node-red-contrib-ui-media was finally published on NPM!
@knolleary, could you please make it available in the flows page? Thanks!
@machadotiago it is a completely automated system - apart from when something breaks.
So as long as you have followed the docs on how to package your node it will appear.
In this case, your node does not have node-red listed as a keyword so it will not get listed by the flow library.
Version 1.0.3 is available! You can now download it directly from the pallet 
I'm getting Cannot read property 'projects' of undefined on line 29 from the ui_media.js file. Might need a bit more eroor trapping.
Greetings
Would you mind listing the steps that lead to that error?
Thank you
Just installed it as per instruction and wondered why it didn't show up in the node pallete. Ran Node-RED with -v option to debug it and that showed up in the output. I'm running it on a Raspberry Pi with version 0.20.3 of Node-RED.
Have you refreshed your browser?
We’ve identified where the problem is. It happens if you don’t have a setting.js file, or if your settings file doesn’t have the “editorTheme.projects” property.
We will fix that in the next days.
If you want a workaround just use the standard NodeRED settings file and it should work.
Thanks, I'll take a look at the next release.
The settings.js file is always there, however the "editorTheme.projects" property is optional and isn't in the standard settings.js file when Node-RED is installed.
@steuck13, hello I'm currently testing your node and I came across a problem: if the httpAdminRoot path in the settings file is set to something else than / then the upload feature fails with "Error API: Not found" message.
The fix is quite easy, replace line 293 in ui_media.html with
var link = "uimedia/" + category + "/" + filesToUpload[0].name;
(this removes the leading /)
For the image to display properly in the UI/Dashboard, replace line 446 in ui_media.js with
link = RED.settings.get("httpAdminRoot") + '/uimedia/' + config.category + '/' + config.file;
I haven't searched if other changes were needed. You know your code better than me and you'll know what to do and where 
1 Like
Some suggestions while playing with your node:
Line 505 in ui_media.js, margin: 0, auto is invalid CSS. You probably want to remove the comma.
Lines 281-282 could be replaced with res.sendFile(pathImage); as it would then use an appropriate MIME type instead of media/* (except if creating a stream has any advantage over sendFile when serving a video ? then I would check the file extension and set the appropriate MIME type accordingly).
Line 89, add svg in your regex and now your node also supports svg files (these need to be served with res.sendFile() though -- don't know why)
If the CSS of the div enclosing the img was set to display:grid you could use justify-items and align-items properties and propose to the users of your node the ability to justify/align the image within the div (all 9 positions) and even stretch it ! Probably more easily than with the switch/case you used for the adjust/center/expand/side options.
Lines 603-612 of ui_media.js: find a way to move this style to the <head> section of the dashboard to avoid unneeded repetition. Also use another selector than just video as this will target all <video> tags on the dashboard, including those that would have been added using an ui_template node for instance.
Line 475 of ui_media.js: same as above; move the script to the <head> section so it appears only once in the source file of the dashboard and use an inline onclick in your HTML like onclick="getImageXY(event, this)"
That's all for now ! Great work !
Why is the "center" option with a background-size of 200% ?
Greetings
Just released a minor version with some bug fixes.
If newer bugs appear, please feel free to report here or on github.
Thank you
I was try remove the leading /. But i get Error API:Not found.
Thanks for your node! I can get it to work by locating files and uploading them using your Files panel
in configuration. I can't seem to display a local file using the payload or src properties of the payload.
I've used combinations like:
msg.src = "http://localhost/home/pi/Pictures/pic_....jpg"
msg.payload = "src/http://localhost/home/pi/Pictures/pic_....jpg"
msg.src = "/home/pi/Pictures/pic_....jpg"
msg.payload = "src/home/pi/Pictures/pic_....jpg"
I hope you will be able to point me in the right direction.
Thanks!
If they are being served up by Niode-RED you probably need the port 1880 in there
