LCARS for April Fools

Posted on:
April 15, 2015
Posted in:
Geekdom, JavaScript, Programming, Star Trek, Web Dev

If you want to jump straight to it, or view side-by-side, check it out here:

Montclair State LCARS

So, for those of you who might not know (and, shockingly that might be a lot of young people since Star Trek went off TV when Enterprise ended ten years ago next month), LCARS is a kind-of ambiguous term that refers to the computer on the Enterprise. In the show, LCARS (Library Computer Access/Retrieval System) refers to the operating system that runs all of the many computing devices you see. In the fandom, though, when somebody talks about LCARS they’re usually referring to the visual interface.

I got a bunch of helpful information from a site called LCARS Standards Development Board. It’s a resource created by a bunch of developers who wanted to try to take that purely visual design and come up with a UI and a visual language.

LCARS Standards Development Board

The most useful reference simply came from watching the show. The original set designers didn’t come up with a functional interface, but they did come up with several dozen almost plausible interfaces.

I’m really happy that I was able to get this done without having to use any images. When you see that horseshoe shape, what you’re really seeing is a beige box underneath with rounded corners on the left and a black box on top of it (also rounded corners on the left). The “caps” of the horseshoe are made using the outer box’s :before and :after pseudo-elements. The flat black background means that you can get away with all sorts of little tricks instead of using advanced techniques to generate complicated shapes.

One of the difficulties in getting it to feel right was to add in some small delays. In the early 1990s the computers they had to run these sorts of on-set displays weren’t as fast as our cellphones. So, the solution I used was to hide content immediately, but to display the next bit of content after a 100ms timeout.

// activate the selected item and the stage
setTimeout(function () {$(this.menuArray[inIndex].element).addClass("active")}.bind(this), 100);

One of the other difficulties was in generating the stardates. The dates used in TNG referred to the century and season number. “42075.2” is 24th century (first digit), season 2 (second digit), and the rest is just kind of made up. Instead I went with the JJ Abrams re-launch method (4-digit year, decimal point, julian date).

In the end, it feels incredibly satisfying to use an LCARS interface with a modern touchscreen. It’s fast, uncluttered, and has a lot of appropriately-sized tap targets. It seems like unlearning some of our web interface conventions could be a nice way to move forward with touch friendly website UI.