Added HTML montior class for piping data to a webserver over a socket

Author: davidson-engineering

html_monitor_example.py

@@ -0,0 +1,54 @@
+from flask import Flask, render_template
+from flask_socketio import SocketIO
+import asyncio
+import threading
+
+from app_monitor import SocketManager
+from app_monitor.server import OrderedDecoder, SerialUpdateServer
+from app_monitor.elements_base import TextElement
+
+app = Flask(__name__)
+app.config["SECRET_KEY"] = "secret!"
+socketio = SocketIO(app)
+
+# Initialize SocketManager with Flask-SocketIO instance
+manager = SocketManager(socketio=socketio, frequency=20)  # 20Hz update rate
+
+# Define and add elements to the manager
+text_element1 = TextElement(static_text="Element1: ", element_id="element1")
+text_element2 = TextElement(static_text="Element2: ", element_id="element2")
+text_element3 = TextElement(static_text="Element3: ", element_id="element3")
+manager.add_element(text_element1)
+manager.add_element(text_element2)
+manager.add_element(text_element3)
+
+# Set up the Serial Update Server
+server = SerialUpdateServer(
+    manager,
+    port="/dev/tty.usbserial-1460",
+    baudrate=115200,
+    decoder=OrderedDecoder(keys=["element1", "element2", "element3"]),
+)
+
+
+@app.route("/")
+def index():
+    return render_template("example.html")
+
+
+def run_flask():
+    """Run Flask in a separate thread."""
+    socketio.run(app, port=5000)
+
+
+async def main():
+    # Start the Flask app in a separate thread
+    flask_thread = threading.Thread(target=run_flask)
+    flask_thread.start()
+
+    # Start the asyncio tasks
+    await asyncio.gather(manager.push_data(), server.start(frequency=20))
+
+
+if __name__ == "__main__":
+    asyncio.run(main())

html_test.py

@@ -17,7 +17,7 @@
 from config_loader import load_configs
 
 from app_monitor import (
-    MonitorManager,
+    TerminalManager,
     ProgressBar,
     Table,
     RangeBar,
@@ -43,7 +43,7 @@ async def main():
     logging.info(configs["application"])
 
     # Create a MonitorManager instances
-    manager = MonitorManager()
+    manager = TerminalManager()
 
     # Add a progress bar and table elements with formatting
     BAR_WIDTH = 30

main.py

@@ -1,7 +1,7 @@
-__version__ = "0.0.2"
+__version__ = "0.1.0"
 
 
-from .app_monitor import MonitorManager
+from .app_monitor import TerminalManager, SocketManager
 from .elements_base import (
     ProgressBar,
     Table,

src/app_monitor/__init__.py

@@ -47,7 +47,29 @@ def update(self, element_id, *args):
                 element.update(*args)
                 break
 
-    def update_all_elements(self):
+    def generate_element_id_map(self):
+        """Generate a list of all element IDs in the monitor manager."""
+        element_count = 0
+
+        def _element_id_generator(elements):
+            """Recursively generate element IDs."""
+            nonlocal element_count
+            for element in elements:
+                if isinstance(element, MonitorGroup):
+                    yield from _element_id_generator(element.elements.values())
+                else:
+                    yield element_count, element.element_id
+                    element_count += 1
+
+        return {
+            str(number): element_id
+            for number, element_id in _element_id_generator(self.elements)
+        }
+
+
+class TerminalManager(MonitorManager):
+
+    def update_screen_buffer(self):
         """Construct the full screen content in a buffer"""
         self.buffer = []  # Clear the buffer for the new frame
 
@@ -73,42 +95,67 @@ async def update_screen_fixed_rate(self, frequency=1):
             self.update_screen()  # Display the current metrics
             await asyncio.sleep(1 / frequency)  # Wait for the next update cycle
 
-    async def update_all_elements_fixed_rate(self, frequency=1):
+    async def update_screen_buffer_fixed_rate(self, frequency=1):
         """Asynchronously update all elements at a fixed rate."""
         assert frequency > 0, "Frequency must be greater than 0."
         while True:
-            self.update_all_elements()
+            self.update_screen_buffer()
             await asyncio.sleep(1 / frequency)
 
     async def update_fixed_rate(self, frequency=30):
         await asyncio.gather(
             self.update_screen_fixed_rate(frequency=frequency),
-            self.update_all_elements_fixed_rate(frequency=frequency),
+            self.update_screen_buffer_fixed_rate(frequency=frequency),
         )
 
-    def generate_element_id_map(self):
-        """Generate a list of all element IDs in the monitor manager."""
-        element_count = 0
 
-        def _element_id_generator(elements):
-            """Recursively generate element IDs."""
-            nonlocal element_count
-            for element in elements:
-                if isinstance(element, MonitorGroup):
-                    yield from _element_id_generator(element.elements.values())
-                else:
-                    yield element_count, element.element_id
-                    element_count += 1
+import asyncio
+import json
+from flask_socketio import SocketIO
 
-        return {
-            str(number): element_id
-            for number, element_id in _element_id_generator(self.elements)
-        }
+
+class SocketManager(MonitorManager):
+    """Subclass of MonitorManager that adds functionality to push data to a WebSocket."""
+
+    def __init__(self, socketio: SocketIO, frequency=1):
+        """
+        Initialize with a SocketIO instance and a push frequency.
+
+        :param socketio: SocketIO instance to handle WebSocket communication.
+        :param frequency: Frequency in Hz for pushing updates to clients.
+        """
+        super().__init__()  # Initialize the parent MonitorManager
+        self.socketio = socketio
+        self.frequency = frequency
+
+    def to_json(self):
+        """Convert all monitor elements to JSON format."""
+        data = {}
+        for element in self.elements:
+            if isinstance(element, MonitorGroup):
+                data[element.group_id] = {
+                    e_id: el.display() for e_id, el in element.elements.items()
+                }
+            else:
+                data[element.element_id] = element.display()
+        return json.dumps(data)
+
+    async def push_data(self):
+        """Asynchronously push data to all connected WebSocket clients at the specified frequency."""
+        while True:
+            data = self.to_json()  # Get data in JSON format
+            self.socketio.emit("update", data)  # Push data to WebSocket clients
+            await asyncio.sleep(1 / self.frequency)  # Control push frequency
+
+    def set_frequency(self, frequency):
+        """Set the frequency at which data is pushed to clients."""
+        assert frequency > 0, "Frequency must be greater than 0."
+        self.frequency = frequency
 
 
 async def main():
     # Create a MonitorManager instance
-    manager = MonitorManager()
+    manager = TerminalManager()
 
     # Add a text element and a progress bar
     text = TextElement("Buffers")

src/app_monitor/app_monitor.py

@@ -108,9 +108,16 @@ class TextElement(MonitorElement):
 
     id_generator = id_generator("text")
 
-    def __init__(self, text, static_text=None, element_id=None, text_format=None, width=MAX_MONITOR_WIDTH):
+    def __init__(
+        self,
+        text=None,
+        static_text=None,
+        element_id=None,
+        text_format=None,
+        width=MAX_MONITOR_WIDTH,
+    ):
         super().__init__(element_id, width=width)
-        self.text = text
+        self.text = "" if text is None else str(text)
         self.text_format = text_format
         self.static_text = static_text
 
@@ -122,7 +129,7 @@ def display(self):
         """Generate the text element for display."""
         # Combine static and dynamic text
         full_text = self.static_text + self.text if self.static_text else self.text
-        
+
         # Format the text with padding
         padded_text = full_text.ljust(self.width)
 
@@ -139,7 +146,6 @@ def get_height(self):
         return self.text.count("\n") + 1
 
 
-
 class ProgressBar(MonitorElement):
     """Class for rendering a progress bar."""
 

src/app_monitor/elements_base.py

@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Monitor Display</title>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.min.js"></script>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            padding: 20px;
+        }
+        .element {
+            padding: 5px 0;
+        }
+    </style>
+</head>
+<body>
+    <h1>Monitor Display</h1>
+    <div id="monitor"></div>
+
+    <script>
+        const monitorDiv = document.getElementById('monitor');
+        const socket = io();
+
+        // Listen for updates from the server
+        socket.on('update', function(data) {
+            const parsedData = JSON.parse(data);
+            monitorDiv.innerHTML = '';  // Clear previous content
+
+            // Display each element_id: text pair
+            for (const [element_id, text] of Object.entries(parsedData)) {
+                const elementDiv = document.createElement('div');
+                elementDiv.classList.add('element');
+                elementDiv.textContent = `${text}`;
+                monitorDiv.appendChild(elementDiv);
+            }
+        });
+    </script>
+</body>
+</html>