mirror of https://github.com/jpawlowski/hass.tibber_prices.git synced 2026-05-28 18:43:40 +00:00

Julian Pawlowski 89de3dcadf docs(user): wrap large YAML blocks in collapsible details elements

All YAML code blocks >12-14 lines in example and concept pages are now
wrapped in HTML <details>/<summary> elements, reducing scroll depth
and making complex pages easier to navigate.

Pages affected:
- automation-examples.md: 9 blocks (heat pump, EV, battery automations)
- dashboard-examples.md: 6 blocks (button-card, mushroom, grid layouts)
- sensors.md: 7 blocks (practical examples, energy/tax templates, timing)
- icon-colors.md: 8 blocks (card_mod methods, complete dashboard, custom colors)
- period-calculation.md: 3 blocks (sensor attr reference, midnight example, automations)

Blocks left visible: short examples (<13 lines), Good/Bad comparisons,
Method 1 (primary recommended approach in icon-colors.md).

Impact: Users can scan page structure without scrolling past long YAML.
Code is still one click away, not hidden behind navigation.

2026-04-11 08:30:25 +00:00

5.1 KiB

Raw Blame History

Dashboard Examples

Beautiful dashboard layouts using Tibber Prices sensors.

Entity ID tip: <home_name> is a placeholder for your Tibber home display name in Home Assistant. Entity IDs are derived from the displayed name (localized), so the exact slug may differ. Example suffixes below use the English display names (en.json) as a baseline. You can find the real ID in Settings → Devices & Services → Entities (or Developer Tools → States).

Basic Price Display Card

Simple card showing current price with dynamic color:

type: entities
title: Current Electricity Price
entities:
  - entity: sensor.<home_name>_current_electricity_price
    name: Current Price
    icon: mdi:flash
  - entity: sensor.<home_name>_current_price_rating
    name: Price Rating
  - entity: sensor.<home_name>_next_electricity_price
    name: Next Price

Period Status Cards

Show when best/peak price periods are active:

type: horizontal-stack
cards:
  - type: entity
    entity: binary_sensor.<home_name>_best_price_period
    name: Best Price Active
    icon: mdi:currency-eur-off
  - type: entity
    entity: binary_sensor.<home_name>_peak_price_period
    name: Peak Price Active
    icon: mdi:alert

Custom Button Card Examples

Price Level Card

Show YAML: Price level card with color gradients (custom:button-card)

type: custom:button-card
entity: sensor.<home_name>_current_price_level
name: Price Level
show_state: true
styles:
  card:
    - background: |
        [[[
          if (entity.state === 'LOWEST') return 'linear-gradient(135deg, #00ffa3 0%, #00d4ff 100%)';
          if (entity.state === 'LOW') return 'linear-gradient(135deg, #4dddff 0%, #00ffa3 100%)';
          if (entity.state === 'NORMAL') return 'linear-gradient(135deg, #ffd700 0%, #ffb800 100%)';
          if (entity.state === 'HIGH') return 'linear-gradient(135deg, #ff8c00 0%, #ff6b00 100%)';
          if (entity.state === 'HIGHEST') return 'linear-gradient(135deg, #ff4500 0%, #dc143c 100%)';
          return 'var(--card-background-color)';
        ]]]

Lovelace Layouts

Compact Mobile View

Optimized for mobile devices:

Show YAML: Compact mobile layout

type: vertical-stack
cards:
  - type: custom:mini-graph-card
    entities:
      - entity: sensor.<home_name>_current_electricity_price
    name: Today's Prices
    hours_to_show: 24
    points_per_hour: 4

  - type: glance
    entities:
      - entity: sensor.<home_name>_best_price_start
        name: Best Period Starts
      - entity: binary_sensor.<home_name>_best_price_period
        name: Active Now

Desktop Dashboard

Full-width layout for desktop:

Show YAML: Desktop 3-column grid layout

type: grid
columns: 3
square: false
cards:
  - type: custom:apexcharts-card
    # See chart-examples.md for ApexCharts config

  - type: vertical-stack
    cards:
      - type: entities
        title: Current Status
        entities:
          - sensor.<home_name>_current_electricity_price
          - sensor.<home_name>_current_price_rating

  - type: vertical-stack
    cards:
      - type: entities
        title: Statistics
        entities:
          - sensor.<home_name>_price_today
          - sensor.<home_name>_today_s_lowest_price
          - sensor.<home_name>_today_s_highest_price

Icon Color Integration

Using the icon_color attribute for dynamic colors:

Show YAML: Dynamic icon colors with mushroom chips

type: custom:mushroom-chips-card
chips:
  - type: entity
    entity: sensor.<home_name>_current_electricity_price
    icon_color: "{{ state_attr('sensor.<home_name>_current_electricity_price', 'icon_color') }}"

  - type: entity
    entity: binary_sensor.<home_name>_best_price_period
    icon_color: green

  - type: entity
    entity: binary_sensor.<home_name>_peak_price_period
    icon_color: red

See Icon Colors for detailed color mapping.

Picture Elements Dashboard

Advanced interactive dashboard:

Show YAML: Picture elements interactive dashboard

type: picture-elements
image: /local/electricity_dashboard_bg.png
elements:
  - type: state-label
    entity: sensor.<home_name>_current_electricity_price
    style:
      top: 20%
      left: 50%
      font-size: 32px
      font-weight: bold

  - type: state-badge
    entity: binary_sensor.<home_name>_best_price_period
    style:
      top: 40%
      left: 30%

  # Add more elements...

Auto-Entities Dynamic Lists

Automatically list all price sensors:

Show YAML: Auto-entities card for all price sensors

type: custom:auto-entities
card:
  type: entities
  title: All Price Sensors
filter:
  include:
    - entity_id: "sensor.<home_name>_*_price"
  exclude:
    - state: unavailable
sort:
  method: state
  numeric: true

💡 Related:

Chart Examples - ApexCharts configurations
Dynamic Icons - Icon behavior
Icon Colors - Color attributes

5.1 KiB Raw Blame History