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!
Related
I am considering drawing a network.
For example, as shown in the demo, we can use the dashboard to get the chart, but there is no "save button" on the right side, as is often the case.
cux_df = cuxfilter.DataFrame.load_graph((nodes, edges))
chart0 = cuxfilter.charts.dashader.graph(node_pixel_shade_type='linear', unselected_alpha=0.2)
d = cux_df.dashboard([chart0], layout=cuxfilter.layouts.double_feature)
chart0.view()
Since we are using large data, we would like to take advantage of cuxfilter's quick drawings. If holoviews, for example, it takes too long to compute. Screen captures, etc. are possible, but is there any way to save the resulting figure?
Drawing with datashader took too long. I could create a view screen with cuxfilter.
The only way right now is to use the dashboard preview() function, which screen captures the dashboard in it's initial state and saves it as a png file. The way to do that is as follows:
cux_df = cuxfilter.DataFrame.load_graph((nodes, edges))
chart0 = cuxfilter.charts.dashader.graph(node_pixel_shade_type='linear', unselected_alpha=0.2)
d = cux_df.dashboard([chart0], layout=cuxfilter.layouts.double_feature)
await d.preview()
This would only work in a jupyter lab/notebook environment though, and is restrictive in capturing current state.
Based on your suggestion, it was as easy as adding an extra tool to the chart using bokeh, so we ended up adding it as a new feature, for all the bokeh and datashader based charts, the progress can be tracked here. To try it out once the changes are merged, you would have to install the cuxfilter nightly version (23.02). Once the changes are merged, this is how the toolbar would look:
In Three.js, Calling action.play() makes objects just vanish, without any error or warning on the console.
I use THREE.ObjectLoader to load a JSON file created in blender. The srt (position/scale/quaternion) animation is in the generated file. As are the morphtargets. To optimise filesize I animated the srt as a series of null objects. The morphtargets tracks are in the main object, which I clone 5 times to build the characters (balloons to be exact).
I previously did extensive testing to introduce shape/morph animation. After being succesfull I finalised all the animations. Only to be trumped by the disappearing models. The srt (position/scale/quaternion) animation was working fine before. But after refactoring the code, to be less spagettied, upon calling action.play(). The objects just vanish, exactly then. Echoeing the mixers and the array containing the clips, everything looks correct (ie I see the tracks, the names are right etc). Also examining the newly generated JSON, it seems the same and correct (also I have not changed the SRT animations, only introduced shapeanimation)
So I am lost, and think this looks more and more like a bug. From previous experience I do know it works (or has worked).
I created a jsfiddle: https://jsfiddle.net/oompol/3ya6sqed/
[edit] I turned on the action.play and call the function from the link in the div [/edit] please note I commented out calling action.play(). So you see the load and init work. See the function listed below
function playScene(scene) {
for (parentName in srtMixers) {
var clpName = "balloon1_fly";
var clp = THREE.AnimationClip.findByName(animLib, clpName);
var action = srtMixers[parentName].clipAction(clp);
action.clampWhenFinished = true;
console.log("playScene:", clpName, clp, parentName, srtMixers);
//this is when the problem happens
action.play();
}
}
This is the JSON I am loading:
https://rawgit.com/bakajin/2e3d2f6a722103ed4aefd76f6250ec08/raw/28cad35c20060d478499c0cd40a2753611993720/oomp-scene_balloons-oomp-6.9.4.json
Ok,
there was something very wrong with the scaling indeed.
The io_three JSON exporter for Blender (r87 dev) writes incorrect matrix transformation data in the geometry object (really tiny scaling values). The animation track with the scaling keys were correctly written as 1,1,1. So all the objects just scaled out of view immediately.
Hard to see because the geometry has no separate scaling value but a matrix. Seems to happen when you set "Scene" to true on export.
Worked around the problem by entering the scaling value in the keyframe tracks. But this will only work if you have no scaling animation (so the keys are all one).
Meanwhile I have extensively edited the JSON by hand. Because this is not the only incorrect data. The formatting of the animation object is also wrong. The durations for the morphTargetInfluence Keys is also incorrect. The formatting of these keys is also not always correct.
Hope this helps some other ppl
I have a map of the US with markers for stores in each state and currently when you hover over each marker, the name and address of that store shows up. I used a json file (us.json) to get the states coordinates and boundaries. The second json file (newstorelocations.json) contains information about each store and it's location which I used to display the markers. I used a tooltip for this.
What I currently have is at:
http://bl.ocks.org/binishbaig/3969ec74b485d1021034
gist:
https://gist.github.com/binishbaig/3969ec74b485d1021034
I have a third json file (newstorespend.json) that contains products and amount spent for each store. The variable StoreDescription exists in both the second and third json file. Any clue how can I make a simple vertical bar chart displaying amount and product for each store location when you hover over each marker? I am totally new to d3.js so I am guessing I would have to write a separate function creating the chart in a separate file, and then pass it into that variable d in the mouseover function but that's purely a guess. I did make a bar chart out of the data from the third file but how do I make individual bar charts for each store and show it when the mouse hovers over the corresponding store marker.
I would appreciate any help. Thanks in advance!
There's basically no difference between adding a chart to a tooltip vs doing it normally, you'll just need to grab the data and filter it so that it only applies to the data point that you're hovering over and then create/update the chart based on that data at the correct DOM element.
I've forked your gist and done just that. I just used the data that you had for Anchorage in your newstorespend.json file in your gist. Hover over the data point for the store in Anchorage to see what shows up.
You can take a look at http://bl.ocks.org/benlyall/37e757a1e6922dccb077
The onHover and offHover functions do all the work that you're probably interested in.
Note: this is only one way to do it, and possibly not even the best.
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.
I am following this example of a difference chart. I've added buttons on my page that make ajax calls to fetch new datasets, and then I redraw the difference charts. There are several difference charts on my page.
Upon redrawing, the rendering of the above/below areas becomes corrupted: x-values have both above and below areas rendered. I'm fairly certain it's not a back-end problem, because the initial load produces a correct chart; changing a parameter messes up the redrawn chart; and going back to the default parameters and redrawing the original chart also produces a corrupted chart. In fact, I can partially make out what's happening: the original time series is present on the new graph. It's almost as if there are three series being graphed.
I think it has to do with .datum. I don't fully understand how it works, since it differs from the standard enter/update/exit methods associated with .data. I've read the documentation, but am still confused. Some possibilities:
The original data is hanging around (even though I clean out the container with $('#chart').html(''))
The .append(g) is adding groups without removing the earlier ones.
The svg.append("clipPath").attr("id", "clip-below") is causing problems, since multiple nodes have the same id (even though again, I'm not sure how this could happen since I remove the nodes before the redraw).
I feel like I'm missing a lot of fundamentals here, even though I've spent a decent amount of time trying to understand the library. Can anyone see anything obvious, or point out some good resources for me to look at?
UPDATE: This has to do with there being two charts on the page. I noticed this when I opened the inspector and closed it. The areas of the bottom chart (the difference chart) had screwed up, and I noticed the new line that it was using to separate the above-area from the below-area looked a lot like one of the lines from the top chart.
Does anybody have experience with dependency issues/namespace collisions when drawing two charts on the same page?
The problem was, the id's for the clipping paths were the same.
I would still like some more resources concerning .datum.