Ramon Huidobro PARISS: Who likes tacos? Raise your hand.

I literally asked that to see who was paying attention. Cool. All right. Okay. But who

here has personal projects? Really? Has ever worked on a personal project? Okay. That's

better. Cool. All right. So, our next speaker will be talking about personal projects and

maintaining them and letting you know that you can do it. You're gonna get stuck but

keep going. Can we give a warm welcome to Ramon Huidobro?

[ Applause ] I said it better backstage, but I got nervous.

RAMON: Hi, everyone, thank you so much for that lovely introduction, and thank you all

for being here today. Before my slides appear, I want to say thank you for being here, JSConf,

thank you for having me. This is my first time ever as a JSConf anywhere in the world.

[ Applause ] This is  thank you. This is mine. So, I'm

just gonna nab it. And  I really like it. All righty. Okay. We're good to go. Hi, everyone,

before we start off, there's a link at the bottom, also in my Twitter, SenorHuidobro,

if you want to follow along for convenience sake. My name is Ramon. I am a freelance software

Dev and teach kids on the side, I live in Vienna, Austria. And you might think, what's

with the picture of the dog, can we see more of the dog, please? Don't worry, I've got

you covered. This is Fiona. This is Fiona, we adopted her about three years ago. And

I love her so much because her  especially because of her eyes. She has these Simpsons

eyes that look in different directions and she says so much with these eyes. My favorite

is this top right photo where she's judging my wife while she eats mango. So, in Chile

Spanish, we have a word to describe Fiona which is regalona. I haven't been able to

find a suitable translation. Tried, put it in, I put in regalona, got it back. I tried

it in German. And in Austria, we speak German. There's a bajillion words, but German being

German, it capitalized it. [ Laughter ]

It in short regalona means spoiled, but you spoil them on purpose and they love you. It's

a whole thing. Anyway, let's talk about rhythm video games. In particular, dancing video

games. Any of you play Just Dance? Can't quite see. I'm gonna say from that one yes that

all of you do. I haven't myself. But what you do is you dance to the rhythm. You do

the little poses and you gets points as you go. So, this is fairly popular. They're still

making them to this day. But when I was a kid, about 20 years ago, there was this other

game called Dance Dance Revolution. Or DDR. [ Applause ]

Nice to see  nice to hear there's a few fans in here. If you're not familiar with DDR as

I'm going to refer to it from now on, as you can see in this very well done GIF is that

this person's pressing the buttons to the rhythm of the music. Now, on screen what you

see is little arrows that come up as the song goes on to tell you when to step on the buttons,

right? And it's a lot of fun. You can see it's a bit older. So, this is from PlayStation,

I think. It's fairly old. But it's a lot of fun. And the music. How do I put this? I'm

gonna show you. Let me just load it up here. [Rockin’ techno music beat thing]

It's something else. By the way, whoever is in charge of the playlist of music today,

whoo, you're really nailing it. So, I used to play this a lot when I was a kid. But a

few years ago I introduced this game to my wife who had never played it before. We were

looking for ways to play it. And we actually found an open source alternative called Step

Mania. Anybody heard of Step Mania? I see a couple hands. Cool. So, Step Mania lets

you load in your own songs and customize it to your own liking. And like I said, it's

fully open source. Like I said, we had the software, we had the music. What about the

controller, you might be wondering? So, in the arcade, the controllers for Dance Dance

Revolution were these big metallic ones. But at home, what you had, especially during the

heyday of DDR were these foam mats. They looked like this. And they're great. They were affordable,

they were about 30 Euros. So, $30, approximately. And they were a lot of fun. But the problem

is that if you use them as much as we did, they kind of wore out after a while. And so,

you started getting used to seeing this screen a lot. So, you couldn't really press the buttons

anymore. So, we looked into metal alternatives. And they do exist. You can buy them. But I

don't know if you saw the price, but it's like for two of them, that's $300. And that's

discounted from $900. This is a lot of bones for, you know, wanting to play some DDR. So,

we didn't really look into it. But then a few years later my wife and I were at this

thing called Maker Faire. Do they have that here? Cool. We were at the Maker Faire in

Vienna and I was introduced into bear conductor paint. Anybody familiar with this? And I learned

about bare conductive paint on the random Facebook videos you scroll through is you

can draw circuits using paint. They had a demo where you can draw lines from a battery

to a lightbulb and created a circuit and it worked which was pretty cool. But what you

can see is it's also capacitive and can send a receptor. In this case, going to a Raspberry

Pi. And you could play a piano using a Raspberry Pi and some paint. Which I thought was cool

and then I thought, hmm m. I could do something with this. And I saw there was a Node.js interface

that you could install on the Raspberry Pi that even had a nice code example. That was

very handy. And then I thought hmm m... I could definitely make something with this.

And  [ Laughter ]

Then I went back to Step Mania and I saw I could customize the controls. What if I took

a Raspberry Pi, a yoga mat, a some Node.js? Lo and behold, project dance mat was born.

Something to bear in mind, though, this is the first time I had ever worked with anything

hardware related. So, needless to say, I was a little intimidated. So, I sat down with

my wife, how are we going to make this? Very simple, a dance mat, connect to a computer.

The computer thinks, ah ha, this is a keyboard. And handle the button presses as if they were

keyboard strokes. Fantastic. So, I had my little bit of setting up here. They have this

NPM package that I could install, set the thresholds for touching and releasing. That

is how sensitive. Because when something is capacitive, it question detects when your

finger is approaching the paint. You want to mess around with the sensitivity. Great.

We had everything set up except for the big comment that says send data to PC. Which 

again, I like to jump into projects without doing much research. So, I learned that Raspberry

Pis, when you plug them into a computer, the computer doesn't automatically go, oh, that

is USB device. I can take it from here. You might be thinking, Ramon.

[ Laughter ] Did you not research this? And let me remind

you, this is my first time doing a project like this. But okay. I did some searching

around, I talked to some friends and I discovered that you can configure what's called a gadget.

See, a Raspberry Pi, the most common software used on it is Linux. So, I could configure

this Linux kernel to have a little  to  when you connect to a PC tell it, ha ha, I'm

a USB keyboard device. And I found a blog post that let me do all the copy pasting which

is fantastic. I took the copy pasting part  I took the most important part which is, of

course, the serial number, the manufacturer and product. Don't worry about what this does.

What it does in sort is basically set it up so this is a script that when run will set

itself up as a recognizable USB device for the computer to interact with. So, then, okay,

that's one part done. Then I need to actually send data through that USB interface. So,

I went on the USB human interface devices documentation and I downloaded what I found

out was a 96 page PDF. And I made the sound that a basset hound makes when it barks. Woof 

but I stuck with it. And I found out that, in short, when you go to interact with this

USB interface, I need to send a byte array of 8 hexadecimal, that's a code. And I need

to send these. I searched and found a nice GitHub listing of all of the keys. Very cool.

I defined my little constants for left, right, up and down. And I set these up so that when

they're pressed by me, the Raspberry Pi would tell the computer A, B, C and D. This was

so exciting. Just to write this code. So, that got me started. So I defined these constants

and I told myself, all right, now we'll process the actual touches. First I'll get the keys

that are sent from the cap connected to the Raspberry Pi to  to this function which is

an array of electrodes that are pressed. So, what I would do is have  would parse those

pressed keys from the data and then take those and make an array of eight keys. You might

be wondering, what if you're just pressing one? You have one pressed key and eight blank

ones. Okay. So, to pass  to parse those keys, all I needed to do was loop through each of

the electrodes that are pressed and, depending on which index it has, because you probably

saw in the picture, I should have one here. You probably saw that it had 12 or so electrodes

that you could touch. So, from left to right I just assigned them accordingly and then

I was all set. I could return my pressed keys. Next up, to actually turn that into an array

of keys and turn that into a key stroke, I would just force it to be 8 in any case and

fill the rest with blank ones. Please stop me if I'm going too fast. So, with that, with

this program running, I could have it always detect which ones are pressed and it would

just log out the key stroke as it would be. And, of course, if there's more than one pressed,

then it would take both into account. Because in DDR, I don't know if you know, there are

times when you have to press two like this, like that. I'm not going to go much more on

that. So, now we'll actually send  now we'll actually take the byte array out of that.

Turns out there's a JavaScript function for getting 8 bit unsigned integers. So, you could

just call Uint8array from key stroke. All set and nice. And now to send this key stroke

to the actual USB interface. Um. I hadn't done this before. So, I did some research

and I found out that the actual interface in Linux is interacted by something called

a file descriptor. So, what a file descriptor is, just gonna take my cursor out of there.

Somebody should have said something  what a file descriptor is any communication Linux

does through other devices with any input/output devices is through files. So, a USB device,

a computer, a node on a network, or even a Word document, those are all files to Linux

so you can send and get data from them. So, I thought, I wonder if there's anything on

npm that does this. Lo and behold, there is. I found this Linux device package which let

me just open up that USB interface and all I had to do was call device right buffer and

I was good to go. Now, you might be wondering, did it work. And I said, well, before we get

there, we have to be responsible. When the program ends, I need to close that device.

Did it work? Well, let's find out. So, I ran node dance mat.js. I plugged the Raspberry

Pi into my laptop. I opened up a text editor, best type of test there is, and look at that.

I'm sending A, B and C. I've never been so excited to see these letters.

[ Applause ] Now, you might be wondering, Ramon, why did

you show us every sordid detail that have? I wanted to show my excitement. I didn't have

any experience doing this. I persevered. My wife was very patient with me. And then it

worked. And then came the fun part. We could actually start painting. And so, this is a

picture from home. We took the paint. We bought a yoga mat at the corner store. We even made

it two player compatible. And after a while we cut them up because we found out that dancing

so close to each other can cause a few problems. And did it work? Yes. Did we start passing

songs with super scores? Eh. You know, we got Ds. But it had been a while since we played.

So, then the question was, are we set for life now? And really it depends on how you

look at it. So, here's something I learned: Putting paint on a yoga mat and expecting

that to stay forever  eh. So, then, you know, we had to reapply some coats of point. We

have to modify some things here and there. And we started gathering a what we call a

if I could do this over again. Ramon, why didn't you use an Arduino? What is an Arduino?

We found out, yes, it's nice to be able to roll up the yoga mat. But maybe a more flat

surface would be good for the paint. And we started  and, you know, we also thought about

maybe for latency to have physical cables instead of paint. And we started doing some

mods like that. I don't myself, but my wife knows how to do it, soldering, and she does

it well. You might be thinking, do you think you did it? Yes, of course. Because the important

thing is, we learned a lot and we are delighted about it. This picture is from three days

ago. [ Applause ]

So, I've got a few takeaways for you. I mean, like, you know, if you're not experienced

in messing around with hardware, it can look super daunting and you might want to have

a  what is it called? A fire extinguisher close by. But the importance of playing around

with stuff is so vital. And it's so much fun. And you learn so much. And here's the important

part. If you have an idea, just go for it. You never know if it's gonna work. Thanks,

folks. [ Applause ]

[ Laughter ]

[ Applause ] PARISS: All right. So, we're wrapping up.

We're near the end. Our last talk will be coming on soon. You know what's funny? Every

time our speaker would come backstage, I would ask them, like, how do you feel? Are you ready?

I'm really nervous. And I'm like, me too. Like, I'm nervous. And then they get on here

and they're freaking Beyoncé. They're just so confident. I'm like, you liar. But honestly

the speakers have been amazing. Give them a round of applause.

[ Applause ] And we have one last talk. That will be happening