Access Variables in a Custom Tile

Feature Requests
2

Can you share more details about the use-case with weather info and custom tiles? I’m trying to understand why some other browser-based storage mechanism couldn’t be used.

Is the goal to be able to communicate selections across custom tiles? For example, could the localStorage API work?

Example code:

<!-- Do not edit below -->
<script type="application/json" id="tile-settings">
{
  "schema": "0.1.0",
  "settings": [],
  "name": "Storage Demo",
  "dimensions": {"width": 2, "height": 2}
}
</script>
<!-- Do not edit above -->

<script src="https://unpkg.com/vue@3"></script>

<div id="app">
  <button @click="increment">
    Count is: {{ count }}
  </button>
</div>


<script>
  const APP_PREFIX = 'custom-app-123'
  const COUNT_ID = `${APP_PREFIX}-count`;

  Vue.createApp({
    data() { return {
        count: this.getInitialCount(),
    }},
    methods: {
      increment(){
        this.count++;
        localStorage.setItem(COUNT_ID, this.count);
      },
      getInitialCount(){
        return localStorage.getItem(COUNT_ID) ?? 0;
      },
      onStorageEvent(e){
        let {type, key, newValue} = e;
        if(type !== "storage") return
        if(key?.startsWith(APP_PREFIX)){
          this.count = newValue;
        }
      }
    },
    mounted(){
      window.addEventListener("storage", this.onStorageEvent, false);
    }
  }).mount('#app')
</script>

<style>
html,body { height: 100%; margin:0;}
#app {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  flex-direction: column;
}
button {
  display: inline-block;
  padding: 15px 25px;
  font-size: 24px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  outline: none;
  color: #fff;
  background-color: #1CB0F6;
  border: none;
  border-radius: 15px;
  box-shadow: 0 9px #1899D6;
}

button:hover {
  transform: translateY(1px);
  box-shadow: 0 8px #1899D6;
}

button:active {
  box-shadow: 0 5px #1899D6;
  transform: translateY(4px);
}
</style>