Add Dashboard-Examples
622
Dashboard-Examples.-.md
Normal file
622
Dashboard-Examples.-.md
Normal file
@@ -0,0 +1,622 @@
|
||||
# 📱 Dashboard Examples
|
||||
|
||||
Create beautiful and functional dashboards to control your AdGuard Control Hub. These examples provide ready-to-use Lovelace configurations.
|
||||
|
||||
## 🎛️ Main Control Panel
|
||||
|
||||
A comprehensive overview of your AdGuard Home status and controls.
|
||||
|
||||
### Full Control Dashboard
|
||||
|
||||
```yaml
|
||||
type: vertical-stack
|
||||
title: 🛡️ AdGuard Control Hub
|
||||
cards:
|
||||
# Status Overview
|
||||
- type: glance
|
||||
title: Protection Status
|
||||
columns: 4
|
||||
entities:
|
||||
- entity: switch.adguard_protection
|
||||
name: Protection
|
||||
tap_action:
|
||||
action: toggle
|
||||
- entity: sensor.adguard_blocked_percentage
|
||||
name: Block Rate
|
||||
icon: mdi:percent
|
||||
- entity: sensor.adguard_queries_today
|
||||
name: Queries Today
|
||||
icon: mdi:dns
|
||||
- entity: sensor.adguard_blocked_today
|
||||
name: Blocked Today
|
||||
icon: mdi:block-helper
|
||||
|
||||
# Quick Statistics
|
||||
- type: statistics-graph
|
||||
title: DNS Activity (24h)
|
||||
chart_type: line
|
||||
period: hour
|
||||
stat_types:
|
||||
- sum
|
||||
entities:
|
||||
- sensor.adguard_queries_today
|
||||
- sensor.adguard_blocked_today
|
||||
|
||||
# Device Controls
|
||||
- type: entities
|
||||
title: Network Devices
|
||||
show_header_toggle: false
|
||||
entities:
|
||||
- type: section
|
||||
label: "Family Devices"
|
||||
- entity: switch.adguard_client_kids_ipad
|
||||
name: "Kids iPad"
|
||||
icon: mdi:tablet
|
||||
secondary_info: last-updated
|
||||
- entity: switch.adguard_client_kids_laptop
|
||||
name: "Kids Laptop"
|
||||
icon: mdi:laptop
|
||||
secondary_info: last-updated
|
||||
|
||||
- type: section
|
||||
label: "Work Devices"
|
||||
- entity: switch.adguard_client_work_laptop
|
||||
name: "Work Laptop"
|
||||
icon: mdi:briefcase
|
||||
secondary_info: last-updated
|
||||
|
||||
- type: section
|
||||
label: "Smart Home"
|
||||
- entity: switch.adguard_client_living_room_tv
|
||||
name: "Living Room TV"
|
||||
icon: mdi:television
|
||||
secondary_info: last-updated
|
||||
|
||||
# Emergency Controls
|
||||
- type: horizontal-stack
|
||||
cards:
|
||||
- type: button
|
||||
name: "🚨 Emergency Unblock"
|
||||
icon: mdi:shield-off-outline
|
||||
tap_action:
|
||||
action: call-service
|
||||
service: adguard_hub.emergency_unblock
|
||||
service_data:
|
||||
duration: 600
|
||||
clients: ["all"]
|
||||
hold_action:
|
||||
action: more-info
|
||||
```
|
||||
|
||||
## 👨👩👧👦 Family Control Dashboard
|
||||
|
||||
Specialized dashboard for managing kids' internet access.
|
||||
|
||||
### Kids Internet Control
|
||||
|
||||
```yaml
|
||||
type: vertical-stack
|
||||
title: 👪 Family Internet Control
|
||||
cards:
|
||||
# Family Status Overview
|
||||
- type: glance
|
||||
title: Family Devices Status
|
||||
columns: 3
|
||||
entities:
|
||||
- entity: switch.adguard_client_kids_ipad
|
||||
name: "iPad"
|
||||
tap_action:
|
||||
action: toggle
|
||||
- entity: switch.adguard_client_kids_laptop
|
||||
name: "Laptop"
|
||||
tap_action:
|
||||
action: toggle
|
||||
- entity: switch.adguard_client_kids_phone
|
||||
name: "Phone"
|
||||
tap_action:
|
||||
action: toggle
|
||||
|
||||
# Parental Control Features
|
||||
- type: entities
|
||||
title: Parental Controls
|
||||
show_header_toggle: false
|
||||
entities:
|
||||
- entity: switch.adguard_client_kids_ipad_parental
|
||||
name: "Parental Control - iPad"
|
||||
icon: mdi:account-child
|
||||
- entity: switch.adguard_client_kids_ipad_safesearch
|
||||
name: "Safe Search - iPad"
|
||||
icon: mdi:search-web
|
||||
- entity: switch.adguard_client_kids_ipad_safebrowsing
|
||||
name: "Safe Browsing - iPad"
|
||||
icon: mdi:shield-check
|
||||
|
||||
# Service Blocking Controls
|
||||
- type: entities
|
||||
title: Content Blocking - Kids iPad
|
||||
show_header_toggle: false
|
||||
entities:
|
||||
- type: section
|
||||
label: "Entertainment"
|
||||
- entity: switch.adguard_client_kids_ipad_service_youtube
|
||||
name: "Block YouTube"
|
||||
icon: mdi:youtube
|
||||
- entity: switch.adguard_client_kids_ipad_service_netflix
|
||||
name: "Block Netflix"
|
||||
icon: mdi:netflix
|
||||
- entity: switch.adguard_client_kids_ipad_service_disney_plus
|
||||
name: "Block Disney+"
|
||||
icon: mdi:disney
|
||||
|
||||
- type: section
|
||||
label: "Social Media"
|
||||
- entity: switch.adguard_client_kids_ipad_service_tiktok
|
||||
name: "Block TikTok"
|
||||
icon: mdi:music-note
|
||||
- entity: switch.adguard_client_kids_ipad_service_instagram
|
||||
name: "Block Instagram"
|
||||
icon: mdi:instagram
|
||||
- entity: switch.adguard_client_kids_ipad_service_snapchat
|
||||
name: "Block Snapchat"
|
||||
icon: mdi:snapchat
|
||||
|
||||
- type: section
|
||||
label: "Gaming"
|
||||
- entity: switch.adguard_client_kids_ipad_service_roblox
|
||||
name: "Block Roblox"
|
||||
icon: mdi:gamepad-variant
|
||||
- entity: switch.adguard_client_kids_ipad_service_gaming
|
||||
name: "Block Gaming Services"
|
||||
icon: mdi:controller-classic
|
||||
|
||||
# Quick Action Buttons
|
||||
- type: grid
|
||||
title: Quick Actions
|
||||
square: false
|
||||
columns: 2
|
||||
cards:
|
||||
- type: button
|
||||
name: "📚 Study Mode"
|
||||
icon: mdi:book-open-variant
|
||||
tap_action:
|
||||
action: call-service
|
||||
service: adguard_hub.block_services
|
||||
service_data:
|
||||
client_name: "Kids iPad"
|
||||
services: ["social", "entertainment", "gaming"]
|
||||
card_mod:
|
||||
style: |
|
||||
ha-card {
|
||||
background: linear-gradient(45deg, #2196F3, #21CBF3);
|
||||
color: white;
|
||||
}
|
||||
|
||||
- type: button
|
||||
name: "🎮 Free Time"
|
||||
icon: mdi:play-circle
|
||||
tap_action:
|
||||
action: call-service
|
||||
service: adguard_hub.unblock_services
|
||||
service_data:
|
||||
client_name: "Kids iPad"
|
||||
services: ["entertainment"]
|
||||
card_mod:
|
||||
style: |
|
||||
ha-card {
|
||||
background: linear-gradient(45deg, #4CAF50, #8BC34A);
|
||||
color: white;
|
||||
}
|
||||
|
||||
- type: button
|
||||
name: "😴 Bedtime"
|
||||
icon: mdi:sleep
|
||||
tap_action:
|
||||
action: call-service
|
||||
service: adguard_hub.block_services
|
||||
service_data:
|
||||
client_name: "Kids iPad"
|
||||
services: ["social", "entertainment", "gaming"]
|
||||
card_mod:
|
||||
style: |
|
||||
ha-card {
|
||||
background: linear-gradient(45deg, #9C27B0, #673AB7);
|
||||
color: white;
|
||||
}
|
||||
|
||||
- type: button
|
||||
name: "✅ Allow All"
|
||||
icon: mdi:check-circle
|
||||
tap_action:
|
||||
action: call-service
|
||||
service: adguard_hub.unblock_services
|
||||
service_data:
|
||||
client_name: "Kids iPad"
|
||||
services: ["social", "entertainment", "gaming"]
|
||||
card_mod:
|
||||
style: |
|
||||
ha-card {
|
||||
background: linear-gradient(45deg, #FF9800, #FF5722);
|
||||
color: white;
|
||||
}
|
||||
```
|
||||
|
||||
## 💼 Work Productivity Dashboard
|
||||
|
||||
Control work devices and eliminate distractions during work hours.
|
||||
|
||||
### Work Focus Dashboard
|
||||
|
||||
```yaml
|
||||
type: vertical-stack
|
||||
title: 💼 Work Productivity Control
|
||||
cards:
|
||||
# Work Status
|
||||
- type: entities
|
||||
title: Work Environment
|
||||
show_header_toggle: false
|
||||
entities:
|
||||
- entity: switch.adguard_client_work_laptop
|
||||
name: "Work Laptop Protection"
|
||||
icon: mdi:laptop
|
||||
- entity: binary_sensor.adguard_client_work_laptop_online
|
||||
name: "Work Laptop Online"
|
||||
icon: mdi:lan-connect
|
||||
- entity: sensor.adguard_client_work_laptop_queries
|
||||
name: "DNS Queries Today"
|
||||
icon: mdi:dns
|
||||
|
||||
# Distraction Controls
|
||||
- type: entities
|
||||
title: Distraction Blocking
|
||||
show_header_toggle: false
|
||||
entities:
|
||||
- entity: switch.adguard_client_work_laptop_service_facebook
|
||||
name: "Block Facebook"
|
||||
icon: mdi:facebook
|
||||
- entity: switch.adguard_client_work_laptop_service_twitter
|
||||
name: "Block Twitter"
|
||||
icon: mdi:twitter
|
||||
- entity: switch.adguard_client_work_laptop_service_youtube
|
||||
name: "Block YouTube"
|
||||
icon: mdi:youtube
|
||||
- entity: switch.adguard_client_work_laptop_service_reddit
|
||||
name: "Block Reddit"
|
||||
icon: mdi:reddit
|
||||
- entity: switch.adguard_client_work_laptop_service_netflix
|
||||
name: "Block Netflix"
|
||||
icon: mdi:netflix
|
||||
|
||||
# Focus Mode Controls
|
||||
- type: grid
|
||||
title: Focus Modes
|
||||
square: false
|
||||
columns: 3
|
||||
cards:
|
||||
- type: button
|
||||
name: "🧠 Deep Focus"
|
||||
icon: mdi:brain
|
||||
tap_action:
|
||||
action: call-service
|
||||
service: adguard_hub.block_services
|
||||
service_data:
|
||||
client_name: "Work Laptop"
|
||||
services: ["social", "entertainment", "gaming"]
|
||||
|
||||
- type: button
|
||||
name: "☕ Break Time"
|
||||
icon: mdi:coffee
|
||||
tap_action:
|
||||
action: call-service
|
||||
service: adguard_hub.emergency_unblock
|
||||
service_data:
|
||||
duration: 900 # 15 minutes
|
||||
clients: ["Work Laptop"]
|
||||
|
||||
- type: button
|
||||
name: "👔 Normal Mode"
|
||||
icon: mdi:account-tie
|
||||
tap_action:
|
||||
action: call-service
|
||||
service: adguard_hub.unblock_services
|
||||
service_data:
|
||||
client_name: "Work Laptop"
|
||||
services: ["social"]
|
||||
```
|
||||
|
||||
## 🏠 Guest Network Dashboard
|
||||
|
||||
Manage guest access and apply appropriate restrictions.
|
||||
|
||||
### Guest Control Panel
|
||||
|
||||
```yaml
|
||||
type: vertical-stack
|
||||
title: 🌐 Guest Network Management
|
||||
cards:
|
||||
# Guest Status
|
||||
- type: entities
|
||||
title: Guest Network
|
||||
show_header_toggle: false
|
||||
entities:
|
||||
- entity: switch.adguard_client_guest_network
|
||||
name: "Guest Protection"
|
||||
icon: mdi:wifi-strength-4
|
||||
- entity: binary_sensor.adguard_client_guest_network_active
|
||||
name: "Guest Network Active"
|
||||
icon: mdi:account-group
|
||||
|
||||
# Guest Restrictions
|
||||
- type: entities
|
||||
title: Guest Access Controls
|
||||
show_header_toggle: false
|
||||
entities:
|
||||
- entity: switch.adguard_client_guest_network_service_adult
|
||||
name: "Block Adult Content"
|
||||
icon: mdi:shield-account
|
||||
- entity: switch.adguard_client_guest_network_service_gambling
|
||||
name: "Block Gambling"
|
||||
icon: mdi:cards-playing-outline
|
||||
- entity: switch.adguard_client_guest_network_service_torrents
|
||||
name: "Block Torrents"
|
||||
icon: mdi:download-network
|
||||
|
||||
# Quick Guest Modes
|
||||
- type: horizontal-stack
|
||||
cards:
|
||||
- type: button
|
||||
name: "🔓 Open Access"
|
||||
icon: mdi:wifi-check
|
||||
tap_action:
|
||||
action: call-service
|
||||
service: adguard_hub.update_client
|
||||
service_data:
|
||||
name: "Guest Network"
|
||||
blocked_services: []
|
||||
|
||||
- type: button
|
||||
name: "🛡️ Safe Mode"
|
||||
icon: mdi:shield-check
|
||||
tap_action:
|
||||
action: call-service
|
||||
service: adguard_hub.update_client
|
||||
service_data:
|
||||
name: "Guest Network"
|
||||
blocked_services: ["adult", "gambling", "torrents"]
|
||||
parental_enabled: true
|
||||
safebrowsing_enabled: true
|
||||
```
|
||||
|
||||
## 📊 Statistics Dashboard
|
||||
|
||||
Monitor your network activity and blocking effectiveness.
|
||||
|
||||
### Network Analytics
|
||||
|
||||
```yaml
|
||||
type: vertical-stack
|
||||
title: 📊 Network Analytics
|
||||
cards:
|
||||
# Key Metrics
|
||||
- type: glance
|
||||
title: Today's Statistics
|
||||
columns: 4
|
||||
entities:
|
||||
- entity: sensor.adguard_queries_today
|
||||
name: "Total Queries"
|
||||
icon: mdi:dns
|
||||
- entity: sensor.adguard_blocked_today
|
||||
name: "Blocked"
|
||||
icon: mdi:block-helper
|
||||
- entity: sensor.adguard_blocked_percentage
|
||||
name: "Block Rate"
|
||||
icon: mdi:percent
|
||||
- entity: binary_sensor.adguard_filtering_enabled
|
||||
name: "Filtering"
|
||||
icon: mdi:filter
|
||||
|
||||
# Query History
|
||||
- type: history-graph
|
||||
title: DNS Queries (24 Hours)
|
||||
hours_to_show: 24
|
||||
refresh_interval: 60
|
||||
entities:
|
||||
- sensor.adguard_queries_today
|
||||
- sensor.adguard_blocked_today
|
||||
|
||||
# Client Activity
|
||||
- type: entities
|
||||
title: Most Active Clients
|
||||
show_header_toggle: false
|
||||
entities:
|
||||
- entity: sensor.adguard_client_kids_ipad_queries
|
||||
name: "Kids iPad"
|
||||
icon: mdi:tablet
|
||||
secondary_info: entity-id
|
||||
- entity: sensor.adguard_client_work_laptop_queries
|
||||
name: "Work Laptop"
|
||||
icon: mdi:laptop
|
||||
secondary_info: entity-id
|
||||
- entity: sensor.adguard_client_living_room_tv_queries
|
||||
name: "Living Room TV"
|
||||
icon: mdi:television
|
||||
secondary_info: entity-id
|
||||
|
||||
# System Health
|
||||
- type: entities
|
||||
title: System Status
|
||||
show_header_toggle: false
|
||||
entities:
|
||||
- entity: binary_sensor.adguard_filtering_enabled
|
||||
name: "DNS Filtering"
|
||||
icon: mdi:dns
|
||||
- entity: switch.adguard_protection
|
||||
name: "Protection Status"
|
||||
icon: mdi:shield
|
||||
- type: attribute
|
||||
entity: switch.adguard_protection
|
||||
attribute: sw_version
|
||||
name: "AdGuard Version"
|
||||
icon: mdi:information
|
||||
```
|
||||
|
||||
## 📱 Mobile-Optimized Dashboard
|
||||
|
||||
Simplified controls perfect for mobile devices.
|
||||
|
||||
### Mobile Quick Controls
|
||||
|
||||
```yaml
|
||||
type: vertical-stack
|
||||
title: 🛡️ AdGuard Mobile
|
||||
cards:
|
||||
# Emergency Button
|
||||
- type: button
|
||||
name: "🚨 EMERGENCY UNBLOCK"
|
||||
icon: mdi:shield-off
|
||||
tap_action:
|
||||
action: call-service
|
||||
service: adguard_hub.emergency_unblock
|
||||
service_data:
|
||||
duration: 600
|
||||
clients: ["all"]
|
||||
hold_action:
|
||||
action: call-service
|
||||
service: adguard_hub.emergency_unblock
|
||||
service_data:
|
||||
duration: 300 # 5 minutes on hold
|
||||
clients: ["all"]
|
||||
card_mod:
|
||||
style: |
|
||||
ha-card {
|
||||
background: linear-gradient(45deg, #f44336, #e91e63);
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
font-size: 18px;
|
||||
height: 80px;
|
||||
}
|
||||
|
||||
# Device Quick Toggle
|
||||
- type: glance
|
||||
title: Family Devices
|
||||
columns: 2
|
||||
show_name: true
|
||||
show_state: false
|
||||
entities:
|
||||
- entity: switch.adguard_client_kids_ipad
|
||||
name: "Kids iPad"
|
||||
tap_action:
|
||||
action: toggle
|
||||
- entity: switch.adguard_client_kids_laptop
|
||||
name: "Kids Laptop"
|
||||
tap_action:
|
||||
action: toggle
|
||||
- entity: switch.adguard_client_work_laptop
|
||||
name: "Work"
|
||||
tap_action:
|
||||
action: toggle
|
||||
- entity: switch.adguard_client_guest_network
|
||||
name: "Guests"
|
||||
tap_action:
|
||||
action: toggle
|
||||
|
||||
# Quick Actions
|
||||
- type: grid
|
||||
columns: 2
|
||||
square: false
|
||||
cards:
|
||||
- type: button
|
||||
name: "Block Gaming"
|
||||
icon: mdi:gamepad-variant-outline
|
||||
tap_action:
|
||||
action: call-service
|
||||
service: adguard_hub.block_services
|
||||
service_data:
|
||||
client_name: "Kids iPad"
|
||||
services: ["gaming", "roblox"]
|
||||
|
||||
- type: button
|
||||
name: "Block Social"
|
||||
icon: mdi:account-group-outline
|
||||
tap_action:
|
||||
action: call-service
|
||||
service: adguard_hub.block_services
|
||||
service_data:
|
||||
client_name: "Kids iPad"
|
||||
services: ["social", "tiktok", "instagram"]
|
||||
```
|
||||
|
||||
## 🎨 Custom Styling with card-mod
|
||||
|
||||
Enhance your dashboards with custom CSS styling.
|
||||
|
||||
### Styled Emergency Button
|
||||
|
||||
```yaml
|
||||
type: button
|
||||
name: "🚨 EMERGENCY ACCESS"
|
||||
icon: mdi:shield-off-outline
|
||||
tap_action:
|
||||
action: call-service
|
||||
service: adguard_hub.emergency_unblock
|
||||
service_data:
|
||||
duration: 600
|
||||
clients: ["all"]
|
||||
card_mod:
|
||||
style: |
|
||||
ha-card {
|
||||
background: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%);
|
||||
border: 2px solid #c44569;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
box-shadow: 0 8px 16px rgba(238, 90, 36, 0.3);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
ha-card:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 12px 24px rgba(238, 90, 36, 0.4);
|
||||
}
|
||||
ha-card:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
```
|
||||
|
||||
### Protection Status with Color
|
||||
|
||||
```yaml
|
||||
type: entity
|
||||
entity: switch.adguard_protection
|
||||
card_mod:
|
||||
style: |
|
||||
ha-card {
|
||||
background: {% if is_state('switch.adguard_protection', 'on') %}
|
||||
linear-gradient(45deg, #4CAF50, #8BC34A)
|
||||
{% else %}
|
||||
linear-gradient(45deg, #f44336, #ff5722)
|
||||
{% endif %};
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
}
|
||||
```
|
||||
|
||||
## 📐 Layout Tips
|
||||
|
||||
### Responsive Design
|
||||
Use different dashboard layouts for different screen sizes:
|
||||
|
||||
- **Desktop**: Vertical stacks with multiple columns
|
||||
- **Tablet**: Mixed horizontal and vertical stacks
|
||||
- **Mobile**: Single column with large touch targets
|
||||
|
||||
### Organization Best Practices
|
||||
1. **Group related controls** together
|
||||
2. **Use sections** to separate different areas
|
||||
3. **Add icons** for visual clarity
|
||||
4. **Use consistent colors** for similar functions
|
||||
5. **Provide visual feedback** for actions
|
||||
|
||||
---
|
||||
|
||||
**Next**: Set up [Automation Examples](Automation-Examples) to make your network truly smart!
|
||||
Reference in New Issue
Block a user