-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #7 from neptunelabs/api-sample
Api sample
- Loading branch information
Showing
24 changed files
with
487 additions
and
94 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -9,6 +9,7 @@ yarn.lock | |
|
|
||
| node_modules | ||
| dist | ||
| build | ||
| .cache | ||
|
|
||
| env.yml | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> | ||
|
|
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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) | ||
| }) | ||
|
|
||
| }) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
File renamed without changes.
Oops, something went wrong.