Table of Contents
Thèmes Dynamiques SVG
Sommaire → Rocview → Thèmes SVG
Cette documentation est basée sur Rocrail Version 2.1.4966 datée du 03.08.2024 .
Mise à jour: Rocrail Version 2.1.5225 M4 daté du 08.11.2024 .
Mise à jour: Rocrail Version 2.1.5254 M4 daté du 17.11.2024 .
Le développement est toujours en cours "Work In Progress" (WIP).
Introduction
Les symboles SVG (Scalable Vector Graphics) sont utilisés pour définir les symboles objet Rocrail pour afficher les contenus du fichier du plan de voie Rocrail.
Les symboles SVG peuvent être créés et/ou modifiés avec Rocview en interne éditeur SVG Rocview
Liste de clients Rocrail qui utilisent les thèmes et/ou les thèmes dynamiques:
| Client Rocrail | Plateforme | thèmes | thèmes dynamiques |
|---|---|---|---|
| Rocview | Ordinateur | oui | oui |
| RocWeb | Navigateur Web | oui | non |
| andRoc | Android | oui | non |
| RocControl | iOS/iPadOS/macOS | non | oui |
Chemin
Les chemins vers les symboles SVG sont:
| Chemin | Description |
|---|---|
svg/themes | Thèmes SVG Standard par défaut. |
svg/dynthemes | Thèmes SVG dynamiques optionnels. |
svg/userthemes | Thèmes SVG supplémentaires pour les symboles utilisateur. |
svg/… | Thèmes SVG supplémentaires. |
Configuration des Thèmes
Rocview
La configuration SVG pour Rocview est faite dans "Propriétés Rocview / SVG".
| Thème | Chemin | Option de chargement |
|---|---|---|
| Thème 1 | /fullpathto/svg/dynthemes/mysvg | oui / non |
| Thème 2 | /fullpathto/svg/dynthemes/SpDrS60 | oui / non |
| Thème 3 | /fullpathto/svg/dynthemes/Accessories | oui / non |
| Thème 4 | /fullpathto/svg/dynthemes/Roads | oui / non |
| Thème 5 | . | oui / non |
| Thème 6 | . | oui / non |
Les thèmes avec Chargement= oui sont seulement utilisés.
La séquence de chargement des symboles est de haut en bas (Thème 1 au Thème 6).
Les symboles qui sont déjà chargés ne sont pas écrasés.
Avec ces propres symboles répertoriés en premier, les symboles standards seront remplacés.
RocControl
La configuration SVG pour RocControl est faite dans "Propriétés Rocrail / SVG".
| Thème | Chemin |
|---|---|
| Thème 1 | /fullpathto/svg/dynthemes/mysvg |
| Thème 2 | /fullpathto/svg/dynthemes/SpDrS60 |
| Thème 3 | /fullpathto/svg/dynthemes/Accessories |
| Thème 4 | /fullpathto/svg/dynthemes/Roads |
| Thème 5 | . |
| Thème 6 | . |
La séquence de chargement des symboles est de haut en bas (Thème 1 à Thème 6).
Les symboles qui ont déjà été chargés ne sont pas écrasés.
Avec ces propres symboles répertoriés en premier, les symboles standard seront remplacés.
- voir RocControl
En plus:
- Le chemin doit être accessible par le serveur Rocrail.
- RocControl identifie les symboles en fonction de l’attribut "name" du symbole SVG (et non du nom du fichier).
- Rocrail fournit un thème intégré par défaut pour RocControl si aucun n'est défini dans la liste SVG.
- Les SVG définis par l'utilisateur doivent être de type dynamique et le chemin doit contenir "dynthemes".
Détails de Construction
Éléments supportés
Un "Tutoriel SVG" peut être trouvé à https://www.w3schools.com/graphics/svg_intro.asp
Un code symbole SVG peut utiliser n'importe quel élément SVG mais … .
- Les mesures d'un symbole SVG standard est de 32 x 32 pixels;
- donc un cercle avec la valeur de son rayon ne peut pas être centré à l'intérieur de ce symbole, parce qu'il faut utiliser des valeurs entières pour n'importe quelle coordonnée;
- …
| Élément | Signification |
|---|---|
| svg | entête |
| g | groupe; au moins un g doit être présent |
| path | pour créer des formes simples ou complexes |
| rect | pour créer un rectangle |
| circle | pour créer un cercle |
| ellipse | pour créer une ellipse |
| line | pour créer une ligne |
| polygon | pour créer un graphique qui contient au moins trois cotés |
| polyline | pour créer toute forme constituée uniquement de lignes droites |
L'élément préféré pour le dessin est le <chemin>.
Attributs d'entête
Exemples:
- entête de symbole SVG de thème:
<svg width="100%" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"> ... </svg>
- entête de symbole SVG de thème dynamique:
<svg name="hl_signalaspect" ledsupport="true" width="100%" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"> ... </svg>
L'entête du code symbole SVG doit avoir les attributs suivants réglés:
| Élément | Attribut | Requis | Exemple | Signification |
|---|---|---|---|---|
| svg | - | oui | - | aucun attribut LED et aucun G-STATE ne seront utilisés pour ce symbole |
| name | dynthemes | name="hl_signalaspect" | le nom du signal pour être identifié par les clients | |
| ledsupport | dynthemes | ledsupport="true" | spécificité Rocrail; l'attribut LED sera utilisé pour ce symbole; en cas d'aiguillages G-STATE pourra également être utilisé pour ce symbole |
|
| width | oui | width="100%" | la taille du symbole; une valeur fixe de 100% | |
| viewBox | oui | viewBox="0 0 32 32" | la fenêtre de vue du symbole; démarrant à 0 0; la largueur et la hauteur doivent être un multiple de 32; max= 128; |
|
| xmlns | oui | xmlns="http://www.w3.org/2000/svg" | un lien vers l'espace de noms; une valeur fixe de "http://www.w3.org/2000/svg" |
Attributs de l'élément SVG
G Élément SVG
Exemples:
<g state="straight"> ... </g> <g state="turnout"> ... </g> <g state="left"> ... </g> <g state="right"> ... </g>
| Élément | Attribut | Exemple | Signification |
|---|---|---|---|
| g | - | <g> | normal, pas d'attributs |
| state | state="all" | Groupe basique qui sera rendu en combinaison avec d’autres valeurs d’état. | |
| state | state="straight" | Contrôle spécifique Rocrail pour exécuter ce groupe dans l'état donné | |
| state | state="green,yellow,1,2" | La valeur de l'état peut être une liste séparée par des virgules (csv); Cet état gère l'état vert et jaune ainsi que les aspects 1 et 2 d'un signal, en fonction du schéma d'adressage utilisé. |
CHEMIN Élément SVG
Exemples:
<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 " />
| Élément | Attribut | Exemple | Signification |
|---|---|---|---|
| path | led | led="1" | Contrôle spécifique Rocrail pour coloriser STROKE et FILL |
| alt | alt="true" | cet élément devrait utiliser le clignotement; voir l'astuce ci-dessous | |
| stroke | stroke="black" | définit la couleur de la ligne autour d'un élément; utiliser l'implicite STROKE-WIDTH de 1 |
|
| fill | fill="rgb(192,192,192)" | définit la couleur de l'intérieur d'un élément | |
| d | d="M 8,14 L 23,14 L 23,17 L 8,17 z " | un ensemble de commandes qui définissent le chemin; M = déplacer vers; L = ligne vers; Z = fermer le chemin; … avec des points x, y séparés par des virgules; x et y doivent être des valeurs entières |
RECT Élément SVG
Exemples:
<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)"/>
| Élément | Attribut | Exemple | Signification |
|---|---|---|---|
| rect | led | led="1" | Contrôle spécifique Rocrail pour coloriser STROKE et FILL |
| txt | txt="1" | spécification Rocrail; pour spécifier l'emplacement de la chaîne d'identification des symboles; ne fonctionnera qu'avec RECT; |
|
| x | x="0" | the x-position of the top-left corner of the rectangle | |
| y | y="0" | the y-position of the top-left corner of the rectangle | |
| rx | rx="0" | the rx attribute defines the radius of the corners of the rectangle | |
| ry | ry="0" | the ry attribute defines the radius of the corners of the rectangle | |
| stroke | stroke="black" | sets the color of the line around an element; use the implicit STROKE-WIDTH of 1 |
|
| fill | fill="rgb(192,192,192)" | sets the color of the inside of an element |
Les valeurs des attributs LED
Les valeurs normales des attributs LED sont dans une plage de 1 à 99.
Avec des décalages par rapport à la valeur normale, la signification peut être étendue:
| LED | Décalage | Signification | Remarque |
|---|---|---|---|
| - | - | les couleurs à l'intérieur du symbole SVG sont affichées | |
| led="x" | +0 | La couleur FILL sera configurée à la couleur de l'état actuel | |
| led="x" | +100 | La couleur STROKE sera également configurée à la couleur de l'état actuel | |
| led="x" | +200 | La couleur STROKE sera configurée à la couleur noire | |
| led="x" | +300 | Le STROKE devient l'état de la couleur et FILL sera configuré à aucun (transparent) | Peut être utilisé pour tester les cadres de texte. |
| led="x" | +400 | La couleur FILL sera utilisé à partir des attributs fillon et filloff. (Couleur propre indépendante des propriétés du thème.) | Pour le type sortie. |
Les valeurs d'attribut LED suivantes sont définies:
| Nom | Valeur | Couleurs d'Illumination |
|---|---|---|
| voie (également voie à l'intérieur du détecteur ou du signal) | ||
| occ | 1 | Libre, Occupé, Réservé, Manœuvre |
| bloc | ||
| occ | 1 FILL | Libre, Occupé, Réservé, Entrer, Fermé, Fantôme, Court-circuit, Accepter l'identifiant voir également État du Bloc |
| occ | 1 STROKE | Manœuvre (colorise le cadre du symbole du bloc) |
| blockstate | 2 | Couleurs voir État du Signal |
| sensplus | 3 | Entrée off, Entrée on |
| sensmin | 4 | Entrée off, Entrée on |
| arrowplus | 5 | STROKE / FILL définit la couleur |
| arrowmin | 6 | STROKE / FILL définit la couleur |
| bouton, sortie | ||
| stateoff | 2 | Sortie off |
| stateon | 3 | Sortie on |
| sensor | ||
| stateoff | 2 | |
| stateon | 3 | |
| signal | ||
| red | 2 | Rouge |
| green | 3 | Vert |
| yellow | 4 | Jaune |
| white | 5 | Blanc |
| blank | 6 | Vide |
| signal à plusieurs aspects | ||
| aspect no. 00…31 | STROKE / FILL définit la couleur de cet aspect | |
| registre du détecteur | ||
| stateoff, stateon | 2..9 pour détecteurs 1..8 | Entrée off, Entrée on |
| aiguillage croisement double | ||
| markers above | 6 | STROKE / FILL définie la couleur |
| markers below | 7 | STROKE / FILL définie la couleur |
Si une certaine lumière doit être éteinte, la couleur "vide" est affichée.
Propriétés d'illumination SVG
Chaque répertoire de thème SVG contiendra le fichier "properties.xml" qui contient les propriétés d'illumination pour ce thème SVG. Les contenus peuvent être édités dans les Propriétés Rocview / SVG / Thème X / Propriétés
Un exemple est montré ci-dessous:
L'usage principal est:
| Couleur | Usage Principal |
|---|---|
| Libre, Occupé, Réservé, Manœuvre | voie, bloc |
| Entrer, Fermé, Fantôme, Court-circuit, Accepter l'identité | bloc |
| Automatique, Semi-automatique, Pas de destination | état |
| Sortie on, Sortie off | bouton, sortie |
| Entrée on, Entrée off | capteur |
| Rouge, Vert, Jaune, Blanc, Vide | signaux |
| Glissement | aiguillage |
Calcul d'exécution SVG
Calcul de la couleur:
 | Une locomotive démarre en utilisant un itinéraire auquel cette voie appartient. Donc la couleur de la voie devrait changer de blanc („Libre”) à jaune („Réservé”). Le code du symbole SVG avec l'attribut led=„101” définie la partie géométrique du symbole qui doit changer la couleur. Les valeurs RGB des couleurs de l'état sont définies dans les „propriétés de l'illumination” du thème principal. |
Calcul de l'apparence visuelle:
 | Ici chaque état nécessite une apparence visuelle propre. state="straight" ainsi que state="turnout" décrient le symbole complètement. L'espace réservé commun pour l'identifiant de l'objet est la seule partie commune et est donc placé dans state="all". |
Liste de symboles
Pour certains symboles de thème dynamique SVG, des exemples détaillés sont répertoriés ci-dessous:
| Symbole | Fichier | Objet |
|---|---|---|
 | straight.svg | voie |
 | sensor-off.svg | détecteur |
 | accessory-6-off.svg | regsitres de détecteurs |
 | button-0-off.svg | bouton |
 | turnoutleft.svg | aiguillage |
 | signalmain-r.svg | signal |
 | hl_signalaspect-0.svg | signaux à plusieurs aspects |
 | block.svg | bloc |
 | block-state-min.svg | bloc avec état de signal |
 | blockstate.svg | signal d'état |
Environnement de travail de test
Un environnement de travail de test détaillé peut être trouvé à Test de thèmes dynamiques SVG