Behavioural Technology Group | BTek

Latest Blogs from BTek

Tracking movement in Sencha Touch with progress updates from a native process

I made a simple GPS tracking app while working out how to send progress updates to a Sencha Touch application from a native process with PhoneGap.The main trick is to return with a “no result” status from the execute function.

\src\au\com\btek\tracker\BTekGPSPlugin.java

    public PluginResult execute(String action, JSONArray data, String callbackId)
    {
        this.callbackId = callbackId;

    	try
    	{
	        final LocationManager locationManager = (LocationManager) ctx.getSystemService(Context.LOCATION_SERVICE);
	        ctx.runOnUiThread(new RunnableLocationListener(this, callbackId, locationManager, getBestProvider(locationManager)));
    	}
    	catch (Exception ex)
        {
    		Log.e("BTek PhoneGap GPS Trakker", ex.getMessage());
        }

        PluginResult result = new PluginResult(Status.NO_RESULT);
        result.setKeepCallback(true);
        return result;
    }

And whenever a progress update is sent, the KeepCallback property on the result must be set to true.

    public void gotLocation (Location location)
    {
        try
        {
        	if (location != null)
        	{
	            JSONObject geoPosition = new JSONObject();
	            geoPosition.put("latitude", location.getLatitude());
	            geoPosition.put("longitude", location.getLongitude());

	            PluginResult result = new PluginResult(Status.OK, geoPosition);
	            result.setKeepCallback(true);
	            success(result, callbackId);
        	}
        }
        catch (Exception ex)
        {
            error(new PluginResult(Status.JSON_EXCEPTION, ex.getMessage()), callbackId);
        }
    }

The mapping code is relatively straight-forward if you know the Google Maps API. The map is centered on the new coordinates, a line is drawn to it from the last location and a marker is placed.

\assets\www\app\view\MyPanel.js

cordova.exec(
	function SuccessHandler (result) {

		// Center the map
		me.getComponent('map').setMapCenter({ latitude: result.latitude, longitude: result.longitude});

		if (MyApp.app.LastLatitude !== null && MyApp.app.LastLatitude !== '')
		{
			// Add a line to the map
			var flightPlanCoordinates = [
				new google.maps.LatLng(MyApp.app.LastLatitude, MyApp.app.LastLongitude),
				new google.maps.LatLng(result.latitude, result.longitude)
			];
			var flightPath = new google.maps.Polyline({
				path: flightPlanCoordinates,
				strokeColor: "#4682b4",
				strokeOpacity: 0.8,
				strokeWeight: 2
			});
			flightPath.setMap(me.getComponent('map').getMap());

			// Remove the old marker
			MyApp.app.Marker.setMap(null);
		}

		// Add a new marker
		var position = new google.maps.LatLng (result.latitude, result.longitude);
		MyApp.app.Marker = new google.maps.Marker({
			position: position,
			title: result.latitude + ', ' + result.longitude,
			icon: 'http://maps.google.com/mapfiles/ms/icons/blue-dot.png',
			map: me.getComponent('map').getMap()
		});
		MyApp.app.Marker.setMap(me.getComponent('map').getMap());

		MyApp.app.LastLatitude = result.latitude;
		MyApp.app.LastLongitude = result.longitude;

		},
	function ErrorHandler (error) {
		alert("Native call failed: " + error);
	},
	'BTekGPSPlugin', '', []);
}, this);

Download the APK: PhoneGap GPS Trakker or browse the source code

Social Share Counters

Posted in: mobile, mobile sensing, phonegap, sencha touch

Leave a Comment: (0) →

Leave a Comment