Custom JavaScript examples

[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