# Zoom an Image in Runtime

**URL:** <https://forum.inductiveautomation.com/t/zoom-an-image-in-runtime/22138>\
**Category:** Ignition\
**Tags:** ignition79\
**Created:** [January 26, 2019, 8:01am UTC](https://forum.inductiveautomation.com/t/zoom-an-image-in-runtime/22138 "2019-01-26T08:01:20Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![c.bertulli](https://avatars.discourse-cdn.com/v4/letter/c/f19dbf/32.png) [@c.bertulli](https://forum.inductiveautomation.com/u/c.bertulli)\
**Post date:** [January 26, 2019, 8:01am UTC](https://forum.inductiveautomation.com/t/zoom-an-image-in-runtime/22138/1 "2019-01-26T08:01:20Z")

</div>

Hi All,

Is possible to zoom an image during the runtime?  
My idea is to have two buttons, one that zoom in and the second one to zoom out.

Cheers,

---

<div class="post-metadata">

**Author:** ![Sanderd17](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/sanderd17/32/8735_2.png) [@Sanderd17](https://forum.inductiveautomation.com/u/Sanderd17)\
**Post date:** [January 28, 2019, 11:41am UTC](https://forum.inductiveautomation.com/t/zoom-an-image-in-runtime/22138/2 "2019-01-28T11:41:10Z")

</div>

You should be able to use the transform function.

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

Though determining the current state of your image may be a bit harder.

---

<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:** [January 28, 2019, 1:34pm UTC](https://forum.inductiveautomation.com/t/zoom-an-image-in-runtime/22138/3 "2019-01-28T13:34:57Z")

</div>

That transforms the component, not the image in the component. Use of the [Paintable Canvas to draw the image](http://forum.inductiveautomation.com/t/generate-image-using-graphics-object-show-that-in-a-paintable-canvas-or-image-component/18141) is probably necessary, and allows near-infinite variation.

---

<div class="post-metadata">

**Author:** ![c.bertulli](https://avatars.discourse-cdn.com/v4/letter/c/f19dbf/32.png) [@c.bertulli](https://forum.inductiveautomation.com/u/c.bertulli)\
**Post date:** [January 30, 2019, 10:33am UTC](https://forum.inductiveautomation.com/t/zoom-an-image-in-runtime/22138/4 "2019-01-30T10:33:23Z")

</div>

First of all, thanks @pturmel for the hint 😉

Then, for posterity:

```auto
from javax.imageio import ImageIO
from java.io import FileInputStream

# 1. Open the image
fsIP = FileInputStream("path/to/image.png")
myImage = ImageIO.read(fsIP)

# 2. Get the scale factor and convert the Integer percent value to a Float scale factor
scaleFactor = event.source.zoom * 0.01

# 3. Scale and draw the image 
g = event.graphics
g.scale(scaleFactor, scaleFactor)
g.drawImage(myImage,0,0,event.source)

```

---

<div class="post-metadata">

**Author:** ![Sanderd17](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/sanderd17/32/8735_2.png) [@Sanderd17](https://forum.inductiveautomation.com/u/Sanderd17)\
**Post date:** [January 30, 2019, 10:50am UTC](https://forum.inductiveautomation.com/t/zoom-an-image-in-runtime/22138/5 "2019-01-30T10:50:34Z")

</div>

> [@pturmel](#):
>
> That transforms the component, not the image in the component.

If you use an image component, and set the image to scale to the bounds, it will also scale the image.  
Though scaling components at run time may have some strange results, so your solution (where all components remain in place), is probably more stable.

---

<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:** [January 30, 2019, 1:26pm UTC](https://forum.inductiveautomation.com/t/zoom-an-image-in-runtime/22138/6 "2019-01-30T13:26:37Z")

</div>

You _really_, _really_ shouldn’t be doing the file read in your paint event. Add a custom property to hold your file name, and use ImageIO on propertyChange and cache using setClientProperty(). The paint event just retrieves the cached image and draws it. Take a closer look at the code examples I linked.