Downloading a program using javascript

[romw314]

Using the Web Bluetooth api, download a python program. Do I need a backend, or not? Is there a library for that?

Tried this:

async function downloadProgram() {
	const pybricksServiceUUID = 'c5f50001-8280-46da-89f4-6d8051e4aeef';
	const pybricksControlEventCharacteristicUUID = 'c5f50002-8280-46da-89f4-6d8051e4aeef';
	const device = await navigator.bluetooth.requestDevice({
		filters: [
			{
				services: [pybricksServiceUUID]
			}
		]
	});

	const server = await device.gatt.connect();
	const service = await server.getPrimaryService(pybricksServiceUUID);
	const characteristic = await service.getCharacteristic(pybricksControlEventCharacteristicUUID);

	const encoder = new TextEncoder();
	const program = encoder.encode('print("Hello")');

	await characteristic.writeValue(program);

	console.log('Download successful.');
}

But it needs to compile the code, or is this happening on the hub? I got GATT Error unknown with this code.

Downloading a program with JavaScript would be perfect. It would allow me to build some python generators without needing to copy-paste into Pybricks Code (which I'm actually doing).

[dlech]

There is no library. You can look at the Pybricks Code source code for inspiration.

The download and run logic is here: https://github.com/pybricks/pybricks-code/blob/master/src/hub/sagas.ts

And most of the WebBluetooth stuff is here: https://github.com/pybricks/pybricks-code/blob/master/src/ble/sagas.ts

[dlech]

blobParts.push(encoder.encode('pybgen.py\x00'));

IIRC, the entry point file needs to be named __main__.py.

[romw314]

Thanks a lot. But still only erases program from hub. Current code:

	const pybricksServiceUUID = 'c5f50001-8280-46da-89f4-6d8051e4aeef';
	const pybricksControlEventCharacteristicUUID = 'c5f50002-8280-46da-89f4-6d8051e4aeef';
	const device = await navigator.bluetooth.requestDevice({
		filters: [
			{
				services: [pybricksServiceUUID]
			}
		]
	});

	const server = await device.gatt.connect();
	const service = await server.getPrimaryService(pybricksServiceUUID);
	const characteristic = await service.getCharacteristic(pybricksControlEventCharacteristicUUID);
	const { mpy: program } = await (useMpyV6 ? mpyCrossV6 : mpyCrossV5)(
		'__main__.py', // 1st change since last posted code
		'print("Hello, world!")',
		null,
		new URL(
			useMpyV6
				? 'https://cdn.jsdelivr.net/npm/@pybricks/[email protected]/build/mpy-cross-v6.wasm'
				: 'https://cdn.jsdelivr.net/npm/@pybricks/[email protected]/build/mpy-cross.wasm',
			import.meta.url
		).href
	);
	const header = new Uint8Array(5);
	const view = new DataView(header.buffer);
	view.setUint8(0, 3);
	view.setUint32(1, 0);
	await characteristic.writeValue(header);
	view.setUint32(1, program.byteLength);

	/** @type {Array<BlobPart>} */
	const blobParts = [];

	function encodeUInt32LE(value) {
		const buf = new ArrayBuffer(4);
		const view = new DataView(buf);
		view.setUint32(0, value, true);
		return buf
	}

	blobParts.push(encodeUInt32LE(program.length));
	const encoder = new TextEncoder();
	blobParts.push(encoder.encode('__main__.py\x00')); // 2nd change
	blobParts.push(program);

	const bytes = new Uint8Array(await new Blob(blobParts).arrayBuffer());
	console.log(blobParts, bytes);

	/** @returns {Array<[number, Uint8Array]>} */
	function splitUint8Array(array, chunkSize) {
		let result = [];
		for (let i = 0; i < array.length; i += chunkSize) {
			const chunk = array.slice(i, i + chunkSize);
			result.push([i, chunk]);
		}
		return result;
	}
	for (const [offset, chunk] of splitUint8Array(bytes, 20)) {
		const msg = new Uint8Array(5 + chunk.byteLength);
		const view = new DataView(msg.buffer);
		view.setUint8(0, 4);
		view.setUint32(1, offset, true);
		msg.set(chunk, 5);
		await characteristic.writeValue(msg);
	}

	await characteristic.writeValue(header);

	console.log('Download successful.');
	server.disconnect();

[dlech]

Does the size field in the header need to be updated now that the payload is bigger?

[romw314]

Yeah, updated the size, but the code is:

const pybricksServiceUUID = 'c5f50001-8280-46da-89f4-6d8051e4aeef';
	const pybricksControlEventCharacteristicUUID = 'c5f50002-8280-46da-89f4-6d8051e4aeef';
	const device = await navigator.bluetooth.requestDevice({
		filters: [
			{
				services: [pybricksServiceUUID]
			}
		]
	});

	const server = await device.gatt.connect();
	const service = await server.getPrimaryService(pybricksServiceUUID);
	const characteristic = await service.getCharacteristic(pybricksControlEventCharacteristicUUID);
	const { mpy: program } = await (useMpyV6 ? mpyCrossV6 : mpyCrossV5)(
		'main.py',
		pythonGenerator.workspaceToCode(ws),
		null,
		new URL(
			useMpyV6
				? 'https://cdn.jsdelivr.net/npm/@pybricks/[email protected]/build/mpy-cross-v6.wasm'
				: 'https://cdn.jsdelivr.net/npm/@pybricks/[email protected]/build/mpy-cross.wasm',
			import.meta.url
		).href
	);

	/** @type {Array<BlobPart>} */
	const blobParts = [];

	function encodeUInt32LE(value) {
		const buf = new ArrayBuffer(4);
		const view = new DataView(buf);
		view.setUint32(0, value, true);
		return buf
	}

	blobParts.push(encodeUInt32LE(program.length));
	const encoder = new TextEncoder();
	blobParts.push(encoder.encode('__main__.py\x00'));
	blobParts.push(program);

	const bytes = new Uint8Array(await new Blob(blobParts).arrayBuffer());

	const header = new Uint8Array(5);
	const view = new DataView(header.buffer);
	view.setUint8(0, 3);
	view.setUint32(1, 0);
	await characteristic.writeValue(header);
	view.setUint32(1, bytes.byteLength);

	/** @returns {Array<[number, Uint8Array]>} */
	function splitUint8Array(array, chunkSize) {
		let result = [];
		for (let i = 0; i < array.length; i += chunkSize) {
			const chunk = array.slice(i, i + chunkSize);
			result.push([i, chunk]);
		}
		return result;
	}
	let i = 0;
	for (const [offset, chunk] of splitUint8Array(bytes, 20)) {
		const msg = new Uint8Array(5 + chunk.byteLength);
		const view = new DataView(msg.buffer);
		view.setUint8(0, 4);
		view.setUint32(1, offset, true);
		msg.set(chunk, 5);
		await characteristic.writeValue(msg);
	}

	await characteristic.writeValue(header);

	console.log('Download successful.');
	server.disconnect();

And still no progress.

[romw314]

I figured it out! The following line:

	blobParts.push(encoder.encode('__main__.py\x00'));

needs to be:

	blobParts.push(encoder.encode('__main__\x00'));

Thanks for your help, @dlech.