Custom JavaScript examples

[baggins]

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.

Thanks! Reloading the browser did the trick. I had to do this even in private mode.

Another question: the addresses I use are boolean. Now when it is set to 1, the plan is shown. If I then go to another page on my visualization, and then the value returns to 0, the plan is shown again. Is there a way to avoid this?

So the plan should only show when the variable is set to 1 and not when it returns to 0.

BR

[admin]

Code:

$(function(){
  if (typeof grp != 'undefined') {
    grp.listen('1/1/2', function(object, state) {
      if (object.value) {
        showPlan(42);
      }
    });

    grp.listen('1/1/3', function(object, state) {
      if (object.value) {
        showPlan(42);
      }
    });
  }
});

[baggins]

Code:

$(function(){
 if (typeof grp != 'undefined') {
   grp.listen('1/1/2', function(object, state) {
     if (object.value) {
       showPlan(42);
     }
   });

   grp.listen('1/1/3', function(object, state) {
     if (object.value) {
       showPlan(42);
     }
   });
 }
});

Perfect!

Thanks.

[AEK]

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

Hi admin, I have some problems with this script.
I use boolen object, I changed value == 1 to value == true/false.
When I'm changing value from false to true, my visu page is switching.
But  when I Send True once again nothing happens. to make it works I nedd to switch my object to false and then to true.
whats the reason of this behavour? (tested on 20170620 FW)

the second thing I need is the opposite task. I need to write some value to object when specific plan is Opened. could you help me?

[Erwin van der Zwart]

Hi,

Change line 16 with extra parameter to execute on same object value like this:

 },true);

BR,

Erwin

[AEK]

Hi,

Change line 16 with extra parameter to execute on same object value like this:

 },true);

BR,

Erwin

Thanks, Erwin. what about my second question?
"the second thing I need is the opposite task. I need to write some value to object when specific plan is Opened. could you help me?"

[Erwin van der Zwart]

Hi,

Try this:

Code:

$(function(){
 var previousPlanId = 0;

 $(document).on('vclick click', function() {
    writecurrentpage();
 });
 
 function writecurrentpage(){
   if ( currentPlanId == 1 && currentPlanId != previousPlanId ) {
     grp.write('1/1/1', currentPlanId);
     previousPlanId = currentPlanId;
   }
 }

});

Or

Code:

$(function(){
 
 var previousPlanId = 0;
 
 setInterval(function(){
    if ( currentPlanId != previousPlanId ) {
     grp.write('1/1/1', currentPlanId);
     previousPlanId = currentPlanId;
   }
 }, 1000);

 
});

BR,

Erwin

[admin]

There's a showplan event that can be used:

Code:

$(function(){
  $('body').on('showplan', function(e, id) {
    console.log('current plan id is', id);
  });
});

As for value comparison, can you post whole code?

[gdimaria]

Hi, 

is there the possibility to hide/show a specific object from visualization on an event accours?

Thanks

Peppe

[Erwin van der Zwart]

Hi,

Use custom JS like below and add custom class 'hidebyknx' to your elements that needs to be included:

Code:

$(function(){
  grp.listen('1/1/1', function(object, state) {
     if (state == 'value' && object.value == true) {
         $(".hidebyknx").addClass("hide");
     } else if (state == 'value' && object.value == false) {
         $(".hidebyknx").removeClass("hide");
     }
  }, true);
});

BR,

Erwin

[gdimaria]

Hi,

Use custom JS like below and add custom class 'hidebyknx' to your elements that needs to be included:

Code:

$(function(){
  grp.listen('1/1/1', function(object, state) {
     if (state == 'value' && object.value == true) {
         $(".hidebyknx").addClass("hide");
     } else if (state == 'value' && object.value == false) {
         $(".hidebyknx").removeClass("hide");
     }
  }, true);
});

BR,

Erwin

It works, thank you so much!

is there a list of applicable  custom classes (knx and not knx)? 



eg.  I would need to refresh the values of the objects contained in a plan or widget when it is displayed and I do not want to bore you with too many requests 

[Erwin van der Zwart]

Hi,

Objects are always refreshed on changes so i don’t see why you need to do that..

There is no list of classnames and they have nothing to do with KNX ...

BR,

Erwin

[gdimaria]

Hi,

Objects are always refreshed on changes so i don’t see why you need to do that..

There is no list of classnames and they have nothing to do with KNX ...

BR,

Erwin

sorry for not explaining better: when I open a widget containing objects, often the values of the objects (feeds) are not updated and I have to do a group reading  - myobject:read() by clicking a button.

I would like to know if it is possible to read automatically when the page is opened. Thank you.

[Erwin van der Zwart]

Yes i understand, but you should not need it..

There must be a reason why your objects are not in sync, you need to find out why instead of implementing a bandage that should not be there..

BR,

Erwin

[Alphaplasti]

Here is some svg image and custom script which can be used for learning manipulating svg images by custom javascript. I used Inkscape for editing svg image(e.g. adding new elements).

1. Copy to "Custom javascript":

Code:

$(function(){

 $('object').load(function() {
   
   var svg = $('object')[0]; // Choosing svg

   var svgDoc = svg.contentDocument; // Choosing content from svg
   var svgItem = svgDoc.getElementById("rect4136"); // Choosing blind from content
   var svgItem1 = svgDoc.getElementById("g4136"); // Choosing window from content
   var svgItem2 = svgDoc.getElementById("rect4154-4"); // Choosing light from content
    
   position_plus = Scada.encodeGroupAddress('6/0/54'); // Position
      objectStore.addListener(position_plus, function(obj, type) {
   height = Number( svgItem.getAttribute("height") ) + 10;
   if ( height >= 100 ) { svgItem.setAttribute('height', '100') } else if ( height < 100 ) { svgItem.setAttribute('height', height) }
   height = svgItem.getAttribute("height");
   if (height > 50) {svgItem.style.fill='black'; svgItem2.style.opacity= '0'} else {svgItem.style.fill='red'; svgItem2.style.opacity= '80'}
   });
   
   position_minus = Scada.encodeGroupAddress('6/0/53'); // Position
      objectStore.addListener(position_minus, function(obj, type) {
   height = Number( svgItem.getAttribute("height") ) - 10;
   if ( height <= 0 ) { svgItem.setAttribute('height', '0') } else if ( height > 0 ) { svgItem.setAttribute('height', height) }
   height = svgItem.getAttribute("height");
   if (height > 50) {svgItem.style.fill='black'; svgItem2.style.opacity= '0'} else {svgItem.style.fill='red'; svgItem2.style.opacity= '80'}
   });
   
   // onclick blind-up
   svgItem.addEventListener('click', function (event) {
        }, false);
        svgItem.addEventListener('click', function (event) {
        svgItem.setAttribute('height', '0')
        }, true);
   
   // onclick blind-down
   svgItem1.addEventListener('click', function (event) {
        }, false);
        svgItem1.addEventListener('click', function (event) {
        svgItem.setAttribute('height', '100');
        }, true);
 
});
 
});

2. Upload 'interactive.svg' to /Images/Backgrounds'.

3. You can also add some buttons which change +/-10% height.
Currently they should be created in this way:
For +10%:  '6/0/54' which send 0 and 1
For -10%:  '6/0/53' which send 0 and 1

4. Try manipulating this svg

Hello buuuudzik, and everyone,

I'm trying your script with svg but it's doesn't work, I think I failed to link svg to script, I don't understand this line : 
var svg = $('object')[0]; // Choosing svg
Can you explain me how to choose svg please ?

Thanks a lot

Adrien

[buuuudzik]

Code:

$('object')

 was for selecting the container of your svg element but better way(because you probably have more than one svg image or object) is to add Additional class 'blind1' to this svg image in the visualisatiuon editior and select in this way:

Code:

$('.blind1 > object')

I've tested a minute ago and it seems to work but now I propose to generate HTML via Custom Javascript or create simple app for same task.

Full code:

Code:

// Manipulating SVG images
$(function(){

  $('.blind1 > object').load(function() {
    
    var svg = $('.blind1 > object')[0]; // Choosing svg

    var svgDoc = svg.contentDocument; // Choosing content from svg
    var svgItem = svgDoc.getElementById("rect4136"); // Choosing blind from content
    var svgItem1 = svgDoc.getElementById("g4136"); // Choosing window from content
    var svgItem2 = svgDoc.getElementById("rect4154-4"); // Choosing light from content
    
    position_plus = '32/1/15'; // Position
    grp.listen(position_plus, function(obj, type) {
      if (type == 'init') return false;
      
        let height = Number( svgItem.getAttribute("height") ) + 10;
      console.log('plus, nowa: ', height)
      if (height >= 100) svgItem.setAttribute('height', '100');
      else if (height < 100) svgItem.setAttribute('height', height);
      
      if (height > 50) {
        svgItem.style.fill='black';
        svgItem2.style.opacity= '0';
      } else {
        svgItem.style.fill='red';
          svgItem2.style.opacity= '80';
      };
    }, true);
    
    position_minus = '32/1/16';
    grp.listen(position_minus, function(obj, type) {
      if (type == 'init') return false;
      
        let height = Number( svgItem.getAttribute("height") ) - 10;
      console.log('minus, nowa: ', height)
      if (height <= 0) svgItem.setAttribute('height', '0');
      else if (height > 0) svgItem.setAttribute('height', height);
      
      if (height > 50) {
        svgItem.style.fill='black';
        svgItem2.style.opacity= '0';
      } else {
        svgItem.style.fill='red';
        svgItem2.style.opacity= '80';
      };
    }, true);
    
    // onclick blind-up
    svgItem.addEventListener('click', function (event) {
        }, false);
        svgItem.addEventListener('click', function (event) {
         svgItem.setAttribute('height', '0')
        }, true);
    
    // onclick blind-down
    svgItem1.addEventListener('click', function (event) {
        }, false);
        svgItem1.addEventListener('click', function (event) {
         svgItem.setAttribute('height', '100');
        }, true);
 
});
 
});

[Alphaplasti]

Thank you ! It work perfect, now i can learn about Js and svg manipulation !

[buuuudzik]

Thank you ! It work perfect, now i can learn about Js and svg manipulation !

Good luck, if you have some question please ask

[Alphaplasti]

Thank you ! It work perfect, now i can learn about Js and svg manipulation !

Good luck, if you have some question please ask

Thanks sooo a last question about svg manipulation, How to change a transform function, like "transform="rotate(140, 24, 24)" of a svg ?
I tried to adapt Js embedded scrip from svg but It dont work in JS, I've make a mistake or it's not the same JS ? ( I'm a noob on JS..)

Thanks!

Edit: It's okay, all work, a little mistake in my script thanks !

[buuuudzik]

Please check here:
https://stackoverflow.com/questions/3468...he-element