<!--
//##################################
For USER MAP monitoramento de pombas
//##################################
-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <!-- Google Maps -->
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAA8jmSUWfkcI67-gDe1Ld2OxRYdZozqsvGv_V6w_OAetmbvh-IehT_hzsQFSJnae5_zIi-YPV6saf4tw" type="text/javascript"></script>
<!--
var setName = new Array();
setName[88] = "SECT Opening";
setName[87] = "ISEA Closing Ceremony";
setName[86] = "San Jose, Clock Tower";
setName[84] = "ISEA South Hall Test Flight";
setName[75] = "El Rancho Charter School";
var pigeonName = new Array();
pigeonName["0"] = "Flock";
pigeonName["5628528288"] = "Anna";
pigeonName["5622160781"] = "Scott";
pigeonName["5628522930"] = "Sunjay";
pigeonName["5625065608"] = "Natasha";
pigeonName["5625953906"] = "Rachel";
pigeonName["5625080812"] = "Louis";
pigeonName["5626765059"] = "Ashkan";
pigeonName["5629125623"] = "Amanda";
pigeonName["5629125622"] = "Bob";
pigeonName["3235990708"] = "Victoria";
pigeonName["5627040546"] = "Michele";
pigeonName["5629125619"] = "Joshua";
pigeonName["5623086724"] = "Ricardo";
pigeonName["5624537024"] = "Laura";
pigeonName["5623107223"] = "Maria";
pigeonName["5624538559"] = "Nusha";
pigeonName["5624727978"] = "Shirin";
pigeonName["5624724232"] = "Beatriz";
var T_a = new Array();
T_a["0"] = "-2.2639";
T_a["5628528288"] = "-2.2639";
T_a["5622160781"] = "-2.2639";
T_a["5628522930"] = "-2.2639";
T_a["5625065608"] = "-2.2639";
T_a["5625953906"] = "-2.2639";
T_a["5625080812"] = "-2.2639";
T_a["5626765059"] = "-2.2639";
T_a["5629125623"] = "-2.2639";
T_a["5629125622"] = "-2.2639";
T_a["3235990708"] = "-2.2639";
T_a["5627040546"] = "-2.2639";
T_a["5629125619"] = "-2.2639";
T_a["5623086724"] = "-2.2639";
T_a["5624537024"] = "-2.2639";
T_a["5623107223"] = "-2.2639";
T_a["5624538559"] = "-2.2639";
T_a["5624727978"] = "-2.2639";
T_a["5624724232"] = "-2.2639";
var T_b = new Array();
T_b["0"] = "1611.8";
T_b["5628528288"] = "1611.8";
T_b["5622160781"] = "1611.8";
T_b["5628522930"] = "1611.8";
T_b["5625065608"] = "1611.8";
T_b["5625953906"] = "1611.8";
T_b["5625080812"] = "1611.8";
T_b["5626765059"] = "1611.8";
T_b["5629125623"] = "1611.8";
T_b["5629125622"] = "1611.8";
T_b["3235990708"] = "1611.8";
T_b["5627040546"] = "1611.8";
T_b["5629125619"] = "1611.8";
T_b["5623086724"] = "1611.8";
T_b["5624537024"] = "1611.8";
T_b["5623107223"] = "1611.8";
T_b["5624538559"] = "1611.8";
T_b["5624727978"] = "1611.8";
T_b["5624724232"] = "1611.8";
var CO_a = new Array();
CO_a["0"] = "0.0005";
CO_a["5628528288"] = "0.0005";
CO_a["5622160781"] = "0.0005";
CO_a["5628522930"] = "0.0005";
CO_a["5625065608"] = "0.0005";
CO_a["5625953906"] = "0.0005";
CO_a["5625080812"] = "0.0005";
CO_a["5626765059"] = "0.0005";
CO_a["5629125623"] = "0.0005";
CO_a["5629125622"] = "0.0005";
CO_a["3235990708"] = "0.0005";
CO_a["5627040546"] = "0.0005";
CO_a["5629125619"] = "0.0005";
CO_a["5623086724"] = "0.0005";
CO_a["5624537024"] = "0.0005";
CO_a["5623107223"] = "0.0005";
CO_a["5624538559"] = "0.0005";
CO_a["5624727978"] = "0.0005";
CO_a["5624724232"] = "0.0005";
var CO_b = new Array();
CO_b["0"] = "0.04";
CO_b["5628528288"] = "0.04";
CO_b["5622160781"] = "0.04";
CO_b["5628522930"] = "0.04";
CO_b["5625065608"] = "0.04";
CO_b["5625953906"] = "0.04";
CO_b["5625080812"] = "0.04";
CO_b["5626765059"] = "0.04";
CO_b["5629125623"] = "0.04";
CO_b["5629125622"] = "0.04";
CO_b["3235990708"] = "0.04";
CO_b["5627040546"] = "0.04";
CO_b["5629125619"] = "0.04";
CO_b["5623086724"] = "0.04";
CO_b["5624537024"] = "0.04";
CO_b["5623107223"] = "0.04";
CO_b["5624538559"] = "0.04";
CO_b["5624727978"] = "0.04";
CO_b["5624724232"] = "0.04";
-->
var num_preload_levels = 0;
var zerocheck = 0;
var samplenum=0;
var gMarkers = new Array();
var xmlDoc;
var markers = new Array();
var realTimeParse = 0;
//interval rates
var animationRate = 5000;
var fastloadRate = 100;
//playback
var gInterval, gNewDataInterval;
var FF = 0;
var RW = 0;
//gradient style
var mode = Math.floor(Math.random()*7);
//preload map
var preloadmap = [];
var preloadcounter = 0;
var maxpreloadimages = 1024;
//projection vars
var switchinterval = 60000; //30 sec
var gSwitchInterval;
var pauseAmt = 10000;
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="pdmarker.js"></script>
var T_a = -2.2639;
var T_b = 1611.8;
var CO_a = 0.0005;
var CO_b = 0.04;
</script>
<script language="javascript" type="text/javascript" src="preloadImages.js"></script>
<script language="javascript" type="text/javascript" src="pigeonObject.js"></script> <script language="javascript" type="text/javascript" src="flockObject.js"></script>
<script language="javascript" type="text/javascript" src="controls.js"></script>
<!-- script.acoulo.us (http://script.aculo.us/) -->
<script src="scripts/prototype.js" type="text/javascript"></script> <script src="scripts/scriptaculous.js" type="text/javascript"></script> <script src="scripts/effects.js" type="text/javascript"></script> <script src="scripts/dragdrop.js" type="text/javascript"></script>
<script src="scripts/controls.js" type="text/javascript"></script>
<!-- pigeon status interface stylesheet -->
<link rel="stylesheet" type="text/css" href="interface.css" /> <link href="pigeonstyles.css" rel="stylesheet" type="text/css"> /*html, body
{
width: 100%; height: 100%;
}
body
{
margin-top: 20px; margin-right: 0px; margin-left: 20px; margin-bottom: 0px;
font-family: sans-serif;
}*/
#map
{
width:950px;
height:500px;
}
#interface{
//top:350px;
//left:60px;
}
#set_title_div{
//top:580px;
}
#control_pigeons1{
//left:80px;
}
#control_pigeons2{
//left:478px;
}
div.markerTooltip, div.markerDetail
{
color: black;
font-weight: bold;
background-color: white;
/*white-space: nowrap;*/
margin: 0;
padding: 2px 4px;
border: 1px solid black;
}
</style>
</head>
<body bgcolor="#333333" onload="load();" onunload="GUnload()"> <div id="pdmarkerwork"></div>
//<![CDATA[
var map = new GMap2(document.getElementById("map"));
//map.addControl(new GSmallMapControl());
//map.centerAndZoom(new GPoint(-117.84683, 33.646328333333), 0);
map.setCenter(new GLatLng(-117.84683, 33.646328333333), 0);
map.addControl(new GSmallMapControl());
var cutofflow = 0;
var cutoffhigh = .5;
CustomGetTileUrl=function(point,zoom){
var upleftpnt = new GPoint(point.x*256,point.y*256);
var upleft = G_NORMAL_MAP.getProjection().fromPixelToLatLng(upleftpnt,zoom);
var lowergtpnt = new GPoint((point.x*256)+255,(point.y*256)+255);
var lowergt = G_NORMAL_MAP.getProjection().fromPixelToLatLng(lowergtpnt,zoom);
if (!realTimeParse){
//preload num_preload_levels sample images
for (var pi = 0; pi < num_preload_levels; pi ++){
preloadmap[preloadcounter] = new Image();
var nextimagenum = samplenum+1+pi;
preloadmap[preloadcounter].src='http://pigeonblog.mapyourcity.net/map/makepicture.php?limit='+nextimagenum+'&set='+87+'&maxlat='+lowergt.x+'&minlat='+upleft.x+'&minlon='+lowergt.y+'&nn=1'+'&maxlon='+upleft.y+"&nocache="+nextimagenum+"&mode="+mode;
preloadcounter = (preloadcounter+1)%maxpreloadimages;
}
}
//document.getElementById('cina').innerHTML = 'http://pigeonblog.mapyourcity.net/test/makepicture.php?limit='+samplenum+'&set='+87+'&maxlat='+lowergt.x+'&minlat='+upleft.x+'&minlon='+lowergt.y+'&nn=1'+'&maxlon='+upleft.y+"&nocache="+(samplenum*(-2*realTimeParse+1)+1000)+"&mode="+mode;
return 'http://pigeonblog.mapyourcity.net/map/makepicture.php?limit='+samplenum+'&set='+87+'&maxlat='+lowergt.x+'&minlat='+upleft.x+'&minlon='+lowergt.y+'&nn=1'+'&maxlon='+upleft.y+"&nocache="+(samplenum*(-2*realTimeParse+1)+1000)+"&mode="+mode;
}
var tilelayers = [new GTileLayer(new GCopyrightCollection("PigeonBlog"),1,19)];
tilelayers[0].getTileUrl = CustomGetTileUrl;
tilelayers[0].getCopyright = function(a,b) {
return {prefix:"Map: ", copyrightTexts:["PigeonBlog"]};
}
var htilelayers = [
G_HYBRID_MAP.getTileLayers()[0], // a reference to the upper tile layer fo the hybrid map
tilelayers[0] // a reference to the tile layer from the first custom map
];
var custommap2 = new GMapType(htilelayers, G_SATELLITE_MAP.getProjection(), "VIS0", {maxResolution:19,minResolution:7,errorMessage:_mMapError});
map.addMapType(custommap2);
//map.setCenter(new GLatLng(33.646328333333,-117.84683) , 19, custommap2);
// map.setCenter(new GLatLng(33.855701666667,-117.77418333333) , 19, custommap2);
map.setCenter(new GLatLng(33.646328333333,-117.84683) , 2, custommap2);
function drawOverlay()
{
map.setMapType(map.getCurrentMapType());
}
function redirect(){
location = "switcher.php";
}
function switchBird(){
if (document.getElementById(pigeonFlock.followBirdId))
document.getElementById(pigeonFlock.followBirdId).src = 'icons/control_pigeon1.jpg';
pigeonFlock.followNextBird();
if (document.getElementById(pigeonFlock.followBirdId)){
document.getElementById(pigeonFlock.followBirdId).src = 'icons/control_pigeon3.jpg';
pigeonFlock.setOutput(document.getElementById(pigeonFlock.followBirdId).id);
}
pigeonFlock.setLines();
}
function ReplayMode(){
mode = (mode+1)%7;
document.getElementById('co_colorbar').src='makepicture.php?mkgrad=1&mode='+mode;
map.clearOverlays();
clearInterval(gInterval);
//reload everything
load();
}
function pauseAnimation(){
clearInterval(gInterval);
gInterval = setInterval("unpauseAnimation()",pauseAmt);
}
function unpauseAnimation(){
document.getElementById('loading').style.display = 'none';
clearInterval(gInterval);
gInterval = setInterval("parsedata()", animationRate);
parsedata();
}
function load()
{
getpigeondata('pigeondata.php?limit=1000&set=87&offset=0');
//gSwitchInterval = setInterval("switchBird()", switchinterval);
//gInterval = setInterval("parsedata()", animationRate);
GEvent.addListener(map,"zoomend",function () {
pauseAnimation();
//alert("zoom");
} );
pigeonFlock = new flock();
samplenum = 0;
realTimeParse = 0;
pauseAnimation();
}
function getpigeondata( url )
{
GDownloadUrl(url, function(data, responseCode)
{
var xml = GXml.parse(data);
var new_marker = new Array();
new_marker= xml.documentElement.getElementsByTagName("marker");
if(new_marker.length != 0)
{
markers = new_marker;
return 1;
}
else
return 0;
});
}
function parsedata()
{
// if rewound, stop
if (RW)
return;
// if we're at the end of xml buffer...
if (samplenum >= markers.length-1)
{
if ((markers.length > 1) && (realTimeParse == 0))
{
//switch to realtime parse
gInterval = clearInterval(gInterval);
//gInterval = setInterval("getNewPigeonData();", 1000);
gInterval = setInterval("ReplayMode()", 10000);
markers= new Array();
realTimeParse = 1;
//map.clearOverlays();
pigeonFlock.setLines();
drawOverlay(); // draw overlay after first parse
setEndButton();
setPauseButton();
if (pigeonFlock.followBirdId == "0") //follow flock
map.zoomToMarkers();
return;
}
else if ((markers.length > 0) && (realTimeParse == 1))
{
// don't return when there are existing markers and receiving live data
}
else
return;
}
//document.getElementById('kevin').innerHTML += "sample num: " + samplenum;
if (realTimeParse)
var i = 0;
else
var i = samplenum;
var point = new GLatLng(parseFloat(markers[i].getAttribute("lon")), parseFloat(markers[i].getAttribute("lat")));
var Alt = parseFloat(markers[i].getAttribute("alt"));
var CO = parseFloat(markers[i].getAttribute("adc1"));
var NOX = parseFloat(markers[i].getAttribute("adc2"));
var DateTime = markers[i].getAttribute("time");
var Time = markers[i].getAttribute("emailtime");
var Temp = markers[i].getAttribute("temperature");
var Signal = markers[i].getAttribute("signal");
var Voltage = markers[i].getAttribute("voltage");
var Id = markers[i].getAttribute("id");
samplenum++;
if ((point.x!=0)&&(point.y!=0))
{
pigeonFlock.addData(Id,point.y,point.x,Alt,CO,NOX,Temp,Signal,Voltage,Time, DateTime);
if (!FF)
{
drawOverlay();
}//else if ((pigeonFlock.followBirdId == "0") && (sample_num%25 == 0)//follow flock
// map.zoomToMarkers();
zerocheck=0;
}
else if (zerocheck < 500){
zerocheck++;
parsedata();
}
if (realTimeParse)
{
markers= new Array();
drawOverlay();
}
}
function getNewPigeonData()
{
var offset = samplenum+1;
getpigeondata('pigeondata.php?limit=1&offset='+offset+'&set=87');
if (markers.length > 0)
parsedata();
}
function switchpigeon(){
}
//]]>
</script>
<div id="loading">
<img src = "icons/indicator_verybig.gif">
</div>
<div id="select">
<form action="index.php" method="get" name="datasetsform">
<select name="set" onChange="datasetsform.submit();">
<option value='75'>El Rancho Charter School07/26/06-12:29 PM</option><option value='86'>San Jose, Clock Tower08/08/06-06:18 PM</option><option value='87'>ISEA Closing Ceremony08/12/06-06:24 PM</option>
</select>
</form>
<br>
<form class="form">
<select name="Select Color Scheme" id = "currentgrad" onChange="
mode = document.getElementById('currentgrad').value;
//gradient.src = 'makepicture.php?mode='+cgrad+'&mkgrad=1&cutofflow='+cutofflow+'&cutoffhigh='+cutoffhigh;
document.getElementById('co_colorbar').src='makepicture.php?mkgrad=1&mode='+mode;
drawOverlay();" >
<option value='1' selected='selected'>Select Color Scheme... </option>
<option value='0' >Blue Red Yellow</option>
<option value='1'>Rainbow</option>
<option value='2'>Hot Body</option>
<option value='3'>Grayscale</option>
<option value='4'>Blue White</option>
<option value='5'>Trans to Color</option>
<option value='6'>Ocean</option>
<option value='7'>Greens</option>
</select>
</form>
</div>
<!--<div id="menu">
<div id="big_pigeon"><img src="../local/img/vis/final_icons/control_active_big.jpg" id="mode_img" onClick="pigeonFlock.setOutput(0); mode_img.src='icons/pigeon_flock.gif'"></div>
</div>-->
<div id="interface">
<div id="mode"><img id="mode_img" src="icons/pigeon_flock.gif"
onClick = "
if (document.getElementById(pigeonFlock.followBirdId))
document.getElementById(pigeonFlock.followBirdId).src = 'icons/control_pigeon1.jpg';
pigeonFlock.setOutput('0');
pigeonFlock.setLines();
"
/>
</div>
<div id="co">
<div id="co_slider_out" class="slider">Carbon Monoxide (ppm)</div>
<img id="co_colorbar" src="makepicture.php?mkgrad=1&mode=2" height="10" width="255"/>
<div id="co_slider">
<div id="co_handle" style="width:11px;height:13px;"><img src="icons/guage_arrow.png" /></div>
</div>
</div>
<div id="nox">
<div id="nox_slider_out" class="slider">Nitrogen Oxides</div>
<div id="nox_colorbar"><img src="icons/nox_text.gif" height="10" width="128"/></div>
<div id="nox_slider">
<div id="nox_handle" style="width:11px;height:13px;"><img src="icons/guage_arrow.png" /></div>
</div>
</div>
<div id="name">Flock</div>
<div id="batt"><img src="icons/battery_8.gif" id="batt_img"/></div>
<div id="signal"><img src="icons/signal_4.gif" id="signal_img"/></div>
<div id="stats">
<table>
<tr><td>Alt</td><td class="data" id="altitude_data"> - </td></tr>
<tr><td>Dist</td><td class="data" id="distance_data"> - </td></tr>
<tr><td>Speed</td><td class="data" id="speed_data"> - </td></tr>
</table>
</div>
<script type="text/javascript" language="javascript">
// <![CDATA[
var co_slider = new Control.Slider('co_handle','co_slider',{range: $R(0,1), maximum: 1, disabled:true});
var nox_slider = new Control.Slider('nox_handle','nox_slider',{range: $R(0,1), maximum: 1, disabled:true});
nox_slider.setDisabled();
new Draggable('interface', {revert:false});
document.getElementById("co_colorbar").src = "makepicture.php?mkgrad=1&mode="+mode;
function setSlider(sliderId, sliderValue)
{
sliderId.setValue(sliderValue);
}
// ]]>
</script>
</div>
<div id="bottom_container">
<div id="control_pigeons1">
<table class="controltables"> <tr>
<td class="controlltable_cell">
<img src="icons/control_pigeonOff.jpg" id="5622160781"
onMouseOver="if (this.src == 'http://pigeonblog.mapyourcity.net/map/icons/control_pigeon1.jpg')
this.src = 'icons/control_pigeon2.jpg';"
onMouseOut="if (this.src == 'http://pigeonblog.mapyourcity.net/map/icons/control_pigeon2.jpg')
this.src = 'icons/control_pigeon1.jpg';"
onClick="
if (this.src == 'http://pigeonblog.mapyourcity.net/map/icons/control_pigeon2.jpg')
{
this.src = 'http://pigeonblog.mapyourcity.net/map/icons/control_pigeon3.jpg';
if (document.getElementById(pigeonFlock.followBirdId))
document.getElementById(pigeonFlock.followBirdId).src = 'icons/control_pigeon1.jpg';
pigeonFlock.setOutput(this.id);
pigeonFlock.setLines();
}">
<script type="text/javascript">
document.write(pigeonName[5622160781]);
</script>
</td>
<td class="controlltable_cell">
<img src="icons/control_pigeonOff.jpg" id="5628528288"
onMouseOver="if (this.src == 'http://pigeonblog.mapyourcity.net/map/icons/control_pigeon1.jpg')
this.src = 'icons/control_pigeon2.jpg';"
onMouseOut="if (this.src == 'http://pigeonblog.mapyourcity.net/map/icons/control_pigeon2.jpg')
this.src = 'icons/control_pigeon1.jpg';"
onClick="
if (this.src == 'http://pigeonblog.mapyourcity.net/map/icons/control_pigeon2.jpg')
{
this.src = 'http://pigeonblog.mapyourcity.net/map/icons/control_pigeon3.jpg';
if (document.getElementById(pigeonFlock.followBirdId))
document.getElementById(pigeonFlock.followBirdId).src = 'icons/control_pigeon1.jpg';
pigeonFlock.setOutput(this.id);
pigeonFlock.setLines();
}">
<script type="text/javascript">
&