I'm using the Oxyplot library to plot some graphs based on real-time data. I know there is a feature called Tracker that shows some tooltip-like information (coordinates, for example) based on the Position where the user left-clicks. The information is only shown while the left-button is pressed.
I'm currently testing this functionality on a line graph, not sure if it works for other types.
What I wanted to do is to keep this info on screen and making it disapper only if the user tries to set a new one, clicking somewhere else on the graph and replacing the older information. Adding a vertical bar where the user clicked would be nice too.
I checked the Oxyplot documentation and I know that it is possible to customize this 'Tracker', but I failed to find a solution for my situation.
EDIT:
I've found this example, it seems helpful, but I'm struggling to extract the usefulness of it. Please help!
UPDATE:
Let me go a little further on the explanation of what I'm trying to achieve. I have many graphs, each of them placed on a separated panel (or tab). If I left-click in a position of a graph, I want to show the Tracker info on that specific position on each and every graph while the user doesn't click on another position (setting a new Tracker and removing the old one). In other words, it is allowed one Tracker at a time, and this is set on every existing graph at the same X-position.
UPDATE 2:
Alright, so after giving it a thought, I decided not to maintain the Tracker when left-clicking. Instead, I just want to draw a vertical line on every graph on the position of the click. Just one line at a time is permitted, it can be treated as a "temporary marker". I believe this is more doable than the other approach and will suffice my needs.
You can unbind the left button and replace it by just hovering the mouse, almost always showing the tracker:
public PlotController customController { get; private set; }
customController = new PlotController();
customController.UnbindMouseDown(OxyMouseButton.Left);
customController.BindMouseEnter(PlotCommands.HoverSnapTrack);
Xaml:
<oxy:PlotView Controller="{Binding customController}"/>
EDIT >>>>>>
TrackerManipulator code: https://github.com/ylatuya/oxyplot/blob/master/Source/OxyPlot/Manipulators/TrackerManipulator.cs
I think you should create a custom TrackerManipulator, and override the Complete method to not to do the "this.PlotControl.HideTracker();" line.
Related
I'm trying to create a viewer in react-three-fiber with react-three/drei where I can switch between OrbitControls and TrackballControls.
The problem is that when switching from TrackballControls to OrbitControls, the axis that the camera rotates around changes as of course the TrackballControls change the up-vector when moving around.
I created a couple of minimal examples in codesandbox to explain my approach to solve this and to show where I'm stuck.
Base Case
This shows the initial attempt to switch between the different control types:
https://codesandbox.io/s/r3f-camera-controllers-base-neu07
Attempt #1
Obviously, this does not work as it is, so I tried resetting the up-vector to (0, 1, 0) and calling lookAt(). This seems to work initially as the camera reorients itself correctly (this is how it should look like). However, it does not rotate around the correct axis and instead moves in strange arcs. See here:
https://codesandbox.io/s/r3f-camera-controllers-set-up-vector-yps4k
Attempt #2
For this question it was suggested to create a new camera which I also tried but ultimately it lead to the same result. This here is my attempt at creating a new camera and copying some values to the new camera:
https://codesandbox.io/s/r3f-camera-controllers-reset-camera-3cih0
Any help appreciated. Thanks!
After a couple of days, I finally figured out a way to achieve what I want.
Instead of trying to remove the different controls, I just enable and disable them separately. I can then call the reset() functions on both Controls via a ref if the control prop changes. To retain the camera position, I can just temporarily store it before resetting the controls.
You can find an example here.
I'm a long-time user of SciChart, but it's an old version (3.1). I've just started using FastHeatMapRenderableSeries for the first time, and there is a requirement for a user to alter the chart's gradient stops. I've implemented a UI to do this (see image), which involves dragging markers that updates their respective gradient stop within the ColorMap's LinearGradientBrush. It's working in as much as gradient changes can be seen in the chart's HeatColorMap (not shown on this screenshot), and also in my "drag" control (a Rectangle whose Fill is bound to the ColorMap's brush).
The problem is that the colours within the chart itself don't change - perhaps I was being a little too hopeful that this would happen automatically! Is this possible, or will I have to recreate the series each time there has been a change to the gradient?
We actually have this working in a later version of SciChart. Im not sure which version exactly but it was introduced at some point. Have a look at this forum post which discusses a bug in the heatmap color map binding in v5.
In the v6 examples suite, you can drag the heat map legend and recolour the chart automatically, so we know in principle this works.
Very cool image by the way!
I am trying to implement the following feature using C/GTK3/Cairo:
-Left click on an GtkDrawingArea Widget and printf the coordinates Xo and Yo.
-While keeping the left button down, move the mouse and draw a line conecting (Xo,Yo) to the current mouse position.
-Release the left mouse button and printf("something")
How do I do this? Anyone knows of a good tutorial showing how to handle mouse clicl-move events?
So far, the best I found was this zetcode lines (which shows how to handle mouse click events but not button-down/move/button-up and this , which explains how to change the mouse cursor when hovering over a Widget.
Thanks
Did you see this GtkDrawingArea demo from the Gtk people? This one is written in C, but there is a Python version of the same program (links updated - thanks #kyuuhachi).
Anyway, in the constructor (__init__), calls are connected to the motion_notify_event.
You also need to connect to the button_press_event and the button_release_event.
Then, on button press, you save the coordinates of the start point. (and save it to the end point too, which are the same for now).
On each motion_notify_event, you delete the previous line (by overwriting), and redraw it to the new end point.
Finally, when the button is released, the line is final.
It's much easier if you use a canvas widget, for example GooCanvas, which takes care of most of the updating. You can just update the coordinates of the line object, and it will move itself. Also you can easily remove lines. The 'algorithm' is similar as above:
Connect button_press_event, button_release_event, and motion_notifyevent to the canvas,
When a button press occurs, create a GooCanvas.polyline object, and set begin and endpoint,
Update the endpoint on each motion_notify_event
Finalize with a button_release_event.
this is how Chrome finds you a word when you search for it:
1) select it in all the places it appears.
2) draw little line in the scroll bar wherever it found the searched word.
I have a canvas with scroll view around it, and I want to perform the same thing on it.
I gues that for enabling the selection i'll have to use only richtextboxes ?!? (hope not).
any third party or idea or anything will be highly appreciated
Without looking directly at the Chormium Project (which is open source and available at Chormium Homepage) I would imaging what is happening on this particular example is something following these steps:
Word Highlighting
Search the page source/content for the keyword using a simple regex
Insert that text into some form of a HTML container (either a span or a div) with a particular id
Use CSS to style that container to indicated the highlighting
Sidebar Highlighting
Use some algorithmic method to vertical position of the highlighted term
Add a indicator to the side bar in a some presentation layer/control that is transparent and below the scroll bar
It may be possible that there exists a 3rd party control that does these things, or it may be possible to leverage your work off of the existing work in the chromium project. However it is most likely not done using a RichTextBoxes nor simple text selection.
Im developing an app for Microsoft Surface and Im trying to make the most of the libraries that are out there, the functionality Im after if to be able to flick a UI element.
The ScatterView control makes this easy, but I would like to restrict the UI element to only be able to be flicked along a set path. This is where Im having trouble.
So my questions are:
1) Can you restrict a ScatterViewItem to only be flicked along a path?
2) If not, how would you implement a flick gesture to flick a UI element along a set path?
Thanks!
Mark
1) Not that I know of, and this probably isn't the best way to approach it.
2) Assuming you have the object you want flicked and the path at design-time, I've previously implemented dragging and flicking along a path by creating a timeline animation that represents the movement across the entire path. At runtime, I capture contacts on that object, feed them to a Affine2DManipulationProcessor, and seek the animation based on the manipulation events.
So in my case I was creating a drawer. When the user touched the drawer, I start the animation and pause it immediately. If the user drags it open, I seek the animation the appropriate amount forward based on how far the manipulation processor tells me they've moved.
To get the flick behavior, you just hand off the manipulation to the Affine2DInertiaProcessor and continue handling the delta events.
This all works surprisingly well.