Diagramme zeichnen - Pixelbild oder Vektorgrafik?

Rund um die LCL und andere Komponenten
Antworten
Timm Thaler
Beiträge: 1224
Registriert: So 20. Mär 2016, 22:14
OS, Lazarus, FPC: Win7-64bit Laz1.9.0 FPC3.1.1 für Win, RPi, AVR embedded
CPU-Target: Raspberry Pi 3

Diagramme zeichnen - Pixelbild oder Vektorgrafik?

Beitrag von Timm Thaler »

Ich möchte einige Diagramme (Temperaturverläufe, Wetterstation usw.) für die Weiterverarbeitung im Browser selbst zeichnen und stehe gerade vor der Frage: Als Pixelbild oder als Vektorgrafik.

Pixelbild mit fcl-image
+ Ausgabe als PNG kann (fast) jeder Webbrowser darstellen
+ ich kann meine vorhandenen Grafikroutinen zum Diagrammzeichnen verwenden
+ die Bildgröße ist als PNG sehr überschaubar
--- nicht verlustfrei skalierbar
- transparente Flächen schwierig, scheint aber zu gehen

Vektorgrafik mit fpvectorial
+++ skalierbar
+ bessere Textdarstellung
+ transparente Flächen (Min-Max-Bereiche), Splines möglich
-- keine Ahnung von, müsste ich mir erst erarbeiten
- SVG möglicherweise nicht auf jedem Browser darstellbar

Problem: Ich muss micht JETZT entscheiden, wie ich weiter vorgehe, weil die Darstellung dann wahrscheinlich für mehrere Projekte genutzt wird und ich das nicht jedesmal umstricken will.

Hintergrund: Ich möchte die Diagramme selbst zeichnen und nicht die Charts-Library verwenden. Die Diagramme werden in einem Konsolenprogramm im Hintergrund gezeichnet und als Bild abgelegt => das funktioniert rudimentär mit PNG schon, dann in eine Webseite eingebunden. Ich möchte aus Performancegründen die Diagramme nicht in der Webseite selbst zeichen, wie es z.B. dygraphs.com macht.

Timm Thaler
Beiträge: 1224
Registriert: So 20. Mär 2016, 22:14
OS, Lazarus, FPC: Win7-64bit Laz1.9.0 FPC3.1.1 für Win, RPi, AVR embedded
CPU-Target: Raspberry Pi 3

Re: Diagramme zeichnen - Pixelbild oder Vektorgrafik?

Beitrag von Timm Thaler »

Vergessen: am Ende soll schon so etwas wie hier http://dygraphs.com/ herauskommen, aber als statisches Bild.

wp_xyz
Beiträge: 4869
Registriert: Fr 8. Apr 2011, 09:01

Re: Diagramme zeichnen - Pixelbild oder Vektorgrafik?

Beitrag von wp_xyz »

Um Diagramme mit Lazarus zu zeichnen, ist TAChart die erste Wahl, mit fcl-image und fpvectorial erfindest du das Rad neu. DIe TAChart-Diagramme kannst du auch auf verschiedenen Medien ausgeben (Screen, Bitmap, Zwischenablage, svg-Vektorgraphik, Drucker).

http://wiki.lazarus.freepascal.org/TACh ... umentation
http://wiki.lazarus.freepascal.org/TAChart_Demos
http://wiki.lazarus.freepascal.org/TACh ... ng_started
usw.

Timm Thaler
Beiträge: 1224
Registriert: So 20. Mär 2016, 22:14
OS, Lazarus, FPC: Win7-64bit Laz1.9.0 FPC3.1.1 für Win, RPi, AVR embedded
CPU-Target: Raspberry Pi 3

Re: Diagramme zeichnen - Pixelbild oder Vektorgrafik?

Beitrag von Timm Thaler »

wp_xyz hat geschrieben:Um Diagramme mit Lazarus zu zeichnen, ist TAChart die erste Wahl...


1. Ich habe schon mit TAChart gearbeitet. Es kann einen Haufen Sachen, die ich nicht brauche. Es kann einiges nicht, was ich gern hätte, z.B. die transparenten Bereiche für die Min-Max-Werte, zumindest habe ich dazu bisher nichts gefunden. Um die Diagramme so anzupassen, wie ich sie gern hätte muss ich sehr viel von Hand einstellen => selbst zeichnen, die Routinen dafür habe ich bereits.

2. Egal ob mit TAChart oder selbstgezeichnet: Welche Ausgabe ist "zeitgemäßer" oder geeigneter, Pixelbild oder Vektorgrafik? TAChart kann ja auch auf Vektorgrafik ausgeben. Ich habe bisher immer mit Pixeldiagrammen gearbeitet (Messwertdarstellung, Datenerfassung), aber vielleicht ist ja Zeit mal was Neues zu lernen.

pluto
Lazarusforum e. V.
Beiträge: 7178
Registriert: So 19. Nov 2006, 12:06
OS, Lazarus, FPC: Linux Mint 19.3
CPU-Target: AMD
Wohnort: Oldenburg(Oldenburg)

Re: Diagramme zeichnen - Pixelbild oder Vektorgrafik?

Beitrag von pluto »

Wenn du Vektorgrafiken nimmst ist das ganze Dynamischer. Piexlgrafiken kann man schlechter anpassen z.b. bei der Größe.

Die Browser sollten auch Problemlos SVG dastellen können.

Ich selbst nutze in einem Programm die TChart Komponente. Am Anfang ist das etwas "ungewohnt", aber es geht.
Das ganze läuft in einer Konsolen Anwendung rund um die Uhr. Dabei ist es ein WebSocketServer.
MFG
Michael Springwald

Mathias
Beiträge: 6164
Registriert: Do 2. Jan 2014, 17:21
OS, Lazarus, FPC: Linux (die neusten Trunk)
CPU-Target: 64Bit
Wohnort: Schweiz

Re: Diagramme zeichnen - Pixelbild oder Vektorgrafik?

Beitrag von Mathias »

DIe TAChart-Diagramme kannst du auch auf verschiedenen Medien ausgeben (Screen, Bitmap, Zwischenablage, svg-Vektorgraphik, Drucker).
Wie bringe ich ein Diagramm in eine svg-Grafik ?
Mit Lazarus sehe ich grün
Mit Java und C/C++ sehe ich rot

wp_xyz
Beiträge: 4869
Registriert: Fr 8. Apr 2011, 09:01

Re: Diagramme zeichnen - Pixelbild oder Vektorgrafik?

Beitrag von wp_xyz »

Schau dir die Demos in (lazarus)/components/tachart/demo/save bzw. .../fpvectorial an.

Mathias
Beiträge: 6164
Registriert: Do 2. Jan 2014, 17:21
OS, Lazarus, FPC: Linux (die neusten Trunk)
CPU-Target: 64Bit
Wohnort: Schweiz

Re: Diagramme zeichnen - Pixelbild oder Vektorgrafik?

Beitrag von Mathias »

Ich habe folgendes gemacht, dies erzeugt aber nur eine Pixel-Grafik.

Code: Alles auswählen

procedure TForm1.Button1Click(Sender: TObject);
var
  fs: TFileStream;
  id: IChartDrawer;
begin
  fs := TFileStream.Create('test.svg', fmCreate);
  try
    id := TSVGDrawer.Create(fs, True);
    with Chart1 do begin
      Draw(id, Rect(0, 0, Width, Height));
    end;
  finally
    fs.Free;
  end;
end;   
Mit Lazarus sehe ich grün
Mit Java und C/C++ sehe ich rot

wp_xyz
Beiträge: 4869
Registriert: Fr 8. Apr 2011, 09:01

Re: Diagramme zeichnen - Pixelbild oder Vektorgrafik?

Beitrag von wp_xyz »

Wie kommst du darauf? Lade die Datei in einem Editor und du siehst die typische xml-Struktur einer svg-Datei. Lade sie in Inkscapte, und du kannsts sie unbegrenzt vergrößern, achte dabei auf die Schrift.

Mathias
Beiträge: 6164
Registriert: Do 2. Jan 2014, 17:21
OS, Lazarus, FPC: Linux (die neusten Trunk)
CPU-Target: 64Bit
Wohnort: Schweiz

Re: Diagramme zeichnen - Pixelbild oder Vektorgrafik?

Beitrag von Mathias »

Lade sie in Inkscapte

Habe ich gerade gemacht, aber ich dachte eine Vector-Grafik sehe irgendwie anders aus, das zB. die Linien immer gleich dick sind, egal , wie ich das Bild skaliere. Bei WMF war dies so.
Dateianhänge
Bildschirmfoto vom 2017-01-31 19-43-12.png
Mit Lazarus sehe ich grün
Mit Java und C/C++ sehe ich rot

Timm Thaler
Beiträge: 1224
Registriert: So 20. Mär 2016, 22:14
OS, Lazarus, FPC: Win7-64bit Laz1.9.0 FPC3.1.1 für Win, RPi, AVR embedded
CPU-Target: Raspberry Pi 3

Re: Diagramme zeichnen - Pixelbild oder Vektorgrafik?

Beitrag von Timm Thaler »

Stimmt, das sieht wirklich eigenartig aus mit den gerasterten Linien.

wp_xyz
Beiträge: 4869
Registriert: Fr 8. Apr 2011, 09:01

Re: Diagramme zeichnen - Pixelbild oder Vektorgrafik?

Beitrag von wp_xyz »

Mathias hat geschrieben:... ich dachte eine Vector-Grafik sehe irgendwie anders aus, das zB. die Linien immer gleich dick sind, egal , wie ich das Bild skaliere. Bei WMF war dies so.

Dann schau das beigefügte Beispielbild von http://www.w3schools.com/graphics/svg_intro.asp mit Inkscape an und zoome rein.
Je nachdem, wie die Skalierungseigenschaften der Linien eingestellt sind, nimmt auch die Linienbreite bei wmf mit dem Zoomfaktor zu.

Timm Thaler hat geschrieben:Stimmt, das sieht wirklich eigenartig aus mit den gerasterten Linien.

Dazu muss ich ausholen: TAChart transformiert Koordinaten von Achseneinheiten (das was an den Achsen steht), über Graphik-Einheiten (Einheiten des "Millimeterpapiers", auf dem das Diagramm gezeichnet wird) nach Bildschirmkoordinaten (Pixel). Letztere sind Integer. Für die Ausgabe auf anderen Geräten werden dann die Bildschirmkoordinaten nochmals auf Geräteeinheiten umgerechnet. Obwohl die Geräteeinheiten, wie bei svg, Gleitkommazahlen sein können, bleiben die Eingangsgrößen weiterhin die gerundeten Integer der Bildschirmauflösung. Das gleiche Problem hat TeeChart bei Delphi.

Falls jemand Lust hat, die svg-Generierung vor der Umrechnung auf Bildschirmpixel einzubauen, wobei aber der Chart genauso aussehen muss wie auf dem Bildschirm, würde ich einen entsprechenden Patch gerne aufnehmen.

Timm Thaler
Beiträge: 1224
Registriert: So 20. Mär 2016, 22:14
OS, Lazarus, FPC: Win7-64bit Laz1.9.0 FPC3.1.1 für Win, RPi, AVR embedded
CPU-Target: Raspberry Pi 3

Re: Diagramme zeichnen - Pixelbild oder Vektorgrafik?

Beitrag von Timm Thaler »

wp_xyz hat geschrieben:Falls jemand Lust hat, die svg-Generierung vor der Umrechnung auf Bildschirmpixel einzubauen, wobei aber der Chart genauso aussehen muss wie auf dem Bildschirm, würde ich einen entsprechenden Patch gerne aufnehmen.


Naja, ich würde schon direkt Werte in svg-xy umrechnen. Momentan scheitere ich an der ... gewöhnungsbedürftigen ... Doku der fpvectorial. Also irgendwie ist da nicht viel vorhanden, und irgendwie sind auch die Funktionen sehr rudimentär. Ich arbeite mich gerade durch die Unit.

Zum Beispiel sollte TvVectorialPage eine Eigenschaft BackgroundColor von TvPage erben. Die bewirkt aber nichts und wird auch im SVG nicht mit abgespeichert.

Zum Beispiel sollte ich mit TvStyle und TvFont die Schriftart, Größe und Farbe eines AddText beeinflussen können. Das wirft mir aber eine Exception, allerdings nicht bei der Zuweisung, sondern beim Versuch das Dokument mit WriteToFile abzuspeichern.

Das ist irgendwie sehr unbefriedigend. Aber ich werd mich da mal durchbeißen.

Timm Thaler
Beiträge: 1224
Registriert: So 20. Mär 2016, 22:14
OS, Lazarus, FPC: Win7-64bit Laz1.9.0 FPC3.1.1 für Win, RPi, AVR embedded
CPU-Target: Raspberry Pi 3

Re: Diagramme zeichnen - Pixelbild oder Vektorgrafik?

Beitrag von Timm Thaler »

Nachdem ich mich jetzt ein bißchen durch SVG durchgebissen habe, zwei Erkenntnisse:

1. SVG ist geil!
2. Die fpvectorial ist kacke. Zumindest was die Ausgabe von SVG betrifft. Es werden nur wenige der Möglichkeiten bedient, es ist ein Krampf z.B. ein vernünftiges Textscaling hinzubekommen. Zeichenelemente (Line, Rect, Polygon) werden alle mit Path erschlagen, dabei relative Koordinaten benutzt, bei vielen Datenpunkten fliegt einem das aufgrund von Rundungsfehlern um die Ohren.

Ich schreibe das SVG jetzt direkt in eine Datei. Da kann ich die SVG-Zeichenelemente und das Scaling nutzen, Transparenz geht, Text geht, so nette Sachen wie runde Miter und Linienenden geht. Und Vergrößern ohne Raster im Browser geht natürlich auch.

Nachteil, die Dateien sind etwas größer als die vergleichbaren PNG-Dateien. Dafür aber nicht pixelig.

Antworten