Dashboard UI - Simple Pushbutton ?

[Kay Pohl]

Hello all,

is there any possibility to realize an simple pushbutton in dashboard ui? At the moment the button control only send a command ( for example: true ) when i press the button. There is no option for "release" the button. How can i realize a pushbutton ?

Kind Regards

Kay

[Dave C-J]

Currently no - the underlying angular library only has a simple press event. Simplest way right now would be to use the ui_template and create your own html element with mouse down and mouse up events.

[Colin Law]

The switch element provides that functionality, but it looks like a
switch not a button.

Colin

> --
> http://nodered.org
>
> Join us on Slack to continue the conversation: http://nodered.org/slack
> ---
> You received this message because you are subscribed to the Google Groups
> "Node-RED" group.
> To unsubscribe from this group and stop receiving emails from it, send an
> email to node-red+u...@googlegroups.com.
> To post to this group, send email to node...@googlegroups.com.
> Visit this group at https://groups.google.com/group/node-red.
> To view this discussion on the web, visit
> https://groups.google.com/d/msgid/node-red/f9257ac0-02e2-4f7a-a339-93876bdc629a%40googlegroups.com.
> For more options, visit https://groups.google.com/d/optout.

[Kay Pohl]

Thanks Dave, but my programming skills in javascript are not the best. So i have first to check how i can do this in ui_template.

[Kay Pohl]

Thanks Colin. I use the switch element right now. How can i use that functionality ? I have an On_payload and an Off_payload trigger where i set On -> send True and Off -> send False. But how can i send Off when i release the mouse button ?

[Colin Law]

Ah, sorry, I misunderstood, I thought you wanted a push on push off button, whereas you want a push and hold, then release. No, a switch will not do that.

Colin

To unsubscribe from this group and stop receiving emails from it, send an email to node-red+unsubscribe@googlegroups.com.

To post to this group, send email to node...@googlegroups.com.
Visit this group at https://groups.google.com/group/node-red.

To view this discussion on the web, visit https://groups.google.com/d/msgid/node-red/20e0673b-28d5-41ac-afc4-889f0f66f907%40googlegroups.com.

[Glenn]

It is actually quite easy and am suprised that dashboard doesn't have it built in.

I will give you an example. In my dashboard I have the below


Clear Queue is your usual push button that sends a payload.

<md-button ng-click="send({action:'item.actiontype',payload:item.action})">

Then we have a Twitter button press which we want to open in the Twitter app

 <md-button ng-href="twitter://" >

But say you just want to open a plain website but now you want it to be in a new window so it doesn't close the Dashboard. You just do the same thing I did for Youtube

<md-button ng-href="http://youtube.com" target="_blank">

TL:DR for payloads use ng-click for websites use ng-href. For everything else visit the fantastic angular site here: https://material.angularjs.org/latest/

[Glenn]

Seems I misunderstood the question but will leave what I wrote for help for people who want to make their own buttons on dashboard

[Dave C-J]

Well a template like  this is a starting point (extended from  the info for the node...)

<script>

var value = "hello world";

// or overwrite value in your callback function ...

this.scope.mdown = function() { return "1"; }

this.scope.mup = function() { return "0"; }

this.scope.mleave = function() { return "2"; }

</script>

<md-button 

    ng-mousedown="send({payload:mdown()})"

    ng-mouseup="send({payload:mup()})"

    ng-mouseleave="send({payload:mleave()})"

    >

    Click me to send 1 -> 0

</md-button>

[Dave C-J]

though actually ng-blur is probably better than ng-mouseleave

[Kay Pohl]

Sorry for the late reply. It works great. Thanks

Kay

[John Farquhar]

Hello,
The usual apologies in advance for infantile questions from a complete beginner (to life some would say). It's my first time on this forum (any forum for that matter) so please be patient. This is the closest discussion to what I am looking for, but that may be simply due to the fact I have no clue as to the correct terminology when it comes to programming. So another apology for diverting this discussion off-course.

I bought my daughter a Raspberry Pi and rashly promised to build her a robot, the robot bit not a problem (so far). I'm using and arduino nano for the servo control, but I want it to have a level of interaction and fun (voice recognition, face recognition,text-to-speech, rude answering back, blowing raspberries at my mother-in-law etc..) so am using the Raspberry Pi for the brain. These aspects are roughly working or on the way by the judicious thievery of various python scripts

The robot controller on the other hand I'm stumbling at the first hurdle.

I want to control it from a web interface, and also have other sensor inputs and data outputs, hence the choice of Node-red to bring it all together.

On the UI i wanted a pair of buttons to control the rotation of each servo. whereby on pressing the button the number was increased (or decreased depending on direction) until the button was released. So like Kay, I couldn't really get any of the standard UI widgets to do it (I know sliders would do the basic function I am looking for, but they can only be horizontal and I am wanting the button/slider oriented in the direction it will move the robot).

I was looking for a what I called a "continuous press button" whereby when pressed it sent one string and when released sent a different string, the string can then be used by a function node to increase (or decrease) and output the numbers. A quick search pointed me in the direction of what Dave has suggested above, i.e. template using mousedown and mouseup. and the button does exactly what I want.

It's the function node that's the problem, I've got it so that on mousedown it receives a payload from the button template, and it starts to increase the numbers every half second (I will speed this up once I've got it working) up to 180 by using setInterval. However I can't get it to stop on mouseup when it receives the word "stop". I think it is beacause I can't seem to get clearTimeout to work, but it could be that my code is completely wrong.

I've tried putting the clearTimeout in a different function, outside the "increase" function, and all other possibilities I can imagine (which goes to demonstrate how little I understand the code) all to no avail.

Any suggestions regarding clearTimeout much appreciated, if you think there's a better way of controlling the robot from the UI then I'm open to suggestions.

Function pasted below

var shoulder = global.get("position.shoulder");

function increase(){
    shoulder = (shoulder + 1) % 181; // SET { 1-180 }
    global.set("position.shoulder",shoulder);
    var msg =
        {
            payload: { countTotal:shoulder }
        };
    node.send(msg);
    }
    if (msg.payload =="stop"){
    clearTimeout(up);   
}
 var up = setInterval(increase, 500);

 if (msg.payload =="up"){
     increase();
 }

Many many many thanks in advance

[Colin Law]

Hi John

Since this is not closely related to the subject of the thread you
should ideally have started a new thread for this question.
The problem you are seeing is due to the fact that normal variables
are not persistent between invocations of your function node, so your
up variable is lost and clearTimeout does not work. You need to save
the timer handle in a node context variable. See
https://nodered.org/docs/writing-functions#storing-data for how to
save and restore it between invocations.

Colin

> --
> http://nodered.org
>
> Join us on Slack to continue the conversation: http://nodered.org/slack
> ---
> You received this message because you are subscribed to the Google Groups
> "Node-RED" group.
> To unsubscribe from this group and stop receiving emails from it, send an
> email to node-red+u...@googlegroups.com.
> To post to this group, send email to node...@googlegroups.com.
> Visit this group at https://groups.google.com/group/node-red.
> To view this discussion on the web, visit

> https://groups.google.com/d/msgid/node-red/2c3b8070-0041-4249-ad43-df8213a2a7e2%40googlegroups.com.

[John Farquhar]

Colin,

Many thanks for the reply, apologies again for using the forum incorrectly.

Now you point it out, it seems obvious that the "up" variable needs to be saved to the context.

I will try it tonight.

Many humble thanks

John

[Colin Law]

If, when you fetch it, you use
var up = context.get('up') || 0;
That will initialise up to 0 if it has not been saved. Then you can
use if(up) to determine whether there is a timer running. Don't forget
to save it to the context as 0 when you clear the timer.

Colin

> https://groups.google.com/d/msgid/node-red/35ccc513-ecc6-453e-9b9b-e0ec7e4fb088%40googlegroups.com.

[Roger]

Nice solution!

How can i set the colors of the button? 

And is it possible to set the button size bigger within the Size fucntion?

Thanks

Rogier

[Dave C-J]

A whole better way to do this now in beta - https://github.com/node-red/node-red-dashboard/issues/275