Ich komme bei diesem Thema nicht weiter: „invalid preprocessing directive #left“

International Deutsch
1

Hallo zusammen
Ich habe mich hier mal angemeldet, da ich mit dem o.g. Thema nicht weiterkomme:

Ich Lese hier schon länger mit und habe auch schon einige Tipps umgesetzt.
Ich habe das Programmieren in C(++) nur durch try and Error gelernt.

zu dem O.G. Programm
ich habe das gerade wiedergefunden und versuch es zu Kompilieren.
dabei kommt folgende Fehlermeldung
im Tab style_css invalid preprocessing directive #left

`[code]

/* For more information visit:https://fipsok.de /
body {
font-family: sans-serif;
background-color: #87cefa;
display: flex;
flex-flow: column;
align-items: center;
}
h1,h2 {
color: #e1e1e1;
text-shadow: 2px 2px 2px black;
}
li {
background-color: #feb1e2;
list-style-type: none;
margin-bottom: 10px;
padding: 2px 5px 1px 0;
box-shadow: 5px 5px 5px rgba(0,0,0,0.7);
}
li a:first-child, li b {
background-color: #8f05a5;
font-weight: bold;
color: white;
text-decoration:none;
padding: 2px 5px;
text-shadow: 2px 2px 1px black;
cursor:pointer;
}
li strong {
color: red;
}
input {
height:35px;
font-size:14px;
padding-left: .3em;
}
label + a {
text-decoration: none;
}
h1 + main {
display: flex;
}
aside {
display: flex;
flex-direction: column;
padding: 0.2em;
}
button {
height:40px;
width:130px;
font-size:16px;
margin-top: 1em;
box-shadow: 5px 5px 5px rgba(0,0,0,0.7);
}
div button {
background-color: #7bff97;
}
nav {
display: flex;
align-items: baseline;
justify-content: space-between;
}
#left {
align-items:flex-end;
text-shadow: 0.5px 0.5px 1px #757474;
}
#cr {
font-weight: bold;
cursor:pointer;
font-size: 1.5em;
}
#up {
width: auto;
}
.note {
background-color: #fecdee;
padding: 0.5em;
margin-top: 1em;
text-align: center;
max-width: 320px;
border-radius: 0.5em;
}
.no {
display: none;
}
form [title] {
background-color: skyblue;
font-size: 1em;
width: 120px;
}
form:nth-of-type(2) {
margin-bottom: 1em;
}
[value=Format] {
margin-top: 1em;
box-shadow: 5px 5px 5px rgba(0,0,0,0.7);
}
[name="group"] {
display: none;
}
[name="group"] + label {
font-size: 1.5em;
margin-right: 5px;
}
[name="group"] + label::before {
content: "\002610";
}
[name="group"]:checked + label::before {
content: '\002611\0027A5';
}
@media only screen and (max-width: 500px) {
.ip {
right: 6em;
position: relative;
}
aside {
max-width: 50vw;
}
}

[/code]
`
Der Fehler tritt auch bei "up" und "down" auf.
Siche rhabe ich noch irgendwas vergessen oden falsch gemacht, ich komme aber nicht drauf.
Kann mir jemand einen tipp geben?
oder die Fehlermeldung erklären ich ich sie in meinem hohen Alter vertehen kann.

Friedhelm

2

Hier bin ich nochmal
Habe gerade gesehen das das nur der eine Tab ist.

[code]

// ****************************************************************
// Sketch Esp8266 Webserver Modular(Tab)
// created: Jens Fleischer, 2018-05-16
// last mod: Jens Fleischer, 2020-12-28
// For more information visit: https://fipsok.de
// ****************************************************************
// Hardware: Esp8266
// Software: Esp8266 Arduino Core 2.4.2 - 3.1.2
// Getestet auf: Nodemcu, Wemos D1 Mini Pro, Sonoff Switch, Sonoff Dual
/******************************************************************
  Copyright (c) 2018 Jens Fleischer. All rights reserved.

  This file is free software; you can redistribute it and/or
  modify it under the terms of the GNU Lesser General Public
  License as published by the Free Software Foundation; either
  version 2.1 of the License, or (at your option) any later version.
  This file is distributed in the hope that it will be useful,
  but WITHOUT ANY WARRANTY; without even the implied warranty of
  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
  Lesser General Public License for more details.
*******************************************************************/
// Der WebServer Tab ist der Haupt Tab mit "setup" und "loop".
// #include <LittleFS.h> bzw. #include <FS.h> und #include <ESP8266WebServer.h> 
// müssen im Haupttab aufgerufen werden.
// Ein Connect Tab ist erforderlich.
// Inklusive Arduino OTA-Updates (Erfordert freien Flash-Speicher)
/**************************************************************************************/

#include <ESP8266WebServer.h>
#include <ArduinoOTA.h>         // https://arduino-esp8266.readthedocs.io/en/latest/ota_updates/readme.html
#include <LittleFS.h>           // Library für Dateisystem LittleFS
//#include <FS.h>               // Library für Dateisystem Spiffs einkommentieren wenn erforderlich

ESP8266WebServer server(80);

String sketchName() {           // Dateiname für den Admin Tab ab EspCoreVersion 2.6.0
  char file[sizeof(__FILE__)] = __FILE__;
  char * pos = strrchr(file, '.'); *pos = '\0';
  return file;
}

void setup() {
  Serial.begin(115200);
  delay(100);
  Serial.printf("\nSketchname: %s\nBuild: %s\t\tIDE: %d.%d.%d\n%s\n\n",
                (__FILE__), (__TIMESTAMP__), ARDUINO / 10000, ARDUINO % 10000 / 100, ARDUINO % 100 / 10 ? ARDUINO % 100 : ARDUINO % 10, ESP.getFullVersion().c_str());
  
  setupFS();                    // setupFS(); oder spiffs(); je nach Dateisystem
  connectWifi();
  admin();
  //bme280();
  //bme280Duo();
  //dht22();
  //ds18b20();
  //espboardLed();
  //onboardLed();               // Die Tabs die du nutzen möchtest, musst du Einkommentieren
  //setupTime();
  //ds18b20list();
  //bh1750();
  //dualRelais();
  //singleTimerSwitch();

  ArduinoOTA.onStart([]() {
    //save();                   // Wenn Werte vor dem Neustart gespeichert werden sollen
  });
  ArduinoOTA.begin();
  server.begin();
}

void loop() {
  ArduinoOTA.handle();
  server.handleClient();
  if (millis() < 0x2FFF || millis() > 0xFFFFF0FF) {    // Die Funktion "runtime()" wird nur für den Admin Tab gebraucht.
    runtime();                                         // Auskommentieren falls du den Admin Tab nicht nutzen möchtest.
  }
}


[/code]

hier der connect Tab

[code]

// ****************************************************************
// Arduino IDE Tab Esp8266 Connect STA Modular mit optischer Anzeige
// created: Jens Fleischer, 2018-04-08
// last mod: Jens Fleischer, 2020-12-28
// For more information visit: https://fipsok.de
// ****************************************************************
// Hardware: Esp8266
// Software: Esp8266 Arduino Core 2.4.2 - 3.1.2
// Getestet auf: Nodemcu, Wemos D1 Mini Pro, Sonoff Dual
/******************************************************************
  Copyright (c) 2018 Jens Fleischer. All rights reserved.

  This file is free software; you can redistribute it and/or
  modify it under the terms of the GNU Lesser General Public
  License as published by the Free Software Foundation; either
  version 2.1 of the License, or (at your option) any later version.
  This file is distributed in the hope that it will be useful,
  but WITHOUT ANY WARRANTY; without even the implied warranty of
  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
  Lesser General Public License for more details.
*******************************************************************/
// Diese Version von Connect STA sollte als Tab eingebunden werden.
// #include <ESP8266WebServer.h> oder #include <ESP8266WiFi.h> muss im Haupttab aufgerufen werden
// Die Funktion "connectWifi();" muss im Setup eingebunden werden.
/**************************************************************************************/

//#define CONFIG                                // Einkommentieren wenn der ESP dem Router die IP mitteilen soll.
#define NO_SLEEP                                // Auskommentieren wenn der Nodemcu den deep sleep Modus nutzt.

const char* ssid = "Netzwerkname";              // Darf bis zu 32 Zeichen haben.
const char* password = "PasswortvomNetzwerk";   // Mindestens 8 Zeichen jedoch nicht länger als 64 Zeichen.

#ifdef CONFIG
IPAddress staticIP(192, 168, 178, 99);          // Statische IP des NodeMCU ESP8266
IPAddress gateway(192, 168, 178, 1);            // IP-Adresse des Router
IPAddress subnet(255, 255, 255, 0);             // Subnetzmaske des Netzwerkes
IPAddress dns(192, 168, 178, 1);                // DNS Server
#endif

void connectWifi() {                            // Funktionsaufruf "connectWifi();" muss im Setup eingebunden werden.
  byte i = 0;
  //WiFi.disconnect();                          // Nur erforderlich wenn Esp den AP Modus nicht verlassen will.
  WiFi.persistent(false);                       // Auskommentieren wenn Netzwerkname und Passwort in den Flash geschrieben werden sollen.
  WiFi.mode(WIFI_STA);
  WiFi.begin(ssid, password);
#ifdef CONFIG
  WiFi.config(staticIP, gateway, subnet, dns);
#endif
  while (WiFi.status() != WL_CONNECTED) {
#ifdef NO_SLEEP
    pinMode(LED_BUILTIN, OUTPUT);               // OnBoardLed Nodemcu, Wemos D1 Mini Pro
    digitalWrite(LED_BUILTIN, 0);
#endif
    delay(500);
    digitalWrite(LED_BUILTIN, 1);
    delay(500);
    Serial.printf(" %d sek\n", ++i);
    if (i > 9) {
      Serial.print("\nVerbindung zum AP fehlgeschlagen !\n\n");
      ESP.restart();
    }
  }
  Serial.println("\nVerbunden mit: " + WiFi.SSID());
  Serial.println("Esp8266 IP: " + WiFi.localIP().toString());
}

[/code]

```hier FS_html_tab

[code]

<!DOCTYPE HTML> <!-- For more information visit: https://fipsok.de -->
<html lang="de">
  <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="style.css">
  <title>Filesystem Manager</title>
  <script>
    document.addEventListener('DOMContentLoaded', () => {
    list(JSON.parse(localStorage.getItem('sortBy')));
    btn.addEventListener('click', () => {
      if (!confirm(`Alle Daten gehen verloren.\nDu musst anschließend fs.html wieder laden.`)) event.preventDefault();
    });
    });
    async function list(to){
    let resp = await fetch(`?sort=${to}`);
    let json = await resp.json();
    let myList = document.querySelector('main'), noted = '';
    myList.innerHTML = '<nav><input type="radio" id="/" name="group" checked="checked"><label for="/"> &#128193;</label><span id="cr">+&#128193;</nav></span><span id="si"></span>';
    for (var i = 0; i < json.length - 1; i++) {
      let dir = '', f = json[i].folder, n = json[i].name, t = new Date(json[i].time*1000).toLocaleString();
      if (f != noted) {
      noted = f;
      dir = `<nav><input type="radio" id="${f}" name="group"><label for="${f}"></label> &#128193; ${f} <a href="?delete=/${f}">&#x1f5d1;&#xfe0f;</a></nav>`;
      }
      if (n != '') dir += `<li><a title="Geändert: ${t}" href="${f}/${n}">${n}</a><small> ${json[i].size}</small><a href="${f}/${n}"download="${n}"> Download</a> or<a href="?delete=${f}/${n}"> Delete</a>`;
      myList.insertAdjacentHTML('beforeend', dir);
    }
    myList.insertAdjacentHTML('beforeend', `<li><b id="so">&#9660; ${to ? to > 1 ? 'Time' : 'Size' : 'A - Z'}</b> LittleFS belegt ${json[i].usedBytes.replace(".00", "")} von ${json[i].totalBytes.replace(".00", "")}`);
    var free = json[i].freeBytes;
    cr.addEventListener('click', () => {
      document.getElementById('no').classList.toggle('no');
    });
    so.addEventListener('click', () => {
      list(to=++to%3);
      localStorage.setItem('sortBy', JSON.stringify(to));
    });
    document.addEventListener('change', (e) => {
      if (e.target.id == 'fs') {
      for (var bytes = 0, i = 0; i < event.target.files.length; i++) bytes += event.target.files[i].size;
      for (var output = `${bytes} Byte`, i = 0, circa = bytes / 1024; circa > 1; circa /= 1024) output = circa.toFixed(2) + [' KB', ' MB', ' GB'][i++];
      if (bytes > free) {
        si.innerHTML = `<li><b> ${output}</b><strong> Ungenügend Speicher frei</strong></li>`;
        up.setAttribute('disabled', 'disabled');
      } 
      else {
        si.innerHTML = `<li><b>Dateigröße:</b> ${output}</li>`;
        up.removeAttribute('disabled');
      }
      }
      document.querySelectorAll(`input[type=radio]`).forEach(el => { if (el.checked) document.querySelector('form').setAttribute('action', '/upload?f=' + el.id)});
    });
    document.querySelectorAll('[href^="?delete=/"]').forEach(node => {
      node.addEventListener('click', () => {
      if (!confirm('Sicher!')) event.preventDefault();
      });
    });
    }
  </script>
  </head>
  <body>
  <h2>ESP8266 Filesystem Manager</h2>
  <form method="post" enctype="multipart/form-data" action="/upload?f=/">
    <input id="fs" type="file" name="up[]" multiple>
    <button id="up" disabled>Upload</button>
  </form>
  <form id="no" class="no" method="POST">
    <input name="new" placeholder="Ordner Name" pattern="[^\x22\/%&\\:;]{0,31}[^\x22\/%&\\:;\s]{1}" title="Zeichen &#8220; % & / : ; \  sind nicht erlaubt." required="">
    <button>Create</button>
  </form>
  <main></main>
  <form action="/format" method="POST">
    <button id="btn">Format LittleFS</button>
  </form>
  </body>
</html>

[/code]

und der littleFS_tab


<!DOCTYPE HTML> <!-- For more information visit: https://fipsok.de -->
<html lang="de">
  <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="style.css">
  <title>Filesystem Manager</title>
  <script>
    document.addEventListener('DOMContentLoaded', () => {
    list(JSON.parse(localStorage.getItem('sortBy')));
    btn.addEventListener('click', () => {
      if (!confirm(`Alle Daten gehen verloren.\nDu musst anschließend fs.html wieder laden.`)) event.preventDefault();
    });
    });
    async function list(to){
    let resp = await fetch(`?sort=${to}`);
    let json = await resp.json();
    let myList = document.querySelector('main'), noted = '';
    myList.innerHTML = '<nav><input type="radio" id="/" name="group" checked="checked"><label for="/"> &#128193;</label><span id="cr">+&#128193;</nav></span><span id="si"></span>';
    for (var i = 0; i < json.length - 1; i++) {
      let dir = '', f = json[i].folder, n = json[i].name, t = new Date(json[i].time*1000).toLocaleString();
      if (f != noted) {
      noted = f;
      dir = `<nav><input type="radio" id="${f}" name="group"><label for="${f}"></label> &#128193; ${f} <a href="?delete=/${f}">&#x1f5d1;&#xfe0f;</a></nav>`;
      }
      if (n != '') dir += `<li><a title="Geändert: ${t}" href="${f}/${n}">${n}</a><small> ${json[i].size}</small><a href="${f}/${n}"download="${n}"> Download</a> or<a href="?delete=${f}/${n}"> Delete</a>`;
      myList.insertAdjacentHTML('beforeend', dir);
    }
    myList.insertAdjacentHTML('beforeend', `<li><b id="so">&#9660; ${to ? to > 1 ? 'Time' : 'Size' : 'A - Z'}</b> LittleFS belegt ${json[i].usedBytes.replace(".00", "")} von ${json[i].totalBytes.replace(".00", "")}`);
    var free = json[i].freeBytes;
    cr.addEventListener('click', () => {
      document.getElementById('no').classList.toggle('no');
    });
    so.addEventListener('click', () => {
      list(to=++to%3);
      localStorage.setItem('sortBy', JSON.stringify(to));
    });
    document.addEventListener('change', (e) => {
      if (e.target.id == 'fs') {
      for (var bytes = 0, i = 0; i < event.target.files.length; i++) bytes += event.target.files[i].size;
      for (var output = `${bytes} Byte`, i = 0, circa = bytes / 1024; circa > 1; circa /= 1024) output = circa.toFixed(2) + [' KB', ' MB', ' GB'][i++];
      if (bytes > free) {
        si.innerHTML = `<li><b> ${output}</b><strong> Ungenügend Speicher frei</strong></li>`;
        up.setAttribute('disabled', 'disabled');
      } 
      else {
        si.innerHTML = `<li><b>Dateigröße:</b> ${output}</li>`;
        up.removeAttribute('disabled');
      }
      }
      document.querySelectorAll(`input[type=radio]`).forEach(el => { if (el.checked) document.querySelector('form').setAttribute('action', '/upload?f=' + el.id)});
    });
    document.querySelectorAll('[href^="?delete=/"]').forEach(node => {
      node.addEventListener('click', () => {
      if (!confirm('Sicher!')) event.preventDefault();
      });
    });
    }
  </script>
  </head>
  <body>
  <h2>ESP8266 Filesystem Manager</h2>
  <form method="post" enctype="multipart/form-data" action="/upload?f=/">
    <input id="fs" type="file" name="up[]" multiple>
    <button id="up" disabled>Upload</button>
  </form>
  <form id="no" class="no" method="POST">
    <input name="new" placeholder="Ordner Name" pattern="[^\x22\/%&\\:;]{0,31}[^\x22\/%&\\:;\s]{1}" title="Zeichen &#8220; % & / : ; \  sind nicht erlaubt." required="">
    <button>Create</button>
  </form>
  <main></main>
  <form action="/format" method="POST">
    <button id="btn">Format LittleFS</button>
  </form>
  </body>
</html>

[/code]`

der Vollständigkeit  der style_css tab
[code]

/* For more information visit:https://fipsok.de */
body {
  font-family: sans-serif;
  background-color: #87cefa;
  display: flex;
  flex-flow: column;
  align-items: center;
}
h1,h2 {
  color: #e1e1e1;
  text-shadow: 2px 2px 2px black;
}
li {
  background-color: #feb1e2;
  list-style-type: none;
  margin-bottom: 10px;
  padding: 2px 5px 1px 0;
  box-shadow: 5px 5px 5px rgba(0,0,0,0.7);
}
li a:first-child, li b {
  background-color: #8f05a5;
  font-weight: bold;
  color: white;
  text-decoration:none;
  padding: 2px 5px;
  text-shadow: 2px 2px 1px black;
  cursor:pointer;
}
li strong {
  color: red;
}
input {
  height:35px;
  font-size:14px;
  padding-left: .3em;
}
label + a {
  text-decoration: none;
}
h1 + main {
  display: flex;
}  
aside {
  display: flex;
  flex-direction: column;
  padding: 0.2em;
}
button {
  height:40px;
  width:130px;
  font-size:16px;
  margin-top: 1em;
  box-shadow: 5px 5px 5px rgba(0,0,0,0.7);
}
div button {
  background-color: #7bff97;
}
nav {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
#left {
  align-items:flex-end;
  text-shadow: 0.5px 0.5px 1px #757474;
}
#cr {
  font-weight: bold;
  cursor:pointer;
  font-size: 1.5em;
}
#up {
  width: auto; 
}
.note {
  background-color: #fecdee;
  padding: 0.5em;
  margin-top: 1em;
  text-align: center;
  max-width: 320px;
  border-radius: 0.5em;
}
.no {
  display: none;
}
form [title] {
  background-color: skyblue;
  font-size: 1em;
  width: 120px;
}
form:nth-of-type(2) {
  margin-bottom: 1em;
}
[value*=Format] {
  margin-top: 1em;
  box-shadow: 5px 5px 5px rgba(0,0,0,0.7);
}
[name="group"] {
  display: none;
}
[name="group"] + label {
  font-size: 1.5em;
  margin-right: 5px;
}
[name="group"] + label::before {
  content: "\002610";
} 
[name="group"]:checked + label::before {
  content: '\002611\0027A5';
}
@media only screen and (max-width: 500px) {
  .ip {
    right: 6em;
    position: relative;
  }
  aside {
    max-width: 50vw;
  }
}

[/code]

Danke für die aufmerksamkeit
ich hoffe es passt so


Friedhelm
3

Was fehlt hier am Ende?

4

Habe ich versucht zu lesen und zu verstehen.
die Fehlermeldung ist "invalid preprocessing directive #left"
darüber habe ich nix gefunden . daher ja hier meine Frage

Friedhelm

5

#left ist keine gültige Präprozessor Anweisung.
Wahrscheinlich zu viel C&P verwendet oder irgendwo vertippt.
Fang nochmal von vorn an mit dem originalen Code.

6

Der Tipp ist goldrichtig

@frickelfred56
und weiterhin in kleinen Schritten arbeiten. Nicht alles auf einmal versuchen. Das klappt nie.
Also Tab für Tab einfügen und erst testen. Dann wird die Fehlersuche einfacher.

7

Du versuchst eine CSS Datei durch den Compiler zu jagen.
Das kann der nicht verarbeiten.

8

Danke für die Antworten
Das mit den kleinen Schritten hab ich gemacht. mindestens 3 mal.

Ich versuche das heute Abend nochmal.