Matrix Theme for HABPanel

Tutorials & Examples HABPanel Examples
, ,
635

Based of what I understand of the CSS, you’re looping over all items of a group to display its status and to enable switching.

<div ng-repeat=\"item in itemsInGroup('gGroundFloorLights').concat(itemsInGroup('gGroundFloorHue')) | filter:query as filtered\">

What if you have multiple groups (e.g. gBasement, gFirstFloor, fSecondFloor)? I suppose I have to copy everything 3 times and modify each loop. Is this correct? In order to avoid this, I’ve created a string in the widget that I want to use as loop. But this isn’t working. Any help?

<div ng-repeat=\"item in itemsInGroup('{itemValue(config.group_name)}') | filter:query as filtered\">
636

Sorry mate for the late reply.
I have this code in every page. I have a template on each page. and i place all sections. widgets and buttons into the one template.
I have this part of the code at the beginning of the template.

<style>
.section .widget{
  padding:5px 0px 5px 0px;
  margin:2px 0px 2px 0px;
  }
  
  
@media screen and (max-width: 750px) {
#AlarmSection, #ZoneSection{
  width:100%;
  }

  


  
.collapsible-menu label {
  visibility: visible;
  font-size: 30px;
  display: block;
  cursor: pointer;
 
  }
 .menu-content {
  	max-height: 0;
    overflow: hidden;
  margin-right: 35px;
  
	}

ul li2 {
  display:block;
  float: none;
}
  
  ul li3 {
  visibility: hidden;
  display:none;
}
  
}
  
  
</style>

  
<div class="section">
 <div class="collapsible-menu"> 
   
   <input type="checkbox" id="menu"><label for="menu">{{ngModel.name}}</label></input>
      
         <div class="menu-content"><li3>{{itemValue('Date') | date:'d MMM yyyy | HH:mm a'}}</li3>
  <ul>
  <li2><a2 ng-class="{true: 'selected'}[ngModel.name=='Alarm']" ng-click="sendCmd('HomePageItem', 'Home?kiosk=on')" >Alarm</a2></li2>
  <li2><a2 ng-class="{true: 'selected'}[ngModel.name=='Lights']" ng-click="sendCmd('HomePageItem', 'Lights?kiosk=on')" >Lights</a2></li2>
  <li2><a2 ng-class="{true: 'selected'}[ngModel.name=='TV']" ng-click="sendCmd('HomePageItem', 'Tv?kiosk=on')" >TV</a2></li2>
  <li2><a2 ng-class="{true: 'selected'}[ngModel.name=='Google Home']" ng-click="sendCmd('HomePageItem', 'Chromecast?kiosk=on')" >Google Home</a2></li2>  
  <li2><a2 ng-class="{true: 'selected'}[ngModel.name=='Blinds']" ng-click="sendCmd('HomePageItem', 'Blinds?kiosk=on')" >Blinds</a2></li2>
 	<li2><a2 ng-class="{true: 'selected'}[ngModel.name=='Irrigation']" ng-click="sendCmd('HomePageItem', 'Irrigation?kiosk=on')" >Irrigation</a2></li2>
  <li2><a2 ng-class="{true: 'selected'}[ngModel.name=='Vacuum']" ng-click="sendCmd('HomePageItem', 'Vacuum?kiosk=on')" >Vacuum</a2></li2>
  <li2><a2 ng-class="{true: 'selected'}[ngModel.name=='Logs']" ng-click="sendCmd('HomePageItem', 'Logs?kiosk=on')" >Logs</a2></li2>

</ul>
</div>
</div>

</div>

I then have an item called HomePageItem that is updated with the page view. And in habpanel, i have it set to look at HomePageItem and go to that page when it is updated.

The page names is what is shown at the end of the URL when you are on the page you want. So for instance, you would change this part Vacuum?kiosk=on to whatever your page is called. kiosk=on will remove the menu bar and page name up the top on each page. I do this because i have the Menu being highlighted depending on the page name that is active. You can remove the Kiosk=on or change it to Kiosk=off if you wanted to keep the menus.

So for instance. This is my entire code for my Alarm Page

<style>
.section .widget{
  padding:5px 0px 5px 0px;
  margin:2px 0px 2px 0px;
  }
  
  
@media screen and (max-width: 750px) {
#AlarmSection, #ZoneSection{
  width:100%;
  }

  .gbtn {
  width: 65px;
  height: 65px; 
  font-size: 2em;
  line-height:65px;
  margin: 5px 5px 5px 5px;
	}
.gbtn:before {
  width: 75px;
  height: 75px;
  top: -5px;
  left: -5px;
  font-size: 23px;
	}
  
	.section .lcd {
 
  height: 150px;
 }
  
    .section .lcd .title{
 
  font-size:2em;
  
  
  
	}
  
  .section .lcd .state{
  
 
  font-size:1.5em;
  
  
	}

    .section .lcd .code{
 
  font-size:2em;
  }

  
.collapsible-menu label {
  visibility: visible;
  font-size: 30px;
  display: block;
  cursor: pointer;
 
  }
 .menu-content {
  	max-height: 0;
    overflow: hidden;
  margin-right: 35px;
  
	}

ul li2 {
  display:block;
  float: none;
}
  
  ul li3 {
  visibility: hidden;
  display:none;
}
  
}
  
  
</style>

  
<div class="section">
 <div class="collapsible-menu"> 
   
   <input type="checkbox" id="menu"><label for="menu">{{ngModel.name}}</label></input>
      
         <div class="menu-content"><li3>{{itemValue('Date') | date:'d MMM yyyy | HH:mm a'}}</li3>
  <ul>
  <li2><a2 ng-class="{true: 'selected'}[ngModel.name=='Alarm']" ng-click="sendCmd('HomePageItem', 'Home?kiosk=on')" >Alarm</a2></li2>
  <li2><a2 ng-class="{true: 'selected'}[ngModel.name=='Lights']" ng-click="sendCmd('HomePageItem', 'Lights?kiosk=on')" >Lights</a2></li2>
  <li2><a2 ng-class="{true: 'selected'}[ngModel.name=='TV']" ng-click="sendCmd('HomePageItem', 'Tv?kiosk=on')" >TV</a2></li2>
  <li2><a2 ng-class="{true: 'selected'}[ngModel.name=='Google Home']" ng-click="sendCmd('HomePageItem', 'Chromecast?kiosk=on')" >Google Home</a2></li2>  
  <li2><a2 ng-class="{true: 'selected'}[ngModel.name=='Blinds']" ng-click="sendCmd('HomePageItem', 'Blinds?kiosk=on')" >Blinds</a2></li2>
 	<li2><a2 ng-class="{true: 'selected'}[ngModel.name=='Irrigation']" ng-click="sendCmd('HomePageItem', 'Irrigation?kiosk=on')" >Irrigation</a2></li2>
  <li2><a2 ng-class="{true: 'selected'}[ngModel.name=='Vacuum']" ng-click="sendCmd('HomePageItem', 'Vacuum?kiosk=on')" >Vacuum</a2></li2>
  <li2><a2 ng-class="{true: 'selected'}[ngModel.name=='Logs']" ng-click="sendCmd('HomePageItem', 'Logs?kiosk=on')" >Logs</a2></li2>

</ul>
</div>
</div>

</div>

<div class="section" id="AlarmSection">

  <div class="lcd">
  <div class="title"><p style="display: table-cell;vertical-align: middle;">State</p></div>
       <div class="state"><p style="display: table-cell;vertical-align: middle;">{{itemValue('currentAlarm')}}</p></div>
   		 <div class="code"><span style="display: table-cell;vertical-align: middle"><strong>{{itemValue('KeypadString')}}</strong></span></div>

  </div>
     

    
        <div class="centerGroup">
            <div ng-click="sendCmd('AlarmMode', 'DISARM')" class="gbtn">Off</div>
            <div ng-click="sendCmd('AlarmKeypad', '1')" class="gbtn">1</div>
            <div ng-click="sendCmd('AlarmKeypad', '2')" class="gbtn">2</div>
            <div ng-click="sendCmd('AlarmKeypad', '3')" class="gbtn">3</div>
      	</div>
       
        <div class="centerGroup">
            <div ng-click="sendCmd('AlarmMode', 'STAY')" class="gbtn">Stay</div>
            <div ng-click="sendCmd('AlarmKeypad',  '4')" class="gbtn">4</div>
          	<div ng-click="sendCmd('AlarmKeypad',  '5')" class="gbtn">5</div>
            <div ng-click="sendCmd('AlarmKeypad',  '6')" class="gbtn">6</div>
      	</div>
      
      <div class="centerGroup">
            <div ng-click="sendCmd('AlarmMode', 'ARM')" class="gbtn">Arm</div>
            <div ng-click="sendCmd('AlarmKeypad',  '7')" class="gbtn">7</div>
            <div ng-click="sendCmd('AlarmKeypad',  '8')" class="gbtn">8</div>
            <div ng-click="sendCmd('AlarmKeypad',  '9')" class="gbtn">9</div>
      </div>
       
      <div class="centerGroup">
            <div ng-click="sendCmd('AlarmKeypad', '11')" class="gbtn">Clr</div>
            <div ng-click="sendCmd('AlarmKeypad',  '*')" class="gbtn">*</div>
            <div ng-click="sendCmd('AlarmKeypad',  '0')" class="gbtn">0</div>
            <div ng-click="sendCmd('AlarmKeypad',  '#')" class="gbtn">#</div>
      </div>
       
 </div>


 
<div class="section" id="ZoneSection">
  
  
<div class="controls">
 		<div class="widget">
  <div class="row row-no-gutters" style="margin-bottom: 10px;">    
      		<div class="name">Doors</div>
    <div class="summ">{{ ( filtered1 | filter: { state: 'ON' } ).length }} of {{filtered1.length}} open</div>
      </div>
  <div ng-repeat="item in itemsInGroup('gDoors') | filter:query as filtered1">  

 <div class="row row-no-gutters">
 

    <div class="col-xs-8 text-left" >{{item.label}}</div>
		<div class="col-xs-4 text-right" ng-style="{ color: itemValue(item.name)== 'Open'?'orange':'lightblue'}">{{itemValue(item.name)}}</div>
 </div>		
  </div>
 </div>


 	<div class="widget">
		<div class="row row-no-gutters" style="margin-bottom: 10px;">
		<div class="name">Windows</div>
    <div class="summ">{{ ( filtered2 | filter: { state: 'ON' } ).length }} of {{filtered2.length}} open</div>
    </div>

   
  <div ng-repeat="item in itemsInGroup('gWindows') | filter:query as filtered2">  

 <div class="row row-no-gutters">
    <div class="col-xs-8 text-left" >{{item.label}}</div>
		<div class="col-xs-4 text-right" ng-style="{ color: itemValue(item.name)== 'Open'?'orange':'lightblue'}">{{itemValue(item.name)}}</div>
</div>
  </div>
 </div>
    
    
 	<div class="widget">
<div class="row row-no-gutters" style="margin-bottom: 10px;">
		<div class="name">Sensors</div>
    <div class="summ">{{ ( filtered3 | filter: { state: 'ON' } ).length }} of {{filtered3.length}} active</div>
    </div> 

   
  <div ng-repeat="item in itemsInGroup('gSensors') | filter:query as filtered3">  

<div class="row row-no-gutters">
    <div class="col-xs-8 text-left" >{{item.label}}</div>
		<div class="col-xs-4 text-right" ng-style="{ color: itemValue(item.name)== 'Active'?'orange':'lightblue'}">{{itemValue(item.name)}}</div>
    </div> 
  </div>
 </div>
  </div>

<div class="controls">
 		<div class="widget" style="border:none;width:100%;background:none;box-shadow:none;">

<div ng-show="itemValue('currentAlarm')!='DISARM' && itemValue('currentAlarm')!='STAY' && itemValue('currentAlarm')!='AWAY'">
<div ng-show="itemValue('gDoors')!='OFF' || itemValue('gWindows')!='OFF' || itemValue('gSensors')!='OFF'">
 <div class="alert alert-light">
   <span style="color: {{variable | themeValue:'primary-color'}}; font-size: 15pt;">
      	Zones are opened/active and will not arm until next closed
   </span>
</div>
</div>
</div>
  </div>
  </div>

  <div class="title"><div class="name">Garage Door</div></div>
  <div class="controls">
   

 		<div class="widget" style="border:none;width:100%;background:none;box-shadow:none;">
			<div class="name" >{{item.label}}
 
    	<div class="value" style= "clear: right; font-size:30px;" ng-if="itemValue('GarageDoorState')=='Open'">Open</div>
      <div class="value" style= "clear: right; font-size:30px;" ng-if="itemValue('GarageDoorState')=='Closed'">Closed</div>
      <div class="value" style= "clear: right; font-size:30px;" ng-if="itemValue('GarageDoorState')=='Ajar'">Ajar</div>  
			</div>
      <div class="centerGroup" style="float: right;">
		
				<div class="gbtn" ng-click="sendCmd('GarageDoor', 'UP')"><i id="glyph" class="glyphicon glyphicon-chevron-up"></i></div>
				<div class="gbtn" ng-click="sendCmd('GarageDoor', 'STOP')"><i id="glyphStop"  class="glyphicon glyphicon-stop"></i></div>
				<div class="gbtn" ng-click="sendCmd('GarageDoor', 'DOWN')"><i id="glyph"  class="glyphicon glyphicon-chevron-down"></i></div>
        
    </div>
    </div>
      </div>

</div>

and this is what the page looks like

image
image1915×922 182 KB

1 Like
638

Hi,
Could you please share Lights section of your setup ?
Thank you.

639

This is my template for the lights page. The current one looks like this

image
image1896×888 149 KB 



<style>

  
@media screen and (max-width: 750px) {

.collapsible-menu label {
  visibility: visible;
  font-size: 30px;
  display: block;
  cursor: pointer;
 
  }
 .menu-content {
  	max-height: 0;
    overflow: hidden;
  margin-right: 35px;
  
	}

ul li2 {
  display:block;
  float: none;
}
  
  ul li3 {
  visibility: hidden;
  display:none;
}
  
}

  
  
</style>

  
<div class="section">
 <div class="collapsible-menu"> 
   
   <input type="checkbox" id="menu"><label for="menu">{{ngModel.name}}</label></input>
      
         <div class="menu-content"><li3>{{itemValue('Date') | date:'d MMM yyyy | HH:mm a'}}</li3>
  <ul>

  <li2><a2 ng-class="{true: 'selected'}[ngModel.name=='Alarm']" ng-click="sendCmd('HomePageItem', 'Home?kiosk=on')" >Alarm</a2></li2>
  <li2><a2 ng-class="{true: 'selected'}[ngModel.name=='Lights']" ng-click="sendCmd('HomePageItem', 'Lights?kiosk=on')" >Lights</a2></li2>
  <li2><a2 ng-class="{true: 'selected'}[ngModel.name=='TV']" ng-click="sendCmd('HomePageItem', 'Tv?kiosk=on')" >TV</a2></li2>
  <li2><a2 ng-class="{true: 'selected'}[ngModel.name=='Google Home']" ng-click="sendCmd('HomePageItem', 'Chromecast?kiosk=on')" >Google Home</a2></li2>  
  <li2><a2 ng-class="{true: 'selected'}[ngModel.name=='Blinds']" ng-click="sendCmd('HomePageItem', 'Blinds?kiosk=on')" >Blinds</a2></li2>
 	<li2><a2 ng-class="{true: 'selected'}[ngModel.name=='Irrigation']" ng-click="sendCmd('HomePageItem', 'Irrigation?kiosk=on')" >Irrigation</a2></li2>
  <li2><a2 ng-class="{true: 'selected'}[ngModel.name=='Vacuum']" ng-click="sendCmd('HomePageItem', 'Vacuum?kiosk=on')" >Vacuum</a2></li2>
  <li2><a2 ng-class="{true: 'selected'}[ngModel.name=='Logs']" ng-click="sendCmd('HomePageItem', 'Logs?kiosk=on')" >Logs</a2></li2>

</ul>
</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 glow" ng-if="itemValue('IndoorLighting')=='ON' || itemValue('LightsBrightness')=='ON'">
      <svg viewBox="0 0 35 35"><use xlink:href="/static/matrix-theme/squidink.svg#light-bulb"></use></svg>    
    </div>  
    <div class="sectionIcon" ng-if="itemValue('IndoorLighting')!='ON' || itemValue('LightsBrightness')!='ON'">
      <svg viewBox="0 0 35 35"><use xlink:href="/static/matrix-theme/squidink.svg#light-bulb"></use></svg>    
    </div>
  </div>
  
  
  <div class="title"><div class="name">Indoor Lights</div><div class="summary">ON: {{ ( filtered1 | filter: { state: 'ON' } ).length }} of {{filtered1.length}}</div></div>


  <div ng-repeat="item in itemsInGroup('IndoorLighting').concat(itemsInGroup('LightsBrightness')) | filter:query as filtered1">
 
			<div class="lightbtnContainer" ng-if="item.name.split('_')[1]!='Dimmable'" ng-click="sendCmd('hpUpdateScreen', 'ON')">
        <div class="lightbtn" ng-if="itemValue(item.name)!='ON'" ng-click="sendCmd(item.name, 'ON')"><i class="glyphicon glyphicon-off"></i></div>
      <div class="lightbtnon" ng-if="itemValue(item.name)=='ON'" ng-click="sendCmd(item.name, 'OFF')"><i class="glyphicon glyphicon-off"></i></div>
      <div class="sub-title">{{item.label}}</div>
   	
 			
			</div> 
    
    
    <div class="lightbtnContainer" ng-if="item.name.split('_')[1]=='Dimmable' && item.name.split('_')[3]!='rgb'">
      <div class="lightbtn" ng-if="itemValue(item.name)!='ON'" ng-click="sendCmd(item.name, 'ON')"><i class="glyphicon glyphicon-off"></i></div>
      <div class="lightbtnon" ng-if="itemValue(item.name)=='ON' && item.name.split('_')[2]!='colour'" ng-click="sendCmd(item.name, 'OFF')"><i class="glyphicon glyphicon-off"></i></div>
      <div class="lightbtnon" ng-style="{'color': 'rgb(' + itemValue(item.name + '_rgb_String') + ')'}" ng-if="itemValue(item.name)=='ON' && item.name.split('_')[2]=='colour' && itemValue(item.name + '_rgb_String') != '0,0,0' " ng-click="sendCmd(item.name, 'OFF')"><i class="glyphicon glyphicon-off"></i></div>
      <div class="lightbtnon" ng-if="itemValue(item.name)=='ON' && item.name.split('_')[2]=='colour' && itemValue(item.name + '_rgb_String') == '0,0,0' " ng-click="sendCmd(item.name, 'OFF')"><i class="glyphicon glyphicon-off"></i></div>
      <div class="sub-title">{{item.label}}</div>

    <div class="lightSettings" ng-show="!showHueSelect" ng-click="showHueSelect=true; sendCmd('hpUpdateScreen', 'ON')" ><i class="glyphicon glyphicon-adjust"></i></div>
    <div class="lightSettings on"  ng-show="showHueSelect" ng-click="showHueSelect=false; sendCmd('hpUpdateScreen', 'ON')"><i class="glyphicon glyphicon-adjust"></i></div>

   <div class="row" ng-show="showHueSelect && item.name.split('_')[1]=='Dimmable'">
  					<div ng-init="slider_Volume = {
            'item': item.name + '_Brightness',
            'vertical': false,
            'floor': 0,
            'ceil': 100,
            'step': 1,
            'precision': 1,
            'unit': '%',
            'hidelabel': true,
            'hidelimits': true,
            'hidepointer': true,
            'showticks': false,
            'bigslider': false
            }" >
          </div>
     <br>Brightness {{itemValue(item.name + '_Brightness')}} %</br>
        	<widget-slider ng-model="slider_Volume"  id="dimmer-slider" ng-init="showHueSelect = false"/>         
    </div>
      <div class="hueSelect" ng-init="showHueSelect = false" ng-show="showHueSelect && item.name.split('_')[2]=='colour'">
         
        	<a href="" ng-click="sendCmd(item.name, 'OFF')"><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 + '_rgb', color.hsb);" ng-repeat="color in hueColors" ng-style="{ 'background': color.hex }"></a>
				
      </div> 
    
    </div>
 
</div> 
    
</div>
<div class="section">  
<div class="sectionIconContainer">
    <div class="sectionIcon glow" ng-if="itemValue('OutdoorLighting')=='ON'">
      <svg viewBox="0 0 35 35"><use xlink:href="/static/matrix-theme/squidink.svg#light-bulb"></use></svg>    
    </div>  
    <div class="sectionIcon" ng-if="itemValue('OutdoorLighting')=='OFF'">
      <svg viewBox="0 0 35 35"><use xlink:href="/static/matrix-theme/squidink.svg#light-bulb"></use></svg>    
    </div>
  </div>

      <div class="title"><div class="name">Outdoor Lights</div><div class="summary">ON: {{ ( filtered2 | filter: { state: 'ON' } ).length }} of {{filtered2.length}}</div></div>

  <div ng-repeat="item in itemsInGroup('OutdoorLighting')| filter:query as filtered2">
    
		<div class="lightbtnContainer" ng-if="item.name.split('_')[1]!='Dimmable'" ng-click="sendCmd('hpUpdateScreen', 'ON')">
      <div class="lightbtn" ng-if="itemValue(item.name)!='ON'" ng-click="sendCmd(item.name, 'ON')"><i class="glyphicon glyphicon-off"></i></div>
      <div class="lightbtnon" ng-if="itemValue(item.name)=='ON'" ng-click="sendCmd(item.name, 'OFF')"><i class="glyphicon glyphicon-off"></i></div>
   	
 			<div class="sub-title">{{item.label}}</div>
			</div> 

  </div>

  </div>

and this is the CSS, you can take what you need out of this

@charset "UTF-8";

/* latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 100;
  src: local('Roboto Thin'), local('Roboto-Thin'), url('/static/matrix-theme/Roboto-Thin.ttf') format('truetype');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}
/* latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 200;
  src: local('Roboto Light'), local('Roboto-Light'), url('/static/matrix-theme/Roboto-Light.ttf') format('truetype');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}
/* latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: local('Roboto Regular'), local('Roboto-Regular'), url('/static/matrix-theme/Roboto-Regular.ttf') format('truetype');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}

/* latin */
@font-face {
  font-family: 'Orbitron';
  font-style: normal;
  font-weight: 400;
  src: local('Orbitron Regular'), local('Orbitron-Regular'), url(https://fonts.gstatic.com/s/orbitron/v10/yMJRMIlzdpvBhQQL_Qq7dy0.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* vietnamese */
@font-face {
  font-family: 'VT323';
  font-style: normal;
  font-weight: 400;
  src: local('VT323 Regular'), local('VT323-Regular'), url(https://fonts.gstatic.com/s/vt323/v10/pxiKyp0ihIEF2isQFJXGdg.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'VT323';
  font-style: normal;
  font-weight: 400;
  src: local('VT323 Regular'), local('VT323-Regular'), url(https://fonts.gstatic.com/s/vt323/v10/pxiKyp0ihIEF2isRFJXGdg.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'VT323';
  font-style: normal;
  font-weight: 400;
  src: local('VT323 Regular'), local('VT323-Regular'), url(https://fonts.gstatic.com/s/vt323/v10/pxiKyp0ihIEF2isfFJU.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* cyrillic-ext */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans Regular'), local('OpenSans-Regular'), url(https://fonts.gstatic.com/s/opensans/v16/mem8YaGs126MiZpBA-UFWJ0bbck.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans Regular'), local('OpenSans-Regular'), url(https://fonts.gstatic.com/s/opensans/v16/mem8YaGs126MiZpBA-UFUZ0bbck.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans Regular'), local('OpenSans-Regular'), url(https://fonts.gstatic.com/s/opensans/v16/mem8YaGs126MiZpBA-UFWZ0bbck.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans Regular'), local('OpenSans-Regular'), url(https://fonts.gstatic.com/s/opensans/v16/mem8YaGs126MiZpBA-UFVp0bbck.woff2) format('woff2');
  unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans Regular'), local('OpenSans-Regular'), url(https://fonts.gstatic.com/s/opensans/v16/mem8YaGs126MiZpBA-UFWp0bbck.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans Regular'), local('OpenSans-Regular'), url(https://fonts.gstatic.com/s/opensans/v16/mem8YaGs126MiZpBA-UFW50bbck.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans Regular'), local('OpenSans-Regular'), url(https://fonts.gstatic.com/s/opensans/v16/mem8YaGs126MiZpBA-UFVZ0b.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
	font-weight: 100;
 -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */	
}

:root {
	--body-bg:#212124;
  --body-color: #a4a4a4;
  --primary-color:	#7EB26D; /* was var(--primary-color-rgb-opacity-low) */
  --primary-color-rgb-opacity-low:rgba(205,231,0,0.1);
  --primary-color-rgb-opacity-high:rgba(205,231,0,0.6);
  --light-button-color: rgba(126,178,109,1); /* was var(--primary-color-rgb-opacity-low) */
  --title-color: var(--widget-text-color,#def) ;
  --box-bg:none;
  --header-bg: var(--body-bg);
  --widget-design-bg: #191716;
  --widget-text-color: #F0F0F0;
  --widget-border-radius: 10px;
  --widget-box-shadow: none;
  --icon-color-filter: invert(34%) sepia(100%) hue-rotate(22deg) saturate(5000%);
  --icon-color-off-filter: invert(60%) sepia(80%) hue-rotate(180deg);
  --icon-backdrop-filter: invert(60%) sepia(100%) hue-rotate(165deg) opacity(15%);
  --chart-stroke: #456;
  --chart-fill: #89a;
  --chart-tooltip: #fff;
  --colorpicker-border: #191716;
  --colorpicker-stroke: #456;
  --colorpicker-fill: #89a;
  --image-border: #191716;
  --switch-off-color: #89a;
  --switch-on-color: var(--primary-color);
  --slider-pointer-color: #234;
  --slider-pointer-bg-color: #def;
  --slider-ceil-color: #def;
  --slider-bubble-bg-color: #09120f;
  --slider-bubble-border-color: #fff;
  --slider-bubble-color: #a4a4a4;
  
  --control-text-color:var(--primary-color); 
  
  
  
}

::-webkit-scrollbar{display:none}

body {
	font-family: Open Sans, sans-serif;
	background: var(--body-bg);
	margin: 20px;
	
}

.box {
    box-shadow: 0 0 0 0 rgba(0, 0, 0, .0);
}
/* Don't uppercase drawer menu entries */
.drawer ul.menu li {
    text-transform: none !important;
}

.icon-tile.colorize {
    filter: invert(60%) sepia(100%) hue-rotate(185deg) saturate(1000%);
    -webkit-filter: invert(60%) sepia(100%) hue-rotate(185deg) saturate(1000%);
    filter: var(--icon-color-filter, invert(60%) sepia(100%) hue-rotate(185deg) saturate(1000%));
    -webkit-filter: var(--icon-color-filter, invert(60%) sepia(100%) hue-rotate(185deg) saturate(1000%));
}
.dashboard-title {
    text-transform: uppercase;
    color: white;
    font-size: 30px;
    font-weight: 100;
}
.header {
    position: static;
    margin: 0px;
    width: 100%;
    /* padding: 8px; */
    z-index: 99;
    background: #000;
    background: var(--header-bg,#000);
}

.icon-tile.colorize {
    filter: invert(60%) sepia(100%) hue-rotate(185deg) saturate(1000%);
    -webkit-filter: invert(60%) sepia(100%) hue-rotate(185deg) saturate(1000%);
    filter: var(--icon-color-filter, invert(60%) sepia(100%) hue-rotate(185deg) saturate(1000%));
    -webkit-filter: var(--icon-color-filter, invert(60%) sepia(100%) hue-rotate(185deg) saturate(1000%));
}


.drawer{background-color:#212124;background:linear-gradient(to right,#394636 0,#212124 3%,#212124 97%,#394636 100%)}

.drawer ul.menu{background:linear-gradient(to right,#394636 0,#212124 3%,#212124 97%,#394636 100%)}

.drawer ul.menu li{width:100%;color:var(--widget-text-color,#def);font-size:24px;line-height:20px;padding:36px;background:0 0;border-bottom:1px solid #252a24!important}

.drawer ul.menu li.head{background:linear-gradient(to right,#394636 0,#212124 3%,#212124 97%,#394636 100%);opacity:0;height:100px}

.drawer ul.menu li.active,.drawer ul.menu li:hover{background:linear-gradient(to right,#7eb16d 0,#394636 3%,#394636 97%,#7eb16d 100%)}

.drawer ul.menu li:hover{color:#7eb26d}

.drawer ul.menu li.active:not(.head){background:linear-gradient(to right,#ddf2d6 0,#7eb16d 3%,#394636 97%,#7eb16d 100%);color:#fff;border-bottom:1px solid #252a24!important;position:relative;width:calc(100% - 0px)}

.drawer footer{position:fixed;left:0;bottom:0;font-size:11px;color:#475943;padding:10px;background:linear-gradient(to right,#394636 0,#212124 3%,#212124 97%,#394636 100%)}

.widget-clock .time{font-size:20px;color:#394636}

#glyph {
vertical-align: center;

}

#glyphStop {
vertical-align: center;
}


.widgetcontainer {
	padding: 5px;
	border-radius:var(--widget-border-radius);
	box-shadow:	3px 3px 15px #000,inset 0px 0px 15px rgba(0,0,0,0.5),inset 0px 0px 25px rgba(0,0,0,0.3);
	background-color:rgba(255,255,255,0.1);
	text-align: left;
	color: var(--widget-text-color);
	background-image: linear-gradient(to right, var(--primary-color-rgb-opacity-low), var(--primary-color-rgb-opacity-high));
	background-size: 0%;
}

.widgetcontainer:active, .widgetcontainer:active.on {
	box-shadow:inset 3px 3px 15px #000;
	padding-top: 8px;
	padding-bottom: 2px;
	padding-left: 8px;
	padding-right: 2px;
}

.widgetcontainer .newsub-title {
	font-size: 15px;
    text-transform: uppercase;
    padding-bottom: 10px;
    padding-top: 10px;
    
}


.widgetcontainer .new-name {
	display:inline-block;
	font-size: 20px;
	padding: 10px 10px 10px 10px;
	text-shadow: 2px 2px 8px #1A1A1A;


}



@media only screen {
     /* For mobile: */
    .section {
		
    }
	
	#AlarmSection {
	width:100%;
	float:left;
}

		#ZoneSection {
		width:100%;
		float:left;
		}
.section .lightbtnContainer {
	width:49%;
	float:left;
}


	.section .widget {
		width: 100%;
		float: left;
		
	}

        .section .widget .col1 {
                width: 50%;
                float: left;
        }
        .section .widget .col100 {
                width: 100%;
                float: left;
        }
        .section .widget .col80 {
                width: 80%;
                float: left;
        }
        .section .widget .col75 {
                width: 75%;
                float: left;
        }
        .section .widget .col50 {
                width: 50%;
                float: left;
        }
        .section .widget .col40 {
                width: 40%;
                float: left;
        }
        .section .widget .col33 {
                width: 33%;
                float: left;
        }
        .section .widget .col25 {
                width: 25%;
                float: left;
        }
        .section .widget .col20 {
                width: 20%;
                float: left;
        }
	
	.section .widgetwide {
		width: 100%;
		float: left;
	}
	.section .bigDash {
		margin-left: auto;
		width: 100%;
	    margin-right: auto;
		
	}      
	.header a {
		display: none;
	}	 
  	
}


@media only screen and (min-width: 650px) {
    /* For tablet: */
    /* For tablet: */
    .section {
    }
 

	#AlarmSection {
	width:33%;
	float:left;
}

		#ZoneSection {
		width:60%;
		float:left;
		}
		
		.section .lightbtnContainer {
	width:16%;
	float:left;
}
	.section .widget {
		width: 32.5%;
		float: left;
	}
        .section .widget .col1 {
                width: 50%;
                float: left;
        }
        .section .widget .col100 {
                width: 100%;
                float: left;
        }
        .section .widget .col80 {
                width: 80%;
                float: left;
        }
        .section .widget .col75 {
                width: 75%;
                float: left;
        }
        .section .widget .col50 {
                width: 50%;
                float: left;
        }
        .section .widget .col40 {
                width: 40%;
                float: left;
        }
        .section .widget .col33 {
                width: 33%;
                float: left;
        }
        .section .widget .col25 {
                width: 25%;
                float: left;
        }
        .section .widget .col20 {
                width: 20%;
                float: left;
        }
		
	.section .widgetwide {
		width: 100%;
		float: left;
	}
	.section .bigDash {
		margin-left: auto;
		width: 33%;
	    margin-right: 5px;
		clear: left;
	}     
	.header a {
		display: inline;
	}
}
@media only screen and (min-width: 1000px) {
    /* For desktop: */
    .section {
    }

	
	#AlarmSection {
	width:33%;
	float:left;
}

		#ZoneSection {
		width:60%;
		float:left;
		}
		
	.section .lightbtnContainer {
	width:16%;
	float:left;
}
	.section .widget {
		width: 33%;
		float: left;
	}
        .section .widget .col1 {
                width: 50%;
                float: left;
        }
        .section .widget .col100 {
                width: 100%;
                float: left;
        }
        .section .widget .col80 {
                width: 80%;
                float: left;
        }
        .section .widget .col75 {
                width: 75%;
                float: left;
        }
        .section .widget .col50 {
                width: 50%;
                float: left;
        }
        .section .widget .col40 {
                width: 40%;
                float: left;
        }
        .section .widget .col33 {
                width: 33%;
                float: left;
        }
        .section .widget .col25 {
                width: 25%;
                float: left;
        }
        .section .widget .col20 {
                width: 20%;
                float: left;
        }
       

	
	.section .widgetwide {
		width: 100%;
		float: left;
	}
	.section .bigDash {
		margin-left: auto;
	    width: 33%;
	    min-width: 280px;
	    margin-right: auto;
	}   
	
		.header a {
		display: inline;
	} 
}
.row{
	padding-left: 15px;
	padding-right: 15px;
}

.section {
	width: 100%;
	background: none;
	overflow: hidden;
	margin-bottom: 10px;
	border-radius:var(--widget-border-radius);
	float: left;
	text-align: left;
	color: white;
	padding: 3px;	
	box-shadow: none;
}

#AlarmSection {
	width:40%;
	float:left
	
}

#ZoneSection {
width:59%;
float:right;

}

.section a {
  color: #ff2c0a;
}
.section .title {
	clear: left;
	overflow: auto;
  	zoom: 1;
	padding-bottom:10px;
	padding-left:5px;
}
.title  {
    font-size: 23px;
    text-transform: uppercase;
    padding-bottom: 10px;
    padding-top: 10px;
    color: var(--title-color);
}
.sub-title {
    font-size: 17px;
    margin: 5px 5px 5px 15px;
    color: var(--widget-text-color);
		 text-shadow: 3px 3px 5px #394636;

}
.section .title .name {
	font-size: 23px;
	font-weight: 100;
	display: inline-block;
	float: left;
	 text-shadow: 3px 3px 5px #394636;


}
.section .title .summary {
	display: inline-block;
    float: left;
    border: 1px solid #565f58;
    border-radius:var(--widget-border-radius);
    padding: 4px 10px 2px 10px;
    font-size: 16px;
    color: #565f58;
    margin-left: 20px;
    font-weight: 300;
    margin-top: 5px;
}
.section .sectionIconContainer {
	position: relative;
	width: 100%;
	margin-bottom:15px;
}
.section .sectionIcon {
	width: 50px;
	height: 50px;
	position: absolute ;
	right: 0px;
}

.section .sectionIcon .glow  {
	width: 50px;
	height: 50px;
	position: absolute ;
	right: 0px;

}
.section .sectionIcon svg {
    stroke: #565f58;
    fill: #565f58;
    stroke-width: 0.3px;
}

.section .sectionIcon.glow svg {
	stroke: var(--primary-color);
	fill: var(--primary-color);
	opacity: 100%;
	stroke-width: 0.6px;

}

.section .bigDash {
	float:right;
    padding-bottom: 5px;
    padding-top: 10px;
}

.section .bigDash .description {
    text-transform: uppercase;
    text-align: center;
    width: 37%;
    margin-left: auto;
    margin-right: auto;
    border: 1px solid #4e4b4b;
    border-radius:var(--widget-border-radius);
    padding: 4px 2px 2px 2px;
}
.section .bigDash .top {
    clear: left;
    margin-left: auto;
    width: 100%;
    margin-right: auto;
}
.section .bigDash .bottom {
    clear: left;
    margin-left: auto;
    width: 250px;
    margin-right: auto;
    height: 35px;
}
.section .bigDash .bottom .value {
	padding-top: 5px;
	padding-left: 5px;
	padding-right: 25px;
	float:left;
	color: white;
}
.section .bigDash .top .icon {
	width: 80px;
	height: 80px;
	margin-top: 15px;
	float: left;
}
.section .bigDash .bottom .icon {
	width: 30px;
	height: 30px;
	padding-top: 0px;
	float: left;
}
.section .bigDash .graph {
	text-align: center;
    clear: left;	
}
.section .bigDash .trend {
    width: 20px;
    height: 20px;
    position: relative;
    display: inline-block;
    top: 40px;
    left: -26px;
} 

.section .bigDash .trend svg {
    stroke: #565f58;
    stroke-width: 2px;
}
.section .bigDash .trend.up svg {
    stroke: var(--primary-color);
    animation: upy 0.2s ease-in-out infinite alternate;
}
.section .bigDash .trend.down svg {
    stroke: #ff2c0a;
    animation: downy 0.2s ease-in-out infinite alternate;
}


@keyframes upy {
    0% {
        transform: translate(0px, 0px);
    }
    100% {
        transform: translate(0px, 5px);
    }
}
@keyframes downy {
    0% {
        transform: translate(0px, 0px);
    }
    100% {
        transform: translate(0px, -5px);
    }
}



.graph img {
	border-bottom: 1px solid #565f58;
}
.graph .legend {
    font-size: 10px;
    text-transform: uppercase;
    padding-top: 7px;
    color: #aaa;
    font-weight: 300;
	border-top: 1px solid #565f58;
}

.section .widget {
	position: relative;
  cursor: pointer;
  border-style: solid;
  border-width: 1px; 
  border-color: #565f58;
  border-radius:var(--widget-border-radius);
	box-shadow: 2px 2px 5px rgba(0,0,0,0);
	padding: 0px;
	margin: 2px;
	background-color: none;
	z-index:1;
}
.section .widget .bg{
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-image: none;
	background-repeat: no-repeat;
	background-position: center; /* Center the image */
	background-size: cover; /* Resize the background image to cover the entire container */
	opacity: .1;
    width: 100%;
    height: 100%;
}
.section .widget .container {
	padding: 10px 3px 10px 3px;
	background:none; 
	border-radius:15px;
}


@keyframes slide {  

	from {width:0%; }
	
	
}

.section .widget .icon {
	width: 30px;
	height: 30px;
	float: left;
	padding-left:5px;
	
}

.section .widget .SwitchIcon {
	width: 60px;
	height: 32px;
	position:relative;
	float: right;
	padding-right:10px;
}

.section .icon svg, .section .control svg {
  stroke-width: 0.3px;

}
.section .icon.off svg {
  stroke: #565f58;
  fill: #565f58;


  
}
.section .icon.on svg {

  stroke: var(--primary-color);
  fill: var(--primary-color);


}

.section .icon.spinoff svg {
  stroke: #565f58;
  fill: #565f58;
  animation: spin 0.6s reverse;

}

.section .icon.spinon svg {

  stroke: var(--primary-color);
  fill: var(--primary-color);
  animation: spin 0.6s;
}
.section .icon.warn svg {
  stroke: #ff2c0a;
  fill: #ff2c0a;
  animation: blinker 1s linear infinite;
}
.section .icon.blink svg {
  stroke: #00afb8;
  fill: #00afb8;
	animation: blinker 1s linear infinite;
}

@keyframes spin {  

	from {transform: rotate(0deg); stroke: #565f58; fill: #565f58;}
	to { transform: rotate(360deg);stroke: var(--primary-color);fill: var(--primary-color);}
	
}

@keyframes blinker {  

	50% { opacity: 0.1;}
	
}



@keyframes neonGlow{
	0%	{	:0 0 10px rgba(255,255,255,.8),0 0 20px rgba(255,255,255,.8),0 0 22px rgba(255,255,255,.8),0 0 40px rgb(126,177,109,.8),0 0 60px rgba(126,177,109,.8),0 0 80px rgba(126,177,109,.5),0 0 100px rgba(126,177,109,.5),0 0 140px rgba(126,177,109,.5),0 0 200px rgba(126,177,109,.5);	}
	100%{	text-shadow:0 0 2px rgba(255,255,255,.8),0 0 8px rgba(255,255,255,.8),0 0 10px rgba(255,255,255,.8),0 0 20px rgba(126,177,109,.8),0 0 30px rgba(126,177,109,.8),0 0 40px rgba(126,177,109,.8),0 0 50px rgba(126,177,109,.5),0 0 80px rgba(126,177,109,.5)	}
	}

.section .icon.wind svg {
  stroke: #565f58;  
  fill: #565f58;  
}
.section .icon.on.wind svg {
  stroke: var(--primary-color);  
  fill: var(--primary-color);  
}
.section .icon.wind {
  	animation: windy 0.5s ease-in-out infinite;
}
@keyframes windy {
    0% {
        transform: rotate(180deg);
    }
    50% {
        transform: rotate(200deg);
    }
    100% {
        transform: rotate(180deg);
    }
}

.section .widget select {
    background: rgba(0,0,0,0);
    border: 0px;
    outline: none;
    text-align: right;
    text-align-last: right;
}

.section .widget.disabled {
  opacity: 0.2;
}


.section .widget .name {
	height: 35px;
	padding-top: 6px;
	margin-bottom: 10px;
	padding-right: 5px;
	padding-left:10px;
	float: left;
	text-transform: capitalize;
	font-weight: 100;
	font-size:20px;
	color:var(--widget-text-color);
	clear: right;
	text-shadow: 2px 2px 8px #1A1A1A;


}

.section .widget .name .value {
	color: var(--primary-color);
	font-weight: bold;
	text-align: left;

}
.section .widget .graph {
	text-align: center;
	padding:20px;
	margin-left: 10px;
}




.section .widget .appLogo {
    width: 150px;
    margin-right: 20px;
    margin-left: auto;
    fill: var(--primary-color);
    padding-top: 6px;
    height: 50px;
    color: var(--primary-color);
    text-align: right;
    font-size: 25px;
    font-weight: 300;
	  

}
@keyframes neonSVG {  

	50% {  opacity:0.1;}
	
}


.section .widget .sceneGroup {
  float: right;
    font-size: 14px;
    text-transform: uppercase;
    color: #565f58;
    font-weight: 300;
    padding-right: 20px;
	clear:left;
}
.scene {
    border: 1px solid #565f58;
    border-radius: 5px;
    padding: 6px 6px 6px 6px;
    text-align: center;
    margin-bottom: 8px;
    width: 133px;
    float: right;
    margin-left: 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.scene.on {
  background-color: #393d3a;
  border: 1px solid #393d3a;
  color: var(--primary-color);
}

.section .widget .valueGroup {
	padding-right: 20px;
  min-height: 35px;  
}
.section .widget .valueGroup .value {
	text-align: right;
	padding-top: 6px;
	color: var(--primary-color);
	font-weight: bold;
}
.section .widget .valueGroup .value.warning {
    color: #ff2c0a;
    font-weight: 600;
}
.section .widget .valueGroup .value.active {
    color: #00afb8;
}
.section .widget .valueGroup .value:nth-child(n+2) {
	color: #1d4d3b;	
}

.section .controlGroup {
  padding-left: 10px;
  padding-right: 10px;
}
.section .widgetwide .controlGroup {
  clear:left;
}
.controls{
	margin-top:20px;
}
.control {
	float:right;
position:relative;
cursor:pointer;
width:50px;
height:50px;
line-height:50px;
background: radial-gradient(circle at 1% 1%, #808080, #202020);
margin-left:20px;
margin-right:10px;
margin-top:10px;
margin-bottom:20px;
color:rgba(126,178,109,1);
text-shadow:-1px -1px 0 rgba(255,255,255,.8),1px 1px 2px rgba(0,0,0,1);
font-size:2.4em;
box-shadow:inset 1px 1px 2px rgba(255,255,255,.3),inset 3px 15px 45px rgba(255,255,255,.1),inset -1px -1px 2px rgba(0,0,0,.5),inset -3px -15px 45px rgba(0,0,0,.2),1px 5px 30px -4px rgba(0,0,0,1);

}

.control:before{
border-radius:50%;
	content:"";
background:#1A1A1A;
width:70px;
height:70px;
position:absolute;
top:-10px;
left:-10px;
z-index:-1;
box-shadow:inset -1px -1px 2px rgba(255,255,255,.3),inset -5px -15px 40px rgba(255,255,255,.1),inset 1px 1px 2px rgba(0,0,0,.5),inset 5px 15px 40px rgba(0,0,0,.2),-2px -40px 50px -20px rgba(255,255,255,.1),2px 35px 50px -10px rgba(0,0,0,.4),0 0 25px 8px rgba(60,60,60,1)
}

.control:active{
color:rgba(0,0,0,.7);
text-shadow:1px 1px 0 rgba(255,255,255,.15);
box-shadow:inset 1px 1px 2px rgba(255,255,255,.3),inset 3px 15px 45px rgba(0,0,0,.2),inset -1px -1px 2px rgba(0,0,0,.5),inset -3px -15px 45px rgba(255,255,255,.1),1px 5px 10px -4px rgba(0,0,0,1)
}

.centerGroup{
	clear: both;
	text-align: center;
	margin-top:20px;
	margin-bottom:20px;

}
.centerGroup .controlcentre {
	position:relative;
  background-color: #2a3439;
  background: radial-gradient(circle at 1% 1%, #808080, #202020);
  border-style: solid;
  border-color: #313131;
  border-width: 5px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin: 0 auto; 
margin-left:20px;
margin-right:20px;
margin-top:15px;
margin-bottom:15px;
  text-align: center;
  color: var(--control-text-color);
  text-shadow: 2px 2px 5px #000000;
  box-shadow: 0px 0px 15px #000, inset 1px 1px 1px #808080;
  line-height: 80px;
  font-weight: bold; 
  font-size: 30px;
  display: inline-block;
  stroke: var(--primary-color);
  fill: var(--primary-color);
  -webkit-transition:.1s ease-out;
-moz-transition:.1s ease-out;-o-transition:.1s ease-out;
transition:.1s ease-out
}

.controlcentre:before{
content:"";
background:#1A1A1A;
width:90px;
height:90px;
position:absolute;
top:-9px;
left:-9px;
z-index:-1;box-shadow:inset -1px -1px 2px rgba(255,255,255,.3),
inset -5px -15px 40px rgba(255,255,255,.1),
inset 1px 1px 2px rgba(0,0,0,.5),
inset 5px 15px 40px rgba(0,0,0,.2),
-2px -40px 50px -20px rgba(255,255,255,.1),
2px 35px 50px -10px rgba(0,0,0,.4),
0 0 25px 8px rgba(60,60,60,1)
}

.centerGroup .controlcentre:active,
.section .controlLeft:active,{
	box-shadow:0px 0px 15px #000,inset 3px 3px 15px #000;
	transform: scalex(0.95) scaley(0.95);
	
}


.section .controlLeft {
	float: left;
	background-color: #2a3439;
	background: radial-gradient(circle at 1% 1%, #808080, #202020);
	border-style: solid;
	border-color: #313131;
	border-width: 2px;
	width: 49px;
	height: 49px;
	border-radius: 50%;
	text-align: center;
	color: var(--control-text-color);
	text-shadow: 2px 2px 5px #000000;
	box-shadow: 0px 0px 8px #000, inset 1px 1px 1px #808080;
	margin: 2px;
	line-height: 44px;
	font-weight: bold;  
	display: inline-block;
	stroke: var(--primary-color);
	fill: var(--primary-color);
	
}

.section .lightbtnContainer {
	background-color: none;
	text-align: center;
	padding: 10px 0px 0px 0px;
	border-radius:50%;
}


.lightbtn,.lightbtnon, .lightbtn:before, .lightbtnon:before, .lightbtnon:after, .lightbtn:after {
	border-radius: 50%;
}

.lightbtn:after{
content:"";
background: transparent;
width:85px;
height:85px;
position:absolute;
top:-4.1px;
left:-4.5px;
z-index:-1;
box-shadow:inset -1px -1px 2px rgba(255,255,255,.3),inset -5px -15px 40px rgba(255,255,255,.1),inset 1px 1px 2px rgba(0,0,0,.5),inset 5px 15px 40px rgba(0,0,0,.2),2px 35px 50px -10px rgba(0,0,0,.4),0 0 10px 8px rgba(60,60,60,1);

}

.lightbtnon:after{
content:"";
background: transparent;
width:85px;
height:85px;
position:absolute;
top:-4.1px;
left:-4.5px;
z-index:2;
box-shadow:inset -1px -1px 2px rgba(255,255,255,.3),inset -5px -15px 40px rgba(255,255,255,.1),inset 1px 1px 2px rgba(0,0,0,.5),inset 5px 15px 40px rgba(0,0,0,.2),2px 35px 50px -10px rgba(0,0,0,.4),0 0 10px 8px rgba(60,60,60,1);


}

.lightbtnon:before{
content:"";
background: linear-gradient(to right, transparent 0% ,transparent 50%, var(--primary-color) 100%);
width:85px;
height:85px;
position:absolute;
top:-4.8px;
left:-4.5px;
z-index:-1;
animation: spinPulse 4s linear infinite;	
}
.lightbtn:before{
content:"";
background:#1A1A1A;
width:85px;
height:85px;
position:absolute;
top:-4.8px;
left:-4.5px;
z-index:-1;
}


.lightSettings {

    border-radius: var(--widget-border-radius);
    padding: 6px 6px 6px 6px;
    text-align: center;
    margin-bottom: 8px;
	margin-left:auto;
	margin-right:auto;
	background-color: #393d3a;
	width:50%;
}
.lightSettings.on {
  background-color: #393d3a;
  color: var(--primary-color);
}

.lightbtn {

	position:relative;
	cursor:pointer;
	text-align:center;
	border-style: solid;
	border-color: #313131;
	border-width: 2px;
	width:80px;
	height:80px;
	line-height:80px;
	display:inline-block;
	background: radial-gradient(circle at 1% 1%, #808080, #202020);
	margin-top:10px;
	margin-bottom:10px;
	font-size:3.4em;

	color:var(--body-bg);
}

.lightbtnon {
	position:relative;
	cursor:pointer;
	text-align:center;
	border-style: solid;
	border-color: #313131;
	border-width: 2px;
	width:80px;
	height:80px;
	line-height:80px;
	display:inline-block;
	background: radial-gradient(circle at 1% 1%, #808080, #202020);
	margin-top:10px;
	margin-bottom:10px;
	font-size:3.4em;	
	color:var(--light-button-color);

}

.lightbtn:active, .lightbtnon:active{
color:rgba(0,0,0,.7);
text-shadow:1px 1px 0 rgba(255,255,255,.15);
box-shadow:inset 1px 1px 2px rgba(255,255,255,.3),inset 3px 15px 45px rgba(0,0,0,.2),inset -1px -1px 2px rgba(0,0,0,.5),inset -3px -15px 45px rgba(255,255,255,.1),1px 5px 10px -4px rgba(0,0,0,1)
}




@keyframes spinPulse {
    0% { transform:rotate(0deg); }
	100% { transform:rotate(360deg); }
}


.btnbox,.control,.gbtn{display:inline-block}

.btnbox,.control,.drawer footer,.gbtn{text-align:center}

.gbtn,.control,.gbtn:before{border-radius:999px}

.gbtn{
position:relative;
cursor:pointer;
width:70px;
height:70px;
line-height:65px;
background: radial-gradient(circle at 1% 1%, #808080, #202020);
margin-left:20px;
margin-right:20px;
margin-top:10px;
margin-bottom:10px;
color:rgba(126,178,109,1);
text-shadow:-1px -1px 0 rgba(255,255,255,.8),1px 1px 2px rgba(0,0,0,1);
font-size:2.4em;
box-shadow:inset 1px 1px 2px rgba(255,255,255,.3),inset 3px 15px 45px rgba(255,255,255,.1),inset -1px -1px 2px rgba(0,0,0,.5),inset -3px -15px 45px rgba(0,0,0,.2),1px 5px 30px -4px rgba(0,0,0,1);

}

.gbtn:before{
	content:"";
background:#1A1A1A;
width:90px;
height:90px;
position:absolute;
top:-10px;
left:-10px;
z-index:-1;
box-shadow:inset -1px -1px 2px rgba(255,255,255,.3),inset -5px -15px 40px rgba(255,255,255,.1),inset 1px 1px 2px rgba(0,0,0,.5),inset 5px 5px 20px rgba(0,0,0,.2),2px 15px 30px -10px rgba(0,0,0,.4),0 0 10px 8px rgba(60,60,60,1);
}

.gbtn:active{
color:rgba(0,0,0,.7);
text-shadow:1px 1px 0 rgba(255,255,255,.15);
box-shadow:inset 1px 1px 2px rgba(255,255,255,.3),inset 3px 15px 45px rgba(0,0,0,.2),inset -1px -1px 2px rgba(0,0,0,.5),inset -3px -15px 45px rgba(255,255,255,.1),1px 5px 10px -4px rgba(0,0,0,1)
}


.section .controlMenu {
  margin-right: 5px;
  margin-bottom: 5px;
  background-color: #393d3a;
  width: 60px;
  height: 60px; 
  float: right;
  border-radius: 20%;
  text-align: center;
  color: var(--primary-color);
  line-height: 61px;
  font-weight: 100;  
}

.control #on {
width:100px;
height:100px;
}
.section .control svg {
  stroke: var(--primary-color);
  stroke-width: 0.1;
  fill: var(--primary-color);
	padding: 8px;
	
}


.section .bigDash .value {
	font-weight: 100;
}
.section .bigDash .top .icon svg{
  stroke-width: 0.3px;
}

.section .bigDash .main {
	font-size: 95px;
	letter-spacing: 0px;
	line-height: 110px;
	float:left;
	color: white;
	
}
.section .bigDash .decimals {
  font-size: 60px;
  letter-spacing: 0px;
  line-height: 0px;
  float: left;
  color: #575f59;
  padding-top: 65px;
}
.section .bigDash .sub {
	font-size: 45px;
	color: #575f59;
	display:inline;
	text-align: left;
}


.batteryGroup {
    padding-left: 20px;
}
.battery {
	width: 100%;
	height: 90px;	
    box-sizing: border-box;
    padding: 10px 30px 10px 30px;
}

.battery .batteryShell {
    height: 100%;
    box-sizing: border-box;
	background: #565f58;	
    border-radius: 10px 10px 10px 10px;
	float: left;
    width: 95%;    
}
.battery .batteryTip {
	width: 4%;
    height: 100%;
    float: left;
    margin-left: 1px;
    max-width: 8px;
}
.battery .batteryTip1 {
    width: 100%;
    height: 30%;
}
.battery .batteryTip2 {
    background: #565f58;
    border-radius: 0px 10px 10px 0px;
    width: 100%;
    height: 40%;
}

.battery .batteryShell .batteryLevel {
    width: 75%;
    height: 100%;
    background: repeating-linear-gradient( 90deg,  #11de7b,  #11de7b 20px,  #F642AE 20px,  #F642AE 21px );
    box-shadow: 0 0 20px 10px rgba(17, 222, 123, 0.25);
    border-radius: 10px 0px 0px 10px;
}
.battery .batteryShell .batteryLevel.full {
    width: 75%;
    height: 100%;
    background: #11de7b;
    box-shadow: 0 0 20px 10px rgba(17, 222, 123, 0.25);
    border-radius: 10px 10px 10px 10px;
}
.battery .batteryShell .batteryLevel.low {
    background: repeating-linear-gradient( 90deg,  #ff2c0a,  #ff2c0a 20px,  #B82009 20px,  #B82009 21px );
}
.battery .batteryTip2.full {
    background: #11de7b;
}



.fuelGroup {
    padding-left: 20px;
}
.fuel {
    width: 100%;
    height: 40px;
    box-sizing: border-box;
    padding: 10px 30px 10px 30px;
}

.fuel .fuelShell {
    height: 100%;
    box-sizing: border-box;
	background: #565f58;	
    border-radius: 10px 10px 10px 10px;
	float: left;
    width: 95%;    
}
.fuel .fuelTip {
    width: 8px;
    height: 100%;
    float: left;
    margin-left: 1px;    
}
.fuel .fuelTip1 {
    width: 100%;
    height: 30%;
}
.fuel .fuelTip2 {
    background: #565f58;
    border-radius: 0px 10px 10px 0px;
    width: 100%;
    height: 40%;
}

.fuel .fuelShell .fuelLevel {
    width: 75%;
    height: 100%;
    background: repeating-linear-gradient( 90deg,  #11de7b,  #11de7b 20px,  #F642AE 20px,  #F642AE 21px );
    /* box-shadow: 0 0 20px 10px rgba(17, 222, 123, 0.25); */
    border-radius: 10px 0px 0px 10px;
}
.fuel .fuelShell .fuelLevel.low {
    background: repeating-linear-gradient( 90deg,  #ff2c0a,  #ff2c0a 20px,  #B82009 20px,  #B82009 21px );
}



.section .music {
    width: 100%;
    float: right;
    padding: 15px 5px 15px 5px;
}
.section .music .cover {
	width: 120px;
    height: 120px;
    background-size: cover;
    margin-left: 5px;
    margin-bottom: 50px;
    float: left;
}
.section .music .track {
	width:100%;
    text-align: left;
    font-size: 20px;
    font-weight: 100;
    color: #F642AE; 
}
.section .music .artist {
  width:100%;
    text-align: left;
    font-size: 16px;
    font-weight: 300;
    color: #565f58;
    padding-top:3px;
    padding-bottom: 3px;
}
.section .music .playback {
    width: 60%;
    font-size: 14px;
    font-weight: 100;
    margin-left: auto;
    margin-bottom: 15px;
    float: right;
}
.section .music .playbackTime {
	width: 100%;
    display: inline-block;
    text-align: left;
    /* border: 1px solid red; */
    height: 100%;
    /* line-height: 33px; */
    float: left;
}
.section .music .playbackBarDone {
    background: #F642AE;
    height: 100%;
}
.section .music .playbackBar {
    width: 100%;
    display: inline-block;
    background: #565f58;
    height: 6px;
    /* border: 1px solid rebeccapurple; */
    float: left;
    margin-top: 7px;
}
.section .music .controlGroup {
  margin-left: auto;
    width: 100%;
    padding: 0px 10px 50px 0px;
	clear:both;
}

.hue {
    width: 30px;
    height: 30px;
    display: inline-block;
   
    border-radius: 50%;
}


.hueSelect {
    
	width: 100%;
}
.hueSelect a {
    width: 40px;
    height: 40px;
    display: inline-block;
    margin: 10px 0px 0px 10px;
    border-radius: 100%;
    border: 1px solid rgba(255,255,255,0);
}
.hueSelect a:hover, .hueSelect a:active {
  border: 1px solid white;
  -webkit-transition: 0.2s;
 
}
.section .hueSelectOptions {
    border-radius: 15px 15px 15px 15px;
    border-top: 1px solid #5f7167;
}

.custom-slider.rzslider .rz-bar, #dimmer-slider .rz-bar{
  background-image: linear-gradient(to right, #FFFFFF , var(--primary-color));
  height: 2px;
  border-radius: 7.5px;
  
}
.custom-slider.rzslider .rz-selection, #dimmer-slider .rz-selection {
  background: var(--primary-color);
  opacity: 0;
}

.custom-slider.rzslider .rz-pointer, #dimmer-slider .rz-pointer {
  width: 5px;
  height: 20px;
  top: -9px; /* to remove the default positioning */
  bottom: 0;
  background-color: var(--primary-color);

}

.custom-slider.rzslider .rz-pointer:after, #dimmer-slider .rz-pointer:after {
  display: none;
}

.custom-slider.rzslider .rz-bubble, #dimmer-slider .rz-bubble {
  bottom: 14px;
}

.custom-slider.rzslider .rz-limit, #dimmer-slider .rz-limit {
  font-weight: bold;
  color: var(--primary-color);
}

.custom-slider.rzslider .rz-tick, #dimmer-slider .rz-tick {
  width: 1px;
  height: 10px;
  margin-left: 4px;
  border-radius: 0;
  background: #ffe4d1;
  top: -15px;
}



.custom-slider.rzslider .rz-tick.rz-selected, #dimmer-slider .rz-tick.rz-selected {
  background: var(--primary-color);
}
.dimmerBarDone {
    background: var(--primary-color);
    height: 100%;
	
}

.dimmerBar {
    width: 95%;
    display: inline-block;
    background: #565f58;
	position: relative;
    height: 3px;
    /* border: 1px solid rebeccapurple; */
	margin-left:2.5%;
    margin-top: 7px;
}

.collapsible-menu {
    padding: 0px 30px;
    border-bottom: 3px solid #CDE700;
    box-shadow: 1px 2px 3px rgba(0,0,0,0.2);
	text-align: center;
}
 
.collapsible-menu ul {
    list-style-type: none;
  	font-size:18px;
  	text-align:right;
}
  
ul li2 {
  display:inline-block;
  float: none;
}
  
ul li3 {
  display: block;
	float: left;
  margin-top: 10px;
  color: lightgrey;
  font-weight: 400;
  font-size:18px;
}
  
    a2 {
  display: block;
  color: white;
  text-align: center;
	font-size:25px;
  text-decoration: none;
  border-radius: 0px;
  padding-right:15px;
 


}
  
 .collapsible-menu label {
  display: none;
  visibility: hidden;
  font-size: 0px;
  display: block;
  cursor: pointer;
  }
  
   .collapsible-date {
  visibility: hidden;
  font-size: 20px;
    display: block;
    cursor: pointer;
  }

.collapsible-menu a2 {
    display:block;
    padding: 10px;
  	color: white;
}
  
  
  
  input#menu {
    display: none;
}
  
      
    input:checked ~ .menu-content {
    max-height: 100%;
}
  
  

  
a2.selected {
  font-weight:1000;
  color:#CDE700;
}
  
.menu-content {
  	max-height: 100;
    overflow: hidden;
  
	}

  
  .section .widget .row{
  padding-bottom:2px;
  }

  
.section .widget .summ{
  
	display: inline-block;
    float: right;
    border: 1px solid #CDE700;
    border-radius: 5px;
    padding:3px;
    font-size: 15px;
    color: #CDE700;
    margin-right: 5px;
    font-weight: 300;
    margin-top: 5px;
}
 
  
  .section .lcd {
 
  height: 175px;
  background-color:rgba(255,255,255,0.1);
  border-radius: 15px;
  font-family: Orbitron;
  margin: 2px;
	}

  
  .section .lcd .title{
  width: 50%; 
  height: 50%;
  float: left;
  text-align: center;
  font-size:2em;
  border-right: 1px solid rgba(0,0,0,0.4);
  margin-top: 0 auto;
  margin-bottom: 0 auto;
  display: table;
	}
  
  .section .lcd .state{
  margin: 0;
  width: 50%; 
  height: 50%;
  float: right;
  text-align: center;
  font-size:2em;
  display: table;
	}

    .section .lcd .code{
  width: 100%; 
  height: 40%;
  overflow: hidden;
  text-align: center;
  filter: blur(0.6px);
  font-size:3em;
  border-top: 1px solid rgba(0,0,0,0.4);
  display: table;
	}
3 Likes
640

I wanted to have a look at the theme and downloaded all files from git, but when trying to have a look at one of the json-files in VS-Code it’s totally unreadable with all CR/LF and Tab presented as \n and \t. Any ideas on how to remedy this?

Skärmavbild 2020-03-11 kl. 21.39.28
Skärmavbild 2020-03-11 kl. 21.39.281518×784 199 KB

641

After investigating a bit further I realized you aren’t supposed to manage the json-files in VS Code. Instead you load the widget into HabPanel and edit it there :upside_down_face:

1 Like
643

Hi,

I need help related to slider. How can I make a slider without ng-repeat? So i need one pop-up slider for only one openhab item.

<div class="section">
	<div class="title">Guest room</div>
	<div class="controls">
    <div ng-repeat="item in itemsInGroup('gAnalogThreshold')">  
      <!-- <div class="widget" ng-bind="TemperatureThreshold1" >   -->       
      <div class="widget" ng-if="item.name=='TemperatureThreshold1'" >     
        <div class="name" ng-click="showHueSelect = !showHueSelect">
          <div class="hueSelect" ng-init="showHueSelect = false" ng-show="showHueSelect">
            <div class="hueSelectItem"></div>
            <div class="hueSelectOptions">                        
              <div ng-init="slider = { value: itemValue(item.name), options: { floor: 10, ceil: 30, step: 0.5, precision: 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 class="valueGroup"><div class="value">{{itemValue(item.name) | number:1}}</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#sim-card"></use></svg></div>
      <div class="name">measured</div>
      <div class="valueGroup"><div class="value">{{itemValue('Temperature1') | number:1}} </div></div>			
    </div>
    <div class="widget">
      <div class="icon off"><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/squidink.svg#sim-card"></use></svg></div>
      <div class="name">valve</div>
      <div class="valueGroup"><div class="value">{{itemValue('HVGuest')}} </div></div>			
    </div>  
  </div>    
</div>
644

I’m also VERY interested in your config. Looks almost exactly like the dashboard I recently dreamed up in my head. So if you could share the config, I’d be very happy to learn from it :slight_smile:

645

Hello,

I’m using this theme a while now an desided to make a change for the playlists, for Spotify and Sonos also.
I change it from buttons to a dropdown menu.
This is working fine, but since the sonos is at the bottom, I would like to have the menu go upwards.
My html and css skills are good enough to make some simple changes but have no idea how to do this.

Is there someone who knows how to do this?

Thanks!

Edwin

646

Hello forum,
I can’t display the % value of the particular battery status in my group :frowning:
I tried item.status, item.value … without success. What do i do wrong?

image
image1508×194 45 KB 

<div class="title">Batteries</div>
  <div class="controls">
  <div ng-repeat="item in itemsInGroup('gBattery')">
    <div class="widget wide" ng-if="itemValue(item.name)>='90'">
	 <div class="icon off"><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/squidink.svg#charging-3"></use></svg></div>
     <div class="name">{{item.label}}</div>
	 <div class="valueGroup">
		<div class="value">{{item.value}}%</div>
   	 </div>
    </div>
  </div>
1 Like
647

no feedback at all :frowning:

648

Have you tried itemValue(item.name)?

649

yes. it returns only the name of the item

650

EDIT: did a quick spike and seems as below is working

  <div ng-repeat="item in itemsInGroup('Lights')">
    <div class="widget wide" ng-if="itemValue(item.name)>50">
	 <div class="icon off"><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/squidink.svg#charging-3"></use></svg></div>
     <div class="name">{{item.label}}</div>
	 <div class="valueGroup">
		<div class="value">{{itemValue(item.name)}}%</div>
   	 </div>
    </div>
  </div>

@wiewior - please note you probably have to remove apostrophe in >='90' so >=90.

With the code above I can see which (dimmer) lights are turned on more than 50% …

651

This can not work. There is a loop for going through all of the sensors in the group. So I need to refer to the each of the item.name and its value. Somehow it does not work and I do not know how to debug this kind of code…:frowning:

652

Hi I’m starting to dip my toes into a fancier Habpanel but I’m getting this error when using the svg-combiner script

Processing file: Squid_Ink_License.pdf
200
Traceback (most recent call last):
File “svg_combiner.py”, line 74, in
xml = ET.fromstring(r.text)
File “/usr/lib/python2.7/xml/etree/ElementTree.py”, line 1311, in XML
parser.feed(text)
File “/usr/lib/python2.7/xml/etree/ElementTree.py”, line 1657, in feed
self._parser.Parse(data, 0)
UnicodeEncodeError: ‘ascii’ codec can’t encode characters in position 10-13: ordinal not in range(128)

I’m really not sure how to fix this…yet.
Using Ubuntu 19.10 with both python 2.7.x and 3.7.x installed

EDIT also tried it with the pdf file removed…different error

Processing file: svg_combiner.py
200
Traceback (most recent call last):
File “svg_combiner.py”, line 74, in
xml = ET.fromstring(r.text)
File “/usr/lib/python2.7/xml/etree/ElementTree.py”, line 1311, in XML
parser.feed(text)
File “/usr/lib/python2.7/xml/etree/ElementTree.py”, line 1659, in feed
self._raiseerror(v)
File “/usr/lib/python2.7/xml/etree/ElementTree.py”, line 1523, in _raiseerror
raise err
xml.etree.ElementTree.ParseError: syntax error: line 2, column 0

653

Hi @Nognog,
Very good work! I’d be happy if you would share your configuration with me. I’ll send you a PM.
Also thanks to @pmpkk for the theme!

654

Never mind figured it out

655

Thank you @crnjan . Indeed WORKS! Removing apostrophe did the magic!!
Appreciate.

1 Like
656

I’ve downloaded the icons package (thesquid) but I’m missing some usable icons for co2/hPa and such values. What’s the easiest way of achieving this being a complete n00b regarding SVG files. I’ve added some svg’s I’ve downloaded from random libs on the internet but they’re completely off size wise or just doesn’t show up at all…are there some parameters I need to fix/edit in inkscape or ?