Visualization Icons Position Rotate

Visualization Icons Position Rotate - Printable Version

+- 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

Visualization Icons Position Rotate - manos@dynamitec - 24.09.2018

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,

RE: Visualization Icons Position Rotate - admin - 25.09.2018

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);

}

RE: Visualization Icons Position Rotate - manos@dynamitec - 25.09.2018

(25.09.2018, 07:03)admin Wrote: 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

RE: Visualization Icons Position Rotate - Daniel - 25.09.2018

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

RE: Visualization Icons Position Rotate - manos@dynamitec - 25.09.2018

(25.09.2018, 07:46)Daniel. Wrote: 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

RE: Visualization Icons Position Rotate - Daniel - 25.09.2018

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

RE: Visualization Icons Position Rotate - manos@dynamitec - 25.09.2018

(25.09.2018, 09:03)Daniel. Wrote: 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 Smile

RE: Visualization Icons Position Rotate - Trond Hoyem - 27.09.2018

(25.09.2018, 07:03)admin Wrote: 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.

RE: Visualization Icons Position Rotate - admin - 27.09.2018

You can SVG icon with animation:
https://forum.logicmachine.net/showthread.php?tid=45&pid=132#pid132

RE: Visualization Icons Position Rotate - Daniel - 27.09.2018

Or use this icon for active
https://forum.logicmachine.net/showthread.php?tid=202&pid=9349#pid9349

RE: Visualization Icons Position Rotate - Trond Hoyem - 27.09.2018

(27.09.2018, 10:21)admin Wrote: You can SVG icon with animation:
https://forum.logicmachine.net/showthread.php?tid=45&pid=132#pid132

Great.
Thanx.

RE: Visualization Icons Position Rotate - FutureBuildings - 20.01.2021

(25.09.2018, 09:03)Daniel. Wrote: 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?

RE: Visualization Icons Position Rotate - Daniel - 20.01.2021

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.

RE: Visualization Icons Position Rotate - FutureBuildings - 20.01.2021

(20.01.2021, 15:47)Daniel. Wrote: 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

RE: Visualization Icons Position Rotate - Daniel - 20.01.2021

Do you use standard icon or something custom?

RE: Visualization Icons Position Rotate - FutureBuildings - 20.01.2021

(20.01.2021, 16:34)Daniel. Wrote: 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.

RE: Visualization Icons Position Rotate - Daniel - 20.01.2021

That works too, maybe it is browser cache

RE: Visualization Icons Position Rotate - admin - 21.01.2021

Try adding !important to the CSS rule:

Code:
.rotate-30 {

  transform: rotate(30deg) !important;

}

RE: Visualization Icons Position Rotate - FutureBuildings - 21.01.2021

(21.01.2021, 07:25)admin Wrote: Try adding !important to the CSS rule:

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

Now it is working. Thanks alot!

RE: Visualization Icons Position Rotate - fabiorusco - 22.01.2021

(27.09.2018, 10:18)Trond Hoyem Wrote:
(25.09.2018, 07:03)admin Wrote: 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