Hi,
I have managed to get an ESP32 to open a web address and enter two lines that will control an output of the ESP32 from the web.
/*
WiFiAccessPoint.ino creates a WiFi access point and provides a web server on it.
Steps:
1. Connect to the access point "yourAp"
2. Point your web browser to http://192.168.4.1/H to turn the LED on or http://192.168.4.1/L to turn it off
OR
Run raw TCP "GET /H" and "GET /L" on PuTTY terminal with 192.168.4.1 as IP address and 80 as port
Created for arduino-esp32 on 04 July, 2018
by Elochukwu Ifediora (fedy0)
*/
#include <WiFi.h>
#include <WiFiClient.h>
#include <WiFiAP.h>
#define LED_BUILTIN 2 // Set the GPIO pin where you connected your test LED or comment this line out if your dev board has a built-in LED
// Set these to your desired credentials.
const char *ssid = "yourAP";
const char *password = "yourPassword";
WiFiServer server(80);
void setup() {
pinMode(LED_BUILTIN, OUTPUT);
Serial.begin(115200);
Serial.println();
Serial.println("Configuring access point...");
// You can remove the password parameter if you want the AP to be open.
WiFi.softAP(ssid, password);
IPAddress myIP = WiFi.softAPIP();
Serial.print("AP IP address: ");
Serial.println(myIP);
server.begin();
Serial.println("Server started");
}
void loop() {
WiFiClient client = server.available(); // listen for incoming clients
if (client) { // if you get a client,
Serial.println("New Client."); // print a message out 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
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();
// the content of the HTTP response follows the header:
client.print("Click <a href=\"/H\">here</a> to turn ON the LED.
");
client.print("Click <a href=\"/L\">here</a> to turn OFF the LED.
");
// 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
}
// Check to see if the client request was "GET /H" or "GET /L":
if (currentLine.endsWith("GET /H")) {
digitalWrite(LED_BUILTIN, HIGH); // GET /H turns the LED on
}
if (currentLine.endsWith("GET /L")) {
digitalWrite(LED_BUILTIN, LOW); // GET /L turns the LED off
}
}
}
The writing on the web page on my phone is minute, I can use index finger and thumb to enlarge it but then it disappears into the corner of the page and I have to find it.
Every time I click on it the page size resets, is it possible, in the ESP32 sketch to write the web page font much bigger?
I assume it will be something like this
client.print("<p style=Click <a href=\"/H\">here</a> to turn ON the LED.
>absolute size - xx-large</p>");
The text you are printing is HTML code. You can simply create a nice HTML page with CSS to style your page anyway you like.
I recommend you have a look at a youtube video for HTML5 & CCS and create a simple nice looking page. Then transfer the individual lines into your prints.
Hi Klaus,
For some reason putting an HTML code into a 'print' statement such as the client.print one used by WiFiclient.h seems to be in an odd format that is not mentioned in information about creating html codes?
matelot:
For some reason putting an HTML code into a 'print' statement such as the client.print one used by WiFiclient.h seems to be in an odd format that is not mentioned in information about creating html codes?
I can do a few test later. I have not played too much with web on Arduino because I use WiFi more for MQTT which is a protocol for sensors. But I am fairly certain it is not a lot more complicated than that.
The reason I entered the whole of the sketch is because it includes these lines
// 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();
// the content of the HTTP response follows the header:
client.print("Click <a href=\"/H\">here</a> to turn ON the LED.
");
client.print("Click <a href=\"/L\">here</a> to turn OFF the LED.
");
// The HTTP response ends with another blank line:
client.println();
The lines that appear on the web screen are
client.print("Click <a href=\"/H\">here</a> to turn ON the LED.
");
client.print("Click <a href=\"/L\">here</a> to turn OFF the LED.
");
or in fact
Click here to turn on the LED
Click here to turn off the LED
'here' showing in blue.
I assume I need a line something like
client.print("<p style=Click to turn ON the LED.\">absolute size - xx-large</p>
");
to alter the font size but as everything inside the bracket is also in double quotes it sees the latter as a part to print and not to act on (increase font size).
I assume there is a way round this but can't find it?
I don't have the luxury of having head tags for every page. If you look at my first post and the sketch you will see the format is totally different to adding anything to head tags.
matelot:
I don't have the luxury of having head tags for every page. If you look at my first post and the sketch you will see the format is totally different to adding anything to head tags.
Why not?
Just replace the two lines in your sketch
// the content of the HTTP response follows the header:
client.print( "Click <a href=\"/H\">here</a> to turn ON the LED.
" );
client.print( "Click <a href=\"/L\">here</a> to turn OFF the LED.
" );
with this
// the content of the HTTP response follows the header:
client.print( "<!DOCTYPE html>" );
client.print( "<html lang=\"en\">" );
client.print( "<head><meta charset=\"UTF-8\"><meta name=\"HandheldFriendly\" content=\"True\">" );
client.print( "<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.5, user-scalable=yes\"></head>" );
client.print( "<body>" );
client.print( "<H1>Arduino</H1>" );
client.print( "Click <a href=\"/H\">here</a> to turn ON the LED.
" );
client.print( "Click <a href=\"/L\">here</a> to turn OFF the LED.
" );
client.print( "</body></html>" );
With an initial scale of 1.5 the text is about 90% of my phone width. I can even rotate and it scales to 80% in landscape.
I have done a test with full CSS styling and that works as well.
I would recommend you create a page and test it on your PC first. You can use your browsers build in phone screen simulation. Then take the HTML code and wrap it with client.print. You also must place a escape character before every double quote in the HTML. e.g. " -> " otherwise the C compiler will complain.
Thank you both very much for the input and thank you Klaus for the changes I needed to make to get the page enlarged.
Everything works fine now.
I will need to learn a lot more about programming in HTML it looks quite powerful.
