Thank you.

Thanks for that.

Um, yes.

Oh, thanks, everybody, for being here.

Well, this morning or this afternoon, it's 12.

So I don't know how it depends on what you want, but so this title is this talk is about textile based interactions in javascript.

So this look is not really about what you should do, what you will do.

It's more about what you can do.

A lot of the times when where our conferences we talk about the future of interference is like with reactor web components or the new way baby eyes with things like that.

But this talk is more about the or the side of the interface to the actual thing that you can use to interact with it.

Um, so I've already got introduced, but my name is Charlie Gerard.

I'm a frontline Della Pera leaving Sydney in Australia and outside.

But what I'm gonna talk about to that has nothing to do with what I do for work.

But outside of that, I'm also part of the academics, but program and model attack speakers.

I know that there's a few around at this event, So if you have any question about how to get into these programs or what they are.

Feel free to come talk to me afterwards.

Yes.

So what we're gonna talk about today is not about me, but it's about textile interfaces.

So what does that actually mean?

Just a quick definition.

It's using textile as an input to interact with interfaces and or devices.

So the main inspiration for this talk is actually something that I came across about three or four years ago.

That's called Project Jack out.

So for those of you who don't know what this is, this is a collaboration between Google and Device of a brand of jeans to create a connected jacket.

So instead of just spending some time explaining take to you, I'm just gonna play the I'm just gonna play video.

No.

Okay.

Uh, why?

I know I don't.

So there is no video.

Great.

So there was a video five minutes ago, and now there's no video anymore.

So I'm just gonna talk about what the video shows.

So Google partnered with Levi's thio.

Embed a jacket with electronics so that you could interact with your phone while you're riding a bike.

So if your phone rings and you're supposed to.

You don't want Thio?

Take the call.

You could just touch the fabric and it would It would send a signal to your phone and you would have you would be able to interact with a few different interfaces.

With that, you could switch the music or get the next direction from Google map just by interacting with the jacket.

Um, and after I saw things like that, I was like, to me, it was brand you at the time, like 34 years ago.

I didn't really know how to make this and ah, ago be like I got really interested into understanding.

And this talk is about how you can actually build something similar while just being javascript.

Dave.

So why I'm actually talking about this?

There's a few reasons.

So the 1st 1 is the evolution of interactions.

We still most of the time interact with technology using a laptop or our mobile phone.

But there's more like we can see some people start using voice interaction.

People have tried v r.

O A.

R, and I do believe that there is some potential in textile interactions as well.

And as technologists, I think it's our role to.

We don't have to build these things, but at least keep in touch with what's going on.

You know, the reason is that it's a lot of exciting possibilities.

Hopefully, you'll feel the same way at the end of that talk as well.

But I know the in technology well.

In our job, we build things that people will use for money and things like that.

But to me, technology has a lot more exciting opportunities.

And that's why I love this industry and I'll show you a little bit what you can do with textile.

And then finally, that's a personal challenge is to demystify what you can come across online when you look at innovator yet innovations.

So every time that I come across something that I don't really quite understand, I don't want to just look at it and not figure out how to build it myself.

I don't want to think that you have to have a PhD to build certain things or you have to be backed by Google or Facebook.

I believe that everything that we see we might not understand at first there is a kind of cheap hacky version that we can do at home without having to think that you have to work for Google for to do stuff like that s so now.

Let's talk quickly about the potential of textile.

So first of all, it's flexible when we think about a laptop or a phone is quite rigid.

If you try to bend it, what it's gonna break.

But with textile, when you embed electronics in it, you actually can.

Well, it's quite flexible.

So you want you have less chances of wrecking.

It easily is very lightweight.

Most of the time, we don't even realize that we're wearing clothes.

By the way text.

Others will have to be close.

It could be this textile on the table.

Here you have cut inside home or towels or blankets or pillows or whatever it's in the end, we don't really look at it that way.

We can just take it as well.

It's sexologist covers already, but it's actually a load of potential there as well.

Any for it being lightweight, it means that we would maybe be able to kind of walk around without having to carry a heavy phone or a heavy laptop I started speaking of conferences last year, and even if I tried to travel light at the end of my luggage is or my backpack is actually quite heavy because of the laptop and the phone and stuff like that.

So being able to embed that kind of interactions into textile means that we could actually travel even a lot lighter.

It is quite magilla s.

So if you want to build your own things, you can add different components.

You could add lights or flex sensors or all that stuff, and you get to build it yourself.

So you're right.

You get to decide where you want it to be.

Even if it was on a T shirt, that could be the shoulders or the back or whatever.

So you don't have to actually buy something as it is like the phone you don't mean Well, good, I think, was working on a modular phone.

But in general, when you buy a piece of tech, it's kind of like, you know, you just buy it, and that's the way it is, and you don't get to decide what parts you want.

But by building your own textile interface is you get to decide the interaction and the senses that you want to embed in it.

It's responsive to adaptive church.

So this is in this talk.

I kind of had to made up make up somewhere because adaptive is a word that I made up because I didn't really know how to explain what I wanted to say.

So, adaptive touch what I mean by that Is that so when you, for example, for the jacket by Google, you interact with it and it sends a signal.

But adaptive touch means that you don't have to press it very hard to then sent a signal.

You could even just lightly touch it, and you could have different interaction based on how you decide to touch the jacket s.

So this is what I mean by adaptive touch.

It is very low power.

If you've been playing a bit with, you know, a respirator, depending on the amount of components that you have in your circuit, it's not something that you'll have to recharge every day like you do with your phone.

And then finally, it's pretty cheap, so I'll cover that a bit later as well.

But if you compare the price of, ah, Mac book to something that you can do Well, obviously, you do a lot less with interactive style that you do with your laptop.

But it's to get started in that space.

You don't have to spend a lot of money.

Okay, so how does it actually work?

At the core of it is conductive threat.

So this is normal thread that it makes that is mixed with stainless steel.

So it means that it carries the current through a second the same way that wise do.

So, um, again, Well, I don't know if you've been playing without dream, but we know, but usually you connect your microcontroller and your senses with wires in between, and you can do exactly the same with conductive threat.

The main difference, though, is that usually wires are cootie like they're wrapped into some kind of plastic, so you don't really interact with them, whereas the connective thread it's bare.

And as your body conducts electricity as well, it means that when you used collective read in your circuit, you can know the kind of like to charge that goes in a circle, and as soon as we interact with it.

So as soon as you touch the thread, you have a change in this electric charge in the circuit that you can track and then use that as a zone input for your interfaces and devices.

So this is like the latest version of the one of the things that I built.

So I'm just gonna go through a little bit about how it works and the modules that you have to use to do that.

So I built it three different times.

That's just the latest.

That's one.

You don't have to build it that way.

If you're interested.

There's a few different microcontrollers that you can use or things like that.

But and the core of it is the flora board.

The reason I used that one is because it's good for wearables.

If you look at all the holes around the board, they're big enough to have to be able to put a needle through them.

So at first I didn't know and I worked with another board that wasn't made for wearables, and I realized too late that I couldn't even put the thread through the hole, so that was totally useless.

Um So if you want to do wearables, I think the flora is a good one.

Then I I did a Bluetooth module because I didn't want to have to be tethered to my computer.

Obviously, I want to be able Thio walk around and being the streets or whatever and communicate to my phone or my laptop via Bluetooth.

Then you have high level resistance.

I'm not gonna go too much into that, But to be able to filter through and get data from the amount of touch, the capacity of sensing, you have to use resistance.

Then I have two pieces off reds and finally about to make it totally portable.

Um, okay, it's $48 s o.

When you want to buy all these components online, it would only be about $48.

So when I was preparing this talk, I realized that Google actually partnered with another brand called Sandro to make a backpack.

So now they also have an interactive backpack.

Anything that looked area after and I was like, £685 Are you for real?

And I'm like, No, I'm letting you do that for 80 $48 so it means the instead off instead of having to buy something that is super expensive.

You could actually start playing with that technology and put interactive stuff in your backpacks or accessories or whatever for a lot cheaper.

Okay, so in terms of code now we assembled the whole lot of hardware together, so you can't.

You can't do everything in JavaScript.

So that's a bit of Audrey.

No, but I'm going to go through it line by line.

I mean, block by block.

So it is.

That's pretty much all the code that you need to upload to the Audrina.

What's going on here is that we essentially ate the Bluetooth communication we use.

There is a capacity of sensor library for Audrey.

No.

So you don't have to write it yourself.

You just create to capacity of sensors for the two pieces of threats that I used and we use the threshold.

So, as I said in in circuit, there is always an electric charge, but you want to be able to track when you're touching it.

So you put a certain thresholds that when it's over, this one is 1000.

But you could decide whatever you want really based on the interaction that you want.

But as soon as the value coming back from the Audrina will be over 1000 it means I'm touching a piece of thread.

So do something in the browser.

The main, the set of function that runs once when you upload your code to the Audrey.

No, he just kind of reset the value of the capacity of sensor.

You set the Bluetooth mode Thio data that you know it It's with the library so that you don't Yeah, it's it's fine.

And then the loop function is going to run continuously and what you do, you just read the value from the two pieces of threads.

And then as soon as they're above the threshold, you send that via Bluetooth.

So in just a few lines of code, you have the capacity of sensing running on the Arduino, and now what we have to do is deal with it in the front end.

So, as I said, I was using Bluetooth, so I decided to be able to connect to the browser using Web little.

So what we're gonna do here is we have the name off our of our device.

That's called the Blue Fruit.

Ellie, you can reset that name.

If you don't want to call it that way, that will be on the albino side.

U S 04 Web, Bluetooth it works, or the Bluetooth critical works with services and characteristics.

So they have a new ideas that you have to use to be able to connect to and for web.

Bluetooth You.

For security reasons, you have to start the connection to a device with user input, so you can't just run your brother and it will clinics right away.

So let's say on a Web page, we have a button, and as soon as we click, we're going to request nearby devices.

And we had a few options to filter down the device that we want to connect to.

That would be our ate a fruit module, and the service is that we want.

And then finally, we connect to it.

We get the primary service, we get the characteristic and at that time here, were stopped to get the data from the Arduino.