How can I create a picture slider?

Ignition
1

Hi,

I’m trying to figure out a way tie a slider and image object to a set of pictures in a directory. It would query a selectable datetime-range of jpeg files in the directory and scroll from oldest to newest.

Any ideas?

2

I have created a window that demonstrates how to accomplish this. Basically, you can use the following code:[code]import os

header = [“filepath”]
data =

dirname = “C:\”
for filename in os.listdir(dirname):
if filename[len(filename)-3:] == “JPG”:
data.append([os.path.join(dirname, filename)])

event.source.parent.images = system.dataset.toDataSet(header, data)
event.source.parent.getComponent(‘Slider’).value = 1[/code]to walk through a directory and append all jpegs to a dataset. The slider component’s length will be the length of the dataset. The slider’s value will be the index. Use the following code to display the image when the slider’s value changes:[code]from javax.swing import ImageIcon

if event.propertyName == “value”:
value = event.newValue - 1
image = event.source.parent.images.getValueAt(value, 0)
bytes = system.file.readFileAsBytes(image)
event.source.parent.getComponent(‘Image’).setIcon(ImageIcon(bytes))[/code]That’s it!

ImagesFromDirectory.vwin (5.2 KB)

3

You’re a machine Travis! :thumb_left:

4

Wow! Thanks, Travis!

I just got time to try it out and it’s really impressive! I was amazed that I could even turn off defered updates and it runs through the pics without lag.

Thanks again,

Tim

5

Ok, I’m having a bit more trouble with this.

First is I can’t seem to get the pics to scale to bounds of the container.

Second is, the pictures aren’t viewable from clients (other than the one on the server machine).
I activated IIS and tried to point at them using a web address, but I get an error saying the directory doesn’t exist.

Thoughts?

6

I activated IIS to point at the directory using a url.
Here’s what I’m trying:

[code]import java
import javax

header = [“filepath”]
data = []

url = java.net.URL(“http://192.168.0.100/images/”)
for filename in javax.imageio.ImageIO.read(url):
if filename[len(filename)-3:] == “jpg”:
data.append([java.net.URL(url + filename)])
event.source.parent.Cam1Images = system.dataset.toDataSet(header, data)[/code]

But I get the following error:

AttributeError: getitem

7

(By the way, there ARE indents in that last post. They just didn’t come through in the post.)

8

Fixed that for you. If you put around your code then the indents will be preserved.

9

Can you explain what you think this line will do?

[tt]for filename in javax.imageio.ImageIO.read(url)[/tt]

It’s like your trying to iterate through a list of filenames, but instead of using a list of filenames, you’re using an image?

10

By the way, to make the pictures scale inside the image set the stretch mode property of the image to bounds.

11

Carl - I don’t really know Python so I was experimenting. The problem is, without the URL of the pic, the clients don’t find them. I ended up going a different route that is working well, but I would still love to know how to do this for my edification.

Travis - I tried setting to bounds and get the following error:

Error setting component property. Trying:
  Image.stretchMode = 1
Message:
  javax.swing.ImageIcon cannot be cast to
com.inductiveautomation.ignition.client.images.PathIcon
12

URLs are very different than file folders - you can’t iterate over the images stored beneath some URL - they’re not folders, at least not in the same sense as local disk folders.