Mercurial > code > home > repos > homeauto

<?xml version="1.0" encoding="utf-8"?>
<!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>bedroom controls</title>
    <style type="text/css" media="all">
      /* <![CDATA[ */
      .section {
	  margin: 10px;
	  padding: 10px;
	  border: 1px solid black;
      }
.swatch {
background: hsl(0, 0%, 13%);
display: inline-block;
padding: 4px;
margin: 3px;
border-radius: 9px;
font-size: 24px;
}
      /* ]]> */
    </style>

  </head>
  <body>

    <div class="section">
      <button>Alarm check</button>
    </div>

    <div class="section">
      Speaker selector: <span>pillow</span>
      <div><button>Speakers</button></div>
      <div><button>Pillow</button></div>
    </div>

    <div class="section">
      Vol request: <button>+1</button> <button>-1</button>
    </div>

    <div class="section">
      Output volume: <span data-text="volume">35%</span>
    </div>

    <div class="section">
      Sound effects:

      <div>lights up <button>play</button></div>
      <div>lights down <button>play</button></div>
      <div>pillow spkr <button>play</button></div>
      <div>room spkr <button>play</button></div>
    </div>

    <div class="section">
      Podcast:
    </div>

    <div class="section">
      Music:
    </div>

    <div class="section">
      Lights:

     <div>Tower LED:
       <span data-bind="text: brite0"/>
       <span class="swatch" data-bind="attr: {style: bg(brite0())}">&#9641;</span>
     </div>
     <div>Headboard 1:
       <span data-bind="text: brite1"/>
       <span class="swatch" data-bind="attr: {style: bg(brite1())}">&#9641;</span>
     </div>
     <div>Headboard 2:
       <span data-bind="text: brite2"/>
       <span class="swatch" data-bind="attr: {style: bg(brite2())}">&#9641;</span>
     </div>
     <div>Headboard 3:
       <span data-bind="text: brite3"/>
       <span class="swatch" data-bind="attr: {style: bg(brite3())}">&#9641;</span>
     </div>
     <div>Headboard 4:
       <span data-bind="text: brite4"/>
       <span class="swatch" data-bind="attr: {style: bg(brite4())}">&#9641;</span>
     </div>
     <div>Corner:</div>
     <div>Red ball:</div>
     <div>Ceiling:</div>
    </div>


    <script src="//bigasterisk.com/lib/knockout-2.3.0.js" type="text/javascript"/>
    <script src="//bigasterisk.com/lib/jquery-2.0.3.min.js" type="text/javascript"/>
    <script type="text/javascript">
    // <![CDATA[
    $(function () {
	var model = {
	    volume: "36%",
            brite0: ko.observable("loading"),
            brite1: ko.observable("loading"),
            brite2: ko.observable("loading"),
            brite3: ko.observable("loading"),
            brite4: ko.observable("loading"),
	};
        model.bg = function (c) { return "color: "+c; };
        ko.applyBindings(model);
        function loadBrites() {
          $.get("brite/0", function (data) { model.brite0(data); });
          $.get("brite/1", function (data) { model.brite1(data); });
          $.get("brite/2", function (data) { model.brite2(data); });
          $.get("brite/3", function (data) { model.brite3(data); });
          $.get("brite/4", function (data) { model.brite4(data); });
        }
        loadBrites();
    });
    // ]]>
    </script>
  </body>
</html>
author	drewp <drewp@bigasterisk.com>
date	Mon, 19 Feb 2018 04:21:28 -0800
parents	e4069a2cfcc8
children