A refresh of my revisit of the WLX-652

My IP-Camera image gallery solution described in my PREVIOUS POST was working well for browsers other than Firefox. Firefox doesn’t handle cache like other browsers. The retrieved images were cached and even a page refresh would not retrieve a new image. As long as the image file name remains the same Firefox will continue to load from cache. The no-cache meta also has no effect. The only to force an image re-fetch was to click refresh while holding down the SHIFT key on the keyboard.

I tried all of the solutions that I discovered Googling the web but nothing worked other than clicking refresh while holding down the SHIFT key.

The only solution was for my CGI to use new file names for every fetch from the cameras. Getting this to work took much more time than I expected. I got 98% there on my own but some javascript was tripping me up. Finally, late last evening I called my son for help. He is a professional software engineer that works for a satellite imaging company and knows more in one finger than my entire old retired brain. After explaining my problem and supplying him with my source he pretty quickly fixed my javascript problems and, thankfully, my camera gallery works as well on Firefox as it does with other browsers.

I changed my CGI to create a new file name for each fetch by appending the number of seconds since 1970 to the name, via the Busybox command “date +%s”. Now Firefox works as well as Chrome.

This is my current CGI:

# Written for WLX-652 Snake-OS
# Version 2.1

rm ${photodir}*.jpg
sec=`date +%s`

echo "Content-type: text/javascript"
echo "var sec = '${sec}'"

# Fetch FI8904W Outside porch Camera still image
wget -q -O ${photodir}${cname}${sec}.jpg http://${camera}:${port}/snapshot.cgi?user=${username}\&pwd=${password}
echo var img1 = "'${cname}${sec}.jpg';"

# Fetch C6F0SeZ3N0P0L0 h.264 Outside IPCAM (lil Abner)
wget -q -O ${photodir}${cname}${sec}.jpg http://${camera}:${port}/tmpfs/snap.jpg?usr=${username}\&pwd=${password}
echo var img2 = "'${cname}${sec}.jpg';"

# Fetch Clubhouse Axis Outside camera
wget -q -O ${photodir}${cname}${sec}.jpg http://${camera}:${port}/axis-cgi/jpg/image.cgi?resolution=800x600&camera=1
echo var img3 = "'${cname}${sec}.jpg';"

# Fetch Green's FI8918W Indoor Camera
wget -q -O ${photodir}${cname}${sec}.jpg http://${camera}:${port}/snapshot.cgi?user=${username}\&pwd=${password}\&count=0
echo var img4 = "'${cname}${sec}.jpg';"

This is my current index.html:

<!DOCTYPE html> 
<title>Connestee Falls North Carolina Cameras</title>
<style type="text/css"> 
body { 
    background: #222; 
    color: #eee; 
    margin-top: 20px; 
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; 
a { 
    color: #FFF; 
a:hover { 
    color: yellow; 
    text-decoration: underline; 
.thumbnails img { 
    height: 80px; 
    border: 4px solid #555; 
    padding: 1px; 
    margin: 0 10px 10px 0; 
.thumbnails img:hover { 
    border: 4px solid #00ccff; 
.preview img { 
    border: 4px solid #444; 
    padding: 1px; 
    width: 800px; 

<script type="text/javascript" src="cgi-bin/fetchimg.cgi"></script>
<script type="text/javascript"></script> 
<div class="gallery" align="center"> 
    <h2>Ed's Camera Snapshot Gallery</h2> 
    <br /> 
    <div class="thumbnails"> 
        <img onmouseover="preview.src=img1.src" name="img1" id="img1" title="Connestee West fi8904w" src="" alt=""/> 
        <img onmouseover="preview.src=img2.src" name="img2" id="img2" title="Connestee West ONVIF" src="" alt=""/> 
        <img onmouseover="preview.src=img3.src" name="img3" id="img3" title="Connestee Clubhouse Golf" src="" alt=""/> 
        <img onmouseover="preview.src=img4.src" name="img4" id="img4" title="Connestee West Green"src="" alt=""/> 
        <img onmouseover="preview.src=img5.src" name="img5" id="img5" title="Camera Undefined" src="http://www1.onemediapublishing.com/front/assets/unavailable2.png" alt=""/> 
    <div class="preview" align="center"> 
        <img name="preview" id="preview" src="" alt=""/> 
Reload - Shift key & click Reload icon
var img1elem=document.getElementById("img1");
img1elem.src= "images/" + img1;
var img2elem=document.getElementById("img2");
img2elem.src= "images/" + img2;
var img3elem=document.getElementById("img3");
img3elem.src= "images/" + img3;
var img4elem=document.getElementById("img4");
img4elem.src= "images/" + img4;
var previewelem=document.getElementById("preview");
previewelem.src= "images/" + img2;
This entry was posted in ARM, Electronics, hardware, IP-Camera, Linux, Programming, software. Bookmark the permalink.

1 Response to A refresh of my revisit of the WLX-652

  1. acassis says:

    Very nice!


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s