thing-custom-tile.html

<!-- Do not edit below -->
<script type="application/json" id="tile-settings">
{
  "schema": "0.2.0",
  "settings": [
    {
      "type": "THING",
      "name": "myThing",
      "label": "Your Thing",
      "filters": {"capabilities": ["switch"]}
    }
  ],
  "name": "1. Thing Demo"
}
</script>
<!-- Do not edit above -->
<div id="main">Configure Me</div>
<script src="https://cdn.sharptools.io/js/custom-tiles/0.2.0/stio.js"></script>
<style>
  html, body {
    height: 100%;
    padding: 0;
    margin: 0;
  }
  #main {
    font-size: 20vh;
    height: 100%;
    width: 100%;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
</style>
<script>
  let div = document.getElementById("main")
  let myThing;
  stio.ready(data => {
    myThing = data.settings.myThing;

    //if we have a string configured
    if(myThing){
      //copy the switch attribute value into the div
      div.innerText = myThing.attributes["switch"].value;

      //subscribe to switch attribute events (tell the smart-home hub we want the events)
      myThing.subscribe('switch')

      //setup an event listener for switch attribute value changes
      myThing.attributes["switch"].onValue(val => {
        div.innerText = val;
      })

      //setup a click listener to toggle the switch
      div.onclick = () => {
        //get the current switch value
        let val = myThing.attributes["switch"].value;
      
        //determine if we should send the 'on' or 'off command based on the current switch value
        //eg. if it's on, send 'off', else send 'on'
        let command = val === 'on' ? 'off' : 'on'
      
        //send the 'on' or 'off' command to the thing
        myThing.sendCommand(command)
      }
    }
  })
</script>