animating window opening (titanium) - titanium-alloy

I want to open my window from bottom to top:
var controller = Alloy.createController('test', {
title : 'test',
});
var newWindow = controller.getView();
newWindow.animate(Alloy.Globals.animations.up);
newWindow.open({
animated : true
});
It doesn't seem to be working.
up : Titanium.UI.createAnimation({
top : (Ti.Platform.Android) ? '48dp' : 0
})

var win = Titanium.UI.createWindow({
title:"Implement an Activity Indicator",
backgroundColor:"#FFFFFF"
});
var exploreCalifornia = Titanium.UI.createImageView({
image:"images/exploreCalifornia.png",
width:96,
height:119,
top:120
});
var animateButton = Titanium.UI.createButton({
title:"Go!",
height:48,
width:60,
bottom:12,
});
animateButton.addEventListener("click", function(e){
exploreCalifornia.animate({top:50,duration:500});
var t = Titanium.UI.create2DMatrix();
t = t.rotate(20);
t = t.scale(1.5);
//Create an animation object and set properties to animate
var a = Titanium.UI.createAnimation({
top:60,
duration:1000,//Length of the animation in MS
transform:t//set the transform object here
});
//Define an event listener for animation completion
a.addEventListener('complete', function(){
win.backgroundColor = "#FFCC00";
var t = Titanium.UI.create2DMatrix();
t = t.rotate(0);
t = t.scale(1);
var a = Titanium.UI.createAnimation({
top:120,
duration:1000,//Length of the animation in MS
transform:t//set the transform object here
});
exploreCalifornia.animate(a);
});
exploreCalifornia.animate(a);
});
win.add(exploreCalifornia);
win.add(animateButton);
win.open();

Related

Google map showing grey bands and looks distorted

For some reason, even though my Google map is showing, there are strange grey bands/lines running through the map (image link below).
Just for reference it uses the places API to search for locations.
Screenshot of the map issue
Anybody have any ideas why this might be? Here's the code for the map:
<script src="https://maps.googleapis.com/maps/api/js?key=API_KEY&libraries=places"></script>
<script type="text/javascript">
function search_map_init() {
var args = {
disableDefaultUI : true,
center : new google.maps.LatLng(51.6948168, -0.6433884),
mapTypeId : google.maps.MapTypeId.ROADMAP,
scrollwheel : false,
zoom : 12,
styles : [{"featureType":"water","elementType":"geometry","stylers":[{"color":"#e9e9e9"},{"lightness":17}]},{"featureType":"landscape","elementType":"geometry","stylers":[{"color":"#f5f5f5"},{"lightness":20}]},{"featureType":"road.highway","elementType":"geometry.fill","stylers":[{"color":"#ffffff"},{"lightness":17}]},{"featureType":"road.highway","elementType":"geometry.stroke","stylers":[{"color":"#ffffff"},{"lightness":29},{"weight":0.2}]},{"featureType":"road.arterial","elementType":"geometry","stylers":[{"color":"#ffffff"},{"lightness":18}]},{"featureType":"road.local","elementType":"geometry","stylers":[{"color":"#ffffff"},{"lightness":16}]},{"featureType":"poi","elementType":"geometry","stylers":[{"color":"#f5f5f5"},{"lightness":21}]},{"featureType":"poi.park","elementType":"geometry","stylers":[{"color":"#dedede"},{"lightness":21}]},{"elementType":"labels.text.stroke","stylers":[{"visibility":"on"},{"color":"#ffffff"},{"lightness":16}]},{"elementType":"labels.text.fill","stylers":[{"saturation":36},{"color":"#333333"},{"lightness":40}]},{"elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"transit","elementType":"geometry","stylers":[{"color":"#f2f2f2"},{"lightness":19}]},{"featureType":"administrative","elementType":"geometry.fill","stylers":[{"color":"#fefefe"},{"lightness":20}]},{"featureType":"administrative","elementType":"geometry.stroke","stylers":[{"color":"#fefefe"},{"lightness":17},{"weight":1.2}]}]
};
var map = new google.maps.Map(document.getElementById('map-canvas'), args);
var marker_url = {
url : 'IMG_URL',
scaledSize : new google.maps.Size(48, 65)
};
var searchBox = new google.maps.places.SearchBox(document.getElementById('pac-input'));
map.controls[google.maps.ControlPosition.TOP_CENTER].push(document.getElementById('pac-input'));
google.maps.event.addListener(searchBox, 'places_changed', function() {
searchBox.set('map', null);
var places = searchBox.getPlaces();
var bounds = new google.maps.LatLngBounds();
var i, place;
for (i = 0; place = places[i]; i++) {
(function(place) {
var marker = new google.maps.Marker({
position: place.geometry.location,
icon : marker_url
});
marker.bindTo('map', searchBox, 'map');
google.maps.event.addListener(marker, 'map_changed', function() {
if (!this.getMap()) {
this.unbindAll();
}
});
bounds.extend(place.geometry.location);
}(place));
var new_address = $('#pac-input').val();
var new_lat = place.geometry.location.lat();
var new_lng = place.geometry.location.lng();
$('input[name="post[meta_input][map][address]"]').val(new_address);
$('input[name="post[meta_input][map][lat]"]').val(new_lat);
$('input[name="post[meta_input][map][lng]"]').val(new_lng);
}
map.fitBounds(bounds);
searchBox.set('map', map);
map.setZoom(Math.min(map.getZoom(),12));
});
return map;
}
google.maps.event.addDomListener(window, 'load', search_map_init);
</script>
Note: I've replaced the API key and image URL with API_KEY and IMG_URL in the code above.
I was setting min-width in the CSS for something else which was also effecting the map display. Problem solved!

How to increase surface size using a click event within famo.us?

I am attempting to increase the scale or the size of the surface so that it takes up the window when I click on it. Assume that a surface is created and is called surface3.
I have a boolean marked as flag that changes its value everytime the surface3 is clicked. true will cause a 'growSurface' event to be emitted that the eventHandler will respond to.
I do not know how to smoothly animate using a Famous.Transitionable to tween the increase in scale or size. I am able to successfully place a surface3.setSize([undefined, undefined]); to get it to jump to take up the window. How do I get it to animate in size or scale using a Transitionable?
Template.projects.rendered = function() {
Famous.Engine = famous.core.Engine;
Famous.Surface = famous.core.Surface;
Famous.Transform = famous.core.Transform;
Famous.Transitionable = famous.transitions.Transitionable;
Famous.Modifier = famous.core.Modifier;
Famous.StateModifier = famous.modifiers.StateModifier;
Famous.Easing = famous.transitions.Easing;
Famous.EventHandler = famous.core.EventHandler;
var mainContext = Famous.Engine.createContext();
var eventHandler = new Famous.EventHandler();
var surface3 = new Famous.Surface({
size: [300, $(window).height()],
content: "surface 3",
properties: {
color: '#FFF',
backgroundColor: 'green'
}
});
var flag = false;
var scaleModifier = new Famous.Modifier({
size: [300, $(window).height()]
});
scaleModifier.sizeFrom(function(){
return transitionable.get();
});
eventHandler.on('growSurface', function(){
// can do surface3.setSize( $(window).width() );
var transitionable = new Famous.Transitionable( 300 );
return transitionable.set( $(window).width(), {duration: 1500} );
});
eventHandler.on('shrinkSurface', function(){
console.log('shrink surface init');
// code to shrink size back to [300, $(window).height()]
// should reverse 'growSurface' event
// can do surface3.setSize([300, undefined]);
});
// Handles Clicks
surface3.on('click', function(event) {
if (flag === false) {
eventHandler.emit('growSurface');
flag = !flag
} else {
eventHandler.emit('shrinkSurface');
flag = !flag
}
});
mainContext.add(scaleModifier).add(alignSurface3Modifier).add(surface3);
I got it both animating on the growSurface and shrinkSurface events:
var eventHandler = new Famous.EventHandler();
var flag = false;
var transitionable = new Famous.Transitionable([300, undefined]);
var scaleModifier = new Famous.Modifier({
size: [300, $(window).height()]
});
scaleModifier.sizeFrom(function(){
return transitionable.get();
});
eventHandler.on('growSurface', function(){
surface3.setSize([undefined, $(window).height()]);
transitionable.set([$(window).width(), $(window).height()], { duration: 1500 });
});
eventHandler.on('shrinkSurface', function(){
transitionable.set([300, $(window).height()], { duration: 1500 });
});
// Handles Clicks
surface3.on('click', function(event) {
if (flag === false) {
eventHandler.emit('growSurface');
flag = !flag
} else {
eventHandler.emit('shrinkSurface');
flag = !flag
}
});

I'm trying to translate or create similar code using RaphaelJS.

I'm trying to translate or create similar code using RaphaelJS. If you look at the code, you will see that I'm trying to create an animated path using css and js.
http://plnkr.co/edit/FC2qiZumzgjKSJOs6Zm5?p=info
var spinner = function() {
this.transition = function() {
var path = document.querySelector('#spinner-wrapper .spinner #main-path');
path.style.transition = path.style.WebkitTransition = 'none';
path.style.strokeDasharray = '205.951';
path.style.strokeDashoffset = 430;
path.getBoundingClientRect();
path.style.strokeDashoffset = '0';
path.style.transition = path.style.WebkitTransition = 'stroke-dashoffset 3s linear';
};
this.startInterval = function(immediate,time) {
if(immediate){
setTimeout(transition,0);
}
this.interval = setInterval(function() {
transition();
}, time);
return this.interval;
};
this.start = function() {
clearInterval(this.interval);
startInterval(true,2700);
};
this.stop = function() {
clearInterval(this.interval);
startInterval(false,0);
};
return this;
};
I'm using jQuery and RaphaelJS. It still doesn't work in IE browsers for some reasons. Maybe you can figure this out.
http://jsfiddle.net/shojib/ceqs86go/
var paper = new Raphael('canvas');
var pathString = "M16.47,19.938c7-0.5,4.5-10.5-2-7c-7,3.5,1,13,7.5,10 c13.5-7-9.5-27-16-6.5c-4.5,16,22,17,26,2c4.5-15.5-15-22.5-25-11.5c-5.5,6.5-9,16-0.5,21.5c4,2.5,15,6,19,2.5 c-3-3.5-7.5-8-9.5-10.5";
var pattern2 = paper.path(pathString);
pattern2.attr({fill: 'none',stroke: '#ffffff',"stroke-miterlimit": '10','stroke-opacity': '1'});
var pattern1 = paper.path(pathString);
pattern1.attr({fill: 'none',stroke: '#CD5300',"stroke-miterlimit": '10','stroke-opacity': '1'});
$(pattern1.node).css({
'stroke-dasharray': '210.991px',
'stroke-dashoffset': '430px'
});
$(pattern1.node).animate({
'stroke-dashoffset': '0'
},{
duration: 3000,
easing: 'linear'
});

how to trigger the google map event from inside the overlayview

In a application, I am using google map to display stations with google marker, because the google marker is static with icon not animated, so I decided to inherit OverlayView and use canvas to draw a station dynamically. And this works, however, I want this overlay to receive the google events like the marker, such as click, mouse over, mouse out...
For example,
function StationCanvas(map, position, name) {
this.map_ = map;
this.position_ = position;
this.name_ = name;
this.canvas_ = null;
this.labelDiv_ = null;
this.canvasWidth_ = 12;
this.canvasHeight_ = 50;
this.setMap(map);
console.log('canvas '+this.position_);
}
StationCanvas.prototype = new google.maps.OverlayView();
StationCanvas.prototype.onAdd = function() {
var canvas = document.createElement("canvas");
canvas.setAttribute("width", this.canvasWidth_);
canvas.setAttribute("height", this.canvasHeight_);
canvas.style.position = "absolute";
this.canvas_ = canvas;
var panes = this.getPanes();
panes.floatPane.appendChild(canvas);
this.labelDiv_ = document.createElement("div");
this.labelDiv_ .setAttribute("width", this.canvasWidth_);
this.labelDiv_ .setAttribute("height", this.canvasHeight_);
this.labelDiv_ .style.position = "absolute";
this.labelDiv_ .innerHTML = this.name_;
panes.floatPane.appendChild(this.labelDiv_ );
/////////////////////////////////////////////////////////////
this.listeners_ = [
google.maps.event.addListener(this.canvas_, "mouseover", function (e) {
//this.style.cursor = "pointer";
//google.maps.event.trigger(this, "mouseover", e);
console.log('mouse mover');
}),
google.maps.event.addListener(this.canvas_, "mouseout", function (e) {
//this.style.cursor = this.getCursor();
//google.maps.event.trigger(this, "mouseout", e);
console.log('mouse out');
}),
google.maps.event.addListener(this.canvas_, "click", function (e) {
google.maps.event.trigger(this, "click", e);
console.log('click');
}),
google.maps.event.addListener(this.canvas_, "dblclick", function (e) {
//google.maps.event.trigger(this, "dblclick", e);
}),
];
}
Intially, I use google.maps.event.addListener as showed above to listen the event, nothing happens, so it seems canvas doesn't work with google.maps.eventListener.
Then I found google has provided a addDomListener(instance:Object, eventName:string, handler:Function), but since it only support dom rather then canvas, so when I used that listener, the browser breaks down.
At last, I have tried to use
canvas.onmouseout = function() {
console.log("on mouse out");
}
}
It is supposed to work, but still no, I guess something wrong within the code. even this works, the next question is how can I trigger the event to outside, so that I can work this overlayview like the google marker
var test1 = new StationCanvas(map, new google.maps.LatLng(53.3234,-2.9178), "abc",13);
google.maps.event.addListener(test1, 'click', function(event){
console.log('test 1 click');
});
addDomListener works for me, even with <canvas/>
What would break your code is e.g. this:
google.maps.event.addListener(this.canvas_, "click", function (e) {
google.maps.event.trigger(this, "click", e);
console.log('click');
})
this , when used in a event-callback, refers to the object that triggers the event(here: the canvas-node), your code produces a recursion. When you want to trigger the click-event for the StationCanvas-instance, you may store the instance as a property of the canvas-element, so it will be easy accessible inside the click-callback
StationCanvas.prototype.onAdd = function() {
var canvas = document.createElement("canvas");
canvas.overlay=this;
//more code
}
this.listeners_ = [
google.maps.event.addDomListener(this.canvas_, "click", function (e) {
google.maps.event.trigger(this.overlay,'click')
}),
google.maps.event.addListener(this, "click", function (e) {
alert('click on the StationCanvas-instance');
})
];

Google Maps API with backbone, how to bind an event

I've seen several other posts about this, but the answers from those responses don't work for me.
The other responses:
How do I bind a google maps geocoder.geocode() callback function
Backbone.js with Google Maps - problems with this and listeners
My code:
var ns = namespace('camelcase.geomanager.map');
ns.Site = Backbone.Model.extend({
url: '/site'
});
ns.Sites = Backbone.Collection.extend({
model: ns.Site
});
ns.MapView = Backbone.View.extend({
initialize: function() {
this.markers = new Array();
// Create the Google Map
var mapOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
this.googleMap = new google.maps.Map(this.$(".mapCanvas")[0], mapOptions);
// Register events
this.collection.on('add', this.addSite, this);
this.collection.on('remove', this.removeSite, this);
},
addSite: function(model) {
// Get model attributes
var elementId = model.get('elementId');
var latitude = model.get('latitude');
var longitude = model.get('longitude');
var id = model.get('id');
var notes = model.get('notes');
var title = ""+id;
// Create icon and marker
var icon = '/resources/img/elements/' + elementId + '_marker.png';
var latLng = new google.maps.LatLng(latitude, longitude);
var marker = new google.maps.Marker({
position: latLng,
title: title,
map: this.googleMap,
icon: icon
});
// Load info window
var siteBubbleTemplate = _.template($('#siteBubbleTemplate').html());
var siteContent = $(siteBubbleTemplate({
siteId: id,
siteNotes: notes
}))[0];
var infoWindow = new google.maps.InfoWindow({
content: siteContent
});
// Show info window when clicking on marker
_.bindAll(this, this.openSite);
google.maps.event.addListener(marker, 'click', this.openSite(id));
this.markers.push({
id: id,
marker: marker,
infoWindow: infoWindow
});
},
openSite: function(id) {
var marker;
for (var c=0; c<this.markers.length; c++) {
marker = this.markers[c];
// Open the appropriate marker info window
if (marker.id == id) {
marker.infoWindow.open(googleMap, marker.marker);
}
// Close the rest
else {
marker.infoWindow.close();
}
}
}
});
The offending line:
google.maps.event.addListener(marker, 'click', this.openSite(id));
The error being reported in firebug:
TypeError: func is undefined
underscore.js (line 482)
I suspect this.marker is the problem, since you should be able to just refer to it by name.
google.maps.event.addListener(marker, 'click', this.openSite(id));
Looks like it was a scoping issue. I solved my problem with the following code:
// Show info window when clicking on marker
_.bindAll(this);
var _self = this;
var doSomething = function(event) {
_self.openSite({
event: event
});
};
google.maps.event.addListener(marker, 'click', doSomething);
I'll give the answer to whoever can best explain why this works.
In a model/collection event handler, Backbone sets 'this' to the model/collection which raised the event. If you call _.bindAll(this) in your view's initialize(), 'this' will be set to the view in your event handlers. Check out this jsfiddle: http://jsfiddle.net/9cvVv/339/ and see what happens when you uncomment _.bindAll(this);
var MyView = Backbone.View.extend({
initialize: function() {
// TODO: uncomment this line
// _.bindAll(this);
this.collection.bind('myEvent', this.onDoSomething);
},
updateCollection: function() {
this.collection.doSomething();
},
onDoSomething: function() {
if (this.models && typeof this.models.length === 'number') {
alert('"this" is a collection.');
}
else if (this.collection) {
alert('"this" is the view.');
}
else {
alert('"this" is something else.');
}
}
});

Resources