Esp8266 / Nodemcu lädt stylesheet nicht

International Deutsch
1

Hallo, ich bin gerade dabei ein bisschen mit dem Esp8266 zu experimentieren und bin schon seit ca. 2 Nächten am Verzeifeln.

Ich habe die folgende Css Datei in mein Projekt eingebunden und es klappte alles wunderbar. Wenn ich jedoch eine eigene Css Datei mit gleichem Code erstelle lädt mein Webserver diese nicht.

Der Firefox-Debugger gibt folgende Meldung:

File Not Found
URI: /styles.css
Method: GET
Arguments: 0

Hier mal der Fetzen Code aus meinem Programm der mir Probleme bereitet:

String content ="<!DOCTYPE HTML>\n";     
      content += "<HEAD>";
      content += "<meta name='apple-mobile-web-app-capable' content='yes' />";
      content += "<meta name='apple-mobile-web-app-status-bar-style' content='black-translucent' />";
      content += "<link rel='stylesheet' type='text/css' href='styles.css' />";
      content += "<TITLE>Arduino Steuerung</TITLE></HEAD>";
      content += "<H1> Hausautomation </H1>";
      content += "<hr />"; 
      content += "
";  
      content += "<H2> Nassims Zimmer</H2>";
           
      content += " <h3>Licht</h3>";
      content += "<a button href=\"/?LichtAn\"> Licht AN</a>
";
      content += "
";  
      content += "<a button href=\"/?LichtAus\">Licht Aus</a>
";

Ich hoffe ich habe alles ausreichend und nicht all zu blauäugig beschrieben.
Danke im vorraus :slight_smile:

2

Die Fehlermeldung ist doch eindeutig:

File Not Found

Überprüfe mal, ob Deine CSS nicht vielleicht in einem Unterverzeichnis residiert!

Gruß eMeS

3

Ich hatte ganz vergessen zu erwähnen, ich habe eine Html Datei im gleichem Verzeichniss wie das Arduino File und diese kann auf die .css Datei zugreifen. Deshalb schließe ich den Fehler mit einem falschen Pfad und Unterverzeichnisfehlern aus.

MfG Nassim

4

Er sucht aber schon im Wurzelverzeichnis:

URI: /styles.css

Gruß eMeS

5

du hast noch ein großes Verständnisproblem über die Arbeitsweise eines ESP als Server

6

ElEspanol:
du hast noch ein großes Verständnisproblem über die Arbeitsweise eines ESP als Server

Ist ja auch mein erstes Projekt :slight_smile:

7

Bei "GET /" gibst du die page aus. Scheint ja zu funktionieren.

Was machst du bei "GET/styles.css" ? Nichts. Und daher meckert der Firefox.

Der ESP hat keinen apache2 drin :frowning:

8

okay und was heißt das nun? Ich habe leider nur sehr mäßige Kentnisse von allem außer C. Kann ich nur über einen Url die Css laden oder wie gebe ich die Referenz auf diese an?

Gruß

9

Tja, mit mässigen Kenntnissen in C hat das weniger zu tun. Die url ist schon richtig, nur musst du den Sketch so erweitern, dass wenn die css Datei angefordert wird, der ESP sie auch ausgibt.

Oder, falls der ESP und das abrufende Gerät Zugang zum Internet haben, kannst du die css Datei auf externen Webspace legen und im Sketch auf extern verlinken.

Falls dir dies alles nichts sagt, solltest du dein Projekt in Standby setzen und dich erstmal mit den grundlegenden Sachen was LAN, Internet, Webserver, etc. beschäftigen. Dann ist C wahrscheinlich noch dein kleinstes Problem.

10

okay ich habe es verstanden danke. Entweder vom Webspace laden oder zusätzlich mit ausgeben. Und ich meinte dass ich nur C programmieren kann und kein html oder css.
MfG

11

Leider kann ich nicht wirklich erkennen, wo die gewünschte *.css-Datei real abgelegt ist oder abgelegt werden soll. Aber oft kann man solche Unsicherheiten vermeiden, in dem man dem Browser eine eindeutige Basis für den Datei-Zugriff mitteilt. Von dort aus berechnet er dann alle weiteren Pfade zweifelsfrei:

<head>
   <base href="http://wiki.selfhtml.org">
</head>

Siehe auch:
https://wiki.selfhtml.org/wiki/HTML/Kopfdaten/base

12

ist doch egal, wo sie ist bzw. ob sie überhaupt real als file existiert. Nur wenn der Browser sie per GET /styles.css anfordert, muss der ESP8266 liefern.

13

Sagmal EIEspanol hättest du mal einen Bsp. Code wo bei Anforderung das gefordete Style an den Browser gesendet wird?

Würde mir sehr weiter helfen.
MfG

14

Ich glaube, hier gehts etwas durcheinander, von wegen 'Anfordern' und 'Ausliefern'.
Style Sheets (CSS) sind Formatierungsanweisungen, die dem Browser sagen, wie er die Elemente der HTML-Seite darstellen soll, also Text fett, Hintergrund rot und Listen eingerückt. Um die Lesbarkeit der HTML-Seiten zu erhalten, kann man diese Formatierungsanweisungen in separate Dateien auslagern. Man muss dem Webserver natürlich mitteilen, in welcher Datei das geschehen ist und wo er diese findet. Vorzugsweise hat sich dafür die Dateiendung '.css' und dar Name 'style', oder auch 'styles' durchgesetz. Beides ist nicht zwingend und beliebig zu verwenden. Auch der Speicherort ist nicht festgelegt und muß deshalb exakt angegeben werden. Das passiert über die zuständige Referenz im Header der Seite, beispielsweise:

<link rel='stylesheet' type='text/css' href='styles.css' />

wobei unter 'href' der exakte Pfad gesetzt sein muss.
Der Webserver bindet diese Formatanweisungen zur Laufzeit in den HTML-Code ein und übermittelt diese Anweisungen an den Browser. Es muß diese Datei also nicht explizit angefordert werden.

Gruß eMeS

15

@EMeS: Hast du eigentlich die Problematik verstanden, um die es hier geht?

@nassim95: nimm die 2. Variante hiervon, ist im Moment einfacher für dich.

Die andere Möglichkeit ist:
Du speicherst die gesamte css Datei in einem String, wie du es mit der html Datei auch machst.
Dann fragst du ab, ob per GET / oder /styles.css angefragt wird. ist es letzteres, dann client.println(variable), else gib die html Seite aus

16

Also der Absolute Pfad müsste doch der hier sein :

client.println("<link rel='stylesheet' type='text/css' href='C:/Users/Verwalter/Documents/Arduino/Programme/TEstmitWIFI/styles.css' />");

Im Dateimanager ist es demetsprechend:
C:\Users\Verwalter\Documents\Arduino\Programme\TEstmitWIFI\styles.css

Im gleichem Verzeichnis liegt auch die *.ino Datei

Gruß Nassim

17

ElEspanol:
@EMeS: Hast du eigentlich die Problematik verstanden, um die es hier geht?

@nassim95: nimm die 2. Variante hiervon, ist im Moment einfacher für dich.
CSS im HTML-Code auf der Website einbinden - alle Möglichkeiten

Die andere Möglichkeit ist:
Du speicherst die gesamte css Datei in einem String, wie du es mit der html Datei auch machst.
Dann fragst du ab, ob per GET / oder /styles.css angefragt wird. ist es letzteres, dann client.println(variable), else gib die html Seite aus

Habe es halt bisher so versucht:

String gibStyle(){
String style = body{margin:60px 0px; padding:0px; text-align:center;}";
style +="h1{text-align: center; font-family:Arial, \"Trebuchet MS\", Helvetica, sans-serif;}";
style +="h2{text-align: center; font-family:Arial, \"Trebuchet MS\", Helvetica, sans-serif;}";
style +="a{text-decoration:none; width:75px; height:50px;";
style +="border-color:blue;";
style +="border-top:2px solid;";
style +="border-bottom:2px solid;";
style +="border-right:2px solid;";
style +="border-left:2px solid;";
style +="border-radius:10px 10px 10px;";
style +="-o-border-radius:10px 10px 10px;-webkit-border-radius:10px 10px 10px;";
style +="font-family:\"Trebuchet MS\",Arial, Helvetica, sans-serif;";
style +="-moz-border-radius:10px 10px 10px;";
style +="background-color:#293F5E; padding:8px;";
style +="text-align:center;}";
style +="a:link {color:white;}";      /* schrift im Button */
style +="a:visited {color:white;}";  /* visited link */
style +="a:hover {color:black;}";  /*Wenn maus drüber fährt */
style +="a:active {color:green;}";  /* Während der Button gedrückt */
Serial.println("Style:");
Serial.println(style);
return style;
}// Ende des Styles

und aufruf halt im header über:

String content ="<!DOCTYPE HTML>";     
      String content = "<HEAD>";
      content += "<meta name='apple-mobile-web-app-capable' content='yes' />";
      content += "<meta name='apple-mobile-web-app-status-bar-style' content='black-translucent' />";
      content += "<style type=\"text/css";
      content += gibStyle();
       Serial.print(content);
      content += "</style>";
      content += "<TITLE>Arduino Steuerung</TITLE></HEAD>";
18

Die Pfadangabe ist immer in Relation zur verwendeten html-Datei zu sehen, der Web-Server kennt im Betrieb nicht die Laufwerke und Ordner Deines Programmier-PC's. Im einfachsten Fall liegt Deine CSS-Datei im gleichen Verzeichnis wie Deine aufrufende HTML-Datei:

client.println("<link rel='stylesheet' type='text/css' href='styles.css' />");

Der Ordnung halber legt man sie aber in einem Unterordner '/css' ab.

client.println("<link rel='stylesheet' type='text/css' href='css/styles.css' />");

Liegt das 'css-Verzeichnis auf der gleichen Ebene wie das 'html-Verzeichnis', dann so:

client.println("<link rel='stylesheet' type='text/css' href='./css/styles.css' />");

Gruß eMeS

19

@ElEspanol

@EMeS: Hast du eigentlich die Problematik verstanden, um die es hier geht?

Offensichtlich nicht ...

20

@eMeS: falls du es immer noch nicht mitbekommen hast: Bei dem verwendeten ESP8266 gibt es keine Verzeichnisse, nicht einmal ein Filesystem, wo irgend etwas liegen kann.

Wenn die css Datei auf dem lokalen PC ist, auf der auch der Browser ist, müsste es theoretisch klappen, aber ich glaube eher, das der Browser Zugriffe auf lokale Laufwerke unterbindet.