npm - @clikvn/showroom-visualizer - Versions diffs - 0.1.17-dev → 0.1.18-dev - Mend

@clikvn/showroom-visualizer 0.1.17-dev → 0.1.18-dev

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (79) hide show

package/dist/index.html CHANGED Viewed

@@ -1,74 +1,102 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
+<head>
+    <meta charset="UTF-8">
     <meta
-      name="viewport"
-      content="width=device-width, height=device-height, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"
+            name="viewport"
+            content="width=device-width, height=device-height, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"
     />
     <title>Title</title>
-    <script type="module">
-      import ShowroomVisualizer from 'http://localhost:3000/web.js';
-      ShowroomVisualizer.initVisualizer({
-        apiHost: 'https://ci-api.clik.vn/vt360',
-        webRotateClientHost: 'https://ci-webrotate360-client.clik.vn',
-        config: {
-          tourCode: 'TOUR_KUFGDEPDTJA4',
-          language: 'EN',
-        },
-        listeners: {
-          onLoaded: (tool) => {
-            window.tool = tool;
-          },
-          onPinActionClicked: (key) => {
-            console.log('onPinActionClicked', key);
-          },
-          onAIProductClicked: (poi) => {
-            console.log('onPoiClicked', poi);
-          },
-        },
-        mobile: false,
-      });
-    </script>
-    <style>
-      .toggle-btn {
-        position: fixed;
-        top: 20px;
-        right: 20px;
-        z-index: 9999;
-        padding: 10px 15px;
-        background: #3585f7;
-        color: white;
-        border: none;
-        border-radius: 5px;
-        cursor: pointer;
-        font-family: 'Be Vietnam Pro', sans-serif;
-        font-size: 14px;
-        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
-        transition: background 0.3s ease;
-      }
-      .toggle-btn:hover {
-        background: #2574e6;
-      }
-    </style>
-  </head>
-  <body>
-    <button class="toggle-btn" onclick="toggleWidth()">Toggle Width</button>
-    <div id="container" style="width: 100vw; height: 100vh; overflow: hidden">
-      <showroom-visualizer></showroom-visualizer>
+</head>
+<body>
+<div class="flex h-screen w-screen">
+    <!--    <div class="h-full" style="width: 72px"></div>-->
+    <div class="h-full" style="width: /*calc(100% - 462px);*/ 100%;">
+        <div class="h-full w-full relative">
+            <showroom-visualizer></showroom-visualizer>
+        </div>
     </div>
-    <script>
-      function toggleWidth() {
-        const container = document.getElementById('container');
-        const currentWidth = container.style.width;
+    <!--    <div class="h-full" style="width: 390px"></div>-->
+</div>
+<script type="module">
+  // import ShowroomVisualizer from 'https://85f81d7dc992.ngrok-free.app/web.js';
+  import ShowroomVisualizer from 'http://localhost:3000/web.js';
+  ShowroomVisualizer.initVisualizer({
+    apiHost: 'https://ci-api.clik.vn/vt360',
+    webRotateApiHost: 'https://ci-api.clik.vn/cms',
+    webRotateClientHost: 'https://ci-webrotate360-client.clik.vn',
+    config: {
+      language: 'VI',
+      tourCode: 'TOUR_FXYCEN7ZZVW6',
+      // startScene: 'scene_kr3rgeezzvw6',
+      // hLookAt: -254,
+      // vLookAt: 1
+      // tourCode: 'TOUR_GEVEXLWNPT74',
+      // tourCode: 'TOUR_7YUL2ALGFL94',
+      // tourCode: 'TOUR_KUFGDEPDTJA4',
+      // startScene: 'SCENE_KNLRAKUHFL94',
+      // hLookAt: -54.11884505373274,
+      // vLookAt: -9.111287009391969
+      // tourCode: 'tour_7a6hchjljga4'.toUpperCase(),
+      // tourCode: 'TOUR_ZJMHKMJEACAH',
+      // startScene: 'SCENE_LVN4DLUFACAH',
+      // hLookAt: -179.145,
+      // vLookAt: 11.597,
-        if (currentWidth === '80vw') {
-          container.style.width = '100vw';
-        } else {
-          container.style.width = '80vw';
-        }
+      // tourCode: 'tour_7yul2algfl94'.toUpperCase(),
+      // startScene: 'scene_vrz9v2uhfl94'.toUpperCase(),
+      // hLookAt: -87,
+      // vLookAt: 9,
+      // hotspot: 'item27getn2d2m94'.toUpperCase(),
+    },
+    listeners: {
+      onTourSwitchLoaded: (tool) => {
+        window.switchTour = tool.switchTour;
+      },
+      onSceneCompleted: (...args) => {
+        // console.log('onSceneCompleted', args);
+      },
+      onLoaded: tool => {
+        // console.log('TOOL_LOADED')
+        window.tool = tool;
+      },
+      onPoiClicked: (poi) => {
+        console.log('onPoiClicked', poi);
+      },
+      onPoiOut: () => {
+        // console.log('onPoiOut');
+      },
+      onPoiOver: (poi) => {
+        console.log('onPoiOver', poi);
+      },
+      onPoiInCenter: (poi) => {
+        // console.log('onPoiInCenter', poi);
+      },
+      onStartScenario: (code) => {
+        // console.log('onStartScenario', code);
+      },
+      onScenarioPaused: (code) => {
+        // console.log('onScenarioPaused', code);
+      },
+      onScenarioEnded: (code) => {
+        // console.log('onScenarioEnded', code);
+      },
+      onChanged: (args) => {
+        console.log('onChanged', args);
+      },
+      onStartLoadingTour: (code) => {
+        // console.log('onStartLoadingTour', code);
+      },
+      onFinishedLoadingTour: (code) => {
+        // console.log('onFinishedLoadingTour', code);
       }
-    </script>
-  </body>
-</html>
+    },
+    mobile: false
+  });
+</script>
+</body>
+</html>