Matrix Theme for HABPanel

aletor · September 8, 2017, 1:24pm

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”.

aletor · September 8, 2017, 2:45pm

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>

pmpkk · September 8, 2017, 3:34pm

this looks cool!

All the buttons are wired up to “channel up”, so I don’t understand how it works …

aletor · September 8, 2017, 3:45pm

It was just a test code, I didn’t implemented function behind yet.

Michael_Stjerna · September 9, 2017, 12:14pm

Nice one, I Will take this idea

ysc · September 12, 2017, 4:17pm

FYI - this could be interesting for you extreme customizers

Michael_Stjerna · September 16, 2017, 5:44am

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)

Andrew_Pawelski · September 17, 2017, 2:39am

Are those icons in the top right buttons to other panels?
Could you share the code for these either way

Michael_Stjerna · September 17, 2017, 8:40am

@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>

Andrew_Pawelski · September 17, 2017, 11:32am

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!)

Michael_Stjerna · September 17, 2017, 2:30pm

@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.

Andrew_Pawelski · September 17, 2017, 2:44pm

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

Michael_Stjerna · September 17, 2017, 2:50pm

@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

Andrew_Pawelski · September 17, 2017, 2:52pm

how did you get your 1 row so thin?

Michael_Stjerna · September 17, 2017, 2:58pm

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)

Andrew_Pawelski · September 17, 2017, 3:02pm

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?

Andrew_Pawelski · September 17, 2017, 3:05pm

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 · September 19, 2017, 10:59am

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 · September 19, 2017, 12:34pm

Hi Michael
Very nice looking dashboards. Could you please share the code for weather, room and sensors sites? Thank you very much.

pmpkk · September 22, 2017, 7:02am

Hi Michael,

This looks amazing!! Your dashboards are super cool and complete!

Cheers,
P