SyntaxScrewer's Blog

August 5, 2013

Archiving Cordova/Phonegap 2.9 Project – file not found: /Users/…/../libCordova.a

Filed under: iOS,Mobile — geekymaira @ 9:40 am

Hey folks,

So recently we bumped into a weird issue while archiving a cordova 2.9 web project using xcode 4.6.3.
The stubborn error read as follows:

file not found: /Users/admin/…/libCordova.a

It was pretty apparent that it was some path issue. Even libCordova.a showed up highlighted in red.
After searching through a LOT of stackoverflow posts, we finally found a solution.

Follow these steps to fix this problem:

1. Go to project settings and Build Tab. Search for “Other Linker Flags”
2. Double click on the linker flags for Release and Change “$(TARGET_BUILD_DIR)/libCordova.a” to “$(BUILT_PRODUCTS_DIR)/libCordova.a”
3. Do the same for Debug
4. Clean and build archive again

Reference: http://stackoverflow.com/questions/17401478/libcordova-a-file-missing-in-phonegap-2-9
Reference: http://stackoverflow.com/questions/17351446/building-an-archive-for-xcode-4-6-release-with-phonegap-v-2-9-fails/17372031#17372031

Cheers!
SyntaxScrewer

May 2, 2012

PhoneGap – iPad – Disable app container scrolling

Filed under: iOS,Mobile,Uncategorized — geekymaira @ 12:42 am
Tags: , , , , , ,

Hey,

A common issue that one might face while building html/js phonegap applications for the iPad is that
when the application launches on the device, one can actually scroll it up/down and left/right. The scrolling
reveals the fact that phonegap loads all of it up in a webview container, which is not the best thing to
reveal to the end user.

The good thing is , that there is a pretty easy and straightforward fix for it.

The first thing to do is to add a few meta tags to your page.
Note: The 3rd one might affect the scrolling and the size. Other one’s can be ignored.
Are more useful if you’re running the app in device browser. Still no harm throwing em
in there!

<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name = "viewport" content = "user-scalable=no,width=device-width" />

Next in the tag add the following script block

<script type="text/javascript">
 document.ontouchmove = function(e){
	e.preventDefault();
 }
 </script>

That should do it 🙂

Cheers!
SyntaxScrewer

May 1, 2012

iPad – Mobile Safari – Resizes High Resolution Images to fit the browser window size.

Filed under: iOS — geekymaira @ 5:32 pm
Tags: , , , , , , ,

Hey guys,

I ran into an issue with Mobile Safari and its quirky behavior which forces a re size of a high resolution image.
The issue occurs even when doing any of the following simple things.

1) Load up the image as the body background
2) Load up the image as a div background
3) Load up the image in an img tag in the body.

In all the above, if the image resolution > that the browser’s it resizes the image to fit in.
In cases of the div/img, it resizes the div/img containers which cause the background-image/src to size automatically.

I kept searching for solutions online and found other important information pertaining to iPad web development
in the Apple Docs.

Lot of useful information there. I STRONGLY recommend that everyone goes through it.

The parts relevant to this post were found here :
Optimizing Content for Ipad Development – Apple Docs

Anyway, coming quickly to the solution – it was pretty straightforward. I’ll explain what worked for the body and the div background images.

Ok so this is how we had the body setup first (which didn’t work)

<html><head>
<style>
body{
background: URL("media/test.jpg") no-repeat;
}
</style></head>
<body></body>
</html>

The problem with the above is that the image does not load up in its original size. Safari Mobile scales it down.

The solution is to give the body a background-size in the CSS which equals the size of the image.

<html><head>
<style>
body{
background: URL("media/test.jpg") no-repeat;
background-size:1934px 1612px;
}
</style></head>
<body></body>
</html>

The following code creates issues for the background image on the div.

<html><head>
<style>
#img{
background: URL("media/test.jpg") no-repeat;
width:1934px;
height:1612px;
}
</style></head>
<body>
<div id="img"></div>
</body>
</html>

The issue with the above is the same – The background image resizes.
The problem here doesn’t get fixed by applying a background-size to the css.
You also need to set the widht and height to a 100% each!!

<html><head>
<style>
#img{
background: URL("media/test.jpg") no-repeat;
background-size:1934px 1612px;
width:100%;
height:100%;
}
</style></head>
<body>
<div id="img"></div>
</body>
</html>

The above fixes the div too…
But another problem arises… What if you don’t want the div to be a 100% and a 100% width? What if you want to show only a part of the background image?
Like in case you’re loading up or animating a spritesheet? How does all of that work then ?

Well, you take a container div which houses your image div. And on the container div set the desired size you want.
Everything then falls in place.

Here’s how :

<html>
<head>
<style>
#imgHolder{
width:320px;
height:320px;
}
#img{
background: URL("media/test.jpg") no-repeat;
background-size:1934px 1612px;
width:100%;
height:100%;
}
</style>
<body>
<div id="imgHolder">
	<div id="img">
	</div>
</div>
</body>

Hope that helps!! I know its going to serve me as a reference next time I get stuck with iPad!

Cheers!

SyntaxScrewer

October 11, 2011

Fast Masked! Scrolling! MovieClips – iPAD

Filed under: Mobile — geekymaira @ 11:58 am

Hello people,

I was asked to develop a dynamic 360 degree product viewer for the iPAD using a PNG sequence. I created the component but it was slugging on the device. I wasn’t getting the 60FPS that I should
have. After brainstorming with a few colleagues, I came across a new  Greensock API that did the job BRILLIANTLY. They claim upto 1000% smoother animations.

It’s called BlitMask.
Here’s the link
http://www.greensock.com/blitmask/

Another method to do the same thing is using
https://github.com/theflashbum/BitmapScroller
Here’s an example by Lee BrimeLow  using the above.
http://www.leebrimelow.com/?p=2839

Other interesting links for Spriting/Blitting/Smooth Scrolling
http://www.greensock.com/throwprops/
http://www.gotoandlearn.com/play.php?id=140
http://gotoandlearn.com/play.php?id=141
http://gotoandlearn.com/play.php?id=142

Cheers!

SyntaxScrewer

 

 

Create a free website or blog at WordPress.com.