Go Down

Topic: Sending HTML from YunServer/YunClient object (Read 2257 times) previous topic - next topic

rpurser

Hi,

I'm porting one of my sketches from Uno to Yun that sends an HTML page to a browser, which includes javascript code.

My code to serve the page looks something like this (HTML is more complex, but this is just for illustration):

Code: [Select]
YunClient client = server.accept();

   client.println("<!DOCTYPE html>");
    client.println("<html>");
    client.println("<head>");
    client.println("<title>Arduino Web Page</title>");
    client.println("</head>");
    client.println("<body>");
    client.println("<h1>Arduino AJAX Sensor Monitor</h1>");
    client.println("<p>Tmp102: <span id=\"tmp102_txt\">Unread</span>&degC</p>");
    client.println("<p>HH10D: <span id=\"hh10d_txt\">Unread</span>%</p>");
    client.println("<p>MPL3115A1 Pressure: <span id=\"MPL3115A1Pres_txt\">Unread</span> Pa</p>");
    client.println("<p>MPL3115A1 Temp: <span id=\"MPL3115A1Temp_txt\">Unread</span>&degC</p>");
    client.println("</body>");
    client.println("</html>");


This is sent to the web browser, but the text is being put inside a <pre> HTML tag.  That makes sense when you're first experimenting with this functionality, but is there anyway to disable this mechanism, so I can just send the raw HTML? 

I understand that it's possible to get linux side to serve the webpage, but I'd like to do it this way in order to teach my students basic concepts.

Thanks,
-Rob Purser
Visit www.mathworks.com/iot to learn more about analyzing your IoT data.

federicofissore

By default, when yunclient responses are consumed by the webserver as "/arduino/" prefixed APIs, result is treated as plain text
To override this behaviour, you need to set the appropriate http headers
Take a look here
http://forum.arduino.cc//index.php?topic=191895.0

rpurser

Thanks so much.  I'd seen that post, and tried to use that information to do this.  I'll try it again and see if I can get it working, then post the outcomes here.  I'm hoping to use the Yun in an Arduino class that I teach in February 2014 -- do you have a sense whether this kind of information will be documented by then?

Thanks,
-Rob
Visit www.mathworks.com/iot to learn more about analyzing your IoT data.

rpurser

OK, I got it working.

The key thing is to preface the response with the correct  header field:

Code: [Select]
  client.println("Status: 200");
  client.println("Content-type: text/html");
  client.println(); //mandatory blank line
  client.println("<!DOCTYPE html>");
  client.println("<html>");
.
.
.
client.println("</html>");


If you're interested in the complete sketch, it's available here on GitHub
https://github.com/rpurser47/funwitharduino/blob/master/Class_4_Ajax/Class_4_Ajax.ino
Visit www.mathworks.com/iot to learn more about analyzing your IoT data.

Go Up