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.

Group Address value in SVG icon
#1
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.
LM5Lp, firmware: 2018.08.22 and 2021.12.15, FlashSYS v2, ARMv7 Processor rev 5 (v7l), kernel 4.4.151 and 4.4.259
Reply
#2
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');
    });
  });
});
Reply
#3
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.

Attached Files Thumbnail(s)
   
LM5Lp, firmware: 2018.08.22 and 2021.12.15, FlashSYS v2, ARMv7 Processor rev 5 (v7l), kernel 4.4.151 and 4.4.259
Reply
#4
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)');
    });
     });
});
LM5Lp, firmware: 2018.08.22 and 2021.12.15, FlashSYS v2, ARMv7 Processor rev 5 (v7l), kernel 4.4.151 and 4.4.259
Reply
#5
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 ?
Reply
#6
Still works for me. Browser cache?
------------------------------
Ctrl+F5
Reply
#7
did not do it
Reply
#8
Check browser console (F12) for any errors.
Also run this in console and post what you get:
Code:
$('.rotate').length
Reply
#9
> $('.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...
Reply
#10
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)');
    });
  });
});

   
Reply
#11
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
Reply
#12
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
Reply


Forum Jump: