Customising Node-Red Dashboard Buttons

This entry is about creating custom buttons for Node-Red Dashboard. If you’re looking in for the first time – this simple cyan rectangle on the right is what Node-Red Dashboard buttons currently look like. Without some effort, the cyan background colour can be changed as can the text colour but that’s about it. And when you press on them, there is some marginal change but not very distinctive.

If you read the previous article on buttons you will know that things are much better now thanks to the use of templates – and that using a template for a button, you can achieve the same functionality but with better colouring and shaping options – rounded corners for example. Of course, having played with this for a few days, the novelty of coloured buttons on my Node-Red Dashboard soon faded and I yearned for something a little more modern.

Ignore the knobs – they belong to another blog entry – the three buttons on the top – the rightmost one (blue) is as we have up to now – it is blue and when pressed flashes yellow. It also vibrates on a mobile phone – all of that was discussed in a previous entry. The two on the left however are new and use background images. They still flash when pressed, they still vibrate – but the image is up to you – the images you see on these were not made to any particular size – maybe 50mm square – in PowerPoint (without the text) and saved as PNG images. The pattern is a bog-standard PowerPoint gradient so lots of nice colours already done for you – just right-click save the rectangle from PowerPoint or wherever.

The trick to maintaining compatibility then when pressing a button is to store away whatever the background colour AND image is, do the button press stuff then restore both the background image and colour. This works a treat.

I would have LIKED to do the background image definition as a CLASS but for some reason that would not work – so it is a style – if anyone can correct this I’d much rather add class “greenish” to the button than a style.

Here is my styling that goes into a template all on it’s own – and an example button which again goes into a template:

<style>
 .filled { height: 100% !important; padding: 0 !important; margin: 0 !important; } .nr-dashboard-template { padding: 0; margin: 0; overflow-x: hidden; overflow-y: hidden; } .rounded { border-radius: 20% 20% 20% 20%; } .round { border-radius: 100% 100% 100% 100%; } .bigfont { font-size: 18px; } .smallfont { font-size: 12px; } 
</style> 
<script>
 $('.vibrate').on('click', function() { navigator.vibrate(100); }); function restore_bg(x,y) { $(this).css("background-color", x); $(this).css("background-image", y); }; $('.touched').on('mousedown', function() { var x= $(this).css("background-color"); var y= $(this).css("background-image"); $(this).css("background-image", ""); $(this).css("background-color", "yellow"); setTimeout(restore_bg.bind(this,x,y),200); navigator.vibrate(80); }); 
</script>

And a button – if you want roundish use class “rounded” – if you want round use class “round”.

<md-button
  class="alerted filled touched bigfont rounded vibrate"
style="background-image: url('/myimages/orangeish.png'); background-size: 100% 100%; background-repeat: no-repeat;" ng-click="send({payload: 'Red Button'})"> 
 bg-image<br/>button 
</md-button>