{"id":22498339,"url":"https://github.com/tyeth/serialfruit-connect-bookmarklet","last_synced_at":"2026-03-08T18:33:45.800Z","repository":{"id":240541777,"uuid":"802910700","full_name":"tyeth/serialfruit-connect-bookmarklet","owner":"tyeth","description":"A \"bookmarklet\" to add functionality to web-serial and websocket based web pages, to allow exchanging Adafruit BlueFruit Connect packets with circuitpython devices. With example code.py for BLE/WiFi/USB tank rover","archived":false,"fork":false,"pushed_at":"2024-07-17T14:36:48.000Z","size":283,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-12-06T20:24:34.822Z","etag":null,"topics":["adafruit","adafruit-ble-feather","circuitpython","circuitpython-community","usb-serial","web-serial","websockets"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tyeth.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-05-19T15:38:45.000Z","updated_at":"2024-07-17T14:36:51.000Z","dependencies_parsed_at":"2024-05-19T16:58:31.719Z","dependency_job_id":"44b59f2b-592b-4df4-a179-40960b6db630","html_url":"https://github.com/tyeth/serialfruit-connect-bookmarklet","commit_stats":null,"previous_names":["tyeth/serialfruit-connect"],"tags_count":71,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tyeth%2Fserialfruit-connect-bookmarklet","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tyeth%2Fserialfruit-connect-bookmarklet/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tyeth%2Fserialfruit-connect-bookmarklet/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tyeth%2Fserialfruit-connect-bookmarklet/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tyeth","download_url":"https://codeload.github.com/tyeth/serialfruit-connect-bookmarklet/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":242995884,"owners_count":20218815,"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":["adafruit","adafruit-ble-feather","circuitpython","circuitpython-community","usb-serial","web-serial","websockets"],"created_at":"2024-12-06T21:06:28.262Z","updated_at":"2026-03-08T18:33:45.793Z","avatar_url":"https://github.com/tyeth.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Web Serial Bookmarklet\r\n\r\nThis project is a web-based tool that allows you to send various types of data packets over a serial connection using the Web Serial API. It can be used with a variety of devices that support serial communication, including Bluefruit devices and others.\r\n\r\n## TODO:\r\n\r\nCurrently supports the http://DEVICE_IP/code/ or http://circuitpython.local/code/ based websites for accessing circuitpython devices over web-workflow. Eventually will support all 3 transports (USB/BLE/WebWorkflow)\r\n\r\n-- Most of it, but tested ColorPackets and ButtonPackets\r\n\r\n## Features\r\n\r\n- **Color Picker**: Send color data.\r\n- **Control Pad**: Send control commands.\r\n- **Accelerometer**: Send accelerometer data from the device's sensors.\r\n- **Terminal**: Send AT commands.\r\n- **DFU**: Send Device Firmware Update packets.\r\n- **Security**: Send security-related data.\r\n- **Read/Write**: Send read and write data.\r\n- **Notify**: Send notification data.\r\n- **Scan**: Send scan data.\r\n- **IO Pin**: Send IO Pin data.\r\n- **Neopixel**: Send Neopixel data.\r\n- **String**: Send string data.\r\n- **Raw Data**: Send raw bytes and strings.\r\n- **Location**: Send location data using manual input or the device's GPS.\r\n\r\n## Getting Started\r\n\r\n### Prerequisites\r\n\r\n- A device (running circuitpython?) that supports serial communication.\r\n- Using web workflow requires any compatible browser\r\n- Using USB-Serial or BLE requires a web browser that supports the Web Serial or BLE API\r\n\r\n_If you have problems then try a Chromium based web browser (e.g., Chrome, Edge)._\r\n\r\n### Usage\r\n\r\nSee `./examples` folder for a Crickit based project that previously required bluetooth\r\n\r\nNext is a link to the bookmarklet code which you can right click \u003ca href=\"javascript:(function(){var script=document.createElement('script');script.src='https://cdn.jsdelivr.net/gh/tyeth/serialfruit-connect@v0.0.109/src/bookmarklet.js';document.body.appendChild(script);})();\"\u003eHERE\u003c/a\u003e and choose add to favourites/bookmark,\r\n\r\nOr the bookmarklet code to copy and paste into address bar: \r\n```\r\njavascript:(function() {\r\n    var script = document.createElement('script');\r\n    script.src = 'https://cdn.jsdelivr.net/gh/tyeth/serialfruit-connect@v0.0.109/src/bookmarklet.js';\r\n    document.body.appendChild(script);\r\n})();\r\n```\r\n_(You may need to add the `javascript:` prefix back into the address bar after pasting the code from above, as browsers remove it as part of keeping you safe - bookmarks are not affected by this protection)_\r\n\r\n** You may wish to use the tag @main instead of @v0.0.0.1 etc as that will always be the Latest code, but may therefore break! **\r\n\r\n## Available User Interface (UI) screens\r\n\r\n\r\n1. **Color Picker**:\r\n    - Select a color using the color input.\r\n    - Click \"Send Color\" to send the selected color data.\r\n\r\n2. **Control Pad**:\r\n    - Click on the directional buttons (Up, Down, Left, Right) to send control commands.\r\n\r\n3. **Accelerometer**:\r\n    - Click \"Start/Stop Sending Data\" to toggle sending accelerometer data.\r\n\r\n4. **Terminal**:\r\n    - Enter an AT command in the input box.\r\n    - Click \"Send Command\" to send the command.\r\n\r\n5. **DFU**:\r\n    - Click \"Choose File\" to select a DFU file.\r\n    - Click \"Send DFU Packet\" to send the DFU data.\r\n\r\n6. **Security**:\r\n    - Enter security data in the input box.\r\n    - Click \"Send Security Packet\" to send the data.\r\n\r\n7. **Read/Write**:\r\n    - Enter data to read or write in the respective input boxes.\r\n    - Click \"Read\" or \"Write\" to send the respective packets.\r\n\r\n8. **Notify**:\r\n    - Enter notification data in the input box.\r\n    - Click \"Send Notify Packet\" to send the data.\r\n\r\n9. **Scan**:\r\n    - Click \"Send Scan Packet\" to send a scan packet.\r\n\r\n10. **IO Pin**:\r\n    - Enter IO Pin data in the input box.\r\n    - Click \"Send IO Pin Packet\" to send the data.\r\n\r\n11. **Neopixel**:\r\n    - Enter Neopixel data in the input box.\r\n    - Click \"Send Neopixel Packet\" to send the data.\r\n\r\n12. **String**:\r\n    - Enter a string in the input box.\r\n    - Click \"Send String Packet\" to send the string data.\r\n\r\n13. **Raw Data**:\r\n    - Enter raw bytes (comma-separated) or a raw string in the respective input boxes.\r\n    - Click \"Send Raw Bytes\" or \"Send Raw String\" to send the data.\r\n\r\n14. **Location**:\r\n    - Enter latitude and longitude manually, or click \"Use Current Location\" to get the device's current location.\r\n    - Click \"Send Location\" to send the location data.\r\n\r\n### Screenshots\r\n\r\n![Main Menu](screenshots/main-menu.png)\r\n![Color Picker](screenshots/color-picker.png)\r\n![Control Pad](screenshots/control-pad.png)\r\n![Accelerometer](screenshots/accelerometer.png)\r\n![Terminal](screenshots/terminal.png)\r\n![DFU](screenshots/dfu.png)\r\n![Security](screenshots/security.png)\r\n![Read/Write](screenshots/read-write.png)\r\n![Notify](screenshots/notify.png)\r\n![Scan](screenshots/scan.png)\r\n![IO Pin](screenshots/iopin.png)\r\n![Neopixel](screenshots/neopixel.png)\r\n![String](screenshots/string.png)\r\n![Raw Data](screenshots/raw.png)\r\n![Location](screenshots/location.png)\r\n\r\n### Contributing\r\n\r\n1. Fork the repository.\r\n2. Create your feature branch (`git checkout -b feature/YourFeature`).\r\n3. Commit your changes (`git commit -m 'Add some feature'`).\r\n4. Push to the branch (`git push origin feature/YourFeature`).\r\n5. Open a pull request.\r\n\r\n### Local running:\r\n\r\n1. install mkcert and set system to trust (with --install), a cert will be generated later:\r\n```\r\nmkcert --install\r\n```\r\n2. install dependencies for updating tags/refs and watchdog server: `pip install bs4 semver watchdog`\r\n3. use `python watching-server.py` or the vscode launch tasks to run python server task and it will copy all /src files and mangle them to localhost\r\n4. use the bookmarklet code printed in the console at server startup instead, which will be similar to:\r\n```javascript\r\njavascript:(function(){var script=document.createElement('script');script.src='https://192.168.43.244:4443/localhost-src/bookmarklet.js';document.body.appendChild(script);})();\r\n```\r\n\r\n### License\r\n\r\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.\r\n\r\n### Acknowledgments\r\n\r\n- [Adafruit Bluefruit Connect](https://learn.adafruit.com/bluefruit-le-connect)\r\n- [Web Serial API](https://developer.mozilla.org/en-US/docs/Web/API/Serial)\r\n\r\nThis project is tested with BrowserStack.\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftyeth%2Fserialfruit-connect-bookmarklet","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftyeth%2Fserialfruit-connect-bookmarklet","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftyeth%2Fserialfruit-connect-bookmarklet/lists"}