Can't get the Appdaemon 3.0.b3 widgets in HaDashboard to work... with java console errors

Third party integrations AppDaemon
1

Hoping to find an answer or suggestion from the experienced users or developers here…

Can’t get the Appdaemon 3.0.b3 widgets in HaDashboard to work…

The latest Appdaemon is installed, the appdaemon log files look fine, everything loads without error. But in the dashboard at http://:5050 just the outlines of the semi-transparent widget frames are visible with no text or graphics.
In browser debugging there is a “jQuery.Deferred exception: baseradial is not defined” error with the radial widgets I am trying to set up.

I tried the a simple label widget also and got a “jQuery.Deferred exception: basedisplay is not defined” error. It looks like something is not loading or referenced? Or maybe something is not installed properly or not at all?

Here is the most simple dash…

Main arguments, all optional

title: Hello Panel
widget_dimensions: [120, 120]
widget_margins: [5, 5]
columns: 8

label:
widget_type: label
text: Hello World

layout:
- label(2x2)

And here is the console output from the browser when the page is loaded…

GET
http://192.168.3.6:5050/Hello
[HTTP/1.1 200 OK 266ms]
GET
http://192.168.3.6:5050/compiled_css/default/hello_application.css
[HTTP/1.1 200 OK 0ms]
GET
http://192.168.3.6:5050/css/jquery.gridster.css
[HTTP/1.1 200 OK 21ms]
GET
http://192.168.3.6:5050/css/climacons-font.css
[HTTP/1.1 200 OK 21ms]
GET
http://192.168.3.6:5050/css/font-awesome.css
[HTTP/1.1 200 OK 26ms]
GET
http://192.168.3.6:5050/css/materialdesignicons.min.css
[HTTP/1.1 200 OK 64ms]
GET
http://192.168.3.6:5050/css/jquery-ui.css
[HTTP/1.1 200 OK 38ms]
GET
http://192.168.3.6:5050/css/rickshaw.min.css
[HTTP/1.1 200 OK 17ms]
GET
http://192.168.3.6:5050/css/fonts.css
[HTTP/1.1 200 OK 36ms]
GET
http://192.168.3.6:5050/javascript/jquery-3.1.1.min.js
[HTTP/1.1 200 OK 62ms]
GET
http://192.168.3.6:5050/javascript/jquery.gridster.js
[HTTP/1.1 200 OK 105ms]
GET
http://192.168.3.6:5050/javascript/jquery-ui.js
[HTTP/1.1 200 OK 147ms]
GET
http://192.168.3.6:5050/javascript/raphael-2.1.4.min.js
[HTTP/1.1 200 OK 63ms]
GET
http://192.168.3.6:5050/javascript/justgage.js
[HTTP/1.1 200 OK 49ms]
GET
http://192.168.3.6:5050/javascript/knockout-3.4.1.js
[HTTP/1.1 200 OK 77ms]
GET
http://192.168.3.6:5050/javascript/d3.min.js
[HTTP/1.1 200 OK 83ms]
GET
http://192.168.3.6:5050/javascript/d3.layout.min.js
[HTTP/1.1 200 OK 68ms]
GET
http://192.168.3.6:5050/javascript/rickshaw.min.js
[HTTP/1.1 200 OK 96ms]
GET
http://192.168.3.6:5050/javascript/gauge.min.js
[HTTP/1.1 200 OK 92ms]
GET
http://192.168.3.6:5050/javascript/reconnecting-websocket.min.js
[HTTP/1.1 200 OK 81ms]
GET
http://192.168.3.6:5050/javascript/dashboard.js
[HTTP/1.1 200 OK 91ms]
GET
http://192.168.3.6:5050/compiled_javascript/application.js
[HTTP/1.1 200 OK 114ms]
GET
http://192.168.3.6:5050/compiled_javascript/default/hello_init.js
[HTTP/1.1 200 OK 95ms]
Error in parsing value for ‘-webkit-text-size-adjust’. Declaration dropped.
hello_application.css:4:29
Unknown property ‘-moz-border-radius’. Declaration dropped.
hello_application.css:37:22
Unknown property ‘-moz-border-radius’. Declaration dropped.
hello_application.css:125:22
Unknown property ‘-moz-border-radius’. Declaration dropped.
hello_application.css:136:22
Unknown property ‘-moz-border-radius’. Declaration dropped.
hello_application.css:199:21
Error in parsing value for ‘shape-rendering’. Declaration dropped.
rickshaw.min.css:1:3749
Unknown property ‘-moz-osx-font-smoothing’. Declaration dropped.
font-awesome.css:20:27
Unknown property ‘-moz-osx-font-smoothing’. Declaration dropped.
materialdesignicons.min.css:1:809
Expected ‘none’, URL, or filter function but found ‘FlipH’. Error in parsing value for ‘filter’. Declaration dropped.
materialdesignicons.min.css:1:89509
Expected ‘none’, URL, or filter function but found ‘FlipV’. Error in parsing value for ‘filter’. Declaration dropped.
materialdesignicons.min.css:1:89610
Expected ‘none’, URL, or filter function but found ‘Alpha(’. Error in parsing value for ‘filter’. Declaration dropped.
jquery-ui.css:48:9
Unknown property ‘user-select’. Declaration dropped.
jquery-ui.css:178:14
Expected ‘none’, URL, or filter function but found ‘alpha(’. Error in parsing value for ‘filter’. Declaration dropped.
jquery-ui.css:667:10
Expected ‘none’, URL, or filter function but found ‘Alpha(’. Error in parsing value for ‘filter’. Declaration dropped.
jquery-ui.css:1044:9
Expected ‘none’, URL, or filter function but found ‘Alpha(’. Error in parsing value for ‘filter’. Declaration dropped.
jquery-ui.css:1051:9
Expected ‘none’, URL, or filter function but found ‘Alpha(’. Error in parsing value for ‘filter’. Declaration dropped.
jquery-ui.css:1055:9
Expected ‘none’, URL, or filter function but found ‘Alpha(’. Error in parsing value for ‘filter’. Declaration dropped.
jquery-ui.css:1307:10
jQuery.Deferred exception: basedisplay is not defined @http://192.168.3.6:5050/compiled_javascript/default/hello_init.js:31:9 undefined
j@http://192.168.3.6:5050/javascript/jquery-3.1.1.min.js:2:29946
g/</k<@http://192.168.3.6:5050/javascript/jquery-3.1.1.min.js:2:30262

jquery-3.1.1.min.js:2:31515
SyntaxError: expected expression, got ‘<’
application.js:1577
Unknown property ‘basedisplay’. Declaration dropped.
Hello
Error in parsing value for ‘height’. Declaration dropped.
Hello
ReferenceError: basedisplay is not defined
hello_init.js:31:9
Source map error: request failed with status 404
Resource URL: http://192.168.3.6:5050/css/materialdesignicons.min.css
Source Map URL: materialdesignicons.min.css.map

I have HA running with no problems. Just trying to build a dashboard for my system.

Thanks!

2

Looks like you might have permission problems in your appdaemon directory - did it create a subdirectory called compiled?

3

Yes, in the config directory in the venv. All the directories / files have the homeassistant user as owner and group.

4

No errors in the AppDaemon log file?

Could you post the contents of compiled_javascript/default/hello_init.js

5

Here it is, thanks…

$(function(){ //DOM Ready

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

$(document).attr("title", "Hello Panel");
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');

    gridster.add_widget('<li><div data-bind="attr: {style: widget_style}" class="widget widget-basedisplay-default-label" id="default-label"><h1 class="title" data-bind="text: title, attr:{ style: title_style}"></h1><h1 class="title2" data-bind="text: title2, attr:{ style: title2_style}"></h1><div class="valueunit" data-bind="attr:{ style: container_style}"><h2 class="value" data-bind="html: value, attr:{ style: value_style}"></h2><p class="unit" data-bind="html: unit, attr:{ style: unit_style}"></p></div><h1 class="state_text" data-bind="text: state_text, attr: {style: state_text_style}"></h1></div></li>', 2, 2, 1, 1)



var widgets = {}
// Initialize Widgets

    widgets["default-label"] = new basedisplay("default-label", "", "default", {'icons': [], 'css': {}, 'fields': {'title2': '', 'state_text': '', 'unit': '', 'title': '', 'value': 'Hello World'}, 'static_css': {'state_text_style': 'color: #fff;', 'container_style': '', 'widget_style': 'background-color: #444;', 'unit_style': '', 'title2_style': 'color: #fff;', 'title_style': 'color: #fff;', 'value_style': 'color: #fff;'}, 'widget_type': 'basedisplay', 'static_icons': [], 'namespace': 'default'})


// 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 HA Events
if (location.protocol == 'https:')
{
    wsprot = "wss:"
}
else
{
    wsprot = "ws:"
}
var stream_url = wsprot + '//' + location.host + '/stream'
ha_status(stream_url, "Hello Panel", widgets);

});

6

and compiled_javascript/application.js

Pleae use blockquotes to format your code correctly.

7

Got an error, Body is limited to 32000 characters; you entered 158593.

application.js is 154.8kb?

8

You could try putting it on hastebin or soemthing …

9

It’s here…

10

Hmm, not sure what is going on here. What browser are you using, and what installation method for AppDaemon?

11

OS version:
Distributor ID: Debian
Release: 9.3
Codename: stretch

Python version:
Python 3.5.3
Python3-VENV

Appdaemon version:
appdaemon 3.0.0b3

PIP version:
pip 9.0.1 from /usr/lib/python3/dist-packages (python 3.5)

I tried it on firefox 58.0.2 64bit and IE11.248.16299.0

Used this to install appdaemon…
sudo pip3 install --pre appdaemon

12

my first instinct when i see this is:
Try if it works with google chrome

13

For reasons I don’t iunderstand there is a big chunk of HTML code in the middle of application.js - I’m trying to figure out what it is and how it might have got there - that is what seems to be causing all the errors. I’ll keep looking but in the meantime you could try removing the compiled directory and trying again.

14

Are you using the wunderground custom component? It seems to be coming from that. If you are try removing it.

15

It looks like an attempt was made to use the wundergorund component here:

But instead of copying the javascript, the HTML for the webpage to display the javascript was used.

Remove that and all should work OK.

16

Did what you suggested. Improvement but not there yet. Here’s the browser console output:

Blockquote
GET
http://192.168.3.6:5050/Test
[HTTP/1.1 200 OK 234ms]
GET
http://192.168.3.6:5050/compiled_css/default/test_application.css
[HTTP/1.1 200 OK 0ms]
GET
http://192.168.3.6:5050/css/jquery.gridster.css
[HTTP/1.1 304 Not Modified 16ms]
GET
http://192.168.3.6:5050/css/climacons-font.css
[HTTP/1.1 304 Not Modified 16ms]
GET
http://192.168.3.6:5050/css/font-awesome.css
[HTTP/1.1 304 Not Modified 16ms]
GET
http://192.168.3.6:5050/css/materialdesignicons.min.css
[HTTP/1.1 304 Not Modified 16ms]
GET
http://192.168.3.6:5050/css/jquery-ui.css
[HTTP/1.1 304 Not Modified 0ms]
GET
http://192.168.3.6:5050/css/rickshaw.min.css
[HTTP/1.1 304 Not Modified 0ms]
GET
http://192.168.3.6:5050/css/fonts.css
[HTTP/1.1 304 Not Modified 0ms]
GET
http://192.168.3.6:5050/javascript/jquery-3.1.1.min.js
[HTTP/1.1 304 Not Modified 0ms]
GET
http://192.168.3.6:5050/javascript/jquery.gridster.js
[HTTP/1.1 304 Not Modified 0ms]
GET
http://192.168.3.6:5050/javascript/jquery-ui.js
[HTTP/1.1 304 Not Modified 9ms]
GET
http://192.168.3.6:5050/javascript/raphael-2.1.4.min.js
[HTTP/1.1 304 Not Modified 16ms]
GET
http://192.168.3.6:5050/javascript/justgage.js
[HTTP/1.1 304 Not Modified 10ms]
GET
http://192.168.3.6:5050/javascript/knockout-3.4.1.js
[HTTP/1.1 304 Not Modified 12ms]
GET
http://192.168.3.6:5050/javascript/d3.min.js
[HTTP/1.1 304 Not Modified 13ms]
GET
http://192.168.3.6:5050/javascript/d3.layout.min.js
[HTTP/1.1 304 Not Modified 5ms]
GET
http://192.168.3.6:5050/javascript/rickshaw.min.js
[HTTP/1.1 304 Not Modified 5ms]
GET
http://192.168.3.6:5050/javascript/gauge.min.js
[HTTP/1.1 304 Not Modified 6ms]
GET
http://192.168.3.6:5050/javascript/reconnecting-websocket.min.js
[HTTP/1.1 304 Not Modified 7ms]
GET
http://192.168.3.6:5050/javascript/dashboard.js
[HTTP/1.1 304 Not Modified 7ms]
GET
http://192.168.3.6:5050/compiled_javascript/application.js
[HTTP/1.1 200 OK 15ms]
GET
http://192.168.3.6:5050/compiled_javascript/default/test_init.js
[HTTP/1.1 200 OK 11ms]
Error in parsing value for ‘-webkit-text-size-adjust’. Declaration dropped.
test_application.css:4:29
Unknown property ‘-moz-border-radius’. Declaration dropped.
test_application.css:37:22
Unknown property ‘-moz-border-radius’. Declaration dropped.
test_application.css:125:22
Unknown property ‘-moz-border-radius’. Declaration dropped.
test_application.css:136:22
Unknown property ‘-moz-border-radius’. Declaration dropped.
test_application.css:199:21
Unknown property ‘horizontal-align’. Declaration dropped.
test_application.css:216:19
Unknown property ‘horizontal-align’. Declaration dropped.
test_application.css:238:19
Unknown property ‘horizontal-align’. Declaration dropped.
test_application.css:252:19
Unknown property ‘horizontal-align’. Declaration dropped.
test_application.css:266:19
Unknown property ‘horizontal-align’. Declaration dropped.
test_application.css:280:19
Unknown property ‘-moz-osx-font-smoothing’. Declaration dropped.
font-awesome.css:20:27
Unknown property ‘-moz-osx-font-smoothing’. Declaration dropped.
materialdesignicons.min.css:1:809
Expected ‘none’, URL, or filter function but found ‘FlipH’. Error in parsing value for ‘filter’. Declaration dropped.
materialdesignicons.min.css:1:89509
Expected ‘none’, URL, or filter function but found ‘FlipV’. Error in parsing value for ‘filter’. Declaration dropped.
materialdesignicons.min.css:1:89610
Expected ‘none’, URL, or filter function but found ‘Alpha(’. Error in parsing value for ‘filter’. Declaration dropped.
jquery-ui.css:48:9
Unknown property ‘user-select’. Declaration dropped.
jquery-ui.css:178:14
Expected ‘none’, URL, or filter function but found ‘alpha(’. Error in parsing value for ‘filter’. Declaration dropped.
jquery-ui.css:667:10
Expected ‘none’, URL, or filter function but found ‘Alpha(’. Error in parsing value for ‘filter’. Declaration dropped.
jquery-ui.css:1044:9
Expected ‘none’, URL, or filter function but found ‘Alpha(’. Error in parsing value for ‘filter’. Declaration dropped.
jquery-ui.css:1051:9
Expected ‘none’, URL, or filter function but found ‘Alpha(’. Error in parsing value for ‘filter’. Declaration dropped.
jquery-ui.css:1055:9
Expected ‘none’, URL, or filter function but found ‘Alpha(’. Error in parsing value for ‘filter’. Declaration dropped.
jquery-ui.css:1307:10
Error in parsing value for ‘shape-rendering’. Declaration dropped.
rickshaw.min.css:1:3749
Unknown property ‘basedisplay’. Declaration dropped.
Test
Error in parsing value for ‘height’. Declaration dropped.
Test
Source map error: request failed with status 404
Resource URL: http://192.168.3.6:5050/css/materialdesignicons.min.css
Source Map URL: materialdesignicons.min.css.map
[Learn More]
GET
http://192.168.3.6:5050/stream
[HTTP/1.1 101 Switching Protocols 3ms]
GETXHR
http://192.168.3.6:5050/state/default/sensor.NodeMCU1_temp_1
[HTTP/1.1 200 OK 3ms]
GETXHR
http://192.168.3.6:5050/state/default/sensor.NodeMCU1_temp_2
[HTTP/1.1 200 OK 3ms]
GETXHR
http://192.168.3.6:5050/state/default/sensor.NodeMCU1_temp_4
[HTTP/1.1 200 OK 4ms]
GETXHR
http://192.168.3.6:5050/state/default/sensor.NodeMCU1_temp_3
[HTTP/1.1 200 OK 6ms]
GETXHR
http://192.168.3.6:5050/state/default/sensor.NodeMCU1_temp_5
[HTTP/1.1 200 OK 7ms]
Entity not found: sensor.NodeMCU1_temp_1
dashboard.js:169:33
Entity not found: sensor.NodeMCU1_temp_2
dashboard.js:169:33
Entity not found: sensor.NodeMCU1_temp_4
dashboard.js:169:33
Entity not found: sensor.NodeMCU1_temp_3
dashboard.js:169:33
Entity not found: sensor.NodeMCU1_temp_5
dashboard.js:169:33

Blockquote

17

That output was for the dash I want to run… the console errors were the same for the label dash except for the sensor errors…

Thanks!

18

OK, now remove the compiled directory.

19

Ok, removed compile directory.

Still getting some errors… but at least I can see the contents of the widget.
Thanks so much!

In Firefox-

Blockquote
Error in parsing value for ‘-webkit-text-size-adjust’. Declaration dropped.
test_application.css:4:29
Unknown property ‘-moz-border-radius’. Declaration dropped.
test_application.css:37:22
Unknown property ‘-moz-border-radius’. Declaration dropped.
test_application.css:125:22
Unknown property ‘-moz-border-radius’. Declaration dropped.
test_application.css:136:22
Unknown property ‘-moz-border-radius’. Declaration dropped.
test_application.css:199:21
Unknown property ‘horizontal-align’. Declaration dropped.
test_application.css:216:19
Unknown property ‘horizontal-align’. Declaration dropped.
test_application.css:238:19
Unknown property ‘horizontal-align’. Declaration dropped.
test_application.css:252:19
Unknown property ‘horizontal-align’. Declaration dropped.
test_application.css:266:19
Unknown property ‘horizontal-align’. Declaration dropped.
test_application.css:280:19
Unknown property ‘-moz-osx-font-smoothing’. Declaration dropped.
font-awesome.css:20:27
Unknown property ‘-moz-osx-font-smoothing’. Declaration dropped.
materialdesignicons.min.css:1:809
Expected ‘none’, URL, or filter function but found ‘FlipH’. Error in parsing value for ‘filter’. Declaration dropped.
materialdesignicons.min.css:1:89509
Expected ‘none’, URL, or filter function but found ‘FlipV’. Error in parsing value for ‘filter’. Declaration dropped.
materialdesignicons.min.css:1:89610
Expected ‘none’, URL, or filter function but found ‘Alpha(’. Error in parsing value for ‘filter’. Declaration dropped.
jquery-ui.css:48:9
Unknown property ‘user-select’. Declaration dropped.
jquery-ui.css:178:14
Expected ‘none’, URL, or filter function but found ‘alpha(’. Error in parsing value for ‘filter’. Declaration dropped.
jquery-ui.css:667:10
Expected ‘none’, URL, or filter function but found ‘Alpha(’. Error in parsing value for ‘filter’. Declaration dropped.
jquery-ui.css:1044:9
Expected ‘none’, URL, or filter function but found ‘Alpha(’. Error in parsing value for ‘filter’. Declaration dropped.
jquery-ui.css:1051:9
Expected ‘none’, URL, or filter function but found ‘Alpha(’. Error in parsing value for ‘filter’. Declaration dropped.
jquery-ui.css:1055:9
Expected ‘none’, URL, or filter function but found ‘Alpha(’. Error in parsing value for ‘filter’. Declaration dropped.
jquery-ui.css:1307:10
Error in parsing value for ‘shape-rendering’. Declaration dropped.
rickshaw.min.css:1:3749
Unknown property ‘basedisplay’. Declaration dropped.
Test
Error in parsing value for ‘height’. Declaration dropped.
Test
Source map error: request failed with status 404
Resource URL: http://192.168.3.6:5050/css/materialdesignicons.min.css
Source Map URL: materialdesignicons.min.css.map
[Learn More]
GET
http://192.168.3.6:5050/stream
[HTTP/1.1 101 Switching Protocols 4ms]
GETXHR
http://192.168.3.6:5050/state/default/sensor.NodeMCU_1_temperature_1
[HTTP/1.1 200 OK 2ms]
GETXHR
http://192.168.3.6:5050/state/default/sensor.NodeMCU_1_temperature_2
[HTTP/1.1 200 OK 4ms]
GETXHR
http://192.168.3.6:5050/state/default/sensor.NodeMCU_1_temperature_4
[HTTP/1.1 200 OK 5ms]
GETXHR
http://192.168.3.6:5050/state/default/sensor.NodeMCU_1_temperature_3
[HTTP/1.1 200 OK 5ms]
GETXHR
http://192.168.3.6:5050/state/default/sensor.NodeMCU_1_temperature_5
[HTTP/1.1 200 OK 6ms]
Entity not found: sensor.NodeMCU_1_temperature_1
dashboard.js:169:33
Entity not found: sensor.NodeMCU_1_temperature_2
dashboard.js:169:33
Entity not found: sensor.NodeMCU_1_temperature_4
dashboard.js:169:33
Entity not found: sensor.NodeMCU_1_temperature_3
dashboard.js:169:33
Entity not found: sensor.NodeMCU_1_temperature_5
dashboard.js:169:33

Blockquote

In Chrome -

Blockquote

jquery-3.1.1.min.js:3 [Violation] Added non-passive event listener to a scroll-blocking ‘touchstart’ event. Consider marking event handler as ‘passive’ to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952
dashboard.js:169 Entity not found: sensor.NodeMCU_1_temperature_1
dashboard.js:169 Entity not found: sensor.NodeMCU_1_temperature_2
dashboard.js:169 Entity not found: sensor.NodeMCU_1_temperature_4
dashboard.js:169 Entity not found: sensor.NodeMCU_1_temperature_3
dashboard.js:169 Entity not found: sensor.NodeMCU_1_temperature_5

Blockquote

Don’t know why the sensors are not loading, have to find out what sensor text should be.
In the dash file- (sensor.NodeMCU_1_temperature_1)
I currently have them exactly as in the configuration.yaml …

Blockquote
sensor NodeMCU_1_temperature_1:
- platform: mqtt
state_topic: “NodeMCU_1/temperature_1”
name: “NodeMCU1_temp_1”
unit_of_measurement: “°F”

Blockquote

20

Thanks, you are right. In Chrome those errors do not show up…

Still having issues with the sensor defs though.

Thx again!