How to setup interactive and non-interactive objects in PhysicsJS? - javascript

I am trying to setup a seesaw with userdragable objects. After world creation in PhysicsJS, mouse drag interaction is added by
world.add( Physics.behavior('interactive', { el: renderer.el }) );
which works fine. Subsequently, I want some added objects to be draggable (the box objects). But the lever should not be draggable, but it should interact with the boxes. So the lever should rotate according to a replaced box. The fulcurm is placed in a noninteractive way by setting its treatment property to static:
world.add( Physics.body('convex-polygon', {
name: 'fulcrum',
x: 250,
y: 490,
treatment: 'static',
restitution: 0.0,
vertices: [
{x: 0, y: 0},
{x: 30, y: -40},
{x: 60, y: 0},
]
}) );
How can objects be interacting with each other, but only some are userdragable?
A fiddle is available at: http://jsfiddle.net/YM8K8/

At the moment this is not supported... but it should be. I've added it as a bug on github. https://github.com/wellcaffeinated/PhysicsJS/issues/101
In the meantime, if you want, you can create a new "interactive" behavior by copying and pasting and just change the name.
Physics.behavior('interactive-custom', function( parent ){ ...
Then in the grab function just make this small addition:
body = self._world.findOne({ $at: new Physics.vector( pos.x, pos.y ) });
Change to:
body = self._world.findOne({ $at: new Physics.vector( pos.x, pos.y ), $in: self.getTargets() });
What that does is when it's searching for the body at the mouse coordinates, it will also check to see if that body is in the set that you've applied this behavior to.
Then instead of adding the behavior before the bodies in your fiddle, add it at the end, and do this:
world.add(
Physics.behavior('interactive-custom', { el: renderer.el })
.applyTo(world.find({ name: 'box' }))
);
This will use world.find to find the bodies currently in the world that have the "box" name. Then it sends that array of bodies to the behavior and tells the behavior to only apply itself to those bodies.
Here's the modified fiddle:
http://jsfiddle.net/wellcaffeinated/YM8K8/1/

Related

Jquery animation for exchanging the position of two elements

I have two elements whose position and size I am trying to exchange on click of the second element only
<div id="card-1" class="1">
Some Content for 1
</div>
<div id="card-2" class="2">
Some Content for 2
</div>
using jquery path js
$(document).on('click', '.2', function(){
var path_1 = {
start: {
x: 0,
y: 0,
angle: -120
},
end: {
x:0,
y:360,
angle: -120,
length: 0.25
}
}
var path_2 = {
start: {
x: 0,
y: 0,
angle: -180
},
end: {
x:0,
y:-360,
angle: -60,
length: 0.25
}
}
$(".1").animate({
width: "-=50%",
path : new $.path.bezier(path_1)
}, 2500);
$(".2").animate({
width: "+=100%",
path : new $.path.bezier(path_2)
}, 2500);
var x = $('.2').attr('id');
var y = $('.1').attr('id');
$('#'+ x +',#'+ y +'').toggleClass('2 1');
});
Then I exchange the classes as you can see in the last 3 lines of code to get the same effect.
The first time when i click on #card-2 (class 2), the position and size gets exchanged, and also the classes are toggled for the divs but, the when I click on #card-1 (class 2), I do not get the same effect. How do get the same effect again?
This is how my page looks at first
I want #div1 to shrink and go to where #div2 is currently and #div2 to grow and reach where #div1 is currently on click of #div2. Something like this
This is happening. but thin I want the divs to get back to their original position on click of #div1. Something like this.
But this is not happening.
I have used classes for the animation and so after first step, I am exchanging the classes. But instead I am getting this type of result

Handling screen resolution changes for QML Animations

I am a creating a fully scalable application on QML, what I need to know is how do I handle screen changes, for example this elements animation works for 1920x1080:
EventLog{
id: eventlog
x: 0
y: 1000
z: 10
NumberAnimation{id: showeventPanel; target: eventlog; properties: "y"; to: 710; duration: 500}
}
But I cannot anchor this element otherwise the animation will not take place, so for other resolutions this element will not be correctly placed, I realise that I can set the the anchor to anchors: undefined but how can I accurately set the x and y to move too the correct position on the screen?
The solution I found, though not elegant, works to a certain degree. I anchored the element as so and set it to a dummy rect(centreRect) that I anchored to the correct x and y position:
CameraControlPanel{
id: control_Panel
// x: 1916
// y: 270
anchors {
verticalCenter: parent.verticalCenter
right: parent.right
}
anchors.rightMargin: -635
NumberAnimation{id: showPanel; target: control_Panel; properties: "x"; to: centreRect.x; duration: 500}
z: 10
}
Then when I needed to start the 'showPanel' animation I set the the anchors to undefined as so:
control_Panel.anchors.verticalCenter = undefined
control_Panel.anchors.right = undefined
When I needed to return the element to the correct position, I reset the anchors that were there previously.

d3.js find the path of a given object

I'm looking to see if there's a utility way to take a given svg element and find the corresponding path. The intent is to be able to trace an outline of the object similar to http://jsfiddle.net/Lqmzztw1/. I'd like to use a technique illustrated http://bl.ocks.org/duopixel/4063326 here since it seems to be close to what I want. I'm looking for this to be able to trace the outline of any polygon/shape/circle, etc. Is there a way to convert a given SVG element to its corresponding path in d3?
fiddle code
var svg = d3.selectAll('div').append('svg').attr({
height:500,
width: 500
});
var box = svg.append('rect').attr({
x: 20,
y: 20,
height:50,
width:50,
fill: 'blue'
});
box.on('click',function(){
var cornerBox = svg.append('rect').attr({
x:15,
y:15,
width:10,
height:10,
fill:'orange'
});
cornerBox.transition().attr({
x: 50+15
}).duration(150).transition().attr({
y: 50+15
}).transition().attr({
x:15
}).duration(150).transition().attr({
y:15
}).duration(150);
});

make background image to link

i am using this jquery iviewer
i want to link these image thumble to another link.
can i use image map for this or any other way to make image thumble to link. these are really add with full image.
you can add this in between your script tag:
var objects = [{x: 0, y: 800, r: 800, isInObject: isInCircle, title: 'whole image', getCenter: getRectCenter }]
note: set y and r to cover your image.
And this when you set defaults for iviewer:
onClick: function(coords) {
var object = whereIam(coords.x, coords.y);
if (object)
window.location="cart.html";
}
whereIam is a default function available with iviewer.

Issues with dojox.charting and xDomain reference to dojo/dojox library

I have a web HTML page with some client-side JS codes based on dojox.charting. I don't have dojo library in my local web site (actually no web server). I use dojos' xDomain reference feature with src to google's hosting site like this:
<head>
...
<script type="text/javascript"
djConfig1="isDebug:true"
src="http://ajax.googleapis.com/ajax/libs/dojo/1.2.0/dojo/dojo.xd.js">
</script>
<script type="text/javascript"
dojo.require("dojox.gfx");
dojo.require("dojox.gfx.move");
dojo.require("dojo.html");
dojo.require("dojox.charting.Chart2D");
dojo.require("dojox.charting.themes.PlotKit.green");
dojo.require("dojox.charting.action2d.Highlight");
dojo.require("dojox.charting.action2d.Magnify");
dojo.require("dojox.charting.action2d.MoveSlice");
dojo.require("dojox.charting.action2d.Shake");
dojo.require("dojox.charting.action2d.Tooltip");
dojo.require("dojox.charting.themes.MiamiNice");
dojo.require("dojox.charting.widget.Legend");
</script>
....
</head>
Here is the function to create curve chart, based on the codes in Dojo: Now With Drawing Tools.
function drawCurve(nodeChart, nodeLegend) {
var chart1 = new dc.Chart2D(nodeChart)
.setTheme(dc.themes.PlotKit.green)
.addPlot("default", {
type: "Default",
lines: true,
markers: true,
tension: 2
})
.addAxis("x", {
min: 0,
max: 6,
majorTick: { stroke: "black", length: 3 },
minorTick: { stroke: "gray", length: 3 }
})
.addAxis("y", {
vertical: true,
min: 0,
max: 10,
fixLower: "major",
fixUpper: "major",
majorTick: { stroke: "black", length: 3 },
minorTick: { stroke: "gray", length: 3 }
})
.addSeries("Series A", [
{ x: 0.5, y: 5 },
{ x: 1.5, y: 1.5 },
{ x: 2, y: 9 },
{ x: 5, y: 0.3 }
])
.addSeries("Series B", [
{ x: 0.3, y: 8 },
{ x: 4, y: 6, tooltip: "Custom tooltip"},
{ x: 5.5, y: 2 }
]);
var series = chart1.series;
var anim_a = new dc.action2d.Tooltip(chart1, "default");
var anim_c = new dc.action2d.Magnify(chart1, "default"); // not working
chart1.render();
var legendChart = new dc.widget.Legend(
{chart: chart1, horizontal: false}, nodeLegend.id);
}
My first question is that for the curve chart, the numbers along the y axis only displays 0 and 10. All the middle numbers 1 to 9 are not displayed. The values for x axis from 1 to 6 are visible. The original chart snapshot in the article does show y axis values as well, but the one on DojoToolKit Demos does show values along y axis. I am not sure what I missed in my codes. How can I enable displaying y axis values?
The next question is about the Magnify(). The DojoToolKit demo site's curve chart works fine but my chart's magnify feature does not work. I think this may be caused by xDomain reference. I may need to specify some specified js file from xDomain's dojox library. I am not sure which one I have to specify.
One thing I noticed is that my FireBug displays following errors after curve chart is drawn:
_4.fx.combine is not a function http://ajax.googleapis.com/ajax/libs/dojo/1.2.0/dojox/charting/action2d/Magnify.xd.js Line 8
_11.action is undefined http://ajax.googleapis.com/ajax/libs/dojo/1.2.0/dojox/charting/action2d/Magnify.xd.js Line 8
I think those undefined errors may indicate I miss loading some dojox library files in my head section.
By the way, I dont' have a web server and I prefer to use dojo's xDomain reference option. In this way, I can edit a html file in any place and send it to other people. No need to download and install dojo source library.
I think I got the missing part:
dojo.require("dojo.fx");
When I added this line to my HTML's head setction see above, the animation part set by Mangify() is working. This is only for the case you set xDomain reference to dojox for dojox.charting library.
What I found this is by using Firebug to look at DojoToolKit's Event 2D web page. In the head section there is code:
<script src="http://../action2/Magnify.js" type="text/javascript"></script>
That page has debug enabled. As a result, in FireBug window, you will see the source codes of js in a nice layout. I saw three requirements, and one is for "dojo.fx". I tried to add this one in. Then no more errors and I can see animation of magnify effect when I move mouse over points in the curve of the chart.
One thing interesting about <script src=".."> is that if the js is xDomain referenced, the js source codes are displayed partially in one long long time. If you hav the dojo library installed on your web page, ie same domain, the dojo's source codes are displayed nicely.
Regarding the y axis values, I also find out easy way to display them (0 to 9):
.addAxis("y", {
vertical: true,
//min: 0
//max: 10
....
You can also comment out min only and leave max with 10 (0, 1, ... to 10). See DojoCampus.org for more detail information about axis settings.

Categories