Complete LCARS System

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.

4 Likes

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

1 Like

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:

sun:

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

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!

Apologies for the extremely belated response. I don’t run HA-OS so not sure how to help you. In theory, you should be able to add custom resources somehow. I can look into adding HACS support which should help you if you haven’t figured this out yet.

1 Like

Hey Doug!

No worries at all. I acutely understand how vast sometimes our presence on the internet is and it takes some time to orbit back around to certain sites that aren’t extremely frequented :slight_smile:

I haven’t played around TOO much with it, as my home won’t be finished being built until this Fall, but I AM still very committed to using your amazing interface concept here!!

Actually, I DO think – if you have the bandwidth/interest – it would help a TON if you could add support and publish your add on in the HACS addon app repository. I’ve found that just wrapping it in that integration layer makes it hugely easier to integrate addons and debug any weirdness.

I’d also encourage you to do so, as your work here is absolutely PHENOMENAL stuff – I have used it in other CSS/HTML local projects and it’s just amazingly modular and flows together extremely well. I would love to see your project have more visibility and uptake in use by the community, and HACS support is definitely a good road to that.

I’m actually working on using a local LLM/AI model along with your CSS and codeblocks here such that the AI is able to /dynamically/ create LCARS interfaces ON THE FLY from dynamically fetched options/data. It’s actually SUPER cool, and the detail you’ve put into making the LCARS-ness looking so great and easy to work with has made it basically a DREAM come true!

It’s going to take me some time to get it to the place where I can use it as an abstraction layer so that any arbitrary menu can essentially be LCARS-ized at render time, but for now it’s extremely promising.
But yes, if you are so inclined, please do look into HACS support for your LCARS module here – it’s fantastic and I really would love to see it as a permanent addition to the Home Assistant community!

Thanks again!!

HACS support is live! Just add the repo and it should work.