w33ble/index.html

## index.html
<!DOCTYPE html>
<html>
  <head>
    <title>Addressable RGB LED</title>
    <script src="serial.js"></script>
    <script src="rgb.js"></script>
  </head>
  <body>
    <p>
      <button id="connect">Connect</button> <span id="status"></span>
    </p>
    <input type="range" min="0" max="7" value="0" id="led"/>
    <input type="range" min="0" max="255" value="0" id="red"/>
    <input type="range" min="0" max="255" value="0" id="green"/>
    <input type="range" min="0" max="255" value="0" id="blue"/>
  </body>
</html>

## neopixel_sketch.cpp
#include <Adafruit_NeoPixel.h>
#ifdef __AVR__
  #include <avr/power.h>
#endif


#define PIN 6

// Parameter 1 = number of pixels in strip
// Parameter 2 = Arduino pin number (most are valid)
// Parameter 3 = pixel type flags, add together as needed:
//   NEO_KHZ800  800 KHz bitstream (most NeoPixel products w/WS2812 LEDs)
//   NEO_KHZ400  400 KHz (classic 'v1' (not v2) FLORA pixels, WS2811 drivers)
//   NEO_GRB     Pixels are wired for GRB bitstream (most NeoPixel products)
//   NEO_RGB     Pixels are wired for RGB bitstream (v1 FLORA pixels, not v2)
//   NEO_RGBW    Pixels are wired for RGBW bitstream (NeoPixel RGBW products)
Adafruit_NeoPixel strip = Adafruit_NeoPixel(256, PIN, NEO_GRB + NEO_KHZ800);


#include <WebUSB.h>


WebUSB WebUSBSerial(1, "webusb.github.io/arduino/demos");

#define Serial WebUSBSerial

const int redPin = 9;
const int greenPin = 10;
const int bluePin = 11;
int color[4];
int index;

void setup() {
  while (!Serial) {
    ;
  }

  Serial.begin(9600);
  Serial.write("Sketch begins.\r\n");
  Serial.flush();
  index = 0;
  strip.begin();
}

void loop() {
  if (Serial && Serial.available()) {
    color[index++] = Serial.read();
    if (index == 4) {
      // color[0] is the led index
      // color[1] is red
      // color[2] is green
      // color[3] is blue


//         for(uint16_t i=0; i<strip.numPixels(); i++) {
//          strip.setPixelColor(i, strip.Color( color[1], color[2], color[3] ));
//        }
      strip.setPixelColor(color[0], strip.Color( color[1], color[2], color[3] ));

        strip.show();
//
//      analogWrite(redPin, color[0]);
//      analogWrite(greenPin, color[1]);
//      analogWrite(bluePin, color[2]);

      Serial.print("Set LED to ");
      Serial.print(color[0]);
      Serial.print(", ");
      Serial.print(color[1]);
      Serial.print(", ");
      Serial.print(color[2]);
      Serial.print(".\r\n");
      Serial.flush();
      index = 0;
    }
  }
}

## rgb.js
(function() {
  'use strict';

  document.addEventListener('DOMContentLoaded', event => {
    let connectButton = document.querySelector("#connect");
    let statusDisplay = document.querySelector('#status');
    let ledSlider = document.querySelector('#led');
    let redSlider = document.querySelector('#red');
    let greenSlider = document.querySelector('#green');
    let blueSlider = document.querySelector('#blue');
    let port;

    function connect() {
      port.connect().then(() => {
        statusDisplay.textContent = '';
        connectButton.textContent = 'Disconnect';

        port.onReceive = data => {
          let textDecoder = new TextDecoder();
          console.log(textDecoder.decode(data));
        }
        port.onReceiveError = error => {
          console.error(error);
        };
      }, error => {
        statusDisplay.textContent = error;
      });
    }

    function onUpdate() {
      if (!port) {
        return;
      }

      let view = new Uint8Array(4);
      view[0] = parseInt(ledSlider.value);
      view[1] = parseInt(redSlider.value);
      view[2] = parseInt(greenSlider.value);
      view[3] = parseInt(blueSlider.value);
      port.send(view);
    };

    ledSlider.addEventListener('input', onUpdate);
    redSlider.addEventListener('input', onUpdate);
    greenSlider.addEventListener('input', onUpdate);
    blueSlider.addEventListener('input', onUpdate);

    connectButton.addEventListener('click', function() {
      if (port) {
        port.disconnect();
        connectButton.textContent = 'Connect';
        statusDisplay.textContent = '';
        port = null;
      } else {
        serial.requestPort().then(selectedPort => {
          port = selectedPort;
          connect();
        }).catch(error => {
          statusDisplay.textContent = error;
        });
      }
    });

    serial.getPorts().then(ports => {
      if (ports.length == 0) {
        statusDisplay.textContent = 'No device found.';
      } else {
        statusDisplay.textContent = 'Connecting...';
        port = ports[0];
        connect();
      }
    });
  });
})();

## serial.js
var serial = {};

(function() {
  'use strict';

  serial.getPorts = function() {
    return navigator.usb.getDevices().then(devices => {
      return devices.map(device => new serial.Port(device));
    });
  };

  serial.requestPort = function() {
    const filters = [
      { 'vendorId': 0x2341, 'productId': 0x8036 },
      { 'vendorId': 0x2341, 'productId': 0x8037 },
      { 'vendorId': 0x2341, 'productId': 0x804d },
      { 'vendorId': 0x2341, 'productId': 0x804e },
      { 'vendorId': 0x2341, 'productId': 0x804f },
      { 'vendorId': 0x2341, 'productId': 0x8050 },
    ];
    return navigator.usb.requestDevice({ 'filters': filters }).then(
      device => new serial.Port(device)
    );
  }

  serial.Port = function(device) {
    this.device_ = device;
  };

  serial.Port.prototype.connect = function() {
    let readLoop = () => {
      this.device_.transferIn(5, 64).then(result => {
        this.onReceive(result.data);
        readLoop();
      }, error => {
        this.onReceiveError(error);
      });
    };

    return this.device_.open()
        .then(() => {
          if (this.device_.configuration === null) {
            return this.device_.selectConfiguration(1);
          }
        })
        .then(() => this.device_.claimInterface(2))
        .then(() => this.device_.selectAlternateInterface(2, 0))
        .then(() => this.device_.controlTransferOut({
            'requestType': 'class',
            'recipient': 'interface',
            'request': 0x22,
            'value': 0x01,
            'index': 0x02}))
        .then(() => {
          readLoop();
        });
  };

  serial.Port.prototype.disconnect = function() {
    return this.device_.controlTransferOut({
            'requestType': 'class',
            'recipient': 'interface',
            'request': 0x22,
            'value': 0x00,
            'index': 0x02})
        .then(() => this.device_.close());
  };

  serial.Port.prototype.send = function(data) {
    return this.device_.transferOut(4, data);
  };
})();
	<!DOCTYPE html>
	<html>
	<head>
	<title>Addressable RGB LED</title>
	<script src="serial.js"></script>
	<script src="rgb.js"></script>
	</head>
	<body>
	<p>
	<button id="connect">Connect</button> <span id="status"></span>
	</p>
	<input type="range" min="0" max="7" value="0" id="led"/>
	<input type="range" min="0" max="255" value="0" id="red"/>
	<input type="range" min="0" max="255" value="0" id="green"/>
	<input type="range" min="0" max="255" value="0" id="blue"/>
	</body>
	</html>
	#include <Adafruit_NeoPixel.h>
	#ifdef __AVR__
	#include <avr/power.h>
	#endif


	#define PIN 6

	// Parameter 1 = number of pixels in strip
	// Parameter 2 = Arduino pin number (most are valid)
	// Parameter 3 = pixel type flags, add together as needed:
	// NEO_KHZ800 800 KHz bitstream (most NeoPixel products w/WS2812 LEDs)
	// NEO_KHZ400 400 KHz (classic 'v1' (not v2) FLORA pixels, WS2811 drivers)
	// NEO_GRB Pixels are wired for GRB bitstream (most NeoPixel products)
	// NEO_RGB Pixels are wired for RGB bitstream (v1 FLORA pixels, not v2)
	// NEO_RGBW Pixels are wired for RGBW bitstream (NeoPixel RGBW products)
	Adafruit_NeoPixel strip = Adafruit_NeoPixel(256, PIN, NEO_GRB + NEO_KHZ800);



	#include <WebUSB.h>



	WebUSB WebUSBSerial(1, "webusb.github.io/arduino/demos");

	#define Serial WebUSBSerial

	const int redPin = 9;
	const int greenPin = 10;
	const int bluePin = 11;
	int color[4];
	int index;

	void setup() {
	while (!Serial) {
	;
	}

	Serial.begin(9600);
	Serial.write("Sketch begins.\r\n");
	Serial.flush();
	index = 0;
	strip.begin();
	}

	void loop() {
	if (Serial && Serial.available()) {
	color[index++] = Serial.read();
	if (index == 4) {
	// color[0] is the led index
	// color[1] is red
	// color[2] is green
	// color[3] is blue


	// for(uint16_t i=0; i<strip.numPixels(); i++) {
	// strip.setPixelColor(i, strip.Color( color[1], color[2], color[3] ));
	// }
	strip.setPixelColor(color[0], strip.Color( color[1], color[2], color[3] ));

	strip.show();
	//
	// analogWrite(redPin, color[0]);
	// analogWrite(greenPin, color[1]);
	// analogWrite(bluePin, color[2]);

	Serial.print("Set LED to ");
	Serial.print(color[0]);
	Serial.print(", ");
	Serial.print(color[1]);
	Serial.print(", ");
	Serial.print(color[2]);
	Serial.print(".\r\n");
	Serial.flush();
	index = 0;
	}
	}
	}
	(function() {
	'use strict';

	document.addEventListener('DOMContentLoaded', event => {
	let connectButton = document.querySelector("#connect");
	let statusDisplay = document.querySelector('#status');
	let ledSlider = document.querySelector('#led');
	let redSlider = document.querySelector('#red');
	let greenSlider = document.querySelector('#green');
	let blueSlider = document.querySelector('#blue');
	let port;

	function connect() {
	port.connect().then(() => {
	statusDisplay.textContent = '';
	connectButton.textContent = 'Disconnect';

	port.onReceive = data => {
	let textDecoder = new TextDecoder();
	console.log(textDecoder.decode(data));
	}
	port.onReceiveError = error => {
	console.error(error);
	};
	}, error => {
	statusDisplay.textContent = error;
	});
	}

	function onUpdate() {
	if (!port) {
	return;
	}

	let view = new Uint8Array(4);
	view[0] = parseInt(ledSlider.value);
	view[1] = parseInt(redSlider.value);
	view[2] = parseInt(greenSlider.value);
	view[3] = parseInt(blueSlider.value);
	port.send(view);
	};

	ledSlider.addEventListener('input', onUpdate);
	redSlider.addEventListener('input', onUpdate);
	greenSlider.addEventListener('input', onUpdate);
	blueSlider.addEventListener('input', onUpdate);

	connectButton.addEventListener('click', function() {
	if (port) {
	port.disconnect();
	connectButton.textContent = 'Connect';
	statusDisplay.textContent = '';
	port = null;
	} else {
	serial.requestPort().then(selectedPort => {
	port = selectedPort;
	connect();
	}).catch(error => {
	statusDisplay.textContent = error;
	});
	}
	});

	serial.getPorts().then(ports => {
	if (ports.length == 0) {
	statusDisplay.textContent = 'No device found.';
	} else {
	statusDisplay.textContent = 'Connecting...';
	port = ports[0];
	connect();
	}
	});
	});
	})();
	var serial = {};

	(function() {
	'use strict';

	serial.getPorts = function() {
	return navigator.usb.getDevices().then(devices => {
	return devices.map(device => new serial.Port(device));
	});
	};

	serial.requestPort = function() {
	const filters = [
	{ 'vendorId': 0x2341, 'productId': 0x8036 },
	{ 'vendorId': 0x2341, 'productId': 0x8037 },
	{ 'vendorId': 0x2341, 'productId': 0x804d },
	{ 'vendorId': 0x2341, 'productId': 0x804e },
	{ 'vendorId': 0x2341, 'productId': 0x804f },
	{ 'vendorId': 0x2341, 'productId': 0x8050 },
	];
	return navigator.usb.requestDevice({ 'filters': filters }).then(
	device => new serial.Port(device)
	);
	}

	serial.Port = function(device) {
	this.device_ = device;
	};

	serial.Port.prototype.connect = function() {
	let readLoop = () => {
	this.device_.transferIn(5, 64).then(result => {
	this.onReceive(result.data);
	readLoop();
	}, error => {
	this.onReceiveError(error);
	});
	};

	return this.device_.open()
	.then(() => {
	if (this.device_.configuration === null) {
	return this.device_.selectConfiguration(1);
	}
	})
	.then(() => this.device_.claimInterface(2))
	.then(() => this.device_.selectAlternateInterface(2, 0))
	.then(() => this.device_.controlTransferOut({
	'requestType': 'class',
	'recipient': 'interface',
	'request': 0x22,
	'value': 0x01,
	'index': 0x02}))
	.then(() => {
	readLoop();
	});
	};

	serial.Port.prototype.disconnect = function() {
	return this.device_.controlTransferOut({
	'requestType': 'class',
	'recipient': 'interface',
	'request': 0x22,
	'value': 0x00,
	'index': 0x02})
	.then(() => this.device_.close());
	};

	serial.Port.prototype.send = function(data) {
	return this.device_.transferOut(4, data);
	};
	})();