Skip to content

View Assist dashboard and views

Jump to bottom
Donny F edited this page Jun 12, 2024 · 19 revisions

The core View Assist dashboard is configured to use a base custom button card templates. This dashboard is the framework for the views. The template also sets common default variables like time and temperature which are used on different views. This allows for code reduction and consistency. Data display views are then created. These are much smaller than the dashboard template views as they leverage this framework. The simplicity in these views should make it less intimidating for others to create and share their custom views.

NOTE This page is under beta testing review. This information is subject to change. You have been warned

Lovelace Card Prerequistes

The VA dashboard and views are built using several great frontend Lovelace cards and utilities. These are easily installed via HACS. These must be installed prior to configuring the dashboard and views for use with VA.

Detailed install video: https://youtu.be/TIE-IgPEp8U

View Assist required Lovelace cards and tools:

  • layout-card
  • card-mod
  • button-card

For each of the three listed above do this:

  • Open HACS
  • Go to Frontend
  • Click '+ Explore and Download Repositories'
  • Search for the card to install using the name above
  • Click 'Download' and 'Download' again
  • Allow the reload when prompted

See the video for checking if all resources are loaded correctly. This should happen automatic but if you run into issues you will want to check these resources.

Dashboard Installation

Detailed install video: https://youtu.be/wjp0PuAlt-U

  • Create a new dashboard in Home Assistant by going to Settings > Dashboards
  • Add Dashboard
  • New dashboard from scratch
  • Title dashboard "ViewAssist" and icon "mdi:glasses"
  • Click Create
  • Open the new dashboard, click three dots and Edit dashboard
  • Click the three dots and choose "raw configuration editor"
  • Copy and paste this YAML code (link to GH raw code)
  • At the top of the configuration you will need to modify these variables to match your configuration:
    • var_weather_entity: YOUR WEATHER ENTITY
    • var_assist_group: YOUR VIEW ASSIST GROUP ENTITY
    • use_24_hour_time: true for 24 hour clock false for 12 hour am/pm clock
  • Click Save
  • Click X to close the Edit Configuration screen

View Installation

View Assist uses custom views as the display mechanism for various data presentations. Create a new view per unique display. Pay special attention to how these are named and configured.

Detailed install video: https://youtu.be/QmWDNtikHaU

Creating a new view

To create a new view:

  • Go to the ViewAssist dashboard you created above
  • Click the pencil icon on the right to get into editing mode
  • Click the '+' icon on the right of the View bar
  • Give the View a name in the title field (eg clock)
  • Change view type to 'Panel (1 card)'
  • Click save

Add the View Assist card

  • Go to the View you just created
  • Click '+ Add Card' in the bottom right
  • Search for Custom Button Card card and choose it
  • Highlight the default text and delete it
  • Find a card template in the files section and copy paste the raw code into the card configuration (eg link to clock GH raw code
  • Click 'Save'
  • Click 'Done' on the top bar

Note that the included example uses a background image. This image will need to be copied to your www directory and stored in a directory named 'viewassist' .

Browsermod settings

Additional settings need to be made in Browsermod to remove the side and header bars as well as set the default dashboard

Detailed install video: https://youtu.be/XETitWILgis

Open the Browsermod settings from the Home Assistant sidebar then scroll down to 'Frontend Settings'

Hide Sidebar

  • Expand 'Hide Sidebar' section
  • Click '+ Add Browser Setting'
  • Select the browser to configure, then next
  • Toggle the 'Hide sidebar' switch to on then ok

Hide Header

  • Expand 'Hide Header' section
  • Click '+ Add Browser Setting'
  • Select the browser to configure, then next
  • Toggle the 'Hide header' switch to on then ok

Default Dashboard

  • Expand 'Default Dashboard' section
  • Click '+ Add Browser Setting'
  • Select the browser to configure, then next
  • Pick the dashboard 'ViewAssist' then ok
  • Note that if you have an empty 'Home' view you will want to delete it by going to the ViewAssist dashboard, click the pencil in the top right corner, then click the pencil icon next to 'Home' and then select delete view then delete to remove it

Repeat this process for all visual View Assist satellite devices

Special thanks to @mngarchow for the written instructions and continued support

View Assist Old Wiki

Clone this wiki locally