1. Creating Interfaces Show form validation examples, Hangman. HTML5 with Google Maps API. Add in localStorage. Design pitfalls. Homework: Make proposal for your project. Bring earphones to next class.

2. Show homework form examples Hangman

3. Maps app Use Google Maps API to bring up map at actual current location. –geolocation Respond to clicking by placing a marker and calculating distance. Provide way to change to fixed set of locations or the last marker. http://faculty.purchase.edu/jeanine.meyer/html5 workshop/geolocationdistance2.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5 workshop/geolocationdistance2.html –need to give permission to Share Location

4. Opening screen

5. Brings up ….

6. After click on map

7. After choose CUNY

8. Mapping Google Maps API (and other applications) defines positions using special latitude/longitude data object Access to Google Map is created for a place in the HTML document, using specified map options HTML has a specification for doing geolocation. –navigator.geolocation produces latitude and longitude values

9. How to get positions? Google Maps –get to a map Browser location javascript:void(prompt('',gApplication.getMap().get Center())); OR Click on green beaker and enable the drop latlng marker –right click then normal click

10. Basics if (navigator.geolocation) checks if this object exists. Does NOT cause any errors. map = new google.maps.Map(document.getEle mentById("place"), myOptions); brings up Google Maps in the div with id "place" using the parameters in myOptions.

11. style, external script header {font-family:Georgia,"Times New Roman",serif; font-size:20px; display:block; }

12. standalone code if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(function(position) {doStuff(position.coords.latitude, position.coords.longitude); }); } else { if (document.getElementById("place")) { document.getElementById("place").innerHTML = "I'm sorry but geolocation services are not supported by your browser"; document.getElementById("place").style.color = "#FF0000"; }

13. variables var listener; var map; var markersArray =[]; var blatlng; var myOptions; var locations = [ [40.82276,-73.94806, "CUNY"], [41.04796,-73.70539,"Purchase College/SUNY"], [41.878928, -87.641926,"IIT"] ];

14. create/access map function doStuff(mylat, mylong) { blatlng = new google.maps.LatLng(mylat,mylong); myOptions = { zoom: 14, center: blatlng, mapTypeId: google.maps.MapTypeId.ROADMAP }; map = new google.maps.Map(document.getElementById("place"), myOptions); listener = google.maps.event.addListener(map, 'click', function(event) { checkit(event.latLng);}); }

15. response to click on map function checkit(clatlng) { var distance = dist(clatlng,blatlng); distance = Math.floor((distance+.005)*100)/100; var distanceString = String(distance)+" miles"; marker = new google.maps.Marker({ position: clatlng, title: distanceString, map: map }); markersArray.push(marker); document.getElementById("answer").innerHTML = "The distance from base to most recent marker is "+String(distance) +" miles."; }

16. distance function function dist(point1, point2) { //spherical law of cosines //var R = 6371; // km var R = 3959; // miles var lat1 = point1.lat()*Math.PI/180; var lat2 = point2.lat()*Math.PI/180 ; var lon1 = point1.lng()*Math.PI/180; var lon2 = point2.lng()*Math.PI/180; var d = Math.acos(Math.sin(lat1)*Math.sin(lat2) + Math.cos(lat1)*Math.cos(lat2) * Math.cos(lon2-lon1)) * R; return d; }

17. change base using radio buttons function changebase() { for(var i=0;i<locations.length;i++) { if (document.f.loc[i].checked) { doStuff(locations[i][0],locations[i][1]); document.getElementById("header").innerHTML = "Base location is "+locations[i][2]; } return false; }

18. Base location is your current geolocation Change base location: CUNY Purchase College Illinois Institute of Technology

19. Add persistent storage Use localStorage to save and recall the base location. REMEMBER: Firefox requires the program to run on a server! Chrome allows running locally. http://faculty.purchase.edu/jeanine.m eyer/html5workshop/geolocationdista nce4.htmlhttp://faculty.purchase.edu/jeanine.m eyer/html5workshop/geolocationdista nce4.html

20. Opening (after permission)

21. New base

22. Objective: add to maps app 3 buttons: store base, retrieve base stored, change base to last marker localStorage used name-value pairs. Do error checking! –check for ability to do localStorage –check if there is a stored time.

23. Strategy Three buttons, invoking store(), retrieve(), and changebasetomarker() Use try { } catch(e) { }. The code in try will NOT trigger an error, but if there is one, will go to catch. Also use typeof(localStorage) to test if this is defined.

24. Store base. Restore last base. Change base location to last marker.

25. function store() { if (typeof(localStorage) == "undefined") { alert("Browser does not recognize HTML local storage."); } else { try { localStorage.setItem("baselat",blatlng.lat()); localStorage.setItem("baselng",blatlng.lng()); localStorage.setItem("basename",basename); } catch(e) { alert("Error with use of local storage: "+e);} } return false; }

26. function retrieve() { if (typeof(localStorage) == "undefined") { alert("Browser does not recognize HTML local storage."); } else { try { oldlat= localStorage.getItem("baselat"); oldlng = localStorage.getItem("baselng"); oldname = localStorage.getItem("basename"); if (oldlat==null) { alert("No base stored");} else {doStuff(Number(oldlat),Number(oldlng)); basename = oldname; document.getElementById("header").innerHTML = "Base location is "+basename; } } catch(e) { alert("Error with use of local storage: "+e);} } return false; }

27. changes base to marker function changebasetomarker() { if (lastmarker!="undefined") { doStuff(lastmarker.lat(),lastmarker.lng()); basename = "marker"; }

28. Comments Error checking good! Many GIS programs with common/similar features Need to determine where information goes –my locations array kept information in my JavaScript

29. Messy example Reasons/excuses THAT ARE VERY COMMON –application grew: piled on more features. –Technology driven rather than Need driven My need is/was to learn features and make available to students. Added directions http://faculty.purchase.edu/jeanine.meyer/ html5workshop/geolocationdistance5.html http://faculty.purchase.edu/jeanine.meyer/ html5workshop/geolocationdistance5.html

30. Anthropomorphic fallacy Term used to attributing human thought, feelings, habits to…animals, inanimate beings… NOT SURE HOW WIDESPREAD THIS IS/WAS: when doing robotics back at IBM Research, we used the term to assuming that the best way to automate something was to work directly from the manual way Consider: washing clothes at the stream

31. What is focus / unit of analysis Robotics / manufacturing example –Replace manufacturing station Versus –Redesigning the whole line

32. New interface design challenge Replicate manual way Replicate current/existing computer way with different hardware Do something totally different –IPod Change / reconsider what the problem is –Velcro for shoes

33. Abdominal report 1974! Doctor wants to analyze data gathered in emergency room and follow-up "Please don't make me ask for it in English. It is too complicated."

34. Discussion Examples?

35. HTML5 project Must have interaction. Must have objective / purpose. May be small / pilot of larger application –choosing from sets of 3 instead of tens or 100s or more –may be significant (reasoned) improvement on any of my examples Example: directions on how to do something, cooking, travel information, teaching something, soliciting information, survey –Note: Other courses focus on database and other middleware / server-side applications.

36. Homework Post proposal for your HTML5 project. –Proposal ASAP. I will respond with approval and/or suggestions. –Presentation with 1-pager (abstract, relevant screen shot, all sources used INCLUDING my examples) –Presentations on March 7 th.