Idee: Vektor-Screenshot-Tool (SVG) für Delphi/VCL - Interessenten?

[Redeemer]

Hallo zusammen!

Das ist jetzt eine seltsame Frage, die in kein Forum so richtig passt. Ich habe eine Projektidee und wollte mal fragen, ob Interesse an Nutzung und Erweiterung besteht.

Ich überlege, eine Unit zu stellen, mit der man von einem Delphi-VCL-Programm einen Vektor-Screenshot im SVG-Format erstellen kann, um qualitativ hochwertige und einfach lokalisierbare Dokumentation zu erstellen. In meiner Vorstellung würde die Unit bei Einbindung in ein Projekt eine zusätzliche Form erstellen, die einen Button hat, mit dem man einen Screenshot der zuletzt davor aktivierten anderen Form im aktuellen Zustand macht. Alternative Zustände (Hover, gedrückt, Checkboxen), Popup/DropdownMenus, Untermenüs, ComboBox-Listen etc. würden als unsichtbare Objekte gespeichert, die man im Vektoreditor seines Vertrauens einblenden könnte. Die Unit müsste jeden zu unterstützende TControl-Erben einzeln unterstützen. Ich benutze nur die Komponenten aus dem Standard- und Win32-Tab, weshalb ich auch nur diese selbst erstellen würde. Eine einfache Erweiterbarkeit um weitere TControl-Erben (die entsprechenden sie behandelnden Klassen könnten sich registrieren) und neuere Delphi-Versionen ist selbstverständlich, weshalb das Projekt Open Source auf Github wandern würde. Für die Standard- und Win32-Steuerelemente ergibt eine Vererbung meiner Meinung nach keinen Sinn, da sie alle komplett unterschiedlich aussehen. Bei anderen Steuerlementen ergibt es möglicherweise Sinn, ich weiß aber nicht, wie man das umsetzen könnte.
Man müsste sich zudem die Optik des Betriebssystems mehr oder weniger hardcoden (im Sinne von: nicht von irgendwelchen User-Skins übernehmen, da der Zugriff hierauf eher kompliziert ist). Da könnte man (außer für die Größe von Fensterrahmen) was mit CSS machen oder sich auf ein bestimmtes Betriebssystem festlegen (das wäre dann Win10, Win11 ist ja derzeit noch in der early pre-Alpha).

Ein vergleichbares Projekt gibt es (unabhängig von meiner Idee) für GTK. Die Sache scheint auch nach meiner Einschätzung eher Toolkit-gebunden zu sein und nicht generell z.B. für Win32 machbar.

Ich freue mich auf eure Meinungen.

[Der schöne Günther]

Ich habe noch nie etwas gesehen was die klassische Win32-Optik mit ihren Common Controls (was die VCL ja ist) in eine Vektorgrafik rendert. Nicht einmal im Ansatz - Das ist immer Pixelgrafik. Vielleicht ist das ja schon einmal ein Anhaltspunkt, wie herausfordernd die Umsetzung wäre.

Natürlich wäre das ein tolles Projekt, dringende Notwendigkeit habe ich aber ehrlich gesagt noch nicht gesehen, das zwingend als Vektorgrafik zu machen: Grade wenn man seine VCL-Oberfläche schon High Dpi-fähig hat, ein "normaler" Screenshot hat eigentlich immer gereicht. Verpasst man dem Bild noch einen schönen Schatten-Effekt und niemand kann meckern.

[venice2]

Zitat:

Man müsste sich zudem die Optik des Betriebssystems mehr oder weniger hardcoden

Denke ich nicht.
Die Daten Grafiken sind alle in der UxTheme enthalten. Wäre vielleicht ein Ansatz.

Siehe DrawThemeBackground.

[Redeemer]

Das sind aber Rastergrafiken, oder?

[venice2]

Zitat:

Zitat von Redeemer (Beitrag 1506101)

Das sind aber Rastergrafiken, oder?

Ja.

So wie ich verstanden habe möchtest du diese doch in Vektorgrafik konvertieren oder?
Oder ist das ein Problem Bitmap nach SVG umzulegen? Habe es selbst noch nicht versucht.
Samples

[Redeemer]

Man kann Rastergrafiken nicht in Vektorgrafiken konvertieren.
(Zumindest nicht, wenn das gut aussehen soll.)
Man kann Vektorgrafiken nur von Grund auf erstellen. Und das möchte ich. Das bietet sich auch erst seit Windows 8 an, weil davor der Detailreichtum zu groß war: Aero oder Luna? keine Chance! Bei Windows 10 malst du für einen Button ein einfarbiges Rechteck mit einfarbigem Rahmen und packst einen Text drauf. Fertig. Natürlich kannst du versuchen, einen Aero- oder Luna-Button annähernd mit Gradients und Effekten nachzubauen – aber im Vergleich zu Windows 10 ist das sehr aufwändig.

Angehängt mal ein Ausschnitt aus einem Beispiel, das ich aber manuell erstellt habe, in 6-facher Vergrößerung.

[venice2]

Zitat:

Man kann Rastergrafiken nicht in Vektorgrafiken konvertieren.

Ok.. War auch nur ein Hinweis um dir das Hardcoden zu ersparen da in der UxTheme halt System abhängig die Grafiken alle vorhanden sind.
Wenn es nicht geht hat sich das erledigt.. Sorry

[TiGü]

Technisch bestimmt interessant umzusetzen, aber ich persönlich habe dafür auch keinen Bedarf.
Und wenn - sagen wir mal - bei Windows 12 wieder Farbverläufe Einzug halten (alles in der Mode kommt wieder), dann wird es wieder haarig.

Könntest du denn ggf. die GDI Draw Commands eines Fensters (damit wird doch so das Ganze gezeichnet, oder?) ggf. einfach recorden und dann transformieren auf einen Vektorformat?

[Rolf Frei]

Das Projekt tönt sehr interessant, aber einen Bedarf sehe ich im Moment leider auch nicht. Wenn ich ein Screenshot einer Form brauche, reicht auch eine Rastergrafik vollkommen. Wenn diese Komponente wesentlich mehr bietet als nur einen einfachen Screenshot, z.B. selber malen, also eine Art SVG-Paintbox, sähe es deutlich sinnnvoller aus für mich.

@TiGü
Die ganzen Fenstersymbole, Rahmen, Hintergründe, etc. werde nicht durch Winbdows gezeichnet sondern sind alles Rastergrafiken, die in den Themes fetig hinterlegt sind.

[Uwe Raabe]

Zitat:

Zitat von TiGü (Beitrag 1506107)

Und wenn - sagen wir mal - bei Windows 12 wieder Farbverläufe Einzug halten (alles in der Mode kommt wieder), dann wird es wieder haarig.

Theoretisch kann SVG auch Farbverläufe. Lediglich die Erzeugung - insbesondere eine automatische - wäre schon sehr anspruchsvoll.

[jziersch]

Hallo,

das ist eine coole idee. Mit ein paar Zeilen code kann man schon einiges erreichen:

Code:

procedure TForm6.Button3Click(Sender: TObject);
var meta : TMetafile;
    can : TMetafileCanvas;
begin
   meta := TMetafile.Create;
   can := TMetafileCanvas.Create(meta, 0);
   try
     Self.PaintTo(can.Handle, 0,0);
   finally
     can.Free;
   end;
   meta.SaveToFile('s:\out.emf');
   meta.Free;
end;

Alle Panels werden bei mir als bitmaps ausgegeben, nicht als gefüllte Rechtecke. Evtl kann man dies abfangen oder die gleichfarbigen Bilder später erkennen und in entsprechende FillRects wandeln.

EMF ist natürlich nicht so schön wie SVG, aber skaliert auch.

[Uwe Raabe]

Gab es von Winsoft nicht mal eine SVG-Canvas?

[Medium]

Vorab als Kontext: Meine Bachelorarbeit war ein Rasterbild-Kompressionsverfahren, dass auf Kantendetektion mit Wiederherstellung aus den Kanten basiert hat. Die gesamte Entwicklung hat etwas über 2 Jahre gedauert, und die Endergebnisse waren zum einen so aufwendig, dass ich via Shader (heutzutage wohl eher CUDA bzw. andere GPU APIs) eine Grafikkarte ein paar Sekunden für ein FullHD-Bild damit beschäftigen konnte, und zum anderen dennoch zu sehr "comic like", dass ein Differenz-Bitmap nötig war. Je nach Bildinhalt war das deutlich besser oder schlechter als JPEG (das Differenzbild war sogar im Grunde ein JPEG), am Ende aber insgesamt VIEL zu viel Rechenaufwand für den Zweck. Hat mir dennoch einen sehr guten Abschluss beschert, war aber doch mehr nur theoretisches Beinevertreten. (Meine Prüfer waren der Meinung, dass der Gesamtumfang eher einer Master-Arbeit angemessen gewesen wäre, eher darüber hinaus. War aber eher ein Spaß-Projekt, dass ich dann zum Abschlussthema umgewandelt hatte.)

Vektorisieren von Rastergrafiken ist auch heute noch kein einfaches Unterfangen, vor allem wenn man so Details wie Farbverläufe und Strichbreiten berücksichtigen muss. Soll heißen: Wenn du keinen Zugriff auf bereits in einem Vektorformat vorliegende Daten hast - und zwar komplett - dann ist eine qualitativ nutzbare Ausführung eine Sache von Mannjahren. Da große Teile der von der VCL genutzen Grafiken der WinAPI nicht in solch einem Format vorliegen, halte ich das Vorhaben für unrealistisch, mindestens aber die möglichen Ergebnisse für begrenzt Einsetzbar.

[jziersch]

Zitat:

Zitat von Medium (Beitrag 1506115)

Vektorisieren von Rastergrafiken ist auch heute noch kein einfaches Unterfangen

Vekorisieren ist hier nicht erforderlich. Es sollen lediglich die auf einem Form enthaltenen Komponenten rekursiv durchlaufen werden und dann von innen nach außen als Vektoren abgespeichert werden.

Mein Vorschlag geht einen andern Weg indem er die vorhandene Paint routine nutzt. Linien werden hier tatsächlich als Striche ausgegeben, Texte sowieso als Text.

[Redeemer]

Zitat:

Zitat von jziersch (Beitrag 1506110)

Hallo,

das ist eine coole idee. Mit ein paar Zeilen code kann man schon einiges erreichen:

Code:

procedure TForm6.Button3Click(Sender: TObject);
var meta : TMetafile;
    can : TMetafileCanvas;
begin
   meta := TMetafile.Create;
   can := TMetafileCanvas.Create(meta, 0);
   try
     Self.PaintTo(can.Handle, 0,0);
   finally
     can.Free;
   end;
   meta.SaveToFile('s:\out.emf');
   meta.Free;
end;

Alle Panels werden bei mir als bitmaps ausgegeben, nicht als gefüllte Rechtecke. Evtl kann man dies abfangen oder die gleichfarbigen Bilder später erkennen und in entsprechende FillRects wandeln.

EMF ist natürlich nicht so schön wie SVG, aber skaliert auch.

Hab das gerade mal ausprobiert. Die Unterstützung für die erstellte EMF in unterschiedlichen Vektoreditoren ist unterschiedlich, aber überall schlecht:

• Affinity: Komplett unbrauchbar. Besonders auffällig: Fast alle Objekte (insbesondere alle Texte) werden in der oberen linken Ecke platziert, außer der Hintergrund von TButton, TRadioButton, TCheckBox, TListBox, TTreeView, TProgressBar und TTrackbar
• Inkscape: schlecht, kaum brauchbar. Besonders auffällig: Der Text von TMemo wird durch irgendwelchen Blödsinn ersetzt.
• Word (nach "Bild bearbeiten"): schlecht, marginal schlechter als Inkscape. Besonders auffällig: Word ist als einziges der drei Programme nicht Unicode-fähig.

Durch Vergleich untereinander und mit einer Ausgabe über den Microsoft PDF Printer via TPrinter komme ich zu folgender Vermutung:

TLabel	100% Vektor
TEdit	Rahmen Vektor, Text Raster
TMemo	100% Vektor
TButton	Rahmen Raster, Text Vektor
TGroupBox	Rahmen Raster, Text Vektor, Text Vektor
TRadioButton	Symbol Raster, Text Vektor
TCheckBox	Symbol Raster, Text Vektor
TStatusBar	Rahmen und Symbol Raster, Text Vektor
TListBox	100% Vektor
TComboBox - ComboBox	Rahmen und Symbol Raster, Text fehlt
TComboBox - Simple	Rahmen des Eingabefelds im Fokus-Status und Raster, Text fehlt, Listbox fehlt komplett
TComboBox - ComboBoxList	Rahmen und Symbol Raster, Text Vektor
TTreeView	Rahmen und Symbole Raster, Text Vektor
TProgressBar	100% Raster
TScrollBar	100% Raster
TTrackBar	100% Raster
TTabControl	Rahmen Raster, Text Vektor

Ist nicht so toll.

[jziersch]

Viele Software macht bei EMF schlapp, allerdings konnte ich mit meinem PDF Konverter wPDF das Ergebnis nach PDF wandeln un dieses wiederum mit PhotoLine nach SVG. Das Ergebnis hängt hier an.

Ich teile Deine Erfahrung. Insbesondere die Edits sind dann Raster.

[TurboMagic]

Wie sieht es mit WMF aus?
Evtl. können manche Programme besser.

[himitsu]

SVG kann doch aber auch Rastergrafiken enthalten, oder nicht?

Also wäre es möglich Teile via Vectorbestandteilen und Anderes pixelig zu haben.

[delphifan2004]

Ich beleuchte das mal aus Anewendersicht.

Wo brauche ich denn Vektorgrafik? Als Anwender will ich mein Monitorbild schell und unkompliziert ohne knstliche Verzögerung angzeigt bekommen, da nervt mich schon jede Flash Amimation auf der Wecseite, oh Mann eh da das Bild aufgebaut ist!

Als Computerspieler, der ich aber nicht bin, würde ich vielleicht Geld für die teure High End Grafikkarte ausgeben. Aber ich bin kein Computerspieler ich will nur mein Monitorbild anständig angezeigt haben.

Ich habe mir das Open Source Programm Blender angeschaut. Super, was ich damit an Anomtionen erstellen kann. Aber warum kann ich dort ein gerendertes Bild auf meinem Rechner nicht anzeigen, obwohl einfache Spiele auch in 3D funktionieren? Ganz einfach, Blender rechnet hochausflösend und somit mathematisch exakt. Meine Grafik ist eine simple OnBoard Grafik, die zum Anzeigen von Windows völlig ausreicht, auch performant anzeigt, aber bei aufwendigen Grafikanimationen völlig berfordert ist. In Computerspielen werden Näherungsrechnungen verwendet, deshalb kann dann sogar meine OnBoard Grafik diese Animationen anzeigen. Und High End Spiele, die wirklich so eine teure Grafikkarte erfordern, spiele ich nicht, da ich nicht so ein Spielefan bin.

Langer Rede kurzer Sinn, ich will eine schnelle Bildschirmausgabe für meine Anwendungen, da sehe ich in Vektorgrafik nach all dem vorher gesagten hier, keinen Nutzen für mich. Der Rechenaufwand ist höher, die Performance dürfte massiv leiden und ich bin einer von denen die nicht gewillt sind, sich die neuste Hardware anzuschaffen, nur damit das brandneue Programm läuft. Im Zweifelsfall nehme ich dann eben eine Uralt Version davon. Die mag nicht alles können, was dieneuste Version vielleicht kann, aber was ich für den Alltag brauche, kann mit Sicherheit auch die Uralt Version. Und die läuft dann auch auf meinem alten Rechner.

Auch irgendeine Grafikanimation mit Blender wäre mir lieber mit einfacherern Algos erstellt, die auch mir mit der Onboard Grafik die Chance geben, das Ergbnis meiner gerenderten Grafik zu sehen, Grafiken die mit Blender erstellt wurden, kann ich ja wenn ich sie von fremden als .jpg Dateien bekomme, auch wieder und sogar mit dieser meiner OnBoard Grafikkarte anzeigen. Da wünschte ich mir für Blender eine Einsterllung der Rechengenauigkeit, die ich so lange verringern kann bis ich mit meiner Hardware die gernderte Animation sehen kann wie das andere bei ihren youtube Demos von Blender auch können.

Also lehen ich schon aml auf meinem Recner alles ab, was mich zu teuren Neuanschaffungen zwingt, nur damit ich die tolle Grafik bei mir auch anzeigen kann. Rastergrafik ist da günstiger, die sehe ich schneller.

Ist nicht böse gemeint, aber ein Programmierer sollte schon wissen wie die Anwender ihrer Software ticken. Deshalb dieser Beitrag.

[Uwe Raabe]

Zitat:

Zitat von delphifan2004 (Beitrag 1506160)

Also lehen ich schon aml auf meinem Recner alles ab, was mich zu teuren Neuanschaffungen zwingt, nur damit ich die tolle Grafik bei mir auch anzeigen kann. Rastergrafik ist da günstiger, die sehe ich schneller.

Wenn ich das richtig verstanden habe, geht es Janni gar nicht um die Anzeige am Bildschirm, sondern eher um sowas wie Druckerzeugnisse:

Zitat:

Zitat von Redeemer (Beitrag 1506098)

Ich überlege, eine Unit zu stellen, mit der man von einem Delphi-VCL-Programm einen Vektor-Screenshot im SVG-Format erstellen kann, um qualitativ hochwertige und einfach lokalisierbare Dokumentation zu erstellen.

[Rollo62]

Hört sich interesant an, aber ich bin jetzt nicht ganz sicher ob ich den eigentlichen Sinn richtig verstanden habe.

Aus meiner Sicht würde ich das so umsetzen, quasi in zwei Phasen:
1. Ein "Form-Baum" Ersteller, der die aktuelle Form, Komponenten, Zustände etc. in XML o.ä. speichert in eine Art Seitenbeschreibungssprache
2. Ein "Renderer", der dann diesen Baum entsprechend in SVG rendert

Der 2.) Schritt wäre dann nur einmal pro Komponente ( vielleicht mit etwas Handarbeit ) nötig, aber wie ein Button zu SVG gerendert wird
sollte ich in der Regel nur einmal zu implementieren sein, wenn ansonsten Größe, Positionen, Fonts, Wrap, etc. bekannt sind.
Gefühlt würde ich annehmen dass das nur bei den Standard-Controls relativ leicht machbar wäre.

Das hätte den Vorteil dass man den 2.) Rendererteil mal auswechseln oder leicht erweitern könnte ( z.B. WinXP-Style, Aero-Style, DevExpress, ... ).
Der Vorteil wäre auch dass im 1. Teil dann ein sehr optimiertes XML zur verfügung stände, was wie eine komprimierte "Seitenbeschreibungssprache" funktionieren würde.
Ich würde aber erstmal schauen ob es nicht vielleicht schon passende Seitenbeschreibungssprachen gibt, mit fällt auf Anhieb jetzt nichts dazu ein.

Das müsste meiner Meinung nach funktionieren weil man alles Visuelle am Ende in irgendwelche Primitive auflösen kann ( Polygon, Positionen, Linienstärke, Gradient, Font, Höhe, Breite, ... ).
Aber 1:1 pixelgenau wird das wohl nicht, würde ich aber auch nicht unbedingt benötigen.

[Redeemer]

Zitat:

Zitat von delphifan2004 (Beitrag 1506160)

Ich beleuchte das mal aus Anewendersicht.

Die Idee ist überhaupt nicht für Anwender gedacht.

Zitat:

Zitat von Uwe Raabe (Beitrag 1506178)

Wenn ich das richtig verstanden habe, geht es Janni gar nicht um die Anzeige am Bildschirm, sondern eher um sowas wie Druckerzeugnisse

Ich dachte vor allem an Videos, wo man vielleicht an einen Teil des Programms heranzoomen möchte, ohne dass es Pixelmatsch wird.

Zitat:

Zitat von Rollo62 (Beitrag 1506179)

Aus meiner Sicht würde ich das so umsetzen, quasi in zwei Phasen:
1. Ein "Form-Baum" Ersteller, der die aktuelle Form, Komponenten, Zustände etc. in XML o.ä. speichert in eine Art Seitenbeschreibungssprache
2. Ein "Renderer", der dann diesen Baum entsprechend in SVG rendert

Der 2.) Schritt wäre dann nur einmal pro Komponente ( vielleicht mit etwas Handarbeit ) nötig, aber wie ein Button zu SVG gerendert wird
sollte ich in der Regel nur einmal zu implementieren sein, wenn ansonsten Größe, Positionen, Fonts, Wrap, etc. bekannt sind.
Gefühlt würde ich annehmen dass das nur bei den Standard-Controls relativ leicht machbar wäre.

Das hätte den Vorteil dass man den 2.) Rendererteil mal auswechseln oder leicht erweitern könnte ( z.B. WinXP-Style, Aero-Style, DevExpress, ... ).
Der Vorteil wäre auch dass im 1. Teil dann ein sehr optimiertes XML zur verfügung stände, was wie eine komprimierte "Seitenbeschreibungssprache" funktionieren würde.
Ich würde aber erstmal schauen ob es nicht vielleicht schon passende Seitenbeschreibungssprachen gibt, mit fällt auf Anhieb jetzt nichts dazu ein.

Das müsste meiner Meinung nach funktionieren weil man alles Visuelle am Ende in irgendwelche Primitive auflösen kann ( Polygon, Positionen, Linienstärke, Gradient, Font, Höhe, Breite, ... ).
Aber 1:1 pixelgenau wird das wohl nicht, würde ich aber auch nicht unbedingt benötigen.

Interessanter Ansatz. Bin mir aber nicht sicher, ob das die Sache mit dem Ziel, das erstmal nur für Win10 zu machen, nicht unnötig kompliziert macht, denn mein ursprünglicher Ansatz war der hier:

Zitat:

Zitat von jziersch (Beitrag 1506122)

Es sollen lediglich die auf einem Form enthaltenen Komponenten rekursiv durchlaufen werden und dann von innen nach außen als Vektoren abgespeichert werden.