title: Design einer Progressive Web Application für CircuiTikZ
Creators: name: Kirzinger, Manuel
Publisher: name: Friedrich-Alexander-Universität Erlangen-Nürnberg (FAU)
Year: 2024
Subjects: subject: CircuiTikZ, GUI, SVG, progressive web application (PWA), LaTeX, WYSIWYG editor, node.js

description: Das Ziel dieser Arbeit besteht darin, einen WYSIWYG-Editor für Schaltpläne zu erstellen. Die Software bzw. Web-Applikation soll CircuiTikZ-Code generieren, der einfach in LaTeX- Dokumente eingebunden werden kann. Besonderer Wert wird auf die Unterstützung einer Vielzahl von Symbolen gelegt. Außerdem soll die Lauffähigkeit auf verschiedenen Systemen gewährleistet sein. Dadurch soll der Entwurf und die Einbindung von Schaltplänen in wissenschaftlichen Dokumenten erleichtert werden, unabhängig davon, welches Gerät verwendet wird. Die Arbeit wird in zwei Teilprojekte aufgeteilt. Das erste Teilprojekt hat das Ziel, CircuiTikZ Symbole automatisch zu konvertieren. Durch die Automatisierung soll die Anzahl der verfügbaren Symbole erhöht werden. Das zweite Teilprojekt umfasst die Erstellung einer Progressive Web Application (PWA), die dank der Verwendung von Webtechnologien auf jedem System mit einem aktuellen Browser ausgeführt werden kann. Beide Teilprojekte sind in JavaScript programmiert. Für das erste Teilprojekt ist eine Liste der Symbol- und zugehörigen Ankernamen erforderlich. Aus diesen Daten werden automatisch LaTeX-Dateien generiert, welche neben dem eigentlichen Symbol eine Reihe an Hilfslinien beinhalten. Nach dem Übersetzen und Konvertieren liegt das Symbol als SVG vor. Dieses wird aufbereitet und die Hilfslinien werden von ihm getrennt. Anschließend werden aus den Hilfslinien die Pinpositionen des Bauteils ermittelt. Diese Informationen werden als Metadaten in das erzeugte SVG-Symbol eingebettet. Die PWA ist eine erweiterte Webseite, die ebenfalls SVG für die Zeichenfläche verwendet. Symbole können per Drag-and-Drop in die Zeichenfläche eingefügt werden. Außerdem können Pfad-Symbole und Linien gezeichnet werden, die sich sowohl an einem Gitter als auch an anderen Symbolen ausrichten. Die beiden verschiedenen Arten von CircuiTikZ-Symbolen, node- und path-style, werden vollständig unterstützt. Bei den Funktionen wurde darauf geachtet, sowohl Touch- als auch Mauseingaben zu verarbeiten. Darüber hinaus kann die Seite auch installiert werden und unterscheidet sich somit aus Nutzersicht nicht von einer herkömmlichen Anwendung. Die Webanwendung wurde entwickelt, um auf einfache Weise Schaltpläne für wissenschaft- liche Dokumente zu erstellen. Dies kann durch den WYSIWYG-Editor komfortabel erfolgen. Durch die 219 verfügbareren Symbole werden viele Fachgebiete abgedeckt. Allerdings kann eine grafische Lösung nicht die volle Flexibilität von LaTeX bieten. Mit neuen und angepassten Befehlen sind in LaTeX beliebige Anpassungen möglich. Diese Einschränkung wurde jedoch in Kauf genommen, um eine komfortablere Erstellung von Schaltplänen zu ermöglichen.
description: The objective of this thesis is to create a WYSIWYG editor for circuit diagrams. The web application should generate CircuiTikZ code, which can be easily integrated into LaTeX documents. The software shall support a multitude of symbols. Furthermore, the ability to run on different systems is required. The intent is to ease the design and integration of circuit diagrams into scientific documents, independent of the device used. The work is divided into two subprojects. The first subproject aims to automatically convert CircuiTikZ symbols. This automation is intended to increase the number of available symbols. The second subproject is the development of a progressive web application (PWA) that works on any device with a current browser by utilizing standardized web technologies. Both are programmed in JavaScript. The first subproject requires a list of symbol names and their corresponding anchor names. This data is used to generate LaTeX files that include the symbol and auxiliary lines. After compilation and conversion, the symbol is available as a SVG. Subsequently, the symbol is processed, and the auxiliary lines are separated from the symbol. The components pin positions are determined by using the auxiliary lines. This information is embedded as metadata in the generated SVG symbol. The PWA, an extended website, also utilizes SVG for its drawing area. Symbols can be inserted into the drawing area using drag-and-drop. In addition, path symbols and lines can be drawn and snap to a grid as well as to other symbols. The two different types of CircuiTikZ symbols, node-style and path-style, are fully supported. The functions have been designed to handle both touch and mouse input. In addition, the site is installable, thus the user experience is no different to a conventional application. The purpose of the web application is to ease the creation of circuit diagrams for scientific documents. This is done conveniently using the WYSIWYG editor. Due to the large number of available symbols, the application covers many fields. It is important to note that a graphical solution cannot offer the same flexibility as LaTeX. By creating new commands or altering existing ones, symbols can be altered arbitrary in LaTeX. This limitation has been accepted in order to make the web application user-friendly and to simplify the creation of schematics.