Experimental Okudagram Interfaces

The continued (and foolish) mission to try and create useful LCARS interfaces for various functions.

Similar projects worth following
The iconic Star Trek TNG Okudagrams created by Michael Okuda for the show have been a geek favorite for decades and style cues from the LCARS panels have often been used in real world projects to give that 24th century look and feel.
There is however a slight problem with the Okudagram. Nobody knows precisely how they work! Let's try to find out then..

Everybody knows those insanely beautiful domotica projects where by interacting with a touchscreen in the wall or via a tablet (PADD), you can control lights, entertainment, security or just about anything else you want, all with interfaces that are entirely LCARS based. It's just like future we saw in the 90's when we watched TNG.

These Okudagrams have always fascinated me as both an esthetically interesting design and as a potential functional interface paradigm. Having dealt with interface design for over a decade now, I do realize the "problems" associated with functional LCARS interfaces, but the geek kid in me just can't let it go! I still wonder about the possible implementations and mechanics of such an interface system and I think this is the best place to share my foolish endeavor and possibly expand on it.

What is it?

In the real world an Okudagram is a meaningless fictitious control-surface designed with the sole purpose of looking futuristic, at which it succeeds quite well. the bridge of the TNG Enterprise still does not look very dated.

In the ST universe, the LCARS interface is an adaptive interface technology that anticipates and changes it's layout and functionality depending on the job at hand. If you need to boil an egg on the Enterprise (assuming the replicators were off-line), the interface would adapt from a refrigerator inventory utility to some egg recipe and timer functionality with a minimum of user-input.

An interface that could provide general and specific functionality by adapting preemptively is probably powered by some very advanced AI, the type of which us pre-WWIII humans have not even dreamed of.

So in fiction, the Okudagram is the result of a highly advanced system that constantly is designing it's own interface

The Okudagram compensator

Another problem with the interface as it is presented in Star Trek, is the high abstraction layer which is never explained. Like the transporter system depends on a Heisenberg compensator to work, the operation and interpretation manual for the LCARS system is conveniently missing. If we only knew what those seemingly random numbers on the buttons actually mean and do, we'd be able to halt-pause some of the TNG episodes in engineering and figure out how warp-drives, replicators and transporters actually work.

It was a very smart move by Michael Okuda, obfuscating the data into something arbitrary. Would it have read something about gravitons or the phlogiston, the futuristic element would have easily been lost after reality caught up with it.

Okudagrams in the real world

The Okudagram may not be all that functional and logical for real world applications and the suggested functionality could perhaps be entirely impossible. This, of course, does not mean I don't want an LCARS interface to interact with my house/car/server! Surely any Trekker/Trekkie feels the same way.

How to go about designing your own Okudagram panel for a project?

Well, however one wishes I'd imagine. Most projects I have seen online have one or several static LCARS pages that are mostly static images, probably designed in Photoshop. Others use some vector graphics or HTML implementation, sometimes animating the screen with roll overs and such.

What I found was that whatever the approach, it is quite hard to build an LCARS interface that is both pretty and somewhat usable for any given task.

If there is any hope of even being able to suggest an OkudA'esque functional type of interface, there has to be some form of GUI guideline that actually focuses on function instead of form.


In order to build, at least, consistent interfaces I made an editor that outputs the Okudagram as HTML. This makes alterations easy as well as animations and added functionality via Javascript.

With the basic style elements, composite objects are build which can perhaps contain text, images, video or act as buttons or dials. Standerized panels and composite objects make it possible to morph between panels, suggesting this adaptive...

Read more »

  • New developments

    voxnulla04/02/2017 at 22:41 0 comments

    Thanks to a reaction on this project that I got, I got some new experiments in the pipeline. The major one is implementing alpha transparency for the Okuda elements so that the interface can be used as an overlay for AR for example.

    Yesterday it looked like implementing proper alpha masks was next to impossible because of the structure of the elements, the editor and the fact that the code is quite old now.

    But with some experimentation, I think I have found a way to implement it in a way where the data structure remains the same, events are kept, browser compatibility is ensures and where I do not have to overhaul my development environment.

    (it basically means that I have to write a replacement function hack for "obsolete" browsers)

    Alpha test

  • Okudagram interface example movie

    voxnulla08/08/2015 at 14:11 0 comments

    Here is a working example of the interface I build with my LCARS editor. Where it can, it will rearrange the layout to suit the requested function.

    This interface is build in HTML 4. HTML 5 will make creating the shapes much easier.

    Note how the calendar object is relocated for the ALARM functionality.

  • Releasing Okudagram code and design

    voxnulla08/08/2015 at 10:44 0 comments

    I've been looking into way to open up this project, but this does not seem as simple as it sounds.

    First of all Paramount or whoever owns the rights to ST:TNG has a history of being ... less than community minded ... regarding usage of their imagery.

    As this is currently just an experiment and an exercise in building usable interfaces, it probably isn't such big of a deal.

    Various fonts are available on the internet for free as is the design guide for LCARS as well as various example images.

View all 3 project logs

Enjoy this project?



Grant Giesbrecht wrote 09/15/2019 at 18:16 point

Nice work! I've seen other people implement LCARS type interfaces but this is the most functional and dynamic I've seen.

  Are you sure? yes | no

Ember Leona wrote 04/02/2017 at 00:36 point

maybe scrap html altogether I think web future will be TorrentWeb DNS and zipsites or php to pdf Also AVF animated vector fonts

  Are you sure? yes | no

voxnulla wrote 04/02/2017 at 22:49 point

At this point in time, HTML is where it is... But I got somewhere on a function that could potentially fit into the old LCARS engine and provide it with true alpha..

  Are you sure? yes | no

Ember Leona wrote 04/01/2017 at 15:28 point

Are you interested in coding these? interested in other coding projects

  Are you sure? yes | no

Ember Leona wrote 03/31/2017 at 23:08 point

If you make the shapes into chromaKey colors you can mask videos to each color and make it have tons of variations. Would AR work too what about and AR feedback system. Maybe like a Anki flashcard setup.

  Are you sure? yes | no

peter wrote 04/01/2017 at 09:52 point

At the moment the interface is basically pre-HTML5. The way the shapes work is by masking out the shaped by using a PNG. I have looked into upgrading to HTML5 and using alpha masking which would make it more suitable for AR overlays in theory!

Personally I do not like the later Okudagrams as much as the TNG version, that is why I went for the solid flat look, not the stripy gradient laden one.

Any AR system that uses HTML blocks to display information on screen could incorporate this. The editor is just there to make the design go faster. You basically end up with a HTML file which you then can animate and fill with content.

edit : Just tried using alpha mask.. not as easy as I hoped. Alpha does not work on background colors. I really want to keep the ability to set the colors on the block elements, so I think I'm going to cook up a way where an image is generated on the fly to serve as the background color.

  Are you sure? yes | no

Ember Leona wrote 04/01/2017 at 15:25 point

           does this help? maybe you just change the [pallete] offset to change color if you tile it you can use a small bg image but maybe dma will be better with larger file

  Are you sure? yes | no

voxnulla wrote 04/01/2017 at 15:39 point

Thanks for the video, that could come in handy later. For now I just use a small PHP script that generates a block with a certain color. But now I'm finding that the implementation of alpha masks in CSS is pretty dismal in various browsers.

I need a proof of concept first before I start messing around with the LCARS code. I probably need to expand that to render certain div elements having a img element inside, but in the mean time, getting reliable alpha is the main goal ( I have got it to work in safari, but unfortunately, the LCARS editor does not work in Safari for whatever reason. Probably some Xpaths nonsense ).

Anyway, Thanks again.

  Are you sure? yes | no

Ember Leona wrote 04/01/2017 at 15:44 point

i know png and gif have alpha i dont know about bmp. have you tried just moving the offset instead of new file. Is LCARS like NCurses?

  Are you sure? yes | no

voxnulla wrote 04/01/2017 at 15:50 point

I'm not necessarily interested in the alpha capabilities of PNG. BMP doesn't support Alpha I think, at least not as a standard in browsers. I want to use masks that define the shape of the interface element. The color image can just be a square of any type.

LCARS is the name for the interface paradigm from Star Trek.

  Are you sure? yes | no

Ember Leona wrote 04/01/2017 at 15:56 point

gimp may output a bmp with alpha from a stack post i read... this scribble game would be cooler with a otaku-okudagram {|_|}

  Are you sure? yes | no

Similar Projects

Does this project spark your interest?

Become a member to follow this project and never miss any updates