Geekly Articles each Day
📜 ⬆️ ⬇️

Web-based devices



Author: Nikolay Khabarov, IoT Google Developer Expert, Embedded Systems Expert, DataArt.

In this article I will tell you how to create your own device with a web interface that will be available on the local network. The web interface will display the current data from the Si7021 sensor: temperature and humidity.
')
The device works on the basis of the ESP8266 microcontroller (with Wi-Fi ) and DeviceHive firmware.

1. Install and configure firmware


First of all, you need to upload the DeviceHive firmware to the debug board. You can use any ESP8266 card with 4 Mbit flash memory (for example, with an ESP-12E module). Quite popular motherboards are the NodeMCU Development Kit and the Adafruit HUZZAH ESP8266 Breakout .

You can use these or any other board with similar characteristics. For example, we took NodeMCU devkit , since this is the easiest way to use the ESP8266 chip.

  1. Download the latest binary firmware release from GitHub.
  2. Unzip the downloaded archive.
  3. Connect the NodeMCU to the computer using a Micro USB cable (for some operating systems, you may need to install drivers).
  4. Run the esp-flasher (from the archive for your OS) to install the firmware.

The NodeMCU does not need to use any buttons or connectors to install the firmware.

The following screenshot illustrates successful firmware upload:


After installing the firmware, reboot the board (to do this, reconnect the board via the USB port). If the firmware is flooded for the first time, a blue LED should light up on the module. If the firmware has already been installed before, three times slowly press the RESET button on the module, the blue LED should turn on.



Then take a mobile phone or laptop (with Wi-Fi) and connect to the open wireless network DeviceHive .

The microcontroller settings dialog should appear on the screen automatically (otherwise, use this link in the browser).

In the dialog box, specify the Wi-Fi network name ( SSID ) and password. In the DeviceID field, enter climate - this ID will serve as the domain address for the device’s web interface.

Leave blank: DeviceHipe API URL and Key .

If the key has been entered (the Key field), authorization will be required in the web interface (for simplicity of presentation and the code in the article, we do not consider this case).

An example of the settings dialog is shown below:



After applying the settings ( Apply button), connect any device with a web browser and mDNS support (for Windows OS, mDNS support can be added through a third-party application, for example, you can use this application ).

If mDNS is not available, use the microcontroller’s IP address instead of the local URL.

Open a web browser at this link: http: //climate.local . The web browser should display the default page.



2. Sensor connection


Since the Si7021 sensor uses the I2C interface , it is connected to the board via four wires. The firmware allows you to use any GPIO connectors (for I2C SDA and SCL lines). Thus, the sensor can be connected very simply.

Connect the sensor as shown in the photo:



You can also use the connecting wires (for surface mounting) to connect the sensor to the board (as shown in the photo).



Note that the NodeMCU board pins are marked with the prefix D. For example, the D5 marking corresponds to the GPIO14 pin of the ESP8266 microcontroller, and the D6 corresponds to the GPIO12 pin of the ESP8266 microcontroller.

3. Software


Now it's time to develop a custom web interface for our device. We have already mentioned that the firmware has a web page ( http: //climate.local ). There is a very simple web server with a help page, demo pages and a RESTful API. We have a great opportunity to load a custom web page into flash memory and use our device with our own custom web interface.

Below we provide the code that will allow you to read and display sensor data.

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Climate</title>
<script src="libs.js"></script>
<script>
function read_sensor() {
send_command("devices/si7021/read",
{"SDA": 12, "SCL":14, "address":"0x80"}, null,
function (err, res) {
if(err) {
document.getElementById("t").innerHTML = "ERROR: " + res;
document.getElementById("h").innerHTML = "";
} else {
document.getElementById("t").innerHTML = res["temperature"].toFixed(2);
document.getElementById("h").innerHTML = res["humidity"].toFixed(2);
}
setTimeout(read_sensor, 1000);
});
}
</script>
</head>
<body onload="read_sensor()">
<div class="header">
<a href="/"><div class="devecihive-logo-text"></div></a>
</div>
<div class="content">
<h1>
<div style="display: inline-block; float: left">
<div>Temperature:</div>
<div>Humidity:</div>
</div>
<div style="display: inline-block; padding-left: 20px">
<div id="t"></div>
<div id="h"></div>
</div>
</h1>
</div>
</body>
</html>
view raw index.html hosted with ❤ by GitHub

Although the code is pretty simple, let's still break it down line by line.

Lines 1–6:
File headers, viewport settings for mobile devices, CSS connection and JavaScript import. The embedded microprocessor pages contain CSS and a small JavaScript library. In our example, these resources are used. Source code is available here .

Lines 7–22:
A simple script that runs the send_command () method from the built-in JavaScript library ( libs.js ) in a loop (loop) at intervals of a second. This method performs a simple POST request to the following URL: http: //climate.local/api/devices/si7021/read . This URL is part of the local RESTful API (microprocessor).

The same data can be obtained using a GET request in a regular browser. The answer is given in the form of JSON , which contains sensor data. Temperature and humidity values ​​are mapped to pages using javascript.

Lines 24–40:
The HTML code of the web page itself. Individual page elements, such as the DeviceHive logo, are taken from the inline styles.

Copy the code to the clipboard and open the page editor: http: //climate.local/editor.html .

Paste the code in the editor from the clipboard.

Press the Flash button - now our code is included in the microprocessor firmware.

Open the http: //climate.local link on any Wi-Fi DeviceHive device . Sensor data will be displayed on the page.



Conclusion


DeviceHive firmware allows you to create simple devices connected to the cloud. In addition, you can easily add a local web interface that can be used both separately and together with the connection to the cloud service. The content of this page can be arbitrary. You can add third-party components to the page (for example, D3.js ), as was done in this example , or display data from several sensors on a local network.

Detailed documentation on DeviceHive firmware is available at this link .

Source: https://habr.com/ru/post/351150/

More articles:


All Articles