added wiring diagram

jmstriegel · jmstriegel · commit bf539d337b2d · 2014-01-09T19:03:10.000-05:00
diff --git a/coder-apps/tests/gpio_test/static/css/index.css b/coder-apps/tests/gpio_test/static/css/index.css
@@ -1,12 +1,31 @@
 
 .pagecontent {
     padding: 24px;
+    min-width: 880px;
+}
+
+.buttons {
+    float: left;
+    width: 240px;
+}
+.diagram {
+    width: 640px;
+    float: left;
+    padding-bottom: 100px;
+}
+.clear {
+    clear: both;
 }
 
 #buttonval {
-    width: 100px;
-    height: 100px;
+    width: 200px;
+    height: 150px;
+    margin: 24px 0;
+    color: #fff;
     background-color: #000000;
+    text-align: center;
+    font-weight: bold;
+    line-height: 150px;
 }
 #buttonval.on {
     background-color: #F03050;
@@ -31,11 +50,11 @@
 
 
 #output {
-    position: absolute;
+    position: fixed;
     left:0;
     right:0;
     bottom:0;
-    height: 150px;
+    height: 100px;
     color: #fff;
     background-color: #000;
     overflow: hidden;
diff --git a/coder-apps/tests/gpio_test/static/js/index.js b/coder-apps/tests/gpio_test/static/js/index.js
@@ -31,7 +31,6 @@ $(document).ready( function() {
 
         // Each connection gets a unique ID.
         addOutputMessage( "Connected with ID: " + Coder.socketConnection.socketID );
-        addOutputMessage( "Click ON or OFF to enable blinking" );
         
         // Send a "connect" message to our Node page when we first connect.
         Coder.socketConnection.sendData( 'connect', {} );
diff --git a/coder-apps/tests/gpio_test/static/media/wiring_diagram.jpg b/coder-apps/tests/gpio_test/static/media/wiring_diagram.jpg
diff --git a/coder-apps/tests/gpio_test/views/index.html b/coder-apps/tests/gpio_test/views/index.html
@@ -26,11 +26,17 @@
 <body class="">
     <div class="pagecontent">
         <h1>GPIO Test</h1>
-        <div id="blinkon" class="button">BLINK</div>
-        <div id="blinkoff" class="button" style="display:none;">STOP BLINK</div>
-        <div id="toggle" class="button">TOGGLE</div>
-        <div id="push" class="button">PUSH</div>
-        <div id="buttonval"></div>
+        <div class="buttons">
+            <div id="blinkon" class="button">BLINK</div>
+            <div id="blinkoff" class="button" style="display:none;">STOP BLINK</div>
+            <div id="toggle" class="button">TOGGLE</div>
+            <div id="push" class="button">PUSH</div>
+            <div id="buttonval">HARDWARE PRESS</div>
+        </div>
+        <div class="diagram">
+            <img src="/static/apps/gpio_test/media/wiring_diagram.jpg" />
+        </div>
+        <div class="clear"></div>
         <div id="output">
             
         </div>        
