 Cool welcome everyone to digital detox. Thanks Alex for this plenty welcome I'm Alex as well another Alex and today I'm going to talk about talk to you about me. Oh, which is disarboned here And it's jobless JavaScript library now Nothing much to say about me. I'm just an Italian where a full stack developer working here and co-founder of biscuits and And These is meal now meal is an urban that allows you to Detect the gesture of your hand through Electromyography senses, which means every gesture your hand is making ever movement your hand or your forearm is making Me recognize it allows you to use it with the code We'll see how It's more difficult to Explain what it can do, but what I can do is show you this video with the sound of my computer unlikely Now as developers, I think you can understand. How did I feel the first time I wore one of them? I basically can be Ironman. That's what you're telling me Let's see quickly how it works. So it's based on Electromyography, that's why the name and That is what makes everything perfect to be detected by your or by the arm band I'm gonna read it. So electromyography is an electro diagnostic Technique for evaluating a recording the electrical activity produced by the skeleton muscles but what does it mean We have these gestures and motion Achieveable on a meal. So the gestures are double tap feast spread fingers web in web out And the motions we have is the rotation on in general the movement of the arm and forearm meal provides us a Diagnostic page, so I'm gonna quickly show you how does it respond if I can find the mouse cool So you can see I'm using the right arm is locked battery level and We're gonna see everything here. So double tap will unlock meal in whatever application So we're gonna see it after as well. So double tap unlock Release lock the game on here. This four retangulars will show my electromyography on so everything Basically the muscles Tensions so if I tend my muscles you can see how sensitive it is Just to be clear, I'm not selling the product Yeah Yeah, so I'm just developer curious developer Who wants to share knowledge or as soon well what I found out on the web So let's keep going. We have all the orientation accelerometer. So you can see the cube moving as I'm moving my arm in the rotation and On the right bottom, you can see the gesture feed So first I will unlock and I will go through all the gestures and you will see the icon and the name so double tap double tap again spread fingers Sorry, what's that way out? So I can't see anything So I was saying without webbing and Fist you can see also the strength and And about the event feed we're gonna come back later to that cool the first thought I had when I saw Mio was its implication in the medical environment So I found out actually this guy they were able to plug me on its arm in this case through Mio arm bands So he was able to move the robotic arm because of course he lost his arm and so he was able to move the Robotic one which I think is pretty incredible Of course is listening for hold the hand muscles Which you will know are all between here and here and just with that he was able to move it But let's see if other platforms we can develop with web applications JavaScript. We're gonna look at today then Arduino for your domotic systems and home automation virtual reality computer applications as smartphone applications Quickly, let's have a look to what this guy did with Arduino So he was able to lock and unlock his home though With Arduino and me of course So again double tap unlocks the application Perform a fist rotate Unlock it you're gonna see it better because now it shows inside so you can see Arduino there Again double tap to unlock it Feast rotate close it again That's pretty cool even cooler. This guy's here Basically with two arduinos and augmented reality. They were able to make you fly and Should basically again be Ironman Let's start Let's see how does he work. This is our JavaScript library. You can see he's very very simple. You just Include the meal library either with CDN or MPM in this case Then meal that connect with wherever application name you're gonna find Connects meal the arm band to the application on your computer, which already of course downloaded Then is all everything is based on events So you listen for certain events and you put a call back. This is it So in this case specific case meal that unconnected so whenever you connect me or to the application it will vibrate Keep in mind that these here is the actual our band While capital and meal is the class which means that every time you connect This will be overwritten if you want to use multiple meals and pretend you're Ironman You need to store in array or something like that Let's have a look to methods and events we have So we have on off lock unlock vibrate stream in G and events are posed and all the poses Such as feast spread fingers web in web out orientation arm sink connected lock it and the battery level for a better view of Whole the events and methods you can see the documentation those lights will be available online or speaker deck Let's do some live coding Cool so let's include our library already npm is told me oh just npm is told me oh, but I'm not gonna do it now then meal that connect Count Alex Then meal on connected We have our function Inside We will listen for yes Yeah Yeah, oh it's just Dries Yeah, sure sure a good point You probably can't see it, but there is a USB plugged in here. I don't want to move that much vice here These will establish the through the web sockets a connection. I'm gonna speak about later better and through the Bluetooth So it's pretty one-to-one and it's safe So nobody nobody should unlock your door or something there. Yeah, there is an idea as well. So Yeah, you also you need to run an application on your computer or an Arduino So it's linked already you link to the first time is not you know It's not like as someone can come to the me or men and unlock your door So let's put an event on the post post returns a post name Which out we are just console log it cool Let's run it So I unlock meal and every time I perform a post is console logging out the Whatever I'm doing Let's make it a bit more complicated. So let's delegate everything on a function called fire events Which accept a meal instance Let's run it here for events this Cool So here we will say meal on I said we have also access to all the post events So we'll save fist we're gonna set another event listener on the orientation Which is that returns a data object with X at the Y and We go on our console log data X Actually, also what I want on Fist off. Yeah, thank you the beautiful thing of the light cutting So we said yep We're gonna do a meal of Orientation Again, you can see it's very very simple. So double tap Perform a fist and this is the orientation. So is the X You can see a change it when I stop to perform the fist is stops So again double tap and here we are Let's make it another bit more complicated By creating a function called log it Which accepts data and a string And we will return an array made of The data plus one because otherwise would be negative in the case of the orientation Which is so it's going to plus 0.9 to minus 0.9 multiply it by 100 and Then we join everything with a string and then here We call the function passing data X and an asterisk save for all of them that Y maybe Slash Cool, let's see what happens double tap Fist and here we are so you can see how sensitive it is I Stop performing the feast it stops and this is in my opinion a perfect application could be for a DJ so While you playing You can turn all day would audio up and down and the effects If you want to make it a bit more complicated you can do how this guy's did So they manage an application So that the DJ could control the light system in a club with the tool me or armbands cure Let's go on web sockets. We spoke about it Quickly web sockets is an advanced technology that makes it possible to open interactive communication session between the user's browser and a server With this API you can send messages to a server a receive and even driven Responses without having to pull the server for reply Who's done no already? What does it mean? Mio? applies the new socket connection to a property so then is able to do the send and our message What does it mean? Whenever you perform a gesture with me or whenever you move your arm with me or is sense The data to the web socket connection again with a computer through Bluetooth Which provides a JSON formatted data to the library me or JS Which is listening for the event and that's why we are able to do me or the on post and return it on the other Around you can't send Things to the me or such as vibrate a lock a lock so you can say Me or that vibrate it will send the message through JSON formatted data to the web socket and the web socket will send it to me or Which is listening for those events In details That's the actual function for the post You can see it's just triggering this to Functions sorry to events the first one is directly the events with a data post That's why I can do on spread fingers on waving in without of fist the other one is the one We used in a lot of coding in the first exercise so pose and the data pose so it returns the post name on the other hand That's how it sends Functions to the web socket so in this case that's the vibrate you can say the intensity and Which me or if it's not already the latest connected and He sends the JSON formatted data to the web socket web socket supports It's pretty good all over the places apart from my Which is then which is more than expected, but anyway you can use NPM just there is a polyfill for that for all the browsers and requires called ws The meal market is online you can download applications for meal as Mac or Windows application augmented recommended reality applications and it's not Full of applications so if you find looking for a place where you're gonna share your ideas That could be a good solution because it's one of the few markets It's not full of the other applications such as the iOS or the Google ones You can find stuff as Spotify connector where you can switch songs or browser connector or find a connector Let's snap I'll prepare a little applications for you. So Let's go that pretend you don't see thing, okay, cool so Welcome welcome. You're on the TV Now I'm we'll be able to control this web application just web application with meal. So double tap a lock perform feast picture Again spread fingers go back lock feast picture All from here. I can wave in wave out to go through the pictures I Want to try something just bear with me May you please everyone right arm to the right right arm to the right Right arm to the right right Cool, don't know to our not what? cool now right arm Wait, can't see anything you can stay you can just relax. Oh, it's already here. Sorry right time to the left Cool, that's right No, the other one the other one. Sorry one more. Sorry. I'm gonna do it. I want to do it. Oh We take it this one. Sorry, sorry We take that we yeah, we take the left one. Sorry. Okay. I'm not gonna do it, but I wanted a picture with you Cool the camera is there ready cool nice Nice, so if you have any questions Go on