Web interface: mobile friendly uart terminal

flipperdevices · Sep 25, 2023 · 1691aca · 1691aca
1 parent bb15c54
commit 1691aca
Show file tree

Hide file tree

Showing 9 changed files with 91 additions and 27 deletions.
diff --git a/components/svelte-portal/public/build/bundle.css b/components/svelte-portal/public/build/bundle.css
diff --git a/components/svelte-portal/public/build/bundle.js b/components/svelte-portal/public/build/bundle.js
diff --git a/components/svelte-portal/public/build/bundle.js.map b/components/svelte-portal/public/build/bundle.js.map
diff --git a/components/svelte-portal/src/App.svelte b/components/svelte-portal/src/App.svelte
@@ -6,6 +6,7 @@
   import TabPs from "./tabs/TabPS.svelte";
   import Reload from "./lib/Reload.svelte";
   import Indicator from "./lib/Indicator.svelte";
+  import { onMount } from "svelte";
 
   let current_tab = "WiFi";
   if (localStorage.getItem("current_tab") != null) {
@@ -50,6 +51,20 @@
   }
 
   const tabs = ["WiFi", "SYS", "PS", "UART"];
+
+  // ugly hack for terminal height on mobile devices
+  const appHeight = () => {
+    const doc = document.documentElement;
+    doc.style.setProperty("--app-height", `${window.innerHeight}px`);
+  };
+
+  onMount(() => {
+    appHeight();
+    window.addEventListener("resize", appHeight);
+    window.addEventListener("orientationchange", function () {
+      appHeight();
+    });
+  });
 </script>
 
 <main>
@@ -69,7 +84,7 @@
     {/each}
   </tabs>
 
-  <tabs-content>
+  <tabs-content class:uart-terminal={current_tab == tabs[3]}>
     {#if current_tab == tabs[0]}
       <tab-content>
         <TabWiFi />
@@ -83,7 +98,7 @@
         <TabPs />
       </tab-content>
     {:else if current_tab == tabs[3]}
-      <tab-content>
+      <tab-content class="uart-terminal">
         <UartTerminal
           bind:this={uart_terminal}
           on_mount={uart_on_mount}
@@ -156,10 +171,21 @@
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   }
 
+  tabs-content.uart-terminal {
+    height: calc(var(--app-height) - 105px);
+  }
+
   @media (max-width: 520px) {
     :global(.mobile-hidden) {
       display: none !important;
     }
+    main {
+      margin: 0;
+    }
+
+    tabs-content.uart-terminal {
+      height: calc(var(--app-height) - 85px);
+    }
   }
 
   tabs {
@@ -175,6 +201,10 @@
     display: inline-block;
   }
 
+  tab:last-child {
+    margin-right: 0;
+  }
+
   tab:hover,
   tab.selected:hover {
     background: rgb(255, 255, 255);
@@ -190,4 +220,12 @@
     display: block;
     margin-top: 10px;
   }
+
+  tab-content {
+    display: block;
+  }
+
+  tab-content.uart-terminal {
+    height: 100%;
+  }
 </style>
diff --git a/components/svelte-portal/src/lib/Api.svelte b/components/svelte-portal/src/lib/Api.svelte
@@ -2,7 +2,7 @@
     let server = "";
 
     if (development_mode) {
-        server = "http://192.168.0.18";
+        server = "http://172.30.1.83";
     }
 
     export const api = {

diff --git a/components/svelte-portal/src/lib/UartTerminal.svelte b/components/svelte-portal/src/lib/UartTerminal.svelte
@@ -34,6 +34,14 @@
         last: "",
     };
 
+    const line_empty_to_br = (line) => {
+        if (line.trim() == "") {
+            return "<br>";
+        } else {
+            return line;
+        }
+    };
+
     const process_bytes = () => {
         // convert to DataView
         const data_view = new DataView(
@@ -42,29 +50,40 @@
             bytes.byteLength
         );
 
+        const encoding = "ASCII";
+        const eol = "\n";
+        const eol_code = eol.charCodeAt(0);
+
         // find last EOL
-        const last_eol = bytes.lastIndexOf("\n".charCodeAt(0));
+        const last_eol = bytes.lastIndexOf(eol_code);
 
-        // decode bytes from 0 to last_eol
-        const decoded = StringView.getString(data_view, 0, last_eol, "ASCII");
+        if (last_eol != -1) {
+            // decode bytes from 0 to last_eol
+            const decoded = StringView.getString(
+                data_view,
+                0,
+                last_eol,
+                encoding
+            );
 
-        // split by EOL
-        let lines = decoded.split("\n");
+            // split by EOL
+            let lines = decoded.split(eol);
 
-        // parse and push lines
-        lines = lines.map((line) => parseTerminal(line));
-        ready.lines.push(...lines);
+            // parse and push lines
+            lines = lines.map((line) => parseTerminal(line));
+            ready.lines.push(...lines);
 
-        // remove processed bytes
-        bytes = bytes.subarray(last_eol + 1);
+            // remove processed bytes
+            bytes = bytes.subarray(last_eol + 1);
+        }
 
         // decode last line
         if (bytes.length > 0) {
             const last_string = StringView.getString(
                 data_view,
                 0,
                 bytes.length,
-                "ASCII"
+                encoding
             );
             ready.last = parseTerminal(last_string);
         } else {
@@ -148,9 +167,11 @@
 
 <div class="terminal-wrapper">
     <div class="terminal selectable" use:scrollToBottom={ready}>
-        {#each ready.lines as line}
-            <div class="line">{@html line}</div>
-        {/each}
+        <div class="line">
+            {#each ready.lines as line}
+                {@html line}<br />
+            {/each}
+        </div>
         {#if ready.last}
             <div class="line">
                 {@html ready.last}<span class="cursor">_</span>
@@ -270,10 +291,11 @@
 
     .terminal-wrapper {
         position: relative;
+        height: 100%;
     }
 
     .terminal {
-        height: calc(100vh - 20px * 4.5 - 1em);
+        height: 100%;
         font-size: 18px;
         overflow-y: scroll;
         overflow-x: clip;
@@ -289,12 +311,15 @@
     :global(.terminal.bold) {
         font-weight: bold;
     }
+
     :global(.terminal.underline) {
         text-decoration: underline;
     }
+
     :global(.terminal.blink) {
         animation: blink 1s infinite;
     }
+
     :global(.terminal.invisible) {
         display: none;
     }

diff --git a/main/network-http.c b/main/network-http.c
@@ -685,18 +685,19 @@ void network_http_uart_write_data(uint8_t* data, size_t size) {
 }
 
 static void websocket_read_task(void* pvParameters) {
-    const size_t websocket_buffer_size = 1024;
+    const size_t websocket_buffer_size = 4096;
     uint8_t* buffer = malloc(websocket_buffer_size);
 
+    httpd_ws_frame_t ws_pkt;
+    memset(&ws_pkt, 0, sizeof(httpd_ws_frame_t));
+    ws_pkt.type = HTTPD_WS_TYPE_BINARY;
+
     while(true) {
         size_t read =
             xStreamBufferReceive(websocket_stream, buffer, websocket_buffer_size, portMAX_DELAY);
 
         if(read == 0) continue;
 
-        httpd_ws_frame_t ws_pkt;
-        memset(&ws_pkt, 0, sizeof(httpd_ws_frame_t));
-        ws_pkt.type = HTTPD_WS_TYPE_BINARY;
         ws_pkt.payload = buffer;
         ws_pkt.len = read;
 

diff --git a/main/network-uart.c b/main/network-uart.c
@@ -48,7 +48,7 @@ void network_uart_send(uint8_t* buffer, size_t size) {
 
 static void receive_and_send_to_uart(void) {
     size_t rx_size = SIZE_MAX;
-    const size_t data_size = 512;
+    const size_t data_size = 1024;
     uint8_t* buffer_rx = malloc(data_size);
 
     do {

diff --git a/main/usb-uart.c b/main/usb-uart.c
@@ -11,7 +11,7 @@
 #define USB_UART_TXD_PIN (43)
 #define USB_UART_RXD_PIN (44)
 #define USB_UART_BAUD_RATE (230400)
-#define USB_UART_RX_BUF_SIZE (64)
+#define USB_UART_RX_BUF_SIZE (1024)
 
 #define UART_RX_STREAM_BUFFER_SIZE_BYTES 1024 * 1024
 static uint8_t uart_rx_stream_storage[UART_RX_STREAM_BUFFER_SIZE_BYTES + 1] EXT_RAM_ATTR;