Matrix Theme for HABPanel

tinkernut · May 20, 2019, 12:43am

Sure I didnt update all of the items since it wasnt working.

<div class="section">
  <div class="title">Menu</div>	
		<div class="widget.wide">
			<div class="controlGroup">
				<div class="control" ng-class="{true: 'on'}[itemValue('MENU_page')=='P-Home Panel?kiosk=on']" ng-click="sendCmd('MENU_page', 'Home Panel?kiosk=on')"><svg viewBox="0 0 80 80"><use xlink:href="/static/matrix-theme/squidink.svg#sim-card"></use></svg></div>
				<div class="control" ng-class="{true: 'on'}[itemValue('MENU_page')=='P-Calendar?kiosk=on']" ng-click="sendCmd('MENU_page', 'P-Ground Control?kiosk=on')"><svg viewBox="0 0 80 80"><use xlink:href="/static/matrix-theme/squidink.svg#drive-3"></use></svg></div>
				<div class="control" ng-class="{true: 'on'}[itemValue('MENU_page')=='P-Outdoor?kiosk=on']" ng-click="sendCmd('MENU_page', 'P-Outdoor?kiosk=on')"><svg viewBox="0 0 80 80"><use xlink:href="/static/matrix-theme/squidink.svg#globe"></use></svg></div>
				<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#processor"></use></svg></div>
				<div class="control" ng-class="{true: 'on'}[itemValue('MENU_page')=='P-Home 2?kiosk=on']" ng-click="sendCmd('MENU_page', 'P-Home 2?kiosk=on')"><svg viewBox="0 0 80 80"><use xlink:href="/static/matrix-theme/squidink.svg#right-play"></use></svg></div>
				<div class="control" ng-class="{true: 'on'}[itemValue('MENU_page')=='P-All Lights Control?kiosk=on']" ng-click="sendCmd('MENU_page', 'P-All Lights Control?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-HTPC Monitor?kiosk=on']" ng-click="sendCmd('MENU_page', 'P-HTPC Monitor?kiosk=on')"><svg viewBox="0 0 80 80"><use xlink:href="/static/matrix-theme/squidink.svg#sun"></use></svg></div>
			</div>		
		</div>

   
	</div>


<div class="section">

  	<div class="bigDash">
    <div class="top">
			<div class="icon on"><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/squidink.svg#thermometer-3"></use></svg></div>
			<div class="value">
				<div class="main">{{itemValue('Netatmo_Indoor_Temperature') | number:1}}</div>
				<div class="sub">&#176f</div>
			</div>
		</div>
		<div class="bottom">
			<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="value">feels like {{itemValue('Outside_Temperature') | number:1}} &#176f</div>
			<div class="icon off"><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/squidink.svg#drop"></use></svg></div>
			<div class="value">{{itemValue('Netatmo_Outdoor_Humidity') | number:0}} %</div>
		</div>
	</div>
  
	<div class="bigDash">
		<div class="top">
			<div class="icon on"><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/squidink.svg#umberla"></use></svg></div>
			<div class="value">
				<div class="main">{{itemValue('Netatmo_Outdoor_Temperature') | number:1}}</div>
				<div class="sub">mm</div>
			</div>
		</div>
		<div class="bottom">
			<div class="icon off"><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/squidink.svg#umberla"></use></svg></div>
			<div class="value">1h: {{itemValue('Netatmo_Outdoor_Temperature') | number:1}} mm</div>
			<div class="icon off"><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/squidink.svg#umberla"></use></svg></div>
			<div class="value">24h: {{itemValue('Netatmo_Rain_24Hours') | number:0}} mm</div>
		</div>
	</div>  

  <div class="bigDash">
		<div class="top">
      <div class="icon on wind"><div style="transform: rotate({{itemValue('Netatmo_Wind_Angle') | number:0}}deg);"><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/squidink.svg#navigate"></use></svg></div></div>
			<div class="value">
				<div class="main">{{itemValue('Netatmo_Wind_Strength') | number:0}}</div>
				<div class="sub">km/h</div>
			</div>
		</div>
		<div class="bottom">
      <div class="icon off wind"><div style="transform: rotate({{itemValue('Netatmo_Wind_Angle') | number:0}}deg);"><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/squidink.svg#navigate"></use></svg></div></div>
			<div class="value">{{itemValue('Netatmo_Wind_Angle') | number:0}} &#176</div>
			<div class="icon off"><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/squidink.svg#wind"></use></svg></div>
			<div class="value">{{itemValue('Netatmo_Gust_Strength') | number:0}} km/h ({{itemValue('Netatmo_Gust_Angle') | number:0}} &#176)</div>
		</div>
	</div>  

</div>




<div class="section">

	<div class="sectionIconContainer"><div class="sectionIcon"><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/squidink.svg#flat-tv"></use></svg></div></div>
	<div class="title">TV</div>
	<div class="controls">
    
     
      
    <div class="widget" ng-if="itemValue('HarmonyHubHarmonyHub_')=='PowerOff'" ng-click="sendCmd('HarmonyHubHarmonyHub_', 'PowerOff')">
      <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">Power On</div>
    </div>

    <div class="widget" ng-if="itemValue('HarmonyHubHarmonyHub_')!='PowerOff'" ng-click="sendCmd('HarmonyHubHarmonyHub_', 'PowerOff')">
      <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">State: {{itemValue('HarmonyHubHarmonyHub_')}}</div>
    </div>

    <div class="widget" ng-if="itemValue('HarmonyHubHarmonyHub_')=='NULL'" ng-click="sendCmd('HarmonyHubHarmonyHub_', 'Watch Netflix')">
      <div class="icon off" ><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/matrixicons.svg#none"></use></svg></div>
      <div class="name">Power</div>
    </div>                

    <div class="widget" ng-class="{true: 'disabled'}[itemValue('HarmonyHubHarmonyHub_')=='PowerOff']">
			<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">Input</div>
			<div class="appLogo" ng-if="itemValue('HarmonyHubHarmonyHub_')=='Watch Netflix'"><svg viewBox="0 0 440 100"><use xlink:href="/static/matrix-theme/AppIcons.svg#netflix"></use></svg></div>        
			<div class="appLogo" ng-if="itemValue('HarmonyHubHarmonyHub_')=='Amazon Video'"><svg viewBox="0 0 440 100"><use xlink:href="/static/matrix-theme/AppIcons.svg#amazon"></use></svg></div>        
			<div class="appLogo" ng-if="itemValue('HarmonyHubHarmonyHub_')=='Youtube'"><svg viewBox="0 0 440 100"><use xlink:href="/static/matrix-theme/AppIcons.svg#youtube"></use></svg></div>        
			<div class="appLogo" ng-if="itemValue('HarmonyHubHarmonyHub_')=='com.webos.app.hdmi1''">PC<svg viewBox="0 0 180 180"><use xlink:href="/static/matrix-theme/squidink.svg#processor"></use></svg></div>        
			<div class="appLogo" ng-if="itemValue('HarmonyHubHarmonyHub_')!='Watch Netflix' && itemValue('HarmonyHubHarmonyHub_')!='Amazon Video' && itemValue('HarmonyHubHarmonyHub_')!='Start kodi' && itemValue('HarmonyHubHarmonyHub_')!=com.webos.app.hdmi1'">{{itemValue('LG_TV0_Application')}} {{itemValue('HarmonyActivity}}</div>        
			<div class="controlGroup">
				<div class="control" ng-class="{true: 'on'}[itemValue('HarmonyHubHarmonyHub_')=='Energy']" ng-click="sendCmd('HarmonyHubHarmonyHub_', 'Energy')"><svg viewBox="0 0 80 80"><use xlink:href="/static/matrix-theme/matrixicons.svg#logoYoutube"></use></svg></div>
				<div class="control" ng-class="{true: 'on'}[itemValue('HarmonyHubHarmonyHub_')=='Launch spotify']" ng-click="sendCmd('HarmonyHubHarmonyHub_', 'Launch spotify')"><svg viewBox="0 0 80 80"><use xlink:href="/static/matrix-theme/matrixicons.svg#logoAmazon"></use></svg></div>
				<div class="control" ng-class="{true: 'on'}[itemValue('HarmonyHubHarmonyHub_')=='Amazon Video']" ng-click="sendCmd('HarmonyHubHarmonyHub_', 'Amazon Video')"><svg viewBox="0 0 80 80"><use xlink:href="/static/matrix-theme/squidink.svg#processor"></use></svg></div>
				<div class="control" ng-class="{true: 'on'}[itemValue('HarmonyHubHarmonyHub_')=='Watch Netflix']" ng-click="sendCmd('HarmonyHubHarmonyHub_', 'Watch Netflix')"><svg viewBox="0 0 80 80"><use xlink:href="/static/matrix-theme/matrixicons.svg#logoNetflix"></use></svg></div>
				<div class="control" ng-class="{true: 'on'}[itemValue('HarmonyHubHarmonyHub_')=='Start kodi']" ng-click="sendCmd('HarmonyHubHarmonyHub_', 'Start kodi')"><svg viewBox="0 0 80 80"><use xlink:href="/static/matrix-theme/squidink.svg#flat-tv"></use></svg></div>
			</div>
		</div>
    
    <div class="widget" ng-class="{true: 'disabled'}[itemValue('HarmonyHubHarmonyHub_')=='PowerOff']">
			<div class="icon off"><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/squidink.svg#volume"></use></svg></div>
			<div class="name">Volume<div class="value">{{itemValue('HarmonyHubHarmonyHub_') * 100 | number:0}}</div></div>
			<div class="controlGroup">
				<div class="control" ng-click="sendCmd('HarmonyVizioTV', 'VolumeUp')"><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('HarmonyVizioTV', 'VolumeDown')"><svg viewBox="0 0 80 80"><use xlink:href="/static/matrix-theme/squidink.svg#down-arrow-2"></use></svg></div>
				<div class="control on" ng-if="itemValue('HarmonyVizioTV')=='Mute'" ng-click="sendCmd('HarmonyVizioTV', 'Mute')"><svg viewBox="0 0 80 80"><use xlink:href="/static/matrix-theme/squidink.svg#volume-close"></use></svg></div>
        <div class="control" ng-if="itemValue('HarmonyVizioTV')!='ON'" ng-click="sendCmd('HarmonyVizioTV', 'ON')"><svg viewBox="0 0 80 80"><use xlink:href="/static/matrix-theme/squidink.svg#volume"></use></svg></div>
			      <div class="name">Now Playing<div class="value">{{itemValue('KodiHtpc_title')}}</div></div>

      </div>
		</div>

    
     <div class="widget" ng-class="{true: 'disabled'}[itemValue('HarmonyHubHarmonyHub_')=='PowerOff']">
			<div class="icon off"><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/squidink.svg#volume"></use></svg></div>
			<div class="name" ng-init="soundOptions=0" ng-click="soundOptions=1">Sound Options<svg viewBox="0 0 180 180"><use xlink:href="/static/matrix-theme/squidink.svg#down-arrow-2"></use></svg></div>
			<div class="sceneGroup" ng-if="soundOptions==1">
        <div class="scene" ng-click="sendCmd('HarmonyYamaha', 'DspStraight')">Straight</div>
				<div class="scene" ng-click="sendCmd('HarmonyVizioTVActivity', 'InputHdmi1')">HDMI 1</div>
        <div class="scene" ng-click="sendCmd('HarmonyYamaha', 'InputAudio')">App sounds</div>
        <div class="scene" ng-click="sendCmd('HarmonyYamaha', 'DspMusic')">Music</div>
        <div class="scene" ng-click="sendCmd('HarmonyYamaha', 'DspMovie')">Movie</div>
			</div>
		</div>
   
    <div class="name" ng-init="remote=0" ng-click="remote=1">Enable Remotes</div>
      <div ng-if="remote==1" ng-repeat="item in itemsInGroup('gharmony')">
        <div class="widget">
          <div class="name">{{item.label}}</div>
          <div class="btn-group"  dropdown-append-to-body="true"uib-dropdown>
            <button id="single-button" type="button" class="btn btn-primary"  uib-dropdown-toggle>
              {{item.state}} <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" uib-dropdown-menu role="menu" style="overflow: auto; max-height:300px; overflow-x:hidden" aria-labelledby="single-button">
              <dev ng-repeat="i in item.stateDescription.options">
                <li role="menuitem"><a ng-click='sendCmd(item.name, i.value)'>{{i.label}}</a></li>
              </dev>
            </ul>
          </div>
        </div>
      </div>
    
    
	</div>

</div>


<div class="section">

	<div class="sectionIconContainer"><div class="sectionIcon"><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/squidink.svg#line-visuals"></use></svg></div></div>
	<div class="title">Music</div>
	<div class="controls">
    
		<div class="widget">
			<div class="icon off"><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/squidink.svg#line-visuals"></use></svg></div>
			<div class="name">Track</div>
			<div class="appLogo"><svg viewBox="0 0 440 100"><use xlink:href="/static/matrix-theme/AppIcons.svg#spotify"></use></svg></div>        
			<div class="valueGroup">
				<div class="value">{{itemValue('spotify_current_track')}}</div>
				<div class="value">{{itemValue('spotify_current_artist')}}</div>
			</div>

			<div class="music">
				<div class="cover" ng-style="{'background-image': 'url(' + itemValue('spotify_current_cover') + ')'}"></div>
				<div class="playback">
					<div class="playbackTime">{{ 946684800000 + itemValue('spotify_current_progress')*1 | date:'mm:ss'}}</div>
					<div class="playbackBar"><div class="playbackBarDone" ng-style="{'width': itemValue('spotify_current_progress_percent') + '%'}"></div></div>
					<div class="playbackTime">{{ 946684800000 + itemValue('spotify_current_duration')*1 | date:'mm:ss'}}</div>
				</div>
				<div class="controlGroup">
					<div class="control" ng-click="sendCmd('spotify_action', 'next')"><svg viewBox="0 0 80 80"><use xlink:href="/static/matrix-theme/squidink.svg#right-arrow-2"></use></svg></div>
					<div class="control" ng-click="sendCmd('spotify_action', 'play')" ng-if="itemValue('spotify_current_playing')!='ON'"><svg viewBox="0 0 80 80"><use xlink:href="/static/matrix-theme/squidink.svg#right-play"></use></svg></div>
					<div class="control" ng-click="sendCmd('spotify_action', 'pause')" ng-if="itemValue('spotify_current_playing')=='ON'"><svg viewBox="0 0 80 80"><use xlink:href="/static/matrix-theme/squidink.svg#stop_1_"></use></svg></div>
					<div class="control" ng-click="sendCmd('spotify_action', 'previous')"><svg viewBox="0 0 80 80"><use xlink:href="/static/matrix-theme/squidink.svg#left-arrow-2"></use></svg></div>
				</div>
			</div>      
		</div>
    
		<div class="widget">
			<div class="icon off"><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/squidink.svg#line-visuals"></use></svg></div>
			<div class="name">Play Lists</div>
			<div class="sceneGroup">
				<div class="scene" ng-click="sendCmd('spotify_action', 'play spotify:user:spotify:playlist:0Fgi4meYzbrdICHkHe2VDj')">Instrumentals</div>
				<div class="scene" ng-click="sendCmd('spotify_action', 'play spotify:user:spotify:playlist:63MEgFTAW3mZ27XRj9C1oi')">Wedding</div>        
				<div class="scene" ng-click="sendCmd('spotify_action', 'play spotify:user:spotify:playlist:1j7HdFPIKl1Atf5eGIu7zU')">Janet's Playlist</div>        
        <div class="scene" ng-click="sendCmd('spotify_action', 'play spotify:user:spotify:playlist:63ebBKesGNlpQI59OwvqQm')">Georges's Playlist</div>    
        <div class="scene" ng-click="sendCmd('spotify_action', 'play spotify:user:spotify:playlist:2JN0Y20RVrTX6BqaUCev5L')">Melo Moods</div>    
        <div class="scene" ng-click="sendCmd('spotify_action', 'play spotify:user:spotify:playlist:298wmtcMtvAIGzguQbSCZ4')">Dinner Tunes</div>    
        <div class="scene" ng-click="sendCmd('spotify_action', 'play spotify:user:spotify:playlist:7t53a5oPjxAHxadWHbR0aH')">Hip Hop Jams</div>    
        <div class="scene" ng-click="sendCmd('spotify_action', 'play spotify:user:spotify:playlist:2JTuSXxiV34S9iGo0Rw9aN')">90's Alternative</div>    
      
      </div>
		</div>

		<div class="widget">
			<div class="icon off"><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/squidink.svg#volume"></use></svg></div>
			<div class="name">Volume<div class="value">{{itemValue('spotify_current_volume')}}</div></div>
			<div class="controlGroup">
				<div class="control" ng-click="sendCmd('spotify_action', 'volume_up')"><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('spotify_action', 'volume_down')"><svg viewBox="0 0 80 80"><use xlink:href="/static/matrix-theme/squidink.svg#down-arrow-2"></use></svg></div>
			</div>
		</div>

 		<div class="widget">
			<div class="icon off"><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/squidink.svg#box"></use></svg></div>
			<div class="name">Devices</div>
			<div class="sceneGroup" ng-init="deviceList = $eval(itemValue('spotify_device_list'))">
				<div class="scene" ng-class="{true:'on', false:''}[itemValue('spotify_current_device_id')==device.id]" ng-repeat="device in deviceList" ng-click="sendCmd('spotify_current_device_id', device.id);sendCmd('spotify_action', 'transfer_playback')">{{device.name}}</div>
			</div>
		</div>		

		<div class="widget" ng-click="sendCmd('spotify_forceupadte', 'ON')">
			<div class="icon off"><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/squidink.svg#double-arrow"></use></svg></div>
			<div class="name">Update</div>
     	<div class="valueGroup">
        <div class="value">{{itemValue('spotify_lastConnectionDateTime') | date:'MMM d, HH:mm:ss'}}</div>
      </div>			
		</div>

  </div>

</div>
  
 

<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">Color 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('gAll_Hue_Lights') | 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>

	<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('gAll_lights_Switch') | filter:query as filtered"> 
    <div class="widget" ng-if="item.type=='Switch' && itemValue(item.name)=='OFF'" 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">{{item.label}}</div>
    </div>

    <div class="widget" ng-if="item.type=='Switch' && itemValue(item.name)=='ON'" 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">{{item.label}}</div>
    </div>

    <div class="widget" ng-if="item.type=='Switch' && itemValue(item.name)=='NULL'" ng-click="sendCmd(item.name, 'ON')">
      <div class="icon off" ><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/matrixicons.svg#none"></use></svg></div>
      <div class="name">{{item.label}}</div>
    </div>
    
  </div>

  </div>



</div>

<div class="section">
	<div class="sectionIconContainer"><div class="sectionIcon"><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/squidink.svg#window"></use></svg></div></div>
  <div class="title">Shutters</div>
  <div class="controls">

  <div ng-repeat="item in itemsInGroup('gGroundFloorShutters')">

 		<div class="widget wide">
			<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">{{item.label}}<div class="value">{{item.value}}</div></div>
			<div class="controlGroup">
				<div class="control" ng-click="sendCmd(item.name, '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(item.name, 'STOP')"><svg viewBox="0 0 80 80"><use xlink:href="/static/matrix-theme/squidink.svg#stop_1_"></use></svg></div>
				<div class="control" ng-click="sendCmd(item.name, 'OFF')"><svg viewBox="0 0 80 80"><use xlink:href="/static/matrix-theme/squidink.svg#down-arrow-2"></use></svg></div>
			</div>
		</div>
    
  </div>

  </div>
</div>


<div class="section">
  <div class="sectionIconContainer"><div class="sectionIcon"><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/squidink.svg#connection-arw-l"></use></svg></div></div>
  <div class="title">Rules</div>
  <div class="controls">

    <div class="widget" ng-if="itemValue('dinner_mode')=='OFF'" ng-click="sendCmd('dinner_mode', '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">Dinner Mode</div>
      <div class="valueGroup"><div class="value">{{itemValue('dinner_mode_LUD') | date:'MMM d, HH:mm'}} last</div><div class="value">{{itemValue('dinner_mode_LUD') | number:0}} executions</div></div>            
    </div>

    <div class="widget" ng-if="itemValue('dinner_mode')=='ON'" ng-click="sendCmd('dinner_mode', '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">Dinner Mode</div>
      <div class="valueGroup"><div class="value">{{itemValue('dinner_mode_LUD') | date:'MMM d, HH:mm'}} last</div><div class="value">{{itemValue('dinner_mode_LUD') | number:0}} executions</div></div>            
    </div>

    <div class="widget" ng-if="itemValue('dinner_mode')=='NULL'" ng-click="sendCmd('dinner_mode', 'ON')">
      <div class="icon off" ><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/matrixicons.svg#none"></use></svg></div>
      <div class="name">Dinner Mode</div>
      <div class="valueGroup"><div class="value">{{itemValue('dinner_mode_LUD') | date:'MMM d, HH:mm'}} last</div><div class="value">{{itemValue('dinner_mode_LUD') | number:0}} executions</div></div>            
    </div>

    <div class="widget" ng-if="itemValue('livingroom_blinds')=='OFF'" ng-click="sendCmd('livingroom_blinds', '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">Living Room Blinds</div>
      <div class="valueGroup"><div class="value">{{itemValue('livingroom_blinds_LUD') | date:'MMM d, HH:mm'}} last</div><div class="value">{{itemValue('rule_livingroom_blindsDown_Counter') | number:0}} executions</div></div>            
    </div>

    <div class="widget" ng-if="itemValue('livingroom_blinds')=='ON'" ng-click="sendCmd('livingroom_blinds', '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">Living Room Blinds</div>
      <div class="valueGroup"><div class="value">{{itemValue('livingroom_blinds_LUD') | date:'MMM d, HH:mm'}} last</div><div class="value">{{itemValue('rule_livingroom_blindsDown_Counter') | number:0}} executions</div></div>            
    </div>

    <div class="widget" ng-if="itemValue('livingroom_blinds')=='NULL'" ng-click="sendCmd('livingroom_blinds', 'ON')">
      <div class="icon off" ><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/matrixicons.svg#none"></use></svg></div>
      <div class="name">Living Room Blinds</div>
      <div class="valueGroup"><div class="value">{{itemValue('livingroom_blinds_LUD') | date:'MMM d, HH:mm'}} last</div><div class="value">{{itemValue('rule_livingroom_blindsDown_Counter') | number:0}} executions</div></div>            
    </div>
    

    <div class="widget" ng-if="itemValue('good_night')=='OFF'" ng-click="sendCmd('good_night', '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">Good Night</div>
      <div class="valueGroup"><div class="value">{{itemValue('rule_sofia_blinds_TimeStamp') | date:'MMM d, HH:mm'}} last</div><div class="value">{{itemValue('rule_sofia_blinds_Counter') | number:0}} executions</div></div>            
    </div>

    <div class="widget" ng-if="itemValue('good_night')=='ON'" ng-click="sendCmd('good_night', '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">Good Night</div>
      <div class="valueGroup"><div class="value">{{itemValue('rule_sofia_blinds_TimeStamp') | date:'MMM d, HH:mm'}} last</div><div class="value">{{itemValue('rule_sofia_blinds_Counter') | number:0}} executions</div></div>            
    </div>

    <div class="widget" ng-if="itemValue('good_night')=='NULL'" ng-click="sendCmd('good_night', 'ON')">
      <div class="icon off" ><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/matrixicons.svg#none"></use></svg></div>
      <div class="name">Good Night</div>
      <div class="valueGroup"><div class="value">{{itemValue('rule_sofia_blinds_TimeStamp') | date:'MMM d, HH:mm'}} last</div><div class="value">{{itemValue('rule_sofia_blinds_Counter') | number:0}} executions</div></div>            
    </div>


    <div class="widget" ng-if="itemValue('bedroom_blinds')=='OFF'" ng-click="sendCmd('bedroom_blinds', '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">Bedroom Blinds</div>
      <div class="valueGroup"><div class="value">{{itemValue('bedroom_blinds_LUD') | date:'MMM d, HH:mm'}} last</div><div class="value">{{itemValue('rule_sunset_blinds_Counter') | number:0}} executions</div></div>            
    </div>

    <div class="widget" ng-if="itemValue('bedroom_blinds')=='ON'" ng-click="sendCmd('bedroom_blinds', '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">Bedroom Blinds</div>
      <div class="valueGroup"><div class="value">{{itemValue('bedroom_blinds_LUD') | date:'MMM d, HH:mm'}} last</div><div class="value">{{itemValue('rule_sunset_blinds_Counter') | number:0}} executions</div></div>            
    </div>

    <div class="widget" ng-if="itemValue('bedroom_blinds')=='NULL'" ng-click="sendCmd('bedroom_blinds', 'ON')">
      <div class="icon off" ><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/matrixicons.svg#none"></use></svg></div>
      <div class="name">Bedroom Blinds</div>
      <div class="valueGroup"><div class="value">{{itemValue('bedroom_blinds_LUD') | date:'MMM d, HH:mm'}} last</div><div class="value">{{itemValue('rule_sunset_blinds_Counter') | number:0}} executions</div></div>            
    </div>


    <div class="widget" ng-if="itemValue('movie_lights')=='OFF'" ng-click="sendCmd('movie_lights', '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">Movie Lights</div>
      <div class="valueGroup"><div class="value">{{itemValue('rule_morning_blinds_TimeStamp') | date:'MMM d, HH:mm'}} last</div><div class="value">{{itemValue('rule_morning_blinds_Counter') | number:0}} executions</div></div>            
    </div>

    <div class="widget" ng-if="itemValue('movie_lights')=='ON'" ng-click="sendCmd('movie_lights', '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">Movie Lights</div>
      <div class="valueGroup"><div class="value">{{itemValue('rule_morning_blinds_TimeStamp') | date:'MMM d, HH:mm'}} last</div><div class="value">{{itemValue('rule_morning_blinds_Counter') | number:0}} executions</div></div>            
    </div>

    <div class="widget" ng-if="itemValue('movie_lights')=='NULL'" ng-click="sendCmd('movie_lights', 'ON')">
      <div class="icon off" ><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/matrixicons.svg#none"></use></svg></div>
      <div class="name">Movie Lights</div>
      <div class="valueGroup"><div class="value">{{itemValue('rule_morning_blinds_TimeStamp') | date:'MMM d, HH:mm'}} last</div><div class="value">{{itemValue('rule_morning_blinds_Counter') | number:0}} executions</div></div>            
    </div>   
    
    <div class="widget" ng-if="itemValue('media_center')=='OFF'" ng-click="sendCmd('media_center', '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">Media Center</div>
      <div class="valueGroup"><div class="value">{{itemValue('rule_bmw_charge_check_TimeStamp') | date:'MMM d, HH:mm'}} last</div><div class="value">{{itemValue('rule_bmw_charge_check_Counter') | number:0}} executions</div></div>            
    </div>

    <div class="widget" ng-if="itemValue('media_center')=='ON'" ng-click="sendCmd('media_center', '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">Media Center</div>
      <div class="valueGroup"><div class="value">{{itemValue('rule_bmw_charge_check_TimeStamp') | date:'MMM d, HH:mm'}} last</div><div class="value">{{itemValue('rule_bmw_charge_check_Counter') | number:0}} executions</div></div>            
    </div>

    <div class="widget" ng-if="itemValue('media_center')=='NULL'" ng-click="sendCmd('media_center', 'ON')">
      <div class="icon off" ><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/matrixicons.svg#none"></use></svg></div>
      <div class="name">Media Center</div>
      <div class="valueGroup"><div class="value">{{itemValue('rule_bmw_charge_check_TimeStamp') | date:'MMM d, HH:mm'}} last</div><div class="value">{{itemValue('rule_bmw_charge_check_Counter') | number:0}} executions</div></div>            
    </div>       
    
      <div class="widget" ng-if="itemValue('mood_lights')=='OFF'" ng-click="sendCmd('mood_lights', '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">Mood Lights</div>
      <div class="valueGroup"><div class="value">{{itemValue('rule_bmw_charge_check_TimeStamp') | date:'MMM d, HH:mm'}} last</div><div class="value">{{itemValue('rule_bmw_charge_check_Counter') | number:0}} executions</div></div>            
    </div>

    <div class="widget" ng-if="itemValue('mood_lights')=='ON'" ng-click="sendCmd('mood_lights', '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">Mood Lights</div>
      <div class="valueGroup"><div class="value">{{itemValue('rule_bmw_charge_check_TimeStamp') | date:'MMM d, HH:mm'}} last</div><div class="value">{{itemValue('rule_bmw_charge_check_Counter') | number:0}} executions</div></div>            
    </div>

    <div class="widget" ng-if="itemValue('mood_lights')=='NULL'" ng-click="sendCmd('mood_lights', 'ON')">
      <div class="icon off" ><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/matrixicons.svg#none"></use></svg></div>
      <div class="name">Mood Lights</div>
      <div class="valueGroup"><div class="value">{{itemValue('rule_bmw_charge_check_TimeStamp') | date:'MMM d, HH:mm'}} last</div><div class="value">{{itemValue('rule_bmw_charge_check_Counter') | number:0}} executions</div></div>            
    </div>   
    
       <div class="widget" ng-if="itemValue('netflix')=='OFF'" ng-click="sendCmd('netflix', '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">Netflix</div>
      <div class="valueGroup"><div class="value">{{itemValue('rule_bmw_charge_check_TimeStamp') | date:'MMM d, HH:mm'}} last</div><div class="value">{{itemValue('rule_bmw_charge_check_Counter') | number:0}} executions</div></div>            
    </div>

    <div class="widget" ng-if="itemValue('netflix')=='ON'" ng-click="sendCmd('netflix', '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">Netflix</div>
      <div class="valueGroup"><div class="value">{{itemValue('rule_bmw_charge_check_TimeStamp') | date:'MMM d, HH:mm'}} last</div><div class="value">{{itemValue('rule_bmw_charge_check_Counter') | number:0}} executions</div></div>            
    </div>

    <div class="widget" ng-if="itemValue('netflix')=='NULL'" ng-click="sendCmd('netflix', 'ON')">
      <div class="icon off" ><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/matrixicons.svg#none"></use></svg></div>
      <div class="name">Netflix</div>
      <div class="valueGroup"><div class="value">{{itemValue('rule_bmw_charge_check_TimeStamp') | date:'MMM d, HH:mm'}} last</div><div class="value">{{itemValue('rule_bmw_charge_check_Counter') | number:0}} executions</div></div>            
    </div>  
    
    

  </div>
</div>

sebastian13 · May 20, 2019, 9:10am

I can not see any problem in your HTML code.

Is it working using a sitemap?

tinkernut · May 20, 2019, 12:33pm

I do not use the site map but it shows up fine in the Classic UI.

sebastian13 · May 20, 2019, 3:09pm

If you add a new widget, displaying only the value of one Netatmo item? Is this working?

I had a similar problem using the Netatmo binding. Do you have more than one Item defined? (Example: inside_co2_1 and inside_co2_2)

I solved my problem, when I comment all Netatmo items out, uninstalling the binding, disabling the automatic item linking in Paper-UI and then enabling uncomment the items in the item-file.

bult.wd · May 20, 2019, 6:57pm

Hi Patrick,

First of all, thanks for this great theme.
It really looks amazing!

I’m currently finding out if i’m able to configure one single device.
So when i click a list or select play, that it always plays on the selected device.

Can you tell me if this even is possible, and if it is… how?

David_deMarco · May 26, 2019, 10:14am

I had similar issues with compiling the icons into SVG. After alot of research I put this tutorial together.

Building SVG Icons.

openhabbe · May 31, 2019, 5:31pm

Quick question @pmpkk: why didn’t you use the row/col css already in habpanel?

alexspitz · June 17, 2019, 7:31am

Hi there! Maybe someone can help me here …
I’m adding item with ng-repeat, but i’m facing 2 problems:

Sometimes they don’t get all shown, even though I can see that the logic to tell me how many are one is correct, so I assume they get lost somewhere
They don’t appear in the order that I have them defined on my .items file.

I’m attaching an image and my code.

sonoff.items

//Pieza Emma
Switch PiezaEmma_Luz1               "Pieza Emma Luz 1"              <lighting> (gEmma, gCasa) [ "Lighting" ] { channel="mqtt:topic:mqtt_broker:PiezaEmma_Luz1:power" }
Switch PiezaEmma_Luz2               "Pieza Emma Luz 2"              <lighting> (gEmma, gCasa) [ "Lighting" ] { channel="mqtt:topic:mqtt_broker:PiezaEmma_Luz2:power" }
Switch PiezaEmma_LED                "Pieza Emma LED"                <lighting> (gEmma, gCasa) [ "Lighting" ] { channel="mqtt:topic:mqtt_broker:PiezaEmma_LED:power" }
Switch PiezaEmma_Pasillo            "Pieza Emma Pasillo"            <lighting> (gEmma, gCasa) [ "Lighting" ] { channel="mqtt:topic:mqtt_broker:PiezaEmma_Pasillo:power" }
Switch PiezaEmma_Bathroom_Luz1      "Pieza Emma Bathroom Luz 1"     <lighting> (gEmma, gCasa) [ "Lighting" ] { channel="mqtt:topic:mqtt_broker:PiezaEmma_Bathroom_Luz1:power" }
Switch PiezaEmma_Bathroom_Luz2      "Pieza Emma Bathroom Luz 2"     <lighting> (gEmma, gCasa) [ "Lighting" ] { channel="mqtt:topic:mqtt_broker:PiezaEmma_Bathroom_Luz2:power" }
Switch PiezaEmma_Bathroom_LED       "Pieza Emma Bathroom LED"       <lighting> (gEmma, gCasa) [ "Lighting" ] { channel="mqtt:topic:mqtt_broker:PiezaEmma_Bathroom_LED:power" }

//Pieza Chicos
Switch PiezaChicos_Luz1             "Pieza Chicos Luz 1"            <lighting> (gChicos, gCasa) [ "Lighting" ] { channel="mqtt:topic:mqtt_broker:PiezaChicos_Luz1:power" }
Switch PiezaChicos_Luz2             "Pieza Chicos Luz 2"            <lighting> (gChicos, gCasa) [ "Lighting" ] { channel="mqtt:topic:mqtt_broker:PiezaChicos_Luz2:power" }
Switch PiezaChicos_LED              "Pieza Chicos LED"              <lighting> (gChicos, gCasa) [ "Lighting" ] { channel="mqtt:topic:mqtt_broker:PiezaChicos_LED:power" }
Switch PiezaChicos_Pasillo          "Pieza Chicos Pasillo"          <lighting> (gChicos, gCasa) [ "Lighting" ] { channel="mqtt:topic:mqtt_broker:PiezaChicos_Pasillo:power" }
Switch PiezaChicos_Bathroom_Luz1    "Pieza Chicos Bathroom Luz 1"   <lighting> (gChicos, gCasa) [ "Lighting" ] { channel="mqtt:topic:mqtt_broker:PiezaChicos_Bathroom_Luz1:power" }
Switch PiezaChicos_Bathroom_Luz2    "Pieza Chicos Bathroom Luz 2"   <lighting> (gChicos, gCasa) [ "Lighting" ] { channel="mqtt:topic:mqtt_broker:PiezaChicos_Bathroom_Luz2:power" }
Switch PiezaChicos_Bathroom_LED     "Pieza Chicos Bathroom LED"     <lighting> (gChicos, gCasa) [ "Lighting" ] { channel="mqtt:topic:mqtt_broker:PiezaChicos_Bathroom_LED:power" }

Also my widget code

<div class="section">
	<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">Luces Emma</div><div class="summary">ON: {{(itemsInGroup('gEmma') | filter:{state:'ON'}).length}} de {{(itemsInGroup('gEmma')).length}}</div>
  </div>
  <div class="controls">
    <div ng-repeat="item in itemsInGroup('gEmma') | filter:query as filtered">
      <div class="widget wide" ng-if="itemValue(item.name)=='OFF'" 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">{{item.label}}</div>
      </div>
      <div class="widget wide" ng-if="itemValue(item.name)=='ON'" 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">{{item.label}}</div>
      </div>
      <div class="widget wide" ng-if="itemValue(item.name)=='NULL'" 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">{{item.label}}</div>
      </div>  
    </div>
  </div>  
</div>

<div class="section">
	<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">Luces Chicos</div><div class="summary">ON: {{(itemsInGroup('gChicos') | filter:{state:'ON'}).length}} de {{(itemsInGroup('gChicos')).length}}</div>
  </div>
  <div class="controls">
    <div ng-repeat="item in itemsInGroup('gChicos') | filter:query as filtered">
      <div class="widget wide" ng-if="itemValue(item.name)=='OFF'" 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">{{item.label}}</div>
      </div>
      <div class="widget wide" ng-if="itemValue(item.name)=='ON'" 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">{{item.label}}</div>
      </div>
      <div class="widget wide" ng-if="itemValue(item.name)=='NULL'" 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">{{item.label}}</div>
      </div>  
    </div>
  </div>  
</div>

Any pointers would be much appreciated.

Christopher_Hemmings · June 17, 2019, 8:13am

I have the same question about the order. I was about to post the same thing

Ive tried the |orderby function in the ng-repeat. but it doesn’t work, apparently it only works with arrays.
any help on the order would be appreciated.

Christopher_Hemmings · June 17, 2019, 8:17am

Also i have just tried your widget with my setup, and all of my lights are listed correctly So i would say its either a cache issue (clear cache on your browser).
Or a CSS file issue.

Christopher_Hemmings · June 17, 2019, 8:19am

also. where you have your second section. Change filter:query as filtered to filter2:query as filtered
and

| filter:{state:‘ON’}).length}} to | filter2:{state:‘ON’}).length}}

so the numbers are correct.

alexspitz · June 17, 2019, 10:04pm

My numbers are correct, the actually both have 7 items. i have the same chunk of code for around 13 different rooms, ranging from 1 to 13 item on each, and everytime the “summary” is correct, even the how many are on of all the lights, but the <div class="name">{{item.label}}</div> doesn’t show the same amount of items as in {{(itemsInGroup('gChicos')).length}}

joehester36 · June 20, 2019, 3:25am

I cannot get the spotify python script to run successfully, any suggestions?

dastrix80 · June 20, 2019, 3:29am

You need to install the python module called ‘requests’

Christopher_Hemmings · June 21, 2019, 1:20am

Thought i would share some photos of my setup

This is all on desktop and tablet.
I have a different setup for mobile, the menu bar up top is reduced to a single menu option
The widgets stack.
The alarm keypad in incomplete. still need to link the zones up top with the actual zones open

.

brucelee114 · July 2, 2019, 4:35am

Your dashboard is so awesome. I am super newbie to html/css. If you dont mind, can you please share your dashboard code?

Benedikt_Weber · July 2, 2019, 10:42pm

Hi Christian,

did you ever accomplish the device / playlist dropdown with the new spotify binding? I’m now at the same point and tried a lot of things without success so far.

Many thanks!

Christopher_Hemmings · July 3, 2019, 2:11am

if you’re new. start with the stock matrix theme and play from there. Get your head around how CSS Files work. HTML element tags and how to manipulate them. Check out Bootstrap and angular JS tutorials online too.
Theres no point me giving you my files. as they are custom to my items and will not work on your system.

Benedikt_Weber · July 11, 2019, 8:44pm

Thank you for that, worked great
The background color of the grafana graphs are now the same as the UI.
But I didn’t find a way to hide the grid of the graphs in grafana, as it is the case in your screenshots. Did a lot of research but hiding the grid of a graph seems not to be possible at the moment? How did you achieve that?

Many thanks!

Kennedys · July 12, 2019, 11:50am

Hi Herbie,

I am facing the same problem, I guess. Everything is working fine, except the grafana graphs…They just don’t update in the HABPanel, except when I hint the refresh button from safari-browser. Am I missing anything?
Hope you or someone else can help me.