@@ -47,16 +47,17 @@ Ha-lcards is a home automation project that offers personalized dashboards for u
4747## CB Templates
4848### Base Templates
4949
50- | Template | Description |
51- | ------------------------ | -------------- |
52- | ` cb-lcars-functions ` | base functions |
53- | ` cb-lcars-debug ` | debug shit |
54- | ` cb-lcars-base ` | |
55- | ` cb-lcars-label ` | |
56- | ` cb-lcars-animate-press ` | |
57- | ` cb-lcars-state-blink ` | |
58-
59-
50+ | Template | Description |
51+ | -------------------- | -------------- |
52+ | ` cb-lcars-functions ` | base functions |
53+ | ` cb-lcars-base ` | |
54+ | ` cb-lcars-card-base ` | |
55+ | ` cb-lcars-debug ` | debug shit |
56+
57+ | Template | Description |
58+ | ------------------------ | ----------- |
59+ | ` cb-lcars-animate-press ` | |
60+ | ` cb-lcars-state-blink ` | |
6061### Actions
6162
6263| Template | Description |
@@ -67,57 +68,65 @@ Ha-lcards is a home automation project that offers personalized dashboards for u
6768| ` cb-lcars-actions-hue ` | |
6869
6970
70- ### LCARS Callouts
71-
72- | Template | Description |
73- | ------------------------------- | ----------- |
74- | ` cb-lcars-callout-base ` | |
75- | ` cb-lcars-footer-callout ` | |
76- | ` cb-lcars-footer-callout-right ` | |
77- | ` cb-lcars-header-callout ` | |
78- | ` cb-lcars-header-callout-right ` | |
79-
80-
81- ### LCARS Footers
82-
83- | Template | Description |
84- | ------------------------------ | ----------- |
85- | ` cb-lcars-footer ` | |
86- | ` cb-lcars-footer-base ` | |
87- | ` cb-lcars-footer-contained ` | |
88- | ` cb-lcars-footer-open ` | |
89- | ` cb-lcars-footer-picard ` | |
90- | ` cb-lcars-footer-picard-right ` | |
91- | ` cb-lcars-footer-right ` | |
92-
93- ### LCARS Headers
94-
95- | Template | Description |
96- | ------------------------------ | ----------- |
97- | ` cb-lcars-header ` | |
98- | ` cb-lcars-header-contained ` | |
99- | ` cb-lcars-header-open ` | |
100- | ` cb-lcars-header-picard ` | |
101- | ` cb-lcars-header-picard-right ` | |
102- | ` cb-lcars-header-right ` | |
103-
104- ### LCARS Buttons - Base Templates
105- | Template | Example |
106- | ------------------------ | --------------------------------------------------- |
107- | ` cb-lcars-button-base ` | ![ ] ( images/button_samples/cb-lcars-button-base.png ) |
108- | ` cb-lcars-button-square ` | |
71+ | Template | Description |
72+ | ---------------- | ----------- |
73+ | ` cb-lcars-label ` | |
74+
75+ ### LCARS Basic Shapes
76+
77+ #### LCARS Headers
78+
79+ | Template | Description |
80+ | ------------------------------ | ----------------------------------------------------------- |
81+ | ` cb-lcars-header ` | ![ ] ( images/button_samples/cb-lcars-header.png ) |
82+ | ` cb-lcars-header-right ` | ![ ] ( images/button_samples/cb-lcars-header-right.png ) |
83+ | ` cb-lcars-header-contained ` | ![ ] ( images/button_samples/cb-lcars-header-contained.png ) |
84+ | ` cb-lcars-header-open ` | ![ ] ( images/button_samples/cb-lcars-header-open.png ) |
85+ | ` cb-lcars-header-picard ` | ![ ] ( images/button_samples/cb-lcars-header-picard.png ) |
86+ | ` cb-lcars-header-picard-right ` | ![ ] ( images/button_samples/cb-lcars-header-picard-right.png ) |
87+
88+ #### LCARS Footers
89+
90+ | Template | Description |
91+ | ------------------------------ | ----------------------------------------------------------- |
92+ | ` cb-lcars-footer-base ` | |
93+ | ` cb-lcars-footer ` | ![ ] ( images/button_samples/cb-lcars-footer.png ) |
94+ | ` cb-lcars-footer-right ` | ![ ] ( images/button_samples/cb-lcars-footer-right.png ) |
95+ | ` cb-lcars-footer-contained ` | ![ ] ( images/button_samples/cb-lcars-footer-contained.png ) |
96+ | ` cb-lcars-footer-open ` | ![ ] ( images/button_samples/cb-lcars-footer-open.png ) |
97+ | ` cb-lcars-footer-picard ` | ![ ] ( images/button_samples/cb-lcars-footer-picard.png ) |
98+ | ` cb-lcars-footer-picard-right ` | ![ ] ( images/button_samples/cb-lcars-footer-picard-right.png ) |
99+
100+ #### LCARS Callouts
101+
102+ | Template | Description |
103+ | ------------------------------- | ------------------------------------------------------------ |
104+ | ` cb-lcars-callout-base ` | |
105+ | ` cb-lcars-header-callout ` | ![ ] ( images/button_samples/cb-lcars-header-callout.png ) |
106+ | ` cb-lcars-header-callout-right ` | ![ ] ( images/button_samples/cb-lcars-header-callout-right.png ) |
107+ | ` cb-lcars-footer-callout ` | ![ ] ( images/button_samples/cb-lcars-footer-callout.png ) |
108+ | ` cb-lcars-footer-callout-right ` | ![ ] ( images/button_samples/cb-lcars-footer-callout-right.png ) |
109+
110+
111+ #### LCARS Text Labels
112+ ![ ] ( images/button_samples/cb-lcars-label.png )
113+
114+ ---
109115### LCARS Buttons
110- | Template | Description |
111- | ----------------------------- | ----------- |
112- | ` cb-lcars-button-bullet ` | |
113- | ` cb-lcars-button-bullet-right ` | |
114- | ` cb-lcars-button-capped ` | |
115- | ` cb-lcars-button-capped-right ` | |
116- | ` cb-lcars-button-lozenge ` | |
117- | ` cb-lcars-button-lozenge-right ` | |
116+ #### Base Templates
117+ | Template | Example |
118+ | -------------------------------------------------- | --------------------------------------------------- |
119+ | ` cb-lcars-button-base ` <br >` cb-lcars-button-square ` | ![ ] ( images/button_samples/cb-lcars-button-base.png ) |
120+ #### Rounded Buttons
121+ | Template | Description |
122+ | ------------------------------------------------------------ | ------------------------------------------------------ |
123+ | ` cb-lcars-button-lozenge ` <br >` cb-lcars-button-lozenge-right ` | ![ ] ( images/button_samples/cb-lcars-button-lozenge.png ) |
124+ | ` cb-lcars-button-bullet ` <br >` cb-lcars-button-bullet-right ` | ![ ] ( images/button_samples/cb-lcars-button-bullet.png ) |
125+ | ` cb-lcars-button-capped ` <br >` cb-lcars-button-capped-right ` | ![ ] ( images/button_samples/cb-lcars-button-capped.png ) |
118126
119127
120- ### LCARS Buttons - Picard Style
128+ #### Picard-Style Buttons
129+
121130| Template | Description |
122131| ------------------------------------------------------------------------------------ | ------------------------------------------------------------------ |
123132| ` cb-lcars-button-picard ` <br >` cb-lcars-button-picard-right ` <br > | ![ ] ( images/button_samples/cb-lcars-button-picard.png ) |
@@ -127,48 +136,37 @@ Ha-lcards is a home automation project that offers personalized dashboards for u
127136| ` cb-lcars-button-picard-icon ` | ![ ] ( images/button_samples/cb-lcars-button-picard-icon.png ) |
128137
129138
130- ### LCARS Buttons - Picard Button Modifiers
139+ #### Picard-Style Text Modifiers
131140| Template | Description |
132141| -------------------------------------------------------------------------- | -------------------------------------------------------------- |
133142| ` cb-lcars-button-picard-[label\|state\|name]-[east\|west\|ne\|nw\|se\|sw] ` | ![ ] ( images/button_samples/cb-lcars-button-picard-label-nw.png ) |
134143
144+ ---
135145### LCARS Constructors
136- | Template | Description |
137- | -------------------------- | ----------- |
138- | ` cb-lcars-card-base ` | |
139- | ` cb-lcars-button-grid ` | |
140- | ` cb-lcars-button-grid-icons ` | |
141-
142-
143- ### LCARS Complex Cards ('widgets??')
144- | Template | Description |
145- | -------------------------------- | ----------- |
146- | ` cb-lcars-meter ` | |
147- | ` cb-lcars-meter-horizontal ` | |
148- | ` cb-lcars-slider ` | |
149- | ` cb-lcars-slider-gauge ` | |
150- | ` cb-lcars-slider-horizontal ` | |
151- | ` cb-lcars-slider-horizontal-gauge ` | |
152- | ` cb-lcars-multimeter ` | |
153- | ` cb-lcars-dpad ` | |
154-
155-
156-
157-
146+ | Template | Description |
147+ | ---------------------------- | --------------------------------------------------------- |
148+ | ` cb-lcars-button-grid ` | ![ ] ( images/button_samples/cb-lcars-button-grid.png ) |
149+ | ` cb-lcars-button-grid-icons ` | ![ ] ( images/button_samples/cb-lcars-button-grid-icons.png ) |
158150
159151
152+ ---
153+ ### LCARS Controls
160154
161- | ` type ` | string | ** Required** | ` custom:button-card ` | Type of the card |
162- | ` template ` | string | optional | any valid template from ` button_card_templates ` | See [ configuration template] ( #Configuration-Templates ) |
163- | ` entity ` | string | optional | ` switch.ac ` | entity_id |
164- | ` triggers_update ` | string or array | optional | ` switch.ac ` | entity_id list that would trigger a card update, see [ triggers_update] ( #triggers_update ) |
165- | ` group_expand ` | boolean | false | ` true ` \| ` false ` | When ` true ` , if any of the entities triggering a card update is a group, it will auto-expand the group and the card will update on any child entity state change. This works with nested groups too. See [ triggers_update] ( #triggers_update ) |
166- | ` icon ` | string | optional | ` mdi:air-conditioner ` | Icon to display. Will be overridden by the icon defined in a state (if present). Defaults to the entity icon. Hide with ` show_icon: false ` . Supports templates, see [ templates] ( #javascript-templates ) |
167- | ` color_type ` | string | ` icon ` | ` icon ` \| ` card ` \| ` blank-card ` \| ` label-card ` | Color either the background of the card or the icon inside the card. Setting this to ` card ` enable automatic ` font ` and ` icon ` color. This allows the text/icon to be readable even if the background color is bright/dark. Additional color-type options ` blank-card ` and ` label-card ` can be used for organisation (see examples). |
168- | ` color ` | string | optional | ` auto ` \| ` auto-no-temperature ` \| ` rgb(28, 128, 199) ` | Color of the icon/card. ` auto ` sets the color based on the color of a light including the temperature of the light. Setting this to ` auto-no-temperature ` will behave like home-assistant's default, ignoring the temperature of the light. By default, if the entity state is ` off ` , the color will be ` var(--paper-item-icon-color) ` , for ` on ` it will be ` var(--paper-item-icon-active-color) ` and for any other state it will be ` var(--primary-text-color) ` . You can redefine each colors using ` state ` |
169- | ` size ` | string | ` 40% ` | ` 20px ` | Size of the icon. Can be percentage or pixel |
155+ | Template | Description |
156+ | ---------------------------------- | --------------------------------------------------------------- |
157+ | ` cb-lcars-meter ` | ![ ] ( images/button_samples/cb-lcars-meter.png ) |
158+ | ` cb-lcars-meter-horizontal ` | ![ ] ( images/button_samples/cb-lcars-meter-horizontal.png ) |
159+ | ` cb-lcars-slider ` | ![ ] ( images/button_samples/cb-lcars-slider.png ) |
160+ | ` cb-lcars-slider-gauge ` | ![ ] ( images/button_samples/cb-lcars-slider-gauge.png ) |
161+ | ` cb-lcars-slider-horizontal ` | ![ ] ( images/button_samples/cb-lcars-slider-horizontal.png ) |
162+ | ` cb-lcars-slider-horizontal-gauge ` | ![ ] ( images/button_samples/cb-lcars-slider-horizontal-gauge.png ) |
163+ | ` cb-lcars-multimeter ` | ![ ] ( images/button_samples/cb-lcars-multimeter.png ) |
164+ | ` cb-lcars-dpad ` | ![ ] ( images/button_samples/cb-lcars-dpad.png ) |
170165
171166
167+ ---
168+ ---
169+ ---
172170---
173171
174172## Features
0 commit comments