The Angular Workstation is a rich demonstration application written in Angularthat exercises a large amount of the functionality of the F.A.S.T. Cloud SDK in a single example.
It is intended to be used as an example which will show almost
the complete set of functionality within the Cloud SDK. It is best
if users first familiarize themselves with the Cloud SDK through the much
simpler Basic Examples found in the top-level Overview section,
including the cvr, mpr, and oblique apps. NOTE: The purpose
of this code is provide a rich example, which can be used to learn and
leverage. However, it is not part of the SDK and not directly
supported (although we will welcome any and all suggestions). All
methods may change and will continually be modified, updated, and
revised over time as new functionality is needed. In other words,
consider this code "as is."
Installation
The complete source is found inside ./foviaserver/public/apps/AngularWorkstation directory, along with the necessary scripts for installing and running the application
To simplify the installation, run buildAngularWorkstation.bat or
buildAngularWorkstation.bat.sh to download the required node_modules
and pre-compiles the TypeScript to JavaScript so the application can
loaded. Note, this requires that Node.js. Once this step is complete, point your browser at http://localhost:8088/apps/AngularWorkstation/dist/index.html, and this will load the default dataset.
Code Structure
The top-level directory includes pre-packaged node_modules, along the a package.json for downloading the required packages. The index.html is the launch point which includes the root tag <fovia> element. It loads all required JavaScript files, including JQuery, foviaAPI, and the Angular classes.
The app directory includes four sub-directories: css, images, partials, and ts,
each corresponding to the different components of the Angular
framework.
The following custom Angular element tags are defined with
corresponding entries in each of the above sub-directories. These
include:
<fovia> -- foviaApp is the top-level container class for holding the application
<fovia-options> -- optionsPanel is the UI container on the left of the application
<cvr-options> -- cvrOptions defines volume rendering specific options included in fovia-options
<segmentation-options> -- segmentationOptions defines segmentation specific options included in fovia-options
<polygon-mesh-options> -- polygonMeshOptions defines polygon extraction specific options included in fovia-options
<fovia-viewport-container> -- viewportContainer is the base class
and container for the images displayed to the right of fovia-options
<fovia-mpr-viewport-container> -- container subclass that holds
one fovia-cvr-viewport and three fovia-mpr-viewport
<fovia-polygon-mesh-container> -- container subclass that holds
one fovia-cvr-viewport and three fovia-polygon-mesh-viewport
<fovia-cvr-viewport> -- subclass of viewport that includes volume rendering specific features
<fovia-mpr-viewport> -- subclass of viewport that includes MPR specific features
<fovia-polygon-mesh-viewport> -- subclass of viewport that includes polygon extraction specific features
The main.ts is the application's main entry point where the
bootstrap loads the FoviaApp, and specifically the <fovia>
element.
Angular Workstation
The Angular Workstation is a rich demonstration application written in Angular that exercises a large amount of the functionality of the F.A.S.T. Cloud SDK in a single example.
It is intended to be used as an example which will show almost the complete set of functionality within the Cloud SDK. It is best if users first familiarize themselves with the Cloud SDK through the much simpler Basic Examples found in the top-level Overview section, including the cvr, mpr, and oblique apps. NOTE: The purpose of this code is provide a rich example, which can be used to learn and leverage. However, it is not part of the SDK and not directly supported (although we will welcome any and all suggestions). All methods may change and will continually be modified, updated, and revised over time as new functionality is needed. In other words, consider this code "as is."Installation
The complete source is found inside ./foviaserver/public/apps/AngularWorkstation directory, along with the necessary scripts for installing and running the application To simplify the installation, run buildAngularWorkstation.bat or buildAngularWorkstation.bat.sh to download the required node_modules and pre-compiles the TypeScript to JavaScript so the application can loaded. Note, this requires that Node.js. Once this step is complete, point your browser at http://localhost:8088/apps/AngularWorkstation/dist/index.html, and this will load the default dataset.Code Structure
The top-level directory includes pre-packaged node_modules, along the a package.json for downloading the required packages. The index.html is the launch point which includes the root tag <fovia> element. It loads all required JavaScript files, including JQuery, foviaAPI, and the Angular classes.The app directory includes four sub-directories: css, images, partials, and ts, each corresponding to the different components of the Angular framework.
The following custom Angular element tags are defined with corresponding entries in each of the above sub-directories. These include:
<fovia> -- foviaApp is the top-level container class for holding the application
<fovia-options> -- optionsPanel is the UI container on the left of the application
<cvr-options> -- cvrOptions defines volume rendering specific options included in fovia-options
<segmentation-options> -- segmentationOptions defines segmentation specific options included in fovia-options
<polygon-mesh-options> -- polygonMeshOptions defines polygon extraction specific options included in fovia-options
<fovia-viewport-container> -- viewportContainer is the base class and container for the images displayed to the right of fovia-options
<fovia-mpr-viewport-container> -- container subclass that holds one fovia-cvr-viewport and three fovia-mpr-viewport
<fovia-polygon-mesh-container> -- container subclass that holds one fovia-cvr-viewport and three fovia-polygon-mesh-viewport
<fovia-cvr-viewport> -- subclass of viewport that includes volume rendering specific features
<fovia-mpr-viewport> -- subclass of viewport that includes MPR specific features
<fovia-polygon-mesh-viewport> -- subclass of viewport that includes polygon extraction specific features
The main.ts is the application's main entry point where the bootstrap loads the FoviaApp, and specifically the <fovia> element.