Thursday 24 January 2013

A basic temperature web server

With the help of jQuery Mobile , 1-Wire libraries and yet, another Ethernet library - EtherCard, a proper page is up and running.


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) + ' &deg;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.

18 comments:

  1. Hey,

    Would you be able to post your breadboard layout? I can't figure it out.

    Thanks

    ReplyDelete
    Replies
    1. Please see my other post:
      http://myarduinotoy.blogspot.pt/2013/01/the-hardware-is-ready.html

      Delete
  2. Hi,

    Seems to be a nice and smart project!!! After uploading the two boxes with temperatures are not appeared in the web page. Something is missing or I can't manage it. Could you give some tips!!! BR

    ReplyDelete
    Replies
    1. If you get the title and uptime text, it looks like the code is working but no devices are found on the 1W bus.
      See the schematic and check your 1W bus connection to devices.
      If I'm wrong, please share more details.

      Delete
  3. The problem remains. In the web page is appeared only the header "Is it hot?" I use parasite power for 2xDS18B20 - pin 1&3 to ground and pin 2 to TCK with a pull up resistor 4,7k to 5V. I also tried the V0.2 in your newest post but I faced the same problem. Pls any suggestions? BR,

    ReplyDelete
  4. Notice that the 1Wire pull-up is to VCC, in my case it is 3.3V to match the ENC28J60 required voltage.
    Also, try a single DS device to see if that works before you add more.
    It can also be a browser issue, what browser are you using? Can you inspect the communications the browser performs to validate it is as expected?
    Hope this helps.

    ReplyDelete
  5. Hi,
    I made your suggestion but the problem remains. I use ie, firefox, google, safari.... the same thing. I notice in the first page that when i disconnect the ds sensor the " Updated: 00:31 & Open feed in COSM " lines appeared. When the DS sensor is connected only the "Is it hot?" line appeared.
    Thanks for your help

    BR,

    ReplyDelete
    Replies
    1. Thanks for the last bit of information.
      I have just did a quick test with only one DS18B20 on my system to make sure there is no problem when using them - looks OK.

      The fact that you see the additional text only when nothing is connected suggest one of the following:
      1. The code fail when devices are connected and does not return the result to the browser.
      2. The response to the browser is not as expected and the JavaScript code fail to parse it.

      Can you please open developer tools in the browser (Ctrl+Shift+I on Chrome) and find the request and response to list.json in the network tab?
      In addition, are there are any errors in the browser (Ctrl+Shift+J on Chrome to open JavaScript console)?

      Delete
    2. One more thing, are you using the latest OneWire and DallasTemperature libraries?
      You can find the links in my V0.2 post.

      Delete
  6. This comment has been removed by the author.

    ReplyDelete
  7. First of all, many thanks for your help,
    I checked the libraries and were the latest version.
    Concerning the developer tools I am not familiar with Java language and I uploaded some "print screens" in the follow link :
    https://www.dropbox.com/sh/1zrvwt4vlqenoex/S-zWLEU6zM
    I hope this help to understand my mistake,

    BR,

    ReplyDelete
    Replies
    1. Not a problem, if there is something wrong I want to find it myself.
      I was unable to see anything wrong in the details you have provided.
      Can you send some pictures of your wiring of the DS18B20 devices to your board?
      Feel free to contact me on my gmail.

      Delete
  8. Hi, I upload some pictures in the above link in my dropbox. I don't have your gmail..
    THX,

    ReplyDelete
  9. Do you have an extra page with the extra coding? I mean... with the extra sensors and several pages for each display of graph and so on..... I think you will need a SD card with an extra shield... but your proyect can do a leap jump and look more professional and flexible....

    ReplyDelete
    Replies
    1. Thanks for your comment. There is already support for as many sensors as you want, but no second page with graph yet. v0.2 adds data posting to xively.com (COSM). However, adding SD card is not in the scope if this project, the aim is to use as little HW as possible.

      Delete
  10. Hello, I wonder if you used some program to give that appearance to html, I want to make one similar to it but also add buttons to switch off and on, but I will not let the blank type html.

    ReplyDelete
    Replies
    1. I am using jQuery and jQuery Mobile in the HTML. Notice the 'link' and 'script' tags in the header.

      Delete
  11. //#define FLOATEMIT // uncomment line to enable $T in emit_P for float emitting n EtherCard.cpp

    ReplyDelete