Add UploadFileScreen and UploadServer

.gitignore

@@ -1,3 +1,4 @@
 .pio
 .idea
 .DS_Store
+*.generated.h

platformio.ini

@@ -30,8 +30,13 @@ board_build.flash_mode = dio
 board_build.flash_size = 16MB
 board_build.partitions = partitions.csv
 
+extra_scripts =
+  pre:script/build_html.py
+
 ; Libraries
 lib_deps =
+  ESP32Async/AsyncTCP
+  ESP32Async/ESPAsyncWebServer
   BatteryMonitor=symlink://open-x4-sdk/libs/hardware/BatteryMonitor
   InputManager=symlink://open-x4-sdk/libs/hardware/InputManager
   EInkDisplay=symlink://open-x4-sdk/libs/display/EInkDisplay

script/build_html.py

@@ -0,0 +1,51 @@
+import os
+import re
+
+SRC_DIR = "src"
+
+def minify_html(html: str) -> str:
+    # Tags where whitespace should be preserved
+    preserve_tags = ['pre', 'code', 'textarea']
+    preserve_regex = '|'.join(preserve_tags)
+
+    # Protect preserve blocks with placeholders
+    preserve_blocks = []
+    def preserve(match):
+        preserve_blocks.append(match.group(0))
+        return f"__PRESERVE_BLOCK_{len(preserve_blocks)-1}__"
+
+    html = re.sub(rf'<({preserve_regex})[\s\S]*?</\1>', preserve, html, flags=re.IGNORECASE)
+
+    # Remove HTML comments
+    html = re.sub(r'<!--.*?-->', '', html, flags=re.DOTALL)
+
+    # Collapse all whitespace between tags
+    html = re.sub(r'>\s+<', '><', html)
+
+    # Collapse multiple spaces inside tags
+    html = re.sub(r'\s+', ' ', html)
+
+    # Restore preserved blocks
+    for i, block in enumerate(preserve_blocks):
+        html = html.replace(f"__PRESERVE_BLOCK_{i}__", block)
+
+    return html.strip()
+
+for root, _, files in os.walk(SRC_DIR):
+    for file in files:
+        if file.endswith(".html"):
+            html_path = os.path.join(root, file)
+            with open(html_path, "r", encoding="utf-8") as f:
+                html_content = f.read()
+
+            # minified = regex.sub("\g<1>", html_content)
+            minified = minify_html(html_content)
+            base_name = f"{os.path.splitext(file)[0]}Html"
+            header_path = os.path.join(root, f"{base_name}.generated.h")
+
+            with open(header_path, "w", encoding="utf-8") as h:
+                h.write(f"// THIS FILE IS AUTOGENERATED, DO NOT EDIT MANUALLY\n\n")
+                h.write(f"#pragma once\n")
+                h.write(f'constexpr char {base_name}[] PROGMEM = R"rawliteral({minified})rawliteral";\n')
+
+            print(f"Generated: {header_path}")

src/screens/UploadFileScreen.cpp

@@ -0,0 +1,133 @@
+#include "UploadFileScreen.h"
+
+#include <GfxRenderer.h>
+#include <SD.h>
+
+#include "config.h"
+#include "images/CrossLarge.h"
+#include "server/UploadServer.h"
+
+void UploadFileScreen::taskTrampoline(void* param) {
+  auto* self = static_cast<UploadFileScreen*>(param);
+  self->displayTaskLoop();
+}
+
+void UploadFileScreen::displayTaskLoop() {
+  while (true) {
+    if (updateRequired) {
+      updateRequired = false;
+      xSemaphoreTake(renderingMutex, portMAX_DELAY);
+      render();
+      xSemaphoreGive(renderingMutex);
+    }
+    vTaskDelay(10 / portTICK_PERIOD_MS);
+  }
+}
+
+void UploadFileScreen::render() const {
+  const auto pageWidth = GfxRenderer::getScreenWidth();
+  const auto pageHeight = GfxRenderer::getScreenHeight();
+
+  renderer.clearScreen();
+  renderer.drawImage(CrossLarge, (pageWidth - 128) / 2, (pageHeight - 128) / 2, 128, 128);
+  renderer.drawCenteredText(UI_FONT_ID, pageHeight / 2 + 70, "CrossPoint", true, BOLD);
+  renderer.drawCenteredText(SMALL_FONT_ID, pageHeight / 2 + 95, "UPLOADING");
+
+  if (currentUploadStatus == InProgress) {
+    renderer.drawRect(20, pageHeight / 2 + 110, pageWidth - 40, 50);
+    renderer.fillRect(22, pageHeight / 2 + 112,
+                      static_cast<size_t>(pageWidth - 44) * currentUploadCompleteSize / currentUploadTotalSize, 46);
+  }
+
+  renderer.displayBuffer();
+}
+
+void UploadFileScreen::onFileUploadStart(AsyncWebServerRequest* request, const String& filename) {
+  if (request->hasHeader("Content-Length")) {
+    const String contentLengthStr = request->header("Content-Length");
+    currentUploadTotalSize = contentLengthStr.toInt();
+  } else {
+    currentUploadTotalSize = 0;
+  }
+  currentUploadCompleteSize = 0;
+  currentUploadFilename = filename;
+  currentUploadStatus = InProgress;
+  updateRequired = true;
+
+  // First chunk of data: open the file in write mode
+  // Use request->_tempFile to manage the file object across chunks
+  // Writing to SD uses SPI, so lock the screen
+  xSemaphoreTake(renderingMutex, portMAX_DELAY);
+  request->_tempFile = SD.open("/" + filename, FILE_WRITE, true);
+  xSemaphoreGive(renderingMutex);
+}
+
+void UploadFileScreen::onFileUploadPart(AsyncWebServerRequest* request, const uint8_t* data, const size_t len) {
+  // Write the received chunk of data to the file
+  // Writing to SD uses SPI, so lock the screen
+  xSemaphoreTake(renderingMutex, portMAX_DELAY);
+  request->_tempFile.write(data, len);
+  xSemaphoreGive(renderingMutex);
+
+  currentUploadCompleteSize += len;
+  // Only update the screen at most every 5% to avoid blocking the SPI channel
+  if (currentUploadTotalSize > 0 && (currentUploadCompleteSize - len) * 100 / currentUploadTotalSize / 5 <
+                                        currentUploadCompleteSize * 100 / currentUploadTotalSize / 5) {
+    updateRequired = true;
+  }
+}
+
+void UploadFileScreen::onFileUploadEnd(AsyncWebServerRequest* request) {
+  currentUploadStatus = Complete;
+
+  // Final chunk of data: close the file and send a response
+  // Writing to SD uses SPI, so lock the screen
+  xSemaphoreTake(renderingMutex, portMAX_DELAY);
+  request->_tempFile.close();
+  xSemaphoreGive(renderingMutex);
+
+  updateRequired = true;
+}
+
+void UploadFileScreen::onEnter() {
+  renderingMutex = xSemaphoreCreateMutex();
+
+  uploadServer.reset(new UploadServer(
+      [this](AsyncWebServerRequest* request, const String& filename) { onFileUploadStart(request, filename); },
+      [this](AsyncWebServerRequest* request, const uint8_t* data, const size_t len) {
+        onFileUploadPart(request, data, len);
+      },
+      [this](AsyncWebServerRequest* request) { onFileUploadEnd(request); }));
+  uploadServer->begin();
+
+  // Trigger first update
+  updateRequired = true;
+
+  xTaskCreate(&UploadFileScreen::taskTrampoline, "UploadFileScreenTask",
+              2048,               // Stack size
+              this,               // Parameters
+              1,                  // Priority
+              &displayTaskHandle  // Task handle
+  );
+}
+
+void UploadFileScreen::onExit() {
+  // Wait until not rendering to delete task to avoid killing mid-instruction to EPD
+  xSemaphoreTake(renderingMutex, portMAX_DELAY);
+  if (displayTaskHandle) {
+    vTaskDelete(displayTaskHandle);
+    displayTaskHandle = nullptr;
+  }
+  uploadServer->end();
+  uploadServer.reset();
+  vSemaphoreDelete(renderingMutex);
+  renderingMutex = nullptr;
+}
+
+void UploadFileScreen::handleInput() {
+  uploadServer->loop();
+
+  if (inputManager.wasPressed(InputManager::BTN_BACK)) {
+    onGoHome();
+  }
+}

src/screens/UploadFileScreen.h

@@ -0,0 +1,33 @@
+#pragma once
+#include <memory>
+
+#include "Screen.h"
+#include "server/UploadServer.h"
+
+class UploadFileScreen final : public Screen {
+  enum UploadStatus { Idle, InProgress, Complete };
+
+  TaskHandle_t displayTaskHandle = nullptr;
+  SemaphoreHandle_t renderingMutex = nullptr;
+  std::unique_ptr<UploadServer> uploadServer = nullptr;
+  size_t currentUploadTotalSize = 0;
+  size_t currentUploadCompleteSize = 0;
+  String currentUploadFilename = "";
+  UploadStatus currentUploadStatus = Idle;
+  bool updateRequired = false;
+  const std::function<void()> onGoHome;
+
+  static void taskTrampoline(void* param);
+  [[noreturn]] void displayTaskLoop();
+  void render() const;
+  void onFileUploadStart(AsyncWebServerRequest* request, const String& filename);
+  void onFileUploadPart(AsyncWebServerRequest* request, const uint8_t* data, size_t len);
+  void onFileUploadEnd(AsyncWebServerRequest* request);
+
+ public:
+  explicit UploadFileScreen(GfxRenderer& renderer, InputManager& inputManager, const std::function<void()>& onGoHome)
+      : Screen(renderer, inputManager), onGoHome(onGoHome) {}
+  void onEnter() override;
+  void onExit() override;
+  void handleInput() override;
+};

src/server/UploadServer.cpp

@@ -0,0 +1,62 @@
+#include "UploadServer.h"
+
+#include <WiFi.h>
+
+#include "html/UploadHtml.generated.h"
+#include "html/UploadSuccessHtml.generated.h"
+
+void UploadServer::begin() {
+  dnsServer.reset(new DNSServer());
+  server.reset(new AsyncWebServer(80));
+
+  WiFi.mode(WIFI_AP);
+  WiFi.softAP("CrossPoint");
+
+  server->on("/upload", HTTP_GET, [](AsyncWebServerRequest* request) { request->send(200, "text/html", UploadHtml); });
+
+  server->on(
+      "/upload", HTTP_POST,
+      [](AsyncWebServerRequest* request) {
+        request->send(200, "text/html", UploadSuccessHtml);
+      },
+      [this](AsyncWebServerRequest* request, const String& filename, const size_t index, const uint8_t* data,
+             const size_t len, const bool final) {
+        // This function is called multiple times as data chunks are received
+        if (!index) {
+          onStart(request, filename);
+        }
+
+        if (len) {
+          onPart(request, data, len);
+        }
+
+        if (final) {
+          onEnd(request);
+        }
+      });
+
+  server->onNotFound([](AsyncWebServerRequest* request) { request->redirect("/upload"); });
+
+  dnsServer->start(53, "*", WiFi.softAPIP());
+  server->begin();
+  running = true;
+}
+
+void UploadServer::loop() {
+  if (running) {
+    dnsServer->processNextRequest();
+  }
+}
+
+void UploadServer::end() {
+  if (running) {
+    server->reset();
+    server->end();
+    dnsServer->stop();
+    WiFi.softAPdisconnect(true);
+    WiFi.mode(WIFI_OFF);
+    server.reset();
+    dnsServer.reset();
+    running = false;
+  }
+}

src/server/UploadServer.h

@@ -0,0 +1,24 @@
+#pragma once
+#include <DNSServer.h>
+#include <ESPAsyncWebServer.h>
+
+#include <memory>
+
+class UploadServer {
+  bool running = false;
+  std::unique_ptr<DNSServer> dnsServer = nullptr;
+  std::unique_ptr<AsyncWebServer> server = nullptr;
+  std::function<void(AsyncWebServerRequest* request, const String& filename)> onStart;
+  std::function<void(AsyncWebServerRequest* request, const uint8_t* data, size_t len)> onPart;
+  std::function<void(AsyncWebServerRequest* request)> onEnd;
+
+ public:
+  UploadServer(const std::function<void(AsyncWebServerRequest* request, const String& filename)>& onStart,
+               const std::function<void(AsyncWebServerRequest* request, const uint8_t* data, size_t len)>& onPart,
+               const std::function<void(AsyncWebServerRequest* request)>& onEnd)
+      : onStart(onStart), onPart(onPart), onEnd(onEnd) {}
+  ~UploadServer() = default;
+  void begin();
+  void loop();
+  void end();
+};

src/server/html/Upload.html

@@ -0,0 +1,86 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>CrossPoint File Upload</title>
+  <style>
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+      margin: 0;
+      padding: 20px;
+      background-color: #f0f2f5;
+      color: #333;
+      text-align: center;
+    }
+
+    .container {
+      max-width: 400px;
+      margin: 40px auto;
+      padding: 30px;
+      background-color: #ffffff;
+      border-radius: 8px;
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+    }
+
+    h1 {
+      color: #1a73e8;
+      font-size: 1.5em;
+      margin-bottom: 20px;
+    }
+
+    input[type="file"] {
+      display: block;
+      width: 100%;
+      padding: 10px;
+      margin-bottom: 20px;
+      border: 1px solid #ccc;
+      border-radius: 4px;
+      box-sizing: border-box;
+    }
+
+    .upload-button {
+      background-color: #1a73e8;
+      color: white;
+      padding: 10px 20px;
+      border: none;
+      border-radius: 4px;
+      cursor: pointer;
+      font-size: 1em;
+      width: 100%;
+      transition: background-color 0.3s, opacity 0.3s;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .upload-button:hover:not(:disabled) {
+      background-color: #145cb3;
+    }
+
+    .note {
+      margin-top: 20px;
+      font-size: 0.85em;
+      color: #666;
+    }
+  </style>
+</head>
+<body>
+
+<div class="container">
+  <h1>CrossPoint Upload</h1>
+
+  <form id="uploadForm" action="/upload" method="POST" enctype="multipart/form-data">
+
+    <label for="file-input" style="display: none;">Choose File:</label>
+    <input type="file" id="file-input" name="file" required>
+
+    <button type="submit" id="uploadButton" class="upload-button">
+      <span id="buttonText" class="button-text">Upload File</span>
+    </button>
+  </form>
+
+  <p class="note">Check your device for upload progress.</p>
+</div>
+</body>
+</html>

src/server/html/UploadSuccess.html

@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Upload Successful</title>
+  <style>
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+      margin: 0;
+      padding: 20px;
+      background-color: #f0f2f5;
+      color: #333;
+      text-align: center;
+    }
+
+    .container {
+      max-width: 400px;
+      margin: 80px auto;
+      padding: 30px;
+      background-color: #ffffff;
+      border-radius: 8px;
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+      animation: fadeIn 0.5s ease-in-out;
+    }
+
+    @keyframes fadeIn {
+      from {
+        opacity: 0;
+        transform: translateY(-10px);
+      }
+      to {
+        opacity: 1;
+        transform: translateY(0);
+      }
+    }
+
+    h1 {
+      color: #28a745; /* Green for success */
+      font-size: 1.8em;
+      margin-bottom: 10px;
+    }
+
+    p {
+      font-size: 1.1em;
+      margin-bottom: 30px;
+    }
+
+    a.button {
+      display: inline-block;
+      background-color: #1a73e8;
+      color: white;
+      padding: 10px 20px;
+      border: none;
+      border-radius: 4px;
+      text-decoration: none; /* Remove underline */
+      font-size: 1em;
+      transition: background-color 0.3s;
+    }
+
+    a.button:hover {
+      background-color: #145cb3;
+    }
+  </style>
+</head>
+<body>
+
+<div class="container">
+  <h1>🎉 Success!</h1>
+  <p>Your file has been uploaded to your device.</p>
+
+  <a href="/upload" class="button">Upload Another File</a>
+</div>
+
+</body>
+</html>