catalystneuro · CodyCBakerPhD · Mar 14, 2024 · Mar 14, 2024 · Mar 14, 2024 · Mar 14, 2024
diff --git a/pyproject.toml b/pyproject.toml
@@ -52,7 +52,7 @@ demo = [
 "Bug Tracker" = "https://github.com/catalystneuro/tqdm_publisher/issues"
 
 [project.scripts]
-tqdm_publisher = "tqdm_publisher._demo._demo_command_line_interface:_command_line_interface"
+tqdm_publisher = "tqdm_publisher._demos._demo_command_line_interface:_command_line_interface"
 
 [tool.black]
 line-length = 120

diff --git a/src/tqdm_publisher/_demo/_client.html b/src/tqdm_publisher/_demo/_client.html
diff --git a/src/tqdm_publisher/_demo/_client.js b/src/tqdm_publisher/_demo/_client.js
diff --git a/src/tqdm_publisher/_demo/_demo_command_line_interface.py b/src/tqdm_publisher/_demo/_demo_command_line_interface.py
diff --git a/src/tqdm_publisher/_demo/__init__.py → src/tqdm_publisher/_demos/__init__.py b/src/tqdm_publisher/_demo/__init__.py → src/tqdm_publisher/_demos/__init__.py
diff --git a/src/tqdm_publisher/_demos/_client.css b/src/tqdm_publisher/_demos/_client.css
@@ -0,0 +1,37 @@
+
+html, body {
+    font-family: sans-serif;
+}
+
+h1 {
+    margin: 0;
+    padding: 0;
+    font-size: 1.5rem;
+}
+
+header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 20px;
+}
+
+#bars {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 20px;
+    flex-wrap: wrap;
+}
+
+.progress {
+    width: 100%;
+    height: 20px;
+    background-color: #ddd;
+}
+
+.progress div {
+    height: 100%;
+    background-color: #4caf50;
+    width: 0%;
+}
diff --git a/src/tqdm_publisher/_demos/_demo_command_line_interface.py b/src/tqdm_publisher/_demos/_demo_command_line_interface.py
@@ -0,0 +1,61 @@
+import os
+import subprocess
+import sys
+import webbrowser
+from pathlib import Path
+
+from tqdm_publisher._demos._multiple_bars._server import run_multiple_bar_demo
+from tqdm_publisher._demos._single_bar._server import run_single_bar_demo
+
+CLIENT_PORT = 1234
+
+DEMOS = {
+    "demo_single": dict(subpath="_single_bar", server=run_single_bar_demo),
+    "demo_multiple": dict(subpath="_multiple_bars", server=run_multiple_bar_demo),
+    # "parallel": "_parallel",
+}
+
+DEMO_BASE_FOLDER_PATH = Path(__file__).parent
+
+RELATIVE_DEMO_BASE_FOLDER_PATH = DEMO_BASE_FOLDER_PATH.relative_to(Path.cwd())
+
+
+def _command_line_interface():
+    """A simple command line interface for running the demo for TQDM Publisher."""
+    if len(sys.argv) <= 1:
+        print("No input provided. Please specify a command (e.g. 'demo').")
+        return
+
+    command = sys.argv[1]
+    if "-" in command:
+        print(
+            f"No command provided, but flag {command} was received. "
+            "Please specify a command before the flag (e.g. 'demo')."
+        )
+        return
+
+    flags_list = sys.argv[2:]
+    if len(flags_list) > 0:
+        print(f"No flags are accepted at this time, but flags {flags_list} were received.")
+        return
+
+    if command in DEMOS:
+
+        demo_info = DEMOS[command]
+
+        # if command == "parallel":
+        #     client_relative_path = Path(subpath) / "_client.py"
+        #     subprocess.Popen(['python', str(DEMO_BASE_FOLDER_PATH / subpath / "_server.py")])
+        #     subprocess.Popen(['python', str(DEMO_BASE_FOLDER_PATH / subpath / "_client.py")])
+
+        # else:
+
+        client_relative_path = Path(demo_info["subpath"]) / "_client.html"
+        subprocess.Popen(["python", "-m", "http.server", str(CLIENT_PORT), "-d", DEMO_BASE_FOLDER_PATH])
+
+        webbrowser.open_new_tab(f"http://localhost:{CLIENT_PORT}/{client_relative_path}")
+
+        demo_info["server"]()
+
+    else:
+        print(f"{command} is an invalid command.")
diff --git a/src/tqdm_publisher/_demos/_multiple_bars/_client.html b/src/tqdm_publisher/_demos/_multiple_bars/_client.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+
+<html lang="en">
+
+<head>
+
+    <meta charset="UTF-8">
+
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+    <title>Multiple Bar Demo</title>
+
+    <!-- Basic Page Styling -->
+    <link rel="stylesheet" href="../_client.css">
+    <script src="./_client.js" type="module" defer></script>
+
+</head>
+
+<!-- Basic Page Structure -->
+<body>
+    <header>
+        <div>
+            <h1>TQDM Publisher Demo: Multiple Bars</h1>
+            <i><small>Click the button more than once to create multiple progress bars</small></i>
+        </div>
+
+        <!-- Declare a button to create progress bars -->
+        <button>Create Progress Bar</button>
+    </header>
+
+    <!-- Declare a container to hold the progress bars -->
+    <div id="bars"></div>
+</body>
+</html>
diff --git a/src/tqdm_publisher/_demos/_multiple_bars/_client.js b/src/tqdm_publisher/_demos/_multiple_bars/_client.js
@@ -0,0 +1,21 @@
+import { WebSocketManager } from '../utils/WebSocketManager.js';
+import { createProgressBar } from '../utils/elements.js';
+
+const bars = {} // Track progress bars
+
+// Update the specified progress bar when a message is received from the server
+const onProgressUpdate = (event) => {
+    const { request_id, format_dict } = JSON.parse(event.data);
+    bars[request_id].style.width = 100 * (format_dict.n / format_dict.total) + '%';
+}
+
+// Create a new WebSocket client
+const client = new WebSocketManager({ onmessage: onProgressUpdate });
+
+// Declare that the HTML Button should create a new progress bar when clicked
+const button = document.querySelector('button');
+button.addEventListener('click', () => {
+    const request_id = Math.random().toString(36).substring(7); // Create a unique ID for the progress bar
+    bars[request_id] = createProgressBar(); // Create and render a progress bar
+    client.socket.send(JSON.stringify({ command: 'start', request_id })); // Send a message to the server to start the progress bar
+})