1
0

theta_rho_controller.html 8.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>Theta-Rho Controller</title>
  7. <style>
  8. #theta_rho_files li {
  9. cursor: pointer;
  10. }
  11. #theta_rho_files li.selected {
  12. font-weight: bold;
  13. color: green;
  14. }
  15. .status {
  16. margin-top: 1em;
  17. font-weight: bold;
  18. }
  19. #serial_status {
  20. color: blue;
  21. }
  22. #status_log {
  23. margin-top: 2em;
  24. padding: 1em;
  25. border: 1px solid #ccc;
  26. background: #f9f9f9;
  27. max-height: 200px;
  28. overflow-y: auto;
  29. }
  30. #status_log p {
  31. margin: 0.5em 0;
  32. }
  33. </style>
  34. </head>
  35. <body>
  36. <h1>Theta-Rho Controller</h1>
  37. <h2>Serial Connection</h2>
  38. <label for="serial_ports">Available Ports:</label>
  39. <select id="serial_ports"></select>
  40. <button onclick="connectSerial()">Connect</button>
  41. <button onclick="disconnectSerial()">Disconnect</button>
  42. <button onclick="restartSerial()">Restart</button>
  43. <p id="serial_status" class="status">Status: Not connected</p>
  44. <h2>Pre-Execution Options</h2>
  45. <label>
  46. <input type="radio" name="clear_action" value="clear_from_in"> Clear from In
  47. </label>
  48. <label>
  49. <input type="radio" name="clear_action" value="clear_from_out"> Clear from Out
  50. </label>
  51. <label>
  52. <input type="radio" name="clear_action" value="none" checked> None
  53. </label>
  54. <h2>Theta-Rho Files</h2>
  55. <ul id="theta_rho_files"></ul>
  56. <input type="file" id="upload_file">
  57. <button onclick="uploadThetaRho()">Upload</button>
  58. <h2>Run Theta-Rho</h2>
  59. <button id="run_button" disabled>Run Selected File</button>
  60. <button onclick="stopExecution()">Stop</button>
  61. <div id="status_log">
  62. <h3>Status Log</h3>
  63. <!-- Messages will be appended here -->
  64. </div>
  65. <script>
  66. let selectedFile = null;
  67. function logMessage(message) {
  68. const log = document.getElementById('status_log');
  69. const entry = document.createElement('p');
  70. entry.textContent = message;
  71. log.appendChild(entry);
  72. log.scrollTop = log.scrollHeight; // Scroll to the bottom
  73. }
  74. async function loadSerialPorts() {
  75. const response = await fetch('/list_serial_ports');
  76. const ports = await response.json();
  77. const select = document.getElementById('serial_ports');
  78. select.innerHTML = '';
  79. ports.forEach(port => {
  80. const option = document.createElement('option');
  81. option.value = port;
  82. option.textContent = port;
  83. select.appendChild(option);
  84. });
  85. logMessage('Serial ports loaded.');
  86. }
  87. async function connectSerial() {
  88. const port = document.getElementById('serial_ports').value;
  89. const response = await fetch('/connect_serial', {
  90. method: 'POST',
  91. headers: { 'Content-Type': 'application/json' },
  92. body: JSON.stringify({ port })
  93. });
  94. const result = await response.json();
  95. if (result.success) {
  96. document.getElementById('serial_status').textContent = `Status: Connected to ${port}`;
  97. logMessage(`Connected to serial port: ${port}`);
  98. } else {
  99. logMessage(`Error connecting to serial port: ${result.error}`);
  100. }
  101. }
  102. async function disconnectSerial() {
  103. const response = await fetch('/disconnect_serial', { method: 'POST' });
  104. const result = await response.json();
  105. if (result.success) {
  106. document.getElementById('serial_status').textContent = 'Status: Disconnected';
  107. logMessage('Serial port disconnected.');
  108. } else {
  109. logMessage(`Error disconnecting: ${result.error}`);
  110. }
  111. }
  112. async function restartSerial() {
  113. const port = document.getElementById('serial_ports').value;
  114. const response = await fetch('/restart_serial', {
  115. method: 'POST',
  116. headers: { 'Content-Type': 'application/json' },
  117. body: JSON.stringify({ port })
  118. });
  119. const result = await response.json();
  120. if (result.success) {
  121. document.getElementById('serial_status').textContent = `Status: Restarted connection to ${port}`;
  122. logMessage('Serial connection restarted.');
  123. } else {
  124. logMessage(`Error restarting serial connection: ${result.error}`);
  125. }
  126. }
  127. async function loadThetaRhoFiles() {
  128. const response = await fetch('/list_theta_rho_files');
  129. let files = await response.json();
  130. // Exclude specific files and sort
  131. files = files.filter(file => !['clear_from_in.thr', 'clear_from_out.thr'].includes(file))
  132. .sort();
  133. const ul = document.getElementById('theta_rho_files');
  134. ul.innerHTML = '';
  135. files.forEach(file => {
  136. const li = document.createElement('li');
  137. li.textContent = file;
  138. li.onclick = () => selectFile(file, li);
  139. ul.appendChild(li);
  140. });
  141. logMessage('Theta-Rho files loaded and sorted.');
  142. }
  143. function selectFile(file, listItem) {
  144. selectedFile = file;
  145. document.querySelectorAll('#theta_rho_files li').forEach(li => li.classList.remove('selected'));
  146. listItem.classList.add('selected');
  147. document.getElementById('run_button').disabled = false;
  148. logMessage(`File selected: ${file}`);
  149. }
  150. async function uploadThetaRho() {
  151. const fileInput = document.getElementById('upload_file');
  152. const file = fileInput.files[0];
  153. const formData = new FormData();
  154. formData.append('file', file);
  155. const response = await fetch('/upload_theta_rho', {
  156. method: 'POST',
  157. body: formData
  158. });
  159. const result = await response.json();
  160. if (result.success) {
  161. logMessage('File uploaded successfully.');
  162. loadThetaRhoFiles();
  163. } else {
  164. logMessage('Failed to upload file.');
  165. }
  166. }
  167. async function runThetaRho() {
  168. if (!selectedFile) return;
  169. const clearAction = document.querySelector('input[name="clear_action"]:checked').value;
  170. try {
  171. const response = await fetch('/run_theta_rho_with_action', {
  172. method: 'POST',
  173. headers: { 'Content-Type': 'application/json' },
  174. body: JSON.stringify({ file_name: selectedFile, action: clearAction })
  175. });
  176. const result = await response.json();
  177. if (result.success) {
  178. logMessage(`Execution started successfully for file: ${selectedFile}`);
  179. } else {
  180. logMessage(`Error during execution: ${result.error}`);
  181. }
  182. } catch (error) {
  183. logMessage(`Error during execution: ${error.message}`);
  184. }
  185. }
  186. async function stopExecution() {
  187. const response = await fetch('/stop_execution', { method: 'POST' });
  188. const result = await response.json();
  189. if (result.success) {
  190. logMessage('Execution stopped.');
  191. } else {
  192. logMessage('Failed to stop execution.');
  193. }
  194. }
  195. // Initial load of serial ports and Theta-Rho files
  196. loadSerialPorts();
  197. loadThetaRhoFiles();
  198. // Attach runThetaRho function to the Run button
  199. document.getElementById('run_button').onclick = runThetaRho;
  200. </script>
  201. </body>
  202. </html>