 Okay, again, this video is part of a series. Be sure to check out the link in the description of this video or at the end of this video. For the full playlist, I do recommend watching the previous videos before watching this one, but you can do whatever you want. So we've been working on transmitting information through airwaves, through radio waves, through using audio communications. Again, the scenario here is you are working for emergency rescues, either firefighter or EMS or something along those lines. And your normal forms of communication, the internet, are down. This happened to me. I am a firefighter. This happened a couple of months ago when Hurricane Irma came through through the storm. We lost internet, which normally we have computers in the truck that tell us where we're going. You know, it gives us the dispatch information. Again, our regular radio system went down, which uses the towers around town, but we still had some radios communicated directly to each other. And the way they set it up is there was someone dispatching. They'd call one state, you know, call over the radio and the closest station could hear them and then they would transmit over to somebody else. And that's great, doing it verbally, but it'd be great if we also had that digital, that computer interface so that, you know, we don't have, if we're writing stuff down, we can also confirm on the screen that we're seeing the same thing if we wrote down the address wrong or the computer showing wrong information. There's two forms of those communications, plus you can back reference what you've been dispatched to in case you didn't hear something on the radio. You missed something. You can look on the computer and confirm that address over the radio. So that's what we're doing. Last video, we did it with the shell interface. This time we're going to do a GUI interface. I'm going to still do a shell interface for the dispatch, but as far as the client, the truck's out in the field, they will have this relatively nice GUI interface right here, which is written in HTML with a little tiny bit of JavaScript. To get this code, go to github.com forward slash malix 1000. There should be a link to that in the description of the video. Go to my repositories and then search for radio and you'll want the one that says radio transmissions. All the scripts from this entire series should be in here, mini modem, morse code. Last time we did server one, now we're going to do server two. So that's the code here. You can see we just have a couple of little scripts here and you'll want to download that either clone it using git or download the zip file and unzip it. I'll be using Debian Linux for both my clients and server here. And the client will have to have busybox installer system, which is very simple to get. You can use your package manager if it's not already installed, but busybox is very simple to get, you know, just sudo apt install busybox, okay? Busybox is a small binary application that actually has a bunch of core programs in it. There's a list of the programs right here that they have built in and of course you can trim it down to have just a few of those and it's something that runs on pretty much everything. It probably is already on your TV, your router, your modem and your phone unless they're using toybox, which is a similar application with different licensing, but go ahead and have that installed. Once you've downloaded the code from GitHub, you're going to want to move into the server to folder, which I am here. So here we're going to have the top screen, bomb screen, there's both the same computer but we're going to pretend for right now that they're two different computers and in a later video we will demonstrate it communicating between two different computers over radio waves using different types of radios. List out here, you can see that we have our CAD file, which if you watch the previous video is our file in, file out and we'll see that in our dispatch code. And actually that's real quick, let's just look at our, oops, our dispatch code and you can hear, you can see our CAD file, we're creating it here and we're dumping our transmission message, which is received here. Nothing has changed from our client to, I'm sorry, from our last project to this one, besides the fact that I removed the new line character, these equal signs from the, from what's being transmitted since we're using JavaScript that's pulling things apart and displaying it, we don't need that line to be displayed. So that's, I think that's the only difference is that I removed all these equal signs from being transmitted. That's it. So let's go ahead and quit out of that. So we already looked at that code, let's see everything in action. First thing we need to do, first of all I'm going to, well I'm going to try to start server which I actually think I started before I started recording the video and it will tell me, yeah it says the address, which means it's already running or you have another server running on that port. But I will go ahead and kill all busybox and now I can try running that script and this time we'll say, starting server, server started and it will give me an address here, I can right click that and say open, it's a local host. So there we go, you don't need internet access for this, you don't even need a network for this because you're just looping back to your current computer through a virtual network device. But that's it. Let's go ahead and look at that code real quick, our start server, let me do it in Vim so it looks a little nicer. It says bash script, it says starting server and then we're going to start busybox's web server, the HTTPD on port 8080, the reason I chose 8080 because 80 might already be used by another web server plus you don't need special permissions to run something on 8080 on most machines. The end and the ampersand here is saying if this command is successful then we're going to echo server started on this port. The pipe pipe, two pipes like that means if this command was unsuccessful it says server failed to start, so that way you know whether the server started or failed to start and the fact that the port was already being used is already being put out by busybox there. That's it, it's basically a one-liner besides the message saying starting this, this is really the code right here, the rest of this is just output for the user letting you know it was successful or not. So our server is running in the background now, let's go ahead and look at what our programs we have in here, we have our HTML interface and we have our client, let's go ahead and look at our client, let me make this full screen here Vim client and all we're doing is basically the same thing as last time, we're saying you know our server, we're listening for transactions and this time instead of using T and displaying it to the shell we're just dumping everything in the file and really we could do both, we could have it go to the shell output and then also to the web interface but I chose not to do that when I wrote this mainly because I wrote this before I wrote the shell interface but really the code from the from last project would work the same because it's being dumped to the file and the HTML is just checking that file and then of course we have, well we already looked at our dispatch code so let's look at our HTML code here actually let's let's run this first let's do this so that we can see so down here I'm gonna start up my dispatch and then up here I'll start up my client whoops there we go so down here we have our dispatch it's waiting for me to give it information on units I'll say engine 24 and when you download this code I probably have some sample data in there I removed everything but one so you can see this is what each call is going to look like so this is an example one what engines are being dispatch displayed here your street name your address is the biggest thing because that's the most important get going there figure out why you're going there later but who's going where you're going why you're going and when you were told to go so that is basically the same information you saw before only instead of in the shell it's in a nice little GUI but now it's waiting for more information to come in so I can say engine 24 medic 24 I can say that you're going to 555 19th Avenue Northwest and I can say that this is a signal 7 and I'll go ahead and enter so you saw it actually unlike our shell which displayed everything after it all came through our HLL here tries to display as it comes through it's checking every I forget how many seconds I said it to we're gonna look at the code here in a minute every second I think it was it looked like that so every second it looks at our dat file our data that file for whatever is in there and right now I have new calls going to the bottom of the list so you get a lot calls you might have to scroll down again this there you might want the newest calls at the top or if you're going to put them at the bottom have it automatically scroll to the bottom when new information comes in which could be annoying if you're trying to look at something higher up and new calls coming in it's going to start popping you down to the bottom anyway that's something that if you were to use this you would figure out you know what works best for your system let's go ahead and send another message so I'll say engine 47 ladder 47 engine 40 squad 40 say 1414 Oak Street and we'll say fire in attic so again here we should start there we go it came through eventually you can see that it's displayed right there next on the list so let's go ahead and real quick we're going to look at two things here I'm going to kill both these programs our servers still running right now just so you know so we don't need to restart server although if we were to try to restart server it would tell us that it's already being used let's real quick look at our dat data dot that file was just a plain text file which looks like this and basically our JavaScript when we look at here in a second is going to every so often look at this file and break down line by line and then separate it by these pipe symbols so unlike last one if you were to put a new pipe symbol in there it was if dispatch was to put a pipe symbol in their dispatch again it would just mess up the formatting a little bit but it's not going to to make it unreadable anything in fact we'll give that a try but real quick let's look at our index file we've got basic HTML header stuff here and I just realized something that should be changed for sure and I should change that anyway we give a title here here I am calling some coders calling jQuery and bootstrap from the internet I shouldn't be doing that this whole scenarios the internet's down I need to download that and put it in a sub folder of the server that's all I need to do so I just need to change that code it'll work exactly same except for trying to grab that stuff from the internet it's going to grab it from your local machine so I do need to change that but that's that's simple enough I'm not going to do that on the video here because I'll waste your time here we got some CSS all I'm doing here that 10 that's just putting this little space in between each box without that these boxes are going to be you know touching each other and I thought that looked bad so I put 10 pixels in between each of those boxes down here is our body so basically we're making a body with then we got a div tag that's the container and then we got our rows which has the ID of cards coming up here we got here we got code saying wait till the page is done loading and then run the fun function get data and then we're gonna say here every 1000 here means one second every second run this function and what does that function do it's our only real function here well function standalone it's not inside this function we're saying get so we're gonna get information from this file it's saying look at the dat file return everything in there as a variable called dat and then take that and make it an array based on new lines so each call is on a new line then we're gonna say look at our cards div tag which was down in our body here and here I'm saying just clear it out make it blank there's actually I'm pretty sure there's a clear command but I usually just do HTML and give it a blank blank information there but basically we're clearing it real quick and this may call if you have hundreds of calls coming in that could cause problems because you'll see the screen flash as it's probably reloading them but in reality I if I was to use this code in real life I would set this so that it only returns the last 20 or 50 calls I probably wouldn't do more than 50 unless the user requested it but for example here we're gonna clear the whole screen and reload it real quick simple enough here so here we're gonna say in our array of data which is each call is a new item we're gonna say for each of those we're going to put it as a variable called D and then we're gonna take D and make that an array based on the pipe character so if you remember our each line was a new call and then each call had a block of information divided up by pipes the everything before the first pipe is going to be the trucks everything after the first pipe is going to be address everything after the second pipe is going to be our notes and then our timestamp is going to be the you know fourth column or everything after the third pipe then we're going to check here is the address undefined because when it's doing this the last line of the file is always going to be blank so you get basically a call that just said undefined and I'm just doing this so that that doesn't get displayed I'm sure there's more than one way to do this so basically no matter how many calls you have this code here is going to be looking at each line and the last line is always going to be empty and we just don't want to display that so as long as that's not empty as long as there's an address being transmitted it can even be blank just as long as it's not undefined if as long as it's not undefined we're going to put this HTML code into our page into our cards div tag we're going to you know sets column width to 12 we're also going to give it a class of output that's what gives us that's just basically for that 10 pixel separator that I put in the CSS there but could be used for other things in the future if you wanted to filter this list you can filter all the outputs based on something we're going to have a class of card and then we're going to give it a header which is the trucks and then the title for it is going to be the address and then the text for the card is going to be notes and time and then we're going to close all that up and then I actually put some line breaks in here just for spacing and that is our entire code really simple so basically again we're just going to get the information from this file split it up line by line then we're going to clear our page really quick shouldn't even see it unless again your output is a lot then for each line we're going to split up each item in the line and give it a you know sign it to a variable and then display it on the page that's our entire code and that's what will give us if we here start up our dispatch again and up here start up our client code and down here I can say let's engine 23 medic 23 444 Palm Street South and here we can say fall from roof someone was up on their roof door and storm it got blown off I guess since we're talking hurricane scenario go ahead and transmit that come back here to our output here and we should get the output on the page here go ahead and troubleshoot this by open up network oh there we go I don't know our it seems like if we leave the page for a while our timer tends to take a while to get restarted but it does eventually come through and worst case scenario you can always hit f5 to refresh the page but they should be coming in and that's basically it again you know in real real-world scenario if you want to use this you'd probably limit the number of calls are displayed and maybe filter it by trucks so so I can say hey I'm engine 24 by default only show calls that contain engine 24 and again I'm using the get command checking every second in real life you could set up a socket server and grab this information real-time but it doesn't really need to be real-time every couple of seconds is fast enough you know so again this part of series trick be sure to check out the full oh you know real quick let's hear engine 22 let me do a pipe symbol here and say medic 22 and then give it an address of 123 apple drive notes this is a test and this in this case it will mess up our formatting a little bit and actually our nights notes might be cut off so let's go ahead and do this so here you can see at our last call here down at the bottom our our truck first truck is there our second truck is where the address should be our address is here our notes are here and then our date is not there so this is a little more important that the dispatcher in this case knows not to put a pipe symbol in there because if they put a bunch of pipes it's gonna cut off a bunch of information of course you could add to the dispatch code to remove any pipes that the user types and that's the best case scenario don't put it up to the user to to not put pipes in there mode I usually use pipes for this because besides programmers and developers normal people don't use the pipe symbol they don't even know what it's called or where it is on the keyboard but just in case the dispatch code could add in to check each variable and remove any pipe symbols that are in them so again this is just example code proof concept to get you going it's up on github gpl license gpl 3 so be sure to check it out I thank you for watching visit films by chris.com that's chris the K there should be a link in the description of this video there you can go to the support section support me through patreon.com forward slash metal x1000 that links in the description of this video as well or through PayPal I do thank you for watching if you enjoy this be sure to like share subscribe and comment I appreciate you watching as always I hope that you have a great day