Note: This project is under reconstruction. The goal is to move towards consuming these templates as custom cards. This will take some time - but you can still use the below from the original version.

A collection of custom button-card templates for building LCARS styled dashboards in Home Assistant

Overview
Before You Begin
- Get to know custom-button-card
- Dependencies and Extras
Getting Started
- Install CB-LCARS Templates
- HA-LCARS Theme - Setup and Customizations
  - Font
  - Custom Picard Colors
The Templates
Dashboard Examples
- Row of sliders (Transporter controls? 😁)
- Room Lighting Controls
Acknowledgements & Thanks
License

Overview

What is this?

<ramble>
Being a huge [trekkie|trekker] and avid home assistant user, when I came across the amazing ha-lcars theme I was intrigued. After spending some time playing with this theme and working on some dashboards - I was hooked. I wanted to make a full LCARS tablet interface for my home.

Re-watching Picard at the time - and drooling over the new LCARS interfaces in season 3 - I decided that I really wanted that look for my dashboards.

Using the ha-lcars theme as the foundation - work began to try and build a library of highly configurable controls - attempting to achieve the style of the new LCARS.

As I don't have much (any?) experience with web/css stuff - it was decided to build this using existing cards if possible - and using custom-button-card as the foundation.

There are probably way better ways of doing things - open to any and all suggestions. This is a learning project for me - so as I learn new techniques, ways of doing stuff, or just plain change my mind about something - I'm going back and revamping it.
Expect breakage :)
</ramble>

What it isn't...

This is not a standalone theme.
It is made with the intention of ha-lcars providing the theme styles, color variables, existing card-mod classes etc.
It's also not an attempt to re-invent the wheel. Where there are great components/cards out there that I felt would work in building this - those were used.
As such, this isn't a fully standalone set of components. For some controls you need to install other cards from HACS (all listed below of course.)

What it looks like...

These are a couple examples of WIP dashboards.

'Home' screen is a good example of multiple templates in use.

cb-lcars-label (clock)
cb-lcars-button-grid
cb-lcars-button-picard
cb-lcars-footer
cb-lcars-callout-right
cb-lcars-slider
etc.

Lights screen with selectable rooms. Each room has a grid (cb-lcars-grid) of sliders (cb-lcars-multimeter) for the lights in that room. cb-lcars-multimeter has panel mode set to gauge and the slider colors are set to match the color of the light entity (fully configurable)

A 'RED ALERT' color scheme is provided. You can turn the complete interface into RED ALERT mode with a service call.

Another dashboard sample showing more Picard styles, along with mini-graph-card and thermostat cards.

Debug Mode: when building out multiple controls on top of cb-lcars-card-base template as the canvas - enable debug to have the background change to a random color. Allowing for easier visuals to debug sizes and placements. It's hard when everything is black or transparent!

What can it do...

Being based on custom button-card templates, the sky isn't even the limit. With tweaks to this variable, or that variable you can have completely different looks on these controls with minimal amount of coding. The idea was to have base template(s) to do the heavy lifting, and offer simple templates layered on top to to achieve the various components more easily.

In no particular order:

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
Versatile 'grid' control (cb-lcars-grid) that is used to create many other controls. Used in:
- button panels/groups
- gauges (the percent markers, tick marks, etc.)
- sliders
- can auto-calculate card/grid sizes, number of cells, etc.
Automatic 'random' button labels in LCARS style (hex numbers)
Optional: invocation of lovelace-hue-like-light-card popups for light and scene controls

Before You Begin

Get to know `custom-button-card`

This collection of controls are implementations of custom-button-card configuration templates. It's important to familiarize yourself with how templates work - or you may go mad.

💫 tl;dr:

Templates are additive - last definition of a duplicated variable wins.

Variables are processed in alphanumeric order. It is what it is.

Dependencies and Extras

The following dependencies should be installed and working in your Home Assistant instance. These are available in HACS - Please follow the instructions in the respective projects for details.

Custom Card	Required?	Function
custom-button-card	Required	Base Framework
ha-lcars theme	Required	Provides base theme elements, styes, color variables, etc.
my-cards/my-slider-v2	Required	Provides slider function which is used in the slider/gauge controls.
lovelace-layout-card	Required	Provides the CSS grid-layout features used in the `cb-lcars-grid*` templates. Also handy for the dashboard layout itself.
lovelace-card-mod	Required	Required for HA-LCARS. Useful for modifying other card elements/styles to fit the theme (changing fonts, colors, remove backgrounds etc.)
lovelace-hue-like-light-card	Optional	Provides a Hue-style light and scene control popup card.

Extras for your dashboard creation:

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)

Getting Started

Install CB-LCARS Templates

Per custom-button-card documentation, template definitions are added to your dashboard's YAML file.

A valid YAML file of all the LCARS templates is provided as cb-lcars-full.yaml

Copy the full contents of cb-lcars-full.yaml into the YAML of your dashboard.
Create an input helper boolean in your Home Assistant instance named input_boolean.lcars_ui_debug. This is mandatory as it is required by the template code which allows for using the visual debug option in cb-lcars-card-base.

HA-LCARS Theme - Setup and Customizations

These components are built on top of, and are intended to extend the great ha-lcars theme. These palettes have been created from multiple sources - and filled out with additional shades to create full palettes to select your colors from.

Font

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:wght@100..700&display=swap

Custom Picard Colors

Copy the custom Picard [cb-lcars] and Picard RED ALERT [cb-lcars] definitions from cb-lcars-lcars.yaml to your ha-lcars lcars.yaml file in Home Assistant (per the standard way of adding custom themes to HA-LCARS).

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.

Picard II RED ALERT [cb-lcars]

RED ALERT theme will substitue color codes from the red spectrum in place of the original variable color codes.
These were derived by AI from the original palette.

The Templates

Core Templates

Base Templates

Template	Description
`cb-lcars-functions`	A libary of custom reuasable javascript functions that can be leveraged when building complex/dynamic cards. These are functions that are stored in variables and will execute when used in other variable definitions with javascript.
`cb-lcars-base`	This is the base template for cb-lcars. This defines most variables and styles that are used by the rest of the library of tempalates. This template is not meant to be used on its own, but rather can be included when building out new types of controls etc. Please see `cb-lcars-base` for details.
`cb-lcars-card-base`	This is a template that you can use on a foundational custom-button-card that is being used as a canvas to build more complex controls (eg. `cb-lcars-multimeter`) or dashboard components. It will change the background color of the card when debug mode is enabled. To use: Create an input helper boolean in your Home Assistant instance named `input_boolean.lcars_ui_debug` When toggled on, the card background will turn to a random color as a visual assist.
`cb-lcars-debug`	Adapted from a very nice template by wfuphy This template can be added to enable console debug printing of any custom button card's objects (`variables`,`this`,`hass` etc. ). To use: Add `cb-lcars-debug` to the card's template list. In the browser console, you will then have access to see the varibles defined etc.

Actions

Some presets for actions to be assigned. Anything can be defined as an action that is supported by custom-button-card - see its documentation for more details.

Of note in this list - if you like the style of Philips Hue interface, then cb-lcars-actions-hue-* is for you!

Template	Description
`cb-lcars-actions-disable`	Disables all actions for the button.
`cb-lcars-actions-toggle`	Sets tap action to `toggle`, hold action to `more-info`, and double-tap to `more-info`
`cb-lcars-actions-more-info`	Sets all actions to `more-info`
`cb-lcars-actions-hue-[tap\|hold]`	Uses lovelace-hue-like-light-card API to pop up the Hue-style light control dialog on `[tap\|hold]` -tap `tap_action:` hue card `double_tap_action: more-info` `hold_action: toggle` -hold `tap_action: toggle` `double_tap_action: more-info` `hold_action:` hue card TODO: instructions how to use this

Flare

Template	Description
`cb-lcars-animate-press`	Adds an animation to the button when pressed.
`cb-lcars-state-blink`	Causes the button to blink when active.

LCARS Basic Shapes

These are the basic shapes found in LCARS. These are highly configurable - default styles are shown with some examples of how to configur them to look like other versions seen in Picard.

LCARS Headers

Header Templates

Template	Default Style
`cb-lcars-header`
`cb-lcars-header-right`
`cb-lcars-header-contained`
`cb-lcars-header-open`
`cb-lcars-header-picard`
`cb-lcars-header-picard-right`

Examples

YAML

Result

type: custom:button-card
template:
  - cb-lcars-header-picard-right
variables:
  card:
    width: 600px
    height: 170px
    border:
      top:
        right_radius: 120px
      inner:
        width: 70px
        factor: 0
  lcars:
    border:
      gap: 5px
  lcars_outer:
    card:
      border:
        top:
          size: 10px
        right:
          size: 155px
  lcars_inner:
    card:
      border:
        top:
          size: 10px
          right_radius: 160px
        right:
          size: 50px
        inner:
          factor: 1.3

type: custom:button-card
template:
  - cb-lcars-header-picard-right
variables:
  card:
    height: 160px
    width: 400px
    border:
      top:
        right_radius: 90px
      inner:
        factor: 2
  lcars:
    border:
      gap: 4px
      factor: 4
      top:
        size: 20px
      right:
        size: 180px
  lcars_outer:
    card:
      border:
        right:
          size: 60px
        top:
          size: 60px
      color: var(--lcars-blue)
  lcars_inner:
    card:
      border:
        right:
          size: 0px
        top:
          size: 45px
        inner:
          factor: 0.7
      color: var(--lcars-card-top-color)

LCARS Footers

Footer Templates

Template	Default Style
`cb-lcars-footer-base`	n/a
`cb-lcars-footer`
`cb-lcars-footer-right`	(cb-lcars/cb-lcars-footer.yaml)
`cb-lcars-footer-contained`
`cb-lcars-footer-open`
`cb-lcars-footer-picard`
`cb-lcars-footer-picard-right`

Examples

YAML	Result
type: custom:button-card template: - cb-lcars-footer-picard variables: card: height: 176px width: 350px border: bottom: left_radius: 160px inner: factor: 1.27 width: 50px lcars: border: gap: 5px factor: 4 bottom: size: 20px left: size: 180px lcars_outer: card: border: left: size: 45px bottom: size: 45px lcars_inner: card: border: left: size: 155px bottom: size: 45px inner: factor: 1.5 color: var(--picard-light-gray)
type: custom:button-card template: - cb-lcars-footer-picard-right variables: card: height: 180px width: 300px border: bottom: right_radius: 160px inner: factor: 1.4 width: 50px lcars: border: gap: 5px bottom: size: 20px right: size: 180px lcars_outer: card: border: right: size: 45px bottom: size: 45px color: var(--lcars-ui-secondary) lcars_inner: card: border: right: size: 10px bottom: size: 10px inner: factor: 4 color: var(--lcars-ui-primary)
type: custom:button-card template: - cb-lcars-footer-picard-right variables: card: height: 170px width: 300px border: bottom: right_radius: 80px inner: factor: 1.6 width: 50px lcars: border: gap: 5px bottom: size: 20px right: size: 180px lcars_outer: card: border: right: size: 130px bottom: size: 45px color: var(--lcars-ui-secondary) lcars_inner: card: border: right: size: 165px bottom: size: 0px inner: factor: 1 color: var(--lcars-card-bottom-color)
Fun example of combining two of the cards together to create the bordered look. type: custom:button-card template: - cb-lcars-card-base styles: card: - width: 300px - height: 175px - border-radius: 0 !important # CSS tranform the whole card if desired - transform: skew(-20deg) custom_fields: elbow: - position: absolute - bottom: 0px - right: 0px inner_elbow: - position: absolute - left: 0px - top: 0px custom_fields: inner_elbow: card: type: custom:button-card template: - cb-lcars-footer-picard-right variables: card: height: 139px width: 100px border: inner: factor: 1 width: 50px bottom: right_radius: 80px lcars: border: gap: 4px lcars_outer: card: color: transparent border: bottom: size: 20px right: size: 15px lcars_inner: card: color: var(--lcars-ui-secondary) border: bottom: size: 5px right_radius: 60px right: size: 5px inner: factor: 1 elbow: card: type: custom:button-card template: - cb-lcars-footer-picard-right variables: card: height: 175px width: 500px border: bottom: right_radius: 80px inner: factor: 1.2 width: 50px lcars: border: gap: 4px lcars_outer: card: color: var(--lcars-ui-secondary) border: bottom: size: 6px right: size: 6px lcars_inner: card: color: var(--lcars-card-bottom-color) border: bottom: size: 45px right: size: 205px inner: factor: 1

LCARS Callouts

Callout Templates

Template	Default Style
`cb-lcars-callout-base`	n/a
`cb-lcars-header-callout`
`cb-lcars-header-callout-right`
`cb-lcars-footer-callout`
`cb-lcars-footer-callout-right`

Examples

YAML

Result

type: custom:button-card
template:
  - cb-lcars-header-callout
variables:
  card:
    height: 55px
    min_height: 45px
    width: 420px
    border:
      left:
        size: 25px
      top:
        size: 3px
      color: var(--picard-lightest-blue)

type: custom:button-card
template:
  - cb-lcars-header-callout-right
variables:
  card:
    height: 80px
    width: 420px
    border:
      right:
        size: 5px
      top:
        size: 20px
      color: var(--picard-lightest-orange)

LCARS Text Labels

Text/Label Templates

Template	Default Style
`cb-lcars-label`

Examples

YAML	Result
type: custom:button-card template: cb-lcars-label label: engineering ii variables: text: label: font_size: 42px font_weight: lighter color: default: var(--picard-light-orange)
type: custom:button-card template: cb-lcars-label entity: sensor.patio_sensor_temperature show_state: true show_label: false variables: card: height: 60px text: state: font_size: 60px
type: custom:button-card template: cb-lcars-label label: cb-lcars show_label: true variables: text: label: font_size: 60px font_weight: lighter color: default: var(--picard-light-orange) padding: left: 40px card: height: 60px width: 490px border: left: size: 110px right: size: 40px color: var(--lcars-card-bottom-color)

LCARS Buttons

Standard Buttons

Button Templates

Template	Default Style
`cb-lcars-button-base` `cb-lcars-button-square`

Rounded Buttons

Template	Default Style
`cb-lcars-button-lozenge` `cb-lcars-button-lozenge-right`
`cb-lcars-button-bullet` `cb-lcars-button-bullet-right`
`cb-lcars-button-capped` `cb-lcars-button-capped-right`

Picard-Style Buttons

Picard Button Templates

Template	Default Style
`cb-lcars-button-picard` `cb-lcars-button-picard-right`
`cb-lcars-button-picard-dense` `cb-lcars-button-picard-dense-right`
`cb-lcars-button-picard-filled` `cb-lcars-button-picard-filled-right`
`cb-lcars-button-picard-filled-dense` `cb-lcars-button-picard-filled-dense-right`
`cb-lcars-button-picard-icon`

Picard-Style Text Modifiers

Picard Text Modifier Templates

Template	Default Style
`cb-lcars-button-picard-[label\|state\|name]-[east\|west\|ne\|nw\|se\|sw]`

Button Examples

YAML	Result
type: custom:button-card template: - cb-lcars-button-picard-filled - cb-lcars-button-picard-label-se - cb-lcars-button-picard-state-west - cb-lcars-button-picard-name-ne entity: input_boolean.enable_verbal_notifications label: lcars-button-picard-filled show_icon: true show_state: true show_name: true variables: text: label: font_size: 22px font_weight: bold icon: color: active: transparent inactive: transparent background: active: var(--picard-blue) inactive: transparent	Entity is 'on' Entity is 'off'
type: custom:button-card template: cb-lcars-button-picard entity: input_boolean.enable_verbal_notifications label: lcars-button-picard variables: text: color: 'on': var(--picard-blue) card: color: active: var(--picard-blue)	Entity is 'on' Entity is 'off'
type: custom:button-card entity: input_boolean.enable_verbal_notifications template: cb-lcars-button-lozenge-right label: lcars-button-lozenge-right show_icon: true icon: si:startrek variables: card: color: background: inactive: var(--picard-orange) active: var(--picard-blue) icon: color: inactive: var(--picard-lightest-orange) active: var(--picard-lightest-blue)	Entity is 'on' Entity is 'off'

LCARS Constructors

Grids

Grid Templates

Template	Default Style
`cb-lcars-grid`	Versatile base grid control. Other elements can be added into a grid such as buttons, sliders, icons, etc.
`cb-lcars-button-grid`
`cb-lcars-button-grid-icons`

Grid Examples

YAML

type: custom:button-card
template:
  - cb-lcars-button-grid
variables:
  button:
    template:
      - cb-lcars-button-lozenge
    variables:
      card:
        color:
          background:
            inactive: var(--lcars-blue)
        height: 65px
  grid:
    gap: 20px
    X: 2
    Y: 4
    buttons:
      -
      - label: custom-label
        template:
          - cb-lcars-button-picard-filled
          - cb-lcars-button-picard-label-ne
      - template:
          - cb-lcars-button-bullet-right
      - template:
          - cb-lcars-button-bullet
      -
      - entity: input_boolean.lcars_ui_debug
        show_name: true
        show_label: false
        show_icon: true
      -
      - variables:
          card:
            color:
              background:
                inactive: var(--picard-darkest-gray)

YAML

      type: custom:button-card
      template: cb-lcars-button-grid
      variables:
        auto_calc_X: false
        grid:
          buttons:
            - entity: binary_sensor.patio_gate_home_security_intrusion
              label: patio gate
              variables:
                card:
                  color:
                    inactive: var(--picard-medium-light-blue)
                    active: var(--error-color)
            - entity: binary_sensor.front_door_home_security_intrusion
              label: door
            - entity: binary_sensor.front_window_home_security_intrusion
              label: window
            - entity: binary_sensor.office_window_home_security_intrusion
              label: office
            - entity: binary_sensor.bedroom_window_home_security_intrusion
              label: bedroom
          X: 5
          'Y': 1
          gap: 15px
        button:
          variables:
            card:
              width: 140px
              height: 55px
              color:
                active: var(--error-color)
                inactive: var(--picard-dark-gray)
                background:
                  active: transparent
                  inactive: transparent
            icon:
              color:
                active: null
                inactive: null
              background:
                active: null
                inactive: null
          template:
            - cb-lcars-button-picard
            - cb-lcars-actions-more-info
            - cb-lcars-state-blink

YAML

type: custom:button-card
template:
  - cb-lcars-button-grid-icons
variables:
  button:
    variables:
      card:
        color:
          background:
            inactive: var(--warning-color)
            active: var(--picard-blue)
      icon:
        color:
          background:
            inactive: var(--warning-color)
            active: var(--picard-blue)
  grid:
    X: 4
    buttons:
      - entity: switch.living_room_recordings
      - entity: switch.living_room_detect
      - entity: switch.living_room_snapshots
      - entity: switch.living_room_push_notifications
        variables:
          icon:
            color:
              background:
                inactive: var(--picard-dark-blue)
                active: var(--picard-blue)
          card:
            color:
              background:
                inactive: var(--picard-dark-blue)
                active: var(--picard-blue)

LCARS Controls

Sliders

Slider/Meter/Gauge Templates)

Template	Default Style
`cb-lcars-meter`
`cb-lcars-meter-horizontal`
`cb-lcars-slider`
`cb-lcars-slider-gauge`
`cb-lcars-slider-horizontal`
`cb-lcars-slider-horizontal-gauge`

Meter/Slider/Gauge Examples

Generally you will only use the cb-lcars-slider and cb-lcars-slider-gauge control.
These styles apply there in the respective variables section as it is built with cb-lcars-meter and cb-lcars-gauge shown here for examples.

`cb-lcars-slider` `cb-lcars-slider-gauge` YAML	Result
type: custom:button-card template: cb-lcars-slider variables: entity: light.desk slider: variables: mask_color: rgba(0,0,0,1)	`mask_color` controls the shade of the slider control that overlays the meter background. Default is semi-tranparent, but this example makes it opaque black.
type: custom:button-card template: - cb-lcars-slider-gauge entity: light.tv variables: card: height: 300px	Default `cb-lcars-slider-gauge` with a height specified. Gauge lines automatically calculate to adjust to the height specified.
type: custom:button-card template: - cb-lcars-slider-gauge entity: light.tv variables: card: height: 400px width: 50px slider: variables: color: var(--error-color) color_alpha: 0.7 border_color: none meter: variables: button: variables: text: label: color: 'on': var(--warning-color) card: color: active: var(--error-color)	`cb-lcars-slider-gauge` with a height and width specified. The slider is set to the `--error-color` variable, and given a 70% alpha. The gauge markers are also set to `--error-color` to match, and the labels are set to `--warning-color`. This shows how each component can have different styles if desired.

`cb-lcars-slider-horizontal` `cb-lcars-slider-horizontal-gauge` YAML	Result
type: custom:button-card template: cb-lcars-slider-horizontal entity: light.tv variables: meter: variables: gradient_start_color: var(--picard-dark-blue) gradient_end_color: var(--picard-lightest-blue) button: template: cb-lcars-button-lozenge slider: variables: mask_color: rgba(0,255,0,0.7)	Horizontal slider setting a gradient start and end color, setting the the meter to the lozenge button style, and for example - changing the slider masking color to a transparent green.
type: custom:button-card template: cb-lcars-slider-horizontal entity: light.tv variables: card: height: 20px meter: variables: gradient_start_color: var(--picard-dark-blue) gradient_end_color: var(--picard-orange) _gradient: gap: 10px button: variables: card: width: 30px height: 20px template: - cb-lcars-button-lozenge slider: variables: mask_color: rgba(0,0,0,0.7)	Horizontal slider setting a 20px height, a custom gradient color and overriding the gradient gap to 10px. The lozenge style is used again, but set to a custom height and width to give a pill effect.
type: custom:button-card entity: light.tv template: cb-lcars-slider-horizontal-gauge	Horizontal gauge with default settings.
type: custom:button-card entity: light.tv template: cb-lcars-slider-horizontal-gauge variables: entity_match_slider: true gauge: show_sub_meter: false	Horizontal gauge with the sub-meter (ticks) hidden, and the slider color matches the color of the light entity. Slider will change color as the entity changes color.

cb-lcars-meter
YAML Result

type: custom:button-card
template: cb-lcars-meter
variables:
  gradient_start_color: var(--picard-lightest-blue)
  gradient_end_color: var(--picard-dark-blue)

type: custom:button-card
template: cb-lcars-meter
variables:
  gradient_start_color: var(--picard-lightest-blue)
  gradient_end_color: var(--picard-dark-blue)
  button:
    variables:
      card:
        height: 15px
    template:
      - cb-lcars-button-picard-filled

type: custom:button-card
template: cb-lcars-meter
variables:
  gradient_start_color: var(--warning-color)
  gradient_end_color: var(--picard-lightest-gray)
  button:
    variables:
      card:
        height: 10px
    template:
      - cb-lcars-button-picard-filled
  _gradient:
    gap: 1px
    'Y': 18

type: custom:button-card
template:
  - cb-lcars-meter
variables:
  _gradient:
    'Y': 20
    gap: 1px
  gradient_start_color: var(--lcars-blue)
  gradient_end_color: var(--lcars-orange)
  button:
    variables:
      card:
        height: 10px

type: custom:button-card
template:
  - cb-lcars-meter
variables:
  _gradient:
    'Y': 20
    gap: 1px
  gradient_start_color: var(--lcars-blue)
  gradient_end_color: var(--lcars-orange)
  button:
    variables:
      card:
        height: 10px
        width: 10px

Fully Built Controls

Control Templates

Template	Default Style
`cb-lcars-multimeter`
`cb-lcars-dpad`

Multimeter Examples

cb-lcars-multimeter
YAML Result

#default style
type: custom:button-card
template: cb-lcars-multimeter
variables:
  entity: light.tv

#set the button/frame to orange
type: custom:button-card
template: cb-lcars-multimeter
variables:
  entity: light.tv
  label: btn.orange
  header_button:
    variables:
      card:
        color:
          background:
            active: var(--picard-orange)

#match the button/frame color to the light entity
type: custom:button-card
template:
  - cb-lcars-multimeter
variables:
  entity: light.tv
  entity_match_header: true
  label: match ent.

#match button/frame and the gradient end to entity
type: custom:button-card
template:
  - cb-lcars-multimeter
variables:
  entity: light.tv
  entity_match_header: true
  entity_match_slider_end: true
  label: match sld end

#match button/fram and gradient start to entity
type: custom:button-card
template:
  - cb-lcars-multimeter
variables:
  entity: light.tv
  entity_match_header: true
  entity_match_slider_start: true
  label: match sld start

#default panel mode (slider) with label
type: custom:button-card
template: cb-lcars-multimeter
variables:
  entity: light.tv
  label: Slider

#panel mode: icons
type: custom:button-card
template: cb-lcars-multimeter
variables:
  entity: ''
  label: icons
  panel:
    mode: icons

#panel mode: gauge
type: custom:button-card
template: cb-lcars-multimeter
variables:
  entity: light.tv
  label: gauge
  panel:
    mode: gauge

type: custom:button-card
template: cb-lcars-multimeter
entity: switch.living_room_recordings
variables:
  label: living room
  card:
    width: 360px
    height: 60px
  panel:
    mode: icons
    width: 215px
    height: 50px
    icon_grid:
      variables:
        button:
          variables:
            card:
              color:
                background:
                  inactive: var(--warning-color)
                  active: var(--picard-blue)
            icon:
              color:
                background:
                  inactive: var(--warning-color)
                  active: var(--picard-blue)
        grid:
          X: 4
          buttons:
            - entity: switch.living_room_recordings
            - entity: switch.living_room_detect
            - entity: switch.living_room_snapshots
            - entity: switch.living_room_push_notifications
              variables:
                icon:
                  color:
                    background:
                      inactive: var(--picard-dark-blue)
                      active: var(--picard-blue)
                card:
                  color:
                    background:
                      inactive: var(--picard-dark-blue)
                      active: var(--picard-blue)

Dashboard Examples

Here are a few examples from some WIP dashboards.

Row of sliders (Transporter controls? 😁)

This is an extract of a group of vertical sliders reminiscent of the transporter controls (to me anyway)

YAML

type: custom:button-card
template:
  - cb-lcars-functions
  - cb-lcars-card-base
variables:
  entities:
    - light.living_room_ambient
    - light.corner_lamp
    - light.kitchen
styles:
  card:
    - height: 702px
    - width: 1223px
    - border-radius: 0 !important
  custom_fields:
    slider_grid:
      - position: absolute
      - top: 140px
      - right: 50px

    .
    .
    .
    
custom_fields:
  .
  .
  .
  
  slider_grid:
    card:
      type: custom:button-card
      template:
        - cb-lcars-grid
      variables:
        button:
          type: custom:button-card
          template:
            - cb-lcars-functions
            - cb-lcars-slider
          variables:
            entity: '[[[ return variables.entities[0] ]]]'
            card:
              height: 300px
              width: 63px
            entity_match_slider_end: true
            meter:
              variables:
                gradient_start_color: var(--picard-light-blue)
                button:
                  template: cb-lcars-button-lozenge
                  variables:
                    card:
                      width: 63px
                      height: 15px
                grid:
                  gap: 5px
            slider:
              variables:
                mask_color: rgba(0,0,0,0.85)
        grid:
          gap: 8px
          'Y': 1
          X: 3
          buttons:
            - variables:
                entity: '[[[ return variables.entities[0] ]]]'
                meter:
                  variables:
                    gradient_start_color: var(--picard-light-blue)
                    button:
                      template: cb-lcars-button-lozenge
                      variables:
                        card:
                          width: 63px
                          height: 15px
                  grid:
                    gap: 5px
            - variables:
                entity: '[[[ return variables.entities[1] ]]]'
            - variables:
                entity: '[[[ return variables.entities[2] ]]]'
            - variables:
                entity: '[[[ return variables.entities[3] ]]]'
            - variables:
                entity: '[[[ return variables.entities[4] ]]]'
            - variables:
                entity: '[[[ return variables.entities[5] ]]]'

Room Lighting Controls

This is an example of a room picker that has a grid of lights in each room.
Basically the room selector is an input_select that controls visibility of a card with the lights of each room in the content area between the header and footer.

The room selector is a bit more complex as it's a grid which the small rectangle in the second column denotes the color/state of that room - so at a glance I know if lights are on in that room.

YAML

type: custom:button-card
template:
  - cb-lcars-card-base
styles:
  card:
    - height: 702px
    - width: 1223px
    - border-radius: 0 !important
  custom_fields:
    group_selector:
      - position: absolute
      - top: 130px
      - left: 70px
    sliders_livingroom:
      - position: absolute
      - top: 130px
      - left: 275px
    sliders_kitchen:
      - position: absolute
      - top: 130px
      - left: 275px
    sliders_bathroom:
      - position: absolute
      - top: 130px
      - left: 275px
    sliders_office:
      - position: absolute
      - top: 130px
      - left: 275px
    sliders_bedroom:
      - position: absolute
      - top: 130px
      - left: 275px
    sliders_patio:
      - position: absolute
      - top: 130px
      - left: 275px
    sliders_others:
      - position: absolute
      - top: 130px
      - left: 275px
    inner_footer:
      - position: absolute
      - bottom: 35px
      - left: 110px
    inner_header:
      - position: absolute
      - top: 25px
      - left: 110px
custom_fields:
  .
  .
  .
  group_selector:
    card:
      type: custom:layout-card
      layout_type: custom:grid-layout
      cards:
        - type: custom:button-card
          template:
            - cb-lcars-button-picard-filled-dense
            - cb-lcars-animate-press
            - cb-lcars-actions-hue-hold
          variables:
            card:
              height: 55px
              color:
                active: var(--picard-medium-light-blue)
                inactive: var(--picard-medium-dark-gray)
                background:
                  active: var(--picard-medium-light-blue)
                  inactive: var(--picard-medium-dark-gray)
            action:
              hue_api: lcars-hue-living_room
          state:
            - id: state_on
              value: LIVING ROOM
            - id: state_off
              operator: '!='
              value: LIVING ROOM
          entity: input_select.lcars_ui_lightgroup_selector
          label: Living Room
          tap_action:
            action: call-service
            service: input_select.select_option
            data:
              entity_id: input_select.lcars_ui_lightgroup_selector
              option: LIVING ROOM
        - type: custom:button-card
          template:
            - cb-lcars-button-picard-filled-dense
            - cb-lcars-actions-hue-tap
          entity: light.living_room
          show_state: false
          variables:
            card:
              height: 55px
              color:
                background:
                  active: var(--button-card-light-color)
                  inactive: var(--picard-dark-gray)
            action:
              hue_api: lcars-hue-living_room
        - type: custom:button-card
          template:
            - cb-lcars-button-picard-filled-dense
            - cb-lcars-animate-press
            - cb-lcars-actions-hue-hold
          variables:
            card:
              height: 55px
              color:
                active: var(--picard-medium-light-blue)
                inactive: var(--picard-medium-dark-gray)
                background:
                  active: var(--picard-medium-light-blue)
                  inactive: var(--picard-medium-dark-gray)
            action:
              hue_api: lcars-hue-kitchen
          state:
            - id: state_on
              value: KITCHEN
            - id: state_off
              operator: '!='
              value: KITCHEN
          entity: input_select.lcars_ui_lightgroup_selector
          label: Kitchen
          tap_action:
            action: call-service
            service: input_select.select_option
            data:
              entity_id: input_select.lcars_ui_lightgroup_selector
              option: KITCHEN
        - type: custom:button-card
          template:
            - cb-lcars-button-picard-filled-dense
            - cb-lcars-actions-hue-tap
          entity: light.kitchen
          show_state: false
          variables:
            card:
              height: 55px
              color:
                background:
                  active: var(--button-card-light-color)
                  inactive: var(--picard-dark-gray)
            action:
              hue_api: lcars-hue-kitchen
        - type: custom:button-card
          template:
            - cb-lcars-button-picard-filled-dense
            - cb-lcars-animate-press
            - cb-lcars-actions-hue-hold
          variables:
            card:
              height: 55px
              color:
                active: var(--picard-medium-light-blue)
                inactive: var(--picard-medium-dark-gray)
                background:
                  active: var(--picard-medium-light-blue)
                  inactive: var(--picard-medium-dark-gray)
            action:
              hue_api: lcars-hue-bathroom
          state:
            - id: state_on
              value: BATHROOM
            - id: state_off
              operator: '!='
              value: BATHROOM
          entity: input_select.lcars_ui_lightgroup_selector
          label: BATHROOM
          tap_action:
            action: call-service
            service: input_select.select_option
            data:
              entity_id: input_select.lcars_ui_lightgroup_selector
              option: BATHROOM
        - type: custom:button-card
          template:
            - cb-lcars-button-picard-filled-dense
            - cb-lcars-actions-hue-tap
          entity: light.bathroom
          show_state: false
          variables:
            card:
              height: 55px
              color:
                background:
                  active: var(--button-card-light-color)
                  inactive: var(--picard-dark-gray)
            action:
              hue_api: lcars-hue-bathroom
        - type: custom:button-card
          template:
            - cb-lcars-button-picard-filled-dense
            - cb-lcars-animate-press
            - cb-lcars-actions-hue-hold
          variables:
            card:
              height: 55px
              color:
                active: var(--picard-medium-light-blue)
                inactive: var(--picard-medium-dark-gray)
                background:
                  active: var(--picard-medium-light-blue)
                  inactive: var(--picard-medium-dark-gray)
            action:
              hue_api: lcars-hue-bedroom
          state:
            - id: state_on
              value: BEDROOM
            - id: state_off
              operator: '!='
              value: BEDROOM
          entity: input_select.lcars_ui_lightgroup_selector
          label: BEDROOM
          tap_action:
            action: call-service
            service: input_select.select_option
            data:
              entity_id: input_select.lcars_ui_lightgroup_selector
              option: BEDROOM
        - type: custom:button-card
          template:
            - cb-lcars-button-picard-filled-dense
            - cb-lcars-actions-hue-tap
          entity: light.bedroom
          show_state: false
          variables:
            card:
              height: 55px
              color:
                background:
                  active: var(--button-card-light-color)
                  inactive: var(--picard-dark-gray)
            action:
              hue_api: lcars-hue-bedroom
        - type: custom:button-card
          template:
            - cb-lcars-button-picard-filled-dense
            - cb-lcars-animate-press
            - cb-lcars-actions-hue-hold
          variables:
            card:
              height: 55px
              color:
                active: var(--picard-medium-light-blue)
                inactive: var(--picard-medium-dark-gray)
                background:
                  active: var(--picard-medium-light-blue)
                  inactive: var(--picard-medium-dark-gray)
            action:
              hue_api: lcars-hue-office
          state:
            - id: state_on
              value: OFFICE
            - id: state_off
              operator: '!='
              value: OFFICE
          entity: input_select.lcars_ui_lightgroup_selector
          label: OFFICE
          tap_action:
            action: call-service
            service: input_select.select_option
            data:
              entity_id: input_select.lcars_ui_lightgroup_selector
              option: OFFICE
        - type: custom:button-card
          template:
            - cb-lcars-button-picard-filled-dense
            - cb-lcars-actions-hue-tap
          entity: light.office
          show_state: false
          variables:
            card:
              height: 55px
              color:
                background:
                  active: var(--button-card-light-color)
                  inactive: var(--picard-dark-gray)
            action:
              hue_api: lcars-hue-office
        - type: custom:button-card
          template:
            - cb-lcars-button-picard-filled-dense
            - cb-lcars-animate-press
            - cb-lcars-actions-hue-hold
          variables:
            card:
              height: 55px
              color:
                active: var(--picard-medium-light-blue)
                inactive: var(--picard-medium-dark-gray)
                background:
                  active: var(--picard-medium-light-blue)
                  inactive: var(--picard-medium-dark-gray)
            action:
              hue_api: lcars-hue-patio
          state:
            - id: state_on
              value: PATIO
            - id: state_off
              operator: '!='
              value: PATIO
          entity: input_select.lcars_ui_lightgroup_selector
          label: PATIO
          tap_action:
            action: call-service
            service: input_select.select_option
            data:
              entity_id: input_select.lcars_ui_lightgroup_selector
              option: PATIO
        - type: custom:button-card
          template:
            - cb-lcars-button-picard-filled-dense
            - cb-lcars-actions-hue-tap
          entity: light.patio
          show_state: false
          variables:
            card:
              height: 55px
              color:
                background:
                  active: var(--button-card-light-color)
                  inactive: var(--picard-dark-gray)
            action:
              hue_api: lcars-hue-patio
        - type: custom:button-card
          template:
            - cb-lcars-button-picard-filled-dense
            - cb-lcars-animate-press
            - cb-lcars-actions-hue-hold
          variables:
            card:
              height: 55px
              color:
                active: var(--picard-medium-light-blue)
                inactive: var(--picard-medium-dark-gray)
                background:
                  active: var(--picard-medium-light-blue)
                  inactive: var(--picard-medium-dark-gray)
          state:
            - id: state_on
              value: OTHERS
            - id: state_off
              operator: '!='
              value: OTHERS
          entity: input_select.lcars_ui_lightgroup_selector
          label: OTHERS
          tap_action:
            action: call-service
            service: input_select.select_option
            data:
              entity_id: input_select.lcars_ui_lightgroup_selector
              option: OTHERS
          hold_action:
            action: none
          double_tap_action:
            action: none
        - type: custom:button-card
          template:
            - cb-lcars-button-picard-filled-dense
            - cb-lcars-actions-hue-tap
          entity: light.table
          show_state: false
          variables:
            card:
              height: 55px
              color:
                background:
                  active: var(--button-card-light-color)
                  inactive: var(--picard-dark-gray)
      layout:
        grid-template-columns: 170px 25px
        grid-template-rows: auto
        grid-auto-rows: auto
        card_margin: 0
        padding: 0
        margin: '-4px -4px 0px -4px'
        grid-column-gap: 10px
  sliders_livingroom:
    card:
      type: conditional
      conditions:
        - condition: state
          entity: input_select.lcars_ui_lightgroup_selector
          state: LIVING ROOM
      card:
        type: custom:button-card
        template:
          - cb-lcars-grid
        variables:
          grid:
            auto_calc_X: false
            auto_calc_Y: false
            X: 1
            'Y': 7
            gap: 12px
            buttons:
              - entity: light.living_room
                variables:
                  label: All Lights
              - entity: light.corner_lamp
                variables:
                  label: corner lamp
              - entity: light.floor_lamp
                variables:
                  label: floor lamp
              - entity: light.tv
                variables:
                  label: tv
              - entity: light.fan
                variables:
                  label: fan
              - entity: light.media_lights
                variables:
                  label: media lights
              - entity: light.floor_strip
                variables:
                  label: floor strip
          button:
            type: custom:button-card
            template:
              - cb-lcars-multimeter
            variables:
              entity_match_slider: true
              header_button:
                variables:
                  card:
                    color:
                      background:
                        inactive: var(--picard-dark-gray)
                  text:
                    label:
                      font_size: 22px
              card:
                width: 800px
                height: 55px
              panel:
                height: 45px
                width: 650px
                mode: gauge
  sliders_kitchen:
    card:
      type: conditional
      conditions:
        - condition: state
          entity: input_select.lcars_ui_lightgroup_selector
          state: KITCHEN
      card:
        type: custom:button-card
        template:
          - cb-lcars-grid
        variables:
          grid:
            auto_calc_X: false
            auto_calc_Y: false
            X: 1
            'Y': 4
            gap: 12px
            buttons:
              - entity: light.kitchen
                variables:
                  label: All Lights
              - entity: light.overhead
                variables:
                  label: Overhead
              - entity: light.counter
                variables:
                  label: counter
              - entity: light.table
                variables:
                  label: dining table
          button:
            type: custom:button-card
            template:
              - cb-lcars-multimeter
            variables:
              entity_match_slider: true
              header_button:
                variables:
                  card:
                    color:
                      background:
                        inactive: var(--picard-dark-gray)
                  text:
                    label:
                      font_size: 22px
              card:
                width: 800px
                height: 55px
              panel:
                height: 45px
                width: 650px
                mode: gauge
.
.
.
...rest of the slider groups

Acknowledgements & Thanks

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!)

custom-button-card

my-cards/my-slider-v2

lovelace-layout-card

lovelace-card-mod

lovelace-hue-like-light-card

As well, some shout-outs and attributions to these great projects:

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.

License

This project uses the MIT License. For more details, refer to the LICENSE file.

Files

README-v1.md

Latest commit

History

README-v1.md

File metadata and controls

Overview

What is this?

What it isn't...

What it looks like...

What can it do...

Before You Begin

Get to know custom-button-card

Dependencies and Extras

Getting Started

Install CB-LCARS Templates

HA-LCARS Theme - Setup and Customizations

Font

Custom Picard Colors

The Templates

Core Templates

Base Templates

Actions

Flare

LCARS Basic Shapes

LCARS Headers

LCARS Footers

LCARS Callouts

LCARS Text Labels

LCARS Buttons

Standard Buttons

Rounded Buttons

Picard-Style Buttons

Picard-Style Text Modifiers

Button Examples

LCARS Constructors

Grids

LCARS Controls

Sliders

Fully Built Controls

Dashboard Examples

Row of sliders (Transporter controls? 😁)

Room Lighting Controls

Acknowledgements & Thanks

License

Get to know `custom-button-card`