From 87e7c43dac1cce0eb1b197cd94ae03a529c1b7dc Mon Sep 17 00:00:00 2001 From: sq4ind Date: Sun, 28 Sep 2025 12:47:24 +0000 Subject: [PATCH] Add Dashboard-Examples --- Dashboard-Examples.-.md | 622 ++++++++++++++++++++++++++++++++++++++++ 1 file changed, 622 insertions(+) create mode 100644 Dashboard-Examples.-.md diff --git a/Dashboard-Examples.-.md b/Dashboard-Examples.-.md new file mode 100644 index 0000000..1c4318a --- /dev/null +++ b/Dashboard-Examples.-.md @@ -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! \ No newline at end of file