{"id":14971662,"url":"https://github.com/ongzzzzzz/p5.web-serial","last_synced_at":"2025-06-29T21:41:05.578Z","repository":{"id":43073499,"uuid":"461455402","full_name":"ongzzzzzz/p5.web-serial","owner":"ongzzzzzz","description":"A p5.js library for using the Web Serial API to access devices like Arduino, no setup required","archived":false,"fork":false,"pushed_at":"2022-03-20T12:01:51.000Z","size":105,"stargazers_count":15,"open_issues_count":0,"forks_count":2,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-01-31T21:34:22.634Z","etag":null,"topics":["arduino","javascript","p5","p5-js","p5-library","p5js","physical-computing","processing","serial","serialport","web-serial","web-serial-api"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ongzzzzzz.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-02-20T10:40:34.000Z","updated_at":"2024-12-31T08:20:58.000Z","dependencies_parsed_at":"2022-09-04T11:50:07.695Z","dependency_job_id":null,"html_url":"https://github.com/ongzzzzzz/p5.web-serial","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ongzzzzzz%2Fp5.web-serial","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ongzzzzzz%2Fp5.web-serial/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ongzzzzzz%2Fp5.web-serial/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ongzzzzzz%2Fp5.web-serial/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ongzzzzzz","download_url":"https://codeload.github.com/ongzzzzzz/p5.web-serial/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238366801,"owners_count":19460187,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["arduino","javascript","p5","p5-js","p5-library","p5js","physical-computing","processing","serial","serialport","web-serial","web-serial-api"],"created_at":"2024-09-24T13:45:37.552Z","updated_at":"2025-02-11T20:31:51.074Z","avatar_url":"https://github.com/ongzzzzzz.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# p5.web-serial\nA p5.js library for using the Web Serial API to access devices like Arduino, no setup required.\n\n# What is this and why?\nThis library is a wrapper for the [Web Serial API](https://web.dev/serial), which enables you to communicate with devices like Arduino without having to run a local server! \n\n![arduino + p5.js](images/arduino-p5js.png)\n\nThe Web Serial API is available on all desktop platforms (Chrome OS, Linux, macOS, and Windows) in Chrome 89. More about compatibliity can be found [here](https://developer.mozilla.org/en-US/docs/Web/API/Web_Serial_API#browser_compatibility).\n\n# Getting Started\nTo use this library, create a new p5.js sketch and import the library in the `index.html` file. \n\nYou can download `p5.web-serial.js` and use it directly in your code:\n```html\n\u003cscript language=\"javascript\" type=\"text/javascript\" src=\"p5.web-serial.js\"\u003e\u003c/script\u003e\n```\nOr, you can also use a CDN link available via jsdelivr:\n```html\n\u003cscript language=\"javascript\" type=\"text/javascript\" src=\"https://cdn.jsdelivr.net/gh/ongzzzzzz/p5.web-serial/lib/p5.web-serial.js\"\u003e\u003c/script\u003e\n```\nAfter importing the library, head over to your `script.js` file, and make sure the `setup()` function looks like:\n```js\nlet port, reader, writer;\nasync function setup() {\n\tcreateCanvas(windowWidth, windowHeight);\n\n    // additional code here...\n\n\tnoLoop();\n\t({ port, reader, writer } = await getPort());\n\tloop();\n}\n```\nNote the `async` keyword, definitions of `port, reader, writer` and the `noLoop()` and `loop()` function calls. \n\n# Examples\nCheck out the [examples](https://github.com/ongzzzzzz/p5.web-serial/tree/main/examples) folder for more details.\n\n## Sending data from the browser to the Arduino:\n***make sure to put `\\n` at the end of every `writer.write()`!** (so arduino can know where it needs to read until)*\n```js\nasync function draw() {\n\tif (port) {\n\t\ttry {\n\t\t\tif (mouseIsPressed) {\n                // do something...\n\t\t\t\tawait writer.write(\"clicked!\\n\");\n\t\t\t}\n\t\t\telse {\n                // do something...\n\t\t\t\tawait writer.write(\"not clicked!\\n\");\n\t\t\t}\n\t\t} catch (e) { console.error(e) }\n\t}\n}\n```\n```cpp\nvoid loop() {\n    val = \"\";\n    if (Serial.available()) {\n        val = Serial.readStringUntil('\\n');\n        val.trim();\n    }\n\n    if (val == \"clicked!\") digitalWrite(ledPin, HIGH); \n    else if (val == \"not clicked!\") digitalWrite(ledPin, LOW);\n}\n```\n\n## Sending data from the Arduino to the browser:\nreading data on the p5js side is a little uhhhh messy (lol) for now, but it works!\n```js\nasync function draw() {\n\ttry {\n\t\twhile (true) {\n\t\t\tconst { value, done } = await reader.read();\n\n\t\t\tif (done) {\n\t\t\t\t// Allow the serial port to be closed later.\n\t\t\t\treader.releaseLock();\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tif (value == \"69420\") {\n                // do something...\n                console.log(\"nice\");\n            }\n\t\t}\n\t} catch (e) { console.error(e) }\n}\n```\n***remember to use `Serial.println()` and not `Serial.print()`** - this is to let the browser know where it needs to read until!*\n```cpp\nvoid loop() {\n    if (digitalRead(buttonPin) == LOW) {\n        Serial.println(\"69420\");\n        delay(150);\n    }\n}\n```\n\n# Resources\n- [MDN Documentation](https://developer.mozilla.org/en-US/docs/Web/API/Web_Serial_API)\n- [web.dev writeup](https://web.dev/serial)\n\n# Issues\nReport issues in the [issues tab](https://github.com/ongzzzzzz/p5.web-serial/issues) :3\n\n# Contributing\njust open a pull request :D ~free labour~ contributions always welcome!\n\n# Screenshots / GIFs\n\n\n# License\n[MIT License](https://github.com/ongzzzzzz/p5.web-serial/blob/main/LICENSE)\n\n\n\n\u003c!-- todo: \ncheck for support\npolyfill \nrequires https\nadd screemshots/gifs\n\nadd customisability? like change LineBreakTransformer\n--\u003e","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fongzzzzzz%2Fp5.web-serial","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fongzzzzzz%2Fp5.web-serial","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fongzzzzzz%2Fp5.web-serial/lists"}