parasquid/neolightbulb.html

## neolightbulb.html
<!DOCTYPE html>
<head>
  <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="HandheldFriendly" content="true">

  <style>
    button { font-size: xx-large; }
  </style>

  <script>
    let device = null;
    let characteristic = null;

    const connectAndSubscribe = async(e) => {
      try {
        const services = [];
        const filters = [{services}]
        services.push(0x181C); // user data service

        // summon pairing ui
        device = await navigator.bluetooth.requestDevice({filters});

        // setup callback so we can clean up on disconnection
        device.addEventListener('gattserverdisconnected', onDisconnected);

        // connect to the lightbulb
        const server = await device.gatt.connect();
        const service = await server.getPrimaryService('user_data'); // user data service
        characteristic = await service.getCharacteristic('string'); // string

        // set the bulb's color to grey
        characteristic.writeValue(new Uint8Array([0x88, 0x88, 0x88]));
      } catch(err) {
        console.error({err});
      }
    };

    const disconnect = async(e) => {
      if (device && device.gatt.connected) device.gatt.disconnect();
    }

    const onDisconnected = (event) => {
      device = null;
      characteristic = null;
      console.log("disconnected!")
    }

    // helper function to convert #123456 to [0x12, 0x34, 0x56]
    const hexToRgb = (rgb) => {
      const r = parseInt(rgb.substring(1, 3), 16);
      const g = parseInt(rgb.substring(3, 5), 16);
      const b = parseInt(rgb.substring(5, 7), 16);
      return [r, g, b];
    };

    // send color value to the light bulb
    const handleColorChanged = (e) => {
      if(!characteristic) return; // guard against null
      const color = e.value;
      const data = new Uint8Array(hexToRgb(color));
      characteristic.writeValue(data);
    };
  </script>
</head>

<body>
  <button onclick="connectAndSubscribe(this)">
    Connect to device
  </button>
  <button onclick="disconnect(this)">
    Disconnect from device
  </button>
  <div>
    <input
      type="color"
      oninput="handleColorChanged(this)"
      onchange="handleColorChanged(this)"
      value="#888888"
    />
  </div>
</body>

</html>
	<!DOCTYPE html>
	<head>
	<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="HandheldFriendly" content="true">

	<style>
	button { font-size: xx-large; }
	</style>

	<script>
	let device = null;
	let characteristic = null;

	const connectAndSubscribe = async(e) => {
	try {
	const services = [];
	const filters = [{services}]
	services.push(0x181C); // user data service

	// summon pairing ui
	device = await navigator.bluetooth.requestDevice({filters});

	// setup callback so we can clean up on disconnection
	device.addEventListener('gattserverdisconnected', onDisconnected);

	// connect to the lightbulb
	const server = await device.gatt.connect();
	const service = await server.getPrimaryService('user_data'); // user data service
	characteristic = await service.getCharacteristic('string'); // string

	// set the bulb's color to grey
	characteristic.writeValue(new Uint8Array([0x88, 0x88, 0x88]));
	} catch(err) {
	console.error({err});
	}
	};

	const disconnect = async(e) => {
	if (device && device.gatt.connected) device.gatt.disconnect();
	}

	const onDisconnected = (event) => {
	device = null;
	characteristic = null;
	console.log("disconnected!")
	}

	// helper function to convert #123456 to [0x12, 0x34, 0x56]
	const hexToRgb = (rgb) => {
	const r = parseInt(rgb.substring(1, 3), 16);
	const g = parseInt(rgb.substring(3, 5), 16);
	const b = parseInt(rgb.substring(5, 7), 16);
	return [r, g, b];
	};

	// send color value to the light bulb
	const handleColorChanged = (e) => {
	if(!characteristic) return; // guard against null
	const color = e.value;
	const data = new Uint8Array(hexToRgb(color));
	characteristic.writeValue(data);
	};
	</script>
	</head>

	<body>
	<button onclick="connectAndSubscribe(this)">
	Connect to device
	</button>
	<button onclick="disconnect(this)">
	Disconnect from device
	</button>
	<div>
	<input
	type="color"
	oninput="handleColorChanged(this)"
	onchange="handleColorChanged(this)"
	value="#888888"
	/>
	</div>
	</body>

	</html>