Appdaemon dashboard error

Third party integrations AppDaemon
1

Hello,
I am trying to set up the excellent google maps widget from tjntomas:


But I have a problem when I load the dashboard:

2020-03-31 12:13:00.086578 INFO AppDaemon: Compiling dashboard ‘Googlemaps’
2020-03-31 12:13:00.877438 WARNING AppDaemon: ------------------------------------------------------------
2020-03-31 12:13:00.880651 WARNING AppDaemon: Unexpected error during DASH creation
2020-03-31 12:13:00.884182 WARNING AppDaemon: ------------------------------------------------------------
2020-03-31 12:13:00.893396 WARNING AppDaemon: Traceback (most recent call last):
File “/usr/lib/python3.8/site-packages/appdaemon/dashboard.py”, line 829, in get_dashboard
dash = self._conditional_compile(name, skin, recompile)
File “/usr/lib/python3.8/site-packages/appdaemon/dashboard.py”, line 780, in _conditional_compile
dash = self._get_dash(name, skin, skindir)
File “/usr/lib/python3.8/site-packages/appdaemon/dashboard.py”, line 583, in _get_dash
dash = self._create_dash(name, css_vars)
File “/usr/lib/python3.8/site-packages/appdaemon/dashboard.py”, line 480, in _create_dash
dash, layout, occupied, includes = self._create_sub_dash(name, “dash”, 0, {}, [], 1, css_vars, None)
File “/usr/lib/python3.8/site-packages/appdaemon/dashboard.py”, line 554, in _create_sub_dash
self._add_layout(lay, layout, occupied, dash, page, includes, css_vars, global_parameters)
File “/usr/lib/python3.8/site-packages/appdaemon/dashboard.py”, line 423, in _add_layout
widget[“parameters”] = self._load_widget(dash, includes, name, css_vars, global_parameters)
File “/usr/lib/python3.8/site-packages/appdaemon/dashboard.py”, line 323, in _load_widget
final_widget, templates = self._do_subs(final_widget, instantiated_widget)
File “/usr/lib/python3.8/site-packages/appdaemon/dashboard.py”, line 217, in _do_subs
processed, t = self._do_subs(value, _vars)
File “/usr/lib/python3.8/site-packages/appdaemon/dashboard.py”, line 225, in _do_subs
processed, t = self._do_subs(item)
TypeError: _do_subs() missing 1 required positional argument: ‘_vars’

and this is the code of my .dash file (located in: config/appdaemon/dashboards)

title: Maps
widget_dimensions: [120, 120]
widget_margins: [5, 5]
columns: 8

google_map:
widget_type: googlemaps
entities:

  • device_tracker.z2
    base_url: my url
    api_key: my key
    zoom: 16
    time: 24h
    latitude: 46.13516722745783
    longitude: -1.1068061739206316
    template: default

layout:

  • google_map(10x7)

can you help me please

2

Did you add the required entry in your custom_css skin variables.yaml file?

googlemaps_widget_style:  "border-radius: 10px; $background_style"
3

Also, you seem to be missing the long lived access token in your widget config:

token: YOUR_LONG_LIVED_ACCESS_TOKEN  # Can be created through the Home Assistant UI.

Pleae also re-post your config using the correct formatting so we can see if the indentation etc is correct. That means starting and ending code blocks with ````
See more about tha here: https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet#code

4

I have the same problem.
I put it in the way: config/appdaemon/custom_css/variables.yaml
That’s right?

5

in your custom_css folder, you need to create another folder named default and copy the default custom skin files variables.yaml and dashboard.css files from here: https://github.com/home-assistant/appdaemon/tree/dev/appdaemon/assets/css/default

Then edit the variables.yaml file and add the google_maps_widget_style entry.

The error you are seeing indicates that there is likely a problem with the above.

6

I added the token, but the result is the same :

File “/usr/lib/python3.8/site-packages/appdaemon/dashboard.py”, line 829, in get_dashboard
dash = self._conditional_compile(name, skin, recompile)
File “/usr/lib/python3.8/site-packages/appdaemon/dashboard.py”, line 780, in _conditional_compile
dash = self._get_dash(name, skin, skindir)
File “/usr/lib/python3.8/site-packages/appdaemon/dashboard.py”, line 583, in _get_dash
dash = self._create_dash(name, css_vars)
File “/usr/lib/python3.8/site-packages/appdaemon/dashboard.py”, line 480, in _create_dash
dash, layout, occupied, includes = self._create_sub_dash(name, “dash”, 0, {}, [], 1, css_vars, None)
File “/usr/lib/python3.8/site-packages/appdaemon/dashboard.py”, line 554, in _create_sub_dash
self._add_layout(lay, layout, occupied, dash, page, includes, css_vars, global_parameters)
File “/usr/lib/python3.8/site-packages/appdaemon/dashboard.py”, line 423, in _add_layout
widget[“parameters”] = self._load_widget(dash, includes, name, css_vars, global_parameters)
File “/usr/lib/python3.8/site-packages/appdaemon/dashboard.py”, line 323, in _load_widget
final_widget, templates = self._do_subs(final_widget, instantiated_widget)
File “/usr/lib/python3.8/site-packages/appdaemon/dashboard.py”, line 217, in _do_subs
processed, t = self._do_subs(value, _vars)
File “/usr/lib/python3.8/site-packages/appdaemon/dashboard.py”, line 225, in _do_subs
processed, t = self._do_subs(item)
TypeError: _do_subs() missing 1 required positional argument: ‘_vars’

code blocks:

""title: Maps
widget_dimensions: [120, 120]
widget_margins: [5, 5]
columns: 8

google_map:
widget_type: googlemaps
entities:

  • device_tracker.z2
    base_url: http://192.168.2.66:8123
    api_key: xxxxx
    token: xxxxx
    zoom: 16
    time: 24h
    latitude: 46.13516722745783
    longitude: -1.1068061739206316
    template: default

layout:

  • google_map(10x7)""
7

And here is a link to the official documentation for setting up custom skins: https://appdaemon.readthedocs.io/en/latest/DASHBOARD_CREATION.html#skin-development

8

in the documentation, it says:

To create a custom skin you will need to know a little bit of CSS. Start off by creating a directory called custom_css in the configuration directory, at the same level as your dashboards directory. Next, create a subdirectory in custom_css named for your skin.
The skin itself consists of 2 separate files:

  • dashboard.css - This is the base dashboard CSS that sets the widget styles, background, look and feel, etc.
  • variables.yaml - This is a list of variables that describe how different elements of the widgets will look. Using the correct variables you can skin pretty much every element of every widget type.

which code block should be in “dashboard.css”?
style.js?
at the same level as "variables.y

9

Its a bit complicated to set up the first time, so here is the structure you need.
In you config folder where you have your appdaemon.yaml file:

custom_css            # This folder needs to be created
   default            # This folder also needs to be created
      dashboard.css   # Copy this file from the link I posted
      variables.yaml  # Copy this file from the link I posted

Then edit the variables.yaml file and add this as the last line of the file:

googlemaps_widget_style:  "border-radius: 10px; $background_style"

Save the file and restart appdaemon.

Nothing need to be changed in the dahboard.css file

10

when you talk about the dashboard.css file, it is basegooglemaps.css?

Thanks

11

No, it is one of the two files that you should copy into your custom_css/default folder. These files are needed for any custom widget, not just mine. You can find them in the official appdaemon github repository here : https://github.com/home-assistant/appdaemon/tree/dev/appdaemon/assets/css/default.

The widget files should all be in the custom_widgets folder:

  custom_widgets  # You need to create this folder if it doesn't exist.
     googlemaps.yaml
     basegooglemaps
       basegooglemaps.js
       basegooglemaps.html
       basegooglemaps.css
12

Thank you for your help Tomas.
I moved forward ; there is only one error:
“AppDaemon: Widget type not found: googlemaps”
where is the problem in your opinion?..
Thanks again for your help. As you have certainly understood, I am asking beginner questions, because I am a beginner!

13

No problem, we have all been beginners. Did you copy the googlemaps.yaml file to your custom_widgets folder? the file is here: https://github.com/tjntomas/HADashboard-widgets/tree/master/custom_widgets. This file should be directly in the custom_widgets folder and not in the custom_widgets/basegooglemaps folder.

14

Yes! I no longer have an error message.
However, my dashboard looks like this:

image
image1029×491 1.04 KB

15

do you have any idea about this problem?..

16

should i modify the googlemaps.yaml file? fields, icons, css,static_icons

17

Please open the browser´s javascript console. On Chrome, just press F12. On MAC Safari, press Command + Option + J and see if you get any errors there. You might also need to empty the browser cache by pressing CTRL + F5.

18

it tells me these errors, but I don’t understand much …
Can you help me please?

Uncaught TypeError: Cannot set property ‘topaco’ of undefined
at :1:23
at p (jquery-3.1.1.min.js:2)
at Function.globalEval (jquery-3.1.1.min.js:2)
at text script (jquery-3.1.1.min.js:4)
at Nb (jquery-3.1.1.min.js:4)
at A (jquery-3.1.1.min.js:4)
at XMLHttpRequest. (jquery-3.1.1.min.js:4)
at Object.send (jquery-3.1.1.min.js:4)
at Function.ajax (jquery-3.1.1.min.js:4)
at Function.r._evalUrl (jquery-3.1.1.min.js:4)
jquery-3.1.1.min.js:2 jQuery.Deferred exception: Cannot convert undefined or null to object TypeError: Cannot convert undefined or null to object
at Function.keys ()
at basegooglemaps.WidgetBase (http://192.168.2.66:5050/javascript/dashboard.js:373:12)
at new basegooglemaps (http://192.168.2.66:5050/compiled_javascript/application.js:2881:16)
at HTMLDocument. (http://192.168.2.66:5050/compiled_javascript/default/googlemaps_init.js:31:41)
at j (http://192.168.2.66:5050/javascript/jquery-3.1.1.min.js:2:29946)
at k (http://192.168.2.66:5050/javascript/jquery-3.1.1.min.js:2:30260) undefined
r.Deferred.exceptionHook @ jquery-3.1.1.min.js:2
chrome-extension://camcglbmhnbeneahgccnfbageaoagbgd/common.js:38 SSO extension (http://192.168.2.66:5050/Googlemaps)
chrome-extension://camcglbmhnbeneahgccnfbageaoagbgd/common.js:38 starting
common.js:38 SSO extension (http://192.168.2.66:5050/Googlemaps)
common.js:38 starting
jquery-3.1.1.min.js:2 Uncaught TypeError: Cannot convert undefined or null to object
at Function.keys ()
at basegooglemaps.WidgetBase (dashboard.js:373)
at new basegooglemaps (application.js:2881)
at HTMLDocument. (googlemaps_init.js:31)
at j (jquery-3.1.1.min.js:2)
at k (jquery-3.1.1.min.js:2)

19

you have to put the styles.js file under the path : /config/appdaemon/custom_css/googlemaps/styles.js
and this is the file : https://github.com/tjntomas/HADashboard-widgets/blob/982e097726f60c2927fd1bf06f25ba080e4cbf9a/custom_css/googlemaps/styles.js

20

Yes, and also the two .png files.

If you have not already, please create a folder in the custom_css folder named googlemaps.

In that folder, copy the the styles.js and the two .png files from here: https://github.com/tjntomas/HADashboard-widgets/tree/master/custom_css/googlemaps

Then try again.