# An oldshcool gauge

**URL:** <https://discourse.nodered.org/t/an-oldshcool-gauge/72313>\
**Category:** Dashboard\
**Tags:** node-red-dashboard, ui-widgets\
**Created:** [16 December 2022 12:06 UTC](https://discourse.nodered.org/t/an-oldshcool-gauge/72313 "2022-12-16T12:06:51Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [16 December 2022 12:06 UTC](https://discourse.nodered.org/t/an-oldshcool-gauge/72313/1 "2022-12-16T12:06:51Z")

</div>

Just for fun.

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/a/f/af34af7c0165c3bcbf3c44d8983ef46f8a0c5aa0.png)

```auto
[{"id":"1e1a0b8d6b5f1c5a","type":"ui_template","z":"bf0d83d32eec75c2","group":"55888982bdd0637f","name":"oldscool-gauge with blue negative digits","order":6,"width":"6","height":"1","format":"<style>\n .negative-blue .fg-num:nth-child(-n+3) {\n color: #0052d7;\n }\n</style>\n<div ng-init=\"init()\" id=\"{{'fg_'+$id}}\" class=\"fg-body\">\n <div class=\"fg-display\">\n <div class=\"fg-backplate\">\n <div class=\"fg-numbers\"> \n </div>\n </div>\n <div class=\"fg-needle\"></div>\n </div> \n</div>\n\n<script>\n(function(scope) {\n //display contains those numbers. min and max will be taken from this\n const numbers = [-3,-2,-1,0,1,2,3,4,5,6,7,8,9,10,11,12,13] \n\n // the width of the plate must be big enough to fit all numbers.\n // bigger plate with less numbers increases the spacing betwwen digits\n \n const plateSize = 600;\n \n //boundaries must be determined by using browser developer tools\n //find element with class name \"fg-backplate\" and change the \"right\" property\n //to find suitable value - left for lowest limit and right for highest limit \n const movingLimits = {left:-132,right:435};\n \n const min = numbers[0];\n const max = numbers[numbers.length-1];\n let nums\n let root\n let plate\n let lastValue = null\n \n scope.init = function(){\n if($(\"#fg_\"+scope.$id).length){\n actuallyInit()\n }\n else{\n setTimeout(function(){\n actuallyInit()\n },40)\n }\n }\n\n const range = function (n, p, a, r) {\n if (a == \"clamp\") {\n if (n < p.minin) { \n n=p.minin; \n } \n if (n> p.maxin) {\n n = p.maxin;\n }\n }\n if (a == \"roll\") {\n let d = p.maxin - p.minin;\n n = ((n - p.minin) % d + d) % d + p.minin;\n }\n let v = ((n - p.minin) / (p.maxin - p.minin) * (p.maxout - p.minout)) + p.minout;\n if (r) {\n v = Math.round(v);\n }\n return v\n }\n\n const actuallyInit = function(){\n root = $(\"#fg_\"+scope.$id)\n nums = root.find(\".fg-numbers\")[0]\n plate = root.find(\".fg-backplate\")\n plate.css('width',plateSize)\n build()\n draw()\n }\n\n const build = function(){\n numbers.forEach(n => {\n let num = document.createElement('div')\n num.className = 'fg-num';\n num.textContent = n\n nums.appendChild(num)\n })\n }\n const position = function(v){ \n const p = {minin:min, maxin:max, minout:movingLimits.left, maxout:movingLimits.right}; \n return range(v,p,'clamp',false) + 'px';\n }\n\n const draw = function(){\n if(plate && lastValue){\n plate.css('right',position(lastValue))\n }\n }\n\n scope.$watch('msg', function(msg) {\n if (msg) { \n lastValue = msg.payload\n draw()\n }\n });\n})(scope);\n</script>\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"negative-blue","x":660,"y":1020,"wires":[[]]},{"id":"e44443b8b3e42e1c","type":"inject","z":"bf0d83d32eec75c2","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"2.5","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":230,"y":1020,"wires":[["f3b778e1c2cee77f"]]},{"id":"f3b778e1c2cee77f","type":"function","z":"bf0d83d32eec75c2","name":"random","func":"function randomBetween(min, max) { // min and max included \n return Math.random() * (max - min + 1) + min\n}\n\nmsg.payload = randomBetween(-3, 13)\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":380,"y":1020,"wires":[["1e1a0b8d6b5f1c5a"]]},{"id":"66a438e99e4a8c78","type":"ui_template","z":"bf0d83d32eec75c2","group":"55888982bdd0637f","name":"oldscool-gauge","order":6,"width":"6","height":"1","format":"<div ng-init=\"init()\" id=\"{{'fg_'+$id}}\" class=\"fg-body\">\n <div class=\"fg-display\">\n <div class=\"fg-backplate\">\n <div class=\"fg-numbers\"> \n </div>\n </div>\n <div class=\"fg-needle\"></div>\n </div> \n</div>\n\n\n<script>\n(function(scope) {\n //display contains those numbers. min and max will be taken from this\n const numbers = [0,10,20,30,40,50,60,70,80,90,100] \n\n // the width of the plate must be big enough to fit all numbers.\n // bigger plate with less numbers increases the spacing betwwen digits\n \n const plateSize = 600;\n \n //boundaries must be determined by using browser developer tools\n //find element with class name \"fg-backplate\" and change the \"right\" property\n //to find suitable value - left for lowest limit and right for highest limit \n const movingLimits = {left:-132,right:435};\n \n const min = numbers[0];\n const max = numbers[numbers.length-1];\n let nums\n let root\n let plate\n let lastValue = null\n \n scope.init = function(){\n if($(\"#fg_\"+scope.$id).length){\n actuallyInit()\n }\n else{\n setTimeout(function(){\n actuallyInit()\n },40)\n }\n }\n\n const range = function (n, p, a, r) {\n if (a == \"clamp\") {\n if (n < p.minin) { \n n=p.minin; \n } \n if (n> p.maxin) {\n n = p.maxin;\n }\n }\n if (a == \"roll\") {\n let d = p.maxin - p.minin;\n n = ((n - p.minin) % d + d) % d + p.minin;\n }\n let v = ((n - p.minin) / (p.maxin - p.minin) * (p.maxout - p.minout)) + p.minout;\n if (r) {\n v = Math.round(v);\n }\n return v\n }\n\n const actuallyInit = function(){\n root = $(\"#fg_\"+scope.$id)\n nums = root.find(\".fg-numbers\")[0]\n plate = root.find(\".fg-backplate\")\n plate.css('width',plateSize)\n build()\n draw()\n }\n\n const build = function(){\n numbers.forEach(n => {\n let num = document.createElement('div')\n num.className = 'fg-num';\n num.textContent = n\n nums.appendChild(num)\n })\n }\n const position = function(v){ \n const p = {minin:min, maxin:max, minout:movingLimits.left, maxout:movingLimits.right}; \n return range(v,p,'clamp',false) + 'px';\n }\n\n const draw = function(){\n if(plate && lastValue){\n plate.css('right',position(lastValue))\n }\n }\n\n scope.$watch('msg', function(msg) {\n if (msg) { \n lastValue = msg.payload\n draw()\n }\n });\n})(scope);\n</script>\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":580,"y":1060,"wires":[[]]},{"id":"5384461fccbc85cb","type":"inject","z":"bf0d83d32eec75c2","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"2","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":230,"y":1060,"wires":[["94d17c103c63e67b"]]},{"id":"94d17c103c63e67b","type":"function","z":"bf0d83d32eec75c2","name":"random","func":"function randomBetween(min, max) { // min and max included \n return Math.random() * (max - min + 1) + min\n}\n\nmsg.payload = randomBetween(0, 100)\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":380,"y":1060,"wires":[["66a438e99e4a8c78"]]},{"id":"c8e9293339d84eb3","type":"ui_template","z":"bf0d83d32eec75c2","group":"674712f8d915bcc0","name":"oldscool-gauge-css","order":6,"width":0,"height":0,"format":"<style>\n .fg-body {\n position: relative;\n width: 100%;\n height: 100%;\n display: flex;\n align-content: center;\n flex-wrap: wrap;\n }\n\n .fg-numbers {\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n height: 30px;\n align-content: center;\n flex-wrap: wrap;\n }\n\n\n .fg-backplate {\n width: 600px;\n position: relative;\n transition: 1s ease-in-out;\n }\n\n .fg-backplate:before {\n content: \"\";\n position: absolute;\n right: 0%;\n width: 100%;\n top: 0px;\n height: 25%;\n background: linear-gradient(to right,\n #00000050,\n #00000050 50%,\n transparent 50%,\n transparent);\n background-size: 0.6% 100%;\n }\n\n .fg-backplate:after {\n content: \"Gauges by hotNipi ®\";\n position: absolute;\n font-size: 9px;\n left: -90px;\n top: 9px;\n color: #00000080;\n }\n\n .fg-display {\n width: 100%;\n position: relative;\n box-sizing: border-box;\n overflow: hidden;\n border: 3px solid black;\n background-color: #c7c7c7;\n outline: 1px solid #4d4d4d;\n outline-offset: -2px;\n border-radius: 6px;\n box-shadow: inset 0 0 9px 1px black;\n }\n\n .fg-display:before,\n .fg-display:after {\n content: \"\";\n position: absolute;\n inset: 0;\n\n }\n\n .fg-display:before {\n background: linear-gradient(270deg, #000000b0, transparent 20%);\n }\n\n .fg-display:after {\n background: linear-gradient(90deg, #000000b0, transparent 20%);\n }\n\n .fg-num {\n position: relative;\n text-align: center;\n top: 3px;\n width: 30px;\n color: black;\n }\n\n .fg-needle {\n position: absolute;\n left: calc(50% - 1px);\n top: 1px;\n width: 2px;\n height: 21px;\n background-color: #eb1e1e;\n box-shadow: 0px 0px 7px 2px #0000008c;\n }\n</style>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"global","className":"","x":590,"y":980,"wires":[[]]},{"id":"55888982bdd0637f","type":"ui_group","name":"1. group","tab":"62083694d0eab7ca","order":1,"disp":true,"width":"6","collapse":false,"className":""},{"id":"674712f8d915bcc0","type":"ui_group","name":"1. group","tab":"8482b305c416b850","order":1,"disp":true,"width":"6","collapse":true,"className":"ordered-1"},{"id":"62083694d0eab7ca","type":"ui_tab","name":"Home","icon":"dashboard","order":1,"disabled":false,"hidden":false},{"id":"8482b305c416b850","type":"ui_tab","name":"Away","icon":"dashboard","disabled":false,"hidden":false}]

```

---

<div class="post-metadata">

**Author:** ![Giamma](https://avatars.discourse-cdn.com/v4/letter/g/e47774/32.png) [@Giamma](https://discourse.nodered.org/u/Giamma)\
**Post date:** [16 December 2022 15:26 UTC](https://discourse.nodered.org/t/an-oldshcool-gauge/72313/2 "2022-12-16T15:26:12Z")

</div>

One more beautiful than the other, compliments!

---

<div class="post-metadata">

**Author:** ![Bobo](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bobo/32/8401_2.png) [@Bobo](https://discourse.nodered.org/u/Bobo)\
**Post date:** [17 December 2022 07:22 UTC](https://discourse.nodered.org/t/an-oldshcool-gauge/72313/3 "2022-12-17T07:22:20Z")

</div>

Are these @hotNipi gauges on Amazon yet?

😜

---

<div class="post-metadata">

**Author:** ![smanjunath211](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/smanjunath211/32/95742_2.png) [@smanjunath211](https://discourse.nodered.org/u/smanjunath211)\
**Post date:** [17 December 2022 09:29 UTC](https://discourse.nodered.org/t/an-oldshcool-gauge/72313/4 "2022-12-17T09:29:19Z")

</div>

You are too good. I liked the Mechanical display also very much.

Now your next project I am sure is this 😃

![7w2J](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/6/f/6f026c5925f81f7e27d7ff2b3826db745715e657.gif)  
 ![a3242f54507275923fa8d0eed140e6fb](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/f/1/f1f68a0eb6832aea0239ce0a053b8efbca86d5a7.gif)

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [17 December 2022 09:32 UTC](https://discourse.nodered.org/t/an-oldshcool-gauge/72313/5 "2022-12-17T09:32:35Z")

</div>

I tried but the refused cos it is priceless. But I have more analog gauges to try.

 ![IMG_20221217_112951](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/4/0/4069911b2cc97596ac6024c43b7c51ec6de618d4.jpeg)

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [16 January 2023 09:32 UTC](https://discourse.nodered.org/t/an-oldshcool-gauge/72313/6 "2023-01-16T09:32:39Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.