Category Archives: Visualization

Better Ski Maps – Tinkurlab: SlopeStyle

Tinkurlab is going spatial!

We’re adding maps and spatial data to our visualization techniques.
Keep reading for the first foray into mapping…ski slopes!


You’ve heard it all before.

“This run would totally be a green out west.” “This resort isn’t as hard as my home mountain.” “A blue here doesn’t equal a blue there.”

Really? Are you sure? The resorts themselves state that trail ratings are subjective to that particular mountain. Green – Blue – Black – Double Black…and what are those RED trails about in Europe? Even snow conditions can change the rating of one particular trail.

Tinkurlab's collection of trail maps from the 2013/2014 season...each one different

Tinkurlab’s collection of trail maps from the 2013/2014 season…each one different

Ski trail maps are works of art; designed by a couple people to make you want to visit the resort and display the number of trails- but how much can a color tell you? If it’s the right color, turns out a whole lot.  Enter Tinkurlab:SlopeStyle.


Earlier this winter, Adam and I relocated from Washington DC to Denver, and had many more ski resorts available to us within a 2 hour drive. Resources like FreshyMap helped us determine which one to hit up with a quick glance.   With so many choices, I was curious about finding a way to objectively compare resorts and tell which parts of the resorts I wanted to ski.  In ski progression, it’s easy to both stay on terrain that you are better than or find yourself in way over your head.  I wanted a way to know what I was getting into before I took that first turn.

Tinkurlab:Slopestyle lets you visually explore the pitch and slope angle of your favorite ski runs.  With this data, you can easily compare these runs with others at the same resort to find new terrain.  Additionally, since the color-coding is the same across the maps, you can now compare resorts with each other.  Pink is pink, no matter where you are!  The site performs the same on a desktop as on a phone, allowing you to plan your runs from   any type of chair you’re sitting on.   Happy skiing!  If interested, please read further for the technical details on how the site was created.

Built by processing USGS elevation data with GIS commands to calculate and thematically render slope pitch in degrees.

What I needed to start was elevation data.  I found what I was looking for thanks to the USGS.  They publish layers in varying degrees of resolution and are available for download using The National Map.  I selected the files for the sections of Colorado and California that I required, and set about processing the data.

I used the GDAL utility as my primary GIS tool.  It’s open source, and allows the user to execute a variety of commands for translating and processing raster data.  Using the command-line operators, I was able to create greyscale hillshade layers and calculate the slope for the terrain I was interested in.  I then selected break points for the slope degrees, and generated a color-reilef map based on the pitch.

Example commands:
gdaldem hillshade -s 111120 DEM.adf hillshade.tif
gdaldem slope -s 111120 DEM.adf slopedegree.tif
gdaldem color-relief slopedegree.tif slope-ramp.txt slopeshade.tif -alpha -co ALPHA=YES
Vail Hillshade TIFF

Vail Hillshade TIFF

Vail Slopeshade TIFF

Vail Slopeshade TIFF

Ski resort data overlaid using OpenStreetMap exports stored in PostGIS databases.

The next step was to get the trail map data.  My initial plan was to find a web service containing the features and add it to my map.  That search did not yield great results, so I switched to plan B and learned how to use OpenStreetMap exports.

I used JOSM to extract the aerialway, downhill and woods features for the ski resorts included in my beta site.   Once I had the .osm data, I used osm2pgsql commands to add the features to a PostGIS extended PostgreSQL database.   I found the LearnOSM tutorial extremely helpful (I’m using a Mac with OSX Mavericks, and was able to follow along with the Windows prompts.)

Visualized using Mapbox TileMill and Mapbox Javascript API.

Once I had the data downloaded and processed, it was time to put it all together and create some maps.  I chose to use Mapbox TileMill to combine my layers and create map tiles.  The Carto CSS-like language enabled styling control, and the built in raster and PostGIS support made adding data incredibly easy.


Slopestyle TileMill Interface

The tile packages were uploaded to the Tinkurlab Mapbox account, and I set about creating the interactive web map using their javascript API.   The examples are straightforward, and with a couple lines of code, I was up and running.

SlopeStyle - Mapbox Javascript API

SlopeStyle – Mapbox Javascript API

Packaged in a responsive website.

It was important to house the webmap in code that would render correctly on any device.  You might investigate the resorts on a desktop at home, but on the mountain, you’re going to be on a phone.  The Twitter Bootstrap framework is perfectly suited for this application.  Both Tinkurlab:Maps and SlopeStyle are built using Bootstrap with some custom CSS files.

The application defaults to the I70 corridor resorts in Colorado, but the user has the option to switch to the Lake Tahoe area and back.   I chose to focus on the resorts that we skied the season, but plan on expanding in the future.  Other features in the future might include the ability to select a run to view it’s entire slope profile, as well as rendering the slope colors based on your personal ski preferences.  Keep checking back for updates!

– Val

“Sprint to Success” and Other Agile Stickers and Swag

Another project completed!  What does it do?  It sticks to things and looks cool.  That’s right – stickers!

I haven’t done much design work lately, so I recently fired up my new Adobe CS6 Suite tools to create some cool stickers to promote agile and agile practices.  In addition to working on Tinkurlab projects, I happen to be a Scrum Master for agile software development by day – working on projects to create websites, mobile websites, mobile apps, other interesting things.  And I’m a huge believer in agile principals, methodologies, and tools – from Scrum to Extreme Programming to Kanban to the collective knowledge and experiences of all the great agile doers out there who get stuff done done with agile.  Anyway, here are a few of the stickers; you can check out the full collection in the Cafe Press store (and buy them as well).  Stick them everywhere you can!  Enjoy!

Check out the full collection at




Tagged , , , , , , , , , , , ,

Das Bot 2.0 – Now with more beer!

How quickly time goes by.  It seems like we only just completed Das Bot v1.0, but with Oktoberfest 2012 quickly approaching we started one of the biggest projects we’ve completed to date – Das Bot 2.0.  Instrumented beer on a grand scale!

The final setup, ready for the party to start.


Das Bot is a system for monitoring and controlling access to beer through RFID tags. Built on top of an internet-connected Arduino, the system accepts an RFID tag, checks to make sure you’re registered, opens the solenoid valves in the beer lines, lets you pour a beer and monitors how much you’ve poured, saves the data to a database, and prints out a receipt. Oh, and there’s prize badges you can win as well. There were three beers on tap this year (a homebrewed Dunkelweizen, a homebrewed Hefeweizen, and a Hofbrauhaus Oktoberfest) and each beer was tracked independently.

The Hardware

Das Bot contains the following pieces of hardware:

  • Arduino (with Ethernet shield) – the brains of the operation. This micro controller is what reads the RFID tags, talks to the PHP/MySQL site, controls the solenoid valves, prints to the thermal printer, and reads the data from the flow meters.
  • RFID Reader – reads the values from the RFID chips and sends the value to the Arduino.
  • 3 Solenoid Valves – similar to the ones on Adafruit’s site, these valves are normally closed (restricting access to vital beer) and are only opened when the Arduino gives the go ahead. After 10 seconds of no beer flowing, they close again. Since these draw more current and run at 12v, we used an old 12v wall wart we had laying around to power these (through the relay).
  • RelayThis relay controls the power to the solenoids.
  • 3 Flow Meters – we used the ones from Adafruit to send the flow data to the Arduino.
  • Thermal Printer – printed a welcome message, current stats, and final pour total for each pour.
  • Electrical Box – from the big box home improvement store, this water (and beer-proof) project enclosure was perfect for housing the Arduino, printer, and other electrical components.
  • RGB LED – when the light turns blue, pour your beer
  • Piezzo Buzzer – something this complicated needs to beep. Ours beeps when an RFID is successfully read.
  • Jockey Box – this converted cooler has a 7-pass plate chiller inside and once covered with ice, chills the beer as it flows through. This means no need to keep the kegs in giant plastic tubs with 800lbs of ice.
  • Tap Handles – no jockey box is complete without custom milled tap handles.
  • The Override Switch – this can not be over-appreciated. Buried in an undisclosed location was a switch that would override the arduino and open the solenoid valves. In the event of catastrophic failure, this is the switch represented the difference between beer and no beer. I’m always going to support the side with beer.

Closeup shot of the solenoids

The override switch. Luckily, this wasn’t needed this year. But it’s nice to know it’s there.


The Software

The hardware was almost the easy part of this project. We had experience with Das Bot v1.0, so adding some additional sensors wasn’t too difficult. The hard part was getting everything to talk to each other at the right times, with the right data.
Here’s what the software side looked like:
  • Arduino code – this is the air traffic control system. When an RFID chip is read, it sends the data to a web service and gets back the user’s current status. If they’re not registered, they get one (and ONLY one) free beer before they’re required to register. The flow meters are opened and activity from the meters is recorded. After 10 seconds of no flow, the system closes the valves and sends the pour volume data to the web service. The Arduino then prints out a receipt listing pour volumes and any badges that were won on this pour.
  • PHP/MySQL – a website used to store and present data during the party. The web service components were built using some simple PHP with a MySQL back end. The dashboard (running on an iPad taped inside the kitchen window during the party) presented current keg stats, leaderboards, badge summary, and other interesting bits of info. We also included the calibration for the flow meters in the database to allow for different keg sizes and to help more accurately record the data.

The welcome message displayed once an RFID tag is scanned

 The Dashboard

Want to become mayor of the Hofbrauhaus? Brag about having the largest drinking vessel? Why not turn an entire party into a drinking game? With all of the data we were collecting, it seemed natural to present this information back to the user. The thermal printer can only present so much data. The kegs were also under the table, making the “just lift it to see how much is left” method rather difficult. So, we created the dashboard to give a quick way to see how much fun we were having (note to self: next year, add a “fun” meter).

The dashboard presented the current leaders, the amount of beer consumed for each keg, the 5 most recent pours, and some other random stats. Some badges were mysteries, only visible once unlocked. Others were hinted at by the icon. Either way, the best way to win a badge was to drink beer. Actually, that was the only way.

How much fun are we having right now? Oh, THAT much. This was displayed on an iPad safely taped to the inside of the kitchen window. It was visible from the taps.

Future Enhancements

Some ideas for the 2013 Oktoberfest:

  • Integrate the photobooth – haven’t been inside the booth in the last hour? No beer for you!
  • More badges to win – need target different needs in people’s psyche, not just the “I drank more than you did” desire
  • Allow “offline” badges – someone won the beer stein race, but we’ll never remember who it was. We’ll need a way to award spot badges from mobile devices.
  • More notifications when a badge is won – I’m thinking car horns, disco balls, or fireworks. Perhaps all three.
  • Breathalyzer integration – imagine tracking this against the volume consumed overlayed with the photobooth pictures. None of our friends will ever be politicians.


Additional images from the project:


RFID chips. Everyone got one. There were also zip ties to attach the chips to your beer stein.

The custom tap handles came out well.

The system, all condensed.

Water and electricity don’t mix, so we taped the electronics inside the cooler to the lid.

Additional photos can be found on Flickr




*Disclaimer – Please note that this system was built for responsible adults. EVERY person in the “leader boards” either spent the night (and likely much of the next day) at the location or were driven home by a designated driver. We might mix water, beer, and electricity together from time to time, but we certainly don’t drink and drive.

Tagged , , , , ,

Das Bot – Instrumented Beer

Oktoberfest is a big thing – BFD – in our household. We love beer, we love sausage, and we love hanging out with our friends. So what better way to celebrate those things then an annual Oktobesfest party. Our first “Fest” was held one week before my wife and I got married in 2008. It was informal and ad hoc – some bratwurst sausages, six packs of good beer, and friends sitting around a firepit on our side patio. Since those days, Fest has grown into a much bigger affair, complete with an Oktoberfest tent, photobooth, stump, homemade sausages, and homemade beer compliments of Matt and Matt – two of our friends who are also excellent beer brewers.

We first hosted the Matt’s beers at the second Fest, creating The Trasherator out of a large rubber trashcan fitted with 3x beer taps and ample space for ice and 3x 1/6 beer kegs. So what could make this situation any better you ask. Das Bot!  Das Bot is an Instrumented version of The Trasherator that measures how much beer is consumed by each guest and keeps a running total of consumption complete with a leader board of stats.
The scenario works like this:

  1. A new drinker pickups a small key chain RFID tag and swipes it over Das Bot’s tag reader. A led light blinks confirming the tag has been read.
  2. If its a new drinker, Das Bot prints a message using a thermal receipt printer welcomes the drinker, asking the drinker to register, and advising the drinker they will recieve one beer without registering. If its an existing drinker, Das Bot prints a message with the drinkers consumption total.
  3. Das Bot opens solenoid valve in the beer lines enabling the flow of beer. The drinker has up to 10 seconds of inactive beer flow to pour as much beer as they want. As the beer is being pored, Das Bot is keeping track of how many ounces have been poured using a flowmeter in the beer line.
  4. Once the drinker has stopped pouring beer, Das Bot prints a message with the drinkers new total consumption and a summary of the top three consumers.
  5. Das Bot also has a web interface tat can be accessed via desktop and mobile web browsers enabling drinkers to register, provide their nickname, and check the overall leader board and % of beer renaming in the keg.

Das Bot v1.0 was a big project so I enlisted the help of my friend Matt. Matt and I only started the project in earnest about a week and a half before Fest. We started with a envisioning session with a whiteboard, identifying the overall features and process flow, and discussing implementation plans and potential risks. We self assigned work based on our abilities and focusing on higher risk features first. While Matt worked on the enclosure, mounting, and wiring, I wrote code for each individual component – the RFID reader, the solenoid, the flowmeter, the Ethernet network interface and web service calls. After figuring out the electrical interfaces and code for each component, I started coding them together into the over process. Matt and I would periodically break to discuss progress, make additional implementation decisions, and help each other with impediments. We worked this way for a few nights, making steady progress. Matt also created the web service interface and web site. After some hasty testing Fest was upon us. As a final feature we added a kill switch that would bypass the system allowing beer to flow freely in the event of a malfunction. There’s noting worse for a beer dispensing robot then angry beer drinkers with no beer.

“There’s noting worse for a beer dispensing robot then angry beer drinkers with no beer…”

And so the day came – the day of Fest. With all the other preparations we were a bit rushed to setup Das Bot but successfully installed it on a single 1/6 keg. At first, all seemed well. But soon we found that Das Bot was only pouring for 10 seconds regardless of if there was flow or no flow. Translation – only 10 seconds of beer. Not enough to fill a 1L stein. Angry beer drinkers. They put up with it for a bit, but we eventually activated the kill switch to placate the drinkers.
A few weeks later Matt and I sat down to triage the bug. It turns out we missed a single line of code that activated a pull up resistor on the Arduino board that stabalized the reading from the flowmeter. Turns out the flowmeter wasn’t registering any flow they tripping the 10 second cut off and thereby angering the beer drinkers. One line of code. Sigh. But we fixed it! And did more extensive testing this time. Das Bot is patiently waiting for the next Fest – and maybe a few summer BBQs (for beta testing of course).


  • Arduino Uno
  • Arduino Ethernet Shield
  • Solenoid value
  • Flowmeter
  • RFID reader
  • Thermal receipt printer and paper
  • PHP code and Database and server running Apache and mySQL
  • Website
  • Misc supplies – wire, tools, etc

Das Bot v.Next Potential Features

  • Badges awarded for certain achievements
  • Adding support for additional beer lines
  • Improving packaging to allow for faster setup and teardown, especially for quick connections for beer inflow and outflow lines
  • Addition of breathalyzer to track each users progression over time
  • Itegration with the Photubooth that earns credits that can be redeemed for beer
  • Integration with Twitter


Tagged , ,

Visualization and RoadLogger

As I recently tweeted, “Information is no longer a scarce resource – attention is”.  While technology, the internet, and the web of things have made amazing things possible, they have also given rise to vast amounts of information that are accessible almost anywhere at anytime.  Given this overload of information and often trying to find better way to determine what information is relevant and to improve the effectiveness of consuming it, I’ve recently found myself intrigued by data visualization – taking lots of data, analyzing it , and presenting it in a visual way that conveys a different point of view then the data could alone.  As a photographer, the phase “a picture is worth a thousand words” comes to mind.  And so to learn a bit more about this area of tinkuring, a few months ago I started reading Visualize This: The FlowingData Guide to Design, Visualization, and Statistics in which Nathan Yah describes his approach to visualization, including tools, approach, design – quite an interesting mash up of disciplines.

Realizing the first step towards visualization if to have data to analyze, I created a Arduino project called RoadLogger to use on a roadtrip to New England last summer with Val.  RoadLogger (v1.0) logged the location, speed, altitude, direction, and driver of our car ever second, using a USB GPS antenna and a microSD card to data storage.  While I haven’t had time to post info about RoadLogger and finish analyzing the 32,000+ datapoints, I’ve been thinking about what might be interesting way to analyize the data and present it visually.  Here’s a quick list of thoughts:

  • How many miles did each driver drive?
  • What was our average speed per state?
  • Who was the faster driver?
  • What was the average time from 0 – 60 mph per driver?
Any other ideas?

Until I get around to doing some more work on this project, check out my first basic visualization “Am I A Foodie” at another one of my blogs Until It’s Done.


Tagged , , ,