The Argon BrowserCode 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="undecorated_style"><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="0.5" y="0.22" xunits="fraction" yunits="fraction"/> <styleUrl>#undecorated_style</styleUrl></ScreenOverlay>

Screenshot of the Screen Overlay

Style (css) for ScreenOverlay

<style type="text/css">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, rewindSoundnextGrave()function flyTonextPlacemark(placemarkRef)

Javascript functions// Hack to launch into experience directlyif (/WebKit/i.test(navigator.userAgent)) { // sniffvar _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= "Compton";var nissen="Nissen";var crumley="Crumley";var garrett="Garrett";var end="End";

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("No next placemark found");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 = "alpha(opacity=" + opacity + ")";

}

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()+"-"+buttonID;cImg.src="http://www.graffitos.org/oakland/

stop_"+buttonID+".png";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+"-"+buttonID;cImg.src="http://www.graffitos.org/oakland/

square_"+buttonID+".png";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("playing " + soundId);

}function stopSound(soundId){

var mySound = KHARMA.getKMLElementById(soundId);if (mySound)

mySound.stop();console.log("stopping " + 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+"_geospot";var myFeature = KHARMA.getKMLElementById(featureId);

if (myFeature){

myFeature.flyToBalloon(0);setCurrentPlacemark(placemarkRef);var CsoundId = placemarkRef + "-next";playSound(CsoundId);console.log("setting geoSpot " + featureId);

}}

</script>

Javascript functions (contd.)

<div align="center" class="overlaystyle" id="overlay"><table width="100%" border="0" style="text-align:center"><tr>

<td><a href="#" class="life" id="lifeID" name="lifeID“

onclick="toggleControl('life',playState)" ><img src="http://www.graffitos.org/oakland/square_life.png"

alt="Play Life Audio" id="lifeBtn" name="lifeBtn" class="life" width="50" height="50" border="0" /></a>

</td><td><a href="#" class="culture" id="cultureID" name="cultureID"

onclick="toggleControl('culture',playState)" ><img src="http://www.graffitos.org/oakland/square_culture.png" width="50" height="50" border="0" alt="Play audio on Culture" id="cultureBtn" name="cultureBtn" class="culture" /> </a>

Div block

<td> <a href="#" class="place" id="placeID" name="placeID"

onclick="toggleControl('place',playState)" ><img src="http://www.graffitos.org/oakland/square_place.png" width="50" height="50" border="0" alt="Play place rleated audio" id="placeBtn" name="placeBtn" class="place" /></a>

</td>

<td><a href="#" class="next" id="nextID" name="nextID"

onclick="nextGrave()" ><img src="http://www.graffitos.org/oakland/square_arrow.png" width="50" height="50" border="0" id="nextBtn" name="nextBtn" class="next" /> </a>

</td></tr></table>

</div>

Div block (contd.)

<PhotoOverlay id="Compton_geospot"><name>.</name><author>

<name>jenifer.vandagriff@gatech.edu</name></author><link href="http://en.wikipedia.org/wiki/Wilson_Lumpkin"/><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="Crumley"><name>Crumley</name><description>

<![CDATA[]]>

</description> <Sound id="Crumley-life"> <!-- 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: nketas@gatech.eduSanika: smokashi6@gatech.edu