Hello,
since a while I do my best to develop HAP Panel based on the Matrix Theme. I do make progress slow but still. Lately I slowed down rapidly on the debugging possibilities. Let me present the example.
I wish to have all battery icons format displayed dependently on their capacity. For this I defined different style of the icon and implement condition formatting. For some reasons few sensors are recognised as almost empty however they are 100% charged. Some icons are not displayed at all on one device on another there is no problem (cashing?)
How can I debug my code? How can I get what is really behind the displayed values?
This is the real status of my sensor batts:
This is the representation on the Panel:
This is my code on the HABPanel:
/*Part of the .css file
.section .icon.off svg {
stroke: #565f58;
fill: #565f58;
}
.section .icon.on svg {
stroke: #26bf75;
fill: #26bf75;
}
.section .icon.warn svg {
stroke: #ff2c0a;
fill: #ff2c0a;
animation: blinker 1s linear infinite;
}
.section .icon.warny svg {
stroke: #ffb70a;
fill: #ffb70a;
}
end of style formating */
<div class="title">Batteries</div>
<div class="controls">
<div ng-repeat="item in itemsInGroup('gBattery')">
<div class="widget wide" ng-if="itemValue(item.name) >='80'">
<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 class="widget wide" ng-if="itemValue(item.name) <'80' && itemValue(item.name) >='60'">
<div class="icon off"><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/squidink.svg#charging-2"></use></svg></div>
<div class="name">{{item.label}}</div>
<div class="valueGroup">
<div class="value">{{item.value}}%</div>
</div>
</div>
<div class="widget wide" ng-if="itemValue(item.name) <'60' && itemValue(item.name) >='20'">
<div class="icon warny"><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/squidink.svg#charging-1"></use></svg></div>
<div class="name">{{item.label}}</div>
<div class="valueGroup">
<div class="value">{{item.value}}%</div>
</div>
</div>
<div class="widget wide" ng-if="itemValue(item.name) <'15'">
<div class="icon warn"><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/squidink.svg#charging-1"></use></svg></div>
<div class="name">{{item.label}}</div>
<div class="valueGroup">
<div class="value">{{item.value}}%</div>
</div>
</div>
</div>
</div>