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 whether you accept or reject these cookies being set.

Visualization Icons Position Rotate
#1
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,
Reply
#2
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);
}
Reply
#3
(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

Attached Files Image(s)
       
Reply
#4
Delete the 1, 2, 3 numbers. this is not part of the code.
Reply
#5
(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
Reply
#6
It works for me
You will see it only in Visualization, not it the editor

Attached Files Image(s)
   
Reply
#7
(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
Reply
#8
(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.
There are 10 kinds of people in the world; those who can read binary and those who don't  Cool
Reply
#9
You can SVG icon with animation:
https://forum.logicmachine.net/showthrea...132#pid132
Reply
#10
Or use this icon for active
https://forum.logicmachine.net/showthrea...49#pid9349
Reply
#11
(27.09.2018, 10:21)admin Wrote: You can SVG icon with animation:
https://forum.logicmachine.net/showthrea...132#pid132

Great.
Thanx.
There are 10 kinds of people in the world; those who can read binary and those who don't  Cool
Reply
#12
(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?
Reply
#13
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.
Reply
#14
(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
Reply
#15
Do you use standard icon or something custom?
Reply
#16
(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.
Reply
#17
That works too, maybe it is browser cache
Reply
#18
Try adding !important to the CSS rule:
Code:
.rotate-30 {
  transform: rotate(30deg) !important;
}
Reply
#19
(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!
Reply
#20
(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
Reply


Forum Jump: