Numeric input styling

[Peter Scargill]

I wonder if anyone has already done something that might save me re-inventing the wheel.

I am coming back to Dashboard after a long break from when it was originally node-red-contrib-ui.  It has come a long way but styling wise - the numeric control could do with some help. I've a page with a number of controls (2-columns wide) to alter on-off times and temperatures for 2 heating systems - 20 numeric controls in total. It really would be nice if I could improve the styling to get rid of the up/down arrows and replace those with proper up/down images and preferable a nice thin black line (dark theme) around each control.  Had anyone done anything in this area?

Pete

[Peter Scargill]

Right - I've been having a go - and I'm almost there but clearly I'm missing the point of the template

<div layout="row" layout-align="space-between" style="padding:4px; text-align: left; border:2px solid black;">

<span style="width:40%;padding:3px;">Stuff here</span>

<span style="width:10%;padding:3px;">{{msg.payload3}}</span>

<span style="width:50%; align:right">

<md-button ng-click="send({payload2: '0'})"> up </md-button>

<md-button ng-click="send({payload2: '1'})">down</md-button>

 </span>  

</div>

So the above gives me a nice control - text on the left, then a variable coming into msg.payload and 2 buttons for up and down - giving out the value 1 or 0.  Problem is you can't seem to separate input and output  - when you send something into the template for use internally - a value comes out. And when you press either of the buttons - the value you've injected gets removed..

Can anyone more familiar with this than I am, give me a version that separates input for consumption - and button output ???

[Andrei Tătar]

Something like this should work:

[{"id":"6cbeec68.0e69b4","type":"ui_slider","z":"5ebf1f4b.5be83","name":"","label":"slider","group":"c0e24463.947e38","order":0,"width":0,"height":0,"passthru":true,"topic":"","min":0,"max":10,"step":1,"x":315.5000305175781,"y":151.8000030517578,"wires":[["4278a7cd.b2e058"]]},{"id":"4278a7cd.b2e058","type":"ui_template","z":"5ebf1f4b.5be83","group":"c0e24463.947e38","name":"","order":0,"width":0,"height":0,"format":"<div layout=\"row\" layout-align=\"space-between\" style=\"padding:4px; text-align: left; border:2px solid black;\">\n<span style=\"width:40%;padding:3px;\">Stuff here</span>\n<span style=\"width:10%;padding:3px;\">{{msg.payload}}</span>\n<span style=\"width:50%; align:right\">\n<md-button ng-click=\"send({payload: msg.payload + 1})\"> up </md-button>\n<md-button ng-click=\"send({payload: msg.payload - 1})\">down</md-button>\n </span>  \n</div>","storeOutMessages":true,"fwdInMessages":true,"x":308.50001525878906,"y":228.1999969482422,"wires":[["6cbeec68.0e69b4"]]},{"id":"c0e24463.947e38","type":"ui_group","z":"","name":"Default","tab":"2118f5a6.e61a1a","disp":true,"width":"6"},{"id":"2118f5a6.e61a1a","type":"ui_tab","z":"","name":"Home","icon":"dashboard"}]

[Peter Scargill]

Andrei - you are such a good person - but while I have you here - as you clearly understand this better than me - your example is good - BUT it is generating multiple outputs. Press a button and you get two outputs one after another.... if you use injects are inputs - sometimes you get one output - sometimes two. Any chance of a tweek???

Pete.

[Peter Scargill]

Forget that  - I'd not noticed the two buttons on the template - you don't need to do anything other than untick those two - thanks again.

Pete.

[Peter Scargill]

It has been a long night getting to grips with the template and making use of it - the spacing between templates is way too much vertically for my needs - so I realised you could send an entire object to the template as a JSON string and now that input and outputs are completely separate  - something I've wanted from day one - the sky is the limit - I thought you might like to see the first fruits - 2 tabs - one shown here - control the heating for my office and house (separate)....

This is ONE template. And it works quickly - note the images which are hosted on my main website (service provider)...  because I want to use this app (with password and https) externally.

That is the basic timing and temperature control for the office. Next step is to use images that change colour when you press them...  this is really starting to look very nice - if this keeps up I'm wondering why I need the other dashboard apps.. (mind you - CMYK controls is another matter).

[Jéan Roux]

Nice Pete! I hate the wide spacing as well.