|
|
|
|
<div class="tab-mission-control">
|
|
|
|
|
<div style="padding-top: 20px;padding-left: 20px; padding-right: 20px;position: relative;">
|
|
|
|
|
<div class="tab_title" data-i18n="tabMissionControl">Mission planer</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="content_wrapper">
|
|
|
|
|
<div class="cf_column fourth" id="missionControls">
|
|
|
|
|
<div class="spacer_right">
|
|
|
|
|
<div id="missionPlanerAction" class="gui_box grey">
|
|
|
|
|
<div class="gui_box_titlebar">
|
|
|
|
|
<div class="spacer_box_title i18n-replaced" data-i18n="missionActionMenuHead">Action Menu</div>
|
|
|
|
|
<div class="btnMenu btnMenuIcon show_btn" id="showHideActionButton">
|
|
|
|
|
<a class="ic_hide" href="#" title="Hide"></a>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="spacer" id="ActionContent">
|
|
|
|
|
|
|
|
|
|
<div class="btn save_btn">
|
|
|
|
|
<a id="loadFileMissionButton" class="btnicon ic_loadFromFile" href="#" title="Load Mission File"></a>
|
|
|
|
|
<a id="saveFileMissionButton" class="btnicon ic_save2File" href="#" title="Save Mission File"></a>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="btn save_btn">
|
|
|
|
|
<a id="loadMissionButton" class="btnicon ic_loadFromFC" href="#" title="Load mission from FC"</a>
|
|
|
|
|
<a id="saveMissionButton" class="btnicon ic_save2FC" href="#" title="Save mission to FC"</a>
|
|
|
|
|
<a id="loadEepromMissionButton" class="btnicon ic_loadFromEprom" href="#" title="Load Eeprom mission"></a>
|
|
|
|
|
<a id="saveEepromMissionButton" class="btnicon ic_save2Eprom" href="#" title="Save Eeprom mission"></a>
|
|
|
|
|
</div>
|
|
|
|
|
<hr>
|
|
|
|
|
<!-- <div class="btn">
|
|
|
|
|
<a id="playMissionButton" class="btnicon ic_play" href="#" title="Play mission"></a>
|
|
|
|
|
<div class="btn-danger">
|
|
|
|
|
<a id="stopMissionButton" class="btnicon ic_stop" href="#" title="Stop mission"></a>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<hr> -->
|
|
|
|
|
<div id="removeAllPoints" class="btn btn-danger" style="padding-top: 1px; display: inline-block">
|
|
|
|
|
<a class="btnicon ic_removeAll" href="#" title="Remove all"></a>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div id="missionPlanerTotalInfo" class="gui_box grey">
|
|
|
|
|
<div class="gui_box_titlebar">
|
|
|
|
|
<div class="spacer_box_title i18n-replaced" data-i18n="missionTotalInformationHead">Total information</div>
|
|
|
|
|
<div class="btnMenu btnMenuIcon show_btn" id="showHideInfoButton">
|
|
|
|
|
<a class="ic_hide" href="#" title="Hide"></a>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="spacer" id="InfoContent">
|
|
|
|
|
<div id="infoMissionFilename" style="padding-bottom: 2px;">
|
|
|
|
|
<span>Filename loaded:</span>
|
|
|
|
|
<span id="missionFilename" style="color: #3394b5"></span>
|
|
|
|
|
</div>
|
|
|
|
|
<div id="infoMissionDistance" style="padding-bottom: 2px;">
|
|
|
|
|
<span>Distance (m):</span>
|
|
|
|
|
<span id="missionDistance"></span>
|
|
|
|
|
</div>
|
|
|
|
|
<div id="infoAvailablePoints" style="padding-bottom: 2px;">
|
|
|
|
|
<span>Available Points</span>
|
|
|
|
|
<span id="availablePoints">0/0</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div id="infoMissionValid" style="padding-bottom: 2px;">
|
|
|
|
|
<span>Mission valid</span>
|
|
|
|
|
<div id="missionValid" style="display: inline-block"></div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div id="missionPlanerSettings" class="gui_box grey" style="display: none">
|
|
|
|
|
<div class="gui_box_titlebar">
|
|
|
|
|
<div class="spacer_box_title i18n-replaced" data-i18n="missionDefaultSettingsHead">Default settings</div>
|
|
|
|
|
<div class="btnMenu btnMenuIcon save_btn">
|
|
|
|
|
<a id="cancelSettings" class="ic_cancel" href="#" title="Cancel"></a>
|
|
|
|
|
<a id="saveSettings" class="ic_save" href="#" title="Save"></a>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="spacer">
|
|
|
|
|
<div class="point">
|
|
|
|
|
<label class="point-label" for="MPdefaultPointAlt">Alt (cm): </label>
|
|
|
|
|
<input id="MPdefaultPointAlt" type="text" value="0" required>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="point">
|
|
|
|
|
<label class="point-label" for="MPdefaultPointSpeed">Speed (cm/s): </label>
|
|
|
|
|
<input id="MPdefaultPointSpeed" type="text" value="0" required>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="point">
|
|
|
|
|
<label class="point-label" for="MPdefaultSafeRangeSH">Radius (m): </label>
|
|
|
|
|
<input id="MPdefaultSafeRangeSH" type="text" value="0" required>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div id="missionPlannerMultiMission" class="gui_box grey" style="display: none">
|
|
|
|
|
<div class="gui_box_titlebar">
|
|
|
|
|
<div class="spacer_box_title i18n-replaced" data-i18n="missionMultiMissionHead">Multi Missions</div>
|
|
|
|
|
<div class="btnMenu btnMenuIcon save_btn">
|
|
|
|
|
<div id="showHideMultimissionButton">
|
|
|
|
|
<a class="ic_hide" href="#" title="Hide"></a>
|
|
|
|
|
</div>
|
|
|
|
|
<a id="cancelMultimission" class="ic_cancel" href="#" title="Cancel"></a>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="spacer" id="multimissionContent">
|
|
|
|
|
<div class="btn btnTable btnTableIcon save_btn">
|
|
|
|
|
<div>
|
|
|
|
|
<span>Missions Info:</span>
|
|
|
|
|
<span id="multimissionInfo">None</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div style="margin-top: 5px">
|
|
|
|
|
<span>Active Mission:</span>
|
|
|
|
|
<span id="activeNissionIndex">1</span>
|
|
|
|
|
<a class="ic_save disabled" id="setActiveMissionButton" href="#" title="Set Active"></a>
|
|
|
|
|
</div>
|
|
|
|
|
<hr>
|
|
|
|
|
<div style="display: inline-block">
|
|
|
|
|
<label for="multimissionOptionList">Mission No.</label>
|
|
|
|
|
<select name="Number" id="multimissionOptionList" style="width: 50px">
|
|
|
|
|
<option value="0">ALL</option>
|
|
|
|
|
</select>
|
|
|
|
|
<div style="float: right">
|
|
|
|
|
<span>Update All</span>
|
|
|
|
|
<a class="ic_save disabled" id="updateMultimissionButton" href="#" title="Update All"></a>
|
|
|
|
|
</div>
|
|
|
|
|
<div style="margin-bottom: 5px; margin-top: 5px">
|
|
|
|
|
<label for="addMultimissionButton">Add New Mission</label>
|
|
|
|
|
<a class="ic_add disabled" id="addMultimissionButton" href="#" title="Add"></a>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div id="missionPlanerHome" class="gui_box grey" style="display: none">
|
|
|
|
|
<div class="gui_box_titlebar">
|
|
|
|
|
<div class="spacer_box_title i18n-replaced" data-i18n="missionHomeHead">Take Off home</div>
|
|
|
|
|
<div class="btnMenu btnMenuIcon save_btn">
|
|
|
|
|
<div id="showHideHomeButton">
|
|
|
|
|
<a class="ic_hide" href="#" title="Hide"></a>
|
|
|
|
|
</div>
|
|
|
|
|
<a id="cancelHome" class="ic_cancel" href="#" title="Cancel"></a>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="spacer" id="HomeContent">
|
|
|
|
|
<div>
|
|
|
|
|
<table class="safehomesTable">
|
|
|
|
|
<thead>
|
|
|
|
|
<tr>
|
|
|
|
|
<th style="width: 40px" data-i18n="SafehomeSelected"></th>
|
|
|
|
|
<th style="width: 140px" data-i18n="SafehomeLat"></th>
|
|
|
|
|
<th style="width: 140px" data-i18n="SafehomeLon"></th>
|
|
|
|
|
<th style="width: 100px" data-i18n="SafehomeAlt"></th>
|
|
|
|
|
</tr>
|
|
|
|
|
</thead>
|
|
|
|
|
<tbody id="homeTableBody">
|
|
|
|
|
<tr>
|
|
|
|
|
<td><div id="viewHomePoint" class="btnTable btnTableIcon">
|
|
|
|
|
<a class="ic_center" data-role="home-center" href="#" title="move to center view"></a>
|
|
|
|
|
</div>
|
|
|
|
|
</td>
|
|
|
|
|
<td><input type="number" class="home-lon" /></td>
|
|
|
|
|
<td><input type="number" class="home-lat" /></td>
|
|
|
|
|
<td><span id="elevationValueAtHome">N/A</span></td>
|
|
|
|
|
</tr>
|
|
|
|
|
</tbody>
|
|
|
|
|
</table>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="point" id="elevationEarthModelclass" style="display: none">
|
|
|
|
|
<label class="spacer_box_title i18n-replaced" for="elevationEarthModel">Use Sea Level Earth DEM Model: </label>
|
|
|
|
|
<input id="elevationEarthModel" type="checkbox" value="0" class="togglemedium" required>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div id="missionPlanerSafehome" class="gui_box grey" style="display: none">
|
|
|
|
|
<div class="gui_box_titlebar">
|
|
|
|
|
<div class="spacer_box_title i18n-replaced" data-i18n="missionSafehomeHead">Safe Home manager</div>
|
|
|
|
|
<div class="btnMenu btnMenuIcon save_btn">
|
|
|
|
|
<div id="showHideSafehomeButton">
|
|
|
|
|
<a class="ic_hide" href="#" title="Hide"></a>
|
|
|
|
|
</div>
|
|
|
|
|
<a id="cancelSafehome" class="ic_cancel" href="#" title="Cancel"></a>
|
|
|
|
|
<a id="saveEepromSafehomeButton" class="ic_save2Eprom" href="#" title="Save Eeprom Safehome"></a>
|
|
|
|
|
<a id="loadEepromSafehomeButton" class="ic_loadFromEprom" href="#" title="Load Eeprom Safehome"></a>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="spacer" id="SafehomeContent">
|
|
|
|
|
<div>
|
|
|
|
|
<table class="safehomesTable">
|
|
|
|
|
<thead>
|
|
|
|
|
<tr>
|
|
|
|
|
<th style="width: 40px" data-i18n="SafehomeSelected"></th>
|
|
|
|
|
<th style="width: 40px" data-i18n="SafehomeId"></th>
|
|
|
|
|
<th style="width: 60px" data-i18n="SafehomeEnabled"></th>
|
|
|
|
|
<th style="width: 140px" data-i18n="SafehomeLat"></th>
|
|
|
|
|
<th style="width: 140px" data-i18n="SafehomeLon"></th>
|
|
|
|
|
</tr>
|
|
|
|
|
</thead>
|
|
|
|
|
<tbody id="safehomesTableBody">
|
|
|
|
|
</tbody>
|
|
|
|
|
</table>
|
|
|
|
|
<hr>
|
|
|
|
|
<div class="spacer" id="safehomeLegend">
|
|
|
|
|
<span><b>Legend : </b></span>
|
|
|
|
|
<div class="legendItem">
|
|
|
|
|
<span class="fill" style="border-bottom-color:#900C3F"></span>
|
|
|
|
|
<span class="textLegend">Max distance (m):</span>
|
|
|
|
|
<span id="safeHomeMaxDistance" class="valueLegend"></span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="legendItem">
|
|
|
|
|
<span class="fill"></span>
|
|
|
|
|
<span class="textLegend">Safe Radius (m):</span>
|
|
|
|
|
<span id="SafeHomeSafeDistance" class="valueLegend"></span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="gui_box grey" id="MPeditPoint" style="display: none">
|
|
|
|
|
<div class="gui_box_titlebar">
|
|
|
|
|
<div class="spacer_box_title i18n-replaced" data-i18n="editPointHead" id="EditPointNumber">Edit point</div>
|
|
|
|
|
<div class="btnMenu btnMenuIcon">
|
|
|
|
|
<div id="showHideWPeditButton" class="save_btn">
|
|
|
|
|
<a class="ic_hide" href="#" title="Hide"></a>
|
|
|
|
|
</div>
|
|
|
|
|
<div id="removePoint" class="btn btnMenu-danger">
|
|
|
|
|
<a id="removePointButton" class="ic_removeAll" href="#" title="Remove"></a>
|
|
|
|
|
</div>
|
|
|
|
|
<div id="editMission" class="save_btn" style="display: none">
|
|
|
|
|
<a id="editMissionButton" class="ic_setup" href="#" title="Edit Mission"></a>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="spacer" id="WPeditContent">
|
|
|
|
|
<input type="hidden" name="pointNumber" value="">
|
|
|
|
|
<div class="point">
|
|
|
|
|
<label class="point-label" for="pointType">Type: </label>
|
|
|
|
|
<select name="type" id="pointType">
|
|
|
|
|
<!--<option value="1">Home</option>-->
|
|
|
|
|
<option value="1">Waypoint</option>
|
|
|
|
|
<!-- <option value="2">PH_UNLIM</option> -->
|
|
|
|
|
<option value="3">PH_TIME</option>
|
|
|
|
|
<!--<option value="4">RTH</option>-->
|
|
|
|
|
<option value="5">POI</option>
|
|
|
|
|
<!--<option value="6">Jump</option>
|
|
|
|
|
<option value="7">Heading lock</option>-->
|
|
|
|
|
<option value="8">Land</option>
|
|
|
|
|
</select>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="point">
|
|
|
|
|
<label class="point-label" for="pointLat">Lat: </label>
|
|
|
|
|
<input id="pointLat" type="text" value="0.0" required>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="point">
|
|
|
|
|
<label class="point-label" for="pointLon">Lon: </label>
|
|
|
|
|
<input id="pointLon" type="text" value="0.0" required>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="point">
|
|
|
|
|
<label class="point-label" for="pointAlt">Alt (cm): </label>
|
|
|
|
|
<input id="pointAlt" type="text" value="0" required><span id="altitudeInMeters"></span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="point" id="pointP3class" style="display: none">
|
|
|
|
|
<label class="point-label" for="pointP3">Parameter 3: </label>
|
|
|
|
|
<input id="pointP3" type="checkbox" value="0" class="togglemedium" checked required>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="point" id="elevationAtWP" style="display: none">
|
|
|
|
|
<label class="point-label">Elevation (m): </label>
|
|
|
|
|
<span id="elevationValueAtWP">N/A</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="point" id="groundClearanceAtWP" style="display: none">
|
|
|
|
|
<label class="point-label">Grd Dist (m): </label>
|
|
|
|
|
<span id="groundClearanceValueAtWP">N/A</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="point" id="pointP1class" style="display: none">
|
|
|
|
|
<label class="point-label" for="pointP1">Parameter 1: </label>
|
|
|
|
|
<input id="pointP1" type="text" value="0" required>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="point" id="pointP2class" style="display: none">
|
|
|
|
|
<label class="point-label" for="pointP2">Parameter 2: </label>
|
|
|
|
|
<input id="pointP2" type="text" value="0" required>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<table class="waypointOptionsTable">
|
|
|
|
|
<thead>
|
|
|
|
|
<tr>
|
|
|
|
|
<th style="width: 30px">
|
|
|
|
|
<div id="addOptionsPoint" class="btn btnTable btnTableIcon btnTable-success">
|
|
|
|
|
<a id="addOptionsPointButton" class="ic_add" data-role="waypointOptions-add" href="#" style="float: center" title="Add"></a>
|
|
|
|
|
</div>
|
|
|
|
|
</th>
|
|
|
|
|
<th style="width: 50px" data-i18n="WaypointOptionId"></th>
|
|
|
|
|
<th style="width: 80px" data-i18n="WaypointOptionAction"></th>
|
|
|
|
|
<th style="width: 120px" data-i18n="WaypointOptionP1"></th>
|
|
|
|
|
<th style="width: 120px" data-i18n="WaypointOptionP2"></th>
|
|
|
|
|
</tr>
|
|
|
|
|
</thead>
|
|
|
|
|
<tbody id="waypointOptionsTableBody">
|
|
|
|
|
</tbody>
|
|
|
|
|
</table>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- <div class="point-radio" id="pointOptionclass" style="display: none">
|
|
|
|
|
<div class="radio-line">
|
|
|
|
|
<input type="radio" id="Options_None" name="Options" value="None" checked>
|
|
|
|
|
<label class="radio-options" for="Options_None">None</label><br>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="radio-line">
|
|
|
|
|
<input type="radio" id="Options_RTH" name="Options" value="RTH">
|
|
|
|
|
<label class="radio-options" for="Options_RTH">RTH</label>
|
|
|
|
|
<input type="checkbox" id="Options_LandRTH">
|
|
|
|
|
<label for="Options_LandRTH">Land after RTH</label><br>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="radio-line">
|
|
|
|
|
<input type="radio" id="Options_JUMP" name="Options" value="JUMP">
|
|
|
|
|
<label class="radio-options" for="Options_JUMP">JUMP</label>
|
|
|
|
|
<label for="Options_TargetJUMP">Target WP: </label>
|
|
|
|
|
<input id="Options_TargetJUMP" type="text" value="0" required>
|
|
|
|
|
<label for="Options_NumberJUMP">Repeat: </label>
|
|
|
|
|
<input id="Options_NumberJUMP" type="text" value="0" required><br>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="radio-line">
|
|
|
|
|
<input type="radio" id="Options_HEAD" name="Options" value="SET_HEAD">
|
|
|
|
|
<label class="radio-options" for="Options_HEAD">HEAD</label>
|
|
|
|
|
<label for="Options_HeadingHead">Heading: </label>
|
|
|
|
|
<input id="Options_HeadingHead" type="text" value="-1" required><br>
|
|
|
|
|
</div>
|
|
|
|
|
</div> -->
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="cf_column threefourth_left" style="height: 100%;">
|
|
|
|
|
<div id="missionMap"></div>
|
|
|
|
|
<div id="missionPlanerElevation" class="gui_box grey" style="display: none">
|
|
|
|
|
<div class="gui_box_titlebar">
|
|
|
|
|
<div class="spacer_box_title i18n-replaced" data-i18n="missionDefaultElevationHead">Elevation Profile</div>
|
|
|
|
|
<div class="btnMenu btnMenuIcon save_btn">
|
|
|
|
|
<a id="cancelPlot" class="ic_cancel" href="#" title="Cancel"></a>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="spacer">
|
|
|
|
|
<div id="elevationDiv">
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div id="notLoadMap" data-i18n="useOnlyStandalone" style="display: none;"></div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
