Question regarding Access point and text input forms
Posted: Sat Oct 10, 2020 4:54 pmHello there,
First of all please forgive my english, I'm not a native English speaker
It's the first time that I'm experimenting with an ESP8266 and I'm running into a small blocker.
I've written a code that works well in access point mode. It displays a number of buttons, each button is associated to a specific action. So far so good. I want to use access point and not a connexion through my wifi routeur because I will be distributing some of those products to friends who won't be able to get into the program and add their wifi/passwords credentials so I'd rather have the board emit WIFI and for my friends to be able to connect to it directly easily, regardless of where they'll set it up.
My current code works well however I'm unable to add a text form on the HTML page in access point. I would like to add a text form for hours / minutes / date / month and then submit, it would save those data into different variables so that I can perform the right actions with it.
All the example on the internet I can find of ESP8266 using text form uses WIFI connection and not access point. They all use ESP8266WebServer.h when I'm using ESP8266WiFi.h for access point.
Please find below my code that works well and another code for text input form that works well in WIFI through router mode. i'm trying to mix and match both to have a final code that works in access point with both buttons and text input forms but so far ... no luck.
This is my access point code:
And this is a good time/hour/seconds HTML code that works in WIFI router mode with another library. it's pretty much what I'd like to use but while making it work in my previous code above:
Any suggestions? This would be greatly appreciated
Thanks a lot
Alexis
First of all please forgive my english, I'm not a native English speaker
It's the first time that I'm experimenting with an ESP8266 and I'm running into a small blocker.
I've written a code that works well in access point mode. It displays a number of buttons, each button is associated to a specific action. So far so good. I want to use access point and not a connexion through my wifi routeur because I will be distributing some of those products to friends who won't be able to get into the program and add their wifi/passwords credentials so I'd rather have the board emit WIFI and for my friends to be able to connect to it directly easily, regardless of where they'll set it up.
My current code works well however I'm unable to add a text form on the HTML page in access point. I would like to add a text form for hours / minutes / date / month and then submit, it would save those data into different variables so that I can perform the right actions with it.
All the example on the internet I can find of ESP8266 using text form uses WIFI connection and not access point. They all use ESP8266WebServer.h when I'm using ESP8266WiFi.h for access point.
Please find below my code that works well and another code for text input form that works well in WIFI through router mode. i'm trying to mix and match both to have a final code that works in access point with both buttons and text input forms but so far ... no luck.
This is my access point code:
Code: Select all
/*********
Rui Santos
Complete project details at http://randomnerdtutorials.com
*********/
// Include header files
#include <SPI.h> //i2c and the display libraries
#include <Wire.h>
#include <Adafruit_GFX.h>
#include <Adafruit_SSD1306.h>
#include <ds3231.h> // rtc lib
#include "Sodaq_DS3231.h"
ts t; //ts is a struct findable in ds3231.h
#include <ESP8266WiFi.h>
#define SCREEN_WIDTH 128 // OLED display width, in pixels
#define SCREEN_HEIGHT 32 // or 64 OLED display height, in pixels
#define OLED_RESET 4 // or -1 Reset pin # (or -1 if sharing Arduino reset pin)
//
Adafruit_SSD1306 display(SCREEN_WIDTH, SCREEN_HEIGHT, &Wire, OLED_RESET); //Declaring the display name (display)
const char WiFiPassword[] = "12345678";
const char AP_NameChar[] = "Clock" ;
// Set web server port number to 80
WiFiServer server(80);
//Counters to change positclocions of pages and sub-menus
int page_counter = 1 ; //To move beetwen pages
int subpage_counter = 0; //To move submenu 1 RGB
int subpage2_counter = 0; //To move submenu 2 Led
//---------Storage states of buttons for debounce function-----//
boolean current_up = LOW;
boolean last_up = LOW;
boolean current_sel = LOW;
boolean last_sel = LOW;
boolean last_down = LOW;
boolean current_down = LOW;
//
//// Time and date variables
int tmpHour = 0;
int tmpMinute = 0;
int tmpDate = 0;
int tmpMonth = 0;
//int tmpYear = 0;
int tmpDay = 0;
int tmpSecond = 0;
int hour_digit = 00;
int minute_digit = 00;
int date_digit = 00;
int month_digit = 00;
//int year_digit = 00;
int mov_digit = 2;
const int output = 6;
int temp = 00;
int counterVal = 0;
int nightval = true;
char Time[] = "TIME: : : ";
char Calendar[] = "DATE: / ";
//char buf[] = "Clock intermezzo ";
byte i, second, minute, hour, date, month; // add year after month if needed
// Function that convert decimal numbers to binary
byte decToBCD(byte val)
{
return ((val / 10 * 16) + (val));
}
// Variable to store the HTTP request
String header;
// Auxiliar variables to store the current output state
String output2State = "off";
String output3State = "off";
String output4State = "enabled";
String output7State = "enabled";
// Assign output variables to GPIO pins
//const int output5 = 5;
//const int output4 = 4;
//const int output2 = 3;
int up = 8; //Up/Yes button
int sel = 4; //Select button 9
int down = 5; //Down/No button 10
// 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 //////////////////////////////////////////////////////
void setup() {
Serial.begin(115200);
delay(100);
// Initialize the output variables as outputs
pinMode(LED_BUILTIN, OUTPUT);
// pinMode(output5, OUTPUT);
// pinMode(output4, OUTPUT);
pinMode(3, OUTPUT); //LCP845BRK
// Set outputs to LOW
// digitalWrite(output5, LOW);
// digitalWrite(output4, LOW);
digitalWrite(3, HIGH); // sets the LPCB845 BRK to ON
DS3231_init(DS3231_INTCN); //register the ds3231
display.begin(SSD1306_SWITCHCAPVCC, 0x3C); //Start the OLED display
display.clearDisplay();
Wire.begin();
delay(1000);
display.setTextSize(1);
display.setTextColor(WHITE);
display.setCursor(0, 10);
// Print local IP address and start web server
Serial.println("");
Serial.println("WiFi connected.");
Serial.println("IP address: ");
Serial.println(WiFi.localIP());
boolean conn = WiFi.softAP(AP_NameChar, WiFiPassword);
server.begin();
} // void setup()
//---- De-bouncing function for all buttons----//
boolean debounce(boolean last, int pin)
{
boolean current = digitalRead(pin);
if (last != current)
{
delay(100);
current = digitalRead(pin);
}
return current;
}
////////////////////////////////////////////////////////FUNCTIONS//////////////////////////////////////////////////////
void DS3231_display_wifi() {
DS3231_get(&t);
Time[12] = t.sec % 10 + 48;
Time[11] = t.sec / 10 + 48;
Time[9] = t.min % 10 + 48;
Time[8] = t.min / 10 + 48;
Time[6] = t.hour % 10 + 48;
Time[5] = t.hour / 10 + 48;
// Calendar[14] = t.year % 10 + 48;
// Calendar[13] = t.year / 10 + 48;
Calendar[9] = t.mon % 10 + 48;
Calendar[8] = t.mon / 10 + 48;
Calendar[6] = t.mday % 10 + 48;
Calendar[5] = t.mday / 10 + 48;
Serial.println(Time); // Display time
Serial.println(Calendar); // Display calendar
temp = (rtc.getTemperature()-4); //read registers and display the temperature -3 for better accuracy
// display.print("deg C");
}
void nightMode();
{
Wire.beginTransmission(0x68); // Start I2C protocol with DS3231 address
Wire.write(0); // Send register address
Wire.endTransmission(false); // I2C restart
Wire.requestFrom(0x68, 7); // Request 7 bytes from DS3231 and release I2C bus at end of reading
second = Wire.read(); // Read seconds from register 0
minute = Wire.read(); // Read minuts from register 1
hour = Wire.read(); // Read hour from register 2
Wire.read(); // Read day from register 3 (not used)
date = Wire.read(); // Read date from register 4
month = Wire.read(); // Read month from register 5
// year = Wire.read(); // Read year from register 6
delay(50);
second = (second >> 4) * 10 + (second & 0x0F);
minute = (minute >> 4) * 10 + (minute & 0x0F);
hour = (hour >> 4) * 10 + (hour & 0x0F);
date = (date >> 4) * 10 + (date & 0x0F);
month = (month >> 4) * 10 + (month & 0x0F);
// year = (year >> 4) * 10 + (year & 0x0F);
if ( second == 1) { // only do the following when second == 1
if ( hour == 23 && minute == 50) {
Serial.println("clock park");
delay(20);
}
if ( hour == 23 && minute == 58) {
digitalWrite(3, LOW); // Turn OFF the power for the boards
}
if ( hour == 8 && minute == 1) {
digitalWrite(3, HIGH); // Turn ON the power for the boards
delay(20);
// Serial.println("McuArmTools reset");
Serial.println("clock on");
delay(100);
Serial.println("intermezzo mode 1");
delay(30);
}
delay(2000);
}
if (nightval == false)
{
digitalWrite(3, HIGH); // Turn ON the power for the boards
}
}
// Write the data to the RTC
void writeRTC()
{
// hour = (decToBCD(myMenu[1]));
hour = hour_digit;
minute = minute_digit;
// minute = (decToBCD(myMenu[2]));
// // day = (decToBCD(myMenu[5])); // DOW not used
// date = (decToBCD(myMenu[3]));
date = date_digit;
// month = (decToBCD(myMenu[4]));
month = month_digit;
// year = (decToBCD(myMenu[5]));
// year = year_digit;
// Convert decimal to BCD
// minute = ((minute / 10) << 4) + (minute % 10);
// hour = ((hour / 10) << 4) + (hour % 10);
// date = ((date / 10) << 4) + (date % 10);
// month = ((month / 10) << 4) + (month % 10);
// year = ((year / 10) << 4) + (year % 10);
// End conversion
// Write data to DS3231 RTC
// Wire.beginTransmission(0x68); // Start I2C protocol with DS3231 address
// Wire.write(0); // Send register address
// Wire.write(0); // Reset seconds and start oscillator
// Wire.write(minute);
// Wire.write(hour); // Write hour
// Wire.write(minute); // Write minute
// // Wire.write(1); // Write day (not used)
// Wire.write(date); // Write date
// Wire.write(month); // Write month
//// Wire.write(year); // Write year
// Wire.endTransmission(); // Stop transmission and release the I2C bus
// delay(200);
// Serial.println("WriteRTC");
Serial.print("McuTimeDate time ");
Serial.print(hour);
Serial.print(":");
Serial.println(minute);
}
// Reset all hands
void zeroAll()
{
Serial.println("clock park");
delay(2000);
char buffer[31];
for (unsigned int x = 10; x <= 46; x++) {
sprintf(buffer, "rs sendcmd Ox%0X matrix zero all", x);
Serial.println(buffer);
delay(200);
}
}
//////////////////////////////////////////////////////VOID LOOP//////////////////////////////////////////////////////
void loop(){
nightMode();
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
currentTime = millis();
previousTime = currentTime;
while (client.connected() && currentTime - previousTime <= timeoutTime) { // loop while the client's connected
currentTime = millis();
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 /3/on") >= 0) {
Serial.println("Resetting hands...");
output3State = "on";
zeroAll(); /// execute the function
}
// else if (header.indexOf("GET /3/off") >= 0) {
// Serial.println("GPIO 5 off");
// output3State = "off";
// digitalWrite(output5, LOW);
// }
else if (header.indexOf("GET /4/enabled") >= 0) {
Serial.println("Night mode is enabled");
output4State = "enabled";
nightval = true;
} else if (header.indexOf("GET /4/disabled") >= 0) {
Serial.println("Night mode is disabled");
output4State = "disabled";
nightval = false;
digitalWrite(LED_BUILTIN, HIGH); } else if (header.indexOf("GET /7/enabled") >= 0) {
Serial.println("Movements are enabled");
output7State = "enabled";
} else if (header.indexOf("GET /7/disabled") >= 0) {
Serial.println("Movements are disabled");
output7State = "disabled";
} else if (header.indexOf("GET /2/on") >= 0) {
Serial.println("Parking clock & cutting power ");
output2State = "on";
Serial.println("clock park");
delay(8000);
digitalWrite(3, LOW);
digitalWrite(LED_BUILTIN, HIGH);
} else if (header.indexOf("GET /2/off") >= 0) {
Serial.println("Power is back on - clock ready");
output2State = "off";
digitalWrite(3, HIGH);
digitalWrite(LED_BUILTIN, LOW);
}
// 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
client.println("<style>html { font-family: Helvetica; display: inline-block; margin: 0px auto; text-align: center;}");
client.println(".button { background-color: #195B6A; border: none; color: white; padding: 16px 40px;");
client.println("text-decoration: none; font-size: 30px; margin: 2px; cursor: pointer;}");
client.println(".button2 {background-color: #77878A;}</style></head>");
// Web Page Heading
client.println("<body><h1>Clock - Cinephase</h1>");
/////////////////////////////1 - Display time
// Display current time and date
DS3231_display_wifi();
client.print("<p>");
client.println( Time );
client.println( Calendar );
client.println ( temp );
client.println( "</p>");
///////////////////////////////2- Stop, park clock and cut power
// Display current state, and ON/OFF buttons
client.println("<p>Arret de l'horloge et du courant - " + output2State + "</p>");
// If the output2State is off, it displays the ON button
if (output2State=="off") {
client.println("<p><a href=\"/2/on\"><button class=\"button\">ON</button></a></p>");
} else {
client.println("<p><a href=\"/2/off\"><button class=\"button button2\">OFF</button></a></p>");
}
client.println("</body></html>");
/////////////////////////////3 - Zero hands
// Display current state, and "Activate"
client.println("<p>Remise a 0 des aiguilles - " + output3State + "</p>");
// If the output3State is off, it displays the ON button
client.println("<p><a href=\"/3/on\"><button class=\"button\">Reset</button></a></p>");
// if (output3State=="off") {
// client.println("<p><a href=\"/3/on\"><button class=\"button\">Activate</button></a></p>");
// }
// else {
// client.println("<p><a href=\"/3/off\"><button class=\"button button2\">OFF</button></a></p>");
// }
/////////////////////////////4-Night mode
// Display current state, and ON/OFF buttons for GPIO 4
client.println("<p>Mode nuit - " + output4State + "</p>");
// If the output4State is off, it displays the ON button
if (output4State=="disabled") {
client.println("<p><a href=\"/4/enabled\"><button class=\"button\">Enabled</button></a></p>");
} else {
client.println("<p><a href=\"/4/disabled\"><button class=\"button button2\">Disabled</button></a></p>");
}
///////////////////////////////5-Set hours/minutes
//
// // Display current state, and ON/OFF buttons for GPIO 4
// client.println("<p>Night mode " + output4State + "</p>");
// // If the output4State is off, it displays the ON button
// if (output4State=="disabled") {
// client.println("<p><a href=\"/4/enabled\"><button class=\"button\">Enabled</button></a></p>");
// } else {
// client.println("<p><a href=\"/4/disabled\"><button class=\"button button2\">Disabled</button></a></p>");
// }
// client.println("</body></html>");
//
///////////////////////////////6-Set Date/month
//
// // Display current state, and ON/OFF buttons for GPIO 4
// client.println("<p>Night mode " + output4State + "</p>");
// // If the output4State is off, it displays the ON button
// if (output4State=="disabled") {
// client.println("<p><a href=\"/4/enabled\"><button class=\"button\">Enabled</button></a></p>");
// } else {
// client.println("<p><a href=\"/4/disabled\"><button class=\"button button2\">Disabled</button></a></p>");
// }
// client.println("</body></html>");
//
///////////////////////////////7- Set movements
// Display current state, and enable/disable buttons
client.println("<p>Mouvements - " + output7State + "</p>");
// If the output7State is off, it displays the ON button
if (output7State=="disabled") {
client.println("<p><a href=\"/7/enabled\"><button class=\"button\">Enabled</button></a></p>");
} else {
client.println("<p><a href=\"/7/disabled\"><button class=\"button button2\">Disabled</button></a></p>");
}
client.println("</body></html>");
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("");
}
}And this is a good time/hour/seconds HTML code that works in WIFI router mode with another library. it's pretty much what I'd like to use but while making it work in my previous code above:
Code: Select all
// Libraries
#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>
// WiFi network
const char* ssid = "yourwifiname";
const char* password = "yourpassword";
ESP8266WebServer server ( 80 );
char htmlResponse[3000];
void handleRoot() {
snprintf ( htmlResponse, 3000,
"<!DOCTYPE html>\
<html lang=\"en\">\
<head>\
<meta charset=\"utf-8\">\
<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\
</head>\
<body>\
<h1>Time</h1>\
<input type='text' name='date_hh' id='date_hh' size=2 autofocus> hh \
<input type='text' name='date_mm' id='date_mm' size=2 autofocus> mm \
<input type='text' name='date_ss' id='date_ss' size=2 autofocus> ss \
<div>\
<br><button id=\"save_button\">Save</button>\
</div>\
<script src=\"https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js\"></script>\
<script>\
var hh;\
var mm;\
var ss;\
$('#save_button').click(function(e){\
e.preventDefault();\
hh = $('#date_hh').val();\
mm = $('#date_mm').val();\
ss = $('#date_ss').val();\
$.get('/save?hh=' + hh + '&mm=' + mm + '&ss=' + ss, function(data){\
console.log(data);\
});\
});\
</script>\
</body>\
</html>");
server.send ( 200, "text/html", htmlResponse );
}
void handleSave() {
if (server.arg("hh")!= ""){
Serial.println("Hours: " + server.arg("hh"));
}
if (server.arg("mm")!= ""){
Serial.println("Minutes: " + server.arg("mm"));
}
if (server.arg("ss")!= ""){
Serial.println("Seconds: " + server.arg("ss"));
}
}
void setup() {
// Start serial
Serial.begin(115200);
delay(10);
// Connecting to a WiFi network
Serial.println();
Serial.println();
Serial.print("Connecting to ");
Serial.println(ssid);
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
}
Serial.println("");
Serial.println("WiFi connected");
Serial.println("IP address: ");
Serial.println(WiFi.localIP());
server.on ( "/", handleRoot );
server.on ("/save", handleSave);
server.begin();
Serial.println ( "HTTP server started" );
}
void loop() {
server.handleClient();
}Any suggestions? This would be greatly appreciated
Thanks a lot
Alexis