Embed Size (px)
Citation preview
Title
Computer Science 767WComputer Science 767WFall 2007Fall 2007
Interactive Data Interactive Data VisualizationVisualization
Lecture #03Lecture #0312-Sep-200712-Sep-2007
Colin Ware
Kurt Schwehr
Last class
• The Google Earth User Interface
• Creating a basic Placemark/Thumbtack
Class #03
• Clouds
• KML in Google Maps
• HTML/KML detail
• Color/Style
• Lines
Course time change?
• Can we move the class to 1:00-2:20?
How many people have used Google Earth before this
class?
Course Web Pages
• Google Earth: – http://vislab-ccom.unh.edu/~schwehr/Classes/2007VisCourse – [email protected]
• Human Perception for Information Display: – http://ccom.unh.edu/vislab/VisCourse/
Jing
Camstudio
Cloud Demo
http://www.barnabu.co.uk/files/kmz/clouds-monthly-sequences-nl.kml
KML on Google Maps
Last time in Google Earth…
If we create the proper URL,KML can appear in google maps
• http://maps.google.com/?q=URL
• http://maps.google.com/?q=http://vislab-ccom.unh.edu/~schwehr/Classes/2007VisCourse/lectures/02/sunrise.kml
The picture does not work
<description> Sunrise over the Chase Ocean Engineering parking lot. <img src="sunrise.jpg”/></description>
Only have to keep track of one file with a kmz
Google Earth KML is XML
XML
• Header - “XML Declaration”– <?xml version="1.0" encoding="UTF-8"?>– XML character encoding– UTF-8 for English characters
Comments
• Anything within <!-- -->
• Comments do not nest
xmllint can tell us that something is wrong
http://xmlsoft.org/
XML Tags
• Must be balanced– Start: <atag>– End: </atag> <--- “/” marks the end– Can contain other tags, text, mixed
• <atag>some text</atag>• <atag><innertag></innertag></atag>• <a>text1<b>text2</b>text3</a>
• Can not mix tags– Wrong: <a><b></a></b>
XML documents must have a single “root” node
Oops…
Empty tags have a shorthand
• These are equivalent:– <foo></foo>– <foo/>
Capitalization matters for XML
Tags can have Attributes
• <atag attribute1=“some” attribute2=“thing”></atag>• Attributes are quoted text - termed “value”• Empty tags can also have attributes
– <anothertag anumber=“3.1415”/>
Basic XHMTL
• <html> - Root node for the document• <body> - Contains the contents of the document• <p>• Headers, <em>, and <strong>• Links• <img>• Tables
HTML versus XHTMLHyperText Markup Language
• HTML is SMGL ( Much more complicated than XML)– capitalization does not matter– tags may be unbalanced
• XHTML is XML• http://en.wikipedia.org/wiki/Xhtml
For Google EarthFocus on what would be in the body of XHTML
XHTML Text Module• http://www.w3.org/TR/xhtml-modularization/abstract_modules.html#s_textmodule
Paragraphs• Each paragraph of text is wrapped in a <p> tag• HTML ignores new lines. Blank lines do not give you a new paragraph.
Headers
• <h1> … <h6> provide headers that are progressively smaller
<em> and <strong>Marking sections of text
Links
• <a href=“URL”>Text or Image</a>
Images• <img src=“URL/>
Image with a link
TablesThe most complicated XHTML that you will do in this class
A table
Table Tags• <table> - defines a table
• <th> - table header
• <tr> - contains one row
• <td> - one table cell within a row
Table Attributes
• border=“1” - gives the lines
• bgcolor=“orange”
HTML Special Character Codes
• There are numeric and text codes for characters
• Allows for characters not on the keyboard or things that interfere with HTML or XML.
• e.g. “>” can be written “>” or “>”
• http://www.ascii.cl/htmlcodes.htm
Character codes
http://www.ascii.cl/htmlcodes.htm
This leaves out many HTML features!
• CSS - Cascading Style Sheets• Javascript/DHTML• Embedded objects (movies and others)• AJAX• All kinds of server side fun
– Servlets– Mod-python/mod-perl– And many, many more
Walk through basic KML tags
What is the entry for Document?
Placemark
Point
coordinates
CDATA to wrap HTMLDoes this look like fun?
Passing HTML straight through to Google Earth causes trouble!
With CDATA, HTML can stay HTML
Making a table in HTML
Putting that table into KML
Color/Style
Color
View Tag
Using a web browser to display XML/KML
Lines
Another Demo(if time permits)
http://www.barnabu.co.uk/ferris-wheel-animation-in-google-earth
Additional Notes on Grading of Assignment #01• HTML content must be valid XML
– If the text is wrapped in <?xml version=“1.0” encoding=“UTF-8”?><html><body>your text</body></text>, then it passes xmllint
– Do not worry about the KML formatting this time. It is okay to use the Google Earth dialog to create your placemarks.
– Your KMZ must work on any computer without internet. Double check that your images are in the kmz
Next Class
• Review Color and Style. More details
• Photo overlays
• Polygons
