Construire un thermomètre Arduino connecté au web avec capteur DS18B20

Composants et fournitures

Arduino UNO	×	1
PHPoC WiFi Shield pour Arduino (ou PHPoC Shield)	×	1
Capteur de température Adafruit DS18B20	×	1
Résistance 4,7 kΩ (Seeed)	×	1
Tube thermorétractable	×	1

À propos de ce projet

Si vous êtes débutant, vous pouvez apprendre les bases du WiFi et des capteurs avec Arduino grâce aux tutoriels sur le WiFi Arduino et le capteur de température DS18B20. J'ai réalisé un projet similaire en utilisant uniquement PHPoC.

Démonstration

Le système affiche la température en temps réel dans un navigateur web via une interface graphique interactive.

Flux de données

Arduino → PHPoC WiFi Shield → Navigateur web

L'Arduino lit la température du capteur et envoie la valeur au PHPoC WiFi Shield. Ce dernier la transmet au navigateur via WebSocket. Une fonction JavaScript visualise la température sur l'interface utilisateur.

Note importante : Le shield PHPoC intègre un programme natif pour relayer les données de l'Arduino vers le navigateur. Vous n'avez donc pas à vous en soucier.

Étapes à suivre

• Configurer les informations WiFi pour le shield PHPoC (SSID et mot de passe)
• Téléverser la nouvelle interface utilisateur sur le shield PHPoC
• Écrire le code Arduino

Configuration WiFi du shield PHPoC

Suivez cette instruction.

Téléversement de l'interface web sur le shield PHPoC

• Téléchargez le code source PHPoC remote_thermometer.php (dans la section code).
• Téléversez-le sur le shield PHPoC via PHPoC Debugger selon cette procédure.

Écriture du code Arduino

• Installez trois bibliothèques : PHPoC Library for Arduino, OneWire et Dallas Temperature (voir instructions).
• Téléversez le code Arduino (section code) sur la carte.

Test

• Ouvrez le moniteur série dans l'IDE Arduino pour voir l'adresse IP.
• Dans un navigateur, saisissez https:// remplacez_par_adresse_IP /remote_thermometer.php
• Cliquez sur le bouton "Connecter" et testez.

Meilleur kit de démarrage Arduino pour débutant

Si vous cherchez un kit Arduino, consultez Le meilleur kit Arduino pour débutants.

Références des fonctions

• Serial.begin()
• Serial.println()
• delay()
• millis()
• for loop
• while loop
• if else
• loop()
• setup()
• String.toInt()
• String.substring()
• String.indexOf()
• String.remove()
• String.equals()

Code

Code Arduino

#include <OneWire.h>
#include <DallasTemperature.h>
#include "SPI.h"
#include "Phpoc.h"

// Broche de données sur le port 8
OneWire oneWire(8);
DallasTemperature sensors(&oneWire);
PhpocServer server(80);
boolean alreadyConnected = false;

void setup() {
  Serial.begin(9600);
  while(!Serial);
  sensors.begin();
  Phpoc.begin(PF_LOG_SPI | PF_LOG_NET);
  server.beginWebSocket("thermometer");
  Serial.print("Adresse serveur WebSocket : ");
  Serial.println(Phpoc.localIP());
}

void loop() {
  PhpocClient client = server.available();
  if (client) {
    sensors.requestTemperatures();
    float temp = sensors.getTempCByIndex(0);
    String txtMsg = String(temp) + "\r\n";
    char buf[txtMsg.length()];
    txtMsg.toCharArray(buf, txtMsg.length());
    server.write(buf, txtMsg.length());
    delay(300);
  }
}

remote_thermometer.php (PHP)

Ce fichier fournit l'interface utilisateur web. Téléversez-le sur le shield PHPoC WiFi ou PHPoC selon les instructions décrites.

<!DOCTYPE html>
<html>
<head>
<title>Arduino - PHPoC Shield - Thermomètre</title>
<meta name="viewport" content="width=device-width, initial-scale=0.7, maximum-scale=0.7">
<meta charset="utf-8">
<style>
  body { text-align: center; font-size: width/2pt; }
  h1 { font-weight: bold; font-size: width/2pt; }
  h2 { font-weight: bold; font-size: width/2pt; }
  button { font-weight: bold; font-size: width/2pt; }
</style>
<script>
  var canvas_width = 200, canvas_height = 450;
  var ws;
  var buffer = "";
  
  function init() {
    var canvas = document.getElementById("remote");
    canvas.width = canvas_width;
    canvas.height = canvas_height;
    var ctx = canvas.getContext("2d");
    ctx.translate(canvas_width/2, canvas_height - 80);
    update_view(0);
  }
  
  function connect_onclick() {
    if(ws == null) {
      var ws_host_addr = "";
      if((navigator.platform.indexOf("Win") != -1) && (ws_host_addr.charAt(0) == "[")) {
        ws_host_addr = ws_host_addr.replace(/[\[\]]/g, '');
        ws_host_addr = ws_host_addr.replace(/:/g, "-");
        ws_host_addr += ".ipv6-literal.net";
      }
      ws = new WebSocket("ws://" + ws_host_addr + "/thermometer", "text.phpoc");
      document.getElementById("ws_state").innerHTML = "CONNEXION";
      ws.onopen = ws_onopen;
      ws.onclose = ws_onclose;
      ws.onmessage = ws_onmessage;
    } else {
      ws.close();
    }
  }
  
  function ws_onopen() {
    document.getElementById("ws_state").innerHTML = "<font color='blue'>CONNECTÉ</font>";
    document.getElementById("bt_connect").innerHTML = "Déconnecter";
    ws.send("B\r\n");
    update_view(0);
  }
  
  function ws_onclose() {
    document.getElementById("ws_state").innerHTML = "<font color='gray'>FERMÉ</font>";
    document.getElementById("bt_connect").innerHTML = "Connecter";
    ws.onopen = null;
    ws.onclose = null;
    ws.onmessage = null;
    ws = null;
    update_view(0);
  }
  
  function ws_onmessage(e_msg) {
    e_msg = e_msg || window.event;
    console.log(e_msg.data);
    update_view(parseFloat(e_msg.data));
  }
  
  function update_view(temp) {
    var canvas = document.getElementById("remote");
    var ctx = canvas.getContext("2d");
    var radius = 70;
    var offset = 5;
    var width = 45;
    var height = 330;
    
    ctx.clearRect(-canvas_width/2, -350, canvas_width, canvas_height);
    
    if(ws != null) {
      ctx.strokeStyle = "blue";
      ctx.fillStyle = "blue";
    } else {
      ctx.strokeStyle = "Gray";
      ctx.fillStyle = "Gray";
    }
    
    // Graduations 5°
    var x = -width/2;
    ctx.lineWidth = 2;
    for (var i = 0; i <= 100; i+=5) {
      var y = -(height - radius)*i/100 - radius - 5;
      ctx.beginPath();
      ctx.lineTo(x, y);
      ctx.lineTo(x - 20, y);
      ctx.stroke();
    }
    
    // Graduations 20°
    ctx.lineWidth = 5;
    for (var i = 0; i <= 100; i+=20) {
      var y = -(height - radius)*i/100 - radius - 5;
      ctx.beginPath();
      ctx.lineTo(x, y);
      ctx.lineTo(x - 25, y);
      ctx.stroke();
      ctx.font = "20px Georgia";
      ctx.textBaseline = "middle";
      ctx.textAlign = "right";
      ctx.fillText(i.toString(), x - 35, y);
    }
    
    // Forme du thermomètre
    ctx.lineWidth = 16;
    ctx.beginPath();
    ctx.arc(0, 0, radius, 0, 2 * Math.PI);
    ctx.stroke();
    ctx.beginPath();
    ctx.rect(-width/2, -height, width, height);
    ctx.stroke();
    ctx.beginPath();
    ctx.arc(0, -height, width/2, 0, 2 * Math.PI);
    ctx.stroke();
    
    // Remplissage fond
    ctx.fillStyle = "#e6e6ff";
    ctx.beginPath();
    ctx.arc(0, 0, radius, 0, 2 * Math.PI);
    ctx.fill();
    ctx.beginPath();
    ctx.rect(-width/2, -height, width, height);
    ctx.fill();
    ctx.beginPath();
    ctx.arc(0, -height, width/2, 0, 2 * Math.PI);
    ctx.fill();
    
    // Niveau température
    if(ws != null) ctx.fillStyle = "#ff1a1a";
    else ctx.fillStyle = "Gray";
    
    ctx.beginPath();
    ctx.arc(0, 0, radius - offset, 0, 2 * Math.PI);
    ctx.fill();
    
    temp = Math.round(temp);
    var y = (height - radius)*temp/100.0 + radius + 5;
    ctx.beginPath();
    ctx.rect(-width/2 + offset, -y, width - 2*offset, y);
    ctx.fill();
    
    if(ws != null) {
      ctx.fillStyle = "white";
      ctx.font = "bold 34px Georgia";
      ctx.textBaseline = "middle";
      ctx.textAlign = "center";
      ctx.fillText(temp.toString() + "°C", 0, 0);
    }
  }
  
  window.onload = init;
</script>
</head>
<body>
<p>
<h1>Arduino - Thermomètre Web</h1>
</p>
<canvas id="remote"></canvas>
<h2>
<p> WebSocket : <span id="ws_state">null</span> </p>
<button id="bt_connect" type="button" onclick="connect_onclick();">Connecter</button>
</h2>
</body>
</html>

Schémas

1. Empilez le shield PHPoC WiFi ou PHPoC sur l'Arduino
2. Câblez selon l'image ci-dessous