Improve LocationNetwork by adding observation eare in behavior

Signed-off-by: Liu, Xin <xinx.liu@intel.com>

diff --git a/tests/LocationNetwork/css/style.css b/tests/LocationNetwork/css/style.css
index 812c19e..342f9e5 100755 (executable)
--- a/tests/LocationNetwork/css/style.css
+++ b/tests/LocationNetwork/css/style.css
@@ -43,23 +43,24 @@ Authors:
 }
 
 .online_show {
-    margin: 2px;
-    margin-left: 5px;
-    margin-right: 5px;
+    margin: 1px;
+    height: 40px;
     border: #666666 solid thin;
-    background-color: #00FF00;
+    background-color: green;
+    color: white;
 }
 
 .offline_show {
-    margin: 2px;
-    margin-left: 5px;
-    margin-right: 5px;
+    margin:1px;
+    height: 40px;
     border: #666666 solid thin;
-    background-color: #FF9966;
+    background-color: red;
+    color: white;
 }
 
 #map_canvas {
-    width: 350px;
-    height: 350px;
+    background-color: #CCC;
+    height: 330px;
+    line-height:330px;
     margin: 5px auto;
 }

diff --git a/tests/LocationNetwork/index.html b/tests/LocationNetwork/index.html
index 2a722e2..9aec393 100755 (executable)
--- a/tests/LocationNetwork/index.html
+++ b/tests/LocationNetwork/index.html
@@ -46,14 +46,15 @@ Authors:
             <h1 id="main_page_title"></h1>
         </div>
         <div data-role="content">
-            <p>Make sure the networking is enabled, and the GPS is disabled.</p>
-            <div id="onLine" class="online_show" style="display:none"></div>
-            <div id="offLine" class="offline_show" style="display:none"></div>
-            <div class="position_font">My position</div>
-            <div id="latitudeDiv" class="attribute_show">Latitude:</div>
-            <div id="longitudeDiv" class="attribute_show">Longitude:</div>
-            <div id="errormessage"></div>
-            <div id="map_canvas"></div>
+            <div id="observateEare" style="border: #000 solid 1px;height: 442px;margin-bottom: 10px;">
+              <div id="onLine" class="online_show" style="display:none"></div>
+              <div id="offLine" class="offline_show" style="display:none"></div>
+              <div id="latitudeDiv" class="attribute_show">Latitude:</div>
+              <div id="longitudeDiv" class="attribute_show">Longitude:</div>
+              <div id="errormessage"></div>
+              <div align="center" id="map_canvas"></div>
+            </div>
+            <p class="ui-li-desc">* Make sure the networking is enabled, and the GPS is disabled.</p>
         </div>
         <div data-role="footer" data-position="fixed">
         </div>

diff --git a/tests/LocationNetwork/js/main.js b/tests/LocationNetwork/js/main.js
index 28988c5..1554ae9 100755 (executable)
--- a/tests/LocationNetwork/js/main.js
+++ b/tests/LocationNetwork/js/main.js
@@ -31,7 +31,22 @@ Authors:
 
 
 function initialize() {
+    $.mobile.loading('show', {
+        text: 'loading...',
+        textVisible: false,
+        theme: 'a',
+        textonly: false,
+        html: ""
+    });
     var connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection;
+    if(connection==undefined){
+        jQuery("#offLine").html("The navigator.connection is not supported");
+        $.mobile.loading('hide');
+        $("#offLine").show();
+        $("#onLine").hide();
+        printPosition("n/a","n/a");
+        jQuery("#map_canvas").html("No data");
+    }
     jQuery("#onLine").html("The current bandwidth is "+connection.bandwidth+" MB/s.");
     jQuery("#offLine").html("The current bandwidth is "+connection.bandwidth+" MB/s. Please check the network connection.");
     //browser state
@@ -39,8 +54,11 @@ function initialize() {
         $("#offLine").hide();
         $("#onLine").show();
     }else {
+        $.mobile.loading('hide');
         $("#offLine").show();
         $("#onLine").hide();
+        printPosition("n/a","n/a");
+        jQuery("#map_canvas").html("No data");
     }
 
     window.ononline = function () {
@@ -71,6 +89,7 @@ function initialize() {
     if(navigator.geolocation) {
         browserSupportFlag = true;
         navigator.geolocation.getCurrentPosition(function(position) {
+            $.mobile.loading('hide');
             var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
             location = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
             map.setCenter(location);
@@ -83,6 +102,7 @@ function initialize() {
         browserSupportFlag = true;
         var geo = google.gears.factory.create('beta.geolocation');
         geo.getCurrentPosition(function(position) {
+            $.mobile.loading('hide');
             var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
             location = new google.maps.LatLng(position.latitude,position.longitude);
             map.setCenter(location);
@@ -92,15 +112,19 @@ function initialize() {
         });
     // Browser doesn't support Geolocation
     } else {
+        $.mobile.loading('hide');
         browserSupportFlag = false;
         handleNoGeolocation(browserSupportFlag);
     }
 
     function handleNoGeolocation(errorFlag) {
+        $.mobile.loading('hide');
         if (errorFlag == true) {
             jQuery("#errormessage").html("<font color='red'>Geolocation service failed.</font>");
+            jQuery("#map_canvas").html("No data");
         } else {
             jQuery("#errormessage").html("<font color='red'>Not Support Geolocation.</font>");
+            jQuery("#map_canvas").html("No data");
         }
     }
 }