I'm hoping someone can help or point me in the right direction. I have been doing a lot of research but have not found anything that fits. I would like to make an area where you can drag and drop objects then connect them with arrows to show order.
I would like it so that you can drag and drop unlimited amounts of objects. Then be able to click on a "+" or something to then start to draw an arrow to the next object.
Quick summary for the overall project, I would like to eventually make a flowchart where it can branch off in two directions for decisions but have objects that I can drag out and then draw an arrow to the next object.
Libraries and articles
I found this article that I tried to follow, but I couldn't get it working, but this is a good representation of what I am looking for if it is modified to be done when clicking not just drawing.
I know about jsplumbtoolkit but I do not have that kind of money, also they do a lot more than what I would like to do.
I have seen the react-js-diagrams that seem to be what I want but have not been able to get it to work.
Image of what I would like
Related
Purpose: I want to create a game like this one
Problem: How to make it so that when dragging an item it does not go beyond the borders of the cell? I can do it like this, but you can easily control it from the keyboard, but somehow I’ll find it difficult to work with dragging. In other words, it is required that dragging an item is only possible along a particular path (as in the example of the game above)
Any thoughts? Any options and solutions are welcome. Thanks!
Judging by the example you gave you can do this by placing the walls around the item. Whenever the system detects collision with the walls movement of the item will stop. I have mostly used this functionality with Unity Engine so i am afraid i can't provide you with specific codes.
Check this video: https://www.youtube.com/watch?v=hNV-xEMALr8
I think you will be able to figure this out after watching it.
My research has found me powerful libraries like paper.js which are quick to show all the next-level awesome stuff they can do, but I'm not sure how (or if) I can accomplish a basic task:
I want to present a simple Stick Figure to my user:
o
\|/
/ \
Then let them grab the ends of the lines ("hands and feet"), and drag them into different positions, leaving the connecting nodes ("shoulders and hips") intact.
Simple.
In short, what is the simplest way to draw something with lines and nodes that users can manipulate.
Requirements:
Some line lengths are fixed, others can be lengthened.
Some nodes are fixed, others can be moved.
I need to at least display the angles of the lines, but ideally can modify those angles (via text input).
I feel like this shouldn't be this hard, but as I said, most libraries skip the basics and go straight to their coolest features, while any search for "edit vector nodes" and the like brings up lots of irrelevant results about node.js...
Probably you must have found the solution, but since it is unanswered, I thought of posting about a fantastic library I know.
The library is konva.js. You can find demo application references on site itself.
It features powerful set of functions to create custom shapes and layering support(In fact there is lot more). You can easily modify the properties of any shape, add animation and more.
You can find documentation here.
i want to program a 2D-sqare Gamefield. The gamefield shall consits of 9 subfields. The Gamefield shall be an Image, like an Spacefield or so. Here you can see the concept, and how it shall later look like (just a mockup :P)
Within this field i want to move a Object from one field to the other (vertical /horizontal) . But i don't know how i can realize that. I had think of an multidimensional array, but i don't know if this is the right way to do this. I need to know, at which pixel in the image the new field begins. But i think its no good idea to code that hard. I want to do this with Jquery, CSS and HTML. It shall become a very simple online game.
Qapla'
In game development these fields are usually called tiles.
It's perfectly fine to create a multidimensional array of Tiles.
Whether they hold their own position or if it's up to a separate renderer is up to your design.
Some links you might be interested in:
Tiles and tilemaps overview (though this uses a Canvas-element)
Using CSS transitions for smoothly moving from one Tile to the next (not as useful when using a Canvas)
jQuery animate if you don't like CSS transitions, you can make use of jQuery as well.
I'd recommend reading up on Tiles in game development first, there are tons of example implementations.
Is there an alternative (and more elegant!) method of creating multiple tooltips on top of an image without using image maps? Preferably looking for a solution that makes use of jQuery, but not necessary.
While I know solutions exist with image maps, they just seem so clunky and unmaintainable. For example, what if the image comes from a dynamic source? Would that source also have to provide an image map as well, which someone would then have to create beforehand? Maybe I'm asking for too much, but on the chance that someone out there has a more elegant solution to this, I'd be very grateful.
Thanks for you help!
I understand your question, but there are two few things that we cannot break from.
Your images might be loaded dynamically
Tool-tip areas can be points, boxes, or basically ANY shape (a set of coordinates that binds a region)
Because of #2, it's impossible but to use an image map. If, however, your tool-tip areas are restricted to points and boxes, then you can make do without creating an image map. This doesn't mean that the image source doesn't have to provide any information because that doesn't make sense, it just means that the source can provide a generic JSON object that talks about the image. Once the image reaches client side, you can call a function that you wrote to create an invisible div on top of your image and based on the data you've received, create small div regions that have mouseenter() bound to them. Even with this, it's not FAR from an image map.
I guess the point I'm trying to make is that you are not getting away from having to attach data to your image AND do some processing of that data once it reaches client side. This is because you're working with such an unrestricted environment of an image that can take on any shape with your regions taking on any shape.
I'm not sure if this answers your question in any way, but usually elegance comes from taking advantage of restrictions, which in this case there is practically nothing we can work with.
I'm looking to create a web based "bulletin board" so to speak, where the user can create/delete/drag/drop 'pins'--without being allowed to overlap 'pins.'
Here is a diagram that should help illustrate what I'm trying to create:
'pins' are created, probably upon
double click; they will prompt the user for a label.
'pins' cannot overlap;
(the final shape will be larger, more
oval like.)
'pins' will need to be able to "connect" with other 'pins' with a visual element (i.e. dotted line,) but not all pins will be "connected."
I found GameQuery which allegedly supports bounding box collisions--but it's beyond important that the collisions be detected with ovals, not boxes (I know the above example might suggest otherwise, but that's just a diagram... not a mock up of the intended final design.)
The 'pins' may also vary in size/shape, depending on label size... this should be taken into account as well I imagine, to ensure an approach conducive to all the UX variables.
I've found Quadtree and Collision Detection along with this GameQuery collision demo, but it all sort of looks a little like gibberish. I'm looking to be pointed in the right direction, just so I know that what method I invest my time into, will work for my desired result... rather than busting my balls figuring out Quadtree and GameQuery for example, just to find it they won't work for this project.
...
Also, if any experienced developers are willing to be a mentor for me on this project--I am prepared to offer my extremely refined design experience, for a few "I need help" questions along the way.
How do I adopt an n-sided polygon into the pre-existing bounding box functionality of GameQuery? It doesn't need to be a perfect circle, but at least 8-sided.
I don't think that your problem is really one that relates to jQuery or even Javascript at all. Your problem is, how do I detect when an ellipse overlaps (or does not overlap) another ellipse? It's a math problem, and it's one that has already been asked here.
Be warned that this strikes me as a pretty difficult problem for someone who is new to programming. I'm not at all new to programming and I would see this as challenging, particularly with your other requirements - drag and drop, and so on. You've taken on a pretty advanced problem, and at this point, anything you can do to simplify (such as using bounding boxes) is something I would strongly recommend doing.