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:

#!/bin/sh
# Written for WLX-652 Snake-OS
# Version 2.1
#
photodir="/usb/snake1/www/images/"

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

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

# Fetch FI8904W Outside porch Camera still image
camera=url-for-this-camera
cname=fi8904w
port=80
username=username-for-this-camera
password=password-for-this-camera
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)
camera=url-for-this-camera
cname=lilabner
port=84
username=username-for-this-camera
password=password-for-this-camera
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
camera=url-for-this-camera
cname=clubhouse
port=8083
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
camera=url-for-this-camera
cname=greenin
port=80
username=username-for-this-camera
password=password-for-this-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> 
<html> 
<head> 
<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; 
    cursor:pointer; 
} 
 
.preview img { 
    border: 4px solid #444; 
    padding: 1px; 
    width: 800px; 
} 
</style>
 
</head>
<body>



<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> 
    <p></p> 
    <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><br/> 
 
    <div class="preview" align="center"> 
        <img name="preview" id="preview" src="" alt=""/> 
    </div> 
 
</div> 
 
Reload - Shift key & click Reload icon
<script>
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;
</script> 
</body> 
</html>
Advertisements
This entry was posted in ARM, Electronics, hardware, IP-Camera, Linux, Programming, software. Bookmark the permalink.

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

  1. acassis says:

    Very nice!

    Like

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s