A graph widget for HADashboard

Hi, start by trying to access the url http://192.168.0.33:5050/css/materialdesignicons.min.css in your browser and see if you get a response.It should show the content of the css file.

Also, try clearing the browser cache.

The content is:

@font-face{font-family:"Material Design Icons";src:url("../fonts/materialdesignicons-webfont.eot?v=4.4.95");src:url("../fonts/materialdesignicons-webfont.eot?#iefix&v=4.4.95") format("embedded-opentype"),url("../fonts/materialdesignicons-webfont.woff2?v=4.4.95") format("woff2"),url("../fonts/materialdesignicons-webfont.woff?v=4.4.95") format("woff"),url("../fonts/materialdesignicons-webfont.ttf?v=4.4.95") format("truetype");font-weight:normal;font-style:normal}.mdi:before,.mdi-set{display:inline-block;font:normal normal normal 24px/1 "Material Design Icons";font-size:inherit;text-rendering:auto;line-height:inherit;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.mdi-ab-testing::before{content:"\F001C"}.mdi-access-point::before{content:"\F002"}.mdi-access-point-network::before{content:"\F003"}.mdi-access-point-network-off::before{content:"\FBBD"}.mdi-account::before{content:"\F004"}.mdi-account-alert::before{content:"\F005"}.mdi-account-alert-outline::before{content:"\FB2C"}.mdi-account-arrow-left::before{content:"\FB2D"}.mdi-account-arrow-left-outline::before{content:"\FB2E"}.mdi-account-arrow-right::before{content:"\FB2F"}.mdi-account-arrow-right-outline::before{content:"\FB30"}.mdi-account-badge::before{content:"\FD83"}.mdi-account-badge-alert::before{content:"\FD84"}.mdi-account-badge-alert-outline::before{content:"\FD85"}.mdi-account-badge-horizontal::before{content:"\FDF0"}.mdi-account-badge-horizontal-outline::before{content:"\FDF1"}.mdi-account-badge-outline::before{content:"\FD86"}.mdi-account-box::before{content:"\F006"}.mdi-account-box-multiple::before{content:"\F933"}.mdi-account-box-multiple-outline::before{content:"\F002C"}.mdi-account-box-outline::before{content:"\F007"}.mdi-account-card-details::before{content:"\F5D2"}.mdi-account-card-details-outline::before{content:"\FD87"}.mdi-account-cash::before{content:"\F00C2"}.mdi-account-cash-outline::before{content:"\F00C3"}.mdi-account-check::before{content:"\F008"}.mdi-account-check-outline::before{content:"\FBBE"}.mdi-account-child::before{content:"\FA88"}.mdi-account-child-circle::before{content:"\FA89"}.mdi-account-child-outline::before{content:"\F00F3"}.mdi-account-circle::before{content:"\F009"}.mdi-account-circle-outline::before{content:"\FB31"}.mdi-account-clock::before{content:"\FB32"}.mdi-account-clock-outline::before{content:"\FB33"}.mdi-account-convert::before{content:"\F00A"}.mdi-account-details::before{content:"\F631"}.mdi-account-edit::before{content:"\F6BB"}.mdi-account-edit-outline::before{content:"\F001D"}.mdi-account-group::before{content:"\F848"}.mdi-account-group-outline::before{content:"\FB34"}.mdi-account-heart::before{content:"\F898"}.mdi-account-heart-outline::before{content:"\FBBF"}.mdi-account-key::before{content:"\F00B"}.mdi-account-key-outline::before{content:"\FBC0"}.mdi-account-lock::before{content:"\F0189"}.mdi-account-lock-outline::before{content:"\F018A"}.mdi-account-minus::before{content:"\F00D"}.mdi-account-minus-outline::before{content:"\FAEB"}.mdi-account-multiple::before{content:"\F00E"}.mdi-account-multiple-check::before{content:"\F8C4"}.mdi-account-multiple-minus::before{content:"\F5D3"}.mdi-account-multiple-minus-outline::before{content:"\FBC1"}.mdi-account-multiple-outline::before{content:"\F00F"}.mdi-account-multiple-plus::before{content:"\F010"}.mdi-account-multiple-plus-outline::before{content:"\F7FF"}.mdi-account-network::before{content:"\F011"}.mdi-account-network-outline::before{content:"\FBC2"}.mdi-account-off::before{content:"\F012"}.mdi-account-off-outline::before{content:"\FBC3"}.mdi-account-outline::before{content:"\F013"}.mdi-account-plus::before{content:"\F014"}.mdi-account-plus-outline::before{content:"\F800"}.mdi-account-question::before{content:"\FB35"}.mdi-account-question-outline::before{content:"\FB36"}.mdi-account-remove::before{content:"\F015"}.mdi-account-remove-outline::before{content:"\FAEC"}.mdi-account-search::before{content:"\F016"}.mdi-account-search-outline::before{content:"\F934"}.mdi-account-settings::before{content:"\F630"}.mdi-account-settings-outline::before{content:"\F00F4"}.mdi-account-star::before{content:"\F017"}.mdi-account-star-outline::before{content:"\FBC4"}.mdi-account-supervisor::before{content:"\FA8A"}.mdi-account-supervisor-circle::before{content:"\FA8B"}.mdi-account-supervisor-outline::before{content:"\F0158"}.mdi-account-switch::before{content:"\F019"}.mdi-account-tie::before{content:"\FCBF"}.mdi-account-tie-outline::before{content:"\F00F5"}.mdi-accusoft::before{content:"\F849"}.mdi-adchoices::before{content:"\FD1E"}.mdi-adjust::before{content:"\F01A"}.mdi-adobe::before{content:"\F935"}.mdi-adobe-acrobat::before{content:"\FFBD"}.mdi-air-conditioner::before{content:"\F01B"}.mdi-air-filter::before{content:"\FD1F"}.mdi-air-horn::before{content:"\FD88"}.mdi-air-humidifier::before{content:"\F00C4"}.mdi-air-purifier::before{content:"\FD20"}.mdi-airbag::before{content:"\FBC5"}.mdi-airballoon::before{content:"\F01C"}.mdi-airballoon-outline::before{content:"\F002D"}.mdi-airplane::before{content:"\F01D"}.mdi-airplane-landing::before{content:"\F5D4"}.mdi-airplane-off::before{content:"\F01E"}.mdi-airplane-takeoff::before{content:"\F5D5"}.mdi-airplay::before{content:"\F01F"}.mdi-airport::before{content:"\F84A"}.mdi-alarm::before{content:"\F020"}.mdi-alarm-bell::before{content:"\F78D"}.mdi-alarm-check::before{content:"\F021"}.mdi-alarm-light::before{content:"\F78E"}.mdi-alarm-light-outline::before{content:"\FBC6"}.mdi-alarm-multiple::before{content:"\F022"}.mdi-alarm-note::before{content:"\FE8E"}.mdi-alarm-note-off::before{content:"\FE8F"}.mdi-alarm-off::before{content:"\F023"}.mdi-alarm-plus::before{content:"\F024"}.mdi-alarm-snooze::before{content:"\F68D"}.mdi-album::before{content:"\F025"}.mdi-alert::before{content:"\F026"}.mdi-alert-box::before{content:"\F027"}.mdi-alert-box-outline::before{content:"\FCC0"}.mdi-alert-circle::before{content:"\F028"}.mdi-alert-circle-outline::before{content:"\F5D6"}.mdi-alert-decagram::before{content:"\F6BC"}.mdi-alert-decagram-outline::before{content:"\FCC1"}.mdi-alert-octagon::before{content:"\F029"}.mdi-alert-octagon-outline::before{content:"\FCC2"}.mdi-alert-octagram::before{content:"\F766"}.mdi-alert-octagram-outline::before{content:"\FCC3"}.mdi-alert-outline::before{content:"\F02A"}.mdi-alien::before{content:"\F899"}.mdi-alien-outline::before{content:"\F00F6"}.mdi-all-inclusive::before{content:"\F6BD"}.mdi-alpha::before{content:"\F02B"}.mdi-alpha-a::before{content:"\41"}.mdi-alpha-a-box::before{content:"\FAED"}.mdi-alpha-a-box-outline::before{content:"\FBC7"}.mdi-alpha-a-circle::before{content:"\FBC8"}.mdi-alpha-a-circle-outline::before{content:"\FBC9"}.mdi-alpha-b::before{content:"\42"}.mdi-alpha-b-box::before{content:"\FAEE"}.mdi-alpha-b-box-outline::before{content:"\FBCA"}.mdi-alpha-b-circle::before{content:"\FBCB"}.mdi-alpha-b-circle-outline::before{content:"\FBCC"}.mdi-alpha-c::before{content:"\43"}.mdi-alpha-c-box::before{content:"\FAEF"}.mdi-alpha-c-box-outline::before{content:"\FBCD"}.mdi-alpha-c-circle::before{content:"\FBCE"}.mdi-alpha-c-circle-outline::before{content:"\FBCF"}.mdi-alpha-d::before{content:"\44"}.mdi-alpha-d-box::before{content:"\FAF0"}.mdi-alpha-d-box-outline::before{content:"\FBD0"}.mdi-alpha-d-circle::before{content:"\FBD1"}.mdi-alpha-d-circle-outline::before{content:"\FBD2"}.mdi-alpha-e::before{content:"\45"}.mdi-alpha-e-box::before{content:"\FAF1"}.mdi-alpha-e-box-outline::before{content:"\FBD3"}.mdi-alpha-e-circle::before{content:"\FBD4"}.mdi-alpha-e-circle-outline::before{content:"\FBD5"}.mdi-alpha-f::before{content:"\46"}.mdi-alpha-f-box::before{content:"\FAF2"}.mdi-alpha-f-box-outline::before{content:"\FBD6"}.mdi-alpha-f-circle::before{content:"\FBD7"}.mdi-alpha-f-circle-outline::before{content:"\FBD8"}.mdi-alpha-g::before{content:"\47"}.mdi-alpha-g-box::before{content:"\FAF3"}.mdi-alpha-g-box-outline::before{content:"\FBD9"}.mdi-alpha-g-circle::before{content:"\FBDA"}.mdi-alpha-g-circle-outline::before{content:"\FBDB"}.mdi-alpha-h::before{content:"\48"}.mdi-alpha-h-box::before{content:"\FAF4"}.mdi-alpha-h-box-outline::before{content:"\FBDC"}.mdi-alpha-h-circle::before{content:"\FBDD"}.mdi-alpha-h-circle-ou

[...]

ntent:"\F5B4"}.mdi-worker::before{content:"\F5B5"}.mdi-wrap::before{content:"\F5B6"}.mdi-wrap-disabled::before{content:"\FBBB"}.mdi-wrench::before{content:"\F5B7"}.mdi-wrench-outline::before{content:"\FBBC"}.mdi-wunderlist::before{content:"\F5B8"}.mdi-xamarin::before{content:"\F844"}.mdi-xamarin-outline::before{content:"\F845"}.mdi-xaml::before{content:"\F673"}.mdi-xbox::before{content:"\F5B9"}.mdi-xbox-controller::before{content:"\F5BA"}.mdi-xbox-controller-battery-alert::before{content:"\F74A"}.mdi-xbox-controller-battery-charging::before{content:"\FA21"}.mdi-xbox-controller-battery-empty::before{content:"\F74B"}.mdi-xbox-controller-battery-full::before{content:"\F74C"}.mdi-xbox-controller-battery-low::before{content:"\F74D"}.mdi-xbox-controller-battery-medium::before{content:"\F74E"}.mdi-xbox-controller-battery-unknown::before{content:"\F74F"}.mdi-xbox-controller-menu::before{content:"\FE52"}.mdi-xbox-controller-off::before{content:"\F5BB"}.mdi-xbox-controller-view::before{content:"\FE53"}.mdi-xda::before{content:"\F5BC"}.mdi-xing::before{content:"\F5BD"}.mdi-xing-box::before{content:"\F5BE"}.mdi-xing-circle::before{content:"\F5BF"}.mdi-xml::before{content:"\F5C0"}.mdi-xmpp::before{content:"\F7FE"}.mdi-yahoo::before{content:"\FB2A"}.mdi-yammer::before{content:"\F788"}.mdi-yeast::before{content:"\F5C1"}.mdi-yelp::before{content:"\F5C2"}.mdi-yin-yang::before{content:"\F67F"}.mdi-yoga::before{content:"\F01A7"}.mdi-youtube::before{content:"\F5C3"}.mdi-youtube-creator-studio::before{content:"\F846"}.mdi-youtube-gaming::before{content:"\F847"}.mdi-youtube-subscription::before{content:"\FD1C"}.mdi-youtube-tv::before{content:"\F448"}.mdi-z-wave::before{content:"\FAE9"}.mdi-zend::before{content:"\FAEA"}.mdi-zigbee::before{content:"\FD1D"}.mdi-zip-box::before{content:"\F5C4"}.mdi-zip-box-outline::before{content:"\F001B"}.mdi-zip-disk::before{content:"\FA22"}.mdi-zodiac-aquarius::before{content:"\FA7C"}.mdi-zodiac-aries::before{content:"\FA7D"}.mdi-zodiac-cancer::before{content:"\FA7E"}.mdi-zodiac-capricorn::before{content:"\FA7F"}.mdi-zodiac-gemini::before{content:"\FA80"}.mdi-zodiac-leo::before{content:"\FA81"}.mdi-zodiac-libra::before{content:"\FA82"}.mdi-zodiac-pisces::before{content:"\FA83"}.mdi-zodiac-sagittarius::before{content:"\FA84"}.mdi-zodiac-scorpio::before{content:"\FA85"}.mdi-zodiac-taurus::before{content:"\FA86"}.mdi-zodiac-virgo::before{content:"\FA87"}.mdi-blank::before{content:"\F68C";visibility:hidden}.mdi-18px.mdi-set,.mdi-18px.mdi:before{font-size:18px}.mdi-24px.mdi-set,.mdi-24px.mdi:before{font-size:24px}.mdi-36px.mdi-set,.mdi-36px.mdi:before{font-size:36px}.mdi-48px.mdi-set,.mdi-48px.mdi:before{font-size:48px}.mdi-dark:before{color:rgba(0,0,0,0.54)}.mdi-dark.mdi-inactive:before{color:rgba(0,0,0,0.26)}.mdi-light:before{color:#fff}.mdi-light.mdi-inactive:before{color:rgba(255,255,255,0.3)}.mdi-rotate-45:before{-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}.mdi-rotate-90:before{-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}.mdi-rotate-135:before{-webkit-transform:rotate(135deg);-ms-transform:rotate(135deg);transform:rotate(135deg)}.mdi-rotate-180:before{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.mdi-rotate-225:before{-webkit-transform:rotate(225deg);-ms-transform:rotate(225deg);transform:rotate(225deg)}.mdi-rotate-270:before{-webkit-transform:rotate(270deg);-ms-transform:rotate(270deg);transform:rotate(270deg)}.mdi-rotate-315:before{-webkit-transform:rotate(315deg);-ms-transform:rotate(315deg);transform:rotate(315deg)}.mdi-flip-h:before{-webkit-transform:scaleX(-1);transform:scaleX(-1);filter:FlipH;-ms-filter:"FlipH"}.mdi-flip-v:before{-webkit-transform:scaleY(-1);transform:scaleY(-1);filter:FlipV;-ms-filter:"FlipV"}.mdi-spin:before{-webkit-animation:mdi-spin 2s infinite linear;animation:mdi-spin 2s infinite linear}@-webkit-keyframes mdi-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}@keyframes mdi-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}

/*# sourceMappingURL=materialdesignicons.css.map */

Edit:
Browser Cache already cleared multiple times.

Thanks for your fast response!
Greetings,
Christian

The indentation for time and the following entries should be as follows:

mvp:
  widget_type: hagraph
  entities:   
    - sensor.current_temperature_bad_oben
  units: "°C"
  titles:   
    - "Bad oben"
  time: 2h  
  title: "Temperaturen Heizung"
  value_in_legend: 1
  fill: "none"
  log: 1

It might be a copy/paste issue when you posted here, but please check it.

Hi Tomas,

you were right! I had multiple indentation mistakes.
I have corrected them, but still the same result: the Graph-Dashboard-Page is blank (also after restarting the Pi with Homassistant, and clearing the Cache. I also checked on my Dashboard-Tablet, same result).

Any more ideas?? :confused:

Thanks for your help!
Christian

Add another widget to the dashboard, a switch or something simple. Place it as the first widget in the layout section. It will force additional logging in the console.

I also have an alternative graph widget for debugging purposes that you might try.

I will look at other issues I received to see if there is something there we can try.

Since the widget is not even loading on the page, its hard to debug. Your config looks fine apart from the indentation.

Hi Tomas,

thanks for your help.

I added a clock widget and also your Debug-Version.
The result is in both cases also a blank page :confused:

Where can I find the additional logging?
Javascript-Console-Messages stay the same.

Is it correct to have the following folder/file structure?

/home/homeassistant/.homeassistant/conf/appdaemon.yaml
/home/homeassistant/.homeassistant/conf/compiled/
/home/homeassistant/.homeassistant/conf/custom_css/
/home/homeassistant/.homeassistant/conf/custom_css/plotly-latest.min.js
/home/homeassistant/.homeassistant/conf/custom_css/variables.yaml
/home/homeassistant/.homeassistant/conf/custom_widgets/basehagraph/
/home/homeassistant/.homeassistant/conf/custom_widgets/basehagraph/basehagraph.css
/home/homeassistant/.homeassistant/conf/custom_widgets/basehagraph/basehagraph.html
/home/homeassistant/.homeassistant/conf/custom_widgets/basehagraph/basehagraph.js
/home/homeassistant/.homeassistant/conf/custom_widgets/hagraph.yaml
/home/homeassistant/.homeassistant/conf/dashboards/

Is it correct to have the plotly and the variables file in the custom_css folder, even with the Debug-Widget?

Content of variables.yaml:

graph_style: "border-radius: 0px; background-color: rgba(255, 0, 0, 0.3);"  # Change to whichever css you like.
graph_legend_text_color: "#888888"
graph_grid_color: "#888"
graph_title_color: "#cccccc"
graph_x_axis_text_color: "#cccccc"
graph_y_axis_legend_color: "#cccccc"
graph_y_axis_text_color: "#cccccc"
graph_widget_style: "border-bottom-left-radius: 10px;border-bottom-right-radius: 10px;border-top-left-radius: 10px;border-top-right-radius: 10px;"
graph_trace_colors: "1"  # Set the opacity for the trace colors.
graph_fill_colors: "1"   # Set the opacity for the fill colors.
graph_bar_colors: "1"    # Set the opacity for the bar colors.
graph_bar_multi: "1"     # Leave this as is
graph_degrees_celsius_text: "Grad Celsius"  # Adjust to your own language
graph_degrees_fahrenheit_text: "Grad Fahrenheit"  # Adjust to your own language
graph_percent_text: "Prozent"  # Adjust to your own language
hagraph_path: http://192.168.0.33:8123  # Adjust the port if needed.
hagraph_token: eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJjNTM3MDZhZTM2Yjc0OGNiOGQ0ZWYwMWZmOTFiZmI4YyIsImlhdCI6MTYwNTAzNDc0MiwiZXhwIjoxOTIwMzk0NzQyfQ.uYQUkHu4U_HeuKPYmqLUB2g5LM81NE4m7s_3U-mnvjA

Maybe this helps?

Regards,
Christian

Ok, you forgot to set up the custom skins folder where the variables.yaml should be. This is needed for most custom widgets. I will update the instructions since this might not be clear to everyone.

Make a new folder named default in your custom_css folder. In that folder,copy variables.yaml and dashboard.css from here: https://github.com/AppDaemon/appdaemon/tree/dev/appdaemon/assets/css/default
Then edit the variables.yaml file and add

graph_style: "border-radius: 0px; background-color: rgba(255, 0, 0, 0.3);"  # Change to whichever css you like.
graph_legend_text_color: "#888888"
graph_grid_color: "#888"
graph_title_color: "#cccccc"
graph_x_axis_text_color: "#cccccc"
graph_y_axis_legend_color: "#cccccc"
graph_y_axis_text_color: "#cccccc"
graph_widget_style: "border-bottom-left-radius: 10px;border-bottom-right-radius: 10px;border-top-left-radius: 10px;border-top-right-radius: 10px;"
graph_trace_colors: "1"  # Set the opacity for the trace colors.
graph_fill_colors: "1"   # Set the opacity for the fill colors.
graph_bar_colors: "1"    # Set the opacity for the bar colors.
graph_bar_multi: "1"     # Leave this as is
graph_degrees_celsius_text: "Grad Celsius"  # Adjust to your own language
graph_degrees_fahrenheit_text: "Grad Fahrenheit"  # Adjust to your own language
graph_percent_text: "Prozent"  # Adjust to your own language
hagraph_path: http://192.168.0.33:8123  # Adjust the port if needed.
hagraph_token: eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJjNTM3MDZhZTM2Yjc0OGNiOGQ0ZWYwMWZmOTFiZmI4YyIsImlhdCI6MTYwNTAzNDc0MiwiZXhwIjoxOTIwMzk0NzQyfQ.uYQUkHu4U_HeuKPYmqLUB2g5LM81NE4m7s_3U-mnvjA

at the bottom of the file.
Restart appdaemon and empty the browser cache and see what happens.

Hi Tomas,

you were right I forgot to set up the custom skins folder.
I am quite new to HA, Appdaemon and HADashboard, so I didnt knew that.
I followed your instructions from the last post, but I have still a blank Dashboard.

BUT I noticed the following and maybe this helps getting closer to a solution:

All my postet folders/files (see posting above) have “homeassistant” as the owner. When I delete the “compiled” folder and then restart Homassistant and Appdaemon, a new empty version of the compiled-folder is build (by Appdaemon?) but the owner is root! When i than try to reach the Graph-Dashboard the first try is not succesfull with the message, that he couldnt find the dashboard. Thats the moment a “wrong” dashboard_init.js file is build (owner root). The second try to reach the Dashboard leads into a “blank page”.

Do I have an Owner-Issue?

I am running Appdaemon as a Service and installed it beeing logged in as root.
Maybe thats why Appdaemon builds new folders with owner root?

To set app the Appdaemon-Service I follwed this instructions (but without sudo…I was logged in as root):

appdaemon -c /home/homeassistant/.homeassistant/conf

sudo vi /etc/systemd/system/appdaemon.service

[Unit]
Description=AppDaemon service for Home Assistant

[Service]
ExecStart=/usr/local/bin/appdaemon -c /home/homeassistant/.homeassistant/conf 

[Install]
WantedBy=multi-user.target

sudo systemctl daemon-reload
sudo systemctl enable appdaemon.service
sudo systemctl start appdaemon.service
sudo systemctl status appdaemon.service

Does this help?

Thanks in advance and best regards,
Christian

that can cause all kind of trouble

first of all i would advise you to start looking at the AD logs, to see if AD is started without trouble.
then add to your appdaemon.yaml (restart AD afterwards)

admin:
api:

that way you can see fast if your dashboard server is started correctly by going to the url you did place in the http section.
and i also advise to remove all old and obsolete keys from your yaml.

logs:
  error_log:
    filename: errors.log  # this will probably create trouble, AD expects a path!
    log_generations: 1
  main_log:
    filename: appdaemon.log # this will probably create trouble, AD expects a path!
    log_generations: 1
appdaemon:
  disable_apps: 1 
  total_threads: 10 # obsolete because you dont use apps
  app_dir: apps # also needs a path
  latitude: 51.6747074
  longitude: 8.347194
  elevation: 81
  time_zone: Europe/Berlin
  api_key: XXXXXXXX # obsolete for AD 4, password is set in http section
  plugins:
    HASS:
     type: hass
     ha_url: http://192.168.0.33:8123
     token: eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJjNzZkN2JjMzEzNmI0ZDg0YjBmNDk4M2U3YjU5NDEzZCIsImlhdCI6MTYwNDU5OTAxMSwiZXhwIjoxOTE5OTU5MDExfQ.dGVahzJMqaMGnETDLBgS-6K9G_kzSwAaAWL2_Jkqs2g
hadashboard:
  dash_url: http://192.168.0.33:5050 # obsolete for AD 4
  dash_compile_on_start: 1
  dash_force_compile: 1
http:
  url: http://192.168.0.33:5050

edit: when you got dashboard up and running, then start with a simple dashboard, with 1 widget (not a clock, but a sensor)
just like

title: Agenda
widget_dimensions: [120, 120]
widget_size: [1,1]
widget_margins: [10, 10]
columns: 10

layout:
  - sensor.something
1 Like

Hi Rene,

I made your proposed changes and have access to the Logs now.
Also I set the owner of all files and folders to root, as I had warnings in the logs.

Now I get the following:

2020-11-11 21:53:23.648398 INFO AppDaemon: AppDaemon Version 4.0.5 starting
2020-11-11 21:53:23.649931 INFO AppDaemon: Python version is 3.7.3
2020-11-11 21:53:23.651232 INFO AppDaemon: Configuration read from: /home/homeassistant/.homeassistant/conf/appdaemon.yaml
2020-11-11 21:53:23.652780 INFO AppDaemon: Added log: AppDaemon
2020-11-11 21:53:23.653922 INFO AppDaemon: Added log: Error
2020-11-11 21:53:23.655312 INFO AppDaemon: Added log: Access
2020-11-11 21:53:23.656610 INFO AppDaemon: Added log: Diag
2020-11-11 21:53:23.822631 INFO AppDaemon: Loading Plugin HASS using class HassPlugin from module hassplugin
2020-11-11 21:53:24.005257 INFO HASS: HASS Plugin Initializing
2020-11-11 21:53:24.006529 INFO HASS: HASS Plugin initialization complete
2020-11-11 21:53:24.010608 INFO AppDaemon: Initializing HTTP
2020-11-11 21:53:24.012908 INFO AppDaemon: Using 'ws' for event stream
2020-11-11 21:53:24.040156 INFO AppDaemon: Starting API
2020-11-11 21:53:24.059318 INFO AppDaemon: Starting Admin Interface
2020-11-11 21:53:24.061484 INFO AppDaemon: Starting Dashboards
2020-11-11 21:53:24.094755 WARNING HASS: Disconnected from Home Assistant, retrying in 5 seconds
2020-11-11 21:53:24.170393 WARNING AppDaemon: File '/home/homeassistant/.homeassistant/conf/apps/apps.yaml' invalid structure - ignoring
2020-11-11 21:53:24.172312 INFO AppDaemon: Found 0 total apps
2020-11-11 21:53:24.174248 INFO AppDaemon: Starting Apps with 0 workers and 0 pins
2020-11-11 21:53:24.175649 INFO AppDaemon: Running on port 5050
2020-11-11 21:53:29.141605 WARNING HASS: Disconnected from Home Assistant, retrying in 5 seconds
2020-11-11 21:53:34.147856 WARNING HASS: Disconnected from Home Assistant, retrying in 5 seconds
2020-11-11 21:53:39.165229 INFO HASS: Connected to Home Assistant 0.103.3
2020-11-11 21:54:54.935929 INFO HASS: Evaluating startup conditions
2020-11-11 21:54:54.957155 INFO HASS: All startup conditions met
2020-11-11 21:54:54.987229 INFO AppDaemon: Got initial state from namespace default
2020-11-11 21:54:56.066739 INFO AppDaemon: Scheduler running in realtime
2020-11-11 21:54:56.076623 INFO AppDaemon: Adding /home/homeassistant/.homeassistant/conf/apps to module import path
2020-11-11 21:54:56.079042 INFO AppDaemon: App initialization complete
2020-11-11 21:55:45.171210 INFO AppDaemon: Loading custom skin 'default'
2020-11-11 21:55:46.258484 INFO AppDaemon: Compiling dashboard 'Main'
2020-11-11 21:55:49.099317 INFO AppDaemon: Loading custom widget 'hagraph.yaml'
2020-11-11 21:55:49.100597 INFO AppDaemon: Loading custom widget 'basehagraph'
2020-11-11 21:55:50.390368 INFO AppDaemon: function [get_dashboard] finished in 5561 ms
2020-11-11 21:55:51.787709 INFO AppDaemon: New client Main Panel connected
2020-11-11 21:55:54.303174 INFO AppDaemon: Loading custom skin 'default'
2020-11-11 21:55:54.324227 INFO AppDaemon: Compiling dashboard 'extheating'
2020-11-11 21:55:54.719363 WARNING AppDaemon: Error opening dashboard file '/home/homeassistant/.homeassistant/conf/dashboards/extheating.dash'
2020-11-11 21:55:54.738038 INFO AppDaemon: Loading custom widget 'hagraph.yaml'
2020-11-11 21:55:54.739083 INFO AppDaemon: Loading custom widget 'basehagraph'
2020-11-11 21:55:54.857588 INFO AppDaemon: function [get_dashboard] finished in 555 ms
2020-11-11 21:55:54.920234 INFO AppDaemon: Client disconnection from Main Panel
2020-11-11 21:56:01.791355 INFO AppDaemon: Loading custom skin 'default'
2020-11-11 21:56:01.855980 INFO AppDaemon: function [get_dashboard] finished in 64 ms
2020-11-11 21:56:02.808651 INFO AppDaemon: New client Main Panel connected
2020-11-11 21:56:03.749085 INFO AppDaemon: Loading custom skin 'default'
2020-11-11 21:56:03.770232 INFO AppDaemon: Compiling dashboard 'Heating'
2020-11-11 21:56:04.811259 INFO AppDaemon: Loading custom widget 'hagraph.yaml'
2020-11-11 21:56:04.812317 INFO AppDaemon: Loading custom widget 'basehagraph'
2020-11-11 21:56:05.082840 INFO AppDaemon: function [get_dashboard] finished in 1334 ms
2020-11-11 21:56:05.156654 INFO AppDaemon: Client disconnection from Main Panel
2020-11-11 21:56:05.969147 INFO AppDaemon: New client Heating connected
2020-11-11 21:56:07.253053 INFO AppDaemon: Loading custom skin 'default'
2020-11-11 21:56:07.326167 INFO AppDaemon: function [get_dashboard] finished in 73 ms
2020-11-11 21:56:07.345891 INFO AppDaemon: Client disconnection from Heating
2020-11-11 21:56:07.728761 INFO AppDaemon: New client HADashboard connected
2020-11-11 21:56:17.752357 INFO AppDaemon: Loading custom skin 'default'

So i have already different Dashboards up and running.
As for example my “Main” panel and my “Heating” panel which are all goog (switches of some lights and temperature sensors of my heating and stuff). From my Main-Panel I try to oben the “extheating.dash” and as you can see above I cannot access it :frowning:

My appdaemon.yaml is looking like:

logs:
  error_log:
    filename: /home/homeassistant/.homeassistant/conf/errors.log
    log_generations: 1
  main_log:
    filename: /home/homeassistant/.homeassistant/conf/appdaemon.log
    log_generations: 1
appdaemon:
  logfile: STDOUT
  errorfile: STDERR
  disable_apps: 1
  latitude: 51.6747074
  longitude: 8.347194
  elevation: 81
  time_zone: Europe/Berlin
  plugins:
    HASS:
     type: hass
     ha_url: http://192.168.0.33:8123
     cert_verify: False
     token: eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJjNzZkN2JjMzEzNmI0ZDg0YjBmNDk4M2U3YjU5NDEzZCIsImlhdCI6MTYwNDU5OTAxMSwiZXhwIjoxOTE5OTU5MDExfQ.dGVahzJMqaMGnETDLBgS-6K9G_kzSwAaAWL2_Jkqs2g
hadashboard:
  dashboard_dir: /home/homeassistant/.homeassistant/conf/dashboards
  dash_compile_on_start: 1
  dash_force_compile: 1
http:
  url: http://192.168.0.33:5050

admin:
api:

and my extheating.dash:

title: extendedheating
widget_dimensions: [170, 170]
widget_margins: [1, 1]
columns: 20

clock:
  widget_type: clock
  widget_style: "font-size: 100%;"
  time_format: 24hr
  show_seconds: 1
  time_style: "color: grey; font-size: 100%;"
  date_style: "font-size: 100%;"

mvp:
  widget_type: hagraph
  entities:   
    - sensor.current_temperature_bad_oben
  units: "°C"
  titles:   
    - "Bad oben"
  time: 2h 
  title: "Temperaturen Heizung"
  value_in_legend: 1
  fill: "none"
  log: 1

layout:
    - clock(2x2), mvp(7x1)

But my “extheating_init.js” in the compiles/javascript folder looks like:

$(function(){ //DOM Ready

    function navigate(url)
    {
        window.location.href = url;
    }

    $(document).attr("title", "HADashboard");
    content_width = (120 + 5) * 8 + 5
    $('.gridster').width(content_width)
    $(".gridster ul").gridster({
        widget_margins: [5, 5],
        widget_base_dimensions: [120, 120],
        avoid_overlapped_widgets: true,
        max_rows: 15,
        max_size_x: 8,
        shift_widgets_up: false
    }).data('gridster').disable();

    // Add Widgets

    var gridster = $(".gridster ul").gridster().data('gridster');
    


    var widgets = {}
    // Initialize Widgets
    

    // Setup click handler to cancel timeout navigations

    $( ".gridster" ).click(function(){
        clearTimeout(myTimeout);
        if (myTimeoutSticky) {
            myTimeout = setTimeout(function() { navigate(myTimeoutUrl); }, myTimeoutDelay);
        }
    });

    // Set up timeout

    var myTimeout;
    var myTimeoutUrl;
    var myTimeoutDelay;
    var myTimeoutSticky = 0;

    if (location.search != "")
    {
        var query = location.search.substr(1);
        var result = {};
        query.split("&").forEach(function(part) {
        var item = part.split("=");
        result[item[0]] = decodeURIComponent(item[1]);
        });

        if ("timeout" in result && "return" in result)
        {
            url = result.return
            argcount = 0
            for (arg in result)
            {
                if (arg != "timeout" && arg != "return" && arg != "sticky")
                {
                    if (argcount == 0)
                    {
                        url += "?";
                    }
                    else
                    {
                        url += "?";
                    }
                    argcount ++;
                    url += arg + "=" + result[arg]
                }
            }
            if ("sticky" in result)
            {
                myTimeoutSticky = (result.sticky == "1");
            }
            myTimeoutUrl = url;
            myTimeoutDelay = result.timeout * 1000;
            myTimeout = setTimeout(function() { navigate(url); }, result.timeout * 1000);
        }
    }

    // Start listening for AD Events

    window.dashstream = new DashStream("ws", location.protocol, document.domain, location.port, "HADashboard", widgets);

});

Thanks for your help!
Christian

Anything in the javascript console?

I am using Firefox and getting a console by pressing F12.
There I find the following:

Fehler beim Verarbeiten des Wertes fĂźr '-webkit-text-size-adjust'.  Deklaration ignoriert. extheating_application.css:4:29
Unbekannte Eigenschaft '-moz-border-radius'.  Deklaration ignoriert. extheating_application.css:37:22
Unbekannte Eigenschaft '-moz-border-radius'.  Deklaration ignoriert. extheating_application.css:125:22
Unbekannte Eigenschaft '-moz-border-radius'.  Deklaration ignoriert. extheating_application.css:136:22
Unbekannte Eigenschaft '-moz-border-radius'.  Deklaration ignoriert. extheating_application.css:199:21
Unbekannte Eigenschaft '-moz-osx-font-smoothing'.  Deklaration ignoriert. all.css:10:27
Unbekannte Eigenschaft '-moz-osx-font-smoothing'.  Deklaration ignoriert. materialdesignicons.min.css:1:682
'none', URL oder Filterfunktion erwartet, aber 'FlipH' gefunden.  Fehler beim Verarbeiten des Wertes fĂźr 'filter'.  Deklaration ignoriert. materialdesignicons.min.css:1:199277
'none', URL oder Filterfunktion erwartet, aber 'FlipV' gefunden.  Fehler beim Verarbeiten des Wertes fĂźr 'filter'.  Deklaration ignoriert. materialdesignicons.min.css:1:199378
'none', URL oder Filterfunktion erwartet, aber 'Alpha(' gefunden.  Fehler beim Verarbeiten des Wertes fĂźr 'filter'.  Deklaration ignoriert. jquery-ui.css:48:9
'none', URL oder Filterfunktion erwartet, aber 'alpha(' gefunden.  Fehler beim Verarbeiten des Wertes fĂźr 'filter'.  Deklaration ignoriert. jquery-ui.css:667:10
'none', URL oder Filterfunktion erwartet, aber 'Alpha(' gefunden.  Fehler beim Verarbeiten des Wertes fĂźr 'filter'.  Deklaration ignoriert. jquery-ui.css:1044:9
'none', URL oder Filterfunktion erwartet, aber 'Alpha(' gefunden.  Fehler beim Verarbeiten des Wertes fĂźr 'filter'.  Deklaration ignoriert. jquery-ui.css:1051:9
'none', URL oder Filterfunktion erwartet, aber 'Alpha(' gefunden.  Fehler beim Verarbeiten des Wertes fĂźr 'filter'.  Deklaration ignoriert. jquery-ui.css:1055:9
'none', URL oder Filterfunktion erwartet, aber 'Alpha(' gefunden.  Fehler beim Verarbeiten des Wertes fĂźr 'filter'.  Deklaration ignoriert. jquery-ui.css:1307:10
Fehler beim Verarbeiten des Wertes fĂźr 'shape-rendering'.  Deklaration ignoriert. rickshaw.min.css:1:3749
Source-Map-Fehler: Error: request failed with status 404
Ressourcen-Adresse: http://192.168.0.33:5050/css/materialdesignicons.min.css
Source-Map-Adresse: materialdesignicons.css.map

Greetings,
Christian

The widget does not compile. Please post the folder structure for the custom_css again and also post the variables.yaml file. Should be a simple problem now that you have appdaemon running.

Hi Tomas,

this is my foder structure:

/home/homeassistant/.homeassistant/conf/
/home/homeassistant/.homeassistant/conf/custom_css/
/home/homeassistant/.homeassistant/conf/custom_css/default/
/home/homeassistant/.homeassistant/conf/custom_css/plotly-latest.min.js
/home/homeassistant/.homeassistant/conf/custom_css/default/
/home/homeassistant/.homeassistant/conf/custom_css/default/dashboard.css
/home/homeassistant/.homeassistant/conf/custom_css/default/variables.yaml

My variables.yaml:

# Core styles. Reference these wherever possible rather than making custom
# versions of red, green, etc. This will make it easier to quickly change the
# overall pallette of the dashboard just by overriding these variables.

# This file contains the application "defaults".
# IF YOU WANT TO CUSTOMIZE styleS FOR YOUR OWN INSTANCE, DO NOT EDIT THIS FILE.

# ----------------------------------------------------------------------------
# Custom styles instructions
#    1. Create a new directory under custom_css
#    2. copy these files over
#    3. EDIT
#    4. Select the new dir as the "skin" argument of any
#       dashboards you want to use it
# ----------------------------------------------------------------------------

#
# Custom head includes - should be a YAML List, e.g.:
#
#head_includes:
#  - some include
#  - some other include
#
# Text will be included verbatim in the head section of the doc, use for styles,
# javascript or 3rd party css etc. etc.
#
# It is your responsibility to ensure the HTML is correct
#

head_includes:
 - <! head tags go here ->

#
# Custom body includes - should be a YAML List, e.g.:
#
#body_includes:
#  - some include
#  - some other include
#
# Text will be included verbatim in the body section of the doc, use it for JavaScript
#
# It is your responsibility to ensure the HTML is correct
#

body_includes:
 - <! body tags go here ->

#
# Styles
#

white: "#fff"
red: "#ff0055"
green: "#aaff00"
blue: "#00aaff"
purple: "#aa00ff"
yellow: "#ffff00"
orange: "#ffaa00"

gray_very_dark: "#333"
gray_dark: "#444"
gray_medium: "#666"
gray_light: "#888"

#Page and widget defaults
background_style: "background-color: #444"
text_style: "color: #fff"

#These are used for icons and indicators
style_inactive: "color: $gray_light"
style_active: "color: $green"
style_active_warn: "color: $red"
style_info: "color: $blue"
style_title: "color: $white"
style_title2: "color: $white"

# Widget Default Definitions

scene_icon_on: fas-square
scene_icon_off: fas-square
scene_icon_style_active: $style_active
scene_icon_style_inactive: $style_inactive
scene_title_style: $style_title
scene_title2_style: $style_title2
scene_widget_style: $background_style
scene_state_text_style: "color: $white"

sequence_icon_on: fas-square
sequence_icon_off: fas-square
sequence_icon_style_active: $style_active
sequence_icon_style_inactive: $style_inactive
sequence_title_style: $style_title
sequence_title2_style: $style_title2
sequence_widget_style: $background_style
sequence_state_text_style: "color: $white"

mode_icon_on: fas-arrows-alt
mode_icon_off: fas-arrows-alt
mode_icon_style_active: $style_active
mode_icon_style_inactive: $style_inactive
mode_title_style: $style_title
mode_title2_style: $style_title2
mode_widget_style: $background_style
mode_state_text_style: "color: $white"

script_icon_on: fas-th-large
script_icon_off: fas-th-large
script_icon_style_active: $style_active
script_icon_style_inactive: $style_inactive
script_title_style: $style_title
script_title2_style: $style_title2
script_widget_style: $background_style
script_state_text_style: "color: $white"

binary_sensor_icon_on: fas-bullseye
binary_sensor_icon_off: fas-minus
binary_sensor_icon_style_active: $style_active_warn
binary_sensor_icon_style_inactive: $style_inactive
binary_sensor_title_style: $style_title
binary_sensor_title2_style: $style_title2
binary_sensor_widget_style: $background_style
binary_sensor_state_text_style: "color: $white"

icon_title_style: $style_title
icon_title2_style: $style_title2
icon_widget_style: $background_style
icon_state_text_style: "color: $white"

device_tracker_icon_on: fas-user
device_tracker_icon_off: fas-user
device_tracker_icon_style_active: $style_active
device_tracker_icon_style_inactive: $style_inactive
device_tracker_title_style: $style_title
device_tracker_title2_style: $style_title2
device_tracker_widget_style: $background_style
device_tracker_state_text_style: "color: $white"

person_icon_on: fas-user
person_icon_off: fas-user
person_icon_style_active: $style_active
person_icon_style_inactive: $style_inactive
person_title_style: $style_title
person_title2_style: $style_title2
person_widget_style: $background_style
person_state_text_style: "color: $white"

input_boolean_icon_on: fas-sliders-h
input_boolean_icon_off: fas-sliders-h
input_boolean_icon_style_active: $style_active
input_boolean_icon_style_inactive: $style_inactive
input_boolean_title_style: $style_title
input_boolean_title2_style: $style_title2
input_boolean_widget_style: $background_style
input_boolean_state_text_style: "color: $white"

switch_icon_on: fas-circle
switch_icon_off: far-circle
switch_icon_style_active: $style_active
switch_icon_style_inactive: $style_inactive
switch_title_style: $style_title
switch_title2_style: $style_title2
switch_widget_style: $background_style
switch_state_text_style: "color: $white"

lock_icon_on: fas-unlock-alt
lock_icon_off: fas-lock
lock_icon_style_active: $style_active_warn
lock_icon_style_inactive: $style_inactive
lock_title_style: $style_title
lock_title2_style: $style_title2
lock_widget_style: $background_style
lock_state_text_style: "color: $white"

cover_icon_on: fas-arrows-alt-v
cover_icon_off: fas-arrows-alt-v
cover_icon_style_active: $style_active_warn
cover_icon_style_inactive: $style_inactive
cover_title_style: $style_title
cover_title2_style: $style_title2
cover_widget_style: $background_style
cover_state_text_style: "color: $white"

clock_date_style: "color: $white"
clock_time_style: "color: $purple"
clock_widget_style: $background_style

weather_main_style: "color: $orange"
weather_unit_style: "color: $orange"
weather_sub_style: "color: $blue"
weather_widget_style: $background_style

weather_summary_title_style: $style_title
weather_summary_text_style: "font-family: Climacons-Font; font-size: 100px"
weather_summary_state_text_style: "color: $white"
weather_summary_widget_style: $background_style
weather_summary_container_style: ""

london_underground_title_style: "color: $white"
london_underground_text_style: "color: $white"
london_underground_state_text_style: "color: $white;"
london_underground_widget_style: $background_style
london_underground_container_style: ""

label_title_style: $style_title
label_title2_style: $style_title2
label_text_style: "color: $white"
label_state_text_style: "color: $white"
label_widget_style: $background_style
label_container_style: ""

sensor_title_style: $style_title
sensor_title2_style: $style_title2
sensor_value_style: "color: $blue; font-size: 250%"
sensor_text_style: "color: $white; font-size: 100%"
sensor_state_text_style: "color: $white; font-size: 100%"
sensor_unit_style: "color: $blue; font-size: 100%"
sensor_widget_style: $background_style
sensor_container_style: ""

alarm_title_style: $style_title
alarm_title2_style: $style_title2
alarm_state_style: "color: $white; font-size: 100%"
alarm_widget_style: $background_style

reload_icon_active: fas-spinner fa-spin
reload_icon_inactive: fas-sync
reload_icon_active_style: "color: $white"
reload_icon_inactive_style: "color: $white"
reload_title_style: $style_title
reload_title2_style: $style_title2
reload_widget_style: $background_style

javascript_icon_active: fas-asterisk
javascript_icon_inactive: fas-asterisk
javascript_icon_active_style: "color: $white"
javascript_icon_inactive_style: "color: $white"
javascript_title_style: $style_title
javascript_title2_style: $style_title2
javascript_widget_style: $background_style

navigate_icon_active: fas-spinner fa-spin
navigate_icon_inactive: fas-cog
navigate_icon_active_style: "color: $white"
navigate_icon_inactive_style: "color: $white"
navigate_title_style: $style_title
navigate_title2_style: $style_title2
navigate_widget_style: $background_style


media_player_icon_play: fas-play
media_player_icon_pause: fas-pause
media_player_icon_up: fas-plus
media_player_icon_down: fas-minus
media_player_title_style: $style_title
media_player_media_title_style: $style_title2
media_player_album_style: $style_title2
media_player_artist_style: $style_title2
media_player_icon_style_active: "color: $green"
media_player_icon_style_inactive: "color: $gray_light"
media_player_state_text_style: "color: $white"
media_player_units_style: "color: $white"
media_player_level_style: "color: $white"
media_player_level_up_style: "color: $gray_light"
media_player_level_down_style: "color: $gray_light"
media_player_widget_style: $background_style
media_player_icon_previous: fas-step-backward
media_player_icon_next: fas-step-forward
media_player_icon_style_previous: "color: $gray_light"
media_player_icon_style_next: "color: $gray_light"


light_icon_on: fas-circle
light_icon_off: far-circle
light_icon_up: fas-plus
light_icon_down: fas-minus
light_title_style: $style_title
light_title2_style: $style_title2
light_icon_style_active: $style_active
light_icon_style_inactive: $style_inactive
light_state_text_style: "color: $white"
light_level_style: "color: $white"
light_unit_style:  "color: $white"
light_level_up_style: "color: $gray_light"
light_level_down_style: "color: $gray_light"
light_widget_style: $background_style

input_number_title_style: $style_title
input_number_title2_style: $style_title2
input_number_minvalue_style: $style_title
input_number_maxvalue_style: $style_title
input_number_value_style: $style_title
input_number_slider_style: "-webkit-appearance: none"
input_number_container_style: ""
input_number_widget_style: $background_style

climate_icon_up: fas-plus
climate_icon_down: fas-minus
climate_title_style: $style_title
climate_title2_style: $style_title2
climate_level_style: "color: $blue"
climate_unit_style: "color: $blue"
climate_level_up_style: "color: $gray_light"
climate_level_down_style: "color: $gray_light"
climate_widget_style: $background_style
climate_level2_style: "color: $blue"
climate_unit2_style: "color: $blue"

group_icon_on: fas-circle
group_icon_off: far-circle
group_icon_up: fas-plus
group_icon_down: fas-minus
group_title_style: $style_title
group_title2_style: $style_title2
group_icon_style_active: $style_active
group_icon_style_inactive: $style_inactive
group_state_text_style: "color: $white"
group_level_style: "color: $white"
group_level_up_style: "color: $gray_light"
group_level_down_style: "color: $gray_light"
group_widget_style: $background_style
group_unit_style: "color: $white"

iframe_title_style: "$style_title; background-color: rgba(0, 0, 0, 0.5)"
iframe_widget_style: $background_style

alarm_title_style: "color: $blue"
alarm_widget_style: $background_style
alarm_title2_style: $style_title2
alarm_state_style: "color: $white;font-size: 100%"
alarm_panel_state_style: "color: $white"
alarm_panel_code_style: "color: $white"
alarm_panel_background_style: "background-color: $gray_dark"
alarm_panel_button_style: "background-color: $gray_medium"

camera_widget_style: $background_style
camera_title_style: "$style_title; background-color: rgba(0, 0, 0, 0.5)"

gauge_widget_style: $background_style
gauge_title_style: $style_title
gauge_title2_style: $style_title2
gauge_low_value_color: "$blue"
gauge_med_value_color: "$blue"
gauge_high_value_color: "$blue"
gauge_value_bgcolor: "$gray_medium"
gauge_text_color: "$blue"

rss_title_style: $style_title
rss_title2_style: $style_title2
rss_text_style: "color: $blue"
rss_widget_style: $background_style

input_select_title_style: $style_title
input_select_title2_style: $style_title2
input_select_widget_style: $background_style
input_select_select_style: "background-color: #999;color:black"
input_select_container_style: ""

input_slider_icon_up: fas-plus
input_slider_icon_down: fas-minus
input_slider_title_style: $style_title
input_slider_title2_style: $style_title2
input_slider_level_style: "color: $blue"
input_slider_unit_style: "color: $blue"
input_slider_level_up_style: "color: $gray_light"
input_slider_level_down_style: "color: $gray_light"
input_slider_widget_style: $background_style

new_input_number_title_style: $style_title
new_input_number_title2_style: $style_title2
new_input_number_minvalue_style: $style_title
new_input_number_maxvalue_style: $style_title
new_input_number_value_style: $style_title
new_input_number_slider_style: "-webkit-appearance: none"
new_input_number_container_style: ""
new_input_number_widget_style: $background_style

vertical_input_number_title_style: $style_title
vertical_input_number_title2_style: $style_title2
vertical_input_number_minvalue_style: $style_title
vertical_input_number_maxvalue_style: $style_title
vertical_input_number_value_style: $style_title
vertical_input_number_slider_style: ""
vertical_input_number_container_style: ""
vertical_input_number_widget_style: $background_style

light_with_brightness_icon_on: mdi-lightbulb
light_with_brightness_icon_off: mdi-lightbulb
light_with_brightness_title_style: $style_title
light_with_brightness_title2_style: $style_title2
light_with_brightness_slider_style: ""
light_with_brightness_widget_style: $background_style
light_with_brightness_icon_style_active: $style_active
light_with_brightness_icon_style_inactive: $style_inactive

light_with_colorpicker_icon_on: mdi-lightbulb
light_with_colorpicker_icon_off: mdi-lightbulb
light_with_colorpicker_title_style: $style_title
light_with_colorpicker_title2_style: $style_title2
light_with_colorpicker_button_style: ""
light_with_colorpicker_widget_style: $background_style
light_with_colorpicker_icon_style_active: $style_active
light_with_colorpicker_icon_style_inactive: $style_inactive

radial_widget_style: "background: none"

thermo_widget_style: "background: none"

heater_icon_on: fas-fire
heater_icon_off: fas-fire
heater_title_style: $style_title
heater_title2_style: $style_title2
heater_slider_style: ""
heater_widget_style: $background_style
heater_icon_style_active: $style_active
heater_icon_style_inactive: $style_inactive

input_text_title_style: $style_title
input_text_title2_style: $style_title2
input_text_text_style: "color: $white; font-size: 100%"
input_text_widget_style: $background_style
input_text_container_style: ""

input_datetime_title_style: $style_title
input_datetime_title2_style: $style_title2
input_datetime_date_style: "color: $white; font-size: 100%"
input_datetime_time_style: "color: $white; font-size: 100%"
input_datetime_widget_style: $background_style
input_datetime_container_style: ""

graph_style: "border-radius: 0px; background-color: rgba(255, 0, 0, 0.3);"  # Change to whichever css you like.
graph_legend_text_color: "#888888"
graph_grid_color: "#888"
graph_title_color: "#cccccc"
graph_x_axis_text_color: "#cccccc"
graph_y_axis_legend_color: "#cccccc"
graph_y_axis_text_color: "#cccccc"
graph_widget_style: "border-bottom-left-radius: 10px;border-bottom-right-radius: 10px;border-top-left-radius: 10px;border-top-right-radius: 10px;"
graph_trace_colors: "1"  # Set the opacity for the trace colors.
graph_fill_colors: "1"   # Set the opacity for the fill colors.
graph_bar_colors: "1"    # Set the opacity for the bar colors.
graph_bar_multi: "1"     # Leave this as is
graph_degrees_celsius_text: "Grad Celsius"  # Adjust to your own language
graph_degrees_fahrenheit_text: "Grad Fahrenheit"  # Adjust to your own language
graph_percent_text: "Prozent"  # Adjust to your own language
hagraph_path: http://192.168.0.33:8123  # Adjust the port if needed.
hagraph_token: eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJjNTM3MDZhZTM2Yjc0OGNiOGQ0ZWYwMWZmOTFiZmI4YyIsImlhdCI6MTYwNTAzNDc0MiwiZXhwIjoxOTIwMzk0NzQyfQ.uYQUkHu4U_HeuKPYmqLUB2g5LM81NE4m7s_3U-mnvjA

Thanks and best regards,
Christian

Ok, I loaded my widget with firefox and I got the same warnings (they are all warnings) and sometimes, the widget loads and sometimes not. Can you try loading the page with another browser to see if it is a browser-specific issue? Both Chrome, Edge and Safari works fine for me.

that can mean only 2 things:

  1. the filerights from that dashboard are wrong and AD cant read it. (file as root and AD started as homeassistant??)
  2. there are files in the compiled dir that cant be overwritten. (delete all files in compiled, but leave the structure)

its also something to worry about when there are disconnects from HA in such a short time.
can be incidental, but if that keeps happening you got another problem.

by the way, just for your info: all files in compiled are temp files.
they are created on first load from the dashboard, and rewritten everytime the dashboard is recompiled (in your case every time because you did set dash_force_compile in appdaemon.yaml)

and looking at the folder structure: shouldnt the plotly file also be in the skin @tjntomas?

The plotly file goes in the custom_css folder so that you can use the widget with any skin you like.

Try setting the file permissions to 666 (read & write) on the dashboards folder with

sudo chmod -R 666 /home/homeassistant/.homeassistant/conf/dashboards

And to be sure, same with the compiled folder
but since other dashboards loads ok, it appears strange with this error.

Hi Tomas,
Hi Rene,

first I started with setting the permissions to 666 of dashboards and compiled folder, not with console but with the tool WINScp, but this shouldnt be a difference. I deleted all files in the complied folder but I left the folder structure. I have the same result as before, first connect he says he cant read the dashboard and second time he compiled the “broken” dashboard file (postet above) and the dashboard is blanc.

Afterwards I changed the starting User of Appdaemon to homeassistant:

[Service]
Type=simple
User=homeassistant
ExecStart...

Also I deleted the compiled files again and checked the permissions. I changed the owner to homeassistant and restarted everything. Same result with first no access and second try blanc page.

I noticed the following:

When I delete the graph part of my extheating.dash, he is compiling and working as expected.
Before:

title: extendedheating
widget_dimensions: [170, 170]
widget_margins: [1, 1]
columns: 20

clock:
  widget_type: clock
  widget_style: "font-size: 100%;"
  time_format: 24hr
  show_seconds: 1
  time_style: "color: grey; font-size: 100%;"
  date_style: "font-size: 100%;"

mvp:
  widget_type: hagraph
  entities:   
    - sensor.current_temperature_bad_oben
  units: "°C"
  titles:   
    - "Bad oben"
  time: 2h 
  title: "Temperaturen Heizung"
  value_in_legend: 1
  fill: "none"
  log: 1

layout:
    - clock(2x2), mvp(7x1)

After:

title: extendedheating
widget_dimensions: [170, 170]
widget_margins: [1, 1]
columns: 20

clock:
  widget_type: clock
  widget_style: "font-size: 100%;"
  time_format: 24hr
  show_seconds: 1
  time_style: "color: grey; font-size: 100%;"
  date_style: "font-size: 100%;"

layout:
    - clock(2x2)

So from my point of view, there cant be a access/owner problem. He is compiling the clock widget without restarting appdaemon or homeassistant. If i add the Graph parts, save and then try to reach it again, he is ending up first with “no dashboards are found” (as above) and than blanc page again.

Any thoughts? :confused:

Best regards,
Christian

I just installed Chrome, same result:
First Access, no errors in console:


	AppDaemon Administration		


The following errors occured when building your dashboard:

extheating: Error opening dashboard file '/home/homeassistant/.homeassistant/conf/dashboards/extheating.dash'

No dashboards were found

Second Access:

DevTools failed to load SourceMap: Could not load content for http://192.168.0.33:5050/css/dist/jquery.gridster.css.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE
DevTools failed to load SourceMap: Could not load content for http://192.168.0.33:5050/css/materialdesignicons.css.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE

If I try to reach
http://192.168.0.33:5050/css/materialdesignicons.css.map or
http://192.168.0.33:5050/css/dist/jquery.gridster.css.map

he gives

404: Not Found

I think this is different to yesterday, where he could oben the CSS file by following the direct link in the browser. :frowning:

Edit:

Do I have to make changes in the basehagraph.js??

	self.TIME_ZONE = Settings(self, 'time_zone','Europe/Stockholm')
	self.LOCALE = Settings(self, 'locale','sv')

I think i should change it t Europe/Berlin, and ‘de’ for Germany?

Best regards,
Christian

the map files arent there.
i get those errors also, its a change in browsers somewhere causing that error, nothing to worry about.

if you can open the dashboard when the graph widget isnt thee, then there is indeed no problem with the files, but somewhere in the custom widget is a problem.

because of that problem, AD cant compile the dashboard, resulting in that error.
obviously when the dashboard isnt created(compiled) the console doesnt give an error.

there have been changes in the last AD versions that can cause this, but i cant tell without looking closely into it.
the only way i know to debug this is to take out all code from the js file and then add line by line to find the part that causes the trouble. which is timeconsuming.