8000 GitHub - homeassistant-extras/pi-hole-card: Card to summarize information for, and to control your Pi-Hole 5 or 6 instance!
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content

homeassistant-extras/pi-hole-card

Repository files navigation

Pi-hole Card

Pi-hole Card

Complete Pi-hole monitoring and control for Home Assistant

Home Assistant hacs_badge

GitHub Release GitHub Pre-Release GitHub Tag GitHub branch status

stars home commits license

Built with the tools and technologies:

npm Prettier TypeScript GitHub%20Actions Lit


Overview

A comprehensive dashboard card for managing and monitoring your Pi-hole DNS ad blocker directly from Home Assistant. The card provides real-time statistics and controls in an intuitive, dashboard-style interface that matches the Pi-hole visual identity.

Features

Dashboard Statistics

  • Main Statistics Dashboard - Four color-coded tiles showing your most important Pi-hole metrics:
    • Total DNS Queries
    • Queries Blocked
    • Block Percentage
    • Domains on Blocklists

Dashboard Statistics

Additional Metrics

  • Client Statistics - See active clients, unique domains, unique clients, etc.
  • Performance Data - View cached queries and forwarded DNS requests
  • Interactive Elements - Configurable tap, hold, and double-tap actions for all metrics

Additional Metrics

Additional Metrics

Direct Controls

  • Enable/Disable Controls - Toggle Pi-hole filtering with a single click as well as Group Default
  • Pause Ad-Blocking - Temporarily disable filtering for a specified duration:
    • Configurable durations (default: 60s, 5min, 15min)
    • Automatically re-enables filtering after time expires
    • Shows remaining time until blocking resumes
    • Pause multiple Pi-holes if configured
  • Action Buttons - Quick access buttons for common maintenance tasks:
    • Restart DNS
    • Update Gravity
    • Flush ARP
    • Flush Logs
  • Customizable Actions - Configure custom actions for the control buttons in this section

Pause Ad-Blocking

Control Buttons

Control Buttons

Version Information

  • Component Versions - Display installed versions for all Pi-hole components:
    • Core
    • Docker
    • FTL
    • Web Interface
    • Home Assistant Integration
    • Last Refresh Time

Version Information

Status Monitoring

  • Real-time Status - Visual indication of Pi-hole's current state
  • Error Detection - Automatic highlighting when issues are detected
  • Update Indicators - Clear notification when updates are available
  • Block Time Remaining - Shows remaining time until ad-blocking resumes when paused
  • FTL Diagnostic Message Count - Shows diagnostic message count when more than 0

block-time

diagnostics

Interactive Dashboard

  • Clickable Elements - All sections can be configured with custom actions
  • Visual Indicators - Color-coded statistics to understand status at a glance
  • Customizable Card - Set custom title and icon to match your dashboard style
  • Entity Filtering - Ability to exclude specific entities or entire sections
  • Collapsible Sections - Ability to collapse/expand sections to save space:
    • Switches section (on/off toggles)
    • Actions section (control buttons)
    • Pause section (pause durations)

collapse

filtering

Multi-Pi-hole Support

  • Centralized Control - Manage multiple Pi-hole instances from a single card
  • Aggregated Status - See at a glance how many of your Pi-holes are active
  • Unified Control - Centralized access to all switches from your Pi-hole instances
  • Intelligent Status Indicators - Status automatically adjusts based on collective state:
    • Shows "Running" when all instances are active
    • Shows "Partial" when some instances are active and some are inactive
    • Shows count of active instances (e.g., "2/3")

Example of Partial Multi Pi-hole Status

Example of all Running Multi Pi-hole All Running

Note

The multi-Pi-hole feature currently has some limitations:

  • Statistics shown are from the first Pi-hole in the list only
  • All switches from all Pi-holes are displayed in a single list
  • Only header status reflects the multi-Pi-hole state

Responsive Design

  • Mobile-friendly - Optimized layout for both desktop and mobile viewing
  • Fluid Layout - Responsive design adapts to available space

Responsive Design Responsive Design

Installation

Prerequisites

Warning

Before using this card, please ensure you have the Pi-hole v6 integration installed in your Home Assistant instance.

HACS (Recommended)

HACS

  1. Open HACS in your Home Assistant instance
  2. Click the menu icon in the top right and select "Custom repositories"
  3. Add this repository URL and select "Dashboard" as the category
    • https://github.com/homeassistant-extras/pi-hole-card
  4. Click "Install"

Manual Installation

  1. Download the pi-hole-card.js file from the latest release in the Releases tab.
  2. Copy it to your www/community/pi-hole-card/ folder
  3. Add the following to your configuration.yaml (or add as a resource in dashboards menu)
lovelace:
  resources:
    - url: /local/community/pi-hole-card/pi-hole-card.js
      type: module

Usage

Add the card to your dashboard using the UI editor or YAML:

Card Editor

The card is fully configurable through the card editor, allowing you to customize:

  • Pi-hole device selection (single or multiple)
  • Card title and icon
  • Custom actions for statistics, info panels, and control buttons

editor

YAML

This is the most minimal configuration needed to get started:

type: custom:pi-hole
device_id: your_pihole_device_id

For multiple Pi-hole instances:

type: custom:pi-hole
device_id:
  - your_first_pihole_device_id
  - your_second_pihole_device_id
  - etc..

The card will automatically:

  • Detect all Pi-hole entities associated with the device(s)
  • Organize statistics in the dashboard layout
  • Display control buttons for common actions
  • Show version information for all components
  • For multiple Pi-holes: combine switches and show aggregated status

Finding Your Device ID

If you're unsure what your Pi-hole device ID is, here are several ways to find it:

Method 1: Use the Card Editor (Recommended)

  1. Add the card through the visual editor
  2. Select your Pi-hole device from the dropdown
  3. Click "Show Code Editor" or "View YAML" to see the generated configuration
  4. Copy the device_id value for use in manual YAML configuration

Method 2: Devices Page

  1. Go to Settings β†’ Devices & Services β†’ Devices
  2. Search for "Pi-hole" or browse to find your Pi-hole device
  3. Click on the device and look at the URL - the device ID will be in the URL path

Configuration Options

Name Type Default Description
device_id string or array Required The ID(s) of your Pi-hole device(s) in Home Assistant
title string Pi-Hole Custom title for the card header
icon string mdi:pi-hole Custom icon for the card header
pause_durations array [60,300,900] Durations in seconds for the pause buttons
stats object none Configure actions for statistics tiles
info object none Configure actions for additional info items
controls object none Configure actions for control buttons
exclude_sections list none Sections of entities to exclude. See below.
exclude_entities list none Entities to remove from the card.
entity_order list none Custom order for switch, button, sensor entities or dividers.
collapsed_sections list none Sections to be initially collapsed. See below.
switch_spacing string flex Layout style for switches: flex, space-around, space-between

Action Configuration

Each section (stats, info, controls) supports the following action types:

Name Type Default Description
tap_action object optional Action to perform when tapped
hold_action object optional Action to perform when held
double_tap_action object optional Action to perform when double-tapped

Actions can be configured to perform various operations such as:

  • Toggle entities
  • Show more info
  • Call services
  • Navigate to different views
  • And more!

Section Options

The following section names can be used with exclude_sections:

  • actions
  • footer
  • header
  • pause
  • statistics
  • sensors
  • switches

Collapse Options

The following section names can be used with collapsed_sections:

  • actions
  • switches
  • pause

Switch Spacing Options

The switch_spacing option controls how switches are arranged in the switches section:

  • flex (default): Switches flow naturally with standard flexbox behavior
  • space-around: Equal space around each switch
  • space-between: Maximum space between switches, no space at edges

Auto-discovery

The card automatically discovers and identifies all Pi-hole entities based on:

  • Entity naming patterns
  • Translation keys
  • Entity relationships to the device

This includes sensors, buttons, switches, binary sensors, and update entities.

Example Configurations

Basic Configuration

type: custom:pi-hole
device_id: pi_hole_device_1

Multiple Pi-hole Configuration

type: custom:pi-hole
device_id:
  - pi_hole_device_1
  - pi_hole_device_2
title: 'My Pi-hole Network'

With Custom Title and Icon

type: custom:pi-hole
device_id: pi_hole_device_1
title: 'My Pi-hole Server'
icon: 'mdi:shield-check'

With Custom Pause Durations

type: custom:pi-hole
device_id: pi_hole_device_1
pause_durations:
  - 60 # 1 minute
  - 300 # 5 minutes
  - 1800 # 30 minutes
  - 3600 # 1 hour

Pause Ad-Blocking

Excluding Sections & Entities

type: custom:pi-hole
device_id: pi_hole_device_1
exclude_sections:
  - sensors
  - switches
exclude_entities:
  - button.pi_hole_action_refresh_data
  - sensor.pi_hole_latest_data_refresh

With Custom Actions

type: custom:pi-hole
device_id: pi_hole_device_1
title: 'Network Protection'
stats:
  tap_action:
    action: more-info
  hold_action:
    action: navigate
    navigation_path: /lovelace/network
controls:
  tap_action:
    action: toggle
  hold_action:
    action: more-info

Custom Actions for All Sections

type: custom:pi-hole
device_id: pi_hole_device_1
# Configure stat box actions
stats:
  tap_action:
    action: call-service
    perform_action: browser_mod.popup
    data:
      title: Pi-hole Statistics
      content: 'Detailed view of Pi-hole stats'
  hold_action:
    action: navigate
    navigation_path: /lovelace/network-monitoring
# Configure additional info actions
info:
  tap_action:
    action: more-info
  double_tap_action:
    action: toggle
# Configure control button actions
controls:
  tap_action:
    action: toggle
  hold_action:
    action: more-info
  double_tap_action:
    action: call-service
    perform_action: browser_mod.popup
    data:
      title: Pi-hole Controls
      content: 'Advanced Pi-hole control panel'

Custom Entity Order & Switch Spacing

type: custom:pi-hole
device_id: pi_hole_device_1
switch_spacing: 'space-around'
entity_order:
  - button.pi_hole_action_refresh_data
  - sensor.pi_hole_dns_queries_today
  - sensor.pi_hole_ads_blocked_today
  - switch.pi_hole

Entity Order with Dividers

type: custom:pi-hole
device_id: pi_hole_device_1
entity_order:
  - button.pi_hole_action_refresh_data
  - divider
  - sensor.pi_hole_dns_queries_today
  - sensor.pi_hole_ads_blocked_today
  - divider
  - switch.pi_hole

divider1 divider2

Collapsed Sections

type: custom:pi-hole
device_id: pi_hole_device_1
collapsed_sections:
  - actions
  - switches
  - pause # Start with pause section collapsed

Project Roadmap

  • Initial design: create initial card design
  • Auto-discovery: automatic detection of Pi-hole entities
  • Dashboard statistics: visual representation of key metrics
  • Control buttons: quick actions for common Pi-hole tasks
  • Version info: display component versions
  • Custom actions: tap/hold/double-tap actions for all elements - thanks @dunxd
  • Card customization: custom title and icon options
  • Performance optimizations: improved code structure and efficiency
  • Enhanced entity mapping: better entity identification with translation keys - thanks @bastgau
  • Translations: ability to add translations - thanks @ajavibp
  • Multi-Pi-hole support: manage and monitor multiple Pi-hole instances - thanks @Drudoo
  • Collapsible sections: collapse/expand card sections to save space - thanks @Teleportist
  • Additional visualization options: using HA native more-info, etc. - thanks @dunxd
  • Pause ad-blocking: temporarily disable filtering for specified durations - thanks @StuartHaire, @VVRud
  • Entity ordering: customize the order of displayed entities - thanks @Teleportist
  • Section hiding: ability to disable sections or entities - thanks @pcnate, @bastgau, @Anto79-ops
  • Visual separators: add dividers for switches - thanks @Teleportist
  • Diagnostics info indicator: show diagnostic messages count - thanks @WalterPepeka
  • Links directly to sub pages: direct links to specific Pi-hole admin pages

Contributing

Contributing Guidelines
  1. Fork the Repository: Start by forking the project repository to your GitHub account.
  2. Clone Locally: Clone the forked repository to your local machine using a git client.
    git clone https://github.com/homeassistant-extras/pi-hole-card
  3. Create a New Branch: Always work on a new branch, giving it a descriptive name.
    git checkout -b new-feature-x
  4. Make Your Changes: Develop and test your changes locally.
  5. Commit Your Changes: Commit with a clear message describing your updates.
    git commit -m 'Implemented new feature x.'
  6. Push to GitHub: Push the changes to your forked repository.
    git push origin new-feature-x
  7. Submit a Pull Request: Create a PR against the original project repository. Clearly describe the changes and their motivations.
  8. Review: Once your PR is reviewed and approved, it will be merged into the main branch. Congratulations on your contribution!

Translations

The Pi-hole card supports multiple languages to provide a better experience for users worldwide.

Currently supported languages:

  • English
  • Spanish

Want to contribute a translation? See our translation guide for instructions.

License

This project is protected under the MIT License. For more details, refer to the LICENSE file.

Acknowledgments

  • Built using LitElement
  • Inspired by Pi-hole's own dashboard design
  • Thanks to all contributors!

contributors

ko-fi

Code Quality

Forgive me and my badges..

Stats

Bugs Vulnerabilities Code Smells Technical Debt Duplicated Lines (%) Lines of Code Coverage

Ratings

Quality Gate Status Reliability Rating Security Rating Maintainability Rating

Build Status

Main

CodeQL Dependabot Updates Main Branch CI Fast Forward Check

Release

Release & Deploy Merge

Other

Issue assignment Manual Release

0