Install viewportsCore from npm:
npm install viewports-core
To access viewports core functions you will need to use global viewportsCore variable.
To create simple viewer first of all you should create html file like this:
<!--index.html file-->
<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>
...
<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.
Then you need to initialize viewportsCore, add your created layout container and load your desired study:
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);
});
Here you will find 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.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();
Measurements id: none, ruler, angle, polyline, oval, volume, VTI, cobb-angle, roi;
Measurements related functions:
viewportsCore.setActiveMeasurementId(`ruler`);
viewportsCore.getActiveMeasurementId();
viewportsCore.getActiveViewport().deleteMeasurements();
viewportsCore.enableAngleBetweenIntersectingRulers();
viewportsCore.disableAngleBetweenIntersectingRulers();
viewportsCore.isEnableAngleBetweenIntersectingRulers();
viewportsCore.enableIntensity();
viewportsCore.disableIntensity();
viewportsCore.isEnableIntensity();
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.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.
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.