UI added

app.js

@@ -11,8 +11,8 @@ var connection = require('./routes/connections');
 var app = express();
 
 // view engine setup
-app.set('views', path.join(__dirname, 'views'));
-app.set('view engine', 'jade');
+//app.set('views', path.join(__dirname, 'views'));
+//app.set('view engine', 'jade');
 
 // uncomment after placing your favicon in /public
 //app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));

public/README.md

@@ -0,0 +1,4 @@
+PathsJS-demo
+============
+
+Paths.js + Ractive.js demo

public/css/demo.css

@@ -0,0 +1,232 @@
+@import url(http://fonts.googleapis.com/css?family=Varela+Round);
+
+.container, .container div {
+  position: relative;
+  margin: 0px 0px;
+  font-family: 'Varela Round', sans-serif !important;
+}
+
+.outer-panel {
+  padding: 5px;
+}
+
+.inner-panel {
+  border: 1px solid rgba(230, 230, 230, 0.75);
+  -webkit-border-radius: 20px;
+  -moz-border-radius: 20px;
+  border-radius: 20px;
+  padding: 10px;
+  text-align: center;
+}
+
+.battery-panel {
+  height: 220px;
+  overflow: hidden;   
+}
+
+.networks-panel {
+  height: 600px;
+  overflow-y: auto;
+  overflow-x: hidden;   
+}
+
+.network-details-panel {
+  height: 360px;
+  overflow: hidden;
+  margin-top: 20px !important;   
+}
+
+.inner-panel .row {
+  text-align: center;
+}
+
+.row-spacer {
+  height: 20px;
+}
+
+.title {
+  font-size: 28px;
+  font-weight: bold;
+}
+
+.key {
+  font-size: 14px;
+  font-weight: bold;
+}
+
+.value {
+  font-size: 12px;
+}
+
+/********************************  NETWORKS LIST ITEMS **************************/
+
+.list-group {
+  margin-right: auto !important;
+  margin-left: auto !important;
+  width: 320px;
+}
+
+.list-group-item {
+  padding: 4px !important;
+  width: 100%;
+}
+
+.list-group-item-heading {
+  font-size: 12px;
+  font-weight: bold;
+  margin-bottom: 1px !important;
+}
+
+.list-group-item-text {
+  font-size: 10px;
+}
+
+.protected-wifi {
+  background-image: url(../img/sprite.png);
+  background-repeat: no-repeat;
+  background-position: -163px -32px;  
+  width: 40px;
+  height: 32px;
+  position: absolute !important;
+  right: 2px;
+  bottom: 0px;  /* halfway across the shell border */
+  cursor: default !important;  
+}
+
+/********************************   BATTERY  **************************/
+.battery-div {
+  position: relative;
+  width: 128px !important;
+  height: 64px;
+  margin-left: auto;
+  margin-right: auto;
+  display: inline-block;
+  text-align: center;
+}
+
+.battery-shell {
+  background-image: url(../img/sprite.png);
+  background-repeat: no-repeat;
+  background-position: 0px 0px;  
+  width: 128px;
+  height: 64px;
+  z-index: 2;
+  position: absolute !important;
+  top: 0px;
+  left: 0px;
+  margin: 0px;
+}
+
+.battery-level {
+  background: #ff0000; /* Old browsers */
+  background: -moz-linear-gradient(left,  #ff0000 1%, #ffb200 30%, #ffff00 50%, #aeff00 70%, #00ff00 100%); /* FF3.6+ */
+  background: -webkit-gradient(linear, left top, right top, color-stop(1%,#ff0000), color-stop(30%,#ffb200), color-stop(50%,#ffff00), color-stop(70%,#aeff00), color-stop(100%,#00ff00)); /* Chrome,Safari4+ */
+  background: -webkit-linear-gradient(left,  #ff0000 1%,#ffb200 30%,#ffff00 50%,#aeff00 70%,#00ff00 100%); /* Chrome10+,Safari5.1+ */
+  background: -o-linear-gradient(left,  #ff0000 1%,#ffb200 30%,#ffff00 50%,#aeff00 70%,#00ff00 100%); /* Opera 11.10+ */
+  background: -ms-linear-gradient(left,  #ff0000 1%,#ffb200 30%,#ffff00 50%,#aeff00 70%,#00ff00 100%); /* IE10+ */
+  background: linear-gradient(to right,  #ff0000 1%,#ffb200 30%,#ffff00 50%,#aeff00 70%,#00ff00 100%); /* W3C */
+  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff0000', endColorstr='#00ff00',GradientType=1 ); /* IE6-9 */
+
+  width: 105px;
+  height: 50px;
+  position: absolute !important;
+  top: 7px;
+  left: 7px;
+  z-index: 0;
+}
+
+.battery-mask {
+  background: white;
+  max-width: 105px;
+  height: 50px;
+  position: absolute !important;
+  top: 0px;
+  right: 0px;
+  z-index: 1;
+}
+
+.battery-percent-text {
+  position: absolute;
+  top: 30%;
+  left: 0%;
+  font-size: 20px;
+  font-weight: bold;
+  color: black;
+  -webkit-text-fill-color: white; /* Will override color (regardless of order) */
+  -webkit-text-stroke-width: 1px;
+  -webkit-text-stroke-color: black;  
+}
+
+.battery-red {
+  color: red;
+}
+
+.battery-yellow {
+  color: orange;
+}
+
+.battery-green {
+  color: green;
+}
+
+.battery-warning {
+  background-image: url(../img/sprite.png);
+  background-repeat: no-repeat;
+  background-position: -130px -34px;  
+  width: 32px;
+  height: 30px;
+  position: absolute !important;
+  left: 6px;
+  bottom: -9px;  /* halfway across the shell border */
+  cursor: default !important; 
+  z-index: 3;
+}
+
+.battery-plug {
+  background-image: url(../img/sprite.png);
+  background-repeat: no-repeat;
+  background-position: -130px 0px;  
+  width: 33px;
+  height: 32px;
+  position: absolute !important;
+  right: 20px;
+  bottom: -12px;  /* halfway across the shell border */
+  cursor: default !important;  
+  z-index: 3;  
+}
+
+
+/**************************  PLAY/PAUSE BUTTONS **************************************/
+
+
+.play-button {
+  background-image: url(../img/sprite.png);
+  background-repeat: no-repeat;
+  background-position: -190px 0px;
+  width: 28px;
+  height: 27px;
+  cursor: pointer;
+  float: right;
+}
+
+.pause-button {
+  background-image: url(../img/sprite.png);
+  background-repeat: no-repeat;
+  background-position: -218px 0px;
+  width: 28px;
+  height: 27px;
+  cursor: pointer;
+  float: right;
+}
+
+/*****************************  NET ERROR ICON  ****************************************/
+
+.update-error {
+  background-image: url(../img/sprite.png);
+  background-repeat: no-repeat;
+  background-position: -204px -32px;  
+  width: 32px;
+  height: 32px;
+  float: left;
+  cursor: default !important;  
+}

public/demo.html

@@ -0,0 +1,72 @@
+<!doctype html>
+<html>
+  <head>
+    <title>Available Networks</title>  </head>
+    <link rel="stylesheet" type="text/css" href="css/demo.css">
+    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
+  <body>
+    <div id='panels'></div>
+
+    <script id='meterVizTemplate' type='text/ractive'>
+
+      <div class='container'>
+        <div class='row-spacer'>
+        </div>
+        <div class='row'>
+
+{{#selectedNetwork !== null}}
+              <div class='inner-panel network-details-panel'>
+              <span class='title'>Details about {{selectedNetwork.ESSID}}</span>
+              <br>
+              <br>
+              {{#selectedNetwork:key}}
+                <span class='key'>{{key}}:</span> <span class='value'>{{this}}</span>
+                <br>
+              {{/selectedNetwork}}
+              </div>
+            {{/selectedNetwork}}
+
+          </div>
+
+          <div class='col-md-6 outer-panel'>
+            <div class='inner-panel networks-panel'>
+              <span class='title'>Available WiFi Networks</span>
+
+              <div class='update-error' style={{!networksUpdateError ? 'visibility:hidden;' : ''}} data-toggle="tooltip" data-placement="top" title='Unable to refresh WiFi data'>
+              </div>
+
+              <!-- The two buttons must share the same place, so we must use display:none instead of visibility:hidden -->
+              <div class='play-button' on-click='networks-play' style={{!networksPaused ? 'display:none;' : ''}} data-toggle="tooltip" data-placement="top" title='Restarts WiFi updates'>
+              </div>
+              <div class='pause-button' on-click='networks-pause' style={{networksPaused ? 'display:none;' : ''}} data-toggle="tooltip" data-placement="top" title='Pause WiFi updates'>
+              </div>
+
+              <br>
+              <br>
+              {{^wifiNetworks}}
+                  LOADING...
+              {{/wifiNetworks}}
+              <div class="list-group">
+              {{#wifiNetworks: num}}
+                <a href="javascript:" class="list-group-item" id={{'network_' + num}} on-click="expandWifi">
+                  <h5 class="list-group-item-heading">{{ssid}}</h5>
+                  <p class="list-group-item-text">{{bssid}}</p>
+                   <div class='protected-wifi'>
+                    </div>
+                  </a>
+              {{/wifiNetworks}}
+              </div>
+
+            </div>
+          </div>
+            </div>
+
+          </div>
+
+        </div>
+      </div>
+    </script>
+    <script data-main="js/demo" src="js/lib/require.js"></script>
+
+  </body>
+</html>

public/img/.gitignore

@@ -0,0 +1,12 @@
+105291-3d-glossy-orange-orb-icon-business-electrical-plug2.png
+105810-3d-glossy-orange-orb-icon-media-a-media22-arrow-forward1.png
+105815-3d-glossy-orange-orb-icon-media-a-media27-pause-sign.png
+battery (1).png
+battery.png
+Battery-Charge-battery-icon.png
+blue-shield.png
+electric_charging-512.png
+jamembo-network-error.png
+power_plug.png
+warning.png
+Warning_notification.svg.med.png