One of our project requirements is to have a basic online schematic editor for electrical circuits. Therefore, it was my task this week to explore JointJS as the library that we will be using in order to build our editor. However, it needs to be built from inside a Witty project!
The process of integrating JointJS with Witty code was fairly simple, and very similar to the integration of Witty with Ace and CodeMirror. I am not going to go through all the details here, but highlighting the important parts. First, I created a WContainer object (named JJSdiv) to use it as a “paper” for JoinJS. Then I called the function JJSdiv->doJavaScript() as follows
JJSdiv->doJavaScript( ” if (typeof graph == ‘undefined’) var graph = new joint.dia.Graph; var paper = new joint.dia.Paper({ el: $(‘#” + JJSdiv->id() + “‘), width: 500, height: 500, model: graph, gridSize: 1 });
“);
JJSdiv->id() is used to return the id of the HTML
Now let me discuss the library itself, as a schematic editor for electrical circuits. JointJS is a very powerful library. It has Elements objects (which can represent the electrical components) and Links objects (that can represent the wires). It allows you to define all aspects of how an element or a link looks, define ports for the elements for connections and specify which ports can connect to which (e.g, output ports to connect only to input ports). It also provides a functionality for auto routing when connecting Links (wires) to avoid obstacles or other elements.
That being said, I have some worries with regard to it. First, the links object can have only one source and one target, and I didn’t find a way to connect a link to another link. Therefore, I don’t think it is possible to have electrical nodes in the circuit where multiple wires intersect. An example is to have one wire stretching across the circuit to be a ground and just connect from it, instead all connection will have to be made to a ground port, which can make the circuit a bit messy with too many wires. Second, I am struggling with creating a new instance of an object after the HTML page has been loaded, e. g, with a click of button. All demos and tutorials provide the complete code in JavaScript defining and instantiating all object before hence. The only way I found until now is through using Stencil, which is a plugin included in Rappid, the non-free part of JointJS. I think there must be other option. I am still reading the friendly documentation of the library to figure out how make that possible.
That’s it for JointJS, which I’ve been working on for the second half of this week. The first half was dedicated for Witty Wresources and HTTP requests and responses and how to deal with the non-gui part of Wt.
0 Comments