Matrix Theme for HABPanel

Hi. Did you every find out an answer? I have the same issue with the Spotify binding when tying to display devices.Yes I can hardware a dropdown list, but shouldn’t have to and i’m convinced there is a was round this but just have not worked it out!!

I used a rule to get the name from json

Hi Michal,
awesome addition/mod to the code. Unfortunately on my setup, the whole row gets split into two lines as time/ state counts are pushed under the icons. Is there anything I need to change in the overall setup?

hello,

i buyed the icons, where can i find the “squidink.svg” i have it nowhere?

Look at https://github.com/pmpkk/openhab-habpanel-theme-matrix - use the “svg_combiner.py” script to combine only the icons you need into the squidink.svg

1 Like

Does anybody knows how can I make the widget to fill the entire screen on a mobile phone?
It looks like this on a Galaxy S7.

I wanna get rid of the space highlighted in red.
Thanks!

Can you share your code for this?

solved it

Hello,

i try to change my arrangement, but somehow i can’t.
I would like that as you can see in the picture that everything comes down to the right of the cover.

and next to the list of channels I would like to have the same again.


can someone help?

<div class="sectionIconContainer"><div class="sectionIcon"><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/squidink.svg#sound2"></use></svg></div></div>
<div class="title">Kodi</div>
<div class="controls">
	<div class="widget">
	
		<div class="valueGroup">
			<div class="value">{{itemValue('Alexaechodot2_Title')}}</div>
			<div class="value">{{itemValue('Alexaechodot2_musikanbieter')}}</div>
		</div>

		<div class="movie">
			<div class="cover" ng-style="{'background-image': 'url(' + itemValue('mykodi_thumb_office') + ')'}"></div>
			<div class="playback">
				<div class="playbackTime">{{ itemValue('Alexaechodot2_progresstime')}}</div>
				<div class="playbackBar"><div class="playbackBarDone" ng-style="{'width': itemValue('spotify_current_progress_percent') + '%'}"></div></div>
				<div class="playbackTime">{{itemValue('Alexaechodot2_duration')}}</div>
			</div>
			<div class="controlGroup">
      	<div class="control" ng-click="sendCmd('Alexaechodot2_player', 'NEXT')"><svg viewBox="0 0 80 80"><use xlink:href="/static/matrix-theme/squidink.svg#right-arrow-3"></use></svg></div>
					<div class="control" ng-click="sendCmd('Alexaechodot2_player', 'PLAY')" ><svg viewBox="0 0 80 80"><use xlink:href="/static/matrix-theme/squidink.svg#right-play"></use></svg></div>
        <div class="control" ng-click="sendCmd('Alexaechodot2_player', 'PREVIOUS')"><svg viewBox="0 0 80 80"><use xlink:href="/static/matrix-theme/squidink.svg#left-arrow-3"></use></svg></div>
			</div>      
		</div>
  
</div>
	<div class="widget">
		<div class="icon off"><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/squidink.svg#line-visuals"></use></svg></div>
		<div class="name">TV Kanäle</div>
		<div class="sceneGroup">
			<div class="scene" ng-click="sendCmd('daserste', 'ON')">Prosieben</div>
			<div class="scene" ng-click="sendCmd('zdf', 'ON')">ZDF</div>
    <div class="scene" ng-click="sendCmd('rtl', 'ON')">RTL</div>
			<div class="scene" ng-click="sendCmd('sat1', 'ON')">SAT 1</div>
    <div class="scene" ng-click="sendCmd('prosieben', 'ON')">ProSieben</div>
			<div class="scene" ng-click="sendCmd('kabel1', 'ON')">Kabel 1</div>
    <div class="scene" ng-click="sendCmd('rtl2', 'ON')">RTL 2</div>
			<div class="scene" ng-click="sendCmd('superrtl', 'ON')">SUPER RTL</div>
    <div class="scene" ng-click="sendCmd('sport1', 'ON')">SPORT 1</div>
    <div class="scene" ng-click="sendCmd('dmax', 'ON')">DMAX</div>
    <div class="scene" ng-click="sendCmd('sixx', 'ON')">SIXX</div>
     <div class="scene" ng-click="sendCmd('tele5', 'ON')">TELE 5</div>
 	</div>
  
</div>

Would love if you could share your battery widget! Looks fantastic

Here’s the whole package …
For the battery widget (System Widget) I had to modify the css (also included).

best regards
Harald

Neato Widget.widget.json (5.61 KB)

Door Widget.widget.json (9.3 KB)

Internet Widget.widget.json (5.67 KB)

Home Widget.widget.json (11.3 KB)

Calendar_Widget.widget.json (9.18 KB)

Security Widget.widget.json (13.4 KB)

Statusbar Widget.widget.json (2.76 KB)

SettingsandRules_Widget.widget.json (7.37 KB)

System Widget.widget.json (23.9 KB)

Temperature Control Widget.widget.json (6.87 KB)

Weather Widget.widget.json (26.2 KB)

Weekly_Statistics_Wdget.widget.json (3.95 KB)

matrix-theme.css (23.1 KB)

8 Likes

this is my kodi widget.

I just haven’t managed to enlarge the cover yet.

not working, only errors… IndentationError: unexpected indent

  • LE it works , i had to remove all indentations

Hi all!
I am totally new to the concept of habpanel, I decided after 2 years of using openhab to use it now, I started playing with this amazing template, learn more about the concept of bootstrap and css. I managed to modify some objects, to incorporate the icons thanks to the combiner.py however despite having renamed the icons and placing them in the list of the file, not all are added, do you have any advice to give?
I would also like if possible a list of software allowing me to handle this theme more easily like in wysiwyg bootstrap.
thanks in advance

Hello,

is it possible to have a sticky Navbar in Habpanel/MatrixTheme?
I tried with https://getbootstrap.com/docs/4.0/components/navbar/ but to no success. Could anyone help?

Thanks

Hi All,

First of all thanks for sharing the amazing themes and configs around here.
I really like it!

I have planned to use openhab at my new home and I am considering or if I am going to use Openhab 3 or Openhab 2.1.
it’s depending on if this theme is useable on Openhab 3.

I am running on a raspberry pi 4 8GB ram

Can anyone tell me if the theme is also compatible with openhab 3?

Thanks in advance!

Also I’m interested, it seems you can import wget(s) to HABPannel but it looks like widget properties are not available, my installation based on Openhab 2.5.x on RPI4,

Kind Regards,
Slawek

Hello Nognog,

i was experimenting with the matrix theme and knobs and didn’t get the results I wanted. And then I found the knobs on your mulimedia and bedroom/bathroom control sites. I also want to add similar knobs to my dashboards. How did you get those knobs working? Are your working with “ng-knob”? It would be very nice if you could share a template for the knobs or tell me how you got them working.

Hello Michael,

here my code:

  <div class="bigDash">
    <div class="description">AV-Receiver</div>
    <div class="top">
			<div class="main">
       <div ng-init='volumeav={"name": "Volume",
                    "sizeX": 2,
                    "sizeY": 2,
                    "item": "avr_volDB",
                    "type": "knob",
                    "row": 0,
                    "col": 10,
                    "floor": -80,
                    "ceil": 10,
                    "step": 1,
                    "unit": "dB",
                    "startAngle": -80,
                    "endAngle": 180,
                    "readOnly": true,
                    "trackWidth": 20,
                    "barWidth": 20,
                    "subTextEnabled": true,
                    "scaleEnabled": true,
                    "scaleType": "lines",
                    "skinType": "tron",
                    "rangesEnabled": true,
                    "rangesTextColorMatching": true,
                    "ranges": [
                        {
                            "min": -80,
                            "max": -50,
                            "barColor": "#26bf75",
                        },
                        {
                            "min": -50,
                            "max": -20,
                            "barColor": "#ffffff",
                        },
                        {
                            "min": -20,
                            "max": 10,
                            "barColor": "#e24d42",
                        }
                    ],
                }'>
       <div style="width:280px">
          <div>
             <div><widget-knob ng-model="volumeav" /></div>
          </div>
       </div>
		</div>
	</div>
  	</div>
	<div class="bottom">
        <div class="name1">Sourround Modus: </div>
        <div class="value1">{{itemValue('avr_surroundmode')}}</div>
        <div class="name1">Eingang: </div>
        <div class="value1">{{itemValue('avr_input')}}</div>
		</div>
	</div>

Awesome work!
Have been using the theme ever since February 2020.

Currently working on implementing the car section with a new PHEV.

Can you elaborate just a little on how you (if a library, which) created the car pictures? As they perfectly match the colors of the theme … what was your path to get them to look that smooth?

Appreciate your time.
Thanks in advance.

Hank