🛠️ Custom Sensor Cards for Home Assistant

A collection of sleek, highly-customizable sensor cards for your Home Assistant dashboard. These cards replicate the clean aesthetic of Mushroom Cards but introduce advanced dynamic color thresholds and built-in Visual Editor support—without relying on heavy DOM-manipulation plugins like card-mod.

✨ Features

• Fully Visual Editor: No YAML required! Configure everything directly from the Home Assistant UI.
• Dynamic Color Thresholds: Change the color of your graphs or progress bars based on the sensor's current value.
• Single Color Fallback: Easily toggle off thresholds to use a static, unified color.
• Custom Decimals: Force raw sensor data to display your preferred number of decimal places.
• Max Value Calculation: Pass raw values (RPM, Watts, Bytes) and calculate a percentage on-the-fly for accurate progress bars.
• Lightweight CSS: Replicates mushroom-entity-card styling natively, eliminating the need for card-mod injections.

---

📦 Included Cards

1. Sensor Graph Card (custom:sensor-graph-card)

A beautifully integrated card that combines a state badge with a fading history graph. Perfect for temperatures, network speeds, or any fluctuating metric.

• Prerequisite: You must have mini-graph-card installed in your Home Assistant instance. Our card acts as a smart, styled wrapper around it.

Sensor Graph - Solid Color

Sensor Graph - Color Range

2. Sensor Bar Card (custom:sensor-bar-card)

A clean entity card featuring a dynamic background gradient that fills up based on the sensor's percentage or calculated max value. Perfect for CPU Load, Memory Usage, or Fan RPM.

• Prerequisite: None! This card is entirely native and zero-dependency.

Sensor Bar - Percentage

Sensor Bar - Value

---

📦 Installation

This card is designed to be installed via HACS.

1. Open HACS in your Home Assistant instance.
2. Click the three dots in the top right corner and select Custom repositories.
3. Paste the URL of this repository.
4. Select Dashboard as the category and click Add.
5. Click on the new Sensor Cards integration and hit Download.
6. When prompted, reload your browser cache.

---

⚙️ Configuration

Both cards fully support Home Assistant's visual UI editor. Simply click Add Card, search for "Sensor Graph Card" or "Sensor Bar Card", and configure your options via the menus.

YAML Configuration Example

If you prefer YAML, here are the available configurations:

Sensor Graph Card (Temperature Example)

type: custom:sensor-graph-card
entity: sensor.cpu_temperature
name: CPU Temp
icon: mdi:cpu-64-bit
icon_color: white
decimals: 0
use_thresholds: true
threshold_low: 40
color_low: '#669966'
threshold_med: 60
color_med: '#f3d171'
threshold_high: 80
color_high: '#ff5555'

Sensor Bar Card (Fan RPM Example)

type: custom:sensor-bar-card
entity: sensor.cpu_fan_speed
name: CPU Fan
icon: mdi:fan
icon_color: white
decimals: 0
max_value: 2800
use_thresholds: true
threshold_low: 50     # Interpreted as 50% of the max_value
color_low: '#669966'
threshold_med: 70
color_med: '#f3d171'
threshold_high: 90
color_high: '#ff5555'

---

🎛️ Configuration Variables

Name	Type	Default	Description
type	string	Required	custom:sensor-graph-card or custom:sensor-bar-card
entity	string	Required	The entity ID of the sensor.
name	string	Entity Name	The primary text displayed on the card.
icon	string	Entity Icon	The mdi icon displayed in the badge (e.g., mdi:cpu-64-bit).
icon_color	string	white	The CSS color of the icon.
decimals	number	0	Number of decimal places to display for the sensor state.
use_thresholds	boolean	false	Set to true to enable dynamic low/med/high threshold coloring.
base_color	string	#ff5555	The static color used if thresholds are disabled.
threshold_low	number	Card Specific	The value/percentage below which the color_low is used.
color_low	string	#669966	Hex color used for the low threshold.
threshold_med	number	Card Specific	The value/percentage above which the color_med is used.
color_med	string	#f3d171	Hex color used for the medium threshold.
threshold_high	number	Card Specific	The value/percentage above which the color_high is used.
color_high	string	#ff5555	Hex color used for the high threshold.
max_value	number	None	(Sensor Bar Card Only) Used to calculate a percentage if the raw sensor is not 0-100.

---

📝 Notes & Limitations

• The Sensor Bar Card calculates threshold triggers based on percentage. If you supply a max_value, ensure your threshold_low/med/high values are set as percentages (0-100), not the raw values.
• Ensure you use full 6-character hex codes (e.g., #ff5555 instead of #f55) to ensure the built-in hex-to-rgb converter works correctly for the gradient bars.