Javascript library for Hanvon ESP370U E-signature display based on WebHID API:
- Plug and play, no os-drivers or browser-extensions required.
- Cross platform, running on any morden browsers supports WebHID API on any operating system.
- Support send commands to device, eg
open,clear,close. - Support listen events from device, eg
ready,resign,confirm,up,move,down - Events contains raw and normalized data of
Xcoordinate,Ycoordinate,Zpressing force. - Almost every api of this libarary returns Promise, you can use async operator as you wish.
npm install esp370usimply import it in ES Modules supported environment:
import { ESP370U } from 'esp370u';or drictly using it without module system by adding the self excute script index.iife.js:
<html>
<body>
<script src="node_modules/esp370u/dist/index.iife.js"></script>
<script>
const { ESP370U } = esp370u;
</script>
</body>
</html>To get started quickly, you can use emulate():
import { emulate } from 'esp370u';
const destroyEmulator = emulate(canvasElement, {
unsupportedWebHIDAPI: ['Your browser does not support', 'the WebHID API'],
unconnectedDevice: ['Your device is not connected yet', 'Click me to connect ESP370U'],
onConfirm: (blob) => {
destroyEmulator(); // Optional if you want continuous signs.
const previewURL = URL.createObjectURL(blob);
window.open(previewURL);
},
});See online demo https://sherluok.github.io/ESP370U or code at ./docs/index.html
send(command: string | ArrayLike): Promise<void | TimeoutError>
The send() method send a command and returns a Promise. The command argument is any ArrayLike data that will be transform into Uint8Array then send to device by WebHID API. It return a Promise that will be resolved after the device replies this command you send. The command argument can also be String, in case it's alias of ArrayLike data, including:
Alias of send([0x55])
Alias of send([0x55])
Alias of send([0x55])
const esp370u = new ESP370U();
esp370u.send("open").then(async () => {
await esp370u.send("clear");
await esp370u.send("close");
});
on(type: string, listener: (e: Event) => void): TeardownLogic
off(type: string, listener: (e: Event) => void): void
once(type: string, timeout?: number): Promise<Event | TimeoutError>
try {
const event = await esp370u.once('ready', 1000);
console.log('connected.');
} catch (error) {
if (error instanceof TimeoutError && error.type === 'ready') {
console.log('Unable to connect device after %d milliseconds!', error.timeout);
}
}
emit(type: string, e: Event)
listen to all events not listed above.
listen to all events from device.onreportinput. Note that this event listener has the highest priority, so it will fire before any other event types. By default the event will be pass to other event listeners, call e.stop(#stop) method to prevent this behavior.
esp370u.on('*', (e) => {
if (e.getUint8(0) === 0x88) {
e.stop();
}
});A DataView containing the data from the device input report:
esp370u.on('*', (e) => {
const [command, x, y, z] = [
e.getUint8(0),
e.getUint16(1, true),
e.getUint16(3, true),
e.getUint16(5, true),
];
});The normalize() method on InputEvent object returns StylusData:
esp370u.on('move', (e) => {
const { x, y, z } = e.normalize();
});Object containing stylus's normalized coordinates and pressure data.
Float between 0 ~ 1.0 meaning:
const x = e.getUint16(1) / ESP370U.MAX_X;Float between 0 ~ 1.0 meaning:
const y = e.getUint16(3) / ESP370U.MAX_Y;Float between 0 ~ 1.0 meaning:
const z = e.getUint16(5) / ESP370U.MAX_Z;