Een PHP-webinterface bouwen om je Arduino Uno te besturen

Onderdelen en benodigdheden

Arduino UNO	×	1
Arduino Ethernet Shield 2	×	1
DHT11 Temperatuur & Vochtigheidssensor (4 pins)	×	1
2-kanaals Relaismodule	×	4
Minibreadboard	×	1
Vlam-sensor	×	1
MQ4 Gas-sensor (methaan)	×	1
LDR (lichtsgewijs)	×	1
Hygrometersensor (bodemvochtigheid)	×	3
ADSL Routerkabel (Ethernet)	×	1
Stekker (1-polig)	×	7
Stopcontact (1-polig)	×	7
9V Batterij	×	1
9V Batterij-kabel (barrel jack)	×	1

Benodigde tools

Lijmpistool

Apps en online diensten

Apache HTTP Server (of XAMPP)
Notepad++ (code-editor)
Arduino IDE

Over dit project

Update

Mijn nieuwe project TheAmplituhedron.com neemt server-side programming uit handen: je kunt data-pakketten moeiteloos via internet versturen/ontvangen. Ondersteun mijn werk via de website.

Beschrijving

Doel: een professionele website om mijn aquarium en irrigatiesysteem thuis te besturen, en thuisgegevens (temperatuur, vochtigheid, gas, vlam, licht, bodemvocht) op te vragen wanneer ik er niet ben. Ik bouwde het Arduinautomotion-project met 4 PHP-pagina's op mijn Apache localhost:

Arduinautomotion.php – hoofdpagina (besturing + monitoring)
Arduinautomotioncontrol.php – sessie-data opslag
Arduinautomotionformvalue.php – formulierverwerking
Arduinautomotioncommunication.php – communicatie met Arduino

De Arduino Ethernet Shield host een eigen pagina ArduinoSide.php (bereikbaar via gekozen IP) voor de tweerichtingscommunicatie.

Motivatie: tijdens een 2-weken vakantie kon ik mijn aquarium niet beheren (filter uitschakelen tegen te hoge zuurstof, visvoeder activeren). Ik voegde 6 besturingsopties voor aquarium + 1 voor irrigatie toe. Sensoren: DHT11 (temp/vocht), MQ4 (gas), LDR (licht), vlam-sensor, 3× hygrometer (planten).

De website biedt een intuïtieve interface voor data-uitwisseling met Arduino. Kennis van HTML, CSS, JavaScript, PHP, jQuery is vereist voor volledig begrip; de codebestanden staan hieronder.

Opmerking: ik gebruikte Notepad++ voor de webpagina's.

Een PHP-webinterface bouwen om je Arduino Uno te besturen

Data uitwisselen tussen PHP-pagina's

Ik gebruikte HTML-formulieren, PHP POST-methode en $_SESSION voor persistente data tussen pagina's. GET is simpeler maar minder veilig; ik gebruik POST voor interne communicatie, GET voor Arduino-communicatie (HTTP GET is eenvoudiger voor de Ethernet Shield).

Website opzetten op Apache (Localhost)

Apache is efficiënt; XAMPP werkt ook. In mijn geval: AppServ/www/Arduinautomotion.php. Toegang via https://jouwIP/Arduinautomotion.php (mijn localhost IP: 192.168.1.20).

Apache + PHP op Windows handleiding

Localhost benaderen vanaf Android

Windows/MAC verschillen; nuttige link: StackOverflow. Op hetzelfde WiFi-netwerk werkt je lokale IP.

Localhost via WiFi (extern) benaderen

Werkt met extern IP + port forwarding. Alleen gebruiken als je zeker weet wie toegang heeft. Zie StackOverflow en Port Forwarding. ArduinoSide.php bereiken via gekozen IP in Arduino-code.

Arduinautomotion.php – Hoofdpagina

Centrale besturings- en monitoringspagina. Via "Change Menu" schakel je tussen secties (Room, Aquarium, Plant, Guide). Kleurveranderende cirkels tonen sensorwaarden (groen=ok, oranje=optimaal, rood=gevaar) en actuator-status (geel=aan, wit=uit). Bij gevaarswaarden verschijnt een alertbox met Spider-man geluid/video.

1) Room Sectie

Toont alle ruimtedata (temp, vocht, vlam, gas, licht) uit Arduinautomotioncommunication.php.

2) Aquarium Sectie

Formulierkeuzes (pomp, lamp, voeder, verwarming, filter in/uit) worden naar formvalue.php gestuurd, terug via control.php naar hoofdpagina.

3) Plant Sectie

3× hygrometer waarden + irrigatie-systeem activeren. Werkt analoog aan Aquarium.

4) Guide Sectie

Ingebed formvalue.php om formulierkeuzes te herzien, plus uitleg en communicatie-stroomdiagram.

5) Alert Box

Bij gevaarswaarden (bijv. temp <15°C of >40°C, vocht <20% of >75%, vlam <500, gas >700, licht >700, plant >500) verschijnt een modal met Spider-man video/audio ("Spider-sense is tingling") bij herladen.

Arduinautomotioncontrol.php

Ingebed in hoofdpagina. Haalt alle $_SESSION-waarden op van formvalue.php en communication.php. Zorgt voor persistente opslag.

Arduinautomotionformvalue.php

Ontvangt formulierdata van hoofdpagina (POST), slaat op in $_SESSION, stuurt door naar ArduinoSide (via hidden GET-form) en control.php. Toegankelijk via Guide-sectie of apart tabblad.

Arduinautomotioncommunication.php

Ontvangt sensordata van ArduinoSide (GET), slaat op in $_SESSION, stuurt door naar control.php.

ArduinoSide

Wordt gehost door Ethernet Shield op gekozen IP (bijv. https://192.168.1.21). Toont een formulier met verborgen velden voor alle sensorwaarden; knop "Communication" verstuurt naar communication.php.

Aansluitingen

Arduino          DHT11 Module
Pin 2            -------------------------

2 Way Relay (1)
Pin 3            -------------------------
Pin 4            -------------------------

2 Way Relay (2)
Pin 5            -------------------------
Pin 6            -------------------------

2 Way Relay (3)
Pin 7            -------------------------
Pin 8            -------------------------

2 Way Relay (4)
Pin 9            -------------------------

Arduino Ethernet Shield
Pin 10           --------------------------
Pin 11           --------------------------
Pin 12           --------------------------
Pin 13           --------------------------

LDR              AO  --------------------------
Flame Sensor     A1  --------------------------
MQ4 Sensor       A2  --------------------------
Hygrometer (1)   A3  --------------------------
Hygrometer (2)   A4  --------------------------
Hygrometer (3)   A5  --------------------------

De Arduino-code is gebaseerd op het WebServer-voorbeeld uit de Ethernet-bibliotheek, uitgebreid met sensor-uitlezen en commando-uitvoering vanaf de website. Na upload communiceren website en Arduino via LAN/WiFi.

Testvideos (Computer/Android) tonen werkend project. Bewerkt met Filmora (watermerk uit respect).

Codebestanden

Arduinautomotion.php (PHP)
Arduinautomotioncontrol.php (PHP)
Arduinautomotionformvalue.php (PHP)
Arduinautomotioncommunication.php (PHP)
ArduinoSide_Code.ino (Arduino)

Arduinautomotion.php (kernfragment)

<?php session_start(); ?>
<!DOCTYPE html>
<html>
<?php include 'Arduinautomotioncontrol.php'; ?>
<head>
  <link rel="shortcut icon" href="Arduinautomotion.ico" type="image/x-icon">
  <style> ... CSS voor layout, cirkels, animaties, alertbox ... </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script>
    // jQuery voor menu-selectie, iframe-resize
    // JavaScript functie getDataFromArduino() vult SVG-cirkels en meters met $_SESSION waarden
    // openAlert()/closeAlert() voor Spider-man waarschuwing
  </script>
</head>
<body onpageshow="getDataFromArduino()">
  ... SVG met 16 cirkels (sensoren + actuatoren) verbonden met lijnen ...
  ... Menu-selectors (Room, Aquarium, Plant, Guide) met formulieren ...
  ... Alert-box met video/audio ...
</body>
</html>

Arduinautomotioncontrol.php

<?php session_start(); ?>
<!DOCTYPE html>
<html>
<head>
<?php
  $temperatureCelsiusValue = $_SESSION['TemperatureCelsius'];
  $temperatureFahrenheitValue = $_SESSION['TemperatureFahrenheit'];
  $humidityValue = $_SESSION['Humidity'];
  $flamesensorValue = $_SESSION['Flame'];
  $MQ4sensorValue = $_SESSION['MQ4Sensor'];
  $LdrValue = $_SESSION['LDRSensor'];
  $pumpValue = $_SESSION['Airpump'];
  $lampValue = $_SESSION['Lamp'];
  $feedingValue = $_SESSION['Feeding'];
  $heaterValue = $_SESSION['Heater'];
  $filterexValue = $_SESSION['Filterex'];
  $filterinValue = $_SESSION['Filterin'];
  $plant1Value = $_SESSION['Plant1H'];
  $plant2Value = $_SESSION['Plant2H'];
  $plant3Value = $_SESSION['Plant3H'];
  $irrigationValue = $_SESSION['Irrigation'];
?>
</head>
</html>

Arduinautomotionformvalue.php

<?php session_start(); ?>
<!DOCTYPE html>
<html>
<head>
<?php
  $_SESSION['Airpump'] = $_POST["pump"];
  $_SESSION['Lamp'] = $_POST["lamp"];
  $_SESSION['Feeding'] = $_POST["feed"];
  $_SESSION['Heater'] = $_POST["heater"];
  $_SESSION['Filterex'] = $_POST["filterexternal"];
  $_SESSION['Filterin'] = $_POST["filterinternal"];
  $_SESSION['Irrigation'] = $_POST["irrigationsystem"];
?>
<style> ... groene serverpagina styling ... </style>
</head>
<body>
  <div class="serverpage"><h1>Server heeft data ontvangen</h1></div>
  <p>Airpump= <?php echo $_SESSION['Airpump'];?></p><br>
  ... overige velden ...
  <form action="https://192.168.1.21/" method="get" target="_blank">
    <input type="hidden" name="airpump" value="<?php echo $_SESSION['Airpump'];?>">
    ... overige hidden inputs ...
    <input type="submit" value="Send and Get Data" class="subMit">
  </form>
</body>
</html>

Arduinautomotioncommunication.php

<?php session_start(); ?>
<!DOCTYPE html>
<html>
<head>
<?php
  $_SESSION['TemperatureCelsius'] = $_GET["temperatureCelsius"];
  $_SESSION['TemperatureFahrenheit'] = $_GET["temperatureFahrenheit"];
  $_SESSION['Humidity'] = $_GET["humidity"];
  $_SESSION['Flame'] = $_GET["flame"];
  $_SESSION['MQ4Sensor'] = $_GET["MQ4sensor"];
  $_SESSION['LDRSensor'] = $_GET["LDRsensor"];
  $_SESSION['Plant1H'] = $_GET["plant1H"];
  $_SESSION['Plant2H'] = $_GET["plant2H"];
  $_SESSION['Plant3H'] = $_GET["plant3H"];
?>
</head>
<body></body>
</html>

ArduinoSide_Code.ino

#include <SPI.h>
#include <Ethernet.h>
#include "DHT.h"

DHT dht;
byte mac[] = { 0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED };
IPAddress ip(192, 168, 1, 21);
EthernetServer server(80);

int pump = 3, lamp = 4, feed = 5, heater = 6, filterex = 7, filterin = 8, irrigation = 9;
String readString;

void setup() {
  Serial.begin(9600);
  pinMode(pump, OUTPUT); pinMode(lamp, OUTPUT); pinMode(feed, OUTPUT);
  pinMode(heater, OUTPUT); pinMode(filterex, OUTPUT); pinMode(filterin, OUTPUT); pinMode(irrigation, OUTPUT);
  digitalWrite(pump, HIGH); digitalWrite(lamp, HIGH); digitalWrite(feed, HIGH);
  digitalWrite(heater, HIGH); digitalWrite(filterex, HIGH); digitalWrite(filterin, HIGH); digitalWrite(irrigation, HIGH);
  dht.setup(2);
  Ethernet.begin(mac, ip);
  server.begin();
  Serial.print("server is at "); Serial.println(Ethernet.localIP());
}

void loop() {
  delay(dht.getMinimumSamplingPeriod());
  float humidity = dht.getHumidity();
  float temperature = dht.getTemperature();
  float fahrenheit = dht.toFahrenheit(temperature);
  int ldrValue = analogRead(A0);
  int flameValue = analogRead(A1);
  int MQ4Value = analogRead(A2);
  int HygValueA = analogRead(A3);
  int HygValueB = analogRead(A4);
  int HygValueC = analogRead(A5);

  EthernetClient client = server.available();
  if (client) {
    boolean currentLineIsBlank = true;
    while (client.connected()) {
      if (client.available()) {
        char c = client.read();
        if (readString.length() < 135) readString += c;
        if (c == '\n') {
          client.println("HTTP/1.1 200 OK");
          client.println("Content-Type:text/html");
          client.println("Connection: close");
          client.println();
          client.println("<!DOCTYPE HTML><html style=\"background-color:black\">");
          client.println("<head><title>ArduinoSide</title>");
          client.println("<link rel=\"icon\" href=\"https://www.clker.com/cliparts/D/W/n/h/n/W/house-logo-hi.png\">");
          client.println("</head><body>");
          client.println("<form action=\"https://192.168.1.20/Arduinautomotioncommunication.php?\" method=\"get\" target=\"_blank\">");
          client.println("<input type=\"hidden\" name=\"temperatureCelsius\" value=\""); client.println(temperature); client.println("\">");
          client.println("<input type=\"hidden\" name=\"temperatureFahrenheit\" value=\""); client.println(fahrenheit); client.println("\">");
          client.println("<input type=\"hidden\" name=\"humidity\" value=\""); client.println(humidity); client.println("\">");
          client.println("<input type=\"hidden\" name=\"flame\" value=\""); client.println(flameValue); client.println("\">");
          client.println("<input type=\"hidden\" name=\"MQ4sensor\" value=\""); client.println(MQ4Value); client.println("\">");
          client.println("<input type=\"hidden\" name=\"LDRsensor\" value=\""); client.println(ldrValue); client.println("\">");
          client.println("<input type=\"hidden\" name=\"plant1H\" value=\""); client.println(HygValueA); client.println("\">");
          client.println("<input type=\"hidden\" name=\"plant2H\" value=\""); client.println(HygValueB); client.println("\">");
          client.println("<input type=\"hidden\" name=\"plant3H\" value=\""); client.println(HygValueC); client.println("\">");
          client.println("<input type=\"submit\" value=\"Communication\" style=\"width:500px;height:200px;font-weight:bold;background-color:black;color:green\">");
          client.println("</form></body></html>");
          break;
        }
      }
    }
    delay(1); client.stop();

    // Actuatoren schakelen op basis van ontvangen GET-parameters
    if (readString.indexOf("?airpump=pumpIsOn") > 0) digitalWrite(pump, LOW);
    else if (readString.indexOf("?airpump=pumpIsOff") > 0) digitalWrite(pump, HIGH);
    if (readString.indexOf("&lamp=lampIsOn") > 0) digitalWrite(lamp, LOW);
    else if (readString.indexOf("&lamp=lampIsOff") > 0) digitalWrite(lamp, HIGH);
    if (readString.indexOf("&feed=feedIsOn") > 0) digitalWrite(feed, LOW);
    else if (readString.indexOf("&feed=feedIsOff") > 0) digitalWrite(feed, HIGH);
    if (readString.indexOf("&heater=heaterIsOn") > 0) digitalWrite(heater, LOW);
    else if (readString.indexOf("&heater=heaterIsOff") > 0) digitalWrite(heater, HIGH);
    if (readString.indexOf("&filterex=exIsOn") > 0) digitalWrite(filterex, LOW);
    else if (readString.indexOf("&filterex=exIsOff") > 0) digitalWrite(filterex, HIGH);
    if (readString.indexOf("&filterin=inIsOn") > 0) digitalWrite(filterin, LOW);
    else if (readString.indexOf("&filterin=inIsOff") > 0) digitalWrite(filterin, HIGH);
    if (readString.indexOf("&irrigation=start") > 0) digitalWrite(irrigation, LOW);
    else if (readString.indexOf("&irrigation=stop") > 0) digitalWrite(irrigation, HIGH);

    readString = "";
    Serial.println("client disconnected");
  }
}

Aangepaste onderdelen & behuizingen

arduinautomotion_wNJ69zA666.ico (favicon)
spidersense_Ge3umcKzBw.mp4 (alert-video)
spidermanvoice_EqWLILohmW.mp3 (alert-audio)

Schema's

Je TV bedienen met Alexa via Arduino IoT Cloud – stapsgewijze handleiding Bewegingsdetectie LED-verlichting onder bed: Stil, slimme nachtverlichting

Productieproces

3d printen

Automatisering Besturingssysteem

Industriële technologie