Create a nice button


(Kris K) #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?


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


(Kris K) #2

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


(Dave Kneisz) #3

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


(Kris K) #4

Hi Dave no joy im afraid.


(Dave Kneisz) #5

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


(Dave Kneisz) #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.


(Kris K) #7

Thanks Dave, ill give it a go!