https://github.com/tyeth/serialfruit-connect-bookmarklet

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
https://github.com/tyeth/serialfruit-connect-bookmarklet

adafruit adafruit-ble-feather circuitpython circuitpython-community usb-serial web-serial websockets

Last synced: 15 days ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/tyeth/serialfruit-connect-bookmarklet
• Owner: tyeth
• Created: 2024-05-19T15:38:45.000Z (almost 2 years ago)
• Default Branch: main
• Last Pushed: 2024-07-17T14:36:48.000Z (over 1 year ago)
• Last Synced: 2024-12-06T20:24:34.822Z (over 1 year ago)
• Topics: adafruit, adafruit-ble-feather, circuitpython, circuitpython-community, usb-serial, web-serial, websockets
• Language: JavaScript
• Homepage:
• Size: 276 KB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# Web Serial Bookmarklet

This 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.

## TODO:

Currently 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)

-- Most of it, but tested ColorPackets and ButtonPackets

## Features

- **Color Picker**: Send color data.

- **Control Pad**: Send control commands.

- **Accelerometer**: Send accelerometer data from the device's sensors.

- **Terminal**: Send AT commands.

- **DFU**: Send Device Firmware Update packets.

- **Security**: Send security-related data.

- **Read/Write**: Send read and write data.

- **Notify**: Send notification data.

- **Scan**: Send scan data.

- **IO Pin**: Send IO Pin data.

- **Neopixel**: Send Neopixel data.

- **String**: Send string data.

- **Raw Data**: Send raw bytes and strings.

- **Location**: Send location data using manual input or the device's GPS.

## Getting Started

### Prerequisites

- A device (running circuitpython?) that supports serial communication.

- Using web workflow requires any compatible browser

- Using USB-Serial or BLE requires a web browser that supports the Web Serial or BLE API

_If you have problems then try a Chromium based web browser (e.g., Chrome, Edge)._

### Usage

See `./examples` folder for a Crickit based project that previously required bluetooth

Next is a link to the bookmarklet code which you can right click HERE and choose add to favourites/bookmark,

Or the bookmarklet code to copy and paste into address bar: 

```

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);

})();

```

_(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)_

** 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! **

## Available User Interface (UI) screens

1. **Color Picker**:

    - Select a color using the color input.

    - Click "Send Color" to send the selected color data.

2. **Control Pad**:

    - Click on the directional buttons (Up, Down, Left, Right) to send control commands.

3. **Accelerometer**:

    - Click "Start/Stop Sending Data" to toggle sending accelerometer data.

4. **Terminal**:

    - Enter an AT command in the input box.

    - Click "Send Command" to send the command.

5. **DFU**:

    - Click "Choose File" to select a DFU file.

    - Click "Send DFU Packet" to send the DFU data.

6. **Security**:

    - Enter security data in the input box.

    - Click "Send Security Packet" to send the data.

7. **Read/Write**:

    - Enter data to read or write in the respective input boxes.

    - Click "Read" or "Write" to send the respective packets.

8. **Notify**:

    - Enter notification data in the input box.

    - Click "Send Notify Packet" to send the data.

9. **Scan**:

    - Click "Send Scan Packet" to send a scan packet.

10. **IO Pin**:

    - Enter IO Pin data in the input box.

    - Click "Send IO Pin Packet" to send the data.

11. **Neopixel**:

    - Enter Neopixel data in the input box.

    - Click "Send Neopixel Packet" to send the data.

12. **String**:

    - Enter a string in the input box.

    - Click "Send String Packet" to send the string data.

13. **Raw Data**:

    - Enter raw bytes (comma-separated) or a raw string in the respective input boxes.

    - Click "Send Raw Bytes" or "Send Raw String" to send the data.

14. **Location**:

    - Enter latitude and longitude manually, or click "Use Current Location" to get the device's current location.

    - Click "Send Location" to send the location data.

### Screenshots

![Main Menu](screenshots/main-menu.png)

![Color Picker](screenshots/color-picker.png)

![Control Pad](screenshots/control-pad.png)

![Accelerometer](screenshots/accelerometer.png)

![Terminal](screenshots/terminal.png)

![DFU](screenshots/dfu.png)

![Security](screenshots/security.png)

![Read/Write](screenshots/read-write.png)

![Notify](screenshots/notify.png)

![Scan](screenshots/scan.png)

![IO Pin](screenshots/iopin.png)

![Neopixel](screenshots/neopixel.png)

![String](screenshots/string.png)

![Raw Data](screenshots/raw.png)

![Location](screenshots/location.png)

### Contributing

1. Fork the repository.

2. Create your feature branch (`git checkout -b feature/YourFeature`).

3. Commit your changes (`git commit -m 'Add some feature'`).

4. Push to the branch (`git push origin feature/YourFeature`).

5. Open a pull request.

### Local running:

1. install mkcert and set system to trust (with --install), a cert will be generated later:

```

mkcert --install

```

2. install dependencies for updating tags/refs and watchdog server: `pip install bs4 semver watchdog`

3. 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

4. use the bookmarklet code printed in the console at server startup instead, which will be similar to:

```javascript

javascript:(function(){var script=document.createElement('script');script.src='https://192.168.43.244:4443/localhost-src/bookmarklet.js';document.body.appendChild(script);})();

```

### License

This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.

### Acknowledgments

- [Adafruit Bluefruit Connect](https://learn.adafruit.com/bluefruit-le-connect)

- [Web Serial API](https://developer.mozilla.org/en-US/docs/Web/API/Serial)

This project is tested with BrowserStack.