My Control remote (https://github.com/charlieroberts/Control)

control-remote.js

loadedInterfaceName = "Remote";
interfaceOrientation = "portrait";

destinationManager.selectIPAddressAndPort("192.168.0.10", "5000");

pages = [ [
// window buttons
{
  name: "win1",
  type: "Button",
  mode: "momentary",
  width:0.12, height:0.08,
  x:0.05, y:0.03,
  label: "1"
},
{
  name: "win2",
  type: "Button",
  mode: "momentary",
  width:0.12, height:0.08,
  x:0.19, y:0.03,
  label: "2"
},
{
  name: "win3",
  type: "Button",
  mode: "momentary",
  width:0.12, height:0.08,
  x:0.33, y:0.03,
  label: "3"
},
{
  name: "win4",
  type: "Button",
  mode: "momentary",
  width:0.12, height:0.08,
  x:0.47, y:0.03,
  label: "4"
},
{
  name: "win5",
  type: "Button",
  mode: "momentary",
  width:0.12, height:0.08,
  x:0.61, y:0.03,
  label: "5"
},
{
  name: "wkey",
  type: "Button",
  mode: "momentary",
  width:0.12, height:0.08,
  x:0.83, y:0.03,
  label: "w",
  stroke: "#aaa"
},

// main buttons
{
  name: "up",
  type: "Button",
  mode: "momentary",
  width:0.26, height:0.17,
  x:0.36, y:0.20,
  label: "Up",
  labelSize: 17,
},
{
  name: "left",
  type: "Button",
  mode: "momentary",
  width:0.26, height:0.17,
  x:0.08, y:0.38,
  label: "Left",
  labelSize: 17,
},
{
  name: "select",
  type: "Button",
  mode: "momentary",
  width:0.26, height:0.17,
  x:0.36, y:0.38,
  label: "Select",
  labelSize: 18,
},
{
  name: "right",
  type: "Button",
  mode: "momentary",
  width:0.26, height:0.17,
  x:0.64, y:0.38,
  label: "Right",
  labelSize: 17,
},
{
  name: "down",
  type: "Button",
  mode: "momentary",
  width:0.26, height:0.17,
  x:0.36, y:0.56,
  label: "Down",
  labelSize: 17,
},
{
  name: "back",
  type: "Button",
  mode: "momentary",
  width:0.19, height:0.125,
  x:0.675, y:0.2225,
  label: "Back",
  stroke: "#aaa"
},
{
  name: "play",
  type: "Button",
  mode: "momentary",
  width:0.19, height:0.125,
  x:0.675, y:0.5825,
  label: "▶",
  labelSize: 36,
  stroke: "#ddd"
},

// audio
{
  name: "mute",
  type: "Button",
  width:0.15, height:0.10,
  x:0.05, y:0.88,
  mode: "momentary",
  label: "🔈",
  stroke: "#aaa",
  labelSize: 18,
},
{
  name: "voldn",
  type: "Button",
  width:0.15, height:0.10,
  x:0.24, y:0.88,
  mode: "momentary",
  label: "🔉",
  labelSize: 18,
  stroke: "#aaa",
},
{
  name: "volup",
  type: "Button",
  width:0.15, height:0.10,
  x:0.41, y:0.88,
  mode: "momentary",
  label: "🔊",
  labelSize: 18,
  stroke: "#aaa",
},


// refresh
{
  name: "refresh",
  type: "Button",
  width:0.15, height:0.10,
  x:0.80, y:0.88,
  startingValue: 0,
  isLocal: true,
  mode: "momentary",
  ontouchstart: "interfaceManager.refreshInterface()",
  label: "↺",
  labelSize: 18,
  stroke: "#aaa"
},
],

];