My graph zoomed great until I changed the xaxis to mode: "time". Now I can't zoom. The graph renders and looks good, but does not zoom. Does FLOT support zooming for time based graphs?
Thanks
$(function () {
var line1_data = [[1309507200000,82], [1310112000000,76], [1310976000000,71], [1311235200000,76], [1311753600000,82]];
var line2_data = [[1309507200000,60], [1310112000000,40], [1311235200000,60], [1311753600000,80], [1318233600000,60]];
var data = [line1_data, line2_data];
var placeholder2 = $("#placeholder2");
var options = {
series: { lines: { show: true }, shadowSize: 0 },
xaxis: { mode: "time", zoomRange: [0.1, 10] },
yaxis: { zoomRange: [0.1, 10] },
zoom: { interactive: true }
};
var plot = $.plot(placeholder2, data, options);
});
I'm not sure, but i think it might be somehow related to your zoomRange
"zoomRange" is the interval in which zooming can happen, e.g. with
zoomRange: [1, 100] the zoom will never scale the axis so that the
difference between min and max is smaller than 1 or larger than 100.
You can set either of them to null to ignore.
and in your data you need pick really tiny bit of your chart to have difference less than 10
but as i said, i might be wrong i never done time based graphs
Related
I am new in Phaser.
I want to make a background which represent the ground moving and there should be a bunch of rocks above it which I made them as a sprite group.
I made the ground as a tileSprite, and on each update I changed the tilePositionX. my problem is how to set the velocity of the rocks to match the update in the background so they appear to be on the ground and moving at the same speed of the ground.
theoretically you could measure the passed time, from the last update function call, and calculate the difference, or just eye-ball the needed velocity. (aka. try different velocities until it matches up with the background-movement):
Update:
If no physics object is needed you could move the "rock" "manually", this is very easy.
Here a quick demo, that I eye-balled:
The red mushroom, uses physics and velocity. Warning: the speed of the object can/will vary depending on the browser and hardware.
Update: The green mushroom, is moved manually via the position.
// Minor formating for stackoverflow
document.body.style = "display: flex;flex-direction: column;";
var config = {
type: Phaser.AUTO,
width: 536,
height: 150,
physics:{
default: 'arcade',
arcade: { debug: true }
},
scene: {
preload,
create,
update
}
};
var tilesprite;
var redRock;
var greenRock;
function preload ()
{
this.load.image('mushroom', 'https://labs.phaser.io/assets/sprites/mushroom16x16.png');
}
function create ()
{
tilesprite = this.add.tileSprite(400, 300, 800, 600, 'mushroom');
redRock = this.add.image(400, 40, 'mushroom').setScale(2);
redRock.setTint(0xff0000);
this.physics.add.existing(redRock);
redRock.body.setVelocityX(-60)
greenRock = this.add.image(400, 90, 'mushroom').setScale(2);
greenRock.setTint(0x00ff00);
}
function update (time, delta){
tilesprite.tilePositionX += 1;
let speedCorrection = (1000/60)/delta;
redRock.body.setVelocityX(-60 * speedCorrection )
greenRock.x -= 1;
// extra "reset" Rock
if( redRock.x + 16 < 0 ){
redRock.x = this.sys.game.canvas.width + 16;
greenRock.x = this.sys.game.canvas.width + 16;
}
}
var game = new Phaser.Game(config);
<script src="//cdn.jsdelivr.net/npm/phaser#3.55.2/dist/phaser.min.js">
</script>
Disclaimer: It is not the most elegant solution, but it took me literally 30 Seconds to find a matching velocity.
Minor Update:
I improved the eye-ball-method with a speed correction, it can cause minor flickering/slipping(max 1-2 pixel skips), but should move constant on "all" device.
The change is just adding a small calculation let speedCorrection = (1000/60)/delta;
I am using Chart.js to map an aircraft's vertical approach path:
The code to get the actual approach path is relatively straightforward:
var position_reports = [
{
altitude: 4606
heading: 42.94507920742035
latitude: 35.16972222222222
longitude: -101.75638888888889
speed: 133
vertical_speed: -714},
},
// additional position reports redacted for clarity
];
var data = [];
for(var x = 0; x < position_reports.length; x++) {
data.push(position_reports[x].altitude);
}
// at this point, data looks like this: [4606, 4605, 4604, 4603, 4603, 4602, etc....]
new Chart(ctx, {
type: 'line',
data: {
labels: labels,
datasets: [
{
label: 'Actual Altitude',
borderColor: '#ff6600',
data: data,
borderWidth: 5,
fill: false,
}
]
},
// additional options redacted for clarity
});
This above aircraft's glidepath (mostly) follows a standard 3-degree descent path. I would like to draw a fixed 4-degree and 2-degree line so I can make sure the aircraft's actual vertical path falls between 4 and 2 degrees. Hand drawn (and thus not to scale) example of what I'm trying to achieve:
How to I go about adding these red lines into Chart.js, relative to the vertical path? Is it possible with this library, or should I be using something else? Any feedback appreciated!
You can always write a custom plugin to do it, but I think this plugin of chart.js itself can help you out looking at the example. If you specify the right start and end it should draw a straight line.
https://github.com/chartjs/chartjs-plugin-annotation#line-annotations
Basically the problem is that after you rotate the camera, the points that are given as arguments in the callback for dragging are not what I expected. I'm guessing I have to Rotate the given points also but I just couldn't.
Can Someone explain what is going on, is this some kind of bug or what should I do in order the sprite to follow the mouse cursor?
Easiest way to explain the problem is to reproduce it:
1) Go to Phaser Example Runner
2) Copy- Paste this code:
var config = {
type: Phaser.WEBGL,
parent: 'phaser-example',
scene: {
preload: preload,
create: create
}
};
var game = new Phaser.Game(config);
function preload ()
{
this.load.image('eye', 'assets/pics/lance-overdose-loader-eye.png');
}
function create ()
{
var image = this.add.sprite(200, 300, 'eye').setInteractive();
this.cameras.main.setRotation(Math.PI);
image.on('pointerover', function () {
this.setTint(0x00ff00);
});
image.on('pointerout', function () {
this.clearTint();
});
this.input.setDraggable(image);
this.input.on('dragstart', function (pointer, gameObject) {
gameObject.setTint(0xff0000);
});
this.input.on('drag', function (pointer, gameObject, dragX, dragY) {
console.log(`x: ${dragX}, y: ${dragY}`);
gameObject.x = dragX;
gameObject.y = dragY;
});
this.input.on('dragend', function (pointer, gameObject) {
gameObject.clearTint();
});
}
3) Open the console, drag around the Eye and look at what coordinates are given.
4) If you remove line 24 (the rotation of the camera) Everything works as expected.
(The example is taken from Phaser 3 Official examples and a bit changed for the bug)
According to Phaser's API Documentation on the setRotation() method, the rotation given in radians applies to everything rendered by the camera. Unfortunately, your pointer isn't rendered by the camera so it doesn't get the same rotated coordinates. Not sure if this is a bug with the library or just a poorly documented exception, but I believe there is a workaround.
Create 2 variables to hold an initial position and a final position:
var image = this.add.sprite(200, 300, 'eye').setInteractive();
var initial = [];
var final = [];
Populate the initial position in your .on('dragstart') method:
this.input.on('dragstart', function (pointer, gameObject) {
initial = [
gameObject.x,
gameObject.y,
pointer.x,
pointer.y
];
gameObject.setTint(0xff0000);
});
Then, populate the final variable in your .on('drag') method:
this.input.on('drag', function (pointer, gameObject, dragX, dragY) {
final = [
gameObject.x, // not necessary but keeping for variable shape consistency
gameObject.y, // not necessary but keeping for variable shape consistency
pointer.x,
pointer.y
];
gameObject.x = initial[0] + (initial[2] - final[2]);
gameObject.y = initial[1] + (initial[3] - final[3]);
});
All we're doing here is keeping track of the change in pointer position and mimicking that change in our gameObject.
I am trying to zoom and pan a text which is draggable already. All the examples are on images or shapes and it seems I cannot adapt it to a text object. My questions are:
Do I have to use the anchors or is any simpler way zoom a text with Kineticjs?
I found an example regarding zooming a shape and the code crashes here:
var layer = new Kinetic.Layer({
drawFunc : drawTriangle //drawTriangle is a function defined already
});
Can we call a function while we are creating a layer?
I usually create a layer and then add the outcome of the function in it.
Any idea would be great, thanks.
I thought of many ways you could do this but this is the one I ended up implementing: jsfiddle
Basically, you have an anchor (which doesn't always have to be there, you can hide and show it if you would like. Let me know if you need help with that) and if you drag the anchor down it increases the fontSize, and if you drag the anchor up it decreases the fontSize.
I followed the exact same anchor tutorial but instead I added a dragBoundFunc to limit dragging to the Y-axis:
var anchor = new Kinetic.Circle({
x: x,
y: y,
stroke: '#666',
fill: '#ddd',
strokeWidth: 2,
radius: 8,
name: name,
draggable: true,
dragOnTop: false,
dragBoundFunc: function (pos) {
return {
x: this.getAbsolutePosition().x,
y: pos.y
};
}
});
And then I updated the updateAnchor() function to only detect the single anchor I added to the group named sizeAnchor:
var mY = 0;
function update(activeAnchor, event) {
var group = activeAnchor.getParent();
var sizeAnchor = group.get('.sizeAnchor')[0];
var text = group.get('.text')[0];
if (event.pageY < mY) {
text.setFontSize(text.getFontSize()-1);
} else {
text.setFontSize(text.getFontSize()+1);
}
sizeAnchor.setPosition(-10, 0);
mY = event.pageY;
}
Basically mY is used compared to the e.PageY to see if the mouse is moving up or down. Once we can determine the mouse direction, then we can decide if we should increase or decrease the fontSize!
Alternatively, you can use the mousewheel to do the exact same thing! I didn't implement it myself but it's definitely doable. Something like:
Mousewheel down and the fontSize decreases
Mousewheel up and the fontSize increases
Hopefully this emulates "Zooming" a text for you. And I guess being able to drag the text acts as "panning" right?
UPDATE (based on comment below)
This is how you would limit dragging to the Y-Axis using dragBoundFunc:
var textGroup = new Kinetic.Group({
x: 100,
y: 100,
draggable: true,
dragBoundFunc: function (pos) {
return {
x: this.getAbsolutePosition().x,
y: pos.y
};
}
});
See the updated jsfiddle (same jsfiddle as above)
I'm having trouble with trying to get a really simple zooming example going with the v2 Sencha Touch Framework (RC). I've played around with several different layout types, and combinations of it, but it seems that the scrollers size is not updating, or the actual div representing the image is not expanding in order to be panned around? The be honest I'm at a total loss at the moment!!
var testImage = Ext.create('Ext.Img', {
src: 'images/Food/2.jpg'
});
Ext.Viewport.add({
layout: 'card',
scrollable: {
direction: 'both',
directionLock: false
},
items: [testImage]
});
Ext.Viewport.element.on({
doubletap: function(e , node, options, eOpts) {
var transformDetails = { scale: 2, angle: 0 };
testImage.element.setStyle('-webkit-transform', 'scaleX(' + transformDetails.scale + ') scaleY(' + transformDetails.scale + ') rotate(' + transformDetails.angle + 'deg)');
}
});
Does anybody have any insight on how to get this very simple example to correctly pan around once the scale is applied to the image? Feeling pretty incompetent at the moment.
If you add these lines to code, you are able to do events like pan, zoom and pinch.
Ext.Viewport.setPreventPanning(false);
Ext.Viewport.setPreventZooming(false);