DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Refcards Trend Reports Events Over 2 million developers have joined DZone. Join Today! Thanks for visiting DZone today,
Edit Profile Manage Email Subscriptions Moderation Admin Console How to Post to DZone Article Submission Guidelines
View Profile
Sign Out
Refcards
Trend Reports
Events
Zones
Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
  1. DZone
  2. Data Engineering
  3. Databases
  4. PhoneGap Sample - Shake to Roll

PhoneGap Sample - Shake to Roll

Raymond Camden user avatar by
Raymond Camden
·
Jan. 17, 13 · Interview
Like (0)
Save
Tweet
Share
4.12K Views

Join the DZone community and get the full member experience.

Join For Free

Sorry for being so quiet lately. I've got three presentations this week and two brand new ones in two weeks. Mentally - it has been killing me. As with all things - it will pass. (And I think I'm building some good new presentations as well!) In the meantime, I thought I'd share a simple PhoneGap application I built for my four hour lab in Ohio a few days back.

The idea behind the application was to demonstrate the Accelerometer API. This returns movement information along three different axis.

By itself, the API is easy enough to use. What I was having difficulty with was coming up with a practical example of it. I thought I'd create a simple application that mimicked rolling a die. I'd start off by selecting a random number between one and six. I'd display this on the screen like so.

(What you're seeing here is the Ripple emulator. I plan on talking about this in a few days.)

The code for picking and displaying a random number was trivial.

function shuffleNumber() {
  var newNum = getRandomInt(1,6);
	document.querySelector("#die").innerHTML = newNum;
}

function getRandomInt(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

What was more difficult was figuring out how to respond to a shake. I mean, seriously, what is a shake, in code terms?

I did some Googling and discovered that most people simply tracked the X/Y/Z values and then compared them to historical values. I came up with this solution (which is based on what I saw so this isn't some brilliant discovery of mine).

var lastX,lastY,lastZ;
var moveCounter = 0;

function onDeviceReady() {
  shuffleNumber();
	navigator.accelerometer.watchAcceleration(gotMovement, errHandler,{frequency:200});	
}

function gotMovement(a) {
	if(!lastX) {
		lastX = a.x;
		lastY = a.y;
		lastZ = a.z;
		return;
	}

	var deltaX, deltaY, deltaZ;
	deltaX = Math.abs(a.x-lastX);
	deltaY = Math.abs(a.y-lastY);
	deltaZ = Math.abs(a.z-lastZ);

	if(deltaX + deltaY + deltaZ > 3) {
		moveCounter++;
	} else {
		moveCounter = Math.max(0, --moveCounter);
	}

	if(deltaX !=0 || deltaY != 0 || deltaZ != 0) console.log(deltaX,deltaY,deltaZ,moveCounter);

	if(moveCounter > 1) { shuffleNumber(); moveCounter=0; }

	lastX = a.x;
	lastY = a.y;
	lastZ = a.z;

}

I then used the Ripple emulator to test, and slowly tweaked the numbers until it "felt" right to me. You can see the result below.

For the full source code (there really isn't much to it), you can see the code in the GitHub repo for the presentation: DevelopingMobileAppsWithPhoneGap/tree/master/labs/6_accelerometer



application API Die (manufacturing) Testing Pass (software) Discovery (law) GitHub

Published at DZone with permission of Raymond Camden, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

Popular on DZone

  • Using JSON Web Encryption (JWE)
  • Kubernetes vs Docker: Differences Explained
  • What Is Policy-as-Code? An Introduction to Open Policy Agent
  • Beginners’ Guide to Run a Linux Server Securely

Comments

Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com
  • +1 (919) 678-0300

Let's be friends: