1.0.1
+1.1.0
```yaml #OLD @@ -44,6 +44,10 @@ Version: 1.0.1 ## Changelog +
+
1.1.0
+Adds ability to work with counter entities. Compatibility with input number entities is not affected. +1.0.1
Added option to leave ulm_card_input_number_name empty (takes the friendly_name of the entity) diff --git a/custom_cards/custom_card_input_number/card_input_number.yaml b/custom_cards/custom_card_input_number/card_input_number.yaml index 916c9e293..4f3c37efc 100644 --- a/custom_cards/custom_card_input_number/card_input_number.yaml +++ b/custom_cards/custom_card_input_number/card_input_number.yaml @@ -39,7 +39,14 @@ card_input_number: template: "widget_icon" tap_action: action: "call-service" - service: "input_number.decrement" + service: | + [[[ + if( entity.entity_id.startsWith("input_number.") ) + return "input_number.decrement"; + if( entity.entity_id.startsWith("counter.") ) + return "counter.decrement"; + return ""; + ]]] service_data: entity_id: "[[[ return entity.entity_id ]]]" icon: "mdi:arrow-down" @@ -59,7 +66,14 @@ card_input_number: template: "widget_icon" tap_action: action: "call-service" - service: "input_number.increment" + service: | + [[[ + if( entity.entity_id.startsWith("input_number.") ) + return "input_number.increment"; + if( entity.entity_id.startsWith("counter.") ) + return "counter.increment"; + return ""; + ]]] service_data: entity_id: "[[[ return entity.entity_id ]]]" icon: "mdi:arrow-up" diff --git a/custom_cards/custom_card_irmajavi_speedtest/custom_card_irmajavi_speedtest.yaml b/custom_cards/custom_card_irmajavi_speedtest/custom_card_irmajavi_speedtest.yaml index d409e4e81..181fe80f2 100644 --- a/custom_cards/custom_card_irmajavi_speedtest/custom_card_irmajavi_speedtest.yaml +++ b/custom_cards/custom_card_irmajavi_speedtest/custom_card_irmajavi_speedtest.yaml @@ -80,6 +80,8 @@ custom_card_irmajavi_speedtest: custom_fields: item1: - justify-self: "end" + - margin-top: "-23px" + - margin-right: "3px" icon: - color: "rgba(var(--color-theme),0.9)" - width: "20px" @@ -94,6 +96,8 @@ custom_card_irmajavi_speedtest: - justify-self: "start" - font-weight: "bold" - font-size: "16px" + - margin-left: "40px" + - margin-top: "3px" grid: - grid-template-areas: "i n item1" - grid-template-columns: "min-content" diff --git a/custom_cards/custom_card_more_power_outlet/custom_card_more_power_outlet.yaml b/custom_cards/custom_card_more_power_outlet/custom_card_more_power_outlet.yaml new file mode 100644 index 000000000..1bc5651e8 --- /dev/null +++ b/custom_cards/custom_card_more_power_outlet/custom_card_more_power_outlet.yaml @@ -0,0 +1,57 @@ +--- +### Custom Card More Power Outlet ### +custom_card_more_power_outlet: + template: + - "icon_info_bg" + - "yellow" + - "ulm_language_variables" + variables: + custom_card_more_power_outlet_power_sensor: + custom_card_more_power_outlet_energy_sensor: + custom_card_more_power_outlet_time_sensor: + triggers_update: "all" + label: |- + [[[ + if (entity.state === "on" && variables.custom_card_more_power_outlet_power_sensor !== null && variables.custom_card_more_power_outlet_energy_sensor !== null && variables.custom_card_more_power_outlet_time_sensor !== null) { + if (states[variables.custom_card_more_power_outlet_time_sensor].state < 1){ + return states[variables.custom_card_more_power_outlet_power_sensor].state + "W • " + states[variables.custom_card_more_power_outlet_energy_sensor].state + "kWh • " + + (states[variables.custom_card_more_power_outlet_time_sensor].state * 100) + "Mins"; + } else + return states[variables.custom_card_more_power_outlet_power_sensor].state + "W • " + states[variables.custom_card_more_power_outlet_energy_sensor].state + "kWh • " + states[variables.custom_card_more_power_outlet_time_sensor].state + "Hrs"; + } else if (entity.state === "on" && variables.custom_card_more_power_outlet_power_sensor !== null && variables.custom_card_more_power_outlet_energy_sensor !== null) { + return states[variables.custom_card_more_power_outlet_power_sensor].state + "W • " + states[variables.custom_card_more_power_outlet_energy_sensor].state + "kWh"; + } else if (entity.state === "on" && variables.custom_card_more_power_outlet_power_sensor !== null && variables.custom_card_more_power_outlet_time_sensor !== null) { + if (states[variables.custom_card_more_power_outlet_time_sensor].state < 1){ + return states[variables.custom_card_more_power_outlet_power_sensor].state + "W • " + (states[variables.custom_card_more_power_outlet_time_sensor].state * 100) + "Mins"; + } else + return states[variables.custom_card_more_power_outlet_power_sensor].state + "W • " + states[variables.custom_card_more_power_outlet_time_sensor].state + "Hrs"; + } else if (entity.state === "on" && variables.custom_card_more_power_outlet_energy_sensor !== null && variables.custom_card_more_power_outlet_time_sensor !== null) { + if (states[variables.custom_card_more_power_outlet_time_sensor].state < 1){ + return states[variables.custom_card_more_power_outlet_energy_sensor].state + "kWh • " + (states[variables.custom_card_more_power_outlet_time_sensor].state * 100) + "Mins"; + } else + return states[variables.custom_card_more_power_outlet_energy_sensor].state + "kWh • " + states[variables.custom_card_more_power_outlet_time_sensor].state + "Hrs"; + } else if (entity.state === "on" && variables.custom_card_more_power_outlet_power_sensor !== null) { + return states[variables.custom_card_more_power_outlet_power_sensor].state + "W"; + } else if (entity.state === "on" && variables.custom_card_more_power_outlet_energy_sensor !== null) { + return states[variables.custom_card_more_power_outlet_energy_sensor].state + "kWh"; + } else if (entity.state === "on" && variables.custom_card_more_power_outlet_time_sensor !== null) { + if (states[variables.custom_card_more_power_outlet_time_sensor].state < 1){ + return (states[variables.custom_card_more_power_outlet_time_sensor].state * 100) + "Mins"; + } else + return states[variables.custom_card_more_power_outlet_time_sensor].state + "Hrs"; + } else if (entity.state === "on") { + return variables.ulm_on; + } else if (entity.state === "off" && variables.custom_card_more_power_outlet_energy_sensor !== null) { + if (states[variables.custom_card_more_power_outlet_energy_sensor].state > 0){ + return variables.ulm_off + " • " + states[variables.custom_card_more_power_outlet_energy_sensor].state + "kWh"; + } else { + return variables.ulm_off; + } + } else if (entity.state === "off") { + return variables.ulm_off; + } else if (entity.state === "unavailable") { + return variables.ulm_unavailable; + } else { + return entity.state; + } + ]]] diff --git a/custom_cards/custom_card_more_power_outlet/readme.md b/custom_cards/custom_card_more_power_outlet/readme.md new file mode 100644 index 000000000..819124663 --- /dev/null +++ b/custom_cards/custom_card_more_power_outlet/readme.md @@ -0,0 +1,94 @@ +--- +title: More Power Outlet Card +--- + + +## Description + +
+
+This is the power outlet card is very similar to the default `power-outlet-card` from UI-Minimalist but it is also possible to show two additional sensors - one for total energy and one for time.
+
+## Credits
+
+Author: Wranglatang - 2022 Vesion 1.0.0
+
+## Variables
+
+| Variable | Default | Required | Notes |
+|----------|---------|------------------|-------------------|
+| entity | | :material-check: | |
+|name| | :material-check: | Enable background |
+|custom_card_more_power_outlet_power_sensor| | :material-close: | If you set this sensor, the `custom_card_more_power_outlet` shows the current power consumption (W). |
+|custom_card_more_power_outlet_energy_sensor| | :material-close: | If you set this sensor, the `custom_card_more_power_outlet` shows the energy consumption (kWh) - Typically used with a Daily [Utility Meter](https://www.home-assistant.io/integrations/utility_meter). |
+|custom_card_more_power_outlet_time_sensor| | :material-close: | If you set this sensor, the `custom_card_more_power_outlet` shows the a duration (Mins) - Typically used with the [History Stats](https://www.home-assistant.io/integrations/history_stats). |
+
+## Usage
+
+```yaml
+- type: 'custom:button-card'
+ template: custom_card_more_power_outlet
+ variables:
+ custom_card_more_power_outlet_power_sensor: sensor.immersion_heater_power
+ custom_card_more_power_outlet_energy_sensor: sensor.immersion_heater_energy_daily
+ custom_card_more_power_outlet_time_sensor: sensor.time_immersion_heater_heating
+ entity: switch.immersion_heater
+ name: Immersion Heater
+```
+
+## Template code
+
+```yaml
+---
+### Custom Card More Power Outlet ###
+custom_card_more_power_outlet:
+ template:
+ - "icon_info_bg"
+ - "yellow"
+ - "ulm_language_variables"
+ variables:
+ custom_card_more_power_outlet_power_sensor:
+ custom_card_more_power_outlet_energy_sensor:
+ custom_card_more_power_outlet_time_sensor:
+ triggers_update: "all"
+ label: |-
+ [[[
+ if (entity.state === "on" && variables.custom_card_more_power_outlet_power_sensor !== null && variables.custom_card_more_power_outlet_energy_sensor !== null && variables.custom_card_more_power_outlet_time_sensor !== null) {
+ if (states[variables.custom_card_more_power_outlet_time_sensor].state < 1){
+ return states[variables.custom_card_more_power_outlet_power_sensor].state + "W • " + states[variables.custom_card_more_power_outlet_energy_sensor].state + "kWh • " + (states[variables.custom_card_more_power_outlet_time_sensor].state * 100) + "Mins";
+ } else
+ return states[variables.custom_card_more_power_outlet_power_sensor].state + "W • " + states[variables.custom_card_more_power_outlet_energy_sensor].state + "kWh • " + states[variables.custom_card_more_power_outlet_time_sensor].state + "Hrs";
+ } else if (entity.state === "on" && variables.custom_card_more_power_outlet_power_sensor !== null && variables.custom_card_more_power_outlet_energy_sensor !== null) {
+ return states[variables.custom_card_more_power_outlet_power_sensor].state + "W • " + states[variables.custom_card_more_power_outlet_energy_sensor].state + "kWh";
+ } else if (entity.state === "on" && variables.custom_card_more_power_outlet_power_sensor !== null && variables.custom_card_more_power_outlet_time_sensor !== null) {
+ if (states[variables.custom_card_more_power_outlet_time_sensor].state < 1){
+ return states[variables.custom_card_more_power_outlet_power_sensor].state + "W • " + (states[variables.custom_card_more_power_outlet_time_sensor].state * 100) + "Mins";
+ } else
+ return states[variables.custom_card_more_power_outlet_power_sensor].state + "W • " + states[variables.custom_card_more_power_outlet_time_sensor].state + "Hrs";
+ } else if (entity.state === "on" && variables.custom_card_more_power_outlet_energy_sensor !== null && variables.custom_card_more_power_outlet_time_sensor !== null) {
+ if (states[variables.custom_card_more_power_outlet_time_sensor].state < 1){
+ return states[variables.custom_card_more_power_outlet_energy_sensor].state + "kWh • " + (states[variables.custom_card_more_power_outlet_time_sensor].state * 100) + "Mins";
+ } else
+ return states[variables.custom_card_more_power_outlet_energy_sensor].state + "kWh • " + states[variables.custom_card_more_power_outlet_time_sensor].state + "Hrs";
+ } else if (entity.state === "on" && variables.custom_card_more_power_outlet_power_sensor !== null) {
+ return states[variables.custom_card_more_power_outlet_power_sensor].state + "W";
+
+ } else if (entity.state === "on" && variables.custom_card_more_power_outlet_energy_sensor !== null) {
+ return states[variables.custom_card_more_power_outlet_energy_sensor].state + "kWh";
+
+ } else if (entity.state === "on" && variables.custom_card_more_power_outlet_time_sensor !== null) {
+ if (states[variables.custom_card_more_power_outlet_time_sensor].state < 1){
+ return (states[variables.custom_card_more_power_outlet_time_sensor].state * 100) + "Mins";
+ } else
+ return states[variables.custom_card_more_power_outlet_time_sensor].state + "Hrs";
+ } else if (entity.state === "on") {
+ return variables.ulm_on;
+ } else if (entity.state === "off") {
+ return variables.ulm_off;
+ } else if (entity.state === "unavailable") {
+ return variables.ulm_unavailable;
+ } else {
+ return entity.state;
+ }
+ ]]]
+```
diff --git a/custom_cards/custom_card_nas/README.md b/custom_cards/custom_card_nas/README.md
index 25bc874aa..f59ad2701 100644
--- a/custom_cards/custom_card_nas/README.md
+++ b/custom_cards/custom_card_nas/README.md
@@ -9,6 +9,8 @@ hide:
The `card-nas` shows you a specific sensor value from your NAS, eg. the disk space used.
+
+
## Credits
Author: tben - 2021
@@ -20,6 +22,10 @@ Version: 1.0.0
1.0.0
Initial release
+
## Usage
@@ -59,7 +65,7 @@ n/a
1.0.1
+Fix card & add Screenshot +
+
+
+## Requirements
+
+To have the Minimalist cards and custom cards installed
+
+## Usage
+
+```yaml
+- type: 'custom:button-card'
+ template: custom_card_nik_door
+ entity: sensor.nuki_blindato_door_security_state
+ variables:
+ ulm_custom_card_entity_1_name: Blindato
+ ulm_custom_card_entity_1_lock: lock.nuki_blindato_lock
+```
+
+## Variables
+
+1.0.0
+Initial release +| Variable | +Example | +Required | +Explanation | +
|---|---|---|---|
| ulm_custom_card_entity_1_name | +sensor.nuki_blindato_door_security_state | +Yes | +Your Door Name | +
| ulm_custom_card_entity_1_lock | +lock.nuki_blindato_lock | +Yes | +Your Door Lock entity | +
| entity | +sensor.nuki_blindato_door_security_state | +Yes | +Your door sensor to track "Open" and "Close" state. | +
+
+
+## Requirements
+
+To have the Minimalist cards and custom cards installed
+
+## Usage
+
+```yaml
+- type: "custom:button-card"
+ template: "custom_card_nik_nas"
+ entity: switch.qnap_wol
+ variables:
+ graph_span: "1d"
+ chart_type: "radialBar"
+ entity_1:
+ entity_id: "sensor.nas_cpu_temperature"
+ icon: ''
+ name: "Temp"
+ color: "yellow"
+ max_value: 100
+ entity_2:
+ entity_id: "sensor.nas_memory_usage"
+ icon: ''
+ name: "Memory"
+ color: "blue"
+ max_value: 100
+ entity_3:
+ entity_id: "sensor.nas_cpu_usage"
+ icon: ''
+ name: "CPU"
+ color: "green"
+ max_value: 100
+ entity_4:
+ entity_id: "sensor.disk_use_percent"
+ icon: "mdi:harddisk"
+ name: "Disk"
+ color: "red"
+```
+
+## Variables
+
+1.0.0
+Initial release +| Variable | +Example | +Required | +Explanation | +
|---|---|---|---|
| entity | +switch.qnap_wol | +yes | +The Switch to turn On or Off the NAS | +
| chart_type | +line, scatter, pie, donut or radialBar | +yes | +The chart type you want to display | +
| graph_span | +1h, 12min, 1d, 1h25, 10sec, ... | +yes | +The span of the graph as a time interval | +
| entity_id | +sensor.disk_use_percent | +yes | +Entity sensor of choice. 4 entities must be added | +
| icon | +mdi:cpu-64-bit | +no | +mdi icon you want to be exposed in the img_cell, '' will return entity.attributes.icon | +
| name | +name for the used sensor | +no | +'' will return entity.attributes.friendly_name | +
| color | +green, blue, yellow, red or grey | +no | +if you don't use the color variable it will choice a random color | +
| max_value | +10, 300, ... | +no | +Maximum value of the sensor. Default will be 100 | +
' + user.name + '!'; @@ -48,7 +48,7 @@ custom_card_paddy_welcome: custom_card_paddy_welcome_with_weather: template: - - "ulm_custom_card_paddy_welcome_language_variables" + - "ulm_language_variables" show_icon: false show_name: false show_label: false @@ -72,14 +72,13 @@ custom_card_paddy_welcome_with_weather: let welcome = ''; if (time > '18:00'){ - welcome = variables.ulm_custom_card_paddy_welcome_evening; + welcome = variables.ulm_evening; } else if (time > '12:00'){ - welcome = variables.ulm_custom_card_paddy_welcome_afternoon; + welcome = variables.ulm_afternoon; } else if (time > '05:00'){ - welcome = variables.ulm_custom_card_paddy_welcome_morning; + welcome = variables.ulm_morning; } else { - welcome = variables.ulm_custom_card_paddy_welcome_hello; - } + welcome = variables.ulm_hello; return welcome + ',
' + user.name + '!'; ]]] @@ -133,7 +132,7 @@ custom_card_paddy_welcome_with_weather: custom_card_paddy_welcome_with_news: template: - - "ulm_custom_card_paddy_welcome_language_variables" + - "ulm_language_variables" show_icon: false show_name: false show_label: false @@ -157,14 +156,13 @@ custom_card_paddy_welcome_with_news: let welcome = ''; if (time > '18:00'){ - welcome = variables.ulm_custom_card_paddy_welcome_evening; + welcome = variables.ulm_evening; } else if (time > '12:00'){ - welcome = variables.ulm_custom_card_paddy_welcome_afternoon; + welcome = variables.ulm_afternoon; } else if (time > '05:00'){ - welcome = variables.ulm_custom_card_paddy_welcome_morning; + welcome = variables.ulm_morning; } else { - welcome = variables.ulm_custom_card_paddy_welcome_hello; - } + welcome = variables.ulm_hello; return welcome + ',
' + user.name + '!'; ]]] diff --git a/custom_cards/custom_card_paddy_welcome/languages/es.yaml b/custom_cards/custom_card_paddy_welcome/languages/es.yaml index 8bd843098..499e86cbe 100644 --- a/custom_cards/custom_card_paddy_welcome/languages/es.yaml +++ b/custom_cards/custom_card_paddy_welcome/languages/es.yaml @@ -1,7 +1,7 @@ --- ulm_custom_card_paddy_welcome_language_variables: variables: - ulm_custom_card_paddy_welcome_morning: "Buenos días" - ulm_custom_card_paddy_welcome_afternoon: "Buenas tardes" - ulm_custom_card_paddy_welcome_evening: "Buenas noches" - ulm_custom_card_paddy_welcome_hello: "Hola" + ulm_custom_card_paddy_welcome_morning: "¡Buenos días" + ulm_custom_card_paddy_welcome_afternoon: "¡Buenas tardes" + ulm_custom_card_paddy_welcome_evening: "¡Buenas noches" + ulm_custom_card_paddy_welcome_hello: "¡Hola" diff --git a/custom_cards/custom_card_tpx01_aircondition/custom_card_tpx01_aircondition.yaml b/custom_cards/custom_card_tpx01_aircondition/custom_card_tpx01_aircondition.yaml index a5a44b7d6..76e1bf905 100644 --- a/custom_cards/custom_card_tpx01_aircondition/custom_card_tpx01_aircondition.yaml +++ b/custom_cards/custom_card_tpx01_aircondition/custom_card_tpx01_aircondition.yaml @@ -23,15 +23,15 @@ custom_card_tpx01_aircondition: if (entity.state =='off') { return variables.ulm_off; } else if (entity.state =='dry') { - return variables.custom_card_tpx01_aircondition_dry; + return variables.ulm_dry; } else if (entity.state =='heat') { - return variables.custom_card_tpx01_aircondition_heat; + return variables.ulm_heating; } else if (entity.state =='heat_cool') { - return variables.custom_card_tpx01_aircondition_heat_cool; + return variables.ulm_heat_cool; } else if (entity.state =='cool') { - return variables.custom_card_tpx01_aircondition_cool; + return variables.ulm_cooling; } else if (entity.state =='fan_only') { - return variables.custom_card_tpx01_aircondition_fan_only; + return variables.ulm_fan_only; } return entity.state; ]]] diff --git a/custom_cards/custom_card_wsly_pollen/languages/ES.yaml b/custom_cards/custom_card_wsly_pollen/languages/ES.yaml new file mode 100644 index 000000000..d991665cb --- /dev/null +++ b/custom_cards/custom_card_wsly_pollen/languages/ES.yaml @@ -0,0 +1,10 @@ +# ES.yaml for custom_card_wsly_pollen +--- +custom_card_wsly_pollen_language_variables: + variables: + custom_card_wsly_pollen_none: "Ninguno" + custom_card_wsly_pollen_very_low: "Muy bajo" + custom_card_wsly_pollen_low: "Bajo" + custom_card_wsly_pollen_medium: "Medio" + custom_card_wsly_pollen_high: "Alto" + custom_card_wsly_pollen_very_high: "Muy alto" diff --git a/custom_cards/custom_card_wsly_pollen/languages/de.yaml b/custom_cards/custom_card_wsly_pollen/languages/de.yaml new file mode 100644 index 000000000..54fd3d8df --- /dev/null +++ b/custom_cards/custom_card_wsly_pollen/languages/de.yaml @@ -0,0 +1,10 @@ +# EN.yaml for custom_card_wsly_pollen +--- +custom_card_wsly_pollen_language_variables: + variables: + custom_card_wsly_pollen_none: "Keine" + custom_card_wsly_pollen_very_low: "Sehr niedrig" + custom_card_wsly_pollen_low: "Niedrig" + custom_card_wsly_pollen_medium: "Mittel" + custom_card_wsly_pollen_high: "Hoch" + custom_card_wsly_pollen_very_high: "Sehr hoch" diff --git a/custom_cards/custom_card_yagrasdemonde_lights_count/languages/ES.yaml b/custom_cards/custom_card_yagrasdemonde_lights_count/languages/ES.yaml new file mode 100644 index 000000000..2a67c870b --- /dev/null +++ b/custom_cards/custom_card_yagrasdemonde_lights_count/languages/ES.yaml @@ -0,0 +1,9 @@ +--- +ulm_custom_card_yagrasdemonde_lights_count_language_variables: + variables: + ulm_custom_card_yagrasdemonde_lights_count_light_0: "Ninguna luz encendida" + ulm_custom_card_yagrasdemonde_lights_count_light_1: "1 luz encendida" + ulm_custom_card_yagrasdemonde_lights_count_light_many: "luces encendidas" + ulm_custom_card_yagrasdemonde_lights_count_cover_0: "Ninguna cortina abierta" + ulm_custom_card_yagrasdemonde_lights_count_cover_1: "1 cortina abierta" + ulm_custom_card_yagrasdemonde_lights_count_cover_many: "cortinas abiertas" diff --git a/custom_cards/custom_card_yagrasdemonde_lights_count/languages/de.yaml b/custom_cards/custom_card_yagrasdemonde_lights_count/languages/de.yaml new file mode 100644 index 000000000..3c71ddfba --- /dev/null +++ b/custom_cards/custom_card_yagrasdemonde_lights_count/languages/de.yaml @@ -0,0 +1,9 @@ +--- +ulm_custom_card_yagrasdemonde_lights_count_language_variables: + variables: + ulm_custom_card_yagrasdemonde_lights_count_light_0: "Keine Lampen an" + ulm_custom_card_yagrasdemonde_lights_count_light_1: "1 Lampe an" + ulm_custom_card_yagrasdemonde_lights_count_light_many: "Lampen an" + ulm_custom_card_yagrasdemonde_lights_count_cover_0: "Keine Rollos offen" + ulm_custom_card_yagrasdemonde_lights_count_cover_1: "1 Rollo offen" + ulm_custom_card_yagrasdemonde_lights_count_cover_many: "Rollos offen" diff --git a/custom_components/ui_lovelace_minimalist/lovelace/translations/de.yaml b/custom_components/ui_lovelace_minimalist/lovelace/translations/de.yaml index f61184cc6..e87333535 100644 --- a/custom_components/ui_lovelace_minimalist/lovelace/translations/de.yaml +++ b/custom_components/ui_lovelace_minimalist/lovelace/translations/de.yaml @@ -46,5 +46,5 @@ ulm_language_variables: ulm_hello: "Hallo" ulm_cleaning: "Staubsaugen" ulm_returning: "Auf dem Heimweg" - ulm_docked: "Docked" + ulm_docked: "Angedockt" ulm_mopping: "Wischen" diff --git a/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_scenes.yaml b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_scenes.yaml new file mode 100644 index 000000000..a31fed7d4 --- /dev/null +++ b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_scenes.yaml @@ -0,0 +1,219 @@ +--- +card_scenes: + show_icon: false + show_name: true + show_label: false + variables: + entity_1: + entity_id: "" + color: > + [[[ + var colors = ['yellow', 'blue', 'red', 'purple','green', 'pink']; + var color = colors[Math.floor(Math.random() * colors.length)]; + return color; + ]]] + entity_2: + entity_id: "" + color: > + [[[ + var colors = ['yellow', 'blue', 'red', 'purple','green', 'pink']; + var color = colors[Math.floor(Math.random() * colors.length)]; + return color; + ]]] + entity_3: + entity_id: "" + color: > + [[[ + var colors = ['yellow', 'blue', 'red', 'purple','green', 'pink']; + var color = colors[Math.floor(Math.random() * colors.length)]; + return color; + ]]] + entity_4: + entity_id: "" + color: > + [[[ + var colors = ['yellow', 'blue', 'red', 'purple','green', 'pink']; + var color = colors[Math.floor(Math.random() * colors.length)]; + return color; + ]]] + entity_5: + entity_id: "" + color: > + [[[ + var colors = ['yellow', 'blue', 'red', 'purple','green', 'pink']; + var color = colors[Math.floor(Math.random() * colors.length)]; + return color; + ]]] + entity_6: + entity_id: "" + color: > + [[[ + var colors = ['yellow', 'blue', 'red', 'purple','green', 'pink']; + var color = colors[Math.floor(Math.random() * colors.length)]; + return color; + ]]] + entity_7: + entity_id: "" + color: > + [[[ + var colors = ['yellow', 'blue', 'red', 'purple','green', 'pink']; + var color = colors[Math.floor(Math.random() * colors.length)]; + return color; + ]]] + styles: + grid: + - grid-template-areas: > + [[[ + var pills = [] + const entities = [variables.entity_1.entity_id, variables.entity_2.entity_id, variables.entity_3.entity_id, variables.entity_4.entity_id, variables.entity_5.entity_id, variables.entity_6.entity_id, variables.entity_7.entity_id] + function entity_check(item) { + if (item != "") { + pills.push("item" + (pills.length+1)) + } + } + entities.forEach(entity_check) + return pills.join(" ") + ]]] + - display: "flex" + - grid-template-rows: "min-content" + - justify-content: "space-evenly" + card: + - border-radius: "var(--border-radius)" + - box-shadow: "var(--box-shadow)" + - padding: "12px" + - overflow: "visible" + custom_fields: + item1: + - display: "[[[ return (variables.entity_1.entity_id != '') ? 'block' : 'none' ]]]" + item2: + - display: "[[[ return (variables.entity_2.entity_id != '') ? 'block' : 'none' ]]]" + item3: + - display: "[[[ return (variables.entity_3.entity_id != '') ? 'block' : 'none' ]]]" + item4: + - display: "[[[ return (variables.entity_4.entity_id != '') ? 'block' : 'none' ]]]" + item5: + - display: "[[[ return (variables.entity_5.entity_id != '') ? 'block' : 'none' ]]]" + item6: + - display: "[[[ return (variables.entity_6.entity_id != '') ? 'block' : 'none' ]]]" + item7: + - display: "[[[ return (variables.entity_7.entity_id != '') ? 'block' : 'none' ]]]" + custom_fields: + item1: + card: + type: "custom:button-card" + template: "card_scenes_pill_welcome" + variables: "[[[ return variables.entity_1; ]]]" + entity: "[[[ return variables.entity_1.entity_id ]]]" + custom_fields: + item1: + card: + type: "custom:button-card" + entity: "[[[ return variables.entity_1.entity_id ]]]" + icon: "[[[ return variables.entity_1.icon ]]]" + item2: + card: + type: "custom:button-card" + entity: "[[[ return variables.entity_1.entity_id ]]]" + name: "[[[ return variables.entity_1.name ]]]" + item2: + card: + type: "custom:button-card" + template: "card_scenes_pill_welcome" + variables: "[[[ return variables.entity_2; ]]]" + entity: "[[[ return variables.entity_2.entity_id ]]]" + custom_fields: + item1: + card: + type: "custom:button-card" + entity: "[[[ return variables.entity_2.entity_id ]]]" + icon: "[[[ return variables.entity_2.icon ]]]" + item2: + card: + type: "custom:button-card" + entity: "[[[ return variables.entity_2.entity_id ]]]" + name: "[[[ return variables.entity_2.name ]]]" + item3: + card: + type: "custom:button-card" + template: "card_scenes_pill_welcome" + variables: "[[[ return variables.entity_3; ]]]" + entity: "[[[ return variables.entity_3.entity_id ]]]" + custom_fields: + item1: + card: + type: "custom:button-card" + entity: "[[[ return variables.entity_3.entity_id ]]]" + icon: "[[[ return variables.entity_3.icon ]]]" + item2: + card: + type: "custom:button-card" + entity: "[[[ return variables.entity_3.entity_id ]]]" + name: "[[[ return variables.entity_3.name ]]]" + item4: + card: + type: "custom:button-card" + template: "card_scenes_pill_welcome" + variables: "[[[ return variables.entity_4; ]]]" + entity: "[[[ return variables.entity_4.entity_id ]]]" + custom_fields: + item1: + card: + type: "custom:button-card" + entity: "[[[ return variables.entity_4.entity_id ]]]" + icon: "[[[ return variables.entity_4.icon ]]]" + item2: + card: + type: "custom:button-card" + entity: "[[[ return variables.entity_4.entity_id ]]]" + name: "[[[ return variables.entity_4.name ]]]" + item5: + card: + type: "custom:button-card" + template: "card_scenes_pill_welcome" + variables: "[[[ return variables.entity_5; ]]]" + entity: "[[[ return variables.entity_5.entity_id ]]]" + custom_fields: + item1: + card: + type: "custom:button-card" + entity: "[[[ return variables.entity_5.entity_id ]]]" + icon: "[[[ return variables.entity_5.icon ]]]" + item2: + card: + type: "custom:button-card" + entity: "[[[ return variables.entity_5.entity_id ]]]" + name: "[[[ return variables.entity_5.name ]]]" + item6: + card: + type: "custom:button-card" + template: "card_scenes_pill_welcome" + variables: "[[[ return variables.entity_6; ]]]" + entity: "[[[ return variables.entity_6.entity_id ]]]" + custom_fields: + item1: + card: + type: "custom:button-card" + entity: "[[[ return variables.entity_6.entity_id ]]]" + icon: "[[[ return variables.entity_6.icon ]]]" + item2: + card: + type: "custom:button-card" + entity: "[[[ return variables.entity_6.entity_id ]]]" + name: "[[[ return variables.entity_6.name ]]]" + item7: + card: + type: "custom:button-card" + template: "card_scenes_pill_welcome" + variables: "[[[ return variables.entity_7; ]]]" + entity: "[[[ return variables.entity_7.entity_id ]]]" + custom_fields: + item1: + card: + type: "custom:button-card" + entity: "[[[ return variables.entity_7.entity_id ]]]" + icon: "[[[ return variables.entity_7.icon ]]]" + item2: + card: + type: "custom:button-card" + entity: "[[[ return variables.entity_7.entity_id ]]]" + name: "[[[ return variables.entity_7.name ]]]" diff --git a/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_vacuum.yaml b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_vacuum.yaml index 83a9303f6..b4ca43493 100644 --- a/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_vacuum.yaml +++ b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_vacuum.yaml @@ -10,12 +10,44 @@ card_vacuum: ulm_card_vacuum_icon: "[[[ return entity.attributes.icon ]]]" ulm_card_vacuum_room: ulm_card_vacuum_room_icon: "[[[ return entity.attributes.icon ]]]" + ulm_card_vacuum_camera: + ulm_card_vacuum_camera_toggle: triggers_update: "all" styles: grid: - - grid-template-areas: "'item1' 'item2'" + - grid-template-areas: > + [[[ + if( variables.ulm_card_vacuum_camera ){ + if ( variables.ulm_card_vacuum_camera_toggle ) { + if( entity.state.toLowerCase() === 'cleaning' ){ + return "'item1' 'item3' 'item2'"; + } else { + return "'item1' 'item2'"; + } + } else { + return "'item1' 'item3' 'item2'"; + } + } else { + return "'item1' 'item2'"; + } + ]]] - grid-template-columns: "1fr" - - grid-template-rows: "min-content min-content" + - grid-template-rows: > + [[[ + if( variables.ulm_card_vacuum_camera ){ + if ( variables.ulm_card_vacuum_camera_toggle ) { + if( entity.state.toLowerCase() === 'cleaning' ){ + return "repeat(3, min-content)"; + } else { + return "repeat(2, min-content)"; + } + } else { + return "repeat(3, min-content)"; + } + } else { + return "repeat(2, min-content)"; + } + ]]] - row-gap: "12px" card: - border-radius: "var(--border-radius)" @@ -34,6 +66,24 @@ card_vacuum: return 'rgba(var(--color-purple),0.1)' } ]]] + custom_fields: + item3: + - display: > + [[[ + if( variables.ulm_card_vacuum_camera ){ + if ( variables.ulm_card_vacuum_camera_toggle ) { + if( entity.state.toLowerCase() === 'cleaning' ){ + return "block"; + } else { + return "none"; + } + } else { + return "block"; + } + } else { + return "none"; + } + ]]] custom_fields: item1: card: @@ -208,3 +258,10 @@ card_vacuum: service: "script.turn_on" service_data: entity_id: "[[[ return variables.ulm_card_vacuum_room ]]]" + item3: + card: + type: "picture-entity" + camera_view: "live" + entity: "[[[ return variables.ulm_card_vacuum_camera ]]]" + show_name: false + show_state: false diff --git a/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_welcome_scenes.yaml b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_welcome_scenes.yaml index 66b41b255..866750c88 100644 --- a/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_welcome_scenes.yaml +++ b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_welcome_scenes.yaml @@ -2,11 +2,9 @@ card_welcome_scenes: variables: ulm_weather: "[[[ return variables.ulm_weather]]]" - ulm_language: "[[[return window.navigator.language ]]]" + ulm_language: "[[[ return window.navigator.language ]]]" entity_1: - entity_id: - icon: "[[[ return entity.attributes.icon ]]]" - name: "[[[ return entity.attributes.friendly_name ]]]" + entity_id: "" color: > [[[ var colors = ['yellow', 'blue', 'red', 'purple','green', 'pink']; @@ -14,9 +12,7 @@ card_welcome_scenes: return color; ]]] entity_2: - entity_id: - icon: "[[[ return entity.attributes.icon ]]]" - name: "[[[ return entity.attributes.friendly_name ]]]" + entity_id: "" color: > [[[ var colors = ['yellow', 'blue', 'red', 'purple','green', 'pink']; @@ -24,9 +20,7 @@ card_welcome_scenes: return color; ]]] entity_3: - entity_id: - icon: "[[[ return entity.attributes.icon ]]]" - name: "[[[ return entity.attributes.friendly_name ]]]" + entity_id: "" color: > [[[ var colors = ['yellow', 'blue', 'red', 'purple','green', 'pink']; @@ -34,9 +28,7 @@ card_welcome_scenes: return color; ]]] entity_4: - entity_id: - icon: "[[[ return entity.attributes.icon ]]]" - name: "[[[ return entity.attributes.friendly_name ]]]" + entity_id: "" color: > [[[ var colors = ['yellow', 'blue', 'red', 'purple','green', 'pink']; @@ -44,9 +36,23 @@ card_welcome_scenes: return color; ]]] entity_5: - entity_id: - icon: "[[[ return entity.attributes.icon ]]]" - name: "[[[ return entity.attributes.friendly_name ]]]" + entity_id: "" + color: > + [[[ + var colors = ['yellow', 'blue', 'red', 'purple','green', 'pink']; + var color = colors[Math.floor(Math.random() * colors.length)]; + return color; + ]]] + entity_6: + entity_id: "" + color: > + [[[ + var colors = ['yellow', 'blue', 'red', 'purple','green', 'pink']; + var color = colors[Math.floor(Math.random() * colors.length)]; + return color; + ]]] + entity_7: + entity_id: "" color: > [[[ var colors = ['yellow', 'blue', 'red', 'purple','green', 'pink']; @@ -179,8 +185,8 @@ card_welcome_scenes: type: "custom:button-card" template: > [[[ - if(variables.entity_1.entity_id && variables.entity_2.entity_id && variables.entity_3.entity_id && variables.entity_4.entity_id && variables.entity_5.entity_id){ - return 'card_scenes_welcome' + if(variables?.entity_1?.entity_id != ""){ + return 'card_scenes' } else { return 'card_scenes_welcome_auto' } @@ -196,6 +202,8 @@ card_welcome_scenes: entity_3: "[[[ return variables.entity_3]]]" entity_4: "[[[ return variables.entity_4]]]" entity_5: "[[[ return variables.entity_5]]]" + entity_6: "[[[ return variables.entity_6]]]" + entity_7: "[[[ return variables.entity_7]]]" card_title_welcome: tap_action: action: "none" @@ -224,137 +232,8 @@ card_title_welcome: - font-weight: "bold" - font-size: "1rem" - opacity: "0.4" -card_scenes_welcome: - show_icon: false - show_name: true - show_label: false - styles: - grid: - - grid-template-areas: "'item1 item2 item3 item4 item5'" - - grid-template-columns: "1fr 1fr 1fr 1fr 1fr" - - grid-template-rows: "min-content" - - justify-items: "center" - card: - - border-radius: "var(--border-radius)" - - box-shadow: "var(--box-shadow)" - - padding: "12px" - - overflow: "visible" - custom_fields: - item1: - card: - type: "custom:button-card" - template: "card_scenes_pill_welcome" - entity: "[[[ return variables.entity_1.entity_id ]]]" - custom_fields: - item1: - card: - type: "custom:button-card" - template: "tap_action" - entity: "[[[ return variables.entity_1.entity_id ]]]" - icon: "[[[ return variables.entity_1.icon ]]]" - styles: - icon: - - color: "[[[ return `rgba(var(--color-${variables.entity_1.color}), 1)`;]]]" - img_cell: - - background-color: "[[[ return `rgba(var(--color-${variables.entity_1.color}), 0.20)`;]]]" - item2: - card: - type: "custom:button-card" - template: "tap_action" - entity: "[[[ return variables.entity_1.entity_id ]]]" - name: "[[[ return variables.entity_1.name ]]]" - item2: - card: - type: "custom:button-card" - template: "card_scenes_pill_welcome" - entity: "[[[ return variables.entity_2.entity_id ]]]" - custom_fields: - item1: - card: - type: "custom:button-card" - template: "tap_action" - entity: "[[[ return variables.entity_2.entity_id ]]]" - icon: "[[[ return variables.entity_2.icon ]]]" - styles: - icon: - - color: "[[[ return `rgba(var(--color-${variables.entity_2.color}), 1)`;]]]" - img_cell: - - background-color: "[[[ return `rgba(var(--color-${variables.entity_2.color}), 0.20)`;]]]" - item2: - card: - type: "custom:button-card" - template: "tap_action" - entity: "[[[ return variables.entity_2.entity_id ]]]" - name: "[[[ return variables.entity_2.name ]]]" - item3: - card: - type: "custom:button-card" - template: "card_scenes_pill_welcome" - entity: "[[[ return variables.entity_3.entity_id ]]]" - custom_fields: - item1: - card: - type: "custom:button-card" - template: "tap_action" - entity: "[[[ return variables.entity_3.entity_id ]]]" - icon: "[[[ return variables.entity_3.icon ]]]" - styles: - icon: - - color: "[[[ return `rgba(var(--color-${variables.entity_3.color}), 1)`;]]]" - img_cell: - - background-color: "[[[ return `rgba(var(--color-${variables.entity_3.color}), 0.20)`;]]]" - item2: - card: - type: "custom:button-card" - template: "tap_action" - entity: "[[[ return variables.entity_3.entity_id ]]]" - name: "[[[ return variables.entity_3.name ]]]" - item4: - card: - type: "custom:button-card" - template: "card_scenes_pill_welcome" - entity: "[[[ return variables.entity_4.entity_id ]]]" - custom_fields: - item1: - card: - type: "custom:button-card" - template: "tap_action" - entity: "[[[ return variables.entity_4.entity_id ]]]" - icon: "[[[ return variables.entity_4.icon ]]]" - styles: - icon: - - color: "[[[ return `rgba(var(--color-${variables.entity_4.color}), 1)`;]]]" - img_cell: - - background-color: "[[[ return `rgba(var(--color-${variables.entity_4.color}), 0.20)`;]]]" - item2: - card: - type: "custom:button-card" - template: "tap_action" - entity: "[[[ return variables.entity_4.entity_id ]]]" - name: "[[[ return variables.entity_4.name ]]]" - item5: - card: - type: "custom:button-card" - template: "card_scenes_pill_welcome" - entity: "[[[ return variables.entity_5.entity_id ]]]" - custom_fields: - item1: - card: - type: "custom:button-card" - template: "tap_action" - entity: "[[[ return variables.entity_5.entity_id ]]]" - icon: "[[[ return variables.entity_5.icon ]]]" - styles: - icon: - - color: "[[[ return `rgba(var(--color-${variables.entity_5.color}), 1)`;]]]" - img_cell: - - background-color: "[[[ return `rgba(var(--color-${variables.entity_5.color}), 0.20)`;]]]" - item2: - card: - type: "custom:button-card" - template: "tap_action" - entity: "[[[ return variables.entity_5.entity_id ]]]" - name: "[[[ return variables.entity_5.name ]]]" + +# pill card_scenes_pill_welcome: show_icon: false show_label: false @@ -363,7 +242,7 @@ card_scenes_pill_welcome: - operator: "template" value: > [[[ - return (entity.state !== 'on' && entity.state !== 'playing') + return (entity.state !== 'on' && entity.state !== 'playing' && entity.state != variables?.state) ]]] styles: card: @@ -398,14 +277,58 @@ card_scenes_pill_welcome: show_icon: true show_label: false show_name: false + tap_action: + action: > + [[[ + if(variables?.nav_path){ + return "navigate" + } else { + return "call-service" + } + ]]] + service: > + [[[ + if(entity.entity_id.startsWith("scene.")){ + return "scene.turn_on" + } + else if(entity.entity_id.startsWith("media_player.")){ + return "media_player.media_play_pause" + } + else if(entity.entity_id.startsWith("input_select.")){ + return "input_select.select_option" + } else { + return "homeassistant.toggle" + } + ]]] + navigation_path: "[[[ return variables?.nav_path; ]]]" + service_data: | + [[[ + var obj; + if( entity.entity_id.startsWith("input_select.") ) + obj = { entity_id: entity.entity_id, option: variables.state }; + else + obj = { entity_id: entity.entity_id }; + return obj; + ]]] styles: grid: - grid-template-areas: "i" icon: - - color: "[[[ return `rgba(var(--color-theme), 0.20)`;]]]" + - color: > + [[[ + var color = variables?.color + if(hass.themes.darkMode){var color = "#FAFAFA";} + return `rgba(var(--color-${color}), 1)`; + ]]] - width: "20px" img_cell: - - background-color: "[[[ return `rgba(var(--color-theme), 0.05)`;]]] " + - background-color: > + [[[ + var color = variables?.color + var opacity = '0.20' + if(hass.themes.darkMode){var opacity = '1'} + return `rgba(var(--color-${color}), ${opacity})`; + ]]] - border-radius: "50%" - width: "42px" - height: "42px" @@ -417,7 +340,7 @@ card_scenes_pill_welcome: - operator: "template" value: > [[[ - return (entity.state !== 'on' && entity.state !== 'playing') + return (entity.state !== 'on' && entity.state !== 'playing' && entity.state != variables?.state) ]]] styles: card: @@ -435,6 +358,39 @@ card_scenes_pill_welcome: type: "custom:button-card" show_icon: false show_label: false + tap_action: + action: > + [[[ + if(variables?.nav_path){ + return "navigate" + } else { + return "call-service" + } + ]]] + navigation_path: "[[[ return variables?.nav_path; ]]]" + service: > + [[[ + if(entity.entity_id.startsWith("scene.")){ + return "scene.turn_on" + } + else if(entity.entity_id.startsWith("media_player.")){ + return "media_player.media_play_pause" + } + else if(entity.entity_id.startsWith("input_select.")){ + return "input_select.select_option" + } else { + return "homeassistant.toggle" + } + ]]] + service_data: | + [[[ + var obj; + if( entity.entity_id.startsWith("input_select.") ) + obj = { entity_id: entity.entity_id, option: variables.state }; + else + obj = { entity_id: entity.entity_id }; + return obj; + ]]] styles: grid: - grid-template-areas: "n" @@ -537,13 +493,18 @@ card_scenes_welcome_auto: show_icon: false show_name: true show_label: false + variables: + colors: > + [[[ + var colors = ['yellow', 'blue', 'red', 'purple','green', 'pink']; + var color = colors[Math.floor(Math.random() * colors.length)]; + return color; + ]]] styles: grid: - - grid-template-areas: "'item1 item2 item3 item4 item5'" - - grid-template-columns: "1fr 1fr 1fr 1fr 1fr" - - grid-template-rows: "min-content" - - justify-items: "center" - - column-gap: "24px" + - grid-template-areas: "item1" + - display: "flex" + - justify-content: "center" card: - border-radius: "var(--border-radius)" - box-shadow: "var(--box-shadow)" @@ -554,84 +515,14 @@ card_scenes_welcome_auto: type: "custom:auto-entities" card: type: "grid" - columns: 1 - square: false - card_param: "cards" - sort: - count: 1 - filter: - include: - - domain: "script" - options: - type: "custom:button-card" - template: "card_scenes_pill_welcome" - custom_fields: - item1: - card: - type: "custom:button-card" - template: "tap_action" - entity: "this.entity_id" - icon: "[[[ return variables.entity_1.icon ]]]" - styles: - icon: - - color: "[[[ return `rgba(var(--color-${variables.entity_1.color}), 1)`;]]]" - img_cell: - - background-color: "[[[ return `rgba(var(--color-${variables.entity_1.color}), 0.20)`;]]]" - item2: - card: - type: "custom:button-card" - template: "tap_action" - entity: "this.entity_id" - name: "[[[ return variables.entity_1.name ]]]" - item2: - card: - type: "custom:auto-entities" - card: - type: "grid" - columns: 1 - square: false - card_param: "cards" - sort: - count: 1 - first: 1 - filter: - include: - - domain: "script" - options: - type: "custom:button-card" - template: "card_scenes_pill_welcome" - custom_fields: - item1: - card: - type: "custom:button-card" - template: "tap_action" - entity: "this.entity_id" - icon: "[[[ return variables.entity_2.icon ]]]" - styles: - icon: - - color: "[[[ return `rgba(var(--color-${variables.entity_2.color}), 1)`;]]]" - img_cell: - - background-color: "[[[ return `rgba(var(--color-${variables.entity_2.color}), 0.20)`;]]]" - item2: - card: - type: "custom:button-card" - template: "tap_action" - entity: "this.entity_id" - name: "[[[ return variables.entity_2.name ]]]" - item3: - card: - type: "custom:auto-entities" - card: - type: "grid" - columns: 1 + columns: 5 square: false card_param: "cards" sort: - count: 1 - first: 2 + count: 5 filter: include: - - domain: "script" + - domain: "light" options: type: "custom:button-card" template: "card_scenes_pill_welcome" @@ -639,104 +530,25 @@ card_scenes_welcome_auto: item1: card: type: "custom:button-card" - template: "tap_action" entity: "this.entity_id" - icon: "[[[ return variables.entity_3.icon ]]]" styles: icon: - - color: "[[[ return `rgba(var(--color-${variables.entity_3.color}), 1)`;]]]" + - color: > + [[[ + var color = variables.colors + if(hass.themes.darkMode){var color = "#FAFAFA";} + return `rgba(var(--color-${color}), 1)`; + ]]] + - width: "20px" img_cell: - - background-color: "[[[ return `rgba(var(--color-${variables.entity_3.color}), 0.20)`;]]]" + - background-color: > + [[[ + var color = variables.colors + var opacity = '0.20' + if(hass.themes.darkMode){var opacity = '1'} + return `rgba(var(--color-${color}), ${opacity})`; + ]]] item2: card: type: "custom:button-card" - template: "tap_action" entity: "this.entity_id" - name: "[[[ return variables.entity_3.name ]]]" - item4: - card: - type: "custom:auto-entities" - card: - type: "grid" - columns: 1 - square: false - card_param: "cards" - sort: - count: 1 - first: 3 - filter: - include: - - domain: "script" - options: - type: "custom:button-card" - template: "card_scenes_pill_welcome" - custom_fields: - item1: - card: - type: "custom:button-card" - template: "tap_action" - entity: "this.entity_id" - icon: "[[[ return variables.entity_4.icon ]]]" - styles: - icon: - - color: "[[[ return `rgba(var(--color-${variables.entity_4.color}), 1)`;]]]" - img_cell: - - background-color: "[[[ return `rgba(var(--color-${variables.entity_4.color}), 0.20)`;]]]" - item2: - card: - type: "custom:button-card" - template: "tap_action" - entity: "this.entity_id" - name: "[[[ return variables.entity_4.name ]]]" - item5: - card: - type: "custom:auto-entities" - card: - type: "grid" - columns: 1 - square: false - card_param: "cards" - sort: - count: 1 - first: 4 - filter: - include: - - domain: "script" - options: - type: "custom:button-card" - template: "card_scenes_pill_welcome" - custom_fields: - item1: - card: - type: "custom:button-card" - template: "tap_action" - entity: "this.entity_id" - icon: "[[[ return variables.entity_5.icon ]]]" - styles: - icon: - - color: "[[[ return `rgba(var(--color-${variables.entity_5.color}), 1)`;]]]" - img_cell: - - background-color: "[[[ return `rgba(var(--color-${variables.entity_5.color}), 0.20)`;]]]" - item2: - card: - type: "custom:button-card" - template: "tap_action" - entity: "this.entity_id" - name: "[[[ return variables.entity_5.name ]]]" -### tap_action -tap_action: - tap_action: - action: "call-service" - service: > - [[[ - if(entity.entity_id.startsWith("scene.")){ - return "scene.turn_on" - } - else if(entity.entity_id.startsWith("media_player.")){ - return "media_player.media_play_pause" - } else { - return "homeassistant.toggle" - } - ]]] - service_data: - entity_id: "[[[ return entity.entity_id]]]" diff --git a/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/popup_templates/popup_buttons/popup_button.yaml b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/popup_templates/popup_buttons/popup_button.yaml index 0ba7ce89c..e0638b80d 100644 --- a/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/popup_templates/popup_buttons/popup_button.yaml +++ b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/popup_templates/popup_buttons/popup_button.yaml @@ -11,6 +11,8 @@ popup_button: card: - background: "none" - box-shadow: "none" + - border-radius: "none" + - padding: "12px" icon: - color: "var(--primary-color)" img_cell: diff --git a/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/popup_templates/popup_buttons/popup_button_app.yaml b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/popup_templates/popup_buttons/popup_button_app.yaml new file mode 100644 index 000000000..551de48ca --- /dev/null +++ b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/popup_templates/popup_buttons/popup_button_app.yaml @@ -0,0 +1,118 @@ +--- +popup_button_app: + template: + - "popup_button" + show_name: true + show_label: true + styles: + grid: + - grid-template-areas: "'i n' 'i l'" + - grid-template-columns: "min-content auto" + - grid-template-rows: "min-content min-content" + label: + - justify-self: "start" + - align-self: "start" + - font-weight: "bolder" + - font-size: "12px" + - filter: "opacity(40%)" + - margin-left: "12px" + name: + - align-self: "end" + - justify-self: "start" + - font-weight: "bold" + - font-size: "14px" + - margin-left: "12px" + - margin-top: "0px" + icon: + - color: > + [[[ + var color = "var(--color-theme)"; + if(entity?.attributes?.app_name){ + var app = entity.attributes?.app_name.toLowerCase(); + if(app = "spotify"){ + var color = "#1DB954"; + } + } else if(entity?.attributes?.media_content_id?.toLowerCase().includes("spotify")){ + var color = "#1DB954"; + } + return color; + ]]] + img_cell: + - border: "1px solid var(--color-theme)" + - border-shadow: "none" + - background-color: > + [[[ + var color = "var(--color-theme)"; + if(entity?.attributes?.app_name){ + var app = entity?.attributes?.app_name?.toLowerCase(); + if(app = "spotify"){ + var color = "#434343"; + } + } else if(entity?.attributes?.media_content_id?.toLowerCase().includes("spotify")){ + var color = "#434343"; + } + return color; + ]]] + icon: > + [[[ + var icon = entity.attributes.icon || "mdi:speaker"; + if(entity?.attributes?.app_name){ + var app = entity.attributes.app_name.toLowerCase(); + if(app == "spotify"){ + var icon = "mdi:spotify"; + } else if(app == "google podcasts"){ + var icon = "mdi:google-podcast"; + } else if(app == "plex"){ + var icon = "mdi:plex"; + } else if(app == "soundcloud"){ + var icon = "mdi:soundcloud"; + } else if(app == "youtube music"){ + var icon = "mdi:youtube"; + } else if (app == "oto music"){ + var icon = "mdi:music-circle"; + } else if(app == "pandora"){ + var icon = "mdi:pandora"; + } else if(app == "netflix"){ + var icon = "mdi:netflix"; + } else if(app == "bluetooth audio"){ + var icon = "mdi:bluetooth"; + } + } else if(entity?.attributes?.media_content_id?.toLowerCase().includes("spotify")){ + var icon = "mdi:spotify"; + } + return icon; + ]]] + label: > + [[[ + var label = entity.attributes.media_title || entity.attributes.friendly_name; + return label; + ]]] + name: > + [[[ + var name = entity.attributes.friendly_name; + if(entity?.attributes?.app_name){ + var app = entity?.attributes?.app_name?.toLowerCase(); + if(app == "spotify"){ + var name = "Spotify"; + } else if(app == "google podcasts"){ + var name = "Google-Podcast"; + } else if(app == "plex"){ + var name = "Plex"; + } else if(app == "soundcloud"){ + var name = "Soundcloud"; + } else if(app == "youtube music"){ + var name = "Youtube"; + } else if (app == "oto music"){ + var name = "Oto Music"; + } else if(app == "pandora"){ + var name = "Pandora"; + } else if(app == "netflix"){ + var name = "Netflix"; + } else if(app == "bluetooth audio"){ + var name = "Bluetooth"; + } + } else if(entity?.attributes?.media_content_id?.toLowerCase().includes("spotify")){ + var name = "Spotify"; + } + return name; + ]]] diff --git a/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/popup_templates/popup_buttons/popup_button_source.yaml b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/popup_templates/popup_buttons/popup_button_source.yaml new file mode 100644 index 000000000..a43106542 --- /dev/null +++ b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/popup_templates/popup_buttons/popup_button_source.yaml @@ -0,0 +1,15 @@ +--- +popup_button_source: + template: + - "popup_button" + - "ulm_language_variables" + icon: "mdi:playlist-music" + name: "Source" + styles: + name: + - text-transform: "uppercase" + - color: "rgba(var(--color-theme),0.5)" + img_cell: + - background: "none" + - box-shadow: "none" + - border: "1px solid rgba(var(--color-theme),0.25)" diff --git a/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/popup_templates/popup_buttons/popup_button_volume.yaml b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/popup_templates/popup_buttons/popup_button_volume.yaml index bdc7d8620..27054bd4a 100644 --- a/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/popup_templates/popup_buttons/popup_button_volume.yaml +++ b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/popup_templates/popup_buttons/popup_button_volume.yaml @@ -1,5 +1,17 @@ --- popup_button_volume: - template: "ulm_language_variables" + template: + - "popup_button" + - "ulm_language_variables" icon: "mdi:volume-high" name: "Volume" + styles: + name: + - text-transform: "uppercase" + - color: "rgba(var(--color-theme),0.5)" + img_cell: + - background: "none" + - box-shadow: "none" + - border: "1px solid rgba(var(--color-theme),0.25)" + tap_action: + action: "more_info" diff --git a/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/popup_templates/popup_buttons/popup_card_volume.yaml b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/popup_templates/popup_buttons/popup_card_volume.yaml new file mode 100644 index 000000000..1f548c7b9 --- /dev/null +++ b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/popup_templates/popup_buttons/popup_card_volume.yaml @@ -0,0 +1,15 @@ +--- +popup_card_volume: + template: "chips" + show_icon: true + icon: "mdi:volume-high" + label: "80%" + styles: + card: + - background: "none" + - box-shadow: "none" + - border: "1px solid rgba(var(--color-theme),0.25)" + grid: + - grid-template-areas: "i l" + - justify-content: "space-between" + - display: "flex" diff --git a/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/popup_templates/popup_buttons/popup_chip_controls.yaml b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/popup_templates/popup_buttons/popup_chip_controls.yaml new file mode 100644 index 000000000..a0a33b42d --- /dev/null +++ b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/popup_templates/popup_buttons/popup_chip_controls.yaml @@ -0,0 +1,76 @@ +--- +popup_chip_controls: + template: "chips" + variables: + ulm_popup_media_player_entity: "[[[ return variables.ulm_popup_media_player_entity ]]]" + styles: + card: + - background: "none" + - box-shadow: "none" + - border: "1px solid rgba(var(--color-theme),0.5)" + - height: "42px" + - border-radius: "21px" + grid: + - grid-template-areas: "item1 item2 item3" + - justify-content: "space-evenly" + - display: "flex" + - grid-template-columns: "min-content min-content min-content" + custom_fields: + item1: + card: + type: "custom:button-card" + template: "icon_controls" + entity: "[[[ return variables.ulm_popup_media_player_entity ]]]" + icon: "mdi:skip-previous" + tap_action: + action: "call-service" + service: "media_player.media_previous_track" + service_data: + entity_id: "[[[ return variables.ulm_popup_media_player_entity]]]" + styles: + icon: + - color: "rgba(var(--color-theme),0.5)" + item2: + card: + type: "custom:button-card" + template: "icon_controls" + entity: "[[[ return variables.ulm_popup_media_player_entity ]]]" + icon: "mdi:play" + state: + - value: "playing" + icon: "mdi:pause" + tap_action: + action: "call-service" + service: "media_player.media_play_pause" + service_data: + entity_id: "[[[ return variables.ulm_popup_media_player_entity]]]" + item3: + card: + type: "custom:button-card" + template: "icon_controls" + entity: "[[[ return variables.ulm_popup_media_player_entity ]]]" + icon: "mdi:skip-next" + tap_action: + action: "call-service" + service: "media_player.media_next_track" + service_data: + entity_id: "[[[ return variables.ulm_popup_media_player_entity]]]" + styles: + icon: + - color: "rgba(var(--color-theme),0.5)" + +icon_controls: + show_icon: true + show_label: false + show_name: false + show_state: false + styles: + card: + - background: "none" + - box-shadow: "none" + - height: "42px" + grid: + - grid-template-areas: "'i'" + img_cell: + - width: "30px" + size: "80%" diff --git a/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/popup_templates/popup_buttons/popup_chip_volume.yaml b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/popup_templates/popup_buttons/popup_chip_volume.yaml new file mode 100644 index 000000000..c0280a244 --- /dev/null +++ b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/popup_templates/popup_buttons/popup_chip_volume.yaml @@ -0,0 +1,23 @@ +--- +popup_chip_volume: + template: "chips" + show_icon: true + icon: "mdi:volume-high" + label: > + [[[ + let level = entity.attributes.volume_level + return level * 100 + '%' + ]]] + styles: + card: + - background: "none" + - box-shadow: "none" + - border: "1px solid rgba(var(--color-theme),0.25)" + - height: "42px" + - border-radius: "21px" + grid: + - grid-template-areas: "i l" + - justify-content: "space-between" + - display: "flex" + img_cell: + - width: "30px" diff --git a/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/popup_templates/popup_buttons/popup_header.yaml b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/popup_templates/popup_buttons/popup_header.yaml index 03484ba24..04db54a4f 100644 --- a/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/popup_templates/popup_buttons/popup_header.yaml +++ b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/popup_templates/popup_buttons/popup_header.yaml @@ -15,6 +15,8 @@ popup_header: - font-weight: "bold" - font-size: "12px" - filter: "opacity(40%)" + name: + - margin-top: "6px" icon: - color: "var(--color-theme)" label: |- diff --git a/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/popup_templates/popup_layouts/popup_list_items.yaml b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/popup_templates/popup_layouts/popup_list_items.yaml index 840f48f63..42c111946 100644 --- a/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/popup_templates/popup_layouts/popup_list_items.yaml +++ b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/popup_templates/popup_layouts/popup_list_items.yaml @@ -4,3 +4,8 @@ popup_list_items: styles: card: - background: "none" + - border-radius: "none" + grid: + - grid-template-areas: "'item1 item2 item3'" + - justify-content: "space-evenly" + - display: "flex" diff --git a/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/popup_templates/popups/popup_light_brightness.yaml b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/popup_templates/popups/popup_light_brightness.yaml index 0a1abfd11..ff8414935 100644 --- a/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/popup_templates/popups/popup_light_brightness.yaml +++ b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/popup_templates/popups/popup_light_brightness.yaml @@ -37,7 +37,6 @@ popup_light_brightness: } return columns.join(" "); ]]] - - column-gap: "30px" card: - background: "var(--primary-background-color)" - box-shadow: "none" diff --git a/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/popup_templates/popups/popup_media_player_infos.yaml b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/popup_templates/popups/popup_media_player_infos.yaml index 607ec7438..76b3e4e1a 100644 --- a/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/popup_templates/popups/popup_media_player_infos.yaml +++ b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/popup_templates/popups/popup_media_player_infos.yaml @@ -1,15 +1,17 @@ --- popup_media_player_infos: + triggers_update: "all" styles: grid: - - grid-template-areas: "'header header' 'content1 content2' 'footer footer'" - - grid-template-rows: "16vh 56vh 14vh" - - grid-template-columns: "1fr 1fr" - - column-gap: "30px" + - grid-template-areas: "'header' 'content1' 'footer'" + - grid-template-rows: "14vh 56vh 16vh" + - row-gap: "2.5%" card: - background: "var(--primary-background-color)" - box-shadow: "none" - padding: "4%" + - border-radius: "none" + - height: "100vh" custom_fields: header: - align-self: "start" @@ -22,17 +24,18 @@ popup_media_player_infos: - max-width: "400px" - justify-self: "center" content2: - - align-self: "center" + - display: "none" buttons: - display: "none" footer: - align-self: "end" - margin-top: "25px" + - padding-bottom: "4%" extra_styles: | @media (max-width: 800px) { #container { - grid-template-areas: "header" "content1" "buttons" "footer" !important; - grid-template-rows: 16vh 52vh 14vh 14vh !important; + grid-template-areas: "header" "content1" "footer" !important; + grid-template-rows: 14vh 56vh 16vh !important; grid-template-columns: 1fr !important; } #buttons { @@ -52,14 +55,32 @@ popup_media_player_infos: content1: card: type: "custom:button-card" + show_icon: false + show_name: false + show_label: false styles: grid: - - grid-template-areas: "'picture' 'media' 'control'" + - grid-template-areas: "'app' 'picture' 'media' 'control' 'bar'" card: - - background: "none" + - background-blend-mode: "soft-light" + - background: | + [[[ + if(hass.themes.darkMode){ + return states[variables.ulm_popup_media_player_entity].state == 'playing' && states[variables.ulm_popup_media_player_entity].attributes.entity_picture != null + ? ' center / cover url(' + states[variables.ulm_popup_media_player_entity].attributes.entity_picture + '), radial-gradient(circle, #333333 90%, grey 105% ,#333333 110%)' + : '' + }else{ + return states[variables.ulm_popup_media_player_entity].state == 'playing' && states[variables.ulm_popup_media_player_entity].attributes.entity_picture != null + ? ' center / cover url(' + states[variables.ulm_popup_media_player_entity].attributes.entity_picture + '), radial-gradient(circle, white 5%, grey 100% ,white 110%)' + : '' + } + ]]] - box-shadow: "none" - - padding: "4%" + - padding: "1%" custom_fields: + app: + - justify-self: "start" + - align-self: "start" picture: - margin-left: "auto" - margin-right: "auto" @@ -73,7 +94,17 @@ popup_media_player_infos: control: - background: "none" - box-shadow: "none" + bar: + - align-self: "start" + - background: "none" + - box-shadow: "none" + - margin-bottom: "12px" custom_fields: + app: + card: + type: "custom:button-card" + template: "popup_button_app" + entity: "[[[ return variables.ulm_popup_media_player_entity ]]]" picture: card: type: "custom:mini-media-player" @@ -132,6 +163,7 @@ popup_media_player_infos: type: "custom:mini-media-player" entity: "[[[ return variables.ulm_popup_media_player_entity ]]]" hide: + controls: true icon: true name: true info: true @@ -145,43 +177,58 @@ popup_media_player_infos: background: none !important; box-shadow: none !important; width: 50% !important; - margin-left: auto !important; - margin-right: auto !important; + margin-left: 6px !important; + margin-right: 6px !important; } .mmp__bg{ background: none !important; } - buttons: - card: - type: "custom:button-card" - template: "list_2_items" - styles: - card: - - background: "none" - custom_fields: - item1: - card: - type: "custom:button-card" - template: - - "popup_button" - - "popup_button_selected" - - "popup_button_playing" - item2: + bar: card: type: "custom:button-card" - template: - - "popup_button" - - "popup_button_volume" - tap_action: - action: "fire-dom-event" - browser_mod: - command: "popup" - hide_header: true + template: "list_2_items" + variables: + ulm_popup_media_player_entity: "[[[ return variables.ulm_popup_media_player_entity ]]]" + styles: + card: + - background: "none" + - box-shadow: "none" + - padding: "0px" + grid: + - display: "flex" + - justify-content: "center" + custom_fields: + item1: card: type: "custom:button-card" - template: "popup_media_player_volume" + template: "popup_chip_controls" variables: ulm_popup_media_player_entity: "[[[ return variables.ulm_popup_media_player_entity ]]]" + styles: + card: + - background: "none" + - box-shadow: "none" + - padding: "0px" + item2: + card: + type: "custom:button-card" + template: "popup_chip_volume" + entity: "[[[ return variables.ulm_popup_media_player_entity ]]]" + styles: + card: + - background: "none" + - box-shadow: "none" + - padding: "0" + tap_action: + action: "fire-dom-event" + browser_mod: + command: "popup" + hide_header: true + card: + type: "custom:button-card" + template: "popup_media_player_volume" + variables: + ulm_popup_media_player_entity: "[[[ return variables.ulm_popup_media_player_entity ]]]" footer: card: type: "custom:button-card" @@ -196,6 +243,11 @@ popup_media_player_infos: type: "custom:button-card" template: "popup_button_power" entity: "[[[ return variables.ulm_popup_media_player_entity ]]]" + item3: + card: + type: "custom:button-card" + template: "popup_button_source" + entity: "[[[ return variables.ulm_popup_media_player_entity ]]]" content2: card: type: "custom:my-slider" diff --git a/custom_components/ui_lovelace_minimalist/translations/es.json b/custom_components/ui_lovelace_minimalist/translations/es.json new file mode 100644 index 000000000..cc3a1677b --- /dev/null +++ b/custom_components/ui_lovelace_minimalist/translations/es.json @@ -0,0 +1,43 @@ +{ + "title": "UI Lovelace Minimalist", + "config": { + "step": { + "user": { + "title": "Configuración de UI Lovelace Minimalist", + "description": "", + "data": { + "language": "Idioma", + "sidepanel_enabled": "Habilitar la creación de una entrada en el panel lateral.", + "sidepanel_icon": "Icono del panel lateral", + "sidepanel_title": "Título del panel lateral", + "theme": "Tema", + "include_other_cards": "Incluir los recursos de la tarjeta personalizada de la que depende." + } + } + }, + "abort": { + "single_instance_allowed": "Sólo se permite una única configuración de UI Lovelace Minimalist.", + "not_setup": "UI Lovelace Minimalist no está configurado." + } + }, + "options": { + "step": { + "user": { + "title": "Configuración de UI Lovelace Minimalist", + "description": "", + "data": { + "language": "Idioma", + "sidepanel_enabled": "Habilitar la creación de una entrada en el panel lateral.", + "sidepanel_icon": "Icono del panel lateral", + "sidepanel_title": "Título del panel lateral", + "theme": "Tema", + "include_other_cards": "Incluir los recursos de la tarjeta personalizada de la que depende." + } + } + }, + "abort": { + "single_instance_allowed": "Sólo se permite una única configuración de UI Lovelace Minimalist.", + "not_setup": "UI Lovelace Minimalist no está configurado." + } + } +} diff --git a/docs/assets/img/custom_card_nas.png b/docs/assets/img/custom_card_nas.png new file mode 100644 index 000000000..8e5cc3ad4 Binary files /dev/null and b/docs/assets/img/custom_card_nas.png differ diff --git a/docs/assets/img/custom_card_nik_door.png b/docs/assets/img/custom_card_nik_door.png new file mode 100644 index 000000000..8727fec8e Binary files /dev/null and b/docs/assets/img/custom_card_nik_door.png differ diff --git a/docs/assets/img/custom_card_nik_nas_off.png b/docs/assets/img/custom_card_nik_nas_off.png new file mode 100644 index 000000000..7e4399d33 Binary files /dev/null and b/docs/assets/img/custom_card_nik_nas_off.png differ diff --git a/docs/assets/img/custom_card_nik_nas_on.png b/docs/assets/img/custom_card_nik_nas_on.png new file mode 100644 index 000000000..d79d9714c Binary files /dev/null and b/docs/assets/img/custom_card_nik_nas_on.png differ diff --git a/docs/assets/img/screenshot_custom_camera1.png b/docs/assets/img/screenshot_custom_camera1.png new file mode 100644 index 000000000..0d70fd3dc Binary files /dev/null and b/docs/assets/img/screenshot_custom_camera1.png differ diff --git a/docs/assets/img/screenshot_custom_camera2.png b/docs/assets/img/screenshot_custom_camera2.png new file mode 100644 index 000000000..a2c2f1ec2 Binary files /dev/null and b/docs/assets/img/screenshot_custom_camera2.png differ diff --git a/docs/testenv.code-workspace b/docs/testenv.code-workspace new file mode 100644 index 000000000..985f94a15 --- /dev/null +++ b/docs/testenv.code-workspace @@ -0,0 +1,10 @@ +{ + "folders": [ + { + "path": ".." + }, + { + "path": "../../../config" + } + ] +} diff --git a/docs/usage/cards/card_vacuum.md b/docs/usage/cards/card_vacuum.md index 7166b3e33..fec1efdae 100644 --- a/docs/usage/cards/card_vacuum.md +++ b/docs/usage/cards/card_vacuum.md @@ -23,6 +23,8 @@ This is a card to control your Robot-vacuum. It has support for all vacuums whic |`ulm_card_vacuum_label`| | :material-close: | Add a custom label | |`ulm_card_vacuum_room`| | :material-close: | Add a script to clean a specific room | |`ulm_card_vacuum_room_icon`| | :material-close: | Add custom icon to the room script | +|`ulm_card_vacuum_camera`| | :material-close: | Add a camera entity to the card to show the vacuum map | +|`ulm_card_vacuum_camera_toggle`| | :material-close: | Only show the camera entity while cleaning | ## Usage @@ -37,6 +39,8 @@ This is a card to control your Robot-vacuum. It has support for all vacuums whic variables: ulm_card_vacuum_room: "script.clean_kitchen" ulm_card_vacuum_room_icon: "mdi:table-chair" + ulm_card_vacuum_camera: "camera.vacuum_map" + ulm_card_vacuum_camera_toggle: true ``` ??? note "Template Code" diff --git a/docs/usage/cards/card_welcome_scenes.md b/docs/usage/cards/card_welcome_scenes.md index 8f7c6082f..d44f4eb17 100644 --- a/docs/usage/cards/card_welcome_scenes.md +++ b/docs/usage/cards/card_welcome_scenes.md @@ -17,16 +17,29 @@ This is a card which shows the basic needs for your dashboard. This card can gen |----------|---------|------------------|-------------------| | ulm_card_welcome_scenes_collapse | | :material-close: | Enables the collapse function.
requires an `input_boolean` to track the state| | ulm_weather | | :material-check: | This is your weather provider.
Example: `weather.your_provider`| -| ulm_language | Language of your system | :material-close: | You can set a different format with the [BCP-47 language tags](https://www.techonthenet.com/js/language_tags.php)
Example: -`"en-US"` or just `"en"`| -| entity_ | | :material-check: | Support almost all types of entities
Scenes do always show as off | -| icon_ | | :material-close: | The icon to show | -| name_ | | :material-close: | The name to show| -| color_ | Random | :material-close: | Color of the icon
Can choose between: `blue`, `red`, `green`, `yellow`, `pink`, `purple`
If not specified, it will take a random color | +| ulm_language | Language of your system | :material-close: | You can set a different format with the [BCP-47 language tags](https://www.techonthenet.com/js/language_tags.php)
Example: `"en-US"` or just `"en"`| +| entity_1 | auto-entities | :material-close: | Can be any common type of entity
if no entity is specified defaults to auto-entities | +| entity_2 | auto-entities | :material-close: | Can be any common type of entity
if no entity is specified defaults to auto-entities| +| entity_3 | auto-entities | :material-close: | Can be any common type of entity
if no entity is specified defaults to auto-entities| +| entity_4 | auto-entities | :material-close: | Can be any common type of entity
if no entity is specified defaults to auto-entities| +| entity_5 | auto-entities | :material-close: | Can be any common type of entity
if no entity is specified defaults to auto-entities| +| entity_6 | none | :material-close: | Can be any common type of entity | +| entity_7 | none | :material-close: | Can be any common type of entity | -## Collapse +## Entity Variables -!!! note +| Variable | Default | Required | Notes | +|----------|---------|------------------|-------------------| +| _entity_id | | :material-close: | Support almost all types of entities
Scenes do always show as off | +| _icon | | :material-close: | The icon to show | +| _name | | :material-close: | The name to show| +| _color | Random | :material-close: | Color of the icon
Can choose between: `blue`, `red`, `green`, `yellow`, `pink`, `purple`
If not specified, it will take a random color | +| _state | `on` or `playing` | :material-close: | Define `input_select` state or give manual state for pill to be full | +| _nav_path | | :material-close: | Navigate to another view
*Overrides other types of actions* + +## Requirement Collapse Function + +!!! note "" This feature is fully optional. It requires some more manual configuration! You need to create a `input_boolean` in HA to track the state. See [Docs](https://www.home-assistant.io/integrations/input_boolean/). Furthermore, you need to add the `input_boolean` to the variable `ulm_card_welcome_scenes_collapse` **and** to either the `entity` or `triggers_update` to make sure it directly refreshes the state. @@ -35,6 +48,10 @@ Furthermore, you need to add the `input_boolean` to the variable `ulm_card_welco ## Usage +!!! note "" + You can set 1 to 7 entities to show 1 to 7 pills dynamically
+ If set none it uses `auto-entities` with max 5 pills + ```yaml - type: "custom:button-card" template: "card_welcome_scenes" @@ -68,6 +85,16 @@ Furthermore, you need to add the `input_boolean` to the variable `ulm_card_welco icon: "mdi:YOUR_ICON" #OPTIONAL name: "YOUR_NAME" #OPTIONAL color: "yellow" + entity_6: + entity_id: "
+
+
+## Usage
+
+```yaml
+- type: "custom:button-card"
+ entity: "camera.sensor"
+ template: "custom_card_camera"
+ show_icon: false #True if you set ulm_custom_card_camera_title: true
+ variables:
+ ulm_custom_card_camera_title: true
+ ulm_custom_card_camera_name: "name"
+ ulm_custom_card_camera_label: "label"
+```
+
+## Variables
+
+1.0.0
+Initial release. +| Variable | +Example | +Required | +Default | +Explanation | +
|---|---|---|---|---|
| ulm_custom_card_camera_title | +true | +yes | ++ | If you want header card | +
| ulm_custom_card_camera_name | +"Garden" | +no | ++ | Name of your choice | +
| ulm_custom_card_camera_label | +"Room" | +no | ++ | Label of your choice | +
+
@@ -33,6 +35,7 @@ Version: 0.0.1
name: "Door Lock"
variables:
ulm_custom_card_eraycetinay_lock_tap_control: true
+ ulm_custom_card_eraycetinay_lock_open: true
```
## Variables
@@ -50,6 +53,12 @@ Version: 0.0.1
0.0.2
+ Added option to only use lock.open0.0.1
Initial releaseBraking changes
-
+The text to show on your card
-ulm_custom_cad_nas_unit
+ulm_custom_card_nas_unit
%
yes
The unit to show after your sensors state
@@ -69,19 +75,55 @@ n/a
## Template code
```yaml
+---
custom_card_nas:
- tap_action:
- action: more-info
template:
- - blue
+ - "blue_no_state"
+ tap_action:
+ action: "more-info"
+ entity: "[[[ return variables.ulm_custom_card_nas_sensor; ]]]"
+ show_icon: true
show_label: true
+ show_name: true
+ icon: |-
+ [[[
+ return "mdi:nas";
+ ]]]
label: |-
- [[[
- if (entity.state == 'on'){
- var state = variables.ulm_custom_card_nas_text + states[variables.ulm_custom_card_nas_sensor].state + variables.ulm_custom_card_nas_unit;
- } else {
- var state = "Off";
- }
- return state;
- ]]]
+ [[[
+ return variables.ulm_custom_card_nas_text + " " + states[variables.ulm_custom_card_nas_sensor].state + variables.ulm_custom_card_nas_unit;
+ ]]]
+ name: |-
+ [[[
+ return "Nas";
+ ]]]
+ size: "20px"
+ styles:
+ label:
+ - justify-self: "start"
+ - align-self: "start"
+ - font-weight: "bolder"
+ - font-size: "12px"
+ - filter: "opacity(40%)"
+ - margin-left: "12px"
+ name:
+ - align-self: "end"
+ - justify-self: "start"
+ - font-weight: "bold"
+ - font-size: "14px"
+ - margin-left: "12px"
+ - filter: "opacity(100%)"
+ img_cell:
+ - border-radius: "50%"
+ - place-self: "center"
+ - width: "42px"
+ - height: "42px"
+ grid:
+ - grid-template-areas: "'i n' 'i l'"
+ - grid-template-columns: "min-content auto"
+ - grid-template-rows: "min-content min-content"
+ card:
+ - border-radius: "20px"
+ - box-shadow: "var(--box-shadow)"
+ - padding: "12px"
```
diff --git a/docs/usage/custom_cards/custom_card_nik_door.md b/docs/usage/custom_cards/custom_card_nik_door.md
new file mode 100644
index 000000000..8b58c2395
--- /dev/null
+++ b/docs/usage/custom_cards/custom_card_nik_door.md
@@ -0,0 +1,178 @@
+---
+title: Minimal Door Lock Card
+hide:
+ - toc
+---
+
+
+# Custom-card "Minimal Door Lock"
+
+This is a `custom-card` that shows the currenct state of your Lock and allows you to open and close it showing the state with a Minimal Design.
+
+
+
+## Credits
+
+Author: Nik - 2022 Version: 1.0.0
+
+## Changelog
+
+
+
+
+
+## Template Code
+
+```yaml
+---
+custom_card_nik_door:
+ template:
+ - "ulm_language_variables"
+ variables:
+ ulm_custom_card_entity_1_name: "[[[ return variables.ulm_custom_card_entity_1_name]]]"
+ ulm_custom_card_entity_1_lock: "[[[ return variables.ulm_custom_card_entity_1_lock]]]"
+ show_icon: false
+ show_name: false
+ show_label: false
+ styles:
+ grid:
+ - grid-template-areas: >
+ [[[
+ var areas = [];
+ areas.push("item1 item1");
+ areas.push("item2 item2");
+ return "\"" + areas.join("\" \"") + "\"";
+ ]]]
+ - grid-template-columns: "1fr 1fr"
+ - grid-template-rows: "min-content" "min-content"
+ - row-gap: "12px"
+ card:
+ - border-radius: "var(--border-radius)"
+ - box-shadow: "var(--box-shadow)"
+ - padding: "12px"
+
+ custom_fields:
+ item1:
+ card:
+ type: "custom:button-card"
+ template:
+ - "icon_more_info"
+ custom_fields:
+ item1:
+ card:
+ type: "custom:button-card"
+ entity: "[[[ return entity.entity_id]]]"
+ icon: "mdi:door"
+ styles:
+ icon:
+ - color: "rgba(var(--color-blue),1)"
+ img_cell:
+ - background-color: "rgba(var(--color-blue),0.2)"
+ tap_action:
+ action: "none"
+ item2:
+ card:
+ type: "custom:button-card"
+ entity: "[[[ return entity.entity_id]]]"
+ name: "[[[ return variables.ulm_custom_card_entity_1_name]]]"
+ label: >
+ [[[
+ return entity.state
+ ]]]
+ item2:
+ card:
+ type: "custom:button-card"
+ template: "list_2_items"
+ custom_fields:
+ item1:
+ card:
+ type: "custom:button-card"
+ template: "widget_icon"
+ icon: "mdi:lock-open-variant"
+ entity: "[[[ return entity.entity_id]]]"
+ tap_action:
+ action: "call-service"
+ service: "lock.open"
+ service_data:
+ entity_id: "[[[ return variables.ulm_custom_card_entity_1_lock]]]"
+ state:
+ - value: "Open"
+ styles:
+ icon:
+ - color: "rgba(var(--color-red),1)"
+ img_cell:
+ - background-color: "rgba(var(--color-red),0.2)"
+ - value: "Closed & Unlocked"
+ styles:
+ icon:
+ - color: "rgba(var(--color-yellow),1)"
+ img_cell:
+ - background-color: "rgba(var(--color-yellow),0.2)"
+ item2:
+ card:
+ type: "custom:button-card"
+ template: "widget_icon"
+ icon: "mdi:lock"
+ entity: "[[[ return entity.entity_id]]]"
+ tap_action:
+ action: "call-service"
+ service: "lock.lock"
+ service_data:
+ entity_id: "[[[ return variables.ulm_custom_card_entity_1_lock]]]"
+ state:
+ - value: "Closed & Locked"
+ styles:
+ icon:
+ - color: "rgba(var(--color-green),1)"
+ img_cell:
+ - background-color: "rgba(var(--color-green),0.2)"
+```
diff --git a/docs/usage/custom_cards/custom_card_nik_nas.md b/docs/usage/custom_cards/custom_card_nik_nas.md
new file mode 100644
index 000000000..eaf2df0dd
--- /dev/null
+++ b/docs/usage/custom_cards/custom_card_nik_nas.md
@@ -0,0 +1,409 @@
+---
+title: Nas Summary Card
+hide:
+ - toc
+---
+
+
+# Custom-card "Nas Summary Card"
+
+This is a `custom-card` that shows you a summary for your NAS with sensors, Wake on Lan and collapsed info. Once the NAS is off or unavailable it collapses the info.
+
+
+
+
+## Credits
+
+Author: Nik - 2022
+Version: 1.0.0
+
+## Changelog
+
+
+
+
+
+## Template Code
+
+```yaml
+---
+custom_card_nik_nas:
+ variables:
+ entity_1:
+ entity_id:
+ icon: "[[[ return entity.attributes.icon ]]]"
+ name: "[[[ return entity.attributes.friendly_name ]]]"
+ color: >
+ [[[
+ var colors = ["yellow", "blue", "red", "green"];
+ var color = colors[Math.floor(Math.random() * colors.length)];
+ return color;
+ ]]]
+ entity_2:
+ entity_id:
+ icon: "[[[ return entity.attributes.icon ]]]"
+ name: "[[[ return entity.attributes.friendly_name ]]]"
+ color: >
+ [[[
+ var colors = ["yellow", "blue", "red", "green"];
+ var color = colors[Math.floor(Math.random() * colors.length)];
+ return color;
+ ]]]
+ entity_3:
+ entity_id:
+ icon: "[[[ return entity.attributes.icon ]]]"
+ name: "[[[ return entity.attributes.friendly_name ]]]"
+ color: >
+ [[[
+ var colors = ["yellow", "blue", "red","green"];
+ var color = colors[Math.floor(Math.random() * colors.length)];
+ return color;
+ ]]]
+ entity_4:
+ entity_id:
+ icon: "[[[ return entity.attributes.icon ]]]"
+ name: "[[[ return entity.attributes.friendly_name ]]]"
+ color: >
+ [[[
+ var colors = ["yellow", "blue", "red","green"];
+ var color = colors[Math.floor(Math.random() * colors.length)];
+ return color;
+ ]]]
+ show_name: false
+ show_state: false
+ show_label: false
+ show_icon: false
+ show_last_changed: false
+ show_entity_picture: false
+ styles:
+ grid:
+ - grid-template-areas: >
+ [[[
+ var areas = [];
+ if (entity.state == "off" || entity.state == "unavailable") {
+ areas.push("item5");
+ return "\"" + areas.join("\" \"") + "\"";
+ } else {
+ areas.push("item4 item4");
+ areas.push("item1 radial");
+ areas.push("item2 radial");
+ areas.push("item3 radial");
+ return "\"" + areas.join("\" \"") + "\"";
+ }
+ ]]]
+ - grid-template-columns: >
+ [[[
+ if (entity.state == "off" || entity.state == "unavailable") {
+ return "1fr";
+ } else {
+ return "35% 65%";
+ }
+ ]]]
+ - grid-template-rows: >
+ [[[
+ if (entity.state == "off" || entity.state == "unavailable") {
+ return "min-content";
+ } else {
+ return "1fr";
+ }
+ ]]]
+ card:
+ - border-radius: "var(--border-radius)"
+ - box-shadow: "var(--box-shadow)"
+ - padding: "12px"
+ custom_fields:
+ item1:
+ - display: >
+ [[[
+ if (entity.state == "off" || entity.state == "unavailable") {
+ return "none";
+ } else {
+ return "block";
+ }
+ ]]]
+ item2:
+ - display: >
+ [[[
+ if (entity.state == "off" || entity.state == "unavailable") {
+ return "none";
+ } else {
+ return "block";
+ }
+ ]]]
+ item3:
+ - display: >
+ [[[
+ if (entity.state == "off" || entity.state == "unavailable") {
+ return "none";
+ } else {
+ return "block";
+ }
+ ]]]
+ item4:
+ - display: >
+ [[[
+ if (entity.state == "off" || entity.state == "unavailable") {
+ return "none";
+ } else {
+ return "block";
+ }
+ ]]]
+ item5:
+ - display: >
+ [[[
+ if (entity.state == "off" || entity.state == "unavailable") {
+ return "block";
+ } else {
+ return "none";
+ }
+ ]]]
+ radial:
+ - display: >
+ [[[
+ if (entity.state == "off" || entity.state == "unavailable") {
+ return "none";
+ } else {
+ return "block";
+ }
+ ]]]
+ custom_fields:
+ item1:
+ card:
+ type: "custom:button-card"
+ entity: "[[[ return variables.entity_1.entity_id ]]]"
+ icon: "[[[ return variables.entity_1.icon ]]]"
+ name: "[[[ return variables.entity_1.name ]]]"
+ template: "card_generic_swap"
+ styles:
+ icon:
+ - color: "[[[ return `rgba(var(--color-${variables.entity_1.color}), 1)`;]]]"
+ img_cell:
+ - background-color: "[[[ return `rgba(var(--color-${variables.entity_1.color}), 0.20)`;]]]"
+ card:
+ - box-shadow: "none"
+ - border-radius: "none"
+ - padding-top: "1px"
+ - padding-bottom: "1px"
+ item2:
+ card:
+ type: "custom:button-card"
+ entity: "[[[ return variables.entity_2.entity_id ]]]"
+ icon: "[[[ return variables.entity_2.icon ]]]"
+ name: "[[[ return variables.entity_2.name ]]]"
+ template: "card_generic_swap"
+ styles:
+ icon:
+ - color: "[[[ return `rgba(var(--color-${variables.entity_2.color}), 1)`;]]]"
+ img_cell:
+ - background-color: "[[[ return `rgba(var(--color-${variables.entity_2.color}), 0.20)`;]]]"
+ card:
+ - box-shadow: "none"
+ - border-radius: "none"
+ - padding-top: "1px"
+ - padding-bottom: "1px"
+ item3:
+ card:
+ type: "custom:button-card"
+ entity: "[[[ return variables.entity_3.entity_id ]]]"
+ icon: "[[[ return variables.entity_3.icon ]]]"
+ name: "[[[ return variables.entity_3.name ]]]"
+ template: "card_generic_swap"
+ styles:
+ icon:
+ - color: "[[[ return `rgba(var(--color-${variables.entity_3.color}), 1)`;]]]"
+ img_cell:
+ - background-color: "[[[ return `rgba(var(--color-${variables.entity_3.color}), 0.20)`;]]]"
+ card:
+ - box-shadow: "none"
+ - border-radius: "none"
+ - padding-top: "1px"
+ - padding-bottom: "1px"
+ item4:
+ card:
+ type: "horizontal-stack"
+ cards:
+ - type: "custom:button-card"
+ template: "card_input_boolean"
+ entity: "[[[ return entity.entity_id]]]"
+ icon: "mdi:nas"
+ name: "Status"
+ styles:
+ card:
+ - background-color: "transparent"
+ - box-shadow: "none"
+ - border: "2px solid var(--google-grey)"
+ tap_action:
+ action: "more-info"
+
+ - type: "custom:button-card"
+ template: "card_generic_swap"
+ entity: "[[[ return variables.entity_4.entity_id ]]]"
+ icon: "[[[ return variables.entity_4.icon ]]]"
+ name: "[[[ return variables.entity_4.name ]]]"
+ styles:
+ card:
+ - background-color: "transparent"
+ - box-shadow: "none"
+ - border: "2px solid var(--google-grey)"
+ icon:
+ - color: "[[[ return `rgba(var(--color-${variables.entity_4.color}), 1)`;]]]"
+ img_cell:
+ - background-color: "[[[ return `rgba(var(--color-${variables.entity_4.color}), 0.20)`;]]]"
+ tap_action:
+ action: "none"
+ item5:
+ card:
+ type: "custom:button-card"
+ template: "card_input_boolean"
+ entity: "[[[ return entity.entity_id]]]"
+ icon: "mdi:nas"
+ name: "Status"
+ styles:
+ card:
+ - background-color: "transparent"
+ - box-shadow: "none"
+ - border: "2px solid var(--google-grey)"
+ tap_action:
+ action: "more-info"
+ radial:
+ card:
+ type: "custom:apexcharts-card"
+ graph_span: "[[[ return variables.graph_span ]]]"
+ chart_type: "[[[ return variables.chart_type ]]]"
+ style: |
+ ha-card {
+ border-radius: "var(--border-radius)";
+ box-shadow: none;
+ padding-left: 10px;
+ padding-bottom: 0px;
+ }
+ header:
+ show: false
+ apex_config:
+ title:
+ floating: false
+ align: "top"
+ style:
+ fontSize: "2px"
+ fontWeight: "bold"
+ chart:
+ foreColor: "rgb(148,148,148)"
+ offsetY: 5
+ legend:
+ show: false
+ series:
+ - entity: "[[[ return variables.entity_1.entity_id ]]]"
+ name: "[[[ return variables.entity_1_name ]]]"
+ color: "[[[ return `var(--google-${variables.entity_1.color})`;]]]"
+ max: "[[[ return variables.entity_1.max_value ]]]"
+ - entity: "[[[ return variables.entity_2.entity_id ]]]"
+ name: "[[[ return variables.entity_2_name ]]]"
+ color: "[[[ return `var(--google-${variables.entity_2.color})`;]]]"
+ max: "[[[ return variables.entity_2.max_value ]]]"
+ - entity: "[[[ return variables.entity_3.entity_id ]]]"
+ name: "[[[ return variables.entity_3_name ]]]"
+ color: "[[[ return `var(--google-${variables.entity_3.color})`;]]]"
+ max: "[[[ return variables.entity_3.max_value ]]]"
+```
1.0.1
+1.1.0
```yaml #OLD @@ -44,6 +44,10 @@ Version: 1.0.1 ## Changelog +
+
1.1.0
+Adds ability to work with counter entities. Compatibility with input number entities is not affected. +1.0.1
Added option to leave ulm_card_input_number_name empty (takes the friendly_name of the entity) diff --git a/docs/usage/custom_cards/custom_card_nas.md b/docs/usage/custom_cards/custom_card_nas.md index 25bc874aa..7ae6a88c3 100644 --- a/docs/usage/custom_cards/custom_card_nas.md +++ b/docs/usage/custom_cards/custom_card_nas.md @@ -9,6 +9,8 @@ hide: The `card-nas` shows you a specific sensor value from your NAS, eg. the disk space used. + + ## Credits Author: tben - 2021 @@ -20,6 +22,10 @@ Version: 1.0.01.0.0
Initial release
+
## Usage
@@ -59,7 +65,7 @@ n/a
1.0.1
+Fix card & add Screenshot +
+
+
+## Requirements
+
+To have the Minimalist cards and custom cards installed
+
+## Usage
+
+```yaml
+- type: 'custom:button-card'
+ template: custom_card_nik_door
+ entity: sensor.nuki_blindato_door_security_state
+ variables:
+ ulm_custom_card_entity_1_name: Blindato
+ ulm_custom_card_entity_1_lock: lock.nuki_blindato_lock
+```
+
+## Variables
+
+1.0.0
+Initial release +| Variable | +Example | +Required | +Explanation | +
|---|---|---|---|
| ulm_custom_card_entity_1_name | +sensor.nuki_blindato_door_security_state | +Yes | +Your Door Name | +
| ulm_custom_card_entity_1_lock | +lock.nuki_blindato_lock | +Yes | +Your Door Lock entity | +
| entity | +sensor.nuki_blindato_door_security_state | +Yes | +Your door sensor to track "Open" and "Close" state. | +
+
+
+## Requirements
+
+To have the Minimalist cards and custom cards installed
+
+## Usage
+
+```yaml
+- type: "custom:button-card"
+ template: "custom_card_nik_nas"
+ entity: switch.qnap_wol
+ variables:
+ graph_span: "1d"
+ chart_type: "radialBar"
+ entity_1:
+ entity_id: "sensor.nas_cpu_temperature"
+ icon: ''
+ name: "Temp"
+ color: "yellow"
+ max_value: 100
+ entity_2:
+ entity_id: "sensor.nas_memory_usage"
+ icon: ''
+ name: "Memory"
+ color: "blue"
+ max_value: 100
+ entity_3:
+ entity_id: "sensor.nas_cpu_usage"
+ icon: ''
+ name: "CPU"
+ color: "green"
+ max_value: 100
+ entity_4:
+ entity_id: "sensor.disk_use_percent"
+ icon: "mdi:harddisk"
+ name: "Disk"
+ color: "red"
+```
+
+## Variables
+
+1.0.0
+Initial release +| Variable | +Example | +Required | +Explanation | +
|---|---|---|---|
| entity | +switch.qnap_wol | +yes | +The Switch to turn On or Off the NAS | +
| chart_type | +line, scatter, pie, donut or radialBar | +yes | +The chart type you want to display | +
| graph_span | +1h, 12min, 1d, 1h25, 10sec, ... | +yes | +The span of the graph as a time interval | +
| entity_id | +sensor.disk_use_percent | +yes | +Entity sensor of choice. 4 entities must be added | +
| icon | +mdi:cpu-64-bit | +no | +mdi icon you want to be exposed in the img_cell, '' will return entity.attributes.icon | +
| name | +name for the used sensor | +no | +'' will return entity.attributes.friendly_name | +
| color | +green, blue, yellow, red or grey | +no | +if you don't use the color variable it will choice a random color | +
| max_value | +10, 300, ... | +no | +Maximum value of the sensor. Default will be 100 | +