CircuitPython IDE for Chromebooks Moderators: adafruit_support_bill, adafruit

[MrCoxall]

I have seen in many articles that "CircuitPython can even be used on ChromeBooks", which is true but in a school setting unless you are using MakeCode, this is not practical.

If you are using CircuitPython there is a huge problem, especially if you are using school supervised Chromebooks; you can not load Mu. Now technically you could use the Linux app on a Chromebook and load Mu, but I do not want to even get into that. (My Board IT department refuses to turn it on because they are not sure it would be safe. I know do not even talk to me about it!). You can use the built in text app, it even colorizes your code once you save it with a *.py extension. The problem is there is no REPL. When students have an error, there is no feedback. Ok, so there actually is the LEDs that give feedback but that is not practical. They need the error code and line number to be able to fix the problem.

So, what I need is a web based IDE that will let you see the REPL. Luckily due to Web USB, this is actually possible as long as you are using a modern version of Chrome. Here is my first cut at making such an IDE. I am not an HTML and JS guru, but the basics are working.

- https://mr-coxall.github.io/CircuitPython-IDE
- GitHub repo at: https://github.com/Mr-Coxall/CircuitPython-IDE

If anyone has any fixes to my current issues please pass them along.

My goal is to use it next year with my grade 11 CS students. Another issue I am having is using Python on school supervised Chromebooks. I have used Repl.it and AWS educate. Both actually work really well. The problem is I find actually programming a "physical" thing is much more engaging to my students. So my idea is to give each student some kind of CircuitPython device and let them code with it. No login to anything required and no intervention from the IT department, everything just works.
:)

[tannewt]

That looks awesome!

On Chromebooks I've used a text editor and Beagle Term. Your Web IDE looks much better! Thanks for posting links to it.

[kmevans]

This seems like a really great resource to have. I have a technical question about how this works versus https://python.microbit.org/v/2.0

I'm running Chrome "Version 80.0.3987.149 (Official Build) (64-bit)" on a Windows 10 laptop. And the Micro:bit online IDE is able to provide a serial terminal, but this IDE for CircuitPython requires some additional experimental features:

"Sorry, Web Serial is not supported on this device, make sure you're running Chrome 78 or later and have enabled the #enable-experimental-web-platform-features flag in chrome://flags"

Any idea how the Micro:bit IDE is able to handle serial without this experimental web serial enabled? After a little research it seems that its able to use WebUSB which must be available without having to enable experimental features? https://github.com/ARMmbed/dapjs

Anyways maybe I'll open another thread to ask about how web apps can communicate with Circuit Python boards. It couldn't find any references to people using WebUSB with CircuitPython, other than this which seems to have be closed due to Web Serial being available: https://github.com/adafruit/circuitpython/issues/605

[kmevans]

I meant to ask if you would consider adding license information to your original code. I saw a license mentioned in the code from google, but not in your original work.

Also for my own curiosity, I wanted to explore WebUSB a little bit more. I know that I could dump USB descriptors and look there, but I simply pasted the following into the chrome developer console to confirm that it can find a Micro:bit board but not a CircuitPython board. So that explains why you had to use Web Serial. Which is fine and seems like a good decision. Is there any possibility the school districts might not allow users to change the required experimental setting?

Code: Select all | TOGGLE FULL SIZE

const filters = [
        {'vendorId': 0x239A},
        {'vendorId': 0x0D28}
      ];
navigator.usb.requestDevice({filters: filters})
.then(usbDevice => {
  console.log("Product name: " + usbDevice.productName);
})
.catch(e => {
  console.log("There is no device. " + e);
});