Skip to content

Instantly share code, notes, and snippets.

Last active May 6, 2022
What would you like to do?
Parameterized Rule Custom Tile PoC
<!-- Do not edit below -->
<script type="application/json" id="tile-settings">
"schema": "0.1.0",
"settings": [
{"name": "url", "label": "URL", "type": "STRING"},
{"name": "remote", "label": "Remote", "type": "STRING", "default": "default"}
"name": "Multi Rule "
<!-- Do not edit above -->
<div id="app">
<div class="button-holder">
<a class="button" v-for="button in buttons" v-on:click="sendCommand(button)" v-on:long-press.native="longPress(button, $event)">
<i :class="`fa-2x fa-fw fas fa-${button.icon}`"></i>
<script src=""></script>
<script src=""></script>
<script src=""></script>
<script src=""></script>
<script src=""></script>
const { createApp } = Vue
//helper method to check if a value is null or empty
let isNullOrEmpty = (value) => { return value == null || value === ""};
data() { return {
url: "",
remote: "default", //initialized in mounted() from tile settings
buttons: [
label: "User",
command: "user",
longPressCommand: "userLong",
icon: "user"
label: "Space!",
command: "space",
longPressCommand: "spaceLong",
icon: "user-astronaut"
label: "Mmmm. Bacon.",
command: "bacon",
longPressCommand: "baconLong",
icon: "bacon"
label: "Not Again.",
command: "biohazard",
longPressCommand: "bioLong",
icon: "biohazard"
methods: {
longPress(config, e){
// stio.showToast(`Long Pressed ${JSON.stringify(config)}`);
this.sendCommand(config, {type: 'long-press'});
sendCommand(config, {type="click"}={}){
//safety check that the URL is set
stio.showToast("URL is not set.", "red");
//safety check that we got a valid config object (button)
if(config == null){
stio.showToast("config is not set.", "red")
//show a toast with the label
stio.showToast(`${type} ${config.label}`);
//allow long-press commands
let command = config.command;
if(type === "long-press"){
stio.showToast(`Long Press command not set for '${config.label}'`, "red");
//if the longPressCommand is set, let's use it
command = config.longPressCommand;
//structure the command
let url = this.url + `?command=${command}&remote=${this.remote}`
//and send it
// TODO: Disable CORS since Rule Trigger doesn't support it and we don't need the content of the result
fetch(url, {mode: 'no-cors'}).then(()=>{
stio.showToast("Success!", "green");
stio.showToast(`Error sending ${config.label}`, "red");
//when the stio library is ready, get the settings
this.remote = data.settings.remote;
this.url = data.settings.url;
html, body { margin: 0; height: 100vh;}
#app { height: 100%; }
.button-holder {
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
align-content: center;
width: 100%;
height: 100%;
.button {
cursor: pointer;
border: 1px solid;
padding: 2em;
margin: 0.5em;
a.button:hover {
background: rgba(255,255,255,0.2)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment