Temp trend as widget

binia · July 13, 2018, 4:55am

Hello

i try to get more Information from my netatmo Weather station.
I want to create a icon for the trend like green red and gray.

The Item is a String.

My testcode looks like

          <div class="widget" ng-if="(item.type=='String') && (itemValue(KChe_Temperaturtrend)=='stable')">
     				<div class="icon on" ><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/matrixicons.svg#on"></use></svg></div>
     			</div>
     			<div class="widget" ng-if="(item.type=='String') && (itemValue(KChe_Temperaturtrend)=='down')">
 				    <div class="icon off" ><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/matrixicons.svg#off"></use></svg></div>
     			</div>
     			<div class="widget" ng-if="(item.type=='String') && (itemValue(KChe_Temperaturtrend)=='up')">
     				<div class="icon off" ><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/matrixicons.svg#none"></use></svg></div>
     			</div>

2018-07-13%2006_50_32-Dokument1%20-%20Word

But i dont see anythink.

Thanks

dastrix80 · July 13, 2018, 5:25am

Youll need to put ‘’ around your items

  <div class="widget" ng-if="(item.type=='String') && (itemValue('KChe_Temperaturtrend')=='stable')">
     				<div class="icon on" ><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/matrixicons.svg#on"></use></svg></div>
     			</div>
     			<div class="widget" ng-if="(item.type=='String') && (itemValue('KChe_Temperaturtrend')=='down')">
 				    <div class="icon off" ><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/matrixicons.svg#off"></use></svg></div>
     			</div>
     			<div class="widget" ng-if="(item.type=='String') && (itemValue('KChe_Temperaturtrend')=='up')">
     				<div class="icon off" ><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/matrixicons.svg#none"></use></svg></div>
     			</div>

Here is a piece of code that works for me:

<div class="widget" ng-if="itemValue('KitchenSw1')=='OFF'" ng-click="sendCmd('KitchenSw1', '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">Kitchen {{itemValue('KitchenSw1')}}</div>
    </div>
      <div class="widget" ng-if="itemValue('KitchenSw1')=='ON'" ng-click="sendCmd('KitchenSw1', '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">Kitchen {{itemValue('KitchenSw1')}}</div>
    </div>

binia · July 13, 2018, 6:47am

Okay fine works for me.
Now i have some problems with the position.

I want the icon right to the Temp.

The code looks bit confuse because i use some svg for the Test.

2018-07-13%2008_44_38-HABPanel

<div class="section">

	<div class="bigDash">
		<div class="description">Temperature</div>
    <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">{{'%.1f' | sprintf:itemValue('KChe_Temperatur').split(' ')[0]}}           
        </div>
        <div class="sub"> &#176C </div>	
       </div>
		</div>
    
    
  <div class="widget" ng-if="itemValue('Balkon_Temperaturtrend')=='stable'" ng-click="sendCmd('Balkon_Temperaturtrend')">
      <div class="icon on" ><svg height="64px" viewBox="0 0 512 512" width="64px">	<path fill="gray" stroke="gray" d="M193.5,187.493c0,3.313-2.688,6-6,6h-13.334
		c-3.313,0-6-2.687-6-6v-13.652c0-3.314,2.687-6,6-6H187.5c3.313,0,6,2.686,6,6V187.493z"/>
	<path style="fill:none;stroke:#FFFFFF;stroke-width:10;stroke-miterlimit:10;" d="M248.5,187.493c0,3.313-2.688,6-6,6h-13.334
		c-3.313,0-6-2.687-6-6v-13.652c0-3.314,2.687-6,6-6H242.5c3.313,0,6,2.686,6,6V187.493z"/>
	<path style="fill:none;stroke:#FFFFFF;stroke-width:10;stroke-miterlimit:10;" d="M138.5,187.493c0,3.313-2.688,6-6,6h-13.334
		c-3.313,0-6-2.687-6-6v-13.652c0-3.314,2.687-6,6-6H132.5c3.313,0,6,2.686,6,6V187.493z"/></svg></div>
    </div>
    <div class="widget" ng-if="itemValue('Balkon_Temperaturtrend')=='up'" ng-click="sendCmd('Balkon_Temperaturtrend')">
      <div class="icon off" ><svg height="64px" viewBox="0 0 512 512" width="64px"><path fill="green" stroke="green" d="M104.872,182.354c26.75-35,53.501-70,80.252-105c-2.878,0-5.756,0-8.635,0
				c26.75,35,53.501,70,80.251,105c1.439-2.508,2.878-5.016,4.317-7.523c-49.383,0-98.765,0-148.147,0c-4.119,0-8.237,0-12.355,0
				c-6.449,0-6.449,10,0,10c49.382,0,98.765,0,148.147,0c4.118,0,8.237,0,12.355,0c3.436,0,6.707-4.397,4.317-7.523
				c-26.75-35-53.501-70-80.251-105c-2.429-3.178-6.206-3.178-8.635,0c-26.75,35-53.501,70-80.252,105
				C92.32,182.433,101.012,187.404,104.872,182.354z"/></svg></div>
    </div> 
    <div class="widget" ng-if="itemValue('Balkon_Temperaturtrend')=='down'" ng-click="sendCmd('Balkon_Temperaturtrend')">
      <div class="icon off" ><svg height="64px" viewBox="0 0 512 512" width="64px">	<path fill="red" stroke="red" d="M256.844,179.017c-26.751,35-53.501,70-80.252,105c2.878,0,5.757,0,8.635,0
				c-26.75-35-53.5-70-80.251-105c-1.439,2.508-2.878,5.016-4.317,7.523c49.382,0,98.765,0,148.147,0c4.118,0,8.237,0,12.355,0
				c6.448,0,6.448-10,0-10c-49.383,0-98.765,0-148.147,0c-4.119,0-8.237,0-12.355,0c-3.435,0-6.707,4.397-4.317,7.523
				c26.75,35,53.5,70,80.251,105c2.429,3.178,6.206,3.178,8.635,0c26.751-35,53.501-70,80.252-105
				C269.396,178.938,260.703,173.967,256.844,179.017z"/></svg></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('KChe_GefTemperaturHumidex') | number:0}} &#176C</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('KChe_Luftfeuchtigkeit')}}</div>
		</div>
 
    <div class="graph">
			<img width="250" height="100" src="http://openhabianpi.local:3000/render/dashboard-solo/db/mini-graphs?orgId=1&panelId=2&from=now-24h&to=now&width=500&height=250&tz=UTC%2B02%3A00" />
			<div class="legend">Last 24 hours</div>
    </div>
	</div>

binia · July 13, 2018, 11:11am

Have solve my problem