@danidoble/webserial 4.0.7 → 4.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/README.md +148 -1
  2. package/dist/webserial.js +6581 -1390
  3. package/dist/webserial.umd.cjs +35 -3
  4. package/package.json +14 -17
package/README.md CHANGED
@@ -1 +1,148 @@
1
- # Webserial API
1
+ # Webserial API (Wrapper)
2
+
3
+ Opensource wrapper to simplify connect to serial devices over [Webserial API](https://wicg.github.io/serial/)
4
+
5
+ # Install
6
+
7
+ Using npm
8
+
9
+ ```shell
10
+ npm install @danidoble/webserial
11
+ ```
12
+
13
+ Using pnpm
14
+
15
+ ```shell
16
+ pnpm install @danidoble/webserial
17
+ ```
18
+
19
+ Using bun
20
+
21
+ ```shell
22
+ bun install @danidoble/webserial
23
+ ```
24
+
25
+ # Docs
26
+
27
+ If you want to use a custom or device or the other inside this package a good starter point would be [Here](https://webserial-docs.danidoble.com)
28
+
29
+ # Example
30
+
31
+ In this example we'll use Arduino interface
32
+
33
+ ```html
34
+ <!-- index.html -->
35
+
36
+ <!doctype html>
37
+ <html lang="es">
38
+ <head>
39
+ <meta charset="UTF-8" />
40
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
41
+ <title>Webserial</title>
42
+ <script src="arduino.js" type="module"></script>
43
+ </head>
44
+ <body class="bg-neutral-950 text-white p-4 w-full">
45
+ <div class="webserial w-full max-w-xl mx-auto grid grid-cols-1 gap-y-4">
46
+ <div class="my-6"></div>
47
+ <button id="connect" class="hidden px-4 py-3 bg-gray-800 rounded-lg">Connect to serial</button>
48
+
49
+ <div id="need-permission" class="hidden p-4 bg-rose-900 rounded-lg">
50
+ Woooah! It seems that you need to give permission to access the serial port. Please, click the button 'Connect
51
+ to serial' to try again.
52
+ </div>
53
+
54
+ <div id="disconnected" class="hidden p-4 bg-neutral-900 w-full">
55
+ The arduino is disconnected. Please, check the connection.
56
+ </div>
57
+
58
+ <div id="unsupported" class="hidden p-4 bg-orange-700 w-full absolute bottom-0 left-0">
59
+ This browser does not support the WebSerial API. Please, use a compatible browser.
60
+ </div>
61
+
62
+ <div id="log" class="bg-neutral-800 p-4 rounded-lg">Log: <br /></div>
63
+ </div>
64
+
65
+ <script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio,container-queries"></script>
66
+ </body>
67
+ </html>
68
+ ```
69
+
70
+ ```js
71
+ // arduino.js
72
+
73
+ import { Arduino } from '@danidoble/webserial';
74
+
75
+ const arduino = new Arduino();
76
+ arduino.on('serial:message', (data) => {
77
+ console.log(data.detail);
78
+ });
79
+
80
+ arduino.on('serial:timeout', (data) => {
81
+ console.log('serial:timeout', data.detail);
82
+ });
83
+
84
+ // arduino.on('serial:sent', data => {
85
+ // console.log('serial:sent',data.detail);
86
+ // });
87
+
88
+ arduino.on('serial:error', (event) => {
89
+ document.getElementById('log').innerText += event.detail.message + '\n\n';
90
+ });
91
+
92
+ // eslint-disable-next-line no-unused-vars
93
+ arduino.on('serial:disconnected', (event) => {
94
+ document.getElementById('log').innerText += 'Disconnected\n\n';
95
+
96
+ document.getElementById('disconnected').classList.remove('hidden');
97
+ document.getElementById('connect').classList.remove('hidden');
98
+ });
99
+
100
+ // eslint-disable-next-line no-unused-vars
101
+ arduino.on('serial:connecting', (event) => {
102
+ document.getElementById('log').innerText += 'Connecting\n\n';
103
+ });
104
+
105
+ // eslint-disable-next-line no-unused-vars
106
+ arduino.on('serial:connected', (event) => {
107
+ document.getElementById('log').innerText += 'Connected\n\n';
108
+
109
+ document.getElementById('disconnected').classList.add('hidden');
110
+ document.getElementById('need-permission').classList.add('hidden');
111
+ document.getElementById('connect').classList.add('hidden');
112
+ });
113
+
114
+ // eslint-disable-next-line no-unused-vars
115
+ arduino.on('serial:need-permission', (event) => {
116
+ document.getElementById('disconnected').classList.remove('hidden');
117
+ document.getElementById('need-permission').classList.remove('hidden');
118
+ document.getElementById('connect').classList.remove('hidden');
119
+ });
120
+
121
+ // eslint-disable-next-line no-unused-vars
122
+ arduino.on('serial:soft-reload', (event) => {
123
+ // reset your variables
124
+ });
125
+
126
+ // eslint-disable-next-line no-unused-vars
127
+ arduino.on('serial:unsupported', (event) => {
128
+ document.getElementById('unsupported').classList.remove('hidden');
129
+ });
130
+
131
+ function tryConnect() {
132
+ arduino
133
+ .connect()
134
+ .then(() => {})
135
+ .catch(console.error);
136
+ }
137
+
138
+ document.addEventListener('DOMContentLoaded', () => {
139
+ tryConnect();
140
+ document.getElementById('connect').addEventListener('click', tryConnect);
141
+ });
142
+
143
+ // get device instance after
144
+ // import {Devices} from '@danidoble/webserial'
145
+ // const myDevice = Devices.getArduino(1);
146
+
147
+ // window.arduino = arduino;
148
+ ```