It`s a simple tutorial to make Serial Communication App using Phonegap/Cordova and basically a boiler plate application which connects your Smart Phone such as; Iphone and Android serially with your hardware device. I name it as
Simple Serial Communication App.
After the successful installation of NodeJS and Phonegap/Cordova, you guys can open the Command Prompt and start with me.
Create Project Directory
To create a new project of Phonegap/Cordova, we first need to navigate to the directory in which we want to have our Project using Command Line Interface and then we create our Project using this command.
phonegap create SimpleSerialApp com.dynamicremo.simpleserialapp SimpleSerialApp
Adding Android as a Platform, Build and Deploy
cordova platform add android
Here command Cordova is used instead of Phonegap, Cordova is soon to be form of Phonegap and Adobe is about to shift totally from Phonegap to Cordova. As our project has been created and Platform has been added, now Testing the Project to run as an Android Application.
Connect your device to your Computer/Laptop and navigate to your Project Directory. In my case its
"D:\SimpleSerialApp" and then Execute.
phonegap run android --device
You can also build your project via command line and can deploy it via .APK File also with this build command and you can get the .APK File at this hierarchy of the project
"D:\SimpleSerialApp\platforms\android\ant-build".
Here`s the output of the Snapshot from my Device.
phonegap build android
Plugin Installation
Moving forward in the Direction of Serial Communication, we will use a Phonegap Plugin
Cordovarduino. This provide a really cool and simple call backs to connect our Cross Platform Mobile Application with the Hardware via Serial Communication.
To download this plugin and enable it for the use, navigate to the Project Directory
"D:\SimpleSerialApp" and run this command.
cordova plugin add https://github.com/xseignard/cordovarduino.git
In result of this, you will get this Plugin in your Project`s Plugin Folder and you can see the new Directory
"D:\SimpleSerialApp\plugins\fr.drangies.cordova.serial".
Setting Up
Now to keep it simple and fluent, we will add a new HTML File to our "www" directory "D:\SimpleSerialApp\www".
I make it and named it as
"serial_communication.html". Now for the flow of the Application, after our First Build. We can see the Splash Screen Page with Phonegap Bot, this is actually an "index.html" page placed inside www folder of our Project Directory D:\SimpleSerialApp\www" and is rendered with its Javascript file named as
"index.js" from the Folder
"D:\SimpleSerialApp\www\js".
Open this file "index.js" and add these lines of code, so that we can redirect to our newly created Page "serial_communication.html" page and can continue with our Application.
window.setTimeout(function(){
window.location = "serial_communication.html";
}, 200);
This code will preserve the index.html with its functionality and will redirect us to "serial_communication.html" page after the delay of 200 milliseconds. Place it right after the
DeviceReady functionality. So the final Version will look like this.
// function, we must explicity call 'app.receivedEvent(...);'
onDeviceReady: function() {
app.receivedEvent('deviceready');
window.setTimeout(function(){
window.location = "serial_communication.html";
}, 200);
}
Now coming back to our newly added page for Serial Communication. Add its corresponding
CSS File "serial_communication.css" for Styling to the Folder "D:\SimpleSerialApp\www\css" and also the
JavaScript File "serial_communication.js" to the Folder "D:\SimpleSerialApp\www\js" and link them in the serial_communication.html page.
I have also added some
Jquery for usability purpose in InApp Browser, just like this.
<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.11.2/jquery-ui.js"></script>
<script type="text/javascript" src="js/jquery.ui.touch-punch.min.js"></script>
Now, coming to the HTML Elements and Application flow.
I am adding a simple HTML Button, this button will connect my Android Device with the Hardware for Serial Communication
<button id="connect_button">Serial Communication</button>
Implementing the functionality of this Button, Adding the Connection command to its corresponding JavaScript File "serial_communication.js".
$(document).ready(function(){
$("#connect_button").click(function(){
serial.requestPermission(
function success(){
// BaudRate for our Chip: 115200, Adruino: 9600
var opts = {"baudRate":115200, "dataBits":8, "stopBits":1, "parity":0, "dtr":false}
serial.open(opts,
function success(){
alert("Success");
}, function error(evt){
alert("Error");
}
);
},
function error(evt){
alert("Error");
}
);
});
});
This is the code, that need to be in your JavaScript File "serial_communication.js". Here, the Application is requesting to the device to allow Permission for the connection and then in its Success Callback we are opening the connection. I have used here BaudRate of 115200 because this is the supported rate for my ChipSet, usually there`s BaudRate with 9600 and 9600 is the one which is also suitable for the Arduino.
Now, its Build Time. I will again build my Project and directly deploy to my Device with the Command.
phonegap run android --device
After Build, final Testing of the Communication. We will be needing:
- Android Device
- Hardware ware preferably Arduino
- Connection Wire
- USB to Go
To Test our application, Connect Mobile Device with the Hardware via Cable and USB to Go converter and run the Application.
As soon as you are on the
serial_communication Page, you can see our attached Button with the Text "Serial Communication", Click that and you should get the HTML Prompt Box which will be Requesting for the Permission to Connect.
Accept that permission and then according to our JavaScript Callback Function we must get an Alert Box with the Message
"Success" in it.
That`s All, you have got your first Cross Platform Mobile Application with Serial Port Communication, Cheers :)
Further more You can continue with the changes and modification, with Connect Button, TextBox for Sending the Desired Command, associated Send Button, Close Connection button and nice logging of Sending and Receiving Messages with beautiful OnsenUI Components. Or you can simply fork/download the whole Project from my
GitHub.
For feedbacks and discussion, write a comment.
Thank You!
