I am utilizing the PhotoView class by Chris Banes to be able to zoom into an image and see it, but I want to make it so that when I change the orientation, the photo will still be zoomed in after the change.
I understand the basics of how to do this, that when an orientation change is detected, onSaveInstanceState will be called, so I'm trying to save the instance in there, and then put it back into the PhotoView when onCreate is called.
public class MainActivity extends ActionBarActivity
{
PhotoView mPhotoView;
#Override
protected void onCreate( Bundle aSavedInstanceState )
{
super.onCreate( aSavedInstanceState );
mPhotoView = new PhotoView(this);
mPhotoView.setMaximumScale( 12 );
setContentView( mPhotoView );
mPhotoView.setImageResource( R.drawable.vm_app_icon);
if (aSavedInstanceState != null)
{
RectF theRect = aSavedInstanceState.getParcelable( "Rect" );
if ( theRect != null)
{
Matrix theMatrix = new Matrix();
theMatrix.setScale( theRect.bottom, theRect.left, theRect.right, theRect.top );
mPhotoView.setDisplayMatrix( theMatrix );
}
}
}
#Override
protected void onSaveInstanceState( final Bundle outState )
{
super.onSaveInstanceState( outState );
RectF theRect = mPhotoView.getDisplayRect();
if (theRect != null)
{
outState.putParcelable( "Rect", theRect );
}
}
}
But this doesn't work. What should I be storing in the bundle to be able to apply back to the PhotoView to keep the zoom level?
Alright after like 10 hours of trying I've figured it out.
To save the zoom level I needed to save two things in the Bundle, the Scale (Zoom level), and the DisplayRect (of type RectF).
Zoom Level - Number between the MinScale and MaxScale, in my instance between 1 and 16
The RectF holds four values, which for some reason are the coordinates of the Top-Left corner of the current view with respect to the current screen orientation. Even though it holds the top-left coordinates I don't want to rotate around that, I want to rotate around the center, so I need to find the center of the rect and then divide that value by the "ScreenBase" which is a value that will standardize the values and will make it able to be translated into a difference plane. Here's how I saved it:
#Override
protected void onSaveInstanceState( final Bundle outState )
{
super.onSaveInstanceState( outState );
Matrix theMatrix = mPhotoView.getDisplayMatrix();
float[] theFloat = new float[9];
theMatrix.getValues( theFloat );
RectF theRect = mPhotoView.getDisplayRect();
if (theRect != null)
{
if( theRect.left > ( mViewWidth / 2 ) || ( theRect.left >= 0 ) )
{
theRect.left = 0;
}
else
{
theRect.left = ( theRect.left - ( mViewWidth / 2 ) ) / mScreenBase;
}
if( theRect.top > ( mViewHeight / 2 ) || ( theRect.top >= 0 ) )
{
theRect.top = 0;
}
else
{
theRect.top = ( theRect.top - ( mViewHeight / 2 ) ) / mScreenBase;
}
outState.putParcelable( "RectF", theRect );
outState.putFloat( "ZoomLevel", mPhotoView.getScale() );
}
}
Then when we pick it up on the other side, we have to do a lot of manipulation to the numbers to get the top left corner of the new screen space centered around the same place (and manipulate it if an boundary problem occurs), here's how I did it:
#Override
protected void onCreate( final Bundle aSavedInstanceState )
{
super.onCreate( aSavedInstanceState );
mPhotoView = new PhotoView( this );
mPhotoView.setMaximumScale( 16 );
setContentView( mPhotoView );
mPhotoView.setImageResource( R.drawable.vm_app_icon );
mPhotoView.getViewTreeObserver().addOnPreDrawListener( new ViewTreeObserver.OnPreDrawListener()
{
public boolean onPreDraw()
{
mPhotoView.getViewTreeObserver().removeOnPreDrawListener( this );
mViewHeight = mPhotoView.getMeasuredHeight();
mViewWidth = mPhotoView.getMeasuredWidth();
Matrix theMatrix = mPhotoView.getDisplayMatrix();
theMatrix.getValues( mBaseMatrixValues );
mScreenBase = mBaseMatrixValues[ 0 ];
int theWidth = mPhotoView.getWidth();
Log.e(TAG, theWidth + "");
if( aSavedInstanceState != null )
{
float[] theFloats = new float[ 9 ];
float theZoom = aSavedInstanceState.getFloat( "ZoomLevel" );
RectF theRect = aSavedInstanceState.getParcelable( "RectF" );
theFloats[ 0 ] = theZoom;
theFloats[ 4 ] = theZoom;
theFloats[ 2 ] = ( theRect.left * mScreenBase ) - ( theZoom * mBaseMatrixValues[ 2 ] ) + ( mViewWidth / 2 ); //Left
theFloats[ 5 ] = ( theRect.top * mScreenBase ) - ( theZoom * mBaseMatrixValues[ 5 ] ) + ( mViewHeight / 2 ); //Top
theFloats[ 8 ] = (float) 1.0;
theFloats = CheckBoundaries( theZoom, theFloats, theRect );
theMatrix.setValues( theFloats );
mPhotoView.setDisplayMatrix( theMatrix ); //Sets the mSuppMatrix in the PhotoViewAttacher
Matrix theImageViewMatrix = mPhotoView.getDisplayMatrix(); //Gets the new mDrawMatrix
mPhotoView.setImageMatrix( theImageViewMatrix ); //And applies it to the PhotoView (catches out of boundaries problems)
}
return true;
}
} );
}
private float[] CheckBoundaries(final float aZoom, float[] aFloats, final RectF aRect )
{
if( aZoom == 1.0 ) //If the zoom is all the way out
{
aFloats[ 2 ] = 0;
aFloats[ 5 ] = 0;
return aFloats;
}
theMaxLeftValue = ( ( mViewHeight * aZoom ) - mViewWidth + ( aZoom * mBaseMatrixValues[ 2 ] ) );
theMaxTopValue = ( ( mViewWidth * aZoom ) - mViewHeight + ( aZoom * mBaseMatrixValues[ 5 ] ) );
if( Math.abs( aFloats[ 2 ] ) > ( theMaxLeftValue ) )
{
aFloats[ 2 ] = -Math.abs( theMaxLeftValue ) + 10;
}
else if( Math.abs( aFloats[ 2 ] ) < ( aZoom * mBaseMatrixValues[ 2 ] ) )
{
aFloats[ 2 ] = -( aZoom * mBaseMatrixValues[ 2 ] );
}
if( Math.abs( aFloats[ 5 ] ) > ( theMaxTopValue ) )
{
aFloats[ 5 ] = -Math.abs( theMaxTopValue ) + 10;
}
else if( Math.abs( aFloats[ 5 ] ) < ( aZoom * mBaseMatrixValues[ 5 ] ) )
{
aFloats[ 5 ] = -( aZoom * mBaseMatrixValues[ 5 ] );
}
if( aFloats[ 2 ] > 0 )
aFloats[ 2 ] = -( mViewWidth / 2 );
else if( aFloats[ 5 ] > 0 )
aFloats[ 5 ] = -( mViewHeight / 2 );
return aFloats;
}
Related
I'm making a side scroller and when i start my game i can touch the screen to keep my penguin in the air, but when i fail and collide with an ice block and press play after going to restart.lua i get the error attempt to call method 'applyForce'
heres my code
local function activatePengs(self,event)
self:applyForce(0, -45, self.x, self.y)
print("run")
end
local function touchScreen(event)
print("touch")
if event.phase == "began" then
peng.enterFrame = activatePengs
Runtime:addEventListener("enterFrame", peng)
end
if event.phase == "ended" then
Runtime:removeEventListener("enterFrame", peng)
end
end
local function onCollision(event)
if event.phase == "began" then
print "collide"
composer.gotoScene( "restart",{ time=800, effect="crossFade" } )
end
end
-- now comes four required functions for Composer:
function scene:create( event )
local sceneGroup = self.view
bg1 = display.newImageRect(sceneGroup, "bg.png", 800, 1000)
bg2 = display.newImage(sceneGroup, "ice2.png",140,210)
bg3 = display.newImage(sceneGroup, "ice2.png",540,210)
bg4 = display.newImage(sceneGroup, "ice2.png",940,210)
bg5 = display.newImage(sceneGroup, "ice2.png",1340,210)
bg6 = display.newImage(sceneGroup, "ice2.png",1740,210)
bg7 = display.newImage(sceneGroup, "ice1.png",140,420)
bg8 = display.newImage(sceneGroup, "ice1.png",540,420)
bg9 = display.newImage(sceneGroup, "ice1.png",940,420)
bg10 = display.newImage(sceneGroup, "ice1.png",1340,420)
bg11 = display.newImage(sceneGroup, "ice1.png",1740,420)
peng = display.newImage(sceneGroup, "peng.png", 80, 201)
physics.addBody(peng, "dynamic", {density=.18, bounce=0.1, friction=.5, radius=55})
...
end
Probably the error occurs because penguin is not a physics object when the function is called. I think remove enterFrame listener before go to next scene should solve your problem.
I added some improvements to your code (not tested) :
local applyForceToPenguin = false
local function enterFrame( self, event )
if applyForceToPenguin then
self:applyForce( 0, -45, self.x, self.y )
print("run")
end
end
local function touchScreen(event)
print("touch")
if event.phase == "began" then applyForceToPenguin = true end
if event.phase == "ended" then applyForceToPenguin = false end
end
local function onCollision(event)
if event.phase == "began" then
print "collide"
applyForceToPenguin = false
composer.gotoScene( "restart",{ time=800, effect="crossFade" } )
end
end
-- now comes four required functions for Composer:
function scene:create( event )
local sceneGroup = self.view
bg1 = display.newImageRect( sceneGroup, "bg.png", 800, 1000 )
bg2 = display.newImage( sceneGroup, "ice2.png", 140, 210 )
bg3 = display.newImage( sceneGroup, "ice2.png", 540, 210 )
bg4 = display.newImage( sceneGroup, "ice2.png", 940, 210 )
bg5 = display.newImage( sceneGroup, "ice2.png", 1340, 210 )
bg6 = display.newImage( sceneGroup, "ice2.png", 1740, 210 )
bg7 = display.newImage( sceneGroup, "ice1.png", 140, 420 )
bg8 = display.newImage( sceneGroup, "ice1.png", 540, 420 )
bg9 = display.newImage( sceneGroup, "ice1.png", 940, 420 )
bg10 = display.newImage( sceneGroup, "ice1.png", 1340, 420 )
bg11 = display.newImage( sceneGroup, "ice1.png", 1740, 420 )
peng = display.newImage( sceneGroup, "peng.png", 80, 201)
physics.addBody( peng, "dynamic", { density=.18, bounce=0.1, friction=.5, radius=55 } )
Runtime:addEventListener( "enterFrame", enterFrame )
...
end
function scene:destroy()
Runtime:removeEventListener( "enterFrame", enterFrame )
end
function scene:hide( event )
local sceneGroup = self.view
local phase = event.phase
if phase == "will" then
-- Code here runs when the scene is still off screen (but is about to come on screen)
elseif phase == "did" then
-- Code here runs when the scene is entirely on screen
applyForceToPenguin = false
end
end
scene:addEventListener( "hide", scene )
scene:addEventListener( "destroy", scene )
Have a nice day:)
I am relatively new to d3js, and trying to create a visualization of my quartet's concert schedule using a map. My first attempt works great in a desktop chrome browser and desktop safari browser.
On my android device in mobile chrome, the map renders the entire globe incorrectly except for the United States.
http://test.chiaraquartet.net/topo/index.html
Any insight into what I am doing wrong/if there is a bug in d3 would be appreciated.
Here is the code in question:
var center = [90, -38.7],
ratio = window.devicePixelRatio || 1,
graticule = d3.geo.graticule(),
width = 500,
height = 500,
degrees = 180 / Math.PI,
projection = d3.geo.orthographic()
.scale(height / 2 - 1)
.rotate(center)
.translate([width / 2, height / 2])
.clipAngle(90)
.precision(.1)
var graticule = d3.geo.graticule()()
// Round to integer pixels for speed, and set pixel ratio.
function roundRatioContext(context) {
return {
moveTo: function(x, y) { context.moveTo(Math.round(x * ratio), Math.round(y * ratio)); },
lineTo: function(x, y) { context.lineTo(Math.round(x * ratio), Math.round(y * ratio)); },
closePath: function() { context.closePath(); }
};
}
var canvas = d3.select("body").append("canvas")
.attr("width", width * ratio)
.attr("height", height * ratio)
.style("width", width + "px")
.style("height", height + "px")
var c = canvas.node().getContext("2d");
var path = d3.geo.path()
.projection(projection)
.context(roundRatioContext(c));
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.append('g')
var textbox = d3.select("body").append("div")
.style('position', 'absolute')
.attr('class', 'popup')
.classed('hidden', true)
var sphere = svg.append("path")
.datum({type: "Sphere"})
.attr("id", "sphere")
.attr("d", path)
var runner = queue()
.defer(d3.json, 'world.json')
.defer(d3.xhr('/concertrpc.php')
.header('content-type', 'application/json')
.post, JSON.stringify({
params: [],
id: 1
}))
.await(function(error, world, info) {
if (error) return console.error(error);
var features = topojson.feature(world, world.objects.states)
var countries = topojson.feature(world, world.objects.countries)
console.log(world)
var concerts = JSON.parse(info.responseText)
if (concerts.error) {
console.log(concerts.error)
return
}
concerts = concerts.result.concerts
console.log(concerts)
var globe = {type: "Sphere"},
graticule = d3.geo.graticule()(),
countries = topojson.feature(world, world.objects.countries),
states = topojson.feature(world, world.objects.states),
country_borders = topojson.mesh(world, world.objects.countries, function(a, b) { return a !== b }),
state_borders = topojson.mesh(world, world.objects.states, function(a, b) { return a.id !== b.id }),
temp_context
temp_context = path.context()
path.context(null)
svg.selectAll('.concert')
.data(concerts, function(d) { return d.properties.id })
.enter().append("path")
.attr('class', 'concert')
.attr('d', path)
.on('mouseover', concertMouseover)
.on('mouseout', function(d) {
textbox.classed('hidden', true)
})
path.context(temp_context)
d3.select('body').append('div').append('button')
.attr('type', 'button')
.text('This season')
.on('click', function() {
getConcertData('This season')
})
var zoom = d3.geo.zoom()
.projection(projection)
.duration(function(S) { return 2000 * Math.sqrt(S); }) // assume ease="quad-in-out"
.scaleExtent([height / 2 - 1, Infinity])
.on("zoom", function() {
projection.clipAngle(Math.asin(Math.min(1, .5 * Math.sqrt(width * width + height * height) / projection.scale())) * degrees);
c.clearRect(0, 0, width * ratio, height * ratio);
c.strokeStyle = "#999", c.lineWidth = .25 * ratio, c.beginPath(), path(graticule), c.stroke();
c.fillStyle = "#69d2e7", c.beginPath(), path(countries), c.fill();
c.fillStyle = "#00f", c.beginPath(), path(states), c.fill();
c.strokeStyle = "#fff", c.lineWidth = .5 * ratio, c.beginPath(), path(country_borders), c.stroke();
c.strokeStyle = "#fff", c.lineWidth = .5 * ratio, c.beginPath(), path(state_borders), c.stroke();
c.strokeStyle = "#000", c.lineWidth = .5 * ratio, c.beginPath(), path(globe), c.stroke();
temp_context = path.context()
path.context(null)
svg.selectAll("path").attr("d",path);
path.context(temp_context)
})
//.on("zoomend", transition);
canvas
.call(zoom)
.call(zoom.event);
sphere
.call(zoom)
function transition() {
zoomBounds(projection, states.features[30]);
canvas.transition()
.ease("quad-in-out")
.duration(2000) // see https://github.com/mbostock/d3/pull/2045
.call(zoom.projection(projection).event);
}
function zoomBounds(projection, o) {
var centroid = d3.geo.centroid(o),
clip = projection.clipExtent();
projection
.rotate([-centroid[0], -centroid[1]])
.clipExtent(null)
.scale(1)
.translate([0, 0]);
var b = path.bounds(o),
k = Math.min(1000, .45 / Math.max(Math.max(Math.abs(b[1][0]), Math.abs(b[0][0])) / width, Math.max(Math.abs(b[1][1]), Math.abs(b[0][1])) / height));
projection
.clipExtent(clip)
.scale(k)
.translate([width / 2, height / 2]);
}
})
function concertMouseover(d) {
var loc = projection(d3.select(this).datum().geometry.coordinates)
textbox.style('top', loc[1] + "px")
textbox.style('left', loc[0] + 15 + "px")
textbox.text(d.properties.title)
textbox.classed('hidden', false)
}
function getConcertData(request) {
d3.xhr('/concertrpc.php')
.header('content-type', 'application/json')
.post(JSON.stringify({
params: [request],
id: 1
}), function(error, info) {
var concerts = JSON.parse(info.responseText)
if (concerts.error) {
console.log(concerts.error)
return
}
var c = svg.selectAll('.concert')
.data(concerts.result.concerts, function(d) { return d.properties.id })
c.transition()
.style('opacity', '1')
c.enter()
.append('path')
.attr('class', 'concert')
.attr('d', path)
.on('mouseover', concertMouseover)
.on('mouseout', function(d) {
textbox.classed('hidden', true)
})
c.exit().transition()
.duration(1000)
.style('opacity', '0')
.remove()
})
}
I'm not sure what was causing the problem, but the culprit was in the topojson file generated by my attempts to combine a map of the countries of the world with a map of the states of the USA. I found a different map of the world to use, and now the map displays the same way on both the phone and the desktop.
trying to use slide menu from function https://coronalabs.com/blog/2014/04/08/widgets-creating-a-sliding-panel/
I followed exactly the suggested code and I created a panel with 3 texts and one button. Then I added an event to the button to close the panel, but it does not work. Cannot understand why..:(. Here is the code:
local panel = widget.newPanel
{
location = "left",
--onComplete = panelTransDone,
width = display.contentWidth * 0.8,
height = display.contentHeight * 0.8,
speed = 500,
--inEasing = easing.outBack,
outEasing = easing.outCubic
}
panel.background = display.newRect( 100, -50, 900, 730 )
panel.background:setFillColor( 0.1, 0.1, 0.1, 0.9 )
panel:insert( panel.background )
panel.item1 = display.newText( "GAME DESCRIPTION", 0, 0, native.systemFontBold, 40 )
panel.item1:setFillColor( 1, 1, 0 )
panel.item1.x = -95
panel.item1.y = -350
panel:insert( panel.item1 )
panel.item2 = display.newText( "SET SOUNDS", 0, 0, native.systemFontBold, 40 )
panel.item2:setFillColor( 1, 1, 0 )
panel.item2.x = -170
panel.item2.y = -250
panel:insert( panel.item2 )
panel.item3 = display.newText( "CHECK SCORE", 0, 0, native.systemFontBold, 40 )
panel.item3:setFillColor( 1, 1, 0 )
panel.item3.x = -150
panel.item3.y = -150
panel:insert( panel.item3 )
panel.item4 = display.newText( "CLOSE", 0, 0, native.systemFontBold, 40 )
panel.item4:setFillColor( 1, 1, 0 )
panel.item4.x = -230
panel.item4.y = -50
panel:insert( panel.item4 )
local bottoneex = widget.newButton
{
--defaultFile = "play.png",
label="ESCI",
labelColor =
{
default = { 1, 1, 0, 255 },
},
font = native.systemFont,
fontSize = 40,
emboss = false,
textonly = true,
onEvent = provap
}
bottoneex.x = -250
bottoneex.y = 50
panel:insert( bottoneex )
function apripanel()
panel:show()
panel:toFront()
end
function provap()
panel:hide()
end
My target is to build a slide menu by adding to this panel several menu items. How can I achieve that? I tried putting a button ( textonly = true ) but I am not sure...what if I add displaytext (as I did)? How can I add listeners to texts?
Sorry for silly questions but I am quit new to this language! :)
Thanks a lot for your help! Ubaldo
Hiding the menu works for me, maybe you use an old version of newPanel.lua, this should work for you.
main.lua
widget = require("widget")
require("newPanel")
BG = display.newRect(160,240,300,460)
BG:setFillColor( 0.1, 0.1, 0.1, 1.0 )
local panel = widget.newPanel
{
location = "left",
onComplete = panelTransDone,
width = display.contentWidth*0.8,
height = display.contentHeight,
speed = 500,
inEasing = easing.outBack,
outEasing = easing.outCubic
}
panel.background = display.newRect( 0, 0, 320, 480 )
panel.background:setFillColor( 0.3, 0.3, 0.3, 0.9 )
panel:insert( panel.background )
panel.item1 = display.newText( "Item1", 0, 0, native.systemFontBold, 10 )
panel.item1:setFillColor( 1, 1, 0 )
panel:insert( panel.item1 )
local function ButtonEvent1(e)
if ( "ended" == e.phase ) then
print( "Button 1" )
panel:show()
panel:toFront()
end
end
local function ButtonEvent2(e)
if ( "ended" == e.phase ) then
print( "Button 1" )
panel:hide()
end
end
local B1 = widget.newButton({left = 100,top = 200,id = "button1",label = "Show",onEvent = ButtonEvent1})
local B2 = widget.newButton({left = 100,top = 300,id = "button2",label = "Hide",onEvent = ButtonEvent2})
newPanel.lua
function widget.newPanel( options )
local customOptions = options or {}
local opt = {}
opt.location = customOptions.location or "top"
local default_width, default_height
if ( opt.location == "top" or opt.location == "bottom" ) then
default_width = display.contentWidth
default_height = display.contentHeight * 0.33
else
default_width = display.contentWidth * 0.33
default_height = display.contentHeight
end
opt.width = customOptions.width or default_width
opt.height = customOptions.height or default_height
opt.speed = customOptions.speed or 500
opt.inEasing = customOptions.inEasing or easing.linear
opt.outEasing = customOptions.outEasing or easing.linear
if ( customOptions.onComplete and type(customOptions.onComplete) == "function" ) then
opt.listener = customOptions.onComplete
else
opt.listener = nil
end
local container = display.newContainer( opt.width, opt.height )
if ( opt.location == "left" ) then
container.anchorX = 1.0
container.x = display.screenOriginX
container.anchorY = 0.5
container.y = display.contentCenterY
elseif ( opt.location == "right" ) then
container.anchorX = 0.0
container.x = display.actualContentWidth
container.anchorY = 0.5
container.y = display.contentCenterY
elseif ( opt.location == "top" ) then
container.anchorX = 0.5
container.x = display.contentCenterX
container.anchorY = 1.0
container.y = display.screenOriginY
else
container.anchorX = 0.5
container.x = display.contentCenterX
container.anchorY = 0.0
container.y = display.actualContentHeight
end
function container:show()
local options = {
time = opt.speed,
transition = opt.inEasing
}
if ( opt.listener ) then
options.onComplete = opt.listener
self.completeState = "shown"
end
if ( opt.location == "top" ) then
options.y = display.screenOriginY + opt.height
elseif ( opt.location == "bottom" ) then
options.y = display.actualContentHeight - opt.height
elseif ( opt.location == "left" ) then
options.x = display.screenOriginX + opt.width
else
options.x = display.actualContentWidth - opt.width
end
transition.to( self, options )
end
function container:hide()
local options = {
time = opt.speed,
transition = opt.outEasing
}
if ( opt.listener ) then
options.onComplete = opt.listener
self.completeState = "hidden"
end
if ( opt.location == "top" ) then
options.y = display.screenOriginY
elseif ( opt.location == "bottom" ) then
options.y = display.actualContentHeight
elseif ( opt.location == "left" ) then
options.x = display.screenOriginX
else
options.x = display.actualContentWidth
end
transition.to( self, options )
end
return container
end
I have managed to build a simple jQuery flash card game following an online tutorial, resulting in this code:
var eng2fr = {
from: null,
to: null,
suggester: {
i: 0,
words: [
[ "beer", "binouze" ],
[ "another beer", "une autre bière" ],
[ "crazy", "fou" ],
[ "What the heck?!", "c'est quoi ce délire" ],
[ "whatever", "n'importe quoi"]
],
next: function(){
return this.words[ ( this.i++ ) % this.words.length ];
}
},
init: function(el) {
this.bindSwipe( $( "#display" ) );
this.from = $( "#from" );
this.to = $( "#to" );
Events.listen( "card_next", $.proxy( this.next, this ) );
Events.listen( "card_flip", $.proxy( this.flip, this ) );
// Begin!
this.next();
},
next: function() {
var to = this.to,
from = this.from,
next = this.suggester.next(),
_this = this;
to.text( next[ 0 ] );
to.addClass( "push in current" );
from.addClass( "push out" ).one( "webkitAnimationEnd", function() {
from.text( next[ 1 ] );
from.removeClass( "current push out" );
to.removeClass( "push in" );
_this.from = to;
_this.to = from;
});
},
flip: function() {
var to = this.to,
from = this.from,
_this = this;
to.addClass( "flip in current" );
from.addClass( "flip out" ).one( "webkitAnimationEnd", function() {
from.removeClass( "current flip out" );
to.removeClass( "flip in" );
_this.from = to;
_this.to = from;
});
},
bindSwipe: function( el ) {
this.xStart = null;
this.downEvent = 'ontouchstart' in document.documentElement && navigator.appVersion.indexOf( 'iPhone OS ' ) > -1 ? 'touchstart' : 'mousedown';
this.upEvent = 'ontouchend' in document.documentElement && navigator.appVersion.indexOf( 'iPhone OS ' ) > -1 ? 'touchend' : 'mouseup';
var _this = this;
el.bind({
"touchstart mousedown": function( e ) {
if( e.type !== _this.downEvent ) return;
e.preventDefault();
_this.xStart = e.pageX && e.pageX > 0 ? e.pageX : e.originalEvent.changedTouches[ 0 ].pageX;
},
"touchend mouseup": function( e ) {
if( e.type !== _this.upEvent ) return;
var newX = e.pageX && e.pageX > 0 ? e.pageX : e.originalEvent.changedTouches[ 0 ].pageX;
var diff = newX - _this.xStart;
if( Math.abs( diff ) > 20) {
if( diff > 0 ){
Events.trigger( "card_previous", {} );
} else {
Events.trigger( "card_next", {} );
}
} else {
Events.trigger( "card_flip", {} );
}
},
"touchmove": function( e ) {
e.preventDefault();
}
});
}
};
As you can probably see, this code relies on mouse events for flipping and browsing through cards. I'm looking to implement jQuery mobile swipe/tap functions in place of these and I was wondering if someone could help me with that or at least point me in the right direction.
Also, I'm wondering if there is a simple way to detect a shake event and use this to select a random "card" / word pair?
Better I put my question as an example
I have the word FREE in a textview
I apply a strikethrough(EXC, EXC) span to the word FREE so I get FREE
Then I insert spaces between the letters and here comes the problem, because I get
F R E E but I want F R E E
It seems it only happens with spaces(I also tried "\u00a0"), because I also tried to insert a normal character (L) and there was no problem, the result was FLRLELE and not FLRLELE.
Any help is appreciated.
Thanks
Are you applying the span character by character, or to the entire substring?
I was having the same problem when I tried the former approach; but when I changed to the latter, it worked perfectly.
Here is an excerpt of the code I used.
The if conditions add a padding of strikethrough around the substrings.
// ↑↑↑ Several layers of loops... :-X
mySubString = textview_Text.substring ( indexStart, indexEnd );
for ( Integer charIndex = 0 ; charIndex < mySubString.length() ; charIndex++ )
{
charOfIndex = String.valueOf ( mySubString.charAt ( charIndex ) );
if ( charIndex > 0 )
{ charOfIndex_Previous = String.valueOf ( mySubString.charAt ( charIndex - 1 ) ); }
else
{ charOfIndex_Previous = charOfIndex; }
if ( charIndex < mySubString.length() - 1 )
{ charOfIndex_Next = String.valueOf ( mySubString.charAt ( charIndex + 1 ) ); }
else
{ charOfIndex_Next = charOfIndex; }
if ( ( charOfIndex.equals ( charSpace ) )
&& ( ! charOfIndex_Next.equals ( charSpace ) ) )
{ spanStart = indexFromPreviousLoop + charIndex; }
if ( ( ! charOfIndex_Previous.equals ( charSpace ) )
&& ( charOfIndex.equals ( charSpace ) ) )
{ spanEnd = indexFromPreviousLoop + charIndex + 1; }
}
mySpannable.setSpan ( new StrikethroughSpan (), spanStart, spanEnd, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE );