Dear all,
I need to distinguish between a normal and long press/touch when ui_button is used. With this, I would like to emulate a KNX push button with the same functionality in the nodered dashboard.
Any chance to get there, e.g. using ui_template?
OK, with the idea from "long press" ui element - #4 by hugobox I got it solved.
<div id="longPress">
<md-button ng-model="msg.payload">Long</md-button>
</div>
<script>
(function($scope) {
let timerTreshold = false
let timer;
$('#longPress').on('touchstart mousedown', function(e) {
e.preventDefault(); //prevent default behavior
timer = setTimeout(function() {timerTreshold = true; console.log("long");}, 1000);
});
$('#longPress').on('touchend mouseup', function(e) {
e.preventDefault(); //prevent default behavior
clearTimeout(timer);
if (!timerTreshold){
console.log("short");
}
timerTreshold = false;
});
})(scope);
</script>
Is there a way to use {{$id}}
to make this template universal?
Also got this solved. The trick is waiting until document has finished loading using jQuery ducment ready function $(function() {})
.
<div id="{{$id}}">
<md-button ng-model="msg.payload">Long</md-button>
</div>
<script>
(function($scope) {
let timerTreshold = false
let timer;
$(function() {
$('#'+$scope.$id).on('touchstart mousedown', function(e) {
e.preventDefault(); //prevent default behavior
timer = setTimeout(function() {timerTreshold = true; console.log("long");}, 1000);
});
$('#'+$scope.$id).on('touchend mouseup', function(e) {
e.preventDefault(); //prevent default behavior
clearTimeout(timer);
if (!timerTreshold){
console.log("short");
}
timerTreshold = false;
});
});
})(scope);
</script>