Hi All
This code creates a fairly nice button, but the label is static. UNLOCK
Is there an ability to toggle the label, depending on the state of an item? Im trying to create a button that locks my door if unlocked, or unlocks if locked. Right now it displays green as the label, is it possible to have it display RED if unlocked or GREEN if locked?
<div class="section">
<div class="sectionIconContainer"><div class="sectionIcon"><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/squidink.svg#sun"></use></svg></div></div>
<div class="title">test</div>
<div class="controls">
<div class="widget">
<div class="icon" ng-class="{true:'on', false:'off'}[itemValue('DoorBird_DoorOpener')=='ON']">
<svg viewBox="0 0 48 48">
</svg>
</div>
<div class="sceneGroup">
<div class="scene on" ng-click="sendCmd('FrontDoor_DoorLock', 'ON')">
Unlock
</div>
</div>
</div>
Thank you!
Any angular gurus? Seems harder than I thought! I tried many different ways but never got it right.
Dave_K
(Dave Kneisz)
March 18, 2019, 8:31am
3
Try replacing “Unlock” with “{{itemValue(‘DoorBird_DoorOpener’)}}”.
Hi Dave no joy im afraid.
Dave_K
(Dave Kneisz)
March 18, 2019, 9:09pm
5
Maybe it’s “{{itemValue(‘FrontDoor_DoorLock’)}}”? Use the name of the item you want to display the status from.
Dave_K
(Dave Kneisz)
March 18, 2019, 9:24pm
6
Here is the full example:
<div class="section">
<div class="sectionIconContainer"><div class="sectionIcon"><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/squidink.svg#sun"></use></svg></div></div>
<div class="title">test</div>
<div class="controls">
<div class="widget">
<div class="icon" ng-class="{true:'on', false:'off'}[itemState('DoorBird_DoorOpener')=='ON']">
<svg viewBox="0 0 48 48">
</svg>
</div>
<div class="sceneGroup">
<div class="scene on" ng-click="sendCmd('FrontDoor_DoorLock', itemState('FrontDoor_DoorLock') == 'ON' ? 'OFF' : 'ON')">
<span style="color: red" ng-if="itemState('FrontDoor_DoorLock') == 'ON'">unlock</span>
<span style="color: green" ng-if="itemState('FrontDoor_DoorLock') == 'OFF'">lock</span>
</div>
</div>
</div>
I hope this is what you had in mind.
1 Like
Thanks Dave, ill give it a go!
Dave_K
(Dave Kneisz)
March 21, 2019, 9:05am
8
Did you have a chance to test the code i suggested?
No sorry Dave,i will try next week. Distracted by other tasks
Whichcraft
(Whichcraft)
December 1, 2021, 3:17pm
11
The code works like a charm. Tweaked it slightly to match my needs. Thank you so much.