Revisiting+ WLX-652 e/w SnakeOS

NOTE: This was originally a May, 2015 post but I just revised it today, June 26, 2016.

Back in 2012 I wrote about the SnakeOS flashed WLX-652 device ( See Original Post ). As I said then, I actually purchased it back in 2010. It’s hard to believe it but that thing has been sitting on a shelf for five years.

WLX-652 Overview

WLX-652 Overview

Well, if you have read back in my blog you’ll be aware that I have in interest in IP-Cameras. I have a couple of cameras on my property that are aimed at my mountain view. I intend to add another on my chimney so that I can look for roof damage when I am away from home. This is because, during last February I was in another state for a month and during that time 77-mph winds ripped off part of my roof and then dumped snow on top of it. That is another  story for a another time and a different forum.

I share the URLs for my cameras with friends and give them the guest passwords. However, for some time I have wanted a way for them to be able to see several cameras at once, in a secure way yet without passwords. I felt that I needed a local server where the login/password process is hidden from prying eyes yet all the cameras could be simultaneously viewed in a web gallery.

It occurred to me that the venerable little WLX-652 might be sufficient for the job as my local webserver for my camera web gallery. It is! I described what I did below, but first, here is a screen capture of the web gallery that the WLX-652 serves up.

Capture of Gallery

Capture of Gallery hosted by WLX-652

SnakeOS is based on BusyBox and contains BusyBox HTTP Daemon (httpd) so it can host web pages. I knew that my web page needed to have any complexity on the client side so PHP was out. I searched for simple photo gallery software that only used HTML and JavaScript. I found what I was looking for at Dan Doicaru’s HTML-TUTS website (more later).

With SnakeOS you define the WWW folder in the admin section “Services->Webserver”:

webbase The folder /usb/snake1/www contains the gallery HTML code “index.html” and the folder “cgi-bin”.

Before I could work on the HTML, I needed to develop a CGI that would fetch snapshots from each IP-Camera and store them on the USB stick plugged into the WLX-652. I decided to write my CGI in shell script, which, on the WLX-652, is the fairly fully featured “dash” a derivative from Linux’s Debian distribution. A copy of the cgi script is at the bottom of the post, below the word ‘UPDATE’.

Here is what the current HTML “index.html” looks like:

<!DOCTYPE html>
<html>
<head>
<link rel='shortcut icon' href='favicon.ico' type='image/x-icon'/ >
<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>Camera Snapshot Gallery</h2>
	<p></p>
	<br />

	<div class="thumbnails">
		<img onmouseover="preview.src=img1.src" name="img1" id="img1" title="Camera Undefined" src="http://www1.onemediapublishing.com/front/assets/unavailable2.png" 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="Golfcourse View" src="" alt=""/>
		<img onmouseover="preview.src=img4.src" name="img4" id="img4" title="Connestee West Neighbor"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>

<script>
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/" + img3;
</script>
</body>
</html>

To maintain the website, I keep a folder on my desktop that is a duplicate of what is on the WLX-652’s WWW folder. Mostly edit the files on my desktop and use SSH to scp files back and forth. However, SnakeOS includes vi so, using ssh it is easy to edit files right on the WLX-652’s usb drive.

By the way, SnakeOS contains a functional cron and, briefly, I considered using it to periodically download the IP-Camera images.

My admiration for the WLX-652 has grown significantly. Who would have thought – a complete local webserver fetching and hosting images of multiple IP-Cameras for the current  total cost (including postage) of $33USD! The Raspberry-Pi would be what most folks would turn to for this task but it would cost significantly more (after case and PS added) and, quite frankly, is overkill for hosting a website like this.

UPDATE: A ‘like’ from reader of this blog, kittenswithselfies, caused me to read through this post once again and realize that it needed an update.

Occasionally, the WLX-652 would have its USB file system get trashed and I would have to rebuild it. I eventually tracked down the problem when I realized it only happened when after the WLX-652 had been powered down. Apparently, it was occasionally being powered down while a write was still in queue. Adding a ‘sync‘ command to the cgi script cured that problem. Next, I realized that I did not post my current, changed, the cgi script in this post. Consequentially, it is now posted below (with login/password and URL changes, for privacy):

CGI SCRIPT:

#!/bin/sh
# Written for WLX-652 Snake-OS
# Version 2.2
#
# NOTE: Verify that the following path is correct!
# Changing the usb stick can change this

photodir="/usb/sda1/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=melec.xoo.com
cname=fi8904w
port=82
username=mylogin
password=mypassword
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=melec.xoo.com
cname=lilabner
port=86
username=mylogin
password=mypassword
wget -q -O ${photodir}${cname}${sec}.jpg http://${camera}:${port}/tmpfs/snap.jpg?usr=${username}\&pwd=${password}
echo var img2 = "'${cname}${sec}.jpg';"

# Fetch Community's Axis Outside camera
camera=67.58.125.210
cname=Community
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 Neighbor's FI8918W Indoor Camera
camera=neighbor.ddns.net
cname=neighbor
port=80
username=hislogin
password=hispassword
wget -q -O ${photodir}${cname}${sec}.jpg http://${camera}:${port}/snapshot.cgi?user=${username}\&pwd=${password}\&count=0
echo var img4 = "'${cname}${sec}.jpg';"

sync
Advertisements
This entry was posted in ARM, Electronics, hardware, IP-Camera, Linux, Programming, software. Bookmark the permalink.

3 Responses to Revisiting+ WLX-652 e/w SnakeOS

  1. acassis says:

    Hi Celem,
    Nice post! You have a great view from your room!
    BR,
    Alan

    Like

  2. Matus says:

    You could also add a refresh button that would fetch the images from the cameras. Great post though!

    Like

    • celem says:

      Briefly, I did have an on-screen REFRESH button. It worked well with the Chrome browser but not with Firefox, which is what I use 90% of the time, I have added text at the screen bottom that says “Reload – Shift key & click Reload icon”. This is the ONLY way that I can get Firefox to reload the images from the server from the server instead of using the cached copy.

      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