Skip to content

Commit 380b528

Browse files
authored
Update README.md
1 parent 5bf80c0 commit 380b528

File tree

1 file changed

+30
-9
lines changed

1 file changed

+30
-9
lines changed

Diff for: README.md

+30-9
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ Flexible looks-like-a-horseshoe card for [Home Assistant](https://github.com/hom
1212
* * *
1313

1414
## Introduction
15-
The flexible horseshoe card can display data from entities and attributes from the sensor domain. It displays the current state and for the primary entity it fills the horseshoe with a color depending on the min and max values of the state and the configured color stops and styling.
15+
The flexible horseshoe card can display data from entities and attributes from the sensor and other domains. It displays the current state and for the primary entity it fills the horseshoe with a color depending on the min and max values of the state and the configured color stops and styling.
1616

1717
The main perk of this card is it's flexibility. It is able to position a number of things where YOU want it using a layout specification for each object you want on the card:
1818

@@ -51,13 +51,13 @@ Cards in a standard vertical stack / horizontal stack - 2 cards per row - combin
5151
Legend:
5252
- (3), showing a single attribute from a darksky sensor, a unit (temperature), an area and horizontal line
5353
- (4), showing three attributes from a darksky sensor (temperature, humidity and air pressure), units, two icons, a name and a horizontal line
54-
- (5), showing trhee sensors from system monitoring (ram used, ram used percentage and ram free), two sensor names ("in use" and "free"), a horizontal line and a vertical line.
54+
- (5), showing three sensors from system monitoring (ram used, ram used percentage and ram free), two sensor names ("in use" and "free"), a horizontal line and a vertical line.
5555
- (6), same as (5), bit with different horizontal and vertical line and different fill style for the horseshoe.
5656

5757
All cards use different styling for filling the horseshoe with a color.
5858

5959
## Some extreme, industrial look, 3D UI
60-
Using the same cards as above, but with a predefined set of filters applied. In this case the `card--dropshadow-heavy--sepia90` filter for the card_filter variable.
60+
Using the same cards as above, but with a predefined set of filters applied. In this case the `card--dropshadow-heavy--sepia90` class filter for the card_filter variable.
6161

6262
Again, cards in a standard vertical stack / horizontal stack - 2 cards per row - combination.
6363

@@ -69,10 +69,10 @@ Using a single card in a row. Card scales to maximum width of the vertical stack
6969

7070
![](https://tweakers.net/ext/f/JNXii52PVqvVIIKA8wWZjGla/full.png)
7171

72-
## Yes, you can interact with it. Switching lights is no problem
72+
## Yes, you can interact with it. Switching lights is no problem!
7373
For each entity a `tap_action` can be defined. The default is the known show-more info dialog. This can be changed in executing a service for instance.
7474

75-
And it can be animated too using predefined animations, or just your own!
75+
Combined with animations and states, you can alter the appearance of objects. The card containts a list of [predefined animations](#predefined-animations), or you just create your own!
7676

7777
![](https://tweakers.net/ext/f/Hk2Lzz2VkPbDUvEQUubBXoJU/full.gif)
7878

@@ -191,20 +191,18 @@ The layout options determine where the objects are located on the card, and thei
191191
| styles | list | optional | any valid css entry | v0.8.0 | specify a list of css values to style the object. Must be terminated with a semicolon `;`
192192

193193
#### Example layout entry
194-
The following layout is a part of card 5 (hline, vline, state(28%) and name (5: RAM USAGE):
194+
The following layout is a part of card 5. For more complete examples, see the [examples section](#-examples-section)
195195

196196
![Another Example](https://tweakers.net/ext/f/xjuaTt3620GPgQyMnrrIIfth/full.png)
197197

198198
- xpos, ypos and length are **percentages**
199-
- both the hline and vline respond to the same animation (have id 0), ie state.
200199
- state layout 0 is connected to entity 0, ie the first entity in the entities section
201200
- name layout 0 is also connected to entity 0
202201

203202
```yaml
204203
layout:
205204
hlines:
206205
- id: 0
207-
animation_id: 0
208206
xpos: 50
209207
ypos: 38
210208
length: 40
@@ -215,7 +213,6 @@ layout:
215213
- stroke-linecap: round;
216214
vlines:
217215
- id: 0
218-
animation_id: 0
219216
xpos: 50
220217
ypos: 56
221218
length: 20
@@ -391,6 +388,30 @@ There are some predefined css filters which you can use to give the full card a
391388
The full view with all 12 examples is in the examples folder of this repository.
392389

393390
Three examples are included in this readme for easy access.
391+
Most examples use the [Darksy sensor](https://www.home-assistant.io/components/darksky/) or the Home Assistant [system monitor](https://www.home-assistant.io/components/systemmonitor/).
392+
A few use lights, which you have to replace with your own of course.
393+
394+
Furthermore, theme defined variables are used:
395+
```yaml
396+
theme-card-box-shadow: 'var(--shadow-elevation-2dp_-_box-shadow)'
397+
```
398+
399+
and:
400+
```yaml
401+
theme-gradient-color-01: '#FFF6E3'
402+
theme-gradient-color-02: '#FFE9B9'
403+
theme-gradient-color-03: '#FFDA8A'
404+
theme-gradient-color-04: '#FFCB5B'
405+
theme-gradient-color-05: '#FFBF37'
406+
theme-gradient-color-06: '#ffb414'
407+
theme-gradient-color-07: '#FFAD12'
408+
theme-gradient-color-08: '#FFA40E'
409+
theme-gradient-color-09: '#FF9C0B'
410+
theme-gradient-color-10: '#FF8C06'
411+
theme-gradient-color-11: '#FF8305'
412+
```
413+
414+
Define your own, or alter the example cards!
394415

395416
![](https://tweakers.net/ext/f/3jaSI26J9QxHJa8rTriXFNNO/full.png)
396417

0 commit comments

Comments
 (0)