/ngx-js9-library

Primary LanguageJavaScript

NgxJs9Library

This is an angular wrapper for the JS9 FITS-file viewer.

To embed this fits-file viewer in your angular-17 application:

  • Install the lib: npm i ngx-js9
  • Import the component NgxJs9Component to e.g. your root app-component
  • Add it to your component template:
  <lib-ngx-js9
    [width]="width"
    [height]="height"
    [siteTheme]="'DARK-THEME'"
    [fitsUrl]="fitsUrl"
    [globalOpts]="{
      menuBar: ['view', 'zoom', 'scale', 'color', 'region'],
      alerts: true
    }"
    (fitsLoadStatus)="onFitsLoadStatusUpdate($event)"
  ></lib-ngx-js9>
  • JS9 is built on old-school technologies (jquery, etc.), so you need to bundle in various js scripts into your build, and make various other resources available on your frontend server. Look through this repo to get the following resources:
    • copy the dirs assets/js9-to-be-compiled and assets/js9-to-be-served to your angular app, and make the following adjustments to angular.json:
  ...
  "assets": [
    ...
    "src/assets/js9-to-be-served",
    "src/assets/js9-to-be-compiled"
  ],
  "scripts": [
    "...",
    "src/assets/js9-to-be-compiled/js9prefs.js",
    "src/assets/js9-to-be-compiled/js9support.min.js",
    "src/assets/js9-to-be-compiled/js9.js",
    "src/assets/js9-to-be-compiled/js9plugins.js"
  ],
  • In your index.html file add the global styles for js9 to your head:
    <link
      type="text/css"
      rel="stylesheet"
      href="assets/js9-to-be-served/js9support.css"
    />
    <link
      type="text/css"
      rel="stylesheet"
      href="assets/js9-to-be-served/js9.css"
    />