Apps

ATON architecture allows to plug&play custom web-apps, built on top of framework functionalities. This is when the built-in Hathor front-end does not fit your requirements and you need a customized solution in terms of UI, logic, etc… For background and more details about the apps architecture, you can refer to the open-access publication Shaping a Web3D framework for different scientific communities: ATON as a service in H2IOSC.

App structure

You can start from the app template here as reference structure.

  • Every ATON app is a PWA located in wapps/ folder
  • The subfolder name is the app ID: for example the app template ID is actually “app_template“
  • The bare miminum for the app folder is a PWA manifest (see the template one), a classic index.html, a main js entry (if not inlined in the index.html) and “appicon.png” representing the app icon

Creating an App

You can clone the app template and modify accordingly all resources indeed, but you can create very quickly (in a few seconds) a new app via command-line using the built-in app generator tool. After the basic setup, from the main ATON folder you can type:

node tools/app.js

Then follow instructions and built-in help. The above tool will create everything for you – otherwise, if you prefer starting from scratch, this is how the main js entry file for your app looks like:

// Realize our app
let APP = ATON.App.realize();

This will create our main APP object (you can indeed pick other names), with several built-in feature and PWA routines to facilitate and boost the development process.

The basic routines are setup and update: setup routine is used to initialize the app and setup event handlers, UI, logic, etc.. while update (optional) is called on every frame. Let’s have a look at a sample setup:

APP.setup = ()=>{
  // Realize base ATON and add base UI events
  ATON.realize();
  ATON.UI.addBasicEvents();

  // Load sample 3D model
  ATON.createSceneNode("sample").load("samples/models/skyphos/skyphos.gltf").attachToRoot();
};

Here we realize base ATON and add a few minimal UI events (loading spinner, etc.). Then we create a scene node called “sample” and load a sample glTF model (an etruscan skyphos).

That’s it! You app will be accessible on <your-ATON-instance>/a/<your-AppID>

Here a few practical built-in routines or variables:

// load an ATON scene via SceneID, optional onSuccess routine
APP.loadScene(sid, onSuccess)

// This contains URL parameters: you can use APP.params.get() to retrieve a specific parameter
APP.params

// This read-only variable contains the full path to the APP
// (e.g. if you require local resources, like icons, specific 3D assets, media, etc.)
APP.basePath

For complete App API refer to official documentation.

Git integration

A very common app development workflow involves git. A single ATON app typically refers to a git repository (e.g. on github or elsewhere) – see for instance Merkhet app. You can safely update the main ATON instance with recent commits, since the wapps/ folder is masked (it is ignored and it wont be affected – except the app_template) – so you as a developer or team can focus specifically on app development progress.