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
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).
All awesome stuff! I'm currently working in the travel industry and immediately after seeing this I'm planning on using the globe for a flights dashboard. ;)
Putting the quality of your work aside(which is really amazing), I applaud the self discipline required to develop such a big project on free time alone. Hope to get there one day.
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.
Very cool. I've been thinking of a way to capture this aesthetic on the web. I love what you've done, but I don't know if it works in a browser as well as I envisioned. Great code, I will reference the globe in future projects. Thanks
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.
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.
Exactly. These fictional UIs are designed for a single end - to look good on camera. I think there is an inverse correlation between "cool" and "useful" - the "cool" often distracts from the "useful". While this kind of UI could work for something trivial like a simple calculator or alarm clock, in my experience it does not work for serious applications. As works of art however, these things are a beauty to look at - http://sciencefictioninterfaces.tumblr.com/
I had this idea first back when I saw Star Trek The Next Generation and its slick flat computer panels, called "okudagrams" after their designer, Michael Okuda - https://en.wikipedia.org/wiki/LCARS. I tried to reproduce the look in a note-taking application. It didn't work. The UI was dominated by these large colored buttons and arches, with too much contrast against the black background, leaving too little room for the actual content.
A corollary to this, though, is that UI's that cater to a well-written script and deliver the user into a story, which they enjoy manifesting over and over again, is a successful one.
There is a lot of room for creative metaphor in computer UI, in my opinion - however, I do also agree with your contention that its up to the user. I'm quite sure these complicated interfaces are good for, at the very least, one single user.
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.
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
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.
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.
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.
I don't know anything about control room but I'm generally interested in building information-dense dashboards. Was your electronic music example supposed to show a good example of a display that is developed-based-on-user-feedback?
> the model of the system sits in your head, and the interface simply gives cues.
This is a huge part of any interface that's heavily used. Once you're used to it, the interface is invisible; information is automatically parsed into a mental model, and commands are issued with minimal conscious awareness of actual keys pressed and clicks made. This is also why Emacs and vim users regard their editor as intuitive or good UI:)
To be honest that looks like your typical sysadmins interface. A tiling window manager and/or few tmux sessions and you quickly end up with the same level of information density.
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.
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".
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.
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".
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
73 comments
[ 4527 ms ] story [ 2626 ms ] thread* edit: I did leverage quite a few great libraries, namely three.js... just none that are charting specific
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).
That globe as an interface itself is worth congratulations and should be an envy.
I'll have to look more into your work.
[1] https://github.com/arscan/pleaserotate.js
http://gmunk.com/OBLIVION-GFX
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.
[1] - https://www.youtube.com/watch?v=Ikup60uEg0c [2] - https://youtu.be/bmz9lMP6aQU?t=2m4s, visible for a brief second just after 2m4s
Ultimately, it will depend on your own definition of "cool" and "useful" as to how well any one UI suits those labels.
I had this idea first back when I saw Star Trek The Next Generation and its slick flat computer panels, called "okudagrams" after their designer, Michael Okuda - https://en.wikipedia.org/wiki/LCARS. I tried to reproduce the look in a note-taking application. It didn't work. The UI was dominated by these large colored buttons and arches, with too much contrast against the black background, leaving too little room for the actual content.
There is a lot of room for creative metaphor in computer UI, in my opinion - however, I do also agree with your contention that its up to the user. I'm quite sure these complicated interfaces are good for, at the very least, one single user.
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...
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
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.
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.
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... [2] https://www.dezeen.com/2009/08/03/electricity-distribution-c... [3] http://www.experience-it-all.com/2009/08/moscow%E2%80%99s-el...
This is a huge part of any interface that's heavily used. Once you're used to it, the interface is invisible; information is automatically parsed into a mental model, and commands are issued with minimal conscious awareness of actual keys pressed and clicks made. This is also why Emacs and vim users regard their editor as intuitive or good UI:)
https://www.gnome-look.org/content/show.php/Die+Hard+4.0+-+M...
for reference this is what it looked like in the movie:
https://nmap.org/movies/diehard4/nmap-diehard4-crop-600x300....
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.
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.
In 2010 there was a sequel movie Tron: Legacy http://www.imdb.com/title/tt1104001/
People, learn from this. Seriously. The web doesn't have to be slow if you put effort into it.