1 / 53

Location Based Services Without the Cocoa

Location Based Services Without the Cocoa. Institutional Web Managers Workshop , 12 th July 2010 Ben Butchart, Murray King. This work is licensed under a Creative Commons Attribution-NonCommercial 2.0 England & Wales License . But note caveat. Introduction. Digimap Geo Mobile Scoping study

bikita
Download Presentation

Location Based Services Without the Cocoa

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

  2. Introduction • Digimap Geo Mobile Scoping study • Technical evaluation • User Engagement • Digimap 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/jllhxm1zzpdm • Final project report: http://mobilegeo.files.wordpress.com/2010/07/digimap-mobile-scoping-study-final-project-report1-1.doc • Thanks to JISC for funding.

  3. Workshop outline • Requirements 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

  4. Informal Requirements “…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.”

  5. Technical Requirements • Location: 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.

  6. Mobile App DevelopmentApproaches • 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.

  7. Technologies : Mobile Web • HTML5 Geolocation: web based access to location sensors. • HTML5 Canvas: manipulate images at pixel level • HTML5 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/

  8. Technologies : Native • iPhone: Objective-C and Cocoa Touch. • Blackberry: RIM • Symbian (Nokia): Symbian Foundation C libraries. • Android: Java (mostly) • AR – Wikitude

  9. Technologies : Hybrid • PhoneGap • W3C Widgets • QuickConnect • Rhodes • Appcelerator Titanium

  10. Memory Check… • HTML5 Geolocation: web based access to location sensors. • HTML5 Canvas: manipulate images at pixel level • HTML5 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.

  11. Requirements / Approach

  12. Requirements / Approach

  13. Build Your Own mobile Map App in 10 minutes • Yes, really. 10 minutes. • We need some maps – Google? • No. Everyone does that. We’ll use some OS Open Data instead. • We’ll use the OpenLayers API • And Geolocation API

  14. Digimap Open Stream ( New Edina Service) Edina provide WMS Service Ordnance Survery OpenData You can register for your API key here (free and unrestricted use for ac.uk) http://osopen.edina.ac.uk

  15. Digimap Open Stream WMS Ordnance Survey OpenData maps Miniscale 1:250000 Colour Raster Vector Map District (raster) OS StreetView

  16. Digimap Open Stream WMS

  17. Digimap Open Stream WMS example 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

  18. Digimap Open Stream WMS example 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

  19. Digimap Open Stream OpenLayers Example http://osopen.edina.ac.uk/help/map

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

  21. Digimap Open Stream OpenLayers Example Code var 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]);

  22. OpenLayers Example: convert latlong <script type="text/javascript" src='coordomatic1.js'></script> 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);

  23. What’s different in mobile OpenLayers? Use of Geolocation API if(typeof(navigator.geolocation) != "undefined"){ navigator.geolocation.getCurrentPosition(foundLocation, handleError); } Some stylesheet stuff <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-status-bar-style" content="black" /> <meta name="viewport" content="minimum-scale=1.0, width=device-width, ..> Touch Controls <script type="text/javascript" src="touch3.js" ></script> this.touchhandler = new TouchHandler(map, 2);

  24. Geolocation API if(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("<p>" + "Attempt to get location failed: " + positionError.message + " </p>") ; };

  25. HTML5 Canvas • Manipulate images at pixel level • Can draw on images and retrieve pixel data http://mobilegeo.wordpress.com/2009/11/04/ html5-canvas-for-mobile-apps/

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

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

  28. HTML5 Canvas • Retrieve pixel data “the 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

  29. HTML5 Canvas: Data Extraction • Data extraction getImageData 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 !!! Demo feature selection using HTML5 canvas http://delivr.com/11cis

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

  31. HTML5 Elevation Demo 2 Elevation 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

  32. HTML5 Canvas: Other data extraction use cases • Feature 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 maps • Con: Mobile processors too slow for standard techniques such as Sobel and Colour Histogram. • Active research area for Edina.

  33. HTML5 Local Storage • aka HTML5 Database • Provides SQL-lite database in browser. Can be used by applications to cache data. http://delivr.com/11clh http://unlock.edina.ac.uk/mobile.html

  34. Augmented Reality “enhancing the user’s 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.” * Priestnall, G. (2009) 'Landscape Visualization in Fieldwork', Journal of Geography in Higher Education, *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.79

  35. AR – the virtual limb • Chris 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 SGroup Coordination and Negotiation through Spatial Proximity Regions around Mobile Devices on Augmented Tabletops3rd IEEE Workshop on Tabletops and Interactive Surfaces (IEEE Tabletop 2008), Amsterdam, the Netherlands, October 1-3, 2008

  36. Ubiquitous AR • New generation of “AR browsers” for iPhone, Android etc. (Layar, Wikitude) • Building Anatomy App Chris Lowry 3d model Superimpose on building facade View in Layar browser at 29m

  37. Ubiquitous AR - issues • GPS accuracy – 3d image recognition • Simplifying 3d models • Lack of standards ( but innovation perhaps more important at the moment?) • Publishing platform?

  38. Layar: architecture

  39. Layar: set up developer account

  40. Layar: create a Layar http://publishing.layar.com/publishing/layers/

  41. Layar publishing

  42. Layar test: getPointOfInterest http://publishing.layar.com/publishing/test/iwmw2010demo1

  43. Layar testing: POI search failed Probably a JSON format error

  44. Check JSON with JSONLint http://www.jsonlint.com/

  45. Layar testing: Success!

  46. 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 }

  47. Points of Interest – go find ‘em!

  48. Points of Interest – go find ‘em! Endcliffe Vale Flats Longitude -1.508054 Latitude 53.371387 Froggatt Longitude -1.508688 Latitude 53.371907 The Edge Longitude -1.507504 Latitude 53.372711 Jonus Court Longitude -1.506040 Latitude 53.371751 Jonus court

  49. Contrasting approaches to App Development Web App Native 3 4 2 Speed AR Basic location [1] Speech control No 3rd party API Easy deployment / publishing Data cache Quality assurance Open Standards Full access to sensors [3] Touch control Developer happiness 1 5 6 7 Hybrid

  50. Contrasting approaches to App Development

More Related