Include the script draw-derivation-trees.js in your web page, after the core.js script.
<script type="text/javascript" src="tau-prolog/core.js"></script> <script type="text/javascript" src="tau-prolog/draw-derivation-trees.js"></script>This tool adds a new method draw(max_answers, canvas, styles) to the pl.type.Session and pl.type.Thread prototypes. This method must be called after querying a goal (with the method query( goal )).
- max_answers: maximum number of answers to find in the derivation (to avoid infinite trees).
- canvas: identifier of the canvas HTML object, or canvas object.
- styles (optional): JavaScript object with style properties. The default styles are shown below.
{ "font-size": 14, "font-family": "Monospace, Courier New", "border-width": 2, "border-color": "#43207a", "padding": 5, "margin-x": 10, "margin-y": 20, order: { "radius": 15, "background-color": "#43207a", "border-width": 4, "border-color": "#43207a", "font-color": "#ffffff" }, state: { "background-color": "#e0ccfd", "border-width": 4, "border-color": "#43207a", "font-color": "#43207a" }, answer: { "background-color": "#a7e3a7", "border-width": 4, "border-color": "#0b6a0d", "font-color": "#0b6a0d" }, error: { "background-color": "#ecc2c2", "border-width": 4, "border-color": "#881717", "font-color": "#881717" } }<html> <head> <script type="text/javascript" src="tau-prolog/core.js"></script> <script type="text/javascript" src="tau-prolog/utils/draw-derivation-trees.js"></script> <script id="program.pl" type="text/prolog"> powerset([], []). powerset([_|T], P) :- powerset(T, P). powerset([H|T], [H|P]) :- powerset(T, P). </script> </head> <body> <canvas id="derivation"></canvas> <script type="text/javascript"> var session = pl.create(); session.consult( "program.pl" ); session.query( "powerset([1,2,3], X)." ); session.draw( 10, "derivation" ); </script> </body> </html>