From 166e2622b6007b3ac13be9974c3d3c6a49843cd9 Mon Sep 17 00:00:00 2001
From: Viet Ngoc <ngocjohn@me.com>
Date: Wed, 8 Jan 2025 01:00:05 +0100
Subject: [PATCH] :robot: 08-01-25 | :recycle: Updated 9 files :fire: Deleted 1
 file :sparkles: Added 1 file -------- - update: config/README.md - update:
 docs/README.md - update: govee/manifest.json - update:
 templates/streamline-card.yaml - update: main-grid/floorplan.yaml - update:
 system-grid/system-graph.yaml - update: themes/tablet.yaml - update:
 views/main.yaml - update: browser_mod/manifest.json - delete:
 main-grid/nowplaying.yaml - add: columns/nowplaying.yaml

--------
Automated commit via script
---
 config/README.md                              |  11 +-
 .../browser_mod/manifest.json                 |   2 +-
 config/custom_components/govee/manifest.json  |   2 +-
 .../dashboards/shared/columns/nowplaying.yaml | 119 ++++++++++++++++++
 .../dashboards/templates/streamline-card.yaml |   8 +-
 .../dashboards/views/main-grid/floorplan.yaml |  99 ++++++++-------
 .../views/main-grid/nowplaying.yaml           | 119 ------------------
 config/dashboards/views/main.yaml             |   4 +-
 .../views/system-grid/system-graph.yaml       |  10 +-
 config/themes/tablet.yaml                     |   4 +-
 docs/README.md                                |  11 +-
 11 files changed, 200 insertions(+), 189 deletions(-)
 create mode 100644 config/dashboards/shared/columns/nowplaying.yaml
 delete mode 100644 config/dashboards/views/main-grid/nowplaying.yaml

diff --git a/config/README.md b/config/README.md
index e2cdeea..9a16ee0 100644
--- a/config/README.md
+++ b/config/README.md
@@ -10,7 +10,7 @@ Hey there! Welcome to my little corner of the tech world! 👨‍💻
 
 This is where I store all the cool configurations for my Home Assistant system. Well, it's a mix of awesome codes and setups I discovered from the Home Assistant community. Seriously, those folks are wizards! 🧙‍♂️ As a bit of an internet newbie turned tech enthusiast, I stumbled upon the magic of IT, and this repository is my way of sharing the joy and knowledge I've gained along the way. Dive in, explore, and let the tech magic begin! ✨
 
-I frequently refresh my configuration files. My current Home Assistant version is <b>2025.1.0</b>. If you find something you like, don't forget to give my repository a ⭐️!
+I frequently refresh my configuration files. My current Home Assistant version is <b>2025.1.1</b>. If you find something you like, don't forget to give my repository a ⭐️!
 
 <video width="100%" controls loop muted>
   <source src="https://github-production-user-asset-6210df.s3.amazonaws.com/96962827/297112091-acc1a4db-b92e-4ab1-ac9d-df067d4ba4d1.mp4" type="video/mp4">
@@ -37,14 +37,14 @@ https://github.com/ngocjohn/hass-config/assets/96962827/acc1a4db-b92e-4ab1-ac9d-
       </thead>
       <tbody>
           <tr>
-              <td>36,161 </td>
+              <td>36,174 </td>
               <td>32</td>
-              <td>170</td>
+              <td>163</td>
               <td>62</td>
-              <td>52</td>
+              <td>54</td>
               <td>32</td>
               <td>1072</td>
-              <td>212</td>
+              <td>215</td>
               <td>37</td>
           </tr>
       </tbody>
@@ -63,7 +63,6 @@ https://github.com/ngocjohn/hass-config/assets/96962827/acc1a4db-b92e-4ab1-ac9d-
 - ArgonOne Active Linear Cooling
 - Cloudflared
 - eufy-security-ws
-- Get HACS
 - Glances
 - go2rtc
 - Mosquitto broker
diff --git a/config/custom_components/browser_mod/manifest.json b/config/custom_components/browser_mod/manifest.json
index 33dcb08..f74e200 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.1"
+  "version": "2.3.2"
 }
\ No newline at end of file
diff --git a/config/custom_components/govee/manifest.json b/config/custom_components/govee/manifest.json
index 363300b..dd3ee4f 100644
--- a/config/custom_components/govee/manifest.json
+++ b/config/custom_components/govee/manifest.json
@@ -10,6 +10,6 @@
   "issue_tracker": "https://github.com/LaggAt/hacs-govee/issues",
   "requirements": ["govee-api-laggat==0.2.2", "dacite==1.8.0"],
   "ssdp": [],
-  "version": "2023.11.1",
+  "version": "2025.1.1",
   "zeroconf": []
 }
diff --git a/config/dashboards/shared/columns/nowplaying.yaml b/config/dashboards/shared/columns/nowplaying.yaml
new file mode 100644
index 0000000..eb9d5fc
--- /dev/null
+++ b/config/dashboards/shared/columns/nowplaying.yaml
@@ -0,0 +1,119 @@
+#################################################
+#                                               #
+#      WIDE SPOTIFY PLAYER                      #
+#                                               #
+#################################################
+type: custom:stack-in-card
+visibility:
+  - condition: state
+    entity: media_player.spotifyplus_ngoc_nguyen
+    state_not: 'off'
+card_mod:
+  style: |
+    :host {
+      --album-art-color: {{ states('sensor.vibrant_color') }}
+    }
+    @keyframes slide-opacity {
+      0% {
+        opacity: 0;
+        clip-path: inset(0 0 0 100%);
+      }
+      100% {
+        opacity: 1;
+        clip-path: inset(0 0 0 0);
+      }
+    }
+    ha-card::before {
+      content: "";
+      position: absolute;
+      height: 100%;
+      width: 100%;
+      background: url( '{{ state_attr('media_player.spotifyplus_ngoc_nguyen', "entity_picture") }}' ) center no-repeat;
+      filter: blur(150px) saturate(400%);
+      background-size: 100% 100%;
+    }
+    ha-card {
+      --ha-card-border-width: 0;
+      background: url( '{{ state_attr("media_player.spotifyplus_ngoc_nguyen", "entity_picture") }}' ), linear-gradient(to left, transparent, rgb(var(--rgb-card-background-color)) 50%);
+      background-size: 50% auto, cover;
+      background-position: right;
+      background-repeat: no-repeat;
+      background-blend-mode: saturation;
+      # opacity: 0;
+    }
+
+cards:
+  - type: custom:mushroom-media-player-card
+    entity: media_player.spotifyplus_ngoc_nguyen
+    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:spotify;
+            animation: beat 1.3s ease-out infinite both;
+          {% elif media_type == 'playlist' %}
+            --card-mod-icon: mdi:spotify;
+            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 {
+          height: 200px !important;
+          --ha-card-border-width: 0;
+          --rgb-state-media-player: var(--album-art-color);
+
+        }
+        mushroom-state-info {
+          --card-primary-color: rgb(var(--album-art-color));
+          --card-secondary-color: rgba(var(--album-art-color), 0.6);
+        }
+        .actions {
+          --rgb-primary-text-color: var(--album-art-color);
+          --primary-text-color: rgb(var(--album-art-color));
+          width: 60% !important;
+          animation: fade-in 1s;
+          animation-delay: 1s;
+        }
+
+        @keyframes fade-in {
+          0% {
+            opacity: 0;
+          }
+          100% {
+            opacity: 1;
+          }
+        }
diff --git a/config/dashboards/templates/streamline-card.yaml b/config/dashboards/templates/streamline-card.yaml
index 5c9c132..48e8c46 100644
--- a/config/dashboards/templates/streamline-card.yaml
+++ b/config/dashboards/templates/streamline-card.yaml
@@ -562,10 +562,10 @@ grid_cam_kids:
     styles:
       card:
         - background-position: center
-    #     - background-image: >
-    #         [[[
-    #             return `linear-gradient(0deg, rgba(0,0,0,.3) 0%, rgba(0,0,0,0) 100%), url(/local/tmp/${variables.entity_id}-latest.jpg)`;
-    #         ]]]
+        - background-image: >
+            [[[
+                return `linear-gradient(0deg, rgba(0,0,0,.3) 0%, rgba(0,0,0,0) 100%), url(/local/tmp/${variables.entity_id}-latest.jpg)`;
+            ]]]
   # CAM TERRACE
 grid_cam_terrace:
   card:
diff --git a/config/dashboards/views/main-grid/floorplan.yaml b/config/dashboards/views/main-grid/floorplan.yaml
index 4d71ff1..e3abdcd 100755
--- a/config/dashboards/views/main-grid/floorplan.yaml
+++ b/config/dashboards/views/main-grid/floorplan.yaml
@@ -3,55 +3,64 @@
 #      FLOORPLAN MAX RESOLUTION                 #
 #                                               #
 #################################################
-- type: custom:floorplan-card
+- type: 'custom:layout-card'
+  layout_type: 'custom:grid-layout'
   view_layout:
     grid-area: floorplan
-    show:
-      mediaquery: '(min-width: 1441px)'
-  card_mod:
-    style: |
-      ha-card {
-        margin: 0;
-        background: radial-gradient(circle, rgb(255 255 255 / 14%) 27%, rgba(57,14,14,0) 61%);
-        box-shadow: none;
-        position: relative;
-        opacity: 0;
-        animation-name: fade-in;
-        animation-duration: 2s;
-        animation-fill-mode: forwards;
-        animation-iteration-count: 1;
-        height: 100%;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        overflow: hidden !important;
-      }
-      @keyframes slide-opacity {
-        0% {
-          transform: translateX(100%);
-          opacity: 0;
-        }
-        100% {
-          transform: translateX(0%);
-          opacity: 1;
-        }
-      }
-      @keyframes fade-in2 {
-        0%   {opacity: 0; left: 100%;}
-        100% {opacity: 1; left: 0;}
-      }
+    mediaquery: '(min-width: 1441px)'
+  layout:
+    grid-template-columns: 1fr
+    grid-template-rows: 1fr fit-content(100%)
+    grid-gap: 0
+    margin: 0
+    height: 100%
 
-      @keyframes fade-in {
-        0%   {opacity: 0;}
-        100% {opacity: 1;}
-      }
-  config:
-    image: /local/hafloor/plan_opt.svg
-    stylesheet: /local/hafloor/style.css
-    # log_level: info
-    # console_log_level: debug
-    rules: !include_dir_merge_list /config/dashboards/floorplan/
+  cards:
+    - type: custom:floorplan-card
+      card_mod:
+        style: |
+          ha-card {
+            margin: 0;
+            background: radial-gradient(circle, rgb(255 255 255 / 14%) 27%, rgba(57,14,14,0) 61%);
+            box-shadow: none;
+            position: relative;
+            opacity: 0;
+            animation-name: fade-in;
+            animation-duration: 2s;
+            animation-fill-mode: forwards;
+            animation-iteration-count: 1;
+            height: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            overflow: hidden !important;
+          }
+          @keyframes slide-opacity {
+            0% {
+              transform: translateX(100%);
+              opacity: 0;
+            }
+            100% {
+              transform: translateX(0%);
+              opacity: 1;
+            }
+          }
+          @keyframes fade-in2 {
+            0%   {opacity: 0; left: 100%;}
+            100% {opacity: 1; left: 0;}
+          }
 
+          @keyframes fade-in {
+            0%   {opacity: 0;}
+            100% {opacity: 1;}
+          }
+      config:
+        image: /local/hafloor/plan_opt.svg
+        stylesheet: /local/hafloor/style.css
+        # log_level: info
+        # console_log_level: debug
+        rules: !include_dir_merge_list /config/dashboards/floorplan/
+    - !include ../../shared/columns/nowplaying.yaml
 #################################################
 #                                               #
 #           FLOORPLAN PORTRAIT                  #
diff --git a/config/dashboards/views/main-grid/nowplaying.yaml b/config/dashboards/views/main-grid/nowplaying.yaml
deleted file mode 100644
index 7958c8a..0000000
--- a/config/dashboards/views/main-grid/nowplaying.yaml
+++ /dev/null
@@ -1,119 +0,0 @@
-#################################################
-#                                               #
-#      WIDE SPOTIFY PLAYER                      #
-#                                               #
-#################################################
-- type: custom:stack-in-card
-  view_layout:
-    grid-area: nowplaying
-    show:
-      mediaquery: '(min-width: 1441px)'
-  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( '{{ state_attr('media_player.spotifyplus_ngoc_nguyen', "entity_picture") }}' ) center no-repeat;
-        filter: blur(150px) saturate(400%);
-        background-size: 100% 100%;
-        bottom: 5.6vw;
-      }
-      ha-card {
-        transform: translate3d(0,0,0);
-        -webkit-transform: translate3d(0,0,0);
-        --ha-card-border-width: 0;
-        background: url( '{{ state_attr("media_player.spotifyplus_ngoc_nguyen", "entity_picture") }}' ), linear-gradient(to left, transparent, rgb(var(--rgb-card-background-color)) 50%);
-        background-size: 50% auto, cover;
-        background-position: right;
-        background-repeat: no-repeat;
-        background-blend-mode: saturation;
-        transition-delay: 250ms;
-        animation: slide-opacity 1000ms ease-in-out both;
-        box-shadow: 0px 9px 20px 5px rgba(var(--album-art-color),.2);
-        opacity: 0;
-        bottom: 3vw;
-        {%- if not is_state('media_player.spotifyplus_ngoc_nguyen', 'playing')%}
-        display: none;
-        {%else%}
-        display: block;
-        {%- endif%}
-      }
-      ha-card:hover {
-        box-shadow: 0px 0px 20px 5px rgba(var(--album-art-color),.4);
-      }
-      :host {
-        --album-art-color: {{ states('sensor.vibrant_color') }}
-      }
-      @keyframes slide-opacity {
-        0% {
-          transform: translateX(50%);
-          opacity: 0;
-        }
-        100% {
-          transform: translateX(0%);
-          opacity: 1;
-        }
-      }
-  cards:
-    - type: custom:mushroom-media-player-card
-      entity: media_player.spotifyplus_ngoc_nguyen
-      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:spotify;
-              animation: beat 1.3s ease-out infinite both;
-            {% elif media_type == 'playlist' %}
-              --card-mod-icon: mdi:spotify;
-              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 {
-            height: 12vh !important;
-            --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));
-            width: 60% !important;
-          }
diff --git a/config/dashboards/views/main.yaml b/config/dashboards/views/main.yaml
index e4ad55d..4abe108 100755
--- a/config/dashboards/views/main.yaml
+++ b/config/dashboards/views/main.yaml
@@ -10,12 +10,12 @@ layout:
   grid-gap: 1.8vw 1vw
   height: 100%
   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: min-content 1fr 1fr auto 0
   grid-template-areas: |
     ". chips     chips      chips     chips    header     header     ."
     ". security  mainrooms  devices   other    floorplan  floorplan  ."
     ". cameras   climate    media     movies   floorplan  floorplan  ."
-    ". footer    footer     footer    footer   nowplaying nowplaying ."
+    ". footer    footer     footer    footer   floorplan  floorplan  ."
     ". .         .          .         .        .          .          ."
 
   mediaquery:
diff --git a/config/dashboards/views/system-grid/system-graph.yaml b/config/dashboards/views/system-grid/system-graph.yaml
index 25a2566..e50e81c 100644
--- a/config/dashboards/views/system-grid/system-graph.yaml
+++ b/config/dashboards/views/system-grid/system-graph.yaml
@@ -11,13 +11,13 @@
       cardName: historycard-sys
       header: 'Monitoring'
       uimode: dark
-      defaultTimeOffset: 1h
+      defaultTimeOffset: 0
       refresh:
         automatic: false
       combineSameUnits: true
-      defaultTimeRange: 24h
+      defaultTimeRange: 12h
       decimation: fast
-      lineGraphHeight: 450
+      lineGraphHeight: 300
       labelsVisible: true
       legendVisible: false
       uiLayout:
@@ -30,6 +30,10 @@
           entities:
             - entity: sensor.*_cpu_percent
               lineMode: lines
+        - type: line
+          entities:
+            - entity: sensor.*_memory_percent
+              lineMode: lines
         - type: line
           entities:
             - entity: sensor.system_monitor_processor_temperature
diff --git a/config/themes/tablet.yaml b/config/themes/tablet.yaml
index 17add70..3ac4a53 100644
--- a/config/themes/tablet.yaml
+++ b/config/themes/tablet.yaml
@@ -100,10 +100,11 @@ tablet:
       hui-view {
         # background: linear-gradient(180deg, rgb(0 0 0) 0%, rgba(23, 26, 37, 1) 42%, rgba(21, 25, 35, 1) 100%) !important;
         background: linear-gradient(180deg, rgba(22, 24, 29, 1) 0%, rgba(23, 26, 37, 1) 42%, rgba(22, 24, 29, 1) 100%) !important;
+        overflow: hidden !important;
       }
       #view {
         background-image: linear-gradient(180deg, rgba(22, 24, 29, 1) 0%, rgba(23, 26, 37, 1) 42%, rgba(22, 24, 29, 1) 100%) !important;
-        overflow: hidden;
+        overflow: hidden !important;
       }
       /* phone */
       @media screen and (max-width: 800px) {
@@ -118,7 +119,6 @@ tablet:
     #################################################
     grid-layout$:
       hui-grid-card:
-
         $: |
           /* default */
           h1 {
diff --git a/docs/README.md b/docs/README.md
index e2cdeea..9a16ee0 100644
--- a/docs/README.md
+++ b/docs/README.md
@@ -10,7 +10,7 @@ Hey there! Welcome to my little corner of the tech world! 👨‍💻
 
 This is where I store all the cool configurations for my Home Assistant system. Well, it's a mix of awesome codes and setups I discovered from the Home Assistant community. Seriously, those folks are wizards! 🧙‍♂️ As a bit of an internet newbie turned tech enthusiast, I stumbled upon the magic of IT, and this repository is my way of sharing the joy and knowledge I've gained along the way. Dive in, explore, and let the tech magic begin! ✨
 
-I frequently refresh my configuration files. My current Home Assistant version is <b>2025.1.0</b>. If you find something you like, don't forget to give my repository a ⭐️!
+I frequently refresh my configuration files. My current Home Assistant version is <b>2025.1.1</b>. If you find something you like, don't forget to give my repository a ⭐️!
 
 <video width="100%" controls loop muted>
   <source src="https://github-production-user-asset-6210df.s3.amazonaws.com/96962827/297112091-acc1a4db-b92e-4ab1-ac9d-df067d4ba4d1.mp4" type="video/mp4">
@@ -37,14 +37,14 @@ https://github.com/ngocjohn/hass-config/assets/96962827/acc1a4db-b92e-4ab1-ac9d-
       </thead>
       <tbody>
           <tr>
-              <td>36,161 </td>
+              <td>36,174 </td>
               <td>32</td>
-              <td>170</td>
+              <td>163</td>
               <td>62</td>
-              <td>52</td>
+              <td>54</td>
               <td>32</td>
               <td>1072</td>
-              <td>212</td>
+              <td>215</td>
               <td>37</td>
           </tr>
       </tbody>
@@ -63,7 +63,6 @@ https://github.com/ngocjohn/hass-config/assets/96962827/acc1a4db-b92e-4ab1-ac9d-
 - ArgonOne Active Linear Cooling
 - Cloudflared
 - eufy-security-ws
-- Get HACS
 - Glances
 - go2rtc
 - Mosquitto broker