 Okay, we've been playing with the wanzu webcam here We're telnet it into it with a root shell and let's go ahead and look at the camera itself My daughter is still sleeping. She's gonna be up any minute. So I need to finish this video up This is the main view view for most browsers we can zoom in if we need to If we go back to the main directory here, there's a smartphone view which is nice. Oh, she's moving But these buttons are really small You know when you're trying to click them on your smartphone so luckily It's just HTML with some CSS and some JavaScript for the most part Things that I love because it's in my opinion the best way to make GUI interfaces because it's so easy For someone like me as an end user to change I mean I could if I wanted to make a plug-in for my browser here to change stuff But luckily since we have root access I can change out the device because making plugins for a mobile browser is kind of non-existent for Chrome at this point, which is what I use on my Phone and tablet. So as we discussed in previous tutorials, there's a system folder Which has a system folder in it which has a I'm sorry system folder which has a www folder in it which is where all our HTML files are and look at these names It's pretty obvious what they do. There's one here called mobile Let's go ahead and vi into that using vi as a text editor built in on it to the device with busy box It's kind of trimmed down. There's no color coding The tabs are rather large And I just realized that my changes that I've made that we're gonna go over in store already there So I removed those so we can go over them So again, these buttons are pretty small if we look through the file here I'm just gonna look for the word left and right here. We can see some jQuery code some JavaScript Calling something changing the value of the button. Let's go down a little bit further. Here we go We actually have the input. So the button is an input button So let's go ahead and go to the top of the file and search input Okay, there's the up button the left button a Stop button which is commented out. We look like they were gonna have a stop feature for moving the camera And a rate button and the down button and that's it. So good the only input tags in this Interface are the buttons so we can create a very simple CSS line that will modify All the inputs which are just our buttons So if I'm gonna come back up to the top of the file here and somewhere in the header right about here probably What I'm going to do is I'm gonna do style style and Tab and unfortunately the default tabs on the camera right now are huge But so things are gonna be very indented, but whatever and we're going to say input And I can actually write this all on one line because it's So short so we're gonna say look at all the input elements on the page They're gonna say font dash size colon 400% We will save that Now we go back to our web interface. I haven't changed we can even you know Refresh the page and go back in there and they still haven't grown. That's because the browser is caching some of that So it is changing it will eventually change in here, but what I'm gonna do is I'm going to go ahead and open up a Incognito mode so it loads everything fresh. I'm gonna go to that and Log in and I go to smartphone you look our buttons are way bigger now That's gonna be a lot more convenient on our Little cell phones And they also are kind of stacked. They don't need to be that low because I'll have to scroll down to get them So let's move them around again very simple since everything is plain text because it's just HTML we're gonna come down here and Let's see We have our up Let's go ahead and just Remove this remove this Just go ahead and save that. I'm kind of playing it by ear here. Oh This is not our incognito mode Refresh this Going to oh it moved all the way up there. So let's go ahead and actually Undo that and unfortunately undo is not implemented on the camera. So I can't undo changes That's what I get for deleting stuff instead of commenting stuff out. Oh because that's it I wasn't seeing that TD tag at the end there. Let's go ahead and move that and Go ahead and go back into here go back in again Stuff I'm not seeing on the side of the screen there There we go So now we have very easy left right. They do work I'm not going to click them because again my daughter sleeping right there and she can hear the camera move if I move it But they're all much larger buttons all in a row So they fit onto the screen and I can open up on my cell phone and easily click and move the camera And the great thing about this is we can change Anything and any of these interfaces because it's just plain text And since we have root access we can do it directly on the camera rather than you know pulling down firmware and trying to extract the firmware Making the changes there recombine the firmware uploading it to the device and being afraid that we just rooted sir Brick something So there we go. That was a simple change Just you know removing some of the the table tags there But you can also change things like up here. We have this image, so I'm going to do something go Open the image in a new tab There we go, and I actually gonna let's go ahead and save as I'll save it to The temp folder sure now I'm going to open up GIMP. I'm going to open up that file So right there I can go ahead and let's go ahead and just change the color of it. So I'm gonna go You in saturation which is not going to work because it is set to Image mode is index. So yeah, you're very limited. I want you to change. We'll change it to RGB now. I can change the hue and saturation so I can go like this and I can make the writing red and What I can do is I can save this and put it back on the device the problem is since we remove the indexing It has more colors in the image which is going to increase the size dramatically from like a couple of kilobytes to Half a megabyte which doesn't sound like a lot, but when you have no rumon device That causes some problems if we were to import actually let me undo a couple of things Okay, so we're back to the original image and just give me a second here. I am going to Find a photo of something let's see I'm gonna say Tux Linux and do a Google image search So images prefer an actual photograph To show you more about what I'm talking about. So let me go into my personal photos here My Google plus photos. I'm doing everything on a second screen here. So yeah, here we go perfect file save image as Okay, so I'm gonna say open and here is an image. I just got of my daughter laying in her bed perfect, right? Because the camera is watching her lay in her bed. So we just got this bed the other day She's very happy to have a new bed and so let's go ahead and replace this image With a trimmed down version of this image. So first thing is the original image is a width of 960 that's still gonna be pretty slim. So what I'm gonna do is I'm gonna put this Image down to probably half that let's go with We'll just say 500 Okay Scale it copy it and I paste it over here in right way. You can see the colors on or facing everything are messed up That's because of the limited colors in this image So I'm gonna control Z to undo that and again, I will go into image mode and change the RGB I'll paste an image and now the colors are correct. So now I'm gonna move that over here and Then I'm going to actually go to the background image here anchor this down So I'll say Two new image two new layer In the background layer. I am going to just Oops Switch that filled in black. So now I have this new image of ember. So I'm going to export that and I'll call it Logo head to dotgif crop the image Blah blah blah export. Okay, so now I can close close gimp and if I go into my shell here and I moved to my temp directory So again bottom screen here is The camera top screen here is my desktop. You can see we have our two logo images here if I list out with the file size logo header We'll go ahead you can see the original one Is 2.9 kilobytes where the one with the full colors is 25 kilobytes I could fit that on the camera, but we're already very limited on the space on the camera So what else could I do to Get this image up there without having to put it on the camera Well, we could use a service If we go to a website such as imgben.org Of course I put an image here It could be deleted whatever in the future It doesn't really matter because I can always change it again in the future if you have your own server perfect What I'm going to do is I'm going to choose the image of my daughter. I'm going to upload it I'm going to say keep it there forever and click upload Now I can right click and say copy image url So now instead of putting the image on the device as long as whatever device I'm looking at it my desktop lab top camera phone or tablet If it has internet access I can access that image. So Let me go ahead and save that view and I'll clear the screen here and we'll list out again Index one is the main page. So when we're In This browser here We're at this main page it says index dot html But we're actually looking at index one because everything says index dot html So I'm going to vim index one dot html Not vim because there's no vim on there vi And I'm going to search in here for dot jp our gif And what I'm going to do is I'm going to Erase that source And replace it with the source online. It doesn't matter that it's not on the device The web page can grab an image from anywhere the web pages do that all the time So I saved that and if I come back in here and refresh the page There's a picture of my daughter at the top as the head banner I would have to change that and other things if I go in here It's still that because if we didn't replace the image on the device we just replaced what the page is linking to So anything all these buttons down here these buttons the background image anything that's an image We can link to any image on the internet as long as our device that we're viewing it with has access to the internet So that's a way where you can you know upgrade the Quality of the banner or buttons on this device even though you're very limited on space But again, you can also compress the image down and copy it over to the device Since we now have the full version of busybox on there. We can use w get to pull images down We also have the ftp server that we originally used or sorry ftp client that we originally used You also have netcat that you can transfer files back and forth with now that we have busybox on there We have multiple options to get files on the device. We're just very limited on the space on the device So So I showed you a few different things here I showed you how to change the buttons by changing some of the css remove some of the html tags Because we want everything on one line And we also linked it to new images again for the banner So if I again go back here as might are up there all I have to do is go into this file And I can relink that html file to the new image And as we can see her start to move getting ready to wake up I'm going to bring this tutorial to an end as always. I thank you for watching Be sure to visit my website. That's films by chris.com chris with the k There's a link to that in the description as well as notes to everything we've done in this tutorial and in this series So be sure to check out those links Be sure to like subscribe comment share this video all that stuff helps But also if you've appreciated these tutorials Consider becoming a patreon supporter over at patreon.com forward slash mill x 1000 every little bit helps And um, I appreciate it. So thank you for watching and as always I hope that you have a great day Okay, this is an introduction to films by chris.com I'm chris. That's chris the k That's me right there my daughter ember And my wife jennifer We pretty much live in the swamps of florida I'm a firefighter by day as well as by night. We work long hours But that's not why you're here. You're here about the videos I put up on youtube These videos are mainly about computers And programming which means most of my videos look something like this And if that's what you're interested in great if not, that's all right I do videos on other topics too such as video editing special effects photo editing 3d design and music creation If you are one of my viewers and you enjoy my videos my patreon page is a place where you can go to help support my videos So I ask that you take the time to go to my patreon page and look at different levels of rewards You can receive four different levels of backing. There should be a link in the description of this video if you were watching it on youtube Otherwise, you can visit patreon.com forward slash Metal x one thousand and I thank you for your time And your support Have a great day