Create a nice button

Apps & Services HABPanel
1

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?

image
image.png1600×900 60.1 KB 


<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!

2

Any angular gurus? Seems harder than I thought! I tried many different ways but never got it right.

3

Try replacing “Unlock” with “{{itemValue(‘DoorBird_DoorOpener’)}}”.

4

Hi Dave no joy im afraid.

5

Maybe it’s “{{itemValue(‘FrontDoor_DoorLock’)}}”? Use the name of the item you want to display the status from.

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
7

Thanks Dave, ill give it a go!

8

Did you have a chance to test the code i suggested?

9

No sorry Dave,i will try next week. Distracted by other tasks :frowning:

11

The code works like a charm. Tweaked it slightly to match my needs. Thank you so much.