updated example UI

Added new MachineState monitor for parsing binary states to bool states

Author: davidson-engineering

html_monitor_example.py

@@ -2,18 +2,21 @@
 from flask_socketio import SocketIO
 import asyncio
 import threading
+import logging
 
 from app_monitor import SocketManager
 from app_monitor.server import OrderedDecoder, SerialUpdateServer
-from app_monitor.elements_base import TextElement
+from app_monitor.elements_base import TextElement, MachineState
 from app_monitor.text_formatter import TextFormat
 
+logging.basicConfig(level=logging.INFO)
+
 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
+manager = SocketManager(socketio=socketio, frequency=10)  # 20Hz update rate
 
 text_format = TextFormat(width=9, precision=3, force_sign=True)
 
@@ -33,11 +36,25 @@
     "motor4_speed": None,
     "motor4_torque": None,
     "motor4_status": None,
+    "machine_status": None,
 }
+
+machine_states = [
+    "deadman_switch",
+    "motors_enabled",
+    "emergency_stop",
+    "rapid_traverse",
+    "fine_control",
+    "machine_mode",
+]
+
 # Define and add elements to the manager
 for name, format in data_formats.items():
-    text_element = TextElement(element_id=name, text_format=format)
-    manager.add_element(text_element)
+    if name == "machine_status":
+        element = MachineState(element_id=name, states=machine_states)
+    else:
+        element = TextElement(element_id=name, text_format=format)
+    manager.add_element(element)
 
 # Set up the Serial Update Server
 server = SerialUpdateServer(

src/app_monitor/app_monitor.py

@@ -130,14 +130,16 @@ def __init__(self, socketio: SocketIO, frequency=1):
 
     def to_json(self):
         """Convert all monitor elements to JSON format."""
-        data = {}
+        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()
-                }
+                raise NotImplementedError(
+                    "MonitorGroup is not supported in JSON format."
+                )
             else:
-                data[element.element_id] = element.display()
+                data.append(element.as_dict())
+        # Merge and flatten all element dict objects into a single JSON object
+        data = {key: value for element in data for key, value in element.items()}
         return json.dumps(data)
 
     async def push_data(self):

src/app_monitor/elements_base.py

@@ -1,3 +1,4 @@
+from collections import OrderedDict
 from datetime import datetime
 from tabulate import tabulate
 
@@ -33,6 +34,10 @@ def update(self, data):
         """Update element with data."""
         raise NotImplementedError("Subclasses must implement the update method")
 
+    def as_dict(self):
+        """Return the element as a dictionary."""
+        return {self.element_id: self.display()}
+
     def add_border(self, content):
         """Wrap content in a simple border if self.border is True."""
         if not self.border:
@@ -79,7 +84,9 @@ def display(self):
         element_displays = "\n".join(
             element.display() for element in self.elements.values()
         )
-        return self.add_border(element_displays)
+        if self.border:
+            return self.add_border(element_displays)
+        return element_displays
 
     def add_border(self, content):
         """Wrap the content of the group in a border with a group ID as a header."""
@@ -135,11 +142,6 @@ def display(self):
 
         return full_text
 
-        # # Format the text with padding
-        # padded_text = full_text.ljust(self.width)
-
-        # return self.add_border(padded_text)
-
     def get_height(self):
         """Calculate the number of lines the text element occupies."""
         return self.text.count("\n") + 1
@@ -477,3 +479,61 @@ def add_border(self, content):
         bordered_content = [f"| {line} |" for line in lines]
         border_bottom = "+" + "-" * (self.width - 2) + "+"
         return "\n".join([header_line] + bordered_content + [border_bottom])
+
+
+class IndicatorLamp(MonitorElement):
+    """Class for rendering an indicator lamp element."""
+
+    id_generator = id_generator("lamp")
+
+    def __init__(
+        self,
+        element_id=None,
+        label="Lamp",
+        on_color="green",
+        off_color="red",
+        width=MAX_MONITOR_WIDTH,
+    ):
+        super().__init__(element_id)
+        self.label = label
+        self.on_color = on_color
+        self.off_color = off_color
+        self.width = width
+        self.state = False
+
+    def update(self, state):
+        """Update the indicator lamp state."""
+        self.state = bool(state)
+
+    def display(self):
+        """Generate the indicator lamp for display."""
+        color = self.on_color if self.state else self.off_color
+        return f"{self.label}: \033[1;{color}m●\033[0m".ljust(self.width)
+
+    def as_dict(self):
+        return {self.element_id: self.state}
+
+    def get_height(self):
+        """Indicator lamp only occupies one line."""
+        return 1
+
+
+class MachineState(MonitorElement):
+
+    def __init__(self, element_id=None, states: list[str] = None):
+        super().__init__(element_id)
+        self.states = states or []
+        self.state_binary = "0" * len(self.states)
+
+    def update(self, state):
+        # Convert state from int32_t to binary string
+        self.state_binary = format(int(state), "032b")[::-1]
+        # Unpack state binary string into individual element states
+
+    def display(self):
+        return self.state_binary
+
+    def as_dict(self):
+        return {
+            state: bool(int(bit)) for state, bit in zip(self.states, self.state_binary)
+        }

templates/example.html

@@ -24,8 +24,9 @@
 
         .section {
             display: flex;
-            flex-direction: column;
-            gap: 15px;
+            flex-direction: row;
+            justify-content: space-between;
+            align-items: flex-start;
             padding: 20px;
             border: 1px solid #ccc;
             border-radius: 8px;
@@ -46,8 +47,6 @@
             display: flex;
             align-items: center;
             font-size: 4rem;
-
-            /* Set uniform font size */
         }
 
         .axis-label {
@@ -68,6 +67,40 @@
             margin-left: 10px;
         }
 
+        .led-container {
+            display: flex;
+            flex-direction: column;
+            align-items: flex-start;
+            gap: 15px;
+            margin-left: 20px;
+        }
+
+        .led-wrapper {
+            display: flex;
+            align-items: center;
+            gap: 10px;
+        }
+
+        .led {
+            width: 25px;
+            height: 25px;
+            background-color: #555;
+            border-radius: 50%;
+            box-shadow: inset -2px -2px 4px rgba(0, 0, 0, 0.4), inset 2px 2px 4px rgba(255, 255, 255, 0.7);
+        }
+
+        .led.on {
+            background-color: #00d207;
+            /* Green color when on */
+            box-shadow: inset -2px -2px 4px rgba(0, 0, 0, 0.4), inset 2px 2px 4px rgba(255, 255, 255, 0.7), 0 0 8px #69fa6e;
+            /* Glow */
+        }
+
+        .led-label {
+            font-weight: normal;
+            text-transform: uppercase;
+        }
+
         .motor-container {
             display: grid;
             grid-template-columns: repeat(4, 1fr);
@@ -84,9 +117,7 @@
             flex-direction: column;
             gap: 5px;
             font-family: 'Roboto', sans-serif;
-            /* Uniform font */
             font-size: 1rem;
-            /* Uniform font size */
             position: relative;
         }
 
@@ -121,18 +152,14 @@
         .torque-bar {
             height: 100%;
             background-color: #4caf50;
-            /* Green bar */
             width: 0%;
-            /* Dynamic width based on torque */
             transition: width 0.3s ease;
-            /* Smooth transition */
         }
     </style>
 </head>
 
 <body>
-
-    <!-- Position Display Section -->
+    <!-- Position Display and LED Indicators Section -->
     <div class="section">
         <div class="position-display">
             <div class="position-row">
@@ -151,6 +178,34 @@
                 <div class="unit">mm</div>
             </div>
         </div>
+
+        <!-- LED Indicators Column -->
+        <div class="led-container">
+            <div class="led-wrapper">
+                <div class="led" id="led-deadman-switch"></div>
+                <div class="led-label">Deadman Switch</div>
+            </div>
+            <div class="led-wrapper">
+                <div class="led" id="led-motors-enabled"></div>
+                <div class="led-label">Motors Enabled</div>
+            </div>
+            <div class="led-wrapper">
+                <div class="led" id="led-emergency-stop"></div>
+                <div class="led-label">Emergency Stop</div>
+            </div>
+            <div class="led-wrapper">
+                <div class="led" id="led-rapid-traverse"></div>
+                <div class="led-label">Rapid Traverse</div>
+            </div>
+            <div class="led-wrapper">
+                <div class="led" id="led-fine-control"></div>
+                <div class="led-label">Fine Control</div>
+            </div>
+            <div class="led-wrapper">
+                <div class="led" id="led-machine-mode"></div>
+                <div class="led-label">Machine Mode</div>
+            </div>
+        </div>
     </div>
 
     <!-- Motor Control Section -->
@@ -195,11 +250,23 @@
         const socket = io();
         const maxTorque = 100; // Define maximum torque value for scaling
 
-        // Update the positions and motor metrics when data is received from the server
+        // Update the positions, motor metrics, and LED indicators when data is received from the server
         socket.on('update', function (data) {
             const parsedData = JSON.parse(data);
 
-            // Display raw values for position
+            // Update LED indicators based on data (accept True/False, true/false, or 1/0 as inputs)
+            function parseBoolean(value) {
+                return value === true || value === 1 || value === "True" || value === "true";
+            }
+
+            document.getElementById('led-deadman-switch').className = parseBoolean(parsedData['deadman_switch']) ? 'led on' : 'led off';
+            document.getElementById('led-motors-enabled').className = parseBoolean(parsedData['motors_enabled']) ? 'led on' : 'led off';
+            document.getElementById('led-emergency-stop').className = parseBoolean(parsedData['emergency_stop']) ? 'led on' : 'led off';
+            document.getElementById('led-rapid-traverse').className = parseBoolean(parsedData['rapid_traverse']) ? 'led on' : 'led off';
+            document.getElementById('led-fine-control').className = parseBoolean(parsedData['fine_control']) ? 'led on' : 'led off';
+            document.getElementById('led-machine-mode').className = parseBoolean(parsedData['machine_mode']) ? 'led on' : 'led off';
+
+            // Update position values
             document.getElementById('posX').textContent = parsedData['position_x'];
             document.getElementById('posY').textContent = parsedData['position_y'];
             document.getElementById('posZ').textContent = parsedData['position_z'];
@@ -228,7 +295,6 @@
             }
         });
     </script>
-
 </body>
 
 </html>