Something wrong with TAdvSmoothTimeLine?

Ronald_Janse · April 25, 2017, 9:06am

I have been trying to pursuade the TAdvSmoothTimeLine to behave the way I
want it to, but I have failed. It seems I just don't get it, or
something is not working correctly.
I have the code below and I just
want a timeline from 0:00 to 0:00 the next day, with markers every hour.
I add some timelinesections and some timelineindicators, nothing
exiting.
When I run this code by pressing the button, the first time
nothing really happens. The second time I get a lot of wrong times. The
third time something happens. It now looks almost as I intended to. The
first time indicator is not there, and the 1:00 indicator is shown lower
than the others, but ok. Pressing a fourth time or more doesn't change
anything.
I think there must be something wrong with this component, I can't explain it otherwise....
Tested with Delphi 10.2 Tokyo.


procedure TFormMain.Button1Click(Sender: TObject);
var
  nTeller: Integer;
  kleur  : TColor;
  TijdstipVanaf: TDateTime;
  TijdstipTot  : TDateTime;
begin
  TijdstipVanaf := Date;
  TijdstipTot   := Date + 1;
  TL.TimeLineSections.Clear;
  TL.TimeLineIndicators.Clear;
  TL.Range.RangeFrom     := TijdstipVanaf;
  TL.Range.RangeTo       := TijdstipTot;
  TL.Range.MinimumRange  := TijdstipVanaf;
  TL.Range.MaximumRange  := TijdstipTot;
  TL.Range.DivisionType  := dtHour;
  TL.Range.Divisions     := 1;
  for nTeller := 0 to 11 do
  begin
    with TL.TimeLineSections.Add do
    begin
      StartTime := TijdstipVanaf + ((nTeller * 60) / 1440);
      EndTime   := TijdstipVanaf + ((nTeller * 60) / 1440) + (45 / 1440);
      kleur := clMedGray;
      if nTeller < 6 then kleur := $00B5E4FF
      else kleur := $00FF901E;
      Fill.BorderColor   := clMedGray;
      Fill.Color         := kleur;
      Fill.ColorTo       := kleur;
      Fill.ColorMirror   := kleur;
      Fill.ColorMirrorTo := kleur;
    end;
    with TL.TimeLineIndicators.Add do
    begin
      Size     := 8;
      Position := TijdstipVanaf + ((nTeller * 60) / 1440);
      Hint     := 'Position ' + IntToStr(nTeller);
    end;
  end;
end;

And the dfm:


object FormMain: TFormMain
  Left = 0
  Top = 0
  ClientHeight = 336
  ClientWidth = 800
  Color = clBtnFace
  Font.Charset = DEFAULT_CHARSET
  Font.Color = clWindowText
  Font.Height = -11
  Font.Name = 'Tahoma'
  Font.Style = []
  OldCreateOrder = False
  PixelsPerInch = 96
  TextHeight = 13
  object TL: TAdvSmoothTimeLine
    Left = 0
    Top = 0
    Width = 800
    Height = 200
    DefaultHintFill.Color = clWhite
    DefaultHintFill.ColorTo = clWhite
    DefaultHintFill.ColorMirror = clNone
    DefaultHintFill.ColorMirrorTo = clNone
    DefaultHintFill.GradientType = gtVertical
    DefaultHintFill.GradientMirrorType = gtSolid
    DefaultHintFill.Opacity = 225
    DefaultHintFill.OpacityTo = 175
    DefaultHintFill.BorderColor = clBlack
    DefaultHintFill.Rounding = 0
    DefaultHintFill.ShadowOffset = 0
    DefaultHintFill.Glow = gmNone
    DefaultSectionFill.Color = clMedGray
    DefaultSectionFill.ColorTo = clMedGray
    DefaultSectionFill.ColorMirror = clMedGray
    DefaultSectionFill.ColorMirrorTo = clMedGray
    DefaultSectionFill.GradientType = gtVertical
    DefaultSectionFill.GradientMirrorType = gtVertical
    DefaultSectionFill.BorderColor = clMedGray
    DefaultSectionFill.Rounding = 0
    DefaultSectionFill.ShadowOffset = 0
    DefaultSectionFill.Glow = gmNone
    DefaultIndicator.AnnotationColor = clWhite
    DefaultIndicator.Position = 42829.385821759260000000
    DefaultIndicator.Shape = isCircle
    DefaultIndicator.Fixed = True
    DefaultIndicator.Color = clWhite
    DefaultIndicator.ColorTo = clWhite
    DefaultIndicator.Opacity = 200
    DefaultIndicator.OpacityTo = 150
    DefaultIndicator.BorderColor = clMedGray
    DefaultIndicator.Size = 2
    DefaultIndicator.Tag = 0
    Range.MinimumRange = 42829.000000000000000000
    Range.MaximumRange = 42829.999988425930000000
    Range.RangeTo = 42829.916666666660000000
    Range.RangeFrom = 42829.083333333340000000
    Range.Divisions = 1
    Range.DivisionType = dtHour
    RangeAppearance.DivisionFont.Charset = DEFAULT_CHARSET
    RangeAppearance.DivisionFont.Color = clBlack
    RangeAppearance.DivisionFont.Height = -9
    RangeAppearance.DivisionFont.Name = 'Tahoma'
    RangeAppearance.DivisionFont.Style = []
    RangeAppearance.SubDivisionFont.Charset = DEFAULT_CHARSET
    RangeAppearance.SubDivisionFont.Color = clBlack
    RangeAppearance.SubDivisionFont.Height = -9
    RangeAppearance.SubDivisionFont.Name = 'Tahoma'
    RangeAppearance.SubDivisionFont.Style = []
    RangeAppearance.DivisionTickMarkSize = 2
    RangeAppearance.DivisionFormat = 'hh:nn'
    RangeAppearance.SubDivisionFormat = 'hh:nn'
    RangeAppearance.ShowSubDivisionValue = False
    Fill.Color = clWhite
    Fill.ColorTo = clWhite
    Fill.ColorMirror = clNone
    Fill.ColorMirrorTo = clNone
    Fill.GradientType = gtVertical
    Fill.GradientMirrorType = gtSolid
    Fill.BorderColor = clSilver
    Fill.Rounding = 0
    Fill.ShadowOffset = 0
    Fill.Glow = gmNone
    VerticalMargin = 100
    HorizontalMargin = 12
    TimeLineBar.Fill.Color = clWhite
    TimeLineBar.Fill.ColorTo = clWhite
    TimeLineBar.Fill.ColorMirror = clNone
    TimeLineBar.Fill.ColorMirrorTo = clNone
    TimeLineBar.Fill.GradientType = gtVertical
    TimeLineBar.Fill.GradientMirrorType = gtSolid
    TimeLineBar.Fill.BorderColor = clMedGray
    TimeLineBar.Fill.Rounding = 0
    TimeLineBar.Fill.ShadowOffset = 0
    TimeLineBar.Fill.Glow = gmNone
    TimeLineBar.Height = 4
    TimeLineBar.AnnotationFont.Charset = DEFAULT_CHARSET
    TimeLineBar.AnnotationFont.Color = clWindowText
    TimeLineBar.AnnotationFont.Height = -11
    TimeLineBar.AnnotationFont.Name = 'Tahoma'
    TimeLineBar.AnnotationFont.Style = []
    TimeLineBar.SectionCaptionFont.Charset = DEFAULT_CHARSET
    TimeLineBar.SectionCaptionFont.Color = clWindowText
    TimeLineBar.SectionCaptionFont.Height = -11
    TimeLineBar.SectionCaptionFont.Name = 'Tahoma'
    TimeLineBar.SectionCaptionFont.Style = []
    TimeLineSections = <
      item
        Fill.Color = clMedGray
        Fill.ColorTo = clMedGray
        Fill.ColorMirror = clMedGray
        Fill.ColorMirrorTo = clMedGray
        Fill.GradientType = gtVertical
        Fill.GradientMirrorType = gtVertical
        Fill.BorderColor = clMedGray
        Fill.Rounding = 0
        Fill.ShadowOffset = 0
        Fill.Glow = gmNone
        StartTime = 42829.166701388890000000
        EndTime = 42829.250000000000000000
        Hint = 'Test'
        HintFill.Color = clWhite
        HintFill.ColorTo = clWhite
        HintFill.ColorMirror = clNone
        HintFill.ColorMirrorTo = clNone
        HintFill.GradientType = gtVertical
        HintFill.GradientMirrorType = gtSolid
        HintFill.Opacity = 225
        HintFill.OpacityTo = 175
        HintFill.BorderColor = clBlack
        HintFill.Rounding = 0
        HintFill.ShadowOffset = 0
        HintFill.Glow = gmNone
        HintFont.Charset = DEFAULT_CHARSET
        HintFont.Color = clWindowText
        HintFont.Height = -11
        HintFont.Name = 'Tahoma'
        HintFont.Style = []
        Tag = 0
      end
      item
        Fill.Color = 16748574
        Fill.ColorTo = 16748574
        Fill.ColorMirror = 16748574
        Fill.ColorMirrorTo = 16748574
        Fill.GradientType = gtVertical
        Fill.GradientMirrorType = gtVertical
        Fill.BorderColor = 16748574
        Fill.Rounding = 0
        Fill.ShadowOffset = 0
        Fill.Glow = gmNone
        StartTime = 42829.250000000000000000
        EndTime = 42829.291666666660000000
        HintFill.Color = clWhite
        HintFill.ColorTo = clWhite
        HintFill.ColorMirror = clNone
        HintFill.ColorMirrorTo = clNone
        HintFill.GradientType = gtVertical
        HintFill.GradientMirrorType = gtSolid
        HintFill.Opacity = 225
        HintFill.OpacityTo = 175
        HintFill.BorderColor = clBlack
        HintFill.Rounding = 0
        HintFill.ShadowOffset = 0
        HintFill.Glow = gmNone
        HintFont.Charset = DEFAULT_CHARSET
        HintFont.Color = clWindowText
        HintFont.Height = -11
        HintFont.Name = 'Tahoma'
        HintFont.Style = []
        Tag = 0
      end
      item
        Fill.Color = 3329330
        Fill.ColorTo = 3329330
        Fill.ColorMirror = 3329330
        Fill.ColorMirrorTo = 3329330
        Fill.GradientType = gtVertical
        Fill.GradientMirrorType = gtVertical
        Fill.BorderColor = 3329330
        Fill.Rounding = 0
        Fill.ShadowOffset = 0
        Fill.Glow = gmNone
        StartTime = 42829.291666666660000000
        EndTime = 42829.315972222220000000
        HintFill.Color = clWhite
        HintFill.ColorTo = clWhite
        HintFill.ColorMirror = clNone
        HintFill.ColorMirrorTo = clNone
        HintFill.GradientType = gtVertical
        HintFill.GradientMirrorType = gtSolid
        HintFill.Opacity = 225
        HintFill.OpacityTo = 175
        HintFill.BorderColor = clBlack
        HintFill.Rounding = 0
        HintFill.ShadowOffset = 0
        HintFill.Glow = gmNone
        HintFont.Charset = DEFAULT_CHARSET
        HintFont.Color = clWindowText
        HintFont.Height = -11
        HintFont.Name = 'Tahoma'
        HintFont.Style = []
        Tag = 0
      end>
    TimeLineIndicators = <
      item
        Annotation = 'Ophalen'
        AnnotationColor = clRed
        AnnotationTextColor = clWhite
        Position = 42829.291666666660000000
        Shape = isTriangleUp
        Fixed = True
        Color = clRed
        ColorTo = clRed
        Opacity = 200
        OpacityTo = 150
        BorderColor = clMedGray
        BorderOpacity = 200
        Size = 8
        ShowTickMark = False
        TickMarkSize = 8
        Tag = 0
      end
      item
        Annotation = 'Afleveren'
        AnnotationColor = clMoneyGreen
        Position = 42829.541666666660000000
        Shape = isTriangleDown
        Fixed = True
        Color = clGreen
        ColorTo = clGreen
        Opacity = 200
        OpacityTo = 150
        BorderColor = clMedGray
        BorderOpacity = 200
        Size = 8
        ShowTickMark = False
        Tag = 0
      end>
    ReadOnly = True
    ShowHint = True
    Align = alTop
    TabStop = False
    TMSStyle = 4
  end
  object Button1: TButton
    Left = 48
    Top = 224
    Width = 75
    Height = 25
    Caption = 'Button1'
    TabOrder = 1
    OnClick = Button1Click
  end
end

Pieter_Scheldeman · April 25, 2017, 10:46am

Hi,

Can you change the code to

procedure TForm71.Button1Click(Sender: TObject);

var

nTeller: Integer;

kleur : TColor;

TijdstipVanaf: TDateTime;

TijdstipTot : TDateTime;

begin

TijdstipVanaf := Date;

TijdstipTot := Date + 1;

TL.BeginUpdate;

TL.TimeLineSections.Clear;

TL.TimeLineIndicators.Clear;

TL.SetTimeLineRange(TijdstipVanaf, TijdstipTot, TijdstipVanaf, TijdstipTot);

TL.Range.DivisionType := dtHour;

TL.Range.Divisions := 1;

for nTeller := 0 to 11 do

begin

with TL.TimeLineSections.Add do

begin

StartTime := TijdstipVanaf + ((nTeller * 60) / 1440);

EndTime := TijdstipVanaf + ((nTeller * 60) / 1440) + (45 / 1440);

kleur := clMedGray;

if nTeller < 6 then kleur := $00B5E4FF

else kleur := $00FF901E;

Fill.BorderColor := clMedGray;

Fill.Color := kleur;

Fill.ColorTo := kleur;

Fill.ColorMirror := kleur;

Fill.ColorMirrorTo := kleur;

end;

with TL.TimeLineIndicators.Add do

begin

Size := 8;

Position := TijdstipVanaf + ((nTeller * 60) / 1440);

Hint := 'Position ' + IntToStr(nTeller);

end;

TL.EndUpdate;

end;

and see if that improves the behavior of loading the timeline?

Ronald_Janse · April 25, 2017, 11:07am

Works much better. It doesn't matter now how many times I push the button, I get the same result very time.
There still are some issues though:
- The timeline show 2:00 through 22:00 instead of 0:00 until 0:00.
- When I change the size of the Form it is redrawn and now shows 0:00 until 0:00, but the first 0:00 is not drawn and 1:00 is drawn lower then the rest
- When I push the button now, the last TimeLineSection is not drawn anymore. But when You resize the Timeline again it shows itself. Looks like a refresh issue.

Pieter_Scheldeman · April 25, 2017, 11:50am

Hi,

It seems you are incorrectly combining BeginUpdate/EndUpdate.

Please make sure you are not calling BeginUpdate twice and EndUpdate once. BeginUpdate/EndUpdate always need to be called in pairs.

Also update to the following code:



procedure TForm71.Button1Click(Sender: TObject);
var
  nTeller: Integer;
  kleur  : TColor;
  TijdstipVanaf: TDateTime;
  TijdstipTot  : TDateTime;
begin
  TijdstipVanaf := Int(Date) - EncodeTime(0, 0, 0, 1);
  TijdstipTot   := Int(Date) + 1;
  TL.BeginUpdate;
  TL.TimeLineSections.Clear;
  TL.TimeLineIndicators.Clear;
  TL.SetTimeLineRange(TijdstipVanaf, TijdstipTot, TijdstipVanaf, TijdstipTot);
  TL.Range.DivisionType  := dtHour;
  TL.Range.Divisions     := 1;
  for nTeller := 0 to 11 do
  begin
    with TL.TimeLineSections.Add do
    begin
      StartTime := TijdstipVanaf + ((nTeller * 60) / 1440);
      EndTime   := TijdstipVanaf + ((nTeller * 60) / 1440) + (45 / 1440);
      kleur := clMedGray;
      if nTeller < 6 then kleur := $00B5E4FF
      else kleur := $00FF901E;
      Fill.BorderColor   := clMedGray;
      Fill.Color         := kleur;
      Fill.ColorTo       := kleur;
      Fill.ColorMirror   := kleur;
      Fill.ColorMirrorTo := kleur;
    end;
    with TL.TimeLineIndicators.Add do
    begin
      Size     := 8;
      Position := TijdstipVanaf + ((nTeller * 60) / 1440);
      Hint     := 'Position ' + IntToStr(nTeller);
    end;
  end;
  TL.EndUpdate;
end;

We also have applied a fix for the first value showing at an incorrect position. The next version will address this.

Ronald_Janse · April 25, 2017, 11:56am

I did not implement the BeginUpdate / Endupdate until now.
I also added an extra TL.Refresh after completing, which also seems to make things better.
I'll await the update. Thank you.