Custom JavaScript examples

[Superchango]

Please post in English next time
The task is to show a specific plan depending on a certain object value.

Code:

$(function(){
 if (typeof grp != 'undefined') {
   grp.listen('1/1/1', function(object, state) {
     var value = object.value;
     if (state == 'value') {
       if (value == 1) {
         showPlan(11);
       }
       else if (value == 2) {
         showPlan(12);
       }
       else if (value == 3) {
         showPlan(13);
       }
     }
   });
 }
});

Thank you very much. As it is applied to the "Touch"?

[permar]

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

[Erwin van der Zwart]

Hi,

Dimming is only possible by two buttons, one for up and one for down. Just like KNX push buttons.

Use the classes dimbuttonup and dimbuttondown to do that (see explaination)

BR,

Erwin

[rocfusion]

Hi,

Dimming is only possible by two buttons, one for up and one for down. Just like KNX push buttons.

Use the classes dimbuttonup and dimbuttondown to do that (see explaination)

BR,

Erwin

Hi Erwin,

A single KNX push button can toggle on dimming.  I have done this with Basalte and Gira.

Thanks,

Roger

[Erwin van der Zwart]

Hi Roger,

I know, we have it in our PB's also (: 

First of all this is not the most friendly way to do it as you never know if it initial goes up/on or down/off when using it.

We could do it in the visu but this means we have to remember last operating direction, so the script must be changed for that, but why should you do this methode in a visu? 
For PB's you might have the reason of missing the positions, but in a visu you don't have that issue (:

Please let me know why you want it and i will check if i can change the code ..

BR,

Erwin

[rocfusion]

Hi Erwin,

A simple answer is to save space. You know it, trying to squeeze everything in one screen is not always simple.


Thanks,

Roger

[Erwin van der Zwart]

Hi Roger,

Sorry but i'ts not a real good reason if you ask me (: 

There are so many ways to create extra space by adding a page or a widget or reduce button size or whatever...

I would never make a choice for a less intiutive way of control over extra space ..

When you make a widget with the up and down button and open it by a single button you have a much better way of control.

But i can add it, that's not the point, it just don't makes sense to me (:

BR,

Erwin

[permar]

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

Hi,

Im trying to create a temperature controller in the visualisation and I would like to have two buttons(+ and -) to step the temerature setpoint 0,5 degrees up and down. Is it possible to do this in the same type of way with addittional classes and custom javascript?

Best regards!
Per-Åke

[Erwin van der Zwart]

Hi,

You don't need a additional class for this

Just use a virtual object for your + and - buttons , set + button to 1 and min button to 0 as fixed value and add this event based script to the virtual object:

Code:

value = event.getvalue()
oldvalue = grp.getvalue('1/1/1')
if value == 1 then  
  if oldvalue =< 31.5 then
     grp.write('1/1/1', (oldvalue + 0.5))
  end
else
  if oldvalue => 7.5 then
     grp.write('1/1/1', (oldvalue - 0.5))
  end
end

BR,

Erwin

[admin]

If you are using binary object as script trigger, you need to replace value == 1 with value == true

[buuuudzik]

Hello I have a little question about variable range of variables in $.get() function.

Here I've tried use the glo variable (global) and fill it by data from .lp file. Inside get() function all is perfect but outside glo has still value from before the function.

Code:

glo = []
$.get( "/user/hvac_alias.lp", function( data ) { console.log(1, glo); data = data.trim(); data = JSON.parse(data);    glo = data; console.log(2, glo)});
console.log(3, glo)

This is the result from console:

Code:

3 Array [  ]
1 Array [  ]
2 Array [ Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, 122 more… ]

What is the reason of such situation?

[admin]

$.get is async, so console.log(3, glo) happens before it's loaded.

[Gadjoken]

Hello,
I would like to complete the following JavaScript by performing two different functions. One that works like on the java below and the other that sets the opacity to 0 and always leaving pointer-events to none. On different addresses. For example for disabledbyknx0 to 10 we will have so false then opacity to 0 and pointer-events to none and so true then opacity to 1 and pointer-events none. On the other hand for disablebyknx10 to 20 a so false then opacity to 0.5 and pointer-events to none so true then opacity to 1 and pointer-events to all.
Best regards

Java script (Thanks Erwin) :
$(function(){

// Table with parameters
var ClassTable = [
{ address:"0/6/1", cssclass:"disabledbyknx1" },
{ address:"0/6/2", cssclass:"disabledbyknx2" },
{ address:"0/6/3", cssclass:"disabledbyknx3" },
{ address:"0/6/4", cssclass:"disabledbyknx4" },
{ address:"0/6/5", cssclass:"disabledbyknx5" },
{ address:"0/6/6", cssclass:"disabledbyknx6" },
{ address:"0/6/7", cssclass:"disabledbyknx7" },
{ address:"0/6/8", cssclass:"disabledbyknx8" },
{ address:"0/6/9", cssclass:"disabledbyknx9" },
{ address:"0/6/10", cssclass:"disabledbyknx10" },
{ address:"0/6/11", cssclass:"disabledbyknx11" },
{ address:"0/6/12", cssclass:"disabledbyknx12" },
{ address:"0/6/13", cssclass:"disabledbyknx13" },
{ address:"0/6/14", cssclass:"disabledbyknx14" },
{ address:"0/6/15", cssclass:"disabledbyknx15" },
{ address:"0/6/16", cssclass:"disabledbyknx16" },
{ address:"0/6/17", cssclass:"disabledbyknx17" },
{ address:"0/6/18", cssclass:"disabledbyknx18" },
{ address:"0/6/19", cssclass:"disabledbyknx19" },
{ address:"0/6/20", cssclass:"disabledbyknx20" },
{ address:"0/6/21", cssclass:"disabledbyknx21" },
{ address:"0/6/22", cssclass:"disabledbyknx22" },
{ address:"0/6/23", cssclass:"disabledbyknx23" },
{ address:"0/6/24", cssclass:"disabledbyknx24" },
];

// Function to create event listeners
function CreateListeners(groupaddr,classname){
var ObjectAddress = Scada.encodeGroupAddress(groupaddr); // Use 1 bit object !
objectStore.addListener(ObjectAddress, function(obj, type) {
if ( obj.value == false ) {
$("." + classname).css("opacity", 0.5);
$("." + classname).css("pointer-events", 'none');
} else {
$("." + classname).css("opacity", 1);
$("." + classname).css("pointer-events", 'all');
}
});
}

for (var i in ClassTable) {
CreateListeners(ClassTable[i].address,ClassTable[i].cssclass)
}

});

BR
Gadjoken

---

I try this and it works :

$(function(){

// Table with parameters
var ClassTable = [
{ address:"32/1/1", cssclass:"disabledbyknx" },
{ address:"32/1/1", cssclass:"disabledbyknx1" },
];
// Function to create event listeners
function CreateListeners(groupaddr,classname){
var ObjectAddress = Scada.encodeGroupAddress(groupaddr); // Use 1 bit object !
objectStore.addListener(ObjectAddress, function(obj, type) {
if ( obj.value == false ) {
$("." + classname).css("opacity", 0.5);
$("." + classname).css("pointer-events", 'none');
} else {
$("." + classname).css("opacity", 1);
$("." + classname).css("pointer-events", 'all');
}

});
}

for (var i in ClassTable) {
CreateListeners(ClassTable[i].address,ClassTable[i].cssclass)
}

// Table with parameters
var ClassTable2 = [
{ address:"32/1/5", cssclass2:"disabledbyknx2" },
];

// Function to create event listeners
function CreateListeners2(groupaddr,classname2){
var ObjectAddress = Scada.encodeGroupAddress(groupaddr); // Use 1 bit object !
objectStore.addListener(ObjectAddress, function(obj, type) {
if ( obj.value == false ) {
$("." + classname2).css("opacity", 0);
$("." + classname2).css("pointer-events", 'none');
} else {
$("." + classname2).css("opacity", 1);
$("." + classname2).css("pointer-events", 'none');
}

});
}

for (var i in ClassTable2) {
CreateListeners2(ClassTable2[i].address,ClassTable2[i].cssclass2)
}

});

BR
Gadjoken.

[David]

Hello,
I would like to know how to do that when the setpoint temperature is 7 or 35 degrees the temperature does not appear but a text "OFF" appears

Thanks,

David

[admin]

You can use custom values in Objects for this

[josep]

Hi admin,

but it's doesn't work with 2 byte objects.

[baggins]

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.

Hi,
I have two addresses, say '1/1/2' and '1/1/3' that I want to use to trigger the same showPlan. I have absolutely no knowledge of javascript, so how do I modify this code?
Is my understanding correct that this code gets executed whenever any address is triggered?

Thanks.

[Daniel]

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.

Hi,
I have two addresses, say '1/1/2' and '1/1/3' that I want to use to trigger the same showPlan. I have absolutely no knowledge of javascript, so how do I modify this code?
Is my understanding correct that this code gets executed whenever any address is triggered?

Thanks.

Hi
Just use the function twice.
BR

[baggins]

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.

Hi,
I have two addresses, say '1/1/2' and '1/1/3' that I want to use to trigger the same showPlan. I have absolutely no knowledge of javascript, so how do I modify this code?
Is my understanding correct that this code gets executed whenever any address is triggered?

Thanks.

Hi
Just use the function twice.
BR

That was actually the first thing I tried: I made an exact copy of the function and changed the address.
The copy did not execute.

There is something strange going on.
I did some further testing and this script only works with the address I initially did the testing with. If I change the address to something else, it does not work.
Do I have to clear a cache somewhere?

Thanks.

[Daniel]

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.

Hi,
I have two addresses, say '1/1/2' and '1/1/3' that I want to use to trigger the same showPlan. I have absolutely no knowledge of javascript, so how do I modify this code?
Is my understanding correct that this code gets executed whenever any address is triggered?

Thanks.

Hi
Just use the function twice.
BR

That was actually the first thing I tried: I made an exact copy of the function and changed the address.
The copy did not execute.

There is something strange going on.
I did some further testing and this script only works with the address I initially did the testing with. If I change the address to something else, it does not work.
Do I have to clear a cache somewhere?

Thanks.

I do it always in private browsing then you are sure all is fresh.  Good practice is to clear browser cache when strange things start to happen.