Click here to Skip to main content
Click here to Skip to main content

Tagged as

Go to top

Exploration with Intel XDK

, 24 Aug 2014
Rate this:
Please Sign up or sign in to vote.
Article 5 for Android Tutorial Contest

Introduction

This article covers building apps with GPS,Touch and Motion Sensors. I have used Intel XDK as IDE and HTML 5 and JavaScript to build the apps.The apps built here have used different demo project that are there in  Intel XDK.

Background

This is an attempt to bring in Three.js ,Crosswalk and WebGL touch examples to android platform. This app also uses Geolocation API to access the position of the user. This also touches a simple Accelerometer example.

Things that will be covered

 Using the flavor of cross platform IDE and then finalizing the  app for Android

HTML 5

Using HTML 5 to explore the opportunities of creating apps targeting to motion sensor and others.

The major part will show how to use HTML and Intel XDK to setup and compile apps for Android    Platform.

As I have already covered Intel XDK ,let me discuss it again it in brief .It is a cross platform IDE  from Intel which is free to use and can be used to build apps for different platforms. Intel  XDK allows you to simulate the app and then finalize it for the build.

What  I will be using   for  this tutorial

  • JavaScript Libraries
  • Three.js  :- to show the touch examples
  • The inbuilt CrossWalk  app to extend the app for Android
  • Geolocation API :-The inbuilt Demo for Accelerometer for Android in Intel XDK and extend it

Geolocation

Start  a new project  from Intel XDK and then start with a blank template

 

 

 

 

 

 

 

 

 

Name the project.

 

 

 

 

 

 

 

you  need to modify the index.html page for  accessing the GeoLocation API .I have used a project that is already described at (http://www.html5rocks.com/en/tutorials/geolocation/trip_meter/)

 

let's see how the author has implemented Geolocation API and how we integrate in the index.html page

I am using the Geolocation API from (http://dev.w3.org/geo/api/)

This Api allows us to find where user is and is an easy way to see how Geolocation works

Checking for the Geolocation object

Saving the project and checking it in emulator helps us to see how it behaves

 

 

 

 

 

 

 

Next we need  create the build for the project.

 

 

 

 

 

 

 

On the build page click on build app now

 

 

 

 

 

 

The app will be build

Build log is created

 

 

 

 

 

 

TIPS

Using Intel XDK we found that we can easily build a geolocation app for Android platform using the blank template. Further  we were able to simulate the app and then build the APK(which will be created at Cloud and then we download it).

It's an easy wish for a HTML 5 developer to create  an android app without doing anything out of the zone.

 

TOUCH

For the  touch example I will be using the Intel XDK plus the CROSSWALK build from the demo app to finalize the app. The basic thing here is I will be using Three.JS Library to create a good GUI experience for the project. The Crosswalk build for Android allows us to build WebGL  based apps to android  platform.

We start the project creation by using the demo that is already there in the Intel XDK that is the Crosswalk demo and then name it to our liking

 

 

 

 

 

 

 

 

 

we use two Three.js libraries(stats.min.js  and three.min.js)

as we have already seen in my previous article for Intel XDk we use the same understanding as declare the Java Script accordingly.

Now we need to a simulation of the project to see how the touch behaves

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

The simulation allows us to check how the project will behave when the apk is created. Here you can check the effective usage of Three.JS library

Now on the build menu there will be a popup that says the build should be of crosswalk platform for Android. The next menu will ask for that all Cordova  plugins are selected. Then click on build. There will be two builds for the project(one for X86 and other for ARM devices)

 

 

 

 

 

 

 

 

TIPS

The things we learnt in here is to bring to life WebGL with Android we need to have the crosswalk build for the app.  I can use a demo app as my base and then extend it to my liking to increase the functionality of the app. Intel XDK allows us to quickly create a touch enabled app without any hassle and keeping the basics of HTML 5 intact.

MOTION SENSOR

For this project I will be using the demo  that's given in  Intel XDK  for Accelerometer and modify it some changes.I will be using Accelerometer example the rolling can demo for the app.

I will change the image icons in the directory to give the feel for Bob(Codeproject frame)

after adding the images in the folder we get the following result as shown in simulator.

 

 

 

 

 

 

 

 

 

Now the build. Build will be the normal Android App .We are ready to get rolling with accelerometer.

 

TIPS

Easily we made changes to the simple images and I get a different looking app alltogether.So its easy to create accelerometer or motion sensor based app using HTML5 and JavaScript APIs.

References

 

History

The first update made

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Abhishek Nandy
Software Developer
India India
I am into software Development for less than a year and i have participated in 2 contests here at Codeproject:-Intel App Innovation Contest 2012 and Windows Azure Developer Challenge and been finalist at App Innovation contest App Submission award winner as well won two spot prizes for Azure Developer Challenge.I am also a finalist at Intel Perceptual Challenge Stage 2 with 6 entries nominated.I also won 2nd prize for Ultrabook article contest from CodeProject
Link:-
http://www.codeproject.com/Articles/523105/Ultrabook-Development-My-Way
 
Microsoft MVA Fast Track Challenge Global Winner.
Ocutag App Challenge 2013 Finalist.
 
My work at Intel AppUp Store:-
 
UltraSensors:-
http://www.appup.com/app-details/ultrasensors
UltraKnowHow:-
http://www.appup.com/app-details/ultraknowhow
Follow on   Google+

Comments and Discussions

 
GeneralThanks for the entry! PinstaffKevin Priddle27-Aug-14 6:29 
GeneralRe: Thanks for the entry! PinmemberAbhishek Nandy27-Aug-14 20:30 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web04 | 2.8.140916.1 | Last Updated 25 Aug 2014
Article Copyright 2014 by Abhishek Nandy
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid