Me neither, horrible language!
Thanks for the encouragement.
I'm currently looking at SVG so I coded it as SVG text and rectangles with some styling in CSS because inline styling is horrible.
I have used simple named colours for the rectangle outlines but for the fill I chose HSL in order to tone down the vibrancy. You can use hex codes or named colours if you want to simplify it.
[{"id":"4846f1fc87161f68","type":"group","z":"49865e23ad9648f2","style":{"stroke":"#0722fc","stroke-opacity":"1","fill":"none","fill-opacity":"1","label":true,"label-position":"nw","color":"#0722fc"},"nodes":["abd23fb48ed36ac6","695cb4a29d66f302","f1b333c82e6225bf","2a9ac5606e99e527"],"x":34,"y":199,"w":572,"h":122},{"id":"abd23fb48ed36ac6","type":"ui_template","z":"49865e23ad9648f2","g":"4846f1fc87161f68","group":"149d3845ab5f0780","name":"Vertical level","order":14,"width":"0","height":"0","format":"<div class=\"myrectangles\">\n<?xml version=\"1.0\" standalone=\"no\"?>\n<svg width=\"240\" height=\"200\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\">\n\n<!-- Labels \nOriginally I had eg <text x=\"25\" y=\"146\" font-size=\"12\" text-anchor=\"middle\" fill=\"black\">50%</text> \nbut moved as much as possible to CSS template -->\n<text x=\"25\" y=\"26\">100%</text>\n<text x=\"25\" y=\"66\">80%</text>\n<text x=\"25\" y=\"106\">75%</text>\n<text x=\"25\" y=\"146\">50%</text>\n<text x=\"25\" y=\"186\">25%</text>\n\n<!-- Rectangles \nwidth and height controlled by CSS. Corner radius can't be defined in CSS for SVG v1.1 -->\n<rect x=\"60\" y=\"6\" rx=\"3\" ry=\"3\" stroke={{msg.outline[4]}} fill={{msg.color[4]}}></rect>\n<rect x=\"60\" y=\"48\" rx=\"3\" ry=\"3\" stroke={{msg.outline[3]}} fill={{msg.color[3]}}></rect>\n<rect x=\"60\" y=\"88\" rx=\"3\" ry=\"3\" stroke={{msg.outline[2]}} fill={{msg.color[2]}}></rect>\n<rect x=\"60\" y=\"128\" rx=\"3\" ry=\"3\" stroke={{msg.outline[1]}} fill={{msg.color[1]}}></rect>\n<rect x=\"60\" y=\"168\" rx=\"3\" ry=\"3\" stroke={{msg.outline[0]}} fill={{msg.color[0]}}></rect>\n\n</svg>\n</div>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":510,"y":280,"wires":[[]]},{"id":"695cb4a29d66f302","type":"ui_template","z":"49865e23ad9648f2","g":"4846f1fc87161f68","group":"be8cd6b09a8d7d5d","name":"CSS","order":14,"width":0,"height":0,"format":"<style>\n .myrectangles {\n background: white;\n }\n .myrectangles svg rect {\n stroke-width: 2;\n rx: 3;\n ry: 3;\n width: 120px;\n height: 25px;\n }\n .myrectangles svg text {\n font-size: 12px;\n text-anchor: middle;\n stroke: black;\n }\n</style>\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"global","className":"","x":490,"y":240,"wires":[[]]},{"id":"f1b333c82e6225bf","type":"ui_slider","z":"49865e23ad9648f2","g":"4846f1fc87161f68","name":"Slider","label":"Value","tooltip":"","group":"149d3845ab5f0780","order":6,"width":0,"height":0,"passthru":false,"outs":"all","topic":"topic","topicType":"msg","min":0,"max":"100","step":1,"className":"","x":110,"y":280,"wires":[["2a9ac5606e99e527"]]},{"id":"2a9ac5606e99e527","type":"function","z":"49865e23ad9648f2","g":"4846f1fc87161f68","name":"Set levels and colours ","func":"msg.color = [\"none\",\"none\",\"none\",\"none\",\"none\"]\nmsg.outline = [\"green\", \"green\", \"green\", \"orange\", \"red\"]\nif (msg.payload >= 100) msg.color[4] = \"hsl(0, 100%, 70%)\" // fifth bar at 100\nif (msg.payload >= 80) msg.color[3] =\"hsl(50, 100%, 70%)\" // fourth bar at 80\nif (msg.payload >= 75) msg.color[2] = \"hsl(120, 100%, 70%)\" // third bar at 75\nif (msg.payload >= 50) msg.color[1] = \"hsl(120, 100%, 70%)\" // second bar at 50\nif (msg.payload >= 25) msg.color[0] = \"hsl(120, 100%, 70%)\" // first bar at 25\nreturn msg;\n","outputs":1,"timeout":0,"noerr":0,"initialize":"","finalize":"","libs":[],"x":300,"y":280,"wires":[["abd23fb48ed36ac6"]]},{"id":"149d3845ab5f0780","type":"ui_group","name":"SVG4","tab":"ebc8e3375c3f2aa1","order":4,"disp":true,"width":"6","collapse":false,"className":""},{"id":"be8cd6b09a8d7d5d","type":"ui_group","name":"Labels","tab":"704020d306ae5506","order":1,"disp":false,"width":2,"collapse":false,"className":""},{"id":"ebc8e3375c3f2aa1","type":"ui_tab","name":"SVG","icon":"dashboard","disabled":false,"hidden":false},{"id":"704020d306ae5506","type":"ui_tab","name":"ESP BME","icon":"dashboard","order":1,"disabled":false,"hidden":false}]
