Drive Axidraw over WebSerial

[nornagon]

Using the Web Serial API, currently in origin trial at time of writing.

[matthewjacobson]

Hello! Curious if you were able to make any progress on this?

I have been working on building out my own library but kind of stuck at the moment (https://github.com/matthewjacobson/axidraw.js) - it is kind of working but having weird random issues.

I would be happy to help out here if I can!

[nornagon]

@matthewjacobson yep, I spent some time on this last week, there's actually a prototype of it in the repo currently. You can try it out at https://nornagon.github.io/saxi/. Still some issues to work out around reconnection when the device is disconnected, but I've successfully plotted stuff from it!

[matthewjacobson]

@nornagon oh awesome!! Is it still running over a server or is it running locally in the browser?

[nornagon]

WebSerial is local in the browser.

[matthewjacobson]

Amazing! Happy to help out with anything if you need a hand

[nornagon]

@matthewjacobson Just realised I hadn't pushed up my prototype code. Did that now.

The issue i'm currently a bit perplexed by is that it seems impossible to close a WebSerial port after opening it. To repro in saxi currently, switch !driver to true here:

saxi/src/ui.tsx

Line 988 in 54e6f55

{!driver ?

, then click 'Connect', then click 'Connect' again.

[matthewjacobson]

Interesting - I think I have disconnect working in my version (https://github.com/matthewjacobson/axidraw.js/blob/ff6908057ad4cc1533e7d0a533469fd71b849d93/src/axidraw.js#L69).

You can test it here https://iammattjacobson.com/axidraw.js/index.html

But maybe I am missing something - I was mostly following the few examples I found online.

[nornagon]

ah hm... i'm piping to a WritableStream which is maybe the issue:

saxi/src/ebb.ts

Lines 29 to 31 in 54e6f55

	this.readableClosed = port.readable
	.pipeThrough(new RegexParser({ regex: /[\r\n]+/ }))
	.pipeTo(new WritableStream({

[matthewjacobson]

@nornagon would you mind sharing the command you use to build/compile the project?

[nornagon]

It's all in package.json. npm start or npm run dev :)

On Fri, Jul 16, 2021 at 08:05 matthewjacobson ***@***.***> wrote: @nornagon <https://github.com/nornagon> would you mind sharing the command you use to build/compile the project? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#63 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AABKGADUATFTGRBSKZKP723TYBDDVANCNFSM4RWLRKXA> .

-- j

[matthewjacobson]

Ah I see - I had to add "IS_WEB=1" to the run script. But looks like it is working well now. Thanks!

[mutoo]

This is so cool! I am also working on a prototype that communicates Axidraw over the WebUSB on Chrome. It's work-in-progress but the communication part is pretty stable at the moment. Hope I can work it out public on GitHub soon.

[nornagon]

@mutoo Interesting! What's the goal of using WebUSB as opposed to WebSerial?

[mutoo]

@matthewjacobson @nornagon I had made the repo public https://github.com/mutoo/axidraw-web so that everyone can play with it (it's not that powerful at the moment).

Actually, I am not sure what's the difference between WebUSB and WebSerial. The initial idea of making that project is building a web app that can control AxiDraw without setting up a node js environment. And WebUSB first came into my mind.

The only thing different I found is that I have to set up SSL for the browser to communicate with WebUSB, but I don't see a similar setup in saxi.

P.S. I also got some issue connecting WebUSB on Chromium on Raspbian OS, might try the WebSerial in the future.

[nornagon]

@mutoo saxi's webserial version works over https, that's a browser restriction. https://nornagon.github.io/saxi/ is the UI :)