I am converting an existing code base from using Flash to using CreateJS but I am in need of a way to stop the Stage update and inspect the EaselJS GUI elements
for debugging.
My list of requirements for the debugger is
It must be possible to stop the propagation of CreateJS ticks to the non-debug parts of the GUI so that these parts do not change during inspection.
In inspection mode, it must be possible to see the hierarchy tree of the non-debug parts of the GUI.
In inspection mode, when an element in the hierarchy tree is selected, then the corresponding visible canvas graphics must change appearance to clearly distinguish it from the other graphics on the canvas, and so that its boundaries are clearly visible.
In inspection mode, when a point is selected on the canvas, then the corresponding element must be visible and highlighted in the hierarchy tree.
In inspection mode, when a point is selected on the canvas, then the following properties must be displayed for the corresponding element: coordinates & size.
To achieve the above, I need to implement at least these parts.
Stage traversal and data extraction.
Tree presentation of the data extracted.
Highlight of specific stage objects.
Control of the Stage ticking.
Are there libraries that can help me create such an inspector tool?
The EaselJS-Inspector is an example of how to solve everything above, except that I use a fixed size for all DisplayObjects.
The problem is that Shapes do not have a size unless one manually sets it.
Related
What is the suggested approach for handling user input and camera controls in XML3D?
Basic interactivity can be added using the DOM tree events, but I'm not sure if that would be enough to provide rotation gizmos (for example).
Does library provides some API to handle user input and camera controls?
I've noticed that there is xml3d toolkit that was developed year ago.
It seem however that this is rather a loose collection of demos rather than a library for handling user input, also there is no decent use documentation for it.
I need to provide basics functionalities like rotation/translation/scaling of models and controlling the camera.
xml3d.js doesn't provide any cameras or gizmos by itself. They're usually application-specific (there are dozens of ways to implement a camera for instance) so it doesn't really make sense to include them as part of the core library. A very basic camera is provided alongside xml3d.js but it's quite limited.
The xml3d-toolkit did include transformation gizmos and various camera controllers but it's not in active development anymore since the creator has moved on to other things. Still, it might be a good place to start, or at least to use as a reference in building your own camera or gizmo.
For example, a simple way to allow the user to change the transformation of a model would be to:
Add an onclick listener to each model that toggles the editing mode
Show 3 buttons somewhere in your UI to let the user switch between editing rotation, translation or scale
Add onmouseup and onmousedown listeners to the <xml3d> element to record click+drag movements
As part of those listeners, convert the change in mouse position to a change in transformation depending on what editing mode the user is in
Apply those transformation changes to the model either by changing its CSS transform, or through the relevant attribute on a <transform> element that's referenced by a <group> around your model.
Exit the editing mode if the user clicks the canvas to deselect the object (rather than a click+drag operation)
To keep it from conflicting with camera interaction you could use the right mouse button for editing, or simply disable the camera while the user is editing a transformation.
A 3D gizmo is a bit trickier because it needs to be drawn over top of the model while still being clickable, currently there is no way to do this. You could use the RenderInterface to draw the gizmo in a second pass after clearing the depth buffer, but this would not be done in the internal object picking pass that's required to find out which object a user has clicked on.
As a workaround, the toolkit library used a second XML3D canvas with a transparent background positioned over the first that intercepted and relayed all mouse events. When an object was selected its transformation was mirrored into the second canvas where the gizmo was drawn. Changes in the gizmo's transformation were then mirrored back to the object in the main canvas.
Have a look at the classes in the toolkit's xml3doverlay and widgets folders.
An advice for people implementing draggable objects with XML3D:
Use ray picking method of XML3D element to get both object and the point of intersection of ray & model ( function getElementByRay).
Change the mouse movements from screen coordinates to world coordinates.
You must scale transform by the relative distance of picked point to camera and camera to projection plane, so the moving object can track your cursor.
I am trying to make a visualization using d3 which is basically a scatter plot with links between the points. (I have attached a .gif of the existing java based visualization)
The points can be added by double clicking other points. On hovering over a point, I wish to have links drawn between the point and all its partners on screen.
I have the part where on double clicking a node, its partners are added. What I need help with is drawing the links (primarily I am not able to understand how can I get the x1,y1,x2,y2 values required to draw the links).
This is what my DOM looks like:
I have seen a lot of examples online but somehow not able to figure the solution - if anyone could link me to a similar visualization or share a fiddle/ give some pointers on how this can be achieved I would be really grateful.
First the simple stuff: here are 2 mechanisms for drawing the lines.
Next, in terms of the data representation of the lines, check out how links are typically drawn when working with the force directed layout.
Important: Do not get distracted by the existence of the force layout in this example and by the fact that the force layout works with these links (which are passed into it by calling force.links(links)). That aspect of the example probably doesn't have an equivalent in what you're trying to achieve.
However, do notice how the links array is constructed —— with each element of the array being an object with pointers to source and target datums. In your case, you'll want to work with a similar links array, where source is the node under the mouse and target is a node that's connected to it. So you'll end up with an array of links who all have the same source datum but unique target datums.
You can then bind the links array (via the usual .data() method) to a d3 selection of line or path elements. Once you bind, you can use the usual enter, update, exit pattern to append, update and remove (on mouse out) the drawn lines.
Given a source and target datums, you can calculate the x and y of the endpoints in the same way you currently calculate the translation of each <g> element, presumably using a d3 scale.
I am using InfoVis to generate a space tree visualization in one of my projects. Since this is an interactive web site, the Space Tree needs to be regenerated each and every time the user has changed preferences.
This requires the Space Tree to be completely cleared and re-draw a new tree on the same space. In addition, the charting area can be re sized as the page size varies. This requires re-draw of the Space Tree.
I came across several issues while trying to clear the previously drawn Space Tree before drawing the new one. I am using the following code segment to clear the previous drawing, but it's failing miserably.
st.clearNodesInPath();
st.labels.clearLabels(true);
st.canvas.clear();
If anyone can guide me how to resolve this that would be great as this is blocking my progress. Thanks in advance.
This was resolved in the following manner.
The InfoVis chart draws it's elements as HTML div elements inside the parent element. The problem was due to remainings of those generated div elements even after clearing up the data structures. Those were clearly shown in the previously attached images.
This was resolved in the following manner.
var list = document.getElementById("idOfParentElement");
list.removeChild(list.childNodes[0]);
The code fragment extracts the parent InfoVis element and clears up all of it's generated child elements. This will eventually clears the canvas object where the visualization will be drawn.
This resolved my issue. Hope this helps for anyone who is having the same issue.
I am doing visualization with the JavaScript InfoVis Toolkit, in particular the hypertree. I am loading data dynamically and sometimes the labels around the nodes overlap and clutter. I would like to avoid this clutter by altering the label positions.
Here is an example of cluttering (the top and bottom nodes):
I imagine that I would loop through each x,y coordinate, give it some bounding box and do basic collision detection, and update positions accordingly.
For this library, I see the demo shows a onPlaceLabel() function, but (if I understand correctly) at that moment I wouldn't know the position of every other node's label. So, I am looking at onComplete(), where I see I can access each node as follows:
onComplete: function(){
ht.graph.eachNode(function(n) {
console.log(n);
}
}
But the node information does not include its label positions, only their positions relative to the center node. Is there a way to access the labels in this way and be able to update their positions?
I'm using the tree layout and code similar to http://mbostock.github.io/d3/talk/20111018/tree.html
I modified it for a top down orientation.
As each node is opened/expanded, the other open nodes compress to fit everything within the SVG element. Is it possible to prevent that? I would think modifying the x component of each node would be the approach but have not been able to accomplish that. The nodes move over, but are still compressed together.
Also wondering how to change the linking lines from a bezier to right angles/straight lines. Perhaps a separate question is needed.
The compression is automatic in the tree layout (and part of its point). There's no way to turn that off. However, you can simply make your SVG large enough to contain the entire expanded tree without compression. Note that this means that unless your screen is large enough scroll bars will be displayed even when everything that is visible fits onto the screen.
The links connecting the nodes are generated using the diagonal line generator in the example. In principle, you can replace this with any other line generator (e.g. d3.svg.line), but in practice some changes will be necessary because the diagonal line generator accesses source and target nodes in a special way. For a normal line generator, you would need to convert this structure to a two-element array and for each element specify how to access x/y coordinates. Then you can use any of the interpolations to get the curve you want.