0.40.0 • Published 11 months ago

trillion-viewer v0.40.0

Weekly downloads
-
License
MIT
Repository
-
Last release
11 months ago

Trillion Viewer

This is Trillion Viewer that allow you to integrate Trillion SDK in your site. For more information please visit https://trillion.jewelry

Installing

Using npm:

npm install trillion-viewer

Using yarn:

yarn add trillion-viewer

How to use:

First of all get your API key from https://dashboard.trillion.jewelry/integration

Then you need to create an empty div element for viewer initialization. For example:

 <div id="trillion-viewer"></div>

Then, in your js code (don't forget to set your API key):

import {TrillionViewerApp} from "trillion-viewer"

const elem = document.getElementById('trillion-viewer')
const trillionViewer = new TrillionViewerApp()
trillionViewer.init(elem)
trillionViewer.setServiceActivationKey("YOUR_API_KEY_HERE")
trillionViewer.setJewelryID('demo-ring')
trillionViewer.refresh()

For typescript:

const elem = document.getElementById('trillion-viewer') as HTMLElement

Instance methods

  • trillionViewer.init() - Create viewer on the provided HTML element
  • trillionViewer.setServiceActivationKey(KEY) - Set API key for app
  • trillionViewer.refresh() - reload viewer after changing parameters
  • trillionViewer.setJewelryID(sku) - Set the id(SKU) of the jewelry to load
  • trillionViewer.getJewelryID() - Get the id(SKU) of the uploaded jewelry
  • trillionViewer.setStartSize(number) - Set the start size of the jewelry
  • trillionViewer.getStartSize() - Get the start size of the jewelry
  • trillionViewer.setZoomMin(number) - Set the minumum zoom value
  • trillionViewer.getZoomMin() - Get the minumum zoom value
  • trillionViewer.setZoomMax(number) - Set the maximum zoom value
  • trillionViewer.getZoomMax() - Get the maximum zoom value
  • trillionViewer.setTryon(true) - Enables Try-On btn above the model
  • trillionViewer.setCustomUrlTryOn('https://your-brand.com/tryon') - Set the url for Try-On button

Model configuration methods

Available colors and cuts depends on a model

trillionViewer.configuratorController.changeColor({color: '#f5f5f5', materialName: 'metal'})

change color of material. Available materials names can be retrieved from API in future

trillionViewer.configuratorController.changeCut({name: 'oval', frame: 'oval', band?: 'oval'}, RING_CUTS)

change cut of the stone. RING_CUTS - all available ring cuts, can be retrieved from API in future and band - is optional param, used where band is also changed

trillionViewer.configuratorController.engrave('text to engrave')

change engrave for a model, max length 15 symbols

trillionViewer.configuratorController.changeLetter('A', LETTERS)

change engrave for a model, max length 15 symbols LETTERS - all available letters, can be retrieved from API in future

Events

'VIEWER_LOADED_EVENT' will be fired when viewer is loaded and ready for any user interactions. Here is an example of subscription to that event

document.addEventListener('VIEWER_LOADED_EVENT', () => {
  console.log('Viewer is loaded!');
})

Styling

To change background for the loader screen, just call trillionViewer.setBackground('#FF5733') before .refresh() method.

To override default css variables, you need to define the external variables in your CSS. For example:

:root {
  --font-family-main-external: 'Arial, sans-serif'; 
  --overlay-item-background-external: rgba(50, 50, 50, 0.5);
  --overlay-item-color-external: rgba(200, 200, 200, 1);
  --primary-external: #FF5733;
  --left-pos-external: 75%;
  --bottom-pos-external: 30px;
}

Explanation of Variables

--font-family-main-external: Main font family for the application. Defaults to 'Montserrat, Helvetica, sans-serif'

--overlay-item-background-external: Background color for overlay items. Defaults to rgba(0, 0, 0, 0.35) ~light-gray
	
--overlay-item-color-external: Text color for overlay items. Defaults to rgba(255, 255, 255, 1) ~⬜
	
--primary-external: Primary color for the background for the error page. Defaults to #222D33 ~⬛
	
--left-pos-external: Horizontal position for an configurator panel. Defaults to 50%. ~center of the screen
	
--bottom-pos-external: Vertical position for an configurator panel. Defaults to 20px. ~up to 20px from the bootom

Using CDN to get Trillion Viewer

use this pattern: unpkg.com/:package@:version/:file

For example:

import {TrillionViewerApp} from "https://sdk.trillion.jewelry/viewer/latest/trillion-viewer.js"

React component

This library also provides the React component for widget.

How to use

import component:

import { TrillionViewer } from "trillion-viewer";

use somewhere in your React application:

function MyComponent() {
  return (
    <div className="MyComponent">
        <TrillionViewer jewelryId={'demo-ring'}/>
    </div>
  )
}
0.40.0

11 months ago

0.39.8-beta.4

11 months ago

0.40.0-react-19

11 months ago

0.40.0-beta.2

11 months ago

0.40.0-beta.3

11 months ago

0.39.8-beta.1

11 months ago

0.39.8-beta.2

11 months ago

0.39.8-beta.3

11 months ago

0.39.8

11 months ago

0.39.7

11 months ago

0.40.0-beta.1

11 months ago

0.39.5-beta.4

11 months ago

0.39.6-beta.1

11 months ago

0.38.1-beta

1 year ago

0.39.5-beta.2

11 months ago

0.39.0-beta.3

1 year ago

0.39.5-beta.3

11 months ago

0.39.0-beta.4

1 year ago

0.39.0-beta.5

1 year ago

0.39.5-beta.1

11 months ago

0.39.0-beta.6

1 year ago

0.39.0-beta.1

1 year ago

0.39.0-beta.2

1 year ago

0.39.2-beta.9

12 months ago

0.39.0-beta.7

1 year ago

0.39.0-beta.8

1 year ago

0.39.0-beta.9

1 year ago

0.38.2-beta.2

1 year ago

0.38.2-beta.1

1 year ago

0.38.2

1 year ago

0.38.1

1 year ago

0.38.6

12 months ago

0.38.5

1 year ago

0.38.4

1 year ago

0.38.3

1 year ago

0.39.2-beta.2

1 year ago

0.39.2-beta.1

1 year ago

0.39.2-beta.4

12 months ago

0.39.2-beta.3

12 months ago

0.39.2-beta.5

12 months ago

0.39.2-beta.8

12 months ago

0.39.2-beta.7

12 months ago

0.39.1

1 year ago

0.39.0

1 year ago

0.39.6

11 months ago

0.39.5

11 months ago

0.39.4

11 months ago

0.39.3

11 months ago

0.39.2

11 months ago

0.39.2-beta.12

12 months ago

0.39.2-beta.10

12 months ago

0.39.2-beta.11

12 months ago

0.39.0-alpha.1

1 year ago

0.39.0-alpha.2

1 year ago

0.39.3-beta.1

12 months ago

0.32.7

1 year ago

0.32.6

1 year ago

0.32.5

1 year ago

0.32.4

1 year ago

0.32.3

1 year ago

0.32.2

1 year ago

0.32.1

1 year ago

0.32.0

1 year ago

0.33.2

1 year ago

0.33.1

1 year ago

0.33.0

1 year ago

0.38.0

1 year ago

0.36.4

1 year ago

0.36.3

1 year ago

0.36.2

1 year ago

0.36.1

1 year ago

0.36.0

1 year ago

0.36.9

1 year ago

0.36.8

1 year ago

0.36.7

1 year ago

0.36.6

1 year ago

0.36.5

1 year ago

0.37.3

1 year ago

0.37.2

1 year ago

0.37.1

1 year ago

0.37.0

1 year ago

0.37.9

1 year ago

0.37.8

1 year ago

0.37.7

1 year ago

0.37.6

1 year ago

0.37.5

1 year ago

0.37.4

1 year ago

0.34.2

1 year ago

0.34.1

1 year ago

0.34.0

1 year ago

0.35.0

1 year ago

0.31.3

1 year ago

0.31.2

1 year ago

0.31.1

1 year ago

0.31.0

1 year ago

0.30.6

1 year ago

0.30.5

1 year ago

0.30.4

1 year ago

0.30.3

1 year ago

0.30.2

1 year ago

0.30.1

2 years ago

0.4.9

2 years ago

0.30.0

2 years ago

0.29.2

2 years ago

0.29.1

2 years ago

0.28.4

2 years ago

0.28.3

2 years ago

0.27.5

2 years ago

0.28.1

2 years ago

0.27.4

2 years ago

0.27.3

2 years ago

0.27.2

2 years ago

0.27.1

2 years ago

0.27.0

2 years ago

0.26.3

2 years ago

0.26.2

2 years ago

0.26.1

2 years ago

0.25.0

2 years ago

0.24.0

2 years ago

0.23.7

2 years ago

0.23.6

2 years ago

0.23.5

2 years ago

0.23.4

2 years ago

0.23.3

2 years ago

0.23.2

2 years ago

0.23.1

2 years ago

0.22.8

2 years ago

0.23.0

2 years ago

0.22.7

2 years ago

0.20.1

2 years ago

0.20.0

2 years ago

0.21.4

2 years ago

0.21.3

2 years ago

0.21.2

2 years ago

0.21.1

2 years ago

0.21.0

2 years ago

0.22.6

2 years ago

0.22.5

2 years ago

0.22.4

2 years ago

0.22.3

2 years ago

0.22.2

2 years ago

0.22.1

2 years ago

0.22.0

2 years ago

0.19.0

2 years ago

0.19.1

2 years ago

0.19.2

2 years ago

0.19.3

2 years ago

0.19.4

2 years ago

0.19.5

2 years ago

0.14.13

2 years ago

0.14.12

2 years ago

0.14.11

2 years ago

0.14.10

2 years ago

0.17.2

2 years ago

0.13.6

2 years ago

0.17.3

2 years ago

0.13.7

2 years ago

0.17.4

2 years ago

0.13.8

2 years ago

0.17.5

2 years ago

0.13.9

2 years ago

0.14.17

2 years ago

0.14.16

2 years ago

0.14.15

2 years ago

0.14.14

2 years ago

0.13.1

2 years ago

0.13.2

2 years ago

0.13.3

2 years ago

0.17.0

2 years ago

0.13.4

2 years ago

0.17.1

2 years ago

0.14.18

2 years ago

0.13.5

2 years ago

0.18.1

2 years ago

0.14.5

2 years ago

0.18.2

2 years ago

0.14.6

2 years ago

0.18.3

2 years ago

0.14.7

2 years ago

0.14.8

2 years ago

0.14.9

2 years ago

0.14.0

2 years ago

0.14.1

2 years ago

0.14.2

2 years ago

0.14.3

2 years ago

0.18.0

2 years ago

0.14.4

2 years ago

0.15.4

2 years ago

0.15.5

2 years ago

0.15.0

2 years ago

0.15.1

2 years ago

0.15.2

2 years ago

0.15.3

2 years ago

0.16.3

2 years ago

0.16.4

2 years ago

0.16.5

2 years ago

0.16.6

2 years ago

0.16.0

2 years ago

0.16.1

2 years ago

0.16.2

2 years ago

0.11.0

2 years ago

0.11.1

2 years ago

0.13.0

2 years ago

0.10.10

2 years ago

0.10.11

2 years ago

0.10.12

2 years ago

0.9.0

3 years ago

0.7.2

3 years ago

0.5.4

3 years ago

0.7.1

3 years ago

0.5.3

3 years ago

0.9.2

2 years ago

0.9.1

3 years ago

0.7.3

3 years ago

0.7.0

3 years ago

0.5.2

3 years ago

0.5.1

3 years ago

0.12.10

2 years ago

0.12.11

2 years ago

0.12.7

2 years ago

0.10.9

2 years ago

0.12.8

2 years ago

0.12.9

2 years ago

0.10.1

2 years ago

0.12.0

2 years ago

0.10.2

2 years ago

0.12.1

2 years ago

0.10.3

2 years ago

0.12.2

2 years ago

0.10.4

2 years ago

0.12.12

2 years ago

0.12.3

2 years ago

0.10.5

2 years ago

0.12.13

2 years ago

0.12.4

2 years ago

0.10.6

2 years ago

0.12.5

2 years ago

0.10.7

2 years ago

0.12.6

2 years ago

0.10.8

2 years ago

0.10.0

2 years ago

0.0.1

3 years ago

0.0.3

3 years ago

0.0.2

3 years ago

0.6.3

3 years ago

0.8.0

3 years ago

0.6.2

3 years ago

0.6.5

3 years ago

0.6.4

3 years ago

0.0.4

3 years ago

0.6.1

3 years ago

0.6.0

3 years ago

0.4.8

3 years ago

0.2.22

3 years ago

0.2.21

3 years ago

0.3.0

3 years ago

0.4.5

3 years ago

0.4.4

3 years ago

0.4.7

3 years ago

0.4.6

3 years ago

0.5.0

3 years ago

0.4.1

3 years ago

0.3.2

3 years ago

0.4.0

3 years ago

0.3.1

3 years ago

0.4.3

3 years ago

0.3.4

3 years ago

0.4.2

3 years ago

0.3.3

3 years ago

0.2.20

3 years ago

0.2.19

3 years ago

0.2.18

3 years ago

0.2.17

3 years ago

0.2.16

3 years ago

0.1.7

3 years ago

0.1.6

3 years ago

0.1.5

3 years ago

0.1.4

3 years ago

0.1.3

3 years ago

0.1.2

3 years ago

0.1.1

3 years ago

0.1.0

3 years ago