Select data-points from 2D scatter plot #855

JuanViPerea · 2021-03-06T10:49:20Z

JuanViPerea
Mar 6, 2021

Hello, I'm a newbie with regards to GUI and WinForms so I may not understand some concepts that may seem obvious to you. I find ScottPlot to be an amazing library (and Id like to contribute in the future).

I would like to implement a small change to the mouse actions that allows the user to select a subset of data points from a 2D scatter plot. Similar to what this image shows: https://imgur.com/a/O7HWkkC . The idea being the user can right click and drag to create a box, where all data points inside the box are highlighted (and thus the back-end code would know what points the user wants to work on). Right click drag default control would be disabled as I have no need to scale/pan the graph. On that note, if someone recognizes which library was used to create the software on the image that would also be helpful.

Ive (successfully) gone through the mouse-position tutorial but then found this discussion on customizing left-click behaviour which I cannot follow as I don't understand how to "add your own click events on top of the ones ScottPlot has".

I downloaded ScottPlot into vs2019 through the vs NuGet manager. Using WinForms. v4.1.9-beta (in case this is relevant)

If anyone can shed some light into how would one go around to implement what I ask for it would be greatly appreciated. Thank you for your time and to Scott for creating this amazing library.

UPDATE: Ive managed to make a custom right click event with the following lines
formsPlot1.RightClicked -= formsPlot1.DefaultRightClickEvent;
formsPlot1.RightClicked += CustomRightClickEvent;
But the CustomRightClickEvent function only triggers at button release, which means I cannot drag the mouse and select a box. Ideally, I want to right click, drag to crate a box, and at button release a menu with some options appears.

Answered by JuanViPerea

Mar 7, 2021

Hi Scott thank you for your answer but I will still mark the thread as unanswered if you don't mind in case someone else wants to chip in, and also since your answer still leaves me with more unknowns..

I'm trying to break the whole process down into small steps so I can deal with them and learn about GUI structures as I go.

My most immediate problem right now then is that I don't know how to trigger a custom function when the mouse button is pressed. I tried messing around with MouseDown and MousClick but it didnt help. This is what I tried:
formsPlot1.MouseDown += formsPlot1_MyMouseDown;
formsPlot1.MouseClick += formsPlot1_MyMouseDown;
As mentioned earlier I did manage to call a custom …

View full answer

JuanViPerea · 2021-03-07T16:00:59Z

JuanViPerea
Mar 7, 2021
Author

Hi Scott thank you for your answer but I will still mark the thread as unanswered if you don't mind in case someone else wants to chip in, and also since your answer still leaves me with more unknowns..

I'm trying to break the whole process down into small steps so I can deal with them and learn about GUI structures as I go.

My most immediate problem right now then is that I don't know how to trigger a custom function when the mouse button is pressed. I tried messing around with MouseDown and MousClick but it didnt help. This is what I tried:
formsPlot1.MouseDown += formsPlot1_MyMouseDown;
formsPlot1.MouseClick += formsPlot1_MyMouseDown;
As mentioned earlier I did manage to call a custom function with RightClicked but this only happens after mouse is released (which is too late).

Thanks again!

3 replies

swharden Mar 7, 2021
Maintainer

Hey @JuanViPerea,

Updated Answer ✔️

I'm happy to leave this question open/unanswered to invite input from others, but to avoid infinitely-open discussions let's plan to close after a week of inactivity.

I'm motivated to help you find a solution, but I'll probably start by making an official statement like, Selecting multiple scatter plot points by drawing a rectangle around them with the mouse is not supported by ScottPlot, and there's no way to achieve this functionality with the existing code. This clarifies that this is not possible, and pursuing means developing something very custom.

If there were fewer high priority open issues I'd take time to create a working example (I agree this feature would be nice to know how to implement), but for now I'll probably label this task as outside the scope of ScottPlot and keep it on the back burner. I added it to #716 so maybe I can revisit it in the future.

Make A Custom Windows Forms Control

That said, if a user did want to achieve this functionality I think the easiest steps would be to make their own user control. The whole FormsPlot control is just over 100 lines, so start with this and modify it to meet your needs. All your mouse functions are there, and it should be easy to figure out how to interact with MouseDown, MouseClick, MouseMove, and similar events.

ScottPlot/src/controls/ScottPlot.WinForms/FormsPlot.cs

Lines 1 to 109 in 8698229

    
           ﻿using System; 
        
           using System.Collections.Generic; 
        
           using System.Diagnostics; 
        
           using System.Windows.Forms; 
        
           namespace ScottPlot 
        
           { 
        
               public partial class FormsPlot : UserControl 
        
               { 
        
                   public ScottPlot.Plot Plot => Backend.Plot; 
        
                   public ScottPlot.Control.Configuration Configuration => Backend.Configuration; 
        
                   public event EventHandler AxesChanged; 
        
                   public event EventHandler RightClicked; 
        
                   private readonly ScottPlot.Control.ControlBackEnd Backend; 
        
                   private readonly Dictionary<ScottPlot.Cursor, System.Windows.Forms.Cursor> Cursors; 
        
                   private bool IsDesignerMode = Process.GetCurrentProcess().ProcessName == "devenv"; 
        
                   [Obsolete("Reference Plot instead of plt")] 
        
                   public ScottPlot.Plot plt => Plot; 
        
                   public FormsPlot() 
        
                   { 
        
                       Backend = new ScottPlot.Control.ControlBackEnd(Width, Height); 
        
                       Backend.BitmapChanged += new EventHandler(OnBitmapChanged); 
        
                       Backend.BitmapUpdated += new EventHandler(OnBitmapUpdated); 
        
                       Backend.CursorChanged += new EventHandler(OnCursorChanged); 
        
                       Backend.RightClicked += new EventHandler(OnRightClicked); 
        
                       Backend.AxesChanged += new EventHandler(OnAxesChanged); 
        
                       Cursors = new Dictionary<ScottPlot.Cursor, System.Windows.Forms.Cursor>() 
        
                       { 
        
                           [ScottPlot.Cursor.Arrow] = System.Windows.Forms.Cursors.Arrow, 
        
                           [ScottPlot.Cursor.WE] = System.Windows.Forms.Cursors.SizeWE, 
        
                           [ScottPlot.Cursor.NS] = System.Windows.Forms.Cursors.SizeNS, 
        
                           [ScottPlot.Cursor.All] = System.Windows.Forms.Cursors.SizeAll, 
        
                           [ScottPlot.Cursor.Crosshair] = System.Windows.Forms.Cursors.Cross, 
        
                           [ScottPlot.Cursor.Hand] = System.Windows.Forms.Cursors.Hand, 
        
                           [ScottPlot.Cursor.Question] = System.Windows.Forms.Cursors.Help, 
        
                       }; 
        
                       InitializeComponent(); 
        
                       pictureBox1.BackColor = System.Drawing.Color.Transparent; 
        
                       BackColor = System.Drawing.Color.Transparent; 
        
                       Plot.Style(figureBackground: BackColor); 
        
                       pictureBox1.MouseWheel += PictureBox1_MouseWheel; 
        
                       RightClicked += DefaultRightClickEvent; 
        
                       if (IsDesignerMode) 
        
                           Plot.Title($"ScottPlot {Plot.Version}"); 
        
                   } 
        
                   public (double x, double y) GetMouseCoordinates() => Backend.GetMouseCoordinates(); 
        
                   public (float x, float y) GetMousePixel() => Backend.GetMousePixel(); 
        
                   public void Reset() => Backend.Reset(Width, Height); 
        
                   public void Reset(Plot newPlot) => Backend.Reset(Width, Height, newPlot); 
        
                   private void PlottableCountTimer_Tick(object sender, EventArgs e) => Backend.RenderIfPlottableCountChanged(); 
        
                   public void Render(bool lowQuality = false, bool skipIfCurrentlyRendering = false) 
        
                   { 
        
                       Application.DoEvents(); 
        
                       Backend.Render(lowQuality, skipIfCurrentlyRendering); 
        
                   } 
        
                   private void FormsPlot_Load(object sender, EventArgs e) { OnSizeChanged(null, null); } 
        
                   private void OnBitmapUpdated(object sender, EventArgs e) { Application.DoEvents(); pictureBox1.Invalidate(); } 
        
                   private void OnBitmapChanged(object sender, EventArgs e) { pictureBox1.Image = Backend.GetLatestBitmap(); } 
        
                   private void OnCursorChanged(object sender, EventArgs e) => Cursor = Cursors[Backend.Cursor]; 
        
                   private void OnSizeChanged(object sender, EventArgs e) => Backend.Resize(Width, Height); 
        
                   private void OnAxesChanged(object sender, EventArgs e) => AxesChanged?.Invoke(this, e); 
        
                   private void OnRightClicked(object sender, EventArgs e) => RightClicked?.Invoke(this, e); 
        
                   private void PictureBox1_MouseDown(object sender, MouseEventArgs e) => Backend.MouseDown(GetInputState(e)); 
        
                   private void PictureBox1_MouseUp(object sender, MouseEventArgs e) => Backend.MouseUp(GetInputState(e)); 
        
                   private void PictureBox1_DoubleClick(object sender, EventArgs e) => Backend.DoubleClick(); 
        
                   private void PictureBox1_MouseWheel(object sender, MouseEventArgs e) => Backend.MouseWheel(GetInputState(e)); 
        
                   private void PictureBox1_MouseMove(object sender, MouseEventArgs e) { Backend.MouseMove(GetInputState(e)); base.OnMouseMove(e); } 
        
                   private ScottPlot.Control.InputState GetInputState(MouseEventArgs e) => 
        
                       new ScottPlot.Control.InputState() 
        
                       { 
        
                           X = e.X, 
        
                           Y = e.Y, 
        
                           LeftWasJustPressed = e.Button == MouseButtons.Left, 
        
                           RightWasJustPressed = e.Button == MouseButtons.Right, 
        
                           MiddleWasJustPressed = e.Button == MouseButtons.Middle, 
        
                           ShiftDown = ModifierKeys.HasFlag(Keys.Shift), 
        
                           CtrlDown = ModifierKeys.HasFlag(Keys.Control), 
        
                           AltDown = ModifierKeys.HasFlag(Keys.Alt), 
        
                           WheelScrolledUp = e.Delta > 0, 
        
                           WheelScrolledDown = e.Delta < 0, 
        
                       }; 
        
                   public void DefaultRightClickEvent(object sender, EventArgs e) => DefaultRightClickMenu.Show(System.Windows.Forms.Cursor.Position); 
        
                   private void RightClickMenu_Copy_Click(object sender, EventArgs e) => Clipboard.SetImage(Plot.Render()); 
        
                   private void RightClickMenu_Help_Click(object sender, EventArgs e) => new FormHelp().Show(); 
        
                   private void RightClickMenu_AutoAxis_Click(object sender, EventArgs e) { Plot.AxisAuto(); Render(); } 
        
                   private void RightClickMenu_SaveImage_Click(object sender, EventArgs e) 
        
                   { 
        
                       var sfd = new SaveFileDialog 
        
                       { 
        
                           FileName = "ScottPlot.png", 
        
                           Filter = "PNG Files (*.png)|*.png;*.png" + 
        
                                    "|JPG Files (*.jpg, *.jpeg)|*.jpg;*.jpeg" + 
        
                                    "|BMP Files (*.bmp)|*.bmp;*.bmp" + 
        
                                    "|All files (*.*)|*.*" 
        
                       }; 
        
                       if (sfd.ShowDialog() == DialogResult.OK) 
        
                           Plot.SaveFig(sfd.FileName); 
        
                   } 
        
               } 
        
           }

EDIT: If your application only involves a scatter plot, perhaps you can store your scatter plot in the user control itself. You can also put that mouse selection logic in the user control. There are many ways to approach this problem, but I think creating a custom control may be the simplest (although it will still be a good amount of effort).

JuanViPerea Mar 10, 2021
Author

Thanks for your reply again. After some fighting with the code I decided to learn the basic first. For the record, I managed to implement the desired functionality with the standard winforms chart modifying the mouse_down, move, and up methods. If my application continues to go forward I will try to implement this on your graphs and will update this thread if so. Thanks.

swharden Mar 11, 2021
Maintainer

I managed to implement the desired functionality with the standard winforms chart modifying the mouse_down, move, and up methods.

That's great news! 🎉 The user control code is a lot simpler than most people would initially suspect, and I'm happy you were able to modify it to meet your specific application goals.

If my application continues to go forward I will try to implement this on your graphs and will update this thread if so

Sounds like a plan! I'll close this thread for now, but feel free to follow-up any time. Good luck developing your app! 🚀

This comment has been hidden.

Sign in to view

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Select data-points from 2D scatter plot #855

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Replies: 2 comments 3 replies

This comment has been hidden.

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Select data-points from 2D scatter plot #855

Uh oh!

Uh oh!

JuanViPerea Mar 6, 2021

Replies: 2 comments · 3 replies

This comment has been hidden.

Uh oh!

Uh oh!

JuanViPerea Mar 7, 2021 Author

Uh oh!

Uh oh!

swharden Mar 7, 2021 Maintainer

Updated Answer ✔️

Make A Custom Windows Forms Control

Uh oh!

JuanViPerea Mar 10, 2021 Author

Uh oh!

swharden Mar 11, 2021 Maintainer

JuanViPerea
Mar 6, 2021

Replies: 2 comments 3 replies

JuanViPerea
Mar 7, 2021
Author

swharden Mar 7, 2021
Maintainer

JuanViPerea Mar 10, 2021
Author

swharden Mar 11, 2021
Maintainer