- Tue Sep 20, 2016 4:40 pm
#55443
Hi guys,
I am very new but after days of googling I decided to ask for help in a Forum.
I do hope I do not upset you with my question..
Here is my problem:
I followed an example I found in the web to set up a simple webserver:
First I built a simple webpage with a free editor.
Second I used a tool to convert this html file to a "string".
Third I opend an Arduino-Example: "mDNS_Web_Server" and changed the "String s" by pasting my own converted html file.
Now the webserver is running.
So far everything is working fine but now I want to use a stylsheet: "myOwnStyle.css" by storing it on my esp via SPIFFS.
I succesfully used a recommended tool to store the *.css-file on the esp.
I also included "FS.h" and followed some advice of this page: http://esp8266.github.io/Arduino/versio ... ystem.html
but if i follow the serial Monitor and go to the "printed" ip, the stylsheet is not found.
I would like to know, what I need to do to succesfully use a stylsheet stored on spiffs.
Here is my actual code:
The modified example
and my "converted" webpage-file
I am very new but after days of googling I decided to ask for help in a Forum.
I do hope I do not upset you with my question..
Here is my problem:
I followed an example I found in the web to set up a simple webserver:
First I built a simple webpage with a free editor.
Second I used a tool to convert this html file to a "string".
Third I opend an Arduino-Example: "mDNS_Web_Server" and changed the "String s" by pasting my own converted html file.
Now the webserver is running.
So far everything is working fine but now I want to use a stylsheet: "myOwnStyle.css" by storing it on my esp via SPIFFS.
I succesfully used a recommended tool to store the *.css-file on the esp.
I also included "FS.h" and followed some advice of this page: http://esp8266.github.io/Arduino/versio ... ystem.html
but if i follow the serial Monitor and go to the "printed" ip, the stylsheet is not found.
I would like to know, what I need to do to succesfully use a stylsheet stored on spiffs.
Here is my actual code:
The modified example
Code: Select all
/*
ESP8266 mDNS responder sample
This is an example of an HTTP server that is accessible
via http://esp8266.local URL thanks to mDNS responder.
Instructions:
- Update WiFi SSID and password as necessary.
- Flash the sketch to the ESP8266 board
- Install host software:
- For Linux, install Avahi (http://avahi.org/).
- For Windows, install Bonjour (http://www.apple.com/support/bonjour/).
- For Mac OSX and iOS support is built in through Bonjour already.
- Point your browser to http://esp8266.local, you should see a response.
*/
#include <ESP8266WiFi.h>
#include <ESP8266mDNS.h>
#include <WiFiClient.h>
#include "yeah.h"
#include "FS.h"
const char* ssid = "mySSid";
const char* password = "abc..**********";
// TCP server at port 80 will respond to HTTP requests
WiFiServer server(80);
void setup(void)
{
Serial.begin(115200);
SPIFFS.begin();
// Connect to WiFi network
WiFi.begin(ssid, password);
Serial.println("");
// Wait for connection
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
}
Serial.println("");
Serial.print("Connected to ");
Serial.println(ssid);
Serial.print("IP address: ");
Serial.println(WiFi.localIP());
// Set up mDNS responder:
// - first argument is the domain name, in this example
// the fully-qualified domain name is "esp8266.local"
// - second argument is the IP address to advertise
// we send our IP address on the WiFi network
if (!MDNS.begin("esp8266")) {
Serial.println("Error setting up MDNS responder!");
while(1) {
delay(1000);
}
}
Serial.println("mDNS responder started");
// Start TCP (HTTP) server
server.begin();
Serial.println("TCP server started");
// Add service to MDNS-SD
MDNS.addService("http", "tcp", 80);
}
void loop(void)
{
// Check if a client has connected
WiFiClient client = server.available();
if (!client) {
return;
}
Serial.println("");
Serial.println("New client");
// Wait for data from client to become available
while(client.connected() && !client.available()){
delay(1);
}
// Read the first line of HTTP request
String req = client.readStringUntil('\r');
// First line of HTTP request looks like "GET /path HTTP/1.1"
// Retrieve the "/path" part by finding the spaces
int addr_start = req.indexOf(' ');
int addr_end = req.indexOf(' ', addr_start + 1);
if (addr_start == -1 || addr_end == -1) {
Serial.print("Invalid request: ");
Serial.println(req);
return;
}
req = req.substring(addr_start + 1, addr_end);
Serial.print("Request: ");
Serial.println(req);
client.flush();
String s;
if (req == "/")
{
IPAddress ip = WiFi.localIP();
s = "HTTP/1.1 200 OK\r\nContent-Type: text/html\r\n\r\n";
s += file1;
s += "</html>\r\n\r\n";
Serial.println("Sending 200");
}
else if (req =="/KaffeStyle.css")
{
File KaffeStyle = SPIFFS.open("/KaffeStyle.css", "r");
if (!KaffeStyle) {
Serial.println("Css Datei nichtgefunden");
}
else if(KaffeStyle) Serial.println("file Opened");
}
else
{
s = "HTTP/1.1 404 Not Found\r\n\r\n";
Serial.println("Sending 404");
}
client.print(s);
Serial.println("Done with client");
}
and my "converted" webpage-file
Code: Select all
#ifndef header_h
#define header_h
String file1=
"!DOCTYPE HTML PUBLIC -W3CDTD HTML 4.01 TransitionalEN httpwww.w3.orgTRhtml4loose.dtd\r\n"
"html\r\n"
" head\r\n"
" titleSteuerungtitle\r\n"
" link rel=stylesheet type=textcss href=MyStyle.css \r\n"
" head\r\n"
" body\r\n"
" div id=mainframe\r\n"
"\r\n"
" div id=tastenAuswahl\r\n"
" button type=button class=button1x klbuttonbutton type=button class=button2x klbuttonbr\r\n"
" button type=button class=button1x mibuttonbutton type=button class=button2x mibuttonbr\r\n"
" button type=button class=button1x grbuttonbutton type=button class=button2x grbuttonbr\r\n"
" div\r\n"
"\r\n"
"\r\n"
"\r\n"
"\r\n"
" div\r\n"
" body\r\n"
"html\r\n";
#endif
