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.
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.