joernweissenborn
commented
5 years ago WTF, you created this with this CSS?
I mean I hoped that people will do cool stuff, but this is really cool beyond I expected.
I am glad to be part of your amazing work.
What wonders me is the question if the LCARS style, besides looking cool, can really have an advantage in terms of user experienxe.
I think about things like a huge touch screen with the state of your smart home. My longtime goal with this would be to enable nice panels for light switches as well as kind of 'state maps', like the stylized Enterprise, but your sketch of your smart home.
Lot of talk, short story: keep the ideas of what one can do with it coming in!
(I will leave this open for a while for people to discuss what kind of cool stuff we can do with it :) )
Update: Fixed my english :D
ghost
jrwarwick
I got distracted by another project called php-desktop that I hope to wrap all this in (if I ever finish), but here's an actual application that I use (and need) which uses this CSS LCARS library.
First, here is the splash screen. It just remains until most of the screen elements have loaded.
And here is the VIDEO section. It's purpose is to upload videos from the command line and show the results, but for now the example showing ping and other commands running in real-time is most of the job done.
The ARCHIVE section checks that the mp3 and image for the podcast episode are present. It downloads our shownotes from Google Sheets too. These three elements form one huge command to upload them to where each show is archived. After a nice animation plays out, the EXECUTE button appears :) Pressing this uploads the episode, which will be formatted nicely for anyone visiting with their browser.
Here's a close up of the buttons, which are functional.
Pressing a button causes the text to briefly highlight. This can be done via touch screen, mouse or keyboard shortcut.
Some of the display area is used for diagnostic purposes. The button here shows whatever key is being press.
The button beneath it shows "true" if CTRL key is being pressed, otherwise, false. This means you can use keyboard shortcuts now if you don't have a touchscreen.
One section ("TEST") I use to show a screenshot of how this display looks in TNG. The colors in this CSS theme are very accurate and elements are easy to lay out if you know a bit about HTML and CSS (it took me a little longer and my code is not well organised).
Another section is a reference with joernweissenborn's LCARS demo. This provides quick access to the class names and what to expect from them.
In this shot, the 1600+ is the screen resolution, which tells me which media rules were chosen. The number counting up is the seconds since the last text animation which is useful for checking if animations
happen when they should.
It's early days, but sincere thanks to joernweissenborn for helping me make my ugly uploader look cool. I used to not like using it but now I love it :) I hope to make a lot of additions and improvements over time. I just need to think about what to do with the buttons on the left, since my CSS rules hide them on smaller screen resolutions.