weatherIconVariable.html

<div id="main">
  <img id="icon" />
  <div id="value"></div>
</div>


<script src="https://cdn.sharptools.io/js/custom-tiles/0.2.1/stio.js"></script>
<script>
  var valueEl = document.getElementById("value")
  var iconEl = document.getElementById("icon")

  var BASE_URL = "https://raw.githubusercontent.com/dJOS1475/Hubitat_WU_Driver/main/wuIcons/"
  
  stio.ready(function(data){
  	var iconVar = data.settings.iconCode;  

    if(iconVar == null){
      valueEl.innerText = "Please configure a variable."
    }

    //copy the current value into the UI
    setIcon(iconVar.value);
    
    //and setup a listener for variable value changes that will call the setIcon function
    iconVar.onValue(setIcon)
  })

  function setIcon(code){
    valueEl.innerText = code;
    iconEl.src = BASE_URL + code + ".png";
  }
</script>

<style>
  html,body { margin: 0; padding: 0; height: 100vh;}
  #main {
    height: 100vh;
    display: flex;
    flex-direction: column; /* top to bottom */
    justify-content: center; /* vertically centered */
    align-items: center; /* horizontally centered */
  }
  #value {
    font-size: 20vw;
  }
  #icon {
    width: 60%; /* make the image 60% of the width */
  }
</style>

<!-- Do not edit below -->
<script type="application/json" id="tile-settings">
{
  "schema": "0.2.0",
  "settings": [
    {
      "type": "VARIABLE",
      "name": "iconCode",
      "label": "Icon Code Variable",
      "filters": {"type": "String"}
    }
  ],
  "name": "Weather Icon Variable",
  "dimensions": {"height": 2, "width": 2}
}
</script>
<!-- Do not edit above -->