earth.html 7.95 KB
Newer Older
1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 3

<html>
pixhawk's avatar
pixhawk committed
4
  <head>
5 6
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <!-- <head> -->
7
<!-- QGroundControl -->
pixhawk's avatar
pixhawk committed
8 9
    <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 *** -->
10 11
    <script type="text/javascript" src="http://www.google.com/jsapi?key=ABQIAAAAwbkbZLyhsmTCWXbTcjbgbRSzHs7K5SvaUdm8ua-Xxy_-2dYwMxQMhnagaawTo7L1FE1-amhuQxIlXw"></script>
    <script type="text/javascript">
12
google.load("earth", "1", { 'language': 'en'});
pixhawk's avatar
pixhawk committed
13 14

var ge = null;
15 16
var initialized = false;
var currAircraft = 220;
17
var followEnabled = false;
18 19 20

var lastLat = 0;
var lastLon = 0;
lm's avatar
lm committed
21
var lastAlt = 0;
22 23 24
var currLat = 47.3769;
var currLon = 8.549444;
var currAlt = 470;
25
var currFollowHeading = 0.0;
26 27 28 29 30 31 32 33

var homeLat = 0;
var homeLon = 0;
var homeAlt = 0;
var homeViewRange = 500;
var homeLocation = null;
var homeGroundLevel = 0;

34
var currViewRange = 50.0;	///<< The current viewing range from this position (in meters)
35 36 37 38
var currTilt = 40.0;		///<< The tilt angle (in degrees)
var currFollowTilt = 40.0;
var currView = null;

39 40
var M_PI = 3.14159265;

41 42 43 44 45


var planeOrient;
var planeLoc;

46 47 48 49
var aircraft = [];
var attitudes = [];
var locations = [];
var trails = [];
50 51 52
var trail;
var lineStringPlacemark;
var lineStyle;
53 54

// Aircraft class
55
var planeColor = '6600ffff';
56 57 58 59 60 61 62


function isInitialized()
{
	return initialized;
}

pixhawk's avatar
pixhawk committed
63

64 65
function init()
{
66 67 68 69 70
	google.earth.createInstance("map3d", initCallback, failureCallback);
}



71 72 73 74
function setCurrAircraft(id)
{
	currAircraft = id;
}
75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106

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;
	    }
pixhawk's avatar
pixhawk committed
107 108
}

pixhawk's avatar
pixhawk committed
109
function createAircraft(id, type, color)
110
{
111
	      planePlacemark = ge.createPlacemark('');
112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130
          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);
          
pixhawk's avatar
pixhawk committed
131 132 133 134
          // Write into global structure
          aircraft[id] = planePlacemark;
          attitudes[id] = planeOrient;
          locations[id] = planeLoc;
135
          //planeColor = color;
pixhawk's avatar
pixhawk committed
136
          
137
          //createTrail(id, color);
pixhawk's avatar
pixhawk committed
138 139 140 141
}

function createTrail(id, color)
{
142 143
          lineStringPlacemark = ge.createPlacemark('');
          // Create the placemark
pixhawk's avatar
pixhawk committed
144 145
// Create the LineString; set it to extend down to the ground
// and set the altitude mode
146 147
trail = ge.createLineString('');
lineStringPlacemark.setGeometry(trail);
148
trail.setExtrude(false);
149
trail.setAltitudeMode(ge.ALTITUDE_ABSOLUTE);
pixhawk's avatar
pixhawk committed
150 151 152 153 154 155

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

// Create a style and set width and color of line
lineStringPlacemark.setStyleSelector(ge.createStyle(''));
156
lineStyle = lineStringPlacemark.getStyleSelector().getLineStyle();
pixhawk's avatar
pixhawk committed
157
lineStyle.setWidth(5);
158 159
lineStyle.getColor().set(planeColor);  // aabbggrr format
//lineStyle.getColor().set(color);
pixhawk's avatar
pixhawk committed
160 161 162 163
//lineStyle.getColor().set(color);  // aabbggrr format

// Add the feature to Earth
ge.getFeatures().appendChild(lineStringPlacemark);
164

pixhawk's avatar
pixhawk committed
165 166 167 168
}

function addTrailPosition(id, lat, lon, alt)
{
169
	trail.setExtrude(false);
170 171 172 173 174 175 176 177 178 179
trail.setAltitudeMode(ge.ALTITUDE_ABSOLUTE);

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

// Create a style and set width and color of line
lineStringPlacemark.setStyleSelector(ge.createStyle(''));
lineStyle = lineStringPlacemark.getStyleSelector().getLineStyle();
lineStyle.setWidth(5);
180
lineStyle.getColor().set(planeColor);  // aabbggrr format
181 182 183 184
//lineStyle.getColor().set(color);  // aabbggrr format

// Add the feature to Earth
ge.getFeatures().replaceChild(lineStringPlacemark, lineStringPlacemark);
pixhawk's avatar
pixhawk committed
185 186
}

187 188
function initCallback(object)
{
pixhawk's avatar
pixhawk committed
189 190 191 192
  ge = object;
  ge.getWindow().setVisibility(true);
          ge.getOptions().setStatusBarVisibility(true); 
        ge.getOptions().setScaleLegendVisibility(true);
193 194
		ge.getOptions().setFlyToSpeed(5.0); 
        //ge.getOptions().setFlyToSpeed(ge.SPEED_TELEPORT); 
pixhawk's avatar
pixhawk committed
195 196 197 198 199 200
        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);
201

202 203
        createTrail(220, 'bb2222ff');
        createAircraft(220);
204 205 206 207 208 209 210 211 212 213

        initialized = true;
        
        
}

function setAircraftPositionAttitude(id, lat, lon, alt, roll, pitch, yaw)
{
	if (id == currAircraft)
	{
lm's avatar
lm committed
214 215 216 217 218
		if (lastLat == 0)
		{
			lastLat = currLat;
			lastLon = lastLon;
		}
219 220 221
		currLat = lat;
		currLon = lon;
		currAlt = alt;
222
		//currFollowHeading = ((yaw/M_PI)+1.0)*360.0;
223 224
	}
	
225 226 227 228
	// FIXME Currently invalid conversion from right-handed z-down to z-up frame
	planeOrient.setRoll(((roll/M_PI)+1.0)*360.0);
	planeOrient.setTilt(((pitch/M_PI)+1.0)*360.0);
	planeOrient.setHeading(((yaw/M_PI)+1.0)*360.0);
229 230 231
        
        
                
232 233 234
    planeLoc.setLatitude(lat);
    planeLoc.setLongitude(lon);
    planeLoc.setAltitude(alt);
235
	
pixhawk's avatar
pixhawk committed
236 237
}

238 239 240 241 242 243 244 245 246 247 248 249
function enableDaylight(enabled)
{
	if(enabled)
	{
		ge.getSun().setVisibility(true);
	}
	else
	{
		ge.getSun().setVisibility(false);
	}
}
		
250 251 252 253 254 255 256 257 258
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);
pixhawk's avatar
pixhawk committed
259
}
260 261 262 263 264 265 266 267 268

function setCurrentAircraft(id)
{
	currAircraft = id;
}

function updateFollowAircraft()
{
	currView = ge.getView().copyAsLookAt(ge.ALTITUDE_ABSOLUTE);
lm's avatar
lm committed
269 270 271 272 273 274 275 276
	// Interpolate
	currView.setLatitude(lastLat*0.7+currLat*0.3);
	currView.setLongitude(lastLon*0.7+currLon*0.3);
	currView.setAltitude(lastAlt*0.7+currAlt*0.3);
	// Set new states
	lastLat = lastLat*0.7+currLat*0.3;
	lastLon = lastLon*0.7+currLon*0.3;
	lastAlt = lastAlt*0.7+currAlt*0.3;
277 278
	currView.setRange(currViewRange);
	currView.setTilt(currFollowTilt);
lm's avatar
lm committed
279
	currFollowHeading = 0;// 0.9*currFollowHeading+0.1*((Math.atan2(lastLat-currLat, lastLon-currLon)/M_PI)+1.0)*360.0;
280
	currView.setHeading(currFollowHeading-0.0);
281 282 283 284 285 286 287 288 289
	ge.getView().setAbstractView(currView);
}

function failureCallback(object)
{
}
</script>


pixhawk's avatar
pixhawk committed
290 291 292 293 294 295 296 297 298 299 300 301 302 303
    <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>