Custom JavaScript examples

[edgars]

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.

[Erwin van der Zwart]

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';
    });
 
});

[buuuudzik]

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...light=long

[AEK]

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...light=long

in new firmware you should add additional class to icon in visualisation and add this code to custom javascript (Scripting -> tools)

[edgars]

here is the Additional Classes field in Visualization Editor which you should use (see attached)

[buuuudzik]

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...light=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.

[AEK]

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...light=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

[buuuudzik]

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...light=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

[Erwin van der Zwart]

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

[Erwin van der Zwart]

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

[buuuudzik]

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

[Erwin van der Zwart]

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

[buuuudzik]

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

[Erwin van der Zwart]

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

[buuuudzik]

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?

[Erwin van der Zwart]

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

[buuuudzik]

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

[Erwin van der Zwart]

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;
    }
  });
  
});

[buuuudzik]

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?

[Erwin van der Zwart]

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