Note:
This project is active development.
Upcoming version will act like native custom button card, so existing configs will change slightly.
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
- Overview
- Make it so!
- CB-LCARS Cards
- Screenshots - Button Samples - Sliders/Gauges - Row of sliders (Transporter controls? 😁) - Room Selector with Sliders for Lights
- Acknowledgements & Thanks
- License
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
- 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 animating 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
💫 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
- Create CB-LCARS input helper(s)
- Plot Course
- Create new dashboard and jumpstart with strategy
- Take Control and...
- 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. |
| lovelace-layout-card | Required | Used internally. Also handy for the ultimate in dashboard layout customization! |
| 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-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 setting up the font resource, we use a slightly updated Antonio font resouce string.
This includes weights 100-700 allowing for more fine-grained control of the text as seen in Picard (some displays use really thin font, 100 or 200)
Simply substitute the following resource string when setting up ha-lcars:
https://fonts.googleapis.com/css2?family=Antonio:[email protected]&display=swap
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.
Create the following input helpers in your Home Asstant.
Names are configurable, but Entity ID is required to match.
Click on the Entity ID in the table to launch the add helper dialog in your Home Assistant.
| Name | Entity ID | Type | Values |
|---|---|---|---|
| ALERT CONDITION | input_select.lcars_ui_alert_condition |
Dropdown (input select) | GREEN RED YELLOW BLUE BLACK GRAY |
Next version will not require the templates loaded on the dashboard.
The below instructions will only be needed if you wish to view a sample dashboard with a gallery of all the controls.
CB-LCARS (currently) requires the custom-button-card templates to be added do the dashboard config.
The easiest way to begin is to start with a new dashboard, and activate the CB-LCARS Dashboard Strategy After this, simply take control and go wild.
- Create a new empty dashboard in Home Assistant (
New Dashboard From Scratch) - Navigate to the new dashboard - enter edit mode -> Raw Configuration Editor (from menu at top right)
- Clear the existing default yaml code, and replace with the strategy:
strategy:
type: custom:cb-lcars- Save the configuration and exit the yaml editor.
- The new dashboard configuarion elements should begin to load.
- Before editing, click "Done" at the top to exit edit mode and refresh page if necessary.
The base dashboard configuration is now available on this dashboard via the strategy. You can now "Take Control" and begin your LCARS adventure!
- Click on the pencil at the top right to entire edit mode.
- A dialog will pop up with information on the strategy.
- Click the 3 dots in the top right and choose Take Control
- On the next dialog just click Take Control (do not choose to start with an empty dashboard!)
These are the cards found in CB-LCARS. These are highly configurable - some default styles are shown. Additional style possibilities can be found in the screenshots section.
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 |
 |
- Run in Slider or Guage mode
- Horizontal or Vertical orientation
- Configurable multi-modal slider control:
- Light: brightness, temperature, hue, saturation
- Media Player: volume, seek
- etc.
- 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
- Show/Hide Units, Override unit
- Configurable Subticks
- Show/Hide
- Size
- Count (number of subticks per segement)
TODOs:
- update slider mode to new code (code that gauge uses - better performance)
- expose customization parameters for slider (rounded/square, width/height, etc.)
- add RTL (right-to-left) support (?)
cblcars_card_type: |
Styles |
|---|---|
cb-lcars-label |
 |
cb-lcars-label-picard |
  |
cb-lcars-cascade |
 |
TODOs:
- add presets/expose options for cascade animation settings
- add alternative text sources (sensors?)
- 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
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.
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.