#!/bin/sh

# 1. Put this script into /www/cgi-bin/
#
# 2. Add this to /etc/rc.local:
#
#fswebcam -b --png 0 -r 640x480 --font /usr/share/fonts/luxisr.ttf \
#--timestamp '%Y/%m/%d %H:%M:%S' --line-colour '#FF000000' \
#--save /tmp/webcam.png0 -l 1 --exec "mv /tmp/webcam.png0 /tmp/webcam.png"

if [ -z "$QUERY_STRING" ]; then
  exec cat <<EOF
Content-Type: text/html

<html>
<head>
<title>Webcam</title>
</head>
<body>
<p><img src="?ts=" id="webcamPicture" onload="reloadImage()" onabort="reloadImage()" onerror="reloadImage()"></p>
<table>
<tr>
<th>Value</th>
<th>Cur</th>
<th>Min</th>
<th>Max</th>
</tr>
<tr>
<td>Brightness:</td>
<td><input style="text-align:right" type="text" size="5" value="" id="brightness" onChange="setValue('brightness')"></td>
<td style="text-align:right" id="minbrightness"></td>
<td style="text-align:right" id="maxbrightness"></td>
</tr>
<tr>
<td>Contrast:</td>
<td><input style="text-align:right" type="text" size="5" value="" id="contrast" onChange="setValue('contrast')"></td>
<td style="text-align:right" id="mincontrast"></td>
<td style="text-align:right" id="maxcontrast"></td>
</tr>
<tr>
<td>Exposure:</td>
<td><input style="text-align:right" type="text" size="5" value="" id="exposure" onChange="setValue('exposure')"></td>
<td style="text-align:right" id="minexposure"></td>
<td style="text-align:right" id="maxexposure"></td>
</tr>
<tr>
<td>Gain:</td>
<td><input style="text-align:right" type="text" size="5" value="" id="gain" onChange="setValue('gain')"></td>
<td style="text-align:right" id="mingain"></td>
<td style="text-align:right" id="maxgain"></td>
</tr>
</table>
<script type="text/javascript">
<!--
var loadTime = new Date().getTime();
getValues();

function reloadImage (event) {
  var delta = loadTime + 1000 - new Date().getTime();
  if (delta > 0)
    window.setTimeout("refreshImage()", delta);
  else
    refreshImage();
}

function refreshImage () {
  loadTime = new Date().getTime();
  document.getElementById("webcamPicture").src = "?ts=" + loadTime;
}

function getValues () {
  xmlhttp = new XMLHttpRequest();
  xmlhttp.open("GET", "?getvalues");
  xmlhttp.onreadystatechange = function () {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
      data = JSON.parse(xmlhttp.responseText);
      Object.keys(data).forEach(function (key) {
        if (document.getElementById(key) && (data[key].length == 3)) {
          document.getElementById(key).value = data[key][0];
          document.getElementById("min" + key).innerHTML = data[key][1];
          document.getElementById("max" + key).innerHTML = data[key][2];
        }
      });
    }
  };
  xmlhttp.send(null);
}

function setValue (name) {
  value = document.getElementById(name).value;

  xmlhttp = new XMLHttpRequest();
  xmlhttp.open("GET", "?set" + name + "=" + value, true);
  xmlhttp.onreadystatechange = function () {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
      getValues();
    }
  };
  xmlhttp.send(null);
}
-->
</script>
</body>
</html>
EOF
fi
if [ "${QUERY_STRING##ts=}" != "${QUERY_STRING}" ]; then
  echo "Content-Type: image/png"
  echo ""
  exec cat /tmp/webcam.png
fi
if [ "${QUERY_STRING##getvalues}" != "${QUERY_STRING}" ]; then
  echo "Content-Type: text/json"
  echo ""
  echo "{"
  fswebcam --list-controls 2>&1 | \
    awk '{ if (/Brightness/ || /Contrast/ || /Exposure/ || /Gain/) { print "\"" tolower(substr($1, 9)) "\":[" $2 "," $4 "," $6 "],"; } }'
  echo "\"void\":0}"
fi
if [ "${QUERY_STRING##set}" != "${QUERY_STRING}" ]; then
  echo "Content-Type: text/plain"
  echo ""
  value="${QUERY_STRING##set}"
  exec fswebcam --set "$value" 2>&1
fi
