Rotated button in Perspective?

Ignition
,
1

How can I rotate text and icon in a button? I can rotate text (sort of) with a CSS transform, but:

  1. this only rotates the text, the icon doesn’t come with it (icon stays where it was)
  2. bounds still use the width of the button, e.g. if the width of the button doesn’t support the length of the text, it will line-wrap, despite the height of the button fully supporting the length of the text when rotated.

image
image102×683 5.25 KB

Rotated text:

image
image102×683 5.1 KB

Edit:
Setting the icon to display at the bottom kind of works, but I still can’t get it rotated…
image

2

I ended up just making my own button using a flex container with an icon and label within it.

image
image49×682 4.83 KB

1 Like
3

Just wondering, how did you rotate the label?

4

Add these styles:
writingMode: vertical-rl
transform: scale(-1,-1)

5

image
image900×250 29.8 KB

6

You can’t use rotate in a flex container, well you can, but have fun :wink:

7

but still the same, add a coordinate container to the flex container and then add the button on the coordinate.
Rotate and play with the binding and widths and heights to make sure that the button uses all available space in the container.

image
image667×1161 44 KB

3 Likes
8

That’ll work too, many ways to do things in Ignition!

9

You could add your own SVG icon to the icons.svg file that has the rotated SVG, using a simple transform.

C:\Program Files\Inductive Automation\Ignition\data\modules\com.inductiveautomation.perspective\icons

for instance, I made "cache_cw" and "cache_ccw" from the default cache icon:

<svg viewBox="0 0 24 24">
      <g class="icon" id="cache_ccw">
         <path d="M19 8l-4 4h3c0 3.31-2.69 6-6 6-1.01 0-1.97-.25-2.8-.7l-1.46 1.46C8.97 19.54 10.43 20 12 20c4.42 0 8-3.58 8-8h3l-4-4zM6 12c0-3.31 2.69-6 6-6 1.01 0 1.97.25 2.8.7l1.46-1.46C15.03 4.46 13.57 4 12 4c-4.42 0-8 3.58-8 8H1l4 4 4-4H6z" />
      </g>
   </svg>


   <svg viewBox="0 0 24 24">
      <g class="icon" id="cache_cw" transform="scale(-1,1)" transform-origin = "center">
         <path d="M19 8l-4 4h3c0 3.31-2.69 6-6 6-1.01 0-1.97-.25-2.8-.7l-1.46 1.46C8.97 19.54 10.43 20 12 20c4.42 0 8-3.58 8-8h3l-4-4zM6 12c0-3.31 2.69-6 6-6 1.01 0 1.97.25 2.8.7l1.46-1.46C15.03 4.46 13.57 4 12 4c-4.42 0-8 3.58-8 8H1l4 4 4-4H6z" />
      </g>
   </svg>

image
image1269×639 12.4 KB

Also, a nice tool:
https://editsvgcode.com/

I typically trim down the icon list and make my own subset file with only the used icons so the whole file doesn't have to be loaded. It does make a difference when I have multiple icons loading in multiple templates. Each call to the icon library loads the entire file (11KB vs 489KB)

10

I wish I knew about transform-origin before! I've been translating to do that which is super fun
image

2 Likes