Matrix Theme for HABPanel

Michael_Stjerna · September 22, 2017, 7:16am

Hi @tailor
Attached the code.
Credit should go to @pmpkk for his original work, I just did some copy paste on his work.

The CSS is really messy right now, it works but needs cleaning.
P-HomeControl.json (16.9 KB)
P-System.json (19.4 KB)
P-ESP.json (14.1 KB)
P-Wifi.json (6.6 KB)
P-Weather.json (10.6 KB)
P-Music.json (11.9 KB)
matrix-theme.css (32.9 KB)

tailor · September 24, 2017, 7:37pm

thank you!

tailor · September 25, 2017, 5:28am

Thanks to all for the contributions!

@Michael_Stjerna: I like this simple implementation of the menu bar. Unfortunatelly I get 2 rows for title and menu.

I like to get a responsive header with title on the left and menu on the right or below the title on smaller displays.

I’m using the code below but the resulting header is not responsive…

<div class="section">
	<div class="sectionIconContainer">	
          <div class="control" ng-class="{true: 'on'}[itemValue('str_habpanel_menu_page')=='Lichter']" ng-click="sendCmd('str_habpanel_menu_page', 'Lichter')"><svg viewBox="10 0 60 40"><use xlink:href="/static/matrix-theme/squidink.svg#idea"></use></svg></div>
					<div class="control" ng-class="{true: 'on'}[itemValue('str_habpanel_menu_page')=='System']" ng-click="sendCmd('str_habpanel_menu_page', 'System')"><svg viewBox="10 0 60 40"><use xlink:href="/static/matrix-theme/squidink.svg#settings"></use></svg></div>
					<div class="control" ng-class="{true: 'on'}[itemValue('str_habpanel_menu_page')=='Temperaturen']" ng-click="sendCmd('str_habpanel_menu_page', 'Temperaturen')"><svg viewBox="10 0 60 40"><use xlink:href="/static/matrix-theme/squidink.svg#weather"></use></svg></div>
					<div class="control" ng-class="{true: 'on'}[itemValue('str_habpanel_menu_page')=='Meteo']" ng-click="sendCmd('str_habpanel_menu_page', 'Meteo')"><svg viewBox="10 0 60 40"><use xlink:href="/static/matrix-theme/squidink.svg#summer"></use></svg></div>
					<div class="control" ng-class="{true: 'on'}[itemValue('str_habpanel_menu_page')=='Home']" ng-click="sendCmd('str_habpanel_menu_page', 'Home')"><svg viewBox="10 0 60 40"><use xlink:href="/static/matrix-theme/squidink.svg#home"></use></svg></div>
		</div>
	<div class="title">System</div>
  
	<div class="controls">
		<div class="widget">
			<div class="icon off"><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/squidink.svg#ram"></use></svg></div>
			<div class="name">Memory Total</div>
			<div class="valueGroup"><div class="value">{{itemValue('num_sysinfo_memory_total') | number:1}}MB</div></div>			
		</div>
...
...

can anyone support me?

Olymp · September 29, 2017, 7:35am

I have the same problem.
in the preview of the widget, navigation works, but there is no dashboard if the widget is selected in the properties of the dashboard - the header of the dashboard. If you put this widget on the dashboard, then navigation works.

pmpkk · October 3, 2017, 10:35am

Sorry for the delayed response!

Re Gauge – cool! I will have a look!

Re NetAtmo – I use NetAtmo 2.1 binding

Re Hardware – yes, running on RPi. Here’s the rule to get the temps from the system:

rule "CPU and GPU Temp Update"
when
		Time cron "0 2 0/1 1/1 * ? *"
	then		
			var resp

			resp = executeCommandLine("sudo cat /sys/class/thermal/thermal_zone0/temp", 10000)
			var cpu_temp = transform("JS", "milli.js", resp)
			logInfo("CPU Temp", resp)		

			postUpdate(System_Temperature_CPU, cpu_temp)

			resp = executeCommandLine("sudo /opt/vc/bin/vcgencmd measure_temp", 10000)
			var gpu_temp = transform("REGEX", "temp=(.*?)'C", resp)
			logInfo("GPU Temp", resp)		

			postUpdate(System_Temperature_GPU, gpu_temp)

end

pmpkk · October 3, 2017, 10:58am

Here’s a small addition to my panel:

Bakkashan · October 3, 2017, 4:20pm

Hi!

Thanks for the awesome work to and for sharing this with the community!

I hope somebody can help me. I´m struggling with multiple sliders in my widget. I have six sliders in one widget and when I move one of them, they all move syncronous. The last defined slider-item in my code is the one, which sends a value to knx bus. Three sliders are ROLLERSHUTTER items and three are DIMMER items. Is there a limitation to only one slider per widget?

@Michael_Stjerna: How did you manage that under HÖGTALARE. I see three volume sliders. In your code I recognized, that you use different ng-model=“model” like “model”, “model2”, “model3”,etc. If I change ng=“model” for each slider in my code accordingly to yours, I get following on the dashboard {{vm.widget.name}}.

Can someone please give me an advice?

Marko_Kraft · October 4, 2017, 7:56pm

I set up my configuration in HABPanel directly and I really like to use your style sheet.
I´m quite new to this and got it imported. How do I Insert my Dashboard into your Widget, so that it´s equal on every Tablet, Iphone etc.?
With which program do I have to work?

tailor · October 9, 2017, 5:39am

Hi Alexandre. Have you made any progress on the issue with the slider? Thanks.

kevinshane · October 9, 2017, 1:24pm

hi @pmpkk, thanks for your sharing! really amazing job!
could u please explain how to change the grafana sheet to a regular rrd4j one? looks like the rrd4j is very similar to the grafana one, well maybe mainly because the grafana may constantly “writing/reading” data to sdcard so it may reduce the sdcard life??

randall_hs · October 10, 2017, 12:42pm

@pmpkk Patrik, thanks for your matrix-theme example. I’m slowly tweaking it for my own needs and was wondering if, somewhere in there, you have a basic horizontal/vertical slider control element? I have a bunch of basic dimmer switches and volume controls to implement in my layout.

NCO · October 11, 2017, 1:09pm

The music part looks good and I would like to use it with your spotify webconnect api (it’s running already).
However, I am not able to manage how to extract the music part from the Groundfloor widget.
Can you please post the music.widget only, please?

bennYx0x · October 11, 2017, 3:20pm

I know your post is quite some months old, but just thought I add my hint regarding anonymous access:

Make sure you remove the semicolon in front of the entries from the gafana.ini, they are used instead of # for marking the line as a comment…

bennYx0x · October 12, 2017, 8:43am

Thanks for sharing!

BUT: You should ASAP remove your personal spotify Client ID and Secret from your items file in github!

Cheers

unparagoned · October 12, 2017, 9:32pm

Oops. Thanks

pablo_Fiscella · October 13, 2017, 8:23pm

Hi.
I can not see the script with the colors and the slicer.
Necesito algun archivo js?

thanks

furax54 · October 13, 2017, 8:50pm

you forgot github history … look here to delete https://help.github.com/articles/removing-sensitive-data-from-a-repository/

unparagoned · October 13, 2017, 10:57pm

FML. I almost gave up before I started. Then I had to install the git on bash. Then I messed everything up, then I just kept on trying to undo the mess I was making. I’m fairly confident there is a decent chance I still haven’t properly fixed it.

aletor · October 14, 2017, 1:03am

Hi Christian, sorry for the delay. I didn’t worked on Openhab since almost one month. I add this to my todo when I’ll have time to work on it. Sure I’ll let you know when I’ll able to fix it.

aletor · October 14, 2017, 1:06am

Hi Pablo, I made few customisation for my own setup. You need to pick this part :

          <div class="hueSelectOptions">
            <!-- Brightness slider bar -->
            <div ng-init="slider = { value: 0, options: { floor: 0, ceil: 100, step: 1, showSelectionBar: true } };"></div>
            <rzslider rz-slider-model="slider.value" rz-slider-options="slider.options" ng-click="sendCmd(item.name, slider.value)"></rzslider>
          </div>