I've never used jsplumb before and I have read some of the documentation and looked at the demos, but I still don't understand..
I want to create a DIV like this :
One Input and upto 8 outputs (this value may change)
How do I do this ?
I will be looking at cloning this div and incrementing the divs ID, so I could end up with two or more divs that need to be able to join like this.
Can anyone help with this or point me to some simple examples..
Thanks
You need to add the bigger div as a target endpoint and the smaller div's as source end point.
var e1 = jsPlumb.addEndpoint(idSource, sourceEndpoint);
var e2 = jsPlumb.addEndpoint(idTarget, targetEndpoint);
where sourceEndpoint and targetEndpoints are objects with definitions for how the endpoint will look and behave .
Have a look at one of the examples to get the behaviour you desire.
jsPlumb should then allow you to drag and drop connections from source to targets.
The state machine demo does almost the same thing as what you need.
http://www.jsplumb.org/demo/flowchart/dom.html
Related
I have created elements with outPorts in bottom or top part. My requirement is to create an element which have outPorts in top and bottom parts.
Is it possible?
Since JointJS v1.0 there are many pre-defined port layouts. Including Bottom/top positions. It comes also with a new port API where ports can be added to any shape easily (joint.shapes.devs.Model is not needed anymore).
demo:
http://resources.jointjs.com/docs/jointjs/v1.0/demo/layout/Port/port.html
doc:
http://resources.jointjs.com/docs/jointjs/v1.0/joint.html#layout.Port
So I have another issue with Fabric.js that's once again probably down to my own ignorance.
Imagine using free draw to scribble some line paths on to a canvas. When finished, we disable free draw and at this point I want to take all the objects drawn and group them in to a single entity.
I've created a fiddle here that shows the grouping stage.
var grp=new fabric.Group();
canvas.getObjects().map(function(o){
if(o.type=="path"){
o.hasControls=o.hasBorders=false;
grp.addWithUpdate(o);
//canvas.clear(); // this seems to break grouping
}
});
canvas.add(grp);
canvas._activeObject = null;
canvas.setActiveGroup(grp.setCoords()).renderAll();
This appears to work well enough (even if the paths themselves appear to darken once the group has been created).
I now want to export this to JSON, save at a DB, and in the future reload and replicate the whole layout.
In the fiddle above I reproduce this sort of behaviour by first saving the canvas to JSON after the group has been created, and then attempt to reload it.
As you'll see, the reload itself works fine and the positioning is good but the item that was previously grouped has been loaded in to it's constituent parts, rather than being maintained as a group.
Am I doing something dumb here?
Thanks for any help!
I've created a matrix chart using D3.js and I'm having a bit of difficulty creating a sort of grouped "axis" (although I'm not sure I can call it an axis?).
This JS Bin shows the current route I've chosen. Essentially what I've done is to create 3 separate lines to create the "axis". Ideally I would like to use the d3.axis object but I'm not sure how I would go about achieving this.
Although this current method does work it feels dirty - I also have concerns about scaling. Does anyone have a better suggestion of how to approach this?
The end result is something along these lines (notice labels below lines):
you can use
.scale(x).tickValues(xVals)
where xVals are the array of values
Here may be this demo will help you
okay so i have basic skills in html, css, javascript.
im still in the learning phases but just need a little help on where to go in regards to creating a web app.
i can figure out all the code, so thats fine, i just need some pointers as to what to use where.
So basically ill have a webpage with a few simple buttons, when clicked they'll send a message to the server and the server will hold a count for each button clicked using a php script.
1) - would it be best to hold that information in a JSON file?
then from there, there'll be another webpage which will have div tags stretching 100% across the page, with an element inside it which will move across the page according to the count held on the server.
2) - what should i use to animate it moving?. would i use javascript? or css3 or something?
the front end will need to continuously update on the count held by the server.
3) - would AJAX methods be best using javascript?
any advice would be great thanks.
And one last thing.
With Javascript animating, if i wanted to animate a div moving horizontal, is the best way to do it by animating the margin size? or am i stuck in the dark days..
1: i would store it in a database, if you store it in a file make sure that you are handling writes in a safe way(multiple writes to the same file)
2:you could use javascript to animate the css properties of a html element(preferable the width)
3: Ajax would work but then you need to continuously poll the server for changes alternativly use longpoling http://en.wikipedia.org/wiki/Push_technology#Long_polling
an alternative if you only support modern browsers and your hosting company allows it is to use websockets
If you're trying to save information server side (which you seem to be), I would recommend using a database (such as MySQL).
If your animation is dependent on the value from the server, I would use javascript to animate it. Note that you will have to poll the server in order to actually get this information (lets say, every second). When you get the information, simply update the div you want to animate with the new information. I don't quite understand what you want your display to look like, so I can't really give you anything more specific here.
Yes. I would recommend using jQuery to handle your AJAX calls as it makes it much easier and deals with cross-browser weird-ities.
To your update:
One option could definately be to adjust the (left) margin size, but you could also use the relative position. It will basically push the element however many pixels in whatever position from where it would typically be displayed. So if your box is by default right along the left border, you could relatively position it 100px to the right. You can read more about position here.
creating simple charts with BIRT is easy, but now I would like to bring some more life to them...
imagine a simple line chart. Let's define as a requirement, that the maximum value should be highlighted. A further requirement would be that if the user clicks on this data point, something happens.
How can I solve this?
I can imagine that I could created a second value series which consists only of the highlighted data points.
But it would be nicer if there was a JavaScript API (or even a server side java api) with which I could loop through the data points and add a highlight on the fly. Is this possible?
I think I've found a good starting point:
http://www.birt-exchange.org/org/devshare/designing-birt-reports/276-birt-chart-scripting-dynamic-markers-and-datapoint-colors/
Now I have to find a way to add on click events to certain data points...