I love PICO8, TIC80 and all sorts of fantasy console stuff, I really do. Maybe I have the nostalgia fever, but I think it’s so awesome that a single environment can provide code editor, repl terminal, integrated sprite and level editor, sound effects and tracker in such a small binary. It would be great if it was just that but it does work on the browser and the way to share games are “cartridges” that are nothing less than PNGs! Oh, by the way you always run your games from the source (kind of) so you can change things on the fly! The documentation is so simple it fits in a txt. Seriously, this is the most fun I got from programming since Processing!
Now that you know my feelings about fantasy consoles, Pixel32 is a crazy attempt to bring this experience as a self hosted environment for Kano’s Pixel Kit powered by MicroPython’s WebRepl.
The idea was to provide a more “advanced” environment for people who had graduated on the original Pixel Kit block based programming environment but also try to deliver what the product promised from the beginning: To be a portable platform for creative coding. I have written before about that so I’ll skip the details on where the official experience fails on this promise.
The name Pixel32 is very much inspired by the fantasy consoles, 32 is supposed to relate to the ESP32 microprocessor on it.
The experience I had in mind was:
- A hardware that provides the software to interact with it (through the browser, zero software installation required)
- It should work without cables so it’s possible to use it with tablets or mobile phones without compromising experience with cables
- Default interface could be replaced by simpler (blocks and other visual programming) or more advanced (Mu Editor, Flying Circus, Atom, etc) environments.
- It must work even without internet or wifi networks available
- Full offline documentation
- Sprite editor
- “Surf” mode to browse and share community creations
- Switching from the official experience and the Pixel32 should be simple and reversible
Those were goals based on feedback from teachers, hobbyists and mostly from my desire to write software to implement the kind of open, adaptable and constructionist learning environment described in the book I was reading at the time: Mindstorms, from Seymour Pappert. This is one book I try to convince every person to read. And this is it, you should definitely give it a try if you haven’t yet.
I managed to develop most of the things on the list (missing only the sprite editor and “surf” mode) but unfortunately the project was halted for reasons that go beyond the scope of this build log and I had to shift focus.
During the development period, a group of students from the US mentored by Brian, an amazing an inspiring mentor, were trying out the software and exploring the content created. They gave feedback as the features were coming out. Everything looked so good that it was hard to believe, I wanted to try more and in different ways to see if it would still work! My heart was real broken when I sent the email saying the project was halted.
I learned a lot building it and this log is all about sharing those learnings.
The first challenge was actually making and hosting the interface. Thankfully I had the Webrepl.js from Flying Circus to make things easier but it’s not because the ESP32 can host pages that it’s super reliable to do so. Also, how to solve the networking and IP situation without cables? Oh yeah, the board has 4Mb flash storage but transferring 1MB means loading 1Mb on the board’s RAM which is way smaller than 1Mb. Thinking about a page that makes multiple http requests for css and js? What about the images on the offline documentation?
To solve all this I went on a bumpy ride. I managed to make a relatively small user interface that would fit inside the board nicely even including full documentation. without images, of Pixel32 and the MicroPython library for Pixel Kit. You can check it online here.
The user interface comes with a “download” button that simply downloads the page out of the board into your computer (aka “Save as”) so you don’t rely on that huge deliver of html anymore! But because I’m sophisticated person, I hide that button if you are already accessing it from a file, you are welcome.
I’m especially proud of using native web components, choojs, dev environment that doesn’t need to build and having a simple and straightforward build process that does only what it needs: To put files together and reduce size, amen. Look mom, no React!
And you would think that was the hard part, right? Beyond the front end of this user interface I had to also make quite some backend in MicroPython. Not only did I have to host the interface but also all the Wifi settings, setup “modes” and libraries. The most annoying-but-fun part was probably the offline “terminal” screen: I had to make my own kind of parser for the ip number in decimal and binary (but written in decimals!). And it doubled the fun when I had to also implement in MicroPython a binary ip number display. I got so happy about it but also came the realization it’s the kind of thing you’ll share and a very specific type of people reply with excitement. That part of the code is here.
So, how is everyone else supposed to put all that work inside their PixelKits? I had to find a way to bake all my python files with my html files into a MicroPython image. That took me a while but eventually I got it sorted out accepting that I would not have a clean MicroPython image but a snapshot of the ESP32 memory to flash. Reading about how to do that brushed in my face the raw nature of filesystems. Respect. I made a Docker container to solve all that and of course you can look at the code if you are brave.
Next step, I can’t expect people to really install python and all sorts of things to be able to type a ridiculously big command with numbers like
0x1000 and everything so I made a tool (Kano Pixel Kit Flash Tool) to erase, replace the official firmware and rollback that in case you want to use Kano Code ¯\(ツ)/¯.
I also made a bunch of videos in which I explore the features of the board and MicroPython on awkward silent videos. You can find them on the Tutorials.
I have no real intention to develop anything else for PixelKit specifically but perhaps aim more towards MicroPython in general. I still believe in you, Pixel32!