I am using Home Assistant Yellow with a CM4:
- Core: 2026.6.3
- Supervisor: 2026.06.1
- Operating System: 17.3
- Frontend: 20260527.6
- HACS: button-card: v.7.0.1
This builds a tab on the dashboards for a weather meteogram, weather radar, and weather prediction maps. I used Google Gemini AI to do most of the coding work for me.
Use this meteoblue site to build the URL for the iframe of the meteogram: Meteogram Widget for Amsterdam - meteoblue
You will need to grab the portion of the widget code between the double quotes of the iframe source:
<iframe src="grab this part(it's really long with specific hash keys)"
Here's a picture of the end result from a laptop:
Here's the yaml to copy and paste but you will need to update a few of the Users block (or skip that part) and the URLs (specifically the meteoblue.com for the meteogram):
# =========================================================================
# DASHBOARD VIEW PROPERTIES
# This section defines the configuration for a single tab/view in your dashboard.
# =========================================================================
# Instructs the system to use the theme dictated by your profile settings or automation backend
theme: Backend-selected
# The URL suffix used to access this tab directly (e.g., your-ha-url/lovelace/weather)
path: weather
# The plain-text title displayed at the top of the dashboard tab navigation bar
title: Weather
# The icon shown next to or in place of the text title in the navigation bar
icon: mdi:weather-cloudy
# Visibility restrictions: Only displays this tab to specific people based on their internal Home Assistant User IDs
visible:
- user: 1
- user: 2
# Suppresses and removes any global dashboard status badges from showing at the top of this tab
badges: []
# View Mode: Panel layout stretches the first card element to fill 100% of the screen width (best for large dashboards/maps)
type: panel
# =========================================================================
# CARDS GRID ARCHITECTURE
# =========================================================================
cards:
# Groups cards in a strict top-to-bottom stack layout. Because 'panel' view mode is active, this stack stretches full-width.
- type: vertical-stack
cards:
# -----------------------------------------------------------------
# LAYER 1: METEOBLUE WEATHER METEOGRAM WIDGET
# Embeds an interactive external weather graph inside an HTML iframe frame
# -----------------------------------------------------------------
- type: iframe
# Fully parameter-configured Meteoblue API link locked to Celsius, KM/H, and Royse City geolocation
url: >-
https://www.meteoblue.com
aspect_ratio: "16:9" # Provides a default widescreen scaling dimension template
card_mod:
style: |
ha-card {
overflow: hidden; /* Clips away iframe scrollbars and element bleeding */
height: 700px !important; /* Enforces a static 700px tall window wrapper */
background-color: #1a1a1a !important; /* Forces dark charcoal card styling to match widget layout */
}
iframe {
width: 110% !important; /* Expands width past container to hide standard border frames */
height: 110% !important; /* Expands height past container */
transform: scale(0.91); /* Shrinks inner page dimensions slightly to fit visual data perfectly */
transform-origin: top left; /* Sets alignment anchor to prevent structural drifting */
background: #1a1a1a !important; /* Avoids a bright white flash during initial page load sequences */
}
# -----------------------------------------------------------------
# LAYER 2: NATIVE WEATHER FORECAST COMPONENT
# Out-of-the-box Home Assistant component rendering standard daily weather
# -----------------------------------------------------------------
- show_current: true # Displays large current conditions icon and primary temp
show_forecast: true # Displays historical day-by-day preview grid below
type: weather-forecast
entity: weather.home # Pulls tracking telemetry from your primary local weather integration
forecast_type: daily # Formats intervals into discrete blocks per calendar day
# -----------------------------------------------------------------
# LAYER 3: NATIONAL WEATHER SERVICE RADAR LOOP
# Displays an active weather radar GIF using a markdown HTML block
# -----------------------------------------------------------------
- type: vertical-stack
cards:
- type: markdown
title: Weather Radar # Card header text
content: > # Raw HTML image block pointing to the live NOAA/NWS KFWS (Dallas/Fort Worth) radar feed loop
<img src="https://radar.weather.gov/ridge/standard/KFWS_loop.gif"
class="radar-loop" />
card_mod:
style: |
ha-card {
background-color: #000000 !important; # Removes default card color background to let map contrast pop
padding: 0px !important; # Forces card borders completely tight against image boundary edge
}
.card-content {
padding: 0px !important; # Eliminates inner element text padding blocks
background: #000000 !important;
}
img.radar-loop {
display: block;
width: 100%; # Stretches image to dynamically match screen width changes
height: auto; # Automatically manages height ratio scaling constraints
background-color: #000000 !important;
/* Optional: Invert/Hue shifts are commented out here. Useful if NOAA map ever defaults back to blinding white backgrounds */
/* filter: invert(1) hue-rotate(180deg) contrast(1.2); */
}
# -----------------------------------------------------------------
# LAYER 4: WEATHER PREDICTION CENTER - NOAA FORECAST CARDS
# Sequential National Forecast Chart maps showing Days 1, 2, and 3
# -----------------------------------------------------------------
- type: vertical-stack
cards:
# --- DAY 1 SURFACE FORECAST MAP ---
- type: markdown
title: Weather Prediction Center
content: >
<img
src="https://www.wpc.ncep.noaa.gov/NationalForecastChart/staticmaps/noaad1.png"
class="noaa-map" />
card_mod:
style: |
ha-card { background-color: #000000 !important; padding: 0px !important; }
.card-content { padding: 0px !important; background: #000000 !important; }
img.noaa-map {
display: block;
width: 100%;
height: auto;
background-color: #000000 !important;
/* INVERSION TRICK: Blurs out, inverts the color palette, and targets hues.
This manually shifts white/light background US government forecast graphics into clean, high-contrast dark-mode cards */
filter: invert(1) hue-rotate(180deg) contrast(1.2);
}
# --- DAY 2 SURFACE FORECAST MAP ---
- type: markdown
content: >
<img
src="https://www.wpc.ncep.noaa.gov/NationalForecastChart/staticmaps/noaad2.png"
class="noaa-map" />
card_mod:
style: |
ha-card { background-color: #000000 !important; padding: 0px !important; }
.card-content { padding: 0px !important; background: #000000 !important; }
img.noaa-map {
display: block;
width: 100%;
height: auto;
background-color: #000000 !important;
filter: invert(1) hue-rotate(180deg) contrast(1.2); /* Duplicates identical dark-mode parsing rules */
}
# --- DAY 3 SURFACE FORECAST MAP ---
- type: markdown
content: >
<img
src="https://www.wpc.ncep.noaa.gov/NationalForecastChart/staticmaps/noaad3.png"
class="noaa-map" />
card_mod:
style: |
ha-card { background-color: #000000 !important; padding: 0px !important; }
.card-content { padding: 0px !important; background: #000000 !important; }
img.noaa-map {
display: block;
width: 100%;
height: auto;
background-color: #000000 !important;
filter: invert(1) hue-rotate(180deg) contrast(1.2);
}