Can you error trap this statement?

JavaScript
1

I slowly learning Jvascriopt, creating a personal webpage to display snapshots from my webcam. It sends files to my FTP server every x seconds, but changes the filename to include date/time coding. I want to display the latest file, but its impossible to sync camera, server and workstation time down to the second. So my plan is to loop down from 59 secs, looping when the file is not found.

If I have the following line, I want to trap an error if the file is not found. The “TRY” method doesn’t seem to capture an error though, any ideas?

document.write('
<img alt="Title" 
src="ftp://webview:webview@192.168.200.39/webcam/NameDATEHHMMSS.jpg"
 class="auto-style1" height="675" width="900">')

Thx,

2 
<img alt="File not found" src="ftp://webview:webview@192.168.200.39/webcam/NameDATEHHMMSS.jpg" class="auto-style1" height="675" width="900">

An <img> element does not throw an error if the file doesn’t exist.

3

You can instead use the error event to catch an image loading error:

document.getElementById("myImage").addEventListener("error", function (evt) {
  console.log("Image failed to load: ", evt);
});
4

So, if I’m understanding this correctly if I first used this before writing the picture, I could error trap. Would this still work with the FTP source?

Can you tell me how the sequence would work? In concept I want to loop if there is an error (from 59 to 0), jumping out of the loop if there is no error and then display the picture.

5

It’s a bad idea to loop if there’s an error, because the code will become trapped in an endless loop.

6

When you upload the file to the FTP server, could you also copy it to “Name_latest.jpg” and then just display that? Gets around all the nasty time-syncing and trying to figure out which was the last one updated. You still have the date/time coded one if you want to keep historic copies. Doesn’t help you figure out how to deal with the specific issue (i.e. it’s not helping you learn the language), but would solve the problem.

7

The camera is writing directly to the FTP server, so what you recommend is not an option.

8

Paul,

Since there are files being written every x seconds, my plan is to loop a finite 60 times, so it would not be endless.

9

Ah, I see, I didn’t pick up on that.

10

Ahh good one, so that could be done with setTimeout.

Pseudocode - details need to be filled in

function loadImage(img, attempts) {
  if (attempts > 60) {
    return;
  }
  function imageErrorHandler() {
    loadImage(img, attempts + 1);
  }
    setTimeout(function () {
      // load image here, and setup the load event with imageErrorHandler
    }, 100);
  }
}

The will attempt to load the image ten times a second (every 100 milliseconds) and bail-out after 60 failed attempts.

11

Paul,

Now it looks like you are on to something. Since I’m such a newbie on this (actually I’m an old fart trying to learn technology), the only part that is not actual code is the // line, correct? (so I would have my original line

document.write('
<img alt="Title" 
src="ftp://webview:webview@192.168.200.39/webcam/NameDATEHHMMSS.jpg"
 class="auto-style1" height="675" width="900">')

in place of the // load image here, …

I don’t think I need to attempt to load the image every 100 milliseconds (I don’t think the response time from the FTP server is near quick enough), So could I just tried it one time and them loop to the next image?

12

So you only want to attempt it once for any given image?

13

Yes, only once. The challenge is my camera sends snapshots for ever x seconds, (I have it set to 10, since more frequent than that fails). The problem is I never know what the exact second will be. And since the filename include the seconds in the filename, and actually hard coded to create a directory structure of date/hour/min. I am creating a variable filepath to load the file based on current time. The filename example is 17[R][0@0][0].jpg, where the 17 is the seconds, the next one would be 27[R][0@0][0].jpg. Unfortunately it is not consistent on which second, from day to day.

14

Paul…still out there?

I’m not understanding your suggestion. can you please explain the how the coding works. I’m not seeing how this would check whether the image exists or if it loads.

Dave

15

][quote=“ilikemybu, post:14, topic:280504, full:true”]
I’m not understanding your suggestion. can you please explain the how the coding works. I’m not seeing how this would check whether the image exists or if it loads.
[/quote]

Here’s a working example, where the code uses the onerror event to remove the bad image when it doesn’t load.

I’ve put in there a half-second delay for removing the image, go give you time to see the attempted image on the screen before it’s removed again.

16

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.