acjakubaschk asked 6 years ago
Hello,
I am trying to make a small Web Server to indicate if my Garagedoor is open or Closed.
I have used the WIFI Web server from the tutorials, and added two Input for some Reed Contacts to check if open or closed, they work fine. But i need help to make just a short (1sce) Signal out of the GPIO´s Output to trigger a Relais for the Drive.
I have made a delay after putting the output high and go to Low, but if i refresh the web page to check if the Drive has done it´s job. the output is trigger again… i thing because of the Browser line:
Maybe some of you has solved this problem or could give me a hind !
Regards Coolhand
/*********
Arno Jakubaschk
Show two Inputs States on Webpage
Give Impuls to open Garagedoor or Housedoor over Webpage
*********/
// Load Wi-Fi library
#include <ESP8266WiFi.h>
// Replace with your network credentials
const char* ssid = "XXX";
const char* password = "XXX";
// 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 output5State = "off";
String output4State = "off";
String Input1StateStr = "Closed";
String Input2StateStr = "Closed";
String green = "#DF0101";
String red = "#31B404";
String Trigger = "NO";
int input1State = 0;
int input2State = 0;
int ChangeFlag = 0;
// Assign output variables to GPIO pins
const int output5 = 5;
const int output4 = 4;
const int output7 = 13;
const int output8 = 15;
const int input1 = 16; //D0
const int input2 = 14; //D5
void setup() {
Serial.begin(115200);
// Initialize the output variables as outputs
pinMode(output5, OUTPUT); //Relais1
pinMode(output4, OUTPUT); //Relais2
pinMode(output7, OUTPUT); //ControllLED1
pinMode(output8, OUTPUT); //ControllLED2
pinMode(input1, INPUT); //Garage OPEN Contact
pinMode(input2, INPUT); //Garage CLOSED Contact
// Set outputs to LOW
digitalWrite(output5, LOW);
digitalWrite(output4, LOW);
digitalWrite(output7, LOW);
digitalWrite(output8, LOW);
// Connect to Wi-Fi network with SSID and password
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();
}
void loop(){
WiFiClient client = server.available(); // Listen for incoming clients
if (client) { // If a new client connects,
Serial.println("New Client."); // print a message out in the serial port
String currentLine = ""; // make a String to hold incoming data from the client
while (client.connected()) { // loop while the client's connected
if (client.available()) { // if there's bytes to read from the client,
char c = client.read(); // read a byte, then
Serial.write(c); // print it out the serial monitor
header += c;
if (c == '\n') { // if the byte is a newline character
// if the current line is blank, you got two newline characters in a row.
// that's the end of the client HTTP request, so send a response:
if (currentLine.length() == 0) {
// HTTP headers always start with a response code (e.g. HTTP/1.1 200 OK)
// and a content-type so the client knows what's coming, then a blank line:
client.println("HTTP/1.1 200 OK");
client.println("Content-type:text/html");
client.println("Connection: close");
client.println();
// turns the GPIOs on and off
if (header.indexOf("GET /5/on") >= 0) {
output5State = "ON";
Trigger = "YES";
}
// Display the HTML web page
client.println("<!DOCTYPE html><html>");
client.println("<head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">");
client.println("<link rel=\"icon\" href=\"data:,\">");
// CSS to style the on/off buttons
// Feel free to change the background-color and font-size attributes to fit your preferences
client.println("<style>html { font-family: Helvetica; display: inline-block; margin: 0px auto; text-align: center;}");
client.println(".button { background-color: #31B404; border: none; color: white; padding: 16px 40px;");
client.println("text-decoration: none; font-size: 30px; margin: 2px; cursor: pointer;}");
client.println(".button2 {background-color: #DF0101;}</style></head>");
//client.println(".button3 {background-color: #31B404;}</style></head>");
//client.println(".button4 {background-color: #DF0101;}</style></head>");
// Web Page Heading
client.println("<body><h1>ESP8266 Web Server Garage</h1>");
//client.println("<p>Garage Trigger " + output5State + "</p>");
if (Trigger == "NO"){
client.println("<p><a href=\"/5/on\"><button class=\"button\">ON</button></a></p>");
}
if (Trigger == "YES") {
Serial.println("GPIO 5 on");
//output5State = "ON";
Trigger = "NO";
digitalWrite(output5, HIGH);
delay(1000);
Serial.println("GPIO 5 OFF");
output5State = "OFF";
digitalWrite(output5, LOW);
client.println("<p><a href=\"\"><button class=\"button\">ON</button></a></p>");
} else {
delay(1000);
Trigger = "NO";
}
if (digitalRead(input1)==HIGH)
{
client.println(" <p>Schalter1 is <font color='green'>Offen</font><p><p>");
digitalWrite (output7, HIGH);
}
else
{
client.println(" <p>Schalter1 is <font color='red'>Geschlossen</font><p>");
digitalWrite (output7, LOW);
}
if (digitalRead(input2)==HIGH)
{
client.println(" <p>Schalter2 is <font color='green'>Offen</font><p>");
digitalWrite (output8, HIGH);
}
else
{
client.println(" <p>Schalter2 is <font color='red'>Geschlossen</font><p>");
digitalWrite (output8, LOW);
}
client.println("<br />");
client.println("</body></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') { // if you got anything else but a carriage return character,
currentLine += c; // add it to the end of the currentLine
}
}
}
// Clear the header variable
header = "";
// Close the connection
client.stop();
Serial.println("Client disconnected.");
Serial.println("");
}
}
Rui Santos Staff answered 6 years ago
I just saw that you’ve added your code. I’ll see if I have a solution for you!
Rui Santos Staff answered 6 years ago
I wrote this HTML web page that you can use: https://gist.github.com/RuiSantosdotme/0245af5b6566babceb807bf799a27045
Unfortunately I don’t have any tutorials that do exactly what you’re trying to build, but basically instead of having an HTML button that when pressed changes the URL.
For example, you press ON and it changes the URL to /5/on, I’ve shared in this example a HTML page that processes the button requests without changing the URL:
https://gist.github.com/RuiSantosdotme/0245af5b6566babceb807bf799a27045
Upon a button press, it requests the /5/on without changing it in your web browser URL bar. If you adapt that code to your own needs, it should do exactly what you’re looking for.
I hope that helps!
acjakubaschk answered 6 years ago
Hi Rui, thx for your affort, but i do not manage to get it going…not the HTML Part nor the functions..but as far as i understood our code…i will have to click on both button, but i am looking for “Triggerbutton” press it once than it closes the Contact and then relase it and stay open. so i will have look futher more. Regards Coolhand
Rui Santos Staff answered 6 years ago
I’ve just created a sample code, you’ll have to modify it for your own needs…
Basically, in the original web server that you are following, I was using links as buttons, so when you press the button the URL changes.
Instead, you need to create buttons that run in the background with JavaScript, so the URL remains always just the
IP address and you don’t re-trigger any action when you refresh the web page.