Placeholder Image

Subtitles section Play video

  • Just go for it: The story of dance mat.js

  • 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. [Rockintechno 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

  • 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

  • in a few minutes so you can just chill out.

Just go for it: The story of dance mat.js

Subtitles and vocabulary

Operation of videos Adjust the video here to display the subtitles

B1 mat ramon raspberry raspberry pi usb applause

Just go for it: The story of dance-mat.js - Ramón Huidobro - JSConf US 2019

  • 0 0
    林宜悉 posted on 2020/03/28
Video vocabulary