 Okay, in previous weeks, we were looking at grabbing images from cameras, different cameras, and one of them was the Theta360, which really wasn't that great of a camera. I ended up returning mine, but you can still do 360 photos with most cell phones using the basic Google photo application, and so if you do that or using the 360, you still want to be able to view those images you create, which come off the camera looking something like this. This is one I did a couple days ago with my cell phone, and obviously you don't want to look at them like this. You want to look at them like this, and so you may want to do this, but you may not want to use proprietary software. You may want to be able to share it on your website, that sort of thing. So I created a simple code based on some example code from the 3JS website. So 3JS, here's their example code. I've mentioned 3JS before. It's a framework for creating 3D environments and 3D applications in HTML5. It's open source. It's a great project, lots of examples, and so I used their example, but I've added some functionality to it. Just a few things. Well really, I have a larger project that has a lot of other things that it does, but I've taken the project that I've been working on, and I trimmed it down to the basics, and I called it basic 360. That's basically this example with two things added, well three things added. One, I'll have it so you can add what image you want to load in the URL as a variable. So if you wanted to have this on your website, you can just download it, load it on your website, put all your images in one folder, and then create different links to each one as a 360 view. Another thing I did is when you click, it goes full screen. Does this on mobile devices as well, unless you have an iPhone or an iPad, which do not allow full screen interfaces and web applications as of right now. Pretty much everything, all other browsers have done this since the existence of time, but if you own an iPhone or an iPad, you've got to expect your technology to be a little bit behind, but everything else should function fine. You just won't get that full screen abilities. Also the example on the 3JS website works like this with the mouse, but it does not have touch screen functionality, so my code, I added touch screen functionality using other code from the 3JS website. So let's have a quick look, and today I'm basically just going to show you how to quickly load this up on whatever, wherever you want to run it. So again, my code, if you go to GitHub, my username is metalx1000, so github.com forward slash metalx1000, go to repositories, type in 360, you'll see my theta 360 web UI that we looked over last week, I believe it was, which is just a front end for some Python code someone else wrote, but the basic 360 is what we're looking for today. So what I have to do is download the zip file or grab the URL from here and use get to clone it over to either your local computer or a web host and then just up and run it. But let's go ahead and do that, and instead of doing it on my local machine, I'm going to try something new, I might start using this for tutorials, I'm not getting paid to say this, but I'm playing around with this Cloud9 interface, it's c9.io, and it's a great little interface for working on software projects with other people, you can be interacting at the same time, and the accounts are free, they have paid for accounts, I don't know what they offer, I haven't bought one, I've only used the free one, but they basically give you a virtual machine of Linux that you can run stuff on with limited resources. So what I'm going to do here, I've logged into my account, I'm going to click create new workspace, I'm going to give it a name, I'll call it basic and I think it wants the names to be lowercase, so basic-360, HTML5, 360 photo viewer, and I'll leave it public, and then I'll paste in the URL that I grabbed from GitHub, I'm going to click create workspace, and right now it's pulling the stuff, my files off of GitHub onto this virtual machine and loading up an interface for me to edit, and the interface is a nice looking interface, gives you some error detection, and it also allows you to enable VIM keyboard commands, so it's just like using VIM, which is why I normally use anyway, you have a full shell down here, a Linux shell, and if we click here you can see what the editor looks like, and so it's very easy to use, very VIM-like if you have it set up with the VIM commands, and so with that I'm going to click run, and you can see right down here on our virtual machine it's loading up Apache, and it gave us a URL here, so already this is public on the web with HTTPS, so I can send this URL to somebody now, and it's live, so it's going to load, pops up this little box, I'll explain that in a moment, click OK, and give it a second to load the default image, there we go, and now we have this, which again, so you can send that to anyone, it tries to go full screen, it's asking the first time, do you want to allow full screen, click allow, and so the user will get that message, and from now on it shouldn't ask for this website when they go to this, so this is the default image if you don't tell it what image you want to use, so if I come up here, if I want it to load a different image, let's go back to our interface here for Cloud 9, or again it could be running on your local machine, or any web server you have, I have a folder called IMG, I have two images loaded, the station 24 bay, that's the image we were just looking at is the default, but you can load as any images you want in here, and so let's load this 360 image, so all we have to do now, once you put the image in that folder, I come up here and I can go, question mark, IMG equals 360.jpeg, hit enter, and we got an error, oh sorry, click that was the wrong window, that was the, that was a different project, and that file didn't exist, so we're gonna go again, question mark, IMG dot 360 dot jpeg, and it will load that 360 image right there, so now I can send this link to anybody, and again this is live online right now, now I'm running again a free account through Cloud 9, and I believe I read somewhere, you know I can close out this window and leave now, and this service is gonna keep on running, if I don't stop it before I leave, but I think that if you don't log in for a certain number of days, it doesn't delete the account, doesn't delete the code, but it shuts down any services you have running, so I'm running Apache now, if I close this down, I think it's, it was like a week or maybe two weeks, might have been 14 days, might have been two weeks, if I leave and don't come back, it will, it will shut that down, so you don't want to run this as a full-time server all the time, but anyone can serve a web server anywhere for pretty much nothing, so not really an issue, but this is great again for working on multiple things, so I can invite other people to edit with me if I'm working on a project with them, so that's it, that's all you need to do, your website or your local machine running a web host, which is very very simple, or if you just want to give it a try on Cloud 9 here, you pull down the code and you're good to go, just load up any images you want in the IMG folder and point this to them, to that with this variable, again if there's no variable there, my code pops up my message saying sorry, the tour does not exist, you chose does not exist, click okay and it loads the default image, so that's it, if that's all you care about is running that, if you want to look at the code a little bit more, I'm not gonna go over it very much, but a little bit, basically in the Libs folder we have four JavaScript files, three of them, the detect, detector, the orbit controls and the 3JS are all from the 3JS project, the photosphere is my code, which is based on the 3JS example, so detector is just a simple code that detects, does the device support hardware acceleration, if so use it, if not default to canvas render which uses software rendering, orbits control is the JS file that allows for touchscreen controls, so I load that up you can see they're all loaded up here in the HTML file and then the 3JS is obviously a 3JS framework, but let's go ahead and look at my photosphere, creating some variables here, just want to show you, so for example I can come here and I can scroll down to right here, so we have this alert, sorry the tour you chose does not exist, I can comment that out, save it and then I can refresh this and you can see this time I didn't tell it what image to load and it defaulted but it didn't give that little pop-up message, so whether you want that or not you can easily change that and you can also change the default image right here, so this also my code again checks for the existence of the image so if I put in an image that does not exist so I can say dollar sign IMG equals blah blah blah dot jpeg, it's going to default to the default image since it actually tries to pull that image from the folder and if it doesn't exist so you don't have to worry about errors and that I thought about that when I was creating this code, here's the the function that creates the full screen and again works on pretty much everything except for iPhone and iPad devices at least at the time of recording this, be nice to that change at some point in the future, I would think they would have to but who knows what they do, this is the function that actually checks for the existence of the file, this is the function that looks in the URL, this is something I just grabbed, I've used this for a long time, there's a lot of examples out there for grabbing variables from URLs, this is just one I found that works good and I've used it in a lot of my projects, it just looks at the full URL here and then cuts it up, finds the variable that you pass it and gets its value and returns it so that's how we decide what image to load, the window resizer is a function and again I got over a lot of this in pre-strolls I've done on 3JS but without that if I was to rescale this window it would basically be cropping our image instead of rescaling it since we're using that function for the resize window we still get the full image and again if you click on it it goes full screen anyway, it doesn't cut off or squish the image so that's what that function does, these are our event handlers for mouse stuff so mouse wheel, you can actually with this use your mouse wheel to zoom in and out so and that's actually the function for doing that, our renderer that loads our controls update which is actually our touchscreen controls and that's pretty much it so the whole thing in just over a hundred lines not too bad for a full 3D environment that's basically loading a 3D environment it loads a sphere takes an image wraps it around the sphere puts a camera in the middle of the sphere and then uses your input to move that camera around so I hope you find this useful if you have taken photos with your cell phone or some other 360 camera here is some code that I've modified from other code to make it very basic so just download this code throw your files in it point it to it with a variable and you're good to go so I hope you found this useful and I think if you're watching please visit filmsbychrist.com that's Chris the K there should be a link in the description you also can go to my github again which is Melix 1000 repositories and if we type in sphere here you can see I also have a project called photosphere which is a bit more complex it's the basic same thing but it uses a database and different folders and it has thumbnails so you can create different tours with different thumbnails for each like let's say again I had to kind of design it with realtors in mind it it will allow you to have different houses you will say with different rooms and thumbnails and have realtor information up on the screen so you can look through that it's a bit more complex than the one we just looked at which is basically a stripped-down version of this that I created two months ago so again thank you for watching and as always I hope you visit my website filmsbychrist.com that's Chris the K I actually just redesigned my website recently so check it out also I ask that you like subscribe and share and I hope that you have a great day