Node.js in essence is JavaScript on the server-side. We use it along with the Express module to create a barebones web server to serve files and resources to the browser. I am comfortable with using Visual Studio Code IDE but you can choose any text editor of your choice.<\/p>\n
2. Project Layout<\/h2>\n
Our project’s layout looks like below:<\/p>\n To go about this we need images of an object of interest taken from all around. So, I went about taking such snaps with my phone camera. I renamed each of the 24 images like We start off with a standard template of a standard HTML5 page. Next, we add a couple of index.html<\/em><\/span><\/p>\n Things to note in the HTML are that we have setup the Now onto making it work we need to write some JavaScript. Firstly we preload the images needed for this to work. After that we handle the html5.360.viewer.js<\/em><\/span><\/p>\n On running the application and viewing the page in a browser should look like below:<\/p>\n Now let us build a page where we can pan around panoramic images or 360 degree images. We need to do the following in order.<\/p>\n As for the HTML markup for this feature we start out with a new HTML5 page and name it panorama.html<\/em><\/span><\/p>\n We need to add a bit of CSS as well to basically link up the two ends of the panoramic image. We put the following bit of CSS to our css file, html5.360.viewer.css<\/em><\/span><\/p>\n The background rule ensures that while scrolling horizontally we can view the entire 360 degree view captured by the image.<\/p>\n Now onto a bit of JavaScript required to make it tick. We update the html5.panorama.viewer.js<\/em><\/span><\/p>\n Now, when we run the application and navigate to the URL To run the application and see it in action, you need to run the following commands at the root of the project directory:<\/p>\n then<\/p>\n This wraps up our look at HTML5 360 Viewer Example.<\/p>\n![\"\"](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2018\/01\/ProjectLayout360Viewer.jpg\")
<\/a>3. 360 degree Product Viewer<\/h2>\n
Car360_1.png, Car360_2.png...Car360_24.png<\/code> . The reason for the naming convention will become clearer shortly. I placed the images in folder named, well, images in the project.<\/p>\n3.1. HTML Markup<\/h3>\n
img<\/code> and an input slider<\/code>. This leaves us a Markup looking like:<\/p>\n<!DOCTYPE html>\r\n<html lang=\"en\">\r\n <head>\r\n <meta charset=\"utf-8\">\r\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\r\n<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->\r\n <title>WCG -- HTML5 360 Viewer Example <\/title>\r\n\r\n <link rel=\"Stylesheet\" href=\"css\/html5.360.viewer.css\"\/>\r\n<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->\r\n<!-- WARNING: Respond.js doesn't work if you view the page via file:\/\/ -->\r\n<!--[if lt IE 9]>\r\n<script src=\"https:\/\/oss.maxcdn.com\/html5shiv\/3.7.3\/html5shiv.min.js\"><\/script>\r\n<script src=\"https:\/\/oss.maxcdn.com\/respond\/1.4.2\/respond.min.js\"><\/script>\r\n<![endif]-->\r\n <\/head>\r\n <body>\r\n <h1>WCG -- HTML5 360 Viewer Example <\/h1>\r\n\r\n <img id=\"image360\" src=\"\/images\/Car360_1.png\" \/>\r\n <img draggable=\"true\" id=\"advanced360\" src=\"\/images\/Car360_1.png\" \/>\r\n <input id=\"slider\" type=\"range\" min=\"1\" max=\"24\" step=\"1\" value=\"1\" \/>\r\n\r\n <script src=\"js\/html5.360.viewer.js\"><\/script>\r\n\r\n <\/body>\r\n<\/html>\r\n<\/pre>\n
input slider<\/code> with a min of 1 and max of 24. This is the range of values that the user can slide in. We can then take the current value of the slider and arrive at the name of the image that needs to be rendered. The image tags do not have anything special about them. The first one would be used to display an image that the user can rotate using the slider and the other one will display the same image rotating 360 degrees on its own.<\/p>\n3.2. JavaScript<\/h3>\n
input<\/code> event of the slider<\/code>. We take use the value of the slider to switch to the appropriate image in the cached list preloaded. Then we go about invoking the rotate<\/code> function every 250 milliseconds to make the auto rotate feature work for the second image tag. Now, our JavaScript should look as follows:<\/p>\nvar image360 = document.getElementById(\"image360\");\r\nvar slider = document.getElementById(\"slider\");\r\nvar advanced360 = document.getElementById(\"advanced360\");\r\nvar imageNo = 1;\r\nvar images = [];\r\n\r\n\/\/Preloading images\r\nfor(var i = 1; i < 25; i++){\r\n images[i] = new Image();\r\n images[i].src = \"\/images\/Car360_\" + i + \".png\";\r\n}\r\n\r\n\/\/Event handler for input from the slider as the user slides it\r\nslider.addEventListener(\"input\", function(){\r\n\r\n image360.src = images[slider.value].src;\r\n\r\n});\r\n\r\n\/\/Function to switch out to the next image\r\nfunction rotate(){\r\n if(imageNo === 0) imageNo = 24;\r\n else if(imageNo === 25) imageNo = 0;\r\n advanced360.src = images[imageNo].src;\r\n}\r\n\r\n\/\/executing rotate for the advanced 360 viewer autorotate feature\r\nwindow.setInterval(function(){imageNo += 1; rotate();}, 250);\r\n<\/pre>\n3.3. Results<\/h3>\n
![\"\"](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2018\/01\/html5.360.viewer.screenshot.jpg\")
<\/a>4. Panoramic Snapshot Viewer<\/h2>\n
4.1. HTML Markup<\/h3>\n
panorama.html<\/code>.
\nTo this page we add an image tag with the src property set to a blank and transparent gif file. This leaves us with a page with following markup:<\/p>\n<!DOCTYPE html>\r\n <html lang=\"en\">\r\n <head>\r\n <meta charset=\"utf-8\">\r\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\r\n<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->\r\n <title>WCG -- HTML5 360 Viewer Example<\/title>\r\n\r\n <link rel=\"Stylesheet\" href=\"css\/html5.360.viewer.css\"\/>\r\n<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->\r\n<!-- WARNING: Respond.js doesn't work if you view the page via file:\/\/ -->\r\n<!--[if lt IE 9]>\r\n<script src=\"https:\/\/oss.maxcdn.com\/html5shiv\/3.7.3\/html5shiv.min.js\"><\/script>\r\n<script src=\"https:\/\/oss.maxcdn.com\/respond\/1.4.2\/respond.min.js\"><\/script>\r\n<![endif]-->\r\n <\/head>\r\n <body>\r\n <h1>WCG -- HTML5 360 Viewer Example<\/h1>\r\n\r\n <img id=\"panorama\" src=\"\/images\/blank.gif\" \/>\r\n\r\n <script src=\"js\/html5.panorama.viewer.js\"><\/script>\r\n\r\n <\/body>\r\n<\/html>\r\n<\/pre>\n
4.2. CSS<\/h3>\n
html5.360.viewer.css<\/code>.<\/p>\n...\r\n#panorama{\r\n width: 100%;\r\n border: 2px solid black;\r\n height: 768px;\r\n background: url(\"\/images\/pexels-photo-356886.jpeg\") 0 0 repeat-x;\r\n}\r\n...\r\n<\/pre>\n4.3. JavaScript<\/h3>\n
backgroundPositionX<\/code> property as the user moves the cursor horizontally over the image after clicking the image once to enable auto horizontal scroll. And, of course, once the user clicks on the image once again we stop scrolling on mousemove<\/code> event. Our JavaScript code looks like below:<\/p>\nvar panorama = document.getElementById(\"panorama\");\r\nvar dragOn = false;\r\nvar xPos = 0;\r\n\r\npanorama.addEventListener(\"mousedown\", function(){\r\n dragOn = !dragOn;\r\n xPos = event.pageX;\r\n});\r\n\r\npanorama.addEventListener(\"mousemove\", function(){\r\n var moveX = xPos - event.pageX;\r\n moveX = moveX * 5;\r\n if(dragOn){\r\n panorama.style.backgroundPositionX = moveX + \"px\";\r\n }\r\n});\r\n<\/pre>\n4.4. Results<\/h3>\n
http:\/\/localhost:8090\/panorama.html<\/code> we should see the below:<\/p>\n![\"\"](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2018\/01\/PanoramaPageScreenshot.jpg\")
<\/a>5. Running the Project<\/h2>\n
> npm install\r\n<\/pre>\n
> node index.js\r\n<\/pre>\n
6. Download the Source Code<\/h2>\n