Adding Play/pause To Webgl, In Php Js Only
I am trying to add a Play/Pause button to the Advanced API controls, I have the button.value changing from the ascii #9654 to #9646 but the rest of the code to start the animation
Solution 1:
After 10 days of trying, I have solved the issue with this code :) The problem was that Java Script does not pass vars as other languages it passes a dynamic of the var so anything done to a var with in a function will leave the original var unchanged - unless it is a Global var. I added Global vars: Earth and myReq(for canx the request) the entire code is:
<!DOCTYPE HTML><html><head><linkrel="stylesheet"href="CSS/vertical-text.css"type="text/css"/><scriptsrc="http://www.webglearth.com/v2/api.js"></script><script>var earth = undefined;
var myReq;
functioninitialize() {
var options = {
sky: true,
atmosphere: true,
dragging: true,
tilting: false,
scrollWheelZoom: false
};//options
earth = newWE.map('earth_div');
earth.setView([30.0, -87.65], 3);
WE.tileLayer('http://data.webglearth.com/natural-earth-color/{z}/{x}/{y}.jpg', {
tileSize: 256,
bounds: [[-85, -180], [85, 180]],
minZoom: 2,
maxZoom: 9,
tms: true,
attribution: '© EagleEye360.com'
}).addTo(earth);//tilelayervar toner = WE.tileLayer('http://tile.stamen.com/toner/{z}/{x}/{y}.png', {
opacity: 0.15// or use http://{s}.tile.thunderforest.com/cycle/{z}/{x}/{y}.png
});//toner
toner.addTo(earth);
document.getElementById('opacity2').addEventListener('change', function(e) {
toner.setOpacity(e.target.value);
});//set opacity
earth.setZoom(3);
document.getElementById('zoom_level').addEventListener('change', function(e) {
earth.setZoom(e.target.value);
});//setZoom//rotate_play_pause();document.getElementById('rotate_button').addEventListener('change', function(e) {
rotate_play_pause();
});//rotate_play_pause()// earth.setTilt(40);// document.getElementById('tilt_level').addEventListener('change', function(e) {// earth.setTilt(e.target.value);// });//setTilt-not working look at .setview/* // Add markers - Hard coded works.
var marker = WE.marker([48.45, 34.9833], 'http://eagleeye360.com/worldmap/pin.jpg', 4, 4).addTo(earth);
marker.bindPopup("86.110.118.194", {maxWidth: 90, closeButton: true}).openPopup();
var marker2 = WE.marker([41.85, -87.65], 'http://eagleeye360.com/worldmap/pin.jpg', 4, 4).addTo(earth);
marker2.bindPopup("174.221.5.127", {maxWidth: 90, closeButton: true}).openPopup();
var marker3 = WE.marker([44.3051,-69.977], 'http://eagleeye360.com/worldmap/pin.jpg', 4, 4).addTo(earth);
marker3.bindPopup("142.105.199.149", {maxWidth: 90, closeButton: true}).openPopup();
*/<?phpinclude('ts.php');
// Add markers$ct = 0;
$i = 1;
$lat1 = ""; $lat2 = "";
$lon1 = ""; $lon2 = "";
$row = array();
$rows = array($row);
$con = mysql_connect("localhost","hogansba_Jon","Tigger09<>");
$db_selected = mysql_select_db("hogansba_EagleEye", $con);
if (!$db_selected){echo mysql_errno($con) . ": " . mysql_error($con) . "\n";}
$query = "SELECT `gpslat`, `gpslon`, `ip` FROM `visitor_tracker` ORDER BY `gpslat` DESC";
$result = mysql_query($query) ordie(mysql_error());
while ($row = mysql_fetch_array($result, MYSQL_NUM)) {
$lat1 = $row[0];
//$lon1 = $row[1];if ($ct == 0) {$rows[] = $row;
$lat2 = $rows[$i][0];
//$lon2 = $rows[$i][1];
}//ifElse {if ($lat1 != $lat2){
$rows[] = $row;
$i = $i+1;
$lat2 = $rows[$i][0];
//$lon2 = $rows[$i-1][1];
}//if
}//else$ct = $ct+1;
}//while
mysql_free_result($result);
mysql_close($con);
?>// Populate markersvar markers = <?phpecho json_encode($rows); ?>;
var ygpslat = <?phpecho json_encode($gpslat); ?>;
var ygpslon = <?phpecho json_encode($gpslon); ?>;
var yip = <?phpecho json_encode($ip); ?>;
for(var i = 1, len = markers.length; i < len; i++) {
var marker = WE.marker([markers[i][0],markers[i][1]], 'http://eagleeye360.com/worldmap/pin_green.jpg', 4, 4).addTo(earth);
marker.bindPopup(markers[i][2], {maxWidth: 100, closeButton: true}).closePopup();
}//for//Your markervar marker = WE.marker([ygpslat,ygpslon], 'http://eagleeye360.com/worldmap/pin.jpg', 4, 4).addTo(earth);
marker.bindPopup("<div class='container'><div class='rotated-text'><span class='rotated-text__inner'><center><?phpecho'You-',$ip?><center/></span></div></div>", {maxWidth: 14, closeButton: true}).openPopup();
earth.setView([ygpslat,ygpslon], 3);
}//init()
function rotate_play_pause() {
var before = null;
var status = document.getElementById("rotate_button");
if (status.value == String.fromCharCode(9654)) {
document.getElementById("rotate_button").value = String.fromCharCode(9646);
// Start a simple rotation animation
requestAnimationFrame(function animate(now) {
var c = earth.getPosition();
var elapsed = before? now - before: 0;
before = now;
earth.setCenter([c[0], c[1] - 0.1*(elapsed/30)]);
myReq = requestAnimationFrame(animate);
});//requestAnimationFrame
} else {
cancelAnimationFrame(myReq);
document.getElementById("rotate_button").value = String.fromCharCode(9654);
}//if else
}//function rotate_play_pause()
// document.getElementById('cesium-credit-text').innerHTML = "EagleEye360.com-Visitors/Bots/HackAttempts";
</script><styletype="text/css">html, body{padding: 0; margin: 0; background-color: black;}
#earth_div{top: 0; right: 0; bottom: 0; left: 0; position: absolute !important;}
#coords{position: absolute; bottom: 10px; right: 10px; z-index: 100000;}
#buttons {position: absolute; bottom:10px; left: 10px; color: #808080;}
</style><title>EagleEye360 Test 1</title></head><bodyonload="initialize()"><divid="earth_div"></div><divid="buttons"><center><inputtype="button"id="rotate_button"value="▶"class="play"onclick="rotate_play_pause();"><center/><br><center>Zoom</center>
2<inputtype="range"id="zoom_level"min="2"max="9"step="1.0"value="3.0">9<br><center>Streetmap opacity</center>
0<inputtype="range"id="opacity2"min="0"max="1"step="0.05"value="0.15">1<br><center><p>Total Hits: <?phpecho$ct?></br>Unique Visitors: <?phpecho$i?><p/></center></div></body></html>You can see it working Here I will leave it up for about a month after that it will no longer be available. Jon
Post a Comment for "Adding Play/pause To Webgl, In Php Js Only"