Visualization Icons Position Rotate

[khalil]

Hello 
Could we make the degree variable from the name Like: Rotate-xx
where xx is the degree we wants

[admin]

See this if you want to rotate an icon based on linked object value:
https://forum.logicmachine.net/showthread.php?tid=1831

[khalil]

Hello Admin
I want to set the rotation angle from the custom name.
I want to use it for one bit Linear Lighting object
Could we do some thing like that based on the custom name value
BR,

[admin]

Custom name cannot be accessed from Custom JS at the moment. This can be done via Additional classes. This code will look for all elements where class list contains rotate-XYZ (where XYZ is an angle value in degrees). No custom CSS is needed for this solution, the rotation is applied by the code itself..

Code:

$(function(){
  $('[class*=rotate-]').each(function(index, el) {
    var match = el.className.match(/rotate\-(\d+)/);
    el.style.transform = 'rotate(' + match[1] + 'deg)';
  });
});

[khalil]

Custom name cannot be accessed from Custom JS at the moment. This can be done via Additional classes. This code will look for all elements where class list contains rotate-XYZ (where XYZ is an angle value in degrees). No custom CSS is needed for this solution, the rotation is applied by the code itself..

Code:

$(function(){
  $('[class*=rotate-]').each(function(index, el) {
    var match = el.className.match(/rotate\-(\d+)/);
    el.style.transform = 'rotate(' + match[1] + 'deg)';
  });
});

Thanks Admin
Great
Could we use custom name in the tooltip or not yet?

[admin]

Custom name will be accessible from JavaScript side in the next firmware.

[khalil]

Custom name will be accessible from JavaScript side in the next firmware.

Great news

[khalil]

Custom name will be accessible from JavaScript side in the next firmware.

Hello admin.
Could we use custom name in tooltip, if you could share an example.

[Daniel]

https://forum.logicmachine.net/showthrea...65#pid3365

[admin]

Use the example above but change the content property to this:

Code:

content: attr(data-object-name);

[khalil]

Use the example above but change the content property to this:

Code:

content: attr(data-object-name);

Hello Dears, 
It didn't work, does it work with CSS and no need to use JS?
I am mean object properity: Custom name.

[admin]

If custom name is empty then object name will be used. This works for me:

Code:

.usermode [data-object-name]:before {
  display: none;
  position: absolute;
  top: -30px;
  height: 20px;
  line-height: 20px;
  left: 0;
  background-color: #eee;
  padding: 2px 6px;
  border-radius: 3px;
}
.usermode [data-object-name]:hover:before {
  display: block;
}
.usermode [data-object-name]:before {
  content: attr(data-object-name);
}

[khalil]

What should I use in the additional classes ( tooltip tooltip-1 ) its not used in this CSS code.

[Daniel]

No need for any additional class for this example. It works only on visualisatin not editor.

[khalil]

No need for any additional class for this example. It works only on visualisatin not editor.

I tried on SL and Wiser for KNX, but it didnt work.
does it work there?

[Daniel]

In did this is not implemented in SE firmware yet, wait for next fw.

Or add this to custom JS

Code:

$(function(){
  $('.item-control').each(function(_, el) {
    var name = $(el).data('object-name');
    if (name) {
      el.setAttribute('data-object-name', name);
    }
  });
});

[khalil]

In did this is not implemented in SE firmware yet, wait for next fw.

Or add this to custom JS

Code:

$(function(){
  $('.item-control').each(function(_, el) {
    var name = $(el).data('object-name');
    if (name) {
      el.setAttribute('data-object-name', name);
    }
  });
});

Thanks Daniel,

[manos@dynamitec]

Hello 
Could we make the degree variable from the name Like: Rotate-xx
where xx is the degree we wants

Hello admin,

Can we just implement this function for 0-360° and assign name in additional classes?

something like a for i=0 to 360 do......

Code:

.rotate-i {
  transform: rotate(-ideg) !important;
}

If then we add additional classes: rotate-1 or 2 or 3 the icon rotates to the correct angle.

[admin]

This code does exactly this: https://forum.logicmachine.net/showthrea...4#pid25714