circuitpython / web-editor Goto Github PK

This has been super helpful with the WebSerial ESPTool repo and I can definitely see it being useful here.

It looks like this will end up being 2 steps:

• Add dependabot to GitHub Actions
• Merge in Dependabot Updates
• Move packages to npm from index.html (if possible) such as xterm and jszip (or another zip package)

(Was circuitpython issue 5861)

CircuitPython version
Adafruit CircuitPython 7.1.0 on 2021-12-28; Adafruit Feather Bluefruit Sense with nRF52840
Code/REPL
n/a
Behavior
When I try to "Request Bluetooth Device" from Chrome (code.circuitpython.org)
I pick the 'CIRC' device and click 'Pair', then I get a Bluetooth busy spinner that never goes away.

Description
Chrome 96.0.4664.110 (Official Build) (64-bit)
--enable-experimental-web-platform-features
--enable-features=WebBluetoothNewPermissionsBackend
Windows 10 Version 21H1

Additional information
Requesting any Bluetooth device...
script.js:520 > Requested CIRPY
script.js:374 connected BluetoothRemoteGATTServer {device: BluetoothDevice, connected: true}
script.js:382 (2) [BluetoothRemoteGATTService, BluetoothRemoteGATTService]
script.js:384 Getting Transfer Service...
ble-file-transfer.js:79 caught connection error DOMException: Authentication canceled. undefined
ble-file-transfer.js:100 caught write error TypeError: Cannot read properties of null (reading 'writeValueWithoutResponse')
at FileTransferClient._write (ble-file-transfer.js:87)
at FileTransferClient.listDir (ble-file-transfer.js:467)
at async showBusy (script.js:186)
at async fileExists (script.js:219)
at async loadEditor (script.js:488)
at async switchToDevice (script.js:392)
at async onRequestBluetoothDeviceButtonClick (script.js:522)
at async HTMLButtonElement. (script.js:598) TypeError: Cannot read properties of null (reading 'writeValueWithoutResponse')
at FileTransferClient._write (https://code.circuitpython.org/_snowpack/pkg/@adafruit/ble-file-transfer.js:87:38)
at FileTransferClient.listDir (https://code.circuitpython.org/_snowpack/pkg/@adafruit/ble-file-transfer.js:467:20)
at async showBusy (https://code.circuitpython.org/assets/js/script.js:186:18)
at async fileExists (https://code.circuitpython.org/assets/js/script.js:219:19)
at async loadEditor (https://code.circuitpython.org/assets/js/script.js:488:9)
at async switchToDevice (https://code.circuitpython.org/assets/js/script.js:392:5)
at async onRequestBluetoothDeviceButtonClick (https://code.circuitpython.org/assets/js/script.js:522:9)
at async HTMLButtonElement. (https://code.circuitpython.org/assets/js/script.js:598:9)
ble-file-transfer.js:100 caught write error TypeError: Cannot read properties of null (reading 'writeValueWithoutResponse')
at FileTransferClient._write (ble-file-transfer.js:87)
at FileTransferClient.listDir (ble-file-transfer.js:468)
at async showBusy (script.js:186)
at async fileExists (script.js:219)
at async loadEditor (script.js:488)
at async switchToDevice (script.js:392)
at async onRequestBluetoothDeviceButtonClick (script.js:522)
at async HTMLButtonElement. (script.js:598) TypeError: Cannot read properties of null (reading 'writeValueWithoutResponse')
at FileTransferClient._write (https://code.circuitpython.org/_snowpack/pkg/@adafruit/ble-file-transfer.js:87:38)
at FileTransferClient.listDir (https://code.circuitpython.org/_snowpack/pkg/@adafruit/ble-file-transfer.js:468:20)
at async showBusy (https://code.circuitpython.org/assets/js/script.js:186:18)
at async fileExists (https://code.circuitpython.org/assets/js/script.js:219:19)
at async loadEditor (https://code.circuitpython.org/assets/js/script.js:488:9)
at async switchToDevice (https://code.circuitpython.org/assets/js/script.js:392:5)
at async onRequestBluetoothDeviceButtonClick (https://code.circuitpython.org/assets/js/script.js:522:9)
at async HTMLButtonElement. (https://code.circuitpython.org/assets/js/script.js:598:9)
script.js:345 DOMException: Connection failed for unknown reason. undefined
script.js:525 Argh: disconnected
script.js:505 true
script.js:345 DOMException: Connection failed for unknown reason. undefined
script.js:505 true
script.js:345 DOMException: Connection failed for unknown reason. undefined
script.js:505 true

Add a hover effect on buttons by darkening 15%. This should be instant and match adafruit.com.

Is there a way to upload files to my CircuitPython device using this web editor? If so, it should be easier to find. If not, it should be added.

I believe proper separation, clearly labeled functions with icons, and prioritized controls make a user interface easier and more fun to use.

Here is a concept that I created to showcase these design principals.

CircuitPython version

adafruit-circuitpython-microbit_v2-en_US-7.3.3.combined.hex; microbit_v2

Code/REPL

code.circuitpython.org

Behavior

Uncaught (in promise) TypeError: navigator.bluetooth.getDevices is not a function

Argh: NetworkError: Connection failed for unknown reason.

Description

Additional information

No response

CircuitPython Version

None

Workflow(s)

BLE, USB, WEB

Browser(s)

Google Chrome 114.0.5735.133

Console Log

No response

Steps

1. Type text into editor
2. Select text
3. Notice selected text is not highlighted

Description

No response

Additional information

No response

Should this line:

refer to settings.toml instead of .env?

The blinka spinner currently stays over the serial pane.

Currently this isn't working very smoothly.

CircuitPython Version

Adafruit CircuitPython 8.1.0 on 2023-05-22; ESP32-S3-Box-Lite with ESP32S3

Workflow(s)

WEB

Browser(s)

Google Chrome 113.0.5672.127

Console Log

No response

Steps

1, Install Ngrok/oray or any NAT app on the router.
2, Forward Circuitpython device port 80 to the public internet port 8333 .
3, Access NAT domin (ex: 84c5df439d74.ngrok-free.dev:8333) from the public internet.
4, After I see the Welcome page, click the full code editor.

Description

In the code editor, it shows my devices can not be connected. But both welcome page and file browser work fine. I guess maybe the reason is repl in full code editor use another port to connect? Most of free NAT support only 1 port access.

Additional information

No response

https://learn.adafruit.com/wirelessly-code-your-bluetooth-device-with-circuitpython/device-setup and https://code.circuitpython.org/ recommends users to enable two experimental flags in Chrome.

The enable-experimental-web-platform-features is a flag that affects all websites in Chrome. It should not be enabled unless user knows their browsing experience in Chrome will be impacted.

The enable-web-bluetooth-new-permissions-backend flag on the other hand only affects Bluetooth pickers in Chrome. That said, this may break other websites that use Web Bluetooth as well.

Are those flags really required?
If not, please remove them from those pages.

For additional help beyond what can be fit into a help file, it makes sense to link to Adafruit Learn System guides for the moment. At this time there isn't a specific list of places to add links, so this is rather open ended.

CircuitPython Version

CircuitPython 8.2.0

Workflow(s)

WEB

Browser(s)

Chrome

Console Log

No Errors

Steps

1. Connect to Web Workflow
2. Run code with a loop

import time

while True:
    print("Hello World!")
    time.sleep(1)

3. Press Ctrl+C

Description

No response

Additional information

No response

CircuitPython Version

Adafruit CircuitPython 8.1.0 on 2023-05-22; ESP32-S3-Box-Lite with ESP32S3

Workflow(s)

USB, WEB

Browser(s)

Google Chrome 113.0.5672.127

Console Log

No response

Steps

It occurs occasionally and I am not sure how to reproduce it. I have uploaded a video for this, you can see that the terminal is still working but the page freeze.

https://youtu.be/I5SIlLrzduc

When the page is loading, the loading animation prevents you from doing anything in your code. So if the device connection fails for any reason, the page will just freeze on the loading animation notification. There is even no chance to copy and paste your code, so everything unsaved will be lost. This can be improved and is necessary, I think.

Description

No response

Additional information

No response

After hitting Save & Run on a device, I'm seeing:

CircuitPython Version

8.1.0 - beta 2

Workflow(s)

WEB

Browser(s)

Chrome not-latest 112.0.5615.138 (Official Build) (win11 64-bit)
(it's now updating)

Steps

Goto your board over wifi having ejected/unmounted the usb drive if connected to a device instead of power supply.
Move cursor to end of line in a file like settings.toml.
Use copy and paste keyboard shortcuts with nothing selected.
Cursor moves to new duplicated line.
Use keyboard modifier and arrow keys to select a part of the new line.

Observe the line above get highlighted instead

Description

You can see in the screenshot that the second line (line5) has the cursor, and I've used the keyboard to select my AIO key, but the line above has been highlighted instead.

Additional information

CircuitPython Version

Adafruit CircuitPython 8.1.0 on 2023-05-22; ESP32-S3-Box-Lite with ESP32S3

Workflow(s)

WEB

Browser(s)

Google Chrome 113.0.5672.127

Console Log

No response

Steps

If the code is longer than 1 single page, the Serial and Editor button will dissappear. So I have to reopen something short in order to open the serial monitor.

Description

No response

Additional information

No response

Since this is starting to grow in popularity, it might be good to add some templates. Something like https://github.com/adafruit/Raspberry-Pi-Installer-Scripts/tree/main/.github/ISSUE_TEMPLATE might be a good starting point.

Use the directory picker to get access to a CIRCUITPY drive: https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/webkitdirectory

It looks like there is a function to define all dot files as text. I assume to accommodate the previous .env web workflow configuration.

Since .env files have been replaced with settings.toml, should the web editor have toml added to extensionMap and dot files removed?

CircuitPython Version

N/A

Workflow(s)

USB

Browser(s)

N/A

Console Log

N/A

Steps

Updating to circuitpython-repl-js 1.2.1 breaks the USB workflow

Description

The USB Workflow needs to be updated to not break with the latest circuitpython-repl-js, which was updated for reliability and so it works with the CircuitPython Installer.

Additional information

No response

This will make it easier to switch between connections.

This is for the Title Bar. Currently it won't parse it as anything other than raw serial output.

it will be much easier to launch, and switch between editors and web docs tabs.

Transfer to code.circuitpython.org if on http. Similar to #23.

I noticed that even though the BLE File Transfer library was updated and then a new Pull Request was merged, code.circuitpython.org still has the old BLE File Transfer library code. This may be as simple as updating the package version of BLE File Transfer.

The web workflow doesn't take into account the board's port, and always tries to connect to 80.
When the board is configured uses a different port, it can't connect back to it. (CIRCUITPY_WEB_API_PORT)

Unable to connect. The device 192.168.1.92 was not found. Be sure it is plugged in and set up properly.

(from adafruit/circuitpython#7168 )

Ensure we are transferred to code.circuitpython.org if on http.

This should match circuitpython.org.

I did not see a bug template or anything sorry, so I will try to give all the info I have here.

Bug

When trying to use the web editor I am running into the following error:

I don't see self being referenced anywhere else in the codebase, should it be a this?

Reproduction

1. Connect via USB to Pico W
2. Click "open" or "save" actions
3. Should infinite spinner and error in console

Info

Adafruit CircuitPython 8.0.0 on 2023-02-06; Raspberry Pi Pico W with rp2040
Board ID:raspberry_pi_pico_w
UID:E66141040356482F
MAC:28:CD:C1:04:37:4B

Clicking reconnect, then request device works for some reason, but it should just be one click.

Test condition:

• Windows 10 with Chrome 106.0.5249.119
• Seeed Xiao RP2040
• CircuitPython 7.3.3

Procedure:

• Connect the microcontroller with USB workflow
  • without opening any file
  • from browser console, seeing the serial output
    • which confirms that the code is running
• Click on the Disconnect button on the top-right corner
• Result: the browser tab freezes.

Tried:

• checked browser console, seeing log that the same info is repeated fast.
  • probably there is a dead loop caused by disconnection.

This issue will mostly serve as a thread that other can contribute to with some ideas for future functionality with the CircuitPython Code Editor. Here's an initial list I came up with based on taking a look at https://python.microbit.org/v/beta:

• Some code snippets which could be cool. For snippets, perhaps either we could make use of Read The Docs or include some code snippets in the repository of the library and have some kind of interface where it grabs the code snippets we have there
  • We could also possibly use Read The Docs to display some integrated documentation
  • The tricky part would be having it know which docs went with specific library functions
• Maybe we could do something like Pyleap and load code from a learn guide in the future, though the details would need to be worked out.
• Adding some tabs and just displaying the active document in the serial terminal and editor
  • This would also be a bit tricky with juggling and transferring between URLs, but not impossible
• Adding additional language support
• Font sizing is a great idea
• Perhaps some color themes for people who don’t like the dark look of the editor
• Adding something like CircUp to the Editor as well like has been discussed in various places
• Deployment to Devices has been discussed
• Perhaps adding some kind of Self Signed Certificate generator may be an option along with deployment so we can do HTTPs for Web Workflow.

Feel free to contribute your own ideas.

CircuitPython Version

Adafruit CircuitPython 8.1.0-beta.2, ESP32-S3-DevKitC-1-N8R2 board.

Workflow(s)

WEB

Browser(s)

Firefox and Chrome, Linux, Android and MAC.

Console Log

No response

Steps

http://cpy-2b4f34.local/code/ don't load the code editor. Some weeks ago it was working perfectly for me.

Description

When the code page opens, I quickly see the following string: "Unable to connect. The device [local IP address] was not found. Be sure it is plugged in and set up properly."
Then I see this:

I erased and flashed a few times the CircuitPython binary.

I tested to change the CIRCUITPY_WEB_API_PORT.

I tested in two different ESP32-S3 as also in one ESP32-S2, that always worked well for me.

I also tested on a different wifi network, with only my PC and the ESP32-S3 board.

Tested on 2 different Linux Ubuntu computers, on one Android Phone and on one MAC.

Additional information

See adafruit/circuitpython#7929

When is is possible, plz.

For USB and possibly BLE, we require the user to perform at least 2 steps to connect. If the user cancels in the middle of this, I'm not sure if this is being handled properly. Additionally, the UI could use some improvement to better inform the user that a step is complete.
I don't think this affects Web Workflow because it's basically 1 step, though I suppose if the user fails to type in credentials it may not be handled properly, so that should probably be checked too, though I imagine the result is they'll either get an error or it will prompt them again next time.

Here's what I think needs to be fixed for this issue to be complete:

• If the user closes the dialog early, a disconnect should be performed
• Check that Web Workflow is properly handled if the credentials dialog is dismissed
• As the user completes steps, something like a checkmark should visually inform the user that it is complete
• If the instructions are on a small screen like a phone, it should scroll to the next step the user is expected to do
• Fix it if there is an issue so that the user knows what to do

I get an about:blank#blocked page from CLICKING the "about://flags/#enable-web-bluetooth-new-permissions-backend" link in the code.circuitpython.org page

#17 is a pr that changes the link to chrome://flags/#enable-web-bluetooth-new-permissions-backend

[CLICKING added for clarity}

On MacOS, with a RP2040 Zero board.

• connected to the board with the USB workflow
• allowed access to the drive (not called CIRCUITPY)
• write in a new file print("Hello")
• save as "text.py" in the board's drive via the Save as button
• page stuck on the rotating "loading blinka" animation

The following message output repeats in the console:

write
usb-file-transfer.js:150 Setting modification time not currently supported in USB Workflow.
writeFile @ usb-file-transfer.js:150
await in writeFile (asynchrone)
writeFile @ file.js:67
writeFile @ workflow.js:285
up @ script.js:393
saveFile @ workflow.js:232
saveFileAs @ workflow.js:249
await in saveFileAs (asynchrone)
(anonyme) @ script.js:77
script.js:400 write failed ReferenceError: encoder is not defined
    at oa.writeFile (usb-file-transfer.js:156:13)
    at async Nl.writeFile (file.js:67:13)
    at async aa.showBusy (workflow.js:149:22)
    at async aa.writeFile (workflow.js:284:16)
    at async aa.up [as _saveFileContents] (script.js:393:13)
    at async aa.saveFile (workflow.js:232:13)
    at async aa.saveFileAs (workflow.js:249:17)
    at async HTMLButtonElement.<anonymous> (script.js:77:20) ReferenceError: encoder is not defined
    at oa.writeFile (https://code.circuitpython.org/assets/js/script.js:13:46341)
    at async Nl.writeFile (https://code.circuitpython.org/assets/js/script.js:13:3175)
    at async aa.showBusy (https://code.circuitpython.org/assets/js/script.js:13:30340)
    at async aa.writeFile (https://code.circuitpython.org/assets/js/script.js:13:32214)
    at async aa.up [as _saveFileContents] (https://code.circuitpython.org/assets/js/script.js:16:769)
    at async aa.saveFile (https://code.circuitpython.org/assets/js/script.js:13:31429)
    at async aa.saveFileAs (https://code.circuitpython.org/assets/js/script.js:13:31685)
    at async HTMLButtonElement.<anonymous> (https://code.circuitpython.org/assets/js/script.js:15:1877)
script.js:79 Current File Changed to: null

For ease of reading, it would be useful if a newline was added between device entries.

Screenshot of multiple boards attached.

Currently it goes to the next browser item

This may or may not be an issue. I need to test when all Web Workflow devices are on ports other than 80 to see if it works.

With 1 device set up with port 8080:

• Test going to https://circuitpython.local/code/
• Test changing to another Workflow
• Test going to https://code.circuitpython.org/ and choosing Web Workflow

With 2 or more devices set up with port 8080:

• Test going to https://circuitpython.local/code/
• Test Device Discovery
• Test clicking on a device in Device Discovery
• Test changing to another Workflow
• Test going to https://code.circuitpython.org/ and choosing Web Workflow

With 1 device set up with port 8080 and 1 device set up with port 80:

• Test going to https://circuitpython.local/code/
• Test Device Discovery
• Test clicking on a device in Device Discovery
• Test changing to another Workflow
• Test going to https://code.circuitpython.org/ and choosing Web Workflow

Just test if it works properly on a Raspberry Pi 400 desktop running the latest updates. I don't believe it comes with chrome, so maybe follow this first: https://pimylifeup.com/raspberry-pi-chromium-browser/

• code.circuitpython.org loads and functions properly
• A device can be connected to via Web Workflow
• Check UI stuff like File Dialogs and Serial Terminal
• Check browser console to see if there are any errors

hi I tried to post this to forum topic about microbit V2, but when submitting some f... crazy thing stopped me becasue of "CMSIS-DAP" word but then it was also impossible to submit after edits, I am starting to hate entire microbit thing deeply....

I tried microbit V2 (CP 7.1.0 beta 1 and nightly build too) on windows and also on mac but its frustrating - on mac I was able to go to editor once but then it hanged after first save&run too (actually then impossible to shutdown mac because of chrome, I must force switch it off).

On windows in chrome I tested chrome://bluetooth-internals, where lots of "Unknown or Unsupported Devices with different MAC started to occur - this also happened once from webeditor in "pairing dialog" - stream of unsupported devices after powering up microbit. Also on windows I see immediately after power-up in connected devices (so without any pairing activation with reset during fast yellow leds) device "BBC microbit CMSIS-DAP." and when I try to add, CIRPY shows as possible. (Here I mostly don't paired and removed also the CMSIS-DAP thing before trying webeditor connecting)

On Mac, I am now trying also chrome://bluetooth-internals and here is CIRCUITPY531b device but trying to inspect it from here to show services, means rotating circle only (and just after inspect, it was red message unsupported device also - the same trying to connect). On CIRPY device services are inspectable here. Now after trying to Pair CIRPY from webeditor, I see again only blue animated gif and latest chrome asi again totally hung.

CircuitPython Version

irrelevant

Workflow(s)

BLE, USB, WEB

Browser(s)

Version 111.0.5563.146 (Official Build) (x86_64)

Console Log

No response

Steps

Click and drag to select a single word or multiple words in a single line.
Notice that the background color of the selected words does not change.
Once the selection spans multiple lines, a bright orange selection background appears.

Description

No response

Additional information

If you just type code.circuitpython.org into the browser, then the USB connection will not work. You must be on a secure site (https://code.circuitpython.org/) for the JavaScript to work correctly.

The website should automatically redirect to HTTPS if it goes to the HTTP site.

Possibly add a "Forget all known Bluetooth Devices" feature. While this is possible through the browser menus, it's difficult to find and requires a lot of navigating. This can make it easier to clear out old devices for troubleshooting the connection.

Ctrl/Cmd + S should save
Ctrl/Cmd + O should open
Maybe + R to run and something else for switching between views
etc...

See #34 for more details.

Essentially runCode() was copied and pasted over to workflow.js from script.js, but a call to changeMode() was not adjusted and was out of scope.

Make current path in file dialog more obvious what it is. When you first go there, it only shows a / and isn't very noticeable until you navigate. Possibly prepend board name to it.

The same thing should also be done with the path above the editor.

At the same time, these changes should be responsive so they work on mobile devices.