Matrix Theme for HABPanel

Michael_Stjerna · September 9, 2017, 12:14pm

Nice one, I Will take this idea

ysc · September 12, 2017, 4:17pm

FYI - this could be interesting for you extreme customizers

Michael_Stjerna · September 16, 2017, 5:44am

Hi

@pmpkk @ysc thanks for all your help and examples.
Here are some screenshots of my panel. There are still some work to be done. I just bought a NetAtmo Weather station and a WelcomeHome Camera that needs to be implemented
I need to tweak the thermostat control, it looks terrible right now. I needed it up fast since I have this installation at my summerhouse and need to turn on the heating remote when I plan to go there (Getting cold in Sweden)

Andrew_Pawelski · September 17, 2017, 2:39am

Are those icons in the top right buttons to other panels?
Could you share the code for these either way

Michael_Stjerna · September 17, 2017, 8:40am

@Andrew_Pawelski

Yes I use them to navigate, create a custom String-item to save the navigation

The first section is the clock (NTP), and 3 group items to show number of lights, windows, doors open.and then the navigation.
You can remove the “?kiosk” if you don’t want it to run in full-screen.


<div class="section">
	<div class="controls">

		<div class="widgetMenu">
			<div class="col1">
				<div class="name">System</div>
			</div>
			<div class="col2">
				<div class="icon off"><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/squidink.svg#round-clock"></use></svg></div>
				<div class="name">{{itemValue('NTPServer_Date') | date:'HH:mm'}}</div>
			</div>
		</div>
		
		
		<div class="widgetMenu2">
			<div class="col2">
				<div class="icon off"><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/squidink.svg#light_bulb"></use></svg></div>
				<div class="name">{{itemValue('gLandetLightON')}} / 6</div>
			</div>
			<div class="col2">
				<div class="icon off"><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/squidink.svg#window"></use></svg></div>
				<div class="name">{{itemValue('gLandetWindowOpen')}} / 4</div>
			</div>
			<div class="col2">
				<div class="icon off"><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/squidink.svg#door-2"></use></svg></div>
				<div class="name">{{itemValue('gLandetDoorOpen')}} / 5</div>
			</div>			
		</div>
    


		<div class="widget.wide">
			<div class="controlGroup">
				<div class="control" ng-class="{true: 'on'}[itemValue('MENU_page')=='P-System?kiosk=on']" ng-click="sendCmd('MENU_page', 'P-System?kiosk=on')"><svg viewBox="0 0 80 80"><use xlink:href="/static/matrix-theme/squidink.svg#drive"></use></svg></div>
				<div class="control" ng-class="{true: 'on'}[itemValue('MENU_page')=='P-Calendar?kiosk=on']" ng-click="sendCmd('MENU_page', 'P-Calendar?kiosk=on')"><svg viewBox="0 0 80 80"><use xlink:href="/static/matrix-theme/squidink.svg#calendar"></use></svg></div>
				<div class="control" ng-class="{true: 'on'}[itemValue('MENU_page')=='P-Wifi?kiosk=on']" ng-click="sendCmd('MENU_page', 'P-Wifi?kiosk=on')"><svg viewBox="0 0 80 80"><use xlink:href="/static/matrix-theme/squidink.svg#home-adaptor"></use></svg></div>
				<div class="control" ng-class="{true: 'on'}[itemValue('MENU_page')=='P-Music?kiosk=on']" ng-click="sendCmd('MENU_page', 'P-Music?kiosk=on')"><svg viewBox="0 0 80 80"><use xlink:href="/static/matrix-theme/squidink.svg#sound2"></use></svg></div>
				<div class="control" ng-class="{true: 'on'}[itemValue('MENU_page')=='P-HomeControl?kiosk=on']" ng-click="sendCmd('MENU_page', 'P-HomeControl?kiosk=on')"><svg viewBox="0 0 80 80"><use xlink:href="/static/matrix-theme/squidink.svg#home-2"></use></svg></div>
				<div class="control" ng-class="{true: 'on'}[itemValue('MENU_page')=='P-ESP?kiosk=on']" ng-click="sendCmd('MENU_page', 'P-ESP?kiosk=on')"><svg viewBox="0 0 80 80"><use xlink:href="/static/matrix-theme/squidink.svg#thermometer-3"></use></svg></div>
				<div class="control" ng-class="{true: 'on'}[itemValue('MENU_page')=='P-Weather?kiosk=on']" ng-click="sendCmd('MENU_page', 'P-Weather?kiosk=on')"><svg viewBox="0 0 80 80"><use xlink:href="/static/matrix-theme/squidink.svg#sunset"></use></svg></div>
			</div>		
		</div>

   
	</div>

</div>

Andrew_Pawelski · September 17, 2017, 11:32am

I understand how to change dashboards, more interested in the layout and where it is.
is that different to how @ysc has done it here?

New display options (incl. experimental custom widgets everywhere!)

Michael_Stjerna · September 17, 2017, 2:30pm

@Andrew_Pawelski
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 · September 17, 2017, 2:44pm

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