Note:
This project is active development.
Functionality and configurations may change over time until stabilized. Things may break - so you may not want to use this on your primary dashboard just yet.
A collection of custom cards for building LCARS styled dashboards in Home Assistant
- Installation - Make it so!
- Breaking Changes (Coming from original project)
- Overview
- States
- CB-LCARS Cards
- Animations and Effects
- Screenshots - Button Samples - Sliders/Gauges - Row of sliders (Transporter controls? 😁) - Room Selector with Sliders for Lights
- Acknowledgements & Thanks
- License
💫 tl;dr: Express Startup Sequence
- Clear All Moorings and Open Starbase Doors
- Install 'required' dependencies from HACS
- Thrusters Ahead, Take Us Out
- Setup HA-LCARS theme (notes below)
- Add font (customized URL)
- Add CB-LCARS custom style to HA-LCARS theme
- Bring Warp Core Online, Engines to Full Power
- Install CB-LCARS from HACS
- Engage!
The following should be installed and working in your Home Assistant instance - these are available in HACS
Please follow the instructions in the respective project documentation for installation details.
| Custom Card | Required? | Function |
|---|---|---|
| ha-lcars theme | Required | Provides base theme elements, styes, color variables, etc. |
| my-slider-v2 | Required | Provided slider function in Multimeter card. |
| lovelace-card-mod | Required | Not strictly needed for CB-LCARS, but is required by HA-LCARS theming at the time of writing. Very useful for modifying the elements/styles of other cards to fit the theme (overriding fonts, colors, remove backgrounds etc.) |
| lovelace-layout-card | Optional | No longer used internally but it's handy for the ultimate in dashboard layout customization! |
| lovelace-hue-like-light-card | Optional | Provides ability to use a Hue-style light and scene control popup card over the native HA light controls. |
When adding the font resource, use a slightly updated Antonio font resouce string.
This will include weights 100-700 allowing for more thinner/lighter text as seen in Picard (some displays use really thin font, 100 or 200)
Substitute the following resource string when setting up font in HA-LCARS theme:
https://fonts.googleapis.com/css2?family=Antonio:wght@100..700&display=swap
(Note: if the font is missing, the card will attempt to load it dynamically from the above URL.)
Ideally, add and use this cb-lcars profile into your HA-LCARS theme. If not, the additional color definitions will be made available to use at runtime by the cards.
Copy the custom LCARS Picard [cb-lcars] definition from cb-lcars-lcars.yaml to your HA-LCARS lcars.yaml file in Home Assistant (per instructions for adding custom themes to HA-LCARS).
Set LCARS Picard [cb-lcars] as the active theme.
Picard [cb-lcars]
Grays, Blues, and Oranges are the core colours. Greens and Yellows added for additional options.
These are the colors used for the ha-lcars defined variables.
- Add CB-LCARS git repository as a custom repo in HACS.
- Install CB-LCARS from HACS like any other project.
Add CB-LCARS cards to your dashboard just like any other card.
If you have used the original versions of CB-LCARS whereby you had to copy the button card templates from github into your lovelace dashboard yaml code - you will run into errors with the latest versions.
If you can - it's advisable to start with a fresh dashboard.
To Retrofit
If you choose to retrofit an existing dashboard, it is necessary to remove those old templates from your dashboard file, and update any card configs that are broken by variable changes.The old cblcars_card_templates: should no longer be in your dashboard file (unless you are intentially trying to override the templates that come with the distribution)
cblcars_card_templates: <-- this section should be removed
template_name:Card config structure also changed slightly from original.
Everything that was in cblcars_card_config: section, has been moved up one level.
cblcars_card_config:
variables:
label: "my label"
would become:
variables:
label: "my label"If you are coming from previous version and run into any quirks - please try on a blank dashboard to see if it resolves it.
This is a set of custom cards to build yourself an LCARS-inspired Home Assistant dashboard.
These cards are built upon custom-button-card with some enhancements to base function and internal template management.
- Inspired by, and meant to be used side-by-side with the amazing ha-lcars-theme
- Provides a (growing) library of elements found in LCARS interfaces like:
- Buttons
- Sliders/Guages
- 'Elbows'
- That d-pad thing
- Animations
- etc.
- Designed with HA 'Sections' or other grid layouts in mind. YMMV with other layouts.
- Collaborative - There are likely way better ways of doing some things - open to any and all suggestions, comments, etc.
- WIP - learn, break, iterate (and probably break again.)
- This is not a standalone theme - it provides lovelace dashboard cards.
The intention is to use ha-lcars-theme to provide the base theme styles, color variables, etc. - It is not a fully standalone set of components (at present.)
For some controls you need to install other cards from HACS (all requirements listed below) - Professional work.
As this is my first crack at an HA custom card - it's a WIP and as I learn, updates and optimaztions will be made. Hobbyist here, not a pro. - A complete set of bugless components to fit every use-case you can imagine. Maybe in the next-class starship :P
In no particular ordeer:
- Customizable variables/settings for just about everything:
- default colors / per-instance colors
- colors based on entity state
- font sizes/weights
- text positions
- full icon customization
- gradients for sliders with automatice step and shade calculations
- really too much to list - you can customize just about anything you like
- Matching control colors to the light entity (buttons, sliders, gradients, etc.)
- Additional 'flare' such as animations, button presses, blinking buttons
- Automatic 'random' button labels in LCARS style (hex numbers)
- Optional: invocation of lovelace-hue-like-light-card popups for light and scene controls
The cards support changing the styles/colors of independent components based on the state of the entity.
If no entity is defined (no state), default will be used. If the entity is unavailable or unknown, then unavailable will be used.
Each of these is configurable in the UI editor for the cards.
State styles can be applied to components such as:
- Borders
- Backgrounds
- Text
- Buttons
- etc.
| Entity State Value | State Variable Name |
|---|---|
| N/A - no entity assigned | default: |
on open locked |
active: |
off closed unlocked |
inactive: |
Number (zero): 0 |
zero: |
| Number (non-zero) | non_zero: |
heat (hvac/climate entity) |
hvac_heat: |
cool (hvac/climate entity) |
hvac_cool: |
unavailable unkown |
unavailable: |
Example of configuration (editiable via UI):
variables:
text:
label:
color:
default: var(--primary-text-color)
active: var(--lcars-ui-secondary)
inactive: var(--lcars-ui-tertiary)
zero: var(--lcars-green)
non_zero: var(--lcars-blue)
hvac_heat: var(--lcars-orange)
hvac_cool: var(--lcars-blue)
unavailable: var(--lcars-card-button-unavailable)
card:
color:
default: var(--lcars-card-top-color, var(--picard-dark-gray))
active: var(--lcars-ui-secondary)
inactive: var(--lcars-ui-tertiary)
zero: var(--lcars-green)
non_zero: var(--lcars-blue)
hvac_heat: var(--lcars-orange)
hvac_cool: var(--lcars-blue)
unavailable: var(--lcars-card-button-unavailable)
background:
default: var(--lcars-card-top-color, var(--picard-dark-gray))
active: var(--lcars-ui-secondary)
inactive: var(--lcars-ui-tertiary)
zero: var(--lcars-green)
non_zero: var(--lcars-blue)
hvac_heat: var(--lcars-orange)
hvac_cool: var(--lcars-blue)
unavailable: var(--lcars-card-button-unavailable)For reference - these are the cards found in CB-LCARS. They are highly configurable - and some default styles are shown.
Additional style possibilities can be found in the screenshots section.
Settings are available in the UI editor.
cblcars_card_type: |
Default Style |
|---|---|
cb-lcars-header |
 |
cb-lcars-header-right |
 |
cb-lcars-header-contained |
 |
cb-lcars-header-open |
 |
cblcars_card_type: |
Default Style |
|---|---|
cb-lcars-footer |
 |
cb-lcars-footer-right |
 |
cb-lcars-footer-contained |
 |
cb-lcars-footer-open |
 |
cblcars_card_type: |
Default Style |
|---|---|
cb-lcars-header-callout |
 |
cb-lcars-header-callout-right |
 |
cb-lcars-footer-callout |
 |
cb-lcars-footer-callout-right |
 |
cblcars_card_type: |
Default Style |
|---|---|
cb-lcars-header-picard |
 |
cb-lcars-header-picard-right |
 |
cb-lcars-footer-picard |
 |
cb-lcars-footer-picard-right |
 |
- Supports interactive (entity) mode, or non-interactive (sensor) mode.
- Mode is determined automatically by the assigned entity
- Run in Slider or Guage mode
- Horizontal or Vertical orientation
- Configurable multi-modal slider control:
- Light: brightness, temperature, hue, saturation
- Media Player: volume, seek
- (uses my-slider-v2 custom card internally)
- Fully configurable borders, label/text, slider
- Color match [border|slider|gauge|gradient start/end etc.] to entity color
- Configurable min, max, gauge increments, slider step size
- Min/Max/Units are automatically obtained from the entity (if supported)
- Show/Hide Units, Override unit
- Configurable Subticks
- Show/Hide
- Size
- Count (number of subticks per segement)
- Ranges: now supporting background colors set with ranges
Background color in gauge mode can be segmented into ranges. This can currently be done in the yaml configuration of multimeter.
type: custom:cb-lcars-multimeter-card
variables:
gauge:
ranges:
- from: 0
to: 30
color: var(--picard-darkest-yellow)
- from: 30
to: 75
color: var(--picard-darkest-green
- from: 75
to: 100
color: var(--picard-darkest-orange)- Card for creating labels/text
- Full graphical customization
- Pre-configured label templates for various looks seen in LCARS
- Library is growing...
cblcars_card_type: |
Styles |
|---|---|
cb-lcars-label |
 |
cb-lcars-label-picard |
  |
- Card-wide active/inactive colors
- Per-segment active/inactive colors
- Assignable entity per segment
- Assignable actions/controls per segment (deafult
toggle)
TODOs:
- update/remove ripple effect
- add 'match entity color' for active state
The cards support a growing library of animations and effects that can be applied to the card. Animations can appear as "backgrounds" for a card giving a really fun effect.
Animations are highly customizable and can be edited via UI. Each animation has a dedicated configuration tab with details.
Just about every option can be configured to create a multitude of looks from the same animation component - please explore!
For those that really want to tinker - see below :)
| template | |
|---|---|
cb-lcars-animation-cascade |
 |
cb-lcars-animation-pulsewave |
 |
You can provide custom animation pattern and keyframes definitions to the animation elements should you desire.
Examples are below. More details to come, but for now know:
custom_patternandcustom_keyframesare provided as text blocks- Embedded variables are not currently supported
template:
- cb-lcars-animation-cascade
variables:
animation:
cascade:
pattern: custom
custom_pattern: |
[
{ "duration": 1, "delay": 0.1 },
{ "duration": 1.5, "delay": 0.2 },
{ "duration": 2, "delay": 0.3 },
{ "duration": 2.5, "delay": 0.4 },
{ "duration": 3, "delay": 0.5 },
{ "duration": 3.5, "delay": 0.6 },
{ "duration": 4, "delay": 0.7 },
{ "duration": 4.5, "delay": 0.8 }
]
custom_keyframes: |
@keyframes colorchange {
0% {color: #ff0000}
25% {color: #00ff00}
50% {color: #0000ff}
75% {color: #ffff00}
80% {color: #ff00ff}
90% {color: #00ffff}
100% {color: #ffffff}
}template:
- cb-lcars-animation-pulsewave
variables:
animation:
pulsewave:
line_angle: 15
scale_line_heights: true
pattern: custom
custom_pattern: |
[
"animateLine3 13s 0.2s infinite",
"animateLine2 13s 0.3s infinite",
"animateLine3 13s 0.4s infinite",
"animateLine3 13s 0.5s infinite",
"animateLine2 13s 0.6s infinite",
"animateLine2 13s 0.7s infinite",
"animateLine2 13s 0.8s infinite",
"animateLine1 13s 0.9s infinite",
"animateLine1 1s 1s infinite",
"animateLine2 1s 0.8s infinite",
"animateLine2 1s 0.7s infinite",
"animateLine2 1s 0.6s infinite",
"animateLine3 1s 0.5s infinite",
"animateLine3 1s 0.4s infinite",
"animateLine2 1s 0.3s infinite",
"animateLine2 1s 0.2s infinite"
]
custom_keyframes: |
@keyframes animateLine1 {
0% { height: 50px; }
50% { height: 25px; }
100% { height: 50px; }
}
@keyframes animateLine2 {
0% { height: 100px; }
50% { height: 50px; }
100% { height: 100px; }
}
@keyframes animateLine3 {
0% { height: 75px; }
50% { height: 37.5px; }
100% { height: 75px; }
}TODOs:
- add alternative text data sources (sensors?)
Below are screenshots and snippets of potential variations of the controls.
A very sincere thanks to these projects and their authors, contributers and communities for doing what they do, and making it available. It really does make this a fun hobby to tinker with.
ha-lcars theme (the definitive LCARS theme for HA!)
As well, some shout-outs and attributions to these great projects:
lovelace-animated-background - Allows for animated/video backgrounds on the dashboard (stars look great.) Additionally, Home Assistant natively supports background images (can be configured in UI from 2024.6+)
lovelace-wallpanel - Great panel-mode features - including hiding side/top bars, screensaver function (with cards support)
LCARSlad London for excellent LCARS images and diagrams for reference.
meWho Titan.DS for such a cool interactive design demo and color reference.
TheLCARS.com a great LCARS design reference, and the base reference for Data Cascade and Pulsewave animations.
wfurphy creative-button-card-templates for debugging code template that dumps variables to the browswer console - super handy.
lcars for the SVG used inline in the dpad control.
This project uses the MIT License. For more details, refer to the LICENSE file.