Group Address value in SVG icon

[Thomas]

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.

[admin]

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

[Thomas]

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.

[Thomas]

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

[chrigi]

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 ?

[Daniel]

Still works for me. Browser cache?

[chrigi]

did not do it

[admin]

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

Code:

$('.rotate').length

[chrigi]

> $('.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...

[admin]

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

   

[chrigi]

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

[Joep]

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