--- a/service/bedroomArduino/bedroomArduino.py	Thu Sep 19 23:14:09 2013 -0700
+++ b/service/bedroomArduino/bedroomArduino.py	Sun Sep 22 00:30:20 2013 -0700
@@ -69,7 +69,7 @@
         self.settings.arduino.ping()
         
         self.set_header("Content-Type", "application/xhtml+xml")
-        self.write(open("index.html").read())
+        self.write(open("index.xhtml").read())
 
 class SpeakerChoice(PrettyErrorHandler, cyclone.web.RequestHandler):
     def put(self):
@@ -77,6 +77,10 @@
         self.write(ret)
 
 class Brite(PrettyErrorHandler, cyclone.web.RequestHandler):
+    def get(self, which):
+        self.set_header("Content-Type", "text/plain")
+        self.write(hexFromRgb(self.settings.brites[int(which)]))
+        
     def put(self, which):
         which = int(which)
         brites = self.settings.brites
@@ -166,7 +170,7 @@
 
     ard = ArduinoBedroom(port=config['arduinoPort'])
 
-    period = 1/config['pollFrequency']
+    period = 1 / config['pollFrequency']
     p = Poller(config, ard, period)
     task.LoopingCall(p.poll).start(period)
 

--- a/service/bedroomArduino/index.xhtml	Thu Sep 19 23:14:09 2013 -0700
+++ b/service/bedroomArduino/index.xhtml	Sun Sep 22 00:30:20 2013 -0700
@@ -11,6 +11,14 @@
 	  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>
 
@@ -55,28 +63,58 @@
     <div class="section">
       Lights:
 
-     Tower LED:
-     Headboard 1:
-     Headboard 2:
-     Headboard 3:
-     Headboard 4:
-     Corner:
-     Red ball:
-     Ceiling:
+     <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="knockout-2.0.0.js" type="text/javascript"/>
-    <script src="jquery.min.js" type="text/javascript"/>
+    <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 () { 
-	ko.applyBindings({
-	    volume: "36%"
-	});
+	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>
\ No newline at end of file
+</html>