Web interface: UART send

components/svelte-portal/src/App.svelte

@@ -28,6 +28,8 @@
 
   let uart_indicatior = undefined;
   let uart_terminal = undefined;
+  let web_socket = undefined;
+
   function receive_uart(data) {
     uart_indicatior.activate();
     uart_history_array_put(data);
@@ -43,6 +45,10 @@
     }
   }
 
+  function uart_send(data) {
+    web_socket.send(data);
+  }
+
   const tabs = ["WiFi", "SYS", "PS", "UART"];
 </script>
 
@@ -75,13 +81,13 @@
       </tab-content>
     {:else if current_tab == tabs[3]}
       <tab-content>
-        <UartTerminal bind:this={uart_terminal} on_mount={uart_on_mount} />
+        <UartTerminal bind:this={uart_terminal} on_mount={uart_on_mount} send={uart_send}/>
       </tab-content>
     {/if}
   </tabs-content>
 
   <Indicator bind:this={uart_indicatior} />
-  <WebSocket receive={receive_uart} />
+  <WebSocket bind:this={web_socket} receive={receive_uart} />
   <Reload />
 </main>
 

components/svelte-portal/src/lib/Input.svelte

@@ -1,6 +1,7 @@
 <script>
   export let value = "";
   export let type = "text";
+  export let input = undefined;
 
   export function set_value(new_value) {
     value = new_value;
@@ -13,6 +14,9 @@
   function text_input() {
     this.size = this.value.length > 3 ? this.value.length : 3;
     value = this.value;
+    if (input != undefined) {
+      input(value);
+    }
   }
 </script>
 

components/svelte-portal/src/lib/UartTerminal.svelte

@@ -23,6 +23,8 @@
 
     export let on_mount = () => {};
 
+    export let send;
+
     function process_bytes() {
         let decoded = new TextDecoder().decode(new Uint8Array(bytes));
         let last_line_complete =
@@ -94,6 +96,19 @@
                 }
             });
     }
+
+    let tx = {
+        popup: null,
+        data: "",
+        eol: "\\r\\n",
+    };
+
+    async function uart_send() {
+        tx.popup.close();
+        let eol = tx.eol.replaceAll("\\r", "\r").replaceAll("\\n", "\n");
+        let data = tx.data + eol;
+        send("s" + data);
+    }
 </script>
 
 <div class="terminal-wrapper">
@@ -108,6 +123,7 @@
         {/if}
     </div>
     <div class="config">
+        <Button value="S" on:click={tx.popup.show} />
         <Button value="#" on:click={config.popup.show} />
     </div>
     <Popup bind:this={config.popup}>
@@ -160,6 +176,21 @@
             <Spinner />
         {/if}
     </Popup>
+
+    <Popup bind:this={tx.popup}>
+        <Grid>
+            <Value name="Data">
+                <Input value={tx.data} input={(data) => (tx.data = data)} /><br
+                />
+            </Value>
+            <Value name="EOL">
+                <Input value={tx.eol} input={(data) => (tx.eol = data)} />
+            </Value>
+        </Grid>
+        <div style="margin-top: 10px; text-align: center;">
+            <Button value="Send" on:click={uart_send} />
+        </div>
+    </Popup>
 </div>
 
 <style>

components/svelte-portal/src/lib/WebSocket.svelte

@@ -3,6 +3,7 @@
     import { onMount, onDestroy } from "svelte";
 
     export let receive = () => {};
+    export const send = send_data;
 
     function cleanup_server() {
         let url = api.server;
@@ -17,6 +18,10 @@
     let gateway = `ws://${cleanup_server()}/api/v1/uart/websocket`;
     let websocket;
 
+    function send_data(data) {
+        websocket.send(data);
+    }
+
     function on_open(event) {}
 
     function on_close(event) {