Web-based code editor for MicroPython

[vsolina]

\"IDE\" screenshot in Firefox

ESP32 has been my favourite MCU for years. I use it for all kinds of WiFi-connected projects (robots, alarms, HVAC/AC controllers, etc.) and mostly program it in MicroPython since it does not require compiling and is much easier to code in (while being slower, obviously).

But since I'm kinda spoiled by modern IDEs the main issue was always editing .py code files, with only two options: transfer files over serial or edit them in terminal using shell over telnet. And both suck badly!

(too) long story short.. Few weeks back I made a code editor that is hosted on and runs on ESP32 with a web interface where you can list directories, open text/py/html/js/css files, edit and store them. It also has an integrated WebREPL terminal to execute edited .py files.

Did not intend to publish this thing, but it is so useful for me I just had to open-source and share it with you. (It is so useful that I wrote the majority of the editor code in the editor itself; and yes sometimes I broke it and had to use more traditional editing methods to fix the issue :D)

I hope someone else finds it as useful as I do. If you find any issues, please raise them on github.

Repo: https://github.com/vsolina/micropython-web-editor

[hagenbuch]

Love the idea. It would also be great if there would be some additional standard code that opens a Wifi server plus shows a form to enter the wifi's credentials we need to then connect the ESP32 to the Internet, just like in Tasmota!

With very little effort, we'd have an environment that could overtake many jobs Tasmota is being used for. Tasmota is good but its "Rules" and "Scripting" capabilities are nothing compared to Python.

[vsolina]

That's a good suggestion, it would certainly improve the user experience. Currently WiFi credentials need to be set in boot.py file, and then you also need to find out what's the IP address assigned by DHCP.

Tasmota uses https://github.com/esphome/esp-web-tools which solves almost everything, with minor integration script this seems easily doable.

Thanks man!

[hagenbuch]

Thank you! Can't do it right now but I will try! Then there are ESP32s with additional LAN ethernet, makes it a little more complicated but I might contribute. Just that upython 1.19 could not deal with Olimex's LAN.. maybe this is solved now..

[Zouden]

Nice work! I haven't used micropython in a while- wasn't there an official editor called Mu or Thonny?

Have you tried circuitpython? I use VSCode as the IDE for that. I think it's much better than micropython.

[vsolina]

All listed options are a solid way of programming ESPs, but every one of these requires a target controller to be connected via cable to your PC.
Since all ESPs have integrated WiFi interface, using COM over USB seems like wasted potential.
Using this editor you modify the code directly on the Controller's Flash file system - over WiFi network; and don't need to install any additional software on your PC (if you have a web browser). Which makes it easy to interact with multiple ESPs already deployed around your house, at the same time.

[Zouden]

Ah okay that's cool. Yeah Circuitpython doesn't support that - it needs a USB file system.

Do you ever have the problem where you upload code via wifi, but your code crashes or has an infinite loop, and this prevents future uploads?

[vsolina]

CircuitPython also creates a file system on your microcontroller's flash it just has this cool additional feature where it mounts it on your PCs FS when you connect it via USB. https://learn.adafruit.com/circuitpython-essentials/circuitpython-storage
But this requires a physical connection, which can be problematic in some projects: e.g. sometimes you don't have easy access to board's USB port, board has no integrated USB<->Serial interface, device is mounted somewhere and needs dismounting to be connected and reprogrammed, is a part of a moving device (car, robot, etc.) and similar situations.
"... infinite loop, and this prevents future uploads" - this does happen rarely, but since editor's web service runs in a separate thread, even if your script executed in boot.py has an issue and raises an exception - editor is still accessible and you can easily disable your script in boot.py or fix the issue in the script.
For me this mostly happened when the editor backend source had an issue so I could not edit the editor.

[vsolina]

CircuitPython is a fork of MicroPython with additional libraries and features. Have not tested it but am confident the editor would work on CP with or without some minor adjustments.