Resizing rotated components impossible in Coordinate / Percent View

Hey folks,

Ignition 8.0.5

I have a coordinate view set to percent mode. I dropped a progress bar on the screen and rotate it 270º to be vertical. Click the corner to resize and everything goes haywire. The width / height of the component still correspond to the un-rotated state, and dragging is inverted / backwards. The only way effectively to resize is to manually type the height / width into the component, but again, they relate to the original width/height, and not the rotated component.

I’m happy to answer questions, as I realize this is slightly confusing to describe.

Is there a solution for this? Am I doing something wrong?

Cheers.

Update to 8.0.6 :slight_smile: Component rotation was completely overhauled.

Thanks, Paul.

Will do.

Upgrading 8.0.5 to 8.0.6 seems to have broken the way that cylindrical tank works in the column container?

If I drop one into a column container, the tank graphic shows up wherever I drop it, but the resize box shows up in the upper left corner of the screen. Resizing the box will cause the tank graphic to move to the resize box (unless there is a component positioned in the way). I can resize and move columns (though the resize box stays anchored upper-left corner), but I cannot move the location of the tank away from the left wall of the container.

Is this a known issue, or did I just encounter an issue during upgrade?

Paul,

It seems as though the rotated component doesn’t appear rotated in a PC based Mozilla session? Works in Chrome and on my mobile device. I have it in a coordinate view nested inside a column. Happy to export the windows or share component settings.

Annotation%202019-12-20%20072444

Does that mean Firefox, or something else? How old is it? Pretty much every browser should support 2d transforms, but the rest of the rendering in your screenshot makes me pretty suspicious:

Apologies for the confusion, it is Firefox. Version 71.0. I see that it should be supported, but it’s not rendering appropriately. Works fine in the neighboring Chrome window.

Rebuilding the components in a new view appears to have resolved the issue. I’m not entirely sure why it was having difficulty rending appropriately.

Hm, that is pretty strange. No custom extensions or anything interfering with rendering? Do you get the same behavior in a private/incognito window in FF? If you do, could you get in contact with support?

I’m not aware of any known issues with the new component rotation stuff specific to Firefox, but I know a few kinks are being worked out in 8.0.7/8.0.8 - so it’s possible you’ve hit something new, or just a different way to encounter something we’re aware of.

Nothing custom in the browser. I copied the window, pointed the embedded view at the copy, and updated the project and the view renders properly now. The initial view was built in 8.0.5 and migrated to 8.0.6.

As far as the behavior of the rotated component, resizing my window horizontally still causes the progress bar to resize vertically (along the original horizontal axis of the component). The progress bar is part of an embedded percent coordinate window. Is this the expected behavior?

Resizing a percent mode Coordinate container with rotated child component does not have any special handling: the component’s width and height properties scaled before rotation is applied. It’s expected.

It’s similar to the reason why we disable the resize handles when more than one component is selected, and at least one component is rotated: resizing the post-rotated component’s width and height while keeping the component’s relative position to other components is not well defined.

Good to know. Thank you, Perkins. I appreciate you and Paul taking the time to respond.

So, how do I get around the weirdness that occurs when resizing a screen? The progress bar (as used above) doesn't resize as I am expecting to see it on screen.

image

image

Are you using percent mode with an aspect ratio?

I am using percent mode, but I have no aspect ratio set. These screens will be used on a variety of devices.

I wound up using the "Linear Scale" and modifying its settings a bit. Since I don't have to rotate this one, it works for my purposes of showing a tank level and it stretches as I would expect.

image

image

For those interested:

  • All Ticks are turned off.
  • Deleted the high indicator.
  • Low indicator: value = -2 (because a sliver of background was showing)
  • Low indicator: length = 100 (wide enough that so left side of indicator doesn't show when stretched)
  • Low indicator: bind tank percent level to 'extent' and add expression transform of {value}*1.03 to eliminate background on the top of the indicator.

Other settings used for the bar color, border, background color, etc.

Maybe this will help someone.

Doesn't matter. Setting an aspect ratio will fix the "weirdness that occurs when resizing a screen".

Use the default views width and height and enter as width:height. Some users bind to the views width and height so it's more dynamic in nature.

https://docs.inductiveautomation.com/display/DOC81/Perspective+-+Coordinate+Container#PerspectiveCoordinateContainer-Properties

Well, setting the aspect ratio does fix the rotation issue, but the objects don't stretch to meet the browser's dimensions. Not quite what I was looking for. I have some other rotated objects (45 degrees) that look a bit strange, but I'm dealing with it. I'll check out binding to the view width/height.

They won't stretch, they maintain the aspect ratio.

Yes, this is correct. In the above images, I demonstrate that I was trying to get these objects to stretch. Thanks anyway.