mbed USBDevice ライブラリの中に USB CDC で動く USBSerial クラスが実装されている。これを Web USB から扱ってみる。これができるとブラウザ上から直接デバイスの設定などを行えるので便利になる。

LPC11U35 でも動かすことができる。

mbed USBSerial の構成

以下のような interface になっている。

CDC class (interface count = 2)
interface 0  (endpoint count = 1)
  CDC Header Functional Descriptor
  Call Management Functional Descriptor
  Abstract Control Management Functional Descriptor
  Union Functional Descriptor
  Endpoint Descriptor
    INTERRUPT IN (interval = 16)
interface 1 (endpoint count = 2)
  Endpoint Descriptor
    BULK IN (endpoint num = 2)
  Endpoint Descriptor
    BULK OUT  (endpoint num = 2)

mbed側の実装

シリアル通信まわりだけだと以下のようになる

#include "mbed.h"
#include "CircBuffer.h"
#include "stdint.h"
#include "USBCDC.h"

class MyUSBSerial: public USBCDC {
	private:
		Callback<void()> rx;
		CircBuffer<uint8_t,128> buf;

	public:
		MyUSBSerial(uint16_t vendor_id = 0x1f00, uint16_t product_id = 0x2012, uint16_t product_release = 0x0001, bool connect_blocking = true):
			USBCDC(vendor_id, product_id, product_release, connect_blocking){
			};

		bool writeBlock(void* b, uint16_t size) {
			uint8_t* buf = reinterpret_cast<uint8_t*>(b);
			if (!send(buf, size)) {
				return false;
			}
			return true;
		}

		uint8_t available() {
			return buf.available();
		}

		void read(uint16_t len, uint8_t out[]) {
			while (available() < len);
			for (uint16_t i = 0; i < len; i++) {
				buf.dequeue(&out[i]);
			}
		}

		uint8_t read() {
			uint8_t c = 0;
			while (available() < 1);
			buf.dequeue(&c);
			return c;
		}

		bool connected() const {
			return terminal_connected;
		}


	protected:
		virtual bool EPBULK_OUT_callback() {
			uint8_t c[MAX_PACKET_SIZE_EPBULK+1];
			uint32_t size = 0;

			//we read the packet received and put it on the circular buffer
			readEP(c, &size);
			for (uint32_t i = 0; i < size; i++) {
				buf.queue(c[i]);
			}

			//call a potential handlenr
			if (rx)
				rx.call();

			return true;
		}

		virtual void lineCodingChanged(int baud, int bits, int parity, int stop){
			// nothing to do
		}
};

MyUSBSerial usbserial(0xf055, 0xf001);

int main(void) {
    while (1) ;
}

Web USB からの接続

こちらもシリアル通信にあたる部分だけ。

  • interface index = 1
  • endpoint index = 2

を指定して transferIn/transferOut をすれば良い。DTR などを設定するために controlTransferOut も使うが、ただデバイスとやりとりするだけなら特に必要はない。

以下のような感じ。

const CDC_SET_LINE_CODING        = 0x20;
const CDC_GET_LINE_CODING        = 0x21;
const CDC_SET_CONTROL_LINE_STATE = 0x22;
const CLS_DTR  = (1 << 0);
const CLS_RTS  = (1 << 1);
const INTERFACE_INDEX = 1;
const ENDPOINT_INDEX = 2;

class USBCDC {
	constructor() {
		this.onread = () => {};
	}

	async connect(filters) {
		this.device = await navigator.usb.requestDevice({
			filters: filters || [
				{ 'vendorId': 0xf055, 'productId': 0xf001 }
			]
		});
		console.log(this.device);

		const read = async () => {
			const result = await this.device.transferIn(ENDPOINT_INDEX, 64);
			this.onread(result.data.buffer, result);

			if (result.status === 'stall') {
				console.warn('Endpoint stalled. Clearing.');
				await this.device.clearHalt(1);
			}
			read();
		};

		const configuration = await this.device.open();
		if (this.device.configuration === null) {
			await this.device.selectConfiguration(1);
		}

		await this.device.claimInterface(INTERFACE_INDEX);
		await this.device.controlTransferOut({
			'requestType': 'class',
			'recipient': 'interface',
			'request': CDC_SET_CONTROL_LINE_STATE,
			'value': CLS_DTR,
			'index': INTERFACE_INDEX
		});
		read();
	}

	async write(data) {
		if (typeof data === "string") {
			// string to utf-8 arraybuffer
			const arraybuffer = await new Promise( (resolve, reject) => {
				const reader = new FileReader();
				reader.onloadend = function () {
					resolve(reader.result);
				};
				reader.readAsArrayBuffer(new Blob([data]));
			});
			console.log('write ab', arraybuffer);
			await this.device.transferOut(ENDPOINT_INDEX, arraybuffer);
		} else {
			console.log('write rr', data);
			await this.device.transferOut(ENDPOINT_INDEX, data);
		}
	}

	async close() {
		await this.device.controlTransferOut({
			'requestType': 'class',
			'recipient': 'interface',
			'request': CDC_SET_CONTROL_LINE_STATE,
			'value': 0x00, // reset DTR
			'index': INTERFACE_INDEX
		});
		await this.device.close();
	}
}

const usbcdc = new USBCDC();
btnConnect.onclick = async () => {
	usbcdc.onread = (buffer, result) => {
		console.log(result);
		console.log(String.fromCharCode.apply("", new Uint8Array(buffer)));
	};
	usbcdc.connect();
};
  1. トップ
  2. tech
  3. mbed USBSerial を WebUSB から扱うには


だいぶ前に買ったのを放置してたので動かした。なぜかSDカードコネクタとかついてる。最初は 5V インターフェイスでレギュレータを使うようになっているが、ジャンパで 3.3V にすることができる。

「Adafruit_ST7735」という名前のライブラリがいくらか公開されているので、それを参考にちょっと書きかえた。ST7735 シリーズは細かい違いがたくさんあるようでなかなか難しい。

このライブラリは setRotation するときに MADCTL を発行するが、RGB と BGR の選択もコマンドで設定を行うため、setRotation をすると色が反転するみたいなことが起きて困った。

基本的には setAddrWindow して更新範囲を指定して pushColor して更新する。

	tft.setAddrWindow(offsetx, offsety, offsetx + width - 1, offsety + height - 1);
	for (int y = 0; y < height; y++) {
		for (int x = 0; x < width; x++) {
			usbserial.read(2, buf);
			uint16_t c = (buf[0] << 8) | buf[1];
			tft.pushColor(c);
		}
	}
  1. トップ
  2. tech
  3. ST7735S 使用の 128x160 TFT SPI 液晶