Custom Tiles: Access to Things and Variables

[josh]

Today’s release includes support for access to Things and Variables in Custom Tiles!

Closes out the following feature requests:
Custom Tiles - Access Platform Resources
Custom Tiles - Access Variables

With today’s release, developers will now see options for defining Things and Variables as settings with Custom Tiles. And the stio library has new features for interacting with and listening to updates from these platform resources.

 
Quick Links

• stio Library Updates
• Variables
• Things

 

Example Custom Tiles

• Gauge Tiles
• Vertical Range Input

 

stio Library Updates

In order to use the the new Things and Variables setting types, you’ll need to use the latest stio library. You can reference the latest library in a <script> tag in your HTML custom tile like:

<script src="https://cdn.sharptools.io/js/custom-tiles/0.2.1/stio.js"></script>

Also note that starting with this release of the stio library, we’ve implemented semantic versioning. Historically, the stio library was available at a generic URL:

https://cdn.sharptools.io/js/custom-tiles.js

We will continue to update that generic library URL to point to the latest production version of the library. Since the files are served from a CDN with caching, browsers may hold onto the ‘old’ version of the library for a period of time.

As such, we suggest pointing to the specific versioned instance of the library that is needed for your Custom Tile.

 

Variables

You can define a SharpTools Variable as a setting within your Custom Tile.

• Variable Setting Overview
• Variable stio library reference
• Variable Sample Code

You will need to select the specific type of variable that you are interested in:

When the user adds an instance of the Custom Tile to their dashboard, they can proceed to configure the tile instance where they’ll be presented with the option to select a variable of your specified type:

 

Things

You can define a SharpTools Thing as a setting within your Custom Tile.

• Thing Setting Overview
• Thing stio library reference
• Thing Sample Code

If you define which capabilities the device must have, the list of things presented to the user when configuring the tile setting will be filtered to devices which match that capability set (more details). This is helpful for ensuring that the device selected by the user will have the attributes and commands you expect for use in your custom code.

When the user adds an instance of the Custom Tile to their dashboard, they can proceed to configure the tile instance where they’ll be presented with the option to select a Thing with your specified capability set:

[just_jake]

@josh I am running into some issues with the custom tile. for some reason using your code. I get a console log showing that the switch is on even though SmartThings, the Api Browser say that the switch is off.

<!-- 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": "Default Thing Tile"
}
</script>
<!-- Do not edit above -->
<div id="main">Configure Me</div>
<script src="https://cdn.sharptools.io/js/custom-tiles/0.2.1/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;
    console.log(myThing.attributes);

    //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);
        console.log('click '+val);
        
      }
    }
  })
</script>

[josh]

Have you used the Custom Tile on an actual dashboard?

The event subscription functionality only works from a dashboard, not in the Custom Tile developer page. The warning "Invalid context type for Custom Tile subscription request" is indicating that the event subscription doesn’t work from the developer page.

If the device hasn’t been used on a dashboard yet or in a trigger for a rule, the event subscription for the device won’t be in place yet and thus the device status will likely be stale.