🌡️ Piotras Climate Info

Piotras1 · March 23, 2026, 8:43pm

Piotras Climate Info

The ultimate monitoring hub for your home climate and energy usage.

4 layout modes:

Layout 1: Compact Row — icon | name | values arranged in a single horizontal row, perfect for sidebars
Layout 2: Vertical Stack — adapts automatically based on icon size: horizontal (icon left, data right) for icon_size > 30, vertical (name → icon → data) for smaller icons
Layout 3: Multi-Column Grid — each device in its own tile with name at top, icon centered, data below
Layout 4: Energy & Percentage Monitor — vertical gauge bar per device with a moving value pointer, optimized for Watts, Amps, Volts or any numeric sensor

Key features:

Temperature, humidity and energy in one clean view per room
Per-device temperature color zones — set your own Cold / Comfort / Hot thresholds and colors independently for each device
Fluid color interpolation — show_linear_color: true enables smooth gradient transitions between color zones
Smart icon animations — optional bounce (cold) and shake (hot) animations activate outside threshold boundaries; enabled with show_anim: true
Active indicator — a badge dot shows when a device is currently running (entity_praca)
Icon shape — choose between circular (form_icon: 1) and rounded square (form_icon: 2) icon rings
4 font styles — default, small-caps, monospace, uppercase with letter spacing
SVG-based rendering — pixel-perfect on any screen and resolution
Fully responsive — automatically adapts to card width

Visual Editor: Full GUI editor — add devices, configure temperature color zones with color pickers and range sliders, set icons, entities and sensors without touching YAML.

Installation

Method 1: Via HACS (Recommended)

Click the button below to automatically add the repository to your HACS:

Click Add in the pop-up window.
Once the repository page opens, click Download.
After downloading, do a Hard reload of your browser.

Method 2: Manual Installation

Download this repository as a ZIP file and extract it.
Inside your Home Assistant config/www/ directory, create a new folder named piotras-climate-info.
Copy the compiled files (from dist/ folder) into config/www/piotras-climate-info/.
Go to Settings → Dashboards → Resources.
Click Add Resource and enter:

/local/piotras-climate-info/piotras-climate-info-loader.js?v=1.1.0

Resource type: JavaScript Module

Hard reload your browser (Ctrl+Shift+R).

Piotras1 · April 9, 2026, 3:55pm

Release v1.2.0

Editor fixes

Fixed editor incorrectly showing default values instead of actual YAML config. Toggles, number and select fields now correctly reflect saved state.

New features

tile_color — fixed background for tiles in Layout 3 and 4. Accepts any CSS value (solid color, gradient). Available at card-level and per-device. Overrides show_color_card when set.
between_entry — gap control extended to Layout 3 and 4 (was Layout 1 and 2 only).
temp_comfort_max in Layout 4 now accepts an entity ID string for a dynamic gauge maximum read live from HA.

devices:
  - name: "Watts"
    entity_kwh: sensor.power_meter
    temp_comfort_max: 500   # gauge goes from 0 to 500 W

devices:
  - name: "Watts"
    entity_kwh: sensor.power_meter
    temp_comfort_max: "sensor.power_limit"   # reads live value from HA

Extras

tile_css_editor.html — standalone visual builder for gradients and box shadows, with live tile preview and one-click copy.

Card-level — same color for all tiles:

type: custom:piotras-climate-info
layout: 3
tile_color: "linear-gradient(135deg, rgba(26,26,46,1) 0%, rgba(255,152,0,0.30) 100%)"
devices:
  - name: "Living Room"
    ...

Per-device — individual color per tile:

type: custom:piotras-climate-info
layout: 3
devices:
  - name: "Living Room"
    tile_color: "#1a1a2e"
    ...
  - name: "Bathroom"
    tile_color: "linear-gradient(135deg, rgba(15,52,96,1) 0%, rgba(26,26,46,1) 100%)"
    ...