Espruino WiFi temperature display

Posted on Thu 20th, October 2016

• #1

Gordon

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.

require("Font8x12").add(Graphics);

A5.write(0); // GND
A7.write(1); // VCC
A6.write(1); // Turn on the backlight
var g; // Define g globally, so that it can be used by other functions
var sensor;
var apState = "Connecting";
var wifi;
var temperature;

var history = new Float32Array(84*2);

function onBmp( res) {
  // BMP header
  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");
  // re-render screen image into correctly sized memory buffer
  var g = Graphics.createArrayBuffer(88+8,48,1,{msb:true});
  g.setRotation(2,1);
  g.setBgColor(1);
  g.setColor(0);
  g.getWidth = function() { return 84; };
  g.clear();
  draw(g);
  // output the memory buffer
  res.end(E.toString(g.buffer));
}

function onPageRequest(req, res) {
  var a = url.parse(req.url, true);
  if (a.query && "led" in a.query)
    digitalWrite(LED1, a.query["led"]);
  if (a.pathname=="/") {
    res.writeHead(200, {'Content-Type': 'text/html'});
    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>');
  } else if (a.pathname=="/img.bmp") {
    onBmp(res);
  } else {
    res.writeHead(404, {'Content-Type': 'text/plain'});
    res.end("404: Page "+a.pathname+" not found");
  }
}

function onInit() {
  clearInterval();
  clearWatch();
  // Setup SPI
  var spi = new SPI();
  spi.setup({ sck:B1, mosi:B10 });
  // Initialise the LCD
  g = require("PCD8544").connect(spi,B13,B14,B15, function() {
    // When it's initialised, clear it and write some text
    g.clear();
    g.drawString("Loading...",0,0);
    // send the graphics to the display
    g.flip();
    setInterval(onTimer, 1000);
  });
  sensor = require("DS18B20").connect(new OneWire(B4));
  sensor.getTemp(function (temp) {
    history.fill(temp);
  });
  // Wifi
  wifi = require("EspruinoWiFi");
  apState = "Connecting";
  wifi.startAP("EspruinoTemperature", {authMode:"wpa_wpa2",password:"12345678"}, function() {
    apState = "192.168.4.1";
    console.log("Connected...");
    require("http").createServer(onPageRequest).listen(80);
  });
}

function draw(g) {
  // draw text
  g.clear();
  g.setFontBitmap();
  g.drawString(apState,0,0);
  g.drawString("Temperature",0,8);
  g.setFont8x12();
  g.drawString(temperature,g.getWidth()-g.stringWidth(temperature),2);
  // draw graph
  history.forEach(function (val, i) {
    g.setPixel(i*g.getWidth()/history.length, 
               E.clip(30+(val-history[0]), 8,47));
  });
}

function onTimer() {
  sensor.getTemp(function (temp) {
    temperature = temp;
    // shift on    
    history.set(new Float32Array(history.buffer, 4),0);
    // set values
    history[history.length-1] = temperature;
    draw(g);
    // send to screen
    g.flip();
  });
}

• #2

Gordon
And a picture...

1 Attachment
• #3

Wilberforce

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.
• #4

Gordon

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
Formatting Help

Don't worry about formatting, just type in the text and we'll take care of making sense of it. We will auto-convert links, and if you put asterisks around words we will make them bold.

Tips:

Create headers by underlining text with ==== or ----

To *italicise* text put one asterisk each side of the word

To **bold** text put two asterisks each side of the word

Embed images by entering:
![](https://www.google.co.uk/images/srpr/logo4w.png)
That's the hard one: exclamation, square brackets and then the URL to the image in brackets.

* Create lists by starting lines with asterisks

1. Create numbered lists by starting lines with a number and a dot

> Quote text by starting lines with >

Mention another user by @username

For syntax highlighting, surround the code block with three backticks:

```
Your code goes here
```
Just like Github, a blank line must precede a code block.

If you upload more than 5 files we will display all attachments as thumbnails.

For a full reference visit the Markdown syntax.

Espruino WiFi temperature display

About