I’ve successfully followed the examples on the forum to upload an image into an SQL database as a BLOB. I’ve also been able to create a custom property of type dataset on my window that successfully reads the BLOB into itself.
I’m stuck on the last step though, now that I’ve got this, how can I put an Image Display object on the screen and display the BLOB inside it?
The following code will display a BLOB as the ‘icon’ on a Label component:
from javax.swing import ImageIcon
from java.io import ByteArrayInputStream
from javax.imageio import ImageIO
from java.awt import Image
from java.net import URL
from java.io import File
image = # your readfileasbytes output
bais = ByteArrayInputStream(image)
bImageFromConvert = ImageIO.read(bais)
lbl3 = event.source.parent.getComponent('lblImage3')
boundWidth = lbl3.width
boundHeight = lbl3.height
originalWidth = bImageFromConvert.width
originalHeight = bImageFromConvert.height
newWidth = originalWidth
newHeight = originalHeight
if originalWidth > boundWidth:
newWidth = boundWidth
newHeight = (newWidth * originalHeight) / originalWidth
if newHeight > boundHeight:
newHeight = boundHeight
newWidth = (newHeight * originalWidth) / originalHeight
scaledImage = bImageFromConvert.getScaledInstance(newWidth,newHeight,Image.SCALE_SMOOTH)
lbl3.setIcon(ImageIcon(scaledImage))
Hmm… one step forward one step back. When I run the script I get an error message stating
TypeError: java.io.ByteArrayInputStrea(): 1st arg can't be coerced to byte[]Here’s the code I’m using to store the image, the column type is medium blob (and I’ve set max_allowed_packet=16M to accommodate the max possible size of a medium blob.
path = system.file.openFile()
if path != None:
bytes = system.file.readFileAsBytes(path)
system.db.runPrepUpdate("INSERT INTO assets (IMG, Num) VALUES (?,?)", [bytes, event.source.parent.Num])
Then to read it back:
from javax.swing import ImageIcon
from java.io import ByteArrayInputStream
from javax.imageio import ImageIO
from java.awt import Image
from java.net import URL
from java.io import File
image = system.db.runQuery("SELECT IMG FROM assets where Num=%d" % (event.source.parent.Num))
bais = ByteArrayInputStream(image)
bImageFromConvert = ImageIO.read(bais)
lbl3 = event.source.parent.getComponent('lblImage3')
boundWidth = lbl3.width
boundHeight = lbl3.height
originalWidth = bImageFromConvert.width
originalHeight = bImageFromConvert.height
newWidth = originalWidth
newHeight = originalHeight
if originalWidth > boundWidth:
newWidth = boundWidth
newHeight = (newWidth * originalHeight) / originalWidth
if newHeight > boundHeight:
newHeight = boundHeight
newWidth = (newHeight * originalWidth) / originalHeight
scaledImage = bImageFromConvert.getScaledInstance(newWidth,newHeight,Image.SCALE_SMOOTH)
lbl3.setIcon(ImageIcon(scaledImage))
Try changing the line to:
image = system.db.runScalarPrepQUery("SELECT IMG FROM assets where Num=?",[event.source.parent.Num])[quote=“jpark”]Try changing the line to:
image = system.db.runScalarPrepQuery("SELECT IMG FROM assets where Num=?",[event.source.parent.Num])
I am not worthy! That did the trick! I’ll look at the help files too, but what’s the difference between those two queries?
Worked perfectly, thanks!
I know it has been a while but what is the best way to auto load this image with a popup?
The way I got it set up is that a popup loads that passes the image location over, the script works when i click on a button, but to auto load? Best I can think of is a propertyChange?
can you give a little more details about what you’re trying to accomplish? If you want to display the image you can look at my second post (and the followup that fixes a code error) to show how to display images stored to a database. If you want that image in a popup… one option would be to pass the “num” (a variable I was using as an index) into the popup and have the script execute when the window first is displayed.
Hello guys,
is this also working in perspective or is it only for vision. because i can’t quite figure out how to make it work in my perspective project. More generally, is it possible to make my perspective image component display a BLOB image?
Hello @JordanCClark,
thank you for your response. Yes that is what i am asking.
let say i use the file Upload component like on here: Download and Upload Files - Ignition User Manual 8.1 - Ignition Documentation
The onFileReceived event will provide me the bytes of the uploaded image. being there, how do i display that into the image component (instead of saving it into the Database for instance)?
@JordanCClark i was able to load the image into the image component after i formatted its bytes in to base64 strting. Thank you for the hint.
Hi Paul,
Thanks, I was able successfully implement the solution. However the image on label seems to be lighter comparatively the actual image in database is darker. Even when i download the image from the database through ignition i can view it is darker as actual. As this difference is easily notable. Which is not acceptable for our customer.
I would like understand the reason behind it and also please let us know Is there any way to view the actual image as it is or make it bit darker (increase contrast).?
Image in the behind is a vision window displaying image on label component.
Your image may have some different color space that Java isn’t processing correctly into SRGB for display as an image, or there may be something else going on.
You could try not scaling the image to the component size; then Java should just emit the original image directly.
Eric,
i see that you got your image from the database to be displayed in your session. Would you mind sharing a sample of how? i have spent no time in the webdev and not sure were to begin as far as "organizing the bytes into base64" my images are getting into the DB into a long blob. Im just trying to get them out and shown on the screen.
Any assistance would be appreciated!
jantonevich
Did you see the last comment in that long topic?