Temperature and Humidity Sensor to HTML using JavaScript gauges

1. Description

This is a slightly variation of the setup in the previous post (Sensor Reading Part 2: Temperature and Humidity Sensor to HTML). Readings from a DHT11 temperature and humidity sensor are periodically sent to the client’s browser and displayed using JavaScript gauges. The webpage is hosted on a SD card, data refresh in the client browser is performed through AJAX and XML.

Difficulty level: intermediate.

This is the third part of the Sensor Reading tutorial:

– Sensor Reading Part 1: Temperature and Humidity Sensor to Serial Monitor
– Sensor Reading Part 2: Temperature and Humidity Sensor to HTML
– Sensor Reading Part 3: Temperature and Humidity Sensor to HTML using JavaScript gauges

Related project: Remote Sensor (Temperature and Humidity) Monitoring over RF Link

2. Parts

– 1 x Arduino Uno R3;
– 1 x Arduino Ethernet shield (W5100);
– 1 x DHT11;
– 1 x micro-SD card;
– Breadboard + wires.

3. Schematics

(click to enlarge)

4. Assembly (breadboard)

(click to enlarge)

5. Code

The code implements a minimalist web server. It hosts a single web page (stored and loaded from the SD card) used to display useful data (sensor readings + computed values). The webpage data is updated using AJAX; an XML file containing the values to display is periodically sent from the Arduino to the client web browser. Data is displayed using JavaScript gauges.

Note. The Gauge component is written by Mykhailo Stadnyk (ref. https://github.com/Mikhus/canvas-gaugeshttps://wwvalue.com/web-dev/pure-javascript-html5-canvas-gauge-canvgauge)

index.htm – to be placed in the mini-SD card:


gaugeDHT11.ino – to be uploaded to Arduino:

Note. In order to avoid SRAM memory saturation, static strings are stored  in flash memory (usage of “F()” in some Serial.println statements).

6. Demo

7. Additional resources

– Adafruit Unified Sensor Driver:
– DHT-sensor-library:
– SPI, Ethernet and SD standard libraries (included with the Arduino IDE)

– DHT11 datasheet: https://cdn-learn.adafruit.com/downloads/pdf/dht.pdf
– Arduino Ethernet shield (WT5100) datasheet:
– Arduino Ethernet Shield Web Server Tutorial:
– The Gauge component: https://github.com/Mikhus/canvas-gaugeshttps://wwvalue.com/web-dev/pure-javascript-html5-canvas-gauge-canvgauge

Leave a Reply