<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <!-- <head> --> <!-- QGroundControl --> <title>QGroundControl Google Earth View</title> <!-- *** Replace the key below below with your own API key, available at http://code.google.com/apis/maps/signup.html *** --> <!--<script type="text/javascript" src="https://getfirebug.com/firebug-lite-beta.js"></script>--> <script type="text/javascript" src="http://www.google.com/jsapi?key=ABQIAAAAwbkbZLyhsmTCWXbTcjbgbRSzHs7K5SvaUdm8ua-Xxy_-2dYwMxQMhnagaawTo7L1FE1-amhuQxIlXw"></script> <script type="text/javascript"> google.load("earth", "1", { 'language': 'en'}); var ge = null; var initialized = false; var currAircraft = 0; var followEnabled = false; var lineAltitudeOffset = 0.5; ///< 0.5 m higher than waypoint, prevents the line from entering the ground var lastLat = 0; var lastLon = 0; var lastAlt = 0; var currLat = 47.3769; var currLon = 8.549444; var currAlt = 470; var currentCameraLatitude = 0; var currentCameraLongitude = 0; var currentCameraAltitude = 0; var currFollowHeading = 0.0; var homeLat = 0; var homeLon = 0; var homeAlt = 0; var homeViewRange = 800; var homeLocation = null; var homeGroundLevel = 0; var currViewRange = 50.0; ///<< The current viewing range from this position (in meters) var currTilt = 40.0; ///<< The tilt angle (in degrees) var currFollowTilt = 40.0; var currView = null; var distanceMode = 0; var viewMode = 0; var lastTilt = currTilt; var lastRoll = 0; var lastHeading = 0; var M_PI = 3.14159265; var planeOrient; var planeLoc; var aircraft = []; var aircraftLocations = []; var aircraftLastLocations = []; var attitudes = []; var locations = []; var trails = []; var trailPlacemarks = []; var trailsVisible = []; var trailColors = []; var waypoints = []; var waypointLines = []; var waypointLinePlacemarks = []; var waypointLineColors = []; //var waypointLines = []; //var trailPlacemarks[id]; var lineStyle; // Aircraft class var planeColor = '6600ffff'; // Enable / disable dragging var draggingAllowed = true; // Waypoint interaction flags var dragInfo = null; var dragWaypointIndex = ""; var dragWaypointLatitude = 0; var dragWaypointLongitude = 0; var dragWaypointAltitude = 0; var dragWaypointPending = false; // Waypoint creation flags var newWaypointLatitude = 0; var newWaypointLongitude = 0; var newWaypointAltitude = 0; var newWaypointPending = false; var clickMode = 0; var homePlacemark = null; function getGlobal(variable) { return variable; } function getDraggingAllowed() { return draggingAllowed; } function setDistanceMode(mode) { distanceMode = mode; } function setDraggingAllowed(allowed) { draggingAllowed = allowed; } function sampleCurrentPosition() { var thisView = ge.getView().copyAsLookAt(ge.ALTITUDE_ABSOLUTE); currentCameraLatitude = thisView.getLatitude(); currentCameraLongitude = thisView.getLongitude(); currentCameraGroundAltitude = ge.getGlobe().getGroundAltitude(currentCameraLatitude, currentCameraLongitude); } function enableSetHomeMode() { clickMode = 1; } function setLookAtLatLon(lat, lon) { // Keep the current altitude above ground, just move the position currView = ge.getView().copyAsLookAt(ge.ALTITUDE_RELATIVE_TO_GROUND); currView.setLatitude(lat); currView.setLongitude(lon); ge.getView().setAbstractView(currView); } function setNewWaypointPending(pending) { newWaypointPending = pending; document.getElementById('JScript_newWaypointPending').setAttribute('value',pending); } function setDragWaypointPending(pending) { dragWaypointPending = pending; document.getElementById('JScript_dragWaypointPending').setAttribute('value',pending); } function isInitialized() { return initialized; } function init() { google.earth.createInstance("map3d", initCallback, failureCallback); } function setFollowEnabled(enable) { followEnabled = enable; } function enableEventListener() { // listen for mousedown on the window (look specifically for point placemarks) google.earth.addEventListener(ge.getWindow(), 'mousedown', function(event) { if (clickMode == 1) { // Set home mode dragWaypointIndex = 'HOME'; document.getElementById('JScript_dragWaypointIndex').setAttribute('value',dragWaypointIndex); dragWaypointLatitude = event.getLatitude(); dragWaypointLongitude = event.getLongitude(); dragWaypointAltitude = ge.getGlobe().getGroundAltitude(dragWaypointLatitude, dragWaypointLongitude); dragWaypointPending = true; document.getElementById('JScript_dragWaypointLatitude').setAttribute('value',dragWaypointLatitude); document.getElementById('JScript_dragWaypointLongitude').setAttribute('value',dragWaypointLongitude); document.getElementById('JScript_dragWaypointAltitude').setAttribute('value',dragWaypointAltitude); document.getElementById('JScript_dragWaypointPending').setAttribute('value',true); setGCSHome(dragWaypointLatitude, dragWaypointLongitude, dragWaypointAltitude); } if (event.getTarget().getType() == 'KmlPlacemark' && event.getTarget().getGeometry().getType() == 'KmlPoint') { var placemark = event.getTarget(); event.preventDefault(); if (draggingAllowed) { if (clickMode == 0) { dragInfo = { placemark: event.getTarget(), dragged: false }; } } } }); // listen for mousemove on the globe google.earth.addEventListener(ge.getGlobe(), 'mousemove', function(event) { if (draggingAllowed && (clickMode == 0)) { if (dragInfo) { event.preventDefault(); var point = dragInfo.placemark.getGeometry(); point.setLatitude(event.getLatitude()); point.setLongitude(event.getLongitude()); dragInfo.dragged = true; dragWaypointIndex = dragInfo.placemark.getDescription(); document.getElementById('JScript_dragWaypointIndex').setAttribute('value',dragWaypointIndex); dragWaypointLatitude = event.getLatitude(); dragWaypointLongitude = event.getLongitude(); dragWaypointAltitude = point.getAltitude(); dragWaypointPending = true; document.getElementById('JScript_dragWaypointLatitude').setAttribute('value',dragWaypointLatitude); document.getElementById('JScript_dragWaypointLongitude').setAttribute('value',dragWaypointLongitude); document.getElementById('JScript_dragWaypointAltitude').setAttribute('value',dragWaypointAltitude); document.getElementById('JScript_dragWaypointPending').setAttribute('value',true); } } }); // listen for mouseup on the window google.earth.addEventListener(ge.getWindow(), 'mouseup', function(event) { if (draggingAllowed && (clickMode == 0)) { if (dragInfo) { if (dragInfo.dragged) { // if the placemark was dragged, prevent balloons from popping up event.preventDefault(); // Get drag end location dragWaypointIndex = dragInfo.placemark.getDescription(); document.getElementById('JScript_dragWaypointIndex').setAttribute('value',dragWaypointIndex); var point = dragInfo.placemark.getGeometry(); dragWaypointLatitude = event.getLatitude(); dragWaypointLongitude = event.getLongitude(); dragWaypointAltitude = point.getAltitude(); dragWaypointPending = true; document.getElementById('JScript_dragWaypointLatitude').setAttribute('value',dragWaypointLatitude); document.getElementById('JScript_dragWaypointLongitude').setAttribute('value',dragWaypointLongitude); document.getElementById('JScript_dragWaypointAltitude').setAttribute('value',dragWaypointAltitude); document.getElementById('JScript_dragWaypointPending').setAttribute('value',true); } dragInfo = null; } } clickMode = 0; }); // Listen for wp creation request on the globe google.earth.addEventListener(ge.getGlobe(), 'dblclick', function(event){ if (draggingAllowed) { event.preventDefault(); newWaypointLatitude = event.getLatitude(); newWaypointLongitude = event.getLongitude(); newWaypointAltitude = ge.getGlobe().getGroundAltitude(newWaypointLatitude, newWaypointLongitude); newWaypointPending = true; document.getElementById('JScript_newWaypointLatitude').setAttribute('value',newWaypointLatitude); document.getElementById('JScript_newWaypointLongitude').setAttribute('value',newWaypointLongitude); document.getElementById('JScript_newWaypointAltitude').setAttribute('value',newWaypointAltitude); document.getElementById('JScript_newWaypointPending').setAttribute('value',true); } }); } function setCurrAircraft(id) { currAircraft = id; } function setGCSHome(lat, lon, alt) { // Only update if position actually changed if (lat != homeLat || lon != homeLon || alt != homeAlt) { homeLat = lat; homeLon = lon; homeAlt = alt; if (homePlacemark == null) { var placemark = ge.createPlacemark(''); var icon = ge.createIcon(''); icon.setHref('http://google-maps-icons.googlecode.com/files/blackH.png'); var style = ge.createStyle(''); style.getIconStyle().setIcon(icon); //style.getIconStyle().setScale(0.5); placemark.setStyleSelector(style); placemark.setDescription('HOME'); // Set the placemark's location. homeLocation = ge.createPoint(''); homeLocation.setLatitude(lat); homeLocation.setLongitude(lon); homeLocation.setAltitude(alt); placemark.setGeometry(homeLocation); // Add the placemark to Earth. ge.getFeatures().appendChild(placemark); homePlacemark = placemark; } else { var location = ge.createPoint(''); if (location.getLatitude() != lat || location.getLongitude() != lon || location.getAltitude() != alt) { location.setLatitude(lat); location.setLongitude(lon); location.setAltitude(alt); homePlacemark.setGeometry(location); homePlacemark.setDescription('HOME'); } } homeGroundLevel = ge.getGlobe().getGroundAltitude(lat,lon); if (homeGroundLevel == 0) { homeGroundLevel = alt; } } } function updateWaypointListLength(id, len) { // Delete any non-needed waypoints if (waypoints.length > len) { for (var i=len; i<waypoints.length; i++) { var placemark = waypoints.pop(); ge.getFeatures().removeChild(placemark); var line = waypointLines[id].pop(); ge.getFeatures().removeChild(line); } } } function updateWaypoint(id, index, lat, lon, alt, action) { // Check if waypoint exists if (waypoints.length > index) { // Waypoint exists // Set the placemark's location. var location = ge.createPoint(''); location.setLatitude(lat); location.setLongitude(lon); location.setAltitude(alt); waypoints[index].setGeometry(location); waypoints[index].setDescription(index+""); // Set the WP line location waypointLines[id].getCoordinates().setLatLngAlt(index, lat, lon, alt); } else { // Waypoint does not exist yet var placemark = ge.createPlacemark(''); var icon = ge.createIcon(''); var numberstring = index; if (index < 10) numberstring = '0' + numberstring icon.setHref('http://google-maps-icons.googlecode.com/files/red' + numberstring +'.png'); var style = ge.createStyle(''); //console.log('WP ICON created:' + 'http://google-maps-icons.googlecode.com/files/red' + numberstring +'.png'); style.getIconStyle().setIcon(icon); //style.getIconStyle().setScale(0.5); placemark.setStyleSelector(style); placemark.setDescription(index+""); // Set the placemark's location. var location = ge.createPoint(''); location.setLatitude(lat); location.setLongitude(lon); location.setAltitude(alt+lineAltitudeOffset); placemark.setGeometry(location); // Add the placemark to Earth. ge.getFeatures().appendChild(placemark); waypoints[index] = placemark; // Add LineString points waypointLines[id].getCoordinates().pushLatLngAlt(lat, lon, alt); } } function createAircraft(id, type, color) { planePlacemark = ge.createPlacemark(''); planePlacemark.setName('aircraft'); planeModel = ge.createModel(''); ge.getFeatures().appendChild(planePlacemark); planeLoc = ge.createLocation(''); planeModel.setLocation(planeLoc); planeLink = ge.createLink(''); planeOrient = ge.createOrientation(''); planeModel.setOrientation(planeOrient); planeLink.setHref('http://www.asl.ethz.ch/people/rudink/senseSoarDummy.dae'); planeModel.setLink(planeLink); planeModel.setAltitudeMode (ge.ALTITUDE_ABSOLUTE); planeLoc.setLatitude(currLat); planeLoc.setLongitude(currLon); planeLoc.setAltitude(currAlt); planePlacemark.setGeometry(planeModel); // Write into global structure aircraft[id] = planePlacemark; attitudes[id] = planeOrient; aircraftLocations[id] = planeLoc; aircraftLastLocations[id] = ge.createLocation(''); createTrail(id, color); createWaypointLine(id, color); } function createTrail(id, color) { trailPlacemarks[id] = ge.createPlacemark(''); // Create the placemark // Create the LineString; set it to extend down to the ground // and set the altitude mode trails[id] = ge.createLineString(''); trailPlacemarks[id].setGeometry(trails[id]); trails[id].setExtrude(false); trails[id].setAltitudeMode(ge.ALTITUDE_ABSOLUTE); // Create a style and set width and color of line trailPlacemarks[id].setStyleSelector(ge.createStyle('')); lineStyle = trailPlacemarks[id].getStyleSelector().getLineStyle(); lineStyle.setWidth(5); trailColors[id] = color; lineStyle.getColor().set('00000000'); // aabbggrr format trailsVisible[id] = false; } function createWaypointLine(id, color) { // Create the placemark waypointLinePlacemarks[id] = ge.createPlacemark(''); // Create the LineString; set it to extend down to the ground // and set the altitude mode waypointLines[id] = ge.createLineString(''); waypointLinePlacemarks[id].setGeometry(waypointLines[id]); waypointLines[id].setExtrude(false); waypointLines[id].setAltitudeMode(ge.ALTITUDE_ABSOLUTE); // Add LineString points //lineString.getCoordinates().pushLatLngAlt(48.754, -121.835, 700); // Create a style and set width and color of line waypointLinePlacemarks[id].setStyleSelector(ge.createStyle('')); lineStyle = waypointLinePlacemarks[id].getStyleSelector().getLineStyle(); lineStyle.setWidth(15); waypointLineColors[id] = color; lineStyle.getColor().set(color); // aabbggrr format // Add waypoint line //waypointLines[id].setExtrude(false); //waypointLines[id].setAltitudeMode(ge.ALTITUDE_ABSOLUTE); // Create a style and set width and color of line //waypointLinePlacemarks[id].setStyleSelector(ge.createStyle('')); //lineStyle = waypointLinePlacemarks[id].getStyleSelector().getLineStyle(); //lineStyle.setWidth(15); //lineStyle.getColor().set(waypointLineColors[id]); // aabbggrr format //lineStyle.getColor().set(color); // aabbggrr format // Add the feature to Earth ge.getFeatures().appendChild(waypointLinePlacemarks[id]); } function clearTrail(id) { ge.getFeatures().removeChild(trailPlacemarks[id]); trailPlacemarks[id] = null; var isVisible = trailsVisible[id]; createTrail(id, trailColors[id]); if (isVisible) { showTrail(id); } } function hideTrail(id) { trailsVisible[id] = false; ge.getFeatures().removeChild(trailPlacemarks[id]); } function showTrail(id) { ge.getFeatures().appendChild(trailPlacemarks[id]); trailsVisible[id] = true; } function setViewRange(dist) { currViewRange = dist; } function addTrailPosition(id, lat, lon, alt) { //trails[id].setExtrude(false); //trails[id].setAltitudeMode(ge.ALTITUDE_ABSOLUTE); // Add LineString points trails[id].getCoordinates().pushLatLngAlt(lat, lon, alt); // Create a style and set width and color of line trailPlacemarks[id].setStyleSelector(ge.createStyle('')); lineStyle = trailPlacemarks[id].getStyleSelector().getLineStyle(); lineStyle.setWidth(5); lineStyle.getColor().set(trailColors[id]); // aabbggrr format } function initCallback(object) { ge = object; ge.getWindow().setVisibility(true); ge.getOptions().setStatusBarVisibility(true); ge.getOptions().setScaleLegendVisibility(true); //ge.getOptions().setFlyToSpeed(5.0); ge.getOptions().setFlyToSpeed(ge.SPEED_TELEPORT); ge.getNavigationControl().setVisibility(ge.VISIBILITY_AUTO); ge.getLayerRoot().enableLayerById(ge.LAYER_TERRAIN, true); ge.getLayerRoot().enableLayerById(ge.LAYER_BUILDINGS, true); ge.getLayerRoot().enableLayerById(ge.LAYER_BORDERS, true); ge.getLayerRoot().enableLayerById(ge.LAYER_TREES, true); enableEventListener(); document.getElementById('JScript_initialized').setAttribute('value','true'); initialized = true; } function setAircraftPositionAttitude(id, lat, lon, alt, roll, pitch, yaw) { if (id == currAircraft) { if (lastLat == 0) { lastLat = currLat; lastLon = currLon; } currLat = lat; currLon = lon; var trueGroundAlt = ge.getGlobe().getGroundAltitude(lat, lon); if (trueGroundAlt < alt) { currAlt = alt; } else { currAlt = trueGroundAlt+0.1; } // Interpolate between t-1 and t and set new states lastLat = lastLat*0.8+currLat*0.2; lastLon = lastLon*0.8+currLon*0.2; lastAlt = lastAlt*0.8+currAlt*0.2; //currFollowHeading = ((yaw/M_PI)+1.0)*360.0; planeOrient.setRoll(+((pitch / M_PI)) * 180.0); planeOrient.setTilt(-((roll / M_PI)) * 180.0); planeOrient.setHeading(((yaw / M_PI)) * 180.0 - 90.0); planeModel.setOrientation(planeOrient); currFollowHeading = ((yaw/M_PI))*180.0; planeLoc.setLatitude(lastLat); planeLoc.setLongitude(lastLon); planeLoc.setAltitude(lastAlt); planeModel.setLocation(planeLoc); if (followEnabled) updateFollowAircraft(); } } function enableDaylight(enabled) { if(enabled) { ge.getSun().setVisibility(true); } else { ge.getSun().setVisibility(false); } } function enableAtmosphere(enabled) { ge.getOptions().setAtmosphereVisibility(enabled); } function goHome() { var currView = ge.getView().copyAsLookAt(ge.ALTITUDE_ABSOLUTE); currView.setLatitude(homeLat); currView.setLongitude(homeLon); currView.setAltitude(homeAlt); currView.setRange(homeViewRange); currView.setTilt(currTilt); ge.getView().setAbstractView(currView); } function setCurrentAircraft(id) { currAircraft = id; } /** @brief Set the current view mode * * @param mode 0: side map view, 1: top/north map view, 2: fixed chase cam, 3: free chase cam */ function setViewMode(mode) { var currView = ge.getView().copyAsLookAt(ge.ALTITUDE_RELATIVE_TO_GROUND); if (mode == 0) { currView.setTilt(lastTilt); currView.setHeading(lastHeading); } if (mode == 1 && viewMode != mode) { lastTilt = currView.getTilt(); lastHeading = currView.getHeading(); currView.setTilt(0); currView.setHeading(0); } viewMode = mode; ge.getView().setAbstractView(currView); } function updateFollowAircraft() { currView = ge.getView().copyAsLookAt(ge.ALTITUDE_ABSOLUTE); currView.setLatitude(lastLat); currView.setLongitude(lastLon); if (distanceMode == 1) { var groundAltitude = ge.getGlobe().getGroundAltitude(lastLat, lastLon); currView.setAltitude(groundAltitude); } if (distanceMode == 0) currView.setAltitude(lastAlt); currView.setRange(currViewRange); if (viewMode != 3) // VIEW_MODE_CHASE_FREE { currView.setTilt(currFollowTilt); currView.setHeading(currFollowHeading); } ge.getView().setAbstractView(currView); } function failureCallback(object) { } </script> <style type="text/css"> html, body { margin: 0; width: 100%; height: 100%; } </style> </head> <body onload='init()' id='body'> <center> <div id='map3d' style='margin: 0; spacing: 0; height: 100%; width: 100%'></div> </center> <input type="hidden" id="JScript_initialized" value="false" /> <input type="hidden" id="JScript_dragWaypointIndex" value="0" /> <input type="hidden" id="JScript_dragWaypointLatitude" value="0" /> <input type="hidden" id="JScript_dragWaypointLongitude" value="0" /> <input type="hidden" id="JScript_dragWaypointAltitude" value="0" /> <input type="hidden" id="JScript_dragWaypointPending" value="false" /> <input type="hidden" id="JScript_newWaypointLatitude" value="0" /> <input type="hidden" id="JScript_newWaypointLongitude" value="0" /> <input type="hidden" id="JScript_newWaypointAltitude" value="0" /> <input type="hidden" id="JScript_newWaypointPending" value="false" /> <input type="hidden" id="JScript_currentCameraLatitude" value="0" /> <input type="hidden" id="JScript_currentCameraLongitude" value="0" /> <input type="hidden" id="JScript_currentCameraGroundAltitude" value="0" /> </body> </html>