Install viewportsCore from npm:
npm install viewports-core
Update your build configuration to copy all viewportsCore generated bundle files to your output js directory. Example of how this can be done with copy webpack plugin:
const CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = {
plugins: [
new CopyWebpackPlugin({
patterns: [
{
from: 'node_modules/viewports-core/dist/*.bundle.js',
to: 'js/[name].js',
force: true,
info: {
minimized: true
}
}
]
})
]
};
Create initial index.html and add following styles:
<style>
* {
box-sizing: border-box;
}
html {
height: 100%;
}
body {
width: 100%;
height: 100%;
margin: 0;
}
.viewports-layout {
width: 100%;
height: 100%;
}
.viewport-container {
display: flex;
width: 100%;
height: 100%;
position: absolute;
background: #000;
border: 1px solid #323237;
}
.viewport-container.active {
border: 1px solid #e51b48;
}
</style>
Also add following HTML elements to your index.html file:
<body>
<div id="viewports-layout" class="viewports-layout">
<div id="viewport-container-1-1" class="viewport-container"/>
</div>
</body>
In this example viewports layout container has optional .viewports-layout class.
Each viewport container must have required .viewport-container class.
Imported viewportsCore library functions can be accessed with global viewportsCore variable.
To load study in to viewport container you should initialize viewportsCore, add your created layout container and load your desired study:
import 'viewports-core';
viewportsCore.create();
viewportsCore.layoutController.addLayoutContainer('viewport-container-1-1', true);
viewportsCore.loadStudyWithHIS('study-to-load-uid', 'study').then((studyData) => {
const instanceUid = studyData.series[0].instances[0].uid;
viewportsCore.layoutController.openInstanceToViewportContainer('viewport-container-1-1', instanceUid);
});
If your solution needs viewportsCore only in specific cases, then you can lazy load this library when those specific cases are accessed:
import('viewports-core').then(() => {
viewportsCore.create();
viewportsCore.layoutController.addLayoutContainer('viewport-container-1-1', true);
viewportsCore.loadStudyWithHIS('study-to-load-uid', 'study').then((studyData) => {
const instanceUid = studyData.series[0].instances[0].uid;
viewportsCore.layoutController.openInstanceToViewportContainer('viewport-container-1-1', instanceUid);
});
});
Description about viewportsCore functions.
To create viewportsCore use this function:
viewportsCore.create(properties);
Parameter description:
properties (object) - parameters of viewports (not required). Possible options:enabledScrollBetweenSeries (boolean) - this parameter allows scrolling between series. Default value: false.autoOpenImageType (string) - parameter defines which way to use for the study auto open. Possible values: none, first, always. Default values: none.Load study with HIS to memory.
viewportsCore.loadStudyWithHIS(study, integrationType);
Parameters description:
study (string) - study uid or study DICOM file directory name (based on integration type).integrationType (string=) - optional parameter to define his integration type. Possible values: study, file. Default value: study.Load multiple studies with HIS to memory.
viewportsCore.loadStudiesWithHIS(studiesToLoad, integrationType);
Parameter description:
studiesToLoad (array) - studies array with needed information.study (string) - study uid or study DICOM file directory name (based on integration type).callback (function=) - optional function which is called back when study is loaded. Callback parameter is:studyData (object) - loaded study data.integrationType (string=) - optional parameter to define his integration type. Possible values: study, file. Default value: study.Example of studiesToLoad array and function usage:
const studiesToLoad = [
{
study: '1.2.840.113619.2.55.3.4271045733.996.1449464144.595',
callback: (studyData) => {console.log(studyData)}
},
{
study: '1.2.840.113619.2.55.3.4271045733.996.1449464144.595',
callback: (studyData) => {console.log(studyData)}
},
];
viewportsCore.loadStudiesWithHIS(studiesToLoad, 'study');
Reference line actions.
viewportsCore.enableReferenceLines();
viewportsCore.disableReferenceLines();
viewportsCore.isEnableReferenceLines();
Cache study information to the viewportsCore.
viewportsCore.cacheStudy(studyUid, storageId);
Enable or disable loader and progress bar visibility.
viewportsCore.enableViewportLoaders();
viewportsCore.disableViewportLoaders();
Add layout container to viewportsCore and register needed container events.
viewportsCore.layoutController.addLayoutContainer(containerId, selectContainer);
Parameters description:
containerId (string) - new layout container id.selectContainer (boolean) - select new layout container.Remove layout container from viewportsCore.
viewportsCore.layoutController.removeLayoutContainer(containerId);
Parameter description:
containerId (string) - layout container id which has to be removed.Select layout container as active.
viewportsCore.layoutController.selectLayoutContainer(containerId);
Parameter description:
containerId (string) - layout container id which has to be selected.Deselect layout container.
viewportsCore.layoutController.deselectActiveLayoutContainer();
Get list of registered layout containers.
viewportsCore.layoutController.getLayoutContainers();
Returns if layout container is available for viewportsCore usage.
viewportsCore.layoutController.isLayoutContainerAvailable(containerId);
Parameter description:
containerId (string) - container id.Returns active container information.
viewportsCore.layoutController.getActiveContainer();
Returns active layout container id.
viewportsCore.layoutController.getActiveContainerId();
Returns active viewport.
viewportsCore.layoutController.getActiveViewport();
Returns active viewport id.
viewportsCore.layoutController.getActiveViewportId();
Opens instance to currently active viewport container.
viewportsCore.layoutController.openInstanceToActiveViewportContainer(instanceUid);
Parameter description:
instanceUid (string) - instance uid.Opens instance to provided layout container.
viewportsCore.layoutController.openInstanceToViewportContainer(containerId, instanceUid);
Parameters description:
containerId (string) - container id.instanceUid (string) - instance uid.Deletes viewport container by viewport id.
viewportsCore.controller.deleteViewport(viewportId);
Parameter description:
viewportId (string) - viewport id.Deletes viewport container by layout container id.
viewportsCore.controller.deleteViewportByContainerId(containerId);
Parameter description:
containerId (string) - container id.Returns viewport by viewport id.
viewportsCore.controller.getViewport(viewportId);
Parameter description:
viewportId (string) - viewport id.Returns viewport by layout container id.
viewportsCore.controller.getViewportByContainerId(containerId);
Parameter description:
containerId (string) - container id.Resets all viewports to original state.
viewportsCore.controller.resetAllViewportsRenders();
Changes viewport Mpr orientation.
viewportsCore.changeViewportOrientation(containerId, orientation);
Parameters description:
containerId (string) - container id.orientation (string) - orientations: CORONAL, AXIAL, SAGITTAL.Requested different orientation series has to be generated from source data.
Generated virtual series receive new uid which is created from source series uid and orientation name, for example: 123.0.0.1-CORONAL.
Each instance in generated virtual series receive new uid which is created from virtual series uid and instance index, for example: 123.0.0.1-CORONAL-0.
Generates 3 Mpr projections to provided layout containers.
viewportsCore.generateMpr(containerId, layoutContainers);
Parameters description:
containerId (string) - source container id.layoutContainers (array) - array of target containers for 3 Mpr projections.Generates 2x2 sub-layout with oblique MPR and 3d viewport inside provided source container.
viewportsCore.generateObliqueMPR(containerId);
Parameter description:
containerId (string) - source container id.Create MPR viewport with desired orientation in provided container.
viewportsCore.createMPRViewport(containerId, orientation);
Parameters description:
containerId (string) - container id.orientation (string) - viewport projection orientation. Available orientations: CORONAL, AXIAL, SAGITTAL.Create MPR viewport 3D in provided container.
viewportsCore.createMPRViewport3D(containerId);
Parameter description:
containerId (string) - container id.Toggle viewport Axes.
viewportsCore.getActiveViewport().toggleAxis(true|false);
Moves all viewport container axes to container center.
viewportsCore.getActiveViewport().axisToCenter();
Reset all viewport manipulations.
viewportsCore.getActiveViewport().resetRender();
Change MPR layout type (It is only changes in the MPR container).
viewportsCore.getActiveViewport().changeSubLayoutType(type);
Parameter description:
type (string) - name of layout type.Possible layout types names: 2-and-1, 2-and-2, 3-in-column, 3-in-row, 3-and-1, 3d, 1, switch-order.
Selecting the switch-order type changes the container orders.
Enables fusion with default Hot Iron palette.
viewportsCore.getActiveViewport().enableFusion(seriesId);
Changes color palette.
viewportsCore.getActiveViewport().applyFusionClut(name);
Parameter description:
name (string) - name of color palette.Possible color palettes names: HOT_IRON, PET, HOT_METAL_BLUE, PET_20_STEP, RAINBOW.
Fusion opacity from CT (0%) to PT (100%)
viewportsCore.getActiveViewport().applyFusionOpacity(value);
viewportsCore.getActiveViewport().getFusionOpacity();
Parameter description:
value (number) - range of numbers from 0.0 to 1.0.Window leveling actions.
viewportsCore.getActiveViewport().applyWL(w,l);
viewportsCore.getActiveViewport().applyDefaultWL();
viewportsCore.getActiveViewport().applyAutoWL();
viewportsCore.getActiveViewport().applyInvert(true|false);
viewportsCore.getActiveViewport().isInverted();
Viewport transformation actions.
viewportsCore.getActiveViewport().applyRotation(degrees);
viewportsCore.getActiveViewport().applyRightRotation();
viewportsCore.getActiveViewport().applyLeftRotation();
viewportsCore.getActiveViewport().applyHorizontalFlip();
viewportsCore.getActiveViewport().applyVerticalFlip();
viewportsCore.getActiveViewport().applyTransformationCleanup();
Parameter description:
degrees (number) - instance rotation by degrees.Zoom related operation actions.
viewportsCore.getActiveViewport().applyFitToScreen();
viewportsCore.getActiveViewport().applyOriginalResolution();
viewportsCore.getActiveViewport().applyZoom(scale, point);
Parameters description:
scale (number) - scale number.point (object) - point object with x and y coordinates. For example: {x: 242, y: 236}.Scale range restriction actions.
viewportsCore.getActiveViewport().setScaleRange(min, max);
viewportsCore.getActiveViewport().getScaleRange();
viewportsCore.getActiveViewport().clearScaleRange();
Parameters description:
min (number) - minimal scale value.max (number) - maximum scale value.To receive current viewport get fit to screen scale value:
viewportsCore.getActiveViewport().getFitToScreenScaleValue();
Pan operation action.
viewportsCore.getActiveViewport().applyPan(position);
Parameter description:
position (object) - object with x and y position coordinates. For example: {x: 10, y: 15}.Reset active viewport render to original state.
viewportsCore.getActiveViewport().resetRender();
To bind action to mouse button, your need to provide button number and mouse action constant:
VIEWPORT_FUNCTIONS = {
NONE: 0,
WL: 1,
ZOOM: 2,
PAN: 3,
SCROLL: 4,
MEASURE: 5,
ROTATE: 6,
CROSSHAIR: 8,
};
viewportsCore.setMouseButtonFunction(1|2|3, VIEWPORT_FUNCTIONS.WL);
To get study data use this function:
viewportsCore.getStudy(studyUid);
To get series data use this function:
viewportsCore.getSeries(seriesUid);
To get instance data use this function:
viewportsCore.getInstance(instanceUid);
Enables synchronization.
viewportsCore.enableSync(yourCallback);
viewportsCore.enableSync((functionName, parameters) => console.log(functionName, parameters));
Parameters description:
functionName (string) - sync event function name. Available event names: image-position-changed, zoom-changed, container-size-changed.parameters (object) - object of provided event function parameters.Example of parameters object:
- `image-position-changed`: {"imagePosition": {"x": 0.031, "y": 0.097}, "containerId": "viewport-container-1-1"};
- `zoom-changed`: {"scale": 1.2529411185263977, "point": { "x": 253.15", "y": 389}, "containerId": "viewport-container-1-1"};
- `container-size-changed`: {"width": 531, "height": 883, "scale": 1.09375, "containerId": "viewport-container-1-1"}.
Disables synchronization.
viewportsCore.disableSync(yourCallback);
This function can be used to add desired containers to the synced containers list.
viewportsCore.addToSync(containersId);
Parameter description:
containersId (array) - Array of containers. Example: (['viewport-container-1-1', 'viewport-container-1-2']).This function can be used to remove desired containers from the synced containers list.
viewportsCore.removeFromSync(containersId);
Parameters description:
containersId (array) - Array of containers. Example: (['viewport-container-1-1', 'viewport-container-1-2']).Returns list of synced viewport containers.
viewportsCore.getLockedViewportContainers();
When sync is enabled you can use zoom function on locked containers.
viewportsCore.applyZoomForLockedViews(containerId, scale, point);
Parameters description:
containerId (string) - container id from which zoom operation was performed (to ignore provided container).scale (number) - scale number.point (object) - point object with x and y coordinates. For example: {x: 242, y: 236}.When sync is enabled you can use pan function on locked containers:
viewportsCore.applyPanForLockedViews(containerId, positionX, positionY);
Parameters description:
containerId (string) - container id from which pan operation was performed (to ignore provided container).positionX (number) - position x coordinates.positionY (number) - position y coordinates.Sets active measurement tool type.
viewportsCore.measurementsController.setActiveMeasurementType(measurementType);
Parameter description:
measurementType (string) - measurement tool type.Possible measurement tool types: ruler, angle, polyline, oval, area, volume, VTI, cobb-angle, roi, flexpoly, pencil and none.
Returns currently active measurement tool type.
viewportsCore.measurementsController.getActiveMeasurementType();
Creates new measurement to viewport container based on provided measurement data. Measurement id is unique per viewport, new measurements with same id will not be created twice.
viewportsCore.measurementsController.createNewMeasurement(containerId, measurementData);
Parameters description:
containerId (string) - container id.measurementData (object) - measurement data object based on which new measurement will be created.Measurement data object example can be found in Measurement data models section.
Creates new measurements to viewport container based on provided measurements data array.
viewportsCore.measurementsController.createNewMeasurements(containerId, measurementsData);
Parameters description:
containerId (string) - container id.measurementsData (array) - array with measurement data objects based on which new measurements will be created to viewport container.Returns array with measurements data based on provided viewports container id.
viewportsCore.measurementsController.getMeasurementsDataByContainerId(containerId);
Parameter description:
containerId (string=) - optional parameter to define needed container id. If not provided, then data for currently active viewport container is returned.Returns measurement data by provided container id and measurement id.
viewportsCore.measurementsController.getMeasurementDataById(containerId, measurementId);
Parameters description:
containerId (string) - container id.measurementId (string) - measurement id.In all viewports, deletes all measurements with provided measurement id.
viewportsCore.measurementsController.deleteMeasurementById(measurementId);
Parameter description:
measurementId (string) - measurement id.In all viewports, deletes all measurements based on provided measurement ids array.
viewportsCore.measurementsController.deleteMeasurementsByIds(measurementIds);
Parameter description:
measurementIds (array) - array of measurement ids.Deletes selected measurements.
viewportsCore.measurementsController.deleteSelectedMeasurements();
Updates measurement in viewport container based on provided measurement data.
viewportsCore.measurementsController.updateMeasurement(containerId, measurementData);
Parameters description:
containerId (string) - container id.measurementData (object) - measurement data object based on which old measurement will be updated with new data.Updates measurements in viewport container based on provided measurements data array.
viewportsCore.measurementsController.updateMeasurements(containerId, measurementsData);
Parameters description:
containerId (string) - container id.measurementsData (array) - array with measurement data objects based on which old measurements will be updated with new data.Updates measurement in viewport container with provided new measurement id.
viewportsCore.measurementsController.updateMeasurementId(containerId, oldMeasurementId, newMeasurementId);
Parameters description:
containerId (string) - container id.oldMeasurementId (string) - measurement id based on which measurement is found and updated to new id.newMeasurementId (string) - new measurement id.Marks measurement with matching measurement id. Unmarks all measurements that does not have matching measurement id.
viewportsCore.measurementsController.markMeasurementById(measurementId);
Parameter description:
measurementId (string) - measurement id.In all viewports, shows measurements with provided measurement id.
viewportsCore.measurementsController.showMeasurementById(measurementId);
Parameter description:
measurementId (string) - measurement id.In all viewports, hides measurements with provided measurement id.
viewportsCore.measurementsController.hideMeasurementById(measurementId);
Parameter description:
measurementId (string) - measurement id.Returns true if angles between intersecting rulers are enabled.
viewportsCore.measurementsController.isAngleBetweenIntersectingRulersEnabled();
Toggles angle between intersecting rulers.
viewportsCore.measurementsController.toggleAngleBetweenIntersectingRulers(isEnabled);
Parameter description:
isEnabled (boolean) - this parameter allows you to enable angle between intersecting rulers.Returns regular measurements color.
viewportsCore.measurementsSettings.getRegularColor();
Sets regular color to measurements that will be created.
viewportsCore.measurementsSettings.setRegularColor(regularColor);
Parameter description:
regularColor (string) - hex color code.Returns active measurement color.
viewportsCore.measurementsSettings.getActiveColor();
Sets active color to measurements that will be created.
viewportsCore.measurementsSettings.setActiveColor(activeColor);
Parameter description:
activeColor (string) - hex color code.Returns marked measurement color.
viewportsCore.measurementsSettings.getMarkedObjectColor();
Sets marked color to measurements that will be created.
viewportsCore.measurementsSettings.setMarkedObjectColor(markedObjectColor);
Parameter description:
markedObjectColor (string) - hex color code.Returns active measurement label color.
viewportsCore.measurementsSettings.getActiveLabelColor();
Sets active label color to measurements that will be created.
viewportsCore.measurementsSettings.setActiveLabelColor(activeLabelColor);
Parameter description:
activeLabelColor (string) - hex color code.Triggered when measurement tool is activated.
Event constant: measurement-activated or viewportsCore.getConstants().MEASUREMENT_EVENTS.MEASUREMENT_ACTIVATED.
To use this event:
viewportsCore.registerEvent('measurement-activated', (measurementType) => console.log(measurementType));
Triggered when measurement is created.
Event constant: measurement-created or viewportsCore.getConstants().MEASUREMENT_EVENTS.MEASUREMENT_CREATED.
To use this event:
viewportsCore.registerEvent('measurement-created', (data) => console.log(data));
Triggered when measurement is deleted.
Event constant: measurement-deleted or viewportsCore.getConstants().MEASUREMENT_EVENTS.MEASUREMENT_DELETED.
To use this event:
viewportsCore.registerEvent('measurement-deleted', (data) => console.log(data));
Triggered when all measurements are deleted from viewport container.
Event constant: all-measurements-deleted or viewportsCore.getConstants().MEASUREMENT_EVENTS.ALL_MEASUREMENTS_DELETED.
To use this event:
viewportsCore.registerEvent('all-measurements-deleted', (containerId) => console.log(containerId));
const measurementData = {
id: 'ruler-id-1',
type: 'ruler',
containerId: 'viewport-container-1-1',
studyUid: 'study-uid-1',
seriesUid: 'series-uid-1',
instanceUid: 'instance-uid-1',
colors: {
regularColor: '#FFA500',
activeColor: '#33CCFF',
markedColor: '#009BFF',
activeLabelColor: '#FFF'
},
data: {
startPosition: [25, 0, 0],
endPosition: [75, 50, 0],
length: '70.71 mm'
}
};
const measurementData = {
id: 'angle-id-1',
type: 'angle',
containerId: 'viewport-container-1-1',
studyUid: 'study-uid-1',
seriesUid: 'series-uid-1',
instanceUid: 'instance-uid-1',
colors: {
regularColor: '#FFA500',
activeColor: '#33CCFF',
markedColor: '#009BFF',
activeLabelColor: '#FFF'
},
data: {
startPosition: [59, 238, 42],
middlePosition: [148, 169, 42],
endPosition: [88, 70, 42],
angle: '96.57°'
}
};
const measurementData = {
id: 'polyline-id-1',
type: 'polyline',
containerId: 'viewport-container-1-1',
studyUid: 'study-uid-1',
seriesUid: 'series-uid-1',
instanceUid: 'instance-uid-1',
colors: {
regularColor: '#FFA500',
activeColor: '#33CCFF',
markedColor: '#009BFF',
activeLabelColor: '#FFF'
},
data: {
points: [
[50, 31, 42],
[10, 131, 42],
[125, 16, 42]
],
length: '270.34 mm'
}
};
const measurementData = {
id: 'oval-id-1',
type: 'oval',
containerId: 'viewport-container-1-1',
studyUid: 'study-uid-1',
seriesUid: 'series-uid-1',
instanceUid: 'instance-uid-1',
colors: {
regularColor: '#FFA500',
activeColor: '#33CCFF',
markedColor: '#009BFF',
activeLabelColor: '#FFF'
},
data: {
centerPosition: [106, 73, 42],
xRadius: 45,
yRadius: 29,
ovalValues: 'Mean: 46.25 HU SD: 146.88 HU\r\nMin: -164.00 HU Max: 781.00 HU\r\nArea: 32.09 cm² (W: 7.96 cm H: 5.13 cm)'
}
};
const measurementData = {
id: 'area-id-1',
type: 'area',
containerId: 'viewport-container-1-1',
studyUid: 'study-uid-1',
seriesUid: 'series-uid-1',
instanceUid: 'instance-uid-1',
colors: {
regularColor: '#FFA500',
activeColor: '#33CCFF',
markedColor: '#009BFF',
activeLabelColor: '#FFF'
},
data: {
points: [
[142, 64, 42],
[174, 114, 42],
[69, 162, 42],
[5, 112, 42],
[91, 66, 42]
],
area: '9441.00 mm²'
}
};
const measurementData = {
id: 'volume-id-1',
type: 'volume',
containerId: 'viewport-container-1-1',
studyUid: 'study-uid-1',
seriesUid: 'series-uid-1',
instanceUid: 'instance-uid-1',
colors: {
regularColor: '#FFA500',
activeColor: '#33CCFF',
markedColor: '#009BFF',
activeLabelColor: '#FFF'
},
data: {
lines: [
{
startPosition: [174, 46, 42],
endPosition: [114, 65, 42]
},
{
startPosition: [114, 65, 42],
endPosition: [149, 115, 42]
},
{
startPosition: [149, 115, 42],
endPosition: [201, 90, 42]
},
{
startPosition: [201, 90, 42],
endPosition: [174, 46, 42]
}
],
separatorLine: {
startPosition: [174, 46, 42],
endPosition: [149, 115, 42]
},
volumeValues: 'Length: 232.15 mm\r\nArea: 3285.92 mm²\r\nVolume: 152438.44 mm³'
}
};
const measurementData = {
id: 'vti-id-1',
type: 'VTI',
containerId: 'viewport-container-1-1',
studyUid: 'study-uid-1',
seriesUid: 'series-uid-1',
instanceUid: 'instance-uid-1',
colors: {
regularColor: '#FFA500',
activeColor: '#33CCFF',
markedColor: '#009BFF',
activeLabelColor: '#FFF'
},
data: {
points: [ //Studies for VTI measurement does not have parameters to calculate 3D coordiantes
{x: 146, y: 260},
{x: 266, y: 218},
{x: 386, y: 218}
],
vtiValues: 'Vmax: 0.47 m/s\r\nVmean 0.34 m/s\r\nPmax: 0.89 mmHg\r\nPmean: 0.56 mmHg\r\nVTI: 60.42 cm'
}
};
const measurementData = {
id: 'cobb-angle-id-1',
type: 'cobb-angle',
containerId: 'viewport-container-1-1',
studyUid: 'study-uid-1',
seriesUid: 'series-uid-1',
instanceUid: 'instance-uid-1',
colors: {
regularColor: '#FFA500',
activeColor: '#33CCFF',
markedColor: '#009BFF',
activeLabelColor: '#FFF'
},
data: {
lines: [
{
startPosition: [14, 168, 42],
endPosition: [68, 247, 42]
},
{
startPosition: [66, 128, 42],
endPosition: [101, 262, 42]
},
{
startPosition: [44, 212, 42],
endPosition: [84, 196, 42]
}
],
angle: '19.72°',
distance: '43.08 mm'
}
};
const measurementData = {
id: 'roi-id-1',
type: 'roi',
containerId: 'viewport-container-1-1',
studyUid: 'study-uid-1',
seriesUid: 'series-uid-1',
instanceUid: 'instance-uid-1',
colors: {
regularColor: '#FFA500',
activeColor: '#33CCFF',
markedColor: '#009BFF',
activeLabelColor: '#FFF'
},
data: {
points: [
[101, 254, 42],
[139, 281, 42],
[120, 310, 42],
[51, 316, 42],
[55, 275, 42]
]
}
};
const measurementData = {
id: 'flexpoly-id-1',
type: 'flexpoly',
containerId: 'viewport-container-1-1',
studyUid: 'study-uid-1',
seriesUid: 'series-uid-1',
instanceUid: 'instance-uid-1',
colors: {
regularColor: '#FFA500',
activeColor: '#33CCFF',
markedColor: '#009BFF',
activeLabelColor: '#FFF'
},
data: {
points: [
[122, 91, 42],
[121, 91, 42],
[119, 90, 42],
[116, 90, 42],
[113, 89, 42],
],
area: '3.91 mm²'
}
};
const measurementData = {
id: 'pencil-id-1',
type: 'pencil',
containerId: 'viewport-container-1-1',
studyUid: 'study-uid-1',
seriesUid: 'series-uid-1',
instanceUid: 'instance-uid-1',
colors: {
regularColor: '#FFA500',
activeColor: '#33CCFF',
markedColor: '#009BFF',
activeLabelColor: '#FFF'
},
data: {
points: [
[0, 112, 42],
[1, 112, 42],
[1, 111, 42],
[2, 112, 42],
[3, 113, 42],
[4, 114, 42],
]
}
};
Enables landmark functionality and add callback event.
viewportsCore.landmarksController.enable(yourCallback);
viewportsCore.landmarksController.enable((landmarkData) => console.log(landmarkData));
Parameter description:
landmarkData (object) - object contains information about added landmark. Landmark information:studyUid (string) - study unique identification;frameOfReferenceUid (string) - frame of reference unique identification;points (array) - 3 landmark points array with x, y, z coordinates.
Array example: [[-7.2, 1.8, -2.5], [-6.5, -1.5, -282.5], [5.5, 8.3, -29.5]].Disables landmark.
viewportsCore.landmarksController.disable(yourCallback);
Enables landmark tool and starts drawing landmark.
viewportsCore.landmarksController.createLandmark();
Creates landmark in viewports by stored landmark data.
viewportsCore.landmarksController.addLandmark(landmarkData);
Parameter description:
landmarkData (object) - object with landmark data information:studyUid (string) - study unique identification;frameOfReferenceUid (string) - frame of reference unique identification;points (array) - 3 landmark points array with x, y, z coordinates.
Array example: [[-7.2, 1.8, -2.5], [-6.5, -1.5, -282.5], [5.5, 8.3, -29.5]].Removes created or added landmark.
viewportsCore.landmarksController.removeLandmark(referenceUid);
Parameter description:
referenceUid (string) - frame of reference uid.Returns landmark data by frame of reference uid.
viewportsCore.landmarksController.getLandmarkData(referenceUid);
Parameter description:
referenceUid - frame of reference uid.Findings object description:
findings (object) - object with MG lesion AI data information:mamilla (object) - mamilla object:point (object) - mamilla point x and y coordinates;radius (number=) - optional parameter to define mamilla radius. Default value: 40;isEditable (boolean=) - optional parameter to define if mamilla is editable. Default value: true;isVisible (boolean=) - optional parameter to define if mamilla is visible. Default value: true;style (object=) - optional mamilla style object:color (string=) - optional parameter to define mamilla color. Default value: #E72828;lineWidth (number=) - optional parameter to define mamilla line width. Default value: 2.muscleLine (object) - muscle line object:startPoint (object) - start point x and y coordinates;endPoint (object) - end point x and y coordinates;isEditable (boolean=) - optional parameter to define if muscle line is editable. Default value: true;isVisible (boolean=) - optional parameter to define if muscle line is visible. Default value: true;style (object=) - optional muscle line style object:color (string=) - optional parameter to define muscle line color. Default value: #E72828;lineWidth (number=) - optional parameter to define muscle line width. Default value: 2;dashedLine (boolean=) - optional parameter to define if muscle line is dashed. Default value: false.regionLines (array) - array of region line objects:regionLine (object) - region line object:uid (string) - region line uid;startPoint (object) - start point x and y coordinates;middlePoint (object) - middle point x and y coordinates;endPoint (object) - end point x and y coordinates;isEditable (boolean=) - optional parameter to define if region line is editable. Default value: true;isVisible (boolean=) - optional parameter to define if region line is visible. Default value: true;style (object=) - optional region line style object:color (string=) - optional parameter to define region line color. Default value: #0D88B5;lineWidth (number=) - optional parameter to define region line width. Default value: 2;dashedLine (boolean=) - optional parameter to define if region line is dashed. Default value: false.lesions (array) - array of lesion objects:ellipseLesion (object) - ellipse lesion object:uid (string) - ellipse lesion uid;type (string) - ellipse lesion type (ellipse-lesion);point (object) - ellipse center point x and y coordinates;xRadius (number) - ellipse x radius;yRadius (number) - ellipse y radius;rotationAngle (number=) - optional parameter to define ellipse lesion rotation angle. Default value: 0;isEditable (boolean=) - optional parameter to define if lesion is editable. Default value: true;isVisible (boolean=) - optional parameter to define if lesion is visible. Default value: true;style (object=) - optional lesion style object:color (string=) - optional parameter to define lesion color. Default value: #0E5715;activeColor (string=) - optional parameter to define lesion active color. Default value: #33CCFF;markedColor (string=) - optional parameter to define lesion marked color. Default value: #009BFF;fillColor (string=) - optional parameter to define lesion fill color. Default value: #0E5715;fillOpacity (number=) - optional parameter to define lesion fill opacity. Default value: 0.2.polylineLesion (object) - polyline lesion object:uid (string) - polyline lesion uid;type (string) - polyline lesion type (polyline-lesion);points (array) - array of polyline lesion points. Example: [{x: 10, y: 15}, {x: 15, y: 15}, {x: 10, y: 20}];isEditable (boolean=) - optional parameter to define if lesion is editable. Default value: true;isVisible (boolean=) - optional parameter to define if lesion is visible. Default value: true;style (object=) - optional lesion style object:color (string=) - optional parameter to define lesion color. Default value: #C6C413;activeColor (string=) - optional parameter to define lesion active color. Default value: #33CCFF;markedColor (string=) - optional parameter to define lesion marked color. Default value: #009BFF;fillColor (string=) - optional parameter to define lesion fill color. Default value: #C6C413;fillOpacity (number=) - optional parameter to define lesion fill opacity. Default value: 0.2.Creates MG lesion in to provided layout container.
viewportsCore.mgLesionsController.createMGLesion(containerId, findings);
Parameters description:
containerId (string) - layout container id.findings (object) - findings data object.Removes created MG lesion from provided layout container and instance.
viewportsCore.mgLesionsController.removeMGLesion(containerId, instanceUid);
Parameters description:
containerId (string) - layout container id.instanceUid (string) - instance uid.Returns created MG lesion measurement tool.
viewportsCore.mgLesionsController.getMGLesion(containerId, instanceUid);
Parameters description:
containerId (string) - layout container id.instanceUid (string) - instance uid.Returns created MG lesions.
viewportsCore.mgLesionsController.getMGLesions();
Confirms selected lesion with provided center point.
viewportsCore.mgLesionsController.confirmSelectedLesion(centerPoint);
Parameter description:
centerPoint (object) - center point object with x and y coordinates. For example: {x: 250, y: 350}.Deletes selected lesion.
viewportsCore.mgLesionsController.deleteSelectedLesion();
Changes mamilla isEditable status.
viewportsCore.mgLesionsController.changeMamillaIsEditableStatus(containerId, isEditable);
Parameters description:
containerId (string) - layout container id.isEditable (boolean) - is mamilla editable status.Changes muscle line isEditable status.
viewportsCore.mgLesionsController.changeMuscleLineIsEditableStatus(containerId, isEditable);
Parameters description:
containerId (string) - layout container id.isEditable (boolean) - is muscle line editable status.Changes desired region line isEditable status.
viewportsCore.mgLesionsController.changeRegionLineIsEditableStatus(containerId, regionLineUid, isEditable);
Parameters description:
containerId (string) - layout container id.regionLineUid (string) - region line uid.isEditable (boolean) - is region line editable status.Changes desired lesion isEditable status.
viewportsCore.mgLesionsController.changeLesionIsEditableStatus(containerId, lesionUid, isEditable);
Parameters description:
containerId (string) - layout container id.lesionUid (string) - lesion uid.isEditable (boolean) - is lesion editable status.Changes mamilla isVisible status.
viewportsCore.mgLesionsController.changeMamillaIsVisibleStatus(containerId, isVisible);
Parameters description:
containerId (string) - layout container id.isVisible (boolean) - is mamilla visible status.Changes muscle line isVisible status.
viewportsCore.mgLesionsController.changeMuscleLineIsVisibleStatus(containerId, isVisible);
Parameters description:
containerId (string) - layout container id.isVisible (boolean) - is muscle line visible status.Changes desired region line isVisible status.
viewportsCore.mgLesionsController.changeRegionLineIsVisibleStatus(containerId, regionLineUid, isVisible);
Parameters description:
containerId (string) - layout container id.regionLineUid (string) - region line uid.isVisible (boolean) - is region line visible status.Changes desired lesion isVisible status.
viewportsCore.mgLesionsController.changeLesionIsVisibleStatus(containerId, lesionUid, isVisible);
Parameters description:
containerId (string) - layout container id.lesionUid (string) - lesion uid.isVisible (boolean) - is lesion visible status.Updates mamilla data based on provided mamilla data object.
viewportsCore.mgLesionsController.updateMamillaData(containerId, mamillaData);
Parameters description:
containerId (string) - layout container id.mamillaData (object) - mamilla data object:point (object) - point object with x and y coordinates.Updates muscle line data based on provided muscle line data object.
viewportsCore.mgLesionsController.updateMuscleLineData(containerId, muscleLineData);
Parameters description:
containerId (string) - layout container id.muscleLineData (object) - muscle line data object:startPoint (object) - start point x and y coordinates;endPoint (object) - end point x and y coordinates.Updates region line data based on provided region line data object.
viewportsCore.mgLesionsController.updateRegionLineData(containerId, regionLineData);
Parameters description:
containerId (string) - layout container id.regionLineData (object) - region line data object:uid (string) - region line uid;startPoint (object) - start point x and y coordinates;middlePoint (object) - middle point x and y coordinates;endPoint (object) - end point x and y coordinates.Updates lesion data based on provided lesion data object.
viewportsCore.mgLesionsController.updateLesionData(containerId, lesionData);
Parameters description:
containerId (string) - layout container id.lesionData (object) - lesion data object for ellipse lesion:
uid (string) - lesion uid;type (string) - lesion object type: ellipse-lesion;point (object) - ellipse center point x and y coordinates;xRadius (object) - ellipse x radius.yRadius (object) - ellipse y radius.rotationAngle (object) - ellipse rotation angle.lesionData (object) - lesion data object for polyline lesion:
uid (string) - lesion uid;type (string) - lesion object type: polyline-lesion;points (array) - array of polyline lesion points. Example: [{x: 10, y: 15}, {x: 15, y: 15}, {x: 10, y: 20}].Triggered when mg lesion is selected.
Event constant: mg-lesion-selected or viewportsCore.getConstants().MG_LESION_EVENTS.MG_LESION_SELECTED.
To use this event:
viewportsCore.registerEvent('mg-lesion-selected', (data) => console.log(data));
Triggered when mg lesion is deselected.
Event constant: mg-lesion-deselected or viewportsCore.getConstants().MG_LESION_EVENTS.MG_LESION_DESELECTED.
To use this event:
viewportsCore.registerEvent('mg-lesion-deselected', (data) => console.log(data));
Triggered when mg lesion is confirmed.
Event constant: mg-lesion-confirmed or viewportsCore.getConstants().MG_LESION_EVENTS.MG_LESION_CONFIRMED.
To use this event:
viewportsCore.registerEvent('mg-lesion-confirmed', (data) => console.log(data));
Triggered when mg lesion is deleted.
Event constant: mg-lesion-deleted or viewportsCore.getConstants().MG_LESION_EVENTS.MG_LESION_DELETED.
To use this event:
viewportsCore.registerEvent('mg-lesion-deleted', (data) => console.log(data));
Triggered when mg lesion element is edited.
Event constant: mg-lesion-element-edited or viewportsCore.getConstants().MG_LESION_EVENTS.MG_LESION_ELEMENT_EDITED.
To use this event:
viewportsCore.registerEvent('mg-lesion-element-edited', (data) => console.log(data));
To register event use:
viewportsCore.registerEvent('event-constant', callback);
To remove remove:
viewportsCore.removeEvent('event-constant', callback);
Triggered when active container has changed.
Event constant: active-container-changed or viewportsCore.getConstants().CORE_EVENTS.ACTIVE_CONTAINER_CHANGED.
To use this event:
viewportsCore.registerEvent('active-container-changed', (containerId) => console.log(containerId));
Callback parameter:
containerId (string) - active container id.Triggered when active viewport has changed.
Event constant: active-viewport-changed or viewportsCore.getConstants().CORE_EVENTS.ACTIVE_VIEWPORT_CHANGED.
To use this event:
viewportsCore.registerEvent('active-viewport-changed', (viewportId) => console.log(viewportId));
Callback parameter:
viewportId (string) - active viewport id.Triggered when new instance has opened to viewport.
Event constant: viewport-instance-changed or viewportsCore.getConstants().CORE_EVENTS.VIEWPORT_INSTANCE_CHANGED.
To use this event:
viewportsCore.registerEvent('viewport-instance-changed', (viewportId, instanceUid) => console.log(viewportId, instanceUid));
Callback parameters:
viewportId (string) - viewport id.instanceUid (string) - instance uid.Triggered when fullscreen container has been set.
Event constant: set-fullscreen-container or viewportsCore.getConstants().CORE_EVENTS.SET_FULLSCREEN_CONTAINER.
To use this event:
viewportsCore.registerEvent('set-fullscreen-container', (containerId) => console.log(containerId));
Callback parameter:
containerId (string) - active container id.Triggered when image rotation has changed.
Event constant: image-rotation-changed or viewportsCore.getConstants().CORE_EVENTS.IMAGE_ROTATION_CHANGED.
To use this event:
viewportsCore.registerEvent('image-rotation-changed', ({degrees, containerId}) => console.log(degrees, containerId));
Callback parameters:
degrees (number) - instance rotation degrees.containerId (string) - container id.Triggered when image position has changed.
Event constant: image-position-changed or viewportsCore.getConstants().CORE_EVENTS.IMAGE_POSITION_CHANGED.
To use this event:
viewportsCore.registerEvent('image-position-changed', ({imagePosition, containerId}) => console.log(imagePosition, containerId));
Callback parameters:
imagePosition (object) - instance position coordinates.containerId (string) - container id.Triggered when synced images zoom has changed.
Event constant: zoom-changed or viewportsCore.getConstants().CORE_EVENTS.ZOOM_CHANGED.
To use this event:
viewportsCore.registerEvent('zoom-changed', ({scale, point, containerId}) => console.log(scale, point, containerId));
Callback parameters:
scale (number) - scale size.point (object) - the point coordinates from which to zoom in or out.containerId (string) - container id.Triggered when viewport scale has changed.
Event constant: viewport-scale-changed or viewportsCore.getConstants().CORE_EVENTS.VIEWPORT_SCALE_CHANGED.
To use this event:
viewportsCore.registerEvent('viewport-scale-changed', ({scale, containerId}) => console.log(scale, containerId));
Callback parameters:
scale (number) - scale size.containerId (string) - container id.Event gives callback when the viewport is deleted or when the viewport disappears on layout change.
Event constant: container-cleaned or viewportsCore.getConstants().CORE_EVENTS.CONTAINER_CLEANED.
To use this event:
viewportsCore.registerEvent('container-cleaned', (container) => console.log(container));
Callback parameter:
container (object) - object with container information:containerId (string) - cleaned container id.viewportId (string) - cleaned viewport id.Triggered on viewport loader change.
Event constant: viewport-loader or viewportsCore.getConstants().CORE_EVENTS.VIEWPORT_PRELOADER.
To use this event:
viewportsCore.registerEvent('viewport-loader', (object) => console.log(object));
Callback parameter:
object (object) - object with loader information:containerId (string) - container id.status (bool) - status of loader.progress (string) - loader progress status "loading" or "finished".Triggered on viewport progress loader change.
Event constant: progress-loader or viewportsCore.getConstants().CORE_EVENTS.PROGRESS_LOADER.
To use the event:
viewportsCore.registerEvent('progress-loader', (object) => console.log(object));
Callback parameter:
object (object) - object with progress loader information:containerId (string) - container id.status (bool) - status of loader.progress (number) - loader progress value.Triggered when viewport container size changed and viewport had to be resized.
Event constant: viewport-resized or viewportsCore.getConstants().CORE_EVENTS.VIEWPORT_RESIZED.
To use this event:
viewportsCore.registerEvent('viewport-resized', (containerId, viewportId) => console.log(containerId, viewportId));
Callback parameters:
containerId (string) - container id.viewportId (string) - viewport id.List of additional configuration options for viewports core.
Parameter batchImageRequests enables grouping of multiple image pixel download requests into one batch request.
Usage example:
const configuration = {
features: {
batchImageRequests: true
}
};
viewportsCore.create(configuration);
Configuration object requestsConfiguration allows customisation of maximum number active downloads and desired batch request sizes.
Object requestsConfiguration parameters description:
requestsConfiguration (object=) - optional object with requests configuration.maximumMetadataStreams (number) - maximum parallel streams of series metadata. Default value: 5.maximumPixelStreams (number) - maximum parallel streams of pixels. Default value: 15.maximumMultiFrameStreams (number) - maximum parallel streams of multi frames. Default value: 4.batchSizeMb (number) - desired batch request size limit in megabytes. Default value: 5.multiFrameBatchSizeMb (number) - desired batch request size limit in megabytes for multi-frame image pixels. Default value: 2.Usage example:
const configuration = {
requestsConfiguration: {
maximumMetadataStreams: 5,
maximumPixelStreams: 15,
maximumMultiFrameStreams: 4,
batchSizeMb: 5,
multiFrameBatchSizeMb: 2
}
};
viewportsCore.create(configuration);
Recommended configuration example with enabled image pixel request grouping and requestsConfiguration object:
const configuration = {
features: {
batchImageRequests: true
},
requestsConfiguration: {
maximumMetadataStreams: 5,
maximumPixelStreams: 15,
maximumMultiFrameStreams: 4,
batchSizeMb: 5,
multiFrameBatchSizeMb: 2
}
};
viewportsCore.create(configuration);
List of viewports-core integration changes.
markMeasurementById to mark measurement by provided measurement id.updateMeasurement to update old measurement with new data.updateMeasurements to update multiple old measurements with new data.updateMeasurementId to update measurement with new provided id.updateMeasurement, updateMeasurements and updateMeasurementId functions.getMeasurementsDataByContainerId and getMeasurementDataById functions to return each measurement color data object.createNewMeasurement and createNewMeasurements functions to create new measurements based on provided color data object.Measurement data models documentation section with measurement color data object examples.Measurement data models documentation section with measurement value examples.Measurement data models documentation section.Change viewport orientation documentation section with information how series and instance uid's are generated.createNewMeasurements to create multiple measurements from data at once.deleteMeasurementsByIds to delete multiple measurements at once.createNewMeasurements and deleteMeasurementsByIds functions.createNewMeasurement function, to retain provided measurement id and ensure that multiple measurements with the same id cannot be created in single viewport.deleteMeasurementById function, to delete measurements with same id across all viewports.showMeasurementById function, to show measurements with same id across all viewports.hideMeasurementById function, to hide measurements with same id across all viewports.getMeasurementDataById function, to accept container id in which measurement will be searched.vtk-library updated to version 1.0.15.
Initial set up documentation section. Added information about needed build changes and how to lazy load viewportsCore library.Measurements controller, Measurement settings and Measurement events documentation section.setActiveMeasurementId, getActiveMeasurementId and deleteSelectedMeasurements functions to measurements controller.setActiveMeasurementId function name to setActiveMeasurementType.getActiveMeasurementId function name to getActiveMeasurementType.Additional viewports core configuration section with new configuration descriptions and examples for data requests..viewport-container class style in Set up section example.Oblique MPR functions section in documentation.vtk-library updated to version 1.0.6.
MG lesion AI section in documentation.Additional viewports core configuration section in documentation.Change log section in documentation.vtk-library updated to version 1.0.4.
vtk-library updated to version 1.0.3.
Set up documentation section.loadStudyWithHIS and loadStudiesWithHIS functions.
If loadStudiesWithHIS function is used for integration, then studyUid parameter used in studiesToLoad array has to be renamed to study.
No changes are needed for integrations with loadStudyWithHIS function.viewportsCore.loadStudiesWithHIS(studiesToLoad) function studiesToLoad parameter description.