Category Archives: graphs

Node Red UI

tmp924AIn my last blog item, I wrote about the IOT-Manager App for Android – much to the annoyance of a pal of mine who uses Apple (snigger). Among the replies was the questions “have use you used “node-red-contrib-ui”?

This was something I looked at when it first came out and dismissed due to lack of function. Well that has changed a lot and this is now well worth a look.

tmp44C4So this add-on for Node-Red – which I am running on a Raspberry Pi right now (waiting for my ROCK to arrive) shows some promise right now and potentially a LOT of promise.  So what you get is a number of nodes to make up a GUI and you access this on your PC by simply adding /ui to the normal Node-Red admin address (I’m not seeing any signs of password protection and that could be a problem)  – it really is that easy.

So the nodes you get are good – there is a graphing function, there are buttons, text,little up-down buttons of the type I’ve been begging for in BLYNK, sliders… this really has promise and importantly the nodes have inputs and outputs so you can force the values of the various controls.

However, apart from graphs, where this package appears to have limits are in two areas – the first is not a deal-breaker – styling – it’s all a little plain – but that’s ok, we can live with that. The second or so it seemed at first – is lack of gadgets.. i.e. gauges, LEDs etc.

But just hold on – there is a node called paragraph. On the surface you can inject a msg.payload into it and surround it by HTML. And that’s fine – not sure how you might use “includes” in there which would be a game-changer – but in the INFO it says “The Template can contain any valid html and angular/angular-material directives. You can use this node to create a dynamic user interface element that changes it's appearance based on the input message.”

I don’t know about you but my heart skipped a beat at this point –

tmp533AI looked up Angular and at first went off on a tangent with this – ok – so how is Google supposed to know I wasn’t after “angular gauge” – as it happens – I was.

http://www.amcharts.com/demos/angular-gauge/

I eagerly loaded in the includes into the node window– and the script and the html and… nothing… zilch.

So clearly – it’s not QUITE that simple.

I know nothing about Angular so I went off in search of more info. I could find nothing about the actual node itself – indeed there is not much out there at all about node-red-contrib-ui.

tmp163DThere is of course also HICHARTS which has some of the most wonderful charting on the planet and a GUAGE

http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/gauge-speedometer/

But how would you get that into this “Paragraph” node…..

LEDS are easy – using the “moustache” mode it would be trivial to grab some LED images and indeed I’ll have that done by tonight.. but the gauges… must have gauges.

As I write this I’m talking to Andrei and already have programmable images – and I’m almost there with a simple gauge… more soon… watch this space.

So in my setup on the Pi, there is a directory /root/.node-red/node_modules/node-red-contrib-ui/dist

In that directory is the index.html file which makes the UI. You can refer to other files in that directory or those below it – so I created an “icons” directory with some images – and put this code in the “paragraph” node.

<div layout="row" layout-align="space-between">
    <p>{{msg.topic}}</p>
    <p >
       <img height="32px" ng-src="{{(msg.payload||1)==1 ? 'icons/light1.png' : 'icons/light0.png'}}">

    </p>
</div>

tmpB5F9I fired topic:”the topic” and payload:1 and lo… as you can see on the right my little red image came up – had I put 0 in the payload – a green icon would have appeared. I need to work on the styling so the image comes in line with the text but that is just MARVELOUS.

The gauge is coming somewhat more slowly… I now know that in that same directory you can put an html page with whatever it needs to return a gauge (jQuery etc) and you can pass a parameter. Here is an example – I won’t show you the actual page as it’s a mess and needs a rethink but the mechanism seems sound..

<iframe frameborder=0 scrolling=”no” ng-src=”{{‘test.html?val=’ + msg.payload}}”></iframe>

In the actual page you need to be able to get the command line argument and push it into your graph code… when I get something that looks nice and works efficiently I’ll put something in here – I’m sure Andrei is working on doing this PROPERLY but as a short term measure this will work and of course there are possibilities other than gauges. I should stress I have this kind of working – I’ve ONLY tested this on my PC and Samsung S4 and it works on those.

This could open up a lot of doors…  

Andrei – more inputs please – keep em coming – you’re doing a marvelous job and thanks for answering my silly questions.

Facebooktwittergoogle_pluspinterestlinkedin