Web-fähiges Arduino-Thermometer mit DS18B20-Sensor bauen

Komponenten und Zubehör

Arduino UNO	×	1
PHPoC WiFi Shield für Arduino (alternativ PHPoC Shield)	×	1
Adafruit DS18B20 Temperatursensor	×	1
Seeed 4,7 kΩ Widerstand	×	1
Schrumpfschlauch	×	1

Über dieses Projekt

Als Einsteiger können Sie in den Tutorials WLAN und Arduino sowie DS18B20 Temperatursensor Grundlagen erlernen. Ein ähnliches Projekt ausschließlich mit PHPoC finden Sie hier.

Demo

Eine Live-Demonstration zeigt das fertige Web-Thermometer im Browser.

Datenfluss

Arduino → PHPoC WiFi Shield → Webbrowser

Der Arduino liest die Temperatur vom Sensor und sendet den Wert an das PHPoC WiFi Shield. Dieses leitet die Daten per WebSocket an den Browser weiter, wo JavaScript die Temperatur visualisiert.

Hinweis: Das PHPoC Shield besitzt ein integriertes Programm zur Datenweiterleitung von Arduino zum Browser – Sie müssen sich darum nicht kümmern.

Was zu tun ist

• WLAN-Informationen für das PHPoC Shield einrichten (SSID und Passwort)
• Neue Web-UI auf das PHPoC Shield hochladen
• Arduino-Code schreiben

WLAN-Informationen für PHPoC Shield einrichten

Folgen Sie dieser Anleitung.

Neue Web-UI auf PHPoC Shield hochladen

• Laden Sie den PHPoC-Quellcode remote_thermometer.php (im Code-Bereich) herunter.
• Laden Sie ihn gemäß dieser Anleitung mit dem PHPoC Debugger auf das Shield.

Arduino-Code schreiben

• Installieren Sie drei Bibliotheken: PHPoC Library für Arduino, OneWire und Dallas Temperature.
• Laden Sie den Arduino-Code (im Code-Bereich) auf den Arduino hoch.

Testen

• Öffnen Sie den Seriellen Monitor in der Arduino IDE, um die IP-Adresse anzuzeigen.
• Geben Sie im Browser https:// IP-Adresse_einfügen /remote_thermometer.php ein.
• Klicken Sie auf „Verbinden“ und testen Sie die Anzeige.

Das beste Arduino-Starterkit für Einsteiger

Suchen Sie ein passendes Kit? Sehen Sie sich das beste Arduino-Kit für Anfänger an.

Funktionsreferenzen

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

Code

Arduino-Code

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

// Datenleitung an Pin 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("WebSocket-Server-Adresse: ");
  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 (Web-UI)

Diese Datei stellt die Benutzeroberfläche bereit. Laden Sie sie gemäß Anleitung auf das PHPoC WiFi Shield oder PHPoC Shield hoch.

<!DOCTYPE html>
<html>
<head>
<title>Arduino - PHPoC Shield - Thermometer</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 = "VERBINDET";
    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'>VERBUNDEN</font>";
  document.getElementById("bt_connect").innerHTML = "Trennen";
  ws.send("B\r\n");
  update_view(0);
}
function ws_onclose() {
  document.getElementById("ws_state").innerHTML = "<font color='gray'>GETRENNT</font>";
  document.getElementById("bt_connect").innerHTML = "Verbinden";
  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, offset = 5, width = 45, 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"; }
  // Skalierung zeichnen (5er und 20er Schritte)
  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();
  }
  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);
  }
  // Thermometer-Grafik
  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();
  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();
  // Temperaturanzeige
  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>
<h1>Arduino - Web-Thermometer</h1>
<canvas id="remote"></canvas>
<h2>
  WebSocket: <span id="ws_state">null</span>
  <button id="bt_connect" type="button" onclick="connect_onclick()">Verbinden</button>
</h2>
</body>
</html>

Schaltplan

1. PHPoC WiFi Shield oder PHPoC Shield auf den Arduino stecken.
2. Verdrahtung gemäß Abbildung durchführen.

(Bilder im Originalprojekt verfügbar)