The author decided to take up a retirement “hobby” as a change from wrestling with programmatic complexities. Having chosen to build a garden railway, having been trained as an engineer and having read some of the sage advice from those already “in the scene”, it was clear that the layout would need some careful design. Issues such as maximum gradients, minimum turn radii and loading gauge clearances required a clear and calculated design. Naturally there are CAD tools specifically targetted at model railways, but equally well, I found none of them to be just right.

So, having spent many years developing software, and in recent times being deeply immersed in XML technologies, particularly XSLT3.0[XSLT] and SVG[SVG], I decided to build a specific design tool with these technologies. Given Saxon-JS[Saxon-JS] as the XSLT execution engine, the tool was run through a browser connecting to a localhost web server.

The main design used an XML definition of garden “background” and the possible layouts, and at first calculated all the resulting geometry, producing both a tabular summary and a set of SVG graphic elements that could be displayed on a grid. This permitted for example interferences between tracks and garden elements (e.g. bushes) to be examined. Simple XHTML controls were added to allow various aspects of the display to be altered dynamically, using Saxon-JS's interactive modes (e.g. ixsl:on-change) to alter style or class properties of parts of the XHTML/SVG DOM tree. Textual styling (fonts, colours. etc.) were defined in a set of CSS stylesheets.

Once a simple system was operational, the “picture” was enhanced, both by supporting an isometric view of the garden/layout, but also more “realistic” graphics for the track and other aspects.

A little experimentation showed that the animation facilities present in SVG should allow objects to move around the paths of the track. A simple facility was added to enable “block” objects to be run, moving from section to section under controllable and alterable speeds. Simple click interaction allowed the points to be changed, so the path of these blocks could be altered whilst they were still running.

The model for these “locomotives” was improved to support a three-dimensional definition consisting of a number of orthogonal rectangular blocks and cylinders, from which an isometric SVG view of a simple locomotive could be displayed. This would then be animated to follow the path of the current track section, with tangential rotation to “point forward” and with suitable rotation animations on the wheels. Simple sound effects (running sound, whistles etc.) were added to the design.

Finally, this system was demonstrated at MarkupUK 2018 in the DemoJam session, with some success.

In this paper I describe the deign and implementation details of the system that was demonstrated, and outline some additional possible developments. In conclusion I discuss how suitable the combination of XSLT3, SVG and Saxon-JS has been to tackling this design task.