HA Dashboard - Modify Webpage / Inject JS code

Third party integrations HADashboard
1

I have HA Dashboard running well on a Pi3 machine running Rasbian.

I would like to add some of my own JavaScript code to the generated web page.

How can I do this? Is there a file somewhere that I could modify to include my JavaScript code when the page is generated when I log in?

I need this custom code so I can send myself alerts when there is a status change on HA Dashboard, instead of using a third party provider for push notifications to my phone.

Thank you.

2

Probably the best approach is to create/download modify a custom skin.
See here: https://appdaemon.readthedocs.io/en/latest/DASHBOARD_CREATION.html#skins

Then you’ll be able to do whatever you like to include JS through the variables.yaml file in the skin

1 Like
3

another way is to create an input_text or sensor in HA and display that on the dashboard.
change the state from the input_text or sensor in any automation or app.

its way more easy to check state changes inside HA itself with automations, or from within an appdaemon app.

4

@pembo

Thanks I checked it out and ya I guess that is an option. I was really hoping I didnt have to reinvent the exact same board from scratch just so I can add some js in the background. I have already spent so much time configuring the default board and all the automations. I guess I have no choice but to do just that! It seems like every step in Home Assistant is a ton of work.

@ReneTode

This is what I have done. I have automations that change display and toggles on the dashboard. But the only way to actually read these state changes is to incorporate some javascript in the background. Otherwise I have to incorporate a third party provider for push notifications, which really defeats the purpose of the board as it’s an alarm panel and adding more fail points isnt a good idea.

5

@pembo

Further reading about variables.yaml is that it only supports style / css and not javascript. So it looks like I might just be out of luck on getting any javascript code inserted to the default ha dashboard.

Excerpt:

Variables.yaml is really a set of overrise styles, so you can use fragments of CSS here, basically anything that you could normally put in an HTML style tag. Variables .yaml also supports variable expansion to make structuring the file easier. Anything that starts with a $ is treated as a variable that refers back to one of the other yaml fields in the file.

6

You can do it like this

head_includes:
  - <script type="text/javascript" src="/custom_css/pembo/alert.js"></script>
  - <script type="text/javascript" src="/custom_css/pembo/inject.js"></script>

body_includes:
   - "<!-- PEMBO -->"

or similar :slight_smile:

and to give you a view into one of my .js files (inject)… it looks something like this:

/* Function of what to run on page load */
function injectOnLoad()
{
  soundAlert();
  changeIframes();
  makeDeviceTrackersLinks();
}

window.onload = injectOnLoad;

and the other functions which do whatever I need are in other included JS files :slight_smile:

7

using a skin isnt that hard.
it involves creating a dir in custom_css
and then copy 2 files that you can alter to your wishes.

i cant imagine that that is the only way, because there are always several ways.
if you already have entities that have a state you probably can create a template sensor.
the way i suggested is absolute the most easy way without any third party provider. (and the most general)
do you have an example for me from such automation, that needs java?

8

Thank you I am starting to understand the process. I am unable to locate the default skin files dashboard.css and variables.yaml. Where would they be located? or are they available online? Would be nice to modify the existing panel I’m using. Thanks.

9

to see if you couldnt get what you want easier i think you better share which way you try to go, but if you want to go your own way (which i also understand) the files from the default skin are here:

you could for sure modify every existing elements from your dashboards inside the dashboard (a skin gives you the option to change ALL switches, where you can modify EVERY SINGLE switch in the dashboard) but it wont give you more options. (when it goes to modifying widgets, it gives you the option to add head or body javascips though)

10

Thank you for all your help. I wrote JS code to add id’s to all icon elements. Then added an event listener to catch a state change. Then on state change save that change to localStorage.setItem. then I wrote an app in cordova to load my dashboard. It pools the localstorage variables for a change then cordova sends a push notification to my phone directly, without relying on a third party push provider. Long road but it’s nice when it comes together. Great community support you have here.

2 Likes