yuriy/joplin-mdbooks-website
1
0
Fork 0
Code Issues 11 Pull Requests Packages Projects Releases Wiki Activity

Updates

Browse Source
This commit is contained in:
Stavros Korokithakis 2023-03-14 12:20:29 +02:00
parent 228e456869
commit be3684ccc1
No known key found for this signature in database
GPG Key ID: 26EA345ECD4C2A63
1 changed files with 98 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

161
content/ardupilot/hd-osd-tool.md
View File

@ -1,22 +1,23 @@
# HD OSD tool # HD OSD tool
This tool lets you configure your OSD, supporting larger grid sizes than the standard Ardupilot one.
<style> <style>
body{ body{
/* font-family: Arial, Helvetica, sans-serif; */
/* font-family: sans-serif, "Helvetica Neue", "Lucida Grande", Arial; */
box-sizing: border-box; box-sizing: border-box;
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
} }
div.box{ div.box{
/* 50x18 & 53x20 */ /* 50x18 & 53x20 */
width: 24px; width: 24px;
height: 36px; height: 36px;
background-color:lightskyblue transparent ; background-color:lightskyblue transparent ;
border: 1px solid grey; border: 1px solid rgb(196, 196, 196);
border-style: none none solid solid; border-style: none none solid solid;
box-sizing: border-box; box-sizing: border-box;
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
@ -29,18 +30,18 @@ This tool lets you configure your OSD, supporting larger grid sizes than the sta
} }
div.box_50x18{ div.box_50x18{
/* 50x18 & 53x20 */ /* 50x18 & 53x20 */
width: 24px; width: 24px;
height: 36px; height: 36px;
} }
div.box_53x20{ div.box_53x20{
/* 50x18 & 53x20 */ /* 50x18 & 53x20 */
width: 24px; width: 24px;
height: 36px; height: 36px;
} }
div.box_60x22{ div.box_60x22{
/* 60x22 */ /* 60x22 */
width: 21px; width: 21px;
height: 30px; height: 30px;
} }
div.ground{ div.ground{
background-color:peru transparent; background-color:peru transparent;
@ -54,10 +55,10 @@ This tool lets you configure your OSD, supporting larger grid sizes than the sta
} }
div.start{ div.start{
clear: left; clear: left;
} }
div.used{ div.used{
background-color: rgba(128, 255, 0, 0.4); background-color: rgba(128, 255, 0, 0.4);
color: rgba(232, 247, 217, 0.4); color: rgba(232, 247, 217);
border: 2px solid rgba(255, 78, 78, 0.7); border: 2px solid rgba(255, 78, 78, 0.7);
font-weight: bold; font-weight: bold;
@ -75,7 +76,7 @@ This tool lets you configure your OSD, supporting larger grid sizes than the sta
z-index: 1001; z-index: 1001;
} }
div.bottom{ div.bottom{
position: absolute; position: absolute;
bottom: 0px; bottom: 0px;
} }
div.maincontainer{ div.maincontainer{
@ -88,8 +89,10 @@ This tool lets you configure your OSD, supporting larger grid sizes than the sta
width: 1280px; width: 1280px;
height: 720px; height: 720px;
z-index: 0; z-index: 0;
background-image: url("https://imgz.org/iCRSQqkC.jpg"); /* background-image: url("https://imgz.org/iCRSQqkC.jpg"); */
background-repeat: no-repeat; background-repeat: no-repeat;
background: linear-gradient(180deg, rgba(54,120,176,1) 0%, rgba(179,179,179,1) 50%, rgba(97,62,0,1) 100%);
border: none; border: none;
float: left; float: left;
clear: left; clear: left;
@ -139,23 +142,26 @@ This tool lets you configure your OSD, supporting larger grid sizes than the sta
} }
</style> </style>
<div style="float: left;"> <div style="float: left;">
<p>
This tool lets you configure your OSD, supporting larger grid sizes than the standard Ardupilot one.
</p>
<table> <table>
<tr> <tr>
<td colspan="2"> <td colspan="2">
<b>TIP: use OSDn_TXT_RES=3 to extend the grid from 50x18 to 60x22.*</b> <b>TIP: use OSDn_TXT_RES=3 to extend the grid from 50x18 to 60x22.*</b>
<p>To use the tool:</p> <p>To use the tool:</p>
<ol> <ol>
<li>Create a parameter backup using Parachute or Mission Planner.</li> <li>Create a parameter backup using Parachute or Mission Planner.</li>
<li>Paste your configuration in the textbox below. Your OSD items will be displayed.</li> <li>Paste your configuration in the textbox below. Your OSD items will be displayed.</li>
<li>Resize your browser window to your needs (strg +/- | cmd +/-).</li> <li>Resize your browser window to your needs (strg +/- | cmd +/-).</li>
<li>Add OSD elements from the list on the right or re-arrange them as you like.</li> <li>Add OSD elements from the list on the right or re-arrange them as you like.</li>
<li>Copy the generated parachute command to the CLI or the Mission Planner config to a textfile and restore.</li> <li>Copy the generated parachute command to the CLI or the Mission Planner config to a textfile and restore.</li>
</ol> </ol>
</td> </td>
</tr> </tr>
<tr> <tr>
<td> <td>
Show coordinates: Show coordinates:
</td> </td>
<td> <td>
<input type="checkbox" id="showCoords" value="true" onClick="drawOSD();" unchecked><br> <input type="checkbox" id="showCoords" value="true" onClick="drawOSD();" unchecked><br>
@ -163,7 +169,7 @@ This tool lets you configure your OSD, supporting larger grid sizes than the sta
</tr> </tr>
<tr> <tr>
<td> <td>
Grid: Grid:
</td> </td>
<td> <td>
<select id="chooseGrid" onchange="switchGrid();"><option value="60x22">60x22 (WTF-OS)</option><option value="53x20">53x20 (Walksnail)</option><option value="50x18">50x18 (DJI-FPV)</option></select><br> <select id="chooseGrid" onchange="switchGrid();"><option value="60x22">60x22 (WTF-OS)</option><option value="53x20">53x20 (Walksnail)</option><option value="50x18">50x18 (DJI-FPV)</option></select><br>
@ -175,6 +181,7 @@ This tool lets you configure your OSD, supporting larger grid sizes than the sta
</td> </td>
<td> <td>
<select id="chooseBackground" onchange="switchBackground();"> <select id="chooseBackground" onchange="switchBackground();">
<option value="---">none</option>
<option value="iCRSQqkC">4:3</option> <option value="iCRSQqkC">4:3</option>
<option value="i5iVNkQY">4:3 DJI Elements</option> <option value="i5iVNkQY">4:3 DJI Elements</option>
<option value="i5jr5EsY">16:9</option> <option value="i5jr5EsY">16:9</option>
@ -182,9 +189,23 @@ This tool lets you configure your OSD, supporting larger grid sizes than the sta
</select> </select>
</td> </td>
</tr> </tr>
<tr>
<td>
OSD Layout:
</td>
<td>
<select id="OSDnumber" onchange="setOSDnumber();">
<option value="1">OSD1</option>
<option value="2">OSD2</option>
<option value="3">OSD3</option>
<option value="4">OSD4</option>
<option value="5">OSD5</option>
</select>
</td>
</tr>
<tr> <tr>
<td> <td>
Paste your Parachute config: Paste your Parachute or MissionPlanner config:
</td> </td>
<td> <td>
<textarea id="config" oninput="compute();" style="width:500px;height:50px"> <textarea id="config" oninput="compute();" style="width:500px;height:50px">
@ -201,17 +222,22 @@ This tool lets you configure your OSD, supporting larger grid sizes than the sta
</div> </div>
<div id="maincontainer"> <div id="maincontainer">
<div style="float: left; border: none; float: left; clear: both; width: 1520px;"> <div style="float: left; border: none; float: left; clear: both; width: 1520px;">
<div class="background" id="background" style="position:relative"> <div class="background" id="background" style="position:relative">
<div id="grid" class="grid grid60x22"></div> <div id="grid" class="grid grid60x22"></div>
</div> </div>
<div id="availableparameters" style="position: relative; overflow-y: scroll; height: 720px; width:auto; float: right; border: none;"></div> <div id="availableparameters" style="position: relative; overflow-y: scroll; height: 720px; width:auto; float: right; border: none;"></div>
<div id="parachute_command" style=" border: 1px solid black; float: left; clear:both; padding:20px"></div> <div id="parachute_command" style=" border: 1px solid black; float: left; clear:both; padding:20px"></div>
</div> </div>
</div> </div>
<script src="https://unpkg.com/json5@2/dist/index.min.js"></script> <script src="https://unpkg.com/json5@2/dist/index.min.js"></script>
<script type="text/javascript"> <script type="text/javascript">
function setOSDnumber(){
osd_number = document.getElementById('OSDnumber').value;
compute();
}
function switchBackground(){ function switchBackground(){
document.getElementById('background').style.backgroundImage = "url(https://imgz.org/"+document.getElementById('chooseBackground').value+".jpg)"; document.getElementById('background').style.backgroundImage = "url(https://imgz.org/"+document.getElementById('chooseBackground').value+".jpg)";
} }
@ -244,9 +270,9 @@ function remove(ev) {
var target = ev.target || ev.srcElement; var target = ev.target || ev.srcElement;
var param = ev.dataTransfer.getData("paramName"); var param = ev.dataTransfer.getData("paramName");
var sourceid = ev.dataTransfer.getData("sourceid"); var sourceid = ev.dataTransfer.getData("sourceid");
console.log("removing param: "+param+" from "+sourceid); console.log("removing param: "+param+" from "+sourceid);
if(sourceid){ if(sourceid){
document.getElementById(sourceid).innerHTML=""; document.getElementById(sourceid).innerHTML="";
} }
@ -270,22 +296,31 @@ function drop(ev) {
var sourceid = ev.dataTransfer.getData("sourceid"); var sourceid = ev.dataTransfer.getData("sourceid");
var targetid = ev.target.id; var targetid = ev.target.id;
osd_config[param]=parseInt(1); if(targetid){
osd_config[param.replace('_EN','_X')]=parseInt(ev.target.id.split("x")[0]); osd_config[param]=parseInt(1);
osd_config[param.replace('_EN','_Y')]=parseInt(ev.target.id.split("x")[1]); osd_config[param.replace('_EN','_X')]=parseInt(ev.target.id.split("x")[0]);
osd_config[param.replace('_EN','_Y')]=parseInt(ev.target.id.split("x")[1]);
osd_update[param]=parseInt(1); osd_update[param]=parseInt(1);
osd_update[param.replace('_EN','_X')]=parseInt(ev.target.id.split("x")[0]); osd_update[param.replace('_EN','_X')]=parseInt(ev.target.id.split("x")[0]);
osd_update[param.replace('_EN','_Y')]=parseInt(ev.target.id.split("x")[1]); osd_update[param.replace('_EN','_Y')]=parseInt(ev.target.id.split("x")[1]);
generateCoordinates(); document.getElementById(targetid).innerHTML = makePrettyParam(param);
generateOutput(); }else{
drawOSD(); osd_config[param]=parseInt(0);
delete osd_config[param.replace('_EN','_X')];
document.getElementById(targetid).innerHTML = makePrettyParam(param); delete osd_config[param.replace('_EN','_Y')];
if(sourceid){ osd_update[param]=parseInt(0);
document.getElementById(sourceid).innerHTML=""; delete osd_update[param.replace('_EN','_X')]; //=parseInt(0);
delete osd_update[param.replace('_EN','_Y')]; //=parseInt(0);
} }
generateCoordinates();
generateOutput();
drawOSD();
if(sourceid){
document.getElementById(sourceid).innerHTML="";
}
} }
@ -338,13 +373,14 @@ function drop(ev) {
var osd_config={}; // the pasted configuration var osd_config={}; // the pasted configuration
var osd_config_type=''; // might be parachute or missionplanner var osd_config_type=''; // might be parachute or missionplanner
var gridSpec={ x:60, y:22 } // default grid size var gridSpec={ x:60, y:22 } // default grid size
var osd_number=1;
function genereateOSDObject(){ function genereateOSDObject(){
osd_update={}; osd_update={};
osd_config={}; // fixme; do we need this? osd_config={}; // fixme; do we need this?
var txt = document.getElementById("config").value var txt = document.getElementById("config").value
var json_converted_config = {}; var json_converted_config = {};
document.getElementById("availableparameters").innerHTML="<div ondragover='allowDrop(event)' ondrop='remove(event)' style='margin:5px'><b>DROP HERE TO REMOVE</b></div>"; document.getElementById("availableparameters").innerHTML="<div ondragover='allowDrop(event)' ondrop='remove(event)' style='margin:5px'><b>DROP HERE TO REMOVE</b></div>";
@ -378,8 +414,8 @@ function drop(ev) {
return; return;
} }
const active_osd_object = Object.fromEntries(Object.entries(json_converted_config).filter(([key]) => key.includes('OSD1_') && key.match('_EN$') && json_converted_config[key].value == 1 )); const active_osd_object = Object.fromEntries(Object.entries(json_converted_config).filter(([key]) => key.includes('OSD'+osd_number+'_') && key.match('_EN$') && json_converted_config[key].value == 1 ));
const disabled_osd_object = Object.fromEntries(Object.entries(json_converted_config).filter(([key]) => key.includes('OSD1_') && key.match('_EN$') && json_converted_config[key].value == 0 )); const disabled_osd_object = Object.fromEntries(Object.entries(json_converted_config).filter(([key]) => key.includes('OSD'+osd_number+'_') && key.match('_EN$') && json_converted_config[key].value == 0 ));
// make OSD drop list // make OSD drop list
for (const [param, paramAttr] of Object.entries(disabled_osd_object)) { for (const [param, paramAttr] of Object.entries(disabled_osd_object)) {
@ -389,7 +425,7 @@ function drop(ev) {
div.setAttribute('draggable',"true"); div.setAttribute('draggable',"true");
div.setAttribute('ondragstart',"drag(event)"); div.setAttribute('ondragstart',"drag(event)");
div.setAttribute('class', 'param'); div.setAttribute('class', 'param');
div.innerHTML = param; // param is OSD1_ALTITUDE_EN div.innerHTML = param; // param is OSD1_ALTITUDE_EN
document.getElementById("availableparameters").appendChild(div); document.getElementById("availableparameters").appendChild(div);
@ -397,7 +433,7 @@ function drop(ev) {
console.log(active_osd_object); console.log(active_osd_object);
console.log("active elements: "+Object.entries(active_osd_object).length); console.log("active elements: "+Object.entries(active_osd_object).length);
document.getElementById('error').innerHTML=""; document.getElementById('error').innerHTML="";
document.getElementById('error').style.display="none"; document.getElementById('error').style.display="none";
@ -422,16 +458,16 @@ function drop(ev) {
function generateCoordinates(){ function generateCoordinates(){
osd_coordinates={}; osd_coordinates={};
for ([param, paramValue] of Object.entries(osd_config).filter(([key]) => key.includes('OSD1_') && key.match('_EN$') )){ for ([param, paramValue] of Object.entries(osd_config).filter(([key]) => key.includes('OSD'+osd_number+'_') && key.match('_EN$') )){
var elmX = osd_config[param.replace('_EN','_X')]; var elmX = osd_config[param.replace('_EN','_X')];
var elmY = osd_config[param.replace('_EN','_Y')]; var elmY = osd_config[param.replace('_EN','_Y')];
console.log("generateCoordinates "+ param+" at "+elmX+"x"+elmY); console.log("generateCoordinates "+ param+" at "+elmX+"x"+elmY);
if(typeof osd_coordinates[elmY] == 'undefined'){ if(typeof osd_coordinates[elmY] == 'undefined'){
osd_coordinates[elmY]={}; osd_coordinates[elmY]={};
} }
if (typeof osd_element_width[makePrettyParam(param)] !== 'undefined') { if (typeof osd_element_width[makePrettyParam(param)] !== 'undefined') {
var elmStart = parseInt(elmX + 1 ); var elmStart = parseInt(elmX + 1 );
@ -488,7 +524,7 @@ function drop(ev) {
if(document.getElementById("showCoords").checked == true){ if(document.getElementById("showCoords").checked == true){
div.innerHTML = x+"<br>&nbsp;"+y; div.innerHTML = x+"<br>&nbsp;"+y;
} }
div.setAttribute('id',x+"x"+y); div.setAttribute('id',x+"x"+y);
div.setAttribute('ondrop',"drop(event)"); div.setAttribute('ondrop',"drop(event)");
div.setAttribute('ondragover',"allowDrop(event)"); div.setAttribute('ondragover',"allowDrop(event)");
@ -499,8 +535,8 @@ function drop(ev) {
divClasses.push('box'); divClasses.push('box');
divClasses.push('box_'+gridSpec['x']+'x'+gridSpec['y']); divClasses.push('box_'+gridSpec['x']+'x'+gridSpec['y']);
if (typeof osd_coordinates[y] !== 'undefined') { if (typeof osd_coordinates[y] !== 'undefined') {
if (typeof osd_coordinates[y][x] !== 'undefined') { if (typeof osd_coordinates[y][x] !== 'undefined') {
divClasses.push('used'); divClasses.push('used');
if (osd_coordinates[y][x] != '.'){ if (osd_coordinates[y][x] != '.'){
var elemName = osd_coordinates[y][x]; var elemName = osd_coordinates[y][x];
@ -526,18 +562,18 @@ function drop(ev) {
} }
} }
} }
function makePrettyParam(OSD1_param_EN){ function makePrettyParam(OSD1_param_EN){
return OSD1_param_EN.replace('OSD1_','').replace('_EN',''); return OSD1_param_EN.replace('OSD'+osd_number+'_','').replace('_EN','');
} }
function makeParamName(param){ function makeParamName(param){
if(param == ""){ if(param == ""){
return; return;
}else if(param.match('^OSD1_')){ }else if(param.match('^OSD'+osd_number+'_')){
return param; return param;
}else{ }else{
return 'OSD1_'+param+'_EN'; return 'OSD'+osd_number+'_'+param+'_EN';
} }
} }
@ -567,11 +603,10 @@ function drop(ev) {
compute(); compute();
</script> </script>
_(Many thanks to mfoos for writing this note.)_
* * * * * *
<p style="font-size:80%; font-style: italic"> <p style="font-size:80%; font-style: italic">
Last updated on March 13, 2023. For any questions/feedback, Last updated on March 14, 2023. For any questions/feedback,
email me at <a href="mailto:hi@stavros.io">hi@stavros.io</a>. email me at <a href="mailto:hi@stavros.io">hi@stavros.io</a>.
</p> </p>