# Rendering PNG data in perspective

**URL:** <https://forum.inductiveautomation.com/t/rendering-png-data-in-perspective/85096>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [February 1, 2024, 3:33pm UTC](https://forum.inductiveautomation.com/t/rendering-png-data-in-perspective/85096 "2024-02-01T15:33:19Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![jakned](https://avatars.discourse-cdn.com/v4/letter/j/4da419/32.png) [@jakned](https://forum.inductiveautomation.com/u/jakned)\
**Post date:** [February 1, 2024, 3:33pm UTC](https://forum.inductiveautomation.com/t/rendering-png-data-in-perspective/85096/1 "2024-02-01T15:33:19Z")

</div>

Hi, I am trying to render ZPL code in my application using Labelary API. I have a image component that has binding on source prop. This binding is as follows:

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/4/9/497f619f4c3ad189883b4563071365edd5689cdb.png)  
The response contains PNG data but i dont know how to process them so it shows as a image. Can anyone advise please?

---

<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:** [February 1, 2024, 5:08pm UTC](https://forum.inductiveautomation.com/t/rendering-png-data-in-perspective/85096/2 "2024-02-01T17:08:32Z")

</div>

You probably want a script transform to turn the response from the third party into a data url: [Data URLs - HTTP | MDN](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URLs)

---

<div class="post-metadata">

**Author:** ![jakned](https://avatars.discourse-cdn.com/v4/letter/j/4da419/32.png) [@jakned](https://forum.inductiveautomation.com/u/jakned)\
**Post date:** [February 2, 2024, 7:11am UTC](https://forum.inductiveautomation.com/t/rendering-png-data-in-perspective/85096/3 "2024-02-02T07:11:53Z")

</div>

I tried to convert it in similar way I did it wil images from database but I used SQL to do the base64 conversion. In this case a get a some result which seems to be invalid.

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

---

<div class="post-metadata">

**Author:** ![jakned](https://avatars.discourse-cdn.com/v4/letter/j/4da419/32.png) [@jakned](https://forum.inductiveautomation.com/u/jakned)\
**Post date:** [February 5, 2024, 7:15am UTC](https://forum.inductiveautomation.com/t/rendering-png-data-in-perspective/85096/4 "2024-02-05T07:15:33Z")

</div>

I found a thread where there is a another base64 function used for converting the data:  
[Signature component image to Report - Ignition Early Access - Inductive Automation Forum](https://forum.inductiveautomation.com/t/signature-component-image-to-report/35109)

I used Base64.encodeBytes() method. Now the result looks like a base64 string but it still wont render in Image component.

I was suspecting that the data the POST request returned were modified by Ignition so I tried to save the PNG data to a .png file. It seems the data are not correct and I cannot display the image file in Windows.

The code I used to get the png for saving is below:

```auto
URL = "http://api.labelary.com/v1/printers/12dpmm/labels/5.82677x8.26772/0/"

contentType = "application/x-www-form-urlencoded"
headers = {
  'Accept': 'image/png',
  'Content-Type': 'application/x-www-form-urlencoded'
}

res = system.net.httpPost(URL, 
			contentType = contentType, 
			postData = ZPL, 
			headerValues = headers, 
			throwOnError = False
		)
		
filename = system.file.saveFile("image.png")
if filename is not None:
   system.file.writeFile(filename, str(res))

```

---

<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:** [February 5, 2024, 1:22pm UTC](https://forum.inductiveautomation.com/t/rendering-png-data-in-perspective/85096/5 "2024-02-05T13:22:34Z")

</div>

> [@jakned](#):
>
> `str(res))`

That would certainly break the file. PNG contents are not strings, they are bytes.

---

<div class="post-metadata">

**Author:** ![Kevin.Herron](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/kevin.herron/32/7259_2.png) [@Kevin.Herron](https://forum.inductiveautomation.com/u/Kevin.Herron)\
**Post date:** [February 5, 2024, 1:40pm UTC](https://forum.inductiveautomation.com/t/rendering-png-data-in-perspective/85096/6 "2024-02-05T13:40:23Z")

</div>

It actually breaks sooner, because `system.net.httpPost` returns a String:

> [@jakned](#):
>
> `res = system.net.httpPost`

If the bytes are needed then `system.net.httpClient` must be used instead.

---

<div class="post-metadata">

**Author:** ![jakned](https://avatars.discourse-cdn.com/v4/letter/j/4da419/32.png) [@jakned](https://forum.inductiveautomation.com/u/jakned)\
**Post date:** [February 5, 2024, 1:41pm UTC](https://forum.inductiveautomation.com/t/rendering-png-data-in-perspective/85096/7 "2024-02-05T13:41:56Z")

</div>

Is this a same case with HTTP binding? Does it also return a string?

---

<div class="post-metadata">

**Author:** ![Kevin.Herron](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/kevin.herron/32/7259_2.png) [@Kevin.Herron](https://forum.inductiveautomation.com/u/Kevin.Herron)\
**Post date:** [February 5, 2024, 1:45pm UTC](https://forum.inductiveautomation.com/t/rendering-png-data-in-perspective/85096/8 "2024-02-05T13:45:29Z")

</div>

Hmm, I think it might be...

---

<div class="post-metadata">

**Author:** ![ken.maze](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/ken.maze/32/85876_2.png) [@ken.maze](https://forum.inductiveautomation.com/u/ken.maze)\
**Post date:** [February 5, 2024, 2:39pm UTC](https://forum.inductiveautomation.com/t/rendering-png-data-in-perspective/85096/9 "2024-02-05T14:39:26Z")

</div>

If you're just looking to display, I did that using an Inline Frame and the Labelary web services.

---

<div class="post-metadata">

**Author:** ![jakned](https://avatars.discourse-cdn.com/v4/letter/j/4da419/32.png) [@jakned](https://forum.inductiveautomation.com/u/jakned)\
**Post date:** [February 5, 2024, 2:59pm UTC](https://forum.inductiveautomation.com/t/rendering-png-data-in-perspective/85096/10 "2024-02-05T14:59:06Z")

</div>

I wanted to do the same but since i cannot pass my ZPL as URL params, I have to use POST and send the ZPL as data. With that one cannot use iframe or image component.

The reason I have to use POST instead of GET is that my ZPL contains image data and the ZPL gets too long for URL.

---

<div class="post-metadata">

**Author:** ![ken.maze](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/ken.maze/32/85876_2.png) [@ken.maze](https://forum.inductiveautomation.com/u/ken.maze)\
**Post date:** [February 5, 2024, 3:04pm UTC](https://forum.inductiveautomation.com/t/rendering-png-data-in-perspective/85096/11 "2024-02-05T15:04:36Z")

</div>

oh, yeah, most of my labels don't use graphics, I just got one the other day that does have graphics and yeah, the IFrame didn't work. They are so few and far between I was just able to not worry about it. So will probably be reviewing this post someday assuming it all gets worked out

---

<div class="post-metadata">

**Author:** ![ken.maze](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/ken.maze/32/85876_2.png) [@ken.maze](https://forum.inductiveautomation.com/u/ken.maze)\
**Post date:** [February 5, 2024, 3:35pm UTC](https://forum.inductiveautomation.com/t/rendering-png-data-in-perspective/85096/12 "2024-02-05T15:35:01Z")

</div>

If allowed on your server, perhaps you can have labelary return a PDF, write it into the gateway filesystem, and have the PDF viewer render it?

---

<div class="post-metadata">

**Author:** ![jakned](https://avatars.discourse-cdn.com/v4/letter/j/4da419/32.png) [@jakned](https://forum.inductiveautomation.com/u/jakned)\
**Post date:** [February 6, 2024, 6:49am UTC](https://forum.inductiveautomation.com/t/rendering-png-data-in-perspective/85096/13 "2024-02-06T06:49:47Z")

</div>

That would would be plan C. I will try using the Http client as suggested and write the png data into temp file (system.file.getTempFile). Then display it using the Image component. If that doesn´t work, I will try pdf.

---

<div class="post-metadata">

**Author:** ![jakned](https://avatars.discourse-cdn.com/v4/letter/j/4da419/32.png) [@jakned](https://forum.inductiveautomation.com/u/jakned)\
**Post date:** [February 6, 2024, 6:50am UTC](https://forum.inductiveautomation.com/t/rendering-png-data-in-perspective/85096/14 "2024-02-06T06:50:40Z")

</div>

That´s shame, I was so happy to find a good use case for the HTTP binding.

---

<div class="post-metadata">

**Author:** ![jakned](https://avatars.discourse-cdn.com/v4/letter/j/4da419/32.png) [@jakned](https://forum.inductiveautomation.com/u/jakned)\
**Post date:** [April 17, 2024, 1:36pm UTC](https://forum.inductiveautomation.com/t/rendering-png-data-in-perspective/85096/15 "2024-04-17T13:36:44Z")

</div>

One can use this to deal with this situation:

```auto
from org.apache.http.impl.client import HttpClients
from org.apache.http.client.methods import HttpPost
from org.apache.http.util import EntityUtils
from org.apache.http.entity import StringEntity
from java.io import ByteArrayOutputStream
from java.util import Base64

# Create an HttpClient object
httpClient = HttpClients.createDefault()
try:
    # Create a POST request to the desired URL
    request = HttpPost("http://api.labelary.com/v1/printers/8dpmm/labels/4x6/0/")

    # Set any necessary headers
    request.addHeader("Content-Type", "application/x-www-form-urlencoded")
    request.addHeader("Accept", "image/png")
    zpl = """
	^xa^cfa,50^fo100,100^fdHello World^fs^xz
	"""
	
    request.setEntity(StringEntity(zpl))
	
    # Execute the request
    response = httpClient.execute(request)
    try:
        # Get the response entity
        entity = response.getEntity()
        print 
        
        if entity is not None and str(entity.getContentType()).split(" ")[1] == "image/png":
            # Convert entity content to byte array
            buffer = ByteArrayOutputStream()
            entity.writeTo(buffer)

            # Convert byte array to Base64 string
            base64Image = Base64.getEncoder().encodeToString(buffer.toByteArray())

            print("Base64 Encoded Image: " + base64Image)
        else:
            print("The response did not contain a PNG image.")
        
        # Ensure the entity content is fully consumed
        EntityUtils.consume(entity)

    finally:
        response.close()

finally:
    httpClient.close()

```

---

<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:** [April 17, 2024, 2:13pm UTC](https://forum.inductiveautomation.com/t/rendering-png-data-in-perspective/85096/16 "2024-04-17T14:13:03Z")

</div>

Why a bunch of apache HTTP client imports over system.net.httpClient? GPT driven development?

Any non Java standard library import you use is subject to change and risks breaking on major or minor version upgrade. Using system.net.httpClient is guaranteed to be supported.

---

<div class="post-metadata">

**Author:** ![jakned](https://avatars.discourse-cdn.com/v4/letter/j/4da419/32.png) [@jakned](https://forum.inductiveautomation.com/u/jakned)\
**Post date:** [April 17, 2024, 2:44pm UTC](https://forum.inductiveautomation.com/t/rendering-png-data-in-perspective/85096/17 "2024-04-17T14:44:36Z")

</div>

Yeah, this is GPT code. I wanted to post it here so I can get to it later.

Can it happen that IA decides not to include apache libraries in the future? I wrote jython excel library with it few days ago.

---

<div class="post-metadata">

**Author:** ![Kevin.Herron](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/kevin.herron/32/7259_2.png) [@Kevin.Herron](https://forum.inductiveautomation.com/u/Kevin.Herron)\
**Post date:** [April 17, 2024, 2:50pm UTC](https://forum.inductiveautomation.com/t/rendering-png-data-in-perspective/85096/18 "2024-04-17T14:50:54Z")

</div>

> [@jakned](#):
>
> Can it happen that IA decides not to include apache libraries in the future? I wrote jython excel library with it few days ago.

Yes, this can happen. Any time you write code against an Ignition implementation detail or Java dependency this is a risk you take.

---

<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:** [April 17, 2024, 2:52pm UTC](https://forum.inductiveautomation.com/t/rendering-png-data-in-perspective/85096/19 "2024-04-17T14:52:00Z")

</div>

But if they drop them, you could build an SDK module to add them back. So, not a big risk, really.

---

<div class="post-metadata">

**Author:** ![Kevin.Herron](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/kevin.herron/32/7259_2.png) [@Kevin.Herron](https://forum.inductiveautomation.com/u/Kevin.Herron)\
**Post date:** [April 17, 2024, 2:52pm UTC](https://forum.inductiveautomation.com/t/rendering-png-data-in-perspective/85096/20 "2024-04-17T14:52:30Z")

</div>

I mean... _someone_ could, but probably not the same someone who is getting their code from ChatGPT.

[Next page](https://forum.inductiveautomation.com/t/rendering-png-data-in-perspective/85096.md?page=2)