November 4, 2011

Virtual Solari Board

I've always been intrigued by those split-flap displays you used to see clattering away in train stations and airports. Not only are they fun to watch, but I think they really symbolize the peak of 20th century electro-mechanical design and engineering. The Italian company Solari di Udine made tons of them, so they're often called Solari Boards.

The principle on which they work is relatively straightforward. Here's a schematic of a single element:


The display element is advanced by a stepper motor, which in turn receives pulses from a controller (or the controller may be built in) and each pulse advances the display one character. The element may contain letters, numbers, punctuation, pictures, entire words, or any combination thereof. This type of system appeals to me because it translates well into software, so a while ago I wrote a javascript application to create a virtual Solari Board. I'm bringing it up here because it's probably time to take another look at it.

The wheel can be represented as an array, with the characters on the flaps as elements in that array, like so:

Drum: function() {
  this.startPosition = [' ','A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z','0','1','2','3','4','5','6','7','8','9','.',',','?','!','/','\'','+','-','↑','↓'];
}

Changing the display to a different value is a matter of rotate()ing the array as needed, like so:

change: function() {
  var container = arguments[0],
    c = arguments[1], // the new character
    index, i, j;
  // get the curent order of the display element's drum
  var values = container.data("order");
  // how many times do we need to increment the drum?
  index = values.indexOf(c);
  // increment the drum
  for(i=0;i<index;i++) {
    sf.chart.splitFlap.show(container, (values[i + 1]));
  }
  // rotate the dom element's stored array to the new order for next time
  container.data("order", values.rotate(index));
  // change the number in the markup
  // container.text(c);
}

Note the use of jQuery's .data() API for storing the new order of the drum array. I'm a fan of storing state information this way, particularly when it comes to UI elements--it's a perfect use of the feature. Certainly you can get into trouble if you go overboard and try and store non-ui state stuff, but it works well in this case.

This app is based on the groundwork I did at CMSG for our charting stuff (and the complexity of the javascript reflects that broader context) using $.getJSON() to grab data in the background and load it dynamically. Looking over this project, I really like some of the ideas I used:

  • A single method for rendering multiple chart types (split flap is considered a chart type)
  • A common data format, with specs for time-series, category and other data types
  • A plug-in architecture for different chart types

I think this project is worth revisiting. There's good work here.

Live demo: http://dev.basdesign.com/split-flap/activity_tracker.html

Github repo: https://github.com/baspete/Split-Flap

[Edit: linked to Solari di Udine]
[edit - changed github repo]

No comments:

Post a Comment