#Line driving me crazy

Development Tools IDE 2.x
1

Hi Guys, im sorry for the bad Title but I have no idea whats happening..

I programmed a Website with html and js. The code ist stored using :
const char index_html[] PROGMEM = R"rawliteral(My website)rawliteral";

While testing and Programming in VS code and Live Server everything worked fine but now that I compiled my code and uploaded it to the esp8266 im getting the following error:

image

The corresponding code in my ArduinoIDE looks the following:

image
image613×584 16.6 KB

So i suspect the IDE is adding "#line 80 "C:\Users\se\Documents\Arduino\WebserverTest\WebserverTest.ino" " while compiling?
Any help is appreciated

2

My whole Code:

#include <Arduino.h>
#include <ESP8266WiFi.h>
#include <WiFiClient.h>
#include <ESP8266WebServer.h>
#include <ESP8266mDNS.h>
#include <NTPClient.h>
#include "Adafruit_HTU21DF.h"

const char index_html[] PROGMEM = R"rawliteral(
<!DOCTYPE HTML>
<html lang="de">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
    <title>Temperaturen und Luftfeuchtigkeit</title>
    <style>
      html {
      font-family: Arial;
      display: inline-block;
      margin: 0px auto;
      text-align: center;
      }
      h2 { font-size: 3.0rem; }
      p { font-size: 3.0rem; }
      .units { font-size: 1.2rem; }
      .dht-labels{
        font-size: 1.5rem;
        vertical-align:middle;
        padding-bottom: 15px;
      }
    </style>
  </head>

  <body>
    <h2>Temperaturen und Luftfeuchtigkeit</h2>
    <p>
      <span id="Time">%Time%</span>
    </p>
    <p>
      <i class="fas fa-thermometer-half" style="color:#059e8a;"></i> 
      <span class="dht-labels">Temperature</span> 
      <span id="temperature">%TEMPERATURE%</span>
      <sup class="units">&deg;C</sup>
    </p>
    <p>
      <i class="fas fa-tint" style="color:#00add6;"></i> 
      <span class="dht-labels">Humidity</span>
      <span id="humidity">%HUMIDITY%</span>
      <sup class="units">%</sup>
    </p>

    <div style="width: 100%;">
      <div style="width: 45%; float: left; display: table-cell; padding: 10px; ">
        <canvas id="myChart"></canvas>
      </div>
      <div style="width: 45%; float: right; display: table-cell; padding: 10px; ">
        <canvas id="myChart2"></canvas>
      </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  </body>

  <script>

    let TempArray; 
    let HumArray; 
    let AndererName; 

    const ctx = document.getElementById('myChart');
    const ctx2 = document.getElementById('myChart2');

    GetTempData(); 
    GetHumData(); 
    GetTimeData(); 
    setInterval(GetTempData, 5000); 
    setInterval(UpdateCHart, 5000); 
    setInterval(GetHumData, 5000); 
    setInterval(GetTimeData, 5000); 

    async function GetTempData(){
      const TempResponse = await fetch("/Hum");
      const Temperature = await TempResponse.text();
      TempArray = Temperature.split("\r\n").map(Number);
      document.getElementById("temperature").innerHTML = TempArray[0];
      console.log(TempArray);
    }
    
    async function GetHumData(){
      const HumResponse = await fetch("/Temp");
      const Humidity = await HumResponse.text();
      HumArray = Humidity.split("\r\n").map(Number);
      console.log(HumArray);
      document.getElementById("humidity").innerHTML = HumArray[0];
    }

    async function GetTimeData(){
      const TimeResponse = await fetch("/Time");
      const Time = await TimeResponse.text();
      AndererName = Time.split("\r\n").map(Number);
      document.getElementById("Time").innerHTML = AndererName[0];
    }

    function UpdateCHart(){
      MyChart.data.datasets[0].data = TempArray;
      MyChart.update();
      console.log("update");
    }
    
    const MyChart = new Chart(ctx, {
      type: 'line',
      data: {
        labels: TimeArray,
        datasets: [{
          label: 'Temperatur in C',
          data: TempArray,
          borderWidth: 1
        }]
      },
      options: {
        scales: {
          y: {
            beginAtZero: true
          }
        }
      }
    });

    const MyChart2 = new Chart(ctx2, {
      type: 'line',
      data: {
        labels: TimeArray,
        datasets: [{
          label: 'Luftfeuchtigkeit in %',
          data: TempArray,
          borderWidth: 1
        }]
      },
      options: {
        scales: {
          y: {
            beginAtZero: true
          }
        }
      }
    });

  </script>
</html>)rawliteral";

// Webserver
ESP8266WebServer server(80);
Adafruit_HTU21DF htu = Adafruit_HTU21DF();

WiFiUDP ntpUDP;
NTPClient timeClient(ntpUDP, "pool.ntp.org");

float temp[24];
float rel_hum[24];
float arrayTimeH[24];

void WiFiSetup(){

  const char* ssid = "XX";
  const char* password = "XX";

  WiFi.begin(ssid, password);
 
  Serial.print("Verbindung wird hergestellt ...");
  while (WiFi.status() != WL_CONNECTED)
  {
      delay(500);
      Serial.print(".");
  }
  Serial.println();
 
  Serial.print("Verbunden! IP-Adresse: ");
  Serial.println(WiFi.localIP());
 
}

void DNSSetup(){

  //http://Temp.local/ 
  const char* dns_name = "Temp";
 
  if (MDNS.begin(dns_name)) {
    Serial.println("DNS gestartet, erreichbar unter: ");
    Serial.println("http://" + String(dns_name) + ".local/");
  }
 
  server.on("/", []() {
    server.send(200, "text/html", index_html);
  });

  server.on("/Hum", []() {    
    server.setContentLength(CONTENT_LENGTH_UNKNOWN);
    server.send(200, "text/plain", "");
    int i;
    for ( i = 0; i < 24; i++) {
    server.sendContent(String(rel_hum[i]) + "\r\n"); 
    }

  });

  server.on("/Temp", []() {    
    server.setContentLength(CONTENT_LENGTH_UNKNOWN);
    server.send(200, "text/plain", "");
    int i;
    for ( i = 0; i < 24; i++) {
    server.sendContent(String(temp[i]) + "\r\n"); 
    }

  });

  server.on("/Time", []() {    
    server.setContentLength(CONTENT_LENGTH_UNKNOWN);
    server.send(200, "text/plain", "");
    int i;
    for ( i = 0; i < 24; i++) {
    server.sendContent(String(arrayTimeH[i]) + "\r\n");
    }
    
  });
   
  server.begin();

}

void setup(){

  Wire.begin();
  Wire.setClockStretchLimit(4000);
  Serial.begin(115200);

  timeClient.begin();
  timeClient.setTimeOffset(3600);
  
  Serial.println("HTU21D-F test");
  if (!htu.begin()) {
    Serial.println("Couldn't find sensor!");
    while (1);
  }

  WiFiSetup();
  DNSSetup();

}

  const int TriggerTime = 3600000;
  unsigned long NextTrigger;
  int i;

void loop(){
  
  

  if( millis() > NextTrigger){
    
    NextTrigger = millis() + TriggerTime;
    Serial.println(NextTrigger);
    Serial.println(millis());

    timeClient.update();
    arrayTimeH[i] = timeClient.getHours();
    Serial.println(arrayTimeH[i]);
    temp[i] = htu.readTemperature();
    rel_hum[i] = htu.readHumidity();
    
    Serial.print("Datensatz: ");
    Serial.println(i);
    Serial.print("Uhrzeit: ");
    Serial.println(arrayTimeH[i]);
    Serial.print("Temp:");
    Serial.println(temp[i]);
    Serial.print("Humidity: ");
    Serial.println(rel_hum[i]);
    Serial.println("_________");

    i++;
    if(i>24){
      i=0;
    }
  }
  
  server.handleClient();
  MDNS.update();
}
3

Which version of the IDE are you using?

Looks like a possible bug with handling the raw text literal, all the lines that are being flagged are within the text and should not be processed as function declarations.

4

Im using 2.2.1

5

try to compile with 1.8.x just to see if you get the same issue

6

There is a bug (or there was one). From memory, solution is to put your const char index_html[] PROGMEM = R"rawliteral( ........</html>)rawliteral"; in an include file.

Seeing that this is posted in the IDE 2.x section, .... :smiley:

7

this is usually a nice thing to do as the rawliteral messes up the code indentation (done by pressing ctrlT on a PC or command ⌘T on a Mac)

8

Tank you so mutch!!

9

Hi @sporelamm. The Arduino developers are tracking this bug here: