kenwheeler/index.html

## index.html
<html>

<head>
  <title>Bluetooth Demo</title>
</head>

<body>
  <button type="button" id="connect">Connect</button>
  <button type="button" id="fire">FIRE</button>
  <input type="range" max="1023" min="0" value="512" id="pan" />
  <input type="range" max="1023" min="0" value="512" id="tilt" style="transform: rotate(-90deg); transform-origin: bottom right;"
  />
  <script type="text/javascript" src="script.js"></script>
</body>

</html>

## script.js
let CONNECTED = false;
let INTERVAL = null;
let CHAR = null;
let DEVICE = null;
let button = document.getElementById('connect');
let fireButton = document.getElementById('fire');
let pan = document.getElementById('pan');
let tilt = document.getElementById('tilt');

button.addEventListener('click', connect);
fireButton.addEventListener('click', fire);

pan.addEventListener('mouseup', () => {
  pan.value = 512;
});
tilt.addEventListener('mouseup', () => {
  tilt.value = 512;
});

function connect() {
  if (CONNECTED && DEVICE) {
    return DEVICE.gatt.disconnect();
    button.innerHTML = 'Connect';
    clearInterval(INTERVAL);
  }
  navigator.bluetooth
    .requestDevice({
      filters: [
        {
          services: ['0000ffe0-0000-1000-8000-00805f9b34fb'],
        },
      ],
    })
    .then(device => {
      DEVICE = device;
      CONNECTED = true;
      button.innerHTML = 'Disconnect';
      return device.gatt.connect();
    })
    .then(server => {
      return server.getPrimaryService('0000ffe0-0000-1000-8000-00805f9b34fb');
    })
    .then(service => {
      return service.getCharacteristic('0000ffe1-0000-1000-8000-00805f9b34fb');
    })
    .then(char => {
      CHAR = char;
      INTERVAL = setInterval(updatePanTilt, 200);
    })
    .catch(error => {
      console.log(error);
    });
}

function updatePanTilt() {
  if (CONNECTED && DEVICE && CHAR) {
    let p = parseInt(pan.value).toFixed();
    let t = parseInt(tilt.value).toFixed();
    let str = `${p}|${t}$`;
    var enc = new TextEncoder('utf-8');
    CHAR.writeValue(enc.encode(str).buffer);
  }
}

function fire() {
  if (CONNECTED && DEVICE && CHAR) {
    let str = 'FIRE$';
    var enc = new TextEncoder('utf-8');
    CHAR.writeValue(enc.encode(str).buffer);
  }
}
	<html>

	<head>
	<title>Bluetooth Demo</title>
	</head>

	<body>
	<button type="button" id="connect">Connect</button>
	<button type="button" id="fire">FIRE</button>
	<input type="range" max="1023" min="0" value="512" id="pan" />
	<input type="range" max="1023" min="0" value="512" id="tilt" style="transform: rotate(-90deg); transform-origin: bottom right;"
	/>
	<script type="text/javascript" src="script.js"></script>
	</body>

	</html>
	let CONNECTED = false;
	let INTERVAL = null;
	let CHAR = null;
	let DEVICE = null;
	let button = document.getElementById('connect');
	let fireButton = document.getElementById('fire');
	let pan = document.getElementById('pan');
	let tilt = document.getElementById('tilt');

	button.addEventListener('click', connect);
	fireButton.addEventListener('click', fire);

	pan.addEventListener('mouseup', () => {
	pan.value = 512;
	});
	tilt.addEventListener('mouseup', () => {
	tilt.value = 512;
	});

	function connect() {
	if (CONNECTED && DEVICE) {
	return DEVICE.gatt.disconnect();
	button.innerHTML = 'Connect';
	clearInterval(INTERVAL);
	}
	navigator.bluetooth
	.requestDevice({
	filters: [
	{
	services: ['0000ffe0-0000-1000-8000-00805f9b34fb'],
	},
	],
	})
	.then(device => {
	DEVICE = device;
	CONNECTED = true;
	button.innerHTML = 'Disconnect';
	return device.gatt.connect();
	})
	.then(server => {
	return server.getPrimaryService('0000ffe0-0000-1000-8000-00805f9b34fb');
	})
	.then(service => {
	return service.getCharacteristic('0000ffe1-0000-1000-8000-00805f9b34fb');
	})
	.then(char => {
	CHAR = char;
	INTERVAL = setInterval(updatePanTilt, 200);
	})
	.catch(error => {
	console.log(error);
	});
	}

	function updatePanTilt() {
	if (CONNECTED && DEVICE && CHAR) {
	let p = parseInt(pan.value).toFixed();
	let t = parseInt(tilt.value).toFixed();
	let str = `${p}\|${t}$`;
	var enc = new TextEncoder('utf-8');
	CHAR.writeValue(enc.encode(str).buffer);
	}
	}

	function fire() {
	if (CONNECTED && DEVICE && CHAR) {
	let str = 'FIRE$';
	var enc = new TextEncoder('utf-8');
	CHAR.writeValue(enc.encode(str).buffer);
	}
	}