Momentary button on Dashboard


#1

Hello,

I'm trying to create a momentary button on the dashboard.
When I press it, payload should go "true", when I let go, "false"

this doesn't do the trick as it sends both after I release the button:

[{"id":"c07efd27.1cb3f8","type":"debug","z":"6880e39e.295cac","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","x":530,"y":500,"wires":[]},{"id":"d3589e5b.0c4448","type":"ui_template","z":"6880e39e.295cac","group":"c713dff5.21ab3","name":"Toggle Button","order":1,"width":"3","height":"2","format":"<md-button\n    class=\"vibrate filled bigfont\"\n    ng-style=\"{background: !msg.payload ? 'red' : 'green' }\"\n    ng-mousedown=\"send({payload: true})\"\n    ng-mouseup=\"send({payload: false})\"\n    > \n    Jalousie<br/>Auf\n    </md-button>","storeOutMessages":false,"fwdInMessages":false,"templateScope":"local","x":350,"y":500,"wires":[["c07efd27.1cb3f8"]]},{"id":"c713dff5.21ab3","type":"ui_group","z":"","name":"Arbeitszimmer","tab":"a2b4d00e.93a548","order":1,"disp":false,"width":"10","collapse":false},{"id":"a2b4d00e.93a548","type":"ui_tab","z":"","name":"Arbeitszimmer","icon":"book","order":1}]

any ideas?
Thank you!


#2

Hi!
I tried your button and it works well for me, it doesn't output both on-release. Not sure why it would behave that way on your setup...


#3

you are right, its working on my mac with a mouse/trackpad, but not on my tablets
I need it to work at my tablets, I forgot to mention that ...is there a different way of implementation?


#4

Ah yes, for mobile, ng-touch, ng-touchstart and ng-touchend are not implemented, I believe there is no easy way for that unfortunately.


#5

Try the following, it should work for both mobile and desktop:

<div class="momentary">
   <md-button> Momentary Button</md-button>
</div>

<script>

(function($scope) {
    
$('.momentary').on('touchstart mousedown', function(e) {
    e.preventDefault(); //prevent default behavior
    $scope.send({"payload": true});
});

$('.momentary').on('touchend mouseup', function(e) {
    e.preventDefault(); //prevent default behavior
    $scope.send({"payload": false});
});
    
})(scope);
</script>