This forum uses cookies
This forum makes use of cookies to store your login information if you are registered, and your last visit if you are not. Cookies are small text documents stored on your computer; the cookies set by this forum can only be used on this website and pose no security risk. Cookies on this forum also track the specific topics you have read and when you last read them. Please confirm that you accept these cookies being set.

Custom JavaScript examples
(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
Reply


Messages In This Thread
Custom JavaScript examples - by edgars - 13.04.2016, 11:27
RE: Scene buttons by long / short press, screen buttons (step/stop) and doorbell button - by permar - 04.05.2017, 06:23
RE: Custom JavaScript examples - by edgars - 15.04.2016, 10:06
RE: Custom JavaScript examples - by buuuudzik - 16.04.2016, 18:53
RE: Custom JavaScript examples - by Joep - 21.03.2024, 09:26
RE: Custom JavaScript examples - by buuuudzik - 21.04.2016, 17:39
RE: Custom JavaScript examples - by buuuudzik - 25.04.2016, 08:53
RE: Custom JavaScript examples - by buuuudzik - 25.04.2016, 13:11
RE: Custom JavaScript examples - by Pawel - 26.04.2016, 19:23
RE: Custom JavaScript examples - by Pawel - 27.04.2016, 07:03
RE: Custom JavaScript examples - by Pawel - 27.04.2016, 08:05
RE: Custom JavaScript examples - by edgars - 28.04.2016, 08:30
RE: Custom JavaScript examples - by buuuudzik - 07.06.2016, 13:15
RE: Custom JavaScript examples - by buuuudzik - 08.06.2016, 06:47
RE: Custom JavaScript examples - by buuuudzik - 10.06.2016, 12:55
RE: Custom JavaScript examples - by buuuudzik - 13.06.2016, 06:27
RE: Custom JavaScript examples - by buuuudzik - 01.09.2016, 08:20
RE: Custom JavaScript examples - by Pawel - 13.06.2016, 06:59
RE: Custom JavaScript examples - by buuuudzik - 07.10.2016, 13:58
RE: Custom JavaScript examples - by admin - 13.06.2016, 09:02
RE: Custom JavaScript examples - by buuuudzik - 13.06.2016, 09:36
RE: Custom JavaScript examples - by buuuudzik - 13.06.2016, 12:21
RE: Custom JavaScript examples - by buuuudzik - 13.06.2016, 13:43
RE: Custom JavaScript examples - by buuuudzik - 13.06.2016, 16:52
RE: Custom JavaScript examples - by buuuudzik - 13.06.2016, 20:32
RE: Custom JavaScript examples - by gtsamis - 14.06.2016, 07:04
RE: Custom JavaScript examples - by admin - 14.06.2016, 07:31
RE: Custom JavaScript examples - by admin - 01.07.2016, 07:46
RE: Custom JavaScript examples - by admin - 01.07.2016, 10:18
RE: Custom JavaScript examples - by buuuudzik - 06.10.2016, 10:04
RE: Custom JavaScript examples - by admin - 07.10.2016, 17:38
RE: Custom JavaScript examples - by buuuudzik - 07.10.2016, 19:41
RE: Custom JavaScript examples - by buuuudzik - 10.10.2016, 13:17
RE: Custom JavaScript examples - by buuuudzik - 08.10.2016, 16:35
RE: Custom JavaScript examples - by buuuudzik - 08.10.2016, 19:01
RE: Custom JavaScript examples - by buuuudzik - 09.10.2016, 06:36
RE: Custom JavaScript examples - by buuuudzik - 09.10.2016, 15:32
RE: Custom JavaScript examples - by buuuudzik - 09.10.2016, 17:44
RE: Custom JavaScript examples - by admin - 10.10.2016, 09:24
RE: Custom JavaScript examples - by admin - 10.10.2016, 09:32
RE: Custom JavaScript examples - by admin - 10.10.2016, 13:34
RE: Custom JavaScript examples - by buuuudzik - 10.10.2016, 13:41
RE: Custom JavaScript examples - by buuuudzik - 11.10.2016, 09:59
RE: Custom JavaScript examples - by admin - 11.10.2016, 10:21
RE: Custom JavaScript examples - by admin - 11.10.2016, 10:46
RE: Custom JavaScript examples - by buuuudzik - 11.10.2016, 12:44
RE: Custom JavaScript examples - by admin - 11.10.2016, 12:51
RE: Custom JavaScript examples - by buuuudzik - 11.10.2016, 12:53
RE: Custom JavaScript examples - by admin - 11.10.2016, 12:54
RE: Custom JavaScript examples - by buuuudzik - 11.10.2016, 12:57
RE: Custom JavaScript examples - by admin - 11.10.2016, 13:04
RE: Custom JavaScript examples - by buuuudzik - 11.10.2016, 13:10
RE: Custom JavaScript examples - by buuuudzik - 13.10.2016, 12:57
RE: Custom JavaScript examples - by buuuudzik - 31.10.2016, 11:12
RE: Custom JavaScript examples - by cekca - 02.11.2016, 08:17
RE: Custom JavaScript examples - by admin - 02.11.2016, 11:23
RE: Custom JavaScript examples - by cekca - 02.11.2016, 14:28
RE: Custom JavaScript examples - by admin - 08.11.2016, 13:05
RE: Custom JavaScript examples - by buuuudzik - 05.12.2016, 19:11
RE: Custom JavaScript examples - by admin - 07.12.2016, 11:04
RE: Custom JavaScript examples - by Roman - 16.12.2016, 13:49
RE: Custom JavaScript examples - by admin - 16.12.2016, 14:58
RE: Custom JavaScript examples - by Roman - 16.12.2016, 15:38
RE: Custom JavaScript examples - by AEK - 22.01.2018, 07:01
RE: Custom JavaScript examples - by AEK - 22.01.2018, 08:48
RE: Custom JavaScript examples - by admin - 16.12.2016, 16:01
RE: Custom JavaScript examples - by FatMax - 24.12.2016, 00:08
RE: Custom JavaScript examples - by buuuudzik - 24.12.2016, 07:57
RE: Custom JavaScript examples - by Roman - 10.01.2017, 16:00
RE: Custom JavaScript examples - by AEK - 12.01.2017, 09:04
RE: Custom JavaScript examples - by buuuudzik - 16.01.2017, 16:30
RE: Custom JavaScript examples - by Pawel - 19.01.2017, 11:30
RE: Custom JavaScript examples - by buuuudzik - 19.01.2017, 16:25
RE: Custom JavaScript examples - by buuuudzik - 19.01.2017, 21:16
RE: Custom JavaScript examples - by buuuudzik - 19.01.2017, 21:58
RE: Custom JavaScript examples - by buuuudzik - 20.01.2017, 17:36
RE: Custom JavaScript examples - by admin - 21.01.2017, 07:35
RE: Custom JavaScript examples - by buuuudzik - 21.01.2017, 07:45
RE: Custom JavaScript examples - by buuuudzik - 25.01.2017, 06:10
RE: Custom JavaScript examples - by admin - 25.01.2017, 07:20
RE: Custom JavaScript examples - by rocfusion - 04.05.2017, 19:08
RE: Custom JavaScript examples - by admin - 18.05.2017, 05:54
RE: Custom JavaScript examples - by buuuudzik - 19.05.2017, 08:40
RE: Custom JavaScript examples - by admin - 19.05.2017, 09:05
RE: Custom JavaScript examples - by Gadjoken - 08.06.2017, 07:59
RE: Custom JavaScript examples - by David - 08.06.2017, 13:27
RE: Custom JavaScript examples - by admin - 08.06.2017, 17:21
RE: Custom JavaScript examples - by josep - 08.06.2017, 17:48
RE: Custom JavaScript examples - by baggins - 10.12.2017, 10:04
RE: Custom JavaScript examples - by Daniel - 11.12.2017, 10:28
RE: Custom JavaScript examples - by baggins - 11.12.2017, 11:06
RE: Custom JavaScript examples - by Daniel - 11.12.2017, 11:15
RE: Custom JavaScript examples - by baggins - 11.12.2017, 11:48
RE: Custom JavaScript examples - by admin - 11.12.2017, 11:52
RE: Custom JavaScript examples - by baggins - 11.12.2017, 12:25
RE: Custom JavaScript examples - by admin - 22.01.2018, 11:53
RE: Custom JavaScript examples - by gdimaria - 02.03.2018, 09:39
RE: Custom JavaScript examples - by gdimaria - 02.03.2018, 18:51
RE: Custom JavaScript examples - by gdimaria - 02.03.2018, 20:23
RE: Custom JavaScript examples - by mischa - 15.12.2020, 23:28
RE: Custom JavaScript examples - by buuuudzik - 04.03.2018, 21:14
RE: Custom JavaScript examples - by buuuudzik - 05.03.2018, 08:13
RE: Custom JavaScript examples - by buuuudzik - 06.03.2018, 07:17
RE: Custom JavaScript examples - by Mrinj - 24.03.2018, 20:29
RE: Custom JavaScript examples - by admin - 25.03.2018, 05:46
RE: Custom JavaScript examples - by Mrinj - 25.03.2018, 09:29
RE: Custom JavaScript examples - by Mrinj - 25.03.2018, 09:55
RE: Custom JavaScript examples - by DGrandes - 29.04.2019, 16:32
RE: Custom JavaScript examples - by admin - 29.04.2019, 17:00
RE: Custom JavaScript examples - by DGrandes - 30.04.2019, 10:28
RE: Custom JavaScript examples - by admin - 30.04.2019, 11:59
RE: Custom JavaScript examples - by DGrandes - 30.04.2019, 13:40
RE: Custom JavaScript examples - by admin - 30.04.2019, 14:04
RE: Custom JavaScript examples - by DGrandes - 30.04.2019, 15:38
RE: Custom JavaScript examples - by jlfneira - 08.08.2019, 08:45
RE: Custom JavaScript examples - by tecnorte - 01.04.2020, 11:09
RE: Custom JavaScript examples - by khalil - 05.07.2021, 08:08
RE: Custom JavaScript examples - by Daniel - 03.03.2020, 10:22
RE: Custom JavaScript examples - by Daniel - 03.03.2020, 10:56
RE: Custom JavaScript examples - by Hosutech - 06.03.2020, 07:47
RE: Custom JavaScript examples - by admin - 06.03.2020, 08:06
RE: Custom JavaScript examples - by gtsamis - 06.10.2020, 08:57
RE: Custom JavaScript examples - by admin - 06.10.2020, 09:18
RE: Custom JavaScript examples - by gtsamis - 06.10.2020, 09:41
RE: Custom JavaScript examples - by admin - 16.12.2020, 08:02
RE: Custom JavaScript examples - by mischa - 16.12.2020, 08:18
RE: Custom JavaScript examples - by admin - 16.12.2020, 08:25
RE: Custom JavaScript examples - by serkank - 26.04.2021, 09:37
RE: Custom JavaScript examples - by admin - 26.04.2021, 09:51
RE: Custom JavaScript examples - by serkank - 26.04.2021, 11:16
RE: Custom JavaScript examples - by tigi - 29.06.2021, 16:26
RE: Custom JavaScript examples - by admin - 29.06.2021, 16:46
RE: Custom JavaScript examples - by tigi - 07.07.2021, 09:09
RE: Custom JavaScript examples - by admin - 18.08.2023, 12:24
RE: Custom JavaScript examples - by admin - 18.08.2023, 13:02

Forum Jump: