I am looking for a simpler method to add a web page content to my code using an array, instead of comma separating each line.
In the Community Libraries, there is a “WebServer” example there which works nice.
One of the examples Is "Web_AjaxRGB.ino"
In there they have the following:
if (type == WebServer::GET)
{
/* store the HTML in program memory using the P macro */
P(message) =
"<!DOCTYPE html><html><head>"
"<title>Webduino AJAX RGB Example</title>"
"<link href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css' rel=stylesheet />"
"<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js'></script>"
"<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js'></script>"
"<style> body { background: black; } #red, #green, #blue { margin: 10px; } #red { background: #f00; } #green { background: #0f0; } #blue { background: #00f; } </style>"
"<script>"
// change color on mouse up, not while sliding (causes much less traffic to the Arduino):
// "function changeRGB(event, ui) { var id = $(this).attr('id'); if (id == 'red') $.post('/rgb', { red: ui.value } ); if (id == 'green') $.post('/rgb', { green: ui.value } ); if (id == 'blue') $.post('/rgb', { blue: ui.value } ); } "
// "$(document).ready(function(){ $('#red, #green, #blue').slider({min: 0, max:255, change:changeRGB}); });"
// change color on slide and mouse up (causes more traffic to the Arduino):
"function changeRGB(event, ui) { jQuery.ajaxSetup({timeout: 110}); /*not to DDoS the Arduino, you might have to change this to some threshold value that fits your setup*/ var id = $(this).attr('id'); if (id == 'red') $.post('/rgb', { red: ui.value } ); if (id == 'green') $.post('/rgb', { green: ui.value } ); if (id == 'blue') $.post('/rgb', { blue: ui.value } ); } "
"$(document).ready(function(){ $('#red, #green, #blue').slider({min: 0, max:255, change:changeRGB, slide:changeRGB}); });"
"</script>"
"</head>"
"<body style='font-size:62.5%;'>"
"<div id=red></div>"
"<div id=green></div>"
"<div id=blue></div>"
"</body>"
"</html>";
server.printP(message);
}
Instead of copy and pasting the web page content such as everything from to , and then adding quotes around every line, is there a way to convert my content to a array and use that instead?
For instance, my site content is:
<!DOCTYPE html>
<html lang='en'>
<head>
<title>Main Page</title>
<meta charset='windows-1252'>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<link href='https://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css' rel='stylesheet'>
</head>
<body>
<div class='container'>
<div class='jumbotron'>
<div class='text-center'>
<h1>The IoT Controller</h1>
</div>
</div>
</div>
</body>
</html>
The above converted to an array is the following. I would like to be able to send this instead of adding quotes around my web content.
mySite[]={0x3c,0x21,0x44,0x4f,0x43,0x54,0x59,0x50,0x45,0x20,0x68,0x74,0x6d,0x6c,0x3e,0x0d,0x0a,0x3c,0x68,0x74,0x6d,0x6c,0x20,0x6c,0x61,0x6e,0x67,0x3d,0x27,0x65,0x6e,0x27,0x3e,0x0d,0x0a,0x3c,0x68,0x65,0x61,0x64,0x3e,0x0d,0x0a,0x20,0x20,0x3c,0x74,0x69,0x74,0x6c,0x65,0x3e,0x4d,0x61,0x69,0x6e,0x20,0x50,0x61,0x67,0x65,0x3c,0x2f,0x74,0x69,0x74,0x6c,0x65,0x3e,0x0d,0x0a,0x20,0x20,0x3c,0x6d,0x65,0x74,0x61,0x20,0x63,0x68,0x61,0x72,0x73,0x65,0x74,0x3d,0x27,0x77,0x69,0x6e,0x64,0x6f,0x77,0x73,0x2d,0x31,0x32,0x35,0x32,0x27,0x3e,0x0d,0x0a,0x20,0x20,0x3c,0x6d,0x65,0x74,0x61,0x20,0x6e,0x61,0x6d,0x65,0x3d,0x27,0x76,0x69,0x65,0x77,0x70,0x6f,0x72,0x74,0x27,0x20,0x63,0x6f,0x6e,0x74,0x65,0x6e,0x74,0x3d,0x27,0x77,0x69,0x64,0x74,0x68,0x3d,0x64,0x65,0x76,0x69,0x63,0x65,0x2d,0x77,0x69,0x64,0x74,0x68,0x2c,0x20,0x69,0x6e,0x69,0x74,0x69,0x61,0x6c,0x2d,0x73,0x63,0x61,0x6c,0x65,0x3d,0x31,0x27,0x3e,0x0d,0x0a,0x20,0x20,0x3c,0x6c,0x69,0x6e,0x6b,0x20,0x68,0x72,0x65,0x66,0x3d,0x27,0x68,0x74,0x74,0x70,0x73,0x3a,0x2f,0x2f,0x6e,0x65,0x74,0x64,0x6e,0x61,0x2e,0x62,0x6f,0x6f,0x74,0x73,0x74,0x72,0x61,0x70,0x63,0x64,0x6e,0x2e,0x63,0x6f,0x6d,0x2f,0x62,0x6f,0x6f,0x74,0x73,0x74,0x72,0x61,0x70,0x2f,0x33,0x2e,0x30,0x2e,0x32,0x2f,0x63,0x73,0x73,0x2f,0x62,0x6f,0x6f,0x74,0x73,0x74,0x72,0x61,0x70,0x2e,0x6d,0x69,0x6e,0x2e,0x63,0x73,0x73,0x27,0x20,0x72,0x65,0x6c,0x3d,0x27,0x73,0x74,0x79,0x6c,0x65,0x73,0x68,0x65,0x65,0x74,0x27,0x3e,0x0d,0x0a,0x3c,0x2f,0x68,0x65,0x61,0x64,0x3e,0x0d,0x0a,0x0d,0x0a,0x0d,0x0a,0x3c,0x62,0x6f,0x64,0x79,0x3e,0x0d,0x0a,0x0d,0x0a,0x3c,0x64,0x69,0x76,0x20,0x63,0x6c,0x61,0x73,0x73,0x3d,0x27,0x63,0x6f,0x6e,0x74,0x61,0x69,0x6e,0x65,0x72,0x27,0x3e,0x0d,0x0a,0x20,0x20,0x20,0x20,0x3c,0x64,0x69,0x76,0x20,0x63,0x6c,0x61,0x73,0x73,0x3d,0x27,0x6a,0x75,0x6d,0x62,0x6f,0x74,0x72,0x6f,0x6e,0x27,0x3e,0x0d,0x0a,0x20,0x20,0x20,0x20,0x20,0x20,0x20,0x20,0x3c,0x64,0x69,0x76,0x20,0x63,0x6c,0x61,0x73,0x73,0x3d,0x27,0x74,0x65,0x78,0x74,0x2d,0x63,0x65,0x6e,0x74,0x65,0x72,0x27,0x3e,0x0d,0x0a,0x20,0x20,0x20,0x20,0x20,0x20,0x20,0x20,0x20,0x20,0x20,0x20,0x3c,0x68,0x31,0x3e,0x54,0x68,0x65,0x20,0x49,0x6f,0x54,0x20,0x43,0x6f,0x6e,0x74,0x72,0x6f,0x6c,0x6c,0x65,0x72,0x3c,0x2f,0x68,0x31,0x3e,0x0d,0x0a,0x20,0x20,0x20,0x20,0x3c,0x2f,0x64,0x69,0x76,0x3e,0x0d,0x0a,0x09,0x3c,0x2f,0x64,0x69,0x76,0x3e,0x0d,0x0a,0x3c,0x2f,0x64,0x69,0x76,0x3e,0x0d,0x0a,0x0d,0x0a,0x0d,0x0a,0x3c,0x2f,0x62,0x6f,0x64,0x79,0x3e,0x0d,0x0a,0x3c,0x2f,0x68,0x74,0x6d,0x6c,0x3e};
