Tag Archives: Node Red Dashboard Thoughts

Node-Red Dashboard Thoughts

Or put another way – how to use Node-Red Dashboard without a mouse cursor or a menu – on a touch screen.

I’ve been playing with the touch-LCD screen on a Raspberry Pi – this was a Chinese one – quite cheap.. “5 inch HDMI LCD V2” – an 800*480 touch display with an XPT2046 Touch Controller.   It is lovely and works a treat for a resistive display - but it’s been sitting around for ages waiting for a use.

And now it has one running Node-Red-Dashboard – but I had a couple of issues..

Node-Red Dashboard with menu

So I had the Dashboard running wide-screen – full screen using Firefox.  One of my gripes was the mouse pointer in Firefox which I’m using on the Pi. I don’t want it on a touch-screen – well, I solved that by adding an empty template to the Dashboard with nothing more than a style in it.

* { cursor: none !important }

That gets rid of the mouse.  I needed to know how to get the Pi to open into Firefox automatically and full screen “kiosk” mode. I’m sure that’s easy and is referred to in the comments below. Right now I’m just selecting full screen – which is great – but not permanent.

The Dashboard now has the ability to let you change screens using a node – and you could trigger that from a button.

But by default you can’t get the touch-screen-unfriendly MENU out of the way – if you leave the menu title empty – you get an error – but here’s the daft thing – you get a menu even if you only have one page.

I asked if the guys at Node-Red if they would look at that – but thinking about it  -really that is NOT the answer – what is needed is to have the option to turn the menu OFF COMPLETELY while retailing the ability to switch paged via the NODE (the latter you can of course do). No point in having nice large buttons and still having to fiddle with the menu – I’d rather do my own NEXT and HOME large graphic buttons. For a wall display with that change, Dashboard would be GREAT.

Well, it turns out that one of our readers supplied the answer in a little more CSS – one line in fact, easily added to your code.

Note that this demo highlights an issue with Node-Red Dashboard – occasionally, for no apparent reason, the dark theme reverts to light – I only just noticed this while updating the blog!! I hope Dave is watching this!

 

Node-Red Dashboard with no menu

Anyway – how did I manage this – no menu, no annoying top bar – simple when you know how (Thanks Antonio).

<style>
   * { cursor: none !important }
   md-toolbar.md-default-theme:not(.md-menu-toolbar), md-toolbar:not(.md-menu-toolbar) {display: none;}
</style>
<div ng-bind-html="msg.payload"></div>

I have my little function node which gets rid of the mouse – and now looks like this.. Well, when the theming is restored, more like this…

Node-Red Dashboard

Another annoying thing I discovered was my nice, sparkly new screen timing out after a while – turns out it had nothing to do with the Dashboard but with Raspbian in this case.

A quick install..

sudo apt-get install xscreensaver

and then under accessories – one sees the screensaver option – and just turn it to NONE – and that’s THAT problem out of the way – my screen has now been up overnight.

And finally – if the BUTTONS are no good for you (the text does NOT wrap which is a pain) – here’s a button in a template – the button will be the full size of the template and you can put whatever text arrangement/icon/whatever in there. Well, I say that - the size of the template minus a rather over-the-top margin which I'm still working on.

<style>
  .filled { height: 100%; }
</style>
<md-button class="filled" style="background-color:red"   ng-click="send({payload: 'Hello World'})"> 
    Click<br/>me 
</md-button> 
Facebooktwittergoogle_pluspinterestlinkedin