Hardware Reference
In-Depth Information
8
The
sendHttpHeader()
method
looks like this.
// send an HTTP header to the client:
void sendHttpHeader(Client thisClient, int errorCode) {
thisClient.print(F("HTTP/1.1 "));
switch(errorCode) {
case 200: // OK
thisClient.println(F("200 OK"));
thisClient.println(F("Content-Type: text/html"));
break;
case 404: // file not found
thisClient.println(F("404 Not Found"));
break;
}
// response header ends with an extra linefeed:
thisClient.println();
}
If you run the code you've got so far, you should
have a working web server. Whatever text files
you put on the SD card should be accessible via
the browser. You're not set up to serve anything other than
HTML text documents (note that the
sendHttpHeader()
method only returns
Content-Type: text/html
), but you can
do a lot with that. Try making a few pages that link to each
other and put them on the SD card, then navigate through
them with a browser. Try it on a mobile phone browser, too,
since that's your original goal here. Resist the temptation
to send the URL to all your friends just yet—there is more
work to do.
Next, it's time to write the actual HTML interface pages.
You need a page that can show the temperature and
provide a form to enter a new thermostat setting. When
the user submits the form, she should get feedback that
her new setting has been received and stored, and the
interface should reset itself. You also need a camera to get
a picture of the room. Finally, it should look good on the
small screen of a tablet or smartphone. All of this can be
done in HTML.
Mark It up
The main interface
page will be called
index.htm. You're using the three-letter
extension rather than
.
html because
the SD library only takes eight-letter,
three-letter extension names.
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
<meta name="HandheldFriendly" content="true" />
<meta name="viewport"
content="width=device-width, height=device-height" />
<script type="text/javascript">
function refresh() {
var today=new Date();
document.images["pic"].src=
"http://visitor:password!@yourname.dyndns.com/image/jpeg.cgi"+"?"+today;
if(document.images) window.onload=refresh;
t=setTimeout('refresh()',500);
}
</script>
</head>
The head of the document needs a
little meta info. There's a link to a .css
stylesheet—so you can set fonts and
colors and such—and two meta tags
allowing mobile browsers to format the
page to suit their screens.
Finally, there's JavaScript that allows
the image to refresh without changing
the rest of the page.
»
