More Node-Red Dashboard Success

This is a blog entry from 2016 that I’ve just updated.. In an even earlier entry the subject of Node-Red Dashboard, you’ll see I can hide that top menu if needed (the blue menu is great on a phone – not much use on a thermostat)… and then I discovered that desktop TEMPLATES have a spacing round them that needs consideration but here’s what I did at the time.. and see the 2020 update further down and also the blog entry on my Thermostat https://tech.scargill.net/the-thermostat-continues/ and other home control work which now makes extensive use of Node-Red Dashboard.

Update March 2020:  One of you guys just pointed out this Discourse link to me…..  looks good – I just asked the author if he’s had luck with haptic feedback on custom template icons when used as buttons (but not actual buttons as they work just fine).
End of update

So – the built in standard buttons – no text wrap which makes it hard to make small, a visual effect on press that really is hardly noticeable, inability to change colour or indeed anything other than text colour – all problems now history as some time ago, I made my own buttons using the template node.

The garish red, green and blue buttons you see above – note the rounded edges you control, there is an attractive and obvious colour change on press (and return to original colour after press without you having to program it ), audible feedback on press (on phones with vibrators), wrap on text – indeed you can put anything in there – icons etc. but see my comment above about icons (if used as buttons)

This development is all due to a combination on my insistence on having flexibility – my own experience and lots of help from several guys on the web today – thanks everyone for filling in the missing bits! The end result of all of this – I really DO think that Dashboard is able to take on the big boys and I’m currently backing away from the alternatives and have more or less abandoned Blynk.

So – the enabling technology here is the node-red-dashboard template – this has LOTS of potential and it is now easy to accept incoming information – and send out a value on press or whatever. You’ll note elsewhere that I’ve used this to make whole pages with colour-changing icons etc., well here I’m using one template per button – but that’s just for the purpose of demonstration.

Things that needed considering – CSS for button sizing, JS to get the button colour and change it while pressing then change it back – I was not going to get into setting each and every button press colour etc. More CSS for styling. All described below and trivial to implement.

SO it turns out that if you put a template on a page – make sure it is the first one – you can put nothing but JS and CSS in it – and it will not do anything VISIBLE – but will supply your functions and CSS for the whole page – isn’t that HANDY!!!

Let’s take a look at what is driving the display up there (again ignoring the text at the top – start with the buttons). To the left you see a template all on it’s own – then 3 templates – then 3 buttons – not connected to anything as this is merely a demo.

So – the FIRST template has info we need – CSS and JS to make everything work – you just need this once for any page. The light blue buttons are there just to show you what buttons look like in Dashboard (i.e. not as good as they could be) – and the three templates are the three new coloured buttons you see above right – which react to being pressed both visually and with haptic feedback.

<style>
  .filled { 
      height: 100% !important;

      padding: 0 !important;
      margin: 0 !important;
  }
  .nr-dashboard-template {
      padding: 0;
      margin: 0;
  }
  
  .rounded {
  border-radius: 15px 15px 15px 15px;
  font-size: 18px;
}
  
</style>

<script>
$('.vibrate').on('click', function() {
  navigator.vibrate(100);
});

function restore_bg(x) {
            $(this).css("background-color", x);
    };

$('.touched').on('mousedown', function() {
    
    var x= $(this).css("background-color");
    $(this).css("background-color", "yellow");
    
    setTimeout(restore_bg.bind(this,x),200);
    navigator.vibrate(100);
    });
    
</script>

NOTE: At the time of writing this colour change works on Chrome etc on a PC and Android phone – it does NOT work on Firefox/Chromium on a Pi – this needs resolving.

The class FILLED is important – this is the one that gets rid of the padding that both buttons and template use by default – to make the button fill to the size of the template. nr-dashboard-template is also involved. None of this seems to affect other items on the screen.

ROUNDED is simply a means of forcing rounding on buttons – you can adjust that radius to suit or eliminate it if you like.

The scripts – well VIBRATE merely invokes the haptic feedback when you press a button – easy when you know how.

TOUCHED and it’s associated restore function are variations on the ones I used with images. The class allows on press for a button to store it’s colour – change it’s colour – wait for a while – and change it back – all without having to have individual colour control on the actual button  – which simply has the default colour you select.

Now let’s take a look at once of those templates. Oh and I got those subtle colours from here – https://flatuicolors.com/

<md-button class="vibrate filled touched rounded" style="background-color:#c0392b" ng-click="send({payload: 'Hello World'})"< 
    Red<br/>button
</md-button>

Simple? Yes because the previous code makes it so. A button in a template – auto stretched by the code above and all it has added is the background colour – which the above code can manipulate – and the classes. That’s it. The ng_click is what happens when you press the button – the template outputs a payload of whatever you’ve set. No, really that is it.  So on that output, msg.payload will be whatever you set it to be.

With background colour control, RGB and related buttons become simple – a page full of colours for RGB controls becomes possible. Note that in the class ROUNDED I changed the font size – well you could separate that off to a separate class – and create classes (say) BIGTEXT and LITTLETEXT for example – suitable for different size buttons.

When you grasp this – if you’re not there already, immediately all sorts of ideas should come to mind -it’s a bit like opening a new door to see all the things behind it. Within days my demo screen here looked utterly amateurish as I started adding icons etc but this milestone was important as it was, for me a confirmation that there really is not a lot you can’t do with node-red-dashboard – so many congratulations to the original developer and the guys at IBM and everyone contributing.

If you go to the ANGULAR site and look at their examples – most of them work no problem – changing these rectangular buttons to round ones is a snap!

Oh, talking of improving things  – here’s a snapshot hours later as things progressed…NICE!

Oh – here… http://flows.nodered.org/flow/4bfad41290eda31588ff63a23815ac5c  – if you want a play…. and YES that template uses a little white space – but next Node-Red-Dashboard release it will NOT – css and scripts only will NOT use up screen real estate – all coming together VERY well right now.