"long press" ui element

Dashboard
4

Hi @moryoav!
Here's a quick hack that hopefully works for you, if you press on it (either mobile or desktop) for more than 1 second, the toggle switch will change but not output back to Node-Red:

<div>
   <md-switch id="longPress" ng-model="msg.payload"> Long Press switch</md-switch>
</div>

<script>

(function($scope) {
    
let timerTreshold = false
let timer;
let msg = {"payload": false}
    
$('#longPress').on('touchstart mousedown', function(e) {
    e.preventDefault(); //prevent default behavior
    timer = setTimeout(function() {timerTreshold = true; msg.payload = !msg.payload; console.log(msg.payload)}, 1000);
});

$('#longPress').on('touchend mouseup', function(e) {
    e.preventDefault(); //prevent default behavior
    clearTimeout(timer)
    if (!timerTreshold){
        msg.payload = !msg.payload
        $scope.send(msg);
    }
    timerTreshold = false;
    
});
    
})(scope);
</script>
1 Like