Nest

README.md

@@ -56,6 +56,17 @@ git push origin my-changes-heroku
 # https://heroku.com/deploy?template=https://github.com/my-github-user/simulator/tree/my-changes-heroku
 ```
 
+#### Updating Data-Flow Dependencies (habanero)
+
+Since [data flow](https://www.npmjs.com/package/node-red-habanero) is a seperate application, to obtain updates from that repository, you can run the following commands to force a rebuild,
+replacing `my-changes-heroku` with the branch of the simulator you are using.
+
+```sh
+heroku config:set NODE_MODULES_CACHE=false
+git commit -am 'disable node_modules cache force rebuild' --allow-empty
+git push heroku my-changes-heroku:master --force
+```
+
 ### Developer Scripts
 
 There are a handful of npm scripts to aid in development.

app.json

@@ -14,7 +14,7 @@
     "xively:test",
     "heroku-postgresql:hobby-dev",
     "heroku-redis:hobby-dev",
-    "cloudinary:starter"
+    "herokuconnect:demo"
   ],
   "scripts": {
     "postdeploy": "npm run provision"

client/app/devices/device-demo.route.js

@@ -111,7 +111,7 @@ function deviceDemoRoute ($stateProvider) {
                 </select>
               </div>
             </div>
-            <div class="device-container" style="width: {{ ::demo.config.width }}px" ng-if="demo.config.image">
+            <div class="device-container" style="width: {{ ::demo.config.width }}px; height: {{ ::demo.config.height }}px" ng-if="demo.config.image">
               <div ng-repeat="(name, sensor) in ::demo.config.sensors">
                 <tooltip ng-if="sensor.tooltip"
                   options="sensor"
@@ -122,7 +122,7 @@ function deviceDemoRoute ($stateProvider) {
                 </tooltip>
                 <div ng-if="sensor.widget" bind-html-compile="demo.getHtml(sensor.widget)"></div>
               </div>
-              <img class="device-image" src="{{ demo.config.image }}" />
+              <img class="device-image" ng-src="{{ demo.config.image }}" />
             </div>
             <div class="no-image" ng-if="!demo.config.image">
               <h2>No image available</h2>
@@ -174,11 +174,19 @@ function deviceDemoRoute ($stateProvider) {
           return fieldName.toLowerCase()
         })
 
-      this.sensorsNotConfigured = _.pullAll(Object.keys(device.sensors), Object.keys(this.config.sensors || {}))
+      this.sensorsNotConfigured = _.reduce(device.sensors, (sensors, sensor, name) => {
+        const configured = this.config.sensors && this.config.sensors[name] && (this.config.sensors[name].tooltip || this.config.sensors[name].widget)
+        if (!configured) {
+          sensors.push(name)
+        }
+        return sensors
+      }, [])
+
       this.sensors = this.sensorsNotConfigured.reduce((sensors, key) => {
         sensors[key] = 50
         return sensors
       }, {})
+
       $scope.$watch(() => device.sensors, (sensors) => {
         _.forEach(sensors, (sensor, name) => { this.sensors[name] = sensor.numericValue })
       }, true)

client/app/devices/device-demo.route.less

@@ -1,6 +1,5 @@
 @import '../style/variables.less';
 
-@width: 680px;
 @row-height: 30px;
 @border: 2px solid @light-gray;
 @navigation-height: 70px;
@@ -173,11 +172,14 @@
 
     .device-container {
       position: relative;
-      width: @width;
+      width: 800px;
       margin: 0 auto;
 
       .device-image {
-        width: 100%;
+        display: block;
+        max-width: 100%;
+        max-height: 800px;
+        margin: 0 auto;
         border-radius: 20px;
         user-select: none;
       }
@@ -192,7 +194,7 @@
     }
 
     .device-control-sliders {
-      width: @width;
+      width: 800px;
       margin: 0 auto;
       margin-top: 50px;
       color: @light-gray;

client/app/devices/device-panel.component.js

@@ -81,7 +81,7 @@ const devicePanelComponent = {
 
     const EXCLUDED_INFO_FIELDS = ['excludedInfoFields', 'simulate', 'subscribe', 'template', 'update', 'sensors', 'ok', 'channels']
     this.device.excludedInfoFields = EXCLUDED_INFO_FIELDS
-      .concat(DEVICES_CONFIG.excludedDeviceInfoFields, this.config.excludedDeviceInfoFields)
+      .concat(DEVICES_CONFIG.general.excludedDeviceInfoFields, this.config.excludedDeviceInfoFields)
       .filter(Boolean)
       .map((fieldName) => {
         return fieldName.toLowerCase()
@@ -141,7 +141,9 @@ const devicePanelComponent = {
 
     this.cancelInfoFieldsEditing = () => {
       this.editingInfoFields = false
-      this.device = deviceCopy
+      Object.keys(this.device).forEach((key) => {
+        this.device[key] = deviceCopy[key]
+      })
     }
 
     this.updateInfoFields = () => {

client/app/devices/share-modal.component.less

@@ -3,7 +3,7 @@
 .share-modal {
   position: absolute;
   max-width: 400px;
-  height: 450px;
+  height: 480px;
   top: 70px;
   left: 0;
   right: 0;

client/app/devices/tooltip.component.js

@@ -58,7 +58,7 @@ const tooltipComponent = {
   controllerAs: 'tooltip',
   /* @ngInject */
   controller ($element, $rootScope, $scope, socketService, EVENTS) {
-    Object.assign(this.options, this.options.tooltip)
+    Object.assign(this.options, { direction: 'top', distance: 100 }, this.options.tooltip)
 
     $scope.$watch(() => {
       return this.value

client/app/settings/device-config.component.js

@@ -138,7 +138,7 @@ const deviceConfig = {
             let tooltipOrWidget
             if (this.config.sensors[sensor.text].widget) {
               tooltipOrWidget = 'widget'
-            } else if (this.config.sensors[sensor.text].tooltip) {
+            } else if (this.config.sensors[sensor.text].tooltip || (sensor.top && sensor.left)) {
               tooltipOrWidget = 'tooltip'
             }
             if (tooltipOrWidget) {

client/app/settings/image-upload.component.js

@@ -17,7 +17,8 @@ const imageUploadComponent = {
                ngf-select ngf-drop
                ngf-drag-over-class="{pattern: 'image/*', accept:'accept', reject:'reject', delay:100}"
                ngf-accept="'image/*'" accept="image/*">
-               Select or Drop Image
+               <span>Click to select or Drop Image</span>
+               <img ng-show="imageUpload.newFile" ngf-src="imageUpload.newFile"/>
           </div>
           <div class="buttons">
             <button class="button" ng-disabled="!imageUpload.newFile" ng-click="imageUpload.uploadImage()">Upload</button>
@@ -49,12 +50,16 @@ const imageUploadComponent = {
     }
 
     this.uploadImage = () => {
-      Upload.base64DataUrl(this.newFile)
-        .then(settingsService.uploadImage)
-        .then((response) => {
-          this.image = response.imageUrl
-          this.closeModal()
-        })
+      Upload.upload({
+        url: '/api/images',
+        data: {
+          file: this.newFile
+        }
+      })
+      .then((response) => {
+        this.image = response.data.imageUrl
+        this.closeModal()
+      })
     }
 
     this.applyImage = () => {

client/app/settings/image-upload.component.less

@@ -37,13 +37,15 @@ image-upload {
   }
 
   .drop-box {
+    position: relative;
     background: #F8F8F8;
     border: 2px dashed #DDD;
     width: 170px;
     text-align: center;
     padding: 50px 10px;
     margin: 10px auto;
     cursor: pointer;
+    overflow: hidden;
 
     &.accept {
       border-color: @navy-blue;
@@ -52,6 +54,17 @@ image-upload {
     &.reject {
       border-color: @error-color;
     }
+
+    img {
+      position: absolute;
+      max-width: 100%;
+      max-height: 100%;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      margin: auto;
+    }
   }
 
   .input-field {

client/app/settings/settings.service.js

@@ -29,19 +29,6 @@ function settingsFactory ($log, $http, utils) {
         $log.error('settingsService#getOriginalDeviceConfig error:', err)
         throw err
       })
-    },
-
-    uploadImage (deviceImage) {
-      return $http({
-        method: 'POST',
-        url: '/api/upload',
-        data: { deviceImage }
-      })
-      .then((res) => res.data || {})
-      .catch((err) => {
-        $log.error('settingsService#uploadImage error:', err)
-        throw err
-      })
     }
   }
 

client/index.html

@@ -6,6 +6,7 @@
     <title>simulator</title>
     <script src="/script/config.js" charset="utf-8"></script>
     <script src="//vmss.boldchat.com/aid/461159850398350203/bc.vms4/vms.js" charset="utf-8" async="true"></script>
+    <script src="https://cdn.firebase.com/js/client/2.4.2/firebase.js"></script>
   </head>
   <body>
     <navigation-bar></navigation-bar>

config/devices/devices.js

@@ -38,7 +38,7 @@ const filterRule = (latestValue, sensors) => {
 
 const config = {
   general: {
-    hiddenChannels: ['sensor', 'control'],
+    hiddenChannels: ['sensor', 'control', 'lock', 'token'],
     excludedDeviceInfoFields: [
       'Created',
       'CreatedById',
@@ -379,66 +379,6 @@ const config = {
       }
     }
   },
-  Jacket: {
-    image: '/devices/images/jacket.png',
-    width: 510,
-    sensors: {
-      core: {
-        min: 50,
-        max: 100,
-        wiggle: true,
-        unit: '°F',
-        tooltip: {
-          position: {
-            left: 256,
-            top: 475
-          },
-          labelPosition: {
-            top: 12,
-            left: -20
-          },
-          distance: 100,
-          direction: 'top'
-        }
-      },
-      'left-arm': {
-        min: 50,
-        max: 100,
-        wiggle: true,
-        unit: '°F',
-        tooltip: {
-          position: {
-            top: 400,
-            left: 60
-          },
-          labelPosition: {
-            top: 12,
-            left: -20
-          },
-          distance: 100,
-          direction: 'top'
-        }
-      },
-      'right-arm': {
-        min: 50,
-        max: 100,
-        wiggle: true,
-        unit: '°F',
-        tooltip: {
-          position: {
-            top: 400,
-            left: 445
-          },
-          labelPosition: {
-            top: 12,
-            left: -20
-          },
-          distance: 100,
-          direction: 'top'
-        }
-      }
-    }
-  },
   'Solar Panel': {
     image: '/devices/images/solar-panel.png',
     width: 790,
@@ -516,6 +456,26 @@ const config = {
         }
       }
     }
+  },
+  'Door Lock': {
+    image: '/devices/images/smartlock-design_locked.png',
+    width: 800,
+    defaultSensor: 'state',
+    widgets: ['nest'],
+    sensors: {
+      state: {
+        widget: {
+          name: 'nest-display',
+          position: {
+            top: 450,
+            left: 400
+          }
+        },
+        min: 0,
+        max: 1,
+        wiggle: true
+      }
+    }
   }
 }
 

config/devices/widgets/nest-display/index.js

@@ -0,0 +1,3 @@
+const nestDisplayComponent = require('./nest-display.component.js')
+
+module.exports = nestDisplayComponent