Click here to Skip to main content
15,794,374 members
Articles / Web Development / HTML

Exploration with Intel XDK

Rate me:
Please Sign up or sign in to vote.
5.00/5 (4 votes)
24 Aug 2014CPOL5 min read 23K   462   8   3
Article 5 for Android Tutorial Contest


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.


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


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


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

Image 1










Name the project.

Image 2








you  need to modify the index.html page for  accessing the GeoLocation API .I have used a project that is already described at (

Image 3


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 (

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

Image 4








Next we need  create the build for the project.

Image 5








On the build page click on build app now

Image 6







The app will be build

Build log is created

Image 7








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.



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

Image 8










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

Image 9

















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)

Image 10










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.


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.

Image 11










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



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.




The first update made


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

Written By
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

Microsoft MVA Fast Track Challenge Global Winner.
Ocutag App Challenge 2013 Finalist.

My work at Intel AppUp Store:-


Comments and Discussions

QuestionHow make html5 cross platform application having calculation ability as shown in example Pin
Member 1133870929-Dec-14 4:31
Member 1133870929-Dec-14 4:31 
GeneralThanks for the entry! Pin
Kevin Priddle27-Aug-14 7:29
professionalKevin Priddle27-Aug-14 7:29 
GeneralRe: Thanks for the entry! Pin
Abhishek Nandy27-Aug-14 21:30
professionalAbhishek Nandy27-Aug-14 21:30 

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

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