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:
5 Likes
Hi Daniel. Widgets and CSS would be great. Thank you!
Hi Daniel!
as written by Christian Widgets and CSS would be cool.
Regards,
Herbert
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
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
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>
I need to work out how to merge it into Appicons.svg
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
Im struggling to troubleshoot why custom icons dont work, any thoughts as to where to look? confused as to why they dnt work!
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:
-
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.
-
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.
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
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
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!
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,
4 Likes
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 
Love your panel too, i would just change green to blue/white 
Would you share your files?
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
Hej Gracjan,
Second Post here:
Send me a pm with your email address i can send yout my Widgets.
3 Likes