diff --git a/config/README.md b/config/README.md index c3d9e0a..afff3e7 100644 --- a/config/README.md +++ b/config/README.md @@ -37,15 +37,15 @@ https://github.com/ngocjohn/hass-config/assets/96962827/acc1a4db-b92e-4ab1-ac9d- - 36,209 + 36,233 32 164 63 54 32 - 1070 + 1071 215 - 37 + 38 diff --git a/config/custom_components/browser_mod/manifest.json b/config/custom_components/browser_mod/manifest.json index f74e200..116a060 100644 --- a/config/custom_components/browser_mod/manifest.json +++ b/config/custom_components/browser_mod/manifest.json @@ -13,5 +13,5 @@ "documentation": "https://github.com/thomasloven/hass-browser_mod/blob/master/README.md", "iot_class": "local_push", "requirements": [], - "version": "2.3.2" + "version": "2.3.3" } \ No newline at end of file diff --git a/config/dashboards/shared/popup/airpurifier.yaml b/config/dashboards/shared/popup/airpurifier.yaml index fcceeef..a220736 100755 --- a/config/dashboards/shared/popup/airpurifier.yaml +++ b/config/dashboards/shared/popup/airpurifier.yaml @@ -3,144 +3,146 @@ browser_mod: service: browser_mod.popup data: title: Air Purifier - style: !include ../snippets/style_footer_transparent.yaml - card_mod: !include ../snippets/style_popup_footer.yaml + style: > + --max-popup-column: 3; content: - type: custom:layout-card - layout_type: custom:grid-layout - layout: !include ../snippets/popup_footer_layout.yaml - cards: - ################################################# - # # - # AIR PURIFIERS # - # # - ################################################# - - type: entities - title: Living Room - show_header_toggle: false - card_mod: - class: header - entities: - - type: custom:purifier-card - entity: fan.dyson_ph04 - show_name: false - show_state: true - show_toolbar: true - compact_view: false - aqi: - entity_id: sensor.dyson_ph04_pm_2_5 - unit: µg/m³ - stats: - - entity_id: sensor.dyson_ph04_filter_life - subtitle: Filter life - unit: '%' - - attribute: percentage - subtitle: Level - unit: '%' - - entity_id: switch.dyson_ph04_night_mode - subtitle: Night Mode - shortcuts: - - name: Auto - icon: mdi:fan-auto - preset_mode: Auto - - name: 30% - icon: mdi:fan-speed-1 - percentage: 30 - - name: 50% - icon: mdi:fan-speed-2 - percentage: 50 - - name: 70% - icon: mdi:fan-speed-3 - percentage: 70 - - name: 100% - icon: mdi:weather-tornado - percentage: 100 - - - type: entities - title: Bedroom - show_header_toggle: false - card_mod: - class: header - entities: - - type: custom:purifier-card - entity: fan.zhimi_mb3_8b86_air_purifier - stats: - - entity_id: sensor.zhimi_mb3_8b86_filter_life_level - unit: '%' - subtitle: Filter Remaining - - entity_id: sensor.zhimi_mb3_8b86_motor_speed - unit: RPM - subtitle: Motor Speed - shortcuts: - - name: Sleep - icon: mdi:weather-night - preset_mode: Sleep - - name: 33% - icon: mdi:fan-speed-1 - percentage: 33 - - name: 66% - icon: mdi:fan-speed-2 - percentage: 66 - - name: 100% - icon: mdi:fan-speed-3 - percentage: 100 - - name: Auto - icon: mdi:fan-auto - preset_mode: Auto - show_name: false - show_state: true - show_toolbar: true - compact_view: false - aqi: - entity_id: sensor.zhimi_mb3_8b86_pm25 - unit: µg/m³ - - type: entities - title: Office - show_header_toggle: false - card_mod: - class: header - entities: - - type: custom:purifier-card - entity: fan.zhimi_mb4_b008_air_purifier - stats: - - entity_id: sensor.zhimi_mb4_b008_filter_life_level - unit: '%' - subtitle: Filter Remaining - - entity_id: sensor.zhimi_mb4_b008_moto_speed_rpm - unit: RPM - subtitle: Motor Speed - shortcuts: - - name: Silent - icon: mdi:weather-night - preset_mode: Silent - - name: 50% - icon: mdi:fan-speed-1 - preset_mode: Favorite - service: number.set_value - service_data: - entity_id: number.zhimi_mb4_b008_favorite_speed - value: '1300' - - name: 75% - icon: mdi:fan-speed-2 - preset_mode: Favorite - service: number.set_value - service_data: - entity_id: number.zhimi_mb4_b008_favorite_speed - value: '1700' - - name: 100% - icon: mdi:fan-speed-3 - preset_mode: Favorite - service: number.set_value - service_data: - entity_id: number.zhimi_mb4_b008_favorite_speed - value: '2200' - - name: Auto - icon: mdi:fan-auto - preset_mode: Auto - show_name: false - show_state: true - show_toolbar: true - compact_view: false - aqi: - entity_id: sensor.zhimi_mb4_b008_pm25_density - unit: µg/m³ + type: custom:mod-card + card_mod: !include ../snippets/style_popup_footer.yaml + card: + type: custom:layout-card + layout_type: custom:grid-layout + layout: !include ../snippets/popup_footer_layout.yaml + cards: + ################################################# + # # + # AIR PURIFIERS # + # # + ################################################# + - type: entities + title: Living Room + show_header_toggle: false + card_mod: + class: header + entities: + - type: custom:purifier-card + entity: fan.dyson_ph04 + show_name: false + show_state: true + show_toolbar: true + compact_view: false + aqi: + entity_id: sensor.dyson_ph04_pm_2_5 + unit: µg/m³ + stats: + - entity_id: sensor.dyson_ph04_filter_life + subtitle: Filter life + unit: '%' + - attribute: percentage + subtitle: Level + unit: '%' + - entity_id: switch.dyson_ph04_night_mode + subtitle: Night Mode + shortcuts: + - name: Auto + icon: mdi:fan-auto + preset_mode: Auto + - name: 30% + icon: mdi:fan-speed-1 + percentage: 30 + - name: 50% + icon: mdi:fan-speed-2 + percentage: 50 + - name: 70% + icon: mdi:fan-speed-3 + percentage: 70 + - name: 100% + icon: mdi:weather-tornado + percentage: 100 + - type: entities + title: Bedroom + show_header_toggle: false + card_mod: + class: header + entities: + - type: custom:purifier-card + entity: fan.zhimi_mb3_8b86_air_purifier + stats: + - entity_id: sensor.zhimi_mb3_8b86_filter_life_level + unit: '%' + subtitle: Filter Remaining + - entity_id: sensor.zhimi_mb3_8b86_motor_speed + unit: RPM + subtitle: Motor Speed + shortcuts: + - name: Sleep + icon: mdi:weather-night + preset_mode: Sleep + - name: 33% + icon: mdi:fan-speed-1 + percentage: 33 + - name: 66% + icon: mdi:fan-speed-2 + percentage: 66 + - name: 100% + icon: mdi:fan-speed-3 + percentage: 100 + - name: Auto + icon: mdi:fan-auto + preset_mode: Auto + show_name: false + show_state: true + show_toolbar: true + compact_view: false + aqi: + entity_id: sensor.zhimi_mb3_8b86_pm25 + unit: µg/m³ + - type: entities + title: Office + show_header_toggle: false + card_mod: + class: header + entities: + - type: custom:purifier-card + entity: fan.zhimi_mb4_b008_air_purifier + stats: + - entity_id: sensor.zhimi_mb4_b008_filter_life_level + unit: '%' + subtitle: Filter Remaining + - entity_id: sensor.zhimi_mb4_b008_moto_speed_rpm + unit: RPM + subtitle: Motor Speed + shortcuts: + - name: Silent + icon: mdi:weather-night + preset_mode: Silent + - name: 50% + icon: mdi:fan-speed-1 + preset_mode: Favorite + service: number.set_value + service_data: + entity_id: number.zhimi_mb4_b008_favorite_speed + value: '1300' + - name: 75% + icon: mdi:fan-speed-2 + preset_mode: Favorite + service: number.set_value + service_data: + entity_id: number.zhimi_mb4_b008_favorite_speed + value: '1700' + - name: 100% + icon: mdi:fan-speed-3 + preset_mode: Favorite + service: number.set_value + service_data: + entity_id: number.zhimi_mb4_b008_favorite_speed + value: '2200' + - name: Auto + icon: mdi:fan-auto + preset_mode: Auto + show_name: false + show_state: true + show_toolbar: true + compact_view: false + aqi: + entity_id: sensor.zhimi_mb4_b008_pm25_density + unit: µg/m³ diff --git a/config/dashboards/shared/popup/all_lights.yaml b/config/dashboards/shared/popup/all_lights.yaml index d090324..fe07075 100755 --- a/config/dashboards/shared/popup/all_lights.yaml +++ b/config/dashboards/shared/popup/all_lights.yaml @@ -11,6 +11,7 @@ browser_mod: card_mod: style: .: | + content: type: custom:auto-entities filter: diff --git a/config/dashboards/shared/popup/calendar.yaml b/config/dashboards/shared/popup/calendar.yaml index 9ad82fa..e30d894 100644 --- a/config/dashboards/shared/popup/calendar.yaml +++ b/config/dashboards/shared/popup/calendar.yaml @@ -3,6 +3,8 @@ browser_mod: service: browser_mod.popup data: title: Calendar + style: > + --max-popup-column: 2; card_mod: !include ../snippets/style_popup_footer.yaml content: type: custom:layout-card @@ -41,24 +43,115 @@ browser_mod: .cal-card { padding: 0px !important; } - - type: custom:atomic-calendar-revive - enableModeChange: true - entities: - - entity: calendar.ceske_statni_svatky - name: České státní svátky - - entity: calendar.home_assistant_devs - name: Home assistant devs - - entity: calendar.personal - name: Personal - - entity: calendar.ram_va_mung_mot_2020_2040_hass_konnected - name: Lunar - defaultMode: Event - europeanDate: true - showFullDayProgress: true - showDatePerEvent: true - showWeekNumber: true + - type: entities + title: Lunar Phase + card_mod: + class: header nopadding + entities: + - type: custom:lunar-phase-card card_mod: - style: | - ha-card { - padding: 4px !important; - } + style: + .: | + ha-card { + background-color: transparent !important; + justify-content: flex-start !important; + box-shadow: none !important; + } + lunar-base-data $: | + .swiper-container { + backdrop-filter: none !important; + } + entity: '' + 12hr_format: false + calendar_modal: false + compact_view: false + default_card: base + hide_buttons: true + mile_unit: false + moon_position: left + number_decimals: 2 + selected_language: en + show_background: false + southern_hemisphere: false + use_custom: false + use_default: true + use_entity: false + graph_config: + graph_type: default + y_ticks: false + x_ticks: true + show_time: true + show_current: true + show_highest: true + y_ticks_position: left + y_ticks_step_size: 30 + time_step_size: 30 + show_legend: true + legend_position: top + legend_align: center + font_customize: + header_font_size: x-large + header_font_style: capitalize + header_font_color: '' + label_font_size: auto + label_font_style: none + label_font_color: '' + hide_label: false + hide_header: true + latitude: 50.060362328075634 + longitude: 14.399342536926271 + location: + city: Capital City of Prague + country: Czechia + custom_background: >- + https://cdn.jsdelivr.net/gh/ngocjohn/lunar-phase-card@1.7.3/background/moon_bg_1.png + footer: + type: custom:lunar-phase-card + entity: '' + 12hr_format: false + calendar_modal: false + compact_view: true + default_card: horizon + hide_buttons: true + mile_unit: false + moon_position: left + number_decimals: 2 + selected_language: en + show_background: false + southern_hemisphere: false + use_custom: false + use_default: true + use_entity: false + graph_config: + graph_type: dynamic + y_ticks: false + x_ticks: true + show_time: true + show_current: true + show_highest: true + y_ticks_position: left + y_ticks_step_size: 30 + time_step_size: 30 + show_legend: true + legend_position: top + legend_align: center + font_customize: + header_font_size: x-large + header_font_style: capitalize + header_font_color: '' + label_font_size: auto + label_font_style: none + label_font_color: '' + hide_label: false + hide_header: true + latitude: 50.060362328075634 + longitude: 14.399342536926271 + location: + city: Capital City of Prague + country: Czechia + card_mod: + style: | + ha-card { + background-color: transparent !important; + box-shadow: none !important; + } diff --git a/config/dashboards/shared/popup/footer/footer_mbproserver.yaml b/config/dashboards/shared/popup/footer/footer_mbproserver.yaml index 38ee5e1..c2e751c 100644 --- a/config/dashboards/shared/popup/footer/footer_mbproserver.yaml +++ b/config/dashboards/shared/popup/footer/footer_mbproserver.yaml @@ -3,96 +3,98 @@ browser_mod: service: browser_mod.popup data: title: MBPro Server - card_mod: !include ../../snippets/style_popup_footer.yaml content: - type: custom:layout-card - layout_type: custom:grid-layout - layout: !include ../../snippets/popup_footer_layout.yaml - cards: - ################################################# - # # - # HOME ASSISTANT # - # # - ################################################# - - type: entities - title: ' ' - show_header_toggle: false - entities: - - entity: binary_sensor.macbookpro - name: Active - state_color: true - - entity: sensor.mbproserver_connection_type - name: Connection - - entity: sensor.mbpro_uptime_usage - name: Uptime - - type: custom:bar-card - width: 55% - height: 2em - decimal: 0 - unit_of_measurement: '%' - positions: &bar_card_positions - icon: outside - indicator: 'off' - name: outside - severity: &bar_card_severity - - color: '#9da0a2' - from: 0 - to: 59 - - color: '#9da0a2' - from: 60 - to: 100 - entity_row: true + type: custom:mod-card + card_mod: !include ../../snippets/style_popup_footer.yaml + card: + type: custom:layout-card + layout_type: custom:grid-layout + layout: !include ../../snippets/popup_footer_layout.yaml + cards: + ################################################# + # # + # HOME ASSISTANT # + # # + ################################################# + - type: entities + title: ' ' + show_header_toggle: false + entities: + - entity: binary_sensor.macbookpro + name: Active + state_color: true + - entity: sensor.mbproserver_connection_type + name: Connection + - entity: sensor.mbpro_uptime_usage + name: Uptime + - type: custom:bar-card + width: 55% + height: 2em + decimal: 0 + unit_of_measurement: '%' + positions: &bar_card_positions + icon: outside + indicator: 'off' + name: outside + severity: &bar_card_severity + - color: '#9da0a2' + from: 0 + to: 59 + - color: '#9da0a2' + from: 60 + to: 100 + entity_row: true + entities: + - entity: sensor.mbpro_cpu_usage + name: Processor + - entity: sensor.mbpro_memory_usage + name: Memory + - type: custom:hui-horizontal-stack-card + cards: + - type: custom:button-card + name: Lock + icon: mdi:lock + tap_action: + action: call-service + service: shell_command.lock_mbpro + template: icon_name + - type: custom:button-card + name: Sleep + icon: mdi:power-sleep + tap_action: + action: call-service + service: shell_command.sleep_mbpro + template: icon_name + footer: + type: custom:mini-graph-card + # name: Speedtest + tap_action: + action: call-service + service: homeassistant.update_entity + service_data: + entity_id: sensor.mbpro_cpu_usage entities: - entity: sensor.mbpro_cpu_usage name: Processor + color: '#00bb33' - entity: sensor.mbpro_memory_usage name: Memory - - type: custom:hui-horizontal-stack-card - cards: - - type: custom:button-card - name: Lock - icon: mdi:lock - tap_action: - action: call-service - service: shell_command.lock_mbpro - template: icon_name - - type: custom:button-card - name: Sleep - icon: mdi:power-sleep - tap_action: - action: call-service - service: shell_command.sleep_mbpro - template: icon_name - footer: - type: custom:mini-graph-card - # name: Speedtest - tap_action: - action: call-service - service: homeassistant.update_entity - service_data: - entity_id: sensor.mbpro_cpu_usage - entities: - - entity: sensor.mbpro_cpu_usage - name: Processor - color: '#00bb33' - - entity: sensor.mbpro_memory_usage - name: Memory - show_state: false - color: '#2196f3' - y_axis: secondary - hours_to_show: 48 - hour24: true - line_width: 3 - animate: true - # upper_bound_secondary: 100 - show: - name: false - icon: false - state: false - legend: false - fill: fade - labels: true - labels_secondary: false - average: false - extrema: false - points: hover + show_state: false + color: '#2196f3' + y_axis: secondary + hours_to_show: 48 + hour24: true + line_width: 3 + animate: true + # upper_bound_secondary: 100 + show: + name: false + icon: false + state: false + legend: false + fill: fade + labels: true + labels_secondary: false + average: false + extrema: false + points: hover diff --git a/config/dashboards/shared/popup/footer/footer_network.yaml b/config/dashboards/shared/popup/footer/footer_network.yaml index 4471fd3..4c296b9 100755 --- a/config/dashboards/shared/popup/footer/footer_network.yaml +++ b/config/dashboards/shared/popup/footer/footer_network.yaml @@ -3,155 +3,158 @@ browser_mod: service: browser_mod.popup data: title: Network - - card_mod: !include ../../snippets/style_popup_footer.yaml + style: > + --max-popup-column: 2; content: - type: custom:layout-card - layout_type: custom:grid-layout - layout: !include ../../snippets/popup_footer_layout.yaml - cards: - ################################################# - # # - # UNIFI ACCES POINT # - # # - ################################################# - - type: entities - title: Access Points - show_header_toggle: false - card_mod: - class: header + type: custom:mod-card + card_mod: !include ../../snippets/style_popup_footer.yaml + card: + type: custom:layout-card + layout_type: custom:grid-layout + layout: !include ../../snippets/popup_footer_layout.yaml + cards: + ################################################# + # # + # UNIFI ACCES POINT # + # # + ################################################# + - type: entities + title: Access Points + show_header_toggle: false + card_mod: + class: header - entities: - - type: custom:tabbed-card - styles: # global styles applied to all tabs - --mdc-theme-primary: 'rgba(250, 250, 250, 0.75)' - --mdc-tab-text-label-color-default: '#97989c' - --mdc-typography-button-font-size: 1em - tabs: - - !include ../../hidden/ap_office.yaml - - !include ../../hidden/ap_bedroom.yaml - - !include ../../hidden/ap_wall.yaml - - type: divider - - type: custom:hui-horizontal-stack-card - cards: - - type: custom:button-card - name: Vodafone - icon: mdi:router-wireless - tap_action: - action: url - url_path: !secret router_url - template: icon_name - - type: custom:button-card - name: Unifi - icon: phu:ubiquiti-logo - template: - - icon_name - - > - [[[ - return window.navigator.userAgent.match(/iPhone/i) - ? 'unifi_ios' - : 'unifi_web'; - ]]] - - type: custom:button-card - name: ZigBee - icon: si:zigbee - tap_action: - action: fire-dom-event - browser_mod: - service: browser_mod.popup - data: - title: 'ZigBee map' - size: fullscreen - content: - type: iframe - url: /api/hassio_ingress/Ew2YSafnnerR2_NXuuOG-3KWDZvnNgFBSfdzoUmcR_Y/#/map - template: - - icon_name - ################################################# - # # - # UNIFI CONTROLLER # - # # - ################################################# - - type: entities - title: Router - show_header_toggle: false - card_mod: - class: header - entities: - - entity: binary_sensor.arris_tg3442de_wan_status - name: WAN Status - # - entity: sensor.external_ip - # - entity: binary_sensor.template_unifi_upgradable - # - entity: sensor.template_ap_adopted - - type: custom:multiple-entity-row - entity: sensor.unifi_controller_clients - icon: mdi:devices - name: 'Total Clients' - show_state: false - secondary_info: - entity: sensor.unifi_controller_clients - unit: true - entities: - - attribute: wifi0 - name: 2.4GhZ - unit: ' ' - - attribute: wifi1 - name: 5GhZ - unit: ' ' - - attribute: wired - name: Wired - unit: ' ' - - type: custom:multiple-entity-row - entity: binary_sensor.unifi_controller_alert - name: 'Alert' - state_color: true - show_state: true - secondary_info: - attribute: Message - entities: - - icon: mdi:archive-minus - tap_action: - action: call-service - confirmation: - text: Are you sure you want to archive? - service: input_button.press - service_data: - entity_id: input_button.unifi_archive_alerts - footer: - type: custom:mini-graph-card - name: Speedtest - tap_action: - action: call-service - service: homeassistant.update_entity - service_data: - entity_id: sensor.speedtest_download entities: - - entity: sensor.speedtest_download - name: Download - color: '#00bb33' - - entity: sensor.speedtest_upload - name: Upload - show_state: false - color: '#2196f3' - y_axis: secondary - hours_to_show: 48 - hour24: true - line_width: 3 - animate: true - upper_bound_secondary: 100 - show: - name: True - icon: false - state: true - legend: true - fill: fade - labels: true - labels_secondary: false - average: true - extrema: true - points: hover + - type: custom:tabbed-card + styles: # global styles applied to all tabs + --mdc-theme-primary: 'rgba(250, 250, 250, 0.75)' + --mdc-tab-text-label-color-default: '#97989c' + --mdc-typography-button-font-size: 1em + tabs: + - !include ../../hidden/ap_office.yaml + - !include ../../hidden/ap_bedroom.yaml + - !include ../../hidden/ap_wall.yaml + - type: divider + - type: custom:hui-horizontal-stack-card + cards: + - type: custom:button-card + name: Vodafone + icon: mdi:router-wireless + tap_action: + action: url + url_path: !secret router_url + template: icon_name + - type: custom:button-card + name: Unifi + icon: phu:ubiquiti-logo + template: + - icon_name + - > + [[[ + return window.navigator.userAgent.match(/iPhone/i) + ? 'unifi_ios' + : 'unifi_web'; + ]]] + - type: custom:button-card + name: ZigBee + icon: si:zigbee + tap_action: + action: fire-dom-event + browser_mod: + service: browser_mod.popup + data: + title: 'ZigBee map' + size: fullscreen + content: + type: iframe + url: /api/hassio_ingress/Ew2YSafnnerR2_NXuuOG-3KWDZvnNgFBSfdzoUmcR_Y/#/map + template: + - icon_name + ################################################# + # # + # UNIFI CONTROLLER # + # # + ################################################# + - type: entities + title: Router + show_header_toggle: false card_mod: - style: | - .info__item__time { - display: none !important; - } + class: header + entities: + - entity: binary_sensor.arris_tg3442de_wan_status + name: WAN Status + # - entity: sensor.external_ip + # - entity: binary_sensor.template_unifi_upgradable + # - entity: sensor.template_ap_adopted + - type: custom:multiple-entity-row + entity: sensor.unifi_controller_clients + icon: mdi:devices + name: 'Total Clients' + show_state: false + secondary_info: + entity: sensor.unifi_controller_clients + unit: true + entities: + - attribute: wifi0 + name: 2.4GhZ + unit: ' ' + - attribute: wifi1 + name: 5GhZ + unit: ' ' + - attribute: wired + name: Wired + unit: ' ' + - type: custom:multiple-entity-row + entity: binary_sensor.unifi_controller_alert + name: 'Alert' + state_color: true + show_state: true + secondary_info: + attribute: Message + entities: + - icon: mdi:archive-minus + tap_action: + action: call-service + confirmation: + text: Are you sure you want to archive? + service: input_button.press + service_data: + entity_id: input_button.unifi_archive_alerts + footer: + type: custom:mini-graph-card + name: Speedtest + tap_action: + action: call-service + service: homeassistant.update_entity + service_data: + entity_id: sensor.speedtest_download + entities: + - entity: sensor.speedtest_download + name: Download + color: '#00bb33' + - entity: sensor.speedtest_upload + name: Upload + show_state: false + color: '#2196f3' + y_axis: secondary + hours_to_show: 48 + hour24: true + line_width: 3 + animate: true + upper_bound_secondary: 100 + show: + name: True + icon: false + state: true + legend: true + fill: fade + labels: true + labels_secondary: false + average: true + extrema: true + points: hover + card_mod: + style: | + .info__item__time { + display: none !important; + } diff --git a/config/dashboards/shared/popup/footer/footer_router.yaml b/config/dashboards/shared/popup/footer/footer_router.yaml deleted file mode 100644 index cb4171b..0000000 --- a/config/dashboards/shared/popup/footer/footer_router.yaml +++ /dev/null @@ -1,74 +0,0 @@ -update_entities: - action: > - [[[ - hass.callService('homeassistant', 'update_entity', { - entity_id: [ - 'binary_sensor.template_internet' - ] - }); - ]]] -action: fire-dom-event -browser_mod: - service: browser_mod.popup - data: - title: Unifi Network - card_mod: - style: - #popup header - .: - content: - type: vertical-stack - cards: - - type: entities - state_color: true - card_mod: - class: content - entities: - - entity: binary_sensor.template_internet - secondary_info: last-changed - - entity: sensor.template_udm_cpu_temp - name: CPU Temperatur - # - type: custom:bar-card - # width: 55% - # height: 2em - # decimal: 0 - # unit_of_measurement: '%' - # positions: - # icon: outside - # indicator: 'off' - # name: outside - # severity: - # - color: '#6d2525' - # from: 90 - # to: 999 - # entity_row: true - # entities: - # - entity: sensor.template_udm_cpu - # - entity: sensor.template_udm_mem - # - entity: sensor.template_udm_disk - - entity: sensor.template_udm_uptime - - type: custom:mod-card - card_mod: - style: - hui-horizontal-stack-card$: | - #root { - justify-content: space-evenly !important; - padding: var(--tablet-popup-button-padding); - } - card: - type: horizontal-stack - cards: - - type: custom:button-card - name: Nätverksenheter - icon: mdi:devices - tap_action: - action: url - url_path: https://192.168.1.1/network/default/clients - template: icon_name - - type: custom:button-card - name: System - icon: mdi:cog - tap_action: - action: url - url_path: https://192.168.1.1/settings/system - template: icon_name diff --git a/config/dashboards/shared/popup/footer/footer_system.yaml b/config/dashboards/shared/popup/footer/footer_system.yaml index d881e11..6c14c31 100644 --- a/config/dashboards/shared/popup/footer/footer_system.yaml +++ b/config/dashboards/shared/popup/footer/footer_system.yaml @@ -3,195 +3,199 @@ browser_mod: service: browser_mod.popup data: title: System Information - card_mod: !include ../../snippets/style_popup_footer.yaml + style: > + --max-popup-column: 3; content: - type: custom:layout-card - layout_type: custom:grid-layout - layout: !include ../../snippets/popup_footer_layout.yaml - cards: - ################################################# - # # - # HOME ASSISTANT # - # # - ################################################# - - type: entities - title: Home Assistant - show_header_toggle: false - card_mod: - class: header - entities: - - entity: sensor.current_version - name: Installed - icon: mdi:home-assistant - # - entity: sensor.home_assistant_versions - # name: Latest - - entity: sensor.template_hass_next_release - - entity: sensor.ha_db - name: Database - icon: mdi:database - # - entity: sensor.home_assistant_log_size - # name: Logfile - # icon: mdi:file-document - # - type: attribute - # entity: sensor.backup_state - # attribute: last_backup - # name: Last backup - # icon: mdi:cloud-upload - # format: relative - - type: custom:bar-card - width: 55% - height: 2em - decimal: 0 - # unit_of_measurement: '%' - positions: &bar_card_positions - icon: outside - indicator: 'off' - name: outside - severity: &bar_card_severity - - color: '#9da0a2' - from: 0 - to: 59 - - color: '#6d2525' - from: 60 - to: 100 - entity_row: true - entities: - - entity: sensor.ha_system_cpu_usage - name: Processor - - entity: sensor.ha_system_cpu_thermal_0_temperature - name: Temperature - icon: mdi:thermostat - - entity: sensor.ha_system_memory_usage - name: Memory - icon: mdi:memory - - entity: sensor.ha_system_data_disk_usage - name: Disk used - icon: mdi:harddisk - - - type: custom:hui-horizontal-stack-card - cards: - - type: custom:button-card - name: Restart - icon: mdi:reload - tap_action: - action: call-service - confirmation: - text: Are you sure you want to restart? - service: homeassistant.restart - template: icon_name - - type: custom:button-card - name: Reload YAML - icon: mdi:reload - tap_action: - action: call-service - service: browser_mod.sequence - service_data: - sequence: - - service: browser_mod.notification - data: - message: Reload all YAML configuration... - - service: homeassistant.reload_all - template: icon_name - ################################################# - # # - # Raspberry Docker # - # # - ################################################# - - type: entities - title: Raspberry Docker - show_header_toggle: false - card_mod: - class: header - entities: - - entity: binary_sensor.192_168_0_146 - icon: si:docker - state_color: true - name: Raspberry Docker - - entity: switch.watchtower - - type: attribute - entity: sensor.rpi_monitor_docker - attribute: up_time - name: Uptime - icon: mdi:update - - type: custom:bar-card - width: 55% - height: 2em - decimal: 0 - positions: *bar_card_positions - severity: *bar_card_severity - entity_row: true - entities: - - entity: sensor.rpi_monitor_docker_rpi_cpu_use_pidocker - name: Processor - icon: mdi:chip - tap_action: - action: call-service - service: homeassistant.update_entity - service_data: - entity_id: sensor.rpi_monitor_docker_rpi_cpu_use_pidocker - - entity: sensor.rpi_monitor_docker_rpi_temp_pidocker - name: Temperature - icon: mdi:thermostat - - entity: sensor.rpi_monitor_docker_rpi_used_pidocker - name: Memory 4GB - icon: mdi:memory - tap_action: - action: call-service - service: homeassistant.update_entity - service_data: - entity_id: sensor.sensor.rpi_monitor_docker_rpi_used_pidocker - - entity: sensor.rpi_monitor_docker - type: attribute - attribute: fs_free_prcnt - name: SD used 32GB - icon: mdi:content-save - unit_of_measurement: '%' - tap_action: - action: call-service - service: homeassistant.update_entity - service_data: - entity_id: sensor.rpi_monitor_docker - - type: custom:hui-horizontal-stack-card - cards: - - type: custom:button-card - name: Reboot RPI - icon: mdi:reload - tap_action: - action: call-service - confirmation: - text: Are you sure you want to restart? - service: script.restart_pi_docker - template: icon_name - - type: custom:button-card - name: Purge logs - icon: mdi:archive-remove - tap_action: - action: call-service - service: script.purge_dockerlog - template: icon_name - ################################################# - # # - # CONTAINERS # - # # - ################################################# + type: custom:mod-card + card_mod: !include ../../snippets/style_popup_footer.yaml + card: + type: custom:layout-card + layout_type: custom:grid-layout + layout: !include ../../snippets/popup_footer_layout.yaml + cards: + ################################################# + # # + # HOME ASSISTANT # + # # + ################################################# + - type: entities + title: Home Assistant + show_header_toggle: false + card_mod: + class: header + entities: + - entity: sensor.current_version + name: Installed + icon: mdi:home-assistant + # - entity: sensor.home_assistant_versions + # name: Latest + - entity: sensor.template_hass_next_release + - entity: sensor.ha_db + name: Database + icon: mdi:database + # - entity: sensor.home_assistant_log_size + # name: Logfile + # icon: mdi:file-document + # - type: attribute + # entity: sensor.backup_state + # attribute: last_backup + # name: Last backup + # icon: mdi:cloud-upload + # format: relative + - type: custom:bar-card + width: 55% + height: 2em + decimal: 0 + # unit_of_measurement: '%' + positions: &bar_card_positions + icon: outside + indicator: 'off' + name: outside + severity: &bar_card_severity + - color: '#9da0a2' + from: 0 + to: 59 + - color: '#6d2525' + from: 60 + to: 100 + entity_row: true + entities: + - entity: sensor.ha_system_cpu_usage + name: Processor + - entity: sensor.ha_system_cpu_thermal_0_temperature + name: Temperature + icon: mdi:thermostat + - entity: sensor.ha_system_memory_usage + name: Memory + icon: mdi:memory + - entity: sensor.ha_system_data_disk_usage + name: Disk used + icon: mdi:harddisk - - type: custom:auto-entities - card: - type: entities - title: Containers + - type: custom:hui-horizontal-stack-card + cards: + - type: custom:button-card + name: Restart + icon: mdi:reload + tap_action: + action: call-service + confirmation: + text: Are you sure you want to restart? + service: homeassistant.restart + template: icon_name + - type: custom:button-card + name: Reload YAML + icon: mdi:reload + tap_action: + action: call-service + service: browser_mod.sequence + service_data: + sequence: + - service: browser_mod.notification + data: + message: Reload all YAML configuration... + - service: homeassistant.reload_all + template: icon_name + ################################################# + # # + # Raspberry Docker # + # # + ################################################# + - type: entities + title: Raspberry Docker show_header_toggle: false card_mod: class: header - # no border on last card - filter: - template: | - {% for sensor in states.sensor -%} - {%- if sensor.entity_id | regex_match('sensor.docker_',ignorecase=False) -%} - {%- set name = state_attr(sensor.entity_id, "friendly_name") | regex_replace(find='Docker ', replace='') | capitalize -%} - {{ - { 'entity': sensor.entity_id, - 'name': name, - 'state_color': true, - } }}, - {%- endif -%} - {%- endfor %} + entities: + - entity: binary_sensor.192_168_0_146 + icon: si:docker + state_color: true + name: Raspberry Docker + - entity: switch.watchtower + - type: attribute + entity: sensor.rpi_monitor_docker + attribute: up_time + name: Uptime + icon: mdi:update + - type: custom:bar-card + width: 55% + height: 2em + decimal: 0 + positions: *bar_card_positions + severity: *bar_card_severity + entity_row: true + entities: + - entity: sensor.rpi_monitor_docker_rpi_cpu_use_pidocker + name: Processor + icon: mdi:chip + tap_action: + action: call-service + service: homeassistant.update_entity + service_data: + entity_id: sensor.rpi_monitor_docker_rpi_cpu_use_pidocker + - entity: sensor.rpi_monitor_docker_rpi_temp_pidocker + name: Temperature + icon: mdi:thermostat + - entity: sensor.rpi_monitor_docker_rpi_used_pidocker + name: Memory 4GB + icon: mdi:memory + tap_action: + action: call-service + service: homeassistant.update_entity + service_data: + entity_id: sensor.sensor.rpi_monitor_docker_rpi_used_pidocker + - entity: sensor.rpi_monitor_docker + type: attribute + attribute: fs_free_prcnt + name: SD used 32GB + icon: mdi:content-save + unit_of_measurement: '%' + tap_action: + action: call-service + service: homeassistant.update_entity + service_data: + entity_id: sensor.rpi_monitor_docker + - type: custom:hui-horizontal-stack-card + cards: + - type: custom:button-card + name: Reboot RPI + icon: mdi:reload + tap_action: + action: call-service + confirmation: + text: Are you sure you want to restart? + service: script.restart_pi_docker + template: icon_name + - type: custom:button-card + name: Purge logs + icon: mdi:archive-remove + tap_action: + action: call-service + service: script.purge_dockerlog + template: icon_name + ################################################# + # # + # CONTAINERS # + # # + ################################################# + + - type: custom:auto-entities + card: + type: entities + title: Containers + show_header_toggle: false + card_mod: + class: header + # no border on last card + filter: + template: | + {% for sensor in states.sensor -%} + {%- if sensor.entity_id | regex_match('sensor.docker_',ignorecase=False) -%} + {%- set name = state_attr(sensor.entity_id, "friendly_name") | regex_replace(find='Docker ', replace='') | capitalize -%} + {{ + { 'entity': sensor.entity_id, + 'name': name, + 'state_color': true, + } }}, + {%- endif -%} + {%- endfor %} diff --git a/config/dashboards/shared/popup/footer/footer_tablet.yaml b/config/dashboards/shared/popup/footer/footer_tablet.yaml deleted file mode 100644 index a463a64..0000000 --- a/config/dashboards/shared/popup/footer/footer_tablet.yaml +++ /dev/null @@ -1,127 +0,0 @@ -action: fire-dom-event -browser_mod: - service: browser_mod.popup - data: - title: Platta - card_mod: - style: - #popup header - .: - content: - type: vertical-stack - cards: - - type: entities - state_color: true - card_mod: - class: content - entities: - - entity: switch.galaxy_tab_a_screen - secondary_info: last-changed - - type: custom:slider-entity-row - entity: number.galaxy_tab_a_screen_brightness - name: Ljusstyrka - icon: mdi:brightness-6 - hide_state: false - card_mod: - style: - # full width slider - hui-generic-entity-row$: | - div { - flex: auto !important; - } - - entity: switch.galaxy_tab_a_screensaver - - entity: binary_sensor.galaxy_tab_a_plugged_in - - type: custom:bar-card - width: 55% - height: 2em - decimal: 0 - unit_of_measurement: '%' - positions: &bar_card_positions - icon: outside - indicator: 'off' - name: outside - severity: - - color: '#6d2525' - from: 0 - to: 89 - - color: '#303435' - from: 90 - to: 999 - entity_row: true - entities: - - entity: sensor.galaxy_tab_a_battery - icon: mdi:battery - tap_action: - action: call-service - service: homeassistant.update_entity - service_data: - entity_id: sensor.galaxy_tab_a_battery_level - - type: custom:bar-card - width: 55% - height: 2em - decimal: 0 - unit_of_measurement: '%' - positions: *bar_card_positions - severity: - - color: '#6d2525' - from: 90 - to: 999 - entity_row: true - entities: - - entity: sensor.template_fullykiosk_memory - name: Minne - 2GB - icon: mdi:memory - tap_action: - action: call-service - service: homeassistant.update_entity - service_data: - entity_id: sensor.template_fullykiosk_memory - - entity: sensor.template_fullykiosk_storage - name: Lagring - 32GB - icon: mdi:sd - tap_action: - action: call-service - service: homeassistant.update_entity - service_data: - entity_id: sensor.template_fullykiosk_storage - - type: custom:mod-card - card_mod: - style: - hui-horizontal-stack-card$: | - #root { - justify-content: space-evenly !important; - padding: var(--tablet-popup-button-padding); - } - card: - type: horizontal-stack - cards: - - type: custom:button-card - name: Startsidan - icon: mdi:reload - tap_action: - action: call-service - service: browser_mod.sequence - service_data: - sequence: - - service: browser_mod.notification - data: - message: Laddar om startsidan... - - service: button.press - data: - entity_id: button.galaxy_tab_a_load_start_url - template: icon_name - - type: custom:button-card - name: Hela appen - icon: mdi:reload - tap_action: - action: call-service - service: browser_mod.sequence - service_data: - sequence: - - service: browser_mod.notification - data: - message: Startar om Fully Kiosk Browser... - - service: button.press - data: - entity_id: button.galaxy_tab_a_restart_browser - template: icon_name diff --git a/config/dashboards/shared/popup/footer/footer_vacuum.yaml b/config/dashboards/shared/popup/footer/footer_vacuum.yaml index 931fc70..f289da1 100644 --- a/config/dashboards/shared/popup/footer/footer_vacuum.yaml +++ b/config/dashboards/shared/popup/footer/footer_vacuum.yaml @@ -3,108 +3,114 @@ browser_mod: service: browser_mod.popup data: title: Roidmi EVE Plus - card_mod: !include ../../snippets/style_popup_footer.yaml + style: > + --max-popup-column: 3; content: - type: custom:layout-card - layout_type: custom:grid-layout - layout: !include ../../snippets/popup_footer_layout.yaml - cards: - ### SUMMARY - - type: entities - title: Summary - show_header_toggle: false - card_mod: - class: header - entities: - - entity: vacuum.roidmi_eve - name: Roidmi EVE plus - icon: phu:roborock - secondary_info: - entity: sensor.roidmi_v60_029d_battery_level - postfix: ' %' - prefix: 'Battery: ' - - entity: sensor.vacuum_fault - secondary_info: - entity: sensor.vacuum_position - prefix: 'Position: ' - # - sensor.vacuum_fan_speed - # - sensor.vacuum_sweep_mode - - binary_sensor.vacuum_mop - - type: divider - - input_boolean.vacuum_double_clean - - input_boolean.vacuum_edge_sweep - - input_select.vacuum_mode - - input_select.vacuum_sweep_type - - input_select.vacuum_water_level - - type: custom:mod-card - card_mod: - style: - # horizontal bottom buttons - hui-horizontal-stack-card$: | - #root { - justify-content: space-between!important; - padding: 1em; - } - card: - type: horizontal-stack - cards: - - type: custom:button-card - entity: vacuum.roidmi_eve - icon: mdi:play-pause - tap_action: - action: call-service - service: > - [[[ - return `[[[ - return entity.state === 'docked' || entity.state === 'paused' - ? 'vacuum.start' - : 'vacuum.pause'; - ]]]` - ]]] - service_data: - entity_id: vacuum.roidmi_eve - template: icon_only - - type: custom:button-card - entity: vacuum.roidmi_eve - icon: mdi:battery-charging - tap_action: - action: call-service - service: vacuum.return_to_base - service_data: - entity_id: vacuum.roidmi_eve - template: icon_only - - type: custom:button-card - icon: mdi:bell - tap_action: - action: call-service - service: script.vacuum_find_robot - template: icon_only - - type: custom:button-card - icon: mdi:delete-empty - tap_action: - action: call-service - service: script.vacuum_empty_bin - template: icon_only - ### MAP - - type: entities - title: Map - show_header_toggle: false - entities: - - !include vacuum_roidmi.yaml + type: custom:mod-card + card_mod: !include ../../snippets/style_popup_footer.yaml + card: + type: custom:layout-card + layout_type: custom:grid-layout + layout: !include ../../snippets/popup_footer_layout.yaml + cards: + ### SUMMARY + - type: entities + title: Summary + show_header_toggle: false + card_mod: + class: header + entities: + - entity: vacuum.roidmi_eve + name: Roidmi EVE plus + icon: phu:roborock + secondary_info: + entity: sensor.roidmi_v60_029d_battery_level + postfix: ' %' + prefix: 'Battery: ' + - entity: sensor.vacuum_fault + secondary_info: + entity: sensor.vacuum_position + prefix: 'Position: ' + # - sensor.vacuum_fan_speed + # - sensor.vacuum_sweep_mode + - binary_sensor.vacuum_mop + - type: divider + - input_boolean.vacuum_double_clean + - input_boolean.vacuum_edge_sweep + - input_select.vacuum_mode + - input_select.vacuum_sweep_type + - input_select.vacuum_water_level + - type: custom:mod-card + card_mod: + style: + # horizontal bottom buttons + hui-horizontal-stack-card$: | + #root { + justify-content: space-between!important; + padding: 1em; + } + card: + type: horizontal-stack + cards: + - type: custom:button-card + entity: vacuum.roidmi_eve + icon: mdi:play-pause + tap_action: + action: call-service + service: > + [[[ + return `[[[ + return entity.state === 'docked' || entity.state === 'paused' + ? 'vacuum.start' + : 'vacuum.pause'; + ]]]` + ]]] + service_data: + entity_id: vacuum.roidmi_eve + template: icon_only + - type: custom:button-card + entity: vacuum.roidmi_eve + icon: mdi:battery-charging + tap_action: + action: call-service + service: vacuum.return_to_base + service_data: + entity_id: vacuum.roidmi_eve + template: icon_only + - type: custom:button-card + icon: mdi:bell + tap_action: + action: call-service + service: script.vacuum_find_robot + template: icon_only + - type: custom:button-card + icon: mdi:delete-empty + tap_action: + action: call-service + service: script.vacuum_empty_bin + template: icon_only + ### MAP + - type: entities + title: Map + show_header_toggle: false + card_mod: + class: header nopadding + entities: + - !include vacuum_roidmi.yaml - ## SETTINGS - - type: entities - title: Settings - show_header_toggle: false - entities: - - input_number.vacuum_volume - - input_boolean.vacuum_mute - - input_boolean.vacuum_lidar_collision - - input_boolean.vacuum_led_switch - - input_boolean.vacuum_auto_boost - - sensor.vacuum_on - - sensor.vacuum_cleaned_area - - sensor.vacuum_cleaning_time - - sensor.vacuum_total_cleaned_area - - sensor.vacuum_total_cleaning_time - - sensor.vacuum_cleaning_count + ## SETTINGS + - type: entities + title: Settings + show_header_toggle: false + entities: + - input_number.vacuum_volume + - input_boolean.vacuum_mute + - input_boolean.vacuum_lidar_collision + - input_boolean.vacuum_led_switch + - input_boolean.vacuum_auto_boost + - sensor.vacuum_on + - sensor.vacuum_cleaned_area + - sensor.vacuum_cleaning_time + - sensor.vacuum_total_cleaned_area + - sensor.vacuum_total_cleaning_time + - sensor.vacuum_cleaning_count diff --git a/config/dashboards/shared/popup/livingroom_balkong.yaml b/config/dashboards/shared/popup/livingroom_balkong.yaml deleted file mode 100755 index 5fe5ba3..0000000 --- a/config/dashboards/shared/popup/livingroom_balkong.yaml +++ /dev/null @@ -1,21 +0,0 @@ -action: fire-dom-event -browser_mod: - service: browser_mod.popup - data: - title: Balkong - card_mod: - style: - #popup header - .: - content: - type: vertical-stack - cards: - - type: entities - state_color: true - show_header_toggle: false - card_mod: - class: content - entities: - - entity: switch.deltaco_sh_p01_socket - secondary_info: last-changed - - entity: automation.balcony_lights diff --git a/config/dashboards/shared/popup/office_dator.yaml b/config/dashboards/shared/popup/office_dator.yaml deleted file mode 100755 index 23ab173..0000000 --- a/config/dashboards/shared/popup/office_dator.yaml +++ /dev/null @@ -1,151 +0,0 @@ -update_entities: - action: > - [[[ - hass.callService('homeassistant', 'update_entity', { - entity_id: [ - 'sensor.imac_cpu', - 'sensor.imac_mem', - 'binary_sensor.template_imac_vpn' - ] - }); - ]]] -action: fire-dom-event -browser_mod: - service: browser_mod.popup - data: - title: Dator - card_mod: - style: - #popup header - .: - content: - type: vertical-stack - cards: - ### ON ### - - type: conditional - conditions: - - entity: switch.imac - state: 'on' - card: - type: vertical-stack - cards: - - type: entities - state_color: true - card_mod: - class: content - entities: - - entity: switch.imac - name: iMac - secondary_info: last-changed - - type: custom:bar-card - width: 55% - height: 2em - decimal: 0 - unit_of_measurement: '%' - positions: - icon: outside - indicator: 'off' - name: outside - severity: - - color: '#6d2525' - from: 90 - to: 999 - entity_row: true - entities: - - entity: sensor.imac_cpu - tap_action: - action: call-service - service: homeassistant.update_entity - service_data: - entity_id: sensor.imac_cpu - - entity: sensor.imac_mem - tap_action: - action: call-service - service: homeassistant.update_entity - service_data: - entity_id: sensor.imac_mem - - entity: sensor.template_imac_macintosh_hd - tap_action: - action: call-service - service: homeassistant.update_entity - service_data: - entity_id: sensor.template_imac_macintosh_hd - - entity: automation.imac_notification_motion_hall - - entity: sensor.imac_uptime - - entity: binary_sensor.template_imac_vpn - tap_action: - action: call-service - service: homeassistant.update_entity - service_data: - entity_id: sensor.imac_ip - card_mod: - style: | - :host { - --paper-item-icon-color: - {{ 'red' if not is_state(config.entity, 'Ansluten') }}; - } - - entity: input_boolean.imac_lock - - type: custom:mod-card - card_mod: - style: - hui-horizontal-stack-card$: | - #root { - justify-content: space-evenly !important; - padding: var(--tablet-popup-button-padding); - } - card: - type: horizontal-stack - cards: - - type: custom:button-card - name: Försätt i vila - icon: mdi:power-sleep - tap_action: - action: call-service - service: shell_command.imac_sleep - template: icon_name - - type: custom:button-card - name: Starta om - icon: mdi:restart - tap_action: - action: call-service - service: shell_command.imac_restart - template: icon_name - ### OFF ### - - type: conditional - conditions: - - entity: switch.imac - state: 'off' - card: - type: vertical-stack - cards: - - type: entities - state_color: true - show_header_toggle: false - card_mod: - class: content - entities: - - entity: switch.imac - name: iMac - secondary_info: last-changed - - entity: automation.imac_notification_motion_hall - - entity: input_boolean.imac_lock - - type: custom:mod-card - card_mod: - style: - hui-horizontal-stack-card$: | - #root { - justify-content: space-evenly !important; - padding: var(--tablet-popup-button-padding); - } - card: - type: horizontal-stack - cards: - - type: custom:button-card - name: Starta iMac - icon: mdi:power - tap_action: - action: call-service - service: switch.turn_on - service_data: - entity_id: switch.imac - template: icon_name diff --git a/config/dashboards/shared/popup/office_flakt.yaml b/config/dashboards/shared/popup/office_flakt.yaml deleted file mode 100755 index d394e25..0000000 --- a/config/dashboards/shared/popup/office_flakt.yaml +++ /dev/null @@ -1,22 +0,0 @@ -action: fire-dom-event -browser_mod: - service: browser_mod.popup - data: - title: "Fläkt\u00B2" - card_mod: - style: - #popup header - .: - content: - type: vertical-stack - cards: - - type: entities - state_color: true - card_mod: - class: content - entities: - - entity: switch.gosund_fan_switch - secondary_info: last-changed - - type: custom:slider-entity-row - entity: input_number.fan_timer - hide_state: false diff --git a/config/dashboards/shared/popup/office_monitorer.yaml b/config/dashboards/shared/popup/office_monitorer.yaml deleted file mode 100755 index 6400831..0000000 --- a/config/dashboards/shared/popup/office_monitorer.yaml +++ /dev/null @@ -1,78 +0,0 @@ -action: fire-dom-event -browser_mod: - service: browser_mod.popup - data: - title: Monitorer - card_mod: - style: - #popup header - .: - content: - type: vertical-stack - cards: - - type: entities - state_color: true - card_mod: - class: content - entities: - - entity: switch.gosund_monitors_switch - secondary_info: last-changed - - type: custom:slider-entity-row - card_mod: - style: - # icon color mute and max - .: | - :host { - --paper-item-icon-color: - {% if is_state('binary_sensor.monitors_mute_state', 'on') %} - #FFFFFF20 - {% elif states(config.entity) | int == 0 %} - #9da0a2 - {% elif states(config.entity) | int < 60 %} - initial - {% else %} - red - {% endif %}; - } - # full width slider - hui-generic-entity-row$: | - div { - flex: auto !important; - } - entity: input_number.monitors_volume - hide_state: false - - entity: automation.monitors_turn_off - - entity: automation.monitors_calibration - - type: custom:mod-card - card_mod: - style: - hui-horizontal-stack-card$: | - #root { - justify-content: space-evenly !important; - padding: var(--tablet-popup-button-padding); - } - card: - type: horizontal-stack - cards: - - type: custom:button-card - entity: switch.monitors_mute - icon: mdi:volume-mute - tap_action: - action: toggle - template: icon_only - - type: custom:button-card - icon: mdi:volume-minus - tap_action: - action: call-service - service: input_number.decrement - service_data: - entity_id: input_number.monitors_volume - template: icon_only - - type: custom:button-card - icon: mdi:volume-plus - tap_action: - action: call-service - service: input_number.increment - service_data: - entity_id: input_number.monitors_volume - template: icon_only diff --git a/config/dashboards/shared/popup/owntone.yaml b/config/dashboards/shared/popup/owntone.yaml deleted file mode 100755 index f69fa2f..0000000 --- a/config/dashboards/shared/popup/owntone.yaml +++ /dev/null @@ -1,423 +0,0 @@ -action: fire-dom-event -browser_mod: - service: browser_mod.popup - data: - title: Homepod Speakers - style: | - --popup-max-width: calc(420px + 440px + 420px); - card_mod: - style: - .: | - :host { - --ha-card-border-radius: 12px !important; - --mush-rgb-state-media-player: 3, 169, 244; - --mush-rgb-blue-grey: 96, 125, 139; - --ha-card-background: #ffffff0d !important; - } - @media (max-width: 450px), (max-height: 500px) { - ha-dialog { - --mdc-dialog-min-width: 100vw !important; - --mdc-dialog-min-height: 100vh !important; - --popup-border-radius: 0 !important; - } - } - content: - type: custom:layout-card - layout_type: custom:grid-layout - layout: - margin: 0 - grid-gap: 10px - grid-template-columns: 0 400px 420px 400px 0 - grid-template-rows: fit-content(100%) - grid-template-areas: | - ". speakers playlist spotify ." - mediaquery: - #phone - '(max-width: 800px)': - grid-template-columns: 1fr - grid-template-rows: fit-content(100%) fit-content(100%) fit-content(100%) - grid-template-areas: | - "speakers" - "playlist" - "spotify" - cards: - # Homepods - - type: custom:stack-in-card - view_layout: - grid-area: speakers - cards: - - type: grid - square: false - columns: 2 - cards: - - type: custom:mushroom-template-card - primary: Homepods - secondary: >- - {{ states.media_player.owntone_server.state | capitalize }} - {{ expand(states.group.homepod_speakers) | selectattr( 'state', 'eq', 'on') | - list | count }} / 4 - icon: phu:homepod - layout: horizontal - fill_container: false - multiline_secondary: false - icon_color: "{% if is_state('group.homepod_speakers', 'on') %}blue{% endif %}" - tap_action: - action: call-service - service: homeassistant.toggle - target: - entity_id: group.homepod_speakers - - type: custom:mushroom-chips-card - chips: - - type: template - card_mod: - style: | - ha-card:hover { - rotate: 90deg; - } - icon: mdi:dots-horizontal - icon_color: white - tap_action: - action: fire-dom-event - local_conditional_card: - action: toggle - ids: - - homepod - alignment: end - card_mod: - style: | - ha-card { - --chip-box-shadow: none; - --chip-background: #ffffff0d; - padding: 15px 10px; - } - # Homepods - - type: custom:local-conditional-card - default: hide - id: homepod - card: - type: custom:stack-in-card - style: | - ha-card { - background: none !important; - animation: slide-opacity 700ms ease-in forwards; - opacity: 0; - } - @keyframes slide-opacity { - 0% { - transform: translateY(-30%); - opacity: 0; - } - 100% { - transform: translateY(0%); - opacity: 1; - } - } - cards: - - type: custom:mushroom-media-player-card - entity: media_player.owntone_output_office - name: Office - show_volume_level: true - use_media_info: false - volume_controls: - - volume_set - fill_container: false - layout: horizontal - collapsible_controls: true - tap_action: - action: toggle - card_mod: - style: &style - mushroom-media-player-volume-control$: - mushroom-slider$: | - .slider { - height: 50% !important; - align-self: center !important; - } - .: | - ha-card { - background: none - border-radius: 12px !important; - } - ha-card:hover { - background: #3182b78a !important; - border-radius: 12px !important; - } - - type: custom:mushroom-media-player-card - entity: media_player.owntone_output_bathroom - name: Bathroom - show_volume_level: true - use_media_info: false - volume_controls: - - volume_set - fill_container: false - layout: horizontal - collapsible_controls: true - tap_action: - action: toggle - card_mod: - style: *style - - type: custom:mushroom-media-player-card - entity: media_player.owntone_output_bedroom - show_volume_level: true - name: Bedroom - use_media_info: false - volume_controls: - - volume_set - fill_container: false - layout: horizontal - collapsible_controls: true - tap_action: - action: toggle - card_mod: - style: *style - - type: custom:mushroom-media-player-card - entity: media_player.owntone_output_living_room - name: Living Room - show_volume_level: true - use_media_info: false - volume_controls: - - volume_set - fill_container: false - layout: horizontal - collapsible_controls: true - tap_action: - action: toggle - card_mod: - style: *style - # Playlist - - type: custom:stack-in-card - view_layout: - grid-area: playlist - cards: - - type: custom:mushroom-media-player-card - entity: media_player.currently_playing - icon: mdi:play - use_media_info: true - use_media_artwork: false - show_volume_level: false - media_controls: - - play_pause_stop - - previous - - next - volume_controls: - - volume_buttons - - volume_set - fill_container: false - card_mod: - style: | - mushroom-shape-icon { - display: flex; - {% set media_type = state_attr(config.entity, 'media_content_type') %} - {% if media_type == 'tvshow' %} - --card-mod-icon: mdi:television-classic; - animation: flicker 1s linear infinite alternate; - {% elif media_type == 'movie' %} - --card-mod-icon: mdi:movie-roll; - animation: spin 2s linear infinite reverse; - {% elif media_type == 'music' %} - --card-mod-icon: mdi:music; - animation: beat 1.3s ease-out infinite both; - {% elif media_type == 'playlist' %} - --card-mod-icon: mdi:music; - animation: beat 1.3s ease-out infinite both; - {% else %} - --card-mod-icon: mdi:play; - {% endif %} - {{ 'animation: none;' if not is_state(config.entity, 'playing') }} - } - @keyframes flicker { - 0%, 31.98%, 32.98%, 34.98%, 36.98%, 39.98%, 67.98%, 68.98%, 95.98%, 96.98%, 97.98%, 98.98%, 100% { --icon-color: rgba(var(--album-art-color), 1); } - 32%, 33%, 35%, 36%, 37%, 40%, 68%, 69%, 96%, 97%, 98%, 99% { --icon-color: rgba(var(--album-art-color), 0.6); } - } - @keyframes beat { - 0%, 60% { --icon-symbol-size: 21px; } - 5%, 17%, 57% { --icon-symbol-size: 22px; } - 10%, 20%, 51% { --icon-symbol-size: 23px; } - 25%, 45% { --icon-symbol-size: 24px; } - 30%, 39% { --icon-symbol-size: 25px; } - 33% { --icon-symbol-size: 26px; } - } - ha-card { - --ha-card-border-width: 0; - --rgb-state-media-player: var(--album-art-color); - } - .actions { - --rgb-primary-text-color: var(--album-art-color); - --primary-text-color: rgb(var(--album-art-color)); - } - ha-card:before { - transform: translate3d(0,0,0); - -webkit-transform: translate3d(0,0,0); - content: ""; - background: url('/local/img/idle_art.png') center no-repeat; - {% if is_state('media_player.spotify', 'playing') %} - background: url( '{{ state_attr('media_player.spotify', "entity_picture") }}' ) center no-repeat; - {% elif is_state('media_player.owntone_server', 'playing') and not is_state('media_player.spotify', 'playing') %} - {% set radio = state_attr('media_player.owntone_server', 'media_album_name') %} - background: url( '/local/img/radio/{{radio}}.png' ) center no-repeat; - {% endif %} - background-size: contain; - margin: 4px 4px 16px 4px !important; - filter: drop-shadow(4px 4px 6px rgba(0, 0, 0, 0.5)); - border-radius: var(--control-border-radius); - aspect-ratio: 1 / 1; - } - - type: conditional - conditions: - - entity: media_player.spotify - state: 'playing' - card: - entity: media_player.spotify - hide: - icon: true - name: true - runtime: true - source: true - power: true - state_label: true - volume: true - info: true - progress: false - controls: true - more_info: false - type: custom:mini-media-player - toggle_power: false - group: true - card_mod: - style: - mmp-progress$: | - paper-progress { - {% if is_state('media_player.spotify', 'playing') %} - --paper-progress-container-color: rgba(var(--album-art-color), 0.2) !important; - {% endif %} - } - .: | - ha-card { - margin: 0px 12px 12px; - --mmp-progress-height: 12px !important; - height: var(--mmp-progress-height); - --mmp-accent-color: rgb(var(--album-art-color)); - --mmp-border-radius: 12px !important; - --ha-card-border-width: 0; - } - card_mod: - style: | - ha-card:before { - transform: translate3d(0,0,0); - -webkit-transform: translate3d(0,0,0); - content: ""; - position: absolute; - height: 100%; - width: 100%; - background: url('/local/img/idle_art.png') center no-repeat; - {% if is_state('media_player.spotify', 'playing') %} - background: url( '{{ state_attr('media_player.spotify', "entity_picture") }}' ) center no-repeat; - {% elif is_state('media_player.owntone_server', 'playing') and not is_state('media_player.spotify', 'playing') %} - {% set radio = state_attr('media_player.owntone_server', 'media_album_name') %} - background: url( '/local/img/radio/{{radio}}.png' ) center no-repeat; - {% endif %} - filter: blur(150px) saturate(200%); - background-size: 100% 100%; - } - ha-card { - transform: translate3d(0,0,0); - -webkit-transform: translate3d(0,0,0); - } - :host { - --album-art-color: - {% if is_state('media_player.spotify', 'playing') %} - {{ states('sensor.vibrant_color') }} - {% else %} - var(--mush-rgb-blue-grey) - {% endif %}; - } - # Spotify - - type: vertical-stack - view_layout: - grid-area: spotify - cards: - - type: horizontal-stack - cards: - - type: custom:mushroom-template-card - card_mod: - style: | - ha-card:hover { - scale: 1.04; - filter: opacity(0.5); - } - ha-card:active { - background-color: rgba(255,255,255,.8); - } - primary: Featured - tap_action: - action: fire-dom-event - local_conditional_card: - action: set - ids: - - featured: show - - discover-weekly: hide - layout: vertical - - type: custom:mushroom-template-card - card_mod: - style: | - ha-card:hover { - scale: 1.04; - filter: opacity(0.5); - } - ha-card:active { - background-color: rgba(255,255,255,.8); - } - primary: Discover weekly - tap_action: - action: fire-dom-event - local_conditional_card: - action: set - ids: - - featured: hide - - discover-weekly: show - layout: vertical - - type: custom:local-conditional-card - default: show - id: featured - persist_state: true - card: - type: custom:spotify-card - limit: 9 - spotify_entity: media_player.spotify - default_device: Home Assistant - default: Home Assistant - playlist_type: featured - country_code: VN - hide_warning: true - display_style: grid - always_play_random_song: true - grid_covers_per_row: 3 - grid_show_title: true - filter_devices: - - SHIELD - hide_chromecast_devices: true - hide_top_header: true - hide_currently_playing: true - hide_playback_controls: true - - type: custom:local-conditional-card - default: hide - id: discover-weekly - persist_state: true - card: - type: custom:spotify-card - limit: 9 - spotify_entity: media_player.spotify - default_device: Home Assistant - default: Home Assistant - playlist_type: discover-weekly - hide_warning: true - display_style: grid - always_play_random_song: true - grid_covers_per_row: 3 - grid_show_title: true - filter_devices: - - SHIELD - - Air - hide_chromecast_devices: true - hide_top_header: true - hide_currently_playing: true - hide_playback_controls: true diff --git a/config/dashboards/shared/popup/popup_kodi.yaml b/config/dashboards/shared/popup/popup_kodi.yaml deleted file mode 100644 index 026b785..0000000 --- a/config/dashboards/shared/popup/popup_kodi.yaml +++ /dev/null @@ -1,51 +0,0 @@ -action: fire-dom-event -browser_mod: - service: browser_mod.popup - data: - style: | - --popup-max-width: calc(100vw); - --popup-background-color: rgba(0, 0, 0, 0); - title: 'Kodi' - card_mod: - style: - #popup header - .: | - ha-dialog>ha-dialog-header { - display: none; - } - @media (max-width: 450px), (max-height: 500px) { - ha-dialog>ha-dialog-header { - display: block; - } - } - content: - type: custom:layout-card - layout_type: custom:grid-layout - layout: - margin: 0 - grid-template-columns: 80vw - grid-template-rows: fit-content(100%) - mediaquery: - '(max-width: 800px)': - grid-template-columns: 100% - cards: - # - type: custom:analog-clock - # hide_SecondHand: true - # locale: en-US - # diameter: 200 - # color_HourHand: '#326ba8' - # color_MinuteHand: '#3273a8' - # color_DigitalTime: '#CCCCCC' - # color_FaceDigits: '#a83832' - # color_Ticks: Silver - # themes: - # - time: 23:00-08:00 - # color_background: maroon - - type: iframe - aspect_ratio: > - [[[ - if (window.matchMedia('(max-width: 800px)').matches) - return '190%'; - else return '16:9'; - ]]] - url: !secret kodi_movies diff --git a/config/dashboards/shared/popup/popup_weather.yaml b/config/dashboards/shared/popup/popup_weather.yaml index e899233..c7d1e96 100644 --- a/config/dashboards/shared/popup/popup_weather.yaml +++ b/config/dashboards/shared/popup/popup_weather.yaml @@ -3,6 +3,8 @@ browser_mod: service: browser_mod.popup data: title: Weather + style: > + --max-popup-column: 2; card_mod: !include ../snippets/style_popup_footer.yaml content: type: custom:layout-card @@ -17,7 +19,7 @@ browser_mod: - type: entities title: Prague card_mod: - class: header + class: header nopadding entities: - type: custom:layout-card layout_type: custom:vertical-layout @@ -39,7 +41,7 @@ browser_mod: - type: entities title: Radar card_mod: - class: header + class: header nopadding entities: - type: custom:weather-radar-card static_map: false @@ -58,115 +60,3 @@ browser_mod: square_map: false show_recenter: true show_playback: false - - type: entities - title: Lunar Phase - card_mod: - class: header - entities: - - type: custom:lunar-phase-card - card_mod: - style: - .: | - ha-card { - background-color: transparent !important; - justify-content: flex-start !important; - box-shadow: none !important; - } - lunar-base-data $: | - .swiper-container { - backdrop-filter: none !important; - } - entity: '' - 12hr_format: false - calendar_modal: false - compact_view: false - default_card: base - hide_buttons: true - mile_unit: false - moon_position: left - number_decimals: 2 - selected_language: en - show_background: false - southern_hemisphere: false - use_custom: false - use_default: true - use_entity: false - graph_config: - graph_type: default - y_ticks: false - x_ticks: true - show_time: true - show_current: true - show_highest: true - y_ticks_position: left - y_ticks_step_size: 30 - time_step_size: 30 - show_legend: true - legend_position: top - legend_align: center - font_customize: - header_font_size: x-large - header_font_style: capitalize - header_font_color: '' - label_font_size: auto - label_font_style: none - label_font_color: '' - hide_label: false - hide_header: true - latitude: 50.060362328075634 - longitude: 14.399342536926271 - location: - city: Capital City of Prague - country: Czechia - custom_background: >- - https://cdn.jsdelivr.net/gh/ngocjohn/lunar-phase-card@1.7.3/background/moon_bg_1.png - footer: - type: custom:lunar-phase-card - entity: '' - 12hr_format: false - calendar_modal: false - compact_view: true - default_card: horizon - hide_buttons: true - mile_unit: false - moon_position: left - number_decimals: 2 - selected_language: en - show_background: false - southern_hemisphere: false - use_custom: false - use_default: true - use_entity: false - graph_config: - graph_type: dynamic - y_ticks: false - x_ticks: true - show_time: true - show_current: true - show_highest: true - y_ticks_position: left - y_ticks_step_size: 30 - time_step_size: 30 - show_legend: true - legend_position: top - legend_align: center - font_customize: - header_font_size: x-large - header_font_style: capitalize - header_font_color: '' - label_font_size: auto - label_font_style: none - label_font_color: '' - hide_label: false - hide_header: true - latitude: 50.060362328075634 - longitude: 14.399342536926271 - location: - city: Capital City of Prague - country: Czechia - card_mod: - style: | - ha-card { - background-color: transparent !important; - box-shadow: none !important; - } diff --git a/config/dashboards/shared/popup/purifier_popup.yaml b/config/dashboards/shared/popup/purifier_popup.yaml deleted file mode 100755 index 05e3f60..0000000 --- a/config/dashboards/shared/popup/purifier_popup.yaml +++ /dev/null @@ -1,32 +0,0 @@ -action: fire-dom-event -browser_mod: - service: browser_mod.popup - data: - title: Air Purifiers - style: | - --tablet-popup-button-padding: 0.1em 2em 1.8em 2em; - --swiper-pagination-color: rgb(255, 165, 0); - --swiper-navigation-size: 2em; - --popup-max-width: calc(100vw); - card_mod: !include ../snippets/style_popup_footer.yaml - content: - type: custom:layout-card - layout_type: custom:grid-layout - layout: !include ../snippets/popup_footer_layout.yaml - cards: - ### SUMMARY - - type: entities - title: Office Air Purfier - show_header_toggle: false - card_mod: - class: header - entities: - - type: custom:button-card - entity: fan.zhimi_mb4_b008_air_purifier - template: - - purifier_widget - variables: - aqi: sensor.zhimi_mb4_b008_pm25_density - motor: sensor.zhimi_mb4_b008_moto_speed_rpm - filter: sensor.zhimi_mb4_b008_filter_life_level - used_time: sensor.zhimi_mb4_b008_filter_used_time diff --git a/config/dashboards/shared/popup/rooms/apple_tv_card.yaml b/config/dashboards/shared/popup/rooms/apple_tv_card.yaml index 6d2d44b..5f696b0 100644 --- a/config/dashboards/shared/popup/rooms/apple_tv_card.yaml +++ b/config/dashboards/shared/popup/rooms/apple_tv_card.yaml @@ -5,37 +5,39 @@ browser_mod: title: 'ATV Remote' style: > --popup-background-color: rgba(21,25,35,1); - card_mod: - style: - .: | - ha-dialog>ha-dialog-header { - display: none; - } - @media (max-width: 450px), (max-height: 500px) { - .content .container { - margin: 0 6.8% !important; - } - ha-dialog { - --mdc-dialog-min-width: 100vw !important; - --mdc-dialog-min-height: 100vh !important; - --popup-border-radius: 0 !important; - } + content: + type: custom:mod-card + card_mod: + style: + .: | ha-dialog>ha-dialog-header { - display: block !important; + display: none; } - } - content: - type: custom:apple-tv-card - background: 'linear-gradient(155deg, rgba(60,66,80,1) 0%, rgba(23,26,37,1) 42%, rgba(21,25,35,1) 100%)' - entity: media_player.atv - full_screen: true - remote: remote.atv - sources: - - source_name: Infuse - - source_name: Disney+ - - source_name: Netflix - - source_name: Prime Video - - image: /local/community/Apple-Tv-Card/logo/Prime Video.png - source_name: YouTube - - image: /local/community/Apple-Tv-Card/logo/DAZN.png - source_name: DAZN + @media (max-width: 450px), (max-height: 500px) { + .content .container { + margin: 0 6.8% !important; + } + ha-dialog { + --mdc-dialog-min-width: 100vw !important; + --mdc-dialog-min-height: 100vh !important; + --popup-border-radius: 0 !important; + } + ha-dialog>ha-dialog-header { + display: block !important; + } + } + card: + type: custom:apple-tv-card + background: 'linear-gradient(155deg, rgba(60,66,80,1) 0%, rgba(23,26,37,1) 42%, rgba(21,25,35,1) 100%)' + entity: media_player.atv + full_screen: true + remote: remote.atv + sources: + - source_name: Infuse + - source_name: Disney+ + - source_name: Netflix + - source_name: Prime Video + - image: /local/community/Apple-Tv-Card/logo/Prime Video.png + source_name: YouTube + - image: /local/community/Apple-Tv-Card/logo/DAZN.png + source_name: DAZN diff --git a/config/dashboards/shared/popup/rooms/bedroom.yaml b/config/dashboards/shared/popup/rooms/bedroom.yaml index 4f64f9f..aa1a7a4 100755 --- a/config/dashboards/shared/popup/rooms/bedroom.yaml +++ b/config/dashboards/shared/popup/rooms/bedroom.yaml @@ -3,20 +3,10 @@ browser_mod: service: browser_mod.popup data: title: Bedroom - - card_mod: !include ../../snippets/style_popup_cardmod.yaml - content: type: custom:layout-card layout_type: custom:grid-layout - layout: - margin: 1.5% 0 - gap: 5% - grid-template-columns: 20vw - grid-template-rows: fit-content(100%) - mediaquery: - '(max-width: 800px)': - grid-template-columns: 100% + layout: !include ../../snippets/layout_room_popup.yaml cards: - type: custom:auto-entities filter: @@ -42,6 +32,9 @@ browser_mod: template: - mediaplayer - icon_tv + styles: + card: + - border-radius: 10% card: type: grid columns: 3 diff --git a/config/dashboards/shared/popup/rooms/kitchen.yaml b/config/dashboards/shared/popup/rooms/kitchen.yaml index ccd2cbe..a30ee79 100755 --- a/config/dashboards/shared/popup/rooms/kitchen.yaml +++ b/config/dashboards/shared/popup/rooms/kitchen.yaml @@ -3,19 +3,10 @@ browser_mod: service: browser_mod.popup data: title: Kitchen - - card_mod: !include ../../snippets/style_popup_cardmod.yaml content: type: custom:layout-card layout_type: custom:grid-layout - layout: - margin: 1.5% 0 - gap: 5% - grid-template-columns: 20vw - grid-template-rows: fit-content(100%) - mediaquery: - '(max-width: 800px)': - grid-template-columns: 100% + layout: !include ../../snippets/layout_room_popup.yaml cards: - type: custom:auto-entities filter: diff --git a/config/dashboards/shared/popup/rooms/livingroom.yaml b/config/dashboards/shared/popup/rooms/livingroom.yaml index 70ad845..f92e835 100755 --- a/config/dashboards/shared/popup/rooms/livingroom.yaml +++ b/config/dashboards/shared/popup/rooms/livingroom.yaml @@ -3,20 +3,10 @@ browser_mod: service: browser_mod.popup data: title: Living Room - - card_mod: !include ../../snippets/style_popup_cardmod.yaml - content: type: custom:layout-card layout_type: custom:grid-layout - layout: - margin: 1.5% 0 - gap: 5% - grid-template-columns: 20vw - grid-template-rows: fit-content(100%) - mediaquery: - '(max-width: 800px)': - grid-template-columns: 100% + layout: !include ../../snippets/layout_room_popup.yaml cards: - type: custom:auto-entities filter: diff --git a/config/dashboards/shared/popup/rooms/office.yaml b/config/dashboards/shared/popup/rooms/office.yaml index 9ac2e76..04f0838 100755 --- a/config/dashboards/shared/popup/rooms/office.yaml +++ b/config/dashboards/shared/popup/rooms/office.yaml @@ -3,20 +3,10 @@ browser_mod: service: browser_mod.popup data: title: Office - - card_mod: !include ../../snippets/style_popup_cardmod.yaml - content: type: custom:layout-card layout_type: custom:grid-layout - layout: - margin: 1.5% 0 - gap: 5% - grid-template-columns: 20vw - grid-template-rows: fit-content(100%) - mediaquery: - '(max-width: 800px)': - grid-template-columns: 100% + layout: !include ../../snippets/layout_room_popup.yaml cards: - type: custom:auto-entities filter: diff --git a/config/dashboards/shared/popup/rooms/utility.yaml b/config/dashboards/shared/popup/rooms/utility.yaml index 90c05bf..b529d27 100755 --- a/config/dashboards/shared/popup/rooms/utility.yaml +++ b/config/dashboards/shared/popup/rooms/utility.yaml @@ -3,20 +3,10 @@ browser_mod: service: browser_mod.popup data: title: Utility Room - - card_mod: !include ../../snippets/style_popup_cardmod.yaml - content: type: custom:layout-card layout_type: custom:grid-layout - layout: - margin: 1.5% 0 - gap: 5% - grid-template-columns: 20vw - grid-template-rows: fit-content(100%) - mediaquery: - '(max-width: 800px)': - grid-template-columns: 100% + layout: !include ../../snippets/layout_room_popup.yaml cards: - type: custom:auto-entities filter: diff --git a/config/dashboards/shared/popup/security_sensors.yaml b/config/dashboards/shared/popup/security_sensors.yaml index f32814b..defcf2a 100755 --- a/config/dashboards/shared/popup/security_sensors.yaml +++ b/config/dashboards/shared/popup/security_sensors.yaml @@ -3,61 +3,63 @@ browser_mod: service: browser_mod.popup data: title: Sensors - style: !include ../snippets/style_footer_transparent.yaml - card_mod: !include ../snippets/style_popup_footer.yaml + style: > + --max-popup-column: 2; content: - type: custom:layout-card - layout_type: custom:grid-layout - layout: !include ../snippets/popup_footer_layout.yaml - cards: - ################################################# - # # - # SECURITY SENSORS # - # # - ################################################# - - type: custom:auto-entities - - card: - type: entities - title: Motion Sensors - show_header_toggle: false - card_mod: - class: header - filter: - template: | - {% for sensor in expand('group.motion_sensors') -%} - {%- set name = state_attr(sensor.entity_id, "friendly_name") | regex_replace(find='Motion Sensor ', replace='') -%} - {{ - { 'entity': sensor.entity_id, - 'name': name, - 'state_color': true, - 'secondary_info': 'last-changed' - } - }}, - {%- endfor %} - sort: - method: last_changed - reverse: true - - - type: custom:auto-entities - card: - type: entities - title: Contact Sensors - show_header_toggle: false + type: custom:mod-card + card_mod: !include ../snippets/style_popup_footer.yaml + card: + type: custom:layout-card + layout_type: custom:grid-layout + layout: !include ../snippets/popup_footer_layout.yaml + cards: + ################################################# + # # + # SECURITY SENSORS # + # # + ################################################# + - type: custom:auto-entities + card: + type: entities + title: Motion Sensors + show_header_toggle: false card_mod: class: header - filter: - template: | - {% for sensor in expand('group.contact_sensors') -%} - {%- set name = state_attr(sensor.entity_id, "friendly_name") | regex_replace(find='Contact Sensor ', replace='') -%} - {{ - { 'entity': sensor.entity_id, - 'name': name, - 'state_color': true, - 'secondary_info': 'last-changed' - } - }}, - {%- endfor %} - sort: - method: last_changed - reverse: true + filter: + template: | + {% for sensor in expand('group.motion_sensors') -%} + {%- set name = state_attr(sensor.entity_id, "friendly_name") | regex_replace(find='Motion Sensor ', replace='') -%} + {{ + { 'entity': sensor.entity_id, + 'name': name, + 'state_color': true, + 'secondary_info': 'last-changed' + } + }}, + {%- endfor %} + sort: + method: last_changed + reverse: true + + - type: custom:auto-entities + card: + type: entities + title: Contact Sensors + show_header_toggle: false + card_mod: + class: header + filter: + template: | + {% for sensor in expand('group.contact_sensors') -%} + {%- set name = state_attr(sensor.entity_id, "friendly_name") | regex_replace(find='Contact Sensor ', replace='') -%} + {{ + { 'entity': sensor.entity_id, + 'name': name, + 'state_color': true, + 'secondary_info': 'last-changed' + } + }}, + {%- endfor %} + sort: + method: last_changed + reverse: true diff --git a/config/dashboards/shared/popup/test_pop.yaml b/config/dashboards/shared/popup/test_pop.yaml deleted file mode 100644 index 9123e0a..0000000 --- a/config/dashboards/shared/popup/test_pop.yaml +++ /dev/null @@ -1,879 +0,0 @@ -action: fire-dom-event -browser_mod: - service: browser_mod.popup - data: - title: ' ' - content: - type: picture-elements - card_mod: - style: | - ha-card { - background: rgba(44, 45, 68, 0.4); - height: 346px !important; - width: 535px !important; - } - elements: - - type: custom:state-switch - entity: media_player.spotify - transition: flip - transition_time: 200 - default: idle - style: - top: 10px - left: 0px - height: 346px - width: 500px - transform: translate(0%, 0%) - states: - idle: - type: picture-elements - card_mod: - style: | - ha-card { - background: transparent; - height: 346px !important; - width: 535px !important; - } - elements: - - type: custom:button-card - show_state: false - show_name: true - show_label: true - tap_action: - action: none - name: Streaming - label: Playlists - styles: - card: - - background-color: transparent - - height: 50px - grid: - - grid-template-areas: '"n l"' - - grid-template-columns: auto auto - - grid-template-rows: auto - name: - - font-size: 30px - - color: '#74e5f2' - - font-weight: lighter - label: - - font-size: 24px - - align-self: start - - color: transparent - - justify-self: start - - padding: 2px 0px 0px 9px - - font-weight: lighter - style: - top: 0px - left: 32px - transform: translate(0%, 0%) - - type: custom:swipe-card - start_card: 1 - card_mod: - style: | - ha-card { - width: 500px; - height: 346px; - top: 0px; - transform: translate(0%, 0%); - } - .swiper-wrapper { - height: 300px !important; - } - .swiper-container .swiper-button-next { - display: none; - } - .swiper-container .swiper-button-next::after { - display: none; - } - .swiper-container .swiper-button-prev { - display: none; - } - .swiper-container .swiper-button-prev::after { - display: none; - } - .swiper-pagination { - top: 262px !important; - height: 30px; - width: 42% !important; - left: 290px !important; - } - .swiper-pagination-bullet { - margin: 0px 18px 0px !important; - height: 30px !important; - width: 30px !important; - background: transparent !important; - } - parameters: - navigation: null - allowTouchMove: false - speed: 300 - effect: fade - fadeEffect: - crossFade: true - pagination: - type: bullets - clickable: true - style: - width: 500px - height: 346px - top: 0px - transform: translate(0%, 0%) - cards: - - type: picture-elements - image: /local/img/box.png - card_mod: - style: | - ha-card { - background: transparent; - height: 300px; - width: 500px; - left: 6px; - } - elements: - - type: custom:button-card - show_state: false - show_name: false - show_label: false - tap_action: - action: none - styles: - card: - - background-color: transparent - - width: 160px - - height: 48px - grid: - - grid-template-areas: '"play albm featr"' - - grid-template-columns: auto - - grid-template-rows: auto - custom_fields: - play: - - height: 37px - - width: 37px - - position: absolute - - left: '-5px' - - top: 4px - - opacity: 50% - albm: - - height: 28px - - width: 28px - - position: absolute - - left: 66px - - top: 9px - - opacity: 50% - featr: - - height: 28px - - width: 28px - - position: absolute - - right: 0px - - top: 9px - - color: '#afbfdf' - custom_fields: - play: > - [[[ return ``]]] - albm: > - [[[ return ``]]] - featr: | - [[[ return ``]]] - style: - top: 254px - left: 309px - transform: translate(0%, 0%) - - type: custom:button-card - show_state: false - show_name: true - show_label: true - tap_action: - action: none - name: Streaming - label: Featured - styles: - card: - - background-color: transparent - - height: 50px - grid: - - grid-template-areas: '"n l"' - - grid-template-columns: auto auto - - grid-template-rows: auto - name: - - font-size: 30px - - color: transparent - - font-weight: lighter - label: - - font-size: 24px - - align-self: start - - justify-self: start - - padding: 2.5px 0px 0px 9px - - font-weight: lighter - style: - top: 0px - left: 26px - transform: translate(0%, 0%) - - type: custom:spotify-card - spotify_entity: media_player.spotify - playlist_type: featured - always_play_random_song: true - shuffle: true - hide_top_header: true - hide_currently_playing: true - hide_connect_devices: true - hide_warning: true - display_style: grid - limit: 10 - grid_covers_per_row: '5' - style: - transform: translate(0%, 0%) scale(90%) - top: 52px - card_mod: - style: | - ha-card { - background: transparent; - padding: 2px 0px 0px !important; - overflow: visible !important; - } - #header-track { - margin-top: -26px !important; - height: 25px !important; - margin-left: 161px !important; - width: 332px !important; - white-space: nowrap !important; - overflow: hidden !important; - text-overflow: ellipsis !important; - } - #content { - border: 0px !important; - background-color: transparent !important; - padding: 0px !important; - overflow: visible !important; - } - div#footer { - display: none !important; - } - .grid-item { - border-radius: 10px; - box-shadow: 2px 3px 15px -3px rgba(0, 0, 0, 0.3) !important; - transition-duration: 0.25s; - } - .grid-item-album-image.playing { - border-radius: 10px !important; - box-shadow: 0px 0px 20px rgba(175, 191, 223, 1) !important; - } - .grid-item:hover { - box-shadow: 0px 0px 17px #afbfdf !important; - transition-duration: 0.5s; - } - .grid-item-album-image > img { - border-radius: 10px; - } - .dropdown { - border-radius: 10px !important; - max-height: none !important; - box-shadow: none !important; - } - .dropdown-content.dropdown > p { - font-weight: 300; - color: #afbfdf; - } - .dropdown-content.dropdown > a { - font-weight: 300; - border-radius: 10px; - } - .dropdown-content.dropdown > a:hover { - background: #41445f; - } - - type: custom:button-card - tap_action: - action: none - styles: - card: - - height: 45px - - width: 94px - - padding: 0px - - overflow: visible - - background-color: transparent - custom_fields: - icon1: - - height: 28px - - width: 28px - - position: absolute - - top: 8px - - left: 0px - icon2: - - height: 28px - - width: 28px - - position: absolute - - top: 8px - - right: 0px - custom_fields: - icon1: | - [[[ return `` ]]] - icon2: | - [[[ return `` ]]] - style: - top: 255px - left: 36px - overflow: visible - transform: translate(0%, 0%) - border-radius: 10px - - type: custom:hui-element - card_type: media-control - entity: media_player.homepod_mass - style: - top: 257px - right: 390px - overflow: visible - transform: translate(0%, 0%) - card_mod: - style: - .: | - ha-card { - background-color: transparent; - width: 300px; - height: 40px !important; - } - ha-icon-button { - display: none; - } - paper-progress { - display: none; - } - div.top-info { - display: none; - } - div.media-info { - display: none; - } - div.background { - display: none; - } - mwc-icon-button.browse-media { - height: 75px; - bottom: 6px; - left: 0px; - } - ha-svg-icon { - display: none; - } - mwc-icon-button.browse-media$: | - button.mdc-icon-button { - height: 28px; - width: 28px; - bottom: -47px; - left: 257px; - border-radius: 100%; - xopacity: 60%; - } - mwc-ripple { - display: none; - } - .mdc-icon-button > i { - display: none; - } - - type: custom:hui-element - card_type: media-control - entity: media_player.spotify - style: - top: 257px - right: 460px - overflow: visible - transform: translate(0%, 0%) - card_mod: - style: - .: | - ha-card { - background-color: transparent; - width: 300px; - height: 40px !important; - } - ha-icon-button { - display: none; - } - paper-progress { - display: none; - } - div.top-info { - display: none; - } - div.media-info { - display: none; - } - div.background { - display: none; - } - mwc-icon-button.browse-media { - height: 75px; - bottom: -3px; - left: 13px; - } - ha-svg-icon { - display: none; - } - mwc-icon-button.browse-media$: | - button.mdc-icon-button { - height: 28px; - width: 28px; - bottom: -38px; - left: 248px; - border-radius: 100%; - xopacity: 50%; - } - mwc-ripple { - display: none; - } - .mdc-icon-button > i { - display: none !important; - } - image: /local/img/box.png - playing: - type: picture-elements - card_mod: - style: | - ha-card { - top: 12px; - left: 31px; - height: 293px !important; - width: 450px; - overflow: visible !important; - background: transparent; - } - elements: - - type: custom:mini-media-player - entity: media_player.spotify - artwork: cover - hide: - name: true - info: true - source: true - sound_mode: true - controls: true - volume: true - power: true - progress: true - runtime: true - icon: true - style: - top: 0px - left: 0px - opacity: 50% - backdrop-filter: blur(8px) - border-radius: 10px - transform: translate(0%, 0%) - card_mod: - style: | - ha-card { - height: 293px !important; - width: 450px !important; - } - ha-card > div.mmp__container { - backdrop-filter: blur(12px); - } - - type: custom:hui-element - card_type: picture-elements - style: - top: 10px - right: 0px - transform: translate(0%, 0%) - card_mod: - style: | - ha-card { - height: 263px !important; - width: 172px; - background: transparent; - } - elements: - - type: custom:mini-media-player - entity: media_player.spotify - style: - top: 16px - right: 90px - transform: translate(0%, 0%) - group: true - hide: - source: true - info: true - sound_mode: true - controls: true - volume: true - power: true - progress: true - runtime: true - icon: true - - type: custom:button-card - show_state: false - show_name: false - show_label: false - tap_action: - action: none - styles: - card: - - background-color: transparent - - height: 263px - - width: 172px - style: - top: 15px - right: 0px - transform: translate(0%, 0%) - - type: custom:button-card - entity: media_player.spotify - show_name: false - tap_action: - action: call-service - service: media_player.media_play_pause - service_data: - entity_id: media_player.spotify - styles: - card: - - height: 60px - - width: 60px - - border-radius: 100% - - background: transparent - custom_fields: - icn: - - height: 60px - - width: 60px - custom_fields: - icn: | - [[[ - if (entity.state === 'playing') - return `` - else return `` - ]]] - style: - top: 50px - right: 56px - border-radius: 100% - transform: translate(0%, 0%) - - type: custom:button-card - icon: fas:step-forward - tap_action: - action: call-service - service: media_player.media_next_track - service_data: - entity_id: | - [[[ - if (states['media_player.spotify'].state === 'playing') - return 'media_player.spotify' - else if (states['media_player.homepod_mass'].state === 'playing') - return 'media_player.homepod_mass' - else return 'media_player.spotify' - ]]] - styles: - card: - - height: 30px - - width: 30px - - border-radius: 100% - - background: transparent - icon: - - height: 30px - - width: 30px - style: - top: 65px - right: 10px - transform: translate(0%, 0%) - - type: custom:button-card - icon: fas:step-backward - tap_action: - action: call-service - service: media_player.media_previous_track - service_data: - entity_id: | - [[[ - if (states['media_player.spotify'].state === 'playing') - return 'media_player.spotify' - else if (states['media_player.homepod_mass'].state === 'playing') - return 'media_player.homepod_mass' - else return 'media_player.spotify' - ]]] - styles: - card: - - height: 30px - - width: 30px - - border-radius: 100% - - background: transparent - icon: - - height: 30px - - width: 30px - style: - top: 65px - right: 132px - transform: translate(0%, 0%) - - type: custom:button-card - icon: fas:random - tap_action: - action: toggle - styles: - card: - - height: 30px - - width: 30px - - background: transparent - icon: - - height: 20px - - width: 20px - - opacity: 45% - style: - top: 110px - right: 104px - transform: translate(0%, 0%) - - type: custom:state-switch - style: - top: 110px - right: 104px - transform: translate(0%, 0%) - entity: media_player.homepod_mass - states: - playing: - type: custom:button-card - icon: fas:random - tap_action: - action: call-service - service: script.toggle_shuffle - service_data: - entity_id: media_player.homepod_mass - styles: - card: - - height: 30px - - width: 30px - - background: transparent - icon: - - height: 20px - - width: 20px - - color: var(--text-color-sensor) - - '--text-color-sensor': |- - [[[ - if (states['media_player.homepod_mass'].attributes.shuffle === 'true') return '#74e5f2'; - else return '#A0A2A8'; - ]]] - - type: custom:state-switch - style: - top: 110px - right: 104px - transform: translate(0%, 0%) - entity: media_player.spotify - states: - playing: - type: custom:button-card - icon: fas:random - tap_action: - action: call-service - service: script.toggle_shuffle - service_data: - entity_id: media_player.spotify - styles: - card: - - height: 30px - - width: 30px - - background: transparent - icon: - - height: 20px - - width: 20px - - color: var(--text-color-sensor) - - '--text-color-sensor': |- - [[[ - if (states['media_player.spotify'].attributes.shuffle == true) return '#74e5f2'; - else return '#A0A2A8'; - ]]] - - type: custom:button-card - icon: fas:sync-alt - tap_action: - action: toggle - styles: - card: - - height: 30px - - width: 30px - - background: transparent - icon: - - height: 20px - - width: 20px - - opacity: 45% - style: - top: 110px - right: 39px - transform: translate(0%, 0%) - - type: custom:state-switch - style: - top: 110px - right: 39px - transform: translate(0%, 0%) - entity: media_player.homepod_mass - states: - playing: - type: custom:button-card - icon: fas:sync-alt - tap_action: - action: call-service - service: script.toggle_repeat - service_data: - entity_id: media_player.homepod_mass - styles: - card: - - height: 30px - - width: 30px - - background: transparent - icon: - - height: 20px - - width: 20px - - color: var(--text-color-sensor) - - '--text-color-sensor': |- - [[[ - if (states['media_player.homepod_mass'].attributes.repeat === 'all') return '#74e5f2'; - else return '#A0A2A8'; - ]]] - - type: custom:state-switch - style: - top: 110px - right: 39px - transform: translate(0%, 0%) - entity: media_player.spotify - states: - playing: - type: custom:button-card - icon: fas:sync-alt - tap_action: - action: call-service - service: script.toggle_repeat - service_data: - entity_id: media_player.spotify - styles: - card: - - height: 30px - - width: 30px - - background: transparent - icon: - - height: 20px - - width: 20px - - color: var(--text-color-sensor) - - '--text-color-sensor': |- - [[[ - if (states['media_player.spotify'].attributes.repeat === 'all') return '#74e5f2'; - else return '#A0A2A8'; - ]]] - - type: custom:mini-media-player - entity: media_player.spotify - style: - top: 145px - right: 5px - transform: translate(0%, 0%) - group: true - toggle_power: true - hide: - name: true - power: true - source: true - sound_mode: true - controls: true - info: true - progress: true - runtime: true - icon: true - artwork: true - card_mod: - style: - mmp-powerstrip$mmp-media-controls$: | - div > ha-slider { - display: none !important; - } - - type: custom:mini-media-player - entity: media_player.spotify - style: - top: 149px - right: 30px - width: 141px - transform: translate(0%, 0%) - group: true - volume_step: 5 - hide: - name: true - source: true - volume_level: true - power: true - mute: true - sound_mode: true - controls: true - info: true - progress: true - runtime: true - icon: true - artwork: true - - type: custom:mini-media-player - entity: media_player.spotify - style: - top: 6px - right: 4px - width: 44px - transform: translate(0%, 0%) scale(0.8) - group: true - toggle_power: true - hide: - name: true - mute: true - source: true - sound_mode: true - controls: true - info: true - progress: true - runtime: true - icon: true - artwork: true - card_mod: - style: - mmp-powerstrip$mmp-media-controls$: | - div > ha-slider { - display: none !important; - } - image: /local/img/box.png - - type: custom:mini-media-player - entity: media_player.spotify - style: - top: 261px - left: 0px - width: 450px - border-radius: 10px - background: transparent - background-color: transparent - transform: translate(0%, 0%) - card_mod: - style: | - ha-card { - --ha-card-background: transparent; - } - hide: - name: true - source: true - power: true - mute: true - volume: true - sound_mode: true - controls: true - info: true - runtime: true - icon: true - artwork: true - - type: custom:mini-media-player - entity: media_player.spotify - artwork: cover - info: scroll - hide: - name: true - source: true - sound_mode: true - controls: true - volume: true - power: true - progress: true - runtime: true - icon: true - style: - top: 15px - left: 15px - transform: translate(0%, 0%) - card_mod: - style: | - ha-card { - height: 263px !important; - width: 263px !important; - overflow: visible !important; - box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.3); - } - image: /local/img/box.png - image: /local/img/box.png diff --git a/config/dashboards/shared/popup/thermostat.yaml b/config/dashboards/shared/popup/thermostat.yaml index 26369a7..360a2e4 100755 --- a/config/dashboards/shared/popup/thermostat.yaml +++ b/config/dashboards/shared/popup/thermostat.yaml @@ -4,75 +4,52 @@ browser_mod: data: title: Thermostat style: > - --popup-min-width: calc(450px + 450px); - card_mod: - style: - layout-card: - $grid-layout$: - # card divider border - .: | - #root > * { - margin: 0px !important; - } - hui-entities-card: - $: | - ha-card { - border-right: 0.1vw solid rgba(58, 69, 73, 0.2); - border-radius: 0; - transition: none; - } - /* portrait */ - @media screen and (max-width: 1400px) { - ha-card { - border-right: none; - border-bottom: 0.1vw solid rgba(58, 69, 73, 0.2); - } - } - $better-thermostat-ui-card$: - .: | - .name { - overflow: visible !important; - } + --max-popup-column: 2; content: - type: custom:layout-card - layout_type: custom:grid-layout - layout: - margin: 0 - grid-template-columns: 1fr 1fr - grid-template-rows: fit-content(100%) - grid-template-areas: auto - mediaquery: - #portrait - '(max-width: 800px)': - grid-template-columns: 1fr - grid-template-rows: fit-content(100%) - grid-template-areas: auto - cards: - - type: entities - entities: - - type: custom:better-thermostat-ui-card - entity: climate.living_room_thermostat - eco_temperature: 20 - name: Living room - - type: custom:better-thermostat-ui-card - entity: climate.kids_room_thermostat - eco_temperature: 20 - name: Kids Room - - type: entities - card_mod: - style: | - ha-card { - border: none !important; - } - entities: - - type: custom:better-thermostat-ui-card - entity: climate.bedroom_thermostat - disable_summer: true - eco_temperature: 20 - name: Bedroom - - type: custom:better-thermostat-ui-card - entity: climate.office_thermostat - disable_window: false - disable_summer: true - eco_temperature: 20 - name: Office + type: custom:mod-card + card_mod: !include ../snippets/style_popup_footer.yaml + card: + type: custom:layout-card + layout_type: custom:grid-layout + layout: !include ../snippets/popup_footer_layout.yaml + cards: + ################################################# + # # + # THERMOSTATS # + # # + ################################################# + - type: entities + entities: + - type: custom:better-thermostat-ui-card + entity: climate.living_room_thermostat + eco_temperature: 20 + name: Living room + card_mod: &style + style: | + .name { + line-height: normal; + } + - type: entities + entities: + - type: custom:better-thermostat-ui-card + entity: climate.kids_room_thermostat + eco_temperature: 20 + name: Kids Room + card_mod: *style + - type: entities + entities: + - type: custom:better-thermostat-ui-card + entity: climate.bedroom_thermostat + disable_summer: true + eco_temperature: 20 + name: Bedroom + card_mod: *style + - type: entities + entities: + - type: custom:better-thermostat-ui-card + entity: climate.office_thermostat + disable_window: false + disable_summer: true + eco_temperature: 20 + name: Office + card_mod: *style diff --git a/config/dashboards/shared/snippets/layout_room_popup.yaml b/config/dashboards/shared/snippets/layout_room_popup.yaml new file mode 100644 index 0000000..01ba080 --- /dev/null +++ b/config/dashboards/shared/snippets/layout_room_popup.yaml @@ -0,0 +1,9 @@ +margin: 0 +gap: 1rem +grid-template-columns: 560px +grid-template-rows: fit-content(100%) +padding: 1rem +mediaquery: + '(max-width: 800px)': + grid-template-columns: 100% + padding: 0 diff --git a/config/dashboards/shared/snippets/popup_footer_layout.yaml b/config/dashboards/shared/snippets/popup_footer_layout.yaml index 4beabe6..4a97c0d 100755 --- a/config/dashboards/shared/snippets/popup_footer_layout.yaml +++ b/config/dashboards/shared/snippets/popup_footer_layout.yaml @@ -1,8 +1,4 @@ -margin: 0 -grid-template-columns: repeat(auto-fit, minmax(400px, 20vw) minmax(400px, 20vw) minmax(400px, 20vw)) +margin: -1 +grid-template-columns: repeat(var(--max-popup-column, auto-fit), minmax(560px, 1fr)) grid-template-rows: auto -mediaquery: - #portrait - '(max-width: 1200px)': - grid-template-columns: 1fr - grid-template-rows: fit-content(100%) +grid-gap: 2px 1px diff --git a/config/dashboards/shared/snippets/style_popup_cardmod.yaml b/config/dashboards/shared/snippets/style_popup_cardmod.yaml index 2000797..60fb6bf 100755 --- a/config/dashboards/shared/snippets/style_popup_cardmod.yaml +++ b/config/dashboards/shared/snippets/style_popup_cardmod.yaml @@ -1,15 +1,8 @@ style: - ha-dialog$: | - :host { - --button-card-border-radius: 10%; - } - .mdc-dialog__surface { - background-color: var(--popup-background-color) !important; - } layout-card$grid-layout$: .: | @media screen and (min-width: 800px) { #root { - padding: 14px !important; + padding: 1rem !important; } } diff --git a/config/dashboards/shared/snippets/style_popup_footer.yaml b/config/dashboards/shared/snippets/style_popup_footer.yaml index b85aaf6..9692001 100755 --- a/config/dashboards/shared/snippets/style_popup_footer.yaml +++ b/config/dashboards/shared/snippets/style_popup_footer.yaml @@ -1,8 +1,7 @@ style: - layout-card: - $grid-layout$: - # card divider border - .: | + layout-card$: + grid-layout: + $: | #root > * { margin: 0px !important; } @@ -11,7 +10,7 @@ style: display: block !important; } } - hui-entities-card: + $hui-entities-card: $: | ha-card { border-right: 0.1vw solid rgba(58, 69, 73, 0.2); @@ -19,6 +18,10 @@ style: transition: none; margin-bottom: 0 !important; } + ha-card.header.nopadding > .card-content { + padding: 0 !important; + } + /* portrait */ @media screen and (max-width: 800px) { ha-card { @@ -26,13 +29,14 @@ style: border-bottom: 0.1vw solid rgba(58, 69, 73, 0.2); } } + $hui-horizontal-stack-card: $: | #root { justify-content: space-evenly; - margin-top: 1.7em; + margin-block: 1.5rem; } - hui-entities-card:last-child: + $hui-entities-card:last-child: $: | ha-card { border: none; diff --git a/config/dashboards/templates/button_card_templates/tpl_base.yaml b/config/dashboards/templates/button_card_templates/tpl_base.yaml index 10125cf..3a84c04 100755 --- a/config/dashboards/templates/button_card_templates/tpl_base.yaml +++ b/config/dashboards/templates/button_card_templates/tpl_base.yaml @@ -1003,7 +1003,7 @@ extra_styles: display: flex; place-self: end; } - @media screen and (min-width: 801px) and (max-width: 1710px) { + @media screen and (min-width: 801px) and (max-width: 1700px) { #container { grid-template-columns: 1fr fit-content(100%) !important; grid-auto-rows: fit-content(100%) fit-content(100%) !important; @@ -1047,12 +1047,18 @@ extra_styles: margin-block: 0; display: inline-block; } + li { - font-size: 14px; + font-size: 1rem; padding-left: 2rem; text-align: left; } - + @media screen and (max-width: 1710px) { + li { + font-size: 0.65rem; + padding-left: 1rem; + } + } li.precipitation { background: url('https://api.iconify.design/meteocons/umbrella-fill.svg') no-repeat left center / contain; } @@ -1108,7 +1114,7 @@ extra_styles: letter-spacing: 0.5px; color: #97989c; } - @media screen and (max-width: 1710px) { + @media screen and (max-width: 1700px) { #name { font-size: 6em; } @@ -1161,7 +1167,7 @@ extra_styles: clip-path: circle(50%); } `: ''} - ${this._config.template.includes('addons_base') ? ` + ${/(tpl_popup_base|addons_base)/.test(this._config.template) ? ` :host { --cpu-mem-font-size: 12px; --cpu-mem-icon-size: 24px; diff --git a/config/dashboards/templates/button_card_templates/tpl_climate.yaml b/config/dashboards/templates/button_card_templates/tpl_climate.yaml index b526bf4..3f11add 100755 --- a/config/dashboards/templates/button_card_templates/tpl_climate.yaml +++ b/config/dashboards/templates/button_card_templates/tpl_climate.yaml @@ -516,23 +516,13 @@ cover: --popup-background-color: rgba(0, 0, 0, 0.4); --popup-border-width: 0; --popup-max-width: calc(405px + 515px); - card_mod: - style: - .: | - @media (max-width: 450px), (max-height: 500px) { - ha-dialog { - --mdc-dialog-min-width: 100vw !important; - --mdc-dialog-min-height: 100vh !important; - --popup-border-radius: 0 !important; - } - } - # card divider border + content: type: custom:layout-card layout_type: custom:grid-layout layout: margin: 0 - grid-template-columns: 0 385px 495px 0 + grid-template-columns: 0 400px 400px 0 grid-template-rows: fit-content(100%) grid-template-areas: | ". main entity ." @@ -563,9 +553,6 @@ cover: div.action { display: none !important; } - ha-card { - margin: 1vw !important; - } ha-card>div>more-info-content>more-info-cover$ha-more-info-state-header$: | p.name { display: none !important; @@ -585,15 +572,6 @@ cover: grid-area: entity state_color: true show_header_toggle: false - card_mod: - style: | - #states { - padding: 0; - } - .: | - mushroom-cover-card { - padding: 1vw !imporant; - } entities: > [[[ if (entity) { diff --git a/config/dashboards/templates/button_card_templates/tpl_media.yaml b/config/dashboards/templates/button_card_templates/tpl_media.yaml index 22a434d..91f421b 100755 --- a/config/dashboards/templates/button_card_templates/tpl_media.yaml +++ b/config/dashboards/templates/button_card_templates/tpl_media.yaml @@ -530,334 +530,6 @@ conditional_media_shows: # ADDED MOVIES # # # ################################################# -kodi_lib_base: - template: - - base - aspect_ratio: 2/1 - show_name: true - show_state: false - show_entity_picture: false - show_icon: false - show_label: true - variables: - tilt_enable: > - [[[ return false; ]]] - tap_action: block - label: > - [[[ - if (entity) { - if (entity && entity.attributes) { - let info = entity.attributes.plot; - var plot = ` - ${info} - `; - return plot; - } - } - ]]] - custom_fields: - poster: > - [[[ - if (entity){ - if (entity && entity.attributes) { - let poster = entity.attributes.poster_url; - return` -
- -
- `; - } - } - ]]] - styles: - grid: - - grid-template-areas: | - ". n" - "poster l" - - grid-template-columns: 1fr 2fr - - grid-template-rows: min-content 1fr - - grid-gap: 1% - - align-items: flex-start - #ADDED MOVIES -added_movies: - template: - - base - - movie_tap_info - aspect_ratio: 1/1 - show_state: true - show_label: true - show_name: false - double_tap_action: !include ../../shared/popup/popup_kodi.yaml - - label: > - [[[ - if (entity) { - if (entity && entity.attributes) { - let cztitle = entity.attributes.title, - originaltitle = entity.attributes.original_title, - rating = entity.attributes.rating, - country = entity.attributes.country, - director = entity.attributes.director, - writers = entity.attributes.writers, - plot = entity.attributes.plot, - year = entity.attributes.year, - genre = entity.attributes.genre; - var info = ` -
- ${country} · ${year} - ${genre} -
`; - return info; - } - } - ]]] - state_display: > - [[[ - if (entity) { - let elt = this.shadowRoot, - await = setTimeout(marquee, 100); - if (entity && entity.attributes) { - let cztitle = entity.attributes.title, - originaltitle = entity.attributes.original_title, - rating = entity.attributes.rating, - country = entity.attributes.country, - year = entity.attributes.year, - genre = entity.attributes.genre; - - var title = cztitle == originaltitle - ? `${cztitle}` - : `${cztitle} · ${originaltitle}`; - var output = ` -
${title}
- `; - } - function marquee() { - let state = elt.getElementById("title"), - container = elt.getElementById("container"); - if (state && container) { - state.innerHTML = title; - let ro = new ResizeObserver(entries => { - let spacer = " ".repeat(3), - s = entries[0], - c = entries[1], - r = s && s.contentRect && - c && c.contentRect && - s.contentRect.width !== 0 && - c.contentRect.width !== 0; - if (r && s.contentRect.width < c.contentRect.width) { - state.classList.remove("marquee"); - } - else if (r && s.contentRect.width >= c.contentRect.width) { - state.innerHTML = `${title} ${spacer} ${title}`; - state.classList.add("marquee"); - } - }); - ro.observe(state); - ro.observe(container); - } - } - return output; - } - ]]] - custom_fields: - rating: > - [[[ - if (entity) { - if (entity && entity.attributes ) { - let rating = Math.round(( entity.attributes.rating * 10)); - var stroke = '#20d07b'; - if (rating <= 40) { stroke = '#ff0000' }; - if (rating <= 60) { stroke = '#ffcc00' }; - let path = ` - - - - - - - ${rating}% - - - - `; - return `${path}`; - } - } - ]]] - detail: > - [[[ - if (entity) { - if (entity && entity.attributes) { - let cztitle = entity.attributes.title, - originaltitle = entity.attributes.original_title, - rating = entity.attributes.rating, - country = entity.attributes.country, - director = entity.attributes.director, - writers = entity.attributes.writers, - plot = entity.attributes.plot, - year = entity.attributes.year, - genre = entity.attributes.genre; - var moreinfo = director === "" && plot !== undefined - ? `
${plot}` - : director !== undefined && plot !== undefined - ? `Directors: ${director}
${plot}` - : ''; - var output = ` -
- -
-
- ${originaltitle} - ${moreinfo} -
- `; - } - return output; - } - ]]] - - poster: > - [[[ - if (entity && entity.attributes.entity_picture) - return ` - - ` - ]]] - fanart: '' - styles: - grid: - - grid-template-areas: | - "poster poster" - "s s" - "l l" - - grid-template-columns: 1fr 1fr - - grid-template-rows: auto min-content min-content - - gap: 0 - - align-items: flex-start - - label: - - color: '#C7C7C7' - - padding-bottom: 4% - - state: - - color: '#C4C4C4' - - line-height: normal - - text-shadow: black 3px 2px 4px - - width: 100% - - card: - - padding: 0% - - border-radius: calc(var(--button-card-border-radius) / 2) - - background-color: '#00000' - - overflow: hidden - - --speed: > - [[[ - let cztitle = entity.attributes.title, - originaltitle = entity.attributes.original_title; - const containerWidth = 24; - var title = cztitle == originaltitle - ? cztitle - : cztitle + " " + originaltitle; - var speed = Math.round((title.length / containerWidth) * 6); - - return `${speed}s`; - ]]] - - custom_fields: - # tailwind: - # - display: block - # - position: absolute - # - width: 100% - # - height: 100% - - # info-icon: - # - position: absolute - # - height: auto - # - right: 2% - # - top: 2% - # - width: 7% - fanart: - - display: block - - position: absolute - - width: 100% - - height: 100% - - background: &bgmovie > - [[[ - if (entity && entity.attributes) - return `center center/cover no-repeat`; - ]]] - - background-image: &bgimgmovie > - [[[ - if (entity && entity.attributes) - return `linear-gradient(to top, rgba(0, 0, 0, 1) 10%, rgba(0, 0, 0, 0) 100%), url("${entity.attributes.fanart_url}")` - ]]] - rating: - - display: block - - position: absolute - - top: 5% - - left: 5% - - width: 15% - - ################################################# - # # - # PROGRESS BAR # - # # - ################################################# progress_bar: styles: custom_fields: diff --git a/config/dashboards/templates/button_card_templates/tpl_sectors.yaml b/config/dashboards/templates/button_card_templates/tpl_sectors.yaml index 515240a..81b9390 100755 --- a/config/dashboards/templates/button_card_templates/tpl_sectors.yaml +++ b/config/dashboards/templates/button_card_templates/tpl_sectors.yaml @@ -701,6 +701,8 @@ light_slider: tpl_popup_base: template: - base + variables: + tilt_enable: false name: > [[[ if (entity) @@ -712,9 +714,9 @@ tpl_popup_base: return ``; ]]] styles: - custom_fields: - icon: - - width: 85% + card: + - border-radius: 10% + tpl_popup_device: template: - tpl_popup_base @@ -735,11 +737,6 @@ tpl_popup_device: return entity.attributes.friendly_name.split(' ')[0]; ]]] style: !include ../../shared/snippets/style_popup_transparent.yaml - card_mod: - style: - #popup header - .: | - content: type: custom:auto-entities card: @@ -762,39 +759,46 @@ tpl_popup_device: tpl_popup_light: template: - tpl_popup_base + tap_action: + action: toggle + haptic: success double_tap_action: - action: fire-dom-event - browser_mod: - service: browser_mod.popup - data: - title: > - [[[ - return !entity || entity.attributes.friendly_name; - ]]] - style: !include ../../shared/snippets/style_popup_transparent.yaml - card_mod: - style: - #popup header - .: | - @media (max-width: 450px), (max-height: 500px) { - ha-dialog>ha-dialog-header { - display: block; - background-color: var(--tablet-popup-header-color) !important; - } - } - content: - type: custom:more-info-card - entity: > - [[[ return entity.entity_id; ]]] - title: ' ' - card_mod: - style: | - state-card-content { - display: none !important; - } - ha-card { - border: none !important; - } + action: more-info + haptic: medium + + # double_tap_action: + # action: fire-dom-event + # browser_mod: + # service: browser_mod.popup + # data: + # title: > + # [[[ + # return !entity || entity.attributes.friendly_name; + # ]]] + # style: !include ../../shared/snippets/style_popup_transparent.yaml + # card_mod: + # style: + # #popup header + # .: | + # @media (max-width: 450px), (max-height: 500px) { + # ha-dialog>ha-dialog-header { + # display: block; + # background-color: var(--tablet-popup-header-color) !important; + # } + # } + # content: + # type: custom:more-info-card + # entity: > + # [[[ return entity.entity_id; ]]] + # title: ' ' + # card_mod: + # style: | + # state-card-content { + # display: none !important; + # } + # ha-card { + # border: none !important; + # } ################################################# # # diff --git a/config/dashboards/templates/decluttering-card.yaml b/config/dashboards/templates/decluttering-card.yaml index 630c6f4..851cca9 100644 --- a/config/dashboards/templates/decluttering-card.yaml +++ b/config/dashboards/templates/decluttering-card.yaml @@ -401,7 +401,7 @@ grid_bathroom: card: type: custom:button-card entity: sensor.bathroom_active - double_tap_action: !include /config/dashboards/shared/popup/test_pop.yaml + # double_tap_action: !include /config/dashboards/shared/popup/test_pop.yaml name: Bathroom template: - rooms_base diff --git a/config/dashboards/templates/streamline-card.yaml b/config/dashboards/templates/streamline-card.yaml index 2f51dca..0a3ed17 100644 --- a/config/dashboards/templates/streamline-card.yaml +++ b/config/dashboards/templates/streamline-card.yaml @@ -402,7 +402,6 @@ grid_bathroom: card: type: custom:button-card entity: sensor.bathroom_active - double_tap_action: !include /config/dashboards/shared/popup/test_pop.yaml name: Bathroom template: - rooms_base diff --git a/config/dashboards/views/main.yaml b/config/dashboards/views/main.yaml index f03b4ad..584585a 100755 --- a/config/dashboards/views/main.yaml +++ b/config/dashboards/views/main.yaml @@ -7,10 +7,11 @@ type: custom:grid-layout layout: # default: margin: 0 - grid-gap: 1.8vw 1vw + grid-gap: 1.5vw 1vw grid-template-columns: 0 1fr 1fr 1fr 1fr 1fr 1fr 0 - grid-template-rows: min-content 1fr 1fr fit-content(100%) 0 + grid-template-rows: 0 min-content 1fr 1fr fit-content(100%) 0 grid-template-areas: | + ". . . . . . . ." ". chips chips chips chips header header ." ". security mainrooms devices other floorplan floorplan ." ". cameras climate media movies floorplan floorplan ." diff --git a/config/dashboards/views/system-grid/side-columns.yaml b/config/dashboards/views/system-grid/side-columns.yaml index ab57876..5dc6ac8 100644 --- a/config/dashboards/views/system-grid/side-columns.yaml +++ b/config/dashboards/views/system-grid/side-columns.yaml @@ -40,7 +40,7 @@ type: custom:layout-card layout_type: custom:grid-layout layout: - grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) + grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) grid-template-rows: auto grid-gap: 0.5rem 0.8rem margin: 0 diff --git a/config/dashboards/views/system-grid/system-graph.yaml b/config/dashboards/views/system-grid/system-graph.yaml index fab3816..2dfec81 100644 --- a/config/dashboards/views/system-grid/system-graph.yaml +++ b/config/dashboards/views/system-grid/system-graph.yaml @@ -9,7 +9,9 @@ view_layout: grid-area: cc show: - mediaquery: '(min-width: 801px)' + mediaquery: '(min-width: 1720px)' + card_mod: + class: historycard cardName: historycard-sys header: 'Monitoring' uimode: dark @@ -49,5 +51,6 @@ view_layout: grid-area: cc show: - mediaquery: '(max-width: 800px)' + mediaquery: '(max-width: 1719px)' lineGraphHeight: 250 + header: ' ' diff --git a/config/dashboards/views/system.yaml b/config/dashboards/views/system.yaml index 059034f..9b26287 100644 --- a/config/dashboards/views/system.yaml +++ b/config/dashboards/views/system.yaml @@ -17,11 +17,22 @@ layout: ". footer footer footer footer . . ." ". . . . . . . ." mediaquery: + # landscape + '(min-width: 1441px) and (max-width: 1720px)': + grid-gap: 1% 1.5% + grid-template-columns: 0 1fr 1fr 1fr 1fr 1fr 1fr 0 + grid-template-rows: 0 min-content 1fr 1fr fit-content + grid-template-areas: | + ". . . . . . ." + ". chips chips chips chips . ." + ". cc cc cc cc c2 c2" + ". footer footer footer footer . ." + #portrait '(min-width: 801px) and (max-width: 1440px)': grid-gap: 1% 1.5% grid-template-columns: 0 1fr 1fr 1fr 0 - grid-template-rows: 0 min-content 1fr 1fr fit-content 0 + grid-template-rows: 0 min-content 1fr 1fr fit-content(100%) 0 grid-template-areas: | ". . . . ." ". chips chips chips ." @@ -36,14 +47,14 @@ layout: margin: 0 # grid-template-columns: 0 repeat(2, 1fr) 0 grid-template-columns: 0 1fr 1fr 0 - grid-template-rows: 0 min-content 1fr fit-content(100%)fit-content(100%) 0 + grid-template-rows: 0 min-content fit-content(100%) fit-content(100%) min-content 1rem grid-template-areas: | ". . . ." ". chips chips ." ". cc cc ." ". c2 c2 ." ". footer footer ." - ". . . ." + ". . . ." ################################################# # # # DASHBOARD # diff --git a/config/themes/graphite-auto.yaml b/config/themes/graphite-auto.yaml index 8d7046d..1758db4 100644 --- a/config/themes/graphite-auto.yaml +++ b/config/themes/graphite-auto.yaml @@ -8,8 +8,8 @@ Graphite Auto: popup-border-radius: 1em popup-padding-x: 0px popup-padding-y: 0px - popup-min-width: 20vw - popup-max-width: 100vw + popup-min-width: 560px + popup-max-width: 1800px tablet-popup-header-color: rgba(200, 218, 222, 0.05) tablet-popup-content-padding: 1.4em 2.2em 1.6em 1.5em tablet-popup-button-padding: 0.1em 2em 1.8em 2em @@ -679,9 +679,10 @@ Graphite Auto: --bar-card-border-radius: 12px !important; --ha-card-border-radius: 0px !important; --ha-card-background: none !important; + --button-card-border-radius: 10%; } :host([card]) .content .container { - padding: 0px !important; + padding: 0px !important; } ha-dialog { --vertical-align-dialog: var(--tablet-popup-align-dialog) !important; diff --git a/config/themes/graphite.yaml b/config/themes/graphite.yaml index 795c03d..6777e8d 100644 --- a/config/themes/graphite.yaml +++ b/config/themes/graphite.yaml @@ -8,7 +8,7 @@ graphite: popup-border-radius: 1em popup-padding-x: 0px popup-padding-y: 0px - popup-min-width: 20vw + popup-min-width: 50vw popup-max-width: 100vw tablet-popup-header-color: rgba(200, 218, 222, 0.05) tablet-popup-content-padding: 1.4em 2.2em 1.6em 1.5em diff --git a/config/themes/tablet.yaml b/config/themes/tablet.yaml index 11230e5..8fcb881 100644 --- a/config/themes/tablet.yaml +++ b/config/themes/tablet.yaml @@ -251,6 +251,17 @@ tablet: gap: 1.5rem !important } } + ################################################# + # # + # HISTORY GRAPH # + # # + ################################################# + grid-layout$history-explorer-card>ha-card: + $: | + h1 { + + line-height: unset !important; + } card-mod-card: | .header .card-header { @@ -259,22 +270,34 @@ tablet: font-weight: 500; line-height: initial; cursor: default; + padding: 0 !important; } .content .card-content { padding: var(--tablet-popup-content-padding) !important; } + ha-card.addon.type-entities { + justify-content: flex-start !important; + } + .addon .card-content { padding: 0 !important; align-content: flex-start; } @media screen and (max-width: 1710px) { + .addon .card-header { + padding: 0 !important; + line-height: unset !important; + } + .addon .card-content { - max-height: calc(100vh - 230px); + max-height: calc(100vh - 250px); overflow-y: auto; overflow-x: hidden; + margin-top: 1rem !important; } + } @@ -307,14 +330,20 @@ tablet: border-radius: 0.3em; overflow: hidden; } - .type-custom-history-explorer-card div#graphlist { - padding: 0 !important; - display: flex; - flex-direction: column; - justify-content: space-between; - height: 100%; - gap: 2rem !important; - } - .type-custom-history-explorer-card div#graphlist > br { - display: none !important; + @media screen and (min-width: 1700px) { + .type-custom-history-explorer-card > ha-card > h1.card-header { + padding: 0 !important; + line-height: unset !important; + } + .type-custom-history-explorer-card div#graphlist { + padding: 0 !important; + display: flex; + flex-direction: column; + justify-content: space-between; + height: 100%; + gap: 2rem !important; + } + .type-custom-history-explorer-card div#graphlist > br { + display: none !important; + } } diff --git a/docs/README.md b/docs/README.md index c3d9e0a..afff3e7 100644 --- a/docs/README.md +++ b/docs/README.md @@ -37,15 +37,15 @@ https://github.com/ngocjohn/hass-config/assets/96962827/acc1a4db-b92e-4ab1-ac9d- - 36,209 + 36,233 32 164 63 54 32 - 1070 + 1071 215 - 37 + 38