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
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 */,
);
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>