04.05.2017, 06:23
(15.04.2016, 08:31)Erwin van der Zwart Wrote: We can now create buttons with short / long press detection and send a value on press / release by adding some functions into the custom javascript.
Add content of the custom Javascript below into the custom javascript section as showed in the example of Edgars
For scene button(s) with default long push time detection after 3 seconds:
1) Create a 1 byte unsigned object and create button(s) in your visu with this main object.
2) Enter in the additional class of the button(s) these classes: scenebutton normalpressed_0 longpressed_128
3) Change the value after normalpressed_xx or longpressed_xx into your wanted value for each different button between 0 and 255
For scene button(s) with custom long push time detection after x seconds:
1) Create a 1 byte unsigned object and create button(s) in your visu with this main object.
2) Enter in the additional class of the button(s) these classes: scenebutton normalpressed_0 longpressed_128 longpresstime_20
3) Change the value after normalpressed_xx or longpressed_xx into your wanted value for each different button between 0 and 255
4) Change the value after longpresstime_xx to the wanted long push time (xx (value) * 0.1second) = seconds for long push time
For doorbell button by bit object:
1) Create a 1 bit unsigned object and create button(s) in your visu with this main object.
2) Enter in the additional class of the button(s) these classes: doorbellbutton_bit released_0 pressed_1
3) Optional flip the value after released_x and pressed_x into your wanted value for each different button between 0 and 1
For doorbell button by byte object:
1) Create a 1 byte unsigned object and create button(s) in your visu with this main object.
2) Enter in the additional class of the button(s) these classes: doorbellbutton_byte released_0 pressed_255
3) Optional change the value after released_xxx and pressed_xxx into your wanted value for each different button between 0 and 255
For screen button by 1x bit move object and 1x bit step/stop object:
1) Create 2 1 bit unsigned objects and create button(s) in your visu with move object as main object and step/stop object as status-object and use same image on 1 and 0
2) Enter in the additional class of the UP button(s) these classes: screenbuttonup longpresstime_15 the values 0 and 1 are hardcoded and follows the KNX standard.
2) Enter in the additional class of the DOWN button(s) these classes: screenbuttondown longpresstime_15 the values 0 and 1 are hardcoded and follows the KNX standard.
3) Change the value after longpresstime_xx to the wanted long push time (xx (value) * 0.1second) = seconds for long push time
For dimming button by 1x 3 bit dimming object and 1x bit switch object:
1) Create a 3 bit dim/blind (3.007) object and a 1 bit bit unsigned object and create button(s) in your visu with dim object as main object and switch object as status-object and use same image on 1 and 0
2) Enter in the additional class of the BRIGHTER button(s) these classes: dimbuttonup longpresstime_15 the values 9/1 and 8/0 are hardcoded and follows the KNX standard.
2) Enter in the additional class of the DARKER button(s) these classes: dimbuttondown longpresstime_15 the values 1/0 and 0/0 are hardcoded and follows the KNX standard.
3) Change the value after longpresstime_xx to the wanted long push time (xx (value) * 0.1second) = seconds for long push time
Thats all you need to do (:
Have fun!
BR,
Erwin van der Zwart
Add this code into your custom JavaScript:
Code:$(function() {
// Declare variables for timers
var longpushtime, defaultlongpushtime = 30, intervaltime = 100, timer = 0, timerInterval, pressstatus, presstype;
function sendvalue(addr, value, typemajor, typeminor) {
var id = Scada.encodeGroupAddress(addr), obj = objectStore.objects[ id ];
if (obj && obj.datatype.major == typemajor && obj.datatype.minor == typeminor) {
setObjectValue({ address: obj.address , rawdatatype: obj.rawdatatype }, value, "text");
}
}
// Function to get values from bit object with additional classnames
function getconfig(el, prefix, minval, maxval) {
var reg = new RegExp(prefix + "_(\\d+)"), matches = el.className.match(reg), res = 0;
if (matches) {
res = parseInt(matches[ 1 ], 10) || 0;
}
res = Math.max(minval, res);
res = Math.min(maxval, res);
return res;
}
// Function to get pushtime values from additional classnames
function getpushtime(el, prefix) {
var reg = new RegExp(prefix + "_(\\d+)"), matches = el.className.match(reg), res = defaultlongpushtime;
if (matches) {
res = parseInt(matches[ 1 ], 10) || 0;
}
res = Math.max(0, res);
res = Math.min(1000, res);
return res;
}
// Function to get pushtime values for screen from additional classnames
function getpushtimescreen(el, prefix) {
var reg = new RegExp(prefix + "_(\\d+)"), matches = el.className.match(reg), res = 2;
if (matches) {
res = parseInt(matches[ 1 ], 10) || 0;
}
res = Math.max(0, res);
res = Math.min(1000, res);
return res;
}
// Function to remove the status object for doorbell function(s)
function removelistener(src) {
var el = $(src) // source element reference
, addr = el.data('status-object') // group address of status object
, id = Scada.encodeGroupAddress(addr) // address to id
, obj = objectStore.objects[ id ]; // get object's store reference
if (obj) {
// find listener that is attached to the source element
$.each(obj.listeners, function(index, listener) {
// remove the listener
if (listener.bind.el && el.is(listener.bind.el)) {
obj.listeners.splice(index, 1);
}
});
}
}
// Remove original events and add new press events
$(".scenebutton")
.off("vclick")
.on("vmousedown", function() {
pressstatus = 'pressed'
presstype = 'normal';
var btnthis = $(this), objthis = btnthis.data("object"),
longpushtime = getpushtime(this, "longpresstime");
timerInterval = setInterval(function() {
timer += 1;
if (timer >= longpushtime) {
btnthis.css("opacity", 0.5);
clearInterval(timerInterval);
presstype = 'long';
return;
}
}, intervaltime);
})
.on("vclick vmouseout touchend", function(e) {
if (pressstatus == 'pressed'){
var btnthis = $(this), objthis = btnthis.data("object"),
longpushtime = getpushtime(this, "longpresstime");
clearInterval(timerInterval);
if (presstype == 'normal') {
normalpressvalue = getconfig(this, "normalpressed", 0, 255);
sendvalue(objthis, normalpressvalue, 5, 0);
} else {
longpressvalue = getconfig(this, "longpressed", 0, 255);
sendvalue(objthis, longpressvalue, 5, 0);
}
btnthis.css("opacity", 1);
timer = 0;
presstype = 'normal';
pressstatus = 'released';
}
});
// Remove original events and add new press events
$(".doorbellbutton_bit")
.off("vclick")
.on("vmousedown", function() {
var btnthis = $(this), objthis = btnthis.data("object"),
pressedvalue = getconfig(this, "pressed", 0, 1);
removelistener(btnthis);
sendvalue(objthis, pressedvalue, 1, 0);
pressstatus = 'pressed';
})
.on("vclick vmouseout touchend", function() {
if (pressstatus == 'pressed'){
var btnthis = $(this), objthis = btnthis.data("object"),
releasevalue = getconfig(this, "released", 0, 1);
sendvalue(objthis, releasevalue, 1, 0);
}
pressstatus = 'released';
});
// Remove original events and add new press events
$(".doorbellbutton_byte")
.off("vclick")
.on("vmousedown", function() {
var btnthis = $(this), objthis = btnthis.data("object"),
pressedvalue = getconfig(this, "pressed", 0, 255);
removelistener(btnthis);
sendvalue(objthis, pressedvalue, 5, 0);
pressstatus = 'pressed'
})
.on("vclick vmouseout touchend", function() {
if (pressstatus == 'pressed'){
var btnthis = $(this), objthis = btnthis.data("object"),
releasevalue = getconfig(this, "released", 0, 255);
sendvalue(objthis, releasevalue, 5, 0);
}
pressstatus = 'released';
});
// Remove original events and add new press events
$(".screenbuttonup")
.off("vclick")
.on("vmousedown", function() {
pressstatus = 'pressed';
var btnthis = $(this), objmove = btnthis.data("object"),
objstop = btnthis.data("status-object"), longpressvalue = 0;
longpushtime = getpushtimescreen(this, "longpresstime");
timerInterval = setInterval(function() {
timer += 1;
if (timer >= longpushtime) {
btnthis.css("opacity", 0.5);
clearInterval(timerInterval);
sendvalue(objmove, longpressvalue, 1, 0);
}
}, intervaltime);
})
.on("vclick vmouseout touchend", function() {
var btnthis = $(this), objmove = btnthis.data("object"),
objstop = btnthis.data("status-object"), normalpressvalue = 0;
longpushtime = getpushtimescreen(this, "longpresstime");
clearInterval(timerInterval);
if (pressstatus == 'pressed' && timer < longpushtime) {
sendvalue(objstop, normalpressvalue, 1, 0);
}
btnthis.css("opacity", 1);
timer = 0;
pressstatus = 'released';
});
// Remove original events and add new press events
$(".screenbuttondown")
.off("vclick")
.on("vmousedown", function() {
pressstatus = 'pressed';
var btnthis = $(this), objmove = btnthis.data("object"),
objstop = btnthis.data("status-object"), longpressvalue = 1;
longpushtime = getpushtimescreen(this, "longpresstime");
timerInterval = setInterval(function() {
timer += 1
if (timer >= longpushtime) {
btnthis.css("opacity", 0.5);
clearInterval(timerInterval);
sendvalue(objmove, longpressvalue, 1, 0);
}
}, intervaltime);
})
.on("vclick vmouseout touchend", function() {
var btnthis = $(this), objmove = btnthis.data("object"),
objstop = btnthis.data("status-object"), normalpressvalue = 1;
longpushtime = getpushtimescreen(this, "longpresstime");
clearInterval(timerInterval);
if (pressstatus == 'pressed' && timer < longpushtime) {
sendvalue(objstop, normalpressvalue, 1, 0);
}
btnthis.css("opacity", 1);
timer = 0;
pressstatus = 'released';
});
// Remove original events and add new press events
$(".dimbuttonup")
.off("vclick")
.on("vmousedown", function() {
pressstatus = 'pressed';
var btnthis = $(this), objbrighter = btnthis.data("object"),
objswitch = btnthis.data("status-object"), longpressvalue = 9;
longpushtime = getpushtimescreen(this, "longpresstime");
timerInterval = setInterval(function() {
timer += 1;
if (timer >= longpushtime) {
btnthis.css("opacity", 0.5);
clearInterval(timerInterval);
sendvalue(objbrighter, longpressvalue, 3, 7);
}
}, intervaltime);
})
.on("vclick vmouseout touchend", function() {
var btnthis = $(this), objbrighter = btnthis.data("object"),
objswitch = btnthis.data("status-object"), longpressvalue = 8, normalpressvalue = 1;
longpushtime = getpushtimescreen(this, "longpresstime");
clearInterval(timerInterval);
if (pressstatus == 'pressed' && timer < longpushtime) {
sendvalue(objswitch, normalpressvalue, 1, 0);
} else if (pressstatus == 'pressed' && timer >= longpushtime) {
sendvalue(objbrighter, longpressvalue, 3, 7);
}
btnthis.css("opacity", 1);
timer = 0;
pressstatus = 'released';
});
// Remove original events and add new press events
$(".dimbuttondown")
.off("vclick")
.on("vmousedown", function() {
pressstatus = 'pressed';
var btnthis = $(this), objdarker = btnthis.data("object"),
objswitch = btnthis.data("status-object"), longpressvalue = 1;
longpushtime = getpushtimescreen(this, "longpresstime");
timerInterval = setInterval(function() {
timer += 1;
if (timer >= longpushtime) {
btnthis.css("opacity", 0.5);
clearInterval(timerInterval);
sendvalue(objdarker, longpressvalue, 3, 7);
}
}, intervaltime);
})
.on("vclick vmouseout touchend", function() {
var btnthis = $(this), objdarker = btnthis.data("object"),
objswitch = btnthis.data("status-object"), longpressvalue = 0, normalpressvalue = 0;
longpushtime = getpushtimescreen(this, "longpresstime");
clearInterval(timerInterval);
if (pressstatus == 'pressed' && timer < longpushtime) {
sendvalue(objswitch, normalpressvalue, 1, 0);
} else if (pressstatus == 'pressed' && timer >= longpushtime) {
sendvalue(objdarker, longpressvalue, 3, 7);
}
btnthis.css("opacity", 1);
timer = 0;
pressstatus = 'released';
});
});
This worked really nice! Are there any way to create a singel (toggle) pushbutton for dimming with short/long press?
Best Regards!
Per-Åke