Using The Node-Red Template UI Node or Widget

[@KonstantinSamoylov]

Thanks so much for the explanation! I was confused with ng-bind and different templates. It's so much clearer now.

[@Friendsincode]

Thank you for your time and sharing this information and video.

[@HeinzRuetschi]

Thank you very much Steve! That's what I was looking for. In the meantime I realised, that one needs also some understanding of html, css and javascript when getting more involved. However, your videos do help a lot, great work!

[@daveferrier723]

Hi Steve, Your Node-Red videos are extremely helpful. Keep up the great work. I was attempting to develop my first bit of automation with Node-Red and was having issue with the formatting of some simple log text I was importing from the Pi3. The text ui was messy, I had issues with getting the list ui to work. I just now watched your video on templates and it clicked in. My project is off and running very smoothly now. Thanks again.

[@stevecope]

Glad to be of help. Good luck with your project

[@barnabeahouansouha5225]

Thank you for the video. I want to know how to use for loop instead of specifying payload[0], payload[1]... 8:43 and 11:35

[@BGazzah]

Would you be better off using the ng-repeat for the sensor data, so if there are more or fewer it will still display OK? Or maybe I'm pre-empting the next video ....

[@abhishekshaw3775]

Hi Steve, is it possible such that we can have a automated flow creation, for example if we connect any no of temperature sensor it should dynamically create a flow which will add a temperature gauge to ui dashboard.

[@stevecope]

Yes you can dynamically add new sensors provided that are easily distinguished. The technique I use is to add them to an object and then when tou get anew reading from a sensor you test to see if an object with that name exists and if so you just add the data if not you create the object and add the data. if you contact me stevesnoderedguide.com/ask-steve I will try to extract the relevant code form on of my flows and send it to you. Rgds Steve

[@hakimben-ameurelyoubi9301]

Thank you steve

[@hakimben-ameurelyoubi9301]

We need also uibuilder thank you alot

[@AndyKong51]

It seems the template node is just like a function node. It took me a long time to eliminate the template scroll bar when I display streaming video, is there any easier way... Thx

[@kaakos9273]

is there anyway to manipulate (i mean DOM ) the element inside Html according to the recieved ms.payload ??? i am working on this matter but i didn't find a solution ??? simply said : i connected a rotary encoder to ESP32 and i manged to show the data on dashboard gauge in node red but now i am trying for example to change the .body.style.backgroundcolor of a div in html node based on the received message from rotary encoder ???????????? thank you very much for you wonderful channel

[@stevecope]

Yes the easiest way is to use a class on the element to style it and use class={{name}} in the template node. there is a small example in the help for the node. If you are still struglling use the ask steve page on the site www.steves-internet-guide.com/ask-steve/ to contact me and I will try to put an example together. rgds steve

[@MaHdI147100]

how to use image in template

[@stevecope]

You need to add them using the img tag and place them in your httpStatic folder which you set in the settings file. I do have an example if you need one contact me on the ask steve page steves-internet-guide.com/ask-steve/ rgds steve

[@nonsuch9301]

Sorry but this is making no sense to me at all - can you please explain. What the prereqs are for using the ui widget and what you are clicking on to see the table !!!

[@stevecope]

Can you point me to the time in the video and I'll try to explain. Rgds Steve

[@nonsuch9301]

@@stevecope Steve , try 5:38

[@stevecope]

The table whether you create it in the html template or UI template is pure HTML. see around 8:35 All styling is done in the UI template node. Not sure what you mean by prereqs rgds steve