Preprocessor directives appear within HTML embedded in a raw string literal

Question

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.

It seems that you just all files through the preprocessor. How is your build-system set up? — Some programmer dude
– Some programmer dude, Commented Apr 8, 2024 at 9:16
My Code consists of one .ino file that is uploaded through the Arduino IDE to the ESP — Lipe
– Lipe, Commented Apr 8, 2024 at 9:21
@PepijnKramer const char* html = R"rawliteral( … )rawliteral"; is the C++ code around the html. — Bergi
– Bergi, Commented Apr 8, 2024 at 13:45

Lipe · Accepted Answer · 2024-04-30 08:51:19Z

1

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.

answered Apr 30, 2024 at 8:51

Lipe

7110 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

hcheung · Accepted Answer · 2024-04-15 10:31:38Z

-1

#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);
}

The problem has nothing to do with C++, or Arduino. Your Arduino code is fine.

You have syntax errors in your JavaScript code for those two JavaScript functions. These errors can actually be seen if you open the browser's development mode.

Error shown on Safari

Error shown on Firefox

To solve the syntax errors, change your function definition to:

var handleButtonHold = function(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);
    })
}
var handleButtonClick = function(buttonId, message) {
    document.getElementById(buttonId).addEventListener('click', function() {
        console.log(message + ' button clicked');
        fetch('/' + buttonId);
    });
}

Once you fixed those code, the problem you seen will go away. However, there is also another error where there is no mode-switch defined in your html, so document.getElementById('mode-switch') return null.

edited Apr 15, 2024 at 10:31

answered Apr 15, 2024 at 10:23

hcheung

4,4283 gold badges16 silver badges28 bronze badges

8 Comments

Bergi Over a year ago

"The problem has nothing to do with C++, or Arduino" - then why does the ESP8266 send these lines to the browser if they are not to be found in the source code?

Bergi Over a year ago

Using var handleButtonHold = function(buttonId, message) { instead of function handleButtonHold(buttonId, message) { is just a workaround as apparently those don't get mangled. It should not be necessary though.

hcheung Over a year ago

For ESP8266, these lines are just a string.

hcheung Over a year ago

@bergi, I'm done. Run the code and see it yourself.

Bergi Over a year ago

Yes, these lines are just a string. And where does that string come from? It's not in the source code. That's the actual problem that needs fixing. It shouldn't matter for the string whether it contains var or function, but apparently it does.

|

Collectives™ on Stack Overflow

Preprocessor directives appear within HTML embedded in a raw string literal

2 Answers 2

Comments

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related