SysID/index.html

<!doctype html>
<html>
  <head>
    <meta charset="utf-8"/>

    <title>ArduPilot SysID</title>
    <link rel="icon" href="../images/AP_favicon.png">

    <script src="https://cdn.jsdelivr.net/pyodide/v0.26.1/full/pyodide.js"></script>

    <script src='../modules/plotly.js/dist/plotly.min.js'></script>

    <script type="text/javascript" src="../Libraries/Array_Math.js"></script>

    <script type="text/javascript" src="SysID.js"></script>
  </head>

  <style>
    div.plotly-notifier {
      visibility: hidden;
    }
  </style>

  <table style="width:1200px">
    <tr><td>
      <a href="https://ardupilot.org"><img src="../images/ArduPilot.png"></a>
    </td><td>
      <a href="https://github.com/ArduPilot/WebTools"><img src="../images/github-mark.png" style="width:60px"></a>
      <br>
      <a href="https://github.com/ArduPilot/WebTools"><img src="../images/GitHub_Logo.png" style="width:60px"></a>
    </td></tr>
  </table>
  <table>
    <tr><td style="width:1200px">
      <h1 style="text-align:center; margin-block-end: 0.25em;"><a href="" style="color: #000000; text-decoration:none;">ArduPilot System Identification Tool</a></h1>
    </td></tr>
  </table>

  <body>

  <table>
    <tr>
    <td style="width: 30px;"></td>
    <td>
    <fieldset style="width:1100px">
      <legend>Setup</legend>
      <table>
        <tr>
          <td>
            <fieldset style="width:200px;height:80px">
              <legend>Analysis time</legend>
              <label for="starttime">Start (s)</label>
              <input id="starttime" type="number" min="0" step="1" value="0" style="width:50px"/><br><br>
              <label for="endtime">End (s)</label>
              <input id="endtime" type="number" min="0" step="1" value="0" style="width:50px"/>
            </fieldset>
          </td>
          <td style="width: 10px;"></td>
          <td>
            <input id="fileItem" type="file" accept=".bin" onchange="readFile(this)"><br><br>
          </td>
        </tr>
      </table>
    </fieldset>
    </td>
    </tr>
  </table>

  <table><tr><td style="width:1200px">
    <h2 style="text-align:center">Flight Data</h2>
  </td></tr></table>

  <div id="FlightData" style="width:1200px;height:450px"></div>

    <div>
      <p>Output:</p>
      <textarea id="output" style="width: 1200px; height: 500px;" rows="10" disabled></textarea>
    </div>

    <div>
      <form id="customForm">
        <input type="radio" id="tf_select" name="ID_type">
        <label for="tf_select">Transfer function</label>

        <input type="radio" id="ss_select" name="ID_type">
        <label for="ss_select">State Space</label><br><br>
      </form>
    </div>

    <!-- FOR TRANSFER FUNCTION -->
    <div id="tf_form" style="display:none;">

      <div id="tf_inputFieldsContainer"></div>
      <br><br>

      <div id="tf_outputFieldsContainer"></div>
      <br><br>

      <label for="customNumerator">Numerator:</label>
      <input type="text" id="customNumerator" name="customNumerator"><br><br>

      <label for="customDenominator">Denominator:</label>
      <input type="text" id="customDenominator" name="customDenominator"><br><br>

      <label for="tf_params">Symbolic params:</label>
      <input type="text" id="tf_params" name="tf_params"><br><br>

      <div id="plotDiv"></div>

    </div>

    <!-- FOR STATE SPACE MODEL -->
    <div id="ss_form" style="display:none;">

      <div id="autopopulateContainer"></div>
      <br><br>

      <label for="No. of Outputs">Outputs:</label>
      <input type="number" id="num_Outputs" name="Outputs">

      <label for="Matrix A order">Matrix A order:</label>
      <input type="number" id="A_order" name="Inputs">

      <label for="number of params">Number of params:</label>
      <input type="number" id="num_params" name="Inputs">

      <label for="number of constraints">Number of Constraints:</label>
      <input type="number" id="num_cons" name="Inputs"><br><br>

      <button id="createFieldsButton" type="button">Generate fields</button>
      <br><br>

      <div id="inputFieldsContainer"></div>
      <br><br>
      <div id="outputFieldsContainer"></div>
      <br><br>
      <div id="symbolicparams"></div>
      <br><br>
      <div id="boundsContainer"></div>
      <br><br>

      <div id="matrixAlabel"></div>
      <br>
      <table id="matrixA"></table>
      <br><br>

      <div id="matrixBlabel"></div>
      <br>
      <table id="matrixB"></table>
      <br><br>

      <div id="constraintsinput"></div>
      <br><br>

      <div id="H0label"></div>
      <br>
      <table id="H0"></table>
      <br><br>

      <div id="H1label"></div>
      <br>
      <table id="H1"></table>
      <br><br>

      <div id="plotDiv_ss"></div>
    </div>

    <div>
      <label for="start frequency">Start frequency (rad/sec):</label>
      <input type="number" id="startfreq" name="startfreq">

      <label for="end frequency">End frequency (rad/sec):</label>
      <input type="number" id="endfreq" name="endfreq"><br><br>

      <label for="LPF cutoff frequency">LPF cutoff frequency (rad/sec):</label>
      <input type="number" id="cutofffreq" name="cutofffreq"><br><br>

      <button id="parseButton" type="button" disabled>Submit</button>
    </div>

    <script type="text/javascript">
      // Setup python environment
      init_pyodide()

      // Setup flight data plot
      setup_flight_data_plot()

      // Handler for file select
      function readFile(e) {
        const file = e.files[0]
        if (file == null) {
          return
        }
        let reader = new FileReader()
        reader.onload = function (e) {
          load(reader.result)
          document.title = "SysID: " + file.name
        }
        reader.readAsArrayBuffer(file)
      }

      async function main() {
        const output = document.getElementById("output");
        output.value = '';
        function addToOutput(message) {
          output.value += message + "\n";
        }

        function createautopopulate(containerId) {
          const container = document.getElementById(containerId);
          container.innerHTML = '';

          const populateDropdown = document.createElement('select');
          populateDropdown.id = 'populate_dropdown';
          populateDropdown.name = 'populate_dropdown';
          populateDropdown.style.display = 'block'; // Hidden by default

          const option1 = document.createElement('option');
          option1.value = 'manual';
          option1.text = 'Manual Entry';
          populateDropdown.appendChild(option1);

          const option2 = document.createElement('option');
          option2.value = 'MR_Roll';
          option2.text = 'Multirotor Roll';
          populateDropdown.appendChild(option2);

          const option3 = document.createElement('option');
          option3.value = 'MR_Pitch';
          option3.text = 'Multirotor Pitch';
          populateDropdown.appendChild(option3);

          const option4 = document.createElement('option');
          option4.value = 'MR_Yaw';
          option4.text = 'Multirotor Yaw';
          populateDropdown.appendChild(option4);

          const option5 = document.createElement('option');
          option5.value = 'MR_Vertical';
          option5.text = 'Multirotor Vertical';
          populateDropdown.appendChild(option5);

          const populateLabel = document.createElement('label');
          populateLabel.textContent = 'Enter fields or select to pre-populate fields:';
          populateLabel.style.display = 'block'; // Hidden by default
          container.appendChild(populateLabel);
          container.appendChild(populateDropdown);
        }

        function createMatrixTable(tableId, rows, cols, labelname) {

          const container = document.getElementById(`${tableId}label`);
          container.innerHTML = '';

          const label = document.createElement('label');
          label.textContent = `${labelname}:`;
          container.appendChild(label);

          const table = document.getElementById(tableId);
          table.innerHTML = ''; // Clear any existing cells

          for (let i = 0; i < rows; i++) {
            const row = table.insertRow();
            for (let j = 0; j < cols; j++) {
              const cell = row.insertCell();
              const input = document.createElement('input');
              input.type = 'text';
              input.name = `${tableId}_r${i}_c${j}`;
              cell.appendChild(input);
            }
          }
        }
        function createsymbolicfields(containerId, labelPrefix, numFields) {
          const container = document.getElementById(containerId);
          container.innerHTML = '';

          for (let i=0; i< numFields; i++) {
            const label = document.createElement('label');
            label.textContent = `${labelPrefix} ${i + 1}:`;
            container.appendChild(label);

            const inputName = document.createElement('input');
            inputName.type = 'text';
            inputName.name = `${'param'}_name_${i + 1}`;
            inputName.id = `${'param'}_name_${i + 1}`;
            container.appendChild(inputName);
          }
          container.appendChild(document.createElement('br'));
        }

        function createBoundsField(containerId, labelPrefix, numParams) {
          const container = document.getElementById(containerId);
          container.innerHTML = '';

          for (let i=0; i< numParams; i++) {
            const label = document.createElement('label');
            label.textContent = `${labelPrefix} ${i + 1}:`;
            container.appendChild(label);

            const inputName = document.createElement('input');
            inputName.type = 'number';
            inputName.name = `${'Bound'}_min_${i + 1}`;
            inputName.id = `${'Bound'}_min_${i + 1}`;
            container.appendChild(inputName);

            const inputField = document.createElement('input');
            inputField.type = 'number';
            inputField.name = `${'Bound'}_max_${i + 1}`;
            inputField.id = `${'Bound'}_max_${i + 1}`;
            container.appendChild(inputField);

          }
          container.appendChild(document.createElement('br'));
        }


        function createConstraintsField(containerId, labelPrefix, numParams) {
          const container = document.getElementById(containerId);
          container.innerHTML = '';

          for (let i=0; i< numParams; i++) {
            const label = document.createElement('label');
            label.textContent = `${labelPrefix} ${i + 1}:`;
            container.appendChild(label);

            const inputName = document.createElement('input');
            inputName.type = 'text';
            inputName.name = `${'Constraint'}_A_${i + 1}`;
            inputName.id = `${'Constraint'}_A_${i + 1}`;
            container.appendChild(inputName);

            const inputField = document.createElement('input');
            inputField.type = 'text';
            inputField.name = `${'Constraint'}_B_${i + 1}`;
            inputField.id = `${'Constraint'}_B_${i + 1}`;
            container.appendChild(inputField);

          }
          container.appendChild(document.createElement('br'));
        }


        function createInputFields(containerId, labelPrefix, inputNamePrefix, numFields, includeMultiplier = false, includeCompensation = false) {
          const container = document.getElementById(containerId);
          container.innerHTML = '';  // Clear any existing fields

          for (let i = 0; i < numFields; i++) {
            const label = document.createElement('label');
            label.textContent = `${labelPrefix} ${i + 1}:`;
            container.appendChild(label);

            const inputName = document.createElement('select');
            inputName.name = `${inputNamePrefix}_name_${i + 1}`;
            inputName.id = `${inputNamePrefix}_name_${i + 1}`;
            inputName.disabled = true
            container.appendChild(inputName);

            const inputField = document.createElement('select');
            inputField.name = `${inputNamePrefix}_field_${i + 1}`;
            inputField.id = `${inputNamePrefix}_field_${i + 1}`;
            inputField.disabled = true
            container.appendChild(inputField);

            if (includeMultiplier) {
              const multiplierCheckbox = document.createElement('input');
              multiplierCheckbox.type = 'checkbox';
              multiplierCheckbox.id = `multiplier_checkbox_${i + 1}`;
              multiplierCheckbox.name = `multiplierCheckbox_${i + 1}`;
              container.appendChild(multiplierCheckbox);

              const multiplierLabel = document.createElement('label');
              multiplierLabel.htmlFor = `multiplier_checkbox_${i + 1}`;
              multiplierLabel.textContent = 'Multiplier';
              container.appendChild(multiplierLabel);

              const multiplierInput = document.createElement('input');
              multiplierInput.type = 'text';
              multiplierInput.id = `multiplier_${i + 1}`;
              multiplierInput.name = `multiplier_${i + 1}`;
              multiplierInput.style.display = 'none';
              container.appendChild(multiplierInput);

              multiplierCheckbox.addEventListener('change', function () {
              multiplierInput.style.display = this.checked ? 'inline' : 'none';
              });
            }

            if (includeCompensation) {
              const compensationCheckbox = document.createElement('input');
              compensationCheckbox.type = 'checkbox';
              compensationCheckbox.id = `compensation_checkbox_${i + 1}`;
              compensationCheckbox.name = `compensationCheckbox_${i + 1}`;
              container.appendChild(compensationCheckbox);

              const compensationLabel = document.createElement('label');
              compensationLabel.htmlFor = `compensation_checkbox_${i + 1}`;
              compensationLabel.textContent = 'Gravity Compensation ';
              container.appendChild(compensationLabel);

              const axisDropdown = document.createElement('select');
              axisDropdown.id = `axis_dropdown_${i + 1}`;
              axisDropdown.name = `axis_dropdown_${i + 1}`;
              axisDropdown.style.display = 'none'; // Hidden by default

              const option1 = document.createElement('option');
              option1.value = 'Roll';
              option1.text = 'Roll';
              axisDropdown.appendChild(option1);

              const option2 = document.createElement('option');
              option2.value = 'Pitch';
              option2.text = 'Pitch';
              axisDropdown.appendChild(option2);

              const axisLabel = document.createElement('label');
              axisLabel.textContent = 'Axis:';
              axisLabel.style.display = 'none'; // Hidden by default
              container.appendChild(axisLabel);
              container.appendChild(axisDropdown);

              compensationCheckbox.addEventListener('change', function () {
                const isChecked = this.checked;
                axisDropdown.style.display = isChecked ? 'inline' : 'none';
                axisLabel.style.display = isChecked ? 'inline' : 'none';
              });
            }
            container.appendChild(document.createElement('br'));
          }
        }

        function setinputValues(vehicle_axis) {
          if (vehicle_axis == "MR_Roll" || vehicle_axis == "MR_Pitch") {
            document.getElementById('num_Outputs').value = "2"
            document.getElementById('num_params').value = "6"
            document.getElementById('A_order').value = "4"
            document.getElementById('num_cons').value = "1"
          } else if (vehicle_axis == "MR_Yaw") {
            document.getElementById('num_Outputs').value = "1"
            document.getElementById('num_params').value = "5"
            document.getElementById('A_order').value = "2"
            document.getElementById('num_cons').value = "1"
          } else if (vehicle_axis == "MR_Vertical") {
            document.getElementById('num_Outputs').value = "1"
            document.getElementById('num_params').value = "4"
            document.getElementById('A_order').value = "2"
            document.getElementById('num_cons').value = "1"
          }
        }

        function setParamValues(vehicle_axis) {

          if (vehicle_axis == "MR_Roll") {
            document.getElementById(`${'param'}_name_${1}`).value = "Yv";
            document.getElementById(`${'param'}_name_${2}`).value = "Ylat";
            document.getElementById(`${'param'}_name_${3}`).value = "Lv";
            document.getElementById(`${'param'}_name_${4}`).value = "Llat";
            document.getElementById(`${'param'}_name_${5}`).value = "wlag";
            document.getElementById(`${'param'}_name_${6}`).value = "wlg";
          } else if (vehicle_axis == "MR_Pitch") {
            document.getElementById(`${'param'}_name_${1}`).value = "Xu";
            document.getElementById(`${'param'}_name_${2}`).value = "Xlon";
            document.getElementById(`${'param'}_name_${3}`).value = "Mu";
            document.getElementById(`${'param'}_name_${4}`).value = "Mlon";
            document.getElementById(`${'param'}_name_${5}`).value = "wlag";
            document.getElementById(`${'param'}_name_${6}`).value = "wlg";
          } else if (vehicle_axis == "MR_Yaw") {
            document.getElementById(`${'param'}_name_${1}`).value = "Nr";
            document.getElementById(`${'param'}_name_${2}`).value = "Nped";
            document.getElementById(`${'param'}_name_${3}`).value = "Npedp";
            document.getElementById(`${'param'}_name_${4}`).value = "wlag";
            document.getElementById(`${'param'}_name_${5}`).value = "wlg";
          } else if (vehicle_axis == "MR_Vertical") {
            document.getElementById(`${'param'}_name_${1}`).value = "Zw";
            document.getElementById(`${'param'}_name_${2}`).value = "Zcoll";
            document.getElementById(`${'param'}_name_${3}`).value = "wlag";
            document.getElementById(`${'param'}_name_${4}`).value = "wlg";
          }
        }

        function setInputFields(vehicle_axis) {

          // Set message value and trigger on change event to regenerate the available fields
          const input = document.getElementById(`${'input'}_name_${1}`)
          input.value = "RATE"
          input.onchange()

          if (vehicle_axis == "MR_Roll") {
            document.getElementById(`${'input'}_field_${1}`).value = "ROut";
          } else if (vehicle_axis == "MR_Pitch") {
            document.getElementById(`${'input'}_field_${1}`).value = "POut";
          } else if (vehicle_axis == "MR_Yaw") {
            document.getElementById(`${'input'}_field_${1}`).value = "YOut";
          } else if (vehicle_axis == "MR_Vertical") {
            document.getElementById(`${'input'}_field_${1}`).value = "AOut";
          }
        }

        function setOutputFields(vehicle_axis) {

          function set_select(ele, val) {
            ele.value = val
            ele.onchange()
          }

          set_select(document.getElementById(`${'output'}_name_${1}`), "SIDD")

          if (vehicle_axis == "MR_Roll" || vehicle_axis == "MR_Pitch") {
            document.getElementById(`multiplier_checkbox_${1}`).checked = true;
            document.getElementById(`multiplier_${1}`).style.display = "block";
            document.getElementById(`multiplier_${1}`).value ="0.01745";
            set_select(document.getElementById(`${'output'}_name_${2}`), "SIDD")
            document.getElementById(`compensation_checkbox_${2}`).checked = true;
            document.getElementById(`axis_dropdown_${2}`).style.display = "block";
            if (vehicle_axis == "MR_Roll") {
              document.getElementById(`${'output'}_field_${1}`).value = "Gx";
              document.getElementById(`${'output'}_field_${2}`).value = "Ay";
              document.getElementById(`axis_dropdown_${2}`).value = "Roll";
            } else if (vehicle_axis == "MR_Pitch") {
              document.getElementById(`${'output'}_field_${1}`).value = "Gy";
              document.getElementById(`${'output'}_field_${2}`).value = "Ax";
              document.getElementById(`axis_dropdown_${2}`).value = "Pitch";
            }
          } else if (vehicle_axis == "MR_Yaw") {
            document.getElementById(`${'output'}_field_${1}`).value = "Gz";
            document.getElementById(`multiplier_checkbox_${1}`).checked = true;
            document.getElementById(`multiplier_${1}`).style.display = "block";
            document.getElementById(`multiplier_${1}`).value ="0.01745";
          } else if (vehicle_axis == "MR_Vertical") {
            document.getElementById(`${'output'}_field_${1}`).value = "Az";
          }
        }

        function setConstraintList(vehicle_axis) {
          if (vehicle_axis == "MR_Roll" || vehicle_axis == "MR_Pitch") {
            document.getElementById(`${`Constraint`}_A_${1}`).value = "A_3_3"
            document.getElementById(`${`Constraint`}_B_${1}`).value = "-B_3_0"
          } else if (vehicle_axis == "MR_Yaw" || vehicle_axis == "MR_Vertical") {
            document.getElementById(`${`Constraint`}_A_${1}`).value = "A_1_1"
            document.getElementById(`${`Constraint`}_B_${1}`).value = "-B_1_0"
          }
        }

        function setBounds(vehicle_axis) {
          if (vehicle_axis == "MR_Roll" || vehicle_axis == "MR_Pitch") {
            //Yv or Xu
            document.getElementById(`${`Bound`}_min_${1}`).value = "-1";
            document.getElementById(`${`Bound`}_max_${1}`).value = "0";
            //Ylat or Xlon
            document.getElementById(`${`Bound`}_min_${2}`).value = "-30";
            document.getElementById(`${`Bound`}_max_${2}`).value = "30";
            //Lv or Mu
            document.getElementById(`${`Bound`}_min_${3}`).value = "-10";
            document.getElementById(`${`Bound`}_max_${3}`).value = "10";
            //Llat or Mlon
            document.getElementById(`${`Bound`}_min_${4}`).value = "50";
            document.getElementById(`${`Bound`}_max_${4}`).value = "200";
            //wlag
            document.getElementById(`${`Bound`}_min_${5}`).value = "-50";
            document.getElementById(`${`Bound`}_max_${5}`).value = "0";
            //wlg
            document.getElementById(`${`Bound`}_min_${6}`).value = "0";
            document.getElementById(`${`Bound`}_max_${6}`).value = "50";
          } else if (vehicle_axis == "MR_Yaw") {
            //Nr
            document.getElementById(`${`Bound`}_min_${1}`).value = "-1";
            document.getElementById(`${`Bound`}_max_${1}`).value = "0";
            //Nped
            document.getElementById(`${`Bound`}_min_${2}`).value = "0";
            document.getElementById(`${`Bound`}_max_${2}`).value = "80";
            //Npedp
            document.getElementById(`${`Bound`}_min_${3}`).value = "-10";
            document.getElementById(`${`Bound`}_max_${3}`).value = "10";
            //wlag
            document.getElementById(`${`Bound`}_min_${4}`).value = "-50";
            document.getElementById(`${`Bound`}_max_${4}`).value = "0";
            //wlg
            document.getElementById(`${`Bound`}_min_${5}`).value = "0";
            document.getElementById(`${`Bound`}_max_${5}`).value = "50";
          } else if (vehicle_axis == "MR_Vertical") {
            //Zw
            document.getElementById(`${`Bound`}_min_${1}`).value = "-1";
            document.getElementById(`${`Bound`}_max_${1}`).value = "0";
            //Zcoll
            document.getElementById(`${`Bound`}_min_${2}`).value = "-100";
            document.getElementById(`${`Bound`}_max_${2}`).value = "100";
            //wlag
            document.getElementById(`${`Bound`}_min_${3}`).value = "-50";
            document.getElementById(`${`Bound`}_max_${3}`).value = "0";
            //wlg
            document.getElementById(`${`Bound`}_min_${4}`).value = "0";
            document.getElementById(`${`Bound`}_max_${4}`).value = "50";
          }
        }

        function setMatrixA(vehicle_axis) {
          if (vehicle_axis == "MR_Roll" || vehicle_axis == "MR_Pitch") {
            rows = 4;
            cols = 4;
            for (let i = 0; i < rows; i++) {
              for (let j = 0; j < cols; j++) {
                // Construct the selector for each input field
                const cellSelector = `#${'matrixA'} input[name=${'matrixA'}_r${i}_c${j}]`;
                const inputElement = document.querySelector(cellSelector);
                inputElement.value = "0";
              }
            }
          
            cellSelector = `#${'matrixA'} input[name=${'matrixA'}_r${2}_c${1}]`;
            inputElement = document.querySelector(cellSelector);
            inputElement.value = "1";

            cellSelector = `#${'matrixA'} input[name=${'matrixA'}_r${3}_c${3}]`;
            inputElement = document.querySelector(cellSelector);
            inputElement.value = "wlag";

            if (vehicle_axis == "MR_Roll") {
              cellSelector = `#${'matrixA'} input[name=${'matrixA'}_r${0}_c${0}]`;
              inputElement = document.querySelector(cellSelector);
              inputElement.value = "Yv";

              cellSelector = `#${'matrixA'} input[name=${'matrixA'}_r${0}_c${2}]`;
              inputElement = document.querySelector(cellSelector);
              inputElement.value = "9.81";

              cellSelector = `#${'matrixA'} input[name=${'matrixA'}_r${0}_c${3}]`;
              inputElement = document.querySelector(cellSelector);
              inputElement.value = "Ylat";

              cellSelector = `#${'matrixA'} input[name=${'matrixA'}_r${1}_c${0}]`;
              inputElement = document.querySelector(cellSelector);
              inputElement.value = "Lv";

              cellSelector = `#${'matrixA'} input[name=${'matrixA'}_r${1}_c${3}]`;
              inputElement = document.querySelector(cellSelector);
              inputElement.value = "Llat";

            } else if (vehicle_axis == "MR_Pitch") {
              cellSelector = `#${'matrixA'} input[name=${'matrixA'}_r${0}_c${0}]`;
              inputElement = document.querySelector(cellSelector);
              inputElement.value = "Xu";

              cellSelector = `#${'matrixA'} input[name=${'matrixA'}_r${0}_c${2}]`;
              inputElement = document.querySelector(cellSelector);
              inputElement.value = "-9.81";

              cellSelector = `#${'matrixA'} input[name=${'matrixA'}_r${0}_c${3}]`;
              inputElement = document.querySelector(cellSelector);
              inputElement.value = "Xlon";

              cellSelector = `#${'matrixA'} input[name=${'matrixA'}_r${1}_c${0}]`;
              inputElement = document.querySelector(cellSelector);
              inputElement.value = "Mu";

              cellSelector = `#${'matrixA'} input[name=${'matrixA'}_r${1}_c${3}]`;
              inputElement = document.querySelector(cellSelector);
              inputElement.value = "Mlon";
            }
          } else if (vehicle_axis == "MR_Yaw" || vehicle_axis == "MR_Vertical") {
            rows = 2;
            cols = 2;
            for (let i = 0; i < rows; i++) {
              for (let j = 0; j < cols; j++) {
                // Construct the selector for each input field
                const cellSelector = `#${'matrixA'} input[name=${'matrixA'}_r${i}_c${j}]`;
                const inputElement = document.querySelector(cellSelector);
                inputElement.value = "0";
              }
            }
            cellSelector = `#${'matrixA'} input[name=${'matrixA'}_r${1}_c${1}]`;
            inputElement = document.querySelector(cellSelector);
            inputElement.value = "wlag";

            if (vehicle_axis == "MR_Yaw") {
              cellSelector = `#${'matrixA'} input[name=${'matrixA'}_r${0}_c${0}]`;
              inputElement = document.querySelector(cellSelector);
              inputElement.value = "Nr";

              cellSelector = `#${'matrixA'} input[name=${'matrixA'}_r${0}_c${1}]`;
              inputElement = document.querySelector(cellSelector);
              inputElement.value = "Nped";
            } else if (vehicle_axis == "MR_Vertical") {
              cellSelector = `#${'matrixA'} input[name=${'matrixA'}_r${0}_c${0}]`;
              inputElement = document.querySelector(cellSelector);
              inputElement.value = "Zw";

              cellSelector = `#${'matrixA'} input[name=${'matrixA'}_r${0}_c${1}]`;
              inputElement = document.querySelector(cellSelector);
              inputElement.value = "Zcoll";
            }
          }
        }

        function setMatrixB(vehicle_axis) {
          if (vehicle_axis == "MR_Roll" || vehicle_axis == "MR_Pitch") {
            rows = 4;
            cols = 1;
            for (let i = 0; i < rows; i++) {
              for (let j = 0; j < cols; j++) {
                // Construct the selector for each input field
                const cellSelector = `#${'matrixB'} input[name=${'matrixB'}_r${i}_c${j}]`;
                const inputElement = document.querySelector(cellSelector);
                inputElement.value = "0";
              }
            }
            cellSelector = `#${'matrixB'} input[name=${'matrixB'}_r${3}_c${0}]`;
            inputElement = document.querySelector(cellSelector);
            inputElement.value = "wlg";
          } else if (vehicle_axis == "MR_Yaw") {
            cellSelector = `#${'matrixB'} input[name=${'matrixB'}_r${0}_c${0}]`;
            inputElement = document.querySelector(cellSelector);
            inputElement.value = "Npedp";
            cellSelector = `#${'matrixB'} input[name=${'matrixB'}_r${1}_c${0}]`;
            inputElement = document.querySelector(cellSelector);
            inputElement.value = "wlg";
          } else if (vehicle_axis == "MR_Vertical") {
            cellSelector = `#${'matrixB'} input[name=${'matrixB'}_r${0}_c${0}]`;
            inputElement = document.querySelector(cellSelector);
            inputElement.value = "0";
            cellSelector = `#${'matrixB'} input[name=${'matrixB'}_r${1}_c${0}]`;
            inputElement = document.querySelector(cellSelector);
            inputElement.value = "wlg";
          }
        }

        function setH0(vehicle_axis) {
          if (vehicle_axis == "MR_Roll" || vehicle_axis == "MR_Pitch") {
            rows = 2;
            cols = 4;
            for (let i = 0; i < rows; i++) {
              for (let j = 0; j < cols; j++) {
                // Construct the selector for each input field
                const cellSelector = `#${'H0'} input[name=${'H0'}_r${i}_c${j}]`;
                const inputElement = document.querySelector(cellSelector);
                inputElement.value = "0";
              }
            }
            cellSelector = `#${'H0'} input[name=${'H0'}_r${0}_c${1}]`;
            inputElement = document.querySelector(cellSelector);
            inputElement.value = "1";
          } else if (vehicle_axis == "MR_Yaw" || vehicle_axis == "MR_Vertical") {
            rows = 1;
            cols = 2;
            for (let i = 0; i < rows; i++) {
              for (let j = 0; j < cols; j++) {
                // Construct the selector for each input field
                const cellSelector = `#${'H0'} input[name=${'H0'}_r${i}_c${j}]`;
                const inputElement = document.querySelector(cellSelector);
                inputElement.value = "0";
              }
            }
            if (vehicle_axis == "MR_Yaw") {
              cellSelector = `#${'H0'} input[name=${'H0'}_r${0}_c${0}]`;
              inputElement = document.querySelector(cellSelector);
              inputElement.value = "1";
            }
          }
        }

        function setH1(vehicle_axis) {
          if (vehicle_axis == "MR_Roll" || vehicle_axis == "MR_Pitch") {
            rows = 2;
            cols = 4;
            for (let i = 0; i < rows; i++) {
              for (let j = 0; j < cols; j++) {
                // Construct the selector for each input field
                const cellSelector = `#${'H1'} input[name=${'H1'}_r${i}_c${j}]`;
                const inputElement = document.querySelector(cellSelector);
                inputElement.value = "0";
              }
            }
            cellSelector = `#${'H1'} input[name=${'H1'}_r${1}_c${0}]`;
            inputElement = document.querySelector(cellSelector);
            inputElement.value = "1";
          } else if (vehicle_axis == "MR_Yaw" || vehicle_axis == "MR_Vertical") {
            rows = 1;
            cols = 2;
            for (let i = 0; i < rows; i++) {
              for (let j = 0; j < cols; j++) {
                // Construct the selector for each input field
                const cellSelector = `#${'H1'} input[name=${'H1'}_r${i}_c${j}]`;
                const inputElement = document.querySelector(cellSelector);
                inputElement.value = "0";
              }
            }
            if (vehicle_axis == "MR_Vertical") {
              cellSelector = `#${'H1'} input[name=${'H1'}_r${0}_c${0}]`;
              inputElement = document.querySelector(cellSelector);
              inputElement.value = "1";
            }
          }
        }

        document.getElementById("tf_select").addEventListener("change", function () {
          if (this.checked) {
            document.getElementById("tf_form").style.display = "block";
            document.getElementById("ss_form").style.display = "none";
            createInputFields('tf_inputFieldsContainer', 'Input', 'input', 1);
            createInputFields('tf_outputFieldsContainer', 'Output', 'output', 1, true, true);

            // Add select options from log
            populate_log_message_select()

          } else {
            document.getElementById("tf_form").style.display = "none";
          }
        });

        document.getElementById("ss_select").addEventListener("change", function () {
          if (this.checked) {
            createautopopulate('autopopulateContainer');
            // set presets
            document.getElementById("ss_form").style.display = "block";
            document.getElementById("tf_form").style.display = "none";

            document.getElementById('createFieldsButton').addEventListener('click', function () {
              const populate = document.getElementById('populate_dropdown').value
              console.log("autopopulate selection: ",populate);

              if (populate != "manual") {
                setinputValues(populate);
              }

              const numOutputs = parseInt(document.getElementById('num_Outputs').value, 10);
              const num_params = parseInt(document.getElementById('num_params').value, 10);
              const num_constraints = parseInt(document.getElementById('num_cons').value, 10);

              if (populate == "manual" && isNaN(numOutputs) || numOutputs <= 0) {
                alert('Please enter valid numbers for inputs and outputs.');
                return;
              }

              createInputFields('inputFieldsContainer', 'Input', 'input', 1);
              createInputFields('outputFieldsContainer', 'Output', 'output', numOutputs, true, true);

              // Add select options from log
              populate_log_message_select()

              createsymbolicfields('symbolicparams',' Param',num_params);
              createBoundsField('boundsContainer',' Bound',num_params);
              createConstraintsField('constraintsinput', 'Constraint',num_constraints)

              if (populate != "manual") {
                setParamValues(populate);
                setConstraintList(populate);
                setInputFields(populate);
                setOutputFields(populate);
              }

              const orderA = parseInt(document.getElementById('A_order').value, 10);

              if (isNaN(orderA) || orderA < 1) {
                alert('Please enter valid numbers for inputs and outputs.');
                return;
              }

              createMatrixTable('matrixA', orderA, orderA, 'Matrix A');
              createMatrixTable('matrixB', orderA, 1, 'Matrix B');
              createMatrixTable('H0',numOutputs, orderA, 'H0');
              createMatrixTable('H1',numOutputs, orderA, 'H1');

              if (populate != "manual") {
                setMatrixA(populate);
                setMatrixB(populate);
                setH0(populate);
                setH1(populate);
                setBounds(populate);
              }
            });
          } else {
            document.getElementById("ss_form").style.display = "none";
          }
        });

        document.getElementById('parseButton').addEventListener('click', async () => {

          const tfCheckbox = document.getElementById('tf_select').checked
          const ssCheckbox = document.getElementById('ss_select').checked

          if(tfCheckbox) {
            run_transfer_function_ID(log)

          } else if (ssCheckbox) {
            run_SS_ID(log)

          }
        })
      }

      main().catch((error) => {
        console.error(error);
        const output = document.getElementById("output");
        output.value += '\nError during execution:\n' + error;
      });

      function addToOutput(message) {
        const output = document.getElementById("output");
        output.value += message + "\n";
      }
    </script>
  </body>
</html>