The previous tutorial introduced custom types. In Tutorial04, they will be used to change how they are autocompleted in the editor.
For details, see also
<!doctype html>
<html>
<body>
<!-- The HTML element that will hold the editor -->
<div id="nls-container"></div>
<!-- The only javascript file needed for nlScript -->
<script src="https://cdn.jsdelivr.net/npm/@nlscript/nlscript@0.3.0/dist/umd/nlScript.js"></script>
<!-- Load the library for the actual processing -->
<script src="preprocessing.js"></script>
<script>
let preprocessing = new Preprocessing("output");
let parser = new nlScript.Parser();
// In contrast to the previous tutorial, a third parameter is given, which specifies whether to
// insert the entire sequence when auto-completing or not.
//
// The default is false, which means that once the user input reaches the filter size, the editor will wait
// until a number is entered. This might be unintuitive, because it might not be clear to the user what is
// expected (e.g. in which units to enter the value).
//
// If set to 'true', the entire sequence will be inserted, i.e. a placeholder for 'stddev' (which is selected
// so that the user can readily overwrite it), concatenated with the literal 'pixel(s)'.
parser.defineType(
"filter-size",
"{stddev:float} pixel(s)",
pn => pn.evaluate("stddev"),
true);
parser.defineSentence(
"Apply Gaussian blurring with a standard deviation of {stddev:filter-size}.",
pn => {
let stdDev = pn.evaluate("stddev");
preprocessing.gaussianBlur(stdDev);
preprocessing.show("output");
return undefined;
});
new nlScript.ACEditor(parser, document.getElementById("nls-container"));
</script>
</body>
</html>
