Broadcast channel demo

[will-moore]

Experimental WIP...

This adds a couple of BroadcastChannel hooks to handle selection of Shapes or adding of ROIs to the iviewer.

To test broadcasting TO the iviewer...:

• Open iviewer and Show ROIs
• Then, in the dev Console on another page, under the same host (e.g. webclient page) enter the following code to select an Image in iviewer

const bc = new BroadcastChannel("image_selected")
bc.postMessage(1689)

• To select a Shape on the Image, using "roiId:shapeId" (The Shape needs to be showing in the ROI table):

const selectshapes = new BroadcastChannel("shape_selection");
selectshapes.postMessage({"id":"123:456"});

• The following code should show a Polygon on the Image (IDs here are not important - the ROI doesn't have to exist on the image: useful if the image has many ROIs that aren't loaded).

const addrois = new BroadcastChannel("add_rois");
addrois.postMessage([
    {
        "@type": "http://www.openmicroscopy.org/Schemas/OME/2016-06#ROI",
        "@id": 1063,
        "shapes": [
            {
                "@type": "http://www.openmicroscopy.org/Schemas/OME/2016-06#Polygon",
                "@id": 1142,
                "omero:details": {
                    "permissions": {}
                },
                "FillColor": -256,
                "StrokeColor": -65281,
                "StrokeWidth": {
                    "Value": 5.0
                },
                "TheT": 0,
                "TheZ": 0,
                "Points": "15.42187499999983,127.82226562499972 85.42187499999983,107.82226562499972 45.42187499999983,68.33496093749972 75.42187499999983,118.68261718749972 76.6435546874998,21.8857421874997"
            }
        ]
    }
])

To test handling events FROM iviewer:

• Handle image selection: - this will simply log the image ID: 1234

const bc = new BroadcastChannel("iviewer_image_selected")
bc.onmessage = (event) => {
    console.log(event.data)
};

• Handle shape selection; - this will simply log the selected 'roiid:shapeid' list e.g.: ["123:456", "23:88"]

const bc = new BroadcastChannel("iviewer_shape_selection")
bc.onmessage = (event) => {
    console.log(event.data)
};