earth.html

<!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 lastLat = 0;
var lastLon = 0;
var lastAlt = 0;
var currLat = 47.3769;
var currLon = 8.549444;
var currAlt = 470;
var currFollowHeading = 0.0;

var homeLat = 0;
var homeLon = 0;
var homeAlt = 0;
var homeViewRange = 500;
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 viewMode = 0;
var lastTilt = 0;
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 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;

function getGlobal(variable)
{
	return variable;
}

function getDraggingAllowed()
{
	return draggingAllowed;
}

function setDraggingAllowed(allowed)
{
	draggingAllowed = allowed;
}

function setNewWaypointPending(pending)
{
	newWaypointPending = pending;
}

function setDragWaypointPending(pending)
{
	dragWaypointPending = 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 (draggingAllowed)
  {
  if (event.getTarget().getType() == 'KmlPlacemark' &&
      event.getTarget().getGeometry().getType() == 'KmlPoint') {
    //event.preventDefault();
    var placemark = event.getTarget();
    
    dragInfo = {
      placemark: event.getTarget(),
      dragged: false
    };
  }
  }
});

// listen for mousemove on the globe
google.earth.addEventListener(ge.getGlobe(), 'mousemove', function(event)
{
  if (draggingAllowed)
  {
  if (dragInfo) {
    event.preventDefault();
    var point = dragInfo.placemark.getGeometry();
    point.setLatitude(event.getLatitude());
    point.setLongitude(event.getLongitude());
    dragInfo.dragged = true;
    dragWaypointIndex = dragInfo.placemark.getDescription();
	dragWaypointLatitude = event.getLatitude();
	dragWaypointLongitude = event.getLongitude();
	dragWaypointAltitude = point.getAltitude();
	dragWaypointPending = true;
  }
  }
});

// listen for mouseup on the window
google.earth.addEventListener(ge.getWindow(), 'mouseup', function(event)
{
  if (draggingAllowed)
  {
  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();
      	var point = dragInfo.placemark.getGeometry();
      	dragWaypointLatitude = event.getLatitude();
		dragWaypointLongitude = event.getLongitude();
		dragWaypointAltitude = point.getAltitude();
    	dragWaypointPending = 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;
    }
}); 
}


function setCurrAircraft(id)
{
	currAircraft = id;
}

function setGCSHome(lat, lon, alt)
{
	homeLat = lat;
	homeLon = lon;
	homeAlt = alt;
	
	
	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);  

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

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

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+"");
	    console.log('WP LOC:' + 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); 
	    placemark.setGeometry(location);  

	    // Add the placemark to Earth. 
	    ge.getFeatures().appendChild(placemark); 
		waypoints[index] = placemark;
	}
	// Add connecting line
	
}

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://qgroundcontrol.org/_media/users/models/multiplex-twinstar.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('');
          //planeColor = color;
          
          createTrail(id, color);
          console.log(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);

// Add LineString points
//lineString.getCoordinates().pushLatLngAlt(48.754, -121.835, 700);

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

// Add the feature to Earth
//ge.getFeatures().appendChild(trailPlacemarks[id]);

}

function clearTrail(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
    //lineStyle.getColor().set(color);  // aabbggrr format

    // Add the feature to Earth
    if (trailsVisible[id] == true) ge.getFeatures().replaceChild(trailPlacemarks[id], trailPlacemarks[id]);
}

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

    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;
	
	
	// FIXME Currently invalid conversion from right-handed z-down to z-up frame
	planeOrient.setRoll(((roll/M_PI))*180.0+180.0);
	planeOrient.setTilt(((pitch/M_PI))*180.0+180.0);
	planeOrient.setHeading(((yaw/M_PI))*180.0-90.0);
	
	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 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)
{
	viewMode = mode;
	
	var currView = ge.getView().copyAsLookAt(ge.ALTITUDE_ABSOLUTE);
	
	if (mode == 0)
	{
		currView.setTilt(0);
		currView.setHeading(0);
	}
	if (mode == 1)
	{
		lastTilt = currView.getTilt();
		lastHeading = currView.getHeading();
		var lastLat2 = currView.getLatitude();
		var lastLon2 = currView.getLongitude();
		var lastAlt2 = currView.getAltitude();
		currView.setTilt(0);
		currView.setHeading(0);
		currView.setLatitude(lastLat2);
		currView.setLongitude(lastLon2);
		currView.setAltitude(lastAlt2);
	}
	
	ge.getView().setAbstractView(currView);
}

function updateFollowAircraft()
{
	currView = ge.getView().copyAsLookAt(ge.ALTITUDE_ABSOLUTE);
	currView.setLatitude(lastLat);
	currView.setLongitude(lastLon);
	currView.setAltitude(lastAlt);

	currView.setRange(currViewRange);
	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>
  </body>
</html>