Differences

This shows you the differences between two versions of the page.

--- symbols-de [2019/11/09 22:39]
hermannk [Zeige Fahrstraßen-/Block-Ausleuchtung]
+++ symbols-de [2020/10/28 00:09] (current)
rainerk [Alternative SVG durch zweiten <g>-Container]
@@ Line 10: / Line 10: @@
 {{ :rocview:themes-tree.png?0x400}}
 =====Themen-Verzeichnis-Struktur=====
-| :!: In Revision 14318 sind die SVG-Themen neu organisiert; Die SVG-Pfade überprüfen. |
 Die offiziellen Themen befinden sich im Unter-Verzeichnis **svg/themes**.\\
 Alle anderen Unter-Verzeichnisse sind benutzerdefinierte Themen.\\
@@ Line 22: / Line 21: @@
  \\
 =====Einstellungen=====
-{{rocgui-ini-svg-de.png?0x460}}\\
+|  {{rocgui-ini-svg-de.png?0x460}}  |
-\\
+|  Rocview-Egenschaften, Registerkarte 'SVG' mit geöffnetem Eigenschafts-Dialog zu **Thema 1**  |
+| **Achtung:** Für **RocWeb** und **andRoc** müssen die SVG-Pfade im RocWeb-Dialog der **[[rocrailini-rocweb-de#rocweb-einstellungen|Rocrail-Eigenschaften]]** eingestellt werden.|
 ==== Thema 1 - 5 ====
@@ Line 31: / Line 33: @@
 Das bedeutet, dass jeweils das erste Thema bestimmt, wie ein SVG-Symbol aussieht.\\
-====[ . . . ]====
+====Dreipunkt-Schaltfläche [ . . . ]====
 Öffnet die Explorer-Sicht zur Auswahl des gewünschten Verzeichnisses für das Thema.
 \\
@@ Line 40: / Line 42: @@
 ==== Schriftgröße für Objekt-Kennungen ====
-Stellt die Schriftgröße der Kennung am  Objekt-Symbol im Gleisplan ein. Voreingestellt ist **7**.\\
+Stellt die Schriftgröße der Kennung am  Objekt-Symbol im Gleisplan ein. Bereich 2 bis 15. Voreingestellt ist **7**.\\
 __Rocview muss neugestartet werden, damit Änderungen aktiviert werden.__
 \\
@@ Line 55: / Line 57: @@
   * Windows = 10
   * Default = 10
+Das zweite Feld dient der Anpassung der Textpunktgröße von -100% bis +100%. Dies kann hilfreich sein, wenn mehrere Rocviews auf verschiedenen Plattformen / Auflösungen mit demselben Server verbunden sind. \\
+|< >|
+^ Beispiele ^^
+|  {{:rocview:text-ps-mac-2560x1600.png?0x100}}  |  {{:rocview:text-ps-win-1920x1280.png?0x100}}  |  {{:rocview:text-ps-win-1920x1280-50.jpg?0x100}}  |
+|  Mac 2560x1600  |  Windows 1920x1280  |  Windows 1920x1280 -50%  |
 __Rocview muss neugestartet werden, damit Änderungen aktiviert werden.__\\
 \\
@@ Line 68: / Line 77: @@
 Nur das **SpDrS60**-Thema enthält die erforderlichen SVGs.\\
 {{:rocview:sw-routes.png}}\\
-Wenn die Fahrstraßen mit einer Revision älter als 7884 erzeugt wurden, muss der Analyzer erneut gestartet werden,\\
+Wenn die Fahrstraßen mit einer Revision älter als 7884 erzeugt wurden, muss der Router erneut gestartet werden,\\
 damit die Fahrstraßen-Kennungen automatisch in die Weichen-Objekte eingetragen werden. \\
-Im Fall manueller Fahrstraßen den __**[[:select-de|Auswahl-Dialog]]**__ verwenden.
+Im Fall manuell angelegter Fahrstraßen den __**[[:select-de|Auswahl-Dialog]]**__ verwenden.
  \\
 ====Fahrstraße priorisieren====
@@ Line 76: / Line 85: @@
  \\
-=====Beispiele=====
+=====Gleis-/Straßen-Plan=====
-====Gleis-/Straßen-Plan====
 Gleis- u. Straßen-Symbole können in einem Plan gemischt werden:\\
 {{:track-road-layout.png}}\\
@@ Line 86: / Line 94: @@
 ==== Text-Editor ====
   * Am Ende dieser Seite ist ein zweiteiliges **[[#videos|Video-Tutorial]]** zum Thema
-Wenn man eigene Symbole für Gleisplan-Objekte verwenden möchte, dann müssen diese im SVG-Format erstellt werden.\\
+Wenn eigene Symbole für Gleisplan-Objekte verwendet werden sollen, dann müssen diese im SVG-Format erstellt werden.\\
 Die Attribute **''width''** und **''hight''** in der SVG-Datei werden verwendet, um die Größe des Symbols im Gleisplan zu berechnen.\\
 Es muss allerdings sichergestellt sein, dass diese Werte ein Vielfaches von 32 darstellen. \\
@@ Line 94: / Line 102: @@
 Die Dateinamen für die einzelnen Symbole mit den jeweiligen Zuständen sind vordefiniert. Siehe: **[[symbolnames-de|Symbol-Namen]]**
 \\
-Das **''<path'' . . .**-Element muss diesen Definitionen entsprechen: \\
+=====Unterstützte SVG-Elemente=====
-** http://www.w3.org/TR/SVG11/paths.html#PathData **
+====Pfad (path)====
- \\
+  * https://developer.mozilla.org/en-US/docs/Web/SVG/Element/path
-|:!: Es werden aber __nur__ die Befehle **M**, **L** und **z** ausgewertet. __Andere__ Befehle können in Rocview die Anzeige der SVG-Datei verhindern. |
+Nur **M**, **L**, **C** und **z** werden ausgewertet. Alle Koordinaten werden zu Ganzzahlen gerundet.
- \\
-Die Koordinaten (x u. y) sind auf Ganzzahlen gerundet.
  \\
+===Attribute und Befehle im <path-Element===
 ^Befehl^Name^Beschreibung^
-|**M** x y|moveto|Bewegt den Zeichenstift auf die angegebene Koordinate.|
+|**M** x,y|moveto|Bewegt den Zeichenstift auf die angegebene Koordinate.|
-|**L** x y|line|Zeichnet eine Linie von der aktuellen zur angegebenen Koordinate.|
+|**L** x,y|line|Zeichnet eine Linie von der aktuellen zur angegebenen Koordinate.|
 |**z**|closepath|Schließt den Zeichenvorgang des aktuellen <path> ab.|
- \\
-Der **C**-Befehl ist im "w3"-Dokument definiert, wird aber in Rocview und Inkscape nicht unterstützt. Er wurde auch nie in den Themen verwendet.
-> **Hinweise:**
+Die Attribute **''stroke''** und **''stroke-width''** definieren die Farbe und Stärke der gezeichneten "Linien"; optional bestimmt **''fill''** die Füll-Farbe einer mit den Parametern des **d**-Attributs umschlossenen Fläche.\\
-> Enthält die SVG-Datei eines selbst erstellten bzw. geänderten Symbols **C**-Befehle müssen diese z.B. durch eine passende Abfolge \\ kurzer Linien-Vektoren oder ggf. teilüberdeckte **''<circle>''**-Elemente ersetzt werden.
+Farben können anstelle von z.B. **''stroke="blue"''** auch mit der RGB-Funktion **''stroke="rgb(0,0,255)"''** definiert werden.\\
+Damit sind beliebige Mischfarben aus dem 32bit-Farbraum möglich, soweit es die PC-Grafik-Hardware unterstützt.\\
-Die x/y-Koordinaten eines Symbols mit 32x32 Pixel:
+Die Befehle mit ihren Koordinaten werden im **d**-Attribut (**d**raw = zeichnen) definiert, dass __immner__ mit dem **M**-Befehl beginnt und mit dem **z**-Befehl endet.\\
-|< >|
+===Beispiel===
-|  ''0 0''  |  . .  |  ''31 0''  |
-|  . .  |  |  . .  |
-|  ''0 31''  |  . .  |  ''31 31''  |\\
-Die durch die Parameter definierten Koordinaten werden auf Ganzzahlen gerundet.\\
- \\
 Das folgende Beispiel (Gleis mit blauer Umrandung und gelber Füllung) zeigt, welche Informationen einer SVG-Datei durch Rocview ausgewertet werden:
 <code xml>
@@ Line 126: / Line 126: @@
 </svg>
 </code>
-===Attribute und Befehle im "<path . . ."-Element===
+ \\
-Die Attribute **''stroke''** und **''stroke-width''** definieren die Farbe und Stärke der gezeichneten "Linien"; optional bestimmt **''fill''** die Füll-Farbe einer mit den Parametern des **d**-Attributs umschlossenen Fläche.\\
+====Kreis (circle)====
-Farben können anstelle von z.B. **''stroke="blue"''** auch mit der RGB-Funktion **''stroke="rgb(0,0,255)"''** definiert werden.\\
+  * https://developer.mozilla.org/en-US/docs/Web/SVG/Element/circle
-Damit sind beliebige Mischfarben aus dem 32bit-Farbraum möglich, soweit es die PC-Grafik-Hardware unterstützt.\\
+<code xml>
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32">
+  <g>
+    <circle cx="16" cy="12" r="5" fill="red" stroke="blue"/>
+  </g>
+</svg>
+</code>
+ \\
+====Ellipse====
+  * https://developer.mozilla.org/en-US/docs/Web/SVG/Element/ellipse
+<code xml>
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32">
+  <g>
+    <ellipse cx="16" cy="12" rx="8" ry="4" fill="red" stroke="blue"/>
+  </g>
+</svg>
+</code>
+ \\
+====Vieleck (polygon)====
+  * https://developer.mozilla.org/en-US/docs/Web/SVG/Element/polygon
+<code xml>
+<svg width="100%" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+  <g>
+    <polygon points="0,0 31,0 31,31 0,31" fill="red" stroke="blue"/>
+  </g>
+</svg>
+</code>
+ \\
+====Rechteck (rect)====
+  * https://developer.mozilla.org/en-US/docs/Web/SVG/Element/rect
+<code xml>
+<svg width="100%" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+  <g>
+    <rect x="2" y="2" rx="5" width="20" height="20" stroke="blue" fill="red"/>
+  </g>
+</svg>
+</code>
+Einstellung **rx > 0** zeichnet ein abgerundetes Rechteck.\\
+ \\
+====Line (line)====
+  * https://developer.mozilla.org/en-US/docs/Web/SVG/Element/line
+<code xml>
+<svg width="100%" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+  <g>
+    <line x1="0" y1="0" x2="31" y2="31" stroke="black"/>
+  </g>
+</svg>
+</code>
+ \\
+====Mehrfachline (polyline)====
+  * https://developer.mozilla.org/en-US/docs/Web/SVG/Element/polyline
+<code xml>
+<svg width="100%" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+  <g>
+    <polyline points="0,31 15,8 15,24 31,0" stroke="blue"/>
+  </g>
+</svg>
+</code>
-Die Befehle mit ihren Koordinaten werden im **d**-Attribut (**d**raw = zeichnen) definiert, dass __immner__ mit dem **M**-Befehl beginnt und mit dem **z**-Befehl endet.\\
  \\
-===Kreise===
+=====Alternative SVG durch zweiten <g>-Container=====
-Mit dem **''<circle'' . . .**-Element können Kreise und Kreis-Flächen dargestellt werden. \\
+In der SVG-Definition kann ein zweiter Graphik-Container (''**<g>**''-Knoten) hinzugefügt werden.\\
-Die Attribute ''**cx**'', ''**cy**'' und ''**r**'' definieren das Zentrum und den Radius des Kreises.\\
+Die Elemente der beiden Container werden im Sekunden-Rhythmus abwechselnd angezeigt = "Blinken".
-Die Attribute **''stroke''** und **''fill''** definieren wie beim ""<path . . ."-Element" die Farbe der Außenlinie und ggf. der Innenfläche.
-Das Beispiel zeigt eine rote Kreisfläche mit blauem Rand und mit 10 Pixel Durchmesser in der Mitte der Symbol-Fläche.
+  * **Hinweis:** Im Gleisplan ist diese Funktion nur aktiv, wenn \\ 1. dem Objekt eine SVG-Datei mit zweitem <g>-Container zugeordnet ist. \\ 2. im Kontext-Menü des Objekts die Option "Alternative SVG aktivieren" gesetzt ist.
+  * **Achtung:** //Rocweb kann diese Mehrfach-Container nicht unterstützen und zeigt alle überlappt an.//\\
+====Beispiel====
 <code xml>
 <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32">
   <g>
-    <circle cx="15" cy="15" r="5" fill="red" stroke="blue"/>
+    <path stroke="blue" fill="yellow" d="M 0,16 L 2,13 L 29,13 L 31,15 L 31,16 L 29,18 L 2,18 L 0,16 z " />
+  </g>
+  <g>
+    <path stroke="blue" fill="grey" d="M 0,16 L 2,13 L 29,13 L 31,15 L 31,16 L 29,18 L 2,18 L 0,16 z " />
   </g>
 </svg>
 </code>
-In einer SVG-Datei können mehrere ''<path'' . . . - und ''<circle'' . . . -Elemente verwendet werden. Die Ausrichtung bzw. Rotation des gesamten Symbols wird in Rocview im Dialog des Objektes eingestellt.\\
  \\
-==== SVG-Anzeige und Editor ====
+=====Vorschau=====
+{{ :symbols:svg-preview-de.png?240}}
+====Windows====
+Diese Erweiterung kann zur Vorschau von SVG-Symbolen im Datei-Explorer verwendet werden:
+  * __[[https://github.com/tibold/svg-explorer-extension/releases|SVG Viewer Extension for Windows Explorer]]__
+====Ubuntu====
+Ubuntu zeigt SVG-Vorschau ohne weiteres Zutun.\\
+====macOS====
+{{ :symbols:macos-svg-preview.png?240}}
+Der Finder zeigt nur streng formatierte SVGs.\\
+Beginnend mit Revision 2.1.381, wird auch das folgende SVG-Header-Format durch Rocview unterstützt and aktiviert die Vorschau im macOS-Finder:
+<code xml>
+<svg width="100%" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+  ...
+</svg>
+</code>
+Für Information zum viewBox-Attribut siehe:
+  * https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/viewBox
+Die bisherige Breite / Höhe ist jetzt Teil der viewBox: "x y width height". (Rocview wertet nur die Werte für Breite und Höhe der viewBox aus.)\\
+Das width-Attribut ist auf 100% gesetzt, damit Vorschauen auf den verfügbaren Platz skaliert werden können.(Rocview wertet diesen Wert nicht aus.)\\
+Wenn die folgende Option in der rocview.ini manuell eingestellt ist, wird die Konvertierung automatisch durchgeführt:
+<code xml>
+<gui convertsvg="true" ... >
+  ...
+</gui>
+</code>
+ \\
+===== Externe Hilfsmittel für SVG-Dateien =====
+====Online-SVG-Viewer/Editor====
 Das Online-Tool **[[https://www.rapidtables.com/web/tools/svg-viewer-editor.html|SVG-Viewer/Editor]]** kann hilfreich sein, um SVG-Symbole anzuzeigen, zu erstellen und zu bearbeiten.\\
-Es ist nicht so mächtig wie Inkscape, aber es ist viel einfacher zu verwenden, als Inkscape oder andere.
+Es ist nicht so mächtig wie **[[#inkscape|Inkscape]]**, aber es ist viel einfacher zu verwenden, als Inkscape oder andere.
   * **Hinweis:** \\ Leider prüft das Tool nicht die XML-Konformität. Mit dem Tool bearbeitete SVG-Dateien sollten z.B. mit einem Browser darauf geprüft werden.
@@ Line 160: / Line 255: @@
 sollte zur Erstellung neuer Symbole zuerst folgender Rahmen in das Code-Fenster des Tools kopiert werden:
 <code xml>
-<svg width="32" height="32">
+<svg width="100%" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
   <g>
     <!-- Hier die SVG-Elemente einfügen -->
@@ Line 175: / Line 270: @@
  \\
 ====Inkscape====
-Man kann z.B. Inkscape (http://www.inkscape.org/) zur Erstellung der SVG-Dateien verwenden. Da Rocrail nur ganzzahlige Koordinaten verwendet, sollten diese Einstellungen in Inkscape erfolgen:
+Inkscape (http://www.inkscape.org/) ist ein sehr mächtiges Tool zur Erstellung und Bearbeitung von SVG-Dateien. Da Rocrail nur ganzzahlige Koordinaten verwendet, sollten folgende Einstellungen in Inkscape erfolgen:
 {{inkscape_config1-de.png}}{{inkscape_config2-de.png}}{{inkscape_config3-de.png}}
-Hierbei ist zu beachten, dass insbesondere die Option 'Immer einrasten' nur beim Zeichnen der Pfade (Shift+F6) wirkt. Sobald Knoten mit der Maus verschoben werden, generiert InkScape Koordinaten mit Nachkommastellen.
+Dabei ist zu beachten, dass insbesondere die Option 'Immer einrasten' nur beim Zeichnen der Pfade (Shift+F6) wirkt. Sobald Knoten mit der Maus verschoben werden, generiert InkScape Koordinaten mit Nachkommastellen.
 Eine weitere sinnvolle Einstellung ist das Anzeigen des Umrisses:
@@ Line 185: / Line 280: @@
 {{inkscape_config4-de.png}}\\
 \\
-Mit InkScape dürfen nur Linien erzeugt werden. :!: Keine Kurven.
 Nach Fertigstellung muss die Grafik als SVG-Datei gespeichert werden.
-:!: __Diese Datei kann Rocview nicht direkt verwenden.__ Sie muss erst noch bearbeitet werden:
+:!: __Diese in Inkscape gespeicherte Datei kann Rocview nicht direkt verwenden.__ Sie muss erst noch bearbeitet werden:
-Mit einem Texteditor (notepad++) werden __nur die mit **''<path ...''** beginnenden Zeilen__ herauskopiert und mit den ''<svg>''- u. ''<g>''-Zeilen ergänzt:
+Mit einem Texteditor (notepad++) werden nur die Zeilen herauskopiert, die mit den **[[#unterstuetzte_svg-elemente|unterstützten SVG-Elementen]]** beginnen:\\
+  * **''<path ...''**, **''<circle ...''**, **''<ellipse ...''**, **''<polygon ...''**, **''<line ...''** und **''<polyline ...''**
+Diese Zeilen müssen noch in die **''<svg>''**- u. **''<g>''**-Knoten eingefügt werden:
 <code xml>
-<svg width="32" height="32">
+<svg width="100%" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
   <g>
-    <path ....... />
-    <path ....... />
-    <path ....... />
-    <path ....... />
-    <path ....... />
-    <path ....... />
-  </g>
-</svg>
-</code>
-Diese Zeilen werden den **[[symbolnames-de|Konventionen für die Namensgebung]]** entsprechend als SVG-Datei gespeichert.\\
-Die Datei wird in ein Themen-Verzeichnis kopiert und kann jetzt von Rocview als Objekt-Symbol im Gleisplan verwendet werden.\\
-\\
-:!: Forums-Beitrag zu Erfahrungen mit InkScape: http://forum.rocrail.net/viewtopic.php?p=25518#25518
- \\
- \\
-===== Standard-SVG-Symbole =====
+    <!-- Hier nur die Zeilen mit den unterstützten SVG-Elementen einfügen -->
-Eine Sammlung der standardmässig verwendeten Symbole wird im **[[symbols-themes-spdr60-de|SpDrS60-Thema]]** mit jedem Release ausgeliefert.\\
-=====Blinkende Begriffe=====
-Beginnend mit Revision 5315 kann in der SVG-Definition ein zweiter Graphik-Container((zweiter ''**<g>...</g>**''-Abschnitt)) hinzugefügt werden.\\
-Die Elemente der beiden Container werden abwechselnd im Sekunden-Rhythmus angezeigt.\\
-Diese Funktion ist nur bei Signal-Objekten aktiviert.\\
-====Beispiel====
-<code xml>
-<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32">
-  <g>
-    <path stroke="blue" fill="yellow" d="M 0,16 L 2,13 L 29,13 L 31,15 L 31,16 L 29,18 L 2,18 L 0,16 z " />
-  </g>
-  <g>
-    <path stroke="blue" fill="grey" d="M 0,16 L 2,13 L 29,13 L 31,15 L 31,16 L 29,18 L 2,18 L 0,16 z " />
   </g>
 </svg>
 </code>
+Der gesamte **''<svg>''**-Abschnitt muss als SVG-Datei den **[[symbolnames-de|Konventionen für die Namensgebung]]** entsprechend gespeichert werden.\\
+Die Datei wird in ein Themen-Verzeichnis kopiert und ist in Rocview als Objekt-Symbol in Gleisplänen zu verwenden.\\
+\\
+:!: Ein Forums-Beitrag u.a. zu Erfahrungen mit Inkscape: https://forum.rocrail.net/viewtopic.php?p=25518#25518
  \\
 ===== Videos =====

Innovative Model Railroad Control System

User Tools

Site Tools

Differences

Page Tools