# How can I make height of a rectangle change from top instead of bottom dynamically

**URL:** <https://forum.inductiveautomation.com/t/how-can-i-make-height-of-a-rectangle-change-from-top-instead-of-bottom-dynamically/71235>\
**Category:** Ignition\
**Tags:** vision\
**Created:** [March 17, 2023, 3:04pm UTC](https://forum.inductiveautomation.com/t/how-can-i-make-height-of-a-rectangle-change-from-top-instead-of-bottom-dynamically/71235 "2023-03-17T15:04:53Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![shahyan\_bharucha](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/shahyan_bharucha/32/44952_2.png) [@shahyan\_bharucha](https://forum.inductiveautomation.com/u/shahyan_bharucha)\
**Post date:** [March 17, 2023, 3:04pm UTC](https://forum.inductiveautomation.com/t/how-can-i-make-height-of-a-rectangle-change-from-top-instead-of-bottom-dynamically/71235/1 "2023-03-17T15:04:53Z")

</div>

I am trying to do a animation of a lift table and to do that I have made a rectangle which changes value respective to the distance of my sensor.

The issue is that the height changes from bottom and the top of the rectangle remains stationary.

I have tried what ever I was able to find but not able to lock the bottom of the rectangle.

Any ideas?

---

<div class="post-metadata">

**Author:** ![lrose](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/lrose/32/62724_2.png) [@lrose](https://forum.inductiveautomation.com/u/lrose)\
**Post date:** [March 17, 2023, 3:05pm UTC](https://forum.inductiveautomation.com/t/how-can-i-make-height-of-a-rectangle-change-from-top-instead-of-bottom-dynamically/71235/2 "2023-03-17T15:05:35Z")

</div>

Vision or perspective?

---

<div class="post-metadata">

**Author:** ![shahyan\_bharucha](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/shahyan_bharucha/32/44952_2.png) [@shahyan\_bharucha](https://forum.inductiveautomation.com/u/shahyan_bharucha)\
**Post date:** [March 17, 2023, 4:26pm UTC](https://forum.inductiveautomation.com/t/how-can-i-make-height-of-a-rectangle-change-from-top-instead-of-bottom-dynamically/71235/3 "2023-03-17T16:26:48Z")

</div>

![height change ignition](https://us1.discourse-cdn.com/inductiveautomation/original/3X/b/8/b85c257806102a7b2c92702a4b266c6811e367b2.jpeg)

I am not sure of that. What I mean as shown in the picture I drawn, dynamically the height changes from bottom to top depending on the height value, what I require is to be changing from top to bottom keeping the bottom fixed.

 ![lift table full](https://us1.discourse-cdn.com/inductiveautomation/original/3X/7/0/70406d45aa7eb542265b9424d0edf7205d34dad3.jpeg)

---

<div class="post-metadata">

**Author:** ![lrose](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/lrose/32/62724_2.png) [@lrose](https://forum.inductiveautomation.com/u/lrose)\
**Post date:** [March 17, 2023, 4:31pm UTC](https://forum.inductiveautomation.com/t/how-can-i-make-height-of-a-rectangle-change-from-top-instead-of-bottom-dynamically/71235/4 "2023-03-17T16:31:05Z")

</div>

> [@shahyan\_bharucha](#):
>
> I am not sure of that.

You're not sure if you're developing in Vision or Perspective?

I ask, because there will be a big difference in the way you approach this problem, depending on what platform you are designing for.

---

<div class="post-metadata">

**Author:** ![shahyan\_bharucha](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/shahyan_bharucha/32/44952_2.png) [@shahyan\_bharucha](https://forum.inductiveautomation.com/u/shahyan_bharucha)\
**Post date:** [March 17, 2023, 4:35pm UTC](https://forum.inductiveautomation.com/t/how-can-i-make-height-of-a-rectangle-change-from-top-instead-of-bottom-dynamically/71235/5 "2023-03-17T16:35:55Z")

</div>

Sorry my bad its Vision.

Thanks.

---

<div class="post-metadata">

**Author:** ![lrose](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/lrose/32/62724_2.png) [@lrose](https://forum.inductiveautomation.com/u/lrose)\
**Post date:** [March 17, 2023, 7:18pm UTC](https://forum.inductiveautomation.com/t/how-can-i-make-height-of-a-rectangle-change-from-top-instead-of-bottom-dynamically/71235/6 "2023-03-17T19:18:46Z")

</div>

Create a custom property to hold the height for the component.

Then in a property change script you will need to use `system.gui.transform()` to transform the rectangle with the calculated top position.

Since the position of the component is the top left corner you will need to calculate the difference between the top position of the rectangle at full range and the new top at the given height. Done correctly and the bottom should remain fixed where you have placed it.

---

<div class="post-metadata">

**Author:** ![shahyan\_bharucha](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/shahyan_bharucha/32/44952_2.png) [@shahyan\_bharucha](https://forum.inductiveautomation.com/u/shahyan_bharucha)\
**Post date:** [March 18, 2023, 12:19am UTC](https://forum.inductiveautomation.com/t/how-can-i-make-height-of-a-rectangle-change-from-top-instead-of-bottom-dynamically/71235/7 "2023-03-18T00:19:13Z")

</div>

Hi Rose,

Thank for the help and reply. I am having difficulty in calculating the absolute height.

system.gui.transform(component=event.source, newY=(100/event.source.relHeight))

As per my understanding if the height decreases the Y should increase relatively but I am not able to find an expression for that.

Any ideas?

I really appreciate your help on this.  
Thanks.

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [March 18, 2023, 11:40am UTC](https://forum.inductiveautomation.com/t/how-can-i-make-height-of-a-rectangle-change-from-top-instead-of-bottom-dynamically/71235/8 "2023-03-18T11:40:16Z")

</div>

I would make sure you specify to use the `coordSpace=system.gui.COORD_DESIGNER` so that it works for clients of different sizes.

~~I think you might struggle with the symbol if it animates frequently. You might find it slowly wander off the page due to pixel inaccuracies in the transform calculation. Eventually these will make differences to the return position which will gradually move the home position until its off the page altogether.~~  
Scratch that. It won't float away if you use fixed positions, which is more than likely what you would use. If you were animating rotation then this _is_ a known issue. Things like fan propellers _will_ fly away into the ether when rotating

---

<div class="post-metadata">

**Author:** ![justinedwards.jle](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/justinedwards.jle/32/37854_2.png) [@justinedwards.jle](https://forum.inductiveautomation.com/u/justinedwards.jle)\
**Post date:** [March 18, 2023, 1:55pm UTC](https://forum.inductiveautomation.com/t/how-can-i-make-height-of-a-rectangle-change-from-top-instead-of-bottom-dynamically/71235/9 "2023-03-18T13:55:48Z")

</div>

> [@nminchin](#):
>
> make sure you specify to use the `coordSpace=system.gui.COORD_DESIGNER`

Use `coordSpace = 1` when using relative coordinates such as relX and relY to keep transformations relative to the designer.  
Use `coordSpace = 0` [or don't specify since this is the default] when using absolute coordinates such as x or y.

[https://docs.inductiveautomation.com/display/DOC81/system.gui](https://docs.inductiveautomation.com/display/DOC81/system.gui)

---

<div class="post-metadata">

**Author:** ![shahyan\_bharucha](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/shahyan_bharucha/32/44952_2.png) [@shahyan\_bharucha](https://forum.inductiveautomation.com/u/shahyan_bharucha)\
**Post date:** [March 20, 2023, 1:40am UTC](https://forum.inductiveautomation.com/t/how-can-i-make-height-of-a-rectangle-change-from-top-instead-of-bottom-dynamically/71235/10 "2023-03-20T01:40:04Z")

</div>

Thank you everyone for your help especially Rose. I was finally able to get my animation of lift table as I wanted. It lifts up and down according to the distance sensor's value.

![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/b/5/b548baa4481c1ec8e0e3acba967377c01203064f.png)
