Pin mapping changes for DFRobot kit access control in JS

Signed-off-by: deadprogram <ron@hybridgroup.com>
intel-iot-devkit · Dec 15, 2016 · 2e2c122 · 2e2c122
1 parent 4bb47a7
commit 2e2c122
Show file tree

Hide file tree

Showing 4 changed files with 84 additions and 67 deletions.
diff --git a/access-control/javascript/dfrobot.js b/access-control/javascript/dfrobot.js
@@ -36,10 +36,10 @@ exports.init = function(config) {
     mraa.addSubplatform(mraa.GENERIC_FIRMATA, "/dev/ttyACM0");
 
     screen = new (require("jsupm_i2clcd").SAINSMARTKS)(520, 521, 516, 517, 518, 519, 512);
-    motion = new (require("jsupm_biss0001").BISS0001)(528);
+    motion = new (require("jsupm_biss0001").BISS0001)(528); // aka A2
   } else {
     screen = new (require("jsupm_i2clcd").SAINSMARTKS)(8, 9, 4, 5, 6, 7, 0);
-    motion = new (require("jsupm_biss0001").BISS0001)(16);
+    motion = new (require("jsupm_biss0001").BISS0001)(16); // aka A2
   }
 
   return;

diff --git a/access-control/javascript/index.html b/access-control/javascript/index.html
@@ -1,108 +1,107 @@
 <!doctype html>
 <html lang="en">
-  <head>
+<head>
     <meta name="viewport" content="width=device-width, user-scalable=no">
     <title>Access Control</title>
-
+<link rel="stylesheet" href="styles.css">
     <style>
-      * { box-sizing: border-box;}
-
-      html {
-        font-size: 30px;
-        font-family: sans-serif;
-      }
-
-      button {
-        font-size: 30px;
-        background: none;
-        border: 1px solid #444;
-        border-radius: 5px;
-        margin: 5px;
-        cursor: pointer;
-      }
-
-      #pad .row button {
-        width: 55px;
-        height: 55px;
-      }
-
-      button:hover {
-        background: #efefef;
-      }
-
-      #display, #submit, #clear {
-        display: block;
-        width: 205px;
+      .row {
+        margin: 5px 0;
       }
 
       #display {
-        margin: 5px;
         font-family: monospace;
-        border: 1px solid #444;
         text-align: center;
         color: red;
-        line-height: 1;
+        margin-bottom: 15px;
         min-height: 40px;
       }
-    </style>
-  </head>
-  <body>
-    <div id="pad">
-      <div id="display"></div>
-
-      <div class="row">
-        <button>7</button>
-        <button>8</button>
-        <button>9</button>
-      </div>
 
-      <div class="row">
-        <button>4</button>
-        <button>5</button>
-        <button>6</button>
-      </div>
+      .buttons-cell {
+        margin-top: 15px;
+      }
+    </style>
+</head>
+<body>
+    <div class="container">
+      <div id="pad" class="col-xs-12 col-md-4 col-md-offset-4">
+        <div class="row">
+          <div class="col-xs-12">
+            <div id="display" class="form-control"></div>
+          </div>
+        </div>
+        <div class="row">
+          <div class="col-xs-4">
+            <button class="btn btn-default btn-lg btn-block">7</button>
+          </div>
+          <div class="col-xs-4">
+            <button class="btn btn-default btn-lg btn-block">8</button>
+          </div>
+          <div class="col-xs-4">
+            <button class="btn btn-default btn-lg btn-block">9</button>
+          </div>
+        </div>
+
+        <div class="row">
+          <div class="col-xs-4">
+            <button class="btn btn-default btn-lg btn-block">4</button>
+          </div>
+          <div class="col-xs-4">
+            <button class="btn btn-default btn-lg btn-block">5</button>
+          </div>
+          <div class="col-xs-4">
+            <button class="btn btn-default btn-lg btn-block">6</button>
+          </div>
+        </div>
+
+        <div class="row">
+          <div class="col-xs-4">
+            <button class="btn btn-default btn-lg btn-block">1</button>
+          </div>
+          <div class="col-xs-4">
+            <button class="btn btn-default btn-lg btn-block">2</button>
+          </div>
+          <div class="col-xs-4">
+            <button class="btn btn-default btn-lg btn-block">3</button>
+          </div>
+        </div>
+
+        <div class="row">
+          <div class="col-xs-12 col-md-6 buttons-cell">
+            <button id="submit" class="btn btn-success btn-lg btn-block">Submit</button>
+          </div>
+          <div class="col-xs-12 col-md-6 buttons-cell">
+            <button id="clear" class="btn btn-info btn-lg btn-block">Clear</button>
+          </div>
+        </div>
 
-      <div class="row">
-        <button>1</button>
-        <button>2</button>
-        <button>3</button>
       </div>
-
-      <button id="submit">Submit</button>
-      <button id="clear">Clear</button>
     </div>
 
     <script>
       var numpad = document.querySelectorAll("#pad .row button"),
           display = document.getElementById("display"),
           submit = document.getElementById("submit"),
           clear = document.getElementById("clear");
-
       function add(e) {
         if (display.textContent.length >= 4) { return; }
         var num = e.target.textContent;
         display.textContent += num;
       }
-
       function clearDisplay() {
         display.textContent = "";
       }
-
       clear.addEventListener("click", clearDisplay);
-
       submit.addEventListener("click", function() {
         var req = new XMLHttpRequest(),
             code = display.textContent;
-
         req.open("get", "/alarm?code=" + code, true);
         req.send();
-
         clearDisplay();
       });
-
       for (var i = 0; i < numpad.length; i++) {
         numpad[i].addEventListener("click", add);
       }
     </script>
-  </body>
+</body>
 </html>
diff --git a/access-control/javascript/index.js b/access-control/javascript/index.js
@@ -165,9 +165,16 @@ function server() {
     res.send("");
   }
 
+  // styles for the web page
+  function styles(req, res) {
+    res.sendFile(path.join(__dirname, "styles.css"));
+  }
+
+
   app.get("/", index);
+  app.get("/styles.css", styles);
   app.get("/alarm", defuse);
-
+  
   app.listen(3000);
 }
 

diff --git a/access-control/javascript/styles.css b/access-control/javascript/styles.css