Tag Archives: programming

SVG fun

I have lately been interested in vector graphics in general and SVG in particular. My hope is that it would potentially allow us to do web design in a far saner way than using about 6 images for each box that requires rounded corners and some gradients. The result would also be nicely scalable to different resolutions and probably take far less bandwidth to serve since the aforementioned box would probably just be represented by a couple of hundred bytes of XML in the SVG file and this can be packed to take even less space. As an added bonus you can also get reasonable diffs from the revision control for your SVGs.

Anyway here’s a simple SVG analog clock widget, a kind of Hello world if you will.
The idea was to write a clock widget that can be easily redesigned by non-programmers with a WYSIWYG SVG editor like Inkscape.

Here are a couple of examples that should be visible in all the reasonable browsers (ie. not IE) that have been released since 2002 or so:

Basically you can take either of these files and clock.js from the same directory and edit the SVG file in Inkscape and it should still work.
There are couple of things you have to keep in mind while editing though:

  • There should be clock hands with the ID’s second_hand,minute_hand and hour_hand
  • There should be a circle with the ID clockface which is used to determine the center of rotation.
  • The IDs of objects can be changed from the Object properties dialog
  • You should probably use the align tool to place the clock hands vertically to the center of the clockface element, otherwise the clock will act funny
  • The clockface doesn’t have to be visible, the code only needs it to know the center of rotation. So you can make it invisible if you want to create non-circular clockfaces

This kind of simple things can actually be done without any ECMAScript whatsoever using only SVG SMIL animation. I haven’t really investigated SMIL yet though.

house sensor network

Lately I have spent some time with a friend on building a temperature sensor network for my house. We used CAT5 cables for the wiring and DS18B20+ digital temperature sensors (~2.4€ a piece).

The network runs in two branches and is powered directly from the serial port so the sensors run on the phantom power.
The serial port connector is based on a schematic from this article (in Estonian). It’s actually connected to a serial-to-USB converter which is plugged into the powered USB hub which in turn is plugged into the Beagleboard. I use the digitemp utility to read the sensors.

Since we used CAT5 cables there are still 6 wires left that can be used if we need to transmit external power for higher power actuators and/or sensors in the future.

The connection points to the one-wire network are done with RJ45 surface wall mount boxes.
Here’s a picture of one splitter box for sensor connections and one sensor embedded directly into the box:


Here’s what the sensor cables look like:

And finally here are a couple of graphs from last night:



Live data is available @ pachube.