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.

Visualization Icons Position Rotate
#21
Hello 
Could we make the degree variable from the name Like: Rotate-xx
where xx is the degree we wants
Best Regards,
Reply
#22
See this if you want to rotate an icon based on linked object value:
https://forum.logicmachine.net/showthread.php?tid=1831
Reply
#23
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,
Best Regards,
Reply
#24
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)';
  });
});
Reply
#25
(11.04.2022, 05:34)admin Wrote: 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?
Best Regards,
Reply
#26
Custom name will be accessible from JavaScript side in the next firmware.
Reply
#27
(11.04.2022, 09:23)admin Wrote: Custom name will be accessible from JavaScript side in the next firmware.

Great news
Best Regards,
Reply
#28
(11.04.2022, 09:23)admin Wrote: 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.
Best Regards,
Reply
#29
https://forum.logicmachine.net/showthrea...65#pid3365
------------------------------
Ctrl+F5
Reply
#30
Use the example above but change the content property to this:
Code:
content: attr(data-object-name);
Reply
#31
(21.02.2023, 12:22)admin Wrote: 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.

Attached Files Thumbnail(s)
   
Best Regards,
Reply
#32
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);
}
Reply
#33
What should I use in the additional classes ( tooltip tooltip-1 ) its not used in this CSS code.
Best Regards,
Reply
#34
No need for any additional class for this example. It works only on visualisatin not editor.
------------------------------
Ctrl+F5
Reply
#35
(21.02.2023, 15:28)Daniel Wrote: 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?
Best Regards,
Reply
#36
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);
    }
  });
});
------------------------------
Ctrl+F5
Reply
#37
(22.02.2023, 08:42)Daniel Wrote: 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,
Best Regards,
Reply
#38
(09.04.2022, 08:15)khalil Wrote: 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.
Reply
#39
This code does exactly this: https://forum.logicmachine.net/showthrea...4#pid25714
Reply


Forum Jump: