Google Gauges for Home Assistant

I monitor power, temperature and humidity in my home. All are relatively fast moving sensors. Google Gauges gives me a snapshot of the immediate dynamic status of these sensors. It uses Websockets and response is immediate thanks to the great HA websockets implementation.

Grab this and put in your www directory. Edit to suit your needs.

Add to your configuration.yaml

panel_iframe:
  google_guages:
    title: Google Guages
    icon: mdi:hand-pointing-right
    url: http://host:8123/local/google-guages.html

Access as http://host:8123/google_guages

The Gist:

Make sure to scroll on down and read the comments and screen shot.

Jerry

7 Likes

First I’d like to say thank you for sharing this piece. I have a quick question. I’m using an api password on HA; do you have an idea on how i can enable that on the script.

The docs for HAWS are here: https://github.com/home-assistant/home-assistant-js-websocket/blob/master/README.md

You can provide an auth token as an option to the createConnection call. I’ve never had to do so; perhaps because I always access the Google Guages page from the HA user interface.

I have a problem adding my admin password to a javascript file which can be easily viewed.

Jerry

Thank you for this awesome share.

Any idea why it’s not reading all sensors?

image

2 Likes

Never mind, I figured it out.

If any sensor has an unknown value, all sensors/guages that follow will not update.

A try/catch around the offending code should fix it.

Would you mined providing an example, I’m a real noob with this stuff?

Modify function render as follows:

        function render(entities) {
      _.forEach(guages, function(guage, key) {
        try {
          var svalue = entities[key].state;
          guage["data"].setValue(0, 1, svalue);
          guage["chart"].draw(guage["data"], guage["options"]);
        } catch(e) {
          // Uncomment to see all state read failures in console
          // console.log("Error reading state for key: " + key);
          status.innerHTML = "Error reading state for key: " + key;
        }
      });
    }

Still the same result.

1 - Make sure the new code is loading. View source (or frame) .

2 - Set a breakpoint in the Javascript debugger in your browser (I use Chrome) and single step through the code to see where the error occurs.

You nailed it, it was loading a cache page.

All good now.

Excellent work, thanks for the share.

I cannot find the function render on your script…
Can you please help me in setting this?

It’s there:

See: https://gist.github.com/JerryWorkman/31987605cd4958864dd5f159e26c0408

As you can see the current version contains the try/catch code.

1 Like

Just upgraded to 0.81.1 from 0.75.2 and none of the gauges work.

Error from Chrome Console:

google-guages.html:1 Error in event handler for (unknown): TypeError: Cannot read property 'autoPlayNotificationRequired' of undefined
    at s.a.browsertype.c.a.Chrome.i.a.getBkGlobals.e (chrome-extension://fheoggkfdfchfphceeifdbepaooicaho/mcafee_wa_iframeplg.js:23:48793)

The exception is from a Chrome extension.

Just upgraded to 81.1 - no problems. Please post your source.

Chrome Console: “Failed to load resource: net::ERR_CONTENT_DECODING_FAILED”

It’s probably because I disabled the “state-card-custom-ui”, which did work either after upgrading.

Still not able to get this working

So, what do you want me to do. I asked you to post your code (html, javascript) and you have not.