arduinoesp8266arduino-idearduino-esp8266

Preprocessor directives appear within HTML embedded in a raw string literal


Following problem: I am creating a webinterface for an ESP8266. The Webinterface should make HTTP Requests to the ESP that then executes Code. My Problem is that i get weird preprocessor information in my JavaScript code

        let buttonHoldInterval;
        let speedMultiplier = document.getElementById('speed-slider').value;
        document.getElementById('speed-slider').addEventListener('change', function() {
            speedMultiplier = this.value;
            console.log('Speed multiplier set to ' + speedMultiplier);
            fetch('/set-speed/' + speedMultiplier);
        })
#line 94 "C:\\Users\\david\\Desktop\\Fomanoch\\fomanoch\\fomanoch.ino"
function handleButtonHold(buttonId, message);
#line 105 "C:\\Users\\david\\Desktop\\Fomanoch\\fomanoch\\fomanoch.ino"
function handleButtonClick(buttonId, message);
#line 94 "C:\\Users\\david\\Desktop\\Fomanoch\\fomanoch\\fomanoch.ino"
        function handleButtonHold(buttonId, message) {
          document.getElementById(buttonId).addEventListener('mousedown', function() {
          console.log(message + ' button pressed');
          fetch('/' + buttonId + '/press');
        })

I purposfully left no spaces in the ino code:

const char* html = R"rawliteral(
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
    <style>

    </style>
</head>
<body>
    <div id="top-buttons">
    </div>
    <div id="controller">
        <div></div>
        <button id="forward">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M214.6 41.4c-12.5-12.5-32.8-12.5-45.3 0l-160 160c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 141.2V448c0 17.7 14.3 32 32 32s32-14.3 32-32V141.2L329.4 246.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-160-160z"/></svg>
        </button>
        <div></div>
        <button id="left">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.2 288 416 288c17.7 0 32-14.3 32-32s-14.3-32-32-32l-306.7 0L214.6 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-160 160z"/></svg>
        </button>
        <button id="backward">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M169.4 470.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 370.8 224 64c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 306.7L54.6 265.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z"/></svg>
        </button>
        <button id="right">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z"/></svg>
        </button>
        <button id="light-front">Light Front</button>
        <button id="light-back">Light Back</button>
        <button id="horn">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M533.6 32.5C598.5 85.2 640 165.8 640 256s-41.5 170.7-106.4 223.5c-10.3 8.4-25.4 6.8-33.8-3.5s-6.8-25.4 3.5-33.8C557.5 398.2 592 331.2 592 256s-34.5-142.2-88.7-186.3c-10.3-8.4-11.8-23.5-3.5-33.8s23.5-11.8 33.8-3.5zM473.1 107c43.2 35.2 70.9 88.9 70.9 149s-27.7 113.8-70.9 149c-10.3 8.4-25.4 6.8-33.8-3.5s-6.8-25.4 3.5-33.8C475.3 341.3 496 301.1 496 256s-20.7-85.3-53.2-111.8c-10.3-8.4-11.8-23.5-3.5-33.8s23.5-11.8 33.8-3.5zm-60.5 74.5C434.1 199.1 448 225.9 448 256s-13.9 56.9-35.4 74.5c-10.3 8.4-25.4 6.8-33.8-3.5s-6.8-25.4 3.5-33.8C393.1 284.4 400 271 400 256s-6.9-28.4-17.7-37.3c-10.3-8.4-11.8-23.5-3.5-33.8s23.5-11.8 33.8-3.5zM301.1 34.8C312.6 40 320 51.4 320 64V448c0 12.6-7.4 24-18.9 29.2s-25 3.1-34.4-5.3L131.8 352H64c-35.3 0-64-28.7-64-64V224c0-35.3 28.7-64 64-64h67.8L266.7 40.1c9.4-8.4 22.9-10.4 34.4-5.3z"/></svg>
        </button>
    </div>
    <input type="range" min="0" max="1" step="0.01" value="0.5" id="speed-slider">
    <script>
        let buttonHoldInterval;
        let speedMultiplier = document.getElementById('speed-slider').value;
        document.getElementById('speed-slider').addEventListener('change', function() {
            speedMultiplier = this.value;
            console.log('Speed multiplier set to ' + speedMultiplier);
            fetch('/set-speed/' + speedMultiplier);
        })
        function handleButtonHold(buttonId, message) {
          document.getElementById(buttonId).addEventListener('mousedown', function() {
          console.log(message + ' button pressed');
          fetch('/' + buttonId + '/press');
        })
        document.getElementById(buttonId).addEventListener('mouseup', function() {
          console.log(message + ' button released');
          fetch('/' + buttonId + '/release');
          clearInterval(buttonHoldInterval);
        })
}
        function handleButtonClick(buttonId, message) {
            document.getElementById(buttonId).addEventListener('click', function() {
                console.log(message + ' button clicked');
                fetch('/' + buttonId);
            });
        }
        handleButtonHold('forward', 'Forward');
        handleButtonHold('backward', 'Backward');
        handleButtonHold('left', 'Left');
        handleButtonHold('right', 'Right');
        handleButtonHold('horn', 'Horn');
        handleButtonClick('light-front', 'Light Front');
        handleButtonClick('light-back', 'Light Back');
        document.getElementById('mode-switch').addEventListener('click', function() {
            console.log('Mode switch button pressed');
        });
    </script>
</body>
</html>
)rawliteral";

I tried changing up indentation, setting or deleting semicolons etc. Nothing worked so far. I am happy with every help i can get.

How to reproduce the error: Use the newest Arduino IDE. Use the official ESP8266 library. Upload the code to the ESP and connect to the WIFI. (https://sourceb.in/l71sjRog4d) Open the website of the ESP

Update: The workarounds mentioned don't work. And even if they would it doesn't solve the real problem that the preprocessor adds these the lines on a String. More importantly this happens every 3 to 4 projects. Since initially making this code i made 8 similar programs. Two of which had the same problem.


Solution

  • The way i solved this problem was by deleting all SVGs. The reason probably was the path of the svgs. After i used a smaller SVG with a shorter path it worked with no problems.

    So my guess is that the Rawliteral string has problems with really long oneliners.

    In this case i fixed my problem by making every single line a string and connecting them together.

    Hope this helps.