Update hacsintall.md for newer HACS versions

Made changes to reflect updates in Home Assistant and HACS since this guide was written. The main difference is that HACS will now automatically add the location of the js module to the resources, so this doesn't need to be done manually. 

I've left in the instructions of how to do this manually in a troubleshooting section, in case people are still using older versions. I have no idea when this change was made. 

There have also been some Home Assistant UI changes that are reflected in this section. Configuration is now called Settings, and Lovelace Dashboards is now simply Dashboards. Based on the initial documentation, I think Resources used to be a tab on this page, but it's now hidden behind a 3 dot menu in the top right. I've tried to cover all bases by leaving the initial instructions as written, while also including instructions for the updated UI.

Author: peterjburgess

hacsinstall.md

@@ -5,30 +5,17 @@
 These notes are provided to help with a HACS install if you use the GUI rather than edit yaml. 
 
 1. Install "HACS" as per their documentation [![hacs_badge](https://img.shields.io/badge/HACS-Default-orange.svg?style=for-the-badge)](https://github.com/custom-components/hacs)
-2. Let the HACS addon download its data - this takes at least an hour to fetch data initial due to rate limiting - see HACS documentation
-3. Choose HACS from the Sidebar
-4. For installation of this card select the HACS ```Frontend``` option
-5. Click + and search for "Lovelace Hass Arlo"
-6. Choose ```Install this repository in HACS```
+2. Let the HACS addon download its data - this takes at least an hour to fetch data initially due to rate limiting - see HACS documentation.
+3. Choose HACS from the Sidebar.
+4. For installation of this card select the HACS ```Frontend``` option.
+5. Click ```+ Explore & Download Repositories``` and search for "Lovelace Hass Arlo".
+6. Choose ```Install this repository in HACS```.
 7. Choose ```Install```. This completes the installation of the repository. 
-8. Now enable/install the module in Home Assistant by choosing the Configuration panel
-9. Choose ```Lovelace Dashboards``` from the configuration panel
-10. Click into the ```Resource``` tab
-11. Click ```+``` button to add a new resource and enter:
+8. You will be asked to refresh your browser to allow for the updated resources to be used. Click ```Reload``` to do this automatically.
+9. Now you should edit your dashboard as usual to add the new card - one for each camera. When adding the aarlo-glance card you will need to choose the ```Manual``` option (bottom of the GUI list of available cards). Editing manually to insert some configuration.
+code to match your camera.
 
-```
-Url
-/hacsfiles/lovelace-hass-aarlo/hass-aarlo.js 
-
-Resource Type:
-JavaScript Module
-```
-
-12. Now you should edit your dashboard as usual to add the new card. One for each camea. When adding the aarlo-glance card you will need to choose the ```Manual``` option (bottom of the GUI list of available cards). Editing manually to insert some configuration
-code to match your camera. 
-
-Here is a working config for a camera known to Arlo as ```kitchen``` and to Home Assistant as ```camera.aarlo_kitchen```
-  
+Here is a working config for a camera known to Arlo as ```kitchen``` and to Home Assistant as ```camera.aarlo_kitchen```:
 
   ```
   type: 'custom:aarlo-glance'
@@ -48,3 +35,21 @@ Here is a working config for a camera known to Arlo as ```kitchen``` and to Home
   image_click: play
   ```
 The options of ```top_title```, ```top_status``` and ```top_date``` can be set to ```true``` if you prefer the indicated information at the top of the card.
+
+### Troubleshooting
+Older versions of HACS and/or Home Assistant may not automatically load the resource as required, leading to a ```Custom element doesn't exist: aarlo-glance``` error message when trying to create the card. In that case, you can do it manually:
+
+1. Select ```Settings``` or ```Configuration``` (depending on Home Assistant version) from the Sidebar.
+2. Choose ```Dashboards``` or ```Lovelace Dashboards``` from the Settings panel.
+3. Select ```Resources``` from the menu in the top right or click into the ```Resource``` tab.
+4. Click ```+``` button to add a new resource and enter:
+
+```
+Url
+/hacsfiles/lovelace-hass-aarlo/hass-aarlo.js 
+
+Resource Type:
+JavaScript Module
+```
+
+You should then be able to add the aarlo-glance element as shown above.