Matrix Theme for HABPanel

skin
theme
stylesheet
Tags: #<Tag:0x00007f21294cc358> #<Tag:0x00007f21294cc038> #<Tag:0x00007f21294cd190>

(Patrick) #470

Wow, this is great! Love it! :slight_smile:


(Herbert) #471

Very nice! Would you mind sharing your config? What kind of tablet do you use?

Regards,
Herbert


(Daniel N.) #472

Thank you, what you need? Widgets only?

I use a Amazon Fire 10" Tab mounted with a selfmade Frame, connected via a charger with a Sonoff Basic and “Tasker”-App send the state of battery via Mqtt to Openhab:



(Christian) #474

Hi Daniel. Widgets and CSS would be great. Thank you!


(Herbert) #477

Hi Daniel!

as written by Christian Widgets and CSS would be cool.

Regards,
Herbert


(shutch) #478

Hi everyone,

I am just working on a custom theme and noted in the HABPanel Development thread that there was access to the Bootstrap Grid, but that doesn’t seem to be the case?

Bootstrap classes don’t seem to have any impact, such as rows or columns or classes like btn, btn-primary, etc. Is that the case or am I missing something?

Thanks everyone


(Kris K) #479

Hi Guys trying to create my own SVG icons and merge them into the matrix icon pack

I have this icon with the contents below:


<symbol id="ps4">
                <path d="M287.785,575.568c158.686,0,287.78-129.102,287.78-287.788C575.564,129.095,446.471,0,287.785,0
                        C129.099,0,0.004,129.095,0.004,287.787C0.004,446.479,129.099,575.568,287.785,575.568z M287.785,30.6
                        c141.813,0,257.18,115.374,257.18,257.187c0,141.813-115.367,257.18-257.18,257.18c-141.812,0-257.181-115.373-257.181-257.18
                        C30.604,145.98,145.972,30.6,287.785,30.6z"/>
                <path d="M234.749,320.002c0.055,37.148,0.092,74.303,0.11,111.451c0,0.961,0.294,1.371,1.2,1.678
                        c22.968,7.863,45.924,15.76,68.887,23.648c0.35,0.121,0.709,0.207,1.254,0.367c0-0.607,0-1.023,0-1.439
                        c0.02-20.391,0.043-40.777,0.062-61.168c0.066-64.684,0.127-129.359,0.195-194.042c0.006-8.403,0.006-16.8,0.043-25.202
                        c0.012-2.999,0.471-5.931,1.738-8.685c2.197-4.768,6.627-6.928,11.762-5.894c8.256,1.665,16.225,10.263,16.188,19.921
                        c-0.158,38.751-0.066,77.51-0.061,116.262c0,1.438-0.422,3.207,0.25,4.229c0.68,1.027,2.467,1.352,3.801,1.908
                        c9.094,3.807,18.434,6.654,28.379,7.014c15.33,0.551,27.559-5.238,36.328-17.949c4.762-6.903,7.693-14.615,9.756-22.681
                        c2.184-8.574,3.262-17.301,3.758-26.12c0.6-10.71,0.367-21.365-1.695-31.928c-2.926-15.006-9.088-28.488-18.893-40.263
                        c-8.795-10.557-19.529-18.709-31.463-25.368c-12.521-6.983-25.809-12.105-39.572-15.985c-30.447-8.58-60.931-17.038-91.402-25.545
                        c-0.282-0.08-0.582-0.123-0.992-0.208c0,0.71,0,1.31,0,1.916c0.049,21.151,0.11,42.301,0.141,63.458
                        C234.608,219.585,234.682,269.794,234.749,320.002z"/>
                <path d="M382.762,322.438c-11.004,1.188-21.922,2.969-32.707,5.473c-9.699,2.252-19.283,4.889-28.445,8.879
                        c-0.838,0.361-1.082,0.803-1.082,1.695c0.029,13.898,0.018,27.797,0.018,41.695c0,0.41,0,0.82,0,1.445
                        c0.631-0.215,1.021-0.336,1.408-0.484c25.342-9.252,50.551-18.898,76.438-26.604c3.723-1.107,7.357-2.674,11.152-3.365
                        c8.689-1.578,17.484-2.258,26.328-1.279c3.457,0.379,6.885,0.979,9.98,2.705c3.648,2.031,4.064,4.885,1.188,7.906
                        c-0.605,0.631-1.254,1.256-1.982,1.727c-1.592,1.047-3.152,2.223-4.891,2.938c-4.785,1.971-9.633,3.795-14.492,5.576
                        c-34.676,12.711-69.357,25.398-104.045,38.072c-0.791,0.287-1.109,0.637-1.109,1.529c0.008,13.477-0.029,26.953-0.061,40.436
                        c0,0.434,0,0.875,0,1.42c0.605-0.195,1.041-0.324,1.469-0.479c46.01-16.555,92.027-33.084,138.02-49.688
                        c9.24-3.336,18.463-6.775,27.539-10.539c7.062-2.932,13.635-6.854,19.432-11.922c3.127-2.734,5.893-5.783,7.539-9.67
                        c0.973-2.301,1.635-4.676,0.998-7.232c-0.803-3.219-2.143-6.193-4.027-8.912c-4.008-5.789-9.498-9.865-15.545-13.256
                        c-8.715-4.877-18.09-8.059-27.705-10.568c-16.139-4.211-32.576-6.629-49.168-8.061
                        C406.904,320.834,394.824,321.141,382.762,322.438z"/>
                <path d="M144.007,415.621c8.69,1.574,17.417,2.65,26.261,2.73c12.485,0.115,24.841-1.164,37.111-3.354
                        c3.746-0.668,7.485-1.402,11.261-2.111c0-13.018,0-25.9,0-38.9c-0.435,0.141-0.784,0.246-1.132,0.381
                        c-2.136,0.807-4.272,1.639-6.414,2.436c-12.393,4.607-24.743,9.332-37.466,13.004c-2.075,0.6-4.223,1.158-6.365,1.273
                        c-3.611,0.203-7.252,0.086-10.875,0.006c-4.309-0.092-8.629-0.121-12.913-0.488c-3.06-0.264-5.973-1.305-8.33-3.428
                        c-2.429-2.186-2.576-4.908-0.092-7.008c1.598-1.346,3.513-2.479,5.465-3.219c26.065-9.934,52.161-19.793,78.263-29.633
                        c0.863-0.324,1.114-0.734,1.114-1.641c-0.031-13.514-0.012-27.025-0.012-40.545c0-0.41,0-0.82,0-1.297
                        c-0.294,0.043-0.49,0.043-0.661,0.104c-3.556,1.15-7.136,2.215-10.649,3.471c-27.197,9.725-54.364,19.535-81.58,29.223
                        c-13.574,4.828-27.136,9.688-40,16.248c-5.074,2.588-10.092,5.244-14.382,9.07c-4.29,3.83-7.124,8.428-7.362,14.346
                        c-0.226,5.697,2.075,10.379,5.912,14.4c3.47,3.635,7.668,6.26,12.118,8.5c8.391,4.229,17.313,6.965,26.359,9.32
                        C120.972,411.459,132.49,413.535,144.007,415.621z"/>
</symbol>

but it wont load. What am i doing wrong? thanks

(Unparagoned) #480

This seems to work, so your shape looks fine. Now I’m not too hot on merging it with the rest.

<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">

  <symbol id="ps4" viewBox="214.7 0 182.6 792">
    <path d="M287.785,575.568c158.686,0,287.78-129.102,287.78-287.788C575.564,129.095,446.471,0,287.785,0
             C129.099,0,0.004,129.095,0.004,287.787C0.004,446.479,129.099,575.568,287.785,575.568z M287.785,30.6
             c141.813,0,257.18,115.374,257.18,257.187c0,141.813-115.367,257.18-257.18,257.18c-141.812,0-257.181-115.373-257.181-257.18
             C30.604,145.98,145.972,30.6,287.785,30.6z"/>
    <path d="M234.749,320.002c0.055,37.148,0.092,74.303,0.11,111.451c0,0.961,0.294,1.371,1.2,1.678
             c22.968,7.863,45.924,15.76,68.887,23.648c0.35,0.121,0.709,0.207,1.254,0.367c0-0.607,0-1.023,0-1.439
             c0.02-20.391,0.043-40.777,0.062-61.168c0.066-64.684,0.127-129.359,0.195-194.042c0.006-8.403,0.006-16.8,0.043-25.202
             c0.012-2.999,0.471-5.931,1.738-8.685c2.197-4.768,6.627-6.928,11.762-5.894c8.256,1.665,16.225,10.263,16.188,19.921
             c-0.158,38.751-0.066,77.51-0.061,116.262c0,1.438-0.422,3.207,0.25,4.229c0.68,1.027,2.467,1.352,3.801,1.908
             c9.094,3.807,18.434,6.654,28.379,7.014c15.33,0.551,27.559-5.238,36.328-17.949c4.762-6.903,7.693-14.615,9.756-22.681
             c2.184-8.574,3.262-17.301,3.758-26.12c0.6-10.71,0.367-21.365-1.695-31.928c-2.926-15.006-9.088-28.488-18.893-40.263
             c-8.795-10.557-19.529-18.709-31.463-25.368c-12.521-6.983-25.809-12.105-39.572-15.985c-30.447-8.58-60.931-17.038-91.402-25.545
             c-0.282-0.08-0.582-0.123-0.992-0.208c0,0.71,0,1.31,0,1.916c0.049,21.151,0.11,42.301,0.141,63.458
             C234.608,219.585,234.682,269.794,234.749,320.002z"/>
    <path d="M382.762,322.438c-11.004,1.188-21.922,2.969-32.707,5.473c-9.699,2.252-19.283,4.889-28.445,8.879
             c-0.838,0.361-1.082,0.803-1.082,1.695c0.029,13.898,0.018,27.797,0.018,41.695c0,0.41,0,0.82,0,1.445
             c0.631-0.215,1.021-0.336,1.408-0.484c25.342-9.252,50.551-18.898,76.438-26.604c3.723-1.107,7.357-2.674,11.152-3.365
             c8.689-1.578,17.484-2.258,26.328-1.279c3.457,0.379,6.885,0.979,9.98,2.705c3.648,2.031,4.064,4.885,1.188,7.906
             c-0.605,0.631-1.254,1.256-1.982,1.727c-1.592,1.047-3.152,2.223-4.891,2.938c-4.785,1.971-9.633,3.795-14.492,5.576
             c-34.676,12.711-69.357,25.398-104.045,38.072c-0.791,0.287-1.109,0.637-1.109,1.529c0.008,13.477-0.029,26.953-0.061,40.436
             c0,0.434,0,0.875,0,1.42c0.605-0.195,1.041-0.324,1.469-0.479c46.01-16.555,92.027-33.084,138.02-49.688
             c9.24-3.336,18.463-6.775,27.539-10.539c7.062-2.932,13.635-6.854,19.432-11.922c3.127-2.734,5.893-5.783,7.539-9.67
             c0.973-2.301,1.635-4.676,0.998-7.232c-0.803-3.219-2.143-6.193-4.027-8.912c-4.008-5.789-9.498-9.865-15.545-13.256
             c-8.715-4.877-18.09-8.059-27.705-10.568c-16.139-4.211-32.576-6.629-49.168-8.061
             C406.904,320.834,394.824,321.141,382.762,322.438z"/>
    <path d="M144.007,415.621c8.69,1.574,17.417,2.65,26.261,2.73c12.485,0.115,24.841-1.164,37.111-3.354
             c3.746-0.668,7.485-1.402,11.261-2.111c0-13.018,0-25.9,0-38.9c-0.435,0.141-0.784,0.246-1.132,0.381
             c-2.136,0.807-4.272,1.639-6.414,2.436c-12.393,4.607-24.743,9.332-37.466,13.004c-2.075,0.6-4.223,1.158-6.365,1.273
             c-3.611,0.203-7.252,0.086-10.875,0.006c-4.309-0.092-8.629-0.121-12.913-0.488c-3.06-0.264-5.973-1.305-8.33-3.428
             c-2.429-2.186-2.576-4.908-0.092-7.008c1.598-1.346,3.513-2.479,5.465-3.219c26.065-9.934,52.161-19.793,78.263-29.633
             c0.863-0.324,1.114-0.734,1.114-1.641c-0.031-13.514-0.012-27.025-0.012-40.545c0-0.41,0-0.82,0-1.297
             c-0.294,0.043-0.49,0.043-0.661,0.104c-3.556,1.15-7.136,2.215-10.649,3.471c-27.197,9.725-54.364,19.535-81.58,29.223
             c-13.574,4.828-27.136,9.688-40,16.248c-5.074,2.588-10.092,5.244-14.382,9.07c-4.29,3.83-7.124,8.428-7.362,14.346
             c-0.226,5.697,2.075,10.379,5.912,14.4c3.47,3.635,7.668,6.26,12.118,8.5c8.391,4.229,17.313,6.965,26.359,9.32
             C120.972,411.459,132.49,413.535,144.007,415.621z"/>
  </symbol>
</svg>

<svg class="icon"><use xlink:href="#ps4" /></svg>



(Kris K) #481

I need to work out how to merge it into Appicons.svg


(Kristof Rado) #482

Anyone found a similar icon pack which is free or cheaper? I don’t really know that this template will be good or not for my setup, so I don’t want to waste money on it, if it is not looking good


(Kris K) #483

Im struggling to troubleshoot why custom icons dont work, any thoughts as to where to look? confused as to why they dnt work!


(Kotik) #484

So i sat down to edit this theme and adjust it to my needs, till now everything is going fine tho i got a couple of issue.

I am trying to create a drop-down button in order to control my Heat Pump (having 7 buttons for the Vane settings only was not an option, the UI would get way too crowded with buttons).

Till now this is how my code is looking (it relies on the matrix.css + some additions):

<div class="widget" ng-class="{true: 'disabled'}[itemValue('Mitsubishi_Power')=='OFF']">
  <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="name">Vane</div>
  <div class="sceneGroup" dropdown-append-to-body="true" uib-dropdown>    
  <div class="dropdown" uib-dropdown-toggle>
      {{itemValue('Mitsubishi_Vane')}} 
    <ul class="dropdown-list" uib-dropdown-menu role="menu" style="list-style: none; min-width: 133px; margin:0px; padding: 0px;" aria-labelledby="single-button">
        <li><a style="color: {{itemValue('Mitsubishi_Vane')=='AUTO' ? '#26bf75' : '#565f58'}}; border: 1px solid #565f58; border-radius: 5px; padding: 6px 6px 6px 6px; text-align: center; margin-bottom: 8px; width: 133px; margin-left: 0px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block;" ng-click="sendCmd('Mitsubishi_Vane', 'AUTO')">♻</a></li>
        <li><a style="color: {{itemValue('Mitsubishi_Vane')=='1' ? '#26bf75' : '#565f58'}}; border: 1px solid #565f58; border-radius: 5px; padding: 6px 6px 6px 6px; text-align: center; margin-bottom: 8px; width: 133px; margin-left: 0px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block;" ng-click="sendCmd('Mitsubishi_Vane', '1')">⭱</a></li>
        <li><a style="color: {{itemValue('Mitsubishi_Vane')=='2' ? '#26bf75' : '#565f58'}}; border: 1px solid #565f58; border-radius: 5px; padding: 6px 6px 6px 6px; text-align: center; margin-bottom: 8px; width: 133px; margin-left: 0px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block;" ng-click="sendCmd('Mitsubishi_Vane', '2')">⭷</a></li>
        <li><a style="color: {{itemValue('Mitsubishi_Vane')=='3' ? '#26bf75' : '#565f58'}}; border: 1px solid #565f58; border-radius: 5px; padding: 6px 6px 6px 6px; text-align: center; margin-bottom: 8px; width: 133px; margin-left: 0px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block;" ng-click="sendCmd('Mitsubishi_Vane', '3')">⭲</a></li>
        <li><a style="color: {{itemValue('Mitsubishi_Vane')=='4' ? '#26bf75' : '#565f58'}}; border: 1px solid #565f58; border-radius: 5px; padding: 6px 6px 6px 6px; text-align: center; margin-bottom: 8px; width: 133px; margin-left: 0px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block;" ng-click="sendCmd('Mitsubishi_Vane', '4')">⭸</a></li>
        <li><a style="color: {{itemValue('Mitsubishi_Vane')=='5' ? '#26bf75' : '#565f58'}}; border: 1px solid #565f58; border-radius: 5px; padding: 6px 6px 6px 6px; text-align: center; margin-bottom: 8px; width: 133px; margin-left: 0px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block;" ng-click="sendCmd('Mitsubishi_Vane', '5')">⭳</a></li>
        <li><a style="color: {{itemValue('Mitsubishi_Vane')=='SWING' ? '#26bf75' : '#565f58'}}; border: 1px solid #565f58; border-radius: 5px; padding: 6px 6px 6px 6px; text-align: center; margin-bottom: 8px; width: 133px; margin-left: 0px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block;" ng-click="sendCmd('Mitsubishi_Vane', 'SWING')">⭿</a></li>
    </ul>
  </div>   
  </div>
</div>

and the .css additions:

/* For dropdown: */
.dropdown-list {
background: transparent;
}
.section .widget .sceneGroup .dropdown {
border: 1px solid #565f58;
border-radius: 5px;
padding: 6px 6px 6px 6px;
text-align: center;
margin-bottom: 8px;
width: 133px;
float: right;
margin-left: 0px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

So the issues:

  1. I am unable to style the “ul” or “li” classes over .css, the only way to style those 2 elements is by using .ul or .li without being strict and as a result the whole habpanel is forced to use this style which is an issue, so i have to style them over .html which is something i would like to avoid.

  2. Although the drop-down button is working fine it is not sticking to the parent button, in other words when i click on it everything is fine and the list shows up but if i scroll down or up then the list is detaching itself from the parent button and moves along with the scrolling.

Can someone provide some ideas?

Thanx in advance

P.S. The code is a mess as i have no experience with Angular nor html.


(Ludwig Hurt) #485

Hi Patrick,
this is amazing I’d be interested in the whole stuff. It pretty much is that what I also intended to do.

Would be really appreciated.

Thanks


(Kris K) #486

Hi guys ive managed to modify the css theme a little ro allow the menu bar to have scenes and dashboard links. It works nice on my tablet and pc but terrible on my mobile.

Can someone suggest a fix please. I assume under css for mobile i need a new section?

Cheers


(Daniel N.) #488

One new Widget for a Vacuum cleaner robot :slight_smile:


(Kim) #489

Hi Daniel,

I’m just getting started with Openhab and love Patrick’s theme and your modifications. I am building my house and Its way beyond my capabilities to implement this functionality- would you be willing to help me configure a Raspberry remotely? I’ll ask Patrick also.
I would of course pay you for your time. That seems to be a more practical way then me spending the next 6 months learning this :-). I am not sure if there is a way to PM on this board, at least I didn’t find that option. Thank you!


(Daniel N.) #490

Hi Kim,

Sorry, I do not really have the time, but if you have any questions, I am happy to help.

If anybody still want an update of my widget for Xiaomi RoboRock, just PN,


(Gracjan) #491

Hello!
U have pretty Panel HAB.
Can u share your theme and conf? I will be thankful! I`m from Poland.
I sended to u priv.
I try do it :slight_smile:


(JP) #492

Love your panel too, i would just change green to blue/white :wink:
Would you share your files?


(Gracjan) #493

I have a problem with Vacuum widget for this theme.
I don`t know what items musy be for control vacuum from HabPanel.
Who can help me?
Paste here example code for widget, items etc…
Thanks :slight_smile: