I’ve been building a dashboard for my desk. It needs an E-ink screen and internet connectivity, and it turns out the best way to do this is with a hacked Kindle[1]. It’s actually pretty easy to get a ‘rooted’ Kindle to download and display a PNG image fullscreen, but I found the main challenge is how to generate that image on a server.

HTML: The tool we know

When we want to display text, images, and icons on the web we normally reach for HTML and CSS. These get parsed by your browser and the content gets rendered with the arrangement and styling we defined. So could I use HTML+CSS to draw the graphic I need? Can I render it out to an image to display on the Kindle?

Well HTML is designed for laying out web content, not actual graphics work. Every so often you do see someone make something pretty with HTML+CSS hacks, but this doesn’t prove its suitability for the job; in fact it proves the opposite. People do these things precisely because it’s hard; it’s impressive to recreate R2D2 without the help of a real graphics language.

Even assuming I can easily make the graphic I need, HTML is rendered in a web browser and this presents a problem. Browsers are big environments that run code, load resources, and will update their content over time. You can actually run browsers on servers, they’re called ‘headless browsers’ and we use them for automating tests on web projects. They’re usually outdated and always bloated, but they work ok.

Rendering this way would mean booting up WebKit, loading the page, waiting until it’s all probably rendered, and then capturing a screenshot of the virtual screen it’s rendering on. There’s a good chance this would work, but it’s inefficient and it’s a hack. There must be a better way to render an image.

SVG: The right tool

Scalable Vector Graphics (SVG) is an image format used to represent complex shapes. We already use SVG extensively here at Made by Many; an SVG file can be shown at any size on any screen, and still use less data than a raster equivalent. It works in modern browsers and is really easy to convert to a PNG.

And here’s the thing; SVG isn’t just an image format, it’s a language. Actually, it’s an XML language that looks a lot like HTML. Someone familiar with HTML can open an SVG file in a text editor, change some of its code, and see their results reflected in the image. With a little research and a few useful libraries you can even write an SVG yourself. And this is why SVG is interesting.

SVG is a very powerful language that lets us define an image in code. You might write that code from scratch, or manipulate an SVG designed in a tool like Sketch. As the dashboard image is quite simple, I’m going to write it from scratch. I know that React can be used to work with SVG, so that’s the marriage I want to explore in the next post (coming soon).

[1] Quite a few people have used a Kindle as a dashboard, but Matthew Petroff’s Kindle Weather Display was the first to take this approach.

Continue reading

IoT

How (and why) we designed Hackaball to be Gender Neutral

This blog post has been adapted from presentations at GGMUK and Hyper Heat earlier this month. Following some recent Lovie Award wins in the Connected Pro...

Rachel Mercer   ·   16 October 2015

IoT

7 things we learnt taking Hackaball to Kickstarter

Following some amazing coverage in The Economist and Creative Review this month, we're also very excited to be featured in the next issue of Offscreen Mag...

Rachel Mercer   ·   13 August 2015

Design

Creating on-brand iconography

Over the years, I’ve been challenged with designing several icon sets for totally new and established brands. Whenever I start concepting and designing a ...

Adam Morris   ·   27 July 2015