aletor
(Alexandre)
September 8, 2017, 1:24pm
213
Hi,
This is what I’m actually doing, based on pmpkk work (this code concern only white bulbs) :
<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'">
<div class="icon off" ng-click="sendCmd(item.name, 'ON')"><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>
{{item.label}}
</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'">
<div class="icon on" ng-click="sendCmd(item.name, 'OFF')"><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">
<div ng-init='model={"item": item.name, "floor": 0, "ceil": 100, "step":1}'>
<widget-slider ng-model="model" />
</div>
</div>
</div>
{{item.label}} (Debug : value : {{itemValue(item.name)}})
</div>
</div>
I don’t have issue when the light is in “OFF” state. Only when a light switch from “OFF” to “ON”.
1 Like
aletor
(Alexandre)
September 8, 2017, 2:45pm
214
I managed to make a digipad :
I have to fix the last line using offsets in order to allow a “0” centered without anything else. Here is the code :
<div class="widget" ng-class="{true: 'disabled'}[itemValue('YamahaReceiverRXV477_InputSource')!='HDMI1' || itemValue('gTeleAmp')=='OFF']">
<div class="icon off"><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/squidink.svg#flat-tv"></use></svg></div>
<div class="name">Channel</div>
<div class="controlGroup">
<div class="row">
<div class="col-md-12">
<div class="control" ng-click="sendCmd('LG_TV0_ChannelUp', 'ON')">1</div>
<div class="control" ng-click="sendCmd('LG_TV0_ChannelUp', 'ON')">2</div>
<div class="control" ng-click="sendCmd('LG_TV0_ChannelUp', 'ON')">3</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="control" ng-click="sendCmd('LG_TV0_ChannelUp', 'ON')">4</div>
<div class="control" ng-click="sendCmd('LG_TV0_ChannelUp', 'ON')">5</div>
<div class="control" ng-click="sendCmd('LG_TV0_ChannelUp', 'ON')">6</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="control" ng-click="sendCmd('LG_TV0_ChannelUp', 'ON')">7</div>
<div class="control" ng-click="sendCmd('LG_TV0_ChannelUp', 'ON')">8</div>
<div class="control" ng-click="sendCmd('LG_TV0_ChannelUp', 'ON')">9</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="control" ng-click="sendCmd('LG_TV0_ChannelUp', 'ON')"><svg viewBox="0 0 80 80"><use xlink:href="/static/matrix-theme/squidink.svg#top-arrow-2"></use></svg></div>
<div class="control" ng-click="sendCmd('LG_TV0_ChannelUp', 'ON')">0</div>
<div class="control" ng-click="sendCmd('LG_TV0_ChannelDown', 'ON')"><svg viewBox="0 0 80 80"><use xlink:href="/static/matrix-theme/squidink.svg#down-arrow-2"></use></svg></div>
</div>
</div>
</div>
</div>
4 Likes
pmpkk
(Patrick)
September 8, 2017, 3:34pm
215
this looks cool!
All the buttons are wired up to “channel up”, so I don’t understand how it works …
aletor
(Alexandre)
September 8, 2017, 3:45pm
216
It was just a test code, I didn’t implemented function behind yet.
Nice one, I Will take this idea
ysc
(Yannick Schaus)
September 12, 2017, 4:17pm
218
FYI - this could be interesting for you extreme customizers
Hi all,
Just notifying you I just added some options to further customize your HABPanel side drawer and dashboard headers - two of the remaining places where customization was not easily possible:
[image]
And for those of you who like to play with this stuff, you are now able to customize those per dashboard with custom widgets - meaning you can put whatever you want in those places (within reason)
There was already an ability to customize the dashboard tile in the main menu this way…
Hi
@pmpkk @ysc thanks for all your help and examples.
Here are some screenshots of my panel. There are still some work to be done. I just bought a NetAtmo Weather station and a WelcomeHome Camera that needs to be implemented
I need to tweak the thermostat control, it looks terrible right now. I needed it up fast since I have this installation at my summerhouse and need to turn on the heating remote when I plan to go there (Getting cold in Sweden)
23 Likes
Are those icons in the top right buttons to other panels?
Could you share the code for these either way
@Andrew_Pawelski
Yes I use them to navigate, create a custom String-item to save the navigation
The first section is the clock (NTP), and 3 group items to show number of lights, windows, doors open.and then the navigation.
You can remove the “?kiosk” if you don’t want it to run in full-screen.
<div class="section">
<div class="controls">
<div class="widgetMenu">
<div class="col1">
<div class="name">System</div>
</div>
<div class="col2">
<div class="icon off"><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/squidink.svg#round-clock"></use></svg></div>
<div class="name">{{itemValue('NTPServer_Date') | date:'HH:mm'}}</div>
</div>
</div>
<div class="widgetMenu2">
<div class="col2">
<div class="icon off"><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/squidink.svg#light_bulb"></use></svg></div>
<div class="name">{{itemValue('gLandetLightON')}} / 6</div>
</div>
<div class="col2">
<div class="icon off"><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/squidink.svg#window"></use></svg></div>
<div class="name">{{itemValue('gLandetWindowOpen')}} / 4</div>
</div>
<div class="col2">
<div class="icon off"><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/squidink.svg#door-2"></use></svg></div>
<div class="name">{{itemValue('gLandetDoorOpen')}} / 5</div>
</div>
</div>
<div class="widget.wide">
<div class="controlGroup">
<div class="control" ng-class="{true: 'on'}[itemValue('MENU_page')=='P-System?kiosk=on']" ng-click="sendCmd('MENU_page', 'P-System?kiosk=on')"><svg viewBox="0 0 80 80"><use xlink:href="/static/matrix-theme/squidink.svg#drive"></use></svg></div>
<div class="control" ng-class="{true: 'on'}[itemValue('MENU_page')=='P-Calendar?kiosk=on']" ng-click="sendCmd('MENU_page', 'P-Calendar?kiosk=on')"><svg viewBox="0 0 80 80"><use xlink:href="/static/matrix-theme/squidink.svg#calendar"></use></svg></div>
<div class="control" ng-class="{true: 'on'}[itemValue('MENU_page')=='P-Wifi?kiosk=on']" ng-click="sendCmd('MENU_page', 'P-Wifi?kiosk=on')"><svg viewBox="0 0 80 80"><use xlink:href="/static/matrix-theme/squidink.svg#home-adaptor"></use></svg></div>
<div class="control" ng-class="{true: 'on'}[itemValue('MENU_page')=='P-Music?kiosk=on']" ng-click="sendCmd('MENU_page', 'P-Music?kiosk=on')"><svg viewBox="0 0 80 80"><use xlink:href="/static/matrix-theme/squidink.svg#sound2"></use></svg></div>
<div class="control" ng-class="{true: 'on'}[itemValue('MENU_page')=='P-HomeControl?kiosk=on']" ng-click="sendCmd('MENU_page', 'P-HomeControl?kiosk=on')"><svg viewBox="0 0 80 80"><use xlink:href="/static/matrix-theme/squidink.svg#home-2"></use></svg></div>
<div class="control" ng-class="{true: 'on'}[itemValue('MENU_page')=='P-ESP?kiosk=on']" ng-click="sendCmd('MENU_page', 'P-ESP?kiosk=on')"><svg viewBox="0 0 80 80"><use xlink:href="/static/matrix-theme/squidink.svg#thermometer-3"></use></svg></div>
<div class="control" ng-class="{true: 'on'}[itemValue('MENU_page')=='P-Weather?kiosk=on']" ng-click="sendCmd('MENU_page', 'P-Weather?kiosk=on')"><svg viewBox="0 0 80 80"><use xlink:href="/static/matrix-theme/squidink.svg#sunset"></use></svg></div>
</div>
</div>
</div>
</div>
4 Likes
I understand how to change dashboards, more interested in the layout and where it is.
is that different to how @ysc has done it here?
New display options (incl. experimental custom widgets everywhere!)
@Andrew_Pawelski
Ysc made a nice implementation.
I have used the layout from Patrick’s css in this tread. It uses the 3-big dash layouts (3col/1row) on the tablet/pc-screen and 1 col/3rows on a smaller screen.
I will give Ysc’s a try when I’m back at the office in a couple of weeks.
I have been playing and can now see you have used kiosk to “replace” the top dash title. @ysc ’s is good but I think how you have done it is better as you can keep the title od the dash there and control the layout better
@Andrew_Pawelski
I use this approach since it don’t take to much of the screen space.
My main control is a wall-mounted 10.1" Android tablet.
Have a look at this Android application.
This small Android application will wake up the HABPanel on a Tablet. It uses the front camera for motion detection.
You can also do MQTT integration to look at some values like batery etc. I haven’t been able to broadcast the camera just yet but it’s supposed to work
1 Like
how did you get your 1 row so thin?
I have attached the CSS, please be kind since I have no skills on CSS what so ever, but you can take the sections you are intressted in and just copy them out to your own layot.
I intend to clean them up at the end of the project. (read 3-6months from now )
matrix-theme.css (32.9 KB)
2 Likes
CSS - me either!
this is a lot more extensive than the matrix-theme.css I have - is this heavily modded by yourself or do I have an old css file?
I’m struggling with the simple stuff - I have copied your styling but seems my right buttons want to be below the text - see this for example:
Foxejoe
(Lorenzo Giordano)
September 19, 2017, 10:59am
230
Andrew, it seems it is not defined a “display:inline” style for the icon.
Working with already build in CSS it is very difficult to me if you need changes because you don’t easy understand how classes are mixed together in CSS and how changes can affect other templates.
I always prefer to keep existing classes just for reference and create complete new classes for the change.
Have a good luck.
Regards
Lorenzo
tailor
(Christian)
September 19, 2017, 12:34pm
231
Hi Michael
Very nice looking dashboards. Could you please share the code for weather, room and sensors sites? Thank you very much.
1 Like
pmpkk
(Patrick)
September 22, 2017, 7:02am
232
Hi Michael,
This looks amazing!! Your dashboards are super cool and complete!
Cheers,
P