variable-custom-tile.html

<!-- Do not edit below -->
<script type="application/json" id="tile-settings">
{
  "schema": "0.2.0",
  "settings": [
    {
      "type": "VARIABLE",
      "name": "myString",
      "label": "Your Text Variable",
      "filters": {"type": "String"}
    }
  ],
  "name": "1. Variable 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;
  }
</style>
<script>
  let div = document.getElementById("main")
  let myString;
  stio.ready(data => {
    myString = data.settings.myString;

    //if we have a string configured
    if(myString){
      //copy the value into the div
      div.innerText = myString.value;

      //setup an event listener for variable value changes
      myString.onValue(val => {
        div.innerText = val;
      })

      //setup a click listener to update the variable value
      div.onclick = () => {
        let now = (new Date()).toLocaleString()
        //update the variable with the current time string
        myString.setValue(now);
      }
    }
  })
</script>