Location Based Services Without the CocoaInstitutional Web Managers Workshop , 12th July 2010Ben Butchart, Murray KingThis work is licensed under a Creative Commons Attribution-NonCommercial 2.0 England & Wales License. But note caveat.

IntroductionDigimap Geo Mobile Scoping studyTechnical evaluationUser EngagementDigimap pilot (in AppStores soon! Maybe?)Focus today for workshop on technical evaluation Our blog: http://mobilegeo.wordpress.com/Prezi mobile scoping study http://prezi.com/jllhxm1zzpdmFinal project report:http://mobilegeo.files.wordpress.com/2010/07/digimap-mobile-scoping-study-final-project-report1-1.doc

Thanks to JISC for funding.

Workshop outlineRequirements for LBS in teaching and learning. Technology concepts overview. Native, Mobile Web, Hybrid, HTML5 Geolocation, HTML5 Canvas, HTML5 Local Storage .Building your own mobile mapping client tutorial. Build your own mobile mapping client - practical exercise .HTML5 Canvas and LBS. Building your own AR app with Layar tutorial (10 mins).Building your own AR app with Layar practical exercise ( 10 mins ).Web Approaches pros and cons. Why Native?Sustainability

delivering a map to a smart phone device within a range of educational contexts including field trips in remote areas, where network connectivity may be limited. It was also anticipated that the application might assist data collection, for example, taking pictures of rocks during a field study. Informal Requirements

Technical RequirementsLocation: Must be able to obtain a location fix through device sensors (GPS).Touch: Must be able to take advantage of touch screen user gestures (e.g pinch to zoom in and out)Sensors: Should be able to access sensors and gadgets such as the camera, accelerometer and compass.Local Storage: Should be able to cache data so that application can be used in remote areas with limited connectivity.Portable: Should work on a range of devices.

Mobile App DevelopmentApproachesNative: programming languages and tools are unique to a particular device or operating system. Mobile Web: applications are delivered through the mobile web browser.

Hybrid: a lightweight web browser is integrated into a skeleton native app.

Technologies : Mobile WebHTML5 Geolocation: web based access to location sensors.HTML5 Canvas: manipulate images at pixel levelHTML5 Local Storage: SQLite database embedded in browser.HTML5 Cache: Cache web resources such as images, web pages and scripts.CSS Flash ( not supported by iPhone)AR browsers Layar / wikitude etc/

Technologies : NativeiPhone: Objective-C and Cocoa Touch.Blackberry: RIMSymbian (Nokia): Symbian Foundation C libraries.Android: Java (mostly)AR Wikitude

Technologies : HybridPhoneGapW3C WidgetsQuickConnect RhodesAppcelerator Titanium

Memory CheckHTML5 Geolocation: web based access to location sensors.HTML5 Canvas: manipulate images at pixel levelHTML5 Local Storage: SQLite database embedded in browser.HTML5 Cache: Cache web resources such as images, web pages and scripts.Native: programming languages and tools are unique to a particular device or operating system. Mobile Web: applications are delivered through the mobile web browser. Hybrid: a lightweight web browser is integrated into a skeleton native app.

Requirements / Approach

RequirementNativeMobile WebHybridLocation sensorsTouch gestures Sensors and gadgetsLocal storagePortable

Requirements / Approach

RequirementNativeMobile WebHybridLocation sensorsyesYes (via HTML5 geo location API)Yes (via HTML5 geo location API)Touch gesturesyes Yes (partial)Yes (partial)Sensors and gadgetsyesNoYes (usually via framework API)Local storageyesYes (via HTML5 Cache and Storage API)Yes (via HTML5 Cache and Storage API)Portableno Yes Yes (partial)

Build Your Own mobile Map App in 10 minutesYes, really. 10 minutes.We need some maps Google?No. Everyone does that. Well use some OS Open Data instead.Well use the OpenLayers APIAnd Geolocation API

Digimap Open Stream ( New Edina Service)http://osopen.edina.ac.ukOrdnance Survery OpenDataEdina provideWMS ServiceYou can register for your API keyhere (free and unrestricted use for ac.uk)

Digimap Open Stream WMSOrdnance Survey OpenData mapsMiniscale1:250000 Colour RasterVector Map District(raster)OS StreetView

Digimap Open Stream WMS

Digimap Open Stream WMS examplehttp://osopen.edina.ac.uk/openstream/wms?REQUEST=GetMap&SERVICE=WMS&VERSION=1.1.1&BBOX=325000,674000,326000,675000 &WIDTH=460&HEIGHT=640&SRS=EPSG:27700&FORMAT=image/png &LAYERS=osfree&CACHE=false&TOKEN=YOUR_KEY

http://osopen.edina.ac.uk/openstream/wms?REQUEST=GetMap&SERVICE=WMS&VERSION=1.1.1&BBOX=325000,674000,326000,675000 &WIDTH=460&HEIGHT=640&SRS=EPSG:27700&FORMAT=image/png &LAYERS=osfree&CACHE=false&TOKEN=YOUR_KEY Digimap Open Stream WMS example

Digimap Open Stream OpenLayers Examplehttp://osopen.edina.ac.uk/help/map

Digimap Open Stream OpenLayers Example CodeExample OpenLayers code here: http://osopen.edina.ac.uk/help/map

Digimap Open Stream OpenLayers Example Codevar os_options = { token: apikey, format: "image/png", layers: "osfree", cache: true};

map = new OpenLayers.Map('map', {controls: [], projection: new OpenLayers.Projection("EPSG:27700"), units: "m", maxExtent: bounds, resolutions: [1763.889,352.778,176.389,88.194.0.882,0.441]} );

var osfree = new OpenLayers.Layer.WMS( "Edina OS OpenData WMS","http://osopen.edina.ac.uk/openstream/wms", os_options );

map.addLayers([osfree]);

OpenLayers Example: convert latlong

var natgrid = new Edina.EPSG_27700() ;var latlong = natgrid.toLocalSystem(55.93682192813903 , -3.180231279418976

var lonLat = new OpenLayers.LonLat(latlong[1], latlong[0]) ; map.zoomTo(10) ; map.setCenter(lonLat);

Whats different in mobile OpenLayers?

this.touchhandler = new TouchHandler(map, 2);

Touch ControlsUse of Geolocation APIif(typeof(navigator.geolocation) != "undefined"){ navigator.geolocation.getCurrentPosition(foundLocation, handleError);}

Some stylesheet stuff

Geolocation APIif(typeof(navigator.geolocation) != "undefined"){

navigator.geolocation.getCurrentPosition(foundLocation, handleError);}

function foundLocation(position) {

lon = position.coords.longitude;lat = position.coords.latitude; var lonLat = new OpenLayers.LonLat(latlong[1], latlong[0]) ; map.setCenter(lonLat);}

function handleError(positionError) {$("#debug").append("" + "Attempt to get location failed: " + positionError.message + " ") ;

};

HTML5 CanvasManipulate images at pixel levelCan draw on images and retrieve pixel datathe real potential for HTML5 Canvas is to get inside the image itself enabling us to extract information from it and use that information to create our own graphics on the map http://mobilegeo.wordpress.com/2009/11/04/html5-canvas-for-mobile-apps/

HTML5 Canvasvar img = new Image(255,255) ; img.src = "http://.../testimg/test1.png" ; var newCanvas = document.getElementById("canvasimg") ; var ctx = newCanvas.getContext("2d") ; var newimg = canvasContext.drawImage(img, 0, 0); This demo uses the HTML canvas object. 1. Create canvas elementhttp://mobilegeo.wordpress.com/2009/11/04/html5-canvas-for-mobile-apps/Short url: http://delivr.com/11cic 2. Draw image on canvas

HTML5 CanvasBlogpost : http://mobilegeo.wordpress.com/2009/11/04/html5-canvas-for-mobile-apps/Short url: http://delivr.com/11cic if ( drawMode == true ) { var xy = getxy(e, newCanvas ) ;ctx.fillRect(xy.x,xy.y,5,5) ; return ; } 3. Draw graphic on canvas imagehttp://mab.edina.ac.uk/testimg/canvasiphone.htmlShort: http://delivr.com/11cj0

HTML5 CanvasRetrieve pixel datathe real potential for HTML5 Canvas is to get inside the image itself enabling us to extract information from it and use that information to create our own graphics on the map Anna Chapman:practitioner of steganography (allegedly)

HTML5 Canvas: Data ExtractionData extraction getImageDataDemo feature selection using HTML5 canvashttp://delivr.com/11cis

var xy = getxy(e, newCanvas ) ;var imgd = c.getImageData(xy.x, xy.y, 1 ,1 ) ;var pix1 = imgd.data ; var i = 0 ; var red = pix1[i]; // red var green = pix1[i+1]; // green var blue = pix1[i+2]; // blue !!! Browser Security restricts getImageData() to same domain as code !!!

HTML5 Elevation Demo 1Blog post: http://mobilegeo.wordpress.com/2010/03/01/integrating-openlayers-and-html5-canvas/http://delivr.com/11cir

HTML5 Elevation Demo 2Elevation demo: drawing a line on a map using HTML5 Canvas. At each point on the line, the height is extracted from the base terrain layer (previous slide) and plotted on the bar chart

HTML5 Canvas: Other data extraction use casesFeature selection: highlight features (parking lots) on map.Reduced Map Legend: Only shows symbols in view.Speech Summary: detect features and summarize. Accessible Maps?Pro: Can all be done offline and works for raster maps as well as vector mapsCon: Mobile processors too slow for standard techniques such as Sobel and Colour Histogram.Active research area for Edina.

HTML5 Local Storageaka HTML5 DatabaseProvides SQL-lite database in browser. Can be used by applications to cache data.http://unlock.edina.ac.uk/mobile.htmlhttp://delivr.com/11clh

Augmented Realityenhancing the users perception and interaction with the real environment by superimposing the real world with virtual information that appear to coexist in the same space as the real world. **F.Liarokapis, I.Greatbatch, D.Mountain, A.Gunesh, V.Brujic-Okretic, and J.Raper, "Mobile augmented reality techniques for geovisualisation, in Ninth International Conference on Information Visualisation (IV'05). IEEE, 2005, pp. 745-751. [Online]. Available: http://dx.doi.org/10.1109/IV.2005.79Priestnall, G. (2009) 'Landscape Visualization in Fieldwork', Journal of Geography in Higher Education,

AR the virtual limbChris Kray, U. Newcastle, Augmented Tabletop: Visual markers displayed on screen used for performing collaborative tasks.Could be used to share fieldtrip notes on map.[47] Kray C, Rohs M, Hook J, Kratz S Group Coordination and Negotiation through Spatial Proximity Regions around Mobile Devices on Augmented Tabletops 3rd IEEE Workshop on Tabletops and Interactive Surfaces (IEEE Tabletop 2008), Amsterdam, the Netherlands, October 1-3, 2008

Ubiquitous AR New generation of AR browsers for iPhone, Android etc. (Layar, Wikitude)Building Anatomy AppChris Lowry 3d modelSuperimpose on building facadeView in Layar browser at 29m

Ubiquitous AR - issuesGPS accuracy 3d image recognition Simplifying 3d modelsLack of standards ( but innovation perhaps more important at the moment?)Publishing platform?

Layar: architecture

Layar: set up developer account

Layar: create a Layarhttp://publishing.layar.com/publishing/layers/

Layar publishing

Layar test: getPointOfInteresthttp://publishing.layar.com/publishing/test/iwmw2010demo1

Layar testing: POI search failedProbably a JSON format error

Check JSON with JSONLinthttp://www.jsonlint.com/

Layar testing: Success!

Layar: Points of Interest JSON{ "hotspots": [ { "distance": 100, "attribution": "EDINA POI provider", "title": "Halifax Buildings, location = 53.371424, -1.505796", "lon": -1505796, "imageURL": "http://dlib-rainbow.ucs.ed.ac.uk/layar/img/halifax.jpg", "line2": "University of Sheffield", "line3": "Endcliffe Village", "actions": [ {"uri": "http://www.shef.ac.uk/accommodation/prospective/endcliffe", "label": "Open website" } ], "lat": 53371424, "type": 1, "id": "halifax" } ], "layer": "iwmw2010demo1", "errorString": "ok", "morePages": false, "errorCode": 0, "nextPageKey": null}

Points of Interest go find em!

Points of Interest go find em!Endcliffe Vale FlatsLongitude -1.508054Latitude 53.371387FroggattLongitude -1.508688Latitude 53.371907The EdgeLongitude -1.507504Latitude 53.372711Jonus CourtLongitude -1.506040Latitude 53.371751Jonus court

Contrasting approaches to App DevelopmentSpeedARBasic location [1]Speech controlNo 3rd party APIEasy deployment / publishingData cacheQuality assuranceOpen StandardsFull access to sensors [3]Touch controlDeveloper happiness1234567HybridWeb AppNative

Contrasting approaches to App Development

Why go Native? After all, Cocoa tastes good!Take advantage of latest developments in hardware / OS Full access to sensors and gadgetsEasier to integrate tasks such as viewing a map, taking a photo, reding QR code in one app. Hybrid app developers vulnerable to Tweak Creep. Hybrid frameworks might get shut out by some platforms (e.g. flash) No need to fight against web browser defaults ( text selection, resizing images)If charging for app, native probably best option

SustainabilityMobile apps technologies in constant flux. Frequent updates to OS, plaforms, hardware and consumption patterns.Not enough to have one iPhone developer who works on occasional mobile projects.Need constant development capacity. Consider mix of in-house ( mobile web) and outsourced ( native ) capacity. Need to appreciate full cost of mobile development including training, equipment and staff retention.

Thankyou!Check out geo mobile bloghttp://mobilegeo.wordpress.com/

And mobile scoping reporthttp://mobilegeo.files.wordpress.com/2010/07/digimap-mobile-scoping-study-final-project-report1-1.docThanks to all those taking part in scoping study and JISC for funding.