
HTML5 Version of the Tron:Legacy Boardroom Scene - PleaseHelpMe
https://www.robscanlon.com/encom-boardroom/
======
arscan
Glad to see some people are getting a kick out of this. I built it a few years
back while learning webgl, css3, node.js, redis, and modern (at the time) js
tooling. Source over at [https://github.com/arscan/encom-
boardroom](https://github.com/arscan/encom-boardroom)

I didn't build this with any real practical application in mind at the time.
But some people have reused components in their own projects over the years,
particularly the globe ([https://github.com/arscan/encom-
globe](https://github.com/arscan/encom-globe)).

~~~
indescions_2017
Oblivion next, please ;)

[http://gmunk.com/OBLIVION-GFX](http://gmunk.com/OBLIVION-GFX)

~~~
athenot
Thanks for pointing to this one. I haven't seen the movie but there's some
good representations for dense volumes of data there. I'd like to build some
network health representation around this.

------
thatcherc
Are there any efforts to make movie-type window styles for real use? The
Tron:Legacy style would be a fun one to have, as well as the one used in the
computers in Westworld (similar light-blue-on-black)[1] and Interstellar [2].
I'm sure it's a more difficult process than I'm imagining, but it would be
really cool to be able to use the window and interface themes of the computers
in your favorite show or movie, especially since some have such great designs.

[1] -
[https://www.youtube.com/watch?v=Ikup60uEg0c](https://www.youtube.com/watch?v=Ikup60uEg0c)
[2] -
[https://youtu.be/bmz9lMP6aQU?t=2m4s](https://youtu.be/bmz9lMP6aQU?t=2m4s),
visible for a brief second just after 2m4s

~~~
Rjevski
The main problem with this kind of UI is information overload (which is the
desired effect in movies, since the viewer isn't actually supposed to "use"
nor understand all of the info displayed). There's no way to make this usable
unless you lower the amount of info displayed, but then it will loose its
"cool" factor.

~~~
kwekly
I work in the control room for an electrical generation system an this isn't
the case at all for us.

Each desk has 12 ~30 inch monitors, and each monitor has a similar degree of
information density, from monitors of system frequency, voltages, power flows
etc. around the network, also financial / market information. There's a mix of
diagrams, tabular data, maps, plots.

Two of the monitors are devoted to a geographic view with weather data,
locations of field staff etc. Check out the similar setup from this California
control room:
[https://www.bizjournals.com/sacramento/news/2016/06/17/calif...](https://www.bizjournals.com/sacramento/news/2016/06/17/california-
iso-braces-for-heatwave.html#i1)

Most displays show live data, but are not setup to be interacted with
normally.

I think the truth is probably due to: 1) the same with all enterprise
software, the folks who end up using the displays have token-to-no input into
the purchasing or design decisions. Actually now I think of it, check out the
interfaces marketed to electronic music composers (generally individuals or
small studios):
[https://www.youtube.com/watch?v=GOq8R55xMyo](https://www.youtube.com/watch?v=GOq8R55xMyo)

2) While I bet operators would select Tronish UI given the choice, they don't
_need_ it because ultimately (with enough experience) the model of the system
sits in your head, and the interface simply gives cues.

~~~
legolassexyman
I work in this industry and there are a lot of bad UI choices all around. The
picture of the California board looks like a good example and uncluttered.
They have the budget out there to do that.

It doesn't have to be this way. There are standards for high performance HMI
design where nothing is colored in unless it is an alarm condition.

I usually have to end up designing things the "bad way" because of customer
expectation/demand. Some guy designed a screen back in 1989 and that became
what they expect.

~~~
Animats
CAISO's big board is reasonably uncluttered. PJM's has too much small stuff.
[1] But everybody probably uses mostly the screens at their own position.

One can get carried away. Here's the control room for Moscow United's power
control room. This is just for the Moscow area, not a regional grid control
room like the others.[2] This is the as-built version. The original plan [3]
looked like a set for a Bond movie, including a suspended oval glass
conference room overlooking the big board. That was from Russia's oligarch
era.

[1] [https://www.elliottlewis.com/app/css/images/pjm-control-
room...](https://www.elliottlewis.com/app/css/images/pjm-control-room-.jpg)
[2] [https://www.dezeen.com/2009/08/03/electricity-
distribution-c...](https://www.dezeen.com/2009/08/03/electricity-distribution-
control-centre-by-arch-group-and-abtb/) [3] [http://www.experience-it-
all.com/2009/08/moscow%E2%80%99s-el...](http://www.experience-it-
all.com/2009/08/moscow%E2%80%99s-electricity-control-room/)

------
kang
Reminded me of top unixporn post
[https://www.reddit.com/r/unixporn/comments/2sz5xo/bspwmofxoc...](https://www.reddit.com/r/unixporn/comments/2sz5xo/bspwmofxoc_i_love_sci_fi_movie_interfaces_so_i/)

~~~
hobarrera
It _looks_ really cool, but I feel that with all the extra bells and whistles
taking up so much screen estate, I'd need a 50" monitor on my desk just to
actually _use_ ~27".

------
DannyDaemonic
This is beautiful. There needs to be a plugin api for this so we can make our
own using charts using the built in command line and associated widgets.

~~~
porlune
I would love that, this is UI art.

~~~
sandGorgon
i would pay for this - as a HUD for company stats

------
thinkpad20
The term "mad skills" comes to mind. I would love to see a breakdown of some
of the techniques he used to construct this.

------
Splines
Subreddit of movie-fake-UI:
[https://www.reddit.com/r/FUI/](https://www.reddit.com/r/FUI/)

------
emilioolivares
What, the .js file for the globe itself is 43 thousand lines of code. Was this
a weekend project? How do you find the time? Very well done my friend.
([https://github.com/arscan/encom-
globe/blob/master/build/enco...](https://github.com/arscan/encom-
globe/blob/master/build/encom-globe.js))

~~~
arscan
I used browserify to bundle in Three.js and all the other dependencies. Yes,
it's an embarrassingly large JS package. There are probably better ways of
doing this, but being a weekend project I decided that it wasn't worth my time
to investigate ;-)

If you look at the commits, I just tried to push a few lines of code every day
(nights, weekends) over the course of a couple of months. It adds up.

~~~
unkown-unknowns
I am quite stupid, I always thought that when people on HN talked about their
weekend projects they meant something that they'd made in a single weekend.
Only now upon reading your comment do I realize that it means something one is
working on over any number of weekends. I've been on HN for about 7 years :/

All this time I've been wondering why it takes me weeks of weekends to
complete what others do in a single weekend even though I regard myself as
highly competent at both software engineering and programming. Then it turns
out I had simply misunderstood the meaning of "weekend project".

Oh and also, very nice project, kudos.

~~~
icelancer
I think it has dual meanings, I've always taken it that way. Don't feel
stupid.

------
raykanani99
Holy cow. Did you use a charting framework for the stream feed? How did you
get such a pretty globe?

~~~
arscan
All hand built, including the globe. I split that out into it's own library
over at [https://github.com/arscan/encom-
globe](https://github.com/arscan/encom-globe)

* edit: I did leverage quite a few great libraries, namely three.js... just none that are charting specific

~~~
raykanani99
beauty

------
nautilus12
If only we could get a version of this to render in the terminal so we could
hack our workstations to actually look like this. I use tmux pretty heavily.
Id love it if panes looked like this

------
collinmanderson
Fun to see Event Source show up here. I feel like WebSockets are all the
craze, but Event Source seems to be a really simple alternative that uses only
HTTP.

~~~
arscan
Yes! I started with WebSockets, but Event Source met my needs and is much
simpler.

------
hughw
My admiration is unbound. I have one reservation -- I wish it would handle
history correctly. I wish each click e.g. github produced a new URL I could
email to a friend so they could view the same scene. And then I wish I could
hit "back" to recover the landing page. None of this diminishes how beautiful
this is, and I'm sure it just wasn't part of what you were trying to explore.

~~~
arscan
Thanks for the feedback! I'll definitely add that if I take the time to add
more features.

------
pmattos
Very cool stuff... even `ls` works in the shell ;)

------
Animats
Check out Harvard's economic globe.[1] This looks like the globe from this
demo, but it's a real interactive tool.

[1]
[http://globe.cid.harvard.edu/?mode=gridSphere&id=PH](http://globe.cid.harvard.edu/?mode=gridSphere&id=PH)

------
mattnewton
This is super cool, I love the from aesthetics (if not the movie).

How do you make you or tapping not zoom again? Is there a HTML meta tag or
something? It would improve the usability of the keyboard on mobile.

------
metmac
So cool to see this revived. I remember stumbling upon it awhile back.

------
cjsuk
You got in :)

------
jarym
Really damn impressive!

------
fizixer
You could add a video stream from a live online news channel on the top right?
(on my side the top right was pretty much empty)

~~~
samstave
GitHub top right was full of github user avatars

------
luord
Man, fantastic.

I should probably get into doing something like this in my free time instead
of browsing reddit or tvtropes.

------
baalimago
I've not even seen tron since im too young... but all i can say is that i'm
mighty impressed

~~~
mixmastamyk
The legacy film came out in 2010 or so.

~~~
ninju
The original TRON movie came out in 1982
[http://www.imdb.com/title/tt0084827/](http://www.imdb.com/title/tt0084827/)

In 2010 there was a sequel movie Tron: Legacy
[http://www.imdb.com/title/tt1104001/](http://www.imdb.com/title/tt1104001/)

------
Shinchy
This is fantastic, really fun to use and would make a cool portfolio website.

------
th0ma5
They used Processing some I think in the movie which now has a WebGL version.

------
bluescreenofwin
Man this brings me back.. Thank you for creating this!

------
samgranieri
Holy shit! This is amazing. Great job

------
edpichler
Wow, beautiful!

------
cdevs
I love this.

------
Kenji
The funny thing is that it loads faster and has higher fps than many websites
that display simple blogposts and a couple of images, but pull in literally
megabytes of JavaScript and other bloat.

People, learn from this. Seriously. The web doesn't have to be slow if you put
effort into it.

