HTML 5 Canvas - Grid Block Fill-In - javascript

I've created a Canvas and have written out a grid(resembles graph paper) with the X & Y coordinates successfully. What I'm looking to do now is the following:
-When someone clicks with a mouse a square in the grid will change to a different color
-Once a block is selected that data will not change

You need a separate 2D array that maintains the state for each (x, y) grid position.
When a click happens, check that state array to see if the cell was clicked before, and update the canvas as appropriate.
I created a little demo to show you: http://jsfiddle.net/alnitak/xN45K/

Related

How to make HTML Canvas clickable grid (that returns cell to match array element?)

Trying to build the Game of Life here with React JS. I have a 2-dimensional array that holds the state of the grid. Every element, which is an array, represents a row and a sub-element is either 0 or 1 (dead or alive).
I want to use HTML Canvas to draw the grid based on this array and also add a click function that returns the matching element in the array so I can write a function to change it to 0 or 1 based on an algorithm.
I have a general idea how to draw a grid, also checked this link
But i am not sure whether this is the way to do it so I can identify each cell with a click. And also stuck on how I can return the cell to match the array element. Anyone can help me with this?
I am also aware of this question on Stack Overflow, but the answers are implementations with HTML or SVG, I am looking for a canvas implementation.
First of all you have to handle the click event. Here you can find a good description of how: How do I add a simple onClick event handler to a canvas element?.
Furthermore, you just use the x and y of the clicked point to determine what tile has been clicked. Lets say you have 10 x 10 tiles with the height and width of 10 px.
If the user clicks the coordnate 67,12 you can divide x and y by ten, and round it off to know which elelemt in your 2d array that represents it.

How to make a Tile/Grid layout like Gridster.js in AS3?

I want to make a custom layout which behaves like this shown in picture below.
I have already tried Tile Layout and to modify its calculateDropIndex method but not get desired behavior.
Tile layout works well when all the tiles are of same height and width but in my case tile size are different.
http://gridster.net/
Gridster layout screenshot
After a little bit more try i am able make a gridster like drag n drop gird component.
here is a brief summery of how i have made this component.
while adding pods in to container add one more pod at the same position and keep it's visibility off. this extra node will be our drop indicator.
keep all the original nodes in one array say nodes, and all extra nodes in another array say dropIndicators.
for example if add nodes A, B and C in the container. we will add three extra nodes X, Y and Z respectively one for each main node.
and over nodes array will be
node[0] = A;
node[1] = B;
node[2] = C;
and dropIndicators array will be
dropIndicators[0] = X;
dropIndicators[1] = Y;
dropIndicators[2] = Z;
now you will need following function to update nodes position when we drag any node.
CalculateDropLocation - to calculate new drop location while dragging.
CheckCollision - to check collision between two nodes.
FixCollision - if there is a collision we will fix the collision using this function. this function will mode all the colliding nodes downwards recursively.
updateNodes - once the collision is fixed we will update all the nodes using this function. this function will move node upward if there is an empty space.
now when we start dragging A node calculate new drop location for A node and move it's relative extra node i.e. X to the new drop location, check if X is colliding with any other extra node. we will use the dropIndicators array in all the functions.
if collistion than call fixCollision() function, than call update node function.
and at the end once all the nodes are updated set the position of all the extra nodes to it's original nodes i.e. set X's position to A's position , Y's position to B and so on. while updating original nodes position you can use Move animation to move nodes smoothly in the container.
hope this will help. using this method you can make this type of layout in any language.
hope this will help.
for more details and sample application with source visit this link
http://usefulflexcomponents.blogspot.in/2015/12/blog-post.html

How to make a box heatmap chart (similar to a tag cloud) with ReactJS and D3JS?

Given time series data with category hierarchy (i.e. parent children), how to make a box heatmap chart like this:
http://finviz.com/map.ashx
This is very intuitive to view the performance of one stock, as well as one whole category.
Is there any existing JS that can make similar animation effect?
The visualization is somehow similar to tag cloud, but inside of a box, and with a color indicating a value change (of positive or negative).
Here is my idea.
We can keep the position (x, y), width, and height of each root category fixed, e.g. "Technology" and "Service" on the finviz page.
The second difficult part is to calculate the (x, y, width, height) for each sub-box inside of one category, to make sure that the layout of these boxes are well placed. Any insight on this part?
We need to make an animation effect for the delta value, and make a color for each box.

Jquery:Draw Svg Line Dynamically While Dragging

I need to drag and drop cells from one table to another table where i am using it to develop foreign key mapping dynamically for the SQL table
Where the table also can be dragged as well inside the window, the mapping and drawing line between two tables are working perfectly
But when i bring the tables close to each other and when i move the tables further after the intersection of the tables the line is not drawing between the tables, i got where the issue is from but i cant figure out, how to draw the lines between the tables while intersection
So the issue is something like lines drawing from left to right but not right to left it is taking as intersection
Example: http://jsfiddle.net/mohamedmusthafac/2ecsjomz/embedded/result/
Here is the minimal example fiddle
Example : http://jsfiddle.net/mohamedmusthafac/2ecsjomz/4/
If you drag left drag box across the right drag box then line will not draw
This is just a demo, you can drag the primary key from table 1 and drop it in Table 2 works perfectly, But same as reverse will not draw the lines from table 2 to table 1 and also if you drag the table intersect with the table 2 the lines will not draw
For better understanding:
It is drawing perfectly
But when we bring the table near to another table line is not drawing
The problem was very simple to debug in the end. Your problem starts here:
svgleft = Math.round(el1pos.left + el1W);
svgwidth = Math.round(el2pos.left - svgleft);
Once the boxes start overlapping, svgwidth becomes negative. An SVG with a negative width is an error and the SVG will not be rendered.
You are either going to have to prevent the boxes from overlapping, or change the code to allow for 'right' being to the left of 'left'.

Javascript - mapping mouse clicks over a grid

I have a cube grid made of an array of arrays in javascript. The grid dimensions are stored in variables. So dim is the dimension of the single cube, spacing is the distance between each cube (dim and spacing expressed in pixels).
Now, considering that I can always have the user mouse position in the variables g.mouseX and g.mouseY why this code isn't always so precise?
var j = Math.round(g.mouseX / (dim+spacing));
var i = Math.round(g.mouseY / (dim+spacing));
// user clicked on the cell grid[j][i]
Sometimes I click a cube but it looks like he's considering the one nearby. It looks like the whole mapping of the user click is shifted of half a dim. Probably using Math.round makes everything almost wrong, but I don't see any other way to transform such a chaotic and unpredictable value as the user click to a precise coordinate in my grid.
Hope anyone can help on this!
Thanks in advance...
You want to truncate, not round. You can use Math.floor, which maps (e.g.) 3.7 to 3:
var j = Math.floor(g.mouseX / (dim+spacing));
But really, why not just bind the onclick event of each grid cell?

Categories