Up-down control

203 views
Skip to first unread message

Peter Scargill

unread,
Dec 22, 2015, 7:01:44 AM12/22/15
to Node-RED UI

Good morning


I'm wondering - If you look at one of my screens here - the temperature control - your up-down control on th left image - very nice but it is the only control that does not right justify - and it kind of looks odd. In the second picture I show what it would look like right justified - I don't know about others but I think it looks a lot better. My personal favourite would be to use a custom icon along the lines of that shown in the rightmost image - sadly those two do not seem to be included in the Angular list of icons(not even straight forard left and right triangles unless I missed something) ...   but I wonder if there is a way anyway...  If you REALLY wanted to go to the max, greying out an image when you've reached the upper or lower limit would be fantastic.


I would do this myself but I really don't understand the coding for this yet...



Andrei Tătar

unread,
Dec 22, 2015, 8:35:47 AM12/22/15
to Node-RED UI
The reason there is a right margin is because those are round buttons with a centered text and an invisible border. 
Here is how they look with the border visible:

I'll try and fix this with a negative right margin.

I'll also implement the graying out of the controls suggestion. I can add classes to each component (up button, down button) so you could rotate them using a css inside a template node but the icons will stay.

If you want custom looking controls you can always easily implement the numeric control using a template node (with your own images/icons/etc). 


Thanks for the suggestions!

Peter Scargill

unread,
Dec 22, 2015, 8:57:58 AM12/22/15
to Andrei Tătar, Node-RED UI

Andrei – right now you are much cleverer than I at node.js/Angular. I have no idea how to implement that numeric control with the template node. However – if anyone wants to post an example I’m sure we would love to see it to aid understanding.

 

I see your point about the buttons – well, your project but if you agree with my previous comments I’ll look forward to seeing a revised version… it does look out of place compared to other items…

 

Incidentally it Is worth mentioning that despite all of these wishes, questions and niggles I am SERIOUSLY giving the much better looking BLYNK a miss in favour of this ui because of reliability – this hasn’t failed on me once – I’m that confident I’ve given my good lady access on her mobile phone to control the heating J

 

Pete.

Andrei Tătar

unread,
Dec 22, 2015, 9:14:54 AM12/22/15
to Node-RED UI, pe...@scargill.org
Here is a quick one. It doesn't look very pretty (maybe you can work on that), but it does the job:
<div layout="row" layout-align="space-between center">
    <p>Some text</p>
    
    <div layout="row" layout-align="center center">
        <md-button ng-disabled="upDisabled" ng-click="upClick()">Up</md-button>
        {{value}}
        <md-button ng-disabled="downDisabled" ng-click="downClick()">Down</md-button>
    </div>
</div>
<script>
(function(scope){
    var min = 0;
    var max = 10;
    var defaultValue = 0;
    
    scope.$watch('msg.payload', function (newValue) {
        var v = parseInt(newValue);
        scope.value = isNaN(v) ? defaultValue : v;
    });
    
    scope.$watch('value', function (v) {
        scope.upDisabled = v >= max;
        scope.downDisabled = v <= min;
        scope.send({payload: v});
    });
    
    scope.upClick = function() {
        if (scope.value < max)
            scope.value += 1;
    };
    
    scope.downClick = function() {
        if (scope.value > min)
            scope.value -= 1;
    };
})(scope);
</script>


Peter Scargill

unread,
Dec 22, 2015, 9:21:30 AM12/22/15
to Andrei Tătar, Node-RED UI

HEY!!! IT WORKS!!! Almost a drop in replacement for the up down control – oh, I’m going to have a play with this one… thanks!!!

--

You received this message because you are subscribed to a topic in the Google Groups "Node-RED UI" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/node-red-contrib-ui/EntffIHh5ds/unsubscribe.
To unsubscribe from this group and all its topics, send an email to node-red-contri...@googlegroups.com.
To post to this group, send email to node-red-...@googlegroups.com.

Peter Scargill

unread,
Dec 22, 2015, 1:56:18 PM12/22/15
to Node-RED UI, tatar...@gmail.com, pe...@scargill.org
My last message got lost somewhere. Sorry, that code doesn't work - or rather it does, until it doesn't.  After some use, I found it went into a loop, changing rapidly and unable to stop.  The only way out of it was to delete the node. I tried this several times.   have a proper up down control - and this one using the same data - they should co-exist.

Any ideas why the control would go ballistic?


Andrei Tătar

unread,
Dec 22, 2015, 2:25:48 PM12/22/15
to Node-RED UI
No idea. I'll have a look tomorrow. It's getting late here.

Andrei Tătar

unread,
Dec 23, 2015, 6:49:09 AM12/23/15
to Node-RED UI, tatar...@gmail.com, pe...@scargill.org
Could you post a simple flow that exposes the problem?


On Tuesday, 22 December 2015 20:56:18 UTC+2, Peter Scargill wrote:
Reply all
Reply to author
Forward
0 new messages