index.html 1.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <title>ArduRemoteID</title>
  6. <meta name="description" content="ArduPilot RemoteID Module.">
  7. <link rel="stylesheet" type="text/css" href="styles/main.css">
  8. <script src='js/jquery.min.js'></script>
  9. <script src='js/tools.js'></script>
  10. </head>
  11. <body>
  12. <h1>ArduRemoteID</h1>
  13. <h2>Status</h2>
  14. <table class="values">
  15. <tr><td>Version</td><td><div id="STATUS:VERSION"></div></td></tr>
  16. <tr><td>Up Time</td><td><div id="STATUS:UPTIME"></div></td></tr>
  17. <tr><td>Free Memory</td><td><div id="STATUS:FREEMEM"></div></td></tr>
  18. </table>
  19. <h2>Firmware Update</h2>
  20. <form method='POST' action='#' enctype='multipart/form-data' id='upload_form'>
  21. <input type='file' name='update'>
  22. <input type='submit' value='Update'>
  23. </form>
  24. <div id='progress'>upload progress: 0%</div>
  25. <script>
  26. $('form').submit(function(e) {
  27. e.preventDefault();
  28. var form = $('#upload_form')[0];
  29. var data = new FormData(form);
  30. $.ajax({
  31. url: '/update',
  32. type: 'POST',
  33. data: data,
  34. contentType: false,
  35. processData:false,
  36. xhr: function() {
  37. var xhr = new window.XMLHttpRequest();
  38. xhr.upload.addEventListener('progress', function(evt) {
  39. if (evt.lengthComputable) {
  40. var per = evt.loaded / evt.total;
  41. $('#progress').html('progress: ' + Math.round(per*100) + '%');
  42. }
  43. }, false);
  44. return xhr;
  45. },
  46. success:function(d, s) {
  47. console.log('success!')
  48. },
  49. error: function (a, b, c) {
  50. }
  51. });
  52. });
  53. // poll status information at 1Hz (900ms to cope with some lag)
  54. ajax_json_poll_fill("/ajax/status.json", 900);
  55. </script>
  56. </body>
  57. </html>