Repository: nathan-gs/ha-map-card
Pull request #148: Rainviewer static or animated overlay
Author: login: Milkysunshine
Created: 2025-05-05T15:56:00Z | Merged: 2025-05-05T16:24:00Z

Adds a new showcase entry demonstrating how to animate RainViewer radar frames and apply a CSS filter only to the base map layer for dark mode.


Diff:
diff --git a/showcase/animated-or-static-rainviewer-layer/README.md b/showcase/animated-or-static-rainviewer-layer/README.md
new file mode 100644
index 0000000..475d80b
--- /dev/null
+++ b/showcase/animated-or-static-rainviewer-layer/README.md
@@ -0,0 +1,157 @@
+---
+authors: 
+- Milkysunshine
+title: Rainviewer Overlay
+---
+
+I just wanted to share my config after creating a rainviewer overlay, and correcting the dark mode display with card mod.
+
+I'll lay out the code first, then mention some hurdles I had, and how I worked around them.
+
+Firstly, in your configuration.yaml, you'll need rest sensors to get the current frame, and previous frames from rainviewer:
+
+```
+rest:
+  - resource: https://api.rainviewer.com/public/weather-maps.json
+    scan_interval: 300  # Every 5 minutes
+    sensor:
+     - name: rainviewer_frame
+       value_template: "{{ value_json.radar.nowcast[0].path }}"
+     - name: rainviewer_frames
+       value_template: "{{ value_json.radar.past[-10:] | map(attribute='path') | join(',') }}"
+```
+
+Adjust the value_json.radar.past[-10:] to suit your needs. I left it at -10 even though I only animate 5 frames (for resource purposes.)
+
+
+Next, you'll need two helpers:
+
+First, one that is the frame number index that will be changed via an automation:
+
+input_number.rainviewer_frame_index
+Minimum value: 0
+Maximum value :10 <---- adjust for your needs, but it needs to be at least 1 more than configured in the automation
+Step size: 1
+Display Mode: Slider
+
+
+Second, you'll need a template sensor
+
+sensor.rainviewer_current_frame
+```
+{% set frames = states('sensor.rainviewer_frames').split(',') %}
+          {% set idx = states('input_number.rainviewer_frame_index')|int(0) %}
+          {{ frames[idx] if frames|length > idx else frames[-1] }}
+```
+
+Now, We need to create an automation to cycle the frames on the map:
+
+```
+alias: Cycle RainViewer Frames
+triggers:
+  - seconds: /1 # every 1 second. Adjust to your needs.
+    trigger: time_pattern
+conditions:  # This entire condition is optional. I do it to give the system a break and not keep cycling when no one will see it.
+  - condition: time
+    after: "06:00:00"
+    before: "00:00:00"
+actions:
+  - target:
+      entity_id: input_number.rainviewer_frame_index
+    action: input_number.increment
+    data: {}
+  - if:
+      - condition: numeric_state
+        entity_id: input_number.rainviewer_frame_index
+        above: 3 # When it hits 4 (which is the 5th frame), it will pause for the below delay, and restart. Adjust to change the # of frames animated, but keep it at least 1 less than input_number.rainviewer_frame_index.
+    then:
+      - delay: "00:00:05" # delay for the last frame.
+      - target:
+          entity_id: input_number.rainviewer_frame_index
+        data:
+          value: 0
+        action: input_number.set_value
+      - action: recorder.purge_entities # This entire action is optional, but I do it to not bloat the database. 
+        data:
+          keep_days: 0.05 # this keeps the last 1.2 hours (72 minutes) of history. I do this for debugging, but will probably reduce it.
+          entity_id:
+            - sensor.rainviewer_current_frame
+            - input_number.rainviewer_frame_index
+```
+
+
+Lastly, the card itself. This is a stripped down anonymized version:
+
+```
+type: custom:map-card
+focus_follow: none
+theme_mode: light # Dark mode applies css filters to all layers and makes the rainmap layer look wrong.
+tile_layer_options:
+  maxZoom: 21
+entities:
+  - entity: person.user
+    use_base_entity_only: true
+    history_start: 6 hours ago
+    color: blue
+  - entity: device_tracker.user_phone
+    size: 20
+    color: darkblue
+  - entity: zone.home
+    circle: auto
+    display: icon
+    icon: mdi:home
+    size: 25
+    color: lightblue
+tile_layers:
+  - url: >-
+      https://tilecache.rainviewer.com{{
+      states('sensor.rainviewer_current_frame') }}/512/{z}/{x}/{y}/7/1_0.png # the /7/ in the url adjusts the coloring of the map
+    options:
+      opacity: 0.4
+card_mod: # This inverts ONLY the openstreetmap layer. 
+  style: |
+    ha-card img.leaflet-tile[src*="tile.openstreetmap.org"] {
+      filter: invert(1) hue-rotate(180deg);
+    }
+
+
+```
+
+
+Many of the things I found I had mentioned in the notes. 
+
+I will say, not purging the old data made homeassistant angry anytime I tried to view any of the sensors I created. The high update rate puts some stress on the system.
+
+Some of my lower end clients aren't super happy with the map with the animation as I am using it in a dashboard in panel view. This is why I had to keep the animation slowish and limit the frames. Your experience will vary based on hardware. The old google nest hub display I have constantly casting dashboard is an example of a device that struggles pretty hard. It will often reboot if I leave the map card dashboard open.
+
+I'm running homeassistant OS as a VM on a healthily configured Dell R730XD running proxmox and I was still experiencing some lag on the map until I added the purge to the automation.
+
+If you don't want or need animation, All you would need to overlay the latest radar images is the first rest sensor:
+
+```
+rest:
+  - resource: https://api.rainviewer.com/public/weather-maps.json
+    scan_interval: 300  # Every 5 minutes
+    sensor:
+     - name: rainviewer_frame
+       value_template: "{{ value_json.radar.nowcast[0].path }}"
+```
+
+then adjust the card yaml and add this:
+
+```
+tile_layers:
+  - url: >-
+      https://tilecache.rainviewer.com{{
+      states('sensor.rainviewer_frame') }}/512/{z}/{x}/{y}/7/1_0.png
+    options:
+      opacity: 0.4
+```
+
+
+Here is how it looks:
+
+![rainviewer screenshot](rainviewer.png)
+
+
+I tried getting a traffic overlay on the map as well, but I gave up at the point where I realized I'd probably have to pay for an API to do so. If anyone has any suggestions, I'd love to hear them!
diff --git a/showcase/animated-or-static-rainviewer-layer/rainviewer.png b/showcase/animated-or-static-rainviewer-layer/rainviewer.png
new file mode 100644
index 0000000..22e3db8
Binary files /dev/null and b/showcase/animated-or-static-rainviewer-layer/rainviewer.png differ


Reviews:
user: login: nathan-gs
state: COMMENTED
author_association: OWNER
submitted_at: 2025-05-05T16:05:50Z
user: login: Milkysunshine
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-05T16:10:27Z
user: login: nathan-gs
state: COMMENTED
author_association: OWNER
submitted_at: 2025-05-05T16:14:39Z
user: login: nathan-gs
state: COMMENTED
author_association: OWNER
submitted_at: 2025-05-05T16:15:14Z
user: login: Milkysunshine
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-05T16:18:12Z
user: login: nathan-gs
state: APPROVED
author_association: OWNER
submitted_at: 2025-05-05T16:18:34Z
user: login: nathan-gs
state: COMMENTED
author_association: OWNER
submitted_at: 2025-05-05T16:20:08Z
user: login: Milkysunshine
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-05T16:21:22Z
user: login: nathan-gs
state: APPROVED
author_association: OWNER
submitted_at: 2025-05-05T16:21:40Z

Review comments:
diff_hunk: @@ -0,0 +1,151 @@
+I just wanted to share my config after creating a rainviewer overlay, and correcting the dark mode display with card mod.
+
+I'll lay out the code first, then mention some hurdles I had, and how I worked around them.
+
+Firstly, in your configuration.yaml, you'll need rest sensors to get the current frame, and previous frames from rainviewer:
+
+```
+rest:
+  - resource: https://api.rainviewer.com/public/weather-maps.json
+    scan_interval: 300  # Every 5 minutes
+    sensor:
+     - name: rainviewer_frame
+       value_template: "{{ value_json.radar.nowcast[0].path }}"
+     - name: rainviewer_frames
+       value_template: "{{ value_json.radar.past[-10:] | map(attribute='path') | join(',') }}"
+```
+
+Adjust the value_json.radar.past[-10:] to suit your needs. I left it at -10 even though I only animate 5 frames (for resource purposes.)
+
+
+Next, you'll need two helpers:
+
+First, one that is the frame number index that will be changed via an automation:
+
+input_number.rainviewer_frame_index
+Minimum value: 0
+Maximum value :10 <---- adjust for your needs, but it needs to be at least 1 more than configured in the automation
+Step size: 1
+Display Mode: Slider
+
+
+Second, you'll need a template sensor
+
+sensor.rainviewer_current_frame
+```
+{% set frames = states('sensor.rainviewer_frames').split(',') %}
+          {% set idx = states('input_number.rainviewer_frame_index')|int(0) %}
+          {{ frames[idx] if frames|length > idx else frames[-1] }}
+```
+
+Now, We need to create an automation to cycle the frames on the map:
+
+```
+alias: Cycle RainViewer Frames
+triggers:
+  - seconds: /1 # every 1 second. Adjust to your needs.
+    trigger: time_pattern
+conditions:  # This entire condition is optional. I do it to give the system a break and not keep cycling when no one will see it.
+  - condition: time
+    after: "06:00:00"
+    before: "00:00:00"
+actions:
+  - target:
+      entity_id: input_number.rainviewer_frame_index
+    action: input_number.increment
+    data: {}
+  - if:
+      - condition: numeric_state
+        entity_id: input_number.rainviewer_frame_index
+        above: 3 # When it hits 4 (which is the 5th frame), it will pause for the below delay, and restart. Adjust to change the # of frames animated, but keep it at least 1 less than input_number.rainviewer_frame_index.
+    then:
+      - delay: "00:00:05" # delay for the last frame.
+      - target:
+          entity_id: input_number.rainviewer_frame_index
+        data:
+          value: 0
+        action: input_number.set_value
+      - action: recorder.purge_entities # This entire action is optional, but I do it to not bloat the database. 
+        data:
+          keep_days: 0.05 # this keeps the last 1.2 hours (72 minutes) of history. I do this for debugging, but will probably reduce it.
+          entity_id:
+            - sensor.rainviewer_current_frame
+            - input_number.rainviewer_frame_index
+```
+
+
+Lastly, the card itself. This is a stripped down anonymized version:
+
+```
+type: custom:map-card
+focus_follow: none
+theme_mode: light # Dark mode applies css filters to all layers and makes the rainmap layer look wrong.
+tile_layer_options:
+  maxZoom: 21
+entities:
+  - entity: person.user
+    use_base_entity_only: true
+    history_start: 6 hours ago
+    color: blue
+  - entity: device_tracker.user_phone
+    size: 20
+    color: darkblue
+  - entity: zone.home
+    circle: auto
+    display: icon
+    icon: mdi:home
+    size: 25
+    color: lightblue
+tile_layers:
+  - url: >-
+      https://tilecache.rainviewer.com{{
+      states('sensor.rainviewer_current_frame') }}/512/{z}/{x}/{y}/7/1_0.png # the /7/ in the url adjusts the coloring of the map
+    options:
+      opacity: 0.4
+card_mod: # This inverts ONLY the openstreetmap layer. 
+  style: |
+    ha-card img.leaflet-tile[src*="tile.openstreetmap.org"] {
+      filter: invert(1) hue-rotate(180deg);
+    }
+
+
+```
+
+
+Many of the things I found I had mentioned in the notes. 
+
+I will say, not purging the old data made homeassistant angry anytime I tried to view any of the sensors I created. The high update rate puts some stress on the system.
+
+Some of my lower end clients aren't super happy with the map with the animation as I am using it in a dashboard in panel view. This is why I had to keep the animation slowish and limit the frames. Your experience will vary based on hardware. The old google nest hub display I have constantly casting dashboard is an example of a device that struggles pretty hard. It will often reboot if I leave the map card dashboard open.
+
+I'm running homeassistant OS as a VM on a healthily configured Dell R730XD running proxmox and I was still experiencing some lag on the map until I added the purge to the automation.
+
+If you don't want or need animation, All you would need to overlay the latest radar images is the first rest sensor:
+
+```
+rest:
+  - resource: https://api.rainviewer.com/public/weather-maps.json
+    scan_interval: 300  # Every 5 minutes
+    sensor:
+     - name: rainviewer_frame
+       value_template: "{{ value_json.radar.nowcast[0].path }}"
+```
+
+then adjust the card yaml and add this:
+
+```
+tile_layers:
+  - url: >-
+      https://tilecache.rainviewer.com{{
+      states('sensor.rainviewer_frame') }}/512/{z}/{x}/{y}/7/1_0.png
+    options:
+      opacity: 0.4
+```
+
+
+Here is how it looks:
+
+![Image](https://github.com/user-attachments/assets/4c93f9da-7f15-478e-bb37-75c0b933d001)
path: showcase/animated-or-static-rainviewer-layer/README.md
user: login: nathan-gs
body: You can directly upload the screenshot. as img in the readme: `![rainviewer](image.png)`. This will more likely work on a long time. 
created_at: 2025-05-05T16:05:49Z
author_association: OWNER
diff_hunk: @@ -0,0 +1,151 @@
+I just wanted to share my config after creating a rainviewer overlay, and correcting the dark mode display with card mod.
+
+I'll lay out the code first, then mention some hurdles I had, and how I worked around them.
+
+Firstly, in your configuration.yaml, you'll need rest sensors to get the current frame, and previous frames from rainviewer:
+
+```
+rest:
+  - resource: https://api.rainviewer.com/public/weather-maps.json
+    scan_interval: 300  # Every 5 minutes
+    sensor:
+     - name: rainviewer_frame
+       value_template: "{{ value_json.radar.nowcast[0].path }}"
+     - name: rainviewer_frames
+       value_template: "{{ value_json.radar.past[-10:] | map(attribute='path') | join(',') }}"
+```
+
+Adjust the value_json.radar.past[-10:] to suit your needs. I left it at -10 even though I only animate 5 frames (for resource purposes.)
+
+
+Next, you'll need two helpers:
+
+First, one that is the frame number index that will be changed via an automation:
+
+input_number.rainviewer_frame_index
+Minimum value: 0
+Maximum value :10 <---- adjust for your needs, but it needs to be at least 1 more than configured in the automation
+Step size: 1
+Display Mode: Slider
+
+
+Second, you'll need a template sensor
+
+sensor.rainviewer_current_frame
+```
+{% set frames = states('sensor.rainviewer_frames').split(',') %}
+          {% set idx = states('input_number.rainviewer_frame_index')|int(0) %}
+          {{ frames[idx] if frames|length > idx else frames[-1] }}
+```
+
+Now, We need to create an automation to cycle the frames on the map:
+
+```
+alias: Cycle RainViewer Frames
+triggers:
+  - seconds: /1 # every 1 second. Adjust to your needs.
+    trigger: time_pattern
+conditions:  # This entire condition is optional. I do it to give the system a break and not keep cycling when no one will see it.
+  - condition: time
+    after: "06:00:00"
+    before: "00:00:00"
+actions:
+  - target:
+      entity_id: input_number.rainviewer_frame_index
+    action: input_number.increment
+    data: {}
+  - if:
+      - condition: numeric_state
+        entity_id: input_number.rainviewer_frame_index
+        above: 3 # When it hits 4 (which is the 5th frame), it will pause for the below delay, and restart. Adjust to change the # of frames animated, but keep it at least 1 less than input_number.rainviewer_frame_index.
+    then:
+      - delay: "00:00:05" # delay for the last frame.
+      - target:
+          entity_id: input_number.rainviewer_frame_index
+        data:
+          value: 0
+        action: input_number.set_value
+      - action: recorder.purge_entities # This entire action is optional, but I do it to not bloat the database. 
+        data:
+          keep_days: 0.05 # this keeps the last 1.2 hours (72 minutes) of history. I do this for debugging, but will probably reduce it.
+          entity_id:
+            - sensor.rainviewer_current_frame
+            - input_number.rainviewer_frame_index
+```
+
+
+Lastly, the card itself. This is a stripped down anonymized version:
+
+```
+type: custom:map-card
+focus_follow: none
+theme_mode: light # Dark mode applies css filters to all layers and makes the rainmap layer look wrong.
+tile_layer_options:
+  maxZoom: 21
+entities:
+  - entity: person.user
+    use_base_entity_only: true
+    history_start: 6 hours ago
+    color: blue
+  - entity: device_tracker.user_phone
+    size: 20
+    color: darkblue
+  - entity: zone.home
+    circle: auto
+    display: icon
+    icon: mdi:home
+    size: 25
+    color: lightblue
+tile_layers:
+  - url: >-
+      https://tilecache.rainviewer.com{{
+      states('sensor.rainviewer_current_frame') }}/512/{z}/{x}/{y}/7/1_0.png # the /7/ in the url adjusts the coloring of the map
+    options:
+      opacity: 0.4
+card_mod: # This inverts ONLY the openstreetmap layer. 
+  style: |
+    ha-card img.leaflet-tile[src*="tile.openstreetmap.org"] {
+      filter: invert(1) hue-rotate(180deg);
+    }
+
+
+```
+
+
+Many of the things I found I had mentioned in the notes. 
+
+I will say, not purging the old data made homeassistant angry anytime I tried to view any of the sensors I created. The high update rate puts some stress on the system.
+
+Some of my lower end clients aren't super happy with the map with the animation as I am using it in a dashboard in panel view. This is why I had to keep the animation slowish and limit the frames. Your experience will vary based on hardware. The old google nest hub display I have constantly casting dashboard is an example of a device that struggles pretty hard. It will often reboot if I leave the map card dashboard open.
+
+I'm running homeassistant OS as a VM on a healthily configured Dell R730XD running proxmox and I was still experiencing some lag on the map until I added the purge to the automation.
+
+If you don't want or need animation, All you would need to overlay the latest radar images is the first rest sensor:
+
+```
+rest:
+  - resource: https://api.rainviewer.com/public/weather-maps.json
+    scan_interval: 300  # Every 5 minutes
+    sensor:
+     - name: rainviewer_frame
+       value_template: "{{ value_json.radar.nowcast[0].path }}"
+```
+
+then adjust the card yaml and add this:
+
+```
+tile_layers:
+  - url: >-
+      https://tilecache.rainviewer.com{{
+      states('sensor.rainviewer_frame') }}/512/{z}/{x}/{y}/7/1_0.png
+    options:
+      opacity: 0.4
+```
+
+
+Here is how it looks:
+
+![Image](https://github.com/user-attachments/assets/4c93f9da-7f15-478e-bb37-75c0b933d001)
path: showcase/animated-or-static-rainviewer-layer/README.md
user: login: Milkysunshine
body: Like that?
created_at: 2025-05-05T16:10:26Z
author_association: CONTRIBUTOR
path: showcase/animated-or-static-rainviewer-layer/Screenshot 2025-05-05 110603.png
user: login: nathan-gs
body: I would rename this to `rainviewer.png`
created_at: 2025-05-05T16:14:39Z
author_association: OWNER
diff_hunk: @@ -0,0 +1,151 @@
+I just wanted to share my config after creating a rainviewer overlay, and correcting the dark mode display with card mod.
+
+I'll lay out the code first, then mention some hurdles I had, and how I worked around them.
+
+Firstly, in your configuration.yaml, you'll need rest sensors to get the current frame, and previous frames from rainviewer:
+
+```
+rest:
+  - resource: https://api.rainviewer.com/public/weather-maps.json
+    scan_interval: 300  # Every 5 minutes
+    sensor:
+     - name: rainviewer_frame
+       value_template: "{{ value_json.radar.nowcast[0].path }}"
+     - name: rainviewer_frames
+       value_template: "{{ value_json.radar.past[-10:] | map(attribute='path') | join(',') }}"
+```
+
+Adjust the value_json.radar.past[-10:] to suit your needs. I left it at -10 even though I only animate 5 frames (for resource purposes.)
+
+
+Next, you'll need two helpers:
+
+First, one that is the frame number index that will be changed via an automation:
+
+input_number.rainviewer_frame_index
+Minimum value: 0
+Maximum value :10 <---- adjust for your needs, but it needs to be at least 1 more than configured in the automation
+Step size: 1
+Display Mode: Slider
+
+
+Second, you'll need a template sensor
+
+sensor.rainviewer_current_frame
+```
+{% set frames = states('sensor.rainviewer_frames').split(',') %}
+          {% set idx = states('input_number.rainviewer_frame_index')|int(0) %}
+          {{ frames[idx] if frames|length > idx else frames[-1] }}
+```
+
+Now, We need to create an automation to cycle the frames on the map:
+
+```
+alias: Cycle RainViewer Frames
+triggers:
+  - seconds: /1 # every 1 second. Adjust to your needs.
+    trigger: time_pattern
+conditions:  # This entire condition is optional. I do it to give the system a break and not keep cycling when no one will see it.
+  - condition: time
+    after: "06:00:00"
+    before: "00:00:00"
+actions:
+  - target:
+      entity_id: input_number.rainviewer_frame_index
+    action: input_number.increment
+    data: {}
+  - if:
+      - condition: numeric_state
+        entity_id: input_number.rainviewer_frame_index
+        above: 3 # When it hits 4 (which is the 5th frame), it will pause for the below delay, and restart. Adjust to change the # of frames animated, but keep it at least 1 less than input_number.rainviewer_frame_index.
+    then:
+      - delay: "00:00:05" # delay for the last frame.
+      - target:
+          entity_id: input_number.rainviewer_frame_index
+        data:
+          value: 0
+        action: input_number.set_value
+      - action: recorder.purge_entities # This entire action is optional, but I do it to not bloat the database. 
+        data:
+          keep_days: 0.05 # this keeps the last 1.2 hours (72 minutes) of history. I do this for debugging, but will probably reduce it.
+          entity_id:
+            - sensor.rainviewer_current_frame
+            - input_number.rainviewer_frame_index
+```
+
+
+Lastly, the card itself. This is a stripped down anonymized version:
+
+```
+type: custom:map-card
+focus_follow: none
+theme_mode: light # Dark mode applies css filters to all layers and makes the rainmap layer look wrong.
+tile_layer_options:
+  maxZoom: 21
+entities:
+  - entity: person.user
+    use_base_entity_only: true
+    history_start: 6 hours ago
+    color: blue
+  - entity: device_tracker.user_phone
+    size: 20
+    color: darkblue
+  - entity: zone.home
+    circle: auto
+    display: icon
+    icon: mdi:home
+    size: 25
+    color: lightblue
+tile_layers:
+  - url: >-
+      https://tilecache.rainviewer.com{{
+      states('sensor.rainviewer_current_frame') }}/512/{z}/{x}/{y}/7/1_0.png # the /7/ in the url adjusts the coloring of the map
+    options:
+      opacity: 0.4
+card_mod: # This inverts ONLY the openstreetmap layer. 
+  style: |
+    ha-card img.leaflet-tile[src*="tile.openstreetmap.org"] {
+      filter: invert(1) hue-rotate(180deg);
+    }
+
+
+```
+
+
+Many of the things I found I had mentioned in the notes. 
+
+I will say, not purging the old data made homeassistant angry anytime I tried to view any of the sensors I created. The high update rate puts some stress on the system.
+
+Some of my lower end clients aren't super happy with the map with the animation as I am using it in a dashboard in panel view. This is why I had to keep the animation slowish and limit the frames. Your experience will vary based on hardware. The old google nest hub display I have constantly casting dashboard is an example of a device that struggles pretty hard. It will often reboot if I leave the map card dashboard open.
+
+I'm running homeassistant OS as a VM on a healthily configured Dell R730XD running proxmox and I was still experiencing some lag on the map until I added the purge to the automation.
+
+If you don't want or need animation, All you would need to overlay the latest radar images is the first rest sensor:
+
+```
+rest:
+  - resource: https://api.rainviewer.com/public/weather-maps.json
+    scan_interval: 300  # Every 5 minutes
+    sensor:
+     - name: rainviewer_frame
+       value_template: "{{ value_json.radar.nowcast[0].path }}"
+```
+
+then adjust the card yaml and add this:
+
+```
+tile_layers:
+  - url: >-
+      https://tilecache.rainviewer.com{{
+      states('sensor.rainviewer_frame') }}/512/{z}/{x}/{y}/7/1_0.png
+    options:
+      opacity: 0.4
+```
+
+
+Here is how it looks:
+
+![Image](https://github.com/user-attachments/assets/4c93f9da-7f15-478e-bb37-75c0b933d001)
path: showcase/animated-or-static-rainviewer-layer/README.md
user: login: nathan-gs
body: And use `![rainviewer screenshot](rainviewer.png)`
created_at: 2025-05-05T16:15:14Z
author_association: OWNER
path: showcase/animated-or-static-rainviewer-layer/Screenshot 2025-05-05 110603.png
user: login: Milkysunshine
body: done
created_at: 2025-05-05T16:18:12Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,151 @@
+I just wanted to share my config after creating a rainviewer overlay, and correcting the dark mode display with card mod.
path: showcase/animated-or-static-rainviewer-layer/README.md
user: login: nathan-gs
body: The file needs to start with:
```yaml
---
authors: 
- Milkysunshine
title: Rainviewer Overlay
---
```
created_at: 2025-05-05T16:20:08Z
author_association: OWNER
diff_hunk: @@ -0,0 +1,151 @@
+I just wanted to share my config after creating a rainviewer overlay, and correcting the dark mode display with card mod.
path: showcase/animated-or-static-rainviewer-layer/README.md
user: login: Milkysunshine
body: Done. Thanks again... as I said. First timer.
created_at: 2025-05-05T16:21:22Z
author_association: CONTRIBUTOR

PR comments:
user: login: nathan-gs
created_at: 2025-05-05T16:04:29Z
body: Could you add your screenshot as well? Including as img in the readme: `![rainviewer](image.png)`. 
author_association: OWNER
user: login: nathan-gs
created_at: 2025-05-05T16:07:22Z
body: Thanks a lot for your contribution! Very nice :)
author_association: OWNER
user: login: nathan-gs
created_at: 2025-05-05T16:08:23Z
body: Linked to #147
author_association: OWNER
user: login: nathan-gs
created_at: 2025-05-05T16:24:12Z
body: Thank you @Milkysunshine!!!
author_association: OWNER
user: login: nathan-gs
created_at: 2025-05-05T19:01:56Z
body: @Milkysunshine it's now live at: https://nathan.gs/ha-map-card/animated-or-static-rainviewer-layer/ 
author_association: OWNER