Introduction
Recently, I was assigned to work on a new Android project for a pollution enforcement agency. Basically, the project itself is a traditional web database program; the challenging part of this project is the requirements for its client side program:
- The client program runs on Android devices (Android smartphones with Android OS 2.3+).
- The client program needs to take pictures and upload them to the backend database.
- The client program needs to read the barcodes on vendor's permits.
- The client program needs to record GPS locations of pollution sites.
- The client program needs to be easily deployed and maintained (20+ devices).
At beginning, the development team seemed to like to create an Android program from the scratches. However, most of the team members are web developers rather than Android programmers. The Android programming learning curve for some of them seems too steep. Also, the client program may be updated quite frequently, the deployment of a standalone Android program to 20+ devices may seem extra works for the project administrator.
To resolve the above issues, the team decided (assigned me) to implement an Android specific web browser which can expose the lower level Android hardware features (camera, barcode scanner, GPS, ...) to the upper level web programmers through JavaScript interface. The web programmers can continue to use their favored HTML, JavaScript, CSS, PHP, and MySQL to complete the whole project.
After this project completed, I continued to refine some parts of my browser and wrapped it as a new Android program - "Togosoft Device Browser". In the rest of this article, I will focus on "how to use the browser" rather than "how to implement the browser" (I may address this topic in another article). The following figure illustrates the basic features of the browser. If anyone interests to learn it more, please visit http://www.togosoft.com/TDB for details.
Setting Up
- "Togosoft Device Browser" can be downloaded from Google Play (previous Android Market), and installed to your Android device.
- "Togosoft Device Browser" doesn't need any special setup. It runs as a regular mobile web browser.
User Interface
- [Back] to the previous web page.
- [Forward] to the next web page.
- [Menu] to display the browser menu.
- [Address Bar] to display or enter the web page address. Items (1), (2), (3), and (4) are on the browser toolbar.
- [Menu]/[Address] to enter the web page address.
- [Menu]/[Bookmarks] to access the browser bookmarks.
- [Menu]/[Reload] to reload the current web page.
- [Menu]/[Orientation] to change the browser orientation.
- [Menu]/[Toolbar] to turn on/off the browser toolbar.
- [Menu]/[Console] to display the web page source code, debugging messages, and error warnings.
Sample Programs
1. The first demonstration HTML program is to create a simple barcode scanner.
01 <html>
02 <title>Barcode</title>
03 <script type="text/javascript" src="TogosoftDeviceBrowser.js"></script>
04
05 <body>
06 <div id="output">
07 Barcode : <input type="text" id="barcode" size="24"><br><br>
08 <input type="button" value="Scan Barcode" onclick=ScanBarcode()>
09 </div>
10 </body>
11
12 <script>
13 if (!$device || !$device.hasCamera())
14 {
15 document.getElementById("output").innerHTML="No Camera found.";
16 }
17
18 function ScanBarcode()
19 {
20 $device.scanBarcode(function(barcode)
21 {
22 document.getElementById("barcode").value=barcode;
23 });
24 }
25 </script>
26
27 </html>
- [Line 03]: TogosoftDeviceBrowser.js file is required to access Android device features.
- [Line 13]: $device is defined and created if the current HTML program is running inside Togosoft Device Browser, and TogosoftDeviceBrowser.js file is loaded. Also this line checks if the device has a camera.
- [Line 20]: Scan the barcode, and pass the result though the callback function.
2. The second demonstration HTML program is to get the list of sensors from the current device.
01 <html>
02 <title>Sensor List</title>
03 <script type="text/javascript" src="TogosoftDeviceBrowser.js"></script>
04
05 <body>
06 <div id="output"></div>
07 </body>
08
09 <script>
10 if (!$device)
11 {
12 document.getElementById("output").innerHTML="No sensor found.";
13 }
14 else
15 {
16 var sensors=$device.getSensorList();
17 var html="<table border='1'>";
18 for (var i=0;i<sensors.length;i++)
19 {
20 html+="<tr><td>"+sensors[i]+"</td></tr>";
21 }
22 html+="</table><br><br>";
23 document.getElementById("output").innerHTML=html;
24 }
25 </script>
26
27 </html>
- [Line 03]: TogosoftDeviceBrowser.js file is required to access Android device features.
- [Line 10]: Check if $device is defined and created.
- [Line 16]: Get an array of sensor information from Android device.
Final Words
"Togosoft Device Browser" acts as a bridge between Android device and the regular web browser. It allows most of web developers to take advantages of Android device hardware, sensor, and service features without installing Android SDK and even knowing Android programming. The browser is a simple but powerful tool to use for web application development. It supports standard HTML5 and JavaScript interfaces. If you can code your web programs in jQuery, there is no reasons that you can't implement your Android web apps with "Togosoft Device Browser" in minutes. Hope you can try it soon.
