"long press" ui element

Dashboard
1

I'm using quite a lot of UI switches using the "switch" node.
I was able to successfully connect all of them to a template node for a vibrating effect whenever the buttons are clicked, like this:

<script>
(function(scope){ 
            
            scope.$watch('msg', function(msg) {
            navigator.vibrate(100);
            });
    })(scope);
</script>

Now, what I want to achieve is to add an option where "long" press (I'm using mobile phone touchscreen interface, the mouse part is less important for me). A long press needs to change the state of the switch without resending its payload - that's extremely useful in cases where the UI switch is wrong - for example it shows "on", when the light switch it controls is in fact "off". So having the option to "correct" a switch is important for me.

Is there perhaps an option to add something to the template node? Something with "touchtart\touchend"? I'm a bit of a newbie here, so any help will be greatly appreciated.

Thanks.

2

Possibly better to avoid that situation. Can you not feed the current state of the actual switch into the ui_switch so that it always shows the correct state?

3

I'm also doing that, but it's not enough. In light switches that are based on RF technology, you often don't know the actual state the switch is in without physically looking. So in most cases I don't have a reliable information that could toggle the switch for me, it needs a manual "correction".
I saw here an example that binds scope.click

Can something similar be done to bind longpress?
Perhaps something similar to the discussion here?

I tried to add:

scope.onLongPress = function(b) {
        this.send('test');
    }.bind(scope);

But it didn't work.

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
5

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.