1 / 36

Creating Interfaces

Develop an interactive Hangman game using HTML5 and Google Maps API to engage users. The game will utilize geolocation for dynamic gameplay and provide educational content. Implement form validation examples for a customized user experience.

eddied
Download Presentation

Creating Interfaces

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. 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/html5workshop/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().getCenter())); 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.getElementById("place"), myOptions); brings up Google Maps in the div with id "place" using the parameters in myOptions.

  11. style, external script <style> header {font-family:Georgia,"Times New Roman",serif; font-size:20px; display:block; } </style> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <script language="Javascript">

  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. </script> </head> <body> <header id="header">Base location is your current geolocation</header> <div id="place" style="width:70%; height:70%"></div> <div id="answer"></div> Change base location: <br/> <form name="f" onSubmit=" return changebase();"> <input type="radio" name="loc" /> CUNY<br/> <input type="radio" name="loc" /> Purchase College<br/> <input type="radio" name="loc" /> Illinois Institute of Technology<br/> <input type="submit" value="CHANGE"> </form> </body> </html>

  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.meyer/html5workshop/geolocationdistance4.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. <button onClick="javascript:store();">Store base. </button> <button onClick="javascript:retrieve();">Restore last base. </button> <button onClick="javascript:changebasetomarker();">Change base location to last marker. </button> <br/>

  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 directionshttp://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 7th.

More Related