boneIO Documentation

This guide shows you how to create beautiful and functional dashboards for controlling your boneIO-powered smart home. We'll use practical examples based on real-world setups.

Dashboard Structure

A well-organized dashboard typically has:

Home screen - Quick access tiles to all categories
Category views - Dedicated pages for lights, covers, temperatures, etc.
Badges - Quick status indicators in the header

Create a main screen with tiles that navigate to detailed views:

type: grid
columns: 3
square: false
cards:
  - type: tile
    entity: light.ground_floor
    name: Ground Floor
    vertical: true
    tap_action:
      action: navigate
      navigation_path: /dashboard/lights-ground
  - type: tile
    entity: light.first_floor
    name: First Floor
    vertical: true
    tap_action:
      action: navigate
      navigation_path: /dashboard/lights-first
  - type: tile
    entity: cover.all_covers
    name: Covers
    vertical: true
    tap_action:
      action: navigate
      navigation_path: /dashboard/covers

Using tap_action: navigate turns tiles into navigation buttons. The entity state is still shown, giving you a quick overview.

Organizing Lights by Room

Use Heading Cards with emoji to visually separate rooms:

type: grid
cards:
  - type: heading
    heading: "🔪 Kitchen"
    heading_style: title
    badges:
      - type: entity
        entity: light.kitchen_all
        tap_action:
          action: toggle
  - type: tile
    entity: light.kitchen_island
    name: Island
    tap_action:
      action: toggle
  - type: tile
    entity: light.kitchen_counter
    name: Counter
    tap_action:
      action: toggle

Light Control with Mushroom Cards

For RGB/WLED lights, Mushroom Light Card provides excellent control:

type: custom:mushroom-light-card
entity: light.wled_living_room
name: LED Strip
use_light_color: true
show_brightness_control: true
show_color_control: true
show_color_temp_control: true
collapsible_controls: false
tap_action:
  action: toggle
hold_action:
  action: more-info

Mushroom cards require HACS installation. Install from: https://github.com/piitaya/lovelace-mushroom

Cover Control

Simple Cover Tiles

type: tile
entity: cover.living_room
name: Living Room
vertical: true
features:
  - type: cover-open-close
  - type: cover-position

Cover with Position Slider

For precise control, use the position feature:

type: tile
entity: cover.bedroom
features:
  - type: cover-position
state_content:
  - state
  - current_position

Temperature Monitoring

Mini Graph Card for Temperature History

Mini Graph Card is perfect for showing temperature trends:

type: custom:mini-graph-card
entities:
  - entity: sensor.outdoor_temperature
    name: Outside
    color: "#03fc24"
name: Temperature
hours_to_show: 24
line_width: 3
points: false
show:
  fill: fade

Mini Graph Card requires HACS. Install from: https://github.com/kalkih/mini-graph-card

Multiple Temperatures on One Graph

type: custom:mini-graph-card
entities:
  - entity: sensor.living_room_temperature
    name: Living Room
    color: "#ff6384"
  - entity: sensor.bedroom_temperature
    name: Bedroom
    color: "#36a2eb"
  - entity: sensor.outdoor_temperature
    name: Outside
    color: "#4bc0c0"
name: Temperatures
hours_to_show: 24
line_width: 2
points: false

Badges for Quick Status

Add badges to the dashboard header for at-a-glance information:

badges:
  - type: entity
    entity: sensor.outdoor_temperature
    show_name: false
  - type: entity
    entity: weather.home
    state_content:
      - temperature
      - state
    name: Forecast
  - type: entity
    entity: person.john
    show_entity_picture: true
    show_name: false

Add a home button badge to return to main screen:

badges:
  - type: custom:mushroom-template-badge
    icon: mdi:home
    tap_action:
      action: navigate
      navigation_path: home

Complete Light View Example

Here's a complete example of a lights page organized by room:

type: sections
max_columns: 4
sections:
  - type: grid
    cards:
      - type: heading
        heading: "🛋️ Living Room"
        heading_style: title
        badges:
          - type: entity
            entity: light.living_room_all
            tap_action:
              action: toggle
      - type: grid
        columns: 2
        cards:
          - type: tile
            entity: light.living_room_main
            name: Main
            tap_action:
              action: toggle
          - type: tile
            entity: light.living_room_tv
            name: TV
            tap_action:
              action: toggle
      - type: custom:mushroom-light-card
        entity: light.wled_living_room
        name: LED Strip
        use_light_color: true
        show_brightness_control: true
        show_color_control: true
  - type: grid
    cards:
      - type: heading
        heading: "🔪 Kitchen"
        heading_style: title
        badges:
          - type: entity
            entity: light.kitchen_all
            tap_action:
              action: toggle
      - type: tile
        entity: light.kitchen_island
        name: Island
        tap_action:
          action: toggle
      - type: tile
        entity: light.kitchen_counter
        name: Counter
        tap_action:
          action: toggle
badges:
  - type: custom:mushroom-template-badge
    icon: mdi:home
    tap_action:
      action: navigate
      navigation_path: home
  - type: entity
    entity: light.all_lights
    name: All
    tap_action:
      action: toggle

Recommended Custom Cards

Card	Purpose	HACS Link
Mushroom Cards	Modern UI components	piitaya/lovelace-mushroom
Mini Graph Card	Temperature/sensor graphs	kalkih/mini-graph-card
Button Card	Highly customizable buttons	custom-cards/button-card

Tips for boneIO Users

Group lights by room - Create HA light groups for "all kitchen lights", "all living room lights"
Use entity pictures - Add photos to person entities for visual identification
Set friendly names - boneIO Black enforces entity_id naming like light.blkf8dc18_out_01 (to avoid conflicts when you have multiple Black devices). Set a friendly display name in HA: "Kitchen Island"
Test on mobile - Most dashboard use is on phones, design for touch

Dashboards