New Pride Theme for HabPanel (Based on Matrix Theme) - Optimized for iPhone

[pmpkk (Patrick)]

Hello!

I’ve updated the matrix theme and created a new version called “pride theme”. It’s purely a CSS update, so if you are running the matrix theme already, you can try it out by replacing the matrix-theme.css with the new pride-theme.css:

• pride-theme.css (24.9 KB)

This theme is optimised for IPhoneX, but works well on most phones and also tablets. It uses a more colorful palette, lowercase text, Apple’s system font, and takes better advantage of the phone’s screen.

I open the HabPanel in a brower on my phone and then add the page to the homescreen, which runs the HabPanel as a PWA (progressive web app) including icon and without the status and tool bars of the browser.

Some screenshots:

Looks good on tablets as well:

Enjoy!

[ysc (Yannick Schaus)]

[luckymallari (Lucky)]

Indeed

[Nognog (Daniel N.)]

Realy Great

[CDriver]

That is really good. Colours are great. I first found the default HP cooling as it was darkness but much prefer the brighter ones coming out nowadays.

[marcoboon]

Impressive!

Quick question; did you ever hear about the issue that the widget code cannot be edited anymore on an iPad with this CSS (or the matrix theme CSS) active in habpanel? So iOS Safari browser basically.

Somehow my cursor is not visible anymore in the custom widget code screen so editing is very difficult. It does work with the orange-tree-override theme so it looks specific to this css. I was wondering if you could point me in the right direction of solving this? Perhaps I should deactivate one or two specific css parts?

Thanks!

[pmpkk (Patrick)]

No, I edit the widgets frequently and don’t have an issue. What exactly isn’t working?

[marcoboon]

I tried to reproduce. I created a new custom widget and went into the code screen. Once without and once with the css enabled

This is with css enabled, no cursor visible:

This is with css disabled, cursor visible:

Pictures taken on my iPhone but the same applies to the iPad. If this works for you I have to look into my safari or iOS settings.

Thanks!

EDIT: Ok, found it. It is this part of the CSS:

 -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */

Not sure what it does but removing it did the trick. I can edit again on iPad with this CSS enabled. Nice!

[pmpkk (Patrick)]

Ah sorry, I misunderstood. On iOS devices editing is disabled on purpose. I wanted to have a as real as possible native experience and removed the ability to highlight text (touch and hold).

[marcoboon]

No worries, it is clear. I’m happy it can be fixed for my specific needs. I followed the instructions / solution at this page: https://stackoverflow.com/questions/12812587/phonegap-styles-webkit-user-select-none-disabling-text-field

It avoids the select on the panel but still allows for editing in the code widget on iOS.

Another question; would you be willing to share the latest versions of your widgets? Especially the home panel looks so impressive.

[hl_at (Herbert)]

@pmpkk - Really great, would you mind sharing your latest widgets versions?

[caprisna]

@pmpkk
Looks incredible nice!
Would also be interested in your latest widgets version and how you are configured the things and rules for them.
I think in your GIT repo, there are still not all widgets you are using uploaded.
Also your new pride theme .css should be uploaded in GIT, what do you think?

Would be good too store all those many widgets versions for the Matrix/Pride theme, created from different users in on central place + instructions how to configure them properly with rules and things.
Reading trough hundred of comments of a feed to find out how the Spotify binding is setup or how the .svg house plan is used together with sun position is not very convenient and in my opinion worth the time, if the knowhow is anyways available in somebodies head, but just not documented centrally.
What do you think would be a good place, in your main GIT repo or a fork of it?

Thanks
Caprisna

[sapster77 (Peter)]

Awesome!

One quick question:
on my tablet and Macbook I have some issues with the “environment” (bigDash). The Celsius and m/s are placed on top of the value (see screenshot)? Any ideas as to what I am doing wrong?

<div oc-lazy-load="['/static/matrix-theme/jquery-3.2.1.min.js','/static/pride-theme/matrix.js']"></div>

<div class="section">

	<div class="bigDash">
		<div class="description">Outdoor</div>
    <div class="top">
			<div class="icon on"><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/squidink.svg#thermometer-3"></use></svg></div>
			<div class="value">
				<div class="main">{{itemValue('TemperatureOut') | number:1}}</div>
				<div class="sub">&#176C</div>
			</div>
		</div>
		<div class="bottom">
			<div class="icon off"><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/squidink.svg#thermometer-3"></use></svg></div>
			<div class="value">feels like {{itemValue('TemperatureOutFeel') | number:0}} &#176C</div>
			<div class="icon off"><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/squidink.svg#drop"></use></svg></div>
			<div class="value">{{itemValue('Humidity') | number:0}} %</div>
		</div>
    <div class="graph">
			<img width="250" height="100" src="http://192.168.1.9:3000/render/d-solo/iq9oURRRz/tempout?orgId=1&panelId=2&from=-24h&to=now&width=500&height=250&tz=UTC%2B01%3A00" />
			<div class="legend">Last 24 hours</div>
    </div>
	</div>


	<div class="bigDash">
		<div class="description">Indoor</div>    
		<div class="top">
			<div class="icon on"><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/squidink.svg#thermometer-3"></use></svg></div>
			<div class="value">
				<div class="main">{{itemValue('TemperatureSensorCurrentTemperature') | number:1}}</div>
				<div class="sub">&#176C</div>
			</div>
		</div>
		<div class="bottom">
			<div class="icon off"><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/squidink.svg#direction-n"></use></svg></div>
			<div class="value">{{itemValue('Pressure') | number:0}} hPa</div>
			<div class="icon off"><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/squidink.svg#drop"></use></svg></div>
			<div class="value">{{itemValue('Humidity') | number:0}} %</div>
		</div>
    <div class="graph">
			<img width="250" height="100" src="http://192.168.1.9:3000/render/d-solo/ZhyTpigRk/tempinside?orgId=1&panelId=2&from=-24h&to=now&width=500&height=250&tz=UTC%2B01%3A00" />
			<div class="legend">Last 24 hours</div>
    </div>
	</div>


	<div class="bigDash">
		<div class="description">Wind</div>    
		<div class="top">
			<div class="icon on"><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/squidink.svg#wind"></use></svg></div>
			<div class="value">
				<div class="main">{{itemValue('Windspeed') | number:1}}</div>
				<div class="sub">M/S</div>
			</div>
		</div>
		<div class="bottom">
			<div class="icon off"><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/squidink.svg#right-arrow-2"></use></svg></div>
			<div class="value">{{itemValue('Winddirection') | uppercase}} </div>
      <div class="icon off"><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/squidink.svg#umberla"></use></svg></div>
			<div class="value">{{itemValue('Rain') | number:1}} Mm</div>
		</div>
    <div class="graph">
			<img width="250" height="100" src="http://192.168.1.9:3000/render/d-solo/GQ_FyRRRz/windspeed?orgId=1&panelId=2&from=-24h&to=now&width=500&height=250&tz=UTC%2B01%3A00" />
			<div class="legend">Last 24 hours</div>
    </div>
	</div>  


</div>

[coeffee (Bastian)]

First of all, it’s a wonderful further matrix-theme development!

Patrick, Thanks a lot for your work!

I solved your “The Celsius and m/s” problem like this - with the “main”, “decimal” and “sub” class:

    <div class="bigDash">
		<div class="description">Flur</div>
    <div class="top">
			<div class="icon on"><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/squidink.svg#thermometer"></use></svg></div>
			<div class="value">
        <div class="main">{{itemValue('Temperatur_EG_Flur_Ist') | number:0}}</div>
        <div class="decimals">,{{(itemValue('Temperatur_EG_Flur_Ist') | number:1).split(',')[1]}}</div>
				<div class="sub">&#176C</div>
			</div>
		</div>
    <div class="graph">
      <div class="max">{{itemValue('Temperatur_EG_Flur_Ist') | number:1}}</div>
			<img width="250" height="100" src="http://192.168.178.51:3000/render/dashboard-solo/db/temperatur?orgId=1&panelId=2&refresh=30m&from=now-24h&to=now&width=500&height=250&tz=UTC%2B02%3A00?{{itemValue('grafana_update')}}" />
			<div class="legend">Letzte 24h</div>
      <div class="min">{{itemValue('Temperatur_EG_Flur_Ist') | number:1}}</div>
    </div>
	</div>

[sapster77 (Peter)]

Hi Bastian! Thanks a lot for your answer - it is a very nice solution that works perfectly:-)

Thanks again!

[Geert_Verbist]

As I have no clue how css or anything else actually works. I was wondering if you guide me in getting some dimmers displayed in you panel. I have your panel half up. Now struggling to find out how to add dimmers etc…

[Dominic_Bialas]

Hey there,

pride theme looks great. Just a perhaps silly question.

Could you guys share your home screen of your automation?

For me there is the question what it should put on the home / start screen.

A list with all floors? all list with all lights, shutters, temperatures, etc. or just a menu where you can jump to the floors, lights, etc.

I tried severals options but nothing look clear to me - it either looks a little bit overload or just isn’t functional.

Could you share a screenshot of your start screens of your habpanel with pride theme?

Would be great.

Cheers, Nic

[dastrix80 (Kris K)]

Hi @pmpkk may you share your presence widget?

Thanks!

[quarku]

Quick question,

Can you please provide example of bulb brightness bar.

All other things works for me but I’m having big issue with bars (color temperature, color and brightness).

Thanks in advance

[sjef86 (Christian)]

I don’t get the color-theme for each widget in the graphs My graphs are all green, and doesn’t follow the colors in the widget. I have done the grafana index.html “hack”, but I’m not sure if that’s related to this. I see that @sapster77 has managed to make it work. any suggestions?