Logic Machine Forum
Group Address value in SVG icon - Printable Version

+- Logic Machine Forum (https://forum.logicmachine.net)
+-- Forum: LogicMachine eco-system (https://forum.logicmachine.net/forumdisplay.php?fid=1)
+--- Forum: Visualization (https://forum.logicmachine.net/forumdisplay.php?fid=9)
+--- Thread: Group Address value in SVG icon (/showthread.php?tid=1831)

Group Address value in SVG icon - Thomas - 14.01.2019

Hi
Can I use object group address value in SVG icon?
The idea is to show damper state better than just value in percent. And what I don't want to do is creating set of icon rotated by 10° stored as object additional icons.
Any idea?

I use this construction in SVG
Code:
 var p = window.parent, el, addr;
      el = document.getElementById('mercury');
     if (p) {
       if (typeof p.grp != 'undefined') {
p.grp.listen('7/2/1', function(object, state) {
el.setAttribute('height', Math.round((object.value+30) * 6.4));
}, false);
        }
     }
   
and what I need in this script is to replace '7/2/1' by the actual object group address.

RE: Group Address value in SVG icon - admin - 14.01.2019

You can do it other way round with Custom JavaScript. You can assign a custom class to your object, then get attached group address via data attribute.

Here's an example that will rotate all elements with rotate class according to attached object value:
Code:
$(function(){
  $('.rotate').each(function(i, el) {
    var $el = $(el), addr = $el.data('object'); // or 'status-object'

    grp.listen(addr, function(obj) {
      $el.css('transform', 'rotate(' + obj.value + 'deg');
    });
  });
});


RE: Group Address value in SVG icon - Thomas - 14.01.2019

Perfect! Thank you!
The problem is it doesn't work.
It rotates object bounding the icon. But not the icon itself. What I need is to apply rotate at "icon". What I need is to propagate the transform function to "icon" class. Do you have any idea how to do it?
See attached picture.

RE: Group Address value in SVG icon - Thomas - 15.01.2019

Working solution:

Code:
$(function(){
  $('.rotate').each(function(i, el) {
        var $el = $(el), addr = $el.data('object'); // or 'status-object'
      grp.listen(addr, function(obj) {
        $el.children(".icon").css('transform', 'rotate(' + (180-(obj.value*0.9)) + 'deg)');
    });
     });
});


RE: Group Address value in SVG icon - chrigi - 11.05.2021

does this nice rotate class option still work in the new beta firmware ? worked fine in my 2017 firmware but does not rotate the icons after i installed the new beta. did a recovery procedure and full restore. 
any idea ?

RE: Group Address value in SVG icon - Daniel - 11.05.2021

Still works for me. Browser cache?

RE: Group Address value in SVG icon - chrigi - 11.05.2021

did not do it

RE: Group Address value in SVG icon - admin - 11.05.2021

Check browser console (F12) for any errors.
Also run this in console and post what you get:
Code:
$('.rotate').length


RE: Group Address value in SVG icon - chrigi - 11.05.2021

> $('.rotate').length
< 14
[Error] Failed to load resource: the server responded with a status of 404 (Not Found) (motion100p.svg, line 0)

..
..

these error messages must come from icons that are still somewhere in the visualisation but were replaced with more compressed ones... have to identify them all and delete them...

RE: Group Address value in SVG icon - admin - 12.05.2021

Works for me as well. Here's a slightly modified script that will log each object change to the console. The first log argument is the element that is rotated. You can inspect this element in the dev tools and check if rotate transformation is applied or not.
Code:
$(function(){
  $('.rotate').each(function(i, el) {
    var $el = $(el), addr = $el.data('object'), icon = $el.find('.icon');
      grp.listen(addr, function(obj) {
      console.log(icon.get(0), obj.value);
      icon.css('transform', 'rotate(' + obj.value + 'deg)');
    });
  });
});

   

RE: Group Address value in SVG icon - chrigi - 12.05.2021

thank you, admin. just found out why. i inserted a few lines in the custom java script some weeks ago that you provided in another post to make trend labels transparent. it did not work in my case. i deleted the lines and rotate works again ! thank you

RE: Group Address value in SVG icon - Joep - 03.10.2023

Code:
$(function(){
  $('.rotate').each(function(i, el) {
    var $el = $(el), addr = $el.data('object'); // or 'status-object'

    grp.listen(addr, function(obj) {
      $el.each(function () {
        this.style.setProperty('transform', 'rotate(' + obj.value + 'deg)', 'important');
      });
    });
  });
});

Updated version that includes the 'important' css tag. Otherwise it isn't working when the object is set to 'read only'.

Special thanks to Erwin van der Zwart Smile