artemon

Artemon

Artemon is a javascript library for embedding augmented reality artwork previews.

An account with Artemon is required in order to create the experiences viewed using this library. Create an account at app.artemon.io.

Installation

Use npm package manager to install artemon.

npm i artemon

Loading the module

// CommonJS module require
const artemon = require('artemon');

// ES2015 module import
import artemon from 'artemon';

Usage

Using artemon floating button

Replace id with your unique id or leave blank if using path workflow.

artemon.init('id');

Using artemon button in a container

Replace id with your unique id or null if using path workflow.
Replace container_id with id of container HTMLElement or the element reference itself.

artemon.init('id', 'container_id');

Using your own button

Replace id with your unique id or leave blank if using path workflow.
The error object (if present) means that the experience was not found.

artemon.getExperience('id')
   .then(experience => {
      if(!experience.error) document.querySelector('button').onclick = () => experience.start();
   })

ReactJS

We have created a simple wrapper example for usage in ReactJS.

import artemon from './artemon-min.js';
import ReactDOM from 'react-dom';
import React, { Component, createRef } from 'react';

export class Artemon extends Component {
    wrapper = createRef();

    render() {
        return <div ref={this.wrapper}/>;
    }

    componentDidMount() {
        const node = this.wrapper.current;   
        artemon.init(this.props.id ? this.props.id : null, node);    
        ReactDOM.render(<React.Fragment>{this.props.children}</React.Fragment>, node);
    }

    componentWillUnmount() {
        artemon.clear(this.props.id ? this.props.id : null);
    }
}

To use the wrapper, pass an id (if using the ID workflow) to the reactjs component or leave it blank, if using the URL workflow.

import { Artemon } from './Artemon';

function App() {  
  return (
    <div className="App">
      <Artemon id="ID"></Artemon>
    </div>
  );
}

export default App;

Customization

Artemon button created by init() can be customized in two ways.

• Through a properties object using any valid css properties
• By appending your style to Artemon's shadowroot (mode open)

Using properties object

The variables object sets globals for artemon design. For more direct control, you can use the individual objects, e.g. startButton, stopButton etc.

This properties object will have to be provided as the third parameter for artemon.init() or artemon.start(). For artemon.getExperience() the properties object will have to be provided for the returned experience.start() function.

const prop = {
  variables: {
    paper: "white", // ...........any valid CSS color
    button: "transparent", // ....any valid CSS color
    buttonText: "black", // ......any valid CSS color
    font: "Roboto", // ...........any available font
    border: "1px solid black", // any valid CSS border value
    borderRadius: "4px", // ......any valid CSS border-radius value
    ripple: "black", // ..........any valid CSS color | "off"
    buttonIcon: "black" // .......any valid CSS color | "off"
  }
  startButton: {
    text: "mybutton",
    style: {
      default: {
        color: "red"
      },
      hover: {...},
      active: {...}
    }
  },
  stopButton: {...},
  helpButton: {...},
  ripple: "white",
  loader: {...},
  fallbackHelp: {...},
  xrHelp: {...},
  qr: {...}
}
artemon.init('id', null, prop);

Appending style tag to Artemon's shadowroot

Due to our shadowroot mode being open, you are free to create your own style tags and append them to the shadowRoot.

artemon.init(...)
    .then(viewer => {
        const style = document.createElement('style');
        style.innerHTML = ".artemon-button { background-color: black; color: white; }";
        viewer.shadowRoot.appendChild(style);
    })

Selector	Description
.artemon-button	All non-floating and non-icon buttons
.artemon-button--start	Start button
.artemon-button--stop	Stop button
.artemon-button--floating	Floating button
.artemon-icon-button	Icon button
.artemon-icon	Icon button icon
.artemon-loader	Loader
.artemon-loader--graphics	Loader wrapper
.artemon-loader--circular	Loader svg
.artemon-loader--path	Loader circle
.artemon-help	Help screen
.artemon-canvas	Webgl canvas
.artemon-guide	XR guide
.artemon-guide--tracking	XR tracking guide
.artemon-guide--placing	XR placing guide
.artemon-qr	QR
.artemon-qr--qrcode	QR code
.artemon-qr--details	QR Details wrapper
.artemon-qr--details-icon	QR Details icon
.artemon-qr--details-text	QR Details text

Content creation

This library needs content (experiences) to be created beforehand. This library is only for embedding said experiences into your website.

Content creation options:

• Manual through dashboard (dashboard)
• API (API documentation)
• Automatic using a web crawler (contact us)

Important links

• Homepage
• Dashboard
• Getting started

Contact

You can reach us either via chat on our homepage or via email at [e-mail].

License

Copyright © 2021 Operose Labs, LTD - See LICENSE.md for more information <[e-mail]>. For third party license information, see artemon-min.js.licenses.txt.