RadDiagram Performance - Winforms

1 Answer 49 Views
Diagram, DiagramRibbonBar, DiagramToolBox
Brian
Top achievements
Rank 1
Brian asked on 30 Nov 2022, 11:19 PM

Hello,  I am adding a 15mb image to the background of a RadDiagramShape.  The problem I am running into is the RadDiagram eats up 1gb of memory every time I open the form.  Eventually if I don't call GC.Collect the Image.FromStream blows up due to a memory limit.  I have traced it back to the RadDiagram utilizing a ton of memory.  The question I have is what performance considerations should I be looking at with the control?  I included the steps I am taking to add in the image.  

Thanks in advance!
Brian

 

                uiMap.DiagramElement.IsBackgroundSurfaceVisible = false;
                uiMap.SelectionMode = Telerik.Windows.Diagrams.Core.SelectionMode.None;

                RadDiagramShape backgroundImage = new RadDiagramShape()
                {
                    Name = "Image"
                };


                backgroundImage.IsConnectorsManipulationEnabled = false;
                backgroundImage.IsRotationEnabled = false;
                backgroundImage.IsResizingEnabled = false;
                backgroundImage.IsDraggingEnabled = false;
                backgroundImage.CaptureOnMouseDown = false;
                backgroundImage.IsEnabled = false;
                backgroundImage.IsFocusable = false;
                backgroundImage.IsHitTestVisible = false;
                backgroundImage.ShouldHandleMouseInput = false;
                backgroundImage.Shape = new Telerik.WinControls.RoundRectShape(0);
                backgroundImage.DiagramShapeElement.Image = floorplan;
                backgroundImage.Width = floorplan.Width;
                backgroundImage.Height = floorplan.Height;
                backgroundImage.ShouldHandleMouseInput = false;
                backgroundImage.NotifyParentOnMouseInput = false;
                backgroundImage.CaptureOnMouseDown = false;

               uiMap.AddShape(backgroundImage);

                Telerik.Windows.Diagrams.Core.ToolService toolService = uiMap.ServiceLocator.GetService<Telerik.Windows.Diagrams.Core.IToolService>() as Telerik.Windows.Diagrams.Core.ToolService;

                if (toolService != null)
                    toolService.ToolList[0] = new CustomPanningTool();

                uiMap.ActiveTool = Telerik.Windows.Diagrams.Core.MouseTool.PanTool;

 

                                

1 Answer, 1 is accepted

Sort by
0
Dinko | Tech Support Engineer
Telerik team
answered on 01 Dec 2022, 09:31 AM

Hi Brian,

Thank you for the provided details.

Adding 15 mb image as a background of a RadDiagramShape indeed could hit the performance. Such an image size is quite big and I am not sure what you are trying to achieve here. Can you share how many shapes with images are you adding to the RadDiagram? Also, can you try adding the image as a resource file to the project and try setting it to the shape image property? I have tested your approach and the main memory consumption comes from the big image. Could be possible to compress the image to reduce its size? You can check the attached project. I have added 13 shapes and the form is shown. Also, I can see you have created a custom panning tool. Can you add it to the sample project so that I can check if the custom tool slows down?

You can share some more details regarding your requirement. Maybe the RadDiagram is not the control that you need and I could try to find a more suitable solution.

Regards,
Dinko | Tech Support Engineer
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Brian
Top achievements
Rank 1
commented on 01 Dec 2022, 03:21 PM

I do load some polygon elements over the image, however I remove those elements and still have a performance issue with just the image.  I don't want to complicate things with adding code for the polygon elements.  I can not load the image as a resource because it comes from an API.  I need the image resolution to stay intact since we zoom in and need to see all locations on the map without pixelating it.   Is there another control that will allow me to pan/zoom on an image and allow polygon points to be placed over the image?  I am also displaying a 'dot' that shows the location of a particular item.  In the RadDiagram control I am able to remove and readd the dot so that it looks like it is moving.  
Brian
Top achievements
Rank 1
commented on 01 Dec 2022, 04:24 PM

I just resampled the jpg down to less than 4mb.  I am still seeing over 1gb of memory consumed when loading the RadDiagram.  
Brian
Top achievements
Rank 1
commented on 01 Dec 2022, 04:34 PM

FYI: My image size is 17925x18858, 72dpi, 3.87mb, jpg.  
Dinko | Tech Support Engineer
Telerik team
commented on 06 Dec 2022, 12:59 PM

Thank you for the provided details.

Even if the size of the image is reduced its width and height properties have quite large values. Our RadDiagram is a feature-rich component. The framework is a complex control with a lot of functionalities. I am not sure that using the RadDiagram is the best control for your scenario as you are using only a few of its functionalities. Loading such a big image in a shape will indeed increase memory usage. In Visual Studio Diagnostic Tools, the Process Memory when adding one shape with this image will be 1.2 on my side. 

The general control for showing images is RadImageEditor. Its purpose is to show images and edited as per user preferences. You can use its Drawing mechanism for placing custom elements on the image. However, the stopper here is your second requirement with the "moving dot". In this control, when a custom element is drawn on the image it will become part of the image itself. So changing its position will require loading the image again and adding the element again on a different position.

Another control that you could try is RadPictureBox. Zoom and Pan is one of the functionalities supported by the control. But the editing mechanism of the RadPictureBox is embedded RadImageEditor which again leads to the problem of the moving dot. 

In the above, scenarios the memory consumption will still be above 1 GB when only loading 1 image. This leads me to think that this is not directly related to our controls. To test this case, I loaded the image in an MS PictureBox and the memory exceeds again 1 GB. I would say that this is not a memory issue, but rather an operational system graphics issue.

There is no suitable solution that I could offer at this point. What comes up to my mind is to load the image as a background image of a UserControl and create zoom and pan functionalities. This approach will require custom implementation from your side. For the "moving dot", you could create a custom element that changes its position on the user control.

As a side note, if it is not set, set the platform target option in the Properties section of your VS project to use the 64-bit operation system. This mode better handles large resources when running your application.

Tags
Diagram, DiagramRibbonBar, DiagramToolBox
Asked by
Brian
Top achievements
Rank 1
Answers by
Dinko | Tech Support Engineer
Telerik team
Share this question
or