Table of Contents
SVG-Dynamische-Themen
Inhalt → Rocview → SVG-Themen
Diese Dokumentation basiert auf der Rocrail-Version 2.1.4966 vom 03.08.2024.
Update: Rocrail Version 2.1.5225 M4 vom 08.11.2024
Update: Rocrail Version 2.1.5254 M4 vom 17.11.2024 .
Die Entwiklung ist noch "In Arbeit" (WIP).
Einführung
SVG-Symbole (Scalable Vector Graphics) werden verwendet, um Rocrail-Objektsymbole zu definieren und den Inhalt einer Rocrail-Plandatei anzuzeigen.
SVG-Symbole können mit dem internen Rocview-SVG-Editor von Rocview erzeugt und/oder geändert werden.
Liste der Rocrail-Clients, die themes und/oder dynthemes nutzen:
Rocrail Client | Plattform | themes | dynthemes |
---|---|---|---|
Rocview | Computer | ja | ja |
RocWeb | Web-Browser | ja | nein |
andRoc | Android | ja | nein |
RocControl | iOS/iPadOS/macOS | nein | ja |
Pfad
Die Pfade zu den SVG-Symbolen sind:
Path | Description |
---|---|
svg/themes | Standard default SVG themes. |
svg/dynthemes | Dynamic optional SVG themes. |
svg/userthemes | optional SVG themes für Benutzer-Symbole. |
svg/… | optional SVG themes. |
Themen Konfiguration
Rocview
Die SVG-Konfiguration für Rocview erfolgt unter „Rocview-Eigenschaften / SVG“.
Thema | Pfad | Lade-Option aktiv |
---|---|---|
Thema 1 | /vollständigerpfad/svg/dynthemes/mysvg | ja / nein |
Thema 2 | /vollständigerpfad/svg/dynthemes/SpDrS60 | ja / nein |
Thema 3 | /vollständigerpfad/svg/dynthemes/Accessories | ja / nein |
Thema 4 | /vollständigerpfad/svg/dynthemes/Roads | ja / nein |
Thema 5 | . | ja / nein |
Thema 6 | . | ja / nein |
Es werden nur Themen mit aktiver Lade-Option=ja verwendet.
Die Reihenfolge beim Laden der Symbole erfolgt von oben nach unten (Thema 1 bis Thema 6).
Bereits geladene Symbole werden nicht überschrieben.
Dabei ersetzen die zuerst aufgeführten eigenen Symbole die Standardsymbole.
RocControl
Die SVG-Konfiguration für RocControl erfolgt in „Rocrail-Eigenschaften / SVG“.
Theme | Path |
---|---|
Thema 1 | /vollständigerpfad/svg/dynthemes/mysvg |
Thema 2 | /vollständigerpfad/svg/dynthemes/SpDrS60 |
Thema 3 | /vollständigerpfad/svg/dynthemes/Accessories |
Thema 4 | /vollständigerpfad/svg/dynthemes/Roads |
Thema 5 | . |
Thema 6 | . |
Die Reihenfolge beim Laden der Symbole erfolgt von oben nach unten (Thema 1 bis Thema 6).
Bereits geladene Symbole werden nicht überschrieben.
Dabei ersetzen die zuerst aufgeführten eigenen Symbole die Standardsymbole.
- siehe https://wiki.rocrail.net/doku.php?id=rocctrl:rocctrl-de
Zusätzlich:
- Der Pfad muss für den Rocrail-Server zugänglich sein.
- RocControl identifiziert die Symbole anhand des „name“-Attributs des SVG-Symbols (nicht anhand des Dateinamens).
- Rocrail bietet ein standardmäßiges integriertes SVG Thema für RocControl, wenn in der SVG-Liste keines festgelegt ist.
- Benutzerdefinierte SVGs müssen vom Typ Dynamic sein und der Pfad muss „dynthemes“ enthalten.
Konstruktionsdetails
Unterstützte Elemente
Ein „SVG-Tutorial“ findet sich unter https://www.w3schools.com/graphics/svg_intro.asp
Ein SVG-Symbolcode kann jedes beliebige SVG-Element verwenden, aber … .
- das Standard-SVG-Symbol misst 32 x 32 Pixel;
- daher kann ein Kreis mit seinem Radiuswert nicht innerhalb dieses Symbols zentriert werden, da für alle Koordinaten ganzzahlige Werte verwendet werden müssen;
- …
Element | Bedeutung |
---|---|
svg | Kopf |
g | Gruppe; mindestens ein g muss enthalten sein |
path | einfache oder komplexe Formen erstellen |
rect | ein Rechteck erstellen |
circle | einen Kreis erstellen |
ellipse | eine Ellipse erstellen |
line | eine Linie erstellen |
polygon | eine Grafik mit mindestens drei Seiten erstellen |
polyline | ein Form nur aus geraden Linien erstellen |
Das bevorzugte Element fürs Zeichnen ist <path>.
Kopfzeilen-Attribute
Beispiele:
- theme SVG Symbol Kopf:
<svg width="100%" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"> ... </svg>
- dyntheme SVG Symbol Kopf:
<svg name="hl_signalaspect" ledsupport="true" width="100%" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"> ... </svg>
Der Kopf eines SVG-Symbols kann die folgenden Attribute enthalten:
Element | Attribut | benötigt | Beispiel | Bedeutung |
---|---|---|---|---|
svg | - | ja | - | kein LED-Attribute und kein G-STATE wid für dieses Symbol verwendet |
name | dynthemes | name="hl_signalaspect" | der Name des Symbols, das auf Clients identifiziert werden soll | |
ledsupport | dynthemes | ledsupport="true" | Rocrail-spezifisch; Für dieses Symbol werden LED-Attribute verwendet; bei Weichen wird auch G-STATE für dieses Symbol verwendet |
|
width | ja | width="100%" | die Größe des Symbols; ein fester Wert von 100 % | |
viewBox | ja | viewBox="0 0 32 32" | ie ViewBox des Symbols; beginnend bei 0 0; Breite und Höhe müssen ein Vielfaches von 32 sein; max= 128; |
|
xmlns | ja | xmlns="http://www.w3.org/2000/svg" | in Link zum Namespace; ein fester Wert von "http://www.w3.org/2000/svg" |
SVG Element Attribute
SVG Element G
Beispiele:
<g state="straight"> ... </g> <g state="turnout"> ... </g> <g state="left"> ... </g> <g state="right"> ... </g>
Element | Attribut | Beispiel | Bedeutung |
---|---|---|---|
g | - | <g> | normal, keine Attribute |
state | state="straight" | Rocrail-spezifische-Steuerung, um diese Gruppe bei dem gegebenen Status auszuführen | |
state | state="green,yellow,1,2" | Der Statuswert kann eine durch Kommas getrennte Liste (CSV) sein; Dieser Zustand verwaltet den grünen und gelben Zustand sowie die Aspekte 1 und 2 eines Signals, abhängig vom verwendeten Adressierungsschema. |
SVG Element PATH
Beispiele:
<path led="1" stroke="rgb(192,192,192)" fill="rgb(192,192,192)" d="M 8,14 L 23,14 L 23,17 L 8,17 z "/> <path led="2" stroke="black" fill="rgb(255,0,0)" d="M 2,6 L 6,2 L 27,2 L 23,6 L 27,10 L 6,10 z "/> <path led="3" alt="true" stroke="none" fill="rgb(000,255,000)" d="M 04,02 L 07,02 L 07,05 L 04,05 z " />
Element | Attribut | Beispiel | Bedeutung |
---|---|---|---|
path | led | led="1" | Rocrail-spezifische-Steuerung, um STROKE und FILL einzufärben |
alt | alt="true" | this element should use blinking; see hint below | |
stroke | stroke="black" | legt die Farbe der Linie um ein Element fest; verwendet die implizite STROKE-WIDTH von 1 |
|
fill | fill="rgb(192,192,192)" | legt die Farbe des Inneren eines Elements fest | |
d | d="M 8,14 L 23,14 L 23,17 L 8,17 z " | eine Reihe von Befehlen, die den Pfad definieren; M = moveto; L = lineto; Z = close path; … mit komma-separierten x,y-Punkten; x und y müssen Integer-Werte sein |
Hinweis: Zum Blinken verwenden Sie das Kontextmenü des Objekts im Rocrail-Plan und aktivieren „Alternative SVG aktivieren“.
SVG Element RECT
Beispiele:
<rect txt="1" x="0" y="0" rx="0" width="31" height="10" stroke="none" fill="none"/> <rect x="0" y="0" rx="0" width="1" height="1" stroke="rgb(0,0,255)" fill="rgb(0,0,255)"/>
Element | Attribute | Beispiele | Bedeutung |
---|---|---|---|
rect | led | led="1" | Rocrail-spezifische-Steuerung, um STROKE und FILL einzufärben |
txt | txt="1" | Rocrail-spezifisch; um die Positionierung der Symbol-Kennungs-Zeichenkette zu bestimmen; funktioniert nur mit RECT; |
|
x | x="0" | die x-Position der oberen linken Ecke des Rechtecks | |
y | y="0" | die y-Position der oberen linken Ecke des Rechtecks | |
rx | rx="0" | das rx-Attribut definiert den Radius der Ecken des Rechtecks | |
ry | ry="0" | das ry-Attribut definiert den Radius der Ecken des Rechtecks | |
stroke | stroke="black" | bestimmt die Farbe der Linie um das Element; verwendet die implizite STROKE-WIDTH von 1 |
|
fill | fill="rgb(192,192,192)" | bestimmt die Farbe innerhalb des Elements |
LED-Attribut-Werte
Die normalen LED-Attributwerte liegen im Bereich von 1 bis 99.
Durch Offsets zum Normalwert lässt sich die Bedeutung erweitern:
LED | Offset | Bedeutung | Bemerkung |
---|---|---|---|
- | - | die Farben innerhalb des SVG-Symbols werden angezeigt | |
led="x" | +0 | die Füll-Farbe wird auf die aktuwelle Status-Farbe gesetzt | |
led="x" | +100 | die STROKE-Farbe wird auf die aktuwelle Status-Farbe gesetzt | |
led="x" | +200 | die STROKE-Farbe wird auf die Schwarz-Farbe gesetzt | |
led="x" | +300 | der STROKE erhält die Status-Farbe und FILL wird auf "nonbe" gesetzt (transparent) | Kann für Test des Text-Rahmens verwendet werden. |
led="x" | +400 | die FILL-Farbe wird vom Attribut fillon und filloff verwendet. (Eigene Farbe unabhängig von den Themen-Eigenschaften.) | Für Typ Ausgang. |
Die folgenden LED-Attributwerte sind definiert:
Name | Wert | SVG-Ausleuchtungs-Eigenschaften |
---|---|---|
Gleis (auch das Gleis von einem Rückmelder oder einem Signal) | ||
occ | 1 | Free, Occupied, Reserved, Shunt |
Block | ||
occ | 1 FILL | Free, Occupied, Reserved, Enter, Closed, Ghost, Short circuit, Accept ident siehe auch Wie der Block-Status dargestellt wird https://wiki.rocrail.net/doku.php?id=block-de#wie_der_block-status_dargestellt_wird |
occ | 1 STROKE | Shunt (färbt den Rahmen des Blocksymbols ein) |
blockstate | 2 | Blockstatus-Farben siehe Status-Signal https://wiki.rocrail.net/doku.php?id=block-signals-de#status-signal |
sensplus | 3 | Input off, Input on |
sensmin | 4 | Input off, Input on |
arrowplus | 5 | STROKE / FILL bestimmen die Farbe |
arrowmin | 6 | STROKE / FILL bestimmen die Farbe |
Taster, Ausgang | ||
stateoff | 2 | Output off |
stateon | 3 | Output on |
Rückmelder | ||
stateoff | 2 | Input off |
stateon | 3 | Input on |
Signal | ||
red | 2 | Rot |
green | 3 | Grün |
yellow | 4 | Gelb |
white | 5 | Weiss |
blank | 6 | Blank |
Multi-Aspect-Signal | ||
Aspekt Nr. 00…31 | STROKE / FILL bestimmen die Farbe des Aspekts | |
Rückmelder-Register | ||
stateoff, stateon | 2..9 für Rückmelder 1..8 | Input off, Input on |
Doppelte-Kreuzzungs-Weiche | ||
markers above | 6 | STROKE / FILL bestimmen die Farbe |
markers below | 7 | STROKE / FILL bestimmen die Farbe |
Sollte ein bestimmtes Licht aus sein, wird die Farbe für „blank“ angezeigt.
SVG-Ausleuchtungs-Eigenschaften
Jeder SVG-Themenordner enthält die Datei „properties.xml“, die die Beleuchtungseigenschaften für dieses SVG-Thema enthält. Der Inhalt kann unter Rocview Properties / SVG / Theme X / Properties
bearbeitet werden.
Ein Beispiel ist unten dargestellt:
Die Hauptverwendung ist:
Farbe | Hauptverwendung |
---|---|
Free, Occupied, Reserved, Shunt | Gleis, Block |
Enter, Closed, Ghost, Short circuit, Accept ident | Block |
Automatic, Half automatic, No destination | Status |
Output on, Output off | Taster, Ausgang |
Input on, Input off | Rückmelder |
Red, Green, Yellow, White, Blank | Signale |
Slip | Weichen |
SVG Berechnung zur Laufzeit
Berechnen der Farbe:
Berechnung des visuellen Erscheinungsbildes:
Symbol Liste
Für einige dynamische SVG-Themen-Symbole sind unten detaillierte Beispiele aufgeführt:
Symbol | Datei | Objekt |
---|---|---|
![]() | straight.svg | Gleis |
![]() | sensor-off.svg | Rückmelder |
![]() | accessory-6-off.svg | Rückmelder Register |
![]() | button-0-off.svg | Taster |
![]() | turnoutleft.svg | Weiche |
![]() | signalmain-r.svg | Signal |
![]() | hl_signalaspect-0.svg | Multi-Aspekt-Signal |
![]() | block.svg | Block |
![]() | block-state-min.svg | Block mit Status-Signal |
![]() | blockstate.svg | Status-Signal |
Test Arbeitsbereich
Hier geht es zum SVG Dynamic Themes Test