Guppy is a Javascript-based WYSIWYG editor for mathematics whose content is stored in an XML format that makes Guppy mathematical expressions searchable, parseable, and renderable.
The content of the editor can easily be extracted in XML format (for searching or otherwise manipulating), LaTeX (for rendering), or a plaintext format (for parsing).
Guppy does not store a complete syntax tree for the mathematical expression entered. The XML format differs from a syntax tree in that the leaves are not primitives (numbers or variables), but rather are basic arithmetic expressions (those involving only the four basic operations as well as primitives).
A live demo can be found at http://daniel3735928559.github.io/guppy/
A stripped-down version of the demo page would look like:
<html>
<head>
<link rel="stylesheet" href="lib/katex/katex.min.css">
<script src="lib/katex/katex-modified.min.js"></script>
<script type="text/javascript" src="guppy/guppy.js"></script>
</head>
<body>
<div id="guppy_div" style="width:400px;height:100px;"></div>
<script>
Guppy.guppy_init("guppy/transform.xsl","guppy/symbols.json");
new Guppy("guppy_div");
</script>
<button >See XML</button>
<button >See LaTeX</button>
<button >See ASCII</button>
</body>
</html>
-
Download the
libandguppyfolders. -
Include
guppy/guppy.jsas well aslib/katex-modified.min.jsandlib/katex.min.cssfiles in your page. -
Pass the paths to
guppy/transform.xslandguppy/symbols.jsontoGuppy.guppy_initas in the example above. This only needs to happen once per page. -
For each div that you want turned into a Guppy instance, call
new Guppy()passing in as the first argument either the Element object for that div or its ID.
The use of the editor frontend itself is documented in index.html.
The primarily useful items in the Guppy object are:
-
new Guppy(guppy_div,properties):guppy_divis either the div ID or the actual div object that you want turned into a Guppy editor (e.g.document.getElementById('my_div1')).propertiesis a dictionary that can be null or empty, but may contain the following keys:-
xml_content: An XML string with which to initialise the editor's state. Defaults to<m><e/></m>(the blank expression). -
blacklist: A list of string symbol names, corresponding to symbols fromsymbols.jsonthat should not be allowed in this instance of the editor. Defaults to[](nothing blacklisted). -
debug: A boolean saying whether guppy should log debug data to the console. Defaults tofalse.
This function should be called for each div that you want to turn into a Guppy instance.
-
-
Guppy.guppy_init(xsl_path, symbols_path):xsl_pathis the path toguppy/transform.xsl,symbols_pathis the path toguppy/symbols.json. This function should only be called once per page. -
Guppy.prototype.get_content(type):typecan be"xml","latex", or"calc", and the function will return (respectively) the XML, LaTeX, or ASCII representation of the instance's content. -
Guppy.prototype.set_content(xml_data):xml_datais a string containing XML that describes a valid Guppy editor state (e.g. one returned byget_content("xml")). This resets the state of the editor. -
Guppy.instances: This is a dictionary that contains all Guppy objects on the page , indexed by div ID. So you can access the Guppy object withGuppy.instances.guppy_div_id. If the div did not have an ID, the div will be given one by new Guppy() that is unique on the page, and will be accessible from that object by, for example,new Guppy(...).editor.id.
There are other instance-level functions that may be of use in some
circumstances (e.g. for creating a browser-button-based interface):
left() and right() will move the cursor left and right
(respectively), backspace() will do the same thing as hitting the
backspace button, undo() will undo the previous operation, and so
on. More complete documentation will eventually be available in
doc/.
Guppy is licensed under the MIT License