Star Trek LCARS Theme

Hi,

Something has changed for button card, following the update of Core 2024.2.0. The icons are no longer displayed correctly.

Before

After

Lots of the buttons are affected like this. An update to Lcars will hopefully solve it.

Hi, You can apply this solution before the official fixed comes out.

It doesn’t appear to solve the button icon problem, I still have an issue after the mods and re-starting ha. The icons on some buttons are lit when the light is off, and dim when the light is on! The pill button icons don’t change at all when toggling the functions.

How is everyone getting square badges at the top of the dashboard? I have tried every combination of allowable configuration. That looks way better than the circular badges.

Hi y’all!

After the new HA core and OS updates, my LCARS screen doesn’t show the 3 dot menu.

Has anyone else experienced this? Thanks!

1 Like

I changed the line in the Themes yaml (line 1083) to the following…

margin-right: -42px;

Ironic that’s it’s 42? IDK, but it works. :slightly_smiling_face:

I think if one changes that to any number and back to the original, it should fix it. I just changed it to -20 and it looks pretty good to me.

Hi all, sorry for the delayed announcement. The latest LCARS version, 2.2.4 addresses all of the issues introduced with Home Assistant 2024.2. Please update, and if you have any created any custom theme configurations, don’t forget to back them up and then comp them back in after updating!

Ooof, that’s a tricky one. I haven’t got any experience with layout-card yet, though lots of folks in the Discord community do and may have an answer for you.

Is this what you’re referring to?


If so, these are created in edit mode on the dashboard

2 Likes

After the update, everything is 5x5. Thank you!

1 Like

Update - problem solved

Turned out the latest card-mod.js was the culprit. It introduced some kind of recursion. When I replaced that file with the ancient version from before the upgrade, everything fell into place again. What a relief! :grin: Sorry for bothering everyone…

Original post below…


I am facing the weirdest problem. This morning, I upgraded HA Core from 2023.6.3 to 2024.2.2 (long story why I had to put off updating for such an epic time, actually told elsewhere on this forum):

Core 2024.2.2
Supervisor 2024.02.0
Operating System 11.5
Frontend 20240207.1

The first thing I noticed was LCARS being broken. :pleading_face:

So, I’ve tried a couple of things:

  • I replaced lcars.yaml and lcars.js with the current version from Github and restarted HA. No success.
  • I also replaced card-mod.js with the lasted version from Github and restarted HA. No success.
  • Both .js files are accessible through the browser (http://homeassistant:8123/local/plugins/lcars.js).
  • Of course, I also kept refreshing browsers, trying different browsers and different devices. No success.

The situation now looks like this. The LCARS icons are still present for the HA menu on the left hand side. Also, sound bits are working. However, the main part of the screen does not show LCARS at all.

Have I missed any other breaking changes during the past eight months? What might be the cause for this misery?

Please help! :pray: Those LCARS displays around the house have always made my day!

Hi, I run into this issue because I installed the LCARS theme.

There is a warning for a dublicate key for a color and in the configuration.yaml the inserts for time thrown an error on my installation, so that the frontend could not be loaded.

As workaround this can be deleting by deleting the lines in the configuration.yaml. One can do this in the HA console with vi or with SSH and other external tools when the configuration is externally accessable.

Duplicate key error will be fixed soon, but should not break the frontend UI. I’ve not heard about this from any other user.

Thats cool, because I like the theme.

I did further testing, maybe you can use it.

Any dark LCARS theme has the problem that it don’t show lines on a grid or table.
You can fix this with the “divider-color” to set in a light color for dark themes. Your default is “transparent”. For my themes I use the text-color to get a good contrast to the chosen background.

Then I have some bugs when the theme is not fully rendered. My “testsuite” is a Win10-Desktop-Firefox, Win10-Desktop-Chrome, an Android-Playstore-App (with Webviewer) and an Android-F-Droid-App (without Android Web Viewer).
Curiously sometimes the preview and then after save it shows the full theme, sometimes not a single card is rendered. I don’t know what I can contribute. As there are sometimes all renders right I enabled the theme right (even font, sound and effect)

transparent or black lines on grids and tables
lcars without table lines

Partially rendering with using a theme in user profile

All fine Preview (here remain the buttons to the chosen theme and are not overwritten by the cards theme. I expected also the red background of the Picard I theme)
lcars preview

Partially rendering for a dashboard full of single themed cards
lcars rendering

If you are interested in further testing let me know.

Hi,
I’m pretty new to modifying the interface yet following the instructions here I’ve suceeded in getting the LCARS style interface to display on my installation :smile: I’m loving the amount of work that’s gone into this, and how good it’s looking - well done and thanks to all!

I have a question, given the low-level nature of this modification, I’m spending more time in the code editor sections of the UI, and I’m finding it really hard to read the light-grey text on white background:

Does anyone have any tips or suggestions to make this more legible? (Ideally darken the background for code) It’s kinda hampering my ability and enthusiasm to get into the code further…

thanks!

You could try a different theme to see if the contrast is better, but I tend to switch back the default theme while editing then go back to whichever LCARS theme is your preference to check the result. Or, if you have the luxury of having 2 screens you could have HA open on both, with the default theme applied to the one used for editing and the other on the LCARS theme to see the result as it’s applied.

I have too many screens!

I had a rummage on Discord (an interesting experience) and found that you can add the following colour definition to a custom theme:

code-editor-background-color: "#000000"

which seems to work nicely.

That Discord group is amazing. Some of the dashboards in use are awesome. Lots of good advice and support too.

1 Like

Latest version, 3.0 fixes the code editor background color. Still not perfect, but significantly better!