Hardware Reference
In-Depth Information
The body of the document has an
image tag that links to an image on
another server; more details on that
below.
8
Continued from previous page.
<body onload="refresh()">
<div class="header"><h1>Thermostat Control</h1></div>
<div class="main">
<img src="http://visitor:password!@yourname.dyndns.com/image/jpeg.
cgi" width="300" id="pic">
<form name="tempSetting" action="response.htm" method="POST">
<p>Current temperature:
$temperature
</p>
Thermostat setting (°C):
<input name="thermostat" type="number"
min="20"
max="40"
step="1"
value=
$thermostat
>
<input type="submit" value="submit">
</form>
Air conditioner is
$status
</div>
</body>
</html>
The form in the body is for setting the
thermostat level. It calls a separate
document, response.htm, using a POST
request, to which the server has to
respond. You already wrote the initial
response in your sketch above, when
the server looks for the “thermo-
stat” value at the end of the POST
request. Check out case 2 in the switch
statement in the sketch above. You
can see that the temperature is con-
strained to a range from 20 degrees
to 40 degrees, which is reasonable in
Celsius.
8
The server will need
to replace these variables
before serving the file.
You'll see how to do this
later in this chapter.
Save this as index.htm, and then start a
new document called response.htm.
The response
page,
response.htm, is a lot simpler than the
index page. All it does is report the
temperature, the thermostat setting,
and the status of the air conditioner
attached to the relay. It uses the same
CSS, and the same mobile phone meta
tags, as well as a meta
http-equiv
tag
that sends the browser back to the
index after three seconds. You may
recognize this technique from the cat
cam page in Chapter 3.
Give a Response
<html>
<head>
<meta http-equiv="refresh" content="3; URL=index.htm" />
<link rel="stylesheet" type="text/css" href="mystyle.css" />
<meta name="HandheldFriendly" content="true" />
<meta name="viewport" content="width=device-width, height=device-
height" />
</head>
<body>
<div class="header"><h1>Thermostat Control</h1></div>
<div class="main">
<p>Current temperature:
$temperature
°C
</p>
<p>
Thermostat setting changed to
$thermostat
°C
</p>
<p>Air conditioner is
$status
</p>
<a href="index.htm">Return to controls</a>
</div>
</body>
</html>
8
The server will need
to replace these variables
before serving the file.
Did you notice the variables in the
HTTP documents that look like PHP
variables, starting with dollar signs?
These need to be replaced with data
from the server before the page is
served. You don't have PHP on the
Arduino, but you can write code into
your sketch to look for these strings
and replace them.
Before that, though, you need to finish
by writing a CSS document for the site.
