Custom JavaScript examples

Linear Mode

Custom JavaScript examples

buuuudzik Offline

Senior Member

Posts: 942
Threads: 161
Joined: Jul 2015
Reputation: 33

#80

11.10.2016, 09:59 (This post was last modified: 04.03.2018, 21:45 by buuuudzik.)

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

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

3. Add it as local image on some plan and add to this image Additional class 'blind1'.

4. 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

5. Try manipulating this svg Wink