Hi All,
Thought I’d write a basic tutorial.
I’ve created some collapsible panes, which help break up a widget when you’ve got loads of items. For instance, I have a parent pane called ‘Living Level’, underneath this I have a number of rooms divided further by child panes, and below that all my items displayed via a group.
I’ve put my configuration into a text file for you.
lights.txt (77.4 KB)
Essentially, there are a few elements that are important
<div ng-init="collapseStudyShutters=true">
<div class="" ng-click="collapseStudyShutters = !collapseStudyShutters">
<div class="controls" ng-hide="collapseStudyShutters">
You can subsitute the names for something meaningful for you pane. This particular one is for shutters, if you create some items and groups, youll get the Study pane to expand out and show a few items.
Here is the full code for a widget pane
<div ng-init="collapseStudyShutters=true">
<div class="section">
<div class="sectionIconContainer">
<div class="" ng-click="collapseStudyShutters = !collapseStudyShutters">
<div class="sectionIcon">
<div class="icon on" ng-if="itemValue('gStudyShutters')=='OFF'">
<svg viewBox="0 0 48 48"><use xlink:href="/static/ihp-theme/squidink.svg#window"></use></svg>
</div>
</div>
<div class="sectionIcon">
<div class="icon off" ng-if="itemValue('gStudyShutters')=='ON'">
<svg viewBox="0 0 48 48"><use xlink:href="/static/ihp-theme/squidink.svg#window"></use></svg>
</div>
</div>
<div class="title">Study</div>
</div>
</div>
<div class="controls" ng-hide="collapseStudyShutters">
<div ng-repeat="item in itemsInGroup('gStudyShutters')">
<div class="widget wide">
<div class="icon off">
<svg viewBox="0 0 48 48"><use xlink:href="/static/ihp-theme/squidink.svg#window"></use></svg>
</div>
<div class="name">{{item.label}}
<div class="value">{{item.value}}</div>
</div>
<div class="controlGroup">
<div class="control" ng-click="sendCmd(item.name, 'UP')">
<svg viewBox="0 0 80 80"><use xlink:href="/static/ihp-theme/squidink.svg#top-arrow-2"></use></svg>
</div>
<div class="control" ng-click="sendCmd(item.name, 'STOP')">
<svg viewBox="0 0 80 80"><use xlink:href="/static/ihp-theme/squidink.svg#stop_1_"></use></svg>
</div>
<div class="control" ng-click="sendCmd(item.name, 'DOWN')">
<svg viewBox="0 0 80 80"><use xlink:href="/static/ihp-theme/squidink.svg#down-arrow-2"></use></svg>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Building Level
Floor Level
Room Level
Let me know if you need help.