Rotating Entire window in Vision

Ignition
1

I’m working on a larger Ignition Vision project where each PLC screen needs to be viewable in four orientations: 0°, 90°, 180°, and 270°.

The screens contain a mix of:

  • Vision template instances
  • conveyor graphics built from shapes
  • labels
  • arrows
  • buttons
  • grouped components
  • equipment indicators

I’m using Ignition Vision 8.1.48.

Ideally, I would like the operator to press a button and have the entire PLC layout rotate to the next 90-degree orientation while keeping text readable.

What I have tested so far:

  • I grouped the screen contents together, but the mixed-component group does not appear to have an angle/rotation property.
  • I successfully used a script to move and resize an individual template instance.
  • Resizing a horizontal conveyor template from horizontal dimensions to vertical dimensions only clips or distorts the contents; it does not truly rotate the template.
  • The conveyor templates contain shapes and have a horizontal property that changes some internal orientation, but the overall screen still requires all component positions to be recalculated.
  • Labels need to remain upright rather than rotating with the equipment layout.

Before creating four manually arranged versions of every PLC screen, I wanted to ask whether anyone has implemented something similar in Vision.
Also, would it be better to embed each label inside its corresponding conveyor template, or keep the labels as separate components?

2

In your case, I imagine a combination of the Template Canvas with a Paintable Canvas underlay could efficiently render the orientation functionality you're looking for in a way that will remain understandable to the team in the future. I imagine any scheme that programmatically transforms each individual component at runtime will prove to be a headache to maintain.

The first approach I would try would be to make four dataset custom properties—one for each orientation layout—and map your components for the Template Canvas there.

image
image1039×272 19.1 KB

image
image1044×362 31.7 KB

Then, simply add an expression binding to the templates property of the Template Canvas and use some property to dictate which dataset is used:

image
image152×158 3.79 KB

case({Root Container.Orientation Dropdown.selectedIndex},
0, {Root Container.Template Canvas.orientation_0},
1, {Root Container.Template Canvas.orientation_90},
2, {Root Container.Template Canvas.orientation_180},
3, {Root Container.Template Canvas.orientation_270},
{Root Container.Template Canvas.orientation_0})

This will automatically move the templates to the desired locations without requiring scripting or forced rotations. If the orientation of the template itself needs to change, do that within the template based upon an external parameter. This parameter can be delivered to the templates through the parameter dataset's parameters column. The manual explains how to do all of this in more detail.

The Paintable Canvas is a good tool for things such as connecting lines or specialized labels that don't fit neatly into templates. If the background color of the Template Canvas is transparent, the Paintable Canvas can be positioned as an underlay to draw static connections and strings where needed.

That said, the Paintable Canvas can also be used as a glass pane to add advanced functionality to a window, and the forum does have a growing list of Paintable Canvas hacks that can help with more complex stuff.