GitHub Open Source Friday, 20 Feb 2021

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Open Source Home Automation - Home Assistant - Open Source Friday

Description

Join us and Paulus Schotsen (maintainer of home-assistant) in learning about Open source home automation that puts local control and privacy first. Powered by a worldwide community of tinkerers and DIY enthusiasts. Perfect to run on a Raspberry Pi or a local server.

Join bdougie and friends live for Open Source Fridays at https://www.meetup.com/GitHub-Virtual-Meetup/

0:00 - Start
0:48 - What is Home Assistant?
10:08 - Demo and Getting Started
34:09 - Editing your own HA Dashboard with JavaScript + WebComponents

As always, feel free to leave us a comment below and don't forget to subscribe: http://bit.ly/subgithub

Thanks!

Connect with us.
Facebook: http://fb.com/github
Twitter: http://twitter.com/github
LinkedIn: http://linkedin.com/company/github

About GitHub
GitHub is the best place to share code with friends, co-workers, classmates, and complete strangers. Millions of people use GitHub to build amazing things together. For more info, go to http://github.com

A

But uh folks this is open source friday. This is a time for us to talk to open source maintainers about things. They're excited.

B

A

uh And today we're gonna talk about home assistant, the open source, automation, tool, open sourced. uh I said open source twice, um but real quick, some housekeeping. um We do have the wisebot. We have nightbot, we are github, so we do have a lot of like concerns and moderation, so you will not be able to drop links in the chat. If you do want to drop a link.

A

um You'll have to do some trickery or, if not we'll, um we'll mention it as well I'll catch it in chat, and I can actually drop it as well. So just fyi, uh and also please uh follow the code of contact. That's also linked below. uh We do uh respect everybody, that's in the chat, but also respect our our guest today, as well as respect me, because why not uh but paulus, uh why don't you introduce yourself, tell us uh sort of what you do today and said how you got here.

B

Sure right so my name is paul strauss, I'm a dutch software engineer. I no longer live in the netherlands. I nowadays live in california and around like seven and a half. Maybe eight years ago already I started home assistant and home assistant is an open source home automation platform that you can run at home on like a raspberry pi um and it puts like local control and privacy first.

B

So you know I actually I started it because I got the philips hue lights when they got released and you know I was like it has an api and I want to control this and then after I was like I got control I was like. Well then I now I need to do something with it right.

B

So I had the lights turned on when the sun was setting, and then you know the lights turned on when I was not at home, so I needed to have presence, detection and kind of like the ball went, rolling and rolling, and well now we're here and we're like 40 000 get up stars. I think. Last year we were the second most active, contributed project to python project 2 on github um wow, so yeah with more than like uh 2 000 people was it it. I don't remember, actually the numbers or eight times.

B

I think it was 8 000 different people that interacted with our repository last year, yeah.

A

And this is uh before, like the device that sort of kind of brought everything into everybody's home, it seems like the amazon echo device. This is right. This is pre amazon.com.

B

Yes, yes, it's before, and it's kind of annoying, because now the amazon and the google devices, which I will not name them because they will activate but yeah they actually are referred to as like home assistants or like smart home assistants. And so I get like so many things like hashtag homosystem is being used in like the wrong context, and I mean it's obviously also my fault for picking a rather generic name. But it is what it.

A

Is now right, we're here so yeah? So you just had you wanted to control your smart lights, so you you build this thing and python. It sounds like yeah and it's now grown the 40 000 plus stars on github right.

B

A

Of contributors and before.

B

We got on stream.

A

You mentioned you, have you have so many contributors like almost too many, uh which is a nice nice thing to have.

B

Yes, yeah, so the back end is python. It's a python application that runs with like async io and the front end is all javascript. So we use web components for this and it's a progressive web application. So people can actually you know you host it at home and then from your home, you access it. So you can either open ports on your router or you can use like forwarding services like home assistant cloud, and then you open this progressive web app. You can actually with chrome on android or on ios.

B

You can actually add it to your home screen and you have like even push notifications through this, um but we also realized actually progressive. Web apps was not enough, so we also have simple wrappers for ios and android, so we can send you a location back, for example right, so it's be cool you go out and about you can send your location back use geofencing for your automations and stuff, like that, so yeah, both javascript and python,.

A

Yeah yeah and uh there's already questions in the chat too michael banvard who's here, um asking about the pi zero. uh W specifically will holmen's system work. For that. I guess is that one of the brand new one that came out.

B

No, so the pi zero is actually a rebranded raspberry, pi one, but then in a smaller form, factor with less ports, and it is really really really slow. So please, please don't right, like we also see it like it's not being really used anymore. When I really look at our download statistics, it's really like raspberry, pi, 3 or higher it's recommended, and that's actually, because homeless systems has kind of outgrown itself. So we started out as a python application.

B

We realized that you know when we see people struggle is just to install a python virtual environment, install a python package, that's step one right, then installing this one then maintaining it like we bump python dependencies, we don't bite and we bump by the versions, and so we you know when docker came around we're like this is great. We need to get everybody on docker, but you can just like get everybody on docker too, so we actually built our own operating system. So we have our own operating system.

B

So you, actually you take a raspberry pi or you launched in a virtual machine as well. It has an operating system which runs home assistant in the container, and you actually update and run home assistant like through the ui, there's no longer any command line tool necessary to be up and running and like updating it. So it's you know like a normal home automation hub, you would get of the shelf or any like internet connected device, and then this is great because we can help you keep it secure right. You can.

B

You don't have to deal with python updates and, like I mean it's, python is a great language, but dependency management in any language is just hell.

A

Yeah, and do you get a lot of folks who are just sort of tinkerers or maybe can you know copy some scripts here and there not full-on developers who want to do home assistant as well? I.

B

Mean we have the whole range, I think. In the beginning we were very technical focused. It was a lot of like configuration text files and so and because it was difficult to install, I think we attracted more like people that were also system administrators right. They have those skills and nowadays we get like a whole wide range. So there's like you, know, there's stories of people using it.

B

The museum there's people using it in factories, but also people at home, thinkers like schools, uh everybody that can get their hands on a raspberry pi, can pretty much get started with home assistant, and it's it's really cool, because it's you don't need much right, even if you like, most people will have a device that is smart nowadays, even if they don't realize like if you have a chromecast or a google home mini right. Those are already things that we can read out, but also like. uh We, like the recent gs, is this new chip.

B

It's called the esp8266 like I know you can see this but yeah like.

A

B

This device, it's like two three dollars and it includes wi-fi, and so you can program these and you can put these nodes throughout your house and then send sensor. Data in or just like, have leds, come on and really like tinker on the like electronic site, and we see that's also been getting a lot of popularity recently.

A

Yeah, I mean it's as a recent like I. I love that we're doing this on twitch- and I mentioned this too as well uh before we hit live like there's a lot of folks who are now at home, who have a lot more time like I used to travel like every other week, I'd be somewhere else. I was in europe like four times last year, like I never had time to go to sit and think about.

A

Oh, how am I gonna route, this system and, like I, I always lean for the amazon echoes and the the google devices, because out of the box, it is kind of this work sort of right, um but I'm actually super excited to see it about like what you're gonna share in like the the progressive web app, but also the sort of routing and all the devices that you you have. I guess from your arms reach that you're you're pulling up right.

B

I got everything ready here.

A

Actually, like, like.

B

A

uh Always be ready to share your project right, no.

B

But yeah I mean I can show some. I definitely prepared some demos. I think the one thing I really want to show is that, like how easy it is, I think a lot of people when they think of open source. They think it's difficult to get started or they haven't thought about that or like it's only really for the geeks, because it's open source you have to github, install like clone it and stuff, and that's not the case.

B

We actually have been putting so much effort in making it easy, because we want more people to reach it right. We don't want to have these 8 000 people that have worked on the core of like interacted with us in the last year. Just for this small niche. No, we want to. You know everybody be able to get this in the house if they want to yeah.

A

And it sounds like uh decipher mentioned that he um he's been loving this and he's actually he's just shouting out and saying thanks for your work, paulus uh and then bruh 5200.. These names are uh amazing, but uh he's saying that he discovered a year or two ago and uh it's like it's a huge part of his life as well.

B

Yeah, well, I think I mean, like you just mentioned the pandemic like there's so many stories of people using home assistant to tell their kids when the homeschooling starts so like they'll have a light turn on so the kids know. Oh, I have to go downstairs to my homeschool area or something.

A

B

The screens will start up and these kind of things.

A

Yeah yeah and uh there's one other question in the chat about um like: why would you choose to run home assistant? uh Is it really? I guess their question is really? Is it really focused on if you have multiple devices that you're trying to automate together and like sort of sync, it.

B

It's really whatever you want with it. I think I think that's like if you the die hard home automation that like want to automate everything and never see an interface yeah.

A

B

Possible, if you wanna, like configure ui uh and like have the dashboard as cool as possible- that's possible. If you want to write javascript to like make cool graphs or do cool interactions, floor plans. That is possible. I mean it really goes all directions, and I think I mean the electronics people love it, because with very little effort they have a ui for the electronics project right. It's one thing to build some electronics, but then to have a ui, read it out, control it all that stuff is now just possible, so yeah yeah.

A

B

All over the place I mean I so I just show like yeah.

A

Like, let's uh go ahead and switch over to screen, sharing right.

B

So yeah can you switch to the camera real, quick.

A

B

I'm gonna, I'm gonna use this device. ah Oh it's falling.

A

B

It's still good, I'm gonna, so we we recently uh released like a case for the odroid m2, so the odroid m2 is like a raspberry pi, but so we build a case so, but I'm going to use this device to do like the the onboarding, so I just plugged it in this morning so yeah, let's switch over so once you plug it in right, so I'm gonna go to the url. So this is it right, so we're seeing onboarding so I'm gonna type in my name, I'm gonna type in a password- that's not very secure!

B

Now it will tell me what is my name I'll call it home demo um so to get like the location or I'll just do detect. Well, it says: hey you're, at the university of california irvine. That is correct, although I'm in america. I do very much like my metric system.

A

uh I I won't judge you.

B

All right- and so this is already um you know during onboarding we have already seen home assistant- has already found five different devices on my network, so just found a belkan wemo. You want to set it up. Yes, so now.

A

Development questions did you have to do any setup to make it discoverable in your network, or is this.

B

We have three different ways of detecting it, so we use like xeroconf or bonjour or mdns it's one of the uh protocols we use. We use universal plug and play and then recently we are also listening to dhcp requests.

B

So, for example, uh we had some because we couldn't detect teslas right and we were like how can we detect teslas and so actually, when a tesla comes home, it will connect to your wi-fi and it will do so with the mac address and um host name that we can route back. Oh that's a tesla. So now we know. Oh, that's a tesla.

B

So, for example, now there's wemo I'm like like well, where is it um I'll do bedroom and then, for example, you know I on the stream I use like uh elgato key light to light myself. You want to set it up. Yes, um google cast. I also like to set up my google cast. That's like chromecast home assistant, sorry, google, home hubs, these kind of things um solos are not set up right now, so I don't know what my kids are playing upstairs this um this orange house. You might recognize this.

B

This is the homekit logo. Okay,.

A

B

Home assistant speaks the homekit protocol and so normally speaking, the homework skip as a controller, so normally devices only speak homekit to be controlled and only ios devices like ipads, iphones and macbooks are allowed to control over homekit, but home assistant can do this too, and this means that this this is my thermostat, a lyric, thermostat and home assistant can talk to it locally through homekit without requiring any apple device.

B

So this way we can control your thermostat locally and because the homekit protocol is actually pretty cool because it's local it is, it has great discovery. It works pretty well, but apple. Has it locked down with licenses so we're open source?

B

So we, uh you know we kind of navigate differently, and uh so we have implemented this and this is an option, and so you can actually control lyric through this. So sometimes you have the option, go through homekit or go through the cloud. Well then, of course we prefer local, so yeah. This is the third and final step of onboarding. So now I'm going to click finish and now, as you can see, I'm going to stay am I logged in?

B

Yes, so now I'm already, uh this is my uh the dashboard of my house, and so for example, I mean this is just you know I, this is just in five minutes right. I didn't do anything special and so, for example, this wemo switch.

B

I actually connected it to the light behind me right, so all of a sudden during like these five minutes now, so I can already connect control things on my stream. I can do the same thing with the I'll get the key light. As you can see, the this is, of course, what's limiting me right, so yeah um yeah, and so you can also also see that I have like two google homes. One is a google home hub. I actually got it here for another demo in a bit.

A

Yeah, this is amazing and uh uh you just real quick. You went from the home assistant uh documentation, that's where you, what was the link you clicked to sort of step into this? So.

B

I went to homeassistant.local.com8123, so that's the default website where it becomes available when it starts up in your network. Okay.

B

So once because there's a two step right: first, you have to get a device that runs home assistant, so a raspberry pi or like a old droid, m2 or home assistant blue, and then, when you plug those in like once, the image is flashed. Then you just plug them into the network. It will automatically download the latest home assistant, start up, discover your devices and you go through onboarding and just kind of go with the flow from there.

A

Okay, that's amazing, and there are some a lot of questions coming through yeah, so the one there's one request around configuration through yaml files. uh If that was a possibility, uh yeah.

B

So there is, there is possibility to configure certain things through yaml files, um but not everything. So a lot of these authentication things with you know we, we discover a lot of things and those things are running on ip addresses, but ip addresses can change and these kind of things.

A

B

A lot of device configuration is no longer in yemo, and it's actually funny. You mentioned this, because this is just a it's been a pretty long discussion inside the home assistant community that somebody is bringing up now because actually, last year we made the decision, we're moving away from yamo for device configuration, and we only allow yaml for animations and scripts scenes things that or that or integrations that in which you define a protocol yourself like mqtt, for example, yeah. But I mean now I'm getting really technical, really quick, yeah.

A

Yeah yeah, we don't have to get that deep. There are some questions around the cloud, though, uh or what's the benefit of local versus cloud, and I guess question mark remote access.

B

So yeah locals faster right. If.

A

B

Have a computer at your home that talks locally to the switch that next to it, it's going to be fast yep. If your internet is down and your wi-fi is still up, it still works um and you're, not sharing your data with anyone right. Nobody has to know that you turned on your light, because if you think about home automation devices, they really tell a personal story about your life. What music are you listening to? What lights are on? What rooms are you using?

B

What's the temperature you like this, just there's a lot of stuff that can be derived from what you're doing and that's not something you always just want to share with everybody.

A

Yeah, that's a it's a concern that, like I have one of those amazon device behind me and uh it's muted at the moment right and uh because I don't really have any use for it other than turning on lights and it sounds like I don't have any more use for it because I might just switch over to this yeah. I.

B

Mean I I would switch over.

A

Yeah for sure yeah I will definitely be uh setting this up later.

B

Yeah yeah, so I mean I have some more demos, so one of the other things that I just talked about like electronics, right that I already showed this board just now, and this is actually like a prototype of something that we built out like a bit more further. But this is the esp8266, so it's like a it has wi-fi and it can run like code, and this is a nfc tag reader.

B

So that way you can scan cards and then have it do stuff in your house and I actually had to set up in my house. I printed these cards. For my kids. These are all songs in either danish or dutch. So this is like the wheels on the bus, and this is like clapping your hands, and so each card is a song and my son.

B

When he was one year old, he could like use these cards and he knew that he could put him on the tech reader and would start playing his song on the sonos, oh nice, and then, of course, later he got into like service vehicles. So I also have like you know the sounds of like ambulances and fire trucks.

B

These, actually I mean these are the dutch fire trucking ambulance, because I'm of course I want him to know his culture, so he has to learn the the dutch fire. Trucks sounds um but yeah, so we actually we made this uh this. This code on this board is powered by like esp home, which is like another open source project with yaml files.

B

You kind of say I use this microcontroller and on this pins I have this a led or a buzzer or stuff and then just say flash and it just works, so we then create like with 3d printing some cases around it. So this is, for example, attack reader and it's like final form, and actually, if you open it up, ah you can see it's just the stuff that I just showed you.

A

B

A little bit more tight together right this, and this is also stuff that we are. uh You know it's all open source. It's all like you can download it in github.

B

But what I want to show now is: let me open um I'm going to the integrations panel, so this is sonos, I'm going to ignore so now, so I'm going to ignore the lyric. So what I want to show you is that we've onboarding is really important for us. So for us, if you plug this in, it needs to work right away.

B

So this one I've already set up before uh to connect to the wi-fi just because it makes it a little easier for the demo, so I'm gonna plug it in now, and then I'm hoping it's gonna show up on my screen. Awkward, let's see.

A

A

Okay, only a couple of hundred of us are are watching you try to oh.

B

That's good, I think when I opened it, I moved it around or something.

A

No worries uh and thanks uh the wendev who's answering a lot of questions. You got a lot of fans in the uh the chat at the moment. Answering questions about home assistant. Oh that's,.

B

Good, okay, so I managed to plug it in: let's go, let's plug it now, so now it shoots when it connects to the wi-fi there it goes boom. It's like hey, I discovered attack reader. Do you want to configure it sure I configure it and finish and it's set up so now we actually have a dedicated tag section in home assistant and so.

B

There you go, I'm gonna, I have one tag here like a card, I'm gonna hold it in front of it boom and you see immediately hey. We scan the tag, that's great. So now you can scan like a card boom. It's and also in the ui. Hey you scan the card, so this is cool, because now we can actually start automating it right if we want to build our own way like a music jukebox. So, for example, we can say this card, which was the the white card I just had.

B

Well, let's just say we call it movie, and so you can actually scan these cards because nfc is also in our phones. You'll, be able to use the home assistant app also to scan these cards and also trigger the same thing in home assistant. So either you can use a tag reader or your phone tap it, and it will do some automation. So now I'm going to do a quick automation with this, so to automate it. It's also super easy.

B

So we just click on the robot and it says: okay, when a tech movie is scanned. Let me just get some more space, um so the trigger is already set. When I scan the movie tag, then the action I'm actually going to a surface. Oh man, I think it's just like ah the oh yeah there. It is my uh the sharing window. Overlay is like just on top of it, but it's gone now: good, okay, um so I'm gonna call service, so I'm gonna call the media player.

B

I got play media, so what I want to do is that I had this google home hub, I just showed- wouldn't be cool if we can like play a video on it right so right now, I'm gonna I already prepared. So here's like we're gonna write some mini ammo. um We still have a lot of yaml, but we try to like when it's necessary for complicated structures, we're actually improving this one. We will show some yaml, so I need like a movie to play.

B

So I'm just gonna quickly, google, the blender has this bug bunny demo. Yes,.

A

I've seen that which is uh so, I went to.

B

A

Talk at um uh last year's uh foster.

B

Okay, it's it's so cool. It's like.

B

I wish more people would like you know. I know there's more software like that. Okay, so I'm just typing this now, but in the future. I hope this can do the ui okay. So that's it! I click we're gonna play media. We're gonna play that video that I just shared on the dev display, I'm gonna click save now. Of course, I'm gonna show my google home hub.

B

Let's see if it.

B

B

There you go amazing, so this just happened just when I was oh, this just happened whenever I just scanned it, but now because now we're playing something we can actually see the on my screen, the dev display. Oh, it makes a lot of noise. Let me just pause it through home assistant yeah. That's amazing,.

A

B

All instant, so even when I click play here, you'll see immediately in home assistant. We know it's playing again and we say okay shut it down and we're back to the screen.

A

Wow this is, uh I mean this is amazing for parents, because uh I know we I I went through the first couple months of the uh the quarantine watching frozen two um knowing that that was going to be the the go-to. It would have been nicest to tap the card or give the card to my daughter.

A

She can tap the card, get that get that going and then because we know that's we're gonna watch that twice a day. So I might look at that out of the way.

B

Right, I have the same with cars, excellent yeah, so yeah I mean this was just like a demo of kind of stuff that people built around home assistant and how it like all smoothly integrates- and you know when there's just so much fun stuff that you can do around this right once you. I think that the the biggest challenge our users have is that everything is possible right and people just kind of want to have.

B

I always have those is the checkbox or automate this, or do that and that's kind of stuff also that that's all obviously also in the pipeline. But it's because everything is possible when you go on youtube, you type home assistant, I mean it goes all over. It's really really cool.

A

That's awesome, so so you just walked through a quick demo on how to get yourself set up on your existing advice. Devices but yeah outside of this are there like? Are there recipes or examples or uh sort of like a one-stop shop, so learns.

B

To create devices or to integrate existing ones.

A

Actually, a little bit of both so integrating existing ones. I imagine if they can connect your wi-fi, then you're you're, halfway there with home assistant, is that correct.

B

Correct yeah, so we actually, if we go to the home assistant website and we go to uh integrations, we have currently 1743 different devices and services that integrate into home assistant, and so I mean there's things like an ikea light or lutron or shelly or plaques or sonos like a lot of different things that are just they have their own hubs and we integrate with that. But then we also have home automation protocol. So you get a bit lower level. So that's the z-wave and zigbee you see at the bottom and to work with those.

B

You actually need like a usb stick right, so you plug a usb stick into your device and then in home assistant you set up the zigbee or z-wave integrations, and then you know it just it just runs and then we go from there and there's like a control panel. You compare, and you know, whenever you set up something in home assistant, you can put it in an area. You can then also make this available to google, home or amazon, so you can control it by voice, um or I mean this.

B

The the possibilities are really endless. Right yeah, which is the challenge, I guess yeah.

A

And the challenge is really just sitting down and doing something which I think this could be a world of like like this. This could be my weekend, like literally this.

B

A

Might be setting up that light outside my room to go red whenever I.

B

Start streaming.

A

B

That's something that we just discussed before we went on air, but in the the home assistant has an app an official app for the mac and it's actually a port of our ios app apple made. This thing that's compatible for both and it's really cool, because once you set up the home assistant mac app, it will integrate and push all its data from your mac to home assistant and make it available, and this also includes when your camera is on or not so all of a sudden.

B

You can start automating hey when my camera goes on automatically turn on my streaming light, so automatically dim the background light. So it looks better for my stream and then also like you were saying: hey, let's turn the light outside of my door to like blink red. So people know they don't or shouldn't enter.

A

Yes, that I, before we went on stream, I think uh uh I have a very little one and they came in the room like probably five times just to look at me, smiling and wave high.

B

But yeah right yeah, that's the that's the biggest challenge, yeah.

A

But maybe the red light would would keep them uh well, they'll probably still come in, but you know all the best laid out plans right.

B

You could set up a motion sensor so that when they pass the red light, it will play a sound on the other side of the hallway, so they get distracted and then turn around.

A

Yeah so there's a um that was actually really funny, but I'm looking at this question. uh Actually it is it yeah, it's a question um things like this, so I see the philips hue and like we know that philips hues needs like. uh Sometimes they need a um a hub to sort of connect, uh the different light bulbs. Well, you also need a hub to connect through the light bulbs. So if you have like, um if you want to connect your home assistant rather than another.

B

A

B

It depends so we need so philips.

B

Hue uses zigbee right under the hood, so there needs to be a place where we could con, where we are able to send zigbee command so either you have the philips u-hub already set up, and then we talk over wi-fi to your philips u-hub and then your u-hub talks to your u-lights yeah or you get a zigbee, stick a usb stick and then we talk to the zigbee stick generally over serial connection just connected to the device and then the zigbee stick will talk to your ulights and actually the benefit of using zigbee directly instead of you is, you had, is an ecosystem right and they are not very friendly to zigbee devices that are not part of their ecosystem, so you're less able to pull data in and they also don't send data to us the moment it happens.

B

So, for example, if you have a motion sensor in philips, u hub, it can take up to five seconds for home assistant to know which is too long right. If you enter a room, the light should turn on right away, um and so, if you have a zigbee stick, your lights can create a mesh network and that's how the data goes to your house, come together with the sensors and all the other zigbee stuff that would not be available inside the philips uhub so generally, philips.

B

U-Hub is a good way for people to actually get into home, automation, yeah and when they start using home assistant, they can use it and then eventually they can decide. Okay, I'm ready for the real deal, and then they go native zigbee.

A

Okay, excellent- and um I guess my my follow-up question would be: is there a place to learn some of these sort of like you have a lot of experience? So is there like a forum or another place where I can get some experience from other users.

B

Yes, definitely so we have a very, very active discord and we have a very active forums. So if you go to our website and you scroll down, then there's the join the community card right here and there's the forums and there's a chat, and then I mean both are really active. So we have you know: there's some people prefer forums. Some people prefer uh chat, so we have both available and yeah it's all. I mean you know. If you look at the forums, it's like third-party integrations installations.

B

Hardware, mobile apps community guides- I mean there's, there's a lot of stuff, so two things that are really cool on our forums. One is share your projects.

B

This is where people are just like sharing new stuff that they are like building like somebody built like a refrigerator monitor and they will share all the different parts and then how they have done it, and then they will also- and this is, for example, an esp home project so that you'll share the configuration and then look and they get push notifications from the home assistant app. For example, if the door has been left open.

A

Right, which is yeah cool- I I love this and actually my original question. I think I was actually asking for this as well. The share your project section, because I.

B

A

I want to basically find out what my weekend project is and just by instead of answering emails and doing work, I want to look through this thing all day right. So the other thing we're doing now is that if on the home assistant.

B

Website um every week and like we, we were pretty bad at it for a while, but now we're back at it. The community highlights so we try to post every week kind of cool stuff that people uh are doing um so I mean this is just like random people that are finding stuff in home assistant that are related to home assistant.

B

Then we highlight like three of them, so this person, for example, made a laundry card that sits in our interface and with javascript is animated to see what the state of your laundry is, and I mean people do so many cool stuff with it. I'm gonna show you how to do some cool stuff with javascript, also in a bit, uh but I mean this is you know, there's a lot of inspiration.

A

Yeah excellent yeah, I'm I'm I'm super excited to learn to see what more examples you have um so yeah definitely take it away. There was one question.

B

A

Real quick um something about home assistant in the support for the chip, the chip.

B

Chip, yes, so chip is a new uh home automation, standard that is being worked on, it's not uh available yet, but we're definitely going to look into it and integrate it. And the nice thing about chip is that this is the first home automation standard which is developing their own open source reference implementation.

B

So until now, for zigbee and z-wave we had to have our own people, or you know, open source developers that built out these infrastructure and with chip, it's actually the companies- and this is like you know, all the big names are behind it, both from like you know, the big tech like apple, google and amazon, but also like philips and ikea and xiaomi, and these companies and they're together building this open source reference implementation that we can all start using. So when we have this integration going, it will be super solid, very bad.

A

Okay, excellent, it's good! It's.

B

Gonna, come definitely um yeah, so the home. This is the home system ui. I already showed it a bit um right like I can turn the light on behind me, and all of this is javascript. Of course it's a browser right, and so we actually use a thing called web components, and so I want to show you how we can actually build our own cards and to do that, I first need an editor and so with home system. I already talked before about how it became like an operating system, and so we actually have different.

B

Besides just home assistant, you can also um install other applications that we have figured out like that also run in containers. So there's a lot of them.

A

I see almost which got mentioned in the chat earlier.

B

Yes, that's uh that's a project by stanford to build out a voice assistant, that's open source and privacy focused um that's b. They just got a million dollar grant from the sloan foundation and they're working and they're getting some developers to like make it better, uh but development has stalled a little bit right now.

B

So in this all these add-ons that you can just install some are like, for example, influx db is a very popular uh metrics database. um There is the jupiter lab. This is for data science, so you can actually, once you install this with one click, you have notebooks that connect to your home assistant database and are you can start? You know, learning from your own data.

B

um The one that I wanted to show a spotify connect is another really cool one. It will actually turn your raspberry pi into a target that you can play spotify on. So if you have, you know how in spotify you have like, which device do you want to play on and there's like shows like chromecast and sonos devices? It will actually show your home assistant, and so, if you connect an audio jack into your raspberry pi boom, you have another smart speaker, but the one I want to show today is the visual studio code.

B

So we all know visual studio code. It's the code editor by microsoft, so I'm going to install it and visual studio code actually uses electron right, which is technology by github, to run it's pretty much a browser with a node backend, and so visual studio code actually runs. Also in a browser.

B

We see that with github code spaces we also make this available inside home assistant, and so we make this available inside home assistant, and then we also automatically configure it with the home assistant visual studio code extension, which is really cool because it sets up an active connection to your home assistant and it will auto complete with, like the latest state and latest entities when you're writing your yaml files.

B

Okay, so I'm going to show it in the sidebar, that's good! I'm going to start it. So this is like a demo that, like I, haven't, really prepared because so we're going to see how it's going to go.

B

A

Are the best types of demos.

B

Yes, so starting the code server, I think it's good. Let me just see if I get visual studio code.

B

There you go, we are in visual studio code, so on the left, you actually see my configuration directory. You can see there's like some configuration already going.

B

So the first thing we're going to do is that we want to make javascript available to our front end, so we actually have a special directory that we're going to create it's called the ww directory and the moment we create a www directory. We have to restart home assistant, so.

B

Let me see we actually have a quick jump in home assistant. So if you want to restart uh home assistant, you can just search for it. Click on it. Okay, so now home system is being restarted, so it also means visual studio code is being disconnected. You can see in the bottom left. Well, my face is on top of it, but the connection is lost, um but it's okay.

B

So in home assistant everything we use what we it's called like: a unidirectional data flow, so in home assistant with web components, every web component passes down the state of the home and we can access this all right. So we're back in action, home system started so now we can actually create a card and I'm gonna walk through this really slow, um but also sometimes a little fast. If I go too fast, definitely let me know.

A

Yeah I'll keep an eye on the chat for you.

B

Yeah, so I'm just gonna create we're gonna, wow, okay, so we're going to create an example card, so I prepared some basic code and I'm going to go through this code. um What I do here is that you know in javascript we can import right and we're all used from writing javascript that goes through bundlers, that we actually import from like node modules, but that's actually not necessary browsers, have native support for imports.

B

So what, in this example, I will import directly from unpackage.com so unpackage.com and we can follow this link and you can actually see this is just javascript. This is going to run in my browser and because there's question mark module in the url. It will actually import all the things it needs as well, so the browser is just going to resolve and just run all this javascript without any bundling.

B

So I'm going to use lit element which is a web component framework. So in lit elements you need to define the properties that are going to trigger a re-render. So in this case has and config are going to be the re-rendering when those are changed, it should re-render. So has is the state object that I just talked about the unidirectional data flow and I'm going to show what's inside in a bit.

B

Config is going to be the configuration for our cart, so we want to create our own card now as temporary placeholder, I'm just going to render hello so that when we look at it we know it works when the configuration is updated, we're just going to store it, this dot config- and this is just a place or order for some css okay. So this is good. Now we have this card.

B

Let me make sure it's safe. You know my keyboard shortcuts work. Okay, so the next step is, is that we have this dashboard, but I don't want to mess with my main dashboard, so you can actually create multiple dashboards, but to do that, we're also going to add custom javascript. So I'm going to turn on advanced mode.

B

So just really quick in the settings. Here's advanced mode. Now I'm going to see more options, some options that we need: okay, lovelace dashboards, so this is our dashboard. So first thing is: is that I'm going to tell lovelace, which is how our user interface is called? Okay, that it should load our card? So I'm going to add a resource, and so I called it examplecard.

B

So it here so now, whenever uh lovelace loads, it will also load my custom javascript great. Now, I'm going to create this. So now it's loaded now, I'm going to create a new dashboard, which I call github demo, um show it in sidebar.

B

Okay, create now there's a second one called github demo. Now it looks the same as the first one, because it's automatically generated. If there's no configuration for your dashboard, we just try to make something of it. um We've recently tweaked it a bit. It needs more tweaking um but yeah. So I'm going to edit this dashboard so take control of your lovely ui. What we're pretty much saying is like listen, we're going to throw away your auto generator.

B

Do you want to keep the auto generated, or do you want to just start empty, and so in this case I will be like just start empty, so that, like I, want everything to be gone so now, I'm in edit mode of this dashboard, and so the first thing is, I need to add a tab because we need to have at least one tab to put things in. So I call this demo.

B

Save so now I want to add a card. So in a home assistant we have a lot of pre-made cards cards that you can just use out of the box and if you you see demos, so there's like an entity's card, there's like one a single entity. There's a history. There's like big lights, there's a markdown card, so you can have um you know markdown. I should write on. Github show pictures floor plans, it's a possibility and all these things are just piece of javascript, of course.

B

So what I'm gonna do now is at first I'm gonna. uh No, I'm gonna add my custom card. That's the first step, so I'm gonna go click on manual, so my custom card. I call it example card right, so I'm just gonna write here. Example: card boom, hello. Great now, I'm gonna add some entities, um I'm actually gonna add some fake entities as well. Just so it looks a bit nicer and I'm going to hit save so now. This is the javascript that I was just editing and it's now available here in my browser.

B

Now I'm going to edit a bunch of other entities that we're gonna. um I want to show that, like we have multiple entities, so I'm gonna have our uh the wemo inside switch. I wanna show it here as well, so you can see that it's all instant, so here's the switch, so I'm going to close it down. So we have my custom card and we have a built-in card and, as you can see, this one just works okay.

B

So now I want to show you how the state object works that we're passing around. So if we look in the console here this you can see it's a ui entities card and because we use web components, we don't need any special browser tools, it's all built into the browser.

B

So if we open the console of this, we can actually see. Oh, I have to have this one.

B

Open, what's going on.

B

Awkward, okay! Well, that did not work as intended. Now I couldn't leave um okay, I'm gonna find a different.

B

Look here we have our object, so this is all the state of our whole home and it has some helper functions like call servers turn something on so the one that we're interested in is going to be of course, states. The state has all the states of our whole house. So, for example, our inside vimo insight switch. We can see the state is off. We can see when the last change last updated, it's identifier, okay.

B

So now we would like to have this state also being shown in our cart, and I actually realized that I'm going to open visual studio code in a new tab, I actually wanna.

A

What's going on, uh mario just dropped in console.log is a way to log the output, see if.

B

Yeah, but it should so the the with the dollar zero. It should take the data from the selected element: okay, just didn't so what I'm gonna do now is I'm gonna. Just for the I'm gonna add some demo lights. By having some uh demo lights, you can actually see. We have yammer validation, yeah. So by having some demo lights, we're going to be able to uh have some lights that are not connected to physical lights.

B

That way, if you're, developing ui you're, not making yourself or your people in your house crazy, so we're going to restart the server.

B

Again, and actually our ui, even though we're offline it will continue to like you, can still look at it like it's, uh we can still navigate around it will just the state will not update until we are back online again. Okay,.

B

So I can yeah, so this is uh so home system is starting. Not everything is available, yet we're back online yep. I can control my lights again so now I wanna actually edit I'm gonna, add my demo lights in uh also in the empties card, and I'm just gonna quickly use yaml for that, because I have a copy paste, ready.

B

There you go so these bottom three lights, they're fake, they don't exist, okay, but they're great, because I can mess with them. You can like turn them on. We can change the colors of them and it all shows in the ui okay. So now we have this custom card and we're already, I had already configured my custom card to pass in the entities I want to show.

B

So all that we have to do with custom cards is that home assistant will set the hash object on it. So if we look at my example card that we have here, if I go click it has, I can see. Oh, we actually have access to the hash object and we have access to the configuration that we just typed into yemo. So we can see it's a type custom example card and we have four entities so now it would be cool to show the state in our custom.

B

Cart right, that's the the goal, so we're going to open my example card. So we know that this is our. uh This is what we're rendering right, and so this is actually using tech template literal. So this is just a javascript, it was introduced in ecmascript 2015 and it will just you know you right inside a string and it actually gets converted to html and it is very optimized in updating.

B

So what we're going to do is I'm going to just very basic I'm going to render a list just because I know that's like you know, that's easy. So what I'm going to do is I'm now going to iterate over our configuration, so I say this.config.

B

and I'm going to say for every entity that we have. I want to render something. So what we want to render is that I first want to. We just have empty ids, an identifier, so we need to get the state so to get the state we just showed it was in this dot states, and so we can just pull it out. So we just say: hey give me the ntid now just a small guard, because we never know what's going on. If no state don't return anything.

B

But if there is anything, then we're going to say render this state. So we want to, of course, render the name which is stored as an attribute friendly name, and then we want to render the state okay. So now we have a list and for every entity that we passed in, we fetch the state we print the name and we print the state. Oh, and let me just close the ally tag. Okay, so now I'm going to refresh this and it should all work.

B

I don't know if I saved it look saved.

A

Oh, you know is.

B

A

Server running.

B

Yeah, I should disable the cache ah there. You go. Okay, we have the state, as you can see, the wemo inside is off bad light, is off ceiling lights on kitchen lights, on cool, let's see if it works.

B

Yes, it instantly updates, because it's all tight right like every time we click on one of these buttons and we actually control a light right. You can even control the real light. It will just tell the card hey. This is the latest uh data, and this is all with the websocket surface. The front end is being kept up to date, instantly whatever happens in the back end.

B

It also actually means, if you have two tabs open with the ui, it will also be instant. You can see it instantly update on, for example, if I have my phone open, it will instantly update if I change the lights. But of course, now this kind of looks meh right. We want to have some cool looking card right. We didn't want to write javascript just to show the state, so what I have some control so to do that, I'm actually going to use this uh framework.

B

It's called wired elements and it's a uh web component framework that you can use to create kind of wireframe, so it kind of looks uh how you like would draw it like, uh and so these are actually also web components. So we can put this inside our cart, so I'm going to do this, and I've actually already prepared the two import statements that I want to use. So just at the top of my file, I'm gonna do paste, as you can see, I'm gonna empower import wired card and wire toggle.

B

So what I'm gonna do first, is that I'm gonna in my html that I'm returning I'm gonna do let's do a card. I'm gonna do an elevation of two. That way it looks kind of nice.

B

Okay, let's see if this works boom. Okay, that already starts looking nicer right, we're getting somewhere now, of course, this card should be as wide as all the other cards. This kind of should fall in place, so that means we have to add some css. So in our css and with web components, everything runs inside a shadow root which means that the css doesn't escape.

B

So I don't have to use any fancy selectors I can just do whatever I feel like it's going to be the selector that is as generic as possible, because it's only tied to the elements that I'm talking about here. So in my case, I want to just take up the space. I want it to be a block right, so the display block okay, great starting to look better now. The other thing I just pulled in was the wire toggle. So that's a toggle like this one, but then it looks like hand-drawn.

B

So that looks a lot cooler, so we have the html here.

B

I know some people are probably going to be upset that my formatting is horrible, but that's uh that's it for now. So why toggle? And so I know it has a check property, so we can just do check equals and then we say if state.state equals on, because that's what we know is the that it's on okay. So now, if I save it and I refresh boom, we have these beautiful toggles a little big, and if I change them, we can see them updating instantly.

B

So this is cool now, of course, it needs to look a little better and they need to work right so to make it look better. I'm just going to turn these into dips, I'm going to remove the state, so it's just going to be name and the wire toggle and then on these divs, I'm just going to say: okay display flags justify content space between so that, like the the name is being pushed to the left and the toggle's being pushed to the right.

B

We're gonna do some padding on it just for the 16 pixels today um and then we want to also make sure the text and the toggle are kind of centered together. So we just do align items center.

B

Okay, so let's see if this is gonna, look a little better.

A

Nice flexbox for the win.

B

Oh yes, okay! I see, I still have the ul around it, because there's a lot of ugly margins, so we're going to remove the ul, that's all from our initial demo, I'm going to remove the h1 okay. So now, let's see okay good, I think the 16 pixels is actually a bit too much. I'm gonna set that to eight I mean it's just a demo, but it needs to be visually pleasing.

B

Refresh okay, this is great and just a reminder. This is not a dev environment right. This is just production, home assistant and we're just kind of messing with text files inside home assistant. To get this all going. So the last step is: is that whenever it changes, we need to uh update right. So we need to listen to the change event, so in lit element, when you put a dot in front of the name, it will set the property, so it's just javascript objects being passed around, so this is.

A

B

Being passed around, this is not actually if we look at the source here, I know it's not very visible um because of the zooming, but there's just a class on it. There's no.

A

Yeah you're not importing like things like react or view to make this work.

B

No, no, no, this is, as you mentioned, web components.

A

B

And so there's, but you also don't see the check attribute anymore. We know it's set there like. We can read it out right and we can actually set it here to be true, and then we see the toggle changing in the ui, because this is how the state works right. We whenever we set the state, it will update itself.

B

So now we want to listen to events, so I know that the wire toggle I'm just going to add some white space here, just for some readability.

B

We know that when the wire toggle fires like changes, it fires a change event. So to listen to events on dom elements we use the add sign. So we just say: okay, when it's being changed, and I actually don't really care about the event, because I know when they toggle it, they want to toggle it right. So then I just can the hash object which gives us the state also had this call service event which I kind of glanced over earlier.

B

So what we can do now is that we say: hey call a service, so we're gonna just use the generic home assistant service parent because they know they will figure out. If it's a light or switch, then we know if the if state dot state equals on, we need to call turn off.

B

Otherwise we need to call turn on and I'm just going to add some more white space, because I could already see this going horribly.

B

A

So the only thing is now.

B

Of course now we would just say: hey turn what what needs to be turned on so home assistant also needs to know what needs to be turned on, so I'm gonna pass it as an object. Options, object to the service call and so we're gonna, say entity id is state dot, entity id good. So now we say when the change event, fires on a toggle call this surface.

B

If it's on call turn off service, otherwise call turn on service and pass in the entity. Id now of course moment. Let's see if it works, so we have this, I'm going to turn it on boom.

B

There you go so we just build our custom. Javascript widget, pull in some custom components that are just being served from the internet, just from unpackaged.com, no bundling or anything necessary, and now, all of a sudden we have javascript that is bound to the physical world through home assistant right, and you can see the moment. I turn on something here below. It will immediately update above that keeps working as well.

A

Yeah, so in I guess in practice too, as well, if you wanted to build your own wysiwyg, your home assistant editor, not editor dashboard. You could also deploy this as well. If you wanted to get this in, like a react, native app or something similar, so.

B

React it's funny. You call react because react actually doesn't work well with shadow dom. So if you want to use react inside home assistant, we generally say use preact, because they they don't have the issue or you build your own full ui. So right now we live in the home assistant front end, and so the home assistant frontal will host your card set up the connection and do all that stuff. But actually it's actually great.

B

You bring this up because you don't have to because yeah we published a library home assistant.js websocket, which can set up your websocket connection, set.

A

Up your authentication.

B

And do it all for you, so I'm gonna actually I'll show you a quick demo. So I have this up on glitch and this is actually 50 lines of code.

B

So it's the home assistant off demo, it's starting up and it's just a static website. It's a static website, and when you go to it, it will be like what is your home assistant instance url.

B

It's already pre-filled in with the default address, which is the address that we also use, so I say, connect to home assistant. Now it will connect, it will actually show a login page on my local home assistant and it will say you're about to give has off demo.glitch.me access to your home assistant instance.

B

Yes, that's what we want, so I'm going to log in now being brought back to glitch. This is the ui and glitch nice. This.

A

B

Not any more home assistant, so now, when we go to my wemo inside, I can toggle it boom and with custom like this is completely custom ui. That is now controlling the light behind me and there's no home assistant ui involved at all. You can do this all completely yourself, and this one is actually really. This is really 50 likes. So if I open the the editor.

B

And we go to the javascript, so this is. This is just a render function of what you saw on the screen. It's really just like it's really plain vanilla, javascript, create element, no framework at all right, just create a button and toggle call the surfaces but the whole uh to create a connection and to set up the whole oauth flow.

B

All you have to do is call like the create con, so you have to um just call home assistant, websocket dot get off and then for it will take care of the whole oauth flow for you and in the end, you just end up with a connections object, and then you subscribe to the entity. So that's what's happening here and let me just zoom in a bit more. If you subscribe to the entities here, whenever new entities come in whenever a state changes you can just render it and then do something with it.

B

So here I talk on my light. New state comes in, but if I go back to my home assistant and I toggle the light here and I go back, I also see it's off right because it's instantly updated. So, even though this is super basic javascript 50 lines of code, okay, 68., um you know it's, it's all instant update and it's just really easy to build stuff.

A

Yeah, nice, uh I'm excited to uh to get my hands on this stuff and you've walked through and folks who jumped into as well. um I didn't interrupt you in the middle of your you're setting up the components, but um we basically got an introduction to home assistant. We got an introduction to documentation and how to sort of connect devices to their dashboard and then uh paul showed us how to build components as well using the connection to the dashboard. um I guess the the socket and um yeah this is.

A

This is amazing, so, like you could you could actually have if I wanted to keep a machine downstairs and connect to the lights like if I had well, I do have two laptops but keep one downstairs and one upstairs and I can still be able to connect to all my devices and I guess the same.

B

A

uh The phones as well.

A

Excellent so yeah, I appreciate you coming through. I don't know if you have any more demos or demonstrations to share. I know we.

B

I can keep going and you know there's just um no. I mean I don't really have anything right now. I think you know if people want to like start playing with home assistant right. If you are more javascript developer, you know you can build amazing front-end widgets.

B

We actually have a really strong community, also around sharing these widgets, and you know, sharing ideas and like building cool cards or, for example, how the solar panel generation and your power usage and how much you give to the grid and like they show that kind of nice in a graph and um the other day I did some. uh I took some svg animation of pulling a chord and connected that to a home assistant, and I mean, if you're into javascript. Definitely you know check out our front end.

B

It's really fun to play with, and I think the the cool part is that it actually controls something in the in the physical world and it's actually also something that is being controlled in your home.

B

um I think actually, that's something I haven't mentioned yet, but one of the things that's so fun about home assistant is that you can actually use your programming skills to actually improve your own life right. A lot of open source work, it's about enterprise stuff, like frameworks, building forms, uh these kind of things and those are fun, but that's only if you're building products for like a lot of people.

B

What's also, what is for me more satisfying is that with home assistant, you're building stuff, that is directly going to improve your own life or the people that live in your house or if it's not improving life, at least it's a lot of fun, um and that's just something that we don't always see right. A lot of open source projects is about the better website making or a better app, and here it's just hey we're controlling lights. It's fun.

A

Yeah yeah indeed, and uh yeah I just I I'm a uh a lifelong tinkerer. I love having little projects like this and like I'm already knowing how easy it was to get your your stuff and the dashboard. Like I mentioned, I already have a bunch of a bunch of plugable lights that I connect to devices just to get lights on and off um simplistic, but I'm ready to actually bypass any sort of future echo devices and going directly to home assistant.

A

For that so uh appreciate you taking the time I did uh send something in chat. Worksafe who's um been super helpful in answering questions to home assistant. While you were chatting, uh they have a an integrated home assistant automation to turn off their spotify when they have a call um so like yeah. If you've got a zoom call.

B

Or encounter invite cool.

A

Stop all music and get go, get the business uh which is pretty cool, so I said that the zoom chat folks, you saw that in the uh the twitch chat as well.

A

uh If you want to check that out- and um the other thing I wanted to mention too, as well since we're here everybody, um this is open source friday, uh we do have a meetup page they're, really the meetup page is just the the focus is so we can easily just tell you what events are coming up next, um if you have a better way to do this, uh I'm all airs. You can find me on bw uh and we can set up some automation or integrations to notify people.

A

We just don't have a really good way to do it yet, and we sort of scrapped this together earlier this year in may had the idea we're all home, we might as well bring open source maintainers to talk about their projects, so you can find out uh what's coming up next, which next week is going to be um maintainer organizational uh level management for like through the octokit herd. uh Octoherd is the actual project uh gregor's. He was here uh back in may.

A

Next week we're gonna talk about automating, multiple repos gregor manages 25, plus repos, and he's just going to share some insight on how to orchestrate the management of all those projects uh he's like the solo maintainer on those 25 repos. So he does automate well, yeah solo maintain everybody has contributors, uh so he will automate a lot of that and they want to talk about the week after that.

A

We'll talk about ai um automation, for testing automation, for visual testing with github actions, uh so um colby will be here to talk about his github action and how he uses that visual testing.

A

uh So those are the two events we have booked so far the next few weeks and then some folks enjoyed mine into michelle's session, where we built a github twitch integration here right on chat, uh we'll, hopefully have it done uh we'll be doing another stream next week, which is not book chat, but it will show up soon uh also shout out to the github the youtube github.

A

If you want to watch this video you'll watch it here on twitch, but in two weeks it goes away, definitely check out the youtube channel and we'll have it posted uh in the next day or so.

A

But any uh final words or words of uh encouragement for our viewers.

B

I mean um I didn't really prepare any like statements, but uh I know just like tinker and have fun. I think that is, uh you know, play with technology. Don't always like feel obliged that it has to be pixel perfect or has to be super clean code like if it works, and you just have it in your house- that's already good enough and that's like a lot more fun and then sharing can be the second step. Just you know, yeah just play and think over technology. It's great.