diff --git a/custom_cards/custom_card_alarm_time/README.md b/custom_cards/custom_card_alarm_time/README.md
new file mode 100644
index 000000000..cdb8cb311
--- /dev/null
+++ b/custom_cards/custom_card_alarm_time/README.md
@@ -0,0 +1,112 @@
+---
+title: Alarm Time Custom-card
+---
+
+
+
+# Custom-card "Alarm Time Card"
+
+The `card_alarm_time` you can control a input_datetime entity and a boolean.
+This card is useful for setting alarms (e.g. wakeup alarm), as you can modify the time and toggle the state of the alarm from one card.
+
+## Credits
+
+Author: benbur - 2023
+Version: 1.0.0
+
+This is built largely on top of the original Input_Datetime Card:
+Author: sildehoop - 2022
+Version: 1.0.0
+
+## Changelog
+
+
+
+
+## Requirements
+
+None
+
+## Usage
+
+```yaml
+type: "custom:button-card"
+template: custom_card_iAbadia_battery_chip
+variables:
+ ulm_custom_card_iAbadia_battery_chip_entity: sensor.living_room_sensor_battery
+ ulm_custom_card_iAbadia_battery_chip_icon: mdi:thermostat
+ ulm_custom_card_iAbadia_battery_chip_warning: 30
+ ulm_custom_card_iAbadia_battery_chip_danger: 10
+```
+
+## Variables
+
+| Variable | Example | Required | Explanation |
+| ---------------------------------------------- | -------------------- | -------- | ----------------------------------------------------- |
+| ulm_custom_card_iAbadia_battery_chip_entity | `sensor.temperature` | ✓ | Battery entity |
+| ulm_custom_card_iAbadia_battery_chip_icon | `mdi:thermometer` | ✘ | Icon to be displayed. Will default to mdi:battery |
+| ulm_custom_card_iAbadia_battery_chip_warning | `20` | ✘ | Battery level below which to color as warning (yellow) |
+| ulm_custom_card_iAbadia_battery_chip_danger | `10` | ✘ | Battery level below which to color as danger (red) |
+
+## Template Code
+
+??? note "Template Code"
+
+ ```yaml title="custom_card_irmajavi_speedtest.yaml"
+ --8<-- "custom_cards/custom_card_iAbadia_battery_chip/custom_card_iAbadia_battery_chip.yaml"
+ ```
diff --git a/custom_cards/custom_card_iAbadia_battery_chip/custom_card_iAbadia_battery_chip.yaml b/custom_cards/custom_card_iAbadia_battery_chip/custom_card_iAbadia_battery_chip.yaml
new file mode 100644
index 000000000..2f9dca3f7
--- /dev/null
+++ b/custom_cards/custom_card_iAbadia_battery_chip/custom_card_iAbadia_battery_chip.yaml
@@ -0,0 +1,38 @@
+---
+custom_card_iAbadia_battery_chip:
+ template:
+ - "chips"
+ variables:
+ ulm_custom_card_iAbadia_battery_chip_entity: ""
+ ulm_custom_card_iAbadia_battery_chip_icon: ""
+ ulm_custom_card_iAbadia_battery_chip_danger: "10"
+ ulm_custom_card_iAbadia_battery_chip_warning: "20"
+ show_icon: true
+ triggers_update: "all"
+ icon: >
+ [[[
+ if (variables.ulm_custom_card_iAbadia_battery_chip_icon){
+ return variables.ulm_custom_card_iAbadia_battery_chip_icon;
+ } else {
+ return "mdi:battery"
+ }
+ ]]]
+ entity: "[[[ return variables.ulm_custom_card_iAbadia_battery_chip_entity; ]]]"
+ tap_action:
+ action: "more-info"
+ entity: "[[[ return variables.ulm_custom_card_iAbadia_battery_chip_entity; ]]]"
+ styles:
+ icon:
+ - color: >
+ [[[
+ let battery_level = Math.round((states[variables.ulm_custom_card_iAbadia_battery_chip_entity].state)/1);
+ if (battery_level > variables.ulm_custom_card_iAbadia_battery_chip_warning) {
+ return "var(--google-green)"
+ } else if (battery_level <= variables.ulm_custom_card_iAbadia_battery_chip_warning && battery_level > variables.ulm_custom_card_iAbadia_battery_chip_danger) {
+ return "var(--google-yellow)"
+ } else {
+ return "var(--google-red)"
+ }
+ ]]]
+ grid:
+ - grid-template-areas: "'i'"
diff --git a/custom_cards/custom_card_imswel_medias/README.md b/custom_cards/custom_card_imswel_medias/README.md
new file mode 100644
index 000000000..6e137338b
--- /dev/null
+++ b/custom_cards/custom_card_imswel_medias/README.md
@@ -0,0 +1,81 @@
+---
+title: Custom Card Media
+hide:
+ - toc
+---
+
+
+
+# Custom Card "Media"
+
+These are some `custom-card` for your plex, radarr and sonarr media libraries.
+
+
+1.0.0
+Initial release ++ + +## Credits + +- Author: imswel - 2023 +- Version: 1.0.0 + +## Changelog + +
+
+
+## Requirements
+
+This card needs the following to function correctly:
+| Component | Required |
+| ----------------------------------------------------------------------------------------- | ---------------------------------- |
+|[Plex Recently Added](https://github.com/NemesisRE/sensor.plex_recently_added) | Yes for **`Media Library Card`** |
+|[Radarr Upcoming Media](https://github.com/custom-components/sensor.radarr_upcoming_media) | Yes for **`Media Upcoming Card`** |
+|[Sonarr Upcoming Media](https://github.com/custom-components/sensor.sonarr_upcoming_media) | Yes for **`Media Upcoming Card`** |
+
+## Usage
+
+**Media Library Card** for [Plex Recently Added](https://github.com/NemesisRE/sensor.plex_recently_added) :
+
+1.0.0
+Initial release ++| Variable | Default | Required | Notes | +| ----------------------------- | ------- | -------- | ----------------------------------------------------------------------- | +| ulm_custom_card_imswel_medias_index | 1 | Yes | The index of the item in your **Plex library** to show. | + +```yaml +- type: custom:button-card + template: "custom_card_imswel_medias_library" + entity: sensor.plex_recently_added + variables: + ulm_custom_card_imswel_medias_index: 1 +``` + +
+ +**Media Upcoming Card** for [Radarr Upcoming Media](https://github.com/custom-components/sensor.radarr_upcoming_media) & [Sonarr Upcoming Media](https://github.com/custom-components/sensor.sonarr_upcoming_media) : + + +
+| Variable | Default | Required | Notes | +| ----------------------------- | ------- | -------- | -------------------------------------------------------------------------------------------------------- | +| ulm_custom_card_imswel_medias_index | 1 | Yes | The index of the item in your **Radarr/Sonarr library** to show. | +| ulm_custom_card_imswel_medias_platform| radarr | Yes | The platform to choose depending on the selected entity.
Can be: **`radarr`** or **`sonarr`**.
| + +```yaml +- type: custom:button-card + template: "custom_card_imswel_medias_upcoming" + entity: sensor.sonarr_upcoming_media + variables: + ulm_custom_card_imswel_medias_index: 1 + ulm_custom_card_imswel_medias_platform: "sonarr" +``` + +## Template code + +??? note "Template Code" + + ```yaml title="custom_card_imswel_medias.yaml" + --8<-- "custom_cards/custom_card_imswel_medias/custom_card_imswel_medias.yaml" + ``` diff --git a/custom_cards/custom_card_imswel_medias/custom_card_imswel_medias.yaml b/custom_cards/custom_card_imswel_medias/custom_card_imswel_medias.yaml new file mode 100644 index 000000000..2dc14d022 --- /dev/null +++ b/custom_cards/custom_card_imswel_medias/custom_card_imswel_medias.yaml @@ -0,0 +1,223 @@ +--- +custom_card_imswel_medias: + show_icon: false + show_label: true + show_name: true + show_state: false + styles: + label: + - z-index: 2 + - color: "white" + - font-weight: "bold" + - font-size: "12px" + - filter: "opacity(60%)" + name: + - z-index: 2 + - color: "white" + - font-weight: "bold" + - font-size: "14px" + card: + - z-index: 0 + - border-radius: "var(--border-radius)" + - box-shadow: "var(--box-shadow)" + - background-size: "cover" + - background-position: "center center" + - text-shadow: > + [[[ + return entity == "undefined" ? "none" : "1px 1px 5px rgba(18, 22, 23, 0.9)"; + ]]] + +custom_card_imswel_medias_library: + template: + - "custom_card_imswel_medias" + - "ulm_translation_engine" + - "custom_card_imswel_medias_language_variables" + variables: + ulm_custom_card_imswel_medias_index: 1 + triggers_update: "[[[ return entity.entity_id; ]]]" + aspect_ratio: "5/2" + label: > + [[[ + if (entity.state == "unavailable" || entity.state == "undefined"){ + return variables.ulm_translation_unavailable; + } else{ + var data = entity.attributes.data; + if (data[variables.ulm_custom_card_imswel_medias_index].number == undefined){ + var number = '(' + data[variables.ulm_custom_card_imswel_medias_index].aired.split('-')[0] + ')'; + } else{ + var number = data[variables.ulm_custom_card_imswel_medias_index].number; + } + return `${data[variables.ulm_custom_card_imswel_medias_index].title} ${number}`; + } + ]]] + name: "[[[ return variables.ulm_custom_card_imswel_recentlyadded ]]]" + styles: + label: + - align-self: "start" + - justify-self: "start" + - margin-left: "12px" + name: + - align-self: "end" + - justify-self: "start" + - margin-left: "12px" + grid: + - grid-template-areas: "'icon .' 'n n' 'l l' '. .'" + - grid-template-rows: "auto repeat(2, min-content) 12px" + card: + - padding: "0px" + - background-image: > + [[[ + return entity === undefined || `url(${states[entity.entity_id].attributes.data[variables.ulm_custom_card_imswel_medias_index].fanart})`; + ]]] + - border: "none" + custom_fields: + icon: + - z-index: 2 + - align-self: "start" + - justify-self: "start" + - height: "24px" + - width: "24px" + - margin-left: "12px" + - margin-top: "12px" + blur: + - z-index: 1 + - position: "absolute" + - top: 0 + - left: 0 + - height: "100%" + - width: "100%" + - border-radius: "var(--border-radius)" + - background: "linear-gradient(rgba(0,0,0,0) 40%, rgba(0,0,0,0.8) 100%)" + custom_fields: + icon: > + + blur: > + [[[ return entity === undefined ? null : ""; ]]] + +custom_card_imswel_medias_upcoming: + template: + - "custom_card_imswel_medias" + - "ulm_translation_engine" + - "custom_card_imswel_medias_language_variables" + variables: + ulm_custom_card_imswel_medias_index: 1 + ulm_custom_card_imswel_medias_platform: > + [[[ + if (entity.entity_id.includes("sonarr")){ + return "sonarr"; + } else if(entity.entity_id.includes("plex")){ + return "plex"; + } else{ + return "radarr"; + } + ]]] + triggers_update: "all" + aspect_ratio: "3/4" + label: > + [[[ + var data = entity.attributes?.data; + var platform = variables.ulm_custom_card_imswel_medias_platform; + var airdate = new Date(data[variables.ulm_custom_card_imswel_medias_index].airdate); + + Date.prototype.addDays = function (days) { + const date = new Date(this.valueOf()); + date.setDate(date.getDate() + days); + return date; + } + + function formatRelease(release){ + if(release.includes("Available")){ + return "" + } else if (release.includes("In Theaters")){ + return variables.ulm_custom_card_imswel_in_theaters; + } + } + + function formatDate(date){ + var weekday = variables.ulm_custom_card_imswel_weekday; + var now = new Date(); + var tomorrow = now.addDays(1); + + var time = date - now; + var secs = parseInt((time / 1000), 10); + var days = Math.floor(secs / (3600*24)); + + if (days < 6){ + if (weekday[date.getDay()] == weekday[now.getDay()]){ + return variables.ulm_custom_card_imswel_today; + } else if (weekday[date.getDay()] == weekday[tomorrow.getDay()]){ + return variables.ulm_custom_card_imswel_tommorow; + } else{ + return weekday[date.getDay()]; + } + } else{ + return date.toLocaleDateString(variables.ulm_custom_card_imswel_locale); + } + } + + if(platform == "radarr"){ + var release = data[variables.ulm_custom_card_imswel_medias_index].release; + return formatDate(airdate) + " " + formatRelease(release); + } else if(platform == "sonarr"){ + return formatDate(airdate); + } + ]]] + name: > + [[[ + if (entity.state == "unavailable" || entity.state == "undefined"){ + return variables.ulm_translation_unavailable; + } else{ + var data = entity.attributes?.data; + var platform = variables.ulm_custom_card_imswel_medias_platform; + + if(platform == "radarr"){ + return `${data[variables.ulm_custom_card_imswel_medias_index].title}`; + } else if(platform =="sonarr"){ + var number = data[variables.ulm_custom_card_imswel_medias_index].number; + return `${data[variables.ulm_custom_card_imswel_medias_index].title} - ${number}`; + } + } + ]]] + styles: + icon: + label: + - align-self: "start" + - justify-self: "center" + name: + - align-self: "end" + - justify-self: "center" + state: + img_cell: + grid: + - grid-template-areas: "'. . .' '. n .' '. l .' '. . .'" + - grid-template-columns: "8px 1fr 8px" + - grid-template-rows: "auto repeat(2, min-content) 8px" + card: + - background-image: > + [[[ + return entity === undefined || `url(${states[entity.entity_id].attributes.data[variables.ulm_custom_card_imswel_medias_index].poster})`; + ]]] + - border: "none" + custom_fields: + overlay: + - z-index: 1 + - position: "absolute" + - top: 0 + - left: 0 + - height: "100%" + - width: "100%" + - border-radius: "var(--border-radius)" + - background: "linear-gradient(rgba(0,0,0,0) 50%, rgba(0,0,0,0.8) 100%)" + extra_styles: > + .ellipsis:not(#overlay){ + white-space: normal !important; + word-wrap: break-all; + max-height: 2.4em; + line-height: 1.2em; + } + custom_fields: + overlay: > + [[[ return entity === undefined ? null : ""; ]]] diff --git a/custom_cards/custom_card_imswel_medias/languages/EN.yaml b/custom_cards/custom_card_imswel_medias/languages/EN.yaml new file mode 100644 index 000000000..55da51024 --- /dev/null +++ b/custom_cards/custom_card_imswel_medias/languages/EN.yaml @@ -0,0 +1,13 @@ +--- +# EN.yaml for custom_card_imswel_medias +custom_card_imswel_medias_language_variables: + variables: + ulm_custom_card_imswel_recentlyadded: "Recently added" + ulm_custom_card_imswel_in_theaters: "in theathers" + ulm_custom_card_imswel_weekday: > + [[[ + return ["Sunday","Monday","Thuesday","Wednesday","Thursday","Friday","Saturday"]; + ]]] + ulm_custom_card_imswel_today: "Today" + ulm_custom_card_imswel_tommorow: "Tommorow" + ulm_custom_card_imswel_locale: "en-US" diff --git a/custom_cards/custom_card_imswel_medias/languages/FR.yaml b/custom_cards/custom_card_imswel_medias/languages/FR.yaml new file mode 100644 index 000000000..3d984af34 --- /dev/null +++ b/custom_cards/custom_card_imswel_medias/languages/FR.yaml @@ -0,0 +1,13 @@ +--- +# FR.yaml for custom_card_imswel_medias +custom_card_imswel_medias_language_variables: + variables: + ulm_custom_card_imswel_recentlyadded: "Récemment ajouté" + ulm_custom_card_imswel_in_theaters: "au cinéma" + ulm_custom_card_imswel_weekday: > + [[[ + return ["Dimanche","Lundi","Mardi","Mercredi","Jeudi","Vendredi","Samedi"]; + ]]] + ulm_custom_card_imswel_today: "Aujourd'hui" + ulm_custom_card_imswel_tommorow: "Demain" + ulm_custom_card_imswel_locale: "fr-FR" diff --git a/custom_cards/custom_card_imswel_person/README.md b/custom_cards/custom_card_imswel_person/README.md index 2562fa6ae..c8f5eeb52 100644 --- a/custom_cards/custom_card_imswel_person/README.md +++ b/custom_cards/custom_card_imswel_person/README.md @@ -14,10 +14,14 @@ This is a `custom-card` that improves the original person card (`card_person`) b ## Credits Author: imswel - 2022 -Version: 1.0.1 +Version: 1.0.2 ## Changelog +
+
1.0.2
+ UI fix and improvement. +1.0.1
Breaking change: removed variable for zones, instead load all zones automatically. @@ -52,9 +56,9 @@ This card needs the following to function correctly: template: custom_card_imswel_person variables: ulm_card_imswel_person_entity: person.john - ulm_card_imswel_person_wifi_tracker: device_tracker.wifi_oneplus_6t - ulm_card_imswel_person_gps_tracker: device_tracker.oneplus_6t - ulm_card_imswel_person_findmy_script: script.find_my_oneplus_6t + ulm_card_imswel_person_wifi_tracker: device_tracker.my_phone_wifi + ulm_card_imswel_person_gps_tracker: device_tracker.my_phone + ulm_card_imswel_person_findmy_script: script.find_my_phone ulm_card_imswel_person_use_entity_picture: true ``` @@ -75,19 +79,19 @@ This card needs the following to function correctly:1.0.1
Fix for UI Minimalist v1.0.1.
+
## Usage
@@ -67,12 +71,12 @@ This card needs the following to function correctly:
1.0.2
+Fixed the bug where card doesn't show at all +1.2.0
- ```yaml - #OLD +```yaml +#OLD - type: "custom:button-card" - template: - - card_scenes - variables: - entity_1: "scene.YOUR_SCENE" - entity_2: "scene.YOUR_SCENE" - entity_3: "scene.YOUR_SCENE" - entity_4: "scene.YOUR_SCENE" - entity_5: "scene.YOUR_SCENE" - name_1: "YOUR_NAME" - name_2: "YOUR_NAME" - name_3: "YOUR_NAME" - name_4: "YOUR_NAME" - name_5: "YOUR_NAME" - icon_1: "mdi:YOUR_ICON" - icon_2: "mdi:YOUR_ICON" - icon_3: "mdi:YOUR_ICON" - icon_4: "mdi:YOUR_ICON" - icon_5: "mdi:YOUR_ICON" - color_icon_1: "yellow" - color_icon_2: "blue" - color_icon_3: "purple" - color_icon_4: "green" - color_icon_5: "red" - color_bg_1: "yellow" - color_bg_2: "blue" - color_bg_3: "purple" - color_bg_4: "green" - color_bg_5: "red" - ``` - - ```yaml - #NEW + template: + - card_scenes + variables: + entity_1: "scene.YOUR_SCENE" + entity_2: "scene.YOUR_SCENE" + entity_3: "scene.YOUR_SCENE" + entity_4: "scene.YOUR_SCENE" + entity_5: "scene.YOUR_SCENE" + name_1: "YOUR_NAME" + name_2: "YOUR_NAME" + name_3: "YOUR_NAME" + name_4: "YOUR_NAME" + name_5: "YOUR_NAME" + icon_1: "mdi:YOUR_ICON" + icon_2: "mdi:YOUR_ICON" + icon_3: "mdi:YOUR_ICON" + icon_4: "mdi:YOUR_ICON" + icon_5: "mdi:YOUR_ICON" + icon_color_1: "yellow" + icon_color_2: "blue" + icon_color_3: "purple" + icon_color_4: "green" + icon_color_5: "red" + bg_color_1: "yellow" + bg_color_2: "blue" + bg_color_3: "purple" + bg_color_4: "green" + bg_color_5: "red" +``` + +```yaml +#NEW - type: "custom:button-card" - template: - - card_scenes - variables: - entity_1: - entity_id: "scene.YOUR_SCENE" - icon: "mdi:YOUR_ICON" - icon_color: "yellow" - name: "YOUR_NAME" - bg_color: "yellow" - entity_2: - entity_id: "scene.YOUR_SCENE" - icon: "mdi:YOUR_ICON" - icon_color: "blue" - name: "YOUR_NAME" - bg_color: "blue" - entity_3: - entity_id: "scene.YOUR_SCENE" - icon: "mdi:YOUR_ICON" - icon_color: "purple" - name: "YOUR_NAME" - bg_color: "purple" - entity_4: - entity_id: "scene.YOUR_SCENE" - icon: "mdi:YOUR_ICON" - icon_color: "green" - name: "YOUR_NAME" - bg_color: "green" - entity_5: - entity_id: "scene.YOUR_SCENE" - icon: "mdi:YOUR_ICON" - icon_color: "red" - name: "YOUR_NAME" - bg_color: "red" - ``` + template: + - card_scenes + variables: + entity_1: + entity_id: "scene.YOUR_SCENE" + icon: "mdi:YOUR_ICON" + icon_color: "yellow" + name: "YOUR_NAME" + bg_color: "yellow" + entity_2: + entity_id: "scene.YOUR_SCENE" + icon: "mdi:YOUR_ICON" + icon_color: "blue" + name: "YOUR_NAME" + bg_color: "blue" + entity_3: + entity_id: "scene.YOUR_SCENE" + icon: "mdi:YOUR_ICON" + icon_color: "purple" + name: "YOUR_NAME" + bg_color: "purple" + entity_4: + entity_id: "scene.YOUR_SCENE" + icon: "mdi:YOUR_ICON" + icon_color: "green" + name: "YOUR_NAME" + bg_color: "green" + entity_5: + entity_id: "scene.YOUR_SCENE" + icon: "mdi:YOUR_ICON" + icon_color: "red" + name: "YOUR_NAME" + bg_color: "red" +```
+
## Usage
@@ -38,6 +44,10 @@ Updated README
ulm_card_flower_entity: plant.bonsai_ficus
ulm_card_flower_name: Bonsai Ficus
ulm_card_flower_species: "ficus retusa"
+ ulm_card_flower_show_bars:
+ - temperature
+ - humidity
+ - moisture
```
#### Variables
@@ -67,11 +77,30 @@ Updated README
2.0.0
+Add support to lovelace-flower-card from Olen (advanced forked version) +Updated README ++- moisture +
+- humidity +
-
If not provided, will use the friendly name of the provided entity. | +| cartridges | :material-close: | A list of `Cartridge entity` objects. (See below) | ## Cartridge entity -| Variable | Required | Notes | Requirement | +| Variable | Required | Description | Requirement | |------------|------------------|----------------|-------------| | label | :material-check: | The label for the ink sensor. For better aesthetic, keep this string short eg: "BK", "Y", "M", "C", "PB" | | -| entity_id | :material-check: | The entity_id of the ink sensor | Must be a value between 0-100 (percentage) | -| color | :material-close: | The color of the ink bar | Must be a [CSS Legal Color Value](https://www.w3schools.com/cssref/css_colors_legal.asp). | +| entity_id | :material-check: | The entity_id of the ink sensor | Must be a value between 0-100 (percentage). | +| type | :material-close: | The type of cartridge associated with the ink sensor | Must be either 'unicolor' or 'tricolor'.
If not provided, 'unicolor' is assumed for backwards compatibility. | +| color | :material-check: | The color of the ink bar | For unicolor cartridges, must be a single [CSS Legal Color Value](https://www.w3schools.com/cssref/css_colors_legal.asp). For tricolor cartridges, 3 colours are required. (See usage for more info) | ## Usage +### Unicolor Printers + ```yaml - type: "custom:button-card" template: "custom_card_sisimomo_printer" @@ -56,24 +79,52 @@ Version: 0.1.0 cartridges: - label: "BK" entity_id: sensor.printer_black_ink + type: unicolor color: "black" - label: "B" entity_id: sensor.printer_photo_black_ink + type: unicolor color: "black" - label: "Y" entity_id: sensor.printer_yellow_ink + type: unicolor color: "rgba(var(--color-yellow), 1)" - label: "M" entity_id: sensor.printer_magenta_ink + type: unicolor color: "#F84B7A" - label: "C" entity_id: sensor.printer_cyan_ink + type: unicolor color: "#427EDE" - label: "PB" entity_id: sensor.printer_photo_blue_ink + type: unicolor color: "#9272BE" ``` +### Tricolor Printers + +```yaml +- type: "custom:button-card" + template: custom_card_sisimomo_printer + entity: sensor.canon_mg3600_series + variables: + ulm_card_printer_name: Canon MG3650 + cartridges: + - label: "Col" + entity_id: sensor.canon_mg3600_series_black + type: tricolor + color: + - cyan + - magenta + - yellow + - label: "BK" + entity_id: sensor.canon_mg3600_series_black + type: unicolor + color: black +``` + ## Template code ??? note "Template Code" diff --git a/custom_cards/custom_card_sisimomo_printer/custom_card_sisimomo_printer.yaml b/custom_cards/custom_card_sisimomo_printer/custom_card_sisimomo_printer.yaml index acb4004e8..b80018dd8 100644 --- a/custom_cards/custom_card_sisimomo_printer/custom_card_sisimomo_printer.yaml +++ b/custom_cards/custom_card_sisimomo_printer/custom_card_sisimomo_printer.yaml @@ -1,6 +1,11 @@ --- custom_card_sisimomo_printer: - template: "ulm_language_variables" + template: + - "ulm_translation_engine" + - "ulm_language_variables" + variables: + printer_name: "[[[ entity.attributes.friendly_name; ]]]" + ulm_idle: "idle" show_icon: false show_label: false show_name: false @@ -24,18 +29,24 @@ custom_card_sisimomo_printer: type: "custom:button-card" template: | [[[ - return entity.state.toLowerCase() != variables.ulm_idle && entity.state.toLowerCase() != variables.ulm_unavailable ? [ "icon_info", "blue_no_state" ] : [ "icon_info" ]; + return ( + entity.state.toLowerCase() != variables.ulm_idle.toLowerCase() + && entity.state.toLowerCase() != variables.ulm_translation_unavailable.toLowerCase() + ? [ "icon_info", "blue_no_state" ] : [ "icon_info" ] + ); ]]] tap_action: action: "more-info" label: "[[[ return entity.state; ]]]" - name: "[[[ return variables.printer_name !== undefined ? variables.printer_name : entity.attributes.friendly_name; ]]]" + name: "[[[ return variables.printer_name; ]]]" entity: "[[[ return entity.entity_id; ]]]" styles: card: - padding: "0" - "--mdc-ripple-press-opacity": 0.12 - cursor: "pointer" + label: + - text-transform: "capitalize" cartridges: | [[[ // Source: https://stackoverflow.com/a/56266358 @@ -45,25 +56,53 @@ custom_card_sisimomo_printer: return s.color !== ''; } + let toner_info_available = true; if (variables.cartridges !== undefined ? Array.isArray(variables.cartridges) && variables.cartridges.length > 0 : false) { let errorArray = []; variables.cartridges.forEach(cartridge => { let index = variables.cartridges.indexOf(cartridge); + let valid_cartridge_types = ['unicolor', 'tricolor'] + // Confirm that the label is provided. if (cartridge.label === undefined) { errorArray.push(`cartridges.[${index}].label: You must provide a value.`); } - // Confirm that the color is provided and is a valid color css. - if (cartridge.color === undefined) { + + // Confirm that a valid cartridge type is provided, if not default to 'unicolor' + // for backwards compatibility with older configuration files + if (cartridge.type === undefined) { + cartridge.type = 'unicolor' + } else if (!valid_cartridge_types.includes(cartridge.type)) { + errorArray.push(`cartridges.[${index}].type: You must provide a valid cartridge type`); + } + + // Confirm that the color is provided and is valid color css. + if (cartridge.color !== undefined) { + if (cartridge.type === 'unicolor') { + if (typeof cartridge.color === 'string' || cartridge.color instanceof String ? !isColor(cartridge.color) : false) { + errorArray.push(`cartridges.[${index}].color: You must provide a single valid CSS color value.`); + } + } else if (Array.isArray(cartridge.color) && cartridge.color.length === 3 ? cartridge.type === 'tricolor' : false) { + cartridge.color.forEach(color => { + let col_index = cartridge.color.indexOf(color); + if (!isColor(String(color))) { + errorArray.push(`cartridges.[${index}].color.[${col_index}]: You must provide a single valid CSS color value.`); + } + }); + } else { + errorArray.push(`cartridges.[${index}].color: Invalid combination of colour and type.`); + } + } else { errorArray.push(`cartridges.[${index}].color: You must provide a value.`); - } else if (!isColor(cartridge.color)) { - errorArray.push(`cartridges.[${index}].color: You must provide a valid css color value.`); } + // Confirm that the entity_id is provided, is a valid entity_id, a integer and a value between 0 and 100 inclusively. if (cartridge.entity_id === undefined) { errorArray.push(`cartridges.[${index}].entity_id: You must provide a value.`); } else if (states[cartridge.entity_id] === undefined) { errorArray.push(`cartridges.[${index}].entity_id: You must provide a existing entity_id.`); + } else if (String(states[cartridge.entity_id].state).toLowerCase() === String(variables.ulm_translation_unavailable).toLowerCase()) { + toner_info_available = false; } else if (isNaN(states[cartridge.entity_id].state) || typeof states[cartridge.entity_id].state === "boolean") { errorArray.push(`cartridges.[${index}].entity_id: You must provide a entity representing an integer.`); } else if (states[cartridge.entity_id].state < 0 || states[cartridge.entity_id].state > 100) { @@ -71,52 +110,114 @@ custom_card_sisimomo_printer: } }); if (errorArray.length > 0) { - return `
0.1.0
- Initial release. +
+
+0.1.0 - Initial Release
+ +- Initial release + +
+
## Card options
-| Options | Required | Notes |
+| Options | Required | Description |
|--------------|------------------|----------------|
| entity | :material-check: | The entity_id for the large card |
## Variables
-| Variable | Required | Notes |
+| Variable | Required | Description |
|----------------------------------------|------------------|----------------|
-| printer_name | :material-close: | If not provide, will use the friendly name of the provided entity |
-| cartridges | :material-close: | A list of `Cartridge entity` object (see below) |
+| printer_name | :material-close: | The chosen display name of the printer. 0.2.0 - Added additional cases
+ +- Added support for other cartridge types (tricolor) +- Added further error checking for previously uncaught states +- Added support for the IPP 'unavailable' state +- Added CSS for better theming of error screens +- Added card string translation files +- Changed `text-transform` of label to capitalize +- Changed `ulm_unavailable` to `ulm_translation_unavailable` +- Removed some unnecessary inline stylings +- Fixed the handling of unavailable and idle state styling +If not provided, will use the friendly name of the provided entity. | +| cartridges | :material-close: | A list of `Cartridge entity` objects. (See below) | ## Cartridge entity -| Variable | Required | Notes | Requirement | +| Variable | Required | Description | Requirement | |------------|------------------|----------------|-------------| | label | :material-check: | The label for the ink sensor. For better aesthetic, keep this string short eg: "BK", "Y", "M", "C", "PB" | | -| entity_id | :material-check: | The entity_id of the ink sensor | Must be a value between 0-100 (percentage) | -| color | :material-close: | The color of the ink bar | Must be a [CSS Legal Color Value](https://www.w3schools.com/cssref/css_colors_legal.asp). | +| entity_id | :material-check: | The entity_id of the ink sensor | Must be a value between 0-100 (percentage). | +| type | :material-close: | The type of cartridge associated with the ink sensor | Must be either 'unicolor' or 'tricolor'.
If not provided, 'unicolor' is assumed for backwards compatibility. | +| color | :material-check: | The color of the ink bar | For unicolor cartridges, must be a single [CSS Legal Color Value](https://www.w3schools.com/cssref/css_colors_legal.asp). For tricolor cartridges, 3 colours are required. (See usage for more info) | ## Usage +### Unicolor Printers + ```yaml - type: "custom:button-card" template: "custom_card_sisimomo_printer" @@ -56,24 +79,52 @@ Version: 0.1.0 cartridges: - label: "BK" entity_id: sensor.printer_black_ink + type: unicolor color: "black" - label: "B" entity_id: sensor.printer_photo_black_ink + type: unicolor color: "black" - label: "Y" entity_id: sensor.printer_yellow_ink + type: unicolor color: "rgba(var(--color-yellow), 1)" - label: "M" entity_id: sensor.printer_magenta_ink + type: unicolor color: "#F84B7A" - label: "C" entity_id: sensor.printer_cyan_ink + type: unicolor color: "#427EDE" - label: "PB" entity_id: sensor.printer_photo_blue_ink + type: unicolor color: "#9272BE" ``` +### Tricolor Printers + +```yaml +- type: "custom:button-card" + template: custom_card_sisimomo_printer + entity: sensor.canon_mg3600_series + variables: + ulm_card_printer_name: Canon MG3650 + cartridges: + - label: "Col" + entity_id: sensor.canon_mg3600_series_black + type: tricolor + color: + - cyan + - magenta + - yellow + - label: "BK" + entity_id: sensor.canon_mg3600_series_black + type: unicolor + color: black +``` + ## Template code ??? note "Template Code" diff --git a/custom_cards/custom_card_sisimomo_printer/custom_card_sisimomo_printer.yaml b/custom_cards/custom_card_sisimomo_printer/custom_card_sisimomo_printer.yaml index acb4004e8..b80018dd8 100644 --- a/custom_cards/custom_card_sisimomo_printer/custom_card_sisimomo_printer.yaml +++ b/custom_cards/custom_card_sisimomo_printer/custom_card_sisimomo_printer.yaml @@ -1,6 +1,11 @@ --- custom_card_sisimomo_printer: - template: "ulm_language_variables" + template: + - "ulm_translation_engine" + - "ulm_language_variables" + variables: + printer_name: "[[[ entity.attributes.friendly_name; ]]]" + ulm_idle: "idle" show_icon: false show_label: false show_name: false @@ -24,18 +29,24 @@ custom_card_sisimomo_printer: type: "custom:button-card" template: | [[[ - return entity.state.toLowerCase() != variables.ulm_idle && entity.state.toLowerCase() != variables.ulm_unavailable ? [ "icon_info", "blue_no_state" ] : [ "icon_info" ]; + return ( + entity.state.toLowerCase() != variables.ulm_idle.toLowerCase() + && entity.state.toLowerCase() != variables.ulm_translation_unavailable.toLowerCase() + ? [ "icon_info", "blue_no_state" ] : [ "icon_info" ] + ); ]]] tap_action: action: "more-info" label: "[[[ return entity.state; ]]]" - name: "[[[ return variables.printer_name !== undefined ? variables.printer_name : entity.attributes.friendly_name; ]]]" + name: "[[[ return variables.printer_name; ]]]" entity: "[[[ return entity.entity_id; ]]]" styles: card: - padding: "0" - "--mdc-ripple-press-opacity": 0.12 - cursor: "pointer" + label: + - text-transform: "capitalize" cartridges: | [[[ // Source: https://stackoverflow.com/a/56266358 @@ -45,25 +56,53 @@ custom_card_sisimomo_printer: return s.color !== ''; } + let toner_info_available = true; if (variables.cartridges !== undefined ? Array.isArray(variables.cartridges) && variables.cartridges.length > 0 : false) { let errorArray = []; variables.cartridges.forEach(cartridge => { let index = variables.cartridges.indexOf(cartridge); + let valid_cartridge_types = ['unicolor', 'tricolor'] + // Confirm that the label is provided. if (cartridge.label === undefined) { errorArray.push(`cartridges.[${index}].label: You must provide a value.`); } - // Confirm that the color is provided and is a valid color css. - if (cartridge.color === undefined) { + + // Confirm that a valid cartridge type is provided, if not default to 'unicolor' + // for backwards compatibility with older configuration files + if (cartridge.type === undefined) { + cartridge.type = 'unicolor' + } else if (!valid_cartridge_types.includes(cartridge.type)) { + errorArray.push(`cartridges.[${index}].type: You must provide a valid cartridge type`); + } + + // Confirm that the color is provided and is valid color css. + if (cartridge.color !== undefined) { + if (cartridge.type === 'unicolor') { + if (typeof cartridge.color === 'string' || cartridge.color instanceof String ? !isColor(cartridge.color) : false) { + errorArray.push(`cartridges.[${index}].color: You must provide a single valid CSS color value.`); + } + } else if (Array.isArray(cartridge.color) && cartridge.color.length === 3 ? cartridge.type === 'tricolor' : false) { + cartridge.color.forEach(color => { + let col_index = cartridge.color.indexOf(color); + if (!isColor(String(color))) { + errorArray.push(`cartridges.[${index}].color.[${col_index}]: You must provide a single valid CSS color value.`); + } + }); + } else { + errorArray.push(`cartridges.[${index}].color: Invalid combination of colour and type.`); + } + } else { errorArray.push(`cartridges.[${index}].color: You must provide a value.`); - } else if (!isColor(cartridge.color)) { - errorArray.push(`cartridges.[${index}].color: You must provide a valid css color value.`); } + // Confirm that the entity_id is provided, is a valid entity_id, a integer and a value between 0 and 100 inclusively. if (cartridge.entity_id === undefined) { errorArray.push(`cartridges.[${index}].entity_id: You must provide a value.`); } else if (states[cartridge.entity_id] === undefined) { errorArray.push(`cartridges.[${index}].entity_id: You must provide a existing entity_id.`); + } else if (String(states[cartridge.entity_id].state).toLowerCase() === String(variables.ulm_translation_unavailable).toLowerCase()) { + toner_info_available = false; } else if (isNaN(states[cartridge.entity_id].state) || typeof states[cartridge.entity_id].state === "boolean") { errorArray.push(`cartridges.[${index}].entity_id: You must provide a entity representing an integer.`); } else if (states[cartridge.entity_id].state < 0 || states[cartridge.entity_id].state > 100) { @@ -71,52 +110,114 @@ custom_card_sisimomo_printer: } }); if (errorArray.length > 0) { - return `
- ⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️
-
-
- ${errorArray.map(error => `
- ${error} `).join("")} + return `
- ${error} `).join("")}
+ Configuration Error:
+
`;
}
- return '-
+ ${errorArray.map(error => `
' +
- variables.cartridges.map(cartridge => {
- return `
';
+ if (toner_info_available) {
+ return '${cartridge.label}
-
- ${states[cartridge.entity_id].state}%
`;
- }).join("") +
- '' +
+ variables.cartridges.map(cartridge => {
+ if (cartridge.type === "unicolor") {
+ cartridge.bar_style = `
+ background-color: ${cartridge.color};
+ width: ${states[cartridge.entity_id].state}%;
+ `;
+ } else if (cartridge.type === "tricolor") {
+ cartridge.bar_style = `
+ background: linear-gradient(
+ 180deg,
+ ${cartridge.color[0]},
+ ${cartridge.color[0]} 33%,
+ ${cartridge.color[1]} 33%,
+ ${cartridge.color[1]} 66%,
+ ${cartridge.color[2]} 66%,
+ ${cartridge.color[2]}
+ );
+ width: ${states[cartridge.entity_id].state}%;
+ `;
+ }
+
+ // Removes unnecessary whitespace from inline CSS
+ cartridge.bar_style = cartridge.bar_style.replace(/\s{2,}/g, '')
+ return `
+
';
+ } else {
+ return `
+ ${cartridge.label}
+
+ ${states[cartridge.entity_id].state}%
+ `;
+ }).join("") +
+ '
+ Toner Information Unavailable
+
+ `;
+ }
} else {
}
]]]
- style: |
- div#cartridges .wrapper {
- display: grid;
- grid-template-columns: auto 1fr auto;
- grid-gap: 1rem;
- padding: 12px 8px 8px 8px;
- }
- div#cartridges .wrapper > *:nth-child(3n-2), .wrapper > *:nth-child(3n) {
- place-self: center start;
- }
- div#cartridges .wrapper > .label {
- filter: opacity(70%);
- font-size: medium;
- }
- div#cartridges .wrapper > .container-bar {
- position: relative;
- border-radius: 4px;
- border: 0.01rem solid rgba(var(--color-theme),.35);
- }
- div#cartridges .wrapper > .container-bar .bar {
- height: 20px;
- border-radius: 4px;
- }
- div#cartridges .wrapper > .state {
- filter: opacity(40%);
- font-size: medium;
- }
+ card_mod:
+ style: |
+ /* Cartridge CSS */
+ div#cartridges .wrapper {
+ display: grid;
+ grid-template-columns: auto 1fr auto;
+ grid-gap: 1rem;
+ padding: 12px 8px 8px 8px;
+ }
+ div#cartridges .wrapper > *:nth-child(3n-2), .wrapper > *:nth-child(3n) {
+ place-self: center start;
+ }
+ div#cartridges .wrapper > .label {
+ filter: opacity(70%);
+ font-size: medium;
+ }
+ div#cartridges .wrapper > .container-bar {
+ position: relative;
+ border-radius: 4px;
+ border: 0.01rem solid rgba(var(--color-theme),.35);
+ }
+ div#cartridges .wrapper > .container-bar .bar {
+ height: 20px;
+ border-radius: 4px;
+ }
+ div#cartridges .wrapper > .state {
+ filter: opacity(40%);
+ font-size: medium;
+ }
+
+ /* Error CSS */
+ div#cartridges .error-container {
+ text-align: left;
+ font-size: 75%;
+ font-family: var(--code-font-family, monospace);
+ padding: 10px;
+ background-color: rgba(219, 68, 55, 0.75);
+ margin-top:10px;
+ border-radius:8px;
+ }
+ div#cartridges .error-container ul {
+ list-style: none;
+ padding: 0;
+ margin: 0;
+ overflow-wrap: break-word;
+ word-wrap: break-word;
+ white-space: normal !important;
+ }
+ div#cartridges .error-container ul li {
+ margin-top: 0.5em;
+ }
+ div#cartridges .info-unavailable {
+ padding: 1em;
+ white-space: normal;
+ margin-top:10px;
+ border-radius:8px;
+ opacity: 60%;
+ }
diff --git a/custom_cards/custom_card_speedtest_shogun160/custom_card_speedtest_shogun160.yaml b/custom_cards/custom_card_speedtest_shogun160/custom_card_speedtest_shogun160.yaml
new file mode 100644
index 000000000..b90a0551d
--- /dev/null
+++ b/custom_cards/custom_card_speedtest_shogun160/custom_card_speedtest_shogun160.yaml
@@ -0,0 +1,393 @@
+---
+custom_card_speedtest_shogun160:
+ template: "list_3_items"
+ triggers_update: "all"
+ show_name: false
+ show_label: false
+ variables:
+ ulm_custom_card_speedtest_download_speed_color: "var(--google-yellow)"
+ ulm_custom_card_speedtest_download_speed_max: 100
+ ulm_custom_card_speedtest_upload_speed_color: "var(--google-blue)"
+ ulm_custom_card_speedtest_upload_speed_max: 40
+ ulm_custom_card_speedtest_ping_color: "var(--google-green)"
+ ulm_custom_card_speedtest_ping_max: 85
+ ulm_custom_card_speedtest_round: false
+ tap_action:
+ action: "perform-action"
+ perform_action: "homeassistant.update_entity"
+ target:
+ entity_id:
+ - "[[[ return variables.ulm_custom_card_speedtest_download_speed_entity]]]"
+ - "[[[ return variables.ulm_custom_card_speedtest_upload_speed_entity]]]"
+ - "[[[ return variables.ulm_custom_card_speedtest_ping_entity]]]"
+ styles:
+ card:
+ - box-shadow: "var(--box-shadow)"
+ - border-radius: "var(--border-radius)"
+ custom_fields:
+ item1:
+ card:
+ type: "custom:button-card"
+ template: "list_2_items_1_row"
+ styles:
+ card:
+ - box-shadow: "none"
+ - border-radius: "var(--border-radius) var(--border-radius) 0px 0px"
+ custom_fields:
+ item1:
+ card:
+ type: "custom:apexcharts-card"
+ chart_type: "radialBar"
+ series:
+ - entity: "[[[ return variables.ulm_custom_card_speedtest_download_speed_entity]]]"
+ color: "[[[ return variables.ulm_custom_card_speedtest_download_speed_color ]]]"
+ max: "[[[ return variables.ulm_custom_card_speedtest_download_speed_max ]]]"
+ show:
+ legend_value: false
+ apex_config:
+ plotOptions:
+ radialBar:
+ offsetY: 0
+ startAngle: -108
+ endAngle: 108
+ hollow:
+ size: "85%"
+ dataLabels:
+ name:
+ show: false
+ value:
+ show: false
+ track:
+ strokeWidth: "75%"
+ margin: 0
+ fill:
+ type: "gradient"
+ gradient:
+ shade: "light"
+ type: "horizontal"
+ shadeIntensity: 0.3
+ inverseColors: false
+ opacityFrom: 1
+ opacityTo: 1
+ stops:
+ - 0
+ - 50
+ - 55
+ - 90
+ legend:
+ show: false
+ chart:
+ height: 150
+ card_mod:
+ style: |
+ ha-card {
+ box-shadow: none;
+ background: none;
+ }
+ item2:
+ card:
+ type: "custom:button-card"
+ tap_action:
+ action: "none"
+ show_last_changed: false
+ show_label: true
+ show_name: true
+ show_icon: true
+ label: |
+ [[[
+ var state1 = "";
+ if (states[variables.ulm_custom_card_speedtest_download_speed_entity].state){
+ if (variables.ulm_custom_card_speedtest_round == true){
+ var state1 = Math.round(Number(states[variables.ulm_custom_card_speedtest_download_speed_entity].state));
+ }
+ else {var state1 = states[variables.ulm_custom_card_speedtest_download_speed_entity].state;
+ }
+ if (states[variables.ulm_custom_card_speedtest_download_speed_entity].attributes.unit_of_measurement){
+ state1 += " " + states[variables.ulm_custom_card_speedtest_download_speed_entity].attributes.unit_of_measurement;
+ }
+ }
+ return state1;
+ ]]]
+ name: "Download"
+ icon: "mdi:download"
+ styles:
+ icon:
+ - color: "[[[ return variables.ulm_custom_card_speedtest_download_speed_color ]]]"
+ - width: "24px"
+ label:
+ - justify-self: "center"
+ - align-self: "start"
+ - font-weight: "bold"
+ - font-size: "14px"
+ name:
+ - margin-top: "5px"
+ - justify-self: "center"
+ - font-weight: "bolder"
+ - font-size: "12px"
+ - filter: "opacity(40%)"
+ img_cell:
+ - place-self: "center"
+ - width: "34px"
+ - height: "34px"
+ grid:
+ - grid-template-areas: "'i' 'l' 'n'"
+ size: "20px"
+ card_mod:
+ style: |
+ ha-card {
+ box-shadow: none;
+ background: none;
+ }
+ item2:
+ card:
+ type: "custom:button-card"
+ template: "list_2_items_1_row"
+ styles:
+ card:
+ - box-shadow: "none"
+ - border-radius: "var(--border-radius) var(--border-radius) 0px 0px"
+ custom_fields:
+ item1:
+ card:
+ type: "custom:apexcharts-card"
+ chart_type: "radialBar"
+ series:
+ - entity: "[[[ return variables.ulm_custom_card_speedtest_upload_speed_entity]]]"
+ color: "[[[ return variables.ulm_custom_card_speedtest_upload_speed_color ]]]"
+ max: "[[[ return variables.ulm_custom_card_speedtest_upload_speed_max ]]]"
+ show:
+ legend_value: false
+ apex_config:
+ plotOptions:
+ radialBar:
+ offsetY: 0
+ startAngle: -108
+ endAngle: 108
+ hollow:
+ size: "85%"
+ dataLabels:
+ name:
+ show: false
+ value:
+ show: false
+ track:
+ strokeWidth: "75%"
+ margin: 0
+ fill:
+ type: "gradient"
+ gradient:
+ shade: "light"
+ type: "horizontal"
+ shadeIntensity: 0.3
+ inverseColors: false
+ opacityFrom: 1
+ opacityTo: 1
+ stops:
+ - 0
+ - 50
+ - 55
+ - 90
+ legend:
+ show: false
+ chart:
+ height: 150
+ card_mod:
+ style: |
+ ha-card {
+ box-shadow: none;
+ background: none;
+ }
+ item2:
+ card:
+ type: "custom:button-card"
+ tap_action:
+ action: "none"
+ show_last_changed: false
+ show_label: true
+ show_name: true
+ show_icon: true
+ label: |
+ [[[
+ var state1 = "";
+ if (states[variables.ulm_custom_card_speedtest_upload_speed_entity].state){
+ if (variables.ulm_custom_card_speedtest_round == true){
+ var state1 = Math.round(Number(states[variables.ulm_custom_card_speedtest_upload_speed_entity].state));
+ }
+ else {var state1 = states[variables.ulm_custom_card_speedtest_upload_speed_entity].state;
+ }
+ if (states[variables.ulm_custom_card_speedtest_upload_speed_entity].attributes.unit_of_measurement){
+ state1 += " " + states[variables.ulm_custom_card_speedtest_upload_speed_entity].attributes.unit_of_measurement;
+ }
+ }
+ return state1;
+ ]]]
+ name: "Upload"
+ icon: "mdi:upload"
+ styles:
+ icon:
+ - color: "[[[ return variables.ulm_custom_card_speedtest_upload_speed_color ]]]"
+ - width: "24px"
+ label:
+ - justify-self: "center"
+ - align-self: "start"
+ - font-weight: "bold"
+ - font-size: "14px"
+ name:
+ - margin-top: "5px"
+ - justify-self: "center"
+ - font-weight: "bolder"
+ - font-size: "12px"
+ - filter: "opacity(40%)"
+ img_cell:
+ - place-self: "center"
+ - width: "34px"
+ - height: "34px"
+ grid:
+ - grid-template-areas: "'i' 'l' 'n'"
+ size: "20px"
+ card_mod:
+ style: |
+ ha-card {
+ box-shadow: none;
+ background: none;
+ }
+ item3:
+ card:
+ type: "custom:button-card"
+ template: "list_2_items_1_row"
+ styles:
+ card:
+ - box-shadow: "none"
+ - border-radius: "var(--border-radius) var(--border-radius) 0px 0px"
+ custom_fields:
+ item1:
+ card:
+ type: "custom:apexcharts-card"
+ chart_type: "radialBar"
+ series:
+ - entity: "[[[ return variables.ulm_custom_card_speedtest_ping_entity]]]"
+ color: "[[[ return variables.ulm_custom_card_speedtest_ping_color ]]]"
+ max: "[[[ return variables.ulm_custom_card_speedtest_ping_max ]]]"
+ show:
+ legend_value: false
+ apex_config:
+ plotOptions:
+ radialBar:
+ offsetY: 0
+ startAngle: -108
+ endAngle: 108
+ hollow:
+ size: "85%"
+ dataLabels:
+ name:
+ show: false
+ value:
+ show: false
+ track:
+ strokeWidth: "75%"
+ margin: 0
+ fill:
+ type: "gradient"
+ gradient:
+ shade: "light"
+ type: "horizontal"
+ shadeIntensity: 0.3
+ inverseColors: false
+ opacityFrom: 1
+ opacityTo: 1
+ stops:
+ - 0
+ - 50
+ - 55
+ - 90
+ legend:
+ show: false
+ chart:
+ height: 150
+ card_mod:
+ style: |
+ ha-card {
+ box-shadow: none;
+ background: none;
+ }
+ item2:
+ card:
+ type: "custom:button-card"
+ tap_action:
+ action: "none"
+ show_last_changed: false
+ show_label: true
+ show_name: true
+ show_icon: true
+ label: |
+ [[[
+ var state1 = "";
+ if (states[variables.ulm_custom_card_speedtest_ping_entity].state){
+ var state1 = states[variables.ulm_custom_card_speedtest_ping_entity].state;
+ if (states[variables.ulm_custom_card_speedtest_ping_entity].attributes.unit_of_measurement){
+ state1 += " " + states[variables.ulm_custom_card_speedtest_ping_entity].attributes.unit_of_measurement;
+ }
+ }
+ return state1;
+ ]]]
+ name: "Ping"
+ icon: "mdi:wan"
+ styles:
+ icon:
+ - color: "[[[ return variables.ulm_custom_card_speedtest_ping_color ]]]"
+ - width: "24px"
+ label:
+ - justify-self: "center"
+ - align-self: "start"
+ - font-weight: "bold"
+ - font-size: "14px"
+ name:
+ - margin-top: "5px"
+ - justify-self: "center"
+ - font-weight: "bolder"
+ - font-size: "12px"
+ - filter: "opacity(40%)"
+ img_cell:
+ - place-self: "center"
+ - width: "34px"
+ - height: "34px"
+ grid:
+ - grid-template-areas: "'i' 'l' 'n'"
+ size: "20px"
+ card_mod:
+ style: |
+ ha-card {
+ box-shadow: none;
+ background: none;
+ }
+
+### List 2 Items 1 Row ###
+list_2_items_1_row:
+ styles:
+ grid:
+ - grid-template-areas: "'item1' 'item2'"
+ - grid-template-columns: "1fr"
+ - grid-template-rows: "min-content min-content"
+ - grid: "relative"
+ card:
+ - padding: "0px"
+ - height: "100px"
+ img_cell:
+ - border-radius: "0%"
+ - background-color: "transparent"
+ custom_fields:
+ item1:
+ - position: "absolute"
+ - top: "-2%"
+ - place-self: "center"
+ item2:
+ - position: "absolute"
+ - top: "15%"
+ - place-self: "center"
+ - width: "115%"
+ card_mod:
+ style: |
+ ha-card {
+ box-shadow: none;
+ background: none;
+ }
diff --git a/custom_cards/custom_card_speedtest_shogun160/readme.md b/custom_cards/custom_card_speedtest_shogun160/readme.md
new file mode 100644
index 000000000..394d5f094
--- /dev/null
+++ b/custom_cards/custom_card_speedtest_shogun160/readme.md
@@ -0,0 +1,51 @@
+---
+title: Custom Card Speedtest
+hide:
+ - toc
+---
+
+
+
+# Custom Card "Speedtest"
+
+
+
+## Changelog
+
+
+
+
+## Description
+
+This is a custom card to display download, upload and ping speed by using apexchart.
+
+## Variables
+
+| Variable | Default | Required | Notes |
+| ----------------------------------------------- | ---------------------- | -------- | --------------------------------------------------- |
+| ulm_custom_card_speedtest_download_speed_entity | | Yes | The entity to represent the download speed |
+| ulm_custom_card_speedtest_download_speed_color | `var(--google-yellow)` | No | Color for download graph |
+| ulm_custom_card_speedtest_download_speed_max | `100` | No | Maximal value for download speed to build the graph |
+| ulm_custom_card_speedtest_upload_speed_entity | | Yes | The entity to represent the upload speed |
+| ulm_custom_card_speedtest_upload_speed_color | `var(--google-blue)` | No | Color for upload graph |
+| ulm_custom_card_speedtest_upload_speed_max | `40` | No | Maximal value for upload speed to build the graph |
+| ulm_custom_card_speedtest_ping_entity | | Yes | The entity to represent the ping speed |
+| ulm_custom_card_speedtest_ping_color | `var(--google-green)` | No | Color for ping graph |
+| ulm_custom_card_speedtest_ping_max | `85` | No | Maximal value for ping speed to build the graph |
+| ulm_custom_card_speedtest_round | `false` | No | Weather to use rounded values or not |
+
+## Usage
+
+```yaml
+
+- type: custom:button-card
+ template: custom_card_speedtest_shogun160
+ variables:
+ ulm_custom_card_speedtest_download_speed_entity: sensor.speedtest_download
+ ulm_custom_card_speedtest_upload_speed_entity: sensor.speedtest_upload
+ ulm_custom_card_speedtest_ping_entity: sensor.speedtest_ping
+ ulm_custom_card_speedtest_round: true
+
+```
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 a144ee4fa..5807c5925 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
@@ -78,10 +78,11 @@ custom_card_tpx01_aircondition_with_buttons:
type: "custom:button-card"
template: "widget_icon"
tap_action:
- action: "call-service"
- service: "climate.set_hvac_mode"
- service_data:
+ action: "perform-action"
+ perform_action: "climate.set_hvac_mode"
+ target:
entity_id: "[[[ return variables.entity ]]]"
+ data:
hvac_mode: "cool"
icon: "mdi:power"
- type: "conditional"
@@ -92,10 +93,11 @@ custom_card_tpx01_aircondition_with_buttons:
type: "custom:button-card"
template: "widget_icon"
tap_action:
- action: "call-service"
- service: "climate.set_hvac_mode"
- service_data:
+ action: "perform-action"
+ perform_action: "climate.set_hvac_mode"
+ target:
entity_id: "[[[ return variables.entity ]]]"
+ data:
hvac_mode: "off"
icon: "mdi:power-off"
item2:
@@ -108,9 +110,9 @@ custom_card_tpx01_aircondition_with_buttons:
type: "custom:button-card"
template: "widget_icon"
tap_action:
- action: "call-service"
- service: "script.decrease_climate_temperature"
- service_data:
+ action: "perform-action"
+ perform_action: "script.decrease_climate_temperature"
+ target:
entity_id: "[[[ return variables.entity ]]]"
icon: "mdi:minus"
item2:
@@ -126,9 +128,9 @@ custom_card_tpx01_aircondition_with_buttons:
type: "custom:button-card"
template: "widget_icon"
tap_action:
- action: "call-service"
- service: "script.increment_climate_temperature"
- service_data:
+ action: "perform-action"
+ perform_action: "script.increment_climate_temperature"
+ target:
entity_id: "[[[ return variables.entity ]]]"
icon: "mdi:plus"
diff --git a/custom_cards/custom_card_yagrasdemonde_lights_count/languages/RU.yaml b/custom_cards/custom_card_yagrasdemonde_lights_count/languages/RU.yaml
new file mode 100644
index 000000000..33f81b2ab
--- /dev/null
+++ b/custom_cards/custom_card_yagrasdemonde_lights_count/languages/RU.yaml
@@ -0,0 +1,9 @@
+---
+ulm_custom_card_yagrasdemonde_lights_count_language_variables:
+ variables:
+ ulm_custom_card_yagrasdemonde_lights_count_light_0: "Свет отключен"
+ ulm_custom_card_yagrasdemonde_lights_count_light_1: "1 лампа включена"
+ ulm_custom_card_yagrasdemonde_lights_count_light_many: "лампы включены"
+ ulm_custom_card_yagrasdemonde_lights_count_cover_0: "Нет открытых ворот"
+ ulm_custom_card_yagrasdemonde_lights_count_cover_1: "1 ворота открыты"
+ ulm_custom_card_yagrasdemonde_lights_count_cover_many: "ворот открыты"
diff --git a/custom_cards/custom_chip_group_counter/README.md b/custom_cards/custom_chip_group_counter/README.md
new file mode 100644
index 000000000..2065901a8
--- /dev/null
+++ b/custom_cards/custom_chip_group_counter/README.md
@@ -0,0 +1,91 @@
+---
+title: Custom Chip Group Counter
+hide:
+ - toc
+---
+
+
+
+# Custom Card "Group Counter"
+
+
+
+
+## Credits
+
+- Author: Albin Médoc - 2023
+ Version: 1.0.0
+
+## Changelog
+
+1.0.0
+Initial release +
+
+
+## Description
+
+This cards show a chip with custom text representing how many entities in a group have a specific state. Pressing on the chip will toggle the entity group, eg turn on/off all lights.
+
+## Variables
+
+| Variable | Default | Required | Notes |
+| ------------------------------------------- | ------------------------ | -------- | -------------------------------------------------------------------------------------------------- |
+| entity | | Yes | Hide chip if no entities are active. |
+| ulm_custom_chip_group_counter_hide_if_zero | false | No | Hide chip if no entities are active. |
+| ulm_custom_chip_group_counter_type | light | No | Specify the type of entities, used for translation |
+| ulm_custom_chip_group_counter_count_state | on | No | States that should be counted |
+| ulm_custom_chip_group_counter_color | yellow | Yes | Color of the icon 1.0.0
+ Initial release +Can choose between: `blue`, `red`, `green`, `yellow`, `pink`, `purple`
| +| ulm_custom_chip_group_counter_icon_zero | mdi:lightbulb-outline | No | Icon when no entity's state is satisfied | +| ulm_custom_chip_group_counter_icon_one | mdi:lightbulb-on-outline | No | Icon when one entity's state is satisfied | +| ulm_custom_chip_group_counter_icon_multiple | mdi:lightbulb-on-outline | No | Icon when multiple entities state is satisfied | + +## Usage + +### Minimal config 1 + +The entities active within the group will only go one level down. If you have a group with a group the subgroup will only be treated as a single entity. + +```yaml +- type: 'custom:button-card' + template: 'custom_chip_group_counter' + entity: 'lights.living_room' +``` + +### Minimal config 2 + +This configuration can be used if you have a sensor that should represent the state. This can be good if you have groups within groups and the calculation is happening outside this card. The entity must still be set and should represent all the entities that should be toggled on press. + +```yaml +- type: 'custom:button-card' + template: 'custom_chip_group_counter' + entity: 'light.all' + variables: + ulm_custom_chip_group_counter_entities_active: 'sensor.lights_on' +``` + +### Full config 2 + +```yaml +- type: 'custom:button-card' + template: 'custom_chip_group_counter' + entity: 'light.all' + variables: + ulm_custom_chip_group_counter_hide_if_zero: true + ulm_custom_chip_group_counter_type: speaker + ulm_custom_chip_group_counter_count_state: + - 'playing' + - 'buffering' + ulm_custom_chip_group_counter_color: green + ulm_custom_chip_group_counter_icon_zero: 'mdi:speaker' + ulm_custom_chip_group_counter_icon_one: 'mdi:speaker' + ulm_custom_chip_group_counter_icon_multiple: 'mdi:speaker-multiple' +``` + +## Template code + +??? note "Template Code" + + ```yaml title="custom_chip_group_counter.yaml" + --8<-- "custom_cards/custom_chip_group_counter/custom_chip_group_counter.yaml" + ``` diff --git a/custom_cards/custom_chip_group_counter/custom_chip_group_counter.yaml b/custom_cards/custom_chip_group_counter/custom_chip_group_counter.yaml new file mode 100644 index 000000000..d616ed40c --- /dev/null +++ b/custom_cards/custom_chip_group_counter/custom_chip_group_counter.yaml @@ -0,0 +1,100 @@ +--- +### Custom Chip Group Counter ### +custom_chip_group_counter: + template: + - "chips" + - "custom_chip_group_counter_language_variables" + variables: + ulm_custom_chip_group_counter_icon_zero: "mdi:lightbulb-outline" + ulm_custom_chip_group_counter_icon_one: "mdi:lightbulb-on-outline" + ulm_custom_chip_group_counter_icon_multiple: "mdi:lightbulb-on-outline" + ulm_custom_chip_group_counter_color: "yellow" + ulm_custom_chip_group_counter_count_state: "on" + ulm_custom_chip_group_counter_type: "light" + ulm_custom_chip_group_counter_hide_if_zero: false + tap_action: + action: "toggle" + triggers_update: "all" + show_icon: true + icon: | + [[[ + let entities_active = 0; + if(variables.ulm_custom_chip_group_counter_entities_active) { + entities_active = states[variables.ulm_custom_chip_group_counter_entities_active].state; + } else { + entities_active = states[ + entity.entity_id + ].attributes.entity_id.filter((child_entity_id) => { + return variables.ulm_custom_chip_group_counter_count_state.includes(states[child_entity_id]?.state); + }).length; + } + + if (entities_active == 0) { + return variables.ulm_custom_chip_group_counter_icon_zero; + } else if (entities_active == 1) { + return variables.ulm_custom_chip_group_counter_icon_one; + } else { + return variables.ulm_custom_chip_group_counter_icon_multiple; + } + ]]] + label: | + [[[ + let entities_active = 0; + if(variables.ulm_custom_chip_group_counter_entities_active) { + entities_active = states[variables.ulm_custom_chip_group_counter_entities_active].state; + } else { + entities_active = states[ + entity.entity_id + ].attributes.entity_id.filter((child_entity_id) => { + return variables.ulm_custom_chip_group_counter_count_state.includes(states[child_entity_id]?.state); + }).length; + } + + const type = variables.ulm_custom_chip_group_counter_type; + const plural_typ = entities_active == 0 ? "zero" : entities_active == 1 ? "one" : "multiple"; + const translation_path = `custom_chip_group_counter_${type}_${plural_typ}` + return variables[translation_path].replace('{count}', entities_active); + ]]] + styles: + card: + - display: | + [[[ + let entities_active = 0; + if(variables.ulm_custom_chip_group_counter_entities_active) { + entities_active = states[variables.ulm_custom_chip_group_counter_entities_active].state; + } else { + entities_active = states[ + entity.entity_id + ].attributes.entity_id.filter((child_entity_id) => { + return variables.ulm_custom_chip_group_counter_count_state.includes(states[child_entity_id]?.state); + }).length; + } + + if(variables.ulm_custom_chip_group_counter_hide_if_zero && entities_active == 0){ + return "none"; + } + return "block"; + ]]] + grid: + - grid-template-areas: "'i l'" + icon: + - color: | + [[[ + let entities_active = 0; + if(variables.ulm_custom_chip_group_counter_entities_active) { + entities_active = states[variables.ulm_custom_chip_group_counter_entities_active].state; + } else { + entities_active = states[ + entity.entity_id + ].attributes.entity_id.filter((child_entity_id) => { + return variables.ulm_custom_chip_group_counter_count_state.includes(states[child_entity_id]?.state); + }).length; + } + + if (entities_active == 0) { + return 'rgba(var(--color-theme),0.2)'; + } + else { + return 'rgba(var(--color-' + variables.ulm_custom_chip_group_counter_color + '),1)'; + } + ]]] diff --git a/custom_cards/custom_chip_group_counter/languages/en.yaml b/custom_cards/custom_chip_group_counter/languages/en.yaml new file mode 100644 index 000000000..14d638faf --- /dev/null +++ b/custom_cards/custom_chip_group_counter/languages/en.yaml @@ -0,0 +1,18 @@ +--- +custom_chip_group_counter_language_variables: + variables: + custom_chip_group_counter_light_zero: "No lights" + custom_chip_group_counter_light_one: "One light" + custom_chip_group_counter_light_multiple: "{count} lights" + + custom_chip_group_counter_media_player_zero: "No media players" + custom_chip_group_counter_media_player_one: "One media player" + custom_chip_group_counter_media_player_multiple: "{count} media players" + + custom_chip_group_counter_speaker_zero: "No speakers" + custom_chip_group_counter_speaker_one: "One speaker" + custom_chip_group_counter_speaker_multiple: "{count} speakers" + + custom_chip_group_counter_television_zero: "No TVs" + custom_chip_group_counter_television_one: "One TV" + custom_chip_group_counter_television_multiple: "{count} TVs" diff --git a/custom_cards/custom_chip_group_counter/languages/sv.yaml b/custom_cards/custom_chip_group_counter/languages/sv.yaml new file mode 100644 index 000000000..3ada20aba --- /dev/null +++ b/custom_cards/custom_chip_group_counter/languages/sv.yaml @@ -0,0 +1,18 @@ +--- +custom_chip_group_counter_language_variables: + variables: + custom_chip_group_counter_light_zero: "Inga lampor" + custom_chip_group_counter_light_one: "En lampa" + custom_chip_group_counter_light_multiple: "{count} lampor" + + custom_chip_group_counter_media_player_zero: "Inga mediaspelare" + custom_chip_group_counter_media_player_one: "En mediaspelare" + custom_chip_group_counter_media_player_multiple: "{count} mediaspelare" + + custom_chip_group_counter_speaker_zero: "Inga högtalare" + custom_chip_group_counter_speaker_one: "En högtalare" + custom_chip_group_counter_speaker_multiple: "{count} högtalare" + + custom_chip_group_counter_television_zero: "Inga TV:ar" + custom_chip_group_counter_television_one: "En TV" + custom_chip_group_counter_television_multiple: "{count} TV:ar" diff --git a/custom_cards/custom_chip_tesla_temperature/README.md b/custom_cards/custom_chip_tesla_temperature/README.md new file mode 100644 index 000000000..5116dd7b4 --- /dev/null +++ b/custom_cards/custom_chip_tesla_temperature/README.md @@ -0,0 +1,85 @@ +# Custom-chip `Tesla Temperature` + + + +## Information + +Custom-chip `Tesla Temperature` is a chip showing the status of set temperature and current inside temperature. + +## Changelog + +
+
+
+## Usage
+
+```yaml
+- type: "custom:button-card"
+ template: custom_chip_tesla_temperature
+ variables:
+ ulm_chip_hvac: climate.tesla_hvac_climate_system
+```
+
+## Requirements
+
+[UI Lovelace Minimalist](https://github.com/UI-Lovelace-Minimalist/UI)
+
+[Tesla Custom Integration](https://github.com/alandtse/tesla)
+
+## Variables
+
+1.0.0
+Initial release +| Variable | +Default | +Required | +Explanation | +
|---|---|---|---|
| ulm_chip_hvac | ++ | Yes | +Tesla hvac entity | +
+
+
+## Usage
+
+```yaml
+ - type: 'custom:button-card'
+ template: chip_garage
+ entity: cover.garage_door
+```
+
+## Requirements
+
+[UI Lovelace Minimalist](https://github.com/UI-Lovelace-Minimalist/UI)
+
+## Variables
+
+| Variable | Default | Required | Notes |
+| ----------------------- | ------- | ---------------- | -------------------------- |
+| entity | | Yes | Garage door entity |
+
+## Template code
+
+??? note "Template Code"
+
+ ```yaml title="custom_chip_vlape_garage.yaml"
+ --8<-- "custom_cards/custom_chip_vlape_garage/custom_chip_vlape_garage.yaml"
+ ```
diff --git a/custom_cards/custom_chip_vlape_garage/custom_chip_vlape_garage.yaml b/custom_cards/custom_chip_vlape_garage/custom_chip_vlape_garage.yaml
new file mode 100644
index 000000000..b7f841496
--- /dev/null
+++ b/custom_cards/custom_chip_vlape_garage/custom_chip_vlape_garage.yaml
@@ -0,0 +1,29 @@
+---
+### custom_chip_vlape_garage ###
+chip_garage:
+ template:
+ - "chip_icon_label"
+ - "ulm_translation_engine"
+ label: "[[[ return variables.ulm_translation_state ]]]"
+ icon: |
+ [[[
+ var state = entity.state.toLowerCase();
+ var garage_icon = {
+ "default": "mdi:garage",
+ "closed": "mdi:garage",
+ "open": "mdi:garage-open"
+ }
+ return (garage_icon[state] || garage_icon["default"]);
+ ]]]
+ styles:
+ icon:
+ - color: |
+ [[[
+ var state = entity.state.toLowerCase();
+ var garage_color = {
+ "default": "var(--google-green)",
+ "closed": "var(--google-green)",
+ "open": "var(--google-red)"
+ }
+ return (garage_color[state] || garage_color["default"]);
+ ]]]
diff --git a/custom_cards/custom_template_shogun160_battery_info/custom_template_shogun160_battery_info.yaml b/custom_cards/custom_template_shogun160_battery_info/custom_template_shogun160_battery_info.yaml
index a7add6fd0..b1575fb17 100644
--- a/custom_cards/custom_template_shogun160_battery_info/custom_template_shogun160_battery_info.yaml
+++ b/custom_cards/custom_template_shogun160_battery_info/custom_template_shogun160_battery_info.yaml
@@ -18,7 +18,7 @@ battery_info:
const battery = Math.round((states[variables.ulm_battery_entity].state)/1);
const radius = 20.5; const circumference = radius * 2 * Math.PI;
return `