Skip to content

Lovelace card views

Jump to bottom
Donny F edited this page Mar 9, 2024 · 17 revisions

Creating a new dashboard and views

Each View Assist screen is a view from a Lovelace dashboard. I spent countless hours working on these cards and could not have what I have now without the help of @d_sellers1 , @fredrik_persson_ , and many others. I have learned a lot of CSS during the creation of these cards but the code could use a hand if you are capable of lending one.

All of the views I've created use the custom button card. You will need to install this if you want to use the examples in the repo but you are not limited to only using the custom button card. Any card can be used but be sure to set every card's view type to 'Panel (1card')

See here how to install Custom Button Card via HACS:

Here are the steps needed to generate a new dashboard and views:

  • Go to Settings -> Dashboards -> + Add Dashboard button (at bottom) Name your dashboard (eg Tablet)
  • Click on the new dashboard on the left menu and then click the pencil icon to enter editing mode
  • Click on the '+' button to add a new view
  • Change the title of your view (eg clock) and change the view type to 'Panel (1 card)' and save
  • From the new view, click the Add Card button in the bottom right
  • Search for "Custom Button Card"
  • Erase the default contents and then copy/paste the raw code provided from the links below and then hit save

Now you are able to reference this new view in your automation calls to browser mod by using the url (eg http://192.168.0.25:8123/dashboard-tablet/clock)

Example card views

Clock Card:

image

  • View Name: clock
  • Raw Code: https://raw.githubusercontent.com/dinki/View-Assist/main/Dashboard_Views/Clock/clock.yaml
  • Change line 3 var_weather_entity: weather.home to your weather entity
  • Change line 5 entity: input_boolean.lr_tablet_mic to the microphone on this device
  • Change line 33 url("/local/viewassist/tropical-green-foliage-leaf-dark-background-natural-rain-forest_512343-121.jpg") to point to your background image. My files are stored in HA directory /config/www/viewassist/ Note that 'local' is used instead of 'www' in the card code. The background image is not provided as it was found from a random search. You can probably find this one if you search or use your own.
  • The alarm section has been removed to make this card more generic. This will be added back when it can be made more universal as without the correct device this will break the card.
  • This view has an issue where you cannot edit it using the standard editor as the background image obscures the edit button normally in the left corner. This can be overcome by clicking the three dots in upper right corner and choosing Raw configuration editor

Weather Card:

image

Information Card:

image

Information Picture Card:

image

More information coming. Please be patient as the wiki gets populated

View Assist Old Wiki

Clone this wiki locally