Socket
Book a DemoInstallSign in
Socket

phoenix-event-display

Package Overview
Dependencies
Maintainers
0
Versions
49
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

phoenix-event-display

API for web-based experiment independent event display.

3.0.5
latest
Source
npmnpm
Version published
Weekly downloads
24
60%
Maintainers
0
Weekly downloads
 
Created
Source

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.

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

Usage

As a module

To create a simple event display.

// 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.

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.

<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

FAQs

Package last updated on 30 Nov 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

About

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc

U.S. Patent No. 12,346,443 & 12,314,394. Other pending.