# HD OSD tool

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

   }
   div.box{
       /* 50x18 & 53x20 */
       width: 24px;
       height: 36px;

       background-color:lightskyblue transparent ;

       border: 1px solid rgb(196, 196, 196);
       border-style: none none solid solid;
       box-sizing: border-box;
       -moz-box-sizing: border-box;
       -webkit-box-sizing: border-box;

       float: left;
       font-size: smaller;
       color: white;
       position: relative;
   }
   div.box_50x18{
       /* 50x18 & 53x20 */
       width: 24px;
       height: 36px;
   }
   div.box_53x20{
       /* 50x18 & 53x20 */
       width: 24px;
       height: 36px;
   }
   div.box_60x22{
       /* 60x22 */
       width: 21px;
       height: 30px;
   }
   div.ground{
       background-color:peru transparent;
   }
   div.end{
       clear: right;
       /* WS */
       /* margin-left: 0px; */
       /* DJI */
       /* margin-left: 20px; */
   }
   div.start{
       clear: left;
   }
   div.used{
       background-color: rgba(128, 255, 0, 0.4);
       color: rgba(232, 247, 217);
       border: 2px solid rgba(255, 78, 78, 0.7);

       font-weight: bold;
       font-size: larger;
       font-size: 3ex;

       -webkit-text-stroke: 1px black; /* outline */
       text-align: left;

       padding: 2px;
       z-index: 1000;
   }
   div.occupied{
       background-color: rgba(30, 40, 31, 0.4) ;
       z-index: 1001;
   }
   div.bottom{
       position: absolute;
       bottom: 0px;
   }
   div.maincontainer{
       /* width: 1282px; */
       width: 100%;
       border: 1px solid black;
       float: left;
   }
   div.background{
       width: 1280px;
       height: 720px;
       z-index: 0;
       /* 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;
       display: inline-block;
   }
   div.grid{
       padding-top: 30px;
       padding-left: 40px;
   }
   div.grid50x18{
       padding-top: 35px;
       padding-left: 40px;
   }
   div.grid53x20{
       padding-top: 0px;
       padding-left: 0px;
   }
   div.grid60x22{
       padding-top: 30px;
       padding-left: 10px;
   }
   div.newline{
       float:left;
       clear:both;
   }
   div.error{
       clear:both;
       color:black;
       border: 1px solid red;
       background-color: darksalmon;
       padding: 20px;
       font-weight: heavy;
       display: none;
       width: 300px;
   }
   div.param{
       border: 1px solid black;
       float: left;
       clear: both;
       padding: 3px;
       width: 100%;
   }

   /* override main css of stavros frontend */
   .content main{
       margin: 1px
   }
</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">
            <b>TIP: use OSDn_TXT_RES=3 to extend the grid from 50x18 to 60x22.*</b>
            <p>To use the tool:</p>
            <ol>
                        <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>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>Copy the generated parachute command to the CLI or the Mission Planner config to a textfile and restore.</li>
            </ol>
           </td>
       </tr>
       <tr>
           <td>
               Show coordinates:
           </td>
           <td>
               <input type="checkbox" id="showCoords" value="true" onClick="drawOSD();" unchecked><br>
           </td>
       </tr>
       <tr>
           <td>
               Grid:
           </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>
           </td>
       </tr>
       <tr>
           <td>
               Background:
           </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>
                   <option value="iCQ6ahqs">16:9 DJI Elements</option>
               </select>
           </td>
       </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>
           <td>
                Paste your Parachute or MissionPlanner config:
           </td>
           <td>
               <textarea id="config" oninput="compute();" style="width:500px;height:50px">
                   {parameters: {OSD1_ACC_LAT_EN: {value: 0, index: 1276, type: 2},OSD1_ACC_LAT_X: {value: 0, index: 1277, type: 2},OSD1_ACC_LAT_Y: {value: 0, index: 1278, type: 2},OSD1_ACC_LONG_EN: {value: 0, index: 1273, type: 2},OSD1_ACC_LONG_X: {value: 0, index: 1274, type: 2},OSD1_ACC_LONG_Y: {value: 0, index: 1275, type: 2},OSD1_ACC_VERT_EN: {value: 0, index: 1279, type: 2},OSD1_ACC_VERT_X: {value: 0, index: 1280, type: 2},OSD1_ACC_VERT_Y: {value: 0, index: 1281, type: 2},OSD1_ALTITUDE_EN: {value: 0, index: 1049, type: 2},OSD1_ALTITUDE_X: {value: 42, index: 1050, type: 2},OSD1_ALTITUDE_Y: {value: 9, index: 1051, type: 2},OSD1_AOA_EN: {value: 0, index: 1285, type: 2},OSD1_AOA_X: {value: 0, index: 1286, type: 2},OSD1_AOA_Y: {value: 0, index: 1287, type: 2},OSD1_ARMING_EN: {value: 0, index: 1196, type: 2},OSD1_ARMING_X: {value: 5, index: 1197, type: 2},OSD1_ARMING_Y: {value: 5, index: 1198, type: 2},OSD1_ASPD1_EN: {value: 0, index: 1172, type: 2},OSD1_ASPD1_X: {value: 5, index: 1173, type: 2},OSD1_ASPD1_Y: {value: 5, index: 1174, type: 2},OSD1_ASPD2_EN: {value: 0, index: 1169, type: 2},OSD1_ASPD2_X: {value: 4, index: 1170, type: 2},OSD1_ASPD2_Y: {value: 4, index: 1171, type: 2},OSD1_ASPD_DEM_EN: {value: 0, index: 1270, type: 2},OSD1_ASPD_DEM_X: {value: 0, index: 1271, type: 2},OSD1_ASPD_DEM_Y: {value: 0, index: 1272, type: 2},OSD1_ASPEED_EN: {value: 0, index: 1094, type: 2},OSD1_ASPEED_X: {value: 0, index: 1095, type: 2},OSD1_ASPEED_Y: {value: 9, index: 1096, type: 2},OSD1_ATEMP_EN: {value: 0, index: 1160, type: 2},OSD1_ATEMP_X: {value: 0, index: 1161, type: 2},OSD1_ATEMP_Y: {value: 0, index: 1162, type: 2},OSD1_AUTO_FLP_EN: {value: 0, index: 1282, type: 2},OSD1_AUTO_FLP_X: {value: 0, index: 1283, type: 2},OSD1_AUTO_FLP_Y: {value: 0, index: 1284, type: 2},OSD1_AVGCELLV_EN: {value: 0, index: 1217, type: 2},OSD1_AVGCELLV_X: {value: 7, index: 1218, type: 2},OSD1_AVGCELLV_Y: {value: 0, index: 1219, type: 2},OSD1_AVG_EFFA_EN: {value: 0, index: 1312, type: 2},OSD1_AVG_EFFA_X: {value: 22, index: 1313, type: 2},OSD1_AVG_EFFA_Y: {value: 10, index: 1314, type: 2},OSD1_AVG_EFFG_EN: {value: 0, index: 1309, type: 2},OSD1_AVG_EFFG_X: {value: 22, index: 1310, type: 2},OSD1_AVG_EFFG_Y: {value: 10, index: 1311, type: 2},OSD1_BAT2REM_EN: {value: 0, index: 1321, type: 2},OSD1_BAT2REM_X: {value: 0, index: 1322, type: 2},OSD1_BAT2REM_Y: {value: 0, index: 1323, type: 2},OSD1_BAT2USED_EN: {value: 0, index: 1166, type: 2},OSD1_BAT2USED_X: {value: 0, index: 1167, type: 2},OSD1_BAT2USED_Y: {value: 0, index: 1168, type: 2},OSD1_BAT2_VLT_EN: {value: 0, index: 1163, type: 2},OSD1_BAT2_VLT_X: {value: 0, index: 1164, type: 2},OSD1_BAT2_VLT_Y: {value: 0, index: 1165, type: 2},OSD1_BATREM_EN: {value: 0, index: 1318, type: 2},OSD1_BATREM_X: {value: 23, index: 1319, type: 2},OSD1_BATREM_Y: {value: 3, index: 1320, type: 2},OSD1_BATTBAR_EN: {value: 0, index: 1193, type: 2},OSD1_BATTBAR_X: {value: 23, index: 1194, type: 2},OSD1_BATTBAR_Y: {value: 13, index: 1195, type: 2},OSD1_BATUSED_EN: {value: 0, index: 1061, type: 2},OSD1_BATUSED_X: {value: 41, index: 1062, type: 2},OSD1_BATUSED_Y: {value: 1, index: 1063, type: 2},OSD1_BAT_PCT_EN: {value: 0, index: 1300, type: 2},OSD1_BAT_PCT_X: {value: 0, index: 1301, type: 2},OSD1_BAT_PCT_Y: {value: 0, index: 1302, type: 2},OSD1_BAT_VOLT_EN: {value: 0, index: 1052, type: 2},OSD1_BAT_VOLT_X: {value: 1, index: 1053, type: 2},OSD1_BAT_VOLT_Y: {value: 0, index: 1054, type: 2},OSD1_BTEMP_EN: {value: 0, index: 1157, type: 2},OSD1_BTEMP_X: {value: 0, index: 1158, type: 2},OSD1_BTEMP_Y: {value: 0, index: 1159, type: 2},OSD1_CALLSIGN_EN: {value: 0, index: 1205, type: 2},OSD1_CALLSIGN_X: {value: 0, index: 1206, type: 2},OSD1_CALLSIGN_Y: {value: 0, index: 1207, type: 2},OSD1_CELLVOLT_EN: {value: 0, index: 1190, type: 2},OSD1_CELLVOLT_X: {value: 6, index: 1191, type: 2},OSD1_CELLVOLT_Y: {value: 0, index: 1192, type: 2},OSD1_CHAN_MAX: {value: 2100, index: 1048, type: 4},OSD1_CHAN_MIN: {value: 900, index: 1047, type: 4},OSD1_CLIMBEFF_EN: {value: 0, index: 1151, type: 2},OSD1_CLIMBEFF_X: {value: 0, index: 1152, type: 2},OSD1_CLIMBEFF_Y: {value: 0, index: 1153, type: 2},OSD1_CLK_EN: {value: 0, index: 1175, type: 2},OSD1_CLK_X: {value: 0, index: 1176, type: 2},OSD1_CLK_Y: {value: 0, index: 1177, type: 2},OSD1_COMPASS_EN: {value: 0, index: 1088, type: 2},OSD1_COMPASS_X: {value: 25, index: 1089, type: 2},OSD1_COMPASS_Y: {value: 0, index: 1090, type: 2},OSD1_CRSFANT_EN: {value: 0, index: 1297, type: 2},OSD1_CRSFANT_X: {value: 0, index: 1298, type: 2},OSD1_CRSFANT_Y: {value: 0, index: 1299, type: 2},OSD1_CRSFPWR_EN: {value: 0, index: 1288, type: 2},OSD1_CRSFPWR_X: {value: 0, index: 1289, type: 2},OSD1_CRSFPWR_Y: {value: 0, index: 1290, type: 2},OSD1_CRSFRSSI_EN: {value: 0, index: 1291, type: 2},OSD1_CRSFRSSI_X: {value: 0, index: 1292, type: 2},OSD1_CRSFRSSI_Y: {value: 0, index: 1293, type: 2},OSD1_CRSFSNR_EN: {value: 0, index: 1294, type: 2},OSD1_CRSFSNR_X: {value: 0, index: 1295, type: 2},OSD1_CRSFSNR_Y: {value: 0, index: 1296, type: 2},OSD1_CRSSHAIR_EN: {value: 0, index: 1181, type: 2},OSD1_CRSSHAIR_X: {value: 0, index: 1182, type: 2},OSD1_CRSSHAIR_Y: {value: 0, index: 1183, type: 2},OSD1_CRS_HADJ_EN: {value: 0, index: 1339, type: 2},OSD1_CRS_HADJ_X: {value: 0, index: 1340, type: 2},OSD1_CRS_HADJ_Y: {value: 0, index: 1341, type: 2},OSD1_CRS_HEAD_EN: {value: 0, index: 1336, type: 2},OSD1_CRS_HEAD_X: {value: 0, index: 1337, type: 2},OSD1_CRS_HEAD_Y: {value: 0, index: 1338, type: 2},OSD1_CURRENT2_EN: {value: 0, index: 1208, type: 2},OSD1_CURRENT2_X: {value: 0, index: 1209, type: 2},OSD1_CURRENT2_Y: {value: 0, index: 1210, type: 2},OSD1_CURRENT_EN: {value: 0, index: 1058, type: 2},OSD1_CURRENT_X: {value: 42, index: 1059, type: 2},OSD1_CURRENT_Y: {value: 0, index: 1060, type: 2},OSD1_EFFA_EN: {value: 0, index: 1315, type: 2},OSD1_EFFA_X: {value: 22, index: 1316, type: 2},OSD1_EFFA_Y: {value: 10, index: 1317, type: 2},OSD1_EFFG_EN: {value: 0, index: 1154, type: 2},OSD1_EFFG_X: {value: 22, index: 1155, type: 2},OSD1_EFFG_Y: {value: 10, index: 1156, type: 2},OSD1_ENABLE: {value: 1, index: 1046, type: 2},OSD1_ESCAAMPS_EN: {value: 0, index: 1109, type: 2},OSD1_ESCAAMPS_X: {value: 24, index: 1110, type: 2},OSD1_ESCAAMPS_Y: {value: 14, index: 1111, type: 2},OSD1_ESCARPM_EN: {value: 0, index: 1103, type: 2},OSD1_ESCARPM_X: {value: 22, index: 1104, type: 2},OSD1_ESCARPM_Y: {value: 12, index: 1105, type: 2},OSD1_ESCHAMPS_EN: {value: 0, index: 1106, type: 2},OSD1_ESCHAMPS_X: {value: 24, index: 1107, type: 2},OSD1_ESCHAMPS_Y: {value: 14, index: 1108, type: 2},OSD1_ESCHRPM_EN: {value: 0, index: 1115, type: 2},OSD1_ESCHRPM_X: {value: 22, index: 1116, type: 2},OSD1_ESCHRPM_Y: {value: 12, index: 1117, type: 2},OSD1_ESCTAMPS_EN: {value: 0, index: 1112, type: 2},OSD1_ESCTAMPS_X: {value: 24, index: 1113, type: 2},OSD1_ESCTAMPS_Y: {value: 14, index: 1114, type: 2},OSD1_ESCTEMP_EN: {value: 0, index: 1100, type: 2},OSD1_ESCTEMP_X: {value: 42, index: 1101, type: 2},OSD1_ESCTEMP_Y: {value: 2, index: 1102, type: 2},OSD1_FENCE_EN: {value: 0, index: 1223, type: 2},OSD1_FENCE_X: {value: 14, index: 1224, type: 2},OSD1_FENCE_Y: {value: 9, index: 1225, type: 2},OSD1_FLTIME_EN: {value: 0, index: 1148, type: 2},OSD1_FLTIME_X: {value: 23, index: 1149, type: 2},OSD1_FLTIME_Y: {value: 10, index: 1150, type: 2},OSD1_FLTMODE_EN: {value: 0, index: 1067, type: 2},OSD1_FLTMODE_X: {value: 25, index: 1068, type: 2},OSD1_FLTMODE_Y: {value: 17, index: 1069, type: 2},OSD1_FONT: {value: 0, index: 1263, type: 2},OSD1_GNDTRVL_EN: {value: 0, index: 1142, type: 2},OSD1_GNDTRVL_X: {value: 22, index: 1143, type: 2},OSD1_GNDTRVL_Y: {value: 11, index: 1144, type: 2},OSD1_GPSLAT_EN: {value: 0, index: 1118, type: 2},OSD1_GPSLAT_X: {value: 9, index: 1119, type: 2},OSD1_GPSLAT_Y: {value: 13, index: 1120, type: 2},OSD1_GPSLONG_EN: {value: 0, index: 1121, type: 2},OSD1_GPSLONG_X: {value: 9, index: 1122, type: 2},OSD1_GPSLONG_Y: {value: 14, index: 1123, type: 2},OSD1_GSPEED_EN: {value: 0, index: 1073, type: 2},OSD1_GSPEED_X: {value: 0, index: 1074, type: 2},OSD1_GSPEED_Y: {value: 11, index: 1075, type: 2},OSD1_HDOP_EN: {value: 0, index: 1133, type: 2},OSD1_HDOP_X: {value: 0, index: 1134, type: 2},OSD1_HDOP_Y: {value: 0, index: 1135, type: 2},OSD1_HEADING_EN: {value: 0, index: 1082, type: 2},OSD1_HEADING_X: {value: 13, index: 1083, type: 2},OSD1_HEADING_Y: {value: 0, index: 1084, type: 2},OSD1_HOMEDIR_EN: {value: 0, index: 1187, type: 2},OSD1_HOMEDIR_X: {value: 5, index: 1188, type: 2},OSD1_HOMEDIR_Y: {value: 5, index: 1189, type: 2},OSD1_HOMEDIST_EN: {value: 0, index: 1184, type: 2},OSD1_HOMEDIST_X: {value: 14, index: 1185, type: 2},OSD1_HOMEDIST_Y: {value: 1, index: 1186, type: 2},OSD1_HOME_EN: {value: 0, index: 1079, type: 2},OSD1_HOME_X: {value: 22, index: 1080, type: 2},OSD1_HOME_Y: {value: 1, index: 1081, type: 2},OSD1_HORIZON_EN: {value: 0, index: 1076, type: 2},OSD1_HORIZON_X: {value: 25, index: 1077, type: 2},OSD1_HORIZON_Y: {value: 7, index: 1078, type: 2},OSD1_LINK_Q_EN: {value: 0, index: 1259, type: 2},OSD1_LINK_Q_X: {value: 5, index: 1260, type: 2},OSD1_LINK_Q_Y: {value: 1, index: 1261, type: 2},OSD1_LOIT_RAD_EN: {value: 0, index: 1345, type: 2},OSD1_LOIT_RAD_X: {value: 0, index: 1346, type: 2},OSD1_LOIT_RAD_Y: {value: 0, index: 1347, type: 2},OSD1_MESSAGE_EN: {value: 0, index: 1070, type: 2},OSD1_MESSAGE_X: {value: 10, index: 1071, type: 2},OSD1_MESSAGE_Y: {value: 15, index: 1072, type: 2},OSD1_NRG_CONS_EN: {value: 0, index: 1264, type: 2},OSD1_NRG_CONS_X: {value: 0, index: 1265, type: 2},OSD1_NRG_CONS_Y: {value: 0, index: 1266, type: 2},OSD1_NRG_REM_EN: {value: 0, index: 1306, type: 2},OSD1_NRG_REM_X: {value: 0, index: 1307, type: 2},OSD1_NRG_REM_Y: {value: 0, index: 1308, type: 2},OSD1_PEAK_PR_EN: {value: 0, index: 1333, type: 2},OSD1_PEAK_PR_X: {value: 0, index: 1334, type: 2},OSD1_PEAK_PR_Y: {value: 0, index: 1335, type: 2},OSD1_PEAK_RR_EN: {value: 0, index: 1330, type: 2},OSD1_PEAK_RR_X: {value: 0, index: 1331, type: 2},OSD1_PEAK_RR_Y: {value: 0, index: 1332, type: 2},OSD1_PGNDTRVL_EN: {value: 0, index: 1348, type: 2},OSD1_PGNDTRVL_X: {value: 22, index: 1349, type: 2},OSD1_PGNDTRVL_Y: {value: 11, index: 1350, type: 2},OSD1_PITCH_EN: {value: 0, index: 1127, type: 2},OSD1_PITCH_X: {value: 7, index: 1128, type: 2},OSD1_PITCH_Y: {value: 17, index: 1129, type: 2},OSD1_PLUSCODE_EN: {value: 0, index: 1202, type: 2},OSD1_PLUSCODE_X: {value: 0, index: 1203, type: 2},OSD1_PLUSCODE_Y: {value: 0, index: 1204, type: 2},OSD1_POWER_EN: {value: 0, index: 1199, type: 2},OSD1_POWER_X: {value: 1, index: 1200, type: 2},OSD1_POWER_Y: {value: 1, index: 1201, type: 2},OSD1_RC_FS_EN: {value: 0, index: 1342, type: 2},OSD1_RC_FS_X: {value: 0, index: 1343, type: 2},OSD1_RC_FS_Y: {value: 0, index: 1344, type: 2},OSD1_RC_THR_EN: {value: 0, index: 1267, type: 2},OSD1_RC_THR_X: {value: 0, index: 1268, type: 2},OSD1_RC_THR_Y: {value: 0, index: 1269, type: 2},OSD1_RESTVOLT_EN: {value: 0, index: 1220, type: 2},OSD1_RESTVOLT_X: {value: 24, index: 1221, type: 2},OSD1_RESTVOLT_Y: {value: 2, index: 1222, type: 2},OSD1_RNGF_EN: {value: 0, index: 1226, type: 2},OSD1_RNGF_X: {value: 0, index: 1227, type: 2},OSD1_RNGF_Y: {value: 0, index: 1228, type: 2},OSD1_ROLL_EN: {value: 0, index: 1124, type: 2},OSD1_ROLL_X: {value: 12, index: 1125, type: 2},OSD1_ROLL_Y: {value: 17, index: 1126, type: 2},OSD1_RSSI_EN: {value: 0, index: 1055, type: 2},OSD1_RSSI_X: {value: 0, index: 1056, type: 2},OSD1_RSSI_Y: {value: 4, index: 1057, type: 2},OSD1_R_AVG_CV_EN: {value: 0, index: 1303, type: 2},OSD1_R_AVG_CV_X: {value: 24, index: 1304, type: 2},OSD1_R_AVG_CV_Y: {value: 3, index: 1305, type: 2},OSD1_SATS_EN: {value: 0, index: 1064, type: 2},OSD1_SATS_X: {value: 0, index: 1065, type: 2},OSD1_SATS_Y: {value: 3, index: 1066, type: 2},OSD1_SIDEBARS_EN: {value: 0, index: 1178, type: 2},OSD1_SIDEBARS_X: {value: 0, index: 1179, type: 2},OSD1_SIDEBARS_Y: {value: 0, index: 1180, type: 2},OSD1_STATS_EN: {value: 0, index: 1145, type: 2},OSD1_STATS_X: {value: 0, index: 1146, type: 2},OSD1_STATS_Y: {value: 0, index: 1147, type: 2},OSD1_TEMP_EN: {value: 0, index: 1130, type: 2},OSD1_TEMP_X: {value: 0, index: 1131, type: 2},OSD1_TEMP_Y: {value: 0, index: 1132, type: 2},OSD1_TER_HGT_EN: {value: 0, index: 1214, type: 2},OSD1_TER_HGT_X: {value: 23, index: 1215, type: 2},OSD1_TER_HGT_Y: {value: 7, index: 1216, type: 2},OSD1_THR_OUT_EN: {value: 0, index: 1085, type: 2},OSD1_THR_OUT_X: {value: 0, index: 1086, type: 2},OSD1_THR_OUT_Y: {value: 11, index: 1087, type: 2},OSD1_TUNED_PN_EN: {value: 0, index: 1324, type: 2},OSD1_TUNED_PN_X: {value: 0, index: 1325, type: 2},OSD1_TUNED_PN_Y: {value: 0, index: 1326, type: 2},OSD1_TUNED_PV_EN: {value: 0, index: 1327, type: 2},OSD1_TUNED_PV_X: {value: 0, index: 1328, type: 2},OSD1_TUNED_PV_Y: {value: 17, index: 1329, type: 2},OSD1_TXT_RES: {value: 1, index: 1262, type: 2},OSD1_VSPEED_EN: {value: 0, index: 1097, type: 2},OSD1_VSPEED_X: {value: 42, index: 1098, type: 2},OSD1_VSPEED_Y: {value: 10, index: 1099, type: 2},OSD1_VTX_PWR_EN: {value: 0, index: 1211, type: 2},OSD1_VTX_PWR_X: {value: 0, index: 1212, type: 2},OSD1_VTX_PWR_Y: {value: 0, index: 1213, type: 2},OSD1_WAYPOINT_EN: {value: 0, index: 1136, type: 2},OSD1_WAYPOINT_X: {value: 0, index: 1137, type: 2},OSD1_WAYPOINT_Y: {value: 0, index: 1138, type: 2},OSD1_WIND_EN: {value: 0, index: 1091, type: 2},OSD1_WIND_X: {value: 0, index: 1092, type: 2},OSD1_WIND_Y: {value: 10, index: 1093, type: 2},OSD1_XTRACK_EN: {value: 0, index: 1139, type: 2},OSD1_XTRACK_X: {value: 0, index: 1140, type: 2},OSD1_XTRACK_Y: {value: 0, index: 1141, type: 2},},}
               </textarea>
           </td>
       </tr>
       <tr>
           <td colspan="2">
               <div id="error" class="newline error"></div>
           </td>
       </tr>
   </table>
</div>
<div id="maincontainer">
   <div style="float: left; border: none; float: left; clear: both; width: 1520px;">
        <div class="background" id="background" style="position:relative">
            <div id="grid" class="grid grid60x22"></div>
        </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>
</div>

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

function switchGrid(){
   gridSpec['x'] = document.getElementById('chooseGrid').value.split('x')[0];
   gridSpec['y'] = document.getElementById('chooseGrid').value.split('x')[1];
   document.getElementById('grid').setAttribute('class','grid grid'+document.getElementById('chooseGrid').value);
   compute();
}

function allowDrop(ev) {
   ev.preventDefault();
}

function drag(ev) {
   var source = ev.source || ev.srcElement;

   if(source.innerHTML != ""){
       var paramName = makeParamName(source.innerHTML);
       ev.dataTransfer.setData("paramName", paramName);
       ev.dataTransfer.setData("sourceid", source.id);
   }else{
       // alert("empty data");
   }
}

function remove(ev) {
   ev.preventDefault();
   var target = ev.target || ev.srcElement;
   var param = ev.dataTransfer.getData("paramName");
   var sourceid = ev.dataTransfer.getData("sourceid");

   console.log("removing param: "+param+" from "+sourceid);

   if(sourceid){
       document.getElementById(sourceid).innerHTML="";
   }

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

   generateOutput();
   generateCoordinates();
   drawOSD();
}

function drop(ev) {
   ev.preventDefault();
   var target = ev.target || ev.srcElement;
   var param = ev.dataTransfer.getData("paramName");
   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]);

        osd_update[param]=parseInt(1);
        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();
    if(sourceid){
        document.getElementById(sourceid).innerHTML="";
    }
}


   var osd_element_width={
       ALTITUDE: 5,
       ASPEED: 6,
       ASPD1: 6,
       ASPD2: 6,
       ASPD_DEM: 6,
       AVGCELLV: 5,
       BATUSED: 5,
       COMPASS: -5,
       HORIZON: -5,
       FLTMODE: 4,
       GSPEED: 6,
       HOMEDIST: 7,
       MESSAGE: 26,
       PITCH: 5,
       ROLL: 6,
       RSSI: 3,
       SATS: 4,
       VSPEED: 5,
       WIND: 6,
       GNDTRVL: 6,
       AVG_EFFA: 5,
       EFFG: 5,
       ESCTEMP: 4,
       HOME: 7,
       THR_OUT: 5,
       RC_THR: 5,
       POWER: 5,
       NRG_CONS: 5,
       BAT_VOLT:5,
       CURRENT:4,
       AVG_EFFG: 5,
       FLTIME: 7,
       GPSLAT: 12,
       GPSLONG: 12,
       CALLSIGN: 6,
       LINK_Q: 7,
       CRSFANT: 4,
       CRSFPWR: 4,
       CRSFRSSI: 6,
       CRSFSNR: 5,
       TUNED_PV: 5,
   };

   var osd_coordinates={};
   var osd_update={};          // the dropped and altered configuration
   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={};
       osd_config={}; // fixme; do we need this?

       var txt = document.getElementById("config").value
       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>";

       try {
           try {
               console.log("trying parachute");
               json_converted_config = JSON5.parse(txt)['parameters']; // this is for parachute input
               osd_config_type='parachute';
           } catch (e){
               console.log("trying mission planner");
               var lines=txt.split("\n");
               for(var i=0;i<lines.length;i++){
                   if(lines[i].match(",")){
                       var param=lines[i].split(",")[0].trim();
                       var value=lines[i].split(",")[1].trim();

                       if(param && value) {
                           console.log("saved "+ param);
                           json_converted_config[param] = {"value": parseInt(value)};  //{"value": value};
                       }else{
                           console.log("failed "+ param);
                       }
                   }
               }
               osd_config_type='missionplanner';
           }
           console.log(json_converted_config);
       } catch (e) {
           document.getElementById('error').style.display="block";
           document.getElementById('error').innerHTML="no valid config";
           return;
       }

       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)) {
           var div = document.createElement("div");
           div.setAttribute('ondrop',"drop(event)");
           div.setAttribute('ondragover',"allowDrop(event)");
           div.setAttribute('draggable',"true");
           div.setAttribute('ondragstart',"drag(event)");
           div.setAttribute('class', 'param');

           div.innerHTML = param; // param is OSD1_ALTITUDE_EN

           document.getElementById("availableparameters").appendChild(div);
       }

       console.log(active_osd_object);
       console.log("active elements: "+Object.entries(active_osd_object).length);

       document.getElementById('error').innerHTML="";
       document.getElementById('error').style.display="none";

           for (const [param, paramAttr] of Object.entries(active_osd_object)) {

               console.log('param: '+param);   //fixme  -> getname -> get param
               var elmX = json_converted_config[param.replace('_EN','_X')]['value'];   //fixme -> getX
               var elmY = json_converted_config[param.replace('_EN','_Y')]['value'];   //fixme -> getY

               // osd_update[param]=parseInt(1);
               // osd_update[param.replace('_EN','_X')]=parseInt(elmX);
               // osd_update[param.replace('_EN','_Y')]=parseInt(elmY);

               osd_config[param]=parseInt(1);
               osd_config[param.replace('_EN','_X')]=parseInt(elmX);
               osd_config[param.replace('_EN','_Y')]=parseInt(elmY);

               console.log('['+elmY+']['+elmX+']='+param);
       }
       generateCoordinates();
   }

   function generateCoordinates(){
       osd_coordinates={};
       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')];

           console.log("generateCoordinates "+ param+" at "+elmX+"x"+elmY);

           if(typeof osd_coordinates[elmY] == 'undefined'){
                   osd_coordinates[elmY]={};
               }

           if (typeof osd_element_width[makePrettyParam(param)] !== 'undefined') {
               var elmStart = parseInt(elmX + 1 );
               var elmW = parseInt(osd_element_width[makePrettyParam(param)] + elmX);
               console.log("extending "+param+" to "+osd_element_width[makePrettyParam(param)]+" from X "+elmStart+" to "+elmW);

               if( osd_element_width[makePrettyParam(param)] < 0 ){ // handling centered elements like COMPASS or HORIZON
                   elmStart=parseInt(osd_element_width[makePrettyParam(param)] + elmX +1);
                   elmW = parseInt(osd_element_width[makePrettyParam(param)] + elmX + (osd_element_width[makePrettyParam(param)] * -1)+ (osd_element_width[makePrettyParam(param)] * -1));
               }

               for (var elmWidth = elmStart; elmWidth < elmW; elmWidth++ ){
                   console.log(param+" . "+elmWidth+"x"+elmY);
                   osd_coordinates[elmY][elmWidth]='.';
               }
           }

           if( typeof osd_coordinates[elmY][elmX] != 'undefined' ){
               console.error(elmX+"x"+elmY+" already used by "+osd_coordinates[elmY][elmX]);
               delete osd_coordinates[osd_coordinates[elmY][elmX]];
               delete osd_update[osd_coordinates[elmY][elmX]];
           }
           osd_coordinates[elmY][elmX]=param;

       }
   }

   function generateOutput(){
       var output='';

       if(osd_config_type=='parachute'){
           output="parachute set ";
       }
       for ( [param, value] of Object.entries(osd_update)) {
           if(param){
               if(osd_config_type=='parachute'){
                   output += param + "=" + value + " ";
               }else if(osd_config_type == 'missionplanner'){
                   output += param + "," + value + "<br> ";
               }
           }
       }
       document.getElementById('parachute_command').innerHTML = output;
   }


   function drawOSD(){
       document.getElementById("grid").innerHTML="";

       for (var y = 0; y < gridSpec['y'] ; y++) {   //18 for DJI // 20 for WS
           for (var x = 0; x < gridSpec['x'] ; x++) { //50 for DJI // 53 for WS

               var div = document.createElement("div");
               if(document.getElementById("showCoords").checked == true){
                   div.innerHTML = x+"<br>&nbsp;"+y;
               }

               div.setAttribute('id',x+"x"+y);
               div.setAttribute('ondrop',"drop(event)");
               div.setAttribute('ondragover',"allowDrop(event)");
               div.setAttribute('draggable',"true");
               div.setAttribute('ondragstart',"drag(event)");

               var divClasses=[];
               divClasses.push('box');
               divClasses.push('box_'+gridSpec['x']+'x'+gridSpec['y']);

               if (typeof osd_coordinates[y] !== 'undefined') {
                   if (typeof osd_coordinates[y][x] !== 'undefined') {
                       divClasses.push('used');
                       if (osd_coordinates[y][x] != '.'){
                           var elemName = osd_coordinates[y][x];
                           // div.innerHTML = elemName; // draw the name OSD1_ALTITUDE_EN
                           div.innerHTML = makePrettyParam(elemName); // draw the name OSD1_ALTITUDE_EN
                       }else{
                           div.innerHTML = "";
                           divClasses.push('occupied');
                       }
                   }
               }

               if (x == 0){
                   divClasses.push('start');
               }

               if( x == 49){
                   divClasses.push('end');
               }

               div.setAttribute('class', divClasses.join(" "));
               document.getElementById("grid").appendChild(div);
           }
       }
   }

   function makePrettyParam(OSD1_param_EN){
       return OSD1_param_EN.replace('OSD'+osd_number+'_','').replace('_EN','');
   }

   function makeParamName(param){
       if(param == ""){
           return;
       }else if(param.match('^OSD'+osd_number+'_')){
           return param;
       }else{
           return 'OSD'+osd_number+'_'+param+'_EN';
       }
   }

   function getMatches(string, regex, index) {
       index || (index = 1); // default to the first capturing group
       var matches = [];
       var match;
       while (match = regex.exec(string)) {
           matches.push(match[index]);
       }
       return matches;
   }

   function compute(){
       genereateOSDObject();
       drawOSD();
       generateOutput();
       hideNavBars(); //for stavros page only
   }

   function hideNavBars(){
       Array.from(document.getElementsByClassName('nav-wide-wrapper')).forEach(function(navbar) {
           navbar.setAttribute('style', 'display: none');
       });
   }

   compute();
</script>


* * *

<p style="font-size:80%; font-style: italic">
Last updated on March 14, 2023. For any questions/feedback,
email me at <a href="mailto:hi@stavros.io">hi@stavros.io</a>.
</p>