From 64ebe875db41ed2e5742a0b0e9724acde2bcc7bb Mon Sep 17 00:00:00 2001 From: renemarc Date: Mon, 12 Feb 2018 20:29:09 -0500 Subject: [PATCH 01/10] Add horizontal line UI element --- README.md | 7 +++ configuration.yaml | 2 + customize.yaml | 52 ++++++++++-------- customize_glob.yaml | 2 + groups/switchboard.yaml | 2 + sensors/misc.yaml | 17 +++++- www/custom_ui/README.md | 7 +++ www/custom_ui/state-card-hline.html | 67 ++++++++++++++++++++++++ www/custom_ui/state-card-value_only.html | 4 -- 9 files changed, 132 insertions(+), 28 deletions(-) create mode 100644 www/custom_ui/README.md create mode 100644 www/custom_ui/state-card-hline.html diff --git a/README.md b/README.md index 858c86c..c1a8949 100644 --- a/README.md +++ b/README.md @@ -172,6 +172,13 @@ Configuration for Home Assistant running Hass.io on a Raspberry Pi for a one bed - **[RTL_433 to MQTT Bridge](https://github.com/james-fry/hassio-addons/)** to receive and decode AcuRite radio signals. - **[Samba share](https://home-assistant.io/addons/samba/)** for configuration file sharing. +### Community components and widgets +- **[Custom UI elements](https://github.com/andrey-git/home-assistant-custom-ui)** to improve the display of sensors and jazz up the interface a bit. +- **[Horizontal line state card](https://github.com/covrig/homeassistant-hline)** to visually separate long lists of sensors. +- **[Text-only state card](https://community.home-assistant.io/t/display-only-text-in-card/20536/26)** for wordy sensor states. +- **[Nanoleaf Aurora](https://github.com/software-2/ha-aurora)** ([Fork](https://github.com/Oro/home-assistant/tree/light-aurora)) component. +- **[Lightpack](https://github.com/kklemm91/Lightpack-HASS)** component. + ## Thanks Kudos to: diff --git a/configuration.yaml b/configuration.yaml index ceb3ab5..a52f13d 100644 --- a/configuration.yaml +++ b/configuration.yaml @@ -28,9 +28,11 @@ frontend: # javascript_version: es5 extra_html_url: - /local/custom_ui/state-card-custom-ui.html + - /local/custom_ui/state-card-hline.html - /local/custom_ui/state-card-value_only.html extra_html_url_es5: - /local/custom_ui/state-card-custom-ui-es5.html + - /local/custom_ui/state-card-hline.html - /local/custom_ui/state-card-value_only.html # Enables configuration UI diff --git a/customize.yaml b/customize.yaml index 209ba6c..7d818a3 100644 --- a/customize.yaml +++ b/customize.yaml @@ -251,39 +251,24 @@ light.underbed: pin: true report_when_not_changed: false + # # Sensors. # -sensor.bedroom_multisensor_battery: - group: - group.battery: - friendly_name: Bedroom - icon: mdi:hotel - group.bedroom: - friendly_name: Multisensor Battery -sensor.front_door_sensor_battery: - group: - group.battery: - friendly_name: Front Door - icon: mdi:door - group.kitchen: - friendly_name: Front Door Battery -sensor.lounge_multisensor_battery: - group: - group.battery: - friendly_name: Lounge - icon: mdi:sofa - group.lounge: - friendly_name: Multisensor Battery sensor.bing_wallpaper_info: custom_ui_state_card: state-card-value_only sensor.date_friendly: extra_data_template: >- ${entities['sensor.day'].state} +sensor.hline_dashed: + config: + width: 90 + height: 0 + backgroundcolor: inherit + bordertop: '1px dashed silver' sensor.good_vibes: custom_ui_state_card: state-card-value_only - # Sensors: Climate. sensor.average_humidity: group: @@ -365,6 +350,29 @@ sensor.uv_friendly: extra_badge: entity_id: sensor.uv +# Sensors: Power. +sensor.bedroom_multisensor_battery: + group: + group.battery: + friendly_name: Bedroom + icon: mdi:hotel + group.bedroom: + friendly_name: Multisensor Battery +sensor.front_door_sensor_battery: + group: + group.battery: + friendly_name: Front Door + icon: mdi:door + group.kitchen: + friendly_name: Front Door Battery +sensor.lounge_multisensor_battery: + group: + group.battery: + friendly_name: Lounge + icon: mdi:sofa + group.lounge: + friendly_name: Multisensor Battery + # Sensors: System. sensor.cpu_used: friendly_name: CPU Load diff --git a/customize_glob.yaml b/customize_glob.yaml index 7a57635..09212bd 100644 --- a/customize_glob.yaml +++ b/customize_glob.yaml @@ -57,6 +57,8 @@ sensor.*_fan: group: group.bedroom: friendly_name: Fan +sensor.hline_*: + custom_ui_state_card: state-card-hline sensor.*_humidity: group: group.bedroom: diff --git a/groups/switchboard.yaml b/groups/switchboard.yaml index 9184f8a..1cbe50e 100644 --- a/groups/switchboard.yaml +++ b/groups/switchboard.yaml @@ -29,6 +29,7 @@ bedroom: - input_select.bed_effect - light.underbed - light.headboard + - sensor.hline_dashed - switch.nightstand_light - switch.bedside_light - switch.bedroom_fan @@ -56,6 +57,7 @@ lounge: entities: - input_select.aurora_effect - light.aurora + - sensor.hline_dashed - light.spotlight - light.lightpack - switch.souvenirs_light diff --git a/sensors/misc.yaml b/sensors/misc.yaml index 8d18e1b..b49a44f 100644 --- a/sensors/misc.yaml +++ b/sensors/misc.yaml @@ -1,7 +1,20 @@ # -# Random positive quotes +# Horizontal lines, for cosmetic separation of sensors in the UI. # -# see: http://www.lifestalker.com/2017/04/four-word-quotes.html +# Actual styling is done in `customize.yaml` and `customize_glob.yaml`. +# +# @see: https://github.com/covrig/homeassistant-hline +# +- platform: template + sensors: + hline_dashed: + value_template: hline + + +# +# Random positive quotes, to brighten up the day! +# +# @see: http://www.lifestalker.com/2017/04/four-word-quotes.html # - platform: template sensors: diff --git a/www/custom_ui/README.md b/www/custom_ui/README.md new file mode 100644 index 0000000..53e2b7d --- /dev/null +++ b/www/custom_ui/README.md @@ -0,0 +1,7 @@ +# Custom UI state cards + +These third-party state cards are used to adapt the looks of Home Assistant sensors for easier information consumption. + +- **[Custom UI elements](https://github.com/andrey-git/home-assistant-custom-ui)** to improve the display of sensors and jazz up the interface a bit. +- **[Horizontal line state card](https://github.com/covrig/homeassistant-hline)** to visually separate long lists of sensors. +- **[Text-only state card](https://community.home-assistant.io/t/display-only-text-in-card/20536/26)** for wordy sensor states. diff --git a/www/custom_ui/state-card-hline.html b/www/custom_ui/state-card-hline.html new file mode 100644 index 0000000..229cae9 --- /dev/null +++ b/www/custom_ui/state-card-hline.html @@ -0,0 +1,67 @@ + + + + + + diff --git a/www/custom_ui/state-card-value_only.html b/www/custom_ui/state-card-value_only.html index aed3b2b..9ea53d1 100644 --- a/www/custom_ui/state-card-value_only.html +++ b/www/custom_ui/state-card-value_only.html @@ -1,7 +1,3 @@ - -