Component Positioning Issue - Coordinate Container

Ignition
,
1

I am having an issue with maintaining the position of a label component within a coordinate container set to percent mode when screen sizes change.

Setup:

  • I have an SVG component representing an oil rig, which includes several valves that I want to make interactive for control purposes.
  • Since the SVG is a single grouped component, I cannot assign events to individual parts of it. My workaround was to place a blank label component over the valves I want to be clickable.

The Issue:

  • This works well initially; however, when the screen size changes or when I embed this view into another view with different scaling (e.g., a flex container), the label doesn't stay aligned with the underlying valve in the SVG.
  • I need the label to maintain its position relative to the SVG component so that it continues to function as a click target for the valves no matter the screen size.

I've attached a short video to illustrate the issue clearly. Has anyone else faced a similar problem or does anyone have suggestions for a solution?

scaling issue

2

You will need to constrain the aspect ratio as well to the ratio of the view. You can use a binding on aspect ratio to concat the page's view's default "{width}:{height}"

1 Like
3

Not sure I understand. So I would do the following expression binding

{page.props.dimensions.viewport.width} + ':' + {page.props.dimensions.viewport.height}

on the root container's aspect ratio property?

FYI i tried that and it didn't work.

4

Oops, sorry, I was only on my phone, I should have said the view's default size:
This is the binding:

{
  "type": "expr",
  "config": {
    "expression": "{view.props.defaultSize.width} + \u0027:\u0027 + {view.props.defaultSize.height}"
  }
}