Dynamic image in table results

We are trying to create a process where an end user can upload an image to a database as a VARBINARY(MAX) and then later display the stored image (similar to [byte] conversion for PDF) in a column of a table. Possible? I understand image mappings and such but they seem to only like images controlled by Ignition, in a PNG format and are fairly static. Looking for advice. :scratch:

I haven’t done this, but the javax.swing.ImageIcon class is supposed to render in a JTable, which is what Ignition’s tables are built on. There are constructors that accept filenames or file contents, so you can probably get what you need. If jython picks the wrong constructor (jython doesn’t do function overloading by type), you can use java reflection to get to it. However you construct the image icon instances, you’ll have to construct the table dataset with scripting.
Hope this helps. :slight_smile:

Put this into the configureCell extension function of the table.

[code]if colName == “imageData”:
from javax.swing import JLabel
from javax.swing import ImageIcon

	img = JLabel(ImageIcon(value))
			
	return {"renderer":img}[/code]

Hi,
I tried creating a JLabel and using return {“renderer”:img} as you outlined. None of the images display in my table. I’m using a power table and I store my images as Blobs in MySQL. Any suggestions?

We did find a way to make this work but the scrolling of the table became very notchy so we aren’t using it. We used the configureCell extension function and these images are also BLOBS downloaded from the database.

   from javax.swing import JLabel,ImageIcon,JPanel
	from java.awt import Font,Image,GridLayout,Color
	if colName == "picture":
		return
		panel = JPanel(GridLayout(1,0))
		panel.setOpaque(False)
		lbl = JLabel("<html><div style=\"width:%dpx;\">%s</div></html>"%(500,self.data.getValueAt(rowIndex,"")),JLabel.LEFT)
		lbl.setFont(Font("Verdana",Font.PLAIN,22))
		if(self.data.getValueAt(rowIndex,"kqcresponse") == "Not Applicable"):
			lbl.setForeground(Color(213,213,213))
		
		panel.add(lbl)
		if value != None:
			image = ImageIcon(value)
			maxWidth = 100
			if (image.getIconWidth() != maxWidth):
				image = ImageIcon(image.getImage().getScaledInstance(maxWidth,-1,Image.SCALE_DEFAULT))
			img = JLabel(image,JLabel.LEFT)	
			panel.add(img)
		
		return {"renderer":panel}
1 Like

I tried that with slightly modified HTML, the image still didn’t appear, instead all I got was the HTML.
I even tried storing the image in a temp file and modifying the HTML to display in image tag of the temp file and that didn’t work either.

Can you post a sample of your dataset and your extension function script? We look for the column called picture in the if statement and yours looks like its called image. I’m also wondering if your grid layout is correct for the number of columns you have selected to display. We were only showing 2 columns in this example.

Here’s the configure Cell function and a sample dataset which is quite ugly. I changed the HTML to display an image which manages to display something, just not the image I want.

        from javax.swing import JLabel,ImageIcon,JPanel
	from java.awt import Font,Image,GridLayout,Color
	from java.awt import Dimension
	from javax.imageio import ImageIO
  	from java.io import ByteArrayInputStream
  	
	if colName == "image":
		filename = system.file.getTempFile("jpg")
		system.file.writeFile(filename, value)
		bais = ByteArrayInputStream(value)
		image = ImageIO.read(bais)
		bais.close()
		print filename
		panel = JPanel(GridLayout(1,0))
		panel.setOpaque(False)
		lbl = JLabel('<html><img src="%s"></html>'%(filename),JLabel.LEFT)
		panel.add(lbl)
		
		if value != None:
			image = ImageIcon(value)
			maxWidth = 100
			if (image.getIconWidth() != maxWidth):
				image = ImageIcon(image.getImage().getScaledInstance(maxWidth,-1,Image.SCALE_DEFAULT))
			img = JLabel(image,JLabel.LEFT)   
			panel.add(img)
		print img
		return {"renderer":panel}

sample DataSet:

#NAMES
“image”,“report”,“UploadDate”,“Image Name”
#TYPES
“[byt”,“str”,“date”,“str”
#ROWS”,“1”
“rO0ABXNyABZvcmcucHl0aG9uLmNvcmUuUHlMaXN0q49pWxvKu7ECAAJJABRnTGlzdEFsbG9jYXRl
ZFN0YXR1c0wABGxpc3R0ABBMamF2YS91dGlsL0xpc3Q7eHIAHm9yZy5weXRob24uY29yZS5QeVNl
cXVlbmNlTGlzdCfPzfYk8zRNAgAAeHIAGm9yZy5weXRob24uY29yZS5QeVNlcXVlbmNloUERqPvD
rmcCAAFMAAlkZWxlZ2F0b3J0ACdMb3JnL3B5dGhvbi9jb3JlL1NlcXVlbmNlSW5kZXhEZWxlZ2F0
ZTt4cgAYb3JnLnB5dGhvbi5jb3JlLlB5T2JqZWN0s2pk8G8Q02cCAAJMAAlqYXZhUHJveHl0ABJM
amF2YS9sYW5nL09iamVjdDtMAAdvYmp0eXBldAAYTG9yZy9weXRob24vY29yZS9QeVR5cGU7eHBw
c3IAI29yZy5weXRob24uY29yZS5QeVR5cGUkVHlwZVJlc29sdmVye4FTxZ5iavkCAANMAAZtb2R1
bGV0ABJMamF2YS9sYW5nL1N0cmluZztMAARuYW1lcQB+AApMABB1bmRlcmx5aW5nX2NsYXNzdAAR
TGphdmEvbGFuZy9DbGFzczt4cHQAC19fYnVpbHRpbl9fdAAEbGlzdHZxAH4AAHNyABxvcmcucHl0
aG9uLmNvcmUuUHlTZXF1ZW5jZSQx1xuzxqwfYNcCAAFMAAZ0aGlzJDB0ABxMb3JnL3B5dGhvbi9j
b3JlL1B5U2VxdWVuY2U7eHIAJW9yZy5weXRob24uY29yZS5TZXF1ZW5jZUluZGV4RGVsZWdhdGUX
z9sv6ecEwgIAAHhwcQB+AAj/////c3IAE2phdmEudXRpbC5BcnJheUxpc3R4gdIdmcdhnQMAAUkA
BHNpemV4cAAAAAF3BAAAAAFzcgAXb3JnLnB5dGhvbi5jb3JlLlB5QXJyYXlh96q1T0g05QIABEwA
BGRhdGFxAH4ABkwACGRlbGVnYXRldAAnTG9yZy9weXRob24vY29yZS9QeUFycmF5JEFycmF5RGVs
ZWdhdGU7TAAEdHlwZXEAfgALTAAIdHlwZWNvZGVxAH4ACnhxAH4AA3BzcQB+AAl0AAVhcnJheXQA
BWFycmF5dnEAfgAWc3EAfgAQcQB+ABh1cgACW0Ks8xf4BghU4AIAAHhwAAAToYlQTkcNChoKAAAA
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
tOBZbLXomkCY4DKBP6Fqwi1LqqW3Zb5lrWW3FcMqzKrQqtHq5UTDiUkT105sm/jV2sE6y3q39T0b
FZsQm0KbZpvXtua2bNtK2+t2NLsAu0V2TXav7C3sufbb7G870B0mOyxzaHX44ujkKHSsc+xzMnRK
dtridMtZ1TnSeaXzBReCi4/LIpcWl4+ujq55rodc/3KzdMt02+f2bJLJJO6k3ZN63PXdWe473cUe
TI9kjx0eYk89T5ZnlecjLwMvjtcer6feZt4Z3vu9X/pY+wh9jvq893X1XeB7yg/zC/Qr8evwV/GP
9d/s/zBAPyAtoDZgINAhcF7gqSBCUGjQ2qBbwdrB7OCa4IEQp5AFIWdDqaHRoZtDH4WZhwnDmiej
k0Mmr5t8P9wonB/eGAEigiPWRTyINInMifxtCnFK5JTKKU+ibKLmR7VF06NnRu+LfhfjE7M65l6s
aawotjVOMW5aXE3c+3i/+LJ4ccLEhAUJlxM1E3mJTUmkpLikPUmDU/2nbpjaO81hWvG0m9NNps+Z
fnGG5oysGcdnKs5kzTycTEiOT96X/JkVwapiDaYEp2xJGWD7sjeyX3C8OOs5fVx3bhn3aap7alnq
szT3tHVpfeme6eXp/Txf3mbeq4ygjO0Z7zMjMvdmDmfFZ9Vnk7OTs4/xVfiZ/LOzdGbNmdUlsBAU
C8Q5rjkbcgaEocI9uUju9NymPFV41GkXmYp+EnXne+RX5n+YHTf78BzlOfw57XPN566Y+7QgoOCX
efg89rzW+Xrzl8zvXuC9YOdCZGHKwtZFBouKFvUuDlxcvYSyJHPJ74XWhWWFb5fGL20u0i5aXNTz
U+BPtcUKxcLiW8vclm1fji/nLe9YYbdi04qvJZySS6XWpeWln1eyV1762ebnip+HV6Wu6ljtuHrb
GuIa/pqbaz3XVpcplxWU9aybvK5hPXN9yfq3G2ZuuFhuX759I2WjaKO4IqyiaZPhpjWbPm9O33yj
0qeyfovWlhVb3m/lbL26zWtb3Xbt7aXbP+3g7bi9M3BnQ5VxVfku4q78XU92x+1u+8X5l5o9mntK
93zZy98rro6qPlvjVFOzT2vf6lq0VlTbt3/a/s4Dfgea6izrdtYz6ksPgoOig89/Tf715qHQQ62H
nQ/XHTE6suUo/WhJA9Iwt2GgMb1R3JTY1HUs5Fhrs1vz0d+sftvbotdSeVzt+OoTlBNFJ4ZPFpwc
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
g/ZFsNcfxOS0zfIeGTuS+Mdn9asZI3ietv1CmwSe+3ydl+Gcx0uBFo0Y6epIHqKNwjLUuBMoY1BP
8sF7jkBUqyZlhBxWlDF6kAtR7G9LARaNGLT6IcWlR5IhuueJAziXckWhXsYLpnM7VwNXWjoY1+C8
d8cBJfFKNGIg3hxz1G3vSLPh02JOzqbDWfTXuTBOwIBxytfAMS8Lz6Xwi0YMYjwCzcwO2iQjD7xL
8IoLxta5pFgRBNzO1T0ZA+Cl/ZlcCL9oxECIOcz5dpg94AeyBZYaHi/kW+XV5nHi86+yBI+TxC8a
MZjJFA0f+I5/PG00/bMpGI5CNeQJKVhG6yed1PQjxQd40Z2C8+BI5L2yrF8QsmjESOOe+UYZIfUH
9pOvOUdoTk5Wt1PGIMMvxwE8rOLmSfrRBkJpTW0ZxKIRI6V7aiUsZqu7tX9opWdydqXjH2Hp6YUF
NauTbBniw7j9pJYBLSIxEhYPyhQwPWG6jBNatQITxoXbX9WcQajGL7qESsO/6JYpK3QJU6sRgeCb
C43mm81SCBgxpJBVrteIoTyAUuYbMaSQVa7XiKE8gFLm/w+TWeXWZuAPNwAAAABJRU5ErkJggnNy
ACVvcmcucHl0aG9uLmNvcmUuUHlBcnJheSRBcnJheURlbGVnYXRldxjIXV7RYkICAAFMAAZ0aGlz
JDB0ABlMb3JnL3B5dGhvbi9jb3JlL1B5QXJyYXk7eHIAHW9yZy5weXRob24uY29yZS5BYnN0cmFj
dEFycmF5g29fr7Ws2eICAANJAAhjYXBhY2l0eUkADG1vZENvdW50SW5jckkABHNpemV4cAAAE6EA
AAAAAAAToXEAfgAYdnIABGJ5dGUAAAAAAAAAAAAAAHhwdAABYng=”,“EQ Tank”,“2016-06-15 00:00:00”,“test1”

I know the copy and paste can mess them up but check your tab locations. Extension functions don’t throw errors so it might be an error in syntax or tab locations and you wouldn’t know it.

Except for the imports the indention is fine. The HTML is what’s giving me an image, but I am surprised that it’s not correct.

Here is what my tabs look like

[attachment=0]screenshot.jpg[/attachment]

I am confused with what you are doing here, I don’t see where the image actually gets loaded rom the binary data from the column. It looks like an empty temp jpg.

filename = system.file.getTempFile("jpg")
system.file.writeFile(filename, value)

I think you’re right, value is a byte array.

filename = system.file.getTempFile("jpg")
system.file.writeFile(filename, value)

How can do it with Table?
This works with Power Table.

How can do it with Table?
This works with Power Table.

You don’t. Use a power table.

But Power Table has a problem with that.
It gets slow and has trouble selecting line.

I’m not sure why you think the regular table will be any faster, even if it were capable of doing this.

You can achieve some optimization in the configureCell code posted earlier by caching the rendered image - I would recommend using put/getClientProperty.

Yes, I’m not sure. I will try your suggestion. Thanks.
Sorry, do you have a little example how I can use this?