Skip to content
This repository was archived by the owner on Nov 16, 2023. It is now read-only.

Commit b3382fd

Browse files
author
David R. Williamson
authored
Merge pull request #31 from Azure-Samples/drwill/deviceCount
Show device count and update style
2 parents 02a0ac8 + ea69fce commit b3382fd

File tree

5 files changed

+69
-32
lines changed

5 files changed

+69
-32
lines changed

‎.gitignore‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,4 +36,6 @@ jspm_packages
3636
# Optional REPL history
3737
.node_repl_history
3838

39-
**/.vs/*
39+
**/.vs/*
40+
41+
**/.vscode/*

‎README.md‎

Lines changed: 5 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -15,18 +15,11 @@ This repo contains code for a web application, which can read temperature and hu
1515

1616
## Browser compatiblity
1717

18-
| Browser | Least Version |
18+
| Browser | Verified version |
1919
| --- | --- |
20-
| IE | 10 |
21-
| Edge | 14 |
22-
| Firefox | 50 |
23-
| Chrome | 49 |
24-
| Safari | 10 |
25-
| Opera | 43 |
26-
| iOS Safari | 9.3 |
27-
| Opera Mini | ALL |
28-
| Android Browser | 4.3 |
29-
| Chrome for Android | 56 |
20+
| Edge | 44 |
21+
| Chrome | 76 |
22+
| Firefox | 69 |
3023

3124
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:
3225

@@ -79,7 +72,7 @@ Public/index.html handles the UI layout for the web page, and references the nec
7972
1. To pass parameters to the website, you may use environment variables or parameters.
8073
- Open a command prompt or PowerShell terminal and set the environment variables **IotHubConnectionString** and **EventHubConsumerGroup**.
8174

82-
> Syntax for Windows command prompt is `set key=value`, PowerShell is `$env:key="value"`, and Linux shell is `key=value`.
75+
> Syntax for Windows command prompt is `set key=value`, PowerShell is `$env:key="value"`, and Linux shell is `export key="value"`.
8376
8477
- 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.
8578

‎public/css/style.css‎

Lines changed: 39 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,46 @@
11
body {
2-
padding: 50px;
32
font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
3+
padding: 50px;
44
margin: 0;
5+
text-align: center;
6+
}
7+
8+
.flexHeader {
9+
display: flex;
10+
flex-direction: row;
11+
flex-wrap: nowrap;
12+
justify-content: space-between;
513
}
614

715
a {
816
color: #00B7FF;
9-
}
17+
}
18+
19+
body select {
20+
padding: 10px 70px 10px 13px;
21+
max-width: 100%;
22+
height: auto;
23+
border: 1px solid #e3e3e3;
24+
border-radius: 3px;
25+
background: url("https://i.ibb.co/b7xjLrB/selectbox-arrow.png") right center no-repeat;
26+
background-color: #fff;
27+
color: #444444;
28+
line-height: 16px;
29+
appearance: none;
30+
/* this is must */ -webkit-appearance: none;
31+
-moz-appearance: none;
32+
}
33+
34+
/* body select.select_box option */
35+
body select option {
36+
padding: 0 4px;
37+
}
38+
39+
/* for Edge */
40+
select::-ms-expand {
41+
display: none;
42+
}
43+
44+
select:disabled::-ms-expand {
45+
background: #f60;
46+
}

‎public/index.html‎

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -10,19 +10,20 @@
1010
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0/dist/Chart.min.js" type="text/javascript" charset="utf-8"></script>
1111
<script src="js/chart-device-data.js" type="text/javascript" charset="utf-8"></script>
1212
<link href="css/style.css" rel="stylesheet" />
13-
13+
1414
<title>Temperature &amp; Humidity Real-time Data</title>
1515
</head>
1616

1717
<body>
18-
<div style="display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-content: stretch;">
19-
<div style="align-self: center; flex: 2 2 200px;">
20-
<h4>Select a device:</h4>
21-
<select id="listOfDevices" size=10 style="width: 180px;"></select>
22-
</div>
23-
<div style="align-self: top; flex: 8 8 800px; min-height: 500px;">
24-
<canvas id="iotChart" width="400" height="150"></canvas>
25-
</div>
18+
<h1 class="flexHeader">
19+
<span>
20+
<span id="deviceCount">0 devices</span>
21+
<select id="listOfDevices" class="select_box"></select>
22+
</span>
23+
<span>Temperature & Humidity Real-time Data</span>
24+
</h1>
25+
<div>
26+
<canvas id="iotChart"></canvas>
2627
</div>
2728
</body>
2829

‎public/js/chart-device-data.js‎

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,10 @@ $(document).ready(() => {
4545

4646
return undefined;
4747
}
48+
49+
getDevicesCount() {
50+
return this.devices.length;
51+
}
4852
}
4953

5054
const trackedDevices = new TrackedDevices();
@@ -78,11 +82,6 @@ $(document).ready(() => {
7882
};
7983

8084
const chartOptions = {
81-
title: {
82-
display: true,
83-
text: 'Ambient Temperature & Humidity Real-time Data',
84-
fontSize: 36,
85-
},
8685
scales: {
8786
yAxes: [{
8887
id: 'Temperature',
@@ -117,6 +116,8 @@ $(document).ready(() => {
117116

118117
// Manage a list of devices in the UI, and update which device data the chart is showing
119118
// based on selection
119+
let needsAutoSelect = true;
120+
const deviceCount = document.getElementById('deviceCount');
120121
const listOfDevices = document.getElementById('listOfDevices');
121122
function OnSelectionChange() {
122123
const device = trackedDevices.findDevice(listOfDevices[listOfDevices.selectedIndex].text);
@@ -137,8 +138,8 @@ $(document).ready(() => {
137138
const messageData = JSON.parse(message.data);
138139
console.log(messageData);
139140

140-
// time and temperature are required
141-
if (!messageData.MessageDate || !messageData.IotData.temperature) {
141+
// time and either temperature or humidity are required
142+
if (!messageData.MessageDate || (!messageData.IotData.temperature && !messageData.IotData.humidity)) {
142143
return;
143144
}
144145

@@ -150,6 +151,8 @@ $(document).ready(() => {
150151
} else {
151152
const newDeviceData = new DeviceData(messageData.DeviceId);
152153
trackedDevices.devices.push(newDeviceData);
154+
const numDevices = trackedDevices.getDevicesCount();
155+
deviceCount.innerText = numDevices === 1 ? `${numDevices} device` : `${numDevices} devices`;
153156
newDeviceData.addData(messageData.MessageDate, messageData.IotData.temperature, messageData.IotData.humidity);
154157

155158
// add device to the UI list
@@ -159,7 +162,8 @@ $(document).ready(() => {
159162
listOfDevices.appendChild(node);
160163

161164
// if this is the first device being discovered, auto-select it
162-
if (listOfDevices.selectedIndex === -1) {
165+
if (needsAutoSelect) {
166+
needsAutoSelect = false;
163167
listOfDevices.selectedIndex = 0;
164168
OnSelectionChange();
165169
}

0 commit comments

Comments
 (0)