Nest protect widget for HANPanel

Apps & Services HABPanel
1

Hi all,

I found this code in here, i have tried to write to the author, but i have not recived any reply, therefore i try some help by posting a new tropic in case anyone, want to help me :slight_smile:

here is the code for the HABpanel widget:

<div ng-init="ServerPath='/static'; IconSet='nest'"></div>

<table style="width: 100%; border-collapse: separate; border-spacing: 4px;">

  <tr>
    <td colspan=3 style="padding: 0;"><h4 style="color: #ffaa00; line-height: .1em;">Nest Protect Livingroom</h3></td>
  </tr>

  <tr>
    <td style="border: 2px solid #76899e; border-radius: 10px;">
      <table style="width: 100%;">
        <tr>
          <td rowspan="4" style="padding: 0px; padding-top: 0px; padding-bottom: 0px"><img id="nest-icon" height="80" width="80" src="{{ServerPath}}/images/{{IconSet}}/nest-protect-glow-blue.png"/></td>
          <td style="padding-left: 10px; padding-right: 10px; padding-top: 0px; padding-bottom: 0px">Røg:</td>
          <td style="padding-left: 10px; padding-right: 10px; padding-top: 0px; padding-bottom: 0px" ng-style="{ color: itemValue('nest_bryggers_smoke')=='ok' ? 'green' : 'red' }">{{itemValue('nest_bryggers_smoke')}}</td>
        </tr>
        <tr>
          <td style="padding-left: 10px; padding-right: 10px; padding-top: 0px; padding-bottom: 0px">CO2:</td>
          <td style="padding-left: 10px; padding-right: 10px; padding-top: 0px; padding-bottom: 0px" ng-style="{ color: itemValue('nest_bryggers_co2')=='ok' ? 'green' : 'red' }">{{itemValue('nest_bryggers_co2')}}</td>
        </tr>
        <tr>
          <td style="padding-left: 10px; padding-right: 10px; padding-top: 0px; padding-bottom: 0px">Sidst online:</td>
          <td style="padding-left: 10px; padding-right: 10px; padding-top: 0px; padding-bottom: 0px">{{itemValue('nest_bryggers_lastconnection') | date:'dd-MM-yyyy HH:mm'}}</td>
        </tr>
        </tr>


      </table>
    </td>
  </tr>
</table>

My problem is following:

  • The “status” is OK in RED, as fare as I can understand, its schould be OK = Green, Warning = Yellow, Alarm= Red
  • I dont understand the image patch, i dont know where to copiy the images to? //openHAB-share\openhab2-conf\html?
  • I have 5 Nest protects, and i would like to implement all of them in this code, but every time i try something, either it gives an error or its looks hopeless

I hope that i can get some help :slight_smile:
Best regards
Peter53%20PM

2

Create a static folder in the html folder and put the images there

Yes but it shows "ok" in small letters. What is the state of nest_bryggers_co2? is it ok or OK?

3

Its was about the OK :-), it god green now :slight_smile:

I still have some problems about the patch,

Just to be sure:

I place the nestprotectglowblue.png here (according to the patch in the code):

{{ServerPath}}/images/{{IconSet}}/nestprotectglowblue.png

openHAB-share\openhab2-conf\html\static\images folder

or im i totally wrong?

Peter

4

The patch is now fixed :slight_smile:

I have an issue regardings the alarm status on the display, the orginal code is:

ng-style="{ color: itemValue('nest_bryggers_smoke')=='ok' ? 'green' : 'red' }"

How can i change this to:
OK = Green
WARNING = Orange
EMERGENCY = Red

Hope you would like to help me, :slight_smile:
Peter