Crea una Interfaz Web en PHP para Controlar tu Arduino Uno

Componentes y suministros

Arduino UNO	×1
Arduino Ethernet Shield 2	×1
Sensor Temp/Hum DHT11 (4 pines)	×1
Relé 2 vías	×4
Mini Protoboard	×1
Sensor llama	×1
Sensor gas MQ4	×1
LDR (fotorresistencia)	×1
Sensor higrómetro (humedad suelo)	×3
Cable router ADSL	×1
Enchufe (una vía)	×7
Base enchufe (una vía)	×7
Batería 9V	×1
Cable barril 9V	×1

Herramientas necesarias

Pistola silicona caliente

Aplicaciones y servicios en línea

Servidor HTTP Apache
Notepad++
Arduino IDE

Sobre el proyecto

Actualización

¿Cómo usar TheAmplituhedron.com para mejorar proyectos IoT? Es mi nuevo proyecto que gestiona programación servidor. Usándolo como host, envías/recibes paquetes de datos sin esfuerzo por Internet. Para apoyar mis proyectos/artículos, visita mi web.

Descripción

Crear web profesional para controlar acuario y riego en casa y recibir info del hogar cuando no estoy. Para ello creé el proyecto Arduinautomotion con 4 páginas HTML/PHP en Apache localhost (Arduinautomotion.php, Arduinautomotioncontrol.php, Arduinautomotionformvalue.php, Arduinautomotioncommunication.php). El Ethernet Shield aloja otra página (ArduinoSide.php) accesible por IP elegida, para comunicar con la web Arduinautomotion.

Pensé en esto al irme 2 semanas de vacaciones sin poder ajustar acuario. A veces apago filtro interno para evitar exceso oxígeno, o abro comedero remotamente. Añadí 6 opciones control acuario y 1 activar riego. Además, obtienes datos del hogar (temp/humedad DHT11, metano MQ4) vía Arduino Ethernet Shield. La web Arduinautomotion tiene interfaz fácil para enviar/recibir datos del Arduino.

Se requieren conocimientos HTML, CSS, JavaScript, PHP, jQuery para entender todo; esto es solo muestra, pero si sabes los lenguajes, encontrarás todas las páginas como código PHP abajo. Usé Notepad++.

Crea una Interfaz Web en PHP para Controlar tu Arduino Uno

Cómo enviar/recibir datos entre dos páginas PHP

Usé formularios HTML, métodos PHP y $_SESSION[""] para guardar/enviar datos entre páginas. GET es más fácil para comunicar con Arduino Ethernet Shield (HTTP GET Request sencillo), pero POST es más seguro; usé POST entre páginas web salvo ArduinoSide. $_SESSION guarda datos permanentemente entre más de dos páginas.

Configurar web en Apache HTTP Server (Localhost)

Apache es eficiente; puedes usar XAMPP u otro. En mi caso: AppServ → www → Arduinautomotion.php. Acceso con mi IP local (ej. "192.168.1.20" = localhost) como https://tuIP/Arduinautomotion.php.

Guía PHP Apache Windows

Conectar con localhost desde Android

Windows difiere de Mac; enlace útil para Windows: StackOverflow. En misma WiFi accedes con tu IP local.

Acceder a localhost por Wi-Fi (externo)

Funciona con IP externa, pero asegúrate que solo tú la conozcas (peligroso). Enlace Windows: StackOverflow. Necesitas port forwarding para acceder a ArduinoSide.php con la IP elegida en código ArduinoSide. Port Forwarding.

Arduinautomotion.php (Página principal)

Comunica con Arduino Ethernet Shield: envías comandos y recibes datos del hogar. Menú "Change" muestra situaciones y distingue objetos/sensores cambiando colores. Círculos cambiantes muestran valores sensores y estados objetos.

1) Sección Room: Datos del hogar (Arduinautomotioncommunication.php).

2) Sección Aquarium: Combinaciones elegidas via formularios HTML se envían a Arduinautomotionformvalue.php → retorno desde Arduinautomotioncontrol.php.

3) Sección Plant: Valores higrómetros y activar riego. Datos retornan igual.

4) Sección Guide: Incluye Arduinautomotionformvalue.php para ver opciones, instrucciones y diagrama comunicación.

5) Alert Box: Si algún valor en rango peligro, al recargar aparece caja con video Spider-man y audio "Spider-sense is tingling".

6) Partes de Arduinautomotion.php: Web responsive, círculos, footer.

Arduinautomotioncontrol.php

Embebido en Arduinautomotion.php para obtener todos los datos como $_SESSION[""] de Arduinautomotionformvalue.php y Arduinautomotioncommunication.php. Guarda datos permanentemente entre páginas PHP.

Arduinautomotionformvalue.php

Recibe opciones formulario de Arduinautomotion.php y las envía a ArduinoSide y Arduinautomotioncontrol.php. Embebido en sección Guide, también accesible en pestaña nueva.

Arduinautomotioncommunication.php

Guarda datos recibidos de ArduinoSide y los envía automáticamente a Arduinautomotioncontrol.php.

ArduinoSide

Alojado por Arduino Ethernet Shield vía DNS, accesible con IP elegida en código (ej. https://tuIPelegida).

Conexiones

Conecta según código ArduinoSide y esquema Fritzing. Conecta enchufes/bases a relés 2 vías y fija todo en base (corcho).

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,11,12,13
 LDR                  A0
 Flame Sensor         A1
 MQ4 Sensor           A2
 Hygrometer (1)       A3
 Hygrometer (2)       A4
 Hygrometer (3)       A5

El código Arduino es similar al ejemplo WebServer de librería Ethernet, añadiendo control sensores y ejecución comandos desde web Arduinautomotion. Conecta cable ADSL del Ethernet Shield al Router. Tras ejecutar código Arduino, la web envía/recibe datos vía LAN sobre WiFi.

Videos test: Probado con acuario real y riego (motor agua), funciona genial. Video editado con Filmora trial (marca de agua por respeto).

Código

Arduinautomotion.php
Arduinautomotioncontrol.php
Arduinautomotionformvalue.php
Arduinautomotioncommunication.php
ArduinoSide_Code.ino

Arduinautomotion.php (PHP)

<?php session_start(); ?>
<!DOCTYPE html>
<html>
<?php include 'Arduinautomotioncontrol.php'; ?>
<head>
<link rel="shortcut icon" href="Arduinautomotion.ico" type="image/x-icon">
<style>
html{ background-color:rgb(0,0,0); }
button{ cursor:pointer; user-select:none; }
form{ user-select:none; }
iframe{ user-select:none; }
p{ cursor:default; user-select:none; }
#guideText{ position:absolute; top:400px; font-size:20px; color:white; height:420px; width:1000px; overflow:auto; }
img.icon{ user-select:none; transition:opacity 2s; cursor:crosshair; }
.icon:hover{opacity:0.5}
div.home{ background-color:rgb(25,25,25); height:100px; width:1320px; position:sticky; top:530px; left:10px; border:10px solid; border-radius:20px; border-color:rgb(35,35,35); }
div.homeselector{ background-color:rgb(17,17,17); height:60px; width:220px; border:2px solid; border-radius:5px; border-color:rgb(35,35,35); transition:height width 0.5s; cursor:pointer; }
.homeselector:hover{height:70px;width:240px;}
div.infopanel{ background-color:rgb(25,25,25); position:absolute; top:680px; left:700px; height:300px; width:600px; border:10px solid; border-radius:20px; border-color:rgb(35,35,35); }
div.color{ position:absolute; height:50px; width:100px; transition:height width 0.5s; border:0.5px solid; border-radius:100px; border-color:transparent; cursor:pointer; }
.color:hover{height:60px;width:110px;}
section.menuselector{ background-color:rgb(99,99,99); height:150px; width:200px; padding:10px; border:10px solid; border-radius:20px; border-color:rgb(35,35,35); transition:border-color 0.5s,width 0.5s,height 0.5s; }
.menuselector:hover{border-color:red;height:160px;width:210px;}
svg.svg{ position:absolute; top:680px; left:10px; background-color:transparent; }
summary{ user-select:none; }
iframe.guide{ position:absolute; height:200px; width:250px; resize:both; overflow:auto; border:5px solid transparent; transition:border-color 2s,height width 2s; }
.guide:hover{height:220px;width:270px;border-color:red;}
footer{ position:absolute; top:2000px; left:20px; width:1300px; height:200px; border-width:5px; border-radius:10px; border-style:dashed; border-color:black; background-color:rgb(51,51,51); }
div.animationbox{ background-color:white; position:absolute; top:5px; left:10px; width:10px; height:10px; border:5px solid black; border-radius:50px; animation:move 10s infinite; }
@keyframes move{
 0% {top:5px;left:10px;background-color:white;border-color:black;}
 16% {top:5px;left:650px;background-color:black;border-color:white;}
 32% {top:5px;left:1275px;background-color:white;border-color:black;}
 48% {top:170px;left:1275px;background-color:black;border-color:white;}
 64% {top:170px;left:650px;background-color:white;border-color:black;}
 80% {top:170px;left:10px;background-color:black;border-color:white;}
}
a.openNewTab{ color:white; position:absolute; top:30px; left:500px; text-decoration:none; font-size:30px; transition:color 0.1s; }
.openNewTab:hover{color:green;}
select{ cursor:pointer; }
input.activateinput{ cursor:pointer; position:absolute; top:270px; left:410px; color:white; border-color:transparent; background-color:transparent; font-weight:bold; font-size:40px; transition:color 0.1s; }
.activateinput:hover{color:red;}
img.spidey{ position:absolute; top:400px; height:300px; width:350px; border:5px solid black; }
#refresh{ user-select:none; position:absolute; top:120px; left:600px; width:250px; height:250px; cursor:pointer; transition:border 0.5; }
#refresh:hover{border:5px solid green;}
#spideyVideo{ position:absolute; top:0px; left:5px; width:250px; height:250px; }
#BoxBackGround{ display:none; background-color:rgb(214,8,8); position:fixed; top:0px; left:0px; opacity:0.7; width:0px; height:0px; }
#Box{ display:none; position:fixed; top:10px; background:url("https://media.giphy.com/media/3o7qDNfxtNRtLVv8qs/giphy.gif"); background-color:black; background-repeat:no-repeat; background-size:600px 200px; width:600px; height:200px; border:5px solid black; border-radius:20px; }
#times{ position:absolute; color:white; top:0px; left:550px; font-weight:bold; font-size:40px; cursor:pointer; transition:color 0.5s; user-select:none; }
#times:hover{color:red;}
#BoxText{ position:absolute; top:150px; left:300px; color:white; font-size:25px; user-select:none; cursor:default; }
li.colorfulLi{ user-select:none; transition:color 0.1s; }
.colorfulLi:hover{color:green;}
a{ user-select:none; }
#StartInputText{ position:absolute; top:90px; left:30px; color:white; border-color:transparent; background-color:transparent; font-weight:bold; font-size:20px; }
#StopInputText{ position:absolute; top:90px; left:130px; color:white; border-color:transparent; background-color:transparent; font-weight:bold; font-size:20px; }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
// ... (scripts jQuery para UI, alertas, obtención datos Arduino, etc.)
</script>
</head>
<body onpageshow="getDataFromArduino()">
<img class="icon" src="https://sites.psu.edu/gayborhood/files/2016/05/Black-and-White-City-at-Night-V.png" style="border:10px solid;border-radius:20px;border-color:rgb(35,35,35);height:500px;width:1320px;">
<!-- Resto del cuerpo HTML con SVG, secciones Room/Aquarium/Plant, formularios, etc. -->
</body>
</html>

Arduinautomotioncontrol.php (PHP)

<?php session_start(); ?>
<!DOCTYPE html>
<html>
<head>
<title>Arduinautomotion</title>
<link rel="shortcut icon" href="Arduinautomotion.ico" type="image/x-icon">
<?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)

<?php session_start(); ?>
<!DOCTYPE html>
<html>
<head>
<title>FormValue</title>
<link rel="shortcut icon" href="Arduinautomotion.ico" type="image/x-icon">
<?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>
html{ background-color:black; }
div.serverpage{ background-color:green; width:1300px; height:100px; text-align:center; }
p{ color:green; text-align:center; font-size:25px; }
input.subMit{ position:absolute; left:525px; border:5px solid green; width:300px; height:50px; font-size:20px; color:white; background-color:transparent; cursor:pointer; }
</style>
</head>
<body>
<div class="serverpage"><h1 style="font-size:40px;color:black;">Server has received the data from Arduinautomotion.</h1></div>
<p>Airpump= <?php echo $_SESSION['Airpump'];?></p><br>
<p>Lamp=<?php echo $_SESSION['Lamp'];?></p><br>
<p>Feeding=<?php echo $_SESSION['Feeding'];?></p><br>
<p>Heater=<?php echo $_SESSION['Heater'];?></p><br>
<p>Filterex=<?php echo $_SESSION['Filterex'];?></p><br>
<p>Filterin=<?php echo $_SESSION['Filterin'];?></p><br>
<p>Irrigation=<?php echo $_SESSION['Irrigation'];?></p><br>
<form action="https://192.168.1.21/" method="get" target="_blank">
<input type="hidden" value="<?php echo $_SESSION['Airpump'];?>" name="airpump">
<input type="hidden" value="<?php echo $_SESSION['Lamp'];?>" name="lamp">
<input type="hidden" value="<?php echo $_SESSION['Feeding'];?>" name="feed">
<input type="hidden" value="<?php echo $_SESSION['Heater'];?>" name="heater">
<input type="hidden" value="<?php echo $_SESSION['Filterex'];?>" name="filterex">
<input type="hidden" value="<?php echo $_SESSION['Filterin'];?>" name="filterin">
<input type="hidden" value="<?php echo $_SESSION['Irrigation'];?>" name="irrigation">
<input type="submit" value="Send and Get Data" class="subMit">
</form>
</body>
</html>

Arduinautomotioncommunication.php (PHP)

<?php session_start(); ?>
<!DOCTYPE html>
<html>
<head>
<title>Communication</title>
<link rel="shortcut icon" href="Arduinautomotion.ico" type="image/x-icon">
<style> body{ background-image: url("https://i.ytimg.com/vi/kkVGBn-haDo/maxresdefault.jpg"); } </style>
<?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 (Arduino)

/////////////////////////////////////////////////////////////////
// -ARDUINAUTOMOTON-
// Creando web profesional para comunicar con Arduino
// (Compatible Android)
// by Kutluhan Aktar.
/////////////////////////////////////////////////////////////////
#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) {
    Serial.println("new client");
    boolean currentLineIsBlank = true;
    while (client.connected()) {
      if (client.available()) {
        char c = client.read();
        if (readString.length() < 135) readString += c;
        Serial.println(readString);
        if (c == '\n') {
          client.println("HTTP/1.1 200 OK");
          client.println("Content-Type:text/html");
          client.println("Connection: close");
          client.println();
          client.println("");
          client.println("");
          client.println("ArduinoSide");
          client.println("");
          client.println("");
          client.println("");
          client.println("");
          client.println("");
          client.println("");
          client.println("");
          client.println("");
          client.println("");
          client.println("");
          client.println("");
          client.println("");
          client.println("");
          client.println("");
          break;
        }
      }
    }
    delay(1);
    client.stop();

    // Ejecutar comandos recibidos
    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");
  }
}

Partes personalizadas y envoltorios

arduinautomotion_wNJ69zA666.ico
spidersense_Ge3umcKzBw.mp4
spidermanvoice_EqWLILohmW.mp3

Esquemáticos

Cableado transistores PNP varía según modelo: Base → pin digital, Colector → Positivo fixture cartón-cobre, Emisor → 5V Arduino.
Sustituye LCD normal por I2C LCD.
Motor: TIP42C PNP: Base → OUT sensor IR digital, Colector → Positivo bomba peristáltica, Emisor → 12V desde cable USB.

Controla tu TV con Alexa mediante Arduino IoT Cloud: Guía Paso a Paso Luz LED bajo la cama con sensor de movimiento: iluminación nocturna silenciosa e inteligente

Proceso de manufactura

Impresión 3d

Sistema de control de automatización

Tecnología Industrial