One thing that makes hass.io very adaptable to my needs are the possibility to complement the installation with Add-ons (hass.io > Add-on Store). These are Add-ons officially tested by the Home Assistant Community. On top of official Add-ons there are also a huge number of custom components that can be added to get additional functionality.
In my home automation system I am heavily dependent on these custom components.
This is how I got it working.
Many of the custom components that I am using I found on GitHub; a code sharing community where you can find hass.io components for almost anything and install them manually.
Another way to bring in custom components is through an Add-on named HACS where you can browse through and add components directly through the hass.io web interface. I recommend you learn both how to install components manually and through HACS, both ways will serve you well.
For the manual installations I started by creating the custom_components and www folders in my hass.io config directory. Inside the www folder I also created the community and plugins folders. I accessed the config directory through Samba.
It is then best to follow the instructions for each custom components as described at their GitHub page but I had some general learning that I want to share.
My custom components
HACS (Home Assistant Comunity Store) [\config\custom_components\hacs\]
Avanza Stock [\config\custom_components\avanza_stock\]
Button Card [\config\www\community\button-card\]
Button Entity Row [\config\www\community\button-entity-row\] (removed)
Light Entity Card [\config\www\community\light-entity-card\] (removed)
Layout Card [\config\www\plugins\]
Card Tools [\config\www\plugins] (removed)
Vertical Stack in Card [\config\www\] (removed)
Slider Entity Row [\config\www\]
Card Mod [\config\www\] (removed)
To make the custom components work I had to enter their path (url) and type (module/js) into the ui-lovelace.yaml that is located in the config directory. Note that not all custom components require an entry under resources.
What is really confusing here and that I spent lots of time to get to work is that the url does not always correspond to the file structure in the config directory. I still do not know why, and how it actually works, but it does.
Example: Avanza Stock
Go to the GitHub page for Avanza Stock and click Clone or Download and select Download ZIP. Locate the sensor.avanza_stock_master.zip that was downloaded and unzip it. On your Raspberry locate the .\config\custom_components\avanza_stock directory, create it if needed. Copy all the files in the zip to the avanza_stock folder.
As the final step add the sensor to the configuration.yaml
Once your system is back online again navigate to Developer Tools > States and find your newly created sensor that can now be used to start automations, scripts or simply display it's result in the front end.
I use the Avanza sensor at my Lovelace front end to display the current OMX change in percent, when it goes below zero the icon turns red. See code below for inspiration.
Please let me know in the comments section if you have any questions or comments.
In my home automation system I am heavily dependent on these custom components.
This is how I got it working.
Many of the custom components that I am using I found on GitHub; a code sharing community where you can find hass.io components for almost anything and install them manually.
Another way to bring in custom components is through an Add-on named HACS where you can browse through and add components directly through the hass.io web interface. I recommend you learn both how to install components manually and through HACS, both ways will serve you well.
For the manual installations I started by creating the custom_components and www folders in my hass.io config directory. Inside the www folder I also created the community and plugins folders. I accessed the config directory through Samba.
It is then best to follow the instructions for each custom components as described at their GitHub page but I had some general learning that I want to share.
My custom components
HACS (Home Assistant Comunity Store) [\config\custom_components\hacs\]
Avanza Stock [\config\custom_components\avanza_stock\]
Button Card [\config\www\community\button-card\]
Button Entity Row [\config\www\community\button-entity-row\] (removed)
Light Entity Card [\config\www\community\light-entity-card\] (removed)
Layout Card [\config\www\plugins\]
Card Tools [\config\www\plugins] (removed)
Vertical Stack in Card [\config\www\] (removed)
Slider Entity Row [\config\www\]
Card Mod [\config\www\] (removed)
To make the custom components work I had to enter their path (url) and type (module/js) into the ui-lovelace.yaml that is located in the config directory. Note that not all custom components require an entry under resources.
resources:
- url: /community_plugin/button-card/button-card.js
type: module
- url: /local/plugins/card-tools.js?v=1
type: js
- url: /local/plugins/layout-card.js?v=1
type: js
- url: /local/vertical-stack-in-card.js?v=0.1.3
type: js
- url: /local/slider-entity-row.js
type: module
- url: /local/card-mod.js
type: module
- url: /community_plugin/light-entity-card/light-entity-card.js
type: js
What is really confusing here and that I spent lots of time to get to work is that the url does not always correspond to the file structure in the config directory. I still do not know why, and how it actually works, but it does.
Example: Avanza Stock
Go to the GitHub page for Avanza Stock and click Clone or Download and select Download ZIP. Locate the sensor.avanza_stock_master.zip that was downloaded and unzip it. On your Raspberry locate the .\config\custom_components\avanza_stock directory, create it if needed. Copy all the files in the zip to the avanza_stock folder.
 |
| Figure 1. Github is an excellent site to find custom components to hass.io. |
As the final step add the sensor to the configuration.yaml
- platform: avanza_stock
name: OMX PI
stock: 18988
monitored_conditions:
- changePercent
- totalVolumeTraded
- totalValueTraded
Once your system is back online again navigate to Developer Tools > States and find your newly created sensor that can now be used to start automations, scripts or simply display it's result in the front end.
 |
| Figure 2. The states menu is a good place to get an overview of system sensors. |
I use the Avanza sensor at my Lovelace front end to display the current OMX change in percent, when it goes below zero the icon turns red. See code below for inspiration.
- type: "custom:button-card"
template: dashboard_button_card
entity: sensor.omxpipercent
icon: mdi:chart-line
color: white
name: OMX PI
value_template: true
state:
- value: 0
operator: '<'
color: red
- value: 0
operator: '>='
color: white
 |
| Figure 3. A lovelace panel that shows the current change to the OMX stock index. |
Please let me know in the comments section if you have any questions or comments.
Comments
Post a Comment