You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+30-9
Original file line number
Diff line number
Diff line change
@@ -12,7 +12,7 @@ Flexible looks-like-a-horseshoe card for [Home Assistant](https://github.com/hom
12
12
* * *
13
13
14
14
## 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.
16
16
17
17
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:
18
18
@@ -51,13 +51,13 @@ Cards in a standard vertical stack / horizontal stack - 2 cards per row - combin
51
51
Legend:
52
52
- (3), showing a single attribute from a darksky sensor, a unit (temperature), an area and horizontal line
53
53
- (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.
55
55
- (6), same as (5), bit with different horizontal and vertical line and different fill style for the horseshoe.
56
56
57
57
All cards use different styling for filling the horseshoe with a color.
58
58
59
59
## 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.
61
61
62
62
Again, cards in a standard vertical stack / horizontal stack - 2 cards per row - combination.
63
63
@@ -69,10 +69,10 @@ Using a single card in a row. Card scales to maximum width of the vertical stack
## Yes, you can interact with it. Switching lights is no problem
72
+
## Yes, you can interact with it. Switching lights is no problem!
73
73
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.
74
74
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!
- both the hline and vline respond to the same animation (have id 0), ie state.
200
199
- state layout 0 is connected to entity 0, ie the first entity in the entities section
201
200
- name layout 0 is also connected to entity 0
202
201
203
202
```yaml
204
203
layout:
205
204
hlines:
206
205
- id: 0
207
-
animation_id: 0
208
206
xpos: 50
209
207
ypos: 38
210
208
length: 40
@@ -215,7 +213,6 @@ layout:
215
213
- stroke-linecap: round;
216
214
vlines:
217
215
- id: 0
218
-
animation_id: 0
219
216
xpos: 50
220
217
ypos: 56
221
218
length: 20
@@ -391,6 +388,30 @@ There are some predefined css filters which you can use to give the full card a
391
388
The full view with all 12 examples is in the examples folder of this repository.
392
389
393
390
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.
0 commit comments