Recent

Author Topic: [implemented] How to get a live diagram (scrolling x-axis)  (Read 8100 times)

Muso

  • Sr. Member
  • ****
  • Posts: 356
[implemented] How to get a live diagram (scrolling x-axis)
« on: July 27, 2020, 01:13:36 am »
I programmed a program that collects data from the COM port output from a measurement device. It plots this data into a TAChart diagram.

Everything works so far but since I get live data, I need an option to turn on the feature that the x-axis is scrolling. For example that always an x-axis range of 100 seconds is shown.

I could dynamically set the Min/Max values for the x-axis but since TAChart has so many features, I guess I only miss this x-axis scrolling feature, right?

If this feature does not exist, what would you propose me to do?
(In only found this very old thread about the topic: https://forum.lazarus.freepascal.org/index.php/topic,15037.msg80345.html )
« Last Edit: July 14, 2021, 02:01:53 am by Muso »

wp

  • Hero Member
  • *****
  • Posts: 11830
Re: How to get a live diagram (scrolling x-axis)
« Reply #1 on: July 27, 2020, 06:11:37 pm »
I thought I had answered the same question a short time ago, but I can't find my answer...

So, you are receiving data from the COM port. At which rate? And you only want to plot the latest 100 seconds. What should happen with the old data points? Can they be deleted? Or do you want to keep them, but only scale the x axis such that the last 100 seconds are inside the visible viewport? In the latter case: Is there a need to zoom out to show all data points, and later to restore the standard view with the last 100 seconds?

Muso

  • Sr. Member
  • ****
  • Posts: 356
Re: How to get a live diagram (scrolling x-axis)
« Reply #2 on: July 28, 2020, 02:29:39 am »
So, you are receiving data from the COM port. At which rate?

This depends on the measurement device. The user can set there values between every second a new value up to only every few minutes. Baud rate is 9600 anyway.

Quote
Or do you want to keep them, but only scale the x axis such that the last 100 seconds are inside the visible viewport?

Yes.

Quote
In the latter case: Is there a need to zoom out to show all data points, and later to restore the standard view with the last 100 seconds?

Yes. At the moment I have a checkbox "scrolling", this sets dynamically the Min/Max values of the axis to make it scrolling. When the user unckecks the option, he gets the whole diagram and can zoom there around.
I just thought there might be a better solution, meaning one that TAChart has maybe already implemented so that my option just needs to change a bool variable or so to trigger the feature.

----

Besides this thanks again for your help and bug fixing with the fit demo. I can now perform live fitting. Awesome feature of TAChart!

sstvmaster

  • Sr. Member
  • ****
  • Posts: 299
Re: How to get a live diagram (scrolling x-axis)
« Reply #3 on: July 28, 2020, 07:24:43 am »
Or you can look into this source code?

https://github.com/ccrause/LazScope
greetings Maik

Windows 10,
- Lazarus 2.2.6 (stable) + fpc 3.2.2 (stable)
- Lazarus 2.2.7 (fixes) + fpc 3.3.1 (main/trunk)

ccrause

  • Hero Member
  • *****
  • Posts: 843
Re: How to get a live diagram (scrolling x-axis)
« Reply #4 on: July 28, 2020, 08:47:56 am »
Or you can look into this source code?

https://github.com/ccrause/LazScope
LazScope collects a fixed frame of data, deletes the previous plot and generates a new plot after receiving a new frame.  So not quite the same display logic Muso described.

wp

  • Hero Member
  • *****
  • Posts: 11830
Re: How to get a live diagram (scrolling x-axis)
« Reply #5 on: July 28, 2020, 11:01:55 am »
See the attachment for a small demo which might fit your needs; the GUI to control auto-scrolling and frozen-display is a bit clumsy, though, and not perfectly intuitive - but you certainly find a better one.

Basically, the visible viewport of the chart is described by the chart's LogicalExtent (a rectangle of TDoublePoint records having the element a and b in the left/bottom and right/top corners, respectively). This property is writable, and thus you can control the visible part of the chart without dropping data points. All you have to do is that whenever data points arrive you must make the LogicalExtent.a.x smaller than the Logicalextent.b.x by the given width of the viewport (in time units). With the exception when there are not yet enough data points: here you simply can do nothing (the chart will slowly become larger) or you can set LogicalExtent.b.x equal to the viewport size to get a more static view.

When you want to see the full viewport with all data you simply call Chart.ZoomFull which sets the LogicalExtent to the corner points to the range given by the data.

Muso

  • Sr. Member
  • ****
  • Posts: 356
Re: How to get a live diagram (scrolling x-axis)
« Reply #6 on: July 28, 2020, 10:37:26 pm »
See the attachment

Many thanks. So that was the solution I had in mind - setting the Min value (in this case the one of the extent) dynamically.

However, it might a nice feature if TAChart could directly provide such a solution in one of th next releases. I think there is demand on scrolling Live view. The idea hereby is that one can set a bool so switch between static extent and dynamic and a double to specify the value range to be displayed.

For the record, here is my simple solution based on your example:


Code: Pascal  [Select][+][-]
  1. // scroll axis if desired by the user
  2.    if ScrollViewCB.Checked = true then
  3.    begin
  4.     Extent:= BioMonCH.GetFullExtent;
  5.     // if there are not yet enough values, do nothing
  6.     if CurrTime - MinParsedTime > ScrollIntervalSE.Value/60 then
  7.      Extent.a.x := Extent.b.x - ScrollIntervalSE.Value/60;
  8.     BioMonCH.LogicalExtent:= Extent;
  9.    end;
  10.  
  11. procedure TMainF.ScrollViewCBChange(Sender: TObject);
  12. begin
  13.  if ScrollViewCB.Checked = false then
  14.  begin
  15.   ScrollIntervalSE.Enabled:= false;
  16.   // zoom back to normal
  17.   BioMonCH.ZoomFull;
  18.  end
  19.  else
  20.   ScrollIntervalSE.Enabled:= true;
  21. end;

Muso

  • Sr. Member
  • ****
  • Posts: 356
Re: How to get a live diagram (scrolling x-axis)
« Reply #7 on: July 28, 2020, 10:42:06 pm »
However, it might a nice feature if TAChart could directly provide such a solution in one of the next releases.

Then maybe the automatic addition of the unit TAChartUtils can be handled better. I mean I have a TAChart diagram in my code which automatically adds the required units. But the TAChartUtils unit is not added. Therefore when I declared a variable using the data type TDoubleRect, as necessary for the scrolling, I got a compiler error then had to find out what unit is missing.

wp

  • Hero Member
  • *****
  • Posts: 11830
Re: How to get a live diagram (scrolling x-axis)
« Reply #8 on: July 29, 2020, 10:59:34 am »
However, it might a nice feature if TAChart could directly provide such a solution in one of th next releases. I think there is demand on scrolling Live view.
Perhaps that's only your impression. My impression is that among the many charting programs that I wrote there are only with two which require a "live display".

I do not like adding such a specializing feature to a general-purpose component. Maybe it would suit better to TChartScrollbar which focuses on scrolling through partially visible charts.

Then maybe the automatic addition of the unit TAChartUtils can be handled better.
Yes I missed this, too (although there are some others which should also be added). But I don't know how a non-component-baring unit can be forced into the uses clause when a component is added. IMHO this is not possible.
« Last Edit: July 29, 2020, 11:02:20 am by wp »

Muso

  • Sr. Member
  • ****
  • Posts: 356
Re: How to get a live diagram (scrolling x-axis)
« Reply #9 on: July 29, 2020, 08:19:48 pm »
My impression is that among the many charting programs that I wrote there are only with two which require a "live display".

Thank is interesting because the major criticism about my program from my colleagues was that it has no live view. And indeed all the programs around here at work have such a live view - to show the temperature, humidity, a current consumption, voltage levels etc. Even the software of our milling machine has such a view (for temperature). Therefroe I think this feature is necessary for every use case where live data has to be shown but have to be stored.

Quote
Maybe it would suit better to TChartScrollbar which focuses on scrolling through partially visible charts.

Where can I find more info about this component?

wp

  • Hero Member
  • *****
  • Posts: 11830
Re: How to get a live diagram (scrolling x-axis)
« Reply #10 on: July 29, 2020, 10:41:23 pm »
Quote
Maybe it would suit better to TChartScrollbar which focuses on scrolling through partially visible charts.
Where can I find more info about this component?
There is a short description in  the TAChart documentation, and I am attaching a small demonstration of it: Use the scrollbar to scroll the visible viewport through the chart. When you click into the chart, the chart unzooms and the scrollbar adapts. When you drag a rectangle in the chart (from left-top to right-bottom) you zoom, and the scrollbar adapts as well. And I added a button to restore the initial viewport.

wp

  • Hero Member
  • *****
  • Posts: 11830
Re: How to get a live diagram (scrolling x-axis)
« Reply #11 on: August 14, 2020, 11:41:49 pm »
Motivated by your request I added a TChartLiveView component which hopefully fulfills what you need.

Play with the attached demo and see how it is working:

Link the ChartLiveView's Chart property to the chart to be controlled. Set the Active property to true and specify a width of the visible viewport in the ViewportSize property. Now, when data arriving the component gets a notification that the chart's FullExtent has changed and selects its LogicalExtent such that the old data scroll out of the ViewportSize.

When you switch Active OFF you can scroll through the existing data, for example by means of the ChartNavScrollbar at the bottom. The viewport does not move in this state when new data arrive.

But when Active is switched back to ON the viewport jumps back to the newest data points, and scrolling starts again when new data arrive.

When ViewportSize is 0 the size of the current zoomed rectangle is used instead.

Please note that the component is not yet finished; vertical scaling of the viewport is still missing. And the component is not yet installed into the component palette. but I hope you can get an impression of how it will be.

kapibara

  • Hero Member
  • *****
  • Posts: 610
Re: How to get a live diagram (scrolling x-axis)
« Reply #12 on: August 14, 2020, 11:59:53 pm »
Great work wp!

Lazarus trunk / fpc 3.2.2 / Kubuntu 22.04 - 64 bit

wp

  • Hero Member
  • *****
  • Posts: 11830
Re: How to get a live diagram (scrolling x-axis)
« Reply #13 on: August 16, 2020, 07:15:07 pm »
Should be complete now. Is registered in the IDE and has the attached palette icon (*). There is a new property "ExtentY" which allows to control how the visible viewport scales vertically:
- lveAuto: automatically scales y so that the visible part of the chart fills the control
- lveFull: uses the chart's unzoomed extent ("full extent") to determine the y window. Results in a more stable display, but when the "measured signal" decays during time the curve may shrink to a structureless horizontal line.
- lveLogical: uses the height of a previously zoomed rectangle to determine the y window. Results also in a more stable display, good to enhance small visual details, but parts of the curve may move out of the window vertically when the signal gets larger.

There is an updated demo in folder (lazarus)/components/tachart/demo/liveview.

(*) Icon kindly provided by Roland Hahn.

dsiders

  • Hero Member
  • *****
  • Posts: 1045
Re: How to get a live diagram (scrolling x-axis)
« Reply #14 on: August 16, 2020, 08:30:08 pm »
(*) Icon kindly provided by Roland Hahn.

Roland does a great job with icons. But I question the direction of the arrow... shouldn't it point in the opposite direction?  :D
Preview Lazarus 3.99 documentation at: https://dsiders.gitlab.io/lazdocsnext

 

TinyPortal © 2005-2018