Custom Widget: Scene Select Button

[mattwire]

Hi, I’m trying to mimic a button using a template because I need to do the following:

• Send a command to item 1 (lounge_scene_set)
• Update button state based on item 2 (lounge_scene)
  These are interacting with different software via MQTT and HTTP. Each can contain strings such as “Off”, “Evening”, “Bright”.

This is what I have so far:

<div ng-if="itemValue('lounge_scene')=='Off'">
<button style="width: 100%; height: 100%;
border: 0; color: #11addf; background: transparent; text-align: center;
padding: 0px; margin: 0px auto; 
font-size: 20px" ng-click="sendCmd('light_scene_set', 'Off')">
<span><widget-icon iconset="'freepik-household'" icon="'light-bulb'"/></span>
Off
</button>
</div>

<div ng-if="itemValue('lounge_scene')!='Off'">
<button style="width: 100%; height: 100%;
border: 0; color: #8899aa; background: transparent; text-align: center;
padding: 0px; margin: 0px auto; 
font-size: 20px" ng-click="sendCmd('light_scene_set', 'Off')">
<span><widget-icon iconset="'freepik-household'" icon="'light-bulb'"/></span>
Off
</button>
</div>

I have a couple of issues at the moment:

• How do I colorize the icon? (so it is the same colour as the text).
• The button can be clicked for the full width of the template but only the height of the icon+text. How do I make it clickable for the full height too?

[mattwire]

Getting somewhere now:

I’ve added a variable to specify the scene name but can’t work out how to use it in itemValue or sendCmd - I always get a parse error if I try something like itemValue(‘lounge_scene’)=={{SceneName}}

<div ng-init="SceneName='Bright'" />

<div ng-if="itemValue('lounge_scene')=='Bright'">
<a ng-click="sendCmd('lounge_scene_set', 'Bright')">
<div class="row">
  <img class="icon-tile ng-scope colorize colorize" 
       src="assets/icons/freepik-household/light-bulb.svg" style="width: 100px;" />
</div>
  <div class="row value" style="font-size: 40px" >{{SceneName}}</div>
  </a>
</div>

<div ng-if="itemValue('lounge_scene')!='Bright'">
<a ng-click="sendCmd('lounge_scene_set', 'Bright')">
<div class="row">
  <img class="icon-tile ng-scope colorize off"
       src="assets/icons/freepik-household/light-bulb.svg" style="width: 100px;" />
</div>
  <div class="row" style="font-size: 40px" >{{SceneName}}</div>

  </a>
</div>

[mattwire]

I’ve now started converting this to a custom widget but still have a problem with the ng-if comparators. Basically this “

” always evaluates to NOT equal but I’m printing the strings on screen to confirm that they are equal to each other!
@ysc any thoughts please?

<div style="background: rgba(0,0,0,0.5);
            margin: 3px;
            border-radius: 10px;
            border: 1px;
            border-style: solid;
            border-color: rgb(100,100,100) ;
            width:100%; height: 100%;
            display: flex;
            align-items: center;
            ">
<div style="margin: auto">
  {{itemValue('lounge_scene')}}<br/>
  {{config.scene_name}}
<div ng-if="itemValue('lounge_scene')=='{{config.scene_name}}'">
  <a ng-click="sendCmd('lounge_scene_set', config.scene_name)">
  <div class="row" style="align: center">
    <img class="icon-tile ng-scope colorize colorize" 
       src="assets/icons/freepik-household/light-bulb.svg" style="width: 50%; margin: auto; display: block" />
  </div>
  <div class="row value" style="font-size: 200%; text-align:center; margin-top: 5%">{{config.scene_name}}</div>
  </a>
</div>

<div ng-if="itemValue('lounge_scene')!='{{config.scene_name}}'">
  <a ng-click="sendCmd('lounge_scene_set', config.scene_name)">
  <div class="row">
    <img class="icon-tile ng-scope colorize off"
       src="assets/icons/freepik-household/light-bulb.svg" style="width: 50%; margin: auto; display: block" />
  </div>
  <div class="row" style="font-size: 200%; text-align:center; margin-top: 5%">{{config.scene_name}}</div>
  </a>
</div>
</div>
</div>

[ysc (Yannick Schaus)]

You don’t need {{ }} in ng-if because it’s already an expression.
So it should simply be ng-if="itemValue('lounge_scene')==config.scene_name"

[mattwire]

Perfect thankyou

[mattwire]

Five widgets next to each other:

Settings:

Widget:
Scene Select.widget.json (2.0 KB)

[Stefanseiner]

Looks nice and I’d like to use this scene selector too.
How do I use this .json file?

[mattwire]

Click on the gear icon or in advanced settings select manage custom widgets then use the import button.