Updates
This commit is contained in:
Stavros Korokithakis
parent
228e456869
commit
be3684ccc1
@ -1,9 +1,10 @@
|
||||
# HD OSD tool
|
||||
|
||||
This tool lets you configure your OSD, supporting larger grid sizes than the standard Ardupilot one.
|
||||
|
||||
<style>
|
||||
body{
|
||||
/* font-family: Arial, Helvetica, sans-serif; */
|
||||
/* font-family: sans-serif, "Helvetica Neue", "Lucida Grande", Arial; */
|
||||
|
||||
box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
-webkit-box-sizing: border-box;
|
||||
@ -16,7 +17,7 @@ This tool lets you configure your OSD, supporting larger grid sizes than the sta
|
||||
|
||||
background-color:lightskyblue transparent ;
|
||||
|
||||
border: 1px solid grey;
|
||||
border: 1px solid rgb(196, 196, 196);
|
||||
border-style: none none solid solid;
|
||||
box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
@ -57,7 +58,7 @@ This tool lets you configure your OSD, supporting larger grid sizes than the sta
|
||||
}
|
||||
div.used{
|
||||
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);
|
||||
|
||||
font-weight: bold;
|
||||
@ -88,8 +89,10 @@ This tool lets you configure your OSD, supporting larger grid sizes than the sta
|
||||
width: 1280px;
|
||||
height: 720px;
|
||||
z-index: 0;
|
||||
background-image: url("https://imgz.org/iCRSQqkC.jpg");
|
||||
/* background-image: url("https://imgz.org/iCRSQqkC.jpg"); */
|
||||
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;
|
||||
float: left;
|
||||
clear: left;
|
||||
@ -139,6 +142,9 @@ This tool lets you configure your OSD, supporting larger grid sizes than the sta
|
||||
}
|
||||
</style>
|
||||
<div style="float: left;">
|
||||
<p>
|
||||
This tool lets you configure your OSD, supporting larger grid sizes than the standard Ardupilot one.
|
||||
</p>
|
||||
<table>
|
||||
<tr>
|
||||
<td colspan="2">
|
||||
@ -175,6 +181,7 @@ This tool lets you configure your OSD, supporting larger grid sizes than the sta
|
||||
</td>
|
||||
<td>
|
||||
<select id="chooseBackground" onchange="switchBackground();">
|
||||
<option value="---">none</option>
|
||||
<option value="iCRSQqkC">4:3</option>
|
||||
<option value="i5iVNkQY">4:3 DJI Elements</option>
|
||||
<option value="i5jr5EsY">16:9</option>
|
||||
@ -184,7 +191,21 @@ This tool lets you configure your OSD, supporting larger grid sizes than the sta
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
Paste your Parachute config:
|
||||
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>
|
||||
<td>
|
||||
Paste your Parachute or MissionPlanner config:
|
||||
</td>
|
||||
<td>
|
||||
<textarea id="config" oninput="compute();" style="width:500px;height:50px">
|
||||
@ -212,6 +233,11 @@ This tool lets you configure your OSD, supporting larger grid sizes than the sta
|
||||
<script src="https://unpkg.com/json5@2/dist/index.min.js"></script>
|
||||
<script type="text/javascript">
|
||||
|
||||
function setOSDnumber(){
|
||||
osd_number = document.getElementById('OSDnumber').value;
|
||||
compute();
|
||||
}
|
||||
|
||||
function switchBackground(){
|
||||
document.getElementById('background').style.backgroundImage = "url(https://imgz.org/"+document.getElementById('chooseBackground').value+".jpg)";
|
||||
}
|
||||
@ -270,6 +296,7 @@ function drop(ev) {
|
||||
var sourceid = ev.dataTransfer.getData("sourceid");
|
||||
var targetid = ev.target.id;
|
||||
|
||||
if(targetid){
|
||||
osd_config[param]=parseInt(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]);
|
||||
@ -278,11 +305,19 @@ function drop(ev) {
|
||||
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]);
|
||||
|
||||
document.getElementById(targetid).innerHTML = makePrettyParam(param);
|
||||
}else{
|
||||
osd_config[param]=parseInt(0);
|
||||
delete osd_config[param.replace('_EN','_X')];
|
||||
delete osd_config[param.replace('_EN','_Y')];
|
||||
osd_update[param]=parseInt(0);
|
||||
delete osd_update[param.replace('_EN','_X')]; //=parseInt(0);
|
||||
delete osd_update[param.replace('_EN','_Y')]; //=parseInt(0);
|
||||
}
|
||||
|
||||
generateCoordinates();
|
||||
generateOutput();
|
||||
drawOSD();
|
||||
|
||||
document.getElementById(targetid).innerHTML = makePrettyParam(param);
|
||||
if(sourceid){
|
||||
document.getElementById(sourceid).innerHTML="";
|
||||
}
|
||||
@ -338,6 +373,7 @@ function drop(ev) {
|
||||
var osd_config={}; // the pasted configuration
|
||||
var osd_config_type=''; // might be parachute or missionplanner
|
||||
var gridSpec={ x:60, y:22 } // default grid size
|
||||
var osd_number=1;
|
||||
|
||||
function genereateOSDObject(){
|
||||
osd_update={};
|
||||
@ -378,8 +414,8 @@ function drop(ev) {
|
||||
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 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 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('OSD'+osd_number+'_') && key.match('_EN$') && json_converted_config[key].value == 0 ));
|
||||
|
||||
// make OSD drop list
|
||||
for (const [param, paramAttr] of Object.entries(disabled_osd_object)) {
|
||||
@ -422,7 +458,7 @@ function drop(ev) {
|
||||
|
||||
function generateCoordinates(){
|
||||
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 elmY = osd_config[param.replace('_EN','_Y')];
|
||||
@ -528,16 +564,16 @@ function drop(ev) {
|
||||
}
|
||||
|
||||
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){
|
||||
if(param == ""){
|
||||
return;
|
||||
}else if(param.match('^OSD1_')){
|
||||
}else if(param.match('^OSD'+osd_number+'_')){
|
||||
return param;
|
||||
}else{
|
||||
return 'OSD1_'+param+'_EN';
|
||||
return 'OSD'+osd_number+'_'+param+'_EN';
|
||||
}
|
||||
}
|
||||
|
||||
@ -567,11 +603,10 @@ function drop(ev) {
|
||||
compute();
|
||||
</script>
|
||||
|
||||
_(Many thanks to mfoos for writing this note.)_
|
||||
|
||||
* * *
|
||||
|
||||
<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>.
|
||||
</p>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user