1 00:00:02,119 --> 00:00:06,880 Welcome to the CircuitPython Show. I'm your host, Paul Cutler. This episode, I welcome 2 00:00:07,060 --> 00:00:11,540 River Wang. River was a Steam teacher before becoming a full-time software developer three 3 00:00:11,700 --> 00:00:17,060 years ago. He created the CircuitPython Online IDE, a browser-based platform that allows 4 00:00:17,220 --> 00:00:21,200 users to work on a CircuitPython project on the web or as a self-hosted website. 5 00:00:25,560 --> 00:00:26,440 - River, welcome to the show. 6 00:00:27,280 --> 00:00:28,480 - Great to be on the show. 7 00:00:29,460 --> 00:00:30,540 - How did you first get started 8 00:00:30,620 --> 00:00:31,760 with computers and electronics? 9 00:00:32,740 --> 00:00:34,380 - So unlike many guests, 10 00:00:34,920 --> 00:00:37,580 I didn't have a Commodore 64 when I was a child. 11 00:00:38,280 --> 00:00:42,000 So all the journey started when I go to the college. 12 00:00:42,980 --> 00:00:44,820 My major was electrical engineering. 13 00:00:45,600 --> 00:00:46,820 So in my freshman year, 14 00:00:46,930 --> 00:00:49,660 we had a C++ programming course. 15 00:00:49,940 --> 00:00:51,440 That is pretty standard. 16 00:00:52,420 --> 00:00:54,940 So it was boring at the beginning, I would say, 17 00:00:55,360 --> 00:00:57,820 just as you were variables, if-else, 18 00:00:58,160 --> 00:00:59,340 for-loop, something like that. 19 00:01:00,060 --> 00:01:03,020 But there was a homework problem to print out 20 00:01:03,080 --> 00:01:05,059 a pyramid in the terminal. 21 00:01:05,519 --> 00:01:07,960 So basically, you do one star in the first row, 22 00:01:08,220 --> 00:01:10,020 two star in the second, and et cetera. 23 00:01:10,900 --> 00:01:13,960 And the problem was actually pretty easy. 24 00:01:14,560 --> 00:01:18,880 But I suddenly realized that even if I am in a terminal, 25 00:01:19,380 --> 00:01:22,020 just plain tasks, I'm actually doing graphics. 26 00:01:22,800 --> 00:01:25,160 And if I can do this periodically 27 00:01:25,540 --> 00:01:27,800 with slight change in the between, 28 00:01:28,160 --> 00:01:29,720 I can actually do graphics, right? 29 00:01:30,420 --> 00:01:33,420 And if I can capture user inputs, 30 00:01:34,200 --> 00:01:36,200 and this is basically a video game. 31 00:01:36,720 --> 00:01:40,440 So I spent a whole night writing 200 lines of C++, 32 00:01:41,280 --> 00:01:43,640 and I got a snake game working. 33 00:01:44,000 --> 00:01:45,480 So I was very, very excited. 34 00:01:46,060 --> 00:01:49,820 And that was the first time I found coding is pretty fun. 35 00:01:51,060 --> 00:01:54,100 And in terms of electronics, it's 36 00:01:54,110 --> 00:01:57,600 very natural because I was in the electric engineering 37 00:01:57,760 --> 00:01:58,040 department. 38 00:01:58,740 --> 00:02:03,840 And what we had was we had a lot of microcontroller computations. 39 00:02:04,480 --> 00:02:07,920 We have projects, and we do presentations, 40 00:02:08,619 --> 00:02:11,520 and we hosted some booths for our classmates 41 00:02:11,550 --> 00:02:13,260 to come and play with the demos. 42 00:02:13,680 --> 00:02:16,180 So basically, it kind of makes a fair thing. 43 00:02:17,100 --> 00:02:21,480 So my first project was an assistive device 44 00:02:21,480 --> 00:02:24,180 for people who cannot use regular mouse. 45 00:02:24,820 --> 00:02:28,940 We put gyros and accelerometers inside a hat 46 00:02:29,380 --> 00:02:32,520 so people can move their neck to move the cursor. 47 00:02:33,340 --> 00:02:38,000 And it was based on C51 microcontrollers back in the days. 48 00:02:38,560 --> 00:02:41,440 And the USB part was done by a separate chip 49 00:02:41,440 --> 00:02:44,140 called USB-D12. 50 00:02:45,040 --> 00:02:48,820 And another device I joined the competition 51 00:02:49,480 --> 00:02:54,400 was a competition hosted by a wireless sensor lab. 52 00:02:55,140 --> 00:02:59,940 So they provided us a lot of MSP430 microcontrollers, 53 00:02:59,980 --> 00:03:03,160 which are first ultra low power, and second, 54 00:03:03,160 --> 00:03:05,380 they have a great computational power 55 00:03:05,600 --> 00:03:07,500 that you can do FFTs on board. 56 00:03:08,140 --> 00:03:10,440 And they give us these chips and want 57 00:03:10,320 --> 00:03:13,880 to know what kind of sensor applications we can do. 58 00:03:14,800 --> 00:03:19,400 But what I made was a game handheld out of it again. 59 00:03:19,770 --> 00:03:20,800 I just want to be fun. 60 00:03:21,280 --> 00:03:25,080 So instead of doing some classic games like Snake, Tetris, 61 00:03:25,660 --> 00:03:29,420 what I did was I copied many of the popular phone games 62 00:03:29,560 --> 00:03:34,520 back in the days, like Flappy Bird, 2048, and Dodo Jump. 63 00:03:34,980 --> 00:03:37,159 And I also did a little bit of research 64 00:03:37,160 --> 00:03:41,180 to do a connect file, which was a strategy. 65 00:03:42,080 --> 00:03:43,460 How did you get started with Python? 66 00:03:44,600 --> 00:03:50,680 So that was when I went to graduate school, my research work requires a lot of 67 00:03:50,960 --> 00:03:56,500 scientific computation, uh, scientific programming and school bought us metal 68 00:03:56,640 --> 00:03:59,720 at license for scientific programming. 69 00:04:00,020 --> 00:04:03,000 And it was very popular in engineering departments. 70 00:04:03,720 --> 00:04:07,520 And I actually like it a lot, unpopular, I'll bet you. 71 00:04:08,480 --> 00:04:10,360 I even use it for my personal projects, 72 00:04:10,730 --> 00:04:14,100 such as I did synthesizers, I did task processing, 73 00:04:14,900 --> 00:04:17,840 and I think I should use this even after I graduate. 74 00:04:18,440 --> 00:04:21,560 So I checked the price for a personal license a year, 75 00:04:22,860 --> 00:04:23,500 well, so high. 76 00:04:24,380 --> 00:04:27,180 So I realized I need to look for some alternatives, 77 00:04:27,890 --> 00:04:30,720 so I switched to Python to use NumPy and SciPy. 78 00:04:31,520 --> 00:04:33,320 - You mentioned that you were a STEAM teacher. 79 00:04:33,440 --> 00:04:34,340 What were you teaching? 80 00:04:35,340 --> 00:04:40,040 In my last few years in the graduate school, I got a part-time job teaching 81 00:04:40,280 --> 00:04:43,540 the outreach program in the electric engineering department. 82 00:04:44,220 --> 00:04:50,160 So basically the outreach program is we use university resources, such as labs, 83 00:04:50,560 --> 00:04:57,720 faculties to teach some field trips and summer camps to local school districts, 84 00:04:58,260 --> 00:05:01,080 like high school, middle school, and sometimes primary school. 85 00:05:01,940 --> 00:05:14,820 So in our automation lab, we got 3D printers, we have software stations, and computers installed with Arduino IDE and AVR Studio. 86 00:05:15,860 --> 00:05:19,080 So we create courses of different levels. 87 00:05:19,800 --> 00:05:27,860 And microcontroller was always my favorite topic because it has a bit circuit, a bit programming. 88 00:05:28,420 --> 00:05:33,000 And we usually use the RGB LED in our projects. 89 00:05:33,720 --> 00:05:37,740 And we have 3D printers, so we print out 3D cases onto that. 90 00:05:38,020 --> 00:05:41,040 So it's also a very good amount of art in it. 91 00:05:41,740 --> 00:05:43,260 How did you discover CircuitPython? 92 00:05:44,060 --> 00:05:46,720 So we had a very nice lab setup. 93 00:05:47,340 --> 00:05:49,820 And everything worked very well in the beginning. 94 00:05:50,360 --> 00:05:53,260 And then suddenly, the pandemic hit us. 95 00:05:53,780 --> 00:05:57,760 and schools are shut down and no one can come to the lab. 96 00:05:58,920 --> 00:06:04,680 And many departments in our university, they just shut down their outreach program because of this. 97 00:06:05,320 --> 00:06:13,600 And we tried to survive, and we tried to mimic everything in our lab with the remote learning experience. 98 00:06:14,150 --> 00:06:15,820 So some parts are very easy. 99 00:06:16,310 --> 00:06:22,440 The lectures can be given by Zoom, and we use Zoom for small group discussions. 100 00:06:22,780 --> 00:06:25,540 and we ship the lab kits to the students, 101 00:06:26,100 --> 00:06:29,840 and 3D printed models are printed in the lab, 102 00:06:29,880 --> 00:06:32,080 and we ship the result to the students. 103 00:06:32,940 --> 00:06:36,800 And for soldering, we pre-solder the sockets 104 00:06:36,930 --> 00:06:38,640 onto the PCB board, 105 00:06:39,030 --> 00:06:41,880 and students insert the components into the socket. 106 00:06:42,720 --> 00:06:45,320 But one part is actually very hard, 107 00:06:45,600 --> 00:06:49,260 is we didn't know how to get the students 108 00:06:49,260 --> 00:06:51,360 to write program to the microcontroller. 109 00:06:52,220 --> 00:06:53,720 So two sides. 110 00:06:54,660 --> 00:07:00,360 On the hardware side, it's like we used ATtiny chips to lower the cost for the students. 111 00:07:01,180 --> 00:07:07,080 And in the lab, we used some special device to write program onto ATtiny chips. 112 00:07:07,620 --> 00:07:12,680 I think the previous teacher used a debugger or GTAC or something like that. 113 00:07:12,980 --> 00:07:14,140 I used a programmer. 114 00:07:14,900 --> 00:07:18,360 And those devices are very special first and very expensive. 115 00:07:19,260 --> 00:07:21,920 And we cannot ship these devices to students. 116 00:07:22,940 --> 00:07:25,320 And second, on the software side, 117 00:07:25,790 --> 00:07:30,720 it's like first, students are at home, not in school. 118 00:07:30,920 --> 00:07:33,160 So they have all different kinds of computers. 119 00:07:34,020 --> 00:07:35,980 And some use PC, some use Mac. 120 00:07:36,540 --> 00:07:41,240 And a majority of the students are actually using Chromebooks 121 00:07:41,300 --> 00:07:43,280 and actually locked down by the school districts. 122 00:07:44,240 --> 00:07:45,820 So it's very, very hard. 123 00:07:46,620 --> 00:07:48,780 First, because so many platforms, 124 00:07:48,820 --> 00:07:54,260 we don't know how to teach them to install the IDEs onto their computers. 125 00:07:54,710 --> 00:07:59,000 And second, if they are using Chromebook, it's almost impossible to install anything. 126 00:07:59,560 --> 00:08:05,300 And even when it is possible, we just found out the setup process is not very easy. 127 00:08:06,780 --> 00:08:13,320 So at that time, I was looking for solutions that students can program their microcontrollers. 128 00:08:13,620 --> 00:08:15,680 First, no special hardware needed. 129 00:08:16,280 --> 00:08:18,600 And second, no special software needed. 130 00:08:19,300 --> 00:08:22,000 I wasn't very optimistic at the beginning, 131 00:08:22,260 --> 00:08:24,440 but I actually found two solutions. 132 00:08:25,140 --> 00:08:28,700 And MakeCode was the solution for younger kids. 133 00:08:29,240 --> 00:08:32,020 And I found CircuitPython for older kids, 134 00:08:32,120 --> 00:08:34,159 like middle school and high school students. 135 00:08:35,039 --> 00:08:39,860 So it was in the days of CircuitPython 6, I think. 136 00:08:40,539 --> 00:08:45,360 And it was advertised as the easiest to set up, 137 00:08:45,360 --> 00:08:48,420 the bare minimum set up to do a circuit bypassing project 138 00:08:49,220 --> 00:08:53,180 is you have a USB cable, connect the microcontroller 139 00:08:53,180 --> 00:08:55,460 to the computer, and on the computer, 140 00:08:55,770 --> 00:09:00,040 you need nothing but a code editor or just text editor 141 00:09:00,780 --> 00:09:02,020 to edit the code file. 142 00:09:03,140 --> 00:09:05,660 So that was amazing. 143 00:09:06,000 --> 00:09:08,240 That was so mind-blowing to me. 144 00:09:08,300 --> 00:09:11,360 I never imagined such a thing can be possible. 145 00:09:12,200 --> 00:09:14,980 So I think this thing can be used 146 00:09:15,020 --> 00:09:17,340 in our Altrage program online. 147 00:09:18,540 --> 00:09:21,160 - You created the CircuitPython online IDE. 148 00:09:21,960 --> 00:09:24,700 What IDE were you using that led you to create your own? 149 00:09:26,040 --> 00:09:27,440 - We set a bare minimum set up 150 00:09:27,600 --> 00:09:29,540 for a CircuitPython development. 151 00:09:29,940 --> 00:09:31,200 It's just a text editor, 152 00:09:32,100 --> 00:09:35,659 but the classroom experience can be very much improved 153 00:09:35,660 --> 00:09:40,300 if we have a dedicated IDE, and what do we want from it? 154 00:09:41,100 --> 00:09:45,140 So as we said, we want the experience to be consistent 155 00:09:45,940 --> 00:09:47,460 across all operating systems. 156 00:09:48,480 --> 00:09:51,140 And we don't want to install anything, 157 00:09:51,520 --> 00:09:55,940 and we don't actually want to set up any configurations 158 00:09:56,380 --> 00:09:58,180 to make a microcontroller work. 159 00:09:58,980 --> 00:10:00,500 And what is that? 160 00:10:01,580 --> 00:10:05,580 no installation, and same on all operating systems. 161 00:10:06,260 --> 00:10:07,400 And that is a website. 162 00:10:08,500 --> 00:10:11,640 So what features do we want from the IDE? 163 00:10:12,340 --> 00:10:14,960 As we said, we need a text editor. 164 00:10:15,360 --> 00:10:18,500 Yes, I saw a lot of websites have a text editor. 165 00:10:19,440 --> 00:10:24,160 And I just happened to use a web-based serial console 166 00:10:24,700 --> 00:10:26,380 back in the days in my own project. 167 00:10:26,800 --> 00:10:29,920 So I know this is also possible in a website. 168 00:10:31,140 --> 00:10:34,080 Not surprisingly, I was not the first person 169 00:10:34,440 --> 00:10:35,320 to think about that. 170 00:10:36,560 --> 00:10:39,460 So I actually found a lot of projects doing that. 171 00:10:40,020 --> 00:10:45,140 But it's like not all of them are very active, developed. 172 00:10:45,860 --> 00:10:49,120 And almost all of them are missing some feature I like. 173 00:10:49,440 --> 00:10:52,360 Some of them works, but very, very bare minimum. 174 00:10:53,220 --> 00:10:55,980 So what if I want to add some features to that? 175 00:10:56,080 --> 00:10:59,760 For example, the best one doesn't have a serial plotter. 176 00:10:59,940 --> 00:11:05,400 So if I want a serial plotter, do I back the author to add it? 177 00:11:06,200 --> 00:11:09,220 So because I want this so much, why don't I 178 00:11:09,380 --> 00:11:10,340 start in my own project? 179 00:11:11,620 --> 00:11:14,640 So I call it CircuitPythonOnlineIDE. 180 00:11:16,280 --> 00:11:18,220 So around this CircuitPythonOnlineIDE, 181 00:11:18,620 --> 00:11:19,980 I created three courses. 182 00:11:20,940 --> 00:11:23,420 So the first one was a traffic light simulator. 183 00:11:23,980 --> 00:11:27,360 So the PCB board is basically a picture of a crosswalk. 184 00:11:27,700 --> 00:11:32,180 and we put NeoPixels onto the PCB to mimic the traffic lights. 185 00:11:32,840 --> 00:11:35,600 And students write programs to simulate the pattern. 186 00:11:36,340 --> 00:11:38,820 And the second one we call the sensor interface, 187 00:11:39,430 --> 00:11:42,860 which is a handheld device that has a screen and a buzzer. 188 00:11:43,420 --> 00:11:47,000 Students using alligator clips to clip sensors 189 00:11:47,110 --> 00:11:47,920 onto the device. 190 00:11:48,500 --> 00:11:51,860 And the students write programs to show 191 00:11:51,860 --> 00:11:54,400 the readings on the screen, and they 192 00:11:54,470 --> 00:11:55,880 use the buzzer for alarming. 193 00:11:56,620 --> 00:11:59,800 And this can be combined with a lot of science class, 194 00:12:00,600 --> 00:12:04,320 like they can be used in some physics experiments. 195 00:12:04,640 --> 00:12:06,180 So scientists teachers like it. 196 00:12:07,340 --> 00:12:10,380 The third course I created was a RGB night light. 197 00:12:10,940 --> 00:12:15,620 It is basically a Trinket M0 with a photoresistor 198 00:12:16,500 --> 00:12:18,620 and with 3D print case onto that. 199 00:12:19,060 --> 00:12:20,720 So it measures the ambient light 200 00:12:20,780 --> 00:12:22,960 and show color patterns in the dark. 201 00:12:23,940 --> 00:12:29,540 So in my days, I taught the classes via Zoom calls, so everything was remote. 202 00:12:30,140 --> 00:12:31,660 It worked out very well. 203 00:12:32,320 --> 00:12:34,260 And then I left the program. 204 00:12:35,040 --> 00:12:38,300 My fellow teacher actually went to the schools. 205 00:12:39,480 --> 00:12:45,400 And because the schools resumed, but the university lab was still closed. 206 00:12:45,880 --> 00:12:50,020 So she basically went to the school classrooms and teach there. 207 00:12:50,020 --> 00:12:56,160 It's just a regular classroom, regular classroom Chromebooks, but we can use the IDE, just 208 00:12:56,240 --> 00:12:57,220 in regular classrooms. 209 00:12:57,740 --> 00:13:00,240 So this simplifies the setup a lot. 210 00:13:00,350 --> 00:13:03,020 They don't need a dedicated lab to teach these classes. 211 00:13:04,520 --> 00:13:07,040 Tell me more about the CircuitPython Online IDE. 212 00:13:07,740 --> 00:13:08,540 How does it work? 213 00:13:09,240 --> 00:13:13,780 The most basic part is a text editor and a serial console. 214 00:13:14,580 --> 00:13:18,420 So the text editor relies on a browser feature 215 00:13:18,840 --> 00:13:20,360 called File System API. 216 00:13:20,960 --> 00:13:24,740 So basically, your website can open a local folder 217 00:13:24,860 --> 00:13:27,860 inside your computer and edit the file in it. 218 00:13:28,700 --> 00:13:32,780 And Serial Console relies on a Chrome-specific feature 219 00:13:33,340 --> 00:13:35,600 called the Web Serial API. 220 00:13:36,440 --> 00:13:39,820 So that allows your website to directly talk to a serial port. 221 00:13:40,380 --> 00:13:43,420 These are the two foundation technologies 222 00:13:44,100 --> 00:13:46,300 inside the SQLpi.NET IDE. 223 00:13:47,020 --> 00:13:52,520 And all the features are built based upon these two features, 224 00:13:53,160 --> 00:13:56,180 such as the plotter is based on the serial connection, 225 00:13:56,960 --> 00:14:01,020 and the library management is based on the file system API. 226 00:14:02,160 --> 00:14:06,480 So when you use the IDE, you can go to the website, 227 00:14:06,780 --> 00:14:13,340 the CircuitPi.dev and then you first connect your microcontroller to the computer by USB cable 228 00:14:13,900 --> 00:14:20,280 and inside the website and you can open CircuitPi drive as a folder with one button 229 00:14:20,740 --> 00:14:27,640 and connect your serial port with another button and you're all set to work on your project. 230 00:14:28,120 --> 00:14:31,720 What kind of challenges did you face in developing the Online IDE? 231 00:14:32,780 --> 00:14:41,440 Yeah, so actually, when I started this project, I had no experience on web development at all. 232 00:14:42,200 --> 00:14:49,440 So basically, I asked my CS major friend, and it's like, "Well, do you have any resource, 233 00:14:50,180 --> 00:14:58,560 do you have any class material on web development?" He just dig out one homework folder and send that 234 00:14:58,300 --> 00:15:01,040 to me and I started everything from there. 235 00:15:01,960 --> 00:15:11,520 It was a very bare minimum HTML page with no static refinement, but it just worked. 236 00:15:11,840 --> 00:15:17,720 There was a text editor, there was serial communication, and now I call it version 0. 237 00:15:18,620 --> 00:15:26,380 And I then start to add some features to this version 0, like some shortcuts that I like. 238 00:15:27,140 --> 00:15:29,040 And I also added the plotter into that. 239 00:15:29,640 --> 00:15:36,100 And after I add the serial plotter, everything is just so messed up because that was my first 240 00:15:36,779 --> 00:15:37,960 JavaScript project. 241 00:15:38,760 --> 00:15:47,760 And when I tried to add folder view and editor tabs, I just had to start over and create 242 00:15:47,760 --> 00:15:48,960 a new project for it. 243 00:15:49,960 --> 00:15:52,680 And that one was doing pure JavaScript. 244 00:15:53,720 --> 00:15:55,580 And that one was called version one. 245 00:15:56,580 --> 00:16:00,700 So when I was teaching online, I was using version 0. 246 00:16:00,900 --> 00:16:03,760 And my fellow teacher, when she was 247 00:16:03,820 --> 00:16:05,940 teaching the high school classrooms, 248 00:16:06,300 --> 00:16:07,680 she was using version 1. 249 00:16:09,040 --> 00:16:13,340 And when I just tried to fix some bugs in the folder view, 250 00:16:13,340 --> 00:16:15,980 I found this code is too messy again. 251 00:16:16,160 --> 00:16:18,760 And when people see if you are not 252 00:16:18,780 --> 00:16:20,800 using a front-end framework, you're 253 00:16:20,980 --> 00:16:22,260 basically writing your own framework. 254 00:16:22,980 --> 00:16:26,160 So definitely, my framework was not very well. 255 00:16:26,540 --> 00:16:30,340 So I adopted the most popular one, React at the moment. 256 00:16:31,120 --> 00:16:37,760 So I basically refactored everything and rewrote the online IDE again in React. 257 00:16:39,360 --> 00:16:47,460 Because that was still my first React project, and the first trial was still very, very messed 258 00:16:47,600 --> 00:16:47,700 up. 259 00:16:48,120 --> 00:16:55,300 That was version 2 beta until, and when I tried to release the version 2 official without 260 00:16:55,300 --> 00:16:57,700 beta that was refactored again. 261 00:16:58,200 --> 00:17:01,280 So it's like major refactoring all the time. 262 00:17:02,820 --> 00:17:08,800 What was the biggest challenge is that everything was developed while learning. 263 00:17:09,620 --> 00:17:14,180 It's like, but, and also proved that if one wants to make some contribution, 264 00:17:15,180 --> 00:17:16,319 doesn't have to be an expert. 265 00:17:17,040 --> 00:17:18,959 So you can start from zero experience. 266 00:17:20,260 --> 00:17:23,740 One of the things I like about the CircuitPython online IDE that you've 267 00:17:23,620 --> 00:17:27,579 created is that you can host your own version, which can probably help in a 268 00:17:27,720 --> 00:17:29,560 locked down IT environment like a school. 269 00:17:30,300 --> 00:17:30,460 Yeah. 270 00:17:31,140 --> 00:17:32,460 How hard is it to self-host? 271 00:17:33,720 --> 00:17:38,360 So first the SQLPython online IDE is an open source project. 272 00:17:39,040 --> 00:17:45,460 So the source code is hosted on GitHub and actually the IDE itself is a static 273 00:17:45,740 --> 00:17:48,380 page that is hosted on GitHub page. 274 00:17:49,000 --> 00:17:55,700 So the only feature that requires a backend service over the internet is the library management service. 275 00:17:56,300 --> 00:18:03,240 A proxy service is used to download the Adafruit bundle and the community bundle to the IDE. 276 00:18:04,200 --> 00:18:07,140 And that proxy service is hosted on Google Cloud. 277 00:18:07,960 --> 00:18:17,300 So if you want to host your own version, you can just fork my GitHub repo and make modifications if you want, 278 00:18:17,400 --> 00:18:20,260 and create a GitHub page out of that repo. 279 00:18:21,180 --> 00:18:27,000 So if you want to host a proxy yourself, you can check the source code in the repo and 280 00:18:27,120 --> 00:18:30,960 create a Google Cloud Run function out of that source code. 281 00:18:31,420 --> 00:18:34,480 So that's everything you need to host your own version. 282 00:18:35,500 --> 00:18:41,920 But in addition to that, if the only thing you need is just to run the IDE, but you cannot 283 00:18:41,920 --> 00:18:43,820 access my deployed version. 284 00:18:44,400 --> 00:18:46,740 Actually, I know many school districts 285 00:18:47,040 --> 00:18:49,520 have very, very strict firewalls 286 00:18:49,980 --> 00:18:52,360 so that my version is often blocked. 287 00:18:52,680 --> 00:18:55,560 In that case, you can go to my GitHub repo 288 00:18:55,940 --> 00:18:58,020 and go to the release section. 289 00:18:58,720 --> 00:19:01,620 And there you can download the latest version 290 00:19:01,720 --> 00:19:05,860 of the online IDE as a single HTML file. 291 00:19:06,440 --> 00:19:09,940 And you can run that HTML file locally offline. 292 00:19:10,880 --> 00:19:12,420 How does it help educators? 293 00:19:13,720 --> 00:19:16,660 Because the idea was created inside the classroom. 294 00:19:17,600 --> 00:19:20,040 It was created to solve classroom problems. 295 00:19:20,760 --> 00:19:22,400 And this has never changed. 296 00:19:22,460 --> 00:19:25,780 It's my always how education in the first place. 297 00:19:26,200 --> 00:19:27,740 So some design principles. 298 00:19:28,440 --> 00:19:30,200 Captive from the beginning. 299 00:19:31,060 --> 00:19:34,780 So if you open the website, it's a good pilot dab. 300 00:19:35,420 --> 00:19:40,100 It will show what the students need to finish their first class project. 301 00:19:40,660 --> 00:19:43,340 and nothing more and nothing less. 302 00:19:44,120 --> 00:19:46,480 So all the advanced features are hidden 303 00:19:46,550 --> 00:19:47,740 in the manuals and shortcuts. 304 00:19:48,740 --> 00:19:52,220 And I also try to reduce confusion in the UI 305 00:19:52,230 --> 00:19:56,820 as much as possible, such as I don't often use icons. 306 00:19:57,420 --> 00:19:59,780 Everything is just written out as plain text. 307 00:20:00,800 --> 00:20:05,740 Because I use the IDE myself, if that is useful to me, 308 00:20:06,010 --> 00:20:07,600 it can also be useful to others. 309 00:20:07,780 --> 00:20:15,040 So, well, I think everyone working on a DIY project can benefit from this. 310 00:20:15,540 --> 00:20:24,020 And I also remember many of my students who expressed their interest in microcontrollers even after the course. 311 00:20:24,440 --> 00:20:33,020 So I also want to support the students and continue to work on their projects even after the camps or the field trips. 312 00:20:34,260 --> 00:20:36,280 You've mentioned some of the features of the IDE. 313 00:20:36,720 --> 00:20:38,340 Can you share some of the useful ones? 314 00:20:39,340 --> 00:20:43,320 So in the IDE, in the menu bar, there is a button called Tools. 315 00:20:43,960 --> 00:20:44,460 Click on that. 316 00:20:44,460 --> 00:20:46,240 It will show you some useful features. 317 00:20:47,080 --> 00:20:49,840 And serial plotter is going to be the most used feature. 318 00:20:50,560 --> 00:20:54,980 And you can plot, zoom, truncate in time, 319 00:20:55,360 --> 00:20:58,660 and add legends to it, and also use one of the column 320 00:20:58,820 --> 00:20:59,580 as x-axis. 321 00:21:00,580 --> 00:21:04,600 So this is a very powerful plotting tool. 322 00:21:05,900 --> 00:21:08,840 The plotter is actually compatible with Moo Editor. 323 00:21:09,500 --> 00:21:13,360 So if you have a plot code that is already working with Moo, 324 00:21:13,780 --> 00:21:14,860 it should also work here. 325 00:21:16,140 --> 00:21:18,520 And another feature I recently added to it 326 00:21:18,620 --> 00:21:20,080 is library management. 327 00:21:20,880 --> 00:21:24,900 So if you used the CircCraft before or heard about it, 328 00:21:25,300 --> 00:21:27,540 it's basically similar but with GUI. 329 00:21:28,760 --> 00:21:31,440 So there are two ways you can use it. 330 00:21:31,780 --> 00:21:34,480 So first, if you use the auto installation, 331 00:21:35,000 --> 00:21:37,200 it will analyze your CircuitPython code 332 00:21:37,420 --> 00:21:39,140 and install all the libraries needed, 333 00:21:39,260 --> 00:21:40,580 and also with dependencies. 334 00:21:41,500 --> 00:21:44,140 And that is from the Adafruit bundle 335 00:21:44,520 --> 00:21:45,740 and the community bundle. 336 00:21:46,460 --> 00:21:49,000 So there is also a list of all libraries 337 00:21:49,180 --> 00:21:50,180 from both of the bundle. 338 00:21:51,200 --> 00:21:55,479 You can search libraries from this list 339 00:21:55,480 --> 00:21:58,580 and install, uninstall, or upgrade on demand. 340 00:21:59,740 --> 00:22:02,480 And also there is a button in the UI 341 00:22:02,640 --> 00:22:04,400 that links to the library repo 342 00:22:04,720 --> 00:22:06,060 so that you can read more documents 343 00:22:06,180 --> 00:22:07,800 and source code or example. 344 00:22:08,880 --> 00:22:12,220 And the third feature that I want to share 345 00:22:12,380 --> 00:22:15,200 is the camera feature, the camera tool. 346 00:22:15,980 --> 00:22:18,800 This one has nothing to do with the microcontroller itself, 347 00:22:19,460 --> 00:22:21,820 but whenever I want to show people something, 348 00:22:22,000 --> 00:22:27,160 I just found myself need to open a separated app for camera. 349 00:22:28,080 --> 00:22:31,860 Because microcontroller projects are not just a code. 350 00:22:31,860 --> 00:22:36,100 You want to photo your dev board breadboard. 351 00:22:36,680 --> 00:22:39,260 And that's why you need a camera. 352 00:22:40,000 --> 00:22:44,160 So in the camera tool, you can point your webcam 353 00:22:44,500 --> 00:22:49,260 to the microcontroller and view it just inside IDE. 354 00:22:49,880 --> 00:22:53,460 and you can flip, rotate, zoom, everything you want to do. 355 00:22:54,000 --> 00:22:56,400 This can be very helpful for teachers 356 00:22:57,160 --> 00:23:00,760 and you can show whatever is on your desk 357 00:23:01,100 --> 00:23:03,260 on the large projector in the classroom. 358 00:23:04,040 --> 00:23:07,880 And also if you're a hobbyist that want to stream 359 00:23:08,340 --> 00:23:11,120 or record your project, this can be also very helpful. 360 00:23:12,240 --> 00:23:12,940 - That's pretty cool. 361 00:23:13,700 --> 00:23:16,200 What's next for the CircuitPython online IDE? 362 00:23:17,160 --> 00:23:23,100 Yeah, so if you go to the repo and go to the issues section, 363 00:23:23,700 --> 00:23:27,840 there are a lot of feature plans and enhancements plan. 364 00:23:28,360 --> 00:23:32,140 So there are two features I am actively working on 365 00:23:32,140 --> 00:23:32,620 at the moment. 366 00:23:33,440 --> 00:23:35,960 One is called connected variables. 367 00:23:36,960 --> 00:23:41,300 So if you want to talk to a running program, 368 00:23:41,800 --> 00:23:44,600 usually we just use a serial console, 369 00:23:45,440 --> 00:23:47,740 But text flow is not the most intuitive. 370 00:23:48,340 --> 00:23:52,440 Even if you can use the plotter, sometimes it's still not 371 00:23:52,440 --> 00:23:56,220 the best way to show what is going on in the program. 372 00:23:57,240 --> 00:24:01,660 So I want to provide a bunch of wedges that can directly talk 373 00:24:01,740 --> 00:24:03,580 into variables inside the program, 374 00:24:04,110 --> 00:24:08,520 such as buttons, selections, meters, and color pickers, 375 00:24:08,690 --> 00:24:12,200 et cetera, so that you can talk to a running 376 00:24:12,460 --> 00:24:13,720 program both ways. 377 00:24:14,680 --> 00:24:17,740 Another feature is debugger. 378 00:24:18,440 --> 00:24:22,840 So as far as I know, MicroPython and CirclePython 379 00:24:22,840 --> 00:24:27,340 doesn't have PDB, which is the default Python debugger. 380 00:24:28,480 --> 00:24:32,580 So I am working on some kind of workaround solutions 381 00:24:32,580 --> 00:24:36,660 to provide step-by-step debugging, breakpoints, 382 00:24:36,800 --> 00:24:39,520 and expression wash. 383 00:24:40,970 --> 00:24:42,800 How can people support your project? 384 00:24:43,680 --> 00:24:49,140 If you want to support a project, just please use it as much as possible and share it with 385 00:24:49,400 --> 00:24:56,720 others, share it with other teachers specifically, and give me some feedback and tell me how 386 00:24:57,140 --> 00:25:03,680 you are using the IDE, what is your story, or if you have bug reports, feature requests, 387 00:25:04,020 --> 00:25:04,720 please let me know. 388 00:25:05,510 --> 00:25:08,300 So, if anyone wants to learn more about it, where should they go? 389 00:25:08,760 --> 00:25:11,700 I have a YouTube channel called CircuitPythonic, 390 00:25:11,940 --> 00:25:14,680 and I also post on Twitter and FosterDom. 391 00:25:15,380 --> 00:25:19,320 I really post IDE updates and my personal microcontroller 392 00:25:19,580 --> 00:25:19,860 projects. 393 00:25:20,630 --> 00:25:22,760 I'll make sure I link to those in the show notes as well. 394 00:25:23,840 --> 00:25:25,460 Last question I ask each guest. 395 00:25:25,940 --> 00:25:27,620 You're starting a new project or prototype. 396 00:25:28,180 --> 00:25:29,480 Which board do you reach for? 397 00:25:30,760 --> 00:25:34,620 So I don't have a specific chip set to go to, 398 00:25:35,360 --> 00:25:42,720 But I do have a go-to form factor, which is the Cedarino shell or Adafruit Qt Pie. 399 00:25:43,320 --> 00:25:47,220 One of the reasons is I still don't know how to do reflow. 400 00:25:47,820 --> 00:25:50,860 So usually I just solder the whole data board onto the PCB. 401 00:25:51,720 --> 00:25:54,480 So the smaller the data board is, the better. 402 00:25:55,340 --> 00:25:59,480 And another reason is I have a very, very long commute every day. 403 00:25:59,840 --> 00:26:03,140 So I often work on my personal projects on the train. 404 00:26:03,640 --> 00:26:06,000 So I wish the data board can be as small as possible. 405 00:26:06,980 --> 00:26:12,900 At this moment, my setup is a Cedrino Celsin 52840, 406 00:26:13,680 --> 00:26:17,480 and I use a mil-to-mil adapter, not a cable, just an adapter, 407 00:26:18,120 --> 00:26:21,500 to plug into my laptop, just like a USB dongle. 408 00:26:22,080 --> 00:26:23,980 But you know what can be better? 409 00:26:24,860 --> 00:26:28,120 A type-C chain key, which doesn't exist yet. 410 00:26:28,660 --> 00:26:31,000 I will surely carry one with me all the time. 411 00:26:31,640 --> 00:26:35,040 So, Elafrod, if you are listening to this, please make it happen. 412 00:26:35,820 --> 00:26:37,520 River, thanks so much for coming on the show. 413 00:26:38,380 --> 00:26:40,060 Thank you. It's great to be on the show. 414 00:26:41,480 --> 00:26:46,020 Thank you for listening to The CircuitPython Show. The show notes have links to the CircuitPython 415 00:26:46,300 --> 00:26:52,300 online IDE available at circuitpy.dev, and I encourage you to try it out. For show notes 416 00:26:52,380 --> 00:26:58,999 and transcripts, visit www.circuitpythonshow.com. And if you're enjoying the show, consider sponsoring 417 00:26:59,000 --> 00:27:04,400 the show to help offset the costs of podcast hosting, recording, and more. Visit the sponsors 418 00:27:04,470 --> 00:27:09,340 page at CircuitPythonShow.com to learn more. Thank you for your support, and until next time, 419 00:27:09,750 --> 00:27:10,520 stay positive! 420 00:27:11,720 --> 00:27:11,920 you