Want to see whether the temperature is rising or falling – with a matching icon, color, and text? Here’s a simple yet powerful solution using a combination of derivative, template, and button-card.
Features:
Icon changes depending on the trend
Icon and text color reflect whether temperature is rising, falling, or stable
Text shows “rising”, “falling” or “stable”
Temperature display
Tap opens more info
Prerequisites
- Install
button-cardvia HACS - Your outdoor temperature sensor (e.g.
sensor.indoor_outdoor_temperatur) should be available and updating regularly
1. Create a Derivative Sensor
Add this to your configuration.yaml to calculate the temperature trend:
sensor:
- platform: derivative
source: sensor.indoor_outdoor_temperatur
name: temperature_trend
unit_time: h
time_window: "00:30:00"
This compares the temperature over the last 30 minutes.
2. (Optional) Create a Textual Trend Sensor
Add this to your templates.yaml (or use template: directly):
template:
- sensor:
- name: Temperature Trend Text
state: >
{% set trend = states('sensor.temperature_trend') | float %}
{% if trend > 0.1 %}
rising
{% elif trend < -0.1 %}
falling
{% else %}
stable
{% endif %}
3. Create the Button Card in Lovelace
Paste the following into your dashboard (YAML view or raw config editor):
type: custom:button-card
entity: sensor.indoor_outdoor_temperatur
name: Outdoor Temperature
show_state: true
show_icon: true
show_name: true
tap_action:
action: more-info
icon: >
[[[
const trend = states['sensor.temperature_trend'].state;
if (parseFloat(trend) > 0.1) return 'mdi:thermometer-chevron-up';
if (parseFloat(trend) < -0.1) return 'mdi:thermometer-chevron-down';
return 'mdi:thermometer';
]]]
state_display: >
[[[
return entity.state + " °C";
]]]
custom_fields:
trend: >
[[[
const trend = parseFloat(states['sensor.temperature_trend'].state);
if (trend > 0.1) return "rising";
if (trend < -0.1) return "falling";
return "stable";
]]]
styles:
card:
- padding: 16px
- border-radius: 12px
- box-shadow: 2px 2px 6px rgba(0,0,0,0.1)
- background-color: '#ffffff20'
icon:
- color: >
[[[
const trend = parseFloat(states['sensor.temperature_trend'].state);
if (trend > 0.1) return 'red';
if (trend < -0.1) return 'blue';
return 'gray';
]]]
- width: 40px
- height: 40px
name:
- font-weight: bold
- font-size: 18px
state:
- font-size: 22px
- font-weight: 600
custom_fields:
trend:
- font-size: 14px
- color: >
[[[
const trend = parseFloat(states['sensor.temperature_trend'].state);
if (trend > 0.1) return 'red';
if (trend < -0.1) return 'blue';
return 'gray';
]]]
- margin-top: 4px