HABPanel - Yet another implementation of a no-frills dashboard

bulletprooffool · September 30, 2016, 1:54pm

That really looks nice!
How are you controlling Spotify?

ysc · October 1, 2016, 3:46pm

With a Yamaha receiver and openHAB’s yamahareceiver binding!

bulletprooffool · October 1, 2016, 5:03pm

Hmmm… another conundrum for me then.
I’d like to get the Spotify integration working, but currently run and old android to box as a Spotify box - managing it over Spotify connect.
I have 3 Onkyo AV receivers with spotify on board, but I want to be able to distribute my audio to all of them at once.
Sadly, having an AV receiver act as the first port of call requires that unit to always be on when playing my audio.
I’ll have a play with the Onkyo binding and see if I can get much out of the Spotify interface on there.
Thanks

thorcyar · October 3, 2016, 7:51am

hi, very nice UI. I have 2 questions

is it written somewhere, how to migrate from the experimental plugin (installed via panelUI) to snapshots ? I have read somewhere something about some conf/html (that does not exist on my OH 2 beta 4) That seems to be the way to try to modify(add) some widgets, right ? (I need a custom slider to send non-numerical commands, it seems doable with angular-slider wich is beeing used)
more about the ui : why is it not possible to have widgets on the first panel ? is it planned ? I find the “welcome screen” … not very welcoming the way it is, if i could I would add some widgets like meteo on first screen, then details on sub-dashboards. one way would be to declare dashboards AS widgets . It would then also allow more than the 2 levels screens (which I could make use of)

Dr_Kuebel · October 3, 2016, 8:53am

Hi,

great UI! Thanks…

One Question, is it possoble to combine 2 sliders, in order to change two or more heatings to the same value within one slider?

Thanks

ysc · October 3, 2016, 9:15am

You must not use the former “Panel UI” anymore. You should use openHAB 2.0 beta 4 or later and add experimental features & remote repositories in Paper UI (Configuration > System > Extension Management) then install the extension in Extensions > User Interfaces.
If you have a Panel UI configuration you’d like to migrate you go to Configuration > Services and copy-paste the entire JSON from one to the other, this should work (there is a little bug with the size of the text area, you’ll have to grab the handle to resize it).

No, it will eventually be possible to have some dynamic info on the dashboard tiles but it is not planned to add regular widgets there.

Not with the UI itself, but I guess you could use a separate item and a rule to achieve this.

thorcyar · October 3, 2016, 9:19am

ok sorry, I was meaning paper UI not panel. I did install via experimental features, however this does not provide snapshots right ? and this does not allow to modify or add some widgets codes ?

ysc · October 3, 2016, 9:25am

I believe it auto updates and if I remember correctly, the current version has the template widget, which is what you’re looking for.

thorcyar · October 3, 2016, 10:01am

I, maybe template widget is what I need, but I dont get where to put the javascript needed for angular slider (I dont know angularjs -yet, so it might be a dumb question … sorry )

for example, say I want to build a slider with alphabet (from the examples )

EDIT : got it that way, now I’ll try to get further and send commands…

<div>
<rzslider rz-slider-model="e"
          rz-slider-options="{stepsArray: 'off,horsgel,eco,confort'.split(',') }">
</rzslider>
</div>

Dominic_Bialas · October 4, 2016, 6:08am

Hey there -

just installed via openhab2 paper-ui. But how can I update to the newest snapshots?

I´ve seen a commit to the GitHub repository last night - but how can I update my instance?

Greetings dominic

reyem · October 4, 2016, 7:20pm

Easiest is to uninstall it again from paper ui and clone the git repo directly into the static folder as described somewhere above…

Dim · October 15, 2016, 6:45am

This HABPanel UI is awesome!!!

Thanx a lot @ysc

g_g_rich · October 16, 2016, 6:31pm

Really enjoying Habpanel. Unfortunately with the latest snapshot (openhab2) my habpanel is now blank. When editing widgets, the item drop down list is blank.

Edward_Moyse · October 17, 2016, 7:41am

Hi all,

I realise that n3-line chart is experimental, but it’s not working for me and I’m wondering if I’m supposed to have installed something? The error I get (safari) is:

The line with the error is the ‘navigator’ line shown below:

		<script> 
		window.addEventListener('load', function() {
			navigator.serviceWorker.register('service-worker.js', { scope: './' }) /** THIS LINE */
			.then(function(r) {
				console.log('Service worker registered');
			})
			.catch(function(what) {
				console.info('Service worker not registered (not using HTTPS?): ' + what);
			});
		});
		</script>

ysc · October 17, 2016, 8:17pm

Can you elaborate/provide a screenshot? Hit F12 to bring up the developer tools and check error messages in the console?

Whoops, looks like service workers are not supported by Safari Should’ve been more careful. I’ll make a quick fix!

g_g_rich · October 17, 2016, 8:56pm

Hmm… seems to be fixed with latest snapshot

Dim · October 18, 2016, 12:22am

Here is my HABPanel (under development)

And my template settings (based on @ysc 's example):

I include 1 example Roller-shutter config also (widget-slider).

<div style="position: absolute;
		top: 0;
		bottom: 0;
		left: -10px; right: -10px;
		background: url('http://<url>/static/Home/First_Floor.png');
		background-size: cover;
		background-repeat: no-repeat;">

<div ng-init='E03_Small_LED={"name": "E03 Small LED", "item": "E03_Small_LED", "hidelabel": true, "hideonoff": true, "iconset": "eclipse-smarthome-classic", "icon": "light" }'>
	<widget-switch
		style="position: absolute;
		background: rgba(147,189,238,0.5);
		border-radius: 20px;
		top: 67%; left: 50%;
		width: 60px; height: 60px"
		ng-model="E03_Small_LED" />
</div>

<div ng-init='E06_J6={"name": "E06 J6", "item": "E06_J6", "hidelabel": true, "hideonoff": true, "step": 10, "precision": 0, "vertical": true, "inverted": true }'>
	<widget-slider
		style="position: absolute;
		background: rgba(147,189,238,0.5);
		border-radius: 20px;
		top: 85%; left: 71%;
		width: 60px; height: 100px"
		ng-model="E06_J6" />
</div>

</div>

BR,
Dim

neohusky · October 18, 2016, 2:33am

Bravo @Dim. Looking good.

marcolino7 · October 27, 2016, 8:08am

Hi,
I have 2 panel, one for heater main parameter and one for heater fine settings.
It’s possible to setup a widget that link to another Panel?

Thanks

Edward_Moyse · October 27, 2016, 10:09am

Hiya @ysc, I have
200 | Active | 80 | 2.0.0.201610262233 | HABPanel User Interface

But I still don’t seem to be able to get n3 charts working (Safari, latest version OSX).

I can see the default charts just fine, but when I switch to n3 I get a blank widget.

With default I get some errors:
[Error] Failed to load resource: the server responded with a status of 404 (Not Found) (angular-clock.min.js.map, line 0) - http://rambert.noip.me:8080/habpanel/vendor/angular-clock.min.js.map [Error] Failed to load resource: the server responded with a status of 404 (Not Found) (rrdchart.png, line 0 - http://rambert.noip.me:8080/rrdchart.png?{{vm.imageQueryString()}}&h={{vm.height}}&w={{vm.width}})

Edit: I get then with n3-line-charts too actually.