EP 024 Electroblocks Arduino Simulator with Noah Glaser

A talk with Noah Glaser about the ElectroBlocks simulator.

Transcript:

Michael:
Welcome, everybody. I am here with Noah Glaser. He is the creator of ElectroBlocks and I’m really excited to talk about it. It is an Arduino simulator. Noah, thanks for coming on, man. I appreciate it.

Noah:
Oh yeah. Thanks for having me.

Michael:
So you’ve been working on ElectroBlocks for a while. You’ve been developing this really interesting Arduino simulator and I would just like to learn… If you could tell me, in your own words, about your ElectroBlocks simulator. I’d love to hear about it and I’m sure our audience would like to hear about it too.

Noah:
Yeah. So it’s a simulator. What’s cool about it is that it lets you… It uses Blockly so you drag and drop these blocks onto the screen. So you don’t have to know about coding or C or any of those languages. And what it allows you to do is it allows you to go step-by-step through the block.
So it’s like video editing for code. So you can go back and forth and you can see the effect of each block and what it does to the component. And the other cool thing about it is that it generates a suggested wiring scheme. So you can see how an LED should be wired with the resistors and all that stuff onto a breadboard. So it’s a really good starting point for a beginner who just wants to play around with the Arduino.

Michael:
Okay. Awesome. All right. So this is a visual programming tool. I can look at these images. And so the code itself is abstracted away into images and that representation is what’s going to do something. So it’s a little more meaningful in that sense?

Noah:
Definitely.

Michael:
Okay. Gotcha. So it’s like a GUI interface, like a graphical user interface.
I’m grabbing a block, I’m pulling it over and that’s what the code is going to be. Okay. And I know you mentioned Blockly, could you tell us a little bit more about Blockly for those who might not be familiar with… I don’t know, scratch for example because scratch uses Blockly, right?

Noah:
Oh yeah. Scratch uses Blockly under the hood. It’s basically… You still have all the same ideas you have in programming. You still have Ifs and loops. But instead of writing curly braces and parentheses and a lot of stuff that hangs up kids and sometimes even adults, you just connect blocks together. So you have an If block and then you’ll connect a comparison block into that if block that’ll compare the two values. And then you’ll put blocks inside the If block and those blocks will run If, the If is true.
So it’s basically a zero learning curve for Syntax. So it takes out the Syntax barrier for coding.

Michael:
Right. Yeah. And I can speak from my own experience that, yeah, Syntax is killer. Even if you’ve been programming a while, it’s so easy to forget those things and so that’s definitely pretty nice.
So scratch is a visual programming tool and it uses Blockly. And so Blockly is like a… It’s like some library then? It’s written for this visual code representation deal then?

Noah:
So Blockly provides the framework for creating the blocks and also provides the generators. So each block will have its own generator that will actually generate the C code itself. And you can view this. This project is all open source. So you can view the actual code if you want to see it.
So there’s statement blocks and those blocks will generate lines, usually, with semi-colons at the end of them. That’s an easy way to think about it, if you’re coming from the Arduino world. And then there’s input blocks and those will return values. So they can be as simple as a variable or it can be a function that returns a value to.

Michael:
Okay. That’s cool. So right now, I’ve got ElectroBlocks pulled up. I know for the listening audience, I’m going to try to describe this. So on the left-hand side of the interface… And which… And I just want to know, this runs in the web browser. You probably said that again, but I just want to say that again. This isn’t a program you download to your computer, it runs right on your web browser.
So you go to just ElectroBlocks.org and then that’s your interface essentially. And then on the left-hand side, you’ve got a list of all the different blocks that you can choose from. And it’s an expanding list, right? So you can go into the logic parts, you can go into loops and data and stuff like that. And you can pull it over into the working area or the code area. And that’s where you would build your code out, which is like these blocks, right? And then to the right of that, and this is the cool part, as you pull… Or at least I think this is my favorite part. A lot of it’s cool. But anyway, as you pull the blocks over, it builds a breadboard layout of what you’re doing, right?
So if you pull a block over that’s turning on an LED, it’s going to display a hookup diagram, essentially, for blinking an LED. Or if you pull over a servo it’s going to display the servo, a servo setup. So, which is pretty cool. It’s doing it live. And what I like about it is this is more… That hookup side is more… It’s more programming driven. So it’s like the program is driving the hookup side, the wiring side. Right? it’s not the other way around. You know what I mean? It’s not like you’re having to design the circuit and then figure out the code or something like that. It’s the code is what’s helping you define the circuit. Which I think is pretty nice.

Noah:
Yeah. That’s what I wanted. I love Tinkercad. I love what they’ve done. But I think it’s going to be easier, especially for kids, just to drag something on the screen and have something just be wired up properly. Yeah. Just the first time. And even for adults too, so they can just see it live. And it’s really great because you can just play around with it. You don’t even have to buy the components. You can prototype it and then buy the components and then just upload it directly from the site. So you can upload the code directly to the Arduino from the website. And as long as you’re using a modern version of Chrome, it’ll just upload. So you can see it live as well.

Uniqueness of Electroblocks

Michael:
Wow. That is really cool. And so for anybody listening, you mentioned Tinkercad. Tinkercad is another Arduino simulator out there made by Autodesk, I think is who makes it. And it’s more of… I guess you’re building… It’s all separate, you know what I mean?
You can build a circuit, but then you got to program it. They might have some starter code that comes with it or whatever. But yeah. Anyway, so yeah. It’s pretty neat and it blows me away that you can just upload the code right from the web browser. I absolutely loved that. I tried it and it shows the com ports, if you’re using a PC or whatever, just like you would expect. So it’s a pretty neat functionality. What I also think is neat is below… So on the right hand side of the screen, I mentioned it shows the actual circuit diagram, right? The breadboard and stuff. But then below that it gives you a play by play of what’s happening in the circuit and in the code, I guess. I guess in the code is maybe a better way to say that. But it says, “Hey, step one.” Let’s say we’re blinking an LED, right?
It would be like, “Step one, turning on LED at pin 13. Step two, waiting for one second. Step three.” You know what I mean? So it tells you… It’s like stepping through your code, each line, and it’s telling you what it’s doing. And I could see how instructive that would be if you’re a young person just starting to code or if you’re more experienced in life and you’re just new to code and you want to see what’s happening step by step. I really like that feature. That’s cool.

Noah:
Yeah. I was working with a designer who was volunteering on the project and he came up with that feature. He was like, “It’d be really cool if there was a way that I could see what each thing was doing.” And so a lot of these features just came about by just running them by people. And people told me what they wanted, which was really cool.

Michael:
That’s cool. So, all right. So I guess I want to step back a second and ask you, why did you decide to build a Arduino simulator? Other than, I mean, that’s a cool thing to do in the first place. But was there any specific motivating thing that got you going?

Noah:
So, it was 2016, somewhere around there. And I was teaching Arduino to a bunch of eight year olds at a community center. And I was trying to teach them, C, and there were just so many things that went wrong with that. It genuinely is funny. Their hands were too small, so they couldn’t use the keyboard and that’s not their fault. Yeah. They just had trouble with all the weirdness and coding because they’re eight. So they haven’t even seen a semi-colon, much less a curly brace.

Michael:
What do you mean you don’t know there’s a knoll terminating on a string?

Noah:
So, it went really well. And we had a lot of fun. But honestly they didn’t learn any coding. They just learned that they could make things move with the Arduino, which is great at that age. And then I was running the Austin Arduino meetup group and I started noticing adults, too. So we would get adults that would come in that didn’t know how to type and typing was a big barrier to learning Arduino or they didn’t know how to code or it just wasn’t their full-time job. They wanted to build something, but they didn’t want to learn pointers or whatever.
Yeah. So I built this thing to bridge that gap so that they could just come in with basic computer skills and just start playing around immediately and just get stuff working.

Michael:
Yeah. That is really cool. What I personally love about programming is that it’s a logic. It’s just a problem solving in its very core. You know what I mean? It’s like, “How can I solve a problem?” You know? And you don’t necessarily need to write things out to do that. You can do it visually too. And this is, like you said, bridging that gap, that’s pretty sweet.
So have you been able to use this with kids then? Or folks? Or has it just been too much with the shutdown lately or whatever? But has this gotten into the hands of a group like that and stuff?

Noah:
I’m really happy to say we’re getting into our first school in a trial run. So there’s a company I’m working with that sets up makerspaces and they’re going to use this to teach Arduino in a trial run. I haven’t been able to use this version. I was using a previous version that was a desktop install before the pandemic started. But it didn’t have the simulator. So I’m really, as this pandemic winds down, I’m really excited to get back into museums and other places and start teaching kids again with this.

Michael:
That is really cool. So I want to go a little meta on this. What did you write the actual simulator in? When one decides, “You know what, I think I’m going to write a simulator.” Where do you even start? I don’t know. To me I’m just a little boggled by that whole step.

Noah:
So I had to rewrite it because I got so many things wrong the first time I wrote it. So I learned a lot. But the biggest thing that I learned was that I think… And what makes Arduino great for writing simulators is that it can be very… There’s going to be a starting point and an ending point and you can look at the code and if you know the inputs… So if you know what the sensor is going to sense, or if you know what the thing’s going to do, you know the ending point. So what I realized is, is that you could treat the Arduino code like a flip book. Which is what the simulator does. So what it does is it generates a frame, which is basically the state of the Arduino and the state of the components for each statement block, which you can look at as each block that has a semi-colon at the end of it.
That’s not quite true because there’s some blocks like, four blocks, it’ll generate multiple states. So a four loop will generate multiple states. So what it does is for every statement block, it will return a list of frames. But for every value block, it will return a value, basically. So a good example of a value block would be the sensor block that senses temperature that would return a number of some sort or a distance sensor. So it does all that. It compiles the list of frames. And then there’s a… What I call a virtual circuit that will take that frame list and basically update in SVG. So you can see it, see the moving picture. So that’s how it turns the blocks into the flip book, I guess you could say.

Michael:
All right. So SVG is just like a visual output, like a PNG or… Okay. Gotcha. All right. I follow. That’s cool. And what language is it written in?

Noah:
So it’s written… Right now it’s written in Svelte. It’s written not in Svelte, it’s written in TypeScript. But you can look at it as JavaScript. So if you want to contribute, and we’d love to have contributors, if you just know JavaScript, you’ll probably be fine.

Michael:
Okay. All right. And it’s just right up on… It’s on GitHub. If somebody wanted to contribute to this open source project, they could do that. All right. So it’s just really JavaScript familiarity.

Noah:
Definitely.

Michael:
Okay. That is so cool. Man. Yeah. I’ve been really enjoying playing around with it and stuff like that. I was wondering, let’s say there was a component in here that wasn’t in there. Is that something that I could figure out how to add if I wanted to add a component?

Noah:
Yes. So we’re designed to allow users to add components. So there’s a few steps for that. I’m going to document it, but as long as your component is in, basically, is using the Arduino… As long as I can pull the package down from your component from the Arduino seat, CLI, which is what’s being used on the Lennox server to compile the Arduino code. So as long as it’s in Arduino, I can pull that down and then you can write blocks based on that. So you would just design your blocks and there’s already… There’s a Blockly interface for designing blocks. And then you would design your… You could write your generators, which is basically what outputs the code. You could do all that. And you basically just need to create 10 files. I’m going to be documenting that soon, but we’d love to have more blocks.
So if you have a block idea, let me know and I’ll be happy to work with you.

Michael:
Okay. And so just a little back info on some of the stuff there. So, Arduino CLI is the command line interface? And so my… Is that basically working like… And I might be saying this wrong, but is that working like an API then for you? Is that what it’s doing or not quite?

Noah:
Oh yeah, that’s exactly what it’s doing. So what I realized… What I wanted to… It was originally a desktop app and I wanted to take it off the desktop app because it was a nightmare to compile on all these OSs. So I put it on a Linux box or just on a server.
And I use that Arduino CLI to actually compile the Arduino code. So the code gets sent up to the web and then it returns the binary and then uploads that to Arduino.

Michael:
Okay. All right. And so when you say if it’s available with the Arduino CLI… So I’m just trying to… I’m thinking of blocks, right? Usually, when I’m thinking about adding a component, often it’s like, these components are so many of them are just supported by libraries. Are you referring to the library part of it being available on the CLI? Is that what you mean? Like a contributed library kind of thing? Or is it something else?

Noah:
Oh, yeah. It’s just a contributed library. Honestly, we can even do it, if it’s on GitHub, it’d be better for us if it’s on the CLI because then we can just install it. But I have a few packages on there that are just straight up Arduino libraries on GitHub like the LED matrix would be an example of that.

Michael:
All right, man. That is so cool. I mean, that just… I feel like that sets this platform up for a huge amount of versatility, which is really pretty nice. That’s pretty cool. All right. So I’m wondering how there’s so many different ways to… I mean, there’s different ways to wire stuff up, I guess. I shouldn’t say so many different ways. How did you figure that part out? How does it determine what gets wired when you… Is that just some preset thing for each block then? Like each block has its own set of wiring for the hookup diagram?

Noah:
Yeah. So that was really interesting because that took a lot of different forms. But what happens right now is that the breadboard gets divided up into, I think, nine areas that each have about six holes in each area. I think one of them has five holes. And then within those five holes, it’ll just automatically wire the component itself. So it’ll just say, “Okay, well, this is what it looks like within this set of holes.” So that allows me to space things out. So that’s how it works in a nutshell.

Michael:
Oh, okay. Gotcha. Is there a block that I can pull in that’s already set up for me? You know what I mean? Let’s say I want to blink an LED. Can I just pull in a block like that out of curiosity? Or no?

Noah:
You can’t. But one of the things that I’m working on right now is starter kits.

Michael:
Okay.

Noah:
In the lesson. So I think I have one right now, which is the high five machine, which is basically a button you push and then the servo would move with your hand attached to it in order to give you a little high five.

Michael:
Oh, that is awesome.

Noah:
And so the idea with the starter kits is… And they’ll be under the lessons section is that you’ll just click on the starter kit and all the blocks that you would need for that piece of code would just appear. So you could just start playing with it immediately.

Michael:
That is so cool. All right. So let’s say somebody listening right now is already… Maybe they’re already teaching an audience. Maybe they’re already teaching people about Arduino. Maybe it’s a school teacher or somebody who volunteers or maybe it’s somebody who just wants to teach or play around with this or something like that.
What is it like…In your mind, what is the… What’s the setup. So somebody walks into a class or whatever. And there’s kids there and they plan on using this tool. What would be your modus operandi? What would you do? How would you pull that off? I’m just curious how’d you do it?

Noah:
Yeah. So what I usually do, at first, I was giving lectures and I was like, “Blah-blah-blah-ing for 30 minutes.” And that put a lot of kids to sleep because they didn’t care about Ohms law or any of that other stuff. Which makes sense.

Michael:
Yes.

Noah:
I don’t think I cared either when I was nine. So what I do now is I give a two minute schpiel on… Say we’re doing the ultrasonic sensor, like “Yeah, you can sense distance.”
And then I would give them a starter kit and then I would just let them play. And I remember doing this at the library and kids will do all sorts of goofy things. They’ll see how far they can… This is a huge library. So they went 30 feet out and they were like, “How far can we make this sensor sense?” And then they’ll make lights up here with the sensor. And I think, yeah. So I just, two minutes schpiel, a starter thing and then just let them play for 30 minutes. And then take the kids that really want to go further on electroblocks, answer their questions and also encourage the kids to answer their own questions as well.

Michael:
Yeah. That’s cool. That sounds really fun. I have done some after-school teaching and stuff like that, and it is fun. It is so amazing to see what some kids try out and that’s pretty fun.
I want to go back to Electroblocks again, I’m jumping around here. But so when I’m looking at the simulator and the code blocks are laid out. If I want to look at the actual Arduino code, is there a way to do that? Like the code that gets generated from the GUI is there… Can I do that too?

Noah:
Oh yeah, absolutely. So if you go to the… There’s a code symbol, it looks like a less than sign, greater than sign, with a slash.

Michael:
Right. Yeah. Yeah. Yeah.

Noah:
[crosstalk 00:21:10] home. You’ll see it. And one thing you can do, too, is most of the code blocks have a question mark. So what you’ll notice is when you click on that, what’s inside the question mark or the help thing gets reflected in the code.
So you can see which code generates… You can match the comments up. So if you’re ever confused, you can see what it’s doing.

Michael:
Oh, I see what you’re saying. You can correlate the block to the code itself. Okay. I see what you’re saying. That’s cool. And it looks like the code that gets generated is pretty highly commented out. You know? So if somebody wanted to read about it or whatever, they could do that. That’s pretty cool. Man, this is so neat. And I really like it. And I liked the fact that it’s open source and people could contribute. And I just… I feel like it just seems like a really good platform to build on.
How long have you been developing this, Noah?

Noah:
I want to say… I think three years.

Michael:
Okay. That’s fantastic. And like you said, it’s up on GitHub. So anybody out there listening, if you want to start contributing, definitely you can reach out to… How should they reach out? Should they just jump on GitHub or you want them to reach out to you directly or?

Noah:
Yeah, go ahead and reach out to me directly. My email address is Glaser. G-L-A-S-E-R power@gmail.com and feel free to shoot me an email. And I’ll be happy to give you a tour and help you get set up.

Michael:
All right. Awesome. Yeah. I mean the more people that contribute, the bigger this grows, I mean, that’ll be cool. Awesome. Noah, thank you so much for your time, man. I really appreciate it.

Noah:
Yeah. Thanks for having me. I really appreciate it. That was awesome.

Michael:
Cool. Is there anything else you want to add before we close up?

Noah:
There’s one really cool feature I wanted to add. You can actually do… There’s a debug block that you can drag in. And what’s cool about that is when you upload the code, it will actually pause the code on the Arduino and print out all the variables on the Arduino. So you can actually do a break point. It’s like a break point block on the Arduino. So I just wanted to mention that as well.

Michael:
Oh, that’s really cool. Awesome. Sweet.
Hey, thanks Noah, I appreciate it.

Noah:
Thank you.