Matrix Theme for HABPanel

Michael_Stjerna · September 17, 2017, 2:50pm

@Andrew_Pawelski
I use this approach since it don’t take to much of the screen space.
My main control is a wall-mounted 10.1" Android tablet.

Have a look at this Android application.

This small Android application will wake up the HABPanel on a Tablet. It uses the front camera for motion detection.

You can also do MQTT integration to look at some values like batery etc. I haven’t been able to broadcast the camera just yet but it’s supposed to work

Andrew_Pawelski · September 17, 2017, 2:52pm

how did you get your 1 row so thin?

Michael_Stjerna · September 17, 2017, 2:58pm

I have attached the CSS, please be kind since I have no skills on CSS what so ever, but you can take the sections you are intressted in and just copy them out to your own layot.
I intend to clean them up at the end of the project. (read 3-6months from now )
matrix-theme.css (32.9 KB)

Andrew_Pawelski · September 17, 2017, 3:02pm

CSS - me either!
this is a lot more extensive than the matrix-theme.css I have - is this heavily modded by yourself or do I have an old css file?

Andrew_Pawelski · September 17, 2017, 3:05pm

I’m struggling with the simple stuff - I have copied your styling but seems my right buttons want to be below the text - see this for example:

Foxejoe · September 19, 2017, 10:59am

Andrew, it seems it is not defined a “display:inline” style for the icon.

Working with already build in CSS it is very difficult to me if you need changes because you don’t easy understand how classes are mixed together in CSS and how changes can affect other templates.
I always prefer to keep existing classes just for reference and create complete new classes for the change.

Have a good luck.

Regards
Lorenzo

tailor · September 19, 2017, 12:34pm

Hi Michael
Very nice looking dashboards. Could you please share the code for weather, room and sensors sites? Thank you very much.

pmpkk · September 22, 2017, 7:02am

Hi Michael,

This looks amazing!! Your dashboards are super cool and complete!

Cheers,
P

Michael_Stjerna · September 22, 2017, 7:09am

Hi @pmpkk

Thanks, all credit to your work!
A couple of questions for you

Did you try to implement the gauge
Custom widget: Gauge
This could be cool to use for “Pressure” as a Barometer.
What binding did you use for the NetAtmo implementation? The 1.x or the 2.x?
Do you run on a Raspberry PI? If so how did you get the CPU temp in to the systems page?

Sorry for hijacking your thread.

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.