The Big Elixir 2022 - Ambitious Applications with LiveView - Josh Price

great so uh this is my live view story or how i came to build a flight simulator in live view that's my twitter handle and github if you want to say nice things so i run a company called alembic in australia um i have to convince my wife on sunday night to come here and do a 10 day trip so please like uh you know say nice things this was my trip so on wednesday i flew out from sydney to la and flew in here actually before i arrived um it took me 27 hours so you know i win the prize for being the furthest away great but what is the prize no one knew that it's jet lag so i woke up at five this morning to do this talk um so yeah how did this come about there's a man that i know is a good friend who is part of the elixir community in sydney he had done this thing called the uav challenge before it was like a medical rescue with autonomous drones and we had this crazy idea that we could build the ground station with multiple laptops and tablets and all that kind of stuff with live view so that sort of started us thinking um this is him actually doing that competition and it turns out that covert got in the way of the the competition we were trying to enter and they've candid forever so what we got out of this was the flight simulator and live view so in order to sort of create a deadline driven development um phoenix frenzy came up in 2019 they haven't done it since bit of a shame but i decided to see if i could do a flight simulator to make use of some of the ideas that we were working on so yeah it actually took me a couple of weeks but it turned out simpler than i thought it was going to be most of the work i was doing was wrestling with javascript and patching live view because the docs were a bit rough so i try to make them better so these are the bits in the flight manifest these are all the bits that we need so first of all i had to build the world's simplest and kind of dumbest flight simulator so there's no physics there's no linear algebra because i did that 20 years ago and i've forgotten all of it and there's certainly no quaternions which if you've ever done a flight simulator and you point right up and you start spinning around in circles that's what you need quaternions for they're basically four dimensional uh vectors so that you don't have this crazy uh thing at the top where you spin around so all we ended up using was just triangles high school trigonometry a couple of neat hacks and a little bit of a dream so the first thing that's important is the live view part all that turned out to be was just mounting it and handling keyboard input we needed a couple of instruments in our instrument panel so the first one was an artificial horizon i was like yeah you can sort of show pitch and you can show the role of the plane so that's cool um we have a compass as well to show which direction we're heading in and both of those i just did in svg and i'm pretty bad at using drawing tools so i actually draw things in xml nice um yeah so we also needed a map and i didn't want to reinvent the wheel use that in my view so we hook out to um i did use leaflet and then last night when i tried to re-jig this for the latest live view and update it from three-year-old code leaflet just exploded map tiles everywhere and i was like oh my god what am i gonna do so i woke up at five panicking going how's this going to work how do i put all the tiles back uh the answer was google maps don't use leaflet it didn't really work so the map showing is the lap and the long and the heading and we've got a little airplane icon that we can spin around and finally it's a little bit of an extra is i want to see out the front of the plane um so i found a little javascript library which did that too so is this going to work well i had no idea so we went to find out and it actually turned out all right so let's look at some code and then i'll see show you the uh the alpha the outcome all right so first things first this is the live view can everyone read that code because i'm going to scroll around awesome so all we need is a live view we've got a couple of things we have the initial state we just need a lap long i'm starting in sydney airport because that's where i started this little journey and i'm pointing down the main runway so that's the bearing straight down the guts so we're ticking every 30 uh milliseconds no we're doing 30 frames a second um so that's pretty good um i'll have the link for you but you can run it yourself it's sitting on google elixir on the lowest plan it works pretty well so yeah we mount up and we start the timer ticking every 30 frames a second and then we set the initial state so all this really is is ticking along and doing an update every tick and then we're just handling input so for everything here we're calling out to the flight simulator so we can go up and down change the speed roll pitch all that kind of stuff so all these things look the same roll left roll right pitch down pitch up you get the idea so let's have a look at the flight simulator so i thought this was going to be really hard um but actually turned out to be pretty simple just doing high school trigonometry so these are all our sort of constants so we can jiggle those the main data structure there on line 33 is just we've got bearing we've got altitude we've got the pitch angle that's up and down for a plane and the roll angle that's going banking left to right how fast we're going and the location we're at uh i've got a little bit of a reset function there because in case you're way up we can just press spacebar and it'll just reset you back gently that's the reset factor and then all of these are just you know update the struct um you know when we change anything so that's pretty self-explanatory oh yawing is where you change the router and you're turning left to right but you're not banking banking the plane um you can go read this afterwards these are all sort of dock tested uh in the repo it was kind of nice because it was kind of pure functional stuff so we do an update so that when you do a tick you can update the location of the plane and we change the bearing based on how much you're rolling and there's a little function down down below to work that out if you're pitched up you're going to go up and change your altitude every tick and you're also going to be moving forward and there's a bit of trigonometry to figure out how much you move forward depending on whether you're going up or down so simple maths what's the next function update the bearing so we just make sure we're wrapping around if we're doing that so when we go negative we add 360 to it i'm not sure why we do degrees to radians and radians to degrees there's probably a reason three years ago code uh altitude we just i have no idea why we divide by one i'm assuming that's probably to turn it into a float but guesses all we do is take the max and off we go ground distance is depending on what angle we're going we're trying to figure out how fast we're going across the ground so a simple cosine tells us that um sign for the altitude delta as well how much are we going up or down um now this was kind of cool so there's a hack because i'm not doing any physics when you roll there's nothing really turning you and a plane will actually have lift and turn around so there's this little hack that i found at this url to basically figure out given a banking angle a kind of rule of a rough rule of thumb that doesn't quite work for every single speed but for basic all of the speeds it will give you a good how much you turning for how much you banked so that's a little hack right there um some weird constant times some other weird constant and a tan and we're good if you actually care how that works the url is there so yeah the rest is just um the final thing is updating the location because we're dealing in lat longs and because we're going around a sphere it's not that simple so i grabbed a library called geocalc that does a great circle arc because you're going around a sphere so basically we're saying how far if we go this far um in this direction where do we end up as a lat one so cool that's all it is um and then templates so i re-jig this to use function components i wasn't using that before and that was a bit of a mystery i think function components would have saved me some time but see that span there that's basically where i'm tracking all of the data and there's not much of it as you can see that the javascript library are going to use the map and the cockpit view and we've got a hook there so every time that updates we call some functions in the javascript to do the update now all we've got here is some simple function components like i said the artificial horizon the compass and the two javascripts mapping and the things so these are all just really simple tailwind styled function components yeah there's nothing really much to see here we grab keyboard input and we're rendering the children with a slot the default slot it's called the inner block if you haven't seen that um yeah and all we're doing is just laying out all of these instruments in a grid nothing too fancy for the map and the cockpit view we have to sort of set the size otherwise it doesn't show up yeah this is my attempt at drawing what you'll see in a minute so i did that by hand it took me a few hours but i find that easier than drawing a drawing tool because i'm a nerd awesome so what's next um these are the hooks so if you haven't used hooks this was kind of an experiment to see well how good is the javascript integration turns out even three years ago it was pretty good so we're calling in some maps we'll see that in a second i've just got a little function to remember that span where we're putting all the data this just extracts that out in a nice way i could probably use data set there i found that out the other week and then we set up the hooks we've got a mount and an update for each one so one mount for the map one mount for the view and an update for each as well so really nothing too fancy going on there and i'm nearly done i'll probably just show you the map because that's interesting oh don't don't look at that so what are we doing here um basically it's getting the position setting up a map disabling all of this stuff because we're going to manage it and adding a little plain marker and that actually turned out to be pretty reasonably easy in google maps when i was doing that at seven o'clock this morning so yeah it worked out pretty well um yeah and when we update we just update those things and i've got a little plane drawing there that i already had and what we have to do is rotate that so we're updating the rotation of the icon as well to match our bearing so that's a cool little hack i think you've seen enough code who wants to see it running all right here we go so i'm going to hit escape and that sets us back at the start of the runway all right let's take off all right we're going as fast as we can let's go and let's oh let's bank this way let's go see sydney harbour so that's live view flying a plane [Applause] you

Channel: The Big Elixir

Views: 2,644

Keywords: the_big_elixir, elixir, erlang, phoenix_framework, liveview

Id: 1vvvJkwzf5I

Length: 13min 8sec (788 seconds)

Published: Fri Apr 29 2022