Google Weather Frog Card Setup Guide

General
1

Hey everyone! :wave: I wanted to share my setup for the Google Weather Frog card in Home Assistant. It’s a fun and interactive way to display weather information! :sun_with_face:

I based my setup on @arenacloser’s amazing work, but I wanted to make it even more user-friendly. Here’s how I did it:

  1. Template Sensors: I created three template sensors to track precipitation, forecast status, and temperature. These sensors pull data from my weather integration and update every hour.

  2. Helper Sensors: I added two helper sensors—one for cloud coverage and another to determine the weather status. These help the card decide which frog image to display based on the current weather conditions.

  3. Location Picker: I set up an input select dropdown to choose the frog’s location (like beach, city, or field). This adds a fun random element to the card!

  4. Final Sensor: The last sensor combines all the data to pick the perfect frog image from my local folder. It considers both the weather status and the chosen location.

  5. Automation: I created an automation to change the frog’s location every morning at 3:30 AM. If the forecast is sunny and warm, it sets the location to ‘beach’—otherwise, it picks a random location.

  6. Card Setup: I used the stack-in-card and card-mod to style the weather card. The background image and color gradient change dynamically based on the weather status and location.

  7. CSS Variables: I added custom CSS variables to my theme to control the background color gradients. This makes the card look cohesive with my theme.

The result is a beautiful, interactive weather card that updates automatically and reflects the current weather conditions! :rainbow:

I hope this guide helps someone else set up their own Google Weather Frog card. Huge thanks to @arenacloser for the inspiration and code! If you have any questions or suggestions, feel free to reach out! :rocket: