6 Apr 2011

I often spend time tweaking the theme of this site rather than write content for it, but I thought the latest tweak was worth a few words of mention.

I have tried to keep the theme quite clean – with all of the traditional sidebar content pushed right down at the bottom of the page. Previously, there was a simple division between the bottom content and the rest of the page; nothing more than a border-top CSS declaration:

Inspired by the new look Planet GNOME, I wanted to do something a bit more interesting down there – some sort of ragged edge, but I didn’t want to spend an age trying to draw it by hand.

Coincidentally, earlier today I was looking for an excuse to play with Processing and this seemed like just the thing. I very quickly got something producing a very regular pattern:

But that felt too boring – it needed some randomness.

These were way too severe. To emulate the grass-like effect, I moved to using curves, rather than straight lines.

After a couple attemps where I didn’t have my Bezier control points under control, I finally hit upon something I liked:

And that’s what you’ll find at the bottom of page. The nice thing with this approach is that I can easily tweak the script to produce variations and I don’t have to start from scratch each time.

For the record – and so I can find it when I want to tweak it – here’s the processing sketch that produced the final result:

update: stuck the code in a gist on github

void setup() {
  size(2000,50);
  background(240);
  smooth();
  strokeJoin(ROUND);
  stroke(255);
  fill(255);
  rect(0,0,2000,40);
  stroke(153);
  fill(240);
  beginShape();
  vertex(0,42);
  int x = 0;
  for (int i=0;i<200;i++) {
    int y = (int)random(15,30);
    bezierVertex(x,37,
                 x,30,
                 x+random(-4,4),y);

    bezierVertex(x+2,30,
                 x+2,37,
                 x+random(8,9),40);
                 
    x+=10;
    int w = (int)random(5,15);
    bezierVertex(x+(w/3),42,
                 x+(2*w/3),42,
                 x+w,40);
    x += w;
  }
  vertex(2000,42);
  endShape();
  
  save("footerGrass.png");
}
24 Jul 2009

Just a quick one to say I’ve made an update to the Arduino MQTT PubSubClient to fix a compile error with the latest version of the arduino software (0016).

As ever, get the updated MQTT Arduino client from here.

24 Mar 2009

Whilst playing around with some ideas for a project I have in mind, I have created something else along the way.

I needed the ability to draw lines between elements on a webpage, with some built-in intelligence on how to route the lines so they look sensible. I couldn’t find anything in jQuery, Dojo or elsewhere that did this type of thing out of the box, although I’ll admit I didn’t look too hard.

Having got something basically working, I decided to throw together a demo to help see if they did what I wanted. As is often the case, my little demo has taken a life of its own and has distracted me from the original project I was doing this for.

And so came to life the Logic Gate Thing.

Logic Gate Thing

A couple disclaimers to make: it has only been tested with Firefox on Linux and is reliant on Javascript. That said, I’d be happy to hear how other browsers get on with it.

Update: It should now work on WebKit based browsers; Safari, Epiphany, etc and Chrome. As Jamie points out in the comments, it does work in IE8 albeit with some slightly weird lines.

29 Jan 2009

I’ve made some updates to the MQTT library for the arduino ethernet shield and released version 1.1. You can find the library here. I’m thinking of moving it to github or google code once I can decide which to use – any suggestions? The code is now hosted on github.

This update includes:

  • smaller code footprint,
  • support for Will messages – particularly useful for embedded devices,
  • clarified licensing – this is released under the MIT License.

Enjoy.

19 Nov 2008

With homecamp fast approaching I spent some time last weekend reviving some CurrentCost hacking I started in the summer.

One of the downsides of the data connection on the CurrentCost is the need for an always-on computer in order to capture the data. In practice, the existence of low powered machines like the MPC-L, or slug, make this a pretty inconsequential downside. That said, it was enough motivation to see what I could do with an Arduino and Ethernet Shield.

I have previously mentioned that part of the setup used to graph the power data online was to publish the data to a broker-in-the-sky using MQTT. To achieve this with an arduino it was clear that I needed one thing in particular – an arduino that is capable of connecting and publishing to an MQTT server.

With my ethernet shield in hand, I set about implementing enough of the MQTT spec to support basic publishing and subscribing. With that working, I looked into getting the arduino and CurrentCost talking. Thanks to Alexis, this was very straightforward, although I did rework the parsing of the data to take advantage of its somewhat-fixed length format.

Here’s the sketch I ended up with:

#include <Ethernet.h>
#include <PubSubClient.h>
#include <SoftwareSerial.h>

byte mac[] = {  0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED };
byte ip[] = { 172, 16, 0, 50 };
byte server[] = { 172, 16, 0, 103 };

PubSubClient client(server, 1883,0);

#define rx 6
#define tx 7

SoftwareSerial softSerial =  SoftwareSerial(rx, tx);

void setup()  {
  pinMode(rx, INPUT);
  pinMode(tx, OUTPUT);
  softSerial.begin(9650);
  Ethernet.begin(mac, ip);
  delay(500);
}

void connect() {
  while(!client.connect("nolcc")) {
    delay(10000);
  }
  delay(200);
}
  

int offset = -1;
void loop() {
  if (!client.connected()) {
    connect();
    offset = -1;
  }
  client.loop();

  // scan the data for <msg>
  while(offset == -1) {
    char c = ' ';
    while (c!='<') {
      c = softSerial.read();
    }
    if (softSerial.read()=='m' &&
        softSerial.read()=='s' && 
        softSerial.read()=='g' &&
        softSerial.read()=='>') {
      offset = 5;
    }
  }
  
  // skip to the current value
  while(offset < 156) {
    offset++;
    softSerial.read();
  }
  char current[5];
  int value = 0;
  for (int i=0;i<5;i++) {
    current[i] = softSerial.read();
  }
  offset += 5;
  
  // skip to the temperature value
  while(offset < 243) {
    offset++;
    softSerial.read();
  }
  char temp[5];
  for (int i=0;i<4;i++) {
    temp[i] = softSerial.read();
  }
  offset += 4;
  
  client.publish("current",(uint8_t*)current,5);
  client.publish("temp",(uint8_t*)temp,4);
  
  // scan for </msg>
  while(offset != -1) {
    char c = ' ';
    while (c!='<') {
      c = softSerial.read();
    }
    if (softSerial.read()=='/' && 
        softSerial.read()=='m' &&
        softSerial.read()=='s' &&
        softSerial.read()=='g' &&
        softSerial.read()=='>') {
      offset = -1;
    }
  }
}

It publishes each power reading to a topic called ‘current’ and each temperature reading to a topic called ‘temp’. This isn’t quite the right configuration for the existing broker setup, but it wouldn’t take much to modify it appropriately.

You’ll note this sketch isn’t much use without the library that does the MQTT bit. Luckily, I have been given permission to release the library to the world. I should stress at this point, in case it wasn’t obvious from the fact I am releasing this code on my personal site, that my employer has nothing to do with it.

You’ll find the Client for MQTT library here.

If you want an MQTT server to play with, go buy Lotus Expeditor to get your hands on a microbroker <gratuitous-plug />, or check out the links on mqtt.org for the Really Small Message Broker.