Only 2 sensors at the moment, one inside and one outside as you can imagine.
Although the 1-Wire bus and the software can have many more, the other sensors I have across the house are too far from the router and I need to get a wire across.
The 1-Wire hardware is very simple: the bus is connected to an I/O pin with a pull-up resistor to VCC, the strong pull-up to allow temperature conversion with parasite power is achieved by setting the pin to output high by software to get more current into the bus.
The code use the DallasTemperature library by Miles Burton, which use the OneWire library to manage the bus itself.
The main challenge is to fit the code and the web content (html, css, js) on the small program memory the processor have (30KB), and to make sure each response does not exceed the TCP/IP buffer size I have allocated (1KB).
jQuery CDN to my rescue!
This has 2 advantages: a) I don't need to store the jQuery on the processor. b) the files are probably already got into my device cache when I browsed other mobile sites.
The HTML:
<!DOCTYPE html><html>
<head>
<meta name='viewport' content='width=device-width, initial-scale=1' />
<title>TempServer</title>
<link rel='stylesheet' href='//code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css' />
<link rel='stylesheet' href='main.css' />
<script src='//code.jquery.com/jquery-1.8.2.min.js'></script>
<script src='//code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js'></script>
<script src='//stevenlevithan.com/assets/misc/date.format.js'></script>
<script src='main.js'></script>
</head>
<body>
<div id='main' data-role='page'>
<div data-role='header' data-position='fixed'>
<h3>Is it hot?</h3>
</div>
<div data-role='content'>
<ul id='list' data-role='listview' data-inset='true'></ul>
<p id='info'></p>
</div>
</div>
</body>
</html>
The Java Script (not minified):
$(document).ready(function () {reload();
});
function reload() {
$.getJSON('list.json', function (data) {
var items = [];
$.each(data.list, function (key, val) {
items.push('<li id="' + val.id + '"><a><h3>' + val.name +
'</h3><p>' + val.id + '</p><p class="ui-li-aside">' +
val.val.toFixed(1) + ' °C</p></a></li>');
});
$('#list').html(items.join('')).
trigger('create').listview('refresh');
var time = new Date(data.uptime);
$('#info').html(
'Uptime: ' + time.format('isoTime') +
' (' + data.free + ' bytes free)');
});
setTimeout(reload, 10000);
}
The CSS:
.ui-li-aside{
font-weight:bold;
font-size:xx-large;
}
#info
{
margin-top:10px;
text-align:center;
font-size:small;
}
And the JSON response with the measures:
{"list":[
{"id":"104938A501080057","name":"Sensor 1","val":16.188},
{"id":"28DA3E95040000CD","name":"Sensor 2","val":0.813}],
"uptime":57430902,
"free":620
}
You can get the full sketch in here: TempServer.ino
The hardware schematic is in my other post: The hardware is ready!
Now I want to utilize the 1KB EEPROM on the processor to store some temperature log and a proper name for each sensor, this will have to come with some more HTML pages to display a nice graph and edit the name for each sensor.
I hope I will have the space, the current code consume 17KB out of the 30KB available.
Thanks.
