SmartClient: How to paint outside of ImageViewerAddOn?

MIP
, , ,
1

Hello,

How to display overlay on the whole view item, not just the image part?

I’m based on the SCOverlayOnEvent example:

private void UI_DrawOverlay(ImageViewerAddOn addOn, DateTime dateTime)
{
    List<Shape> shapes = new List<Shape>();
    shapes.Add(CreateTextShape(addOn.PaintSize, addOn.CameraName, 10, 0, 50, Colors.Green));
 
    var rectangle = new System.Windows.Shapes.Rectangle();
    rectangle.StrokeThickness = 4;
    rectangle.Stroke = new SolidColorBrush(Color.FromArgb(255, 255, 0, 0));
    rectangle.Fill = System.Windows.Media.Brushes.Transparent;
    rectangle.HorizontalAlignment = HorizontalAlignment.Center;
    rectangle.VerticalAlignment = VerticalAlignment.Center;
    rectangle.Height = addOn.PaintSize.Height;
    rectangle.Width = addOn.PaintSize.Width;
    shapes.Add(rectangle);
 
    addOn.ShapesOverlayAdd(shapes, new ShapesOverlayRenderParameters() { ZOrder = 100 }));
}

This produces the following:

Screenshot 2020-12-16 090242
Screenshot 2020-12-16 090242617×480 46.5 KB

I would like the red rectangle to be at the border of the view square (including the black borders). I tried Canvas.SetTop or using addon.Size but that does not work.

2

You cannot draw outside the image area; this is by design that overlay can be made on the image area only.

In general you cannot control the black space around the image area, it will depend on whether the user uses the “Maintain Image aspect ratio” or not, and when using this how the user makes the Smart Client have a size where it fits the image aspect ratio of the camera setup.

3

Thanks.

We need this because our client wants a smart wall where cameras are visually grouped together using colors. They also want the camera name to be displayed differently than the default “white on black” text.

What do you reckon would be the simplest? Implement our own video player so we control the whole display?

4

Developing you own video client could be optimal.

If the “Smart Wall” does not need advanced capabilities but just present live footage framed by a color border and with different colors on a header label then it is not a huge task.

I would use the ImageViewerWpfControl and start with the PlaybackWpfUser sample for inspiration.

https://doc.developer.milestonesys.com/html/index.html?base=samples/playbackwpfuser.html&tree=tree_2.html

If you want capabilities that resemples the Smart Client it is a huge task, then it might prove a lesser task to develop a ViewItem for the Smart Client allowing for a lot of freedom to introduce new UI elements that could live up to the requirements.

You could explore the Video Preview plugin sample, the Smart Client plugin part of it, on how to make your own ViewItem and incorporate ImageViewerControl (or ImageViewerWpfControl) for easy handling of camera footage.

https://doc.developer.milestonesys.com/html/index.html?base=samples/videopreview_sample.html&tree=tree_1.html

5

@Bo Ellegård Andersen (Milestone Systems)​ thanks! I’ll check your examples and move from there, both path seems interesting.

6

@Bo Ellegård Andersen (Milestone Systems)​ , @Rie Kiuchi (Milestone Systems)​ : interestingly, the following sample https://doc.developer.milestonesys.com/html/samples/image_overlay_tester.html is able to display a bitmap outside the area of a ImageViewerAddOn (a very large bitmap that is larger than the camera area).

But it calls SetOverlay() with a bitmap, probably that for bitmaps it “has to” display them entirely even if they are outside of the area of the camera.

That or this example talks to a different ImageViewerAddOn than the one in my example.