Skip to content

Commit f1598ef

Browse files
CM000nCM000n
authored
Merge pull request UI-Lovelace-Minimalist#154 from mp-se/main
New custom cards and update of existing ones
2 parents e651871 + cba1692 commit f1598ef

File tree

14 files changed

+963
-56
lines changed

14 files changed

+963
-56
lines changed

‎config/minimalist-templates/button_card_templates.yaml

+1
Original file line numberDiff line numberDiff line change
@@ -166,6 +166,7 @@ chip_navigate:
166166
grid:
167167
- grid-template-areas: "'i'"
168168
chips_icon_label:
169+
template: "chips"
169170
show_icon: true
170171
show_name: false
171172
show_label: true

‎custom_cards/custom_card_mpse_dualgraph/custom_card_mpse_dual_graph.yaml

+57
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
---
2+
custom_card_mpse_dual_graph:
3+
variables:
4+
ulm_card_graph_name: ""
5+
ulm_card_graph_color: "var(--google-blue)"
6+
ulm_card_graph_color_2: "var(--google-green)"
7+
triggers_update: "all"
8+
styles:
9+
grid:
10+
- grid-template-areas: "'item1' 'item2'"
11+
- grid-template-columns: "1fr"
12+
- grid-template-rows: "min-content min-content"
13+
card:
14+
- border-radius: "var(--border-radius)"
15+
- box-shadow: "var(--box-shadow)"
16+
- padding: "0px"
17+
custom_fields:
18+
item1:
19+
card:
20+
type: "custom:button-card"
21+
template:
22+
- "icon_info"
23+
- "card_generic"
24+
styles:
25+
card:
26+
- box-shadow: "none"
27+
- border-radius: "var(--border-radius) var(--border-radius) 0px 0px"
28+
- padding: "12px"
29+
entity: "[[[ return variables.ulm_card_graph_entity ]]]"
30+
name: "[[[ return variables.ulm_card_graph_name ]]]"
31+
label: >
32+
[[[
33+
var unit = states[variables.ulm_card_graph_entity].attributes.unit_of_measurement != null ? ' ' +states[variables.ulm_card_graph_entity].attributes.unit_of_measurement
34+
: ''
35+
var unit2 = states[variables.ulm_card_graph_entity_2].attributes.unit_of_measurement != null ? ' ' +states[variables.ulm_card_graph_entity_2].attributes.unit_of_measurement
36+
: ''
37+
return states[variables.ulm_card_graph_entity].state + unit + ' / ' + states[variables.ulm_card_graph_entity_2].state + unit2;
38+
]]]
39+
item2:
40+
card:
41+
type: "custom:mini-graph-card"
42+
entities:
43+
- entity: "[[[ return variables.ulm_card_graph_entity ]]]"
44+
- entity: "[[[ return variables.ulm_card_graph_entity_2 ]]]"
45+
line_color:
46+
- "[[[ return variables.ulm_card_graph_color ]]]"
47+
- "[[[ return variables.ulm_card_graph_color_2 ]]]"
48+
show:
49+
name: false
50+
icon: false
51+
legend: false
52+
state: false
53+
style: |
54+
ha-card {
55+
box-shadow: none;
56+
border-radius: var(--border-radius);
57+
}

‎custom_cards/custom_card_mpse_dualgraph/custom_dual_graph.png

16.4 KB
Loading

‎custom_cards/custom_card_mpse_dualgraph/readme.md

+130
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,130 @@
1+
# Custom-card "Printer"
2+
3+
The `custom_card_mpse_dual_graph` is an extension of the standard graph card and can show 2 graphs in the same card. I wanted to show both upload/download speed in the same image. The variable names follow the same standard as the base card to make it easier to change.
4+
5+
![Dual Graph](./custom_dual_graph.png)
6+
7+
## Credits
8+
Author: mpse
9+
Version: 0.1.0
10+
11+
## Changelog
12+
<details>
13+
<summary>0.1.0</summary>
14+
Initial release.
15+
</details>
16+
17+
## Usage
18+
19+
```yaml
20+
- type: 'custom:button-card'
21+
template: custom_card_mpse_graph2
22+
variables:
23+
ulm_card_graph_name: "Internet - Download / Upload"
24+
ulm_card_graph_color: "var(--google-blue)"
25+
ulm_card_graph_color_2: "var(--google-green)"
26+
ulm_card_graph_entity: sensor.speedtest_download
27+
ulm_card_graph_entity_2: sensor.speedtest_upload
28+
```
29+
30+
## Requirements
31+
32+
## Variables
33+
<table>
34+
<tr>
35+
<th>Variable</th>
36+
<th>Example</th>
37+
<th>Required</th>
38+
<th>Explanation</th>
39+
</tr>
40+
<tr>
41+
<td>ulm_card_graph_name</td>
42+
<td>"Internet - Download / Upload"</td>
43+
<td>no</td>
44+
<td>Name to show on card.</td>
45+
</tr>
46+
<tr>
47+
<td>ulm_card_graph_color</td>
48+
<td>var(--google-blue)</td>
49+
<td>no</td>
50+
<td>Color of the first graph (blue is default)</td>
51+
</tr>
52+
<tr>
53+
<td>ulm_card_graph_color_2</td>
54+
<td>var(--google-green)</td>
55+
<td>no</td>
56+
<td>Color of the second graph (green is default)</td>
57+
</tr>
58+
<tr>
59+
<td>ulm_card_graph_entity</td>
60+
<td>sensor.speedtest_download</td>
61+
<td>yes</td>
62+
<td>Name of the first sensor</td>
63+
</tr>
64+
<tr>
65+
<td>ulm_card_graph_entity_2</td>
66+
<td>sensor.speedtest_upload</td>
67+
<td>yes</td>
68+
<td>Name of the second sensor</td>
69+
</tr>
70+
</table>
71+
72+
## Template code
73+
74+
```yaml
75+
---
76+
custom_card_mpse_dual_graph:
77+
variables:
78+
ulm_card_graph_name: ""
79+
ulm_card_graph_color: "var(--google-blue)"
80+
ulm_card_graph_color_2: "var(--google-green)"
81+
triggers_update: "all"
82+
styles:
83+
grid:
84+
- grid-template-areas: "'item1' 'item2'"
85+
- grid-template-columns: "1fr"
86+
- grid-template-rows: "min-content min-content"
87+
card:
88+
- border-radius: "var(--border-radius)"
89+
- box-shadow: "var(--box-shadow)"
90+
- padding: "0px"
91+
custom_fields:
92+
item1:
93+
card:
94+
type: "custom:button-card"
95+
template:
96+
- icon_info
97+
- card_generic
98+
styles:
99+
card:
100+
- box-shadow: "none"
101+
- border-radius: "var(--border-radius) var(--border-radius) 0px 0px"
102+
- padding: "12px"
103+
entity: "[[[ return variables.ulm_card_graph_entity ]]]"
104+
name: "[[[ return variables.ulm_card_graph_name ]]]"
105+
label: >
106+
[[[
107+
var unit = states[variables.ulm_card_graph_entity].attributes.unit_of_measurement != null ? ' ' +states[variables.ulm_card_graph_entity].attributes.unit_of_measurement : ''
108+
var unit2 = states[variables.ulm_card_graph_entity_2].attributes.unit_of_measurement != null ? ' ' +states[variables.ulm_card_graph_entity_2].attributes.unit_of_measurement : ''
109+
return states[variables.ulm_card_graph_entity].state + unit + ' / ' + states[variables.ulm_card_graph_entity_2].state + unit2;
110+
]]]
111+
item2:
112+
card:
113+
type: "custom:mini-graph-card"
114+
entities:
115+
- entity: "[[[ return variables.ulm_card_graph_entity ]]]"
116+
- entity: "[[[ return variables.ulm_card_graph_entity_2 ]]]"
117+
line_color:
118+
- "[[[ return variables.ulm_card_graph_color ]]]"
119+
- "[[[ return variables.ulm_card_graph_color_2 ]]]"
120+
show:
121+
name: false
122+
icon: false
123+
legend: false
124+
state: false
125+
style: |
126+
ha-card {
127+
box-shadow: none;
128+
border-radius: var(--border-radius);
129+
}
130+
```

‎custom_cards/custom_card_mpse_gauge/custom_card_mpse_gauge.yaml

+67
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
---
2+
custom_card_mpse_gauge:
3+
variables:
4+
ulm_card_mpse_gauge_min: 0
5+
ulm_card_mpse_gauge_max: 100
6+
styles:
7+
grid:
8+
- grid-template-areas: "'item1' 'item2'"
9+
- grid-template-columns: "1fr"
10+
- grid-template-rows: "min-content min-content"
11+
card:
12+
- border-radius: "var(--border-radius)"
13+
- box-shadow: "var(--box-shadow)"
14+
- padding: "0px"
15+
show_name: false
16+
show_icon: false
17+
custom_fields:
18+
item1:
19+
card:
20+
entity: "[[[ return entity.entity_id ]]]"
21+
label: >-
22+
[[[
23+
return entity.state;
24+
]]]
25+
template:
26+
- "icon_info"
27+
styles:
28+
card:
29+
- padding: "12px"
30+
type: "custom:button-card"
31+
item2:
32+
card:
33+
type: "custom:dual-gauge-card"
34+
min: "[[[ return variables.ulm_card_mpse_gauge_min ]]]"
35+
max: "[[[ return variables.ulm_card_mpse_gauge_max ]]]"
36+
title: >
37+
[[[
38+
var min = variables.ulm_card_mpse_gauge_min;
39+
var max = variables.ulm_card_mpse_gauge_max;
40+
41+
if( min == 0 && max == 100 )
42+
return "";
43+
44+
return min + ' - ' + max;
45+
]]]
46+
shadeInner: false
47+
cardwidth: 200
48+
outer:
49+
entity: "[[[ return entity.entity_id ]]]"
50+
inner:
51+
entity: "[[[ return entity.entity_id ]]]"
52+
colors:
53+
- color: "var(--google-blue)"
54+
value: 0
55+
card_mod:
56+
style: |
57+
div.gauge-value.gauge-value-inner {
58+
color: rgba(0,0,0,0);
59+
}
60+
div.gauge-value.gauge-value-outer {
61+
color: rgba(0,0,0,0);
62+
}
63+
div.gauge-dual-card {
64+
margin: 0px 0px;
65+
--title-font-size: calc(var(--gauge-card-width) / 16);
66+
color: var(--google-grey);
67+
}

‎custom_cards/custom_card_mpse_gauge/custom_gauge.png

14.9 KB
Loading

‎custom_cards/custom_card_mpse_gauge/readme.md

+121
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,121 @@
1+
# Custom-card "Printer"
2+
3+
The `custom_card_mpse_gauge` is used present a value in form of a gauge. The card can handle two gauges so it would be easy to adapt the card to that if required. I prefered the minimal look.
4+
5+
![Printer](./custom_gauge.png)
6+
7+
## Credits
8+
Author: mpse
9+
Version: 0.1.0
10+
11+
## Changelog
12+
<details>
13+
Initial release.
14+
</details>
15+
16+
## Usage
17+
18+
```yaml
19+
- type: 'custom:button-card'
20+
template: custom_card_mpse_gauge
21+
entity: sensor.temp_office_temperature
22+
variables:
23+
ulm_card_mpse_gauge_min: 10
24+
ulm_card_mpse_gauge_max: 30
25+
```
26+
27+
## Requirements
28+
Uses this card: https://github.com/custom-cards/dual-gauge-card which can be installed via HACS.
29+
## Variables
30+
<table>
31+
<tr>
32+
<th>Variable</th>
33+
<th>Example</th>
34+
<th>Required</th>
35+
<th>Explanation</th>
36+
</tr>
37+
<tr>
38+
<td>ulm_card_mpse_gauge_min</td>
39+
<td>0</td>
40+
<td>no</td>
41+
<td>Minium value, defaults to 0.</td>
42+
</tr>
43+
<tr>
44+
<td>ulm_card_mpse_gauge_max</td>
45+
<td>100</td>
46+
<td>no</td>
47+
<td>Maximum value, defaults to 100.</td>
48+
</tr>
49+
</table>
50+
51+
## Template code
52+
53+
```yaml
54+
---
55+
custom_card_mpse_gauge:
56+
variables:
57+
ulm_card_mpse_gauge_min: 0
58+
ulm_card_mpse_gauge_max: 100
59+
styles:
60+
grid:
61+
- grid-template-areas: "'item1' 'item2'"
62+
- grid-template-columns: "1fr"
63+
- grid-template-rows: "min-content min-content"
64+
card:
65+
- border-radius: "var(--border-radius)"
66+
- box-shadow: "var(--box-shadow)"
67+
- padding: "0px"
68+
show_name: false
69+
show_icon: false
70+
custom_fields:
71+
item1:
72+
card:
73+
entity: "[[[ return entity.entity_id ]]]"
74+
label: >-
75+
[[[
76+
return entity.state;
77+
]]]
78+
template:
79+
- "icon_info"
80+
styles:
81+
card:
82+
- padding: "12px"
83+
type: "custom:button-card"
84+
item2:
85+
card:
86+
type: "custom:dual-gauge-card"
87+
min: "[[[ return variables.ulm_card_mpse_gauge_min ]]]"
88+
max: "[[[ return variables.ulm_card_mpse_gauge_max ]]]"
89+
title: >
90+
[[[
91+
var min = variables.ulm_card_mpse_gauge_min;
92+
var max = variables.ulm_card_mpse_gauge_max;
93+
94+
if( min == 0 && max == 100 )
95+
return "";
96+
97+
return min + ' - ' + max;
98+
]]]
99+
shadeInner: false
100+
cardwidth: 200
101+
outer:
102+
entity: "[[[ return entity.entity_id ]]]"
103+
inner:
104+
entity: "[[[ return entity.entity_id ]]]"
105+
colors:
106+
- color: "var(--google-blue)"
107+
value: 0
108+
card_mod:
109+
style: |
110+
div.gauge-value.gauge-value-inner {
111+
color: rgba(0,0,0,0);
112+
}
113+
div.gauge-value.gauge-value-outer {
114+
color: rgba(0,0,0,0);
115+
}
116+
div.gauge-dual-card {
117+
margin: 0px 0px;
118+
--title-font-size: calc(var(--gauge-card-width) / 16);
119+
color: var(--google-grey);
120+
}
121+
```

0 commit comments

Comments
 (0)