Complete LCARS System

Share your Projects! Dashboards & Frontend
1

First off, let me say the LCARS Theme is awesome and for most of you who want to Trekify your HA dashboard, it will do everything you want. For those of you who want a more complete LCARS system, I built a custom card/panel that lets you create extremely complex LCARS layouts and navigation. Right now, it only has read access to HA state, but interactivity is coming soon.

First release is now available on GitHub and there are installation instructions and a link to demo configs (including the one shown below) and a full walkthrough.

IMG_9665
IMG_96652532Ă—1170 280 KB

4 Likes
2

Just published a new release with quite a few features and fixes.

1 Like
3

Hello there. I am trying to get this to work using your sample yaml. I have added the demo and sun yaml and have added the .js and .css file. The demo page seems to load fine. However, the sun page is a bit out of whack. Can you advise what I should check to fix this?? Thank you.

demo:

demo
demo1920Ă—958 115 KB

sun:

sun
sun1920Ă—958 326 KB

4

@duceduc It looks like there is a glitch with the panel-all component. If you wrap it in a col this should be fixed:

          - type: col
            children:
              - type: panel-all
                config: ...
5

Hey Doug! So your code here is what I’ve been looking for the last 20 years :slight_smile: finally we have the technology and capability to make an actual, usable, responsive, LCARS interface. I cannot thank you enough for doing the legwork of putting together the styles and palettes.
What’s best is that since it’s just JS and CSS, it actually opens up the ability to use it in ANY place with a web framework.
Now onto my question – I’m building a new home (yay!) I’m pre-designing and iterating the HA-OS “core” of the whole smart home system. I’ve got HA-OS running on a desktop-level mini-PC, running containerized for easy updates, etc. This all seems to be going well so far.
I have having trouble getting the LCARS JS/CSS to be accessible to my dashboard cards though. I am getting “Configuration error” in the card when I try and set the type to ha-lcars-panel.
I have imported the .js and .css files as resources, tried both locally on the machine and pointing to a remote URL.
Your instructions indicate to copy the files to /config/www on the HA installation, but since I’m running containerized, I do not seem to have this directory construct available. I’ve tried to search for similarly named locations on the entire filesystem but haven’t found anything promising.
I assume I am just not getting them to be “available” in the cascade of style sheets for when it renders the cards, so my errors are thrown. I admit I am not a web developer so this isn’t my forte, but I have no hesitation with digging into any of this.
Could you maybe point me in the right direction for where I need to get these files to so that the HA card system has access to them?

Thanks, again I appreciate all of your work, the interface is amazingly beautiful and I can’t wait to use it everywhere! I’d love to get some sort of LLM agent to build and LCARS UI on the fly from available options in the future! Thanks Doug!