Display channel names on top of the image

RFSH commented 3 years ago

This PR will add basic channel labels on top of the image. The labels will be responsive based on the selected hue value.

What's left:

Labels should be added to the screenshot as well.
There should be a limit on number of visible labels.

We still need to discuss the following:

Currently I'm only doing this for multi-channels. Should I change it?
Is the UI acceptable?

Related issue: #87

rastogi-bhavya commented 3 years ago

Channel Names over OSD

The set of visible channels are shown over the OSD with the following properties

Only a limited number of channels names will be shown (under the present conditions the names which can fit in 3 lines)
If all the channel names can't be shown, then ..., in white color, would be shown at the end of the last line.
The color of the channel name text would be the same as the channel name itself.
Each line showing the channels will have a black background, and 2 consecutive lines would have space between them.

Channel Names in the screenshot

The channel names that appear in the screenshot have the same implementation as those that appear over the OSD, and therefore follow the same logic. The only difference is that, they are added using canvas logic, instead of css.

Implementation

Create an array containing the channel properties (name, channel_color) for each visible channel.
Determine the font size of the text. This is done by starting from a max value and decrementing to a certain min value, until all the channel names are fit in the 3 lines. For eg., we start at font: 20, and find out that all the names can't fit. We then decrease the font by 2, (new font: 18), and do the same check. This is done until either the content fits or we reach the min value.
There could be long channel names that won't fit into a single line. For such cases we are updating the channel names that are displayed, by removing 1 character from the RHS, until the name fits and adding ... at the end, indicating that the channel name have been truncated.
After updating the channel names we add channel names to the lines.

rastogi-bhavya commented 3 years ago

Make sure that screenshot and what we are displaying are the same.

RFSH commented 3 years ago

Now that the functionality is in place, you should spend some time refactoring and documenting,

Having two sets of functions that are doing almost the same thing is confusing and hard to maintain. So either:
- Merge them into one function and pass a parameter to the function to do things differently based on the parameter.
- Extract the common functionality into one function so the two functions call that one.
Based on what I saw, doing the first approach should work.
I don't like attaching these functions directly to viewer or Utils. Their names are very general and it could lead to more confusion. Assuming that you'd do what I suggested in the previous step, you could create a wrapper for all these function in the utils, so in utils.js:
```
function Utils() {
  this.channelNameOverlay = new ChannelNameOverlayUtils();
}

function ChannelNameOverlayUtils() {}

ChannelNameOverlayUtils.prototype.addChannelNames = function () {

}

// the rest of functions go here...
```
And now in viewer you would use this by doing this.utils.channelNameOverlay.addChannelNames and in Utils you could do this.channelNameOverlay.addChannelNames

informatics-isi-edu / openseadragon-viewer