+- 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: Visualization Icons Position Rotate (/showthread.php?tid=1611)
Pages:
1
2
RE: Visualization Icons Position Rotate - khalil - 09.04.2022
Hello
Could we make the degree variable from the name Like: Rotate-xx
where xx is the degree we wants
RE: Visualization Icons Position Rotate - admin - 09.04.2022
See this if you want to rotate an icon based on linked object value:
https://forum.logicmachine.net/showthread.php?tid=1831
RE: Visualization Icons Position Rotate - khalil - 10.04.2022
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,
RE: Visualization Icons Position Rotate - admin - 11.04.2022
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)';
});
});RE: Visualization Icons Position Rotate - khalil - 11.04.2022
(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?
RE: Visualization Icons Position Rotate - admin - 11.04.2022
Custom name will be accessible from JavaScript side in the next firmware.
RE: Visualization Icons Position Rotate - khalil - 11.04.2022
(11.04.2022, 09:23)admin Wrote: Custom name will be accessible from JavaScript side in the next firmware.
Great news
RE: Visualization Icons Position Rotate - khalil - 21.02.2023
(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.
RE: Visualization Icons Position Rotate - Daniel - 21.02.2023
https://forum.logicmachine.net/showthread.php?tid=599&pid=3365#pid3365
RE: Visualization Icons Position Rotate - admin - 21.02.2023
Use the example above but change the content property to this:
Code:
content: attr(data-object-name);RE: Visualization Icons Position Rotate - khalil - 21.02.2023
(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.
RE: Visualization Icons Position Rotate - admin - 21.02.2023
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);
}RE: Visualization Icons Position Rotate - khalil - 21.02.2023
What should I use in the additional classes ( tooltip tooltip-1 ) its not used in this CSS code.
RE: Visualization Icons Position Rotate - Daniel - 21.02.2023
No need for any additional class for this example. It works only on visualisatin not editor.
RE: Visualization Icons Position Rotate - khalil - 22.02.2023
(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?
RE: Visualization Icons Position Rotate - Daniel - 22.02.2023
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);
}
});
});RE: Visualization Icons Position Rotate - khalil - 22.02.2023
(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,
RE: Visualization Icons Position Rotate - manos@dynamitec - 19.03.2024
(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.
RE: Visualization Icons Position Rotate - admin - 19.03.2024
This code does exactly this: https://forum.logicmachine.net/showthread.php?tid=1611&pid=25714#pid25714