Kopieren-Animation in Painbox zeichnen

[Glados]

Ich möchte gerne eine Animation wie in etwa die von Windows 10 in eine Paintbox zeichnen.
Leider habe ich von sowas soviel Ahnung wie von Steuererklärungen machen: gar keine.

Wie kann ich solche Daten (der Einfachheit halber nur eine Information wie "MB pro Sekunde") in einer PaintBox darstellen, die sich auch noch dynamisch anpasst je nachdem was das Maximum ist und alte Einträge nach links rausschiebt, sodass neue rechts reinkommen können?

Ich meine sowas hier https://i.ytimg.com/vi/msVDJSMs8Z0/maxresdefault.jpg

[Dalai]

Zufälligerweise habe ich in den vergangenen Tagen etwas ähnliches gemacht: Traffic-Graph für Up- & Download. Zuerst solltest du dir Gedanken darüber machen, woher deine Werte für die Datenpunkte kommen, also wie du diese ermittelst und wie und wo du diese speicherst. Ich habe mich für ein dynamisches Array (was aus zwei Cardinals besteht) entschieden. Bei einem einzelnen Graphen wie in deinem Fall genügt wahrscheinlich ein Array of Integer.

Dann solltest du dir anschauen, wie man in eine Paintbox zeichnet. Wichtige Funktionen dafür sind TPaintBox.Canvas.LineTo und TPaintBox.Canvas.MoveTo und vielleicht TPaintBox.Canvas.Polyline sowie die Eigenschaften TPaintBox.Canvas.Brush und TPaintBox.Canvas.Pen. Wichtig ist außerdem, wann man in eine PaintBox zeichnet. Einfach so reinmalen mag auf den ersten Blick funktionieren - bis man ein anderes Fenster über die PaintBox zieht, denn dann ist der verdeckte Teil des Graphs erstmal weg.

Ich hoffe, das hilft dir für's Erste weiter :).

Grüße
Dalai

[Glados]

Meine Daten existieren bereits. Dafür habe ich eine einzige Variable denn es gibt nur einen einzigen interessanten Wert: Kopiergeschwindigkeit.
Es gibt noch mehr Werte, aber die sollen nicht dargestellt werden.

Zitat:

Ich hoffe, das hilft dir für's Erste weiter .

Naja nicht wirklich. Denn mathematisch gesehen bin ich eine Niete und wüsste u.a. nicht einmal, wie man alte Werte links rausschmeißt, damit rechts neue reinkommen.

Angenommen ein Wert liegt bei 5, der danach bei 7, dann entsteht eine ziemlich hässliche und kantige Anzeige. Vor dem Problem stand ich schon einmal und habs nicht wegbekommen.

[stahli]

Dann erkläre mal exakt, wo es klemmt.

Die flüssige Live-Darstellung funktioniert?
Du willst nur noch die stufige Darstellung weg kriegen?

Zeig doch mal einen Screenshot oder kurzes Video...

[Glados]

Zitat:

Zitat von stahli (Beitrag 1385230)

Dann erkläre mal exakt, wo es klemmt.

Erm. nein. Es funktioniert nichts weil bisher nicht mehr als das hier existiert

Delphi-Quellcode:

Button2Click(Sender: TObject);
var
 val: Integer;
begin
 val := 75; // Random(PaintBox1.Height);

 PaintBox1.Canvas.FillRect(ClientRect);
 PaintBox1.Canvas.MoveTo(0, PaintBox1.Height - val);
 PaintBox1.Canvas.LineTo(0, val);
end;

Selbst dafür bin ich zu doof.

[stahli]

Dann würde ich das Problem zerlegen.

1.) Thread und Bitmap bauen, so dass laufend Zufallswerte erzeugt werden, die flüssig gezeichnet und "gescrollt" werden können.
2.) Zoom dynamisch anpassen
3.) echte Werte statt Zufallswerte darstellen

Grundsätzlich würde ich für die einzelnen Werte Striche nebeneinander zeichnen.

Delphi-Quellcode:

for I := 0 to Values.Count - 1 do
begin
  Value:=Values[X];
  PaintBox1.Canvas.MoveTo(I, PaintBox1.Height - Value);
  PaintBox1.Canvas.LineTo(I, PaintBox1.Height); // bis unten zeichnen
end;

So zum Einstieg könnte das passen.
Die Anzahl der gesammelten Werte musst Du dann an die Breite der Paintbox anpassen und ältere Werte verwerfen.

Ist etwas schwierig, etwas zu empfehlen, weil mir noch nicht klar ist, wo Du wirklich Hilfe brauchst.

[Glados]

Zitat:

weil mir noch nicht klar ist, wo Du wirklich Hilfe brauchst.

Im Prinzip bei allem. In die PaintBox zeichnen kann ja funktionieren aber da verschwindet immer alles.

Gerade kurz sowas hier getestet... funktioniert natürlich auch nicht.. wie immer bei mir

Delphi-Quellcode:

var
 val: Integer;
 bmp: TBitmap;
begin
 val := Random(bmp.Height);

 bmp := TBitmap.Create;
 bmp.Height := PaintBox1.Height;
 bmp.Width := PaintBox1.Width;

 bmp.Canvas.FillRect(ClientRect);
 bmp.Canvas.MoveTo(0, bmp.Height - val);
 bmp.Canvas.LineTo(0, bmp.Height);

 PaintBox1.Canvas.Draw(0, 0, bmp);

[HolgerX]

Hmm..

Und bei einer Paintbox wird im OnPaint gezeichnet und nicht in einem ButtonClick.

Sonst würde die Anzeige verschwinden, wenn ein anderes Fenster darüber gezogen wird. ;)

Oder in ButtonClick auf einem Bitmap zeichnen und dieses im OnPaint der PaintBox darauf kopieren..

[Glados]

So wirklich funktioniert es nicht

Delphi-Quellcode:

procedure TForm1.FormCreate(Sender: TObject);
begin
 Timer1.Interval := 50;
 iPosX := 0;
 bmp := TBitmap.Create;
 bmp.Width := PaintBox1.Width;
 bmp.Height := PaintBox1.Height;
end;

procedure TForm1.Button2Click(Sender: TObject);
begin
 Timer1.Enabled := not Timer1.Enabled;
end;

procedure TForm1.Timer1Timer(Sender: TObject);
var
 val: Integer;
begin
 Application.ProcessMessages;

 if iPosX >= PaintBox1.Width then
  Dec(iPosX);

 val := RandomRange(25, 45);

 bmp.Canvas.MoveTo(iPosX, bmp.Height - val);
 bmp.Canvas.LineTo(iPosX, bmp.Height);

 Inc(iPosX);

 PaintBox1.Repaint;
end;

procedure TForm1.PaintBox1Paint(Sender: TObject);
begin
  TPaintBox(Sender).Canvas.Draw(0, 0, bmp);
end;

[stahli]

Was funktioniert denn nicht?

Nimm mal in der Timerbehandlung das Application.Processmessages raus. Das ist unnötig und kann Probleme verursachen.
(Später wäre ein Thread statt einem Timer sicherlich sinnvoller.)

Füge in dem Timer mal so etwas wie meine Schleife ein.

Nach Deinem Code würde in dem Bitmap (so wie ich das sehe) nichts gescrollt.

[Glados]

Das Processmessages, egal ob unnötig oder nicht, lasse ich erst einmal drin. Das hat nix mit dem Problem zu tun, dass nicht gescrollt wird.

Hiermit im Timer schaffe ich es zu scrollen. Aber dabei wird das bitmap einfach immer nach rechts verlängert und links rutscht es in den Minusbereich.

Delphi-Quellcode:

// Timer
 bmp.Canvas.MoveTo(iPosX, bmp.Height - val);
 bmp.Canvas.LineTo(iPosX, bmp.Height);

 Inc(iPosX);

 if iPosX >= PaintBox1.Width then
  begin
   Dec(iPosXBmp);
   bmp.Width := bmp.Width + 1;
  end;

procedure TForm1.PaintBox1Paint(Sender: TObject);
begin
 TPaintBox(Sender).Canvas.Draw(iPosXBmp, 0, bmp);
end;

Zitat:

Füge in dem Timer mal so etwas wie meine Schleife ein.

Warum? Der Timer ist doch schon in etwa sowas wie eine Schleife.

[Glados]

---

[stahli]

Das Processmessages ist nicht unnötig sondern potentiell schädlich!

Was Du jetzt tust, ist Dein Bitmap bis ins unendliche zu verbreitern und immer den rechten Bereich zu kopieren.
Das kann man machen, sollte aber gelegentlich das Bitmap wieder verschmälern.
Du kannst auch, statt das Bitmap zu verbreitern dessen Inhalt um ein Pixel nach links kopieren und dann das rechte Pixel füllen.

Das reicht aber nicht mehr, wenn Du die Zoomstufe ändern willst. Dazu brauchst Du dann wieder die Originalwerte.
Daher würde ich meinen o.g. Wert mit der Schleife vorziehen.

[Glados]

Habe ein bisschen rumprobiert. Ist nicht einfach :(

Delphi-Quellcode:

var
 bmp: TBitmap;
 iPosXBmp: Integer;
 iOldPos, iNewPos: TPoint;

procedure TForm1.Timer1Timer(Sender: TObject);
var
 val: Integer;
begin
 val := RandomRange(25, 45);

 iNewPos.X := iNewPos.X;
 iNewPos.Y := bmp.Height - val;

 bmp.Canvas.Pen.Color := clBlack;
 bmp.Canvas.MoveTo(iNewPos.X, iNewPos.Y);
 bmp.Canvas.LineTo(iNewPos.X, bmp.Height);

 if iNewPos.X > 0 then
  begin
   bmp.Canvas.Pen.Color := clRed;
   bmp.Canvas.MoveTo(iOldPos.X, iOldPos.Y);
   bmp.Canvas.LineTo(iNewPos.X, iNewPos.Y);
  end;

 iOldPos.X := iNewPos.X;
 iOldPos.Y := bmp.Height - val;


 PaintBox1.Repaint;

 Inc(iNewPos.X, 5);
 if iNewPos.X >= PaintBox1.Width then
  begin
   Dec(iPosXBmp, 5);
   bmp.Width := bmp.Width + 5;
  end;

Zitat:

Du kannst auch, statt das Bitmap zu verbreitern dessen Inhalt um ein Pixel nach links kopieren und dann das rechte Pixel füllen.

Genau das möchte ich, weiß aber nicht wie.
Die Zoomstufe ist mir total egal. Muss ich nicht können.

Bekommt man das irgendwie besser hin, sodass es dem hier ähnelt?
ich dachte durch diese 5-Pixel-Verschiebung bekomme ich ein schönes Dach über den Strichen hin. War wohl falsch gedacht.
https://i.ytimg.com/vi/msVDJSMs8Z0/maxresdefault.jpg

[Dalai]

Für meine Klasse habe ich kein Bitmap verwendet. Ich denke aber mal darüber nach, denn das würde vielleicht wahrscheinlich die Umsortiererei des Arrays einsparen. Naja, egal, ist ja nicht relevant für deine Problemstellung.

Bei mir sieht es so aus (reduziert auf die relevanten Abschnitte): Klasse für die PaintBox:

Delphi-Quellcode:

type
  TBitrate = record
    Down : Cardinal;
    Up   : Cardinal;
  end;

type
  TTrafficDiagram = class(TGraphicControl)
  private
    [...]
    FDataValues           : array of TBitrate;
    FDataValuesInArray    : Word;
    function BitrateToPixel(const ABitrate, AMaxBitrate: Cardinal; const AMaxPixel: integer): integer;
  protected
    procedure Paint; override;
  public
    [...]
    function AddDataValue(const AValue: TBitrate): Boolean;
    property MaxDownstreamBitrate: Cardinal read FMaxBitrateDownstream write FMaxBitrateDownstream;
    property MaxUpstreamBitrate: Cardinal read FMaxBitrateUpstream write FMaxBitrateUpstream;
    property MaxDataValues: Word read FDataValuesInArray write SetMaxDataValues;
  end;

procedure TTrafficDiagram.Paint;
var
  Lgraphheight: integer;
  Llinestart, Llineend: TPoint;
  [...]
begin
    inherited;
    [...]
    Canvas.Pen.Color:= FColorDownstream;
    for I := 1 to FDataValuesInArray do begin
        Llinestart.X:= Self.Width-1 - (FGridLineDistance * (I-1));
        Llinestart.Y:= Lgraphheight - BitrateToPixel(FDataValues[I-1].Down, FMaxBitrateDownstream, Lgraphheight);
        Llineend.X:=   Self.Width-1 - (FGridLineDistance * (I));
        Llineend.Y:=   Lgraphheight - BitrateToPixel(FDataValues[I].Down, FMaxBitrateDownstream, Lgraphheight);
        if Llineend.X < 0 then
            Llineend.X:= -5;
        { No need to move anywhere after the first call of LineTo()
          since the Pen is already at the correct position }
        if I = 1 then
            Canvas.MoveTo(Llinestart.X, Llinestart.Y);
        Canvas.LineTo(Llineend.X, Llineend.Y);
    end;
    [...]
end;

Benutzen tue ich die Klasse dann so:

Delphi-Quellcode:

FTrafficDiagram:= TTrafficDiagram.Create(nil);
FTrafficDiagram.MaxUpstreamBitrate:= 128;
FTrafficDiagram.MaxDownstreamBitrate:= 1024;
FTrafficDiagram.MaxDataValues:= 50;

// im Timer
FBitrate.Up:= 10;
FBitrate.Down:= 100;
FTrafficDiagram.AddDataValue(FBitrate);
FTrafficDiagram.Refresh;

Die Datenpunkte werden bei mir ebenfalls via Timer erstellt (bzw. von der Quelle abgeholt) und dann wie gezeigt mit

Delphi-Quellcode:

AddDataValue()

hinzugefügt. Die Implementierung dieser Methode hab ich mal absichtlich weggelassen, weil einige beim Lesen des Codes wohl schwer atmen würden ;). Die Klasse TTrafficDiagram kümmert sich um das Array und das Zeichnen der Datenpunkte. Ein

Delphi-Quellcode:

FTrafficDiagram.Refresh;

löst den Aufruf von

Delphi-Quellcode:

TTrafficDiagram.Paint

aus. Daher verschwindet auch nix, wenn andere Fenster über der PaintBox liegen oder ähnliche Spielchen.

Aussehen tut das Ganze dann zum Beispiel wie im Anhang. Wobei man das Aussehen anpassen kann (Farbe, Rasterdichte, Raster ausschalten usw).

Ich hoffe, du kannst mit meinem Ansatz etwas anfangen. Leider weiß ich derzeit nicht, ob und vor allem wie man den Graph auch als Fläche zeichnen könnte (sofern das dein Ziel ist).

PS: Es spielt nicht wirklich eine Rolle, ob von TPainBox oder TGrahicControl abgeleitet wird, da erstere hauptsächlich Attribute von letzterer veröffentlicht (public oder published macht).

Grüße
Dalai

[Glados]

Ich würde das ja gerne verwenden. Aber es würde definitiv nichts bringen, da ich kein bisschen von dem Code verstehe. Erklären würde auch nix bringen.
Einzig interessant für mich ist gerade, dass das Ding skalierbar ist. D.h. wenn ein Wert den Rahmen (Anzeige) sprengt, könnte man damit wohl alles irgendwie anpassen.

Wär vielleicht besser wenn ich alles wieder verwerfe. Kapiere davon ja eh nix.

[stahli]

Helge meinte mal: "Lernen, lernen, popernen"

Wenn Du Zeit hast oder das Teilprojekt wichtig ist, dann taste Dich ran.
Andernfalls verwirf es, wenn Du keinen Bock drauf hast.

Da können wir Dir nichts raten.

[Glados]

Klappt doch eh nicht und skalieren muss das Ding auch können.

Um es bei deinen Worten zu belassen: hab ich keinen Bock drauf, obwohl ich es brauche.
Für die Skalierung würde sich was mit Prozentrechnung anbieten. Da ich kein Mathematiker bin und ein Matheschwächling, fällt das wieder raus.

Delphi-Quellcode:

var
 val: Integer;
begin
 val := RandomRange(25, 45);
 val := (val * 100) div StrToIntDef(Edit1.Text, PaintBox1.Height);

 iNewPos.X := iNewPos.X;
 iNewPos.Y := bmp.Height - val;

 bmp.Canvas.Pen.Color := clBlack;
 bmp.Canvas.Brush.Color := clBlack;
 bmp.Canvas.MoveTo(iNewPos.X, iNewPos.Y);
 bmp.Canvas.LineTo(iNewPos.X, bmp.Height);

 if iNewPos.X > 0 then
  begin
   bmp.Canvas.Pen.Color := clRed;
   bmp.Canvas.MoveTo(iOldPos.X, iOldPos.Y);
   bmp.Canvas.LineTo(iNewPos.X, iNewPos.Y);
  end;

 iOldPos.X := iNewPos.X;
 iOldPos.Y := bmp.Height - val;

 PaintBox1.Repaint;

 Inc(iNewPos.X, 5);
 if iNewPos.X >= PaintBox1.Width then
  begin
   Dec(iPosXBmp, 5);
   bmp.Width := bmp.Width + 5;  
  end;
end;

Probleme hier: rote Linie schießt oben raus, wenn Edit1.Text < 40
Hintergrund ist schwarz komischerweise.

[stahli]

Bei konkreten Fragen wird Dir hier bestimmt geholfen.

Aber die grundlegende Arbeit wird schon bei Dir bleiben. Dafür lernst Du aber auch was dabei.
Wenn Zeit dafür ist: Probiere es!

[Glados]

Habe oben mal was rumprobiert. Der Edit-Inhalt soll den Maximalwert darstellen, wo sich dann alle anderen Striche dran anpassen sollen.

Hier noch ein Update

Delphi-Quellcode:

var
 val, Max: Integer;
begin
 val := RandomRange(25, 45);

 Max := StrToIntDef(Edit1.Text, PaintBox1.Height);
 if Max > PaintBox1.Height then
  val := (val * 100) div Max
 else
  Max := PaintBox1.Height;

 Caption := val.ToString;

 iNewPos.X := iNewPos.X;
 iNewPos.Y := bmp.Height - val;

 bmp.Canvas.Pen.Color := clBlack;
 bmp.Canvas.Brush.Color := clBlack;
 bmp.Canvas.MoveTo(iNewPos.X, iNewPos.Y);
 bmp.Canvas.LineTo(iNewPos.X, bmp.Height);

 if iNewPos.X > 0 then
  begin
   bmp.Canvas.Pen.Color := clRed;
   bmp.Canvas.MoveTo(iOldPos.X, iOldPos.Y);
   bmp.Canvas.LineTo(iNewPos.X, iNewPos.Y);
  end;

 iOldPos.X := iNewPos.X;
 iOldPos.Y := bmp.Height - val;

 // horizontale Linie malen - ... jedenfalls die gescheiterte Idee
 bmp.Canvas.Brush.Color := clGreen;
 bmp.Canvas.MoveTo(0, iNewPos.Y);
 bmp.Canvas.LineTo(bmp.Width, iNewPos.Y);

 PaintBox1.Repaint;

 Inc(iNewPos.X, 5);
 if iNewPos.X >= PaintBox1.Width then
  begin
   Dec(iPosXBmp, 5);
   bmp.Width := bmp.Width + 5;
  end;

Das skalieren funktioniert so nun recht gut. Die Zahl im Edit ist immer das Maximum was es gegeben hat und daran passt sich der Rest dann an.

Nur habe ich jetzt ein neues Problem. Meine horizontale Linie die ich versuche zu malen wird natürlich immer und immer neu gezeichnet.
Meine Anfänger-Idee wäre jetzt, einfach ein TShape dafür zu nutzen was immer umpositioniert wird.

[stahli]

Code:

Height:MaxWert = H:Wert


 H        Height
---   =   ----
Wert      MaxWert


     Height * Wert
H =  ------------
      MaxWert

PS: Ich habe vor ein paar Monaten mal einen halben Tag gebraucht, bis ich eine drehende Linie zeichnen konnte. Allemal besser als Kreuzworträtsel :-)

[Glados]

Ich verstehe deine Formel da oben nicht und weiß noch nicht einmal ob es eine sein soll.

Wenn du damit die Positionierung der horizontalen Linie meinst: brauche ich nicht. Habe doch immer eine aktuelle Position in iNewPos.Y.
Problem ist die Anzeige.

[Dalai]

Der Code mit LineTo, MoveTo usw. muss in das Paint-Ereignis der PaintBox! Dein Code da oben zeichnet etwas auf der PaintBox, macht anschließend aber ein Repaint, womit alles wieder fort ist bzw. durch das ersetzt wird, was im Paint-Ereignis steht. In deinem Timer wird nur die Vorbereitung gemacht, also Daten abholen, Prozentwerte berechnen etc., und am Ende dann muss dann einmalig ein Repaint (oder Refresh oder Update oder Invalidate) ausgelöst werden.

PS: Nur zur Sicherheit: ein Repaint und die genannten Alternativen kommen natürlich nicht ins Paint-Ereignis der PaintBox.

Grüße
Dalai

[stahli]

@Glados

H wäre die Linienhöhe in der Paintbox, abhängig von deren Höhe (Paintbox.Height).
Also Val wäre Dein Wert und H die Höhe der Kurvenpunkte.

Kannst Du mal kurz was Zu Deinem Programmierhintergrund sagen (Alter, Beruf, Programmiererfahrung mit welchen Sprachen etc)?
Vielleicht können wir so etwas passender antworten.


@Dalai
Das hat er oben in #11 schon umgestellt.

[Glados]

Zitat:

Kannst Du mal kurz was Zu Deinem Programmierhintergrund sagen (Alter, Beruf, Programmiererfahrung mit welchen Sprachen etc)?

Zu sowas äußere ich mich im Internet nicht. Ich bin aber ein Programmier-Idiot, das ist sicher.

Wenn ich ein Shape aufs Formular setze und dann

Delphi-Quellcode:

Shape1.Top := PaintBox1.Top + iOldPos.Y;

, funktioniert es.
Aber ich würde gerne alles dynamisch erzeugen. Hatte ich eben schon mit dem Shape versucht aber es wird nicht angezeigt.

Außerdem bin ich mir eh nicht sicher ob ich das alles ausbaue. Denn so wie Windows das hat hätte ich es gerne. Windows macht es aber mit absoluter Sicherheit anders denn erstens ist der Bereich unter der Linie grün gefüllt und zweitens kann er seine Farbe wechseln.
Wäre aber super schade denn ich dachte ich könnte was Funktionierendes und Tolles zaubern :(

Das hier mit einem Chart sieht recht schön aus finde ich. Völlig ohne Kopfschmerzen bisher.
Muss später nur noch gucken wie man eigene Daten darein bekommt und es noch scrollen lässt.
Einzig eine Träne musste fließen bei der Erkenntnis, dass man kein Grid anzeigen lassen kann, ohne auch diese blöden Zahlen an der Seite und unten angezeigt zu bekommen.