We Keep Coding

How to undo the dots on this grid?

Refering to a live javascript playground at https://codepen.io/Maximusssssu/pen/MWrzpav?editors=1011 .When you click on the grid, it will put a triangle or a square depending on your liking using the buttons (triangle & square below the grid). However, I am trying to build an Undo function for both triangle and square. Can anyone offer me some guidance on this? Thank you for reading and have a nice day :) I use the code below to put square or triangle on the grid.
newDot.style.top = y + 'px';
newDot.style.left = x + 'px';
// Add the new element to the end of the body:
document.body.appendChild(newDot);

I would use Memento pattern to implement the undo functionality with the classes listed below.
Basically, the client (main function in my example) invokes const s = Grid.snapshot() method to take a snapshot of the current state of the Grid, and invokes History.push(s) to save the snapshot. When the client needs to undo the change, it retrieves the previous grid state, i.e. snapshot, by invoking const pre = History.pop(), and then feed the previous snapshot to the grid by Grid.restore(pre). The Grid.restore() method can internally invoke Grid.render() method to render the previous state of the grid, i.e. draw the previous set of dots.
Grid Class
Grid holds information about the grid, i.e. all the coordinates of the dots, shapes of the dots, etc.
Snapshot Class
Snapshot captures the state of the grid at some point in the past. Grid is responsible for producing an instance of Snapshot.
History Class
History saves all the previous states of the Grid by storing Snapshot objects. It it essentially a "stack", so it can push or pop a snapshot in a LIFO manner.
main
main function handle all the above objects to realize the required functionalities of the app.
UML Diagram
In order to implement the undo functionality separately for the square and triangle dots, I would tweak this design in such a way that it keeps track of two sets of previous states, one being the triangles and the other being squares. This would result in having two History objects, one recording previous states of square dots and the other recording those of triangle dots, as well as the Grid object producing separate snapshots for squares and triangles.

Cesium large number of entity updates

I am working on a project dealing with sensor data. In my backend everything is stored in a database which is getting polled by a controller and converted into kml to display on the cesium globe. This poll happens every 5-10 seconds and contains around 4000-8000 objects (we store up to 1 minute worth of data so we are looking at somewhere like 20k - 50k points). Following this I have an update function which slowly fades the markers out which updates every 5 seconds.
To load the kml on the map I use the following function:
var dataSource = new Cesium.KmlDataSource();
dataSource.load('link').then(function(value);
viewer.dataSources.add(dataSource);
});
On the update color function I am iterating over all of the objects within the datasources entity collection and updating them like so (this is very inefficient):
var colorUpdate = Cesium.Color.fromAlpha(newColor, .4);
dataSource.entities.values[i].billboard.color = colorUpdate;
When I do and add or color update I see a large amount of lag and was curious if there was anything you would suggest to fix this? Generally I get a freeze up for a few seconds. After 60 seconds of the data being on the map it gets removed like so (just a different if case within the color update loop)
dataSource.entities.remove(dataSource.entities.values[i]);
Is there potentially a way to set a propertiy for an entire entity collection so when this collection becomes 30 seconds old it updates the color to a new one? It seems that I just need to find a way to set a property for the entire collection vs individual entities. Does anyone know how to do that or have a suggestion for something better?

AutoDesk View and Data API - return position of selected element

Question:
I've been using the AutoDesk View and Data API, and I've been curious to know if it was possible to return geometric information about a selected element. Ideally, I want the position, size, angle, type of shape, etc., of a selected element so that I could compare, for instance, two lines. I don't mind how this information is represented, so long as two shapes could be compared.
Objective:
If there was a line, such that (psuedo-representation):
(x1=0,y1=0),(x2=10,y2=0), a 2d straight line of length 10;
and another line, such that:
(x1=20,y1=20),(x2=30,y2=20), another 2d straight line of length 10.
Then I would be able to say that these two lines are similar from this information and deduce their angle. There would obviously need to be some indication of the type of entity that is selected also. That's the desired outcome of my question.
What I've tried:
So far, I've found several useful functions within Viewer3d.js, but none seem to return any data about the geometric position of a single selected shape:
Viewing.Extension.SomeExtension = function (viewer, options)
{
...
var shapeRenderData = viewer.impl.getRenderProxy(viewer, dbId);
var shapeFragmentData = viewer.impl.getFragmentProxy(viewer, dbId);
}
I already understand how to include the onSelect event, and that is left out for clarity of the question.
Both of these return a JSON object with properties of fragId, scale, quaternion and position - although with exception of fragId, these properties have null values.
Extra:
I am basing the extension I've created off of this GitHub tutorial from the AutoDesk team:
https://github.com/Developer-Autodesk/tutorial-getting.started-view.and.data/blob/master/chapter-3.md#Step5
Please note the fifth step includes code for the onSelect event I'm discussing, should you wish to recreate the question to help me solve this.

I've wrote that blog post about geometry snapping and selection commands. I think it should provide some elements of answer to your question:
Geometry snapping and selection commands with View & Data API

Sigma JS node animation

I want to move nodes in Sigma JS on click event. Say from position x 0.7 to position x -0.7.
Is it possible to move nodes in Sigma js, and if it is, kindly guide me to achieve that.

Yes, it is possible. I created a jsfiddle showing how to change node position, size, and color on mouse click here:
http://jsfiddle.net/kaliatech/P255K/
You can bind to custom "downnodes" events like this:
sigInst.bind('downnodes',onNodeDown);
The event callback contains an array of selected node ids. I don't know when it would be more than one when clicking. Perhaps when zoomed out in a complex graph.
One of the more subtle issues when using sigmajs, is that most methods, such as getNodes, return clones, not the instances themselves. This is to protect "private" data in the graph I think, especially data that can not be redrawn after initialization. To actually modify properties, you need to use the iterator methods. Even then, you are only given clones. The library updates the actual node instances using a list of predefined allowable properties. (See the checkNode function in graph.js).
After properties have been set, you then need to refresh/redraw the graph. While the "refresh" method would seem to be an obvious candidate, it did not work. I was able to get it to redraw using the draw method though. You will need to review the source code to understand the different parameters. Example:
function onNodeDown(evt) {
var sigmajs = evt.target;
var nodeId = evt.content[0];
sigmajs.iterNodes(function(n){
n.size = 10;
n.color = "#0000FF";
},[nodeId]);
sigmajs.draw(2, 2, 2, true);
};
For more advanced needs, the sigmajs website includes plugin examples showing other ways of getting mouse events and updating nodes dynamically. One is the advanced plugin example for a fisheye effect:
http://sigmajs.org/examples/a_plugin_example_advanced.html
Another is the example for accessing node attributes:
http://sigmajs.org/examples/more_node_info.html
The sigmajs documentation is weak, so you will need to review the source code to understand things.

There are plugins permitting to move isolated nodes from the graph.
Check
https://github.com/Linkurious/linkurious.js/blob/develop/examples/lasso.html

How to display multiple pictures stacked on top of each other in JavaScript

On a web page, I want to show a list of albums and next to each album name i want to show a stacked list of pictures on top of each other. What is the best way to dynamically take a list of pictures and have them stacked on top of each other
Here is an example:

Why not just build one? it wouldn't be hard. Here is a small rotate prototype i've worked up (took maybe 5 minutes to write)
Element.prototype.rotate = function(d) {
var s = "rotate(" + d + "deg)";
if (this.style) { // regular DOM Object
this.style.MozTransform = s;
this.style.WebkitTransform = s;
this.style.OTransform = s;
this.style.transform = s;
}
this.setAttribute("rotation", d);
};
then you can use to it rotate a list of images.. see (not very good :P) example here
Better Example
Best Example
Looks like the OP wants more
How is this for close-to-the-example? i think a few angles may be off...
Or click here

To rotate the images you either need the new CSS3 features or a canvas element, new to HTML5.
Writing some JS functions to aid you in the rotating process it's a matter of minutes.
I would say the best library is the one you write.
Anyway, if I had to choose one I would choose Raphael.

Libraries will just help you out with manipulating the dom and responding to events. The answer lies in the way you see the problem, how you will represent the data, how you will handle the dynamic data that comes to you.
Images are html elements, so they can be manipulated with CSS3 like Jose Faeti said. Now for the dynamic part I would suggest you take a look at backbone.js (http://documentcloud.github.com/backbone/).
In a few words, backbone.js will help you defined albums and pictures as standalone entities, hook views to those data models - views that will automatically adapt when new data comes via ajax from the server - and to top it all of, it uses jQuery for dom selection, so:
1) You get a nice OOP-ish approach to defining your images data
2) You get a nice Model-View View-Model relationship that updates itself easily
3) You get jQuery as a dom selection and manipulation tool