+- Logic Machine Forum (https://forum.logicmachine.net)
+-- Forum: LogicMachine eco-system (https://forum.logicmachine.net/forumdisplay.php?fid=1)
+--- Forum: Scripting (https://forum.logicmachine.net/forumdisplay.php?fid=8)
+--- Thread: Custom JavaScript examples (/showthread.php?tid=275)
Custom JavaScript examples - edgars - 13.04.2016
In the firmware starting from 4.2016 there is Custom JavaScript feature available in LogicMachine --> Scripting --> Tools --> Edit custom JavaScript.
It is possible to create different dynamic tasks, like detect short/long press from visualization using one icon (Erwin, will you please add your example here) or as in this example, we can open specific Floor/Plan when some grp address is triggered - useful e.g. when you want IP Camera page automatically to be opened when Intercom button is pressed:
Code:
$(function(){
if (typeof objectStore !== 'undefined') {
var id = Scada.encodeGroupAddress('1/1/2');
objectStore.addListener(id, function(object, type) {
if (type == 'value') {
showPlan(69);
}
});
}
});showPlan() value can be get when you hover your mouse over specific plan name and click on the arrow. Please see in pictures attached.
Scene buttons by long / short press, screen buttons (step/stop) and doorbell button - Erwin van der Zwart - 15.04.2016
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';
});
});RE: Scene buttons by long / short press and doorbell button - buuuudzik - 15.04.2016
How Can I connect this scripts with a pushbuttons? Or I must add some .svg image which will be the button? Like in this case:
http://forum.logicmachine.net/showthread.php?tid=93&highlight=long
RE: Scene buttons by long / short press and doorbell button - AEK - 15.04.2016
(15.04.2016, 09:49)buuuudzik Wrote: How Can I connect this scripts with a pushbuttons? Or I must add some .svg image which will be the button? Like in this case:
http://forum.logicmachine.net/showthread.php?tid=93&highlight=long
in new firmware you should add additional class to icon in visualisation and add this code to custom javascript (Scripting -> tools)
RE: Custom JavaScript examples - edgars - 15.04.2016
here is the Additional Classes field in Visualization Editor which you should use (see attached)
RE: Scene buttons by long / short press and doorbell button - buuuudzik - 15.04.2016
(15.04.2016, 09:55)AEK Wrote:(15.04.2016, 09:49)buuuudzik Wrote: How Can I connect this scripts with a pushbuttons? Or I must add some .svg image which will be the button? Like in this case:
http://forum.logicmachine.net/showthread.php?tid=93&highlight=long
in new firmware you should add additional class to icon in visualisation and add this code to custom javascript (Scripting -> tools)
Thank you for your answer but can you or somebody else add some 100% working very step-by-step example with all necessary information including how can I choose the GA of short and long pushbutton, how can I connect the specific class to the script. Please, I am very new in js, but I also want to use this functions. If Embedded Systems can prepare some training about using js in LM it will be very helpfull. I can also consider the participation in a such training if this will be paid training.
RE: Scene buttons by long / short press and doorbell button - AEK - 15.04.2016
(15.04.2016, 10:10)buuuudzik Wrote:(15.04.2016, 09:55)AEK Wrote:(15.04.2016, 09:49)buuuudzik Wrote: How Can I connect this scripts with a pushbuttons? Or I must add some .svg image which will be the button? Like in this case:
http://forum.logicmachine.net/showthread.php?tid=93&highlight=long
in new firmware you should add additional class to icon in visualisation and add this code to custom javascript (Scripting -> tools)
Thank you for your answer but can you or somebody else add some 100% working very step-by-step example with all necessary information including how can I choose the GA of short and long pushbutton, how can I connect the specific class to the script. Please, I am very new in js, but I also want to use this functions. If Embedded Systems can prepare some training about using js in LM it will be very helpfull. I can also consider the participation in a such training if this will be paid training.
paste all Erwin's code to costom javascript, then choose function you need
for example
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
you need to set additional classes to some icon with data type 1 byte unsigned integer to scenebutton normalpressed_0 longpressed_128 longpresstime_20
and change values after "_" if you need
in this example you will recieve 0 for short press and 128 for long pres (2 seconds)
you can create event base script for this object and run some scenes from it
here is example of event
x = event.getvalue()
if x == 0 then
grp.write('1/1/1', true)
elseif x == 128 then
grp.write('1/1/2', 29.5)
else
-- do nothing
end
RE: Scene buttons by long / short press and doorbell button - buuuudzik - 15.04.2016
(15.04.2016, 10:20)AEK Wrote:(15.04.2016, 10:10)buuuudzik Wrote:(15.04.2016, 09:55)AEK Wrote:(15.04.2016, 09:49)buuuudzik Wrote: How Can I connect this scripts with a pushbuttons? Or I must add some .svg image which will be the button? Like in this case:
http://forum.logicmachine.net/showthread.php?tid=93&highlight=long
in new firmware you should add additional class to icon in visualisation and add this code to custom javascript (Scripting -> tools)
Thank you for your answer but can you or somebody else add some 100% working very step-by-step example with all necessary information including how can I choose the GA of short and long pushbutton, how can I connect the specific class to the script. Please, I am very new in js, but I also want to use this functions. If Embedded Systems can prepare some training about using js in LM it will be very helpfull. I can also consider the participation in a such training if this will be paid training.
paste all Erwin's code to costom javascript, then choose function you need
for example
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
you need to set additional classes to some icon with data type 1 byte unsigned integer to scenebutton normalpressed_0 longpressed_128 longpresstime_20
and change values after "_" if you need
in this example you will recieve 0 for short press and 128 for long pres (2 seconds)
you can create event base script for this object and run some scenes from it
here is example of event
x = event.getvalue()
if x == 0 then
grp.write('1/1/1', true)
elseif x == 128 then
grp.write('1/1/2', 29.5)
else
-- do nothing
end
Thank you very good help. I will try this later, but thank you very much
RE: Custom JavaScript examples - Erwin van der Zwart - 15.04.2016
I have update the custom Javascipt to support screen control with up/down step/stop buttons by short/long press with adjustable press time and dimming up/down on/off buttons by short/long press with adjustable press time
BR,
Erwin van der Zwart
RE: Scene buttons by long / short press and doorbell button - Erwin van der Zwart - 15.04.2016
(15.04.2016, 10:10)buuuudzik Wrote: Thank you for your answer but can you or somebody else add some 100% working very step-by-step example with all necessary information including how can I choose the GA of short and long pushbutton, how can I connect the specific class to the script. Please, I am very new in js, but I also want to use this functions. If Embedded Systems can prepare some training about using js in LM it will be very helpfull. I can also consider the participation in a such training if this will be paid training.Hi,
You don't need to know the js, just paste the code (unchanged) into your custom Javascript (available in new firmware soon / this week).
After that create the buttons as usual only notice the status-object that might be mis-used for second object (;
Then add the additional class lines for each function you want to use on the matching button(s) and change the send or time values.
Good luck!
BR,
Erwin van der Zwart
RE: Scene buttons by long / short press and doorbell button - buuuudzik - 15.04.2016
(15.04.2016, 14:54)Erwin van der Zwart Wrote:(15.04.2016, 10:10)buuuudzik Wrote: Thank you for your answer but can you or somebody else add some 100% working very step-by-step example with all necessary information including how can I choose the GA of short and long pushbutton, how can I connect the specific class to the script. Please, I am very new in js, but I also want to use this functions. If Embedded Systems can prepare some training about using js in LM it will be very helpfull. I can also consider the participation in a such training if this will be paid training.Hi,
You don't need to know the js, just paste the code (unchanged) into your custom Javascript (available in new firmware soon / this week).
After that create the buttons as usual only notice the status-object that might be mis-used for second object (;
Then add the additional class lines for each function you want to use on the matching button(s) and change the send or time values.
Good luck!
BR,
Erwin van der Zwart
Thanks, I will try
RE: Custom JavaScript examples - Erwin van der Zwart - 15.04.2016
Another nice custom Javascript feature: Back to startpage after x seconds when there is no user input:
The startpage will be automaticly linked to the first page of the visu that is loaded.
Paste this code into your custom Javascript and adjust time (SE_Timeout) if needed.
Code:
$(function() {
// Back to Start after x seconds (in miliseconds)
var SE_Timeout = 90000; // adjust this timer value if needed (90 seconds in miliseconds)
var SE_Startpage = currentPlanId; // First page that is loaded
var eventlist = 'vclick vmousedown vmouseout touchend';
// Timer function no usage detected
function No_Usage_Detected(callback, timeout, _this) {
var timer;
return function(e) {
var _that = this;
if (timer)
clearTimeout(timer);
timer = setTimeout(function() {
callback.call(_this || _that, e);
}, timeout);
}
}
// Back to start function when timer elapsed
var SE_Goto_Startpage = No_Usage_Detected(function(e) {
if ( currentPlanId != SE_Startpage ) {
showPlan(SE_Startpage);
}
}, SE_Timeout);
// Add event listener to document to detect user input
$(document)
.on(eventlist, function() {
SE_Goto_Startpage();
});
// Add event listener to all iframes to detect user input inside iframes
$('iframe').load(function() {
var iframe = $('iframe').contents().find('html');
iframe.on(eventlist, function(event) {
SE_Goto_Startpage();
});
});
});BR,
Erwin van der Zwart
RE: Custom JavaScript examples - buuuudzik - 16.04.2016
(15.04.2016, 21:32)Erwin van der Zwart Wrote: Another nice custom Javascript feature: Back to startpage after x seconds when there is no user input:
The startpage will be automaticly linked to the first page of the visu that is loaded.
Paste this code into your custom Javascript and adjust time (SE_Timeout) if needed.
Code:$(function() {
// Back to Start after x seconds (in miliseconds)
var SE_Timeout = 90000; // adjust this timer value if needed (90 seconds in miliseconds)
var SE_Startpage = currentPlanId; // First page that is loaded
var eventlist = 'vclick vmouseout click blur keypress keyup touchstart touchend touchcancel touchleave touchmove';
// Timer function no usage detected
function No_Usage_Detected(callback, timeout, _this) {
var timer;
return function(e) {
var _that = this;
if (timer)
clearTimeout(timer);
timer = setTimeout(function() {
callback.call(_this || _that, e);
}, timeout);
}
}
// Back to start function when timer elapsed
var SE_Goto_Startpage = No_Usage_Detected(function(e) {
if ( currentPlanId != SE_Startpage ) {
showPlan(SE_Startpage);
}
}, SE_Timeout);
// Add event listener to document to detect user input
$(document)
.on(eventlist, function() {
SE_Goto_Startpage();
});
// Add event listener to all iframes to detect user input inside iframes
$('iframe').load(function() {
var iframe = $('iframe').contents().find('html');
iframe.on(eventlist, function(event) {
SE_Goto_Startpage();
});
});
});
BR,
Erwin van der Zwart
This is very good and useful functionl
Thanks
RE: Custom JavaScript examples - Erwin van der Zwart - 17.04.2016
Hi,
I updated/improved the code in the original post.
I changed a couple of timings to make it respond better on iOS.
Also added a remark to set status object to dummy object when not used to
make sure the main object won't update the button when longpress is reached. I will ask developer If and how we can bypass that.
For pc usage you probably won 't notice the difference but I would
advice to use current code to be real multi platform. I haven't test
on Android yet but i think it will run without issues.
BR,
Erwin van der Zwart
RE: Custom JavaScript examples - buuuudzik - 21.04.2016
(17.04.2016, 07:00)Erwin van der Zwart Wrote: Hi,
I updated/improved the code in the original post.
I changed a couple of timings to make it respond better on iOS.
Also added a remark to set status object to dummy object when not used to
make sure the main object won't update the button when longpress is reached. I will ask developer If and how we can bypass that.
For pc usage you probably won 't notice the difference but I would
advice to use current code to be real multi platform. I haven't test
on Android yet but i think it will run without issues.
BR,
Erwin van der Zwart
Maybe you can know is it possible to add some tone on every visualisation click or only when the command is sended to the bus?
RE: Custom JavaScript examples - Erwin van der Zwart - 21.04.2016
Hi,
You mean a audio tone like a click sound on every button/element press? If yes, that's really easy to add (;
BR,
Erwin
RE: Custom JavaScript examples - buuuudzik - 25.04.2016
(21.04.2016, 22:56)Erwin van der Zwart Wrote: Hi,
You mean a audio tone like a click sound on every button/element press? If yes, that's really easy to add (;
BR,
Erwin
Yes, it can be in such way
RE: Custom JavaScript examples - Erwin van der Zwart - 25.04.2016
Hi,
Put this in your custom Javascript and upload a audiofile called 'click.mp3' into your image -> backgrounds tab:
Only for / available in new upcomming firmware version
Code:
// Closing current script section to add elements
</script>
<audio id="LM_Audio" style="display: none;"></audio>
<script type="text/javascript"> // Starting new script section after adding elements
$(function() {
var LM_snd = document.getElementById("LM_Audio");
LM_snd.src= "/scada/resources/img/click.mp3";
LM_snd.load();
function LM_Pressed_Audio() {
LM_snd.play();
}
$(".item-control")
.on("vmousedown", function() {
LM_Pressed_Audio()
});
$(".btn")
.on("vmousedown", function() {
LM_Pressed_Audio()
});
mute = Scada.encodeGroupAddress('1/1/1'); // Use bit object !
objectStore.addListener(mute, function(obj, type) {
if(obj.value == 1){
LM_snd.muted = true;
} else {
LM_snd.muted = false;
}
});
volume = Scada.encodeGroupAddress('1/1/2'); // Use byte object !
objectStore.addListener(volume, function(obj, type) {
if( obj.datatype.major == 5 && obj.datatype.minor == 0 ){
var volumevalue = (obj.value / 2.55) / 100;
LM_snd.volume = volumevalue;
} else if ( obj.datatype.major == 5 && obj.datatype.minor == 1 ){
var volumevalue = (obj.value / 100);
LM_snd.volume = volumevalue;
}
});
});RE: Custom JavaScript examples - buuuudzik - 25.04.2016
(25.04.2016, 11:47)Erwin van der Zwart Wrote: Hi,
Put this in your custom Javascript and upload a audiofile called 'click.mp3' into your image -> backgrounds tab:
Only for / available in new upcomming firmware version
Code:// Closing current script section to add elements
</script>
<audio id="LM_Audio" style="display: none;"></audio>
<script type="text/javascript"> // Starting new script section after adding elements
$(function() {
var LM_snd = document.getElementById("LM_Audio");
LM_snd.src= "/scada/resources/img/click.mp3";
LM_snd.load();
function LM_Pressed_Audio() {
LM_snd.play();
}
$(".item-control")
.on("vmousedown", function() {
LM_Pressed_Audio()
});
$(".btn")
.on("vmousedown", function() {
LM_Pressed_Audio()
});
});
It works very good
And what I must add to give the user function of switching off this sound if he wants? Maybe some GA for volume status?
RE: Custom JavaScript examples - Erwin van der Zwart - 25.04.2016
Hi,
I have updated my sample and added a object listener for mute (bit object 1/1/1 in my sample) and a object listener for volume (byte object 5 or 5.001 1/1/2 in my sample)
So now your customer can adjust the volume and mute the click sound.
BR,
Erwin