Skip to content

Instantly share code, notes, and snippets.

@joshualyon
Created May 13, 2024 18:23
Show Gist options
  • Save joshualyon/c8cfab61675aac3c94dc4708ee4eb050 to your computer and use it in GitHub Desktop.
Save joshualyon/c8cfab61675aac3c94dc4708ee4eb050 to your computer and use it in GitHub Desktop.
<!-- 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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment