Tag Archives: New Dial for Node-Red-Dashboard

New Day, New Dial

Scargill's thermostatWHAT a day I’ve had – messing around with a supposed DIY Alexa that isn’t… and getting to grips with dials. I wasted a lot of time on this (sorry Dave) before finally grasping the solution.

Here is the LATEST short video (Jan-10-2016)

So – in the last blog entry we took a look at the NEW Thermostat – this article looks at an even newer GAUGE - top left corner of the stat on the right – instead of a simple node-red-dashboard level node to show the temperature I have a pretty new gauge. All working as well! Indeed it is so useful I’ve decided to separate this out as I’m sure many of you will have a use for one or more of these.  Don’t get hung up on it being a thermometer – you can use it for anything – humidity, speed – whatever – completely programmable.

Here is the link to the gauge code. Pretty impressive stuff – there are examples over there – but the trick is, importing them into Node-Red-Dashboard. So – there is a library – under downloads – all in one.  Grab that .JS file and in my case I put it in a directory called /home/pi/.node-red/public/myjs -  that’s where I keep my .js files and Node-Red is aware of this. I’ve covered this before.

Armed with that file – you need a Node-Red-Dashboard TEMPLATE. In this case I set the template size at 3x3.  According I adjusted a couple of settings in this gauge to 160 * 160. pretty much you need the JAVASCRIPT source code for the dial – you get that from the site – and you need a <canvas> block. I’ve also added in a little chunk from earlier code to capture input to the node – that is used to alter the dial. And that is pretty much it.  What I would LIKE to do is dynamically adjust the size of the dial to fit whatever node size you use but I’m not yet succeeded with that.

Anyway – here’s the code for the dial you see here – to be inserted into the template note node to replace the existing gauge – and don’t forget to load in that .js file and make the template 3x3.

<script type="text/javascript" src="/myjs/gauge.min.js"></script>
<script>

   (function(scope){
        scope.$watch('msg', function(msg) {
           gauge.value=msg.payload;
        });
 
    })(scope);
var gauge = new RadialGauge({
    renderTo: 'canvas-id',
    width: 160,
    height: 160,
    units: "Degrees C",
    title: "Thermometer",
    minValue: 10,
    maxValue: 30,
    majorTicks: [
        '10',
        '15',
        '20',
        '25',
        '30'
    ],
    minorTicks: 5,
    strokeTicks: true,
   highlights  : [
        { from : 10,  to : 15, color : '#8888ff' },
        { from : 15, to : 20, color :  '#88ff88' },
        { from : 20, to : 25, color :  '#ffff00' },
        { from : 25, to : 30, color :  '#ff8888' }
    ],

    colorPlate: "#fff",
    borderShadowWidth: 0,
    borders: true,
    needleType: "arrow",
    needleWidth: 2,
    fontTitleSize: 42,
    needleCircleSize: 14,
    needleCircleOuter: true,
    needleCircleInner: false,
    animationDuration: 500,
    animationRule: "linear"
}).draw();

gauge.value = 18;

</script>
<canvas id="canvas-id">
    
</canvas>

ToDo – reduce the grey box from a float to an integer with 2 digits and get a 7-segment font into that grey box.

I’ve updated the original Thermostat page here..

Facebooktwittergoogle_pluspinterestlinkedin