show how to do hover with dynamic infos

Train/Track.json

@@ -8,6 +8,18 @@
       "value":"svg_train(train_rear_end, train_length ,100.0/real(TrackElementNumber+1),1.0,3.0)",
       "comment":"show train position using a slanted polygon"
     },
+    {
+      "id":"train_info_text",
+      "attr":"x",
+      "value":"real(train_rear_end)*100.0/real(TrackElementNumber+1)",
+      "comment":"move info field above train"
+    },
+    {
+      "id":"train_info_text",
+      "attr":"text",
+      "value":"\"Train1: \" ^ TO_STRING(train_rear_end) ^ \"..\" ^ TO_STRING(train_rear_end+train_length)",
+      "comment":"move info field above train"
+    },
     
     {
       "id":"track_polyline",
@@ -53,8 +65,8 @@
       "id":"train_polygon",
       "event":"TrainMoveForward",
       "optional" : true,
-      "hovers": [{ "attr":"fill", "enter":"red", "leave":"lightgray"},
-                 { "attr":"stroke-width", "enter":"0.5", "leave":"0.3"}]
+      "hovers": [{ "attr":"class", "enter":"train-hover", "leave":"train-normal"},
+                 { "id":"train_info_text", "attr":"visibility", "enter":"visible", "leave":"hidden"}]
     }
     ]
 }
\ No newline at end of file

Train/Track.svg

@@ -19,13 +19,28 @@
         .blue-cleared-ttd {
             fill : blue
         }
+        .train-normal {
+            stroke-width: 0.25;
+            stroke : black;
+            fill : lightgray
+        }
+        .train-hover {
+            fill : red;
+            stroke-width: 0.5;
+            stroke : black;
+        }
    </style>
    
     <polygon id = "train_polygon"
        points="0,0 100,0"
-       style="stroke-width: 0.3"
-       stroke="black" fill="lightgray"
+       class="train-normal"
        transform="translate(10,16.8)" />
+   <g transform="translate(10,16.8)">
+    <text  text-align="left"  x="0"  y="-2"
+       font-size ="2" fill="gray"  font-family="sans-serif ">
+       <tspan x="3" id="train_info_text" visibility="hidden">Train 1</tspan>
+    </text>
+   </g>
    
   <polygon id = "track_polyline"
        points="0,0 1,0, 1,1 1,0 50,0 50,1 50,0 100,0"