Ambient Dashboard: How It Works

Requirements

Here is the list of modules that are used for this dashboard:

• layout-card handles the overall layout using CSS Grid.
• A modified swiper-card handles the slideshow and swipe-able elements. I modified it so that the base DOM element is an ha-card, which allows me to style it using card-mod.
• button-card handles the layouts of each slide within a slideshow or an app.
• mini-graph-card handles the graphs in a slide or a tile.
• Mushroom cards are used in the Badge area.

Metrology is the theme for the dashboard.

UI Structure

The home view is the Slideshow. It is composed of:

• The Top Bar area, which has:
  • The Start button, which opens up the Start Menu.
  • The Badges area has media player controls and Mushroom cards.
  • A clock.
• The Slides area, which has the slide show of all the slides.

The Start Menu view contains a list of Apps that allows users to navigate to.

Each App is a view that is composed of:

• The Top Bar area, which has a Back button for navigating back to the Slideshow.
• The Pivot area, which contains multiple Sections, in which each individually has:
  • A Header bar.
  • A content area, which is usually a grid of Live Tiles. Live Tiles are shared with the Maximalist Dashboard.

File Structure

│
├─ configuration.yaml - Configuration of Lovelace
├─ lovelace-dashboards.yaml - Configurations of all dashboards
├─ lovelace-resources.yaml - List of all dashboard resource modules
├─ /www
│  └─ swipe-card.js - A modified version of swiper card that is required for this dashboard
└─ /ui
  ├─ ui-smartdisplays.yaml - Configuration of the Ambient Dashboard
  ├─ /smartdisplays
  │  ├─ /slides - The contents of each slide
  │  ├─ /snippets - A few pieces of repetitive code to help make the code look cleaner
  │  ├─ /views - The contents of each view
  │  │  ├─ home.yaml - The Slideshow view
  │  │  ├─ start.yaml - The Start Menu
  │  │  └─ Other yaml files contain the App views
  │  └─ slides.yaml - The list of all the slides in chronological order
  ├─ /templates
  │  └─ /button-card
  │     ├─ slideshow.yaml
  │     └─ live-tiles.yaml
  └─ /shared - Cards that are shared between all dashboards
     ├─ /cards
     └─ /columns - A collection of cards

Slide Structure

Each slide is one big button-card.

Here is a list of available templates for use with button-card:

• slide_basic: The base slide layout that must be included in each slide before combining it with other templates.
• slide_with_state_unit: Displays the unit of measurement nicely.
• slide_with_big_state: Displays big text for the entity state. Great for displaying numbers.
• slide_with_colored_on_state: If the entity state is "on", the slide will be colored with the theme color.
• slide_with_colored_conditional: If the condition variable is true, the slide will be colored with the theme color.
• slide_with_picture: Displays a classy slowly sliding background.
• slide_with_graph: Displays a graph on the slide.
• slide_with_live_camera: Displays a live camera feed on the slide background.
• slide_with_weather_forecast: Displays the next 4 day or hour of weather forecast in a table.