Argon walkthru 1-26

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> 

</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;

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.


else if (PlacemarkTemp==nissen){

return crumley;}else if (PlacemarkTemp==crumley){

return garrett;}else if (PlacemarkTemp==garrett){

return end;}


else{

console.log("No next placemark found");return null;

}}




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 + ")";

}


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.


else if(StateParam==stopState){

toggleInit();toggletoPlay(buttonParam);

}}


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); };

}


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); };

}


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);

}


function nextGrave(){

var currPlacemark = getCurrentPlacemark();var

nextPlacemark=getNextPlacemark(currPlacemark);if(currPlacemark != null){

toggleInit();}flyTonextPlacemark(nextPlacemark);

}


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>


<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>[email protected]</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"> 

<locationMode>relative</locationMode> <location>

<latitude>0.0</latitude><longitude>0.0</longitude><altitude>0.0</altitude>

</location><gain>1</gain><looping>0</looping> <sourceState>stopped</sourceState>



…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 protected]: [email protected]

mailto:[email protected]

Education

Argon walkthru 1-26