Espruino WiFi temperature display

Posted on
  • Just thought I'd post this up... Basically it's an Espruino WiFi board with a DS18B20 attached, but it sets itself up as an access point.

    When you access the server's IP, you get a webpage which displays an image which is the contents of the LCD display at that point.

    It's a bit of a hack, but basically I created a black and white bitmap of the right size with an image editor and saved it, then just copied out the first few bytes which are the header. I could then just re-render the image into another Graphics object (the one for the display has the pixels in a strange order) and send it over HTTP.

    Hope that's some use - it could be a great way to serve up graphs and stuff like that.

    1. require("Font8x12").add(Graphics);
    2. A5.write(0); // GND
    3. A7.write(1); // VCC
    4. A6.write(1); // Turn on the backlight
    5. var g; // Define g globally, so that it can be used by other functions
    6. var sensor;
    7. var apState = "Connecting";
    8. var wifi;
    9. var temperature;
    10. var history = new Float32Array(84*2);
    11. function onBmp( res) {
    12. // BMP header
    13. res.write("BM\xc2\2\0\0\0\0\0\0\x82\0\0\0l\0\0\0T\0\0\x000\0\0\0\1\0\1\0\0\0\0\0@\2\0\0\23\13\0\0\23\13\0\0\2\0\0\0\2\0\0\0BGRs\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\2\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\xff\xff\xff\0");
    14. // re-render screen image into correctly sized memory buffer
    15. var g = Graphics.createArrayBuffer(88+8,48,1,{msb:true});
    16. g.setRotation(2,1);
    17. g.setBgColor(1);
    18. g.setColor(0);
    19. g.getWidth = function() { return 84; };
    20. g.clear();
    21. draw(g);
    22. // output the memory buffer
    23. res.end(E.toString(g.buffer));
    24. }
    25. function onPageRequest(req, res) {
    26. var a = url.parse(req.url, true);
    27. if (a.query && "led" in a.query)
    28. digitalWrite(LED1, a.query["led"]);
    29. if (a.pathname=="/") {
    30. res.writeHead(200, {'Content-Type': 'text/html'});
    31. res.end('<html><body><img src="img.bmp" width="336" height="192"><br/>Turn LED <a href="?led=1">on</a> or <a href="?led=0">off</a></body></html>');
    32. } else if (a.pathname=="/img.bmp") {
    33. onBmp(res);
    34. } else {
    35. res.writeHead(404, {'Content-Type': 'text/plain'});
    36. res.end("404: Page "+a.pathname+" not found");
    37. }
    38. }
    39. function onInit() {
    40. clearInterval();
    41. clearWatch();
    42. // Setup SPI
    43. var spi = new SPI();
    44. spi.setup({ sck:B1, mosi:B10 });
    45. // Initialise the LCD
    46. g = require("PCD8544").connect(spi,B13,B14,B15, function() {
    47. // When it's initialised, clear it and write some text
    48. g.clear();
    49. g.drawString("Loading...",0,0);
    50. // send the graphics to the display
    51. g.flip();
    52. setInterval(onTimer, 1000);
    53. });
    54. sensor = require("DS18B20").connect(new OneWire(B4));
    55. sensor.getTemp(function (temp) {
    56. history.fill(temp);
    57. });
    58. // Wifi
    59. wifi = require("EspruinoWiFi");
    60. apState = "Connecting";
    61. wifi.startAP("EspruinoTemperature", {authMode:"wpa_wpa2",password:"12345678"}, function() {
    62. apState = "192.168.4.1";
    63. console.log("Connected...");
    64. require("http").createServer(onPageRequest).listen(80);
    65. });
    66. }
    67. function draw(g) {
    68. // draw text
    69. g.clear();
    70. g.setFontBitmap();
    71. g.drawString(apState,0,0);
    72. g.drawString("Temperature",0,8);
    73. g.setFont8x12();
    74. g.drawString(temperature,g.getWidth()-g.stringWidth(temperature),2);
    75. // draw graph
    76. history.forEach(function (val, i) {
    77. g.setPixel(i*g.getWidth()/history.length,
    78. E.clip(30+(val-history[0]), 8,47));
    79. });
    80. }
    81. function onTimer() {
    82. sensor.getTemp(function (temp) {
    83. temperature = temp;
    84. // shift on
    85. history.set(new Float32Array(history.buffer, 4),0);
    86. // set values
    87. history[history.length-1] = temperature;
    88. draw(g);
    89. // send to screen
    90. g.flip();
    91. });
    92. }
  • And a picture...


    1 Attachment

    • espruino_wifi_demo_sml.jpg
  • Nice.

    Another way of doing the graphic for the browser, would be to use the xbm format, which uses C declarations to define the graphics, so you output the width and height and an array.

  • Yeah, I wondered about that - but sadly it seems most web browsers are now having support removed :( https://en.wikipedia.org/wiki/X_BitMap#support

    I should really turn this into a module - it could be quite handy.

  • Post a reply
    • Bold
    • Italics
    • Link
    • Image
    • List
    • Quote
    • code
    • Preview
    • $ Donate
About

Espruino WiFi temperature display

Posted by Avatar for Gordon @Gordon

Actions