The SVG port is a deviation of the text port that we normally use
to show Dogelog player sub-stitution answers. Instead that we use
a HTML text node, we now use a SVG graphics node. SVG is an XML
based graphics format that already exists for a while and has
quite some browser support:
<!-- p style="..." id="demo"></p -->
<svg id="demo" width="500" height="400"> </svg>
To be able to emit SVG commands to the SVG port we have to change
the output routine of the Dogelog player slightly. Since the
output will be XML, we have to refrain from escaping it. Further
it turned out that insertAdjacentHTML() is quite fast:
function out(buf) {
// document.getElementById("demo").innerHTML += xml_escape(buf);
document.getElementById("demo").insertAdjacentHTML("beforeend", buf);
}
For the rest of the HTML page, we have adopted the design of the audio sequencer tutorial example. This means we have an async main function which is also responsible for the auto-matic yielding of the Prolog engine.