/gawd-player

For viewing & embedding GAWDS

Primary LanguageTypeScript

Gawd Player

A JS component for displaying GAWDS in their various formats, powered by three-spatial-viewer.

Installation

Install in your HTML head and make sure you have also included three.js and three-spatial-viewer

<script src="gawd-player.js"></script>

Or use ES6

yarn add https://github.com/crypto-gawds/gawd-player

And then import the plugin

import { Player } from 'gawd-player'

Getting started

Setup your HTML

<style>
  /* Portrait layout */
  #gawd-container {
    width: 480;
    height: 640;
  }
</style>

<div id="gawd-container"></div>

Using the Player API:

let gawdJsonUrl = "..."
let gawdContainerEl = document.getElementById('gawd-container')

// Use vanilla JS
new CryptoGawd.Player({
  container: gawdContainerEl,
  url: gawdJsonUrl
});

// or TypeScript
import { Player, PlayerProps } from 'gawd-player'

let props: PlayerProps = new PlayerProps()
props.container = gawdContainerEl
props.url = gawdJsonUrl

new Player(props);

Development

// Or while developing
yarn build:watch

// When finished making changes, compile all the distribution files
yarn build

// After you commit your changes, pull the new changes into your project
yarn upgrade gawd-player