Phoenix event display

Version Downloads Documentation Coverage

A highly modular and API driven experiment independent event display that uses three.js for processing and presenting detector geometry and event data.

To use in your application, install the package.

Example :
npm install phoenix-event-display
# or
yarn add phoenix-event-display

Usage

As a module

To create a simple event display.

Example :
// Import required classes
import { EventDisplay, PhoenixLoader } from 'phoenix-event-display';

// Create the event display
const eventDisplay = new EventDisplay();

// Define the configuration
const configuration = {
  elementId: '<wrapper_element_id>',
  eventDataLoader: new PhoenixLoader(), // or some other event data loader
  // ... other configuration options
};

// Initialize the event display with the configuration
eventDisplay.init(configuration);

// Load and parse event data in Phoenix format and display it
fetch('path/to/event-data.json')
  .then((res) => res.json())
  .then((res) => {
    eventDisplay.parsePhoenixEvents(res);
  });

// Load detector geometry
eventDisplay.loadOBJGeometry(
  'path/to/geometry.obj',
  'Detector OBJ',
  0x8c8c8c /* color */,
);

As a standalone bundle

Phoenix can be bundled and used directly in the HTML as a script along with three.js. You can either use the CDN or build from source.

To build Phoenix as a bundle.

Example :
yarn build:bundle

This will generate a file phoenix.min.js in the ./dist/bundle directory which can be included in your HTML code.

Without building, you can include the bundle directly from CDN.

Example :
<html lang="en">
  <head>
    ...
  </head>

  <body>
    <div id="eventDisplay"></div>

    <script src="https://cdn.jsdelivr.net/npm/three/build/three.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/phoenix-event-display/dist/bundle/phoenix.min.js"></script>

    <script>
      // Create the event display
      const eventDisplay = new EventDisplay();

      // Define the configuration
      const configuration = {
        elementId: 'eventDisplay',
        eventDataLoader: new PhoenixLoader(), // or some other event data loader
        // ... other configuration options
      };

      // Initialize the event display with the configuration
      eventDisplay.init(configuration);

      // ... other event display functions
    </script>
  </body>
</html>

Examples

results matching ""

    No results matching ""