River Wang

Welcome to the CircuitPython Show. I'm your host, Paul Cutler. This episode, I welcome

River Wang. River was a Steam teacher before becoming a full-time software developer three

years ago. He created the CircuitPython Online IDE, a browser-based platform that allows

users to work on a CircuitPython project on the web or as a self-hosted website.

- River, welcome to the show.

- Great to be on the show.

- How did you first get started

with computers and electronics?

- So unlike many guests,

I didn't have a Commodore 64 when I was a child.

So all the journey started when I go to the college.

My major was electrical engineering.

So in my freshman year,

we had a C++ programming course.

That is pretty standard.

So it was boring at the beginning, I would say,

just as you were variables, if-else,

for-loop, something like that.

But there was a homework problem to print out

a pyramid in the terminal.

So basically, you do one star in the first row,

two star in the second, and et cetera.

And the problem was actually pretty easy.

But I suddenly realized that even if I am in a terminal,

just plain tasks, I'm actually doing graphics.

And if I can do this periodically

with slight change in the between,

I can actually do graphics, right?

And if I can capture user inputs,

and this is basically a video game.

So I spent a whole night writing 200 lines of C++,

and I got a snake game working.

So I was very, very excited.

And that was the first time I found coding is pretty fun.

And in terms of electronics, it's

very natural because I was in the electric engineering

department.

And what we had was we had a lot of microcontroller computations.

We have projects, and we do presentations,

and we hosted some booths for our classmates

to come and play with the demos.

So basically, it kind of makes a fair thing.

So my first project was an assistive device

for people who cannot use regular mouse.

We put gyros and accelerometers inside a hat

so people can move their neck to move the cursor.

And it was based on C51 microcontrollers back in the days.

And the USB part was done by a separate chip

called USB-D12.

And another device I joined the competition

was a competition hosted by a wireless sensor lab.

So they provided us a lot of MSP430 microcontrollers,

which are first ultra low power, and second,

they have a great computational power

that you can do FFTs on board.

And they give us these chips and want

to know what kind of sensor applications we can do.

But what I made was a game handheld out of it again.

I just want to be fun.

So instead of doing some classic games like Snake, Tetris,

what I did was I copied many of the popular phone games

back in the days, like Flappy Bird, 2048, and Dodo Jump.

And I also did a little bit of research

to do a connect file, which was a strategy.

How did you get started with Python?

So that was when I went to graduate school, my research work requires a lot of

scientific computation, uh, scientific programming and school bought us metal

at license for scientific programming.

And it was very popular in engineering departments.

And I actually like it a lot, unpopular, I'll bet you.

I even use it for my personal projects,

such as I did synthesizers, I did task processing,

and I think I should use this even after I graduate.

So I checked the price for a personal license a year,

well, so high.

So I realized I need to look for some alternatives,

so I switched to Python to use NumPy and SciPy.

- You mentioned that you were a STEAM teacher.

What were you teaching?

In my last few years in the graduate school, I got a part-time job teaching

the outreach program in the electric engineering department.

So basically the outreach program is we use university resources, such as labs,

faculties to teach some field trips and summer camps to local school districts,

like high school, middle school, and sometimes primary school.

So in our automation lab, we got 3D printers, we have software stations, and computers installed with Arduino IDE and AVR Studio.

So we create courses of different levels.

And microcontroller was always my favorite topic because it has a bit circuit, a bit programming.

And we usually use the RGB LED in our projects.

And we have 3D printers, so we print out 3D cases onto that.

So it's also a very good amount of art in it.

How did you discover CircuitPython?

So we had a very nice lab setup.

And everything worked very well in the beginning.

And then suddenly, the pandemic hit us.

and schools are shut down and no one can come to the lab.

And many departments in our university, they just shut down their outreach program because of this.

And we tried to survive, and we tried to mimic everything in our lab with the remote learning experience.

So some parts are very easy.

The lectures can be given by Zoom, and we use Zoom for small group discussions.

and we ship the lab kits to the students,

and 3D printed models are printed in the lab,

and we ship the result to the students.

And for soldering, we pre-solder the sockets

onto the PCB board,

and students insert the components into the socket.

But one part is actually very hard,

is we didn't know how to get the students

to write program to the microcontroller.

So two sides.

On the hardware side, it's like we used ATtiny chips to lower the cost for the students.

And in the lab, we used some special device to write program onto ATtiny chips.

I think the previous teacher used a debugger or GTAC or something like that.

I used a programmer.

And those devices are very special first and very expensive.

And we cannot ship these devices to students.

And second, on the software side,

it's like first, students are at home, not in school.

So they have all different kinds of computers.

And some use PC, some use Mac.

And a majority of the students are actually using Chromebooks

and actually locked down by the school districts.

So it's very, very hard.

First, because so many platforms,

we don't know how to teach them to install the IDEs onto their computers.

And second, if they are using Chromebook, it's almost impossible to install anything.

And even when it is possible, we just found out the setup process is not very easy.

So at that time, I was looking for solutions that students can program their microcontrollers.

First, no special hardware needed.

And second, no special software needed.

I wasn't very optimistic at the beginning,

but I actually found two solutions.

And MakeCode was the solution for younger kids.

And I found CircuitPython for older kids,

like middle school and high school students.

So it was in the days of CircuitPython 6, I think.

And it was advertised as the easiest to set up,

the bare minimum set up to do a circuit bypassing project

is you have a USB cable, connect the microcontroller

to the computer, and on the computer,

you need nothing but a code editor or just text editor

to edit the code file.

So that was amazing.

That was so mind-blowing to me.

I never imagined such a thing can be possible.

So I think this thing can be used

in our Altrage program online.

- You created the CircuitPython online IDE.

What IDE were you using that led you to create your own?

- We set a bare minimum set up

for a CircuitPython development.

It's just a text editor,

but the classroom experience can be very much improved

if we have a dedicated IDE, and what do we want from it?

So as we said, we want the experience to be consistent

across all operating systems.

And we don't want to install anything,

and we don't actually want to set up any configurations

to make a microcontroller work.

And what is that?

no installation, and same on all operating systems.

And that is a website.

So what features do we want from the IDE?

As we said, we need a text editor.

Yes, I saw a lot of websites have a text editor.

And I just happened to use a web-based serial console

back in the days in my own project.

So I know this is also possible in a website.

Not surprisingly, I was not the first person

to think about that.

So I actually found a lot of projects doing that.

But it's like not all of them are very active, developed.

And almost all of them are missing some feature I like.

Some of them works, but very, very bare minimum.

So what if I want to add some features to that?

For example, the best one doesn't have a serial plotter.

So if I want a serial plotter, do I back the author to add it?

So because I want this so much, why don't I

start in my own project?

So I call it CircuitPythonOnlineIDE.

So around this CircuitPythonOnlineIDE,

I created three courses.

So the first one was a traffic light simulator.

So the PCB board is basically a picture of a crosswalk.

and we put NeoPixels onto the PCB to mimic the traffic lights.

And students write programs to simulate the pattern.

And the second one we call the sensor interface,

which is a handheld device that has a screen and a buzzer.

Students using alligator clips to clip sensors

onto the device.

And the students write programs to show

the readings on the screen, and they

use the buzzer for alarming.

And this can be combined with a lot of science class,

like they can be used in some physics experiments.

So scientists teachers like it.

The third course I created was a RGB night light.

It is basically a Trinket M0 with a photoresistor

and with 3D print case onto that.

So it measures the ambient light

and show color patterns in the dark.

So in my days, I taught the classes via Zoom calls, so everything was remote.

It worked out very well.

And then I left the program.

My fellow teacher actually went to the schools.

And because the schools resumed, but the university lab was still closed.

So she basically went to the school classrooms and teach there.

It's just a regular classroom, regular classroom Chromebooks, but we can use the IDE, just

in regular classrooms.

So this simplifies the setup a lot.

They don't need a dedicated lab to teach these classes.

Tell me more about the CircuitPython Online IDE.

How does it work?

The most basic part is a text editor and a serial console.

So the text editor relies on a browser feature

called File System API.

So basically, your website can open a local folder

inside your computer and edit the file in it.

And Serial Console relies on a Chrome-specific feature

called the Web Serial API.

So that allows your website to directly talk to a serial port.

These are the two foundation technologies

inside the SQLpi.NET IDE.

And all the features are built based upon these two features,

such as the plotter is based on the serial connection,

and the library management is based on the file system API.

So when you use the IDE, you can go to the website,

the CircuitPi.dev and then you first connect your microcontroller to the computer by USB cable

and inside the website and you can open CircuitPi drive as a folder with one button

and connect your serial port with another button and you're all set to work on your project.

What kind of challenges did you face in developing the Online IDE?

Yeah, so actually, when I started this project, I had no experience on web development at all.

So basically, I asked my CS major friend, and it's like, "Well, do you have any resource,

do you have any class material on web development?" He just dig out one homework folder and send that

to me and I started everything from there.

It was a very bare minimum HTML page with no static refinement, but it just worked.

There was a text editor, there was serial communication, and now I call it version 0.

And I then start to add some features to this version 0, like some shortcuts that I like.

And I also added the plotter into that.

And after I add the serial plotter, everything is just so messed up because that was my first

JavaScript project.

And when I tried to add folder view and editor tabs, I just had to start over and create

a new project for it.

And that one was doing pure JavaScript.

And that one was called version one.

So when I was teaching online, I was using version 0.

And my fellow teacher, when she was

teaching the high school classrooms,

she was using version 1.

And when I just tried to fix some bugs in the folder view,

I found this code is too messy again.

And when people see if you are not

using a front-end framework, you're

basically writing your own framework.

So definitely, my framework was not very well.

So I adopted the most popular one, React at the moment.

So I basically refactored everything and rewrote the online IDE again in React.

Because that was still my first React project, and the first trial was still very, very messed

up.

That was version 2 beta until, and when I tried to release the version 2 official without

beta that was refactored again.

So it's like major refactoring all the time.

What was the biggest challenge is that everything was developed while learning.

It's like, but, and also proved that if one wants to make some contribution,

doesn't have to be an expert.

So you can start from zero experience.

One of the things I like about the CircuitPython online IDE that you've

created is that you can host your own version, which can probably help in a

locked down IT environment like a school.

Yeah.

How hard is it to self-host?

So first the SQLPython online IDE is an open source project.

So the source code is hosted on GitHub and actually the IDE itself is a static

page that is hosted on GitHub page.

So the only feature that requires a backend service over the internet is the library management service.

A proxy service is used to download the Adafruit bundle and the community bundle to the IDE.

And that proxy service is hosted on Google Cloud.

So if you want to host your own version, you can just fork my GitHub repo and make modifications if you want,

and create a GitHub page out of that repo.

So if you want to host a proxy yourself, you can check the source code in the repo and

create a Google Cloud Run function out of that source code.

So that's everything you need to host your own version.

But in addition to that, if the only thing you need is just to run the IDE, but you cannot

access my deployed version.

Actually, I know many school districts

have very, very strict firewalls

so that my version is often blocked.

In that case, you can go to my GitHub repo

and go to the release section.

And there you can download the latest version

of the online IDE as a single HTML file.

And you can run that HTML file locally offline.

How does it help educators?

Because the idea was created inside the classroom.

It was created to solve classroom problems.

And this has never changed.

It's my always how education in the first place.

So some design principles.

Captive from the beginning.

So if you open the website, it's a good pilot dab.

It will show what the students need to finish their first class project.

and nothing more and nothing less.

So all the advanced features are hidden

in the manuals and shortcuts.

And I also try to reduce confusion in the UI

as much as possible, such as I don't often use icons.

Everything is just written out as plain text.

Because I use the IDE myself, if that is useful to me,

it can also be useful to others.

So, well, I think everyone working on a DIY project can benefit from this.

And I also remember many of my students who expressed their interest in microcontrollers even after the course.

So I also want to support the students and continue to work on their projects even after the camps or the field trips.

You've mentioned some of the features of the IDE.

Can you share some of the useful ones?

So in the IDE, in the menu bar, there is a button called Tools.

Click on that.

It will show you some useful features.

And serial plotter is going to be the most used feature.

And you can plot, zoom, truncate in time,

and add legends to it, and also use one of the column

as x-axis.

So this is a very powerful plotting tool.

The plotter is actually compatible with Moo Editor.

So if you have a plot code that is already working with Moo,

it should also work here.

And another feature I recently added to it

is library management.

So if you used the CircCraft before or heard about it,

it's basically similar but with GUI.

So there are two ways you can use it.

So first, if you use the auto installation,

it will analyze your CircuitPython code

and install all the libraries needed,

and also with dependencies.

And that is from the Adafruit bundle

and the community bundle.

So there is also a list of all libraries

from both of the bundle.

You can search libraries from this list

and install, uninstall, or upgrade on demand.

And also there is a button in the UI

that links to the library repo

so that you can read more documents

and source code or example.

And the third feature that I want to share

is the camera feature, the camera tool.

This one has nothing to do with the microcontroller itself,

but whenever I want to show people something,

I just found myself need to open a separated app for camera.

Because microcontroller projects are not just a code.

You want to photo your dev board breadboard.

And that's why you need a camera.

So in the camera tool, you can point your webcam

to the microcontroller and view it just inside IDE.

and you can flip, rotate, zoom, everything you want to do.

This can be very helpful for teachers

and you can show whatever is on your desk

on the large projector in the classroom.

And also if you're a hobbyist that want to stream

or record your project, this can be also very helpful.

- That's pretty cool.

What's next for the CircuitPython online IDE?

Yeah, so if you go to the repo and go to the issues section,

there are a lot of feature plans and enhancements plan.

So there are two features I am actively working on

at the moment.

One is called connected variables.

So if you want to talk to a running program,

usually we just use a serial console,

But text flow is not the most intuitive.

Even if you can use the plotter, sometimes it's still not

the best way to show what is going on in the program.

So I want to provide a bunch of wedges that can directly talk

into variables inside the program,

such as buttons, selections, meters, and color pickers,

et cetera, so that you can talk to a running

program both ways.

Another feature is debugger.

So as far as I know, MicroPython and CirclePython

doesn't have PDB, which is the default Python debugger.

So I am working on some kind of workaround solutions

to provide step-by-step debugging, breakpoints,

and expression wash.

How can people support your project?

If you want to support a project, just please use it as much as possible and share it with

others, share it with other teachers specifically, and give me some feedback and tell me how

you are using the IDE, what is your story, or if you have bug reports, feature requests,

please let me know.

So, if anyone wants to learn more about it, where should they go?

I have a YouTube channel called CircuitPythonic,

and I also post on Twitter and FosterDom.

I really post IDE updates and my personal microcontroller

projects.

I'll make sure I link to those in the show notes as well.

Last question I ask each guest.

You're starting a new project or prototype.

Which board do you reach for?

So I don't have a specific chip set to go to,

But I do have a go-to form factor, which is the Cedarino shell or Adafruit Qt Pie.

One of the reasons is I still don't know how to do reflow.

So usually I just solder the whole data board onto the PCB.

So the smaller the data board is, the better.

And another reason is I have a very, very long commute every day.

So I often work on my personal projects on the train.

So I wish the data board can be as small as possible.

At this moment, my setup is a Cedrino Celsin 52840,

and I use a mil-to-mil adapter, not a cable, just an adapter,

to plug into my laptop, just like a USB dongle.

But you know what can be better?

A type-C chain key, which doesn't exist yet.

I will surely carry one with me all the time.

So, Elafrod, if you are listening to this, please make it happen.

River, thanks so much for coming on the show.

Thank you. It's great to be on the show.

Thank you for listening to The CircuitPython Show. The show notes have links to the CircuitPython

online IDE available at circuitpy.dev, and I encourage you to try it out. For show notes

and transcripts, visit www.circuitpythonshow.com. And if you're enjoying the show, consider sponsoring

the show to help offset the costs of podcast hosting, recording, and more. Visit the sponsors

page at CircuitPythonShow.com to learn more. Thank you for your support, and until next time,

stay positive!

you