Two questions:
What is the best way to create a smooth animation through 12 KML Files through google maps API V2?
How can I integrate a fadeIn() / fadeOut() to smoothly transtition between these KML files?
I have experimented some with setTimeouts() with 2 of my KML filed but haven't figured out a smooth or consistent way to animate between them. Code is below.
function animate () {
function series_1 () {
geoXml = new GGeoXml("lake/colors_test.kml");
map.addOverlay(geoXml);
setTimeout("map.removeOverlay(geoXml)", 5000);
}
function series_2 () {
geoXml1 = new GGeoXml("lake/colors_test_1.kml");
map.addOverlay(geoXml1);
setTimeout("map.removeOverlay(geoXml1)", 5000);
}
series_1();
series_2();
}
animate();
I think you'll need to apply fading to the underlying images:
$("#mapContent").find("img[src*=\"lyrs=kml\"]").fadeOut();
This is for the V3 API, you might need a different selector for the V2 API.
I'm assuming the map is created with
map = new google.maps.Map document.getElementById("mapContent");
jQuery also has a fadeIn() method, however it gets tricky because the images are probably recreated when you add a new KML layer. You'll need to find a way to set their visibility to zero when they are created.
Related
From some research, I've figured out that expo libraries like takePicturesAsync() are able to take a picture and save it to the app's cache. However, the default state for libraries like these is to save the whole image. Is there any way for me to save a specific part of the image (e.g. the 2500 pixels at the center of the screen)?
Thanks!
You can use the onPictureSaved event to grab & manipulate the image.
takePicture = () => {
if (this.camera) {
this.camera.takePictureAsync({ onPictureSaved: this.onPictureSaved });
}
};
onPictureSaved = photo => {
console.log(photo);
}
I have a gltf model, which contains cameras, models and camera animations. After loading, they become an gltf entity. I can't use secondcamera el. SetAttribute ('camera ','active', true ')" to change camera. How can I use the camera in it.
This can be modified in three. JS
this.content.traverse((node) => {
if (node.isCamera && node.name === name) {
this.activeCamera = node;
}
});
this.renderer.render( this.scene, this.activeCamera )
but, how to use inner camera in gltf in aframe?
You could keep the reference to the camera:
var model_camera = null;
// wait until the model is loaded
entity.addEventListener("model-loaded", e => {
const mesh = entity.getObject3D("mesh");
mesh.traverse(node => {
// assuming there is one camera
if (node.isCamera) model_camera = node;
})
})
and when you need to use it, just substitute the active camera in the scene.camera property:
entity.sceneEl.camera = model_camera;
Check it out in this example with a model containing two different cameras.
Afaik there is no cleanup involved, the look-controls or wasd-controls will still be working as long as you don't manually disable them when switching cameras.
The camera system has a function for swapping active cameras, but you would need to add <a-entity> wrappers for the camera references (as the system tries to perform getObject3D('camera') on the provided entity).
I'm trying to create a custom player for some Soundcloud tracks. The idea is to hide the Iframe and create a few players to play different tracks. The loading and playing all works fine but I have two challenges.
How do I create a progressbar (SC.Widget.Events.PLAY_PROGRESS)
How do I create a download link?
A snippet from the way I'm coding this:
(function(){
var widgetIframe = document.getElementById('sc-widget'),
widget = SC.Widget(widgetIframe);
widget.bind(SC.Widget.Events.READY, function() {
$('#play').click(function(){
widget.play();
});
}); }());
To bad the OPEN API is closed..
If you are trying to stream tracks using a custom player, I recommend you do not use the widget at all. Rather, use the streaming SDK directly. There are methods there that can do everything you need to load, play, pause, seek, get the current time of the song and more.
To initialize the streaming player, you can do something like:
SC.initialize({
client_id: "<client id>"
});
SC.stream("/tracks/" + song_id).then(function (player) {
player.play();
}
To build the actual progress bar, you can do something inside your stream function like the following (this example uses JQuery but you don't need to):
player.on("time", function () {
var current_time = player.currentTime();
var current_duration = player.options.duration;
$(".scrubber .scrubber_fill").css("width", ((current_time / current_duration) * 100) + "%");
});
Previous attempt at this app was done in jqtouch and this effect worked perfectly. Im having a really hard time wrapping my head on how best to do this with sencha touch.
My situation is best described in this image
This is just one item that should populate a carousel so reusing it with different data is paramount (no hard coded html).
thank you
Finally solved it thought I should update it here
Ext.define('mobuy.view.myCarousel', {
extend: 'Ext.carousel.Carousel',
alias: 'widget.myCarousel',
config: {
myitems: 0,
},
updateMyItems: function(newItem) {
var localCarouselItems = [];
Ext.each(newItems, function(item){
localCarouselItems.push({
xtype:'localItem',
data:item.data
});
});
this.setItems(localCarouselItems);
this.setActiveItem(0);
}
})
what this does is basically create an array of new items of type localItem from the store when one calls setMyItems and sets the data (to be used with xtemplate or whatever) for each of those items.
If anybody needs more details please ask and I'll update my answer.
somewhat of a javascript novice here.
I'm trying to create this: http://i.imgur.com/LXFzy.png from the Spotify UI Guidelines.
Basically a 64x64 album cover with an appropriate sized play button.
This is what I have so far:
function DataSource(playlist) {
this.count = function() {
return playlist.length;
}
// make node with cover, trackname, artistname
this.makeNode = function(track_num) {
var t = playlist.data.getTrack(track_num);
// console.log(t);
var li = new dom.Element('li');
//generate cover image with play/pause button
var track = m.Track.fromURI(t.uri, function(a) {
var trackPlayer = new v.Player();
trackPlayer.track;
trackPlayer.context = a;
dom.inject(trackPlayer.node, li, 'top')
});
//track name
var trackName = new dom.Element('p', {
className: 'track',
text: t.name
});
//artist name
var artistName = new dom.Element('p', {
className: 'artist',
text: t.artists[0].name
});
dom.adopt(li, trackName, artistName);
return li;
}
}
This datasource function feeds into a pager function later in the code. This code generates image, artist name and track name just fine except I can't seem to get the image to be 64x64 without overriding with my own css. I'm sure there is a way to set this in javascript since the core Spotify CSS files include a class for it however I'm at a loss at how to do it.
Also the play button renders but gives an error in the console that the track has no method 'get' when I click on it. How am I suppose to know it needs a get? Is there some way I can see this player function so I know what I'm doing wrong with it?
Any help would be greatly appreciated, I'm sure it'll help droves of people too as there is no documentation anywhere I can find on how to do this.
Check the code here: https://github.com/ptrwtts/kitchensink/blob/master/js/player.js
The kitchensink app displays a lot of the Spotify Apps API functionality
For the playback button, I know that it doesn't seem to actually work for single tracks used as the context. It really only works if you use either an Artist, Album, or Playlist context. Not sure why that is.