Merge pull request #31 from Azure-Samples/drwill/deviceCount

Show device count and update style
Azure-Samples · Sep 10, 2019 · b3382fd · b3382fd
2 parents 02a0ac8 + ea69fce
commit b3382fd
Show file tree

Hide file tree

Showing 5 changed files with 69 additions and 32 deletions.
diff --git a/.gitignore b/.gitignore
@@ -36,4 +36,6 @@ jspm_packages
 # Optional REPL history
 .node_repl_history
 
-**/.vs/*
+**/.vs/*
+
+**/.vscode/*
diff --git a/README.md b/README.md
@@ -15,18 +15,11 @@ This repo contains code for a web application, which can read temperature and hu
 
 ## Browser compatiblity
 
-| Browser | Least Version |
+| Browser | Verified version |
 | --- | --- |
-| IE | 10 |
-| Edge | 14 |
-| Firefox | 50 |
-| Chrome | 49 |
-| Safari | 10 |
-| Opera | 43 |
-| iOS Safari | 9.3 |
-| Opera Mini | ALL |
-| Android Browser | 4.3 |
-| Chrome for Android | 56 |
+| Edge | 44 |
+| Chrome | 76 |
+| Firefox | 69 |
 
 This tutorial shows how to set up a nodejs website to visualize device data streaming to an [Azure IoT Hub](https://azure.microsoft.com/en-us/services/iot-hub) using the [event hub SDK](https://www.npmjs.com/package/@azure/event-hubs). In this tutorial, you learn how to:
 
@@ -79,7 +72,7 @@ Public/index.html handles the UI layout for the web page, and references the nec
 1. To pass parameters to the website, you may use environment variables or parameters.
     - Open a command prompt or PowerShell terminal and set the environment variables **IotHubConnectionString** and **EventHubConsumerGroup**.
 
-        > Syntax for Windows command prompt is `set key=value`, PowerShell is `$env:key="value"`, and Linux shell is `key=value`.
+        > Syntax for Windows command prompt is `set key=value`, PowerShell is `$env:key="value"`, and Linux shell is `export key="value"`.
 
     - Or, if you are debugging with [VS Code](https://code.visualstudio.com/docs/nodejs/nodejs-debugging), you can edit the launch.json file and add these values in the env property.
 

diff --git a/public/css/style.css b/public/css/style.css
@@ -1,9 +1,46 @@
 body {
-  padding: 50px;
   font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
+  padding: 50px;
   margin: 0;
+  text-align: center;
+}
+
+.flexHeader {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  justify-content: space-between;
 }
 
 a {
   color: #00B7FF;
-}
+}
+
+body select {
+  padding: 10px 70px 10px 13px;
+  max-width: 100%;
+  height: auto;
+  border: 1px solid #e3e3e3;
+  border-radius: 3px;
+  background: url("https://i.ibb.co/b7xjLrB/selectbox-arrow.png") right center no-repeat;
+  background-color: #fff;
+  color: #444444;
+  line-height: 16px;
+  appearance: none;
+  /* this is must */ -webkit-appearance: none;
+  -moz-appearance: none;
+}
+
+/* body select.select_box option */
+body select option {
+  padding: 0 4px;
+}
+
+/* for Edge */
+select::-ms-expand {
+  display: none;
+}
+
+select:disabled::-ms-expand {
+  background: #f60;
+}
diff --git a/public/index.html b/public/index.html
@@ -10,19 +10,20 @@
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/Chart.min.js" type="text/javascript" charset="utf-8"></script>
     <script src="js/chart-device-data.js" type="text/javascript" charset="utf-8"></script>
     <link href="css/style.css" rel="stylesheet" />
-    
+
     <title>Temperature &amp; Humidity Real-time Data</title>
 </head>
 
 <body>
-    <div style="display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-content: stretch;">
-        <div  style="align-self: center; flex: 2 2 200px;">
-            <h4>Select a device:</h4>
-            <select id="listOfDevices" size=10 style="width: 180px;"></select>
-        </div>
-        <div style="align-self: top; flex: 8 8 800px; min-height: 500px;">
-            <canvas id="iotChart" width="400" height="150"></canvas>
-        </div>
+    <h1 class="flexHeader">
+        <span>
+            <span id="deviceCount">0 devices</span>
+            <select id="listOfDevices" class="select_box"></select>
+        </span>
+        <span>Temperature & Humidity Real-time Data</span>
+    </h1>
+    <div>
+        <canvas id="iotChart"></canvas>
     </div>
 </body>
 

diff --git a/public/js/chart-device-data.js b/public/js/chart-device-data.js
@@ -45,6 +45,10 @@ $(document).ready(() => {
 
       return undefined;
     }
+
+    getDevicesCount() {
+      return this.devices.length;
+    }
   }
 
   const trackedDevices = new TrackedDevices();
@@ -78,11 +82,6 @@ $(document).ready(() => {
   };
 
   const chartOptions = {
-    title: {
-      display: true,
-      text: 'Ambient Temperature & Humidity Real-time Data',
-      fontSize: 36,
-    },
     scales: {
       yAxes: [{
         id: 'Temperature',
@@ -117,6 +116,8 @@ $(document).ready(() => {
 
   // Manage a list of devices in the UI, and update which device data the chart is showing
   // based on selection
+  let needsAutoSelect = true;
+  const deviceCount = document.getElementById('deviceCount');
   const listOfDevices = document.getElementById('listOfDevices');
   function OnSelectionChange() {
     const device = trackedDevices.findDevice(listOfDevices[listOfDevices.selectedIndex].text);
@@ -137,8 +138,8 @@ $(document).ready(() => {
       const messageData = JSON.parse(message.data);
       console.log(messageData);
 
-      // time and temperature are required
-      if (!messageData.MessageDate || !messageData.IotData.temperature) {
+      // time and either temperature or humidity are required
+      if (!messageData.MessageDate || (!messageData.IotData.temperature && !messageData.IotData.humidity)) {
         return;
       }
 
@@ -150,6 +151,8 @@ $(document).ready(() => {
       } else {
         const newDeviceData = new DeviceData(messageData.DeviceId);
         trackedDevices.devices.push(newDeviceData);
+        const numDevices = trackedDevices.getDevicesCount();
+        deviceCount.innerText = numDevices === 1 ? `${numDevices} device` : `${numDevices} devices`;
         newDeviceData.addData(messageData.MessageDate, messageData.IotData.temperature, messageData.IotData.humidity);
 
         // add device to the UI list
@@ -159,7 +162,8 @@ $(document).ready(() => {
         listOfDevices.appendChild(node);
 
         // if this is the first device being discovered, auto-select it
-        if (listOfDevices.selectedIndex === -1) {
+        if (needsAutoSelect) {
+          needsAutoSelect = false;
           listOfDevices.selectedIndex = 0;
           OnSelectionChange();
         }