Matrix Theme for HABPanel

skin
theme
stylesheet
Tags: #<Tag:0x00007f0154a51520> #<Tag:0x00007f0154a50d50> #<Tag:0x00007f0154a50238>

(Patrick) #429

When you put the css file’s full path in the browser, does it come up?


(wolf_from_the_north) #430

I will try that when i come home. You mean in stead of the /static/matrix-theme/ … i would state /volume1/public/openHAB/conf/html/ … ?
Kindest regards


(wolf_from_the_north) #431

when i put the css location into the browser it opens it.
second screenshot i tried to put the full browser path.
3rd screenshot i tried the full path.
checking the rights openhab is the owner of the maps.

4rd screenshot is the result i get everytime, when i then scroll down i see the values of my items in blue.






(Marcel) #432

Hallo
Wow, That overview over all Lights Looks very Nice.
Its possible that you Share the html code?

Thanks a lot Marcel


(Patrick) #433

Actually it’s not pulling up the css file. It’s pulling up another page. That’s your problem. The browser can’t access the css file and therefore can’t render the theme properly.

Make sure your rights, folders, etc. are set up correctly and you can actually get the css file via URL. One that works, the rest should work!

Alternatively, the content of the css file may be wrong. Looks like it has references to GitHub. Maybe redownload it and overwrite the one you have there.


(Unparagoned) #434

You did quite a bit of work in the past so please can you post some pictures to make it easier for us to identify any issues. Note I’ll try and give you links but you make need to change the ip/port to your setup.

**Settings **
http://openhabian:8080/habpanel/index.html#/settings or change your ip and port to whatever you have it set to. http:/192.168.45.15:/habpanel/index.html#/settings. The stylesheet should be set to /static/matrix-theme/matrix-theme.css

In your setting you just need to refer to the relative path.

NOW make sure the stylesheet is at the right path. Make sure you replace static with html. The matrix-theme folder should be extracted to html folder

openhab2-conf\html\matrix-theme\matrix-theme.css

If you are in linux

/etc/openhab2/html/matrix-theme/matrix-theme.css

image

Edit: Oh I alway recommend that everyone uses openhabian on a dedicated machine, vm or raspberry pi. I think in this case there is nothing wrong with the theme but probably something with your setup and environment. If you have decided to use an obscure and complicated setup(i.e. everything apart from openhabian) then that up to you to fix and you probably should take this to a seperate thread.


(wolf_from_the_north) #435

Thank you for the information but as i read comments here nothing tells me this is specific for a raspberry.
i’m running the install on a synology dsm 6.1
As Far as i am aware openhab should work on any platform the same way.
Reading previous comment i believe something is wrong with the rights / css file.
i will try some more


(wolf_from_the_north) #436

just downloaded the zipfile instead of downloading each file separate and now indeed its downloading the css file.

screen 1 result in internet explorer :wink:
in google chrome still no luck, any idea ?


(Unparagoned) #437

You need to go through the setting on each browser. So go to settings and set the css file and/or select any saved version.

If it is still not working try. Shift + F5, shift + refresh.

Openhab works fine on all different platforms if properly set up. Now setting up the envirnment isn’t so simple. The best way I found is to use openhabian which works on any system that can run debian, so any computer or even a raspberry pi.

It’s really easy to set up openhab and your envirnment properly using openhabian and I strongly recommend it.
https://docs.openhab.org/installation/openhabian.html#manual-setup


(wolf_from_the_north) #438

bingo

cleared cache and all history from chrome.
closed browser and retried.
succes!

Thnx Everyone , now i can start to :wink:


(Angelos) #439

I haven’t changed the code from Patrick’s work.

Here it is:

  <div class="title">
    <div class="name">Ground Floor Lights</div>
    <div class="summary">ON: {{ ( gGF_filtered | filter: { state: 'ON' } ).length }} of {{gGF_filtered.length}}</div>
  </div>

(Andrew Pawelski) #440

Any of your lights dimmers?


(Angelos) #441

No. All Items in that group (gGF_Lights) are defined as Switches.

<div ng-repeat="item in itemsInGroup('gGF_Lights') | filter:query as gGF_filtered"></div>

(Andrew Pawelski) #442

Rats - I cant for the life of me find a way to filter dimmers and switches at the same time - was hoping you had - do you think if I made proxy items of my dimmers AS switches this might achieve the same thing - if the dimmer is 10% - the proxy switch is ON?


(Unparagoned) #443

Here is mine for Color lights, the aproach should work for dimmers as well. I think you can use nf-if.type=“Dimmer” to identify the type of light if you can’t find a generic control for both.


  <div class="section" ng-init="hueColors = [ { hsb: '0,0,100', hex: '#fff' }, { hsb: '74,78,100', hex: '#fecc2f' }, { hsb: '46,100,100', hex: '#f9a228' }, { hsb: '26,100,100', hex: '#f6621f' }, { hsb: '0,100,100', hex: '#db3838' }, { hsb: '273,100,100', hex: '#a363d9' }, { hsb: '201,100,100', hex: '#40a4d8' }, { hsb: '177,100,100', hex: '#33beb8' }, { hsb: '140,100,100', hex: '#b2c225' } ]">
    <div class="sectionIconContainer"><div class="sectionIcon"><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/matrixicons.svg#light_bulb"></use></svg></div></div>
    <div class="title"><div class="name">Lights</div><div class="summary">ON: {{ ( filtered | filter: { state: 'ON' } ).length }} of {{filtered.length}}</div></div>
    <div class="controls">

      <div ng-repeat="item in itemsInGroup('gLightColor') | filter:query as filtered ">

        <div class="widget" ng-if="item.type=='Color' && itemValue(item.name).split(',')[2]== 0" ng-click="showHueSelect = !showHueSelect">
          <div class="icon off"><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/matrixicons.svg#off"></use></svg></div>
          <div class="name"><div class="hue" ng-style="{'background': 'rgb(' + itemValue(item.name + '_rgb') + ')'}"></div><div class="hueSelect" ng-init="showHueSelect = false" ng-show="showHueSelect"><div class="hueSelectItem"></div><div class="hueSelectOptions"><a href="" ng-click="sendCmd(item.name, itemValue('SceneOffColor'))"><svg viewBox="0 0 48 48" style="stroke: white; stroke-width: 3px;"><use xlink:href="/static/matrix-theme/matrixicons.svg#cross-line"></use></svg></a><a href="" ng-click="sendCmd(item.name, color.hsb)" ng-repeat="color in hueColors" ng-style="{ 'background': color.hex }"></a><a href="" ng-click="sendCmd(item.name, itemValue('SceneColor'))"><svg viewBox="0 0 48 48" style="stroke: white; stroke-width: 3px;"><use xlink:href="/static/matrix-theme/matrixicons.svg#on"></use></svg></a>
            <div ng-init="slider = { value: itemValue(item.name).split(',')[2], options: { floor: 0, ceil: 100, step: 1, showSelectionBar: true } };"></div>
            <rzslider rz-slider-model="slider.value" rz-slider-options="slider.options" ng-click="sendCmd(item.name, slider.value)"></rzslider>
                        
            <div ng-init='cpicker = {
                  "name": item.name,
                  "item": itemValue(item.name + '_rgb'),
                  "style": "aCKolor"
                  };slider = {
                  "name": "",
                  "item": itemValue(item.name),
                  "value": itemValue(item.name).split(',')[2],
                  "floor": 0,
                  "ceil": 100,
                  "step": 1,
                  "unit": "",
                  "vertical": false
                  };switch = {
                  "name": "",
                  "item": itemValue(item.name),
                  "hidelabel": true,
                  "hideicon": false,
                  "hideonoff": true
                  }'>
              <style>
                .cl-switch .switch {
                position: absolute;
                top: 0;
                width: 100%;
                }
              </style>
              <widget-colorpicker ng-model="cpicker"></widget-colorpicker>
              <widget-slider ng-model="cslider" ng-click="sendCmd(item.name, cslider.value)"></widget-slider>
            </div>
            </div>   
            </div>{{item.label}} </div>
        </div>

        <div class="widget" ng-if="item.type=='Color' && itemValue(item.name).split(',')[2]!=0" ng-click="showHueSelect = !showHueSelect">
          <div class="icon on"><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/matrixicons.svg#on"></use></svg></div>
          <div class="name"><div class="hue" ng-style="{'background': 'rgb(' + itemValue(item.name + '_rgb') + ')'}"></div><div class="hueSelect" ng-init="showHueSelect = false" ng-show="showHueSelect"><div class="hueSelectItem"></div><div class="hueSelectOptions"><a href="" ng-click="sendCmd(item.name, itemValue('SceneOffColor'))"><svg viewBox="0 0 48 48" style="stroke: white; stroke-width: 3px;"><use xlink:href="/static/matrix-theme/matrixicons.svg#cross-line"></use></svg></a><a href="" ng-click="sendCmd(item.name, color.hsb)" ng-repeat="color in hueColors" ng-style="{ 'background': color.hex }"></a><a href="" ng-click="sendCmd(item.name, itemValue('SceneColor'))"><svg viewBox="0 0 48 48" style="stroke: white; stroke-width: 3px;"><use xlink:href="/static/matrix-theme/matrixicons.svg#on"></use></svg></a>
            <div ng-init="slider = { value: itemValue(item.name).split(',')[2], options: { floor: 0, ceil: 100, step: 1, showSelectionBar: true } };"></div>
            <rzslider rz-slider-model="slider.value" rz-slider-options="slider.options" ng-click="sendCmd(item.name, slider.value)"></rzslider>
            <div ng-init='cpicker = {
                  "name": item.name,
                  "item": itemValue(item.name + '_rgb'),
                  "style": "aCKolor"
                  };slider = {
                  "name": "item.name",
                  "item": itemValue(item.name),
                  "value": itemValue(item.name).split(',')[2],
                  "floor": 0,
                  "ceil": 100,
                  "step": 1,
                  "unit": "",
                  "vertical": false
                  };switch = {
                  "name": "item.name",
                  "item": itemValue(item.name),
                  "hidelabel": true,
                  "hideicon": false,
                  "hideonoff": true
                  }'>
              <style>
                .cl-switch .switch {
                position: absolute;
                top: 0;
                width: 100%;
                }
              </style>
              <widget-colorpicker ng-model="cpicker"></widget-colorpicker>
              <widget-slider ng-model="cslider.value" ng-click="sendCmd(item.name, cslider.value)"></widget-slider>
            </div> 
            </div>
            </div> {{item.label }}</div>
        </div>
      </div>
    </div>
  </div>

(Andrew Pawelski) #444

Answered my own question - yes you can proxy switches for each dimmer allows you to have the one ng filter


(Kris K) #445

Has anyone incorporated custom icons into the matrixicons pack?

My receiver has a Tidal input, wouldnt mind gettnig this icon in.

https://worldvectorlogo.com/logo/tidal

I tried editing it like the other icons pasting the content into the matrixicons.svg but I couldnt get it to load. Any thoughts?


(Jonas) #446

Hi!

for a few days now i have a problem with the lights.
The Colorpicker that should only appear when touching a color-light is active when opening the page for the first time but does not respond to any button pressed.
Only after changing the page to something else and going back to the original one the colorpicker is deactivated and works as expected (when pressing the color-light).

Do you have any idea what could go wrong here?


(Normen) #447

Hallo and thank you for this great theme :slight_smile:
I have a few problems and I really dont get it. Im using this code:

<div class="section" ng-init="hueColors = [ { hsb: '0,0,100', hex: '#fff' }, { hsb: '74,78,100', hex: '#fecc2f' }, { hsb: '46,100,100', hex: '#f9a228' }, { hsb: '26,100,100', hex: '#f6621f' }, { hsb: '0,100,100', hex: '#db3838' }, { hsb: '273,100,100', hex: '#a363d9' }, { hsb: '201,100,100', hex: '#40a4d8' }, { hsb: '177,100,100', hex: '#33beb8' }, { hsb: '140,100,100', hex: '#b2c225' } ]">
	<div class="sectionIconContainer"><div class="sectionIcon"><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/symbol-defs.svg#icon-lampe"></use></svg></div></div>
  <div class="title"><div class="name">Lamps</div></div>
  <div class="controls">

  <div ng-repeat="item in itemsInGroup('Group_Lights_color_All').concat(itemsInGroup('gLicht')) | filter:query as filtered">
    
   <div class="widget" ng-if="((item.type=='Dimmer' && (itemValue(item.name)=='0' || itemValue(item.name)=='OFF')) || (item.type=='Group' && (itemValue(item.name)=='OFF' || itemValue(item.name)=='NULL'))) && itemValue(item.name + '_color')=='N/A'" ng-click="sendCmd(item.name, 'ON')">
        <div class="icon off" ><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/matrixicons.svg#off"></use></svg></div>
        <div class="name" ng-click="showHueSelect = !showHueSelect">
          <div class="hue" ng-style="{'background': 'rgb(' + itemValue(item.name + '_color') + ')'}"></div>
          <div class="hueSelect" ng-init="showHueSelect = false" ng-show="showHueSelect"><div class="hueSelectItem"></div>
            <div class="hueSelectOptions">
              <!-- Brightness slider bar -->
              <div ng-init="slider = { value: 0, options: { floor: 0, ceil: 100, step: 1, showSelectionBar: true } };"></div>
              <rzslider rz-slider-model="slider.value" rz-slider-options="slider.options" ng-click="sendCmd(item.name, slider.value)"></rzslider>
            </div>
          </div>
	        <div class="name">{{item.label}}</div>
        </div>
      </div>

      <div class="widget" ng-if="((item.type=='Dimmer' && itemValue(item.name)>'0') || (item.type=='Group' && itemValue(item.name)=='ON')) && itemValue(item.name + '_color')=='N/A'" ng-click="sendCmd(item.name, 'OFF')">
        <div class="icon on" ><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/matrixicons.svg#on"></use></svg></div>
        <div class="name" ng-click="showHueSelect = !showHueSelect">
          <div class="hue" ng-style="{'background': 'rgb(' + itemValue(item.name + '_color') + ')'}"></div>
          <div class="hueSelect" ng-init="showHueSelect = false" ng-show="showHueSelect"><div class="hueSelectItem"></div>
            <div class="hueSelectOptions">
              <!-- Brightness slider bar -->
              <div ng-init="slider = { value: 0, options: { floor: 0, ceil: 100, step: 1, showSelectionBar: true } };"></div>
              <rzslider rz-slider-model="slider.value" rz-slider-options="slider.options" ng-click="sendCmd(item.name, slider.value)"></rzslider>
            </div>
          </div>
	        <div class="name">{{item.label}}</div>
        </div>
      </div>    

    

    
  </div>
</div>

First, I dont get any slider to appear. Its just a normal button who switch the lamps on or off
Second, I dont get any name to display. There are only 3 dots (I have 3 lights in this group).

Can anyone help me with this?

Greetings


(Vítor ângelo) #448

Hi im noob i have a simple question:
In widget home we got

{{itemValue(‘Netatmo_Outdoor_Temperature’) | number:1}}

for temperature value. I have a sensor for temp in zwave:device:2504c90d:node2:sensor_temperature. how can i add this?