Best tools for making mobile applications

I tried to make a compass application for android using phonegap to check how far can I go with it. Phonegap is very powerful tool for making a mobile app that interacts with some site's API (eg. a twitter app) or that got usual interface and controls (forms, todo list, notes ..etc).
Let's try push phonegap to its limits trying to make a game or some graphical tool that's I choose a compass app.

I used a combination of CSS3 transform (to rotate the needle) and CSS3 transitions (to make rotation smooth), the code looks like this.

d=360.0-heading.magneticHeading;
// needle is the dom element for the needle image
needle.style.webkitTransform='rotate('+d+'deg)';
It worked perfectly with two exceptions, we need to "normalize" the angle to force it taking the shortest path. The screen flickers when changing orientation, this can be fixed by forcing the app into one orientation only (either portrait or landscape), this is normal for games and alike apps (by adding android:screenorientation="portrait" to the manifest).


android:screenorientation="portrait"

Doing animation is very CPU intensive, for my simple app, CSS transitions saved me a lot of  coding (and made my app much much lighter on CPU). Otherwise it would require setting a  time interval and doing animation there.

As I said in the previous post you can't use SVG because most mobiles in the market does not support it. You should either use canvas or use something that uses canvas at the backend like dojo.gfx.

If you have even more complicated things you should get out of web-related technologies.
Targeting android and iPhone you might want to check cocos2D and its sisters:

Comments

Post a Comment

Popular posts from this blog

How to defuse XZ Backdoor (or alike) in SSH Daemon

XZ Backdoor in SSH Background Someone planted a backdoor in XZ compression, which is believed to affect SSH. More details can be found. Although it was never shipped to production version of any distro. Even if you are using unaffected version I suggest you defuse any similar backdoors. https://www.openwall.com/lists/oss-security/2024/03/29/4 https://news.ycombinator.com/item?id=39865810 https://gist.github.com/thesamesam/223949d5a074ebc3dce9ee78baad9e27 https://www.redhat.com/en/blog/urgent-security-alert-fedora-41-and-rawhide-users The Kill Switch The backdoor has a kill switch, it does not activate if it detects that someone is observing it (debugger attached...etc). An easy way to defuse the backdoor is to just define TERM environment variable causing the backdoor to think it's being observed and it would disable itself hopefully this is not specific to this backdoor but any similar one.  mkdir /etc/systemd/system/sshd.service.d/ echo -e "[Service]\nEnvironment=TERM=xt
Read more

creating CSS3 animations

Introduction In the last posts we have shown how to create some animation using CSS3 transitions (to make buttons that animate moving object or to create an animated slider ). Transitions are triggered in Javascript by a timer or by some action handler (eg. "onclick") that apply some change (change left or change CSS class) and the change will be animated. In this post we will show how to create animations, just animations! For example one might need to animate an bouncing arrow next to some button or pulse current tab in menu. How To ? First you create a CSS selector (eg. a class called "bounce" or "animate_me"), then we need to pick a name for your animation let's say "bounce" .bounce { animation-name: bounce; -webkit-animation-name: bounce; -moz-animation-name: bounce; -ms-animation-name: bounce; -o-animation-name: bounce; } and then specify all animation factors you want like animation-duration in seconds iteration-cou
Read more

CSS3 transformation with Rotating gears example

Introduction Given a static image like this one We might apply many kinds of transformations on it using CSS3 "transform" like rotate and scale, skew or any transformation matrix. How to apply it ? You can rotate gear by 120 degrees using the following css .my_class { -webkit-transform:rotate(120deg); -moz-transform:rotate(120deg); -ms-transform:rotate(120deg); -o-transform:rotate(120deg); transform:rotate(120deg); } You may scale to be 50% smaller using a similar sytax: .my_class { -webkit-transform:scale(0.5); -moz-transform:scale(0.5); -ms-transform:scale(0.5); -o-transform:scale(0.5); transform:scale(0.5); } you may also specify different factor for X-axis and Y-axis using scale(X,Y); You may specify two transformations like this .my_class { -webkit-transform:rotate(120deg) scale(0.5); -mox-transform:rotate(120deg) scale(0.5); } Here is an example How to animating it ? we can use "@-moz-keyframes" and "@-web
Read more