and pardon my ignorance here. I am brand new with SceneKit. I am trying to get my default camera controller to animate with a sort of smooth "panning motion". I am trying to use something like:
scnView.defaultCameraController.translateInCameraSpaceBy(x: 10, y: 10, z: 10)
When the SCNView enters the view controller.The problem is that this action jumps and I would like it to animate, transitioning from it's current perspective to it's new position where the frames in the transition between the two points in space are represented.
I would like to have this happen on the defaultCameraController as well if possible.
Thanks!
A quick solution to get the animation to work is to wrap your translation in an SCNTransaction block.
SCNTransaction.begin()
SCNTransaction.animationDuration = 5
scnView.defaultCameraController.translateInCameraSpaceBy(x: 10, y: 10, z: 10)
SCNTransaction.commit()
Related
I have diary page with rows (time) and columns(person). I want to drag and select three rows from top to bottom. Please help me on this.
You use actions to perform drag and drop in Protractor, which also includes offset x & y. Something like:
browser.actions().
mouseDown(timeElement, {x: right, y: bottom}).
mouseMove(personElement, {x: right, y: bottom}).
mouseUp().
perform();
I am trying to animate a SKSpriteNode using an array of textures. What I am trying to achieve is to iterate through the texture array and change the SKSpriteNode texture through each iteration and display it's change for about 1 second. The only problem is, the loop is continuing as the animations are taking place I believe, so I can't see the changes.
I essentially want to be able to see each texture on the screen for about a second or two before it changes. Here is what I have so far.
var textures: [SKTexture] = [texture1, texture2, texture3, texture4]
var sprite = SKSpriteNode()
func animateSpriteTextures() {
for texture in textures {
/* Want to pause for about a second or two here, but does not. */
sprite.texture = texture
let scaleDown = SKAction.scaleTo(200, duration: 1)
let scaleUp = SKAction.scaleTo(300, duration: 1)
sprite.runAction(SKAction.sequence([scaleDown, scaleUp]))
}
}
Take a look at the animateWithTextures: action. You could do something like:
sprite.runAction(SKAction.animateWithTextures(textures, timePerFrame: 1.0))
If you need to change the size of the sprite as the animation occurs, then you'll probably want to create an action group SKAction.group() to coordinate the animation and the size changes or maybe animateWithTextures:timePerFrame:resize:restore: would work for you.
Im using leaflet to create a photo map, with my own tiles, which works as expected.
Im trying to work out how I can prevent the zoom from following this Quadtree type pattern:
Zoom Level 0 - Entire map width = 256px;
Zoom Level 1 - Entire map width = 512px;
Zoom Level 2 - Entire map width = 1024px;
And so on...
I would like to be able to zoom in say increments of 25% or 100px.
An example of 100px increments:
Zoom Level 0 - Entire map width = 200px;
Zoom Level 1 - Entire map width = 300px;
Zoom Level 2 - Entire map width = 400px;
And so on...
Question:
What is the logic for doing this? If it is at all possible?
My reason for wanting to do this is so that my photo map (which doesnt wrap like a normal map) can be more responsive and fit the users screen size nicely.
I made a demonstration of my issue which can be seen here
The short answer is that you can only show zoom levels for which you have pre-rendered tiles. Leaflet won't create intermediary zoom levels for you.
The long answer is that in order to use do this, you need to define your own CRS scale method and pass it to your map, for example:
L.CRS.CustomZoom = L.extend({}, L.CRS.Simple, {
scale: function (zoom) {
// This method should return the tile grid size
// (which is always square) for a specific zoom
// We want 0 = 200px = 2 tiles # 100x100px,
// 1 = 300px = 3 tiles # 100x100px, etc.
// Ie.: (200 + zoom*100)/100 => 2 + zoom
return 2 + zoom;
}
});
var map = L.map('map', { crs: L.CRS.CustomZoom }).setView([0, 0], 0);
In this example, I've extended L.CRS.Simple, but you can of course extend any CRS from the API you'd like, or even create your own from scratch.
Using a zoom factor which results in a map pixel size that is not a multiple of your tilesize, means your right/bottom edge tiles will only be partially filled with map data. This can be fixed by making the non-map part of such tiles 100% transparent (or same the colour as your background).
However, it is, in my opinion, a much better idea to set the tilesize to match the lowest common denominator, in this case 100px. Remember to reflect this by using the tileSize option in your tile layer. And, of course, you will need to re-render your image into 100x100 pixels tiles instead of the 256x256 tiles you are using currently.
One caveat, the current version of LeafletJS (0.5) has a bug that prevents a custom scale() method from working, due to the TileLayer class being hardcoded to use power-of-2 zoom scaling. However, the change you need to do is minor and hopefully this will be addressed in a future release of Leaflet. Simply change TileLayer._getWrapTileNum() from:
_getWrapTileNum: function () {
// TODO refactor, limit is not valid for non-standard projections
return Math.pow(2, this._getZoomForUrl());
},
To:
_getWrapTileNum: function () {
return this._map.options.crs.scale(this._getZoomForUrl());
},
this is what I'm trying to do...
I have a chart with a line series with markers in it. In the X axis I have dates and in the Y axis a number. So lets say I have in x dates from yesterday to next week. And each day has a corresponding Y axis value.
What I want to do is change the color of the marker that belongs to the actual date.
In other words, to make it clearer, I want to change the color of a single marker in a ExtJS line series. I know of markerConfig but that doesn't seem to help since it applies to all markers.
I haven't found anything like this around so I stopped here to see if you guys could help me.
Thanks in advance!
I think the easiest way to do this is to highlight a single datapoint in a series.
First, define your highlight style.
Ext.create('Ext.chart.Chart', {
...
series: [{
type: 'line',
highlight: {
size: 10,
radius: 10,
fill: 'red'
},
...
});
Then, select the appropriate datapoint in your series and call the highlightItem() method. Here's an example showing how to use the method.
var series = myChart.series.get(0);
series.highlightItem(series.items[2]); // highlight the 3rd data point in the series
The result would look something like this.
I'm very new to OpenLayers and working with GeoData; as such, I think I have a pretty noob question about configuring map bounds with OpenLayers. First, here's the map code I've made up...
function createMap(containerId){
return new OpenLayers.Map(containerId, {
projection: new OpenLayers.Projection("EPSG:900913"),
displayProjection: new OpenLayers.Projection("EPSG:4326"),
units: "m",
maxResolution:156543.0339,
numZoomLevels:4,
controls: [],
maxExtent: new OpenLayers.Bounds(-20037508.34, -20037508.34, 20037508.34, 20037508.34),
restrictExtent: new OpenLayers.Bounds(-20037508.34, -20037508.34, 20037508.34, 20037508.34)
});
}
I have my map and I've loaded a GeoJSON layer of vector country shapes on top of it. So far so good. However, if I call zoomToMaxExtent on the map, the map zooms out to be a little tiny thumbnail-sized graphic in the center of my viewport rather than filling the frame. Then if I zoom in on the map, I can (seemingly) pan the map indefinitely in any direction rather than being constrained at the edges of the map shapes.
So I assume I'm doing something wrong with my maxExtent and restrictExtent settings, although I have no idea what it is. To be honest, I'm not sure what those huge bounding numbers are (found them in sample code). Essentially, by Lon/Lat coordinates, I think I'm just trying to restrict bounding to -180, -90, 180, 90 – which should provide a tight frame around the map geography, right? Unfortunately setting those Lon/Lat's to the bounding params don't seem to do anything. Any insight would be greatly appreciated!