HABPanel - Yet another implementation of a no-frills dashboard

ysc · October 27, 2016, 7:27pm

Those errors are weird. Have you tried forcing an update by uninstalling the extension and reinstalling it?

Also might be Safari-related, Could you also try in Chrome (refresh the page with the developer tools and paste the console output)?

Edward_Moyse · October 29, 2016, 5:12pm

Yes, I updated by doing bundle:update XXX

I might try doing a completely fresh OH2 install in a bit … if this changes anything I’ll respond here.

It still doesn’t work, but here you go:
widgets.module.js:34 Registered widget type: button widgets.module.js:34 Registered widget type: chart widgets.module.js:34 Registered widget type: clock widgets.module.js:34 Registered widget type: colorpicker widgets.module.js:34 Registered widget type: dummy widgets.module.js:34 Registered widget type: frame widgets.module.js:34 Registered widget type: image widgets.module.js:34 Registered widget type: knob widgets.module.js:34 Registered widget type: label widgets.module.js:34 Registered widget type: slider widgets.module.js:34 Registered widget type: switch widgets.module.js:34 Registered widget type: template openhab.service.js:212 openHAB 2 service configuration loaded openhab.service.js:33 Loaded openHAB items index.html:25 Service worker not registered (not using HTTPS?): SecurityError: Only secure origins are allowed (see: https://goo.gl/Y0ZkNV). 2openhab.service.js:33 Loaded openHAB items 2chart.widget.js:97 datapoints=0 http://rambert.noip.me:8080/rrdchart.png?{{vm.imageQueryString()}}&h={{vm.height}}&w={{vm.width}} Failed to load resource: the server responded with a status of 404 (Not Found) openhab.service.js:33 Loaded openHAB items openhab.service.js:95 Updating Garage_Temp state from 13 to 12.9

I tried connecting to https, but then I got:

This site can’t provide a secure connection

rambert.noip.me sent an invalid response. Try running Network Diagnostics. ERR_SSL_PROTOCOL_ERROR

ysc · October 29, 2016, 10:16pm

Looks like you don’t have any data! Perhaps you didn’t enter the right service provider in the text box.
Also you seem to have a rrd4j-style graph but it gives you a 404 error, maybe it’s not installed.

Edward_Moyse · October 30, 2016, 10:05am

Hiya @ysc

I have no idea about the rrd4j error - I don’t have any rrd4j graphs configured and I don’t use this persistency service.

Here’s what I have which works:

here there’s no message about datapoint, but I do get a warning about rrdchart.png.

And then I just change it to n3-line-chart:

and this doesn’t work (and I get a message about datapoints=0).

ysc · October 31, 2016, 8:53pm

@Edward_Moyse:
Can you try http://[your_ip]:8080/rest/persistence to check and mysql is really there?
And also http://[your_ip]:8080/rest/persistence/items/gTemperatureSensors?serviceId=mysql
It might lead you to a deeper symptom.

Edward_Moyse · November 1, 2016, 4:57am

Hiya @ysc - thanks for the reply!

I was pretty sure it was nothing fundamental, since the default graph works just fine:

Nevertheless I did as you said - for persistence I get
[{"id":"mysql","label":"mysql","type":"Queryable"}]

For the gTemperatureSensors query I get:
{ "name": "gTemperatureSensors", "datapoints": "0", "data": [] }

I presume this means I can’t use n3 for a group of values? Sure enough, if I change ‘Openhab Item’ from gTemperatureSensors to e.g. FF_Hallway_Temp then it works!

If so I’m sorry for taking up so much of your time, but I had no idea! Perhaps you could add this info to the dialog? I can imagine there are other beginners who wouldn’t know about this limitation (especially since ‘default’ works fine).

ysc · November 2, 2016, 12:23am

RIght, I didn’t realize this was a group… n3 charts only work with individual items (for now), hence the “experimental” warning

Handling groups would mean getting values for every item individually, so it can be done - it’s just not supported yet. More options for the graph widget (color, style etc.) will come eventually, when time allows.

marcolino7 · November 2, 2016, 9:38am

Hi @ysc,
If I leave HabPanel open to my tablet, after a while it stop to update values, and I need to refresh the page into the browser.
I’m using Firefox for Android. I turn off screen after 1 minutes, but wifi never sleep and tablet is connected to power.

Any Ideas?

Marco

bwhouse · November 2, 2016, 11:01am

Are you running OH1? If so, I believe this is a known issue with OH1 not and issue with Habpanel.

marcolino7 · November 2, 2016, 11:02am

Hi @bwhouse
I’m running OH2

Rasmus7700 · November 2, 2016, 5:48pm

Does anyone know of this problem also occurs with OH2 and iOS?

ysc · November 2, 2016, 8:47pm

No problem here, but will try to reproduce.

Rob_Pope · November 11, 2016, 12:49pm

Is there a feature request in GitHub for this? I’d like to see this feature too.

Thanks for building such a lovely HTML UI - I’m going to try and get it running on a 4" screen next week for use as a wall-mounted control center.

lblabr · November 19, 2016, 1:32pm

hi iḿ playing arround with charts, here is an simple example for the linechart you used…

<script type="text/javascript">

  angular
    .module('app', ['n3-line-chart'])

    .controller('MainCtrl', function($scope) {
      $scope.data = {
        dataset0: [
          {x: 0, val_0: 0, val_1: 0, val_2: 0, val_3: 0},
          {x: 1, val_0: 0.993, val_1: 3.894, val_2: 8.47, val_3: 14.347},
          {x: 2, val_0: 1.947, val_1: 7.174, val_2: 13.981, val_3: 19.991},
          {x: 3, val_0: 2.823, val_1: 9.32, val_2: 14.608, val_3: 13.509},
          {x: 4, val_0: 3.587, val_1: 9.996, val_2: 10.132, val_3: -1.167},
          {x: 5, val_0: 4.207, val_1: 9.093, val_2: 2.117, val_3: -15.136},
          {x: 6, val_0: 4.66, val_1: 6.755, val_2: -6.638, val_3: -19.923},
          {x: 7, val_0: 4.927, val_1: 3.35, val_2: -13.074, val_3: -12.625}
        ]
      };

      $scope.options = {
        series: [
          {
            axis: "y",
            dataset: "dataset0",
            key: "val_0",
            label: "An area series",
            color: "#1f77b4",
            type: ['line', 'dot', 'area'],
            id: 'mySeries0'
          }
        ],
        axes: {x: {key: "x"}}
      };
    });
</script>

can javascript code executed by the template widget, how do i get an reference to the controller, that i can pass values to scope.data ???

thanks in advcance!

Lars

lblabr · November 19, 2016, 1:33pm

is it possible to convert the above example to code that can be used in the template widget ?

ysc · November 19, 2016, 2:23pm

Injecting custom user code is not supported (and probably never will be because it is unsafe, opens a whole range of vulnerabilities - the angular compiler sanitizes templates by removing in-line Javascript).

To customize the chart widget the only option is to fork the habpanel code, and hack around in web/app/widgets/chart. Check out CONTRIBUTING.md on Github for pointers.

What are you trying to do?

lblabr · November 19, 2016, 3:14pm

first of all, i would like to have:

customizable axes (fixed min/max settings)
no filled area on line charts

later on:

multiple lines, like the rrdchart

ysc · November 19, 2016, 6:45pm

This piqued my interest and actually wasn’t that hard to do, a couple hours. So there:

To all using interactive charts, please be advised you have to reconfigure them, the model changed a bit…

lblabr · November 19, 2016, 7:44pm

looks great! how do i have to install ? snapshot and apt will install the new options ?

ysc · November 19, 2016, 9:57pm

Wait for the next build @ https://openhab.ci.cloudbees.com/job/openHAB2-Bundles/org.openhab.ui$org.openhab.ui.habpanel/lastSuccessfulBuild/ then update w/ paper ui or habmin