Create a gauge using jsgauge - javascript

I have created a gauge using jsgauge plugin
What I am not able to do is to control the speed of the needle. It should move to the assigned value a bit slower than the default speed. The needle should also start from 0.
The fiddle for this is http://jsfiddle.net/aryan7987/h45Tr/2/
Query(document).ready(function(){
jQuery("#example")
.gauge({
min: 0,
max: 100,
label: 'EMPLOYEE',
startangle: 0,
bands: [{color: "#ff0000", from: 90, to: 100}]
})
.gauge('setValue', 59);
});

One of solutions is to use setInterval function and increase gauge value step by step with needed delay like this:
jQuery(document).ready(function(){
var g = jQuery("#example")
.gauge({
min: 0,
max: 100,
label: 'RPM',
bands: [{color: "#ff0000", from: 90, to: 100}]
});
var m = 0;
var timer = window.setInterval(function()
{
m++;
g.gauge('setValue', m);
if (m==58)
{
clearInterval(timer);
}
}, 200);
});
The code is quite dirty but you should get a point. Also here working fiddle.

Unfortunately it looks like the speed is hardcoded by defining the delta for each frame. Here is an monkey patched version to change the speed see this jsfiddle
The problem line is:
increment = Math.max(Math.abs( that.settings.pointerValue - pointerValue ) / 8, 3);

Related

leaflet - need to draw range radius semi circles

i need to draw a graph of semi circle on a leaflet map.
It should look like the following image:
How can i do it?
Thanks
Efrat
Have you seen leaflet-semicircle? Not exactly what you need, but might give you enough clues to implement what you want.
Did a quick example (demo here):
function rangerings (latlng, options) {
options = L.extend({
count: 8,
interval: 1000,
direction: 0,
spread: 120
}, options);
var layer = L.featureGroup();
for (var i = 1; i <= options.count; i++) {
L.semiCircle(latlng, {
radius: i * options.interval,
fill: false,
color: '#000',
weight: 1
}).setDirection(options.direction, options.spread).addTo(layer);
}
return layer;
}
code on github

Animation chart js (line), animate chart drawing line by line

Is there a way to extend the current chart.js so that the animation drawing doesn't animate the whole chart, but drawing the chart line by line with animation (ease) ?
You can use the onAnimationComplete callback to change the data and call update()
...
data: [0, 0, 0, 0, 0, 0, 0]
}
]
};
var data2 = [28, 48, 40, 19, 86, 27, 90];
var done = false;
var myLineChart = new Chart(ctx).Line(data, {
animationEasing: 'linear',
onAnimationComplete: function () {
if (!done) {
myLineChart.datasets[1].points.forEach(function (point, i) {
point.value = data2[i];
});
myLineChart.update();
done = true;
}
}
});
It works better with linear easing (otherwise it seems like 2 distinct animations), but if you wanted to, you could write your own easing function to do easeOutQuart in 2 blocks.
Fiddle - http://jsfiddle.net/rnyekq1y/
Nevermind.I've implement it by extending chart.js and override draw() function so that I can animate the line from one dot/point to another until the last dot / point.

Proper use of Physics.aabb.union()

I'm learning PhysicsJS, and I tried using union like so:
// Window bounds
var rect1 = Physics.aabb(0, 100, 300, 200);
var rect2 = Physics.aabb(100, 0, 200, 300);
var viewportBounds = Physics.aabb.union(rect1, rect2);
// Constrain bodies to these bounds
world.add(Physics.behavior('edge-collision-detection', {
aabb: viewportBounds,
restitution: 0.99,
cof: 0.99
}));
but the ball just falls through the bottom.
Physics(function(world){
var viewWidth = 300;
var viewHeight = 300;
var renderer = Physics.renderer('canvas', {
el: 'viewport',
width: viewWidth,
height: viewHeight,
meta: false
});
// add the renderer
world.add(renderer);
// render on each step
world.subscribe('step', function(){
world.render();
});
// Window bounds
var rect1 = Physics.aabb(0, 100, 300, 200);
var rect2 = Physics.aabb(100, 0, 200, 300);
var viewportBounds = Physics.aabb.union(rect1, rect2);
// Constrain bodies to these bounds
world.add(Physics.behavior('edge-collision-detection', {
aabb: viewportBounds,
restitution: 0.99,
cof: 0.99
}));
// Add the ball
world.add(
Physics.body('circle', {
x: 0, // x-coordinate
y: 0, // y-coordinate
vx: 0.2, // x-velocity
vy: 0.01, // y-velocity
radius: 2.0
})
);
// ensure objects bounce when edge collision is detected
world.add( Physics.behavior('body-impulse-response') );
// add some gravity
world.add( Physics.behavior('constant-acceleration') );
// subscribe to ticker to advance the simulation
Physics.util.ticker.subscribe(function( time, dt ){
world.step( time );
});
// start the ticker
Physics.util.ticker.start();
});
body {
/*background: #121212;*/
}
.pjs-meta {
display: none;
}
#viewport {
border: 1px solid #666;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src='http://wellcaffeinated.net/PhysicsJS/assets/scripts/vendor/physicsjs-0.5.0/physicsjs-full-0.5.0.min.js'></script>
<canvas id="viewport" width="300" height="300"></canvas>
I can't find any code on GitHub or anywhere using it. Can someone lend some guidance, please?
I can't find any code on GitHub or anywhere using it. Can someone lend some guidance, please?
You might try reading the unit tests in the .spec, on Github.
Sample test, which should look very readable even if barely know Javascript:
it("should initialize provided a width/height and point", function() {
var aabb = Physics.aabb( 4, 5, { x: 20, y: 9 } );
matches( aabb, { x: 20, y: 9, hw: 2, hh: 2.5 });
});
spec.js looks to be the test code. Test actually doubles as documentation, and libraries like spec serve to make test code read like documentation. Additionally, test code is, of course, a collection of examples of how to use the code. Enjoy.
Try reading other test code.
Figured it out. I was working with a super old version (physicsjs-0.5.0). I linked to the latest version (physicsjs-0.7.0), which has much more functionality (4,088 new lines of code between those two versions). I had to refactor my code a bit to match the updated spec, but it's all good!

Dojo Gauges - can I restrict the settable values?

I have an interactive dojox gauge with a range from 0 - 100. But I only want my users to be able to move the needle to 0, 25, 50, 75 and 100. Is that possible?
// create the gauge
var gauge = new dojox.gauges.GlossyCircularGauge({
background : [255, 255, 255, 0],
color : color,
id : "gauge_" + item,
width : 150,
height : 150,
value : itemProgress,
noChange : Login.isLoggedIn(),
majorTicksInterval : 25
}, dojo.byId("gaugeDiv_" + item));
gauge.startup();
Cheers,
JP
Have a look at my fiddle: http://jsfiddle.net/v7WwD/1/
require(["dojox/dgauges/components/grey/CircularLinearGauge"],
function (CircularLinearGauge) {
var myGauge = new CircularLinearGauge({
value: 20,
minimum: 0,
maximum: 150,
majorTickInterval: 25,
minorTickIntervall: 5,
indicatorColor: "#000080", //Zeiger
fillColor: "#FFFFFF"
}, dojo.byId("gauge"));
myGauge.startup();
});
//more code in the fiddle
//......
I have created a CircularLinearGauge programatically.
Regards
First I would consider using dojox/dgauges (http://dojotoolkit.org/reference-guide/1.9/dojox/dgauges.html) instead of dojox/gauges. These are the only well maintained gauges in the toolkit as of today. Second with dojox/dgauges you can set the snapInterval of your LinearScaler to 25 and you should get the expected behavior.

How do I get the current rotation angle with jCanvas animation?

I can't figure out how to get the current rotation angle of an arch in jCanvas. layer.rotate only seems to provide me with the original setting of rotate, when I'd really like to change its behavior when it hits a certain angle.
I have an example setup on jsfiddle to demonstrate the problem.
Any insight would be appreciated.
are you looking for this value $('#rot').val()
while (i < 1000) {
setTimeout(function() { rotate() }, 1000);
alert( $('#rot').val());
i += 1;
}
The animateLayer() and animateLayerGroup() methods support the same alternate syntax as jQuery's animate() method, which allows for a step callback:
// Cache canvas element
var $canvas = $("canvas");
// Draw and animate
$canvas.drawArc({
layer: true,
name: 'arcy',
fillStyle: "#000",
x: 100, y: 100,
radius: 50,
start: 135, end: 45
});
$canvas.animateLayer('arcy', {
rotate: 360
}, {
// Use the step callback to run a function on every frame
step: function(now, fx, layer) {
console.log(layer.rotate);
}
});

Categories

Resources