I recently started building a simple watering system. It’s current application will be for a water set Indoor/Outdoor water bowl for my dogs and cats. This same concept could be applied to watering flowers, or making and electronic valve to turn on a hose.
Electronics Case.
Electronics Case With Louvers To Disperse Heat.
Electronics Case
Electronics Case With Louvers To Disperse Heat.
Louvers 3d printed separately and then attached to the case with gorilla glue.
Electronics case fro MQTT bowl filler.
- White wire is soldered to pin 13 (D7) on the ESP8266
- Red And black attached to voltage rail on ESP8266
My C++ that I uploaded to my esp8266
All C++ that needs to be uploaded to esp8266. This code will output pin 13 High and Low and write the values in HTML format so the current valve state can be shown on the webpage.
#include <Arduino.h>
#include <string>
#include <ESP8266WiFi.h>
#include <Hash.h>
#include <ESP8266WebServer.h>
#include <ESP8266HTTPClient.h>
#include <DNSServer.h>
// using namespace std;
// Replace with your network credentials
const char* ssid = "";
const char* password = "";
String displayServer = "";
String uri = "/WebSites/Home_Automation/HomeAutomation.html";
// Set web server port number to 80
WiFiServer server(80);
// Variable to store the HTTP request
String header;
// Auxiliar variables to store the current output state
String output1State = "off";
// Assign output variables to GPIO pins
const int output1 = 13;
unsigned long timeout = millis();
// Current time
unsigned long currentTime = millis();
// Previous time
unsigned long previousTime = 0;
// Define timeout time in milliseconds (example: 2000ms = 2s)
const long timeoutTime = 2000;
void setup() {
Serial.begin(9600);
pinMode(LED_BUILTIN, OUTPUT);
pinMode(output1, OUTPUT);
digitalWrite(output1, LOW);
digitalWrite(LED_BUILTIN, LOW);
Serial.print("Connecting to ");
Serial.println(ssid);
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
}
// Print local IP address and start web server
Serial.println("");
Serial.println("WiFi connected.");
Serial.println("IP address: ");
Serial.println(WiFi.localIP());
server.begin();
}
int count=0;
void loop() {
WiFiClient client = server.available();
if (client) {
Serial.println("New Client.");
String currentLine = "";
HTTPClient http;
currentTime = millis();
previousTime = currentTime;
while (client.connected() && currentTime - previousTime <= timeoutTime) {
currentTime = millis();
if (client.available()) {
char c = client.read();
Serial.write(c);
header += c;
if (c == '\n') {
if (currentLine.length() == 0) {
client.println("HTTP/1.1 200 OK");
client.println("Content-type:text/html");
client.println("Access-Control-Allow-Origin: uri");
client.println("Connection: close");
client.println();
// Get pin values
if (header.indexOf("GET /?pin=4") >= 0) {
if (output1State == "off") {
output1State = "on";
digitalWrite(BUILTIN_LED, LOW);
digitalWrite(output1, HIGH);
Serial.println(output1State);
delay(500);
}
else if(output1State == "on") {
output1State = "off";
count=0;
digitalWrite(BUILTIN_LED, HIGH);
digitalWrite(output1, LOW);
Serial.println(output1State);
delay(500);
}
}
client.println("<!DOCTYPE HTML>");
client.println("<html>");
client.println("<p id='v1'>Refill Valve = " + output1State + "</p>");
client.println("</html>");
// The HTTP response ends with another blank line
client.println();
// Break out of the while loop
break;
} else { // if you got a newline, then clear currentLine
currentLine = "";
}
}else if (c != '\r') {
currentLine += c;
}
}
}
// Clear the header variable
header = "";
// Close the connection
if (digitalRead(output1) == LOW) {
client.stop();
Serial.println("Client disconnected.");
Serial.println("");
}
}
delay(1000);
if (count == 30) {
count=0;
output1State = "off";
digitalWrite(BUILTIN_LED, LOW);
digitalWrite(output1, LOW);
}
if (digitalRead(output1) == HIGH) {
count++;
}
Serial.println(count);
}
Automation Web Page
This a small webpage I am starting to control my home automation. I am pretty decent at HTML, JS, JQuery, so I chose to write a page from scratch. There are also some other low code (Open Source) options for automation control such as Blink app, and I believe google home works as well.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="../MyAdminPage/libraries/js/jquery-3.5.1.js"></script>
<script src="../MyAdminPage/js/formLibrary.js"></script>
<title>Tony's Automation Server</title>
<style>
body {
background-color: lightblue;
}
header {
background-color: rgb(57, 57, 59);
}
h1 {
text-align: center;
color: red;
font: 24px;
font-style: italic;
}
h2 {
text-align: center;
color: red;
font-style: italic;
}
h3 {
/* text-align: center; */
/* color: red; */
/* font-style: italic; */
}
#bowl1_cont {
width: 50%;
background: linear-gradient(.025, red, orange, green);
padding: 5%;
border: solid black 3px;
}
.btns1 {
margin: 5px;
}
#c_state{
margin: 40px;
width: 20%;
}
#v1 {
font-size: 18px;
color: red;
}
#v2 {
font-size: 18px;
color: red;
}
#bowl1_header {
}
@media only screen and (max-width: 500px) {
#buttonset1_cont {
width: 90%;
padding: 5%;
border: solid black 3px;
}
}
</style>
</head>
<body>
<header>
<h1 id="header1">Home Automation Server</h1>
</header>
<div id="bowl1_cont">
<h2 id="inside">Indoor Automation</h1>
<h3 id="bowl1_header">Dog Bowl1</h1>
<label>Refill Bowl:</label>
<button id="4" class="btns1">Refill Bowl</button><br>
<div id="result"></div>
</div>
</body>
<script type="text/javascript">
$(document).ready(function()
{
$.get("http://<IP>:<PORT>/", {}, function(results){
document.getElementById("result").innerHTML = (results);
});
$(".btns1").click(function()
{
var p = $(this).attr('id');
$.get("Add server ip address here", {pin:p})
$.get("Add you esp8266 address here", {}, function(results){
document.getElementById("result").innerHTML = (results);
});
});
});
</script>