Ability to customize style of controls and annotations

[hackermd]

At the moment, regions of interest (geometries rendered by the viewer) and controls (buttons for the overview map, fullscreen mode, etc.) are rendered with the Openlayers default style. We want to allow an application to customize styling, such that the style of library elements can be matched to that of the application.

Openlayers provides a nice styling API (see Style). The following types may be worth looking into:

• Fill
• Stroke
• Text

However, we don't want to expose the Openlayers API directly. We could either wrap Openlayers classes or implement our own styling logic.

Further, we may want to override some Openlayers CSS classes, such that an application can specify dicom-microscopy-viewer rather than Openlayers CSS.

[biharck]

Hello @hackermd, My idea is to add the style's properties as an option at the constructor level
https://github.com/dcmjs-org/dicom-microscopy-viewer/blob/master/src/api.js#L186

and then, set the style properties at the VectorLayer:
https://github.com/dcmjs-org/dicom-microscopy-viewer/blob/master/src/api.js#L519

In the end of this MVP, styling might look like this example:
https://openlayers.org/en/latest/examples/polygon-styles.html?q=style

As you mentioned, we could wrap some styling tools from OpenLayers and expose them all, or customize some styling features such as Cornerstone does, like https://github.com/cornerstonejs/cornerstoneTools/blob/master/src/stateManagement/toolColors.js

I prefer the second option, it looks more controlled by Microscopy than OpenLayers.

Are you aiming to end users styling each geometry with a different color? Or is it just a single style for all geometries?

What do you think?

[hackermd]

I like the idea of adding style parameters to the constructor. We will also need to add those to the activateDrawInteraction() method (see use case below).

Are you aiming to end users styling each geometry with a different color? Or is it just a single style for all geometries?

Definitely. Users may want to draw ROIs for different categories (e.g. "diseased" vs "normal") and display them in different colors.

we could wrap some styling tools from OpenLayers and expose them all, or customize some styling features such as Cornerstone does

I would also prefer to implement an abstraction layer that is independent from OpenLayers, which should be motivated by microscopy/medical imaging use cases. However, I like the way the OpenLayers Style API is implemented - maybe we can draw inspiration from it.

[hackermd]

We may also want to allow users to change some of the styles via CSS, for example color or line thickness of selected or modified ROIs.

To which extent do we want to abstract OpenLayers CSS?

Users may want to customize the style of controls via CSS (e.g., the position of the overview map or the fullscreen button):
https://github.com/dcmjs-org/dicom-microscopy-viewer/blob/061b483cd4c6872db57fc9df4af936a1c002fc9d/src/api.js#L553-L560

Since we want to fully abstract OpenLayers, we don't want to rely on OpenLayers CSS classes, but provide our own.

[hackermd]

@swederik @biharck Do we want to handle display of ROI Measurements or Qualitative Evaluations? We could store those values on ROI.properties and allow applications to render them next to the geometry (i.e. SCOORD3D). However, this would require the ability to define where and how these should be displayed as text. Do we want to handle this in the library or require an application to do this?

[hackermd]

This feature has meanwhile been implemented and is available since version 0.22.0.