Vad vi använde för att bygga Stadsvolymer

I går skrev jag om Pontus Willebrands examensprojekt för Forsbergs Skola, Stadsvolymer, och jag tänkte passa på att skriva lite om den hårdvara, mjukvara, och den öppna data som användes under utvecklingen.

Konstruktionen

Själva konstruktionen byggdes av brädor från ett byggvaruhus som skruvades ihop med vinkeljärn, och täcktes med vit foamboard.

Stadsvolymer - Konstruktion

Inuti konstruktionen så monterades olika rörliga delar byggt av LEGO Technic som till stora delar hade inhandlats på auktionssidor på nätet, eller från butiken Model Team i Bandhagen (varning för webbsida från tidigt 90-tal).

Det var även inuti konstruktionen som Arduinon, själva hårdvaran, placerades.

Stadsvolymer - Insida

Hårdvaran

Hårdvaran bestod en Arduino Uno Rev3 som inhandlades som en del av ett Startpaket från Kjell & Co. Hos dem köpte vi också en del extra sensorer och motorer, samt en ethernet shield, och en motor shield.

Arduino Uno Rev3

Vi hade också tusentals bitar LEGO Technic till vårt förfogande.

Stadsvolymer - LEGO Technic

Vi använde oss också av en 4G-router från TP-Link, en TL-MR3420 och ett 4G-abonnemang från Telia för att ha ett dedikerat nätverk för projektet.

Mjukvara

För att hämta data från de APIer jag skrev använde vi oss av Quartz Composer som är en samling  teknologier från Apple som gjorde det möjligt för oss att hämta data via RSS, hantera den, och rendera den som videos.

Projection Mappning genomfördes med Resolume.

Kod och programmering

Webbsidan stadsvolymer.iamleft.se skrevs i PHP mot en MySQL-databas, och Twitter-appen som postade tweets till besökare som angav sitt Twitter-namn använde sig av TwitterOAuth, ett kodbibliotek för att hantera OAuth för Twitters REST API. För enkelthets skull använde jag delar av Twitter Bootstrap för att styla sidan, och jQuery för att hantera formulärpostningar och förfrågningar till servern via AJAX.

Koden för att hämta tunnelbane-information använde APIet SL Realtidsinformation från Trafiklab och jag skrev en egen liten wrapper för att snabba upp anropen och plocka ut delar av datat.

Övrig data som projicerades på konstruktionen hämtades hem i förväg från olika myndigheter som t.ex. Statistiska Centralbyrån eller Stockholm Stad Dataportalen.

Koden som styrde Arduinon och tog emot signaler från de olika sensorerna och ethernet shielden, samt skickade kommandon till motorerna och servomotorerna skrevs i Wiring, det programmeringsramverk för mikrokontroller som bland annat Arduino använder sig av.

Som jag skrev i gårdagens inlägg så kunde vi inte använda oss av den, i Wiring, vanliga delay()-funktionen utan vi fick importera biblioteket elapsedMillis för att kunna skriva funktioner som kunde pausa sig själva utan att stoppa resten av funktionerna från att köras.

Vi använde också tredjepartsbiblioteket VarSpeedServo skrivet av Ewan Branda för att kunna styra hastigheten på servomotorerna som annars har en fast hastighet.

Och eftersom den ethernet shield vi köpte inte var den officiella som bygger på ett Wiznet W5100-chip, utan en annan som bygger på ENC28J60-chipet så fick vi använda ytterligare ett tredjepartsbibliotek för att kunna skriva koden som om det vore en original-shield. Det biblioteket heter UIPEthernet och är skrivet av Norbert Truchsess.

Min kod, utan de inlänkade biblioteken, hamnade på knappt 400 rader (med kommentarer) och var egentligen inget avancerat. Eller så skriver jag helt enkelt funktionell och optimerad kod (troligt).

Och det var det om själva utvecklingsprocessen.

JavaScript till Forsbergs

Jag har en vän som går på Forsbergs där han för tillfället gör en sak med ord och färg. Till detta experiment hade han och hans kursare tagit fram en halvt om halvt avancerad algoritm som omvandlar ord till färger i HSV-format.

Detta ville de visualisera i en webbläsare och projicera under en utställning, men tyvärr så saknades kompetensen när det kom till JavaScript, så därför frågade de mig om jag ville hjälpa till.

Självklart sa jag ja, och jag sitter i skrivande stund och knappar kod och räknar matte. Det blir nog en lång kväll.

Jag vet inte ännu om/när jag kan visa koden jag skrev för någon annan, men är det fritt fram sen så länkar jag den här på bloggen.

Hur som helst, tillbaks till koden.

Slides from the 2011 Scandinavian Web Developers Conference

Today I went to the Scandinavian Web Developers Conference, a 1 day, 1 track conference in Stockholm, Sweden and I thought I’d share with you the slides from the different sessions.

There was 9 speakers, each giving a presentation and at the moment of writing I have the links to 6 of the slides but I will update this post as I get access to the rest and here they are.

I will also do a more detailed post on the conference as a whole, but right now I am having some post-conference beer and should probably get back to discussing web browsers, bugs and feature detection with the people at my table. 😉

Adaptive Web Design (Book Review)

Adaptive Web Design by Aaron Gustafson

Just the other day I was reading a post on mobile-first responsive web design by Brad Frost (a great read by the way, go check it out) and found it very good. In fact I found it so good that I decided to buy Aaron Gustafsons book, ‘Adaptive Web Design: Crafting Rich Experiences with Progressive Enhancement‘ which the author had recommended.

I chose to get the paperback+eBook bundle and I finished it in two evenings. This doesn’t mean that the book is a light read, it just says something about how well Aaron manages to get his thoughts on paper.

Adaptive Web Design

If you’ve worked with web design for more than a short while you have most likely heard the term progressive enhancement, but how well do you know it, and how much does it influence your work?

Aaron  has suceded in explaining the reason for using progressive enhancement, the basics of the various techniques, breaking it down chapter by chapter and also ending it with a checklist for all your progressive enhancement needs. All in a book that not only covers the theory (or philosophy if you so will) behind it but which also contains plenty of practical examples of how, and more importantly why, to implement the techniques.

Adaptive Web Design consists of six chapters where progressive enhancement with markup (HTML), CSS, JavaScript and Accessibility takes up one chapter each. The first chapter talks about the what, why and how of progressive enhancement and the last gives us the checklist and information about the book, author etc.

The book itself is a perfect metaphor for progressive enhancement in the way it’s laid out, adding more and more advanced features and styles to it and where you, at the end, are ready to boost a wide knowledge on the topic. Sure, you can stop reading after two chapters and still be a better designer/developer than you where when you started but why would you? You’re not the equivalent of a low-tech ancient browser that don’t support the latest features, are you?

I can only wish more, a lot more, web designers and developers get their hands on Adaptive Web Design because I consider it a must have tool in any serious designers/developers toolbox. The more people read it, the less sites breaking when the user has JavaScript turned off and the less non-semantic markup and more accessible content will we see.

In short, this book will help us make a better, more future proof and more accessible web.

Adaptive Web Design
Author: Aaron Gustafson
ISBN-13: 978-0-9835895-0-1