Experimental Okudagram Interfaces

Description

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..

Details

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.

Editor

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...

Files

LCARS.zip

This ISN'T the source for the old LCARS builder tool. Move along CBS.. nothing to see here.

Zip Archive - 204.85 kB - 01/31/2020 at 01:15

Download

Project Logs

Collapse

New developments

Timescale • 04/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

Timescale • 08/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

Timescale • 08/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.

Discussions

Starhawk wrote 02/07/2020 at 18:24

Ok, I caught up with @ostropest and we were very easily able to work things out. It appears that he was trying to translate on his own, without a machine translation service, and that wasn't going too well for him ;)

What he was suggesting was that the interface colors be determined by the task at hand... for example, a calendaring sub-application might have its controls (etc) rendered in red, where a calculator might be in blue, and so on.

He does point out that this can make things a bit hard to read, and I agree. I also suspect that this would be a very non-canon use of color...

Are you sure? yes | no

Timescale wrote 02/08/2020 at 01:13

Ah. If only we had a universal translator with LCARS interfaces.

Naturally the colors on any interface communicate function. That is how UI's work right now. Green is "ok" and red is "stop" or in another context red is warm and blue is cold. This isn't anything new.

It is reasonable to expect a futuristic interface to also incorporate these color hints, but just like with the arbitrary numbers or the element shapes, in reality we do not actually know what they mean.

Also note that in my experiment I colored the "alarm" button red. So I do not really see what he was complaining about!

The few screens I build were modeled on TNG style interfaces. Just the appearance.
Sure it would make sense to incorporate contemporary UI concepts for usability, but that would completely defeat the purpose of imagining a future interface!

Ostropest's conclusion that LCARS generally is unuseful probably is correct. I think I acknowledged that fact in this projects description. That, however, is not the point of this exercise!

Are you sure? yes | no

Ken Yap wrote 02/08/2020 at 01:59

I'm always keen on unusual and unuseful projects. Story of my life. 😉

Are you sure? yes | no

ostropest wrote 02/01/2020 at 21:05

color are important.

in my opinion this is unusefull

Are you sure? yes | no

Timescale wrote 02/05/2020 at 02:21

You make no sense. Do not comment again.

Are you sure? yes | no

Starhawk wrote 02/05/2020 at 19:08

I think he's using a particularly bad automated translation service... @ostropest's profile says he's Polish. Online translators often have particular issues with idioms... my read, FWIW, is that he's complaining that the colors do not match those as seen on the actual sets. This itself gets tricky, because, as has been documented by Bernd Schneider over at the well-known fansite, Ex Astris Scientia, there were actually a set of color palette /shifts/ over the various series -- so if he's only seen (eg) DS9 and VOY, the decidedly TNG color scheme you've implemented will look 'off' to him.

Are you sure? yes | no

Starhawk wrote 02/05/2020 at 19:58

Also worth noting, Polish and other Eastern European languages can be particularly difficult to translate because they have sounds (and letters for those sounds) that are not present in English.

A similar issue is illustrated with Arabic. There is a Middle Eastern dish, made of (at least -- it is common also to add things, at lesst here) chickpeas, olive oil, lemon juice, garlic, and a paste of toasted sesame seeds, all mixed together in a blender or food processor until it itself becomes a thick paste. Because this dish is fairly healthy as a snack, and the USA (in which I live) is going through a sort phase where fads or crazes involving healthy foods, it is popular here and sold either plain or with various additions for atrocious prices even in small quantities.

I've seen at least four. different spellings for the name of the dish - hummus, hommus, hommos, hummas -- with the first two being the most popular. There are very likely others... see, the Arabic language doesn't technically use an alphabet, but rather what's called an "abugida" -- a system in which only consonants are written as letters. Vowels are rendered as diacritical marks (like the German umlaut, or the cedilla under some French 'c's that indicate pronunciation as an 's'), and there is a default vowel sound for when there is no mark (I don't remember what Arabic's is at the moment, sorry). Ancient Egyptian is the same way sometimes -- in some cases, as I understand it, hieroglyphs can be idiomatic (expressing a concept), but in others they represent letters -- but, since diacritical marks didn't exist yet (or were foreign to them, at least), the Ancient Egyptians simply left the vowels out of their written discourse entirely!

Languages are hard. All of them. Some are just harder than others. Translating between languages, though -- that's even harder.

Are you sure? yes | no

Timescale wrote 02/05/2020 at 22:44

Hey Starhawk! I saw he was Polish, but I know a lot of Polish people and communication rarely is that... confusing. It seemed to me that whatever the message was (s)he tried to convey, was a bit lazy at best.

I certainly can't abstract any sensible meaning out of it so I asked for clarification and as you can clearly see, it did not get any better. That is why I expressed mu preference for the poster not to post again as communication is rather pointless.

English isn't my native lingo as well and if he wants, I'm quite proficient in German as well. What I am not proficient at however is "gOogLe TraNslate" Gibberish, or lazy writing.

Are you sure? yes | no

Starhawk wrote 02/05/2020 at 23:19

@voxnulla I didn't PM you ;) it was the other dude. I'm waiting for a reply, at this point, FWIW...

I don't know who or what is doing his(?) translation but I can pretty well guarantee it ain't Google. That stuff is waaay better than to put out "word salad" like that!

Are you sure? yes | no

Timescale wrote 02/05/2020 at 23:32

Ow! Alright, My bad... Must be internation "lost in translation day"... Talk about it in messages?

Are you sure? yes | no

Starhawk wrote 02/05/2020 at 19:41

@ostropest -- I have sent you a message using the "Chat" system (the speech boxes in the upper-right corner on a computer, or in the Menu button's menu on a phone). I think we can solve this if you will answer there :)

Are you sure? yes | no

Timescale wrote 02/05/2020 at 23:11

I do not see any PMs anywhere... I'll PM you on the channel we were talking on earlier..

Are you sure? yes | no

Ken Yap wrote 01/30/2020 at 07:08

Hmm, common misspelling of calendar...

Are you sure? yes | no

Timescale wrote 01/30/2020 at 19:56

Where!?

Are you sure? yes | no

Ken Yap wrote 01/30/2020 at 20:58

In the gallery picture.

Are you sure? yes | no

Timescale wrote 01/30/2020 at 21:22

Ah I see. Yes! In my language we spell it "Kalender". So that might be the cause. I did manage to spell it correctly in the projects description!

Are you sure? yes | no

Ken Yap wrote 01/30/2020 at 21:33

Ah ok. The interesting thing is calender is a word in English but it means to roll flat, or the machine that does this, like how kitchen aluminium foil is made.

Are you sure? yes | no

Timescale wrote 01/30/2020 at 22:30

Ah, yes. Our word for that is a "kalander(machine)" or "kalanderen". Generally I'm not to fussed about the odd erroneous vowel shift here or there seeing and indo-european languages seems to vary infinitely.

Are you sure? yes | no

Ken Yap wrote 01/30/2020 at 22:44

Well it's not even erroneous in most cases, just that some people went one way and some the other. And English is not consistent in the pronunciation of the a vowel. If calender didn't already exist I suspect English would have accepted it by now as an alternate spelling of calendar.

Part of the reason I brought it up is word origins interest me. English often has two words meaning the same thing because one came from Germanic roots and the other from Romance roots. Lawyers like to use both in stock phrases, e.g. break and enter.

Are you sure? yes | no

Timescale wrote 01/31/2020 at 01:05

Language and communication is really interesting in that way. I think that spelling mistakes, typos and grammatical errors are the Darwinistic mutations of language that evolve it. Only comities define language in a moot effort to solidify it.

Are you sure? yes | no

Ken Yap wrote 01/31/2020 at 01:13

Yes, people collectively evolve language. The other day I was reading a linguist comment that people say "axs for my perscription" because it is easier on the mouth. Maybe someday we will call them perscriptions. It's already happened to: a napron -> an apron, an apkin -> a napkin, an ekename -> a nickname.

Are you sure? yes | no

Timescale wrote 01/31/2020 at 01:26

And hopefully, given enough time, words will become sets of numbers so that we can make this bloody LCARS interface make sense!!

Oi.. Has anybody ran those TNG LCARS numbers to see if any match the ASCII table?

Are you sure? yes | no

Ken Yap wrote 01/31/2020 at 01:31

00h!

Are you sure? yes | no

Starhawk wrote 01/30/2020 at 06:57

This is relevant to my interests ;) any progress at all in the past 2 years? Need a graphic artist...? (Shameless plug: I am one, but not necessarily a good one... pencil n paper is my more favored medium... but, hey, I could always stand to sharpen my CorelDRAW skills ;) )

Are you sure? yes | no

Timescale wrote 01/30/2020 at 19:34

Not a lot of progress. Unfortunately my clients have little use for Okudagram interfaces despite my insistence that they actually do.

I did build an interface for a project where I ended up using CSS gradients with PNG transparency which, I realized would be a far more elegant way of producing the shapes with added benefit that you could also do Voyager style Okudagrams.

I'm not in need of a graphics artist at this moment in time. I do most designing in house myself.

The Okudagram design suite is far from complete. It basically lets you arrange objects and output the HTML. Grouping and animating has to be done manually. But if there is something you'd like to take a look at or play with, let met know.

Are you sure? yes | no

Starhawk wrote 01/30/2020 at 19:50

Hmmm... dare I ask, could the system be adapted to streamline the design and creation of a similar but different interface...? Specifically, something more like that of the shuttle "Nenebek", but maybe with (ack) a bit of Enterprise NX-01 in it? I can do you pencil sketches if that would help -- I'm away from home RN and my graphics laptop stayed behind... if you want to discuss, *PLEASE* PM/Chat me...!

Are you sure? yes | no

Timescale wrote 02/01/2020 at 17:35

PM'ed you, you weren't there..

Are you sure? yes | no

Starhawk wrote 02/01/2020 at 17:49

Didn't get a notification! ;)

I'm here now, tho... just getting up (yeek it's shamefully late... I got sick recently and my sleep schedule got knocked horribly off-kilter and I haven't been able to bonk it back...) -- gimme a minute to get my computer booted and read what you left, and I'll leave it open in case you drop by, if you're not already around...

Are you sure? yes | no

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

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

Timescale wrote 01/30/2020 at 19:54

Sorry! Totally missed you comment last year.. My bad.

Thanks, I always felt the core concept of LCARS should be the adaptive interface. The video shows a demo that was mostly hand coded. I took the designs out of my LCARS designer and arranged them in groups so they could be animated.

But an alternative method would be something like how Apple Keynotes "magic move" feature works. Identify the identical interface object from the current screen and the next, and rearrange accordingly.

That might be an interesting challenge, but I do not think I would be building that on top of this because this implantation is clunky and old. I think I started this more than 10 years ago... Gah, I'm getting old..

Are you sure? yes | no

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

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

Timescale wrote 04/02/2017 at 22:49

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

Are you interested in coding these? tiny.cc/codethis interested in other coding projects

Are you sure? yes | no

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

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

[deleted]

[this comment has been deleted]

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

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

Timescale wrote 04/01/2017 at 15:39

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

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

Timescale wrote 04/01/2017 at 15:50

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

gimp may output a bmp with alpha from a stack post i read... this scribble game would be cooler with a otaku-okudagram {|_|} https://hackaday.io/project/20503-scribble-scrabball-clone-by-brian-white-forked

Are you sure? yes | no

Experimental Okudagram Interfaces

Description

Details