Newer
Older
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Mariano Lizarraga
committed
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<!-- <head> -->
<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="https://www.google.com/jsapi?key=ABQIAAAA5Q6wxQ6lxKS8haLVdUJaqhSjosg_0jiTTs2iXtkDVG0n0If1mBRHzhWw5VqBZX-j4NuzoVpU-UaHVg"></script>
<script type="text/javascript">
google.load("earth", "1", { 'language': 'en'});
var followEnabled = false;
var lineAltitudeOffset = 0.5; ///< 0.5 m higher than waypoint, prevents the line from entering the ground
var lastLat = [];
var lastLon = [];
var lastAlt = [];
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 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 lastTilt = currTilt;
var lastRoll = 0;
var lastHeading = 0;
var M_PI = 3.14159265;
var planeOrient;
var planeLoc;
var aircraftLocations = [];
var aircraftLastLocations = [];
var aircraftScaleFactors = [];
var aircraftLinks = [];
var aircraftModels = [];
var attitudes = [];
var locations = [];
var trails = [];
var trailPlacemarks = [];
var trailsVisible = [];
var trailColors = [];
var waypointLines = [];
var waypointLinePlacemarks = [];
var waypointLineColors = [];
//var trailPlacemarks[id];
var lineStyle;
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 homePlacemark = null;
// Data / heightmap
var heightMapPlacemark = null;
var heightMapModel = 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)
{
dragInfo = {
placemark: event.getTarget(),
dragged: false
};
}
}
});
// listen for mousemove on the globe
google.earth.addEventListener(ge.getGlobe(), 'mousemove', function(event)
{
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 (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;
}
}
});
// 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 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)
{
var initialLength = waypoints.length;
for (var i=len; i<initialLength; i++)
{
var placemark = waypoints.pop();
ge.getFeatures().removeChild(placemark);
waypointLines[id].getCoordinates().pop();
}
}
}
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].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');
//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);
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);
aircraft[id] = ge.createPlacemark('');
aircraft[id].setName('aircraft');
aircraftModels[id] = ge.createModel('');
ge.getFeatures().appendChild(aircraft[id]);
aircraftLocations[id] = ge.createLocation('');
aircraftModels[id].setLocation(aircraftLocations[id]);
aircraftLinks[id] = ge.createLink('');
attitudes[id] = ge.createOrientation('');
aircraftModels[id].setOrientation(attitudes[id]);
//planeLink.setHref('http://www.asl.ethz.ch/people/rudink/senseSoarDummy.dae');
aircraftLinks[id].setHref('http://qgroundcontrol.org/_media/users/models/sfly-hex.dae');
aircraftScaleFactors[id] = 1.0/1000.0;
//planeLink.setHref('http://qgroundcontrol.org/_media/users/models/ascent-park-glider.dae');
aircraftModels[id].setLink(aircraftLinks[id]);
var scale = aircraftModels[id].getScale();
scale.set(scale.getX()*aircraftScaleFactors[id], scale.getY()*aircraftScaleFactors[id], scale.getZ()*aircraftScaleFactors[id])
aircraftModels[id].setScale(scale);
aircraftModels[id].setAltitudeMode (ge.ALTITUDE_ABSOLUTE);
aircraftLocations[id].setLatitude(currLat);
aircraftLocations[id].setLongitude(currLon);
aircraftLocations[id].setAltitude(currAlt);
aircraftLastLocations[id] = aircraftLocations[id];
lastLat[id] = 0;
lastLon[id] = 0;
lastAlt[id] = 0;
}
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
// 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
// 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]);
{
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);
pixhawk
committed
// Add LineString points
trails[id].getCoordinates().pushLatLngAlt(lat, lon, alt);
pixhawk
committed
// 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)
{
pixhawk
committed
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);
pixhawk
committed
ge.getNavigationControl().setVisibility(ge.VISIBILITY_AUTO);
pixhawk
committed
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);
// Load heightmap
// http://www.inf.ethz.ch/personal/lomeier/data/untex-environment.dae
heightMapPlacemark.setName('aircraft');
heightMapModel = ge.createModel('');
ge.getFeatures().appendChild(heightMapPlacemark);
planeLoc = ge.createLocation('');
heightMapModel.setLocation(planeLoc);
planeLink = ge.createLink('');
planeOrient = ge.createOrientation('');
heightMapModel.setOrientation(planeOrient);
planeLink.setHref('http://www.inf.ethz.ch/personal/lomeier/data/untex-environment.dae');
heightMapModel.setLink(planeLink);
var scale = heightMapModel.getScale();
var factor = 1.0;//1.0/1000.0;
scale.set(scale.getX()*factor, scale.getY()*factor, scale.getZ()*factor)
heightMapModel.setScale(scale);
heightMapModel.setAltitudeMode (ge.ALTITUDE_ABSOLUTE);
planeLoc.setLatitude(currLat);
planeLoc.setLongitude(currLon);
planeLoc.setAltitude(currAlt);
heightMapPlacemark.setGeometry(heightMapModel);*/
enableEventListener();
document.getElementById('JScript_initialized').setAttribute('value','true');
pixhawk
committed
initialized = true;
}
function setAircraftPositionAttitude(id, lat, lon, alt, roll, pitch, yaw)
{
if (lastLat[id] == 0)
{
lastLat[id] = lat;
lastLon[id] = lon;
}
currFollowHeading = currFollowHeading*0.95+0.05*(((yaw/M_PI))*180.0);
var trueGroundAlt = ge.getGlobe().getGroundAltitude(lat, lon);
if (trueGroundAlt < alt)
{
}
// Interpolate between t-1 and t and set new states
//lastLat[id] = lastLat[id]*0.5+lat*0.5;
//lastLon[id] = lastLon[id]*0.5+lon*0.5;
//lastAlt[id] = lastAlt[id]*0.5+alt*0.5;
lastLat[id] = lastLat[id]*0.5+lat*0.5;
lastLon[id] = lastLon[id]*0.5+lon*0.5;
lastAlt[id] = lastAlt[id]*0.5+alt*0.5;
attitudes[id].setRoll(+((roll/M_PI))*180.0);
attitudes[id].setTilt(-((pitch/M_PI))*180.0);
attitudes[id].setHeading(((yaw/M_PI))*180.0-90.0);
aircraftModels[id].setOrientation(attitudes[id]);
pixhawk
committed
aircraftLocations[id].setLatitude(lastLat[id]);
aircraftLocations[id].setLongitude(lastLon[id]);
aircraftLocations[id].setAltitude(lastAlt[id]);
aircraftModels[id].setLocation(aircraftLocations[id]);
if (followEnabled && id == currAircraft) 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);
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[currAircraft]);
currView.setLongitude(lastLon[currAircraft]);
if (distanceMode == 1)
{
var groundAltitude = ge.getGlobe().getGroundAltitude(lastLat[currAircraft], lastLon[currAircraft]);
currView.setAltitude(groundAltitude);
}
if (distanceMode == 0) currView.setAltitude(lastAlt[currAircraft]);
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" />