# Vision Component Size restrictions

**URL:** <https://forum.inductiveautomation.com/t/vision-component-size-restrictions/83103>\
**Category:** Module Development\
**Tags:** vision\
**Created:** [December 13, 2023, 6:59pm UTC](https://forum.inductiveautomation.com/t/vision-component-size-restrictions/83103 "2023-12-13T18:59:40Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![Mathias\_Melling](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/mathias_melling/32/67682_2.png) [@Mathias\_Melling](https://forum.inductiveautomation.com/u/Mathias_Melling)\
**Post date:** [December 13, 2023, 6:59pm UTC](https://forum.inductiveautomation.com/t/vision-component-size-restrictions/83103/1 "2023-12-13T18:59:40Z")

</div>

Is it possible to limit the width and height of a vision component?  
I tried using the JComponent method `setMaximumSize()`, but that doesn't seem to accomplish anything.

---

<div class="post-metadata">

**Author:** ![paul-griffith](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/paul-griffith/32/37249_2.png) [@paul-griffith](https://forum.inductiveautomation.com/u/paul-griffith)\
**Post date:** [December 13, 2023, 7:16pm UTC](https://forum.inductiveautomation.com/t/vision-component-size-restrictions/83103/2 "2023-12-13T19:16:47Z")

</div>

I'm curious about the Y behind this X problem, but...

Possibly, you could implement your own component listener that sees the change in size value and immediately resets it to the maximum value?

---

<div class="post-metadata">

**Author:** ![Mathias\_Melling](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/mathias_melling/32/67682_2.png) [@Mathias\_Melling](https://forum.inductiveautomation.com/u/Mathias_Melling)\
**Post date:** [December 13, 2023, 10:10pm UTC](https://forum.inductiveautomation.com/t/vision-component-size-restrictions/83103/3 "2023-12-13T22:10:43Z")

</div>

The Y is that I want to create a flowline component that is 3 pixels high at all times. If it was accidentally adjusted to less or greater than 3 pixels, it would automatically resize itself to that height.

---

<div class="post-metadata">

**Author:** ![Mathias\_Melling](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/mathias_melling/32/67682_2.png) [@Mathias\_Melling](https://forum.inductiveautomation.com/u/Mathias_Melling)\
**Post date:** [December 13, 2023, 10:14pm UTC](https://forum.inductiveautomation.com/t/vision-component-size-restrictions/83103/4 "2023-12-13T22:14:38Z")

</div>

This is what I have going at the moment, but it doesn't resize my component:

```auto
public class FlowlineComponent extends AbstractVisionComponent implements ComponentListener {
:
:
public FlowlineComponent() {
    setOpaque(false);
    setPreferredSize(new Dimension(100, 3));
    setFont(new Font("Ebrima", Font.BOLD, 17));
    ComponentListener l = this;
    addComponentListener(l);
}
:
:
@Override
public void componentResized(ComponentEvent e) {
    if (this.getSize().height > 3){
        Dimension maxSize = new Dimension(this.getSize().width,3);
        this.setSize(maxSize);
        this.setMaximumSize(maxSize);
    }
    System.out.println("This.size = " + this.getSize());
    System.out.println("This.maxSize = " + this.getMaximumSize());
}

```

---

<div class="post-metadata">

**Author:** ![pturmel](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pturmel/32/3295_2.png) [@pturmel](https://forum.inductiveautomation.com/u/pturmel)\
**Post date:** [December 13, 2023, 10:18pm UTC](https://forum.inductiveautomation.com/t/vision-component-size-restrictions/83103/5 "2023-12-13T22:18:14Z")

</div>

You are going to suffer with Vision's various layout operations. Use a nested component and constrain **that** component's dimensions. Paint anything outside that nested component with some background.

If someone in the designer forgets to use an anchored layout, it'll look funny but still work.

---

<div class="post-metadata">

**Author:** ![Mathias\_Melling](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/mathias_melling/32/67682_2.png) [@Mathias\_Melling](https://forum.inductiveautomation.com/u/Mathias_Melling)\
**Post date:** [December 14, 2023, 2:33pm UTC](https://forum.inductiveautomation.com/t/vision-component-size-restrictions/83103/6 "2023-12-14T14:33:23Z")

</div>

That's not quite what I want.  
If the angle of the flowline is changed, I want the size of the component to change as well.  
Let's say the flowline has a length of 100 and an angle of 0°. If the angle is changed to 45°, the component size should update to a width and height of 71.

---

<div class="post-metadata">

**Author:** ![pturmel](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pturmel/32/3295_2.png) [@pturmel](https://forum.inductiveautomation.com/u/pturmel)\
**Post date:** [December 14, 2023, 3:02pm UTC](https://forum.inductiveautomation.com/t/vision-component-size-restrictions/83103/7 "2023-12-14T15:02:59Z")

</div>

> [@Mathias\_Melling](#):
>
> I want the size of the component to change as well

That is not a Swing-friendly behavior. Or rather, that is not a Vision UI Layout-friendly behavior. Components should take fixed dimensions in the designer from the designer UI, expect to be scaled at runtime when relatvie layout is applied, and perform all other sizing behavior **internally**. That is, within the environment's imposed bounds.

Consider mocking up the behavior you want with the PaintableCanvas. Whatever you end up with for drawing operations to get exactly the image you want can then be converted to real java in your custom component.

---

<div class="post-metadata">

**Author:** ![Mathias\_Melling](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/mathias_melling/32/67682_2.png) [@Mathias\_Melling](https://forum.inductiveautomation.com/u/Mathias_Melling)\
**Post date:** [December 14, 2023, 3:16pm UTC](https://forum.inductiveautomation.com/t/vision-component-size-restrictions/83103/8 "2023-12-14T15:16:36Z")

</div>

Understood.

---

<div class="post-metadata">

**Author:** ![Mathias\_Melling](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/mathias_melling/32/67682_2.png) [@Mathias\_Melling](https://forum.inductiveautomation.com/u/Mathias_Melling)\
**Post date:** [December 14, 2023, 3:49pm UTC](https://forum.inductiveautomation.com/t/vision-component-size-restrictions/83103/9 "2023-12-14T15:49:04Z")

</div>

If I put a rectangle on a vision window and change the angle on it, it does exactly what I want to do. It updates the x,y,width & height to keep the rectangle's size the same and keep its center in the same position.

---

<div class="post-metadata">

**Author:** ![pturmel](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pturmel/32/3295_2.png) [@pturmel](https://forum.inductiveautomation.com/u/pturmel)\
**Post date:** [December 14, 2023, 4:04pm UTC](https://forum.inductiveautomation.com/t/vision-component-size-restrictions/83103/10 "2023-12-14T16:04:38Z")

</div>

And from what I recall from poking around, Vision has a bunch of special cases for its shape objects. Perhaps if you subclassed one of those, you could get away with similarly pathological behavior.

---

<div class="post-metadata">

**Author:** ![Mathias\_Melling](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/mathias_melling/32/67682_2.png) [@Mathias\_Melling](https://forum.inductiveautomation.com/u/Mathias_Melling)\
**Post date:** [December 14, 2023, 4:30pm UTC](https://forum.inductiveautomation.com/t/vision-component-size-restrictions/83103/11 "2023-12-14T16:30:54Z")

</div>

I'll keep poking around to see what I can find. Any further ideas would be appreciated.

---

<div class="post-metadata">

**Author:** ![pturmel](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pturmel/32/3295_2.png) [@pturmel](https://forum.inductiveautomation.com/u/pturmel)\
**Post date:** [December 14, 2023, 4:36pm UTC](https://forum.inductiveautomation.com/t/vision-component-size-restrictions/83103/12 "2023-12-14T16:36:29Z")

</div>

Perhaps if you explained how you expect this component (and others you are making) to be used in your application(s), we could offer more focused advice.

---

<div class="post-metadata">

**Author:** ![Mathias\_Melling](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/mathias_melling/32/67682_2.png) [@Mathias\_Melling](https://forum.inductiveautomation.com/u/Mathias_Melling)\
**Post date:** [December 14, 2023, 4:51pm UTC](https://forum.inductiveautomation.com/t/vision-component-size-restrictions/83103/13 "2023-12-14T16:51:50Z")

</div>

I want to check out how to subclass Vision shape objects to see if that gets me any further.  
If you can give me an example on how to do that, that would be helpful.

---

<div class="post-metadata">

**Author:** ![pturmel](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pturmel/32/3295_2.png) [@pturmel](https://forum.inductiveautomation.com/u/pturmel)\
**Post date:** [December 14, 2023, 4:57pm UTC](https://forum.inductiveautomation.com/t/vision-component-size-restrictions/83103/14 "2023-12-14T16:57:38Z")

</div>

No different from subclassing `AbstractVisionComponent` as your code snippet shows. (I've not ever subclassed the shapes--I don't recall any of their class names.)

---

<div class="post-metadata">

**Author:** ![Mathias\_Melling](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/mathias_melling/32/67682_2.png) [@Mathias\_Melling](https://forum.inductiveautomation.com/u/Mathias_Melling)\
**Post date:** [December 14, 2023, 4:59pm UTC](https://forum.inductiveautomation.com/t/vision-component-size-restrictions/83103/15 "2023-12-14T16:59:23Z")

</div>

The component would never resize in real time, only during development.  
So I would throw a flowline on the vision window, give it an angle and stretch it to the desired length. The width of the flowline is always to remain the same, no matter the component size.  
I simply want to prevent the component from being larger than it needs to be, without the user having to be extra careful.

If the component has the wrong size:  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/c/4/c410b108da865c5e09dd2a4e5e834249af1d3017.png)

it should automatically shrink:  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/2/8/28099ee70b22257d06104138ff115b28ed0e01ab.png)

---

<div class="post-metadata">

**Author:** ![pturmel](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pturmel/32/3295_2.png) [@pturmel](https://forum.inductiveautomation.com/u/pturmel)\
**Post date:** [December 14, 2023, 5:02pm UTC](https://forum.inductiveautomation.com/t/vision-component-size-restrictions/83103/16 "2023-12-14T17:02:16Z")

</div>

Don't do that with your Vision component. Do that with a nested component, as I mentioned above. Vision, at runtime, _ **is going to resize your component** _, outside your control. Control the size of whatever you draw **inside** your component.

---

<div class="post-metadata">

**Author:** ![Mathias\_Melling](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/mathias_melling/32/67682_2.png) [@Mathias\_Melling](https://forum.inductiveautomation.com/u/Mathias_Melling)\
**Post date:** [December 14, 2023, 5:07pm UTC](https://forum.inductiveautomation.com/t/vision-component-size-restrictions/83103/17 "2023-12-14T17:07:05Z")

</div>

I guess that's what I'm doing already. The width of the flowline is already locked to 3 pixels.

---

<div class="post-metadata">

**Author:** ![Mathias\_Melling](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/mathias_melling/32/67682_2.png) [@Mathias\_Melling](https://forum.inductiveautomation.com/u/Mathias_Melling)\
**Post date:** [December 14, 2023, 8:25pm UTC](https://forum.inductiveautomation.com/t/vision-component-size-restrictions/83103/18 "2023-12-14T20:25:38Z")

</div>

So I've been looking at using `AbstractVisionShape` instead of `AbstractVisionComponent`.  
I've been struggling with initializing it however. It keeps giving me errors on the `getShapeBounds` part of it.  
An example on how to use this would be great.

---

<div class="post-metadata">

**Author:** ![pturmel](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pturmel/32/3295_2.png) [@pturmel](https://forum.inductiveautomation.com/u/pturmel)\
**Post date:** [December 14, 2023, 8:26pm UTC](https://forum.inductiveautomation.com/t/vision-component-size-restrictions/83103/19 "2023-12-14T20:26:47Z")

</div>

Hopefully someone who has done that will pipe up.

---

<div class="post-metadata">

**Author:** ![Mathias\_Melling](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/mathias_melling/32/67682_2.png) [@Mathias\_Melling](https://forum.inductiveautomation.com/u/Mathias_Melling)\
**Post date:** [December 18, 2023, 7:14pm UTC](https://forum.inductiveautomation.com/t/vision-component-size-restrictions/83103/20 "2023-12-18T19:14:25Z")

</div>

I guess no one has used AbstractVisionShape?

[Next page](https://forum.inductiveautomation.com/t/vision-component-size-restrictions/83103.md?page=2)