Api sample

.github/workflows/publish-pages.yml

@@ -29,8 +29,8 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
+        uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
         with:
           node-version: '18.x'
           registry-url: 'https://registry.npmjs.org'
@@ -39,11 +39,11 @@ jobs:
           npm install
           npm run build
       - name: Setup Pages
-        uses: actions/configure-pages@v3
+        uses: actions/configure-pages@v4
       - name: Upload artifact
-        uses: actions/upload-pages-artifact@v1
+        uses: actions/upload-pages-artifact@v3
         with:
-          path: 'dist'
+          path: 'build'
       - name: Deploy to GitHub Pages
         id: deployment
-        uses: actions/deploy-pages@v2
+        uses: actions/deploy-pages@v4

.github/workflows/test-on-pull.yml

@@ -10,8 +10,8 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
+        uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
         with:
           node-version: '18.x'
           registry-url: 'https://registry.npmjs.org'

.gitignore

@@ -9,6 +9,7 @@ yarn.lock
 
 node_modules
 dist
+build
 .cache
 
 env.yml

README.md

@@ -12,7 +12,7 @@ FSI Viewer 360 can be created and controlled as a simple HTML tag and/or through
 
 This repository contains examples on how to use and build your own applications.
 
-![Project Image](project.apng)
+[![Project Image](project.apng)][GHPages]
 
 ## Getting Started
 

package.json

@@ -3,7 +3,7 @@
     "name": "NeptuneLabs GmbH",
     "url": "https://www.neptunelabs.com/"
   },
-  "version": "23.11.24",
+  "version": "24.03.19",
   "homepage": "https://www.neptunelabs.com/fsi-viewer-360",
   "repository": {
     "type": "git",
@@ -12,15 +12,14 @@
   "license": "Apache-2.0",
   "private": true,
   "engines": {
-    "node": ">=16.0.0",
-    "npm": ">=6.0.0"
+    "node": ">=18.0.0",
+    "npm": ">=8.0.0"
   },
-  "devDependencies": {
-    "@neptunelabs/fsi-samples-framework": "^1.1.0",
-    "prettier": "^3.0.1"
+  "dependencies": {
+    "@neptunelabs/fsi-samples-framework": "^2.0.18"
   },
   "scripts": {
-    "start": "start-sample",
-    "build": "start-sample --build"
+    "start": "workbench",
+    "build": "workbench --build"
   }
 }

project.yml

@@ -2,5 +2,6 @@
 title: 'FSI Viewer 360°'
 projectURL: https://www.neptunelabs.com/fsi-viewer-360/
 originAssetPath: viewer-360
+schema: overview-taupe
 playground:
   stackblitz: fsi-viewer-360-samples

samples/javascript-api/README.md

@@ -0,0 +1,103 @@
+# JS API Sample
+
+FSI Viewer contains an extensive JS API with methods and callbacks that you can use.
+You can find [an overview of all available parameters in the corresponding documentation](https://docs.neptunelabs.com/docs/fsi-viewer/js-api/public-methods).
+
+This example is a simple demonstration of how to use these methods and callbacks.
+
+To display a spin with FSI Viewer, all you need to do is add the following script to the top of your web page:
+
+```html
+<script
+  src='https://fsi.domain.tld/fsi/viewer/applications/viewer/js/fsiviewer.js'
+</script>
+```
+This will ensure that the FSI Viewer is loaded.
+
+Normally you would need to place the *<fsi-viewer>* tag in your source code where you want the viewer to be displayed.
+
+In this example, we only want to display the viewer in place of an image when a button is clicked. The view will then be zoomed, reset and the auto-rotation is started.
+This means that the viewer is initialised by JavaScript.
+
+To do this, we have created this part in the body:
+
+```html
+<div class="col productContainer" id="productContainer">
+  <img id="zoomImg" src="{{&fsi.server}}/{{&fsi.context}}/server?type=image&source=images/samples/Shoe/View2/sneaker-both-13.jpg&width=640&height=397&effects=pad(CC,FFFFFF)" height="397" alt="">
+  <div class="zoomContainer" id="zoomEle">
+  </div>
+  <button type="button" id="zoomBtn" class="btn btn-lg btn-outline-dark">Show Zoom</button>
+</div>
+```
+`productContainer` is the div that contains all the elements.
+`zoomImg` is the image that will be displayed on load and replaced by the viewer.
+The `zoomEle` div will contain the FSI viewer.
+The `zoomBtn` button is used to switch from the image to the viewer.
+
+In the corresponding `style.css` the image and button are placed  above the viewer div with `z-index`:
+
+```css
+.productContainer .img {
+  z-index: 10;
+  position: absolute;
+}
+
+.productContainer .btn {
+  position: absolute;
+  z-index: 15;
+}
+```
+
+The switch on button click is achieved via JS in the corresponding `script.js`:
+
+```js
+document.addEventListener('DOMContentLoaded', () => {
+
+  document.getElementById('zoomBtn').addEventListener('click', () => {
+
+    let showTeaser = true
+
+    const show = () => {
+      // show FSI Viewer instance and hide image
+      document.getElementById('zoomEle').style.visibility = 'visible'
+      document.getElementById('zoomImg').style.display = 'none'
+      document.getElementById('zoomBtn').style.display = 'none'
+      if (showTeaser) {
+        showTeaser = false
+
+        setTimeout(() => {
+          instance.spinToTarget(12, 1, 80)
+        }, 400)
+
+        setTimeout(() => {
+          instance.spinToTarget(0, 1, 80)
+        }, 1000)
+      }
+    }
+
+    const instance = $FSI.createNode("fsi-viewer", {
+      dir: 'images/samples/Shoe/View2',
+      debug: false,
+      plugins: 'fullScreen',
+      skin: 'example',
+      width: '640',
+      height: '427',
+      // listen for finished loading FSI Viewer and becomes interactive
+      onReady: show
+    })
+    document.getElementById('zoomEle').appendChild(instance)
+  })
+
+})
+```
+
+A click on the `zoomBtn` element will initialise a new FSI Viewer element in the `zoomEle` element.
+
+The viewer itself is created with `$FSI.createNode("fsi-viewer",{parameters})`.
+
+We create `show` that is called when the `onReady` callback is executed (see [documentation](https://docs.neptunelabs.com/docs/fsi-viewer/js-api/callbacks#onready)) we ensure a smooth transition:
+Only when the viewer is ready will the viewer element will be set to visible, while the image and button are set to `display:none`.
+
+If `showTeaser` is true, the method `setZoom` will be executed: `instance.setZoom(teaserZoomPercent, true, true)` (see [documentation](https://docs.neptunelabs.com/docs/fsi-viewer/js-api/public-methods#setzoom)).
+
+For initialization, we use `$FSI.createNode` which creates the <fsi-viewer> custom tag which is appended to the `zoomEle` element.

samples/javascript-api/config.yml

@@ -0,0 +1,29 @@
+overview:
+  title: JavaScript API
+  image: logo.png
+  description: Learn how to use the JavaScript Viewer API with a simple demo.
+  order: 98
+  facts:
+    - JS built FSI Viewer
+    - JS API Demonstration
+schema: bootstrap-taupe
+sample:
+  hero:
+    data: clothing-hero.yml
+  menu:
+    data: clothing-menu.yml
+  featured:
+    data: clothing-featured.yml
+  highlight: DEAL OF THE DAY
+  footer:
+    credits:
+      photos:
+        - author: Artem Bondarchuk
+          link: https://unsplash.com/@artembondarchuk?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText
+          platform: Unsplash
+      viewer:
+          link: https://www.neptunelabs.com/fsi-viewer/
+  fsi:
+    viewer: true
+  bootstrap:
+    icons: true

samples/javascript-api/container.html

@@ -0,0 +1,31 @@
+<div class="container">
+  <div class="row row-cols-1 row-cols-lg-2 g-3 pr-5 py-3">
+    <div class="col productContainer" id="productContainer">
+      <img id="zoomImg" src="{{&fsi.server}}/{{&fsi.context}}/server?type=image&source=images/samples/Shoe/View2/sneaker-both-1.jpg&width=640&height=397&effects=pad(CC,FFFFFF)" height="397" alt="">
+      <div class="zoomContainer" id="zoomEle">
+      </div>
+      <button type="button" id="zoomBtn" class="btn btn-lg btn-outline-dark">Show Zoom</button>
+    </div>
+    <div class="col mx-auto">
+      <div class="p-3 text-left">
+        <h2 class="display-5">Camu</h2>
+        <p>Sneaker, Camouflage Suede</p>
+        <p></p>
+        <p>
+          <i class="bi bi-star-fill"></i>
+          <i class="bi bi-star-fill"></i>
+          <i class="bi bi-star-fill"></i>
+          <i class="bi bi-star-fill"></i>
+          <i class="bi bi-star-half"></i>
+          <small>(4664) Ratings</small>
+        </p>
+        <p>Sturdy, classy and minimal.</p>
+        <p>Nice shoe for any occasion. The minimal design fits a lot of outfits.</p>
+        <p>
+          <small>Dispatched in 4 working days</small>
+        </p>
+      </div>
+    </div>
+  </div>
+</div>
+

samples/javascript-api/script.js

@@ -0,0 +1,38 @@
+document.addEventListener('DOMContentLoaded', () => {
+
+  document.getElementById('zoomBtn').addEventListener('click', () => {
+
+    let showTeaser = true
+
+    const show = () => {
+      // show FSI Viewer instance and hide image
+      document.getElementById('zoomEle').style.visibility = 'visible'
+      document.getElementById('zoomImg').style.display = 'none'
+      document.getElementById('zoomBtn').style.display = 'none'
+      if (showTeaser) {
+        showTeaser = false
+
+        setTimeout(() => {
+          instance.spinToTarget(12, 1, 80)
+        }, 400)
+
+        setTimeout(() => {
+          instance.spinToTarget(0, 1, 80)
+        }, 1000)
+      }
+    }
+
+    const instance = $FSI.createNode("fsi-viewer", {
+      dir: 'images/samples/Shoe/View2',
+      debug: false,
+      plugins: 'fullScreen',
+      skin: 'example',
+      width: '640',
+      height: '427',
+      // listen for finished loading FSI Viewer and becomes interactive
+      onReady: show
+    })
+    document.getElementById('zoomEle').appendChild(instance)
+   })
+
+})

samples/javascript-api/style.css

@@ -0,0 +1,46 @@
+.productContainer {
+  position: relative;
+  height: 427px;
+  width: 640px;
+  padding: 0px;
+  margin: 0px;
+}
+
+.productContainer .img {
+  z-index: 10;
+  position: absolute;
+}
+
+.productContainer .zoomContainer{
+  padding: 0px;
+  top:0;
+  right: 0;
+  margin: 0;
+  position: absolute;
+  height: 427px;
+  width: 640px;
+  visibility: hidden;
+}
+
+.productContainer .btn {
+  position: absolute;
+  z-index: 15;
+  bottom: 2%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  -ms-transform: translate(-50%, -50%);
+  background-color: white;
+  color: #555;
+  border: 1px solid #555;
+  font-size: 16px;
+  padding: 12px 24px;
+  cursor: pointer;
+  border-radius: 5px;
+  text-align: center;
+}
+
+.productContainer .btn:hover {
+  background-color: #33b1aa;
+  color: white;
+  border: 1px solid #33b1aa;
+}

samples/multi-axis-hotspots/config.yml

@@ -7,27 +7,20 @@ overview:
     - Multi-Axis Spin
     - Hotspots
   order: 4
+schema: bootstrap-taupe
 sample:
-  template:
-    schema: framework-2023
-    components:
-      menu:
-        template: data/misc-menu.yml
-      highlight: DEAL OF THE DAY
-      footer:
-        credits:
-          photos:
-            - author: NeptuneLabs GmbH
-          viewer:
-            link: https://www.neptunelabs.com/fsi-viewer/
-      fsi:
-        viewer: true
-        touchZoom: true
-      bootstrap:
-        icons: true
-  mapping:
-    html: "index.html"
-    css: "style.css"
-    js: "script.js"
-playground:
-  deploy: true
+  menu:
+    data: misc-menu.yml
+  highlight: DEAL OF THE DAY
+  footer:
+    credits:
+      photos:
+        - author: NeptuneLabs GmbH
+      viewer:
+        link: https://www.neptunelabs.com/fsi-viewer/
+  fsi:
+    viewer: true
+    touchZoom: true
+  bootstrap:
+    icons: true
+