• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Argon walkthru 1-26
 

Argon walkthru 1-26

on

  • 623 views

Argon for GTL

Argon for GTL

Statistics

Views

Total Views
623
Views on SlideShare
607
Embed Views
16

Actions

Likes
0
Downloads
3
Comments
0

2 Embeds 16

http://www.graffitos.org 13
http://graffitos.org 3

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • Significance of the screenXY tag Styleurl  defined earlier.
  • Testing the entire description part in a regular browser Significance of the left and top values
  • Called from within nextGrave function Initialization of variables
  • Why are we doing this when it doesn’t work?
  • Not added rewind and pause here.
  • This is what gets called first. Explanations should ideally start out here, for the javascript. Although, as they are students with CS background, they prob won’t need detailed explanations for js.
  • [side] resolves to front, back, top, bottom, left, right Shape supported – cube
  • Important that looping and sourceState values be correct Full url needed, relative not supported yet.
  • Describe where this shows up in the latest version.

Argon walkthru 1-26 Argon walkthru 1-26 Presentation Transcript

  • The Argon Browser Code for ‘The Voices of Oakland’
  • Code Structure
    • <Kml>
    • Document
    • ------Style
    • ------ScreenOverlay
    • ------------Description
    • ------------------Style
    • ------------------Javascript
    • ------------------Div
    • ------PhotoOverlay |
    • ------Placemark |  4 times for 4 placemarks
    • ------------Sound |
  • Style definition
    • <Style id=&quot;undecorated_style&quot;>
    • <BalloonStyle>
    • <displayMode>undecorated</displayMode> <!-- kml:displayModeEnum -->
    • </BalloonStyle>
    • <IconStyle>
    • <scale>1.1</scale>
    • <Icon>
    • <href>http://www.graffitos.org/harry/empty.png</href>
    • </Icon>
    • </IconStyle>
    • </Style>
  • ScreenOverlay
    • <ScreenOverlay>
    • <name>Test</name>
    • <description>
    • <![CDATA
    • … . |
    • … . |  html code
    • … . |
    • ]]>
    • </description>
    • <screenXY x=&quot;0.5&quot; y=&quot;0.22&quot; xunits=&quot;fraction&quot; yunits=&quot;fraction&quot;/>
    • <styleUrl>#undecorated_style</styleUrl>
    • </ScreenOverlay>
  • Screenshot of the Screen Overlay
  • Style (css) for ScreenOverlay
    • <style type=&quot;text/css&quot;>
    • Img {
    • border-style: none;
    • }
    • a:link {
    • text-decoration: none;
    • }
    • div.overlaystyle
    • {
    • width: 320px;
    • height: 50px;
    • left: -160px;
    • ...contd.
  • Style (css) for ScreenOverlay (contd.)
    • top: 0px;
    • font-family: sans-serif;
    • font-size: 14px;
    • background-color: rgba(0, 0, 0, 0.5);
    • border-width: 2px;
    • border-color: rgba(255, 255, 255, 1.0);
    • color: rgba(255, 255, 255, 1);
    • vertical-align: top;
    • text-align: left;
    • position: absolute;
    • }
    • </style>
  • Javascript
    • List of functions:
    • getCurrentPlacemark()
    • setCurrentPlacemark(PlacemarkName)
    • getNextPlacemark(PlacemarkName)
    • change_opacity(opacity, idSeed)
    • toggleInit()
    • toggleControl(buttonParam,StateParam)
    • toggletoStop(buttonID)
    • toggletoPlay(buttonID)
    • Audio functions: playSound, stopSound, pauseSound, rewindSound
    • nextGrave()
    • function flyTonextPlacemark(placemarkRef)
  • Javascript functions
    • // Hack to launch into experience directly
    • if (/WebKit/i.test(navigator.userAgent)) { // sniff
    • var _timer=setInterval(function() {if(/loaded|complete/.test(document.readyState))
    • {
    • clearInterval(_timer);
    • nextGrave(); // call the onload handler
    • }
    • }, 10);
    • }
  • Javascript functions (contd.)
    • var playState='play';
    • var stopState='stop';
    • var CurrentPlacemark;
    • var lastSound=null;
    • <!-- getter and setter for placemarks -->
    • function getCurrentPlacemark()
    • {
    • var curr_placemark = CurrentPlacemark;
    • return curr_placemark;
    • }
    • function setCurrentPlacemark(PlacemarkName)
    • {
    • var PlacemarkTemp = PlacemarkName;
    • CurrentPlacemark= PlacemarkTemp;
    • }
    • function getNextPlacemark(PlacemarkName)
    • {
    • var PlacemarkTemp = PlacemarkName;
    • var compton= &quot;Compton&quot;;
    • var nissen=&quot;Nissen&quot;;
    • var crumley=&quot;Crumley&quot;;
    • var garrett=&quot;Garrett&quot;;
    • var end=&quot;End&quot;;
    • if (PlacemarkTemp==null)
    • {
    • return compton;
    • }
    • else if (PlacemarkTemp==compton)
    • {
    • return nissen;
    • }
    • ...contd.
    Javascript functions (contd.)
    • else if (PlacemarkTemp==nissen)
    • {
    • return crumley;
    • }
    • else if (PlacemarkTemp==crumley)
    • {
    • return garrett;
    • }
    • else if (PlacemarkTemp==garrett)
    • {
    • return end;
    • }
    Javascript functions (contd.)
    • else
    • {
    • console.log(&quot;No next placemark found&quot;);
    • return null;
    • }
    • }
    • <!-- end of get and set functions -->
    Javascript functions (contd.)
    • <!-- Image and Button Manipulations --->
    • function change_opacity(opacity, idSeed) {
    • //change opacity (cross browsers)
    • var id = idSeed+'Btn';
    • var object = document.getElementById(id).style;
    • object.opacity = (opacity / 100);
    • object.MozOpacity = (opacity / 100);
    • object.KhtmlOpacity = (opacity / 100);
    • object.filter = &quot;alpha(opacity=&quot; + opacity + &quot;)&quot;;
    • }
    Javascript functions (contd.)
    • function toggleInit()
    • {
    • toggletoPlay('life');
    • toggletoPlay('culture');
    • toggletoPlay('place');
    • stopSound(nextSound);
    • }
    • function toggleControl(buttonParam,StateParam)
    • {
    • change_opacity(100,buttonParam);
    • if (StateParam==playState)
    • {
    • toggleInit();
    • toggletoStop(buttonParam);
    • }
    • … contd.
    Javascript functions (contd.)
    • else if(StateParam==stopState)
    • {
    • toggleInit();
    • toggletoPlay(buttonParam);
    • }
    • }
    Javascript functions (contd.)
    • function toggletoStop(buttonID)
    • {
    • var cId=buttonID+'Btn';
    • var cLink=buttonID+'ID';
    • var cImg = document.getElementById(cId);
    • var cAnchor=document.getElementById(cLink);
    • var CsoundId=getCurrentPlacemark()+&quot;-&quot;+buttonID;
    • cImg.src=&quot;http://www.graffitos.org/oakland/stop_&quot;+buttonID+&quot;.png&quot;;
    • playSound(CsoundId);
    • lastSound=CsoundId;
    • cAnchor.onclick = function(){ toggleControl(buttonID,stopState); };
    • }
    Javascript functions (contd.)
    • function toggletoPlay(buttonID)
    • {
    • var cId=buttonID+'Btn';
    • var cLink=buttonID+'ID';
    • var cImg = document.getElementById(cId);
    • var cAnchor=document.getElementById(cLink);
    • var curr_placemark=getCurrentPlacemark();
    • var CsoundId = curr_placemark+&quot;-&quot;+buttonID;
    • cImg.src=&quot;http://www.graffitos.org/oakland/square_&quot;+buttonID+&quot;.png&quot;;
    • stopSound(CsoundId);
    • cAnchor.onclick = function(){ toggleControl(buttonID,playState); };
    • }
    Javascript functions (contd.)
    • <!-- Audio Functions --->
    • function playSound(soundId)
    • {
    • lastSound=soundId;
    • var mySound = KHARMA.getKMLElementById(soundId);
    • if (mySound)
    • mySound.play();
    • console.log(&quot;playing &quot; + soundId);
    • }
    • function stopSound(soundId)
    • {
    • var mySound = KHARMA.getKMLElementById(soundId);
    • if (mySound)
    • mySound.stop();
    • console.log(&quot;stopping &quot; + soundId);
    • }
    • <!-- End of Audio fn --->
    Javascript functions (contd.)
    • function nextGrave()
    • {
    • var currPlacemark = getCurrentPlacemark();
    • var nextPlacemark=getNextPlacemark(currPlacemark);
    • if(currPlacemark != null)
    • {
    • toggleInit();
    • }
    • flyTonextPlacemark(nextPlacemark);
    • }
    Javascript functions (contd.)
    • function flyTonextPlacemark(placemarkRef)
    • {
    • var featureId=placemarkRef+&quot;_geospot&quot;; var myFeature = KHARMA.getKMLElementById(featureId);
    • if (myFeature)
    • {
    • myFeature.flyToBalloon(0);
    • setCurrentPlacemark(placemarkRef);
    • var CsoundId = placemarkRef + &quot;-next&quot;;
    • playSound(CsoundId);
    • console.log(&quot;setting geoSpot &quot; + featureId);
    • }
    • }
    • </script>
    Javascript functions (contd.)
    • <div align=&quot;center&quot; class=&quot;overlaystyle&quot; id=&quot;overlay&quot;>
    • <table width=&quot;100%&quot; border=&quot;0&quot; style=&quot;text-align:center&quot;>
    • <tr>
    • <td>
    • <a href=&quot;#&quot; class=&quot;life&quot; id=&quot;lifeID&quot; name=&quot;lifeID“ onclick=&quot;toggleControl('life',playState)&quot; >
    • <img src=&quot;http://www.graffitos.org/oakland/square_life.png&quot; alt=&quot;Play Life Audio&quot; id=&quot;lifeBtn&quot; name=&quot;lifeBtn&quot; class=&quot;life&quot; width=&quot;50&quot; height=&quot;50&quot; border=&quot;0&quot; /></a>
    • </td>
    • <td>
    • <a href=&quot;#&quot; class=&quot;culture&quot; id=&quot;cultureID&quot; name=&quot;cultureID&quot; onclick=&quot;toggleControl('culture',playState)&quot; ><img src=&quot;http://www.graffitos.org/oakland/square_culture.png&quot; width=&quot;50&quot; height=&quot;50&quot; border=&quot;0&quot; alt=&quot;Play audio on Culture&quot; id=&quot;cultureBtn&quot; name=&quot;cultureBtn&quot; class=&quot;culture&quot; /> </a>
    Div block
    • <td>
    • <a href=&quot;#&quot; class=&quot;place&quot; id=&quot;placeID&quot; name=&quot;placeID&quot; onclick=&quot;toggleControl('place',playState)&quot; ><img src=&quot;http://www.graffitos.org/oakland/square_place.png&quot; width=&quot;50&quot; height=&quot;50&quot; border=&quot;0&quot; alt=&quot;Play place rleated audio&quot; id=&quot;placeBtn&quot; name=&quot;placeBtn&quot; class=&quot;place&quot; /></a>
    • </td>
    • <td>
    • <a href=&quot;#&quot; class=&quot;next&quot; id=&quot;nextID&quot; name=&quot;nextID&quot; onclick=&quot;nextGrave()&quot; ><img src=&quot;http://www.graffitos.org/oakland/square_arrow.png&quot; width=&quot;50&quot; height=&quot;50&quot; border=&quot;0&quot; id=&quot;nextBtn&quot; name=&quot;nextBtn&quot; class=&quot;next&quot; /> </a>
    • </td>
    • </tr>
    • </table>
    • </div>
    Div block (contd.)
    • <PhotoOverlay id=&quot;Compton_geospot&quot;>
    • <name>.</name>
    • <author>
    • <name>jenifer.vandagriff@gatech.edu</name>
    • </author>
    • <link href=&quot;http://en.wikipedia.org/wiki/Wilson_Lumpkin&quot;/>
    • <address>43-119 Foundry St NW Atlanta, GA 30313</address>
    • <Camera>
    • <TimeSpan>
    • <begin>2009-12-31T19:00:00-05:00</begin>
    • <end>2010-12-31T19:00:00-05:00</end>
    • </TimeSpan>
    • <longitude>-84.3745287160597</longitude>
    • <latitude>33.7474158357573</latitude>
    • <altitude>0</altitude>
    • <heading>90</heading>
    • … contd.
    PhotoOverlay
    • <tilt>0</tilt>
    • <altitudeMode>relativeToGround</altitudeMode>
    • <Icon>
    • <href></href>
    • </Icon>
    • </Camera>
    • <Icon><href>http://www.graffitos.org/oakland/panoramas/compton.pano/ lumpkin_$[side].png</href>
    • </Icon>
    • <Point>
    • <coordinates>-84.3745287160597,33.7474158357573,0</coordinates>
    • </Point>
    • <shape>cube</shape>
    • <balloonVisibility>0</balloonVisibility>
    • <styleUrl>#undecorated_style</styleUrl>
    • </PhotoOverlay>
    PhotoOverlay (contd.)
    • <Placemark id=&quot;Crumley&quot;>
    • <name>Crumley</name>
    • <description>
    • <![CDATA[
    • ]]>
    • </description>
    • <Sound id=&quot;Crumley-life&quot;> <!-- sounds can be positioned and oriented -->
    • <locationMode>relative</locationMode> <!-- default, relative -->
    • <location>
    • <latitude>0.0</latitude>
    • <longitude>0.0</longitude>
    • <altitude>0.0</altitude>
    • </location>
    • <gain>1</gain>
    • <looping>0</looping> <!-- 0=false,1=true -->
    • <sourceState>stopped</sourceState>
    • <!-- state can be triggered by URL using ;playing, ;stopped and ;resuming -->
    • … contd.
    Placemark
  • Placemarks (contd.)
    • <link>
    • <href>http://www.graffitos.org/oakland/audio/Crumley- life.mp3</href>
    • </link>
    • </Sound>
    • <styleUrl>#undecorated_style</styleUrl>
    • <balloonVisibility>1</balloonVisibility>
    • <!– More sounds can be added here to the same location 
    • <Point>
    • <coordinates>-84.37411459174398,33.74730673365343,0</coordinates>
    • </Point>
    • </Placemark>
  • Document description
    • <name>Oakland.kml</name>
    • <Snippet>Voices of Oakland</Snippet>
    • <description><![CDATA[
    • <div><p>The Voices of Oakland uses Augmented Reality (AR) technology to introduce visitors to the history and architecture of Oakland Cemetery, Atlanta's oldest cemetery. Carrying your iPhone, you can walk among the graves and listen to the voices of historical figures interred at Oakland. You will be guided from grave to grave by a narrator, and choose the audio segments that interest you the most using the interface. You can learn about the life of the person buried here, the historical context or the architecture of the cemetery. </p></div>
    • ]]>
    • </description>
  • Questions?
    • Contact info:
    • Nachiketas: [email_address]
    • Sanika: smokashi6@gatech.edu