Mercurial > code > home > repos > homeauto

view service/theaterArduino/index.html @ 4:be855a111619

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
move a bunch of services into this tree, give them all web status pages Ignore-this: a11e90f9d2cd9470565c743f54943c4b
author drewp@bigasterisk.com
date Mon, 08 Aug 2011 00:31:31 -0700
parents
children
line wrap: on
line source

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title></title>
  </head>
  <body>

    <h1>pyduino web interface</h1>

    <p>Use GET or PUT on the resources below. The value is a "0" or "1"
    string. PUT "output" to /pin/d2/mode (etc) to make it writable.</p>

    <div>
      pin/d2 : <input type="checkbox" name="d2" value="set" id="d2"/> 
      <span class="mode"> <input type="radio" name="d2-mode" value="input" id="d2-input"/> <label for="d2-input">input</label> 
      <input type="radio" name="d2-mode" value="output" id="d2-output"/> <label for="d2-output">output</label> </span>
    </div>

    <div>
      pin/d3 : <input type="checkbox" name="d3" value="set" id="d3"/> 
      <span class="mode"> <input type="radio" name="d3-mode" value="input" id="d3-input"/> <label for="d3-input">input</label> 
      <input type="radio" name="d3-mode" value="output" id="d3-output"/> <label for="d3-output">output</label> </span>
    </div>

    <div>
      pin/d4 : <input type="checkbox" name="d4" value="set" id="d4"/> 
      <span class="mode"> <input type="radio" name="d4-mode" value="input" id="d4-input"/> <label for="d4-input">input</label> 
      <input type="radio" name="d4-mode" value="output" id="d4-output"/> <label for="d4-output">output</label> </span>
    </div>

    <div>
      pin/d5 : <input type="checkbox" name="d5" value="set" id="d5"/> 
      <span class="mode"> <input type="radio" name="d5-mode" value="input" id="d5-input"/> <label for="d5-input">input</label> 
      <input type="radio" name="d5-mode" value="output" id="d5-output"/> <label for="d5-output">output</label> </span>
    </div>

    <div>
      pin/d6 : <input type="checkbox" name="d6" value="set" id="d6"/> 
      <span class="mode"> <input type="radio" name="d6-mode" value="input" id="d6-input"/> <label for="d6-input">input</label> 
      <input type="radio" name="d6-mode" value="output" id="d6-output"/> <label for="d6-output">output</label> </span>
    </div>

    <div>
      pin/d7 : <input type="checkbox" name="d7" value="set" id="d7"/> 
      <span class="mode"> <input type="radio" name="d7-mode" value="input" id="d7-input"/> <label for="d7-input">input</label> 
      <input type="radio" name="d7-mode" value="output" id="d7-output"/> <label for="d7-output">output</label> </span>
    </div>

    <div>
      pin/d8 : <input type="checkbox" name="d8" value="set" id="d8"/> 
      <span class="mode"> <input type="radio" name="d8-mode" value="input" id="d8-input"/> <label for="d8-input">input</label> 
      <input type="radio" name="d8-mode" value="output" id="d8-output"/> <label for="d8-output">output</label> </span>
    </div>

    <div>
      pin/d9 : <input type="checkbox" name="d9" value="set" id="d9"/> 
      <span class="mode"> <input type="radio" name="d9-mode" value="input" id="d9-input"/> <label for="d9-input">input</label> 
      <input type="radio" name="d9-mode" value="output" id="d9-output"/> <label for="d9-output">output</label> </span>
    </div>

    <div>
      pin/d10 : <input type="checkbox" name="d10" value="set" id="d10"/> 
      <span class="mode"> <input type="radio" name="d10-mode" value="input" id="d10-input"/> <label for="d10-input">input</label> 
      <input type="radio" name="d10-mode" value="output" id="d10-output"/> <label for="d10-output">output</label> </span>
    </div>

    <div>
      pin/d11 : <input type="checkbox" name="d11" value="set" id="d11"/> 
      <span class="mode"> <input type="radio" name="d11-mode" value="input" id="d11-input"/> <label for="d11-input">input</label> 
      <input type="radio" name="d11-mode" value="output" id="d11-output"/> <label for="d11-output">output</label> </span>
    </div>

    <div>
      pin/d12 : <input type="checkbox" name="d12" value="set" id="d12"/> 
      <span class="mode"> <input type="radio" name="d12-mode" value="input" id="d12-input"/> <label for="d12-input">input</label> 
      <input type="radio" name="d12-mode" value="output" id="d12-output"/> <label for="d12-output">output</label> </span>
    </div>

    <div>
      pin/d13 : <input type="checkbox" name="d13" value="set" id="d13"/> 
      <span class="mode"> <input type="radio" name="d13-mode" value="input" id="d13-input"/> <label for="d13-input">input</label> 
      <input type="radio" name="d13-mode" value="output" id="d13-output"/> <label for="d13-output">output</label> </span>
    </div>

    <div><button id="refresh">Refresh</button> <input type="checkbox" name="autoRefresh" id="autoRefresh"/> <label for="autoRefresh">Auto refresh</label></div>


    <div id="ajaxError"/>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
    <script type="text/javascript">
    // <![CDATA[
    $(function() { 
	$("#ajaxError").ajaxError(function (ev, xhr) {
	    $(this).text("Error: " + xhr.responseText);
	});

	function refresh() {
	    $(".mode input").css('opacity', .2);
	    $("input[value=set]").css('opacity', .2)
		.each(function (i, inp) {
		    var id = $(inp).attr('name');
		    $.ajax({
			url: "pin/" + id,
			type: "GET",
			success: function (data, textStatus, xhr) {
			    $(inp).css('opacity', 1).val(data == "1" ? ["set"] : []);
			},
		    });
		    $.ajax({
			url: "pin/" + id + "/mode",
			type: "GET",
			success: function (data, textStatus, xhr) {
			    var match = $("#" + id + "-" + data);
			    match.parent().find("input").css('opacity', 1);
			    match.click();
			}
		    });
		});
	}

	function refreshLoop() {
  	    if ($("#autoRefresh").is(":checked")) {
	        refresh();
	        setTimeout(function() { refreshLoop(); }, 
                  500); // refresh is async, so these could pile up
	    }
	}

	$("#autoRefresh").click(refreshLoop);
	$("#refresh").click(refresh);

	$(".mode input").removeAttr('disabled').change(function () {
	    var id = $(this).attr('id').replace(/-.*/, "");
	    $.ajax({
		type: "PUT",
		contentType: "text/plain",
		url: "pin/" + id + "/mode",
		data: $(this).val(),
	    });
	});

	$("input[value=set]").change(function () {
	    var id = $(this).attr('id');
	    $.ajax({
		type: "PUT",
		contentType: "text/plain",
		url: "pin/"+id,
		data: $("#"+id+":checked").val() ? "1" : "0",
	    });
	});
	refresh();
    });
    // ]]>
</script>

  </body>
</html>