Help with making a volume gui widget with no html knowledge


  1. i am totally new and learning node-red.
  2. i have no programing exp. nor html exp.
    I'm learning stuff on the fly.
    so with that any help i can get with my project will be appreciated. however i am not asking for someone to do completely for me i need to know how to do myself so i can grow. but what i do need is a nudge or as my wife would say a hard shove off the cliff.
    I own a brewery and right now while not allowed to have indoor customers i started learning node-red.
    to customize my brewing system to be more visual and eyecandy.
    what i have done so far.
    I have a group that turns pumps on and off ,
    group 2 turns on water supply
    group 3 shows the temperatures of my boil kettles
    group 4 shows the temps of fermenters.
    right now its basic and works however this is what i need help with.
    I have been envisioning tanks on my screen and as i am filling them up the gui will show a visual level of the liquid, changing color depending on the actual temp of the liquid(blue cold, red hot).
    also displaying to the right of the tanks the actual volume in gallons and actual temperature.
    eventually as i learn my ultrasonic sensors ill add them to my fermenters as well because they are enclosed.
    i don't know any html coding so can i use a regular html editor to have the basic visual done or do i need to write complete code, meaning i have to learn html first.
    whats the best direction, and or am i way over my head and i should stick to just making the beer? lol

Well if you want to avoid html and all that then you can probably get away with customising the built in level gauge widget.
By default is looks like

but you can add a ui_control property to the message to customise many of the parts including colours etc.. for example

Example flow below...

[{"id":"ce809e.d3996f6","type":"inject","z":"cca8d493.5a61e8","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"50","payloadType":"num","x":180,"y":570,"wires":[["68085e5a.c0c4"]]},{"id":"68085e5a.c0c4","type":"function","z":"cca8d493.5a61e8","name":"","func":"msg.ui_control = {\n    options: {\n        circleColor:\"#FF7777\", \n        textColor:\"#FF4444\", \n        waveTextColor:\"#FFAAAA\", \n        waveColor:\"#FFDDDD\", \n        circleThickness:0.1, \n        textVertPosition:0.25, \n        waveHeight:0.05, \n        waveCount:8\n    }\n}\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":375,"y":570,"wires":[["a71c000b.e3c62"]]},{"id":"a71c000b.e3c62","type":"ui_gauge","z":"cca8d493.5a61e8","name":"","group":"d16ec6fc.4da508","order":7,"width":0,"height":0,"gtype":"wave","title":"IPA","label":" %","format":"{{value}}","min":0,"max":"100","colors":["#00b500","#e6e600","#ca3838"],"seg1":"","seg2":"","x":560,"y":570,"wires":[]},{"id":"d16ec6fc.4da508","type":"ui_group","name":"Group 1","tab":"20934cee.3e6c14","order":1,"disp":true,"width":8},{"id":"20934cee.3e6c14","type":"ui_tab","name":"Tab 1","icon":"dashboard","order":1,"disabled":false,"hidden":false}]

And of course as you could change those colours dynamically if you wish. And there are many more options that could be set - D3 Liquid Fill Gauge -

I like the circle however whats easiest way to convert this or merge the 2 together.14EE2ECCEBAC49029C5E864061F369FB.png

It's good to be ambitious... but yeah ... you would have to crack open the html and javascript and probably svg books for that.

So here is a couple of ideas I was thinking

So I may at this point really need to have someone help with the widget. Or I may be a few months out so I can learn more of html. And js.

Sorry today is brew day so I am scatter brained.

I actually can’t find the built in level gauge widget what is its actual node name?


OK so the beauty of Node Red is that you can build something in stages.

Start with the basic guages and build on them, get all your logic and reporting of data correct (hint grafana and influx DB will be fun for you in terms of graphs etc)

Then slowly start learning how to put together the graphics etc.

There is a lot to unpack in those graphics and how to get them exactly how you want (and i am not a graphics guys so can not help much there)

There are lots of guys on here who are very very good with SVG etc - so ask them pointed questions as you proceed and build it a little at a time