Matrix Theme for HABPanel

Tags: #<Tag:0x00007fd31150dea8> #<Tag:0x00007fd31150dd68> #<Tag:0x00007fd31150db10>

(Michael Stjerna) #223

Ysc made a nice implementation.
I have used the layout from Patrick’s css in this tread. It uses the 3-big dash layouts (3col/1row) on the tablet/pc-screen and 1 col/3rows on a smaller screen.

I will give Ysc’s a try when I’m back at the office in a couple of weeks.

(Andrew Pawelski) #224

I have been playing and can now see you have used kiosk to “replace” the top dash title. @ysc’s is good but I think how you have done it is better as you can keep the title od the dash there and control the layout better

(Michael Stjerna) #225

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) #226

how did you get your 1 row so thin?

(Michael Stjerna) #227

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 :slight_smile: )
matrix-theme.css (32.9 KB)

(Andrew Pawelski) #228

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) #229

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:

(Lorenzo Giordano) #230

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.


(Christian) #231

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

(Patrick) #232

Hi Michael,

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


(Michael Stjerna) #233

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. :wink:

(Michael Stjerna) #234

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)

(Christian) #235

thank you!

(Christian) #236

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…:disappointed_relieved:

<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 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>			

can anyone support me?

(Sergey M) #237

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.

(Patrick) #238

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"
		Time cron "0 2 0/1 1/1 * ? *"
			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)


(Patrick) #239

Here’s a small addition to my panel:

(Bakkashan) #241


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 {{}}.

Can someone please give me an advice?

(Marko Kraft) #242

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?

(Christian) #243

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