Un TCO interactif sur votre navigateur WEB et relié au bus CAN du réseau

[bobyAndCo]

Bon, je vais pouvoir revenir au sujet central de ce post qui est la réalisation d'un TCO interactif avec les outils web. J'ai pu réaliser le tracé du Locoduinodrome en SVG (graphisme vectoriel).

Résultat, un code ultra léger de moins de 10 Ko et un rendu parfait avec qui plus est des courbes de Bezier. Pour illustration, voici ci-dessous la totalité du code qui sert au tracé (dont les commentaires qui prennent presque autant de lignes !) :

Code: [Sélectionner]

                <!--Z0-->
<line id="Z0" class="free" x1="550" y1="600" x2="850" y2="600" />
<!--Z1-->
<line id="Z1" class="busy" x1="550" y1="550" x2="850" y2="550" />
<!--Z2-->
<path id="Z2" class="free dasharray" d="M 400,600 c 75,0 75,-50 150,-50" />
<line id="Z22" class="free" x1="400" y1="600" x2="550" y2="600" />
<!--Z3-->
<path id="Z3" class="free" d ="M 400,100 A 250 250 0 0 0 400,600" />
<!--Z4-->
<path id="Z4" class="free" d ="M 1000,100 A 250 250 0 0 1 1000,600" />
<!--Z5-->
<path id="Z5" class="busy dasharray" d="M 850,550 c 75,0 75,50 150,50" />
<line id="Z52" class="busy" x1="850" y1="600" x2="1000" y2="600" />
<!--Z6-->
<line id="Z6" class="busy" x1="400" y1="100" x2="1000" y2="100"/>

Chaque ligne de code correspond à un élément graphique, droite ou courbe.

Voici ce que ça donne en vrai ici : http://alkans.fr/locoduino/tco/tco_v01.html

Vous pourrez même actionner les aiguillages si vous cliquez dessus. La représentation actuelle simule qu'un convoi est détecté (en rouge) sur la voie du haut et un autre sur la voie déportée et l'aiguille de droite.

Aujourd'hui je vais réaliser l'implantation de feux.

Bonne journée à tous.

[Thierry]

Magnifique ! Mais la création d'un dessin vectoriel n'est pas forcément à la portée du premier béotien venu... Il faudra prévoir un frontal de création de réseau.

[Dominique]

Et puis j’imagine que les styles et la bibliothèque sont bien plus gros que le petit code que tu montres 

Personnellement, je tracerais les voies avec des traits plus épais si c’est possible.

Mais c’est superbe.

[bobyAndCo]

Pas OK avec toi, j'ai fait le code du tracé sans aucun outil. Il faut juste comprendre la logique qui est très simple.

Une ligne s'appelle "line", jusqu'ici facile, x1 et y1 coordonnées du début de la droite, x2 et y2 coordonnées de la fin !!! Peut difficilement faire plus simple.
<line id="Z0" class="free" x1="550" y1="600" x2="850" y2="600" />

Pour une courbe, il y a un peu plus d'informations :
<path id="Z4" class="free" d ="M 1000,100 A 250 250 0 0 1 1000,600" />

mais toujours les coordonnées de départ, coordonnées d'arrivé, rayon et si l'on veut un demi cercle ou un cercle entier (0 ou 1). id="Z4" class="free" id et class ne sont pas des informations de tracé mais d'identification et de rendu. id identifie les zones telles que nous les avons définies, z0, z1... et class, le rendu : free, pas de détection, rendu gris, busy, détection, rendu rouge. Bien sûr cela est mis automatiquement à jour en fonction des informations reçu sur le bus CAN... et donc ce pourquoi il fallait que je commence par ma passerelle CAN/WiFi,=>  CQFD

Pour les courbes de Bezier, j'expliquerai plus tard, mais vous verrez que c'est également déconcertant de simplicité. Par ailleurs, on peut se faire une bibliothèque des differentes formes, les dupliquer et changer simplement leur position sur l TCO.

[bobyAndCo]

Dominique, pour le style, voici le code :

Code: [Sélectionner]

<style type="text/css">
/* <![CDATA[ */
line, path {
  stroke-width: 10px;
  fill:none;
}
.free {
stroke: grey;
}
.busy {
stroke: red;
}
.dasharray {
stroke-dasharray: 1, 2;
}
.aiguille {
    fill:transparent;
    cursor: pointer;
}
/* ]]> */
</style>
Pas franchement consequent. Et il n'y a pas de bibliothèque, les navigateurs savent en natif afficher des informations vectorielles.

Pour l'épaisseur du tracé tu changes la valeur de stroke-width: 10px; qui est ici à 10 pixels.

[Dominique]

Je m’incline, c’est très simple 

[bobyAndCo]

Bon, je ne suis pas encore un spécialiste de la signalisation ferroviaire mais c'est le principe qui compte. Si vous cliquez sur l'aiguillage de gauche, la signalisation change.

De même pour le feu jaune clignotant, je profite des animations existante en natif avec le SVG ! Cool non ?

http://alkans.fr/locoduino/tco/tco_v02.html

[bobyAndCo]

Ca y est la passerelle entre le bus CAN et le WiFi fonctionne parfaitement. Le TCO est bien avancé et l'on peut voir sur cette vidéo les zones occupées s'afficher en rouge et celles libérées reprendre leur couleur grise.

Je vais maintenant m'occuper des capteurs ponctuels, ce qui va être assez simple, le gros du travail ayant été fait avec les détecteurs d'occupation. Puis enfin la signalisation en cohérence avec la position de la loco. Mais c'est le travail du gestionnaire, le TCO se contentant de reproduire la signalisation du plateau.

[bobyAndCo]

Bon maintenant, tous les capteurs ponctuels fonctionnent et le TCO se met bien à jour en fonction des événements détectés sur le réseau. Il ne me reste plus maintenant que le gestionnaire qui va gérer les trains et la signalisation.

[Pierre59]

Bonjour

Qui a dit que Processing c'était "lourd". Voici le dessin du Locoduinodrome en Processing, le programme est complet, rien à rajouter. Bien évidemment il utilise des courbes de Bezier. Il ne fait que le dessin, mais il serait facile de rajouter des signaux et les manoeuvres des aiguilles.

Code: [Sélectionner]

void setup() {
  size(1500,750); // taille de la fenetre
}

void draw() {
  stroke(127); strokeWeight(10); strokeCap(SQUARE); noFill(); // styles (couleur (gris), largeur (10), raccords (carres), ...)
 
  line(550,600,850,600); // Z0
 
  line(550,550,850,550); // Z1
 
  stroke(0); bezier(400,600,  400+75,600, 550-75,550, 550,550); // Z2 noir
  stroke(127); line(400,600,550,600); //                              gris
 
  bezier(400,100, 75,100, 75,600, 400,600); // Z3
 
  bezier(1000,100, 1325,100, 1325,600, 1000,600); //Z4

  stroke(0); line(850,600,1000,600); // Z5                            noir
  stroke(127); bezier(850,550, 850+75,550, 1000-75,600, 1000,600); // gris
     
  stroke(#FF0000); line(400,100,1000,100); // Z6 rouge
}

Voir ci dessous ce qu'affiche le programme .

Pierre

[bobyAndCo]

C'est vrai, qui a dit ça

[bobyAndCo]

L'avant dernière étape sur le TCO est terminée.

La signalisation, sémaphores avec œilleton ou non, réagit conformément aux informations transmises par les capteurs. Les feux ne repassent au vert qu’après s’être assuré que la zone n'est pas occupée par un train qui se serait avancé au feu jaune.

Sur le TCO, il ne reste donc plus à programmer que les carrés et les avertissements en fonction de la position des aiguilles.

Ensuite, ce sera le tour du gestionnaire pour que locos et événements sur le plateau soit synchronisés. Un peu de boulot encore donc !

[Dominique]

Bravo, ça avance bien 

[bobyAndCo]

Eh, c'est qu'il ne reste plus que 3 semaines 

[bobyAndCo]

Voilà, j’ai créé un premier scénario pour la 241 P qui quitte la gare fait trois tours de circuit, puis s’arrête à nouveau à la gare.

Ce scénario est complétement interactif. Cela veut dire que si un convoi est par exemple arrêté sur la voie, la 241 P s’arrêtera elle aussi au canton précèdent et attendra que la voie soit libre pour repartir.

De la même façon, un autre convoi pourra chercher à la contourner quand elle est arrêtée en gare en demandant le changement des aiguilles. Si rien ne s’y oppose, (train déjà stationné sur la seconde voie de la gare par exemple) le second train va donc doubler le premier.

Le tout obéissant aux ordres et aux messages véhiculés sur le bus du réseau (capteurs, détecteurs…).

Plus que dix jours mais on devrait être prêt.

A suivre !