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.

Dashboard buttons

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!!!

tmp3513

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!

new buttons

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.

Facebooktwitterpinterestlinkedin

33 thoughts on “More Node-Red Dashboard Success

  1. For icons, you could use the “font awesome”:

    http://fontawesome.io/icons/

    Which is already integrated in dashboard:

    http://www.techrevwz.com/node-red-module-dashboard-add-a-gui-part-1-exclusive-guide.html

    But maybe you already know that, lol 😉
    https://groups.google.com/forum/m/#!topic/node-red-contrib-ui/OqcjeZtEwfM

    Maybe even this font can be used: http://icofont.com/

    More info here: https://groups.google.com/forum/m/#!topic/node-red/y_smiIZHZDY

    1. And with the greatest respect to the people at font awsome – mono colour icons are … boring.

      iconfont – again – lovely, useful in emergencies – but… boring. I’m a full-colour guy 🙂

      1. they’re designed to be downloaded quickly and not weight so much, are available on fast CDNs and as such maybe you have them already in your browser cache, and are used to customize little widgets with a visive communication of what’s underneath, usually, not to be colorful 🙂

  2. Hi Peter, I got troubles on my dashboard. You talked about node-red-dashboard SLACK team.

    I would love to talk about my issues with other people. But how to join the slack team ? Anybody can join ?

  3. Peter – Great tutorial on how to do this, but for the life of me I cannot figure out how to just output the message timestamp in the payload. I have tried:

    send({payload: timestamp})
    send({payload: msg.timestamp})
    send({payload: Date.Now()})

    and a bunch of other ways. Any idea why I can’t get it to work?

  4. Great Post. Can you help me, i want to add text fields and buttons, basically widgets to dashboard at runtime ! say thought mysql query or live data in from devices.

    1. You need to go to the Node-Red Google groups site and discuss with people in there. That conversation is way too long for a general purpose blog.

  5. thanks for the examples!!

    One remark:
    It took me a while to figure out that for whatever reason the classes “vibrate” and “touched” screwed my color change when pressing the button…
    when removed, everything works fine…

  6. Hi Peter,
    in the meantime the template node got an option where you can select if it is a widget in a group or part of the page header. This way you can put styles into the header and only need one template node for your whole dashboard instead of one per page. You can also use this very conveniently to load other javascript libraries, stylesheets, set meta tags or whatever should go into the HTML header.

    1. Thanks Brian, that’s a great find. I have ordered one this evening and the seller (“Ian”) emailed me a few minutes later to say it’s all packaged up and ready to post in the morning. Nice quick turnaround. I will share my feedback with you guys when I receive my bezel.

      1. Just some more info regarding the chap who makes and sells the bezels… I enquired about another larger Nextion bezel as I have two Nextions screens (different sizes). He responded as follows:-

        Hi Darren,

        I keep a small amount of stock ready to ship, so if it says “in stock” on the website then it’ll be prompt. If no stock of your desired item just drop me a msg, I usually try and topup small batches at the weekend

        I do custom work too if theres anything similar you might want

        Hope you like the bezel when it arrives.

         

        Regards

        Ian

  7. Oh I’m sure it will be – when I was heavily into the Nextion displays, getting a decent bezel was a pain. Well spotted.

    1. Received my Nextion 2.4″ bezel yesterday. Well packaged, comes with nylon screws – fits perfectly. Nice shiny finish (comes with white protective film still in place for transit).

  8. Great blog, Peter.

    Are you saying that anything on Angular.io could potentially be built into a dashboard via the template node?

    1. Hi there Thomas

      Not sure if ANYTHING Angular coud be put into Dashboard – it would be interesting to see what others have done.I would certainly like to see someone else working on better RGB controls now many of us have lots of RGBWW lights.

      Pete,

Leave a Reply

Your email address will not be published. Required fields are marked *

Leave the field below empty!

This site uses Akismet to reduce spam. Learn how your comment data is processed.