A Google Maps widget for HADashboard

Third party integrations HADashboard
1

@thundergreen asked for a map widget similar to the one in Home Assistant and since I wrote one some time ago, I decided to publish it now.

googlemapwidgets2
googlemapwidgets21458Ă—1067 769 KB

You can find the widget here:
https://github.com/tjntomas/HADashboard-widgets/tree/master/custom_widgets/basegooglemaps

To use it, you just need to copy the widget files and then define a widget. You will also need to get your own Google Maps API key. Instructions are in the github repo.
I will add som customizations later on. I am considering adding a feature to use layouts from https://snazzymaps.com/ since they already have all the tools for designing your own map there.

I have also written a time travel feature so that the map travels through time, but the 0.83 Home Assistant upgrade broke the REST API call to grab the history, so I’ll have to add that later when I figure out what’s wrong.

3 Likes
2

Btw…your floorplan is a killer :+1: I guess u make this professional in your professional life? Absolutely amazing work

By using snazzymaps does it mean that we don’t use Google API ?

3

Snazzymaps is just a site were you can design your google map and share your design with others. The section needed to style the maps is available to easily download from the website. I designed the default layout I am using for the widget on snazzymaps.

The 3D floorplan also started out as a widget while I was trying to learn to use transform elements in javascript, but it got to complex so its now a stand-alone app with its own websocket connection. I intend to make a widget out of it again some time in the future, its some work needed to write a guide on how to use it.

4

Means your floorplan will be implemented in hadashboard one day? That sounds awesome man!

I really like your professional approach to home Assistant

Waiting your skin already :slight_smile:

5

Hi, i am trying to install this custom widget. After following the instructions step by step i can see the map in my HAdashboard, but cannot localize the two device trackers i put in the dash file.

My dash file is:

google_map:
  widget_type: googlemaps
  entities:
  - device_tracker.life360_maurizio_fabiani
  - device_tracker.life360_fha
  base_url: http://192.168.1.29:8123/
  api_key: xxxxxxxxxxxxxxxxx    # Need to be obtained from the Google API console.
  token: xxxxxxxxxxxxx # Can be created through the Home Assistant UI.
  zoom: 16  # Initial zoom level.
  time: 24h # The amount of time to go back in time during time travel. You can combine w,d,h,m ie.  
#              2w1d3h20m which would mean 2 weeks, 1 day, 3 hours and 20 minutes.
  latitude: xx.xxxxxx  # Your home coordinates are used to calculate the distance from home.
  longitude: xx.xxxxxx
  template: topaco   # You can chose other styles or make your own, see the styling section below.
                      # Some sample styles: topaco | dark | vintage | retro

layout:
  - google_map(8x7)  # Or whatever size you want for your map.

What i get in the console is the following:

Schermata 2019-11-30 alle 20.01.27.png
Schermata 2019-11-30 alle 20.01.27.png988Ă—170 53.7 KB

What is wrong in my configuration?

6

Try removing the trailing slash at the end of the url:

base_url: http://192.168.1.29:8123
7

I already tried this and many other combinations but with no success… Maybe it depends from disabling API password in HA as it is deprecated now?

8

This is what i get if i follow your indications:

59
59974Ă—40 9.25 KB

Btw this is what i have in appdaemon.yaml:

log:
  logfile: STDOUT
  errorfile: STDERR
appdaemon:
  disable_apps: 1
  threads: 10
  app_dir: /config/appdaemon/apps
  plugins:
    HASS:
      type: hass
      ha_url: http://hassio/homeassistant
      token: xxxxxxxxxxxx
hadashboard:
  dash_url: http://192.168.1.29:5050
  dash_dir: /config/appdaemon/dashboards

And if i use http://hassio/homeassistant as url i get the same error…
I am using appdaemon with the hassio add-on.

EDIT: I disabled auth_providers inside HA configuration.yaml.
Maybe i need to enable it, and if yes how?
Actually i have:

#  auth_providers:
#    - type: homeassistant
#    - type: legacy_api_password
#      api_password: !secret http_api_password
9

You shouldn’t need to have the legacy api password enabled since the widget uses a long-lived access token. I think there is an error in how I construct the url for the images. I will have a look a the code.

10

Ok, thanks, i hope to receive news from you soon…

11

What is the value of the entity_picture attribute for one of your device trackers?

12

entity_picture: https://www.life360.com/img/user_images/6c874b44-2c55-4afd-947f-d9ea5562d7e9/f70db63c-4881-400e-841c-e67dcd304ada.png?fd=2

13

I was expecting the entity picture to be a local file placed in the www folder. I have updated the basegooglemaps.js file to handle external images correctly now. Please replace your existing basegooglemaps.js file with the new file from https://github.com/tjntomas/HADashboard-widgets/tree/master/custom_widgets/basegooglemaps and see if it works. You might need to force a recompile of the widget or simply restart appdaemon.

14

Ok, now i can see the entity_picture of my device trackers, but no zone is showed and the error i get in console is the following:

09
09989Ă—42 9.44 KB

In HAdashboard i get:

40
40903Ă—99 104 KB

More, i cannot go back to other dashboards with the navigate button and also the reload button doesn’t work.
I am thinking i maybe have some problems with the token or the auth request. I created a long-lived token from the HA UI and put inside the widget config. About auth do i need something else?
BTW all other dashboards work as expected.

15

If you look in the Home Assistant log, do you see any errors regarding websockets? How is your Home Assistant setup, i.e. are you using hassio or docker? Can you ssh into the machine and see if you have a tool called wscat installed? If so, please verify your websocket connection with

sudo wscat -c "ws://192.168.1.29:8123/api/websocket"

You can also test the websocket with the chrome addon https://chrome.google.com/webstore/detail/websocket-test-client/fgponpodhbmadfljofbimhhlengambbn

Also verify that the token you have in the widget definition is the same as you have in the appdaemon.yaml file and that the ip address for your Home Assistant instance is correct, i.e. 192.168.1.29.

16

In the HA log there is NO entry regarding websocket. I switched one month ago from hassbian to hassio using this image: “hassos_rpi3-2.12.img.gz” so i suppose i am using hassio (really newbie about it).
With ssh i get no command named wscat and using that chrome addon if i put: “ws://192.168.1.29:8123/websocket” and click on open i get “error”.
The token is the same and the IP is correct.
So which is the culprit ? Why i cannot open the websocket?

17

Try this address in the chrome addon:

ws://hassio:8123/api/websocket
18

Same, i get error on opening.

19

Strange. You are missing the “api”, so try

ws://192.168.1.29:8123/api/webwsocket
20

And spell websocket correct: (I didn’t)

ws://192.168.1.29:8123/api/websocket