Loading images from the web and displaying them as they're downloaded

ncc1989

Hi all,

My first post here, so bear with my Processing noobness.

I am using Processing to download images from a Gopro camera via wifi, and to display them one by one. The images are taking in average 12 seconds to load. I want to load image 1 and display it, then keep it on the display until image 2 is loaded, and so on. This code will be running for hours, so I wanted it to be reliable and ignore errors when the images can't be downloaded for some reason.

So far I've been able to load them into an array with requestImage(), but I'm looping through them, instead of going one by one. Does anyone know how to display them one by one, as they're loaded?

Many thanks for your help.

int maxImages = 2;
int imageIndex = 0;
PImage[] images = new PImage[maxImages];

        void setup() {
            size(displayWidth, displayHeight);
            for (int i=0; i<=1; i++) {
              int imageNum = 350666 + i;
              String url = "http://10.5.5.9:8080/DCIM/100GOPRO/G0" + imageNum + ".JPG";
              // Load image from a web server
              images[i] = requestImage(url, "jpg");
              if(images[i].width == 0) {
                // loading
                continue;
              } else if (images[i].width == -1) {
                // error
              } else { 
                // completed;
              }
            }
        }

        void draw() {
          background(0);
          image(images[imageIndex], 0, 0, width, height);
          imageIndex = (imageIndex + 1) % images.length;
        }

GoToLoop

• This seems very load event driven to me.
• My own idea to tackle that is to turn off auto draw() w/ noLoop().
• Have a separate thread("") function to get all remote images 1 by 1.
• Then once a next loadImage("") successfully completes, issue redraw() in order to display it.
• Haven't tested it yet. Check it out whether it works for ya though:

// forum.processing.org/two/discussion/9863/
// loading-images-from-the-web-and-displaying-them-as-they-re-downloaded

static final String URL = "http://" + "10.5.5.9:8080/DCIM/100GOPRO/G0";
static final String EXT = ".JPG";
static final int OFFSET = 350666, FPS = 1;

PImage img;

void setup() {
  if ((img = loadImage(URL + OFFSET + EXT)) == null)  System.exit(-1);

  size(img.width, img.height, JAVA2D);

  noSmooth();
  noLoop();
  frameRate(FPS);

  thread("loadingThreadLoop");
}

void draw() {
  background(img);
}

void loadingThreadLoop() {
  for (;; delay(20)) {
    img = loadImage(URL + (OFFSET + frameCount) + EXT);

    if (img == null)  ++frameCount;
    else              redraw();
  }
}

ncc1989

It did work, thank you!

The only thing is that it keeps looking for files quickly, and I need to introduce a 10 second interval or so to wait for the picture to be downloaded and also for the next camera picture to be taken (it's a 10 sec timelapse, failed to mention that). But I think I can tweak it to do so.

Many thanks again, GoToLoop!

GoToLoop

• I thought that 10 second interval was about loadImage("")'s performance.
• You didn't mention that your camera was taking shots at 10 second interval.
• Anyways, you can adjust the loop's waiting time by modifying delay()'s parameter.
• Since delay()'s parameter is in milliseconds, each 1000 is 1 second btW!

ncc1989

Got it, it works with a 10000 delay(). Thanks again!