chore(demo): update examples

Ref #226
naver · Aug 3, 2018 · c75d493 · c75d493
1 parent dd9f4a7
commit c75d493
Show file tree

Hide file tree

Showing 13 changed files with 76 additions and 27 deletions.
diff --git a/demo/examples/change_direction.html b/demo/examples/change_direction.html
@@ -9,7 +9,7 @@
     <link rel="stylesheet" type="text/css" href="../common/css/main.css">
     <link rel="stylesheet" type="text/css" href="../common/css/example.css">
 
-    <script src="../release/3.0.0-rc/dist/view360.pkgd.js"></script>
+    <script src="../release/latest/dist/view360.pkgd.js"></script>
     <style>
     #myPanoViewer {
         position: relative;

diff --git a/demo/examples/compass.html b/demo/examples/compass.html
@@ -9,7 +9,7 @@
     <link rel="stylesheet" type="text/css" href="../common/css/main.css">
     <link rel="stylesheet" type="text/css" href="../common/css/example.css">
 
-    <script src="../release/3.0.0-rc/dist/view360.pkgd.js"></script>
+    <script src="../release/latest/dist/view360.pkgd.js"></script>
 
     <style>
     #myPanoViewer {

diff --git a/demo/examples/cubemap_image.html b/demo/examples/cubemap_image.html
@@ -9,7 +9,7 @@
     <link rel="stylesheet" type="text/css" href="../common/css/main.css">
     <link rel="stylesheet" type="text/css" href="../common/css/example.css">
 
-    <script src="../release/3.0.0-rc/dist/view360.pkgd.js"></script>
+    <script src="../release/latest/dist/view360.pkgd.js"></script>
     <style>
     #myPanoViewer {
         position: relative;

diff --git a/demo/examples/cubemap_video.html b/demo/examples/cubemap_video.html
@@ -9,7 +9,7 @@
     <link rel="stylesheet" type="text/css" href="../common/css/main.css">
     <link rel="stylesheet" type="text/css" href="../common/css/example.css">
 
-    <script src="../release/3.0.0-rc/dist/view360.pkgd.js"></script>
+    <script src="../release/latest/dist/view360.pkgd.js"></script>
     <style>
     #myPanoViewer {
         position: relative;
@@ -30,7 +30,7 @@
         <a href="./">
             <h1>PanoViewer examples</h1>
         </a>
-        <h2>360 Video (cubemap)</h2>  
+        <h2>360 Video (CUBESTRIP)</h2>  
         <p></p>      
     </header>
     <section>
@@ -55,19 +55,11 @@ <h2>360 Video (cubemap)</h2>
     var panoViewer = new PanoViewer(
         container,
         {
-            projectionType: "cubemap",
+            projectionType: "cubestrip",
             video: videoEl,
             showPolePoint: true,
             cubemapConfig: {
-                order: "RLUDFB",
-                tileConfig: [
-                    {flipHorizontal:false, rotation:0},
-                    {flipHorizontal:false, rotation:0},
-                    {flipHorizontal:false, rotation:180},
-                    {flipHorizontal:false, rotation:180},
-                    {flipHorizontal:false, rotation:0},
-                    {flipHorizontal:false, rotation:0},
-                ]
+                order: "RLUDFB"
             }
         }
     );        

diff --git a/demo/examples/equirectangular_image.html b/demo/examples/equirectangular_image.html
@@ -9,7 +9,7 @@
     <link rel="stylesheet" type="text/css" href="../common/css/main.css">
     <link rel="stylesheet" type="text/css" href="../common/css/example.css">
 
-    <script src="../release/3.0.0-rc/dist/view360.pkgd.js"></script>
+    <script src="../release/latest/dist/view360.pkgd.js"></script>
     <style>
     #myPanoViewer {
         position: relative;

diff --git a/demo/examples/equirectangular_video.html b/demo/examples/equirectangular_video.html
@@ -9,7 +9,7 @@
     <link rel="stylesheet" type="text/css" href="../common/css/main.css">
     <link rel="stylesheet" type="text/css" href="../common/css/example.css">
 
-    <script src="../release/3.0.0-rc/dist/view360.pkgd.js"></script>
+    <script src="../release/latest/dist/view360.pkgd.js"></script>
     <style>
     #myPanoViewer {
         position: relative;

diff --git a/demo/examples/equirectangular_video_url.html b/demo/examples/equirectangular_video_url.html
@@ -9,7 +9,7 @@
     <link rel="stylesheet" type="text/css" href="../common/css/main.css">
     <link rel="stylesheet" type="text/css" href="../common/css/example.css">
 
-    <script src="../release/3.0.0-rc/dist/view360.pkgd.js"></script>
+    <script src="../release/latest/dist/view360.pkgd.js"></script>
     <style>
     #myPanoViewer {
         position: relative;

diff --git a/demo/examples/index.html b/demo/examples/index.html
@@ -19,24 +19,24 @@
         <a href="./">
             <h1>PanoViewer examples</h1>
         </a>
-        <h2>Image</h2>        
+        <h2>Image</h2>
         <ul>
             <li><a href="./equirectangular_image.html">360 Image (equirectangular)</a></li>
             <li><a href="./cubemap_image.html">360 Image (cubemap)</a></li>
         </ul>
-        <h2>Video</h2>        
+        <h2>Video</h2>
         <ul>
             <li><a href="./equirectangular_video.html">360 Video (equirectangular)</a></li>
-            <li><a href="./cubemap_video.html">360 Video (cubemap)</a></li>
+            <li><a href="./cubemap_video.html">360 Video (cubestrip)</a></li>
             <li><a href="./equirectangular_video_url.html">360 Video with resource url</a></li>
         </ul>
-        <h2>Camera Control</h2>        
+        <h2>Camera Control</h2>
         <ul>
             <li><a href="./setting_initial_view.html">Setting the initial view</a></li>
             <li><a href="./change_direction.html">Change direction</a></li>
             <li><a href="./partial_panorama.html">Constraint angle for partial panorama</a></li>
         </ul>
-        <h2>Advanced Usage</h2>        
+        <h2>Advanced Usage</h2>
         <ul>
             <li><a href="./loading_indicater.html">Loading indicater</a></li>
             <li><a href="./compass.html">Compass</a></li>

diff --git a/demo/examples/loading_indicater.html b/demo/examples/loading_indicater.html
@@ -9,7 +9,7 @@
     <link rel="stylesheet" type="text/css" href="../common/css/main.css">
     <link rel="stylesheet" type="text/css" href="../common/css/example.css">
 
-    <script src="../release/3.0.0-rc/dist/view360.pkgd.js"></script>
+    <script src="../release/latest/dist/view360.pkgd.js"></script>
     <style>
     #myPanoViewer {
         position: relative;

diff --git a/demo/examples/partial_panorama.html b/demo/examples/partial_panorama.html
@@ -9,7 +9,7 @@
     <link rel="stylesheet" type="text/css" href="../common/css/main.css">
     <link rel="stylesheet" type="text/css" href="../common/css/example.css">
 
-    <script src="../release/3.0.0-rc/dist/view360.pkgd.js"></script>
+    <script src="../release/latest/dist/view360.pkgd.js"></script>
     <style>
     #myPanoViewer {
         position: relative;

diff --git a/demo/examples/responsive.html b/demo/examples/responsive.html
@@ -9,7 +9,7 @@
     <link rel="stylesheet" type="text/css" href="../common/css/main.css">
     <link rel="stylesheet" type="text/css" href="../common/css/example.css">
 
-    <script src="../release/3.0.0-rc/dist/view360.pkgd.js"></script>
+    <script src="../release/latest/dist/view360.pkgd.js"></script>
     <style>
     #myPanoViewer {
         position: relative;

diff --git a/demo/examples/setting_initial_view.html b/demo/examples/setting_initial_view.html
@@ -9,7 +9,7 @@
     <link rel="stylesheet" type="text/css" href="../common/css/main.css">
     <link rel="stylesheet" type="text/css" href="../common/css/example.css">
 
-    <script src="../release/3.0.0-rc/dist/view360.pkgd.js"></script>
+    <script src="../release/latest/dist/view360.pkgd.js"></script>
     <style>
     #myPanoViewer {
         position: relative;

diff --git a/demo/examples/verticalcubestrip_image.html b/demo/examples/verticalcubestrip_image.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html lang="ko">
+
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
+    <title>PanoViewer examples</title>
+    <link href="https://fonts.googleapis.com/css?family=Open+Sans|Zilla+Slab:700" rel="stylesheet">
+    <link rel="stylesheet" type="text/css" href="../common/css/main.css">
+    <link rel="stylesheet" type="text/css" href="../common/css/example.css">
+
+    <script src="../release/latest/dist/view360.pkgd.js"></script>
+    <style>
+    #myPanoViewer {
+        position: relative;
+        width: 692px;
+        height: 391px;
+    }
+    </style>
+</head>
+
+<body>
+    <header>
+        <a href="./">
+            <h1>PanoViewer examples</h1>
+        </a>
+        <h2>360 Image (vertical cubestrip)</h2>  
+        <p></p>      
+    </header>
+    <section>
+            <div id="myPanoViewer"></div>
+    </section>
+    <script>
+    // create PanoViewer with option
+    var PanoViewer = eg.view360.PanoViewer;
+    var container = document.getElementById("myPanoViewer");
+
+    var panoViewer = new PanoViewer(
+        container, {
+            projectionType: "cubemap",
+            cubemapConfig: {
+              tileConfig: [{
+                flipHorizontal: true, rotation: 0},
+                {flipHorizontal: true, rotation: 0},
+                {flipHorizontal: true, rotation: 0},
+                {flipHorizontal: true, rotation: 0},
+                {flipHorizontal: true, rotation: 0},
+                {flipHorizontal: true, rotation: 0}]
+            },
+            image: "./img/cube.jpg"
+        }
+    );
+</script>
+
+</body>
+
+</html>