Visualization Icons Position Rotate

[manos@dynamitec]

Hello All,

Is there any way to rotate the icons on the visualization by degrees? Or better is there a way to add a third attribute to all icons (except from the element position and size) like "rotation"? 

I am having some floor plans where I need to add some Link Objects but the sourface is not always a 90° square. 

Regards,

[admin]

This can be done via Custom CSS. Set Additional classes to rotate-30 of your element. Change degree as needed.

Add to custom CSS:

Code:

.rotate-30 {
  transform: rotate(30deg);
}

[manos@dynamitec]

This can be done via Custom CSS. Set Additional classes to rotate-30 of your element. Change degree as needed.

Add to custom CSS:

Code:

.rotate-30 {
 transform: rotate(30deg);
}

Hello Admin,

Thank you for your reply. I have tried the code but didn't see any difference on the rotaion of the element. Instead it is as usual positioned. Please see below if i did correctly what you suggested. 

Regards

[Daniel]

Delete the 1, 2, 3 numbers. this is not part of the code.

[manos@dynamitec]

Delete the 1, 2, 3 numbers. this is not part of the code.

Hello Daniel.,

I did it and its the same result. Any other idea?

Regards

[Daniel]

It works for me
You will see it only in Visualization, not it the editor

[manos@dynamitec]

It works for me
You will see it only in Visualization, not it the editor

Yes now I see. It would be better to be visible while using the editor for a correct positioning of the element. But I got it now.

Thank you very much   

[Trond Hoyem]

This can be done via Custom CSS. Set Additional classes to rotate-30 of your element. Change degree as needed.

Add to custom CSS:

Code:

.rotate-30 {
 transform: rotate(30deg);
}

Is there a way to have the icon roatate according to a value? What I would like is for the icon to simulate a fan running, and that the icon rotates as the fan is running, and standing still when the fan stops.

[admin]

You can SVG icon with animation:
https://forum.logicmachine.net/showthrea...132#pid132

[Daniel]

Or use this icon for active
https://forum.logicmachine.net/showthrea...49#pid9349

[Trond Hoyem]

You can SVG icon with animation:
https://forum.logicmachine.net/showthrea...132#pid132

Great.
Thanx.

[FutureBuildings]

It works for me
You will see it only in Visualization, not it the editor

Dear Daniel,

I would like to do the same customisation as you did.  Based on your screenshots I suppose that you rotated an object (value and icon) by 30 degree.

This is what did not work for me. If I test the same with an image, than it rotates.

Do you have any idea why it is not working?

[Daniel]

Yes, object with additional class rotate-30 and the code above in custom CSS. I just tried it once more to be sure nothing has changed in latest fw. Test in final visu not editor.

[FutureBuildings]

Yes, object with additional class rotate-30 and the code above in custom CSS. I just tried it once more to be sure nothing has changed in latest fw. Test in final visu not editor.

I have tested it in final visualisation. As I mentioned it works with an image, but with an object it does not do the same. 

Logicmachine version: 20180822

[Daniel]

Do you use standard icon or something custom?

[FutureBuildings]

Do you use standard icon or something custom?

Actualy with no icon just value. I tested it together with factory and custom icons also but with no success.

[Daniel]

That works too, maybe it is browser cache

[admin]

Try adding !important to the CSS rule:

Code:

.rotate-30 {
  transform: rotate(30deg) !important;
}

[FutureBuildings]

Try adding !important to the CSS rule:

Code:

.rotate-30 {
  transform: rotate(30deg) !important;
}

Now it is working. Thanks alot!

[fabiorusco]

This can be done via Custom CSS. Set Additional classes to rotate-30 of your element. Change degree as needed.

Add to custom CSS:

Code:

.rotate-30 {
 transform: rotate(30deg);
}

Is there a way to have the icon roatate according to a value? What I would like is for the icon to simulate a fan running, and that the icon rotates as the fan is running, and standing still when the fan stops.

When I create the code in CSS ho use it in object to rotate the icon?
Best regard