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
#80
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 svgWink

Attached Files Thumbnail(s)
   
.svg   interactive.svg (Size: 12.36 KB / Downloads: 41)
Reply


Messages In This Thread
Custom JavaScript examples - by edgars - 13.04.2016, 11:27
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: