Query in HabPanel Angular for Motion Sensors

Hi All

I can get this to work for gAllLights, but I cant for Motion sensors. Aim is to display which motion sensors are on, as a summary. Any thoughts as to why this doesnt work? Thanks


<div class="section">
<div class="sectionIconContainer">
<div class="sectionIcon">
<div class="icon on" ng-if="itemValue('gMotionSensors')=='ON'"><svg viewBox="0 0 48 48"><use xlink:href="/static/ihp-theme/squidink.svg#control_x"></use></svg></div></div>
<div class="sectionIcon">
<div class="icon off" ng-if="itemValue('gMotionSensors')=='OFF'"><svg viewBox="0 0 48 48"><use xlink:href="/static/ihp-theme/squidink.svg#control_x"></use></svg></div></div>
<div class="title"><div class="name">Motion Sensors</div><div class="summary">ON: {{ ( filtered | filter: { state: 'ON' } ).length }} of {{filtered.length}}</div></div>
<div class="controls">

Could you please show your group definition?

1 Like

Certainly

/* Group Definitions for Motion Sensors*/
Group:Switch:OR(ON, OFF)    gMotionSensors            "All Motion Sensors"

To show you my point

This correctly shows 0 of 11 lights as off, using gAllLights

However, its incorrectly showing 8 of 8 sensors, using gMotionSensors

<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">
<div class="icon on" ng-if="itemValue('gAllLights')=='ON'"><svg viewBox="0 0 48 48"><use xlink:href="/static/ihp-theme/matrixicons.svg#light_bulb"></use></svg></div></div>
<div class="sectionIcon">
<div class="icon off" ng-if="itemValue('gAllLights')=='OFF'"><svg viewBox="0 0 48 48"><use xlink:href="/static/ihp-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 class="section">
<div class="sectionIconContainer">
<div class="sectionIcon">
<div class="icon on" ng-click="sendCmd('gAllMotionSensors', 'OFF')" ng-if="itemValue('gMotionSensors')=='ON'"><svg viewBox="0 0 48 48"><use xlink:href="/static/ihp-theme/squidink.svg#control_x"></use></svg></div></div>
<div class="sectionIcon">
<div class="icon off" ng-click="sendCmd('gAllMotionSensors', 'ON')" ng-if="itemValue('gMotionSensors')=='OFF'"><svg viewBox="0 0 48 48"><use xlink:href="/static/ihp-theme/squidink.svg#control_x"></use></svg></div></div>
<div class="title"><div class="name">Camera Motion Sensors</div><div class="summary">ON: {{ ( filtered | filter: { state: 'ON' } ).length }} of {{filtered.length}}</div></div>
<div class="controls">

Found the solution

<div class="summary">ON:{{ ( filteredMotion | filter: { state: 'ON' } ).length }} Of {{filteredMotion.length}}</div></div>