More Dashboard Buttons

This is about creating buttons for Node-Red Dashboard. If you’re looking in for the first time – this is what Node-Red Dashboard buttons currently look like. The light blue 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.

Post navigation

One thought on “More Dashboard Buttons”

Welcome to the Blog

Hi - I'm Pete and this is my technology blog. It is BIG. It is also the home of "ESP-GO". "The Script", Node-Red-Contrib-Bigtimer and many other useful toys. Use the search box below or check out the archives and other links below - be sure to SHARE what you like using the social media buttons and please subscribe to my YouTube channel http://www.youtube.com/PeterScargill

Please register or log in - the top menu changes a lot when you are part of the party... and once in, don't forget to tick the box so you will get email follow-ups to comments.

If you want to buy me a coffee or help fuel my gadget habit, use the Paypal donate link below.

Disclaimer: Because I have no idea of your level of technical skill or the requirements of your country laws in terms of electricity supply etc., I accept no responsibility for any damage caused through following advice in these pages. When dealing with mains voltages you should satisfy yourself that whatever you are doing is safe and if unsure, seek advice from someone who is sure.

Notice: I'm always happy to offer advice on stuff I've written - and indeed take advice. If I can help in any way just let me know but PLEASE don't ask me how to program in C/PASCAL/NODE/etc. There are many resources out there - if you want to program and can't - there's always Google.

Search for:

Email Newsletter

Enter a name and your real email address if you would like to receive occasional summary emails - sorry but invalid-looking or automated names and email addresses will be removed to help protect others.

Links

EE Times | Electronic Engineering TimesEE Times connects the global electronics community through news, analysis, education, and peer-to-peer discussion around technology, business, products and design