Matrix Theme for HABPanel

[unparagoned]

I know how to make it higher but that will then just cut off the top of your logo. As you can see I did try and make some minor changes, I made it s bit smaller and higher to stop the overlap and added a slight slant by mistake but you’ll probably have to figure out the black magic behind how svg work. I’m pretty sure other people has a similar problem/weird problems in relation to svg, have a search.

Edit: Try up here and you can get as proper PLEX icon Matrix Theme for HABPanel

[chiefe (hendrik)]

I want to implement a “Direct Link Rendered Image” into my Habpanel.

Problem is, that the background is black from the dark theme or white from the light theme.

The solution to implement the css file into the inde.html does not work.
I do not know why.
I saw that there are some other guys with the same problem.
Did someone solved this problem and can share a more detailed instruction?

Many thanks

[Ariel_Pena (Ariel Peña)]

man congratulation …i have a problem i dont know how add menu_page and the icon size??

[Craigers (Craig B)]

Just got Grafana and Influx running on my openHAB setup. After fighting with figuring out how to get graphs to show, I learned an frame can also be used to display graphs. I had to set the height to 200, as opposed to 100 which is what pmpkk’s original code has or else the graph is too “squished”. Left graph is using the original code style, the center is using an iframe. You can also hover over the graph and get pop up info just like when viewing in Grafana. It doesn’t match perfectly the Matrix Theme style, but this is just a starting point…
Code:

<iframe src="http://192.168.1.72:3000/d-solo/RLknL9_mz/dashboard_thermostat?refresh=1m&panelId=2&orgId=1&from=now-24h&to=now&tab=display" width="250" height="200" frameborder="0"></iframe>

Craig

[unparagoned]

Nice. I have it set up so it just displays an image, but then if you mouseover it switches to an iframe. Then some other code to revert if you click outside the graph.

Stick the following somewhere in the containing section and group.
ng-init="livingroomImage=true"
ng-click="livingroomImage=!livingroomImage"
Then most of it works here.
<div class="graph" ng-mouseover="livingroomImage=false">
        <a href="http://debra:3000/d/g6HYQROmk/flat-temperatures?orgId=1&from=now-36h&to=now&panelId=7&fullscreen" target="_blank">
          <img ng-if="livingroomImage" width="480" height="240" src="http://ip:3000/render/d-solo/ncr_U6viz/temp?orgId=1&from=now-36h&to=now&var-HueKitchenTemp=0&panelId=6&width=480&height=240&tz=Europe%2FLondon"></img>
          <iframe ng-if="!livingroomImage" style="background-image: url('http://ip3000/render/d-solo/ncr_U6viz/temp?orgId=1&from=now-36h&to=now&var-HueKitchenTemp=0&panelId=6&width=480&height=240&tz=Europe%2FLondon');" width="480" height="240" frameborder="0" ng-src="http://ip:3000/d/sdasdasak/flat-temperatures?orgId=1&from=456456&to=5466456&panelId=7&fullscreen" ></iframe>
        </a>
        <div class="legend">Last 24 hours</div>
      </div>

[pmpkk (Patrick)]

Hey! A new version of the matrix theme can be found here:

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

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

[miro1 (Miro)]

Hi

How Can I add the MENU_page?
Thanks

[Ariel_Pena (Ariel Peña)]

@tailor

nel_menu_page’)==‘Home’]" ng-click="sendCmd(‘str_habpanel_menu_page’, 'Ho

man can you please to exleinme how make or add menu page

[chiefe (hendrik)]

have you found a solution for the problem?

I have the problem, that I cannot see the 3 rows on my ipad in one column.
I can only see the first two rows and the third below both.
I tried to to change the css, but without success.

[BartV (Bart verckens)]

Hi, do you need the spotify premium to have the actions working? Update and details are showing but next, pause, … are not working.

Thanks

[ziltoy (Marco)]

Would be great to have those widgets as well. They’re great but can’t sen you a message.

[Daniel_Hampson]

Hi,

You have probably answered a simular question, or got it somewhere in your dokumentation, i hsve overread it, but on your first picture you have got charts, in widgets with other information, atleast that what it look like. My question is how did you get the charts and icons in one widget?

[Nognog (Daniel N.)]

Hello everybody,

I am currently trying to create a dynamic icon for the seasons. Unfortunately, my code does not work, does anyone have an idea, what is my mistake?

<div ng-if="itemValue('SeasonName') == 'WINTER'" class="icon off"><svg viewBox="0 0 200 200"><use xlink:href="/static/matrix-theme/squidink.svg#WINTER"></use></svg></div>
<div ng-if="itemValue('SeasonName') == 'SUMMER'" class="icon off"><svg viewBox="0 0 200 200"><use xlink:href="/static/matrix-theme/squidink.svg#SUMMER"></use></svg></div>
<div ng-if="itemValue('SeasonName') == 'AUTUMN'" class="icon off"><svg viewBox="0 0 200 200"><use xlink:href="/static/matrix-theme/squidink.svg#AUTUMN"></use></svg></div>
<div ng-if="itemValue('SeasonName') == 'SPRING'" class="icon off"><svg viewBox="0 0 200 200"><use xlink:href="/static/matrix-theme/squidink.svg#SPRING"></use></svg></div>
<div class="name">Aktuelle Jahreszeit:</div>
<div class="valueGroup"><div class="value">{{itemValue('SeasonName')}}</div></div>

SeasonName = WINTER

regards Daniel
/
Edit:
The topic has been clarified, the strings that have been converted by the MAP file must be deposited

<div ng-if="itemValue('SeasonName') == 'Winter' class="icon off"><svg viewBox="0 0 200 200"><use xlink:href="/static/matrix-theme/squidink.svg#WINTER"></use></svg></div>
<div ng-if="itemValue('SeasonName') == 'Sommer' class="icon off"><svg viewBox="0 0 200 200"><use xlink:href="/static/matrix-theme/squidink.svg#SUMMER"></use></svg></div>
<div ng-if="itemValue('SeasonName') == 'Herbst' class="icon off"><svg viewBox="0 0 200 200"><use xlink:href="/static/matrix-theme/squidink.svg#AUTUMN"></use></svg></div>
<div ng-if="itemValue('SeasonName') == 'Frühling' class="icon off"><svg viewBox="0 0 200 200"><use xlink:href="/static/matrix-theme/squidink.svg#SPRING"></use></svg></div>
<div class="name">Aktuelle Jahreszeit:</div>
<div class="valueGroup"><div class="value">{{itemValue('SeasonName')}}</div></div>

[grax (Gracjan)]

Wunderground Widget not found. Now is new API on Aundergound. Have u working widget with weather icon for new API?

[Nognog (Daniel N.)]

Hello everybody,

I added a little update. Technology? Very simple, a window contact in the mailbox. If this is triggered, I get in my header an information that has become something in the mailbox.

The problem: You can’t quit it in the header. So I adjusted the icon on every dashboard. So every icon changes as soon as the mailbox has been opened. By clicking on the icon, the information can be confirmed and the icon will again be the normal for the corresponding dashboard.

Dashboard with Header-Widget:

Dashboard without Header-Widget:

Code:

<div class="section">
<div class="sectionIconContainer">
  <div class="sectionIcon" ng-if="itemValue('flur_bkasten') == 'ON'" ng-click="sendCmd('flur_bkasten', 'OFF')"><svg viewBox="0 0 200 200"><use xlink:href="/static/matrix-theme/squidink.svg#briefja"></use></svg></div>
  <div class="sectionIcon" ng-if="itemValue('flur_bkasten') == 'OFF'"><svg viewBox="0 0 200 200"><use xlink:href="/static/matrix-theme/squidink.svg#stars"></use></svg></div>
........

rule "Briefkasten - Briefe sind da"
when
	Item flur_bkasten_state changed to OPEN
then
    postUpdate(flur_bkasten_countdatetime, new DateTimeType())
    var Number counter
    counter = flur_bkasten_count.state as DecimalType
    counter = counter + 1
    postUpdate(flur_bkasten_count,counter)
	sendCommand(flur_bkasten, ON)
	sendPushoverMessage(pushoverBuilder("[openHAB - Info] Der Postbote war da! Er war um " + flur_bkasten_countdatetime.state + " da."))
end

Greetz
Daniel

[Matt_Foreman (Matt)]

Hey there! This would be awesome! Where do you find the index.html file? Ic ant find it anywhere! Thanks

[manuel96 (Manuel Täubl)]

Hello
I have the following problem I will not show any lamps and shutters although the items are available.

[Danonym1 (Dan Smidsrød)]

Was there ever a solution to this, I have the same issue. Might seem that it is related to adding of dimensions to number items. Any help appreciated

Item definition:

Number:Temperature      Netatmo_Indoor_Temperature    "Temperatur inne [%.1f °C]"           <temperature>  			(GNetatmo,GTempSensor)  {channel = "netatmo:NAMain:xx:xx:Temperature"}

Without the | number

With the | number

[unparagoned]

@Danonym1

Was there ever a solution to this, I have the same issue. Might seem that it is related to adding of dimensions to number items. Any help appreciated

I think it might be the bit about the type, try the following.

Number      Netatmo_Indoor_Temperature    "Temperatur inne [%.1f °C]"           <temperature>  			(GNetatmo,GTempSensor)  {channel = "netatmo:NAMain:xx:xx:Temperature"}

[Danonym1 (Dan Smidsrød)]

Changing it to only be a Number fixes the problem, but don’t I lose some functionality doing it this way? Would have prefered to keep the dimension.