From 154d3e7ceb490356bd9aa09e1a0bd9079c7eed12 Mon Sep 17 00:00:00 2001
From: Jens Scheidtmann <Jens.Scheidtmann@gmail.com>
Date: Sat, 20 Sep 2025 22:47:31 +0200
Subject: [PATCH 01/16] Vibe coded property display

---
 indiweb/indi_client.py               | 543 +++++++++++++++++++++
 indiweb/main.py                      | 189 +++++++-
 indiweb/views/css/device_control.css | 673 +++++++++++++++++++++++++++
 indiweb/views/device_control.tpl     | 519 +++++++++++++++++++++
 indiweb/views/form.tpl               |   8 +
 indiweb/views/js/indi.js             |  48 ++
 requirements.txt                     |   5 +-
 7 files changed, 1982 insertions(+), 3 deletions(-)
 create mode 100644 indiweb/indi_client.py
 create mode 100644 indiweb/views/css/device_control.css
 create mode 100644 indiweb/views/device_control.tpl

diff --git a/indiweb/indi_client.py b/indiweb/indi_client.py
new file mode 100644
index 0000000..b9e620d
--- /dev/null
+++ b/indiweb/indi_client.py
@@ -0,0 +1,543 @@
+#!/usr/bin/env python
+
+import socket
+import threading
+import xml.etree.ElementTree as ET
+import time
+import logging
+import re
+from collections import defaultdict
+
+
+class INDIClient:
+    """
+    A simple INDI client for connecting to an INDI server and managing device properties.
+    Based on the INDI protocol: https://indilib.org/develop/developer-manual/101-standard-properties.html
+    """
+
+    def __init__(self, host='localhost', port=7624):
+        self.host = host
+        self.port = port
+        self.socket = None
+        self.connected = False
+        self.devices = {}
+        self.properties = defaultdict(dict)
+        self.dirty_properties = defaultdict(set)  # Track changed properties per device
+        self.auto_connect_devices = True
+        self.listeners = []
+        self.receive_thread = None
+        self.running = False
+
+    def connect(self):
+        """Connect to the INDI server"""
+        try:
+            self.socket = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
+            self.socket.settimeout(10)  # 10 second timeout for connection
+            self.socket.connect((self.host, self.port))
+            self.socket.settimeout(None)  # Remove timeout after connection
+            self.connected = True
+            self.running = True
+
+            # Start receive thread
+            self.receive_thread = threading.Thread(target=self._receive_loop)
+            self.receive_thread.daemon = True
+            self.receive_thread.start()
+
+            # Request device list
+            self.send_message('<getProperties version="1.7"/>')
+            logging.info(f"Connected to INDI server at {self.host}:{self.port}")
+
+            # Wait a bit for initial properties to load
+            time.sleep(1)
+            return True
+
+        except Exception as e:
+            logging.error(f"Failed to connect to INDI server: {e}")
+            self.connected = False
+            return False
+
+    def disconnect(self):
+        """Disconnect from the INDI server"""
+        self.running = False
+        if self.socket:
+            try:
+                self.socket.close()
+            except:
+                pass
+        self.connected = False
+        self.socket = None
+        logging.info("Disconnected from INDI server")
+
+    def send_message(self, message):
+        """Send a message to the INDI server"""
+        if not self.connected or not self.socket:
+            return False
+
+        try:
+            self.socket.send(message.encode() + b'\n')
+            return True
+        except Exception as e:
+            logging.error(f"Failed to send message: {e}")
+            return False
+
+    def _receive_loop(self):
+        """Main receive loop for processing INDI messages"""
+        buffer = ""
+
+        while self.running and self.connected:
+            try:
+                data = self.socket.recv(4096).decode()
+                if not data:
+                    break
+
+                buffer += data
+
+                # Process complete XML messages
+                while True:
+                    # Find the start and end of an XML message
+                    start = buffer.find('<')
+                    if start == -1:
+                        break
+
+                    # Find the matching closing tag
+                    tag_end = buffer.find('>', start)
+                    if tag_end == -1:
+                        break
+
+                    tag_name = buffer[start+1:tag_end].split()[0]
+                    if tag_name.endswith('/'):
+                        # Self-closing tag
+                        message = buffer[start:tag_end+1]
+                        buffer = buffer[tag_end+1:]
+                        self._process_message(message)
+                    else:
+                        # Find closing tag
+                        closing_tag = f"</{tag_name}>"
+                        end = buffer.find(closing_tag, tag_end)
+                        if end == -1:
+                            break
+
+                        message = buffer[start:end + len(closing_tag)]
+                        buffer = buffer[end + len(closing_tag):]
+                        self._process_message(message)
+
+            except Exception as e:
+                logging.error(f"Error in receive loop: {e}")
+                break
+
+        self.connected = False
+
+    def _process_message(self, message):
+        """Process an INDI XML message"""
+        try:
+            root = ET.fromstring(message)
+
+            if root.tag == 'defTextVector':
+                self._process_def_property(root, 'text')
+            elif root.tag == 'defNumberVector':
+                self._process_def_property(root, 'number')
+            elif root.tag == 'defSwitchVector':
+                self._process_def_property(root, 'switch')
+            elif root.tag == 'defLightVector':
+                self._process_def_property(root, 'light')
+            elif root.tag == 'defBLOBVector':
+                self._process_def_property(root, 'blob')
+            elif root.tag in ['setTextVector', 'setNumberVector', 'setSwitchVector', 'setLightVector', 'setBLOBVector']:
+                self._process_set_property(root)
+            elif root.tag == 'delProperty':
+                self._process_del_property(root)
+            elif root.tag == 'message':
+                self._process_message_tag(root)
+
+        except ET.ParseError as e:
+            logging.warning(f"Failed to parse XML message: {e}")
+        except Exception as e:
+            logging.error(f"Error processing message: {e}")
+
+    def _process_def_property(self, root, prop_type):
+        """Process a property definition message"""
+        device = root.get('device')
+        name = root.get('name')
+        label = root.get('label', name)
+        group = root.get('group', 'Main')
+        state = root.get('state', 'Idle')
+        perm = root.get('perm', 'rw')
+        rule = root.get('rule') if prop_type == 'switch' else None
+
+        if device not in self.devices:
+            self.devices[device] = {}
+
+        elements = {}
+        for child in root:
+            if child.tag.startswith('def'):
+                elem_name = child.get('name')
+                elem_label = child.get('label', elem_name)
+                elem_value = (child.text or '').strip()
+
+                element = {
+                    'name': elem_name,
+                    'label': elem_label,
+                    'value': elem_value
+                }
+
+                # Add type-specific attributes
+                if prop_type == 'number':
+                    element.update({
+                        'min': child.get('min'),
+                        'max': child.get('max'),
+                        'step': child.get('step'),
+                        'format': child.get('format')
+                    })
+
+                elements[elem_name] = element
+
+        property_data = {
+            'name': name,
+            'label': label,
+            'group': group,
+            'type': prop_type,
+            'state': state.lower(),
+            'perm': perm,
+            'rule': rule,
+            'elements': elements,
+            'device': device
+        }
+
+        # Apply formatting to number properties
+        property_data = self._apply_formatting_to_property(property_data)
+
+        self.properties[device][name] = property_data
+        self.devices[device][name] = property_data
+
+        # Mark property as dirty (new property)
+        self.dirty_properties[device].add(name)
+
+        # Auto-connect device if it has a CONNECTION property
+        if self.auto_connect_devices and name == 'CONNECTION':
+            self._auto_connect_device(device)
+
+        # Notify listeners
+        self._notify_listeners('property_defined', device, property_data)
+
+    def _process_set_property(self, root):
+        """Process a property update message"""
+        device = root.get('device')
+        name = root.get('name')
+        state = root.get('state', 'Idle')
+
+        if device in self.properties and name in self.properties[device]:
+            prop = self.properties[device][name]
+            prop['state'] = state.lower()
+
+            # Update element values
+            for child in root:
+                if child.tag.startswith('one'):
+                    elem_name = child.get('name')
+                    if elem_name in prop['elements']:
+                        prop['elements'][elem_name]['value'] = (child.text or '').strip()
+
+            # Apply formatting to updated property
+            prop = self._apply_formatting_to_property(prop)
+
+            # Mark property as dirty (updated property)
+            self.dirty_properties[device].add(name)
+
+            # Notify listeners
+            self._notify_listeners('property_updated', device, prop)
+
+    def _process_del_property(self, root):
+        """Process a property deletion message"""
+        device = root.get('device')
+        name = root.get('name')
+
+        if device in self.properties:
+            if name:
+                # Delete specific property
+                if name in self.properties[device]:
+                    del self.properties[device][name]
+                    self._notify_listeners('property_deleted', device, {'name': name})
+            else:
+                # Delete all properties for device
+                self.properties[device] = {}
+                if device in self.devices:
+                    del self.devices[device]
+                self._notify_listeners('device_deleted', device, None)
+
+    def _process_message_tag(self, root):
+        """Process a message tag"""
+        device = root.get('device')
+        message = root.text or ''
+        timestamp = root.get('timestamp', str(time.time()))
+
+        self._notify_listeners('message', device, {
+            'message': message,
+            'timestamp': timestamp
+        })
+
+    def _notify_listeners(self, event_type, device, data):
+        """Notify all registered listeners of an event"""
+        for listener in self.listeners:
+            try:
+                listener(event_type, device, data)
+            except Exception as e:
+                logging.error(f"Error in listener callback: {e}")
+
+    def add_listener(self, callback):
+        """Add a listener for INDI events"""
+        self.listeners.append(callback)
+
+    def remove_listener(self, callback):
+        """Remove a listener"""
+        if callback in self.listeners:
+            self.listeners.remove(callback)
+
+    def get_devices(self):
+        """Get list of available devices"""
+        return list(self.devices.keys())
+
+    def get_device_properties(self, device_name):
+        """Get all properties for a specific device"""
+        return self.properties.get(device_name, {})
+
+    def get_property(self, device_name, property_name):
+        """Get a specific property"""
+        device_props = self.properties.get(device_name, {})
+        return device_props.get(property_name)
+
+    def wait_for_device(self, device_name, timeout=5):
+        """Wait for a device to become available"""
+        start_time = time.time()
+        while time.time() - start_time < timeout:
+            if device_name in self.devices:
+                return True
+            time.sleep(0.1)
+        return False
+
+    def set_property(self, device_name, property_name, elements):
+        """Set property values"""
+        prop = self.get_property(device_name, property_name)
+        if not prop:
+            return False
+
+        prop_type = prop['type']
+        message = ""
+
+        if prop_type == 'text':
+            message = f'<newTextVector device="{device_name}" name="{property_name}">'
+            for elem_name, value in elements.items():
+                message += f'<oneText name="{elem_name}">{value}</oneText>'
+            message += '</newTextVector>'
+
+        elif prop_type == 'number':
+            message = f'<newNumberVector device="{device_name}" name="{property_name}">'
+            for elem_name, value in elements.items():
+                message += f'<oneNumber name="{elem_name}">{value}</oneNumber>'
+            message += '</newNumberVector>'
+
+        elif prop_type == 'switch':
+            message = f'<newSwitchVector device="{device_name}" name="{property_name}">'
+            for elem_name, value in elements.items():
+                message += f'<oneSwitch name="{elem_name}">{value}</oneSwitch>'
+            message += '</newSwitchVector>'
+
+        return self.send_message(message)
+
+    def is_connected(self):
+        """Check if connected to INDI server"""
+        return self.connected
+
+    def _auto_connect_device(self, device_name):
+        """Automatically connect a device when it becomes available"""
+        def connect_after_delay():
+            time.sleep(2)  # Wait for device to be fully initialized
+            logging.info(f"Auto-connecting device: {device_name}")
+            connection_prop = self.get_property(device_name, 'CONNECTION')
+            if connection_prop and connection_prop['elements'].get('CONNECT'):
+                # Only connect if not already connected
+                if connection_prop['elements']['CONNECT']['value'] != 'On':
+                    self.set_property(device_name, 'CONNECTION', {'CONNECT': 'On', 'DISCONNECT': 'Off'})
+
+        # Run in separate thread to avoid blocking
+        thread = threading.Thread(target=connect_after_delay)
+        thread.daemon = True
+        thread.start()
+
+    def get_device_structure(self, device_name):
+        """Get the current property structure for a device"""
+        if device_name not in self.properties:
+            return None
+
+        device_props = self.properties[device_name]
+        structure = {}
+
+        # Group properties by group
+        for prop_name, prop_data in device_props.items():
+            group_name = prop_data.get('group', 'Main')
+            if group_name not in structure:
+                structure[group_name] = {}
+            structure[group_name][prop_name] = prop_data
+
+        return structure
+
+    def get_dirty_properties(self, device_name):
+        """Get list of properties that have changed since last check"""
+        dirty_props = list(self.dirty_properties[device_name])
+        # Clear dirty flags after returning them
+        self.dirty_properties[device_name].clear()
+        return dirty_props
+
+    def get_changed_properties(self, device_name, property_names):
+        """Get current values for specified properties"""
+        if device_name not in self.properties:
+            return {}
+
+        result = {}
+        for prop_name in property_names:
+            if prop_name in self.properties[device_name]:
+                result[prop_name] = self.properties[device_name][prop_name]
+
+        return result
+
+    def _format_number_value(self, value, format_str):
+        """Format a number value according to INDI printf-style format"""
+        if not format_str or not value:
+            return value
+
+        try:
+            # Convert value to float for formatting
+            num_value = float(value)
+
+            # Handle INDI-specific %m sexagesimal format
+            if 'm' in format_str and format_str.startswith('%'):
+                return self._format_sexagesimal(num_value, format_str)
+
+            # Handle INDI-specific format patterns
+            elif format_str.startswith('%') and ('d' in format_str or 'i' in format_str):
+                # Integer format
+                return f"{int(num_value)}"
+            elif format_str.startswith('%') and ('f' in format_str or 'e' in format_str or 'E' in format_str or 'g' in format_str or 'G' in format_str):
+                # Float format - use Python's % formatting
+                return format_str % num_value
+            elif ':' in format_str:
+                # Time format (hours:minutes:seconds)
+                if format_str.count(':') == 2:
+                    # HH:MM:SS format
+                    hours = int(num_value)
+                    minutes = int((num_value - hours) * 60)
+                    seconds = ((num_value - hours) * 60 - minutes) * 60
+                    return f"{hours:02d}:{minutes:02d}:{seconds:06.3f}"
+                elif format_str.count(':') == 1:
+                    # MM:SS format
+                    minutes = int(num_value)
+                    seconds = (num_value - minutes) * 60
+                    return f"{minutes:02d}:{seconds:06.3f}"
+            else:
+                # Default float formatting
+                return f"{num_value:.6g}"
+
+        except (ValueError, TypeError):
+            # If formatting fails, return original value
+            return value
+
+    def _format_sexagesimal(self, value, format_str):
+        """Format a number as sexagesimal using INDI %m format specification
+
+        Format: %<w>.<f>m where:
+        - <w> = total field width
+        - <f> = precision specification:
+          - 9 → :mm:ss.ss (HH:MM:SS.ss)
+          - 8 → :mm:ss.s (HH:MM:SS.s)
+          - 6 → :mm:ss (HH:MM:SS)
+          - 5 → :mm.m (HH:MM.m)
+          - 3 → :mm (HH:MM)
+        """
+        try:
+            # Parse format like %10.6m or %9m
+            import re
+            match = re.match(r'%(\d+)(?:\.(\d+))?m', format_str)
+            if not match:
+                return str(value)
+
+            width = int(match.group(1))
+            precision = int(match.group(2)) if match.group(2) else width
+
+            # Handle negative values
+            is_negative = value < 0
+            abs_value = abs(value)
+
+            # Calculate degrees, minutes, seconds
+            degrees = int(abs_value)
+            minutes_float = (abs_value - degrees) * 60
+            minutes = int(minutes_float)
+            seconds = (minutes_float - minutes) * 60
+
+            # Format according to precision specification
+            if precision == 9:
+                # :mm:ss.ss format
+                result = f"{degrees:02d}:{minutes:02d}:{seconds:05.2f}"
+            elif precision == 8:
+                # :mm:ss.s format
+                result = f"{degrees:02d}:{minutes:02d}:{seconds:04.1f}"
+            elif precision == 6:
+                # :mm:ss format
+                result = f"{degrees:02d}:{minutes:02d}:{seconds:02.0f}"
+            elif precision == 5:
+                # :mm.m format
+                minutes_with_decimal = minutes + seconds / 60
+                result = f"{degrees:02d}:{minutes_with_decimal:04.1f}"
+            elif precision == 3:
+                # :mm format
+                minutes_rounded = round(minutes + seconds / 60)
+                result = f"{degrees:02d}:{minutes_rounded:02d}"
+            else:
+                # Default to full precision
+                result = f"{degrees:02d}:{minutes:02d}:{seconds:05.2f}"
+
+            # Add negative sign if needed
+            if is_negative:
+                result = '-' + result
+
+            return result
+
+        except (ValueError, TypeError, AttributeError):
+            # If formatting fails, return original value
+            return str(value)
+
+    def _apply_formatting_to_property(self, prop_data):
+        """Apply formatting to number property elements"""
+        if prop_data['type'] == 'number':
+            for elem_name, element in prop_data['elements'].items():
+                if 'format' in element and element['format']:
+                    formatted_value = self._format_number_value(element['value'], element['format'])
+                    element['formatted_value'] = formatted_value
+                else:
+                    element['formatted_value'] = element['value']
+        return prop_data
+
+
+# Global INDI client instance
+indi_client = None
+
+
+def get_indi_client():
+    """Get the global INDI client instance"""
+    global indi_client
+    if indi_client is None:
+        indi_client = INDIClient()
+    return indi_client
+
+
+def start_indi_client(host='localhost', port=7624):
+    """Start the INDI client connection"""
+    client = get_indi_client()
+    if not client.is_connected():
+        return client.connect()
+    return True
+
+
+def stop_indi_client():
+    """Stop the INDI client connection"""
+    global indi_client
+    if indi_client:
+        indi_client.disconnect()
+        indi_client = None
\ No newline at end of file
diff --git a/indiweb/main.py b/indiweb/main.py
index 05493f3..0249f39 100644
--- a/indiweb/main.py
+++ b/indiweb/main.py
@@ -20,6 +20,7 @@
 from .driver import DeviceDriver, DriverCollection, INDI_DATA_DIR
 from .database import Database
 from .device import Device
+from .indi_client import get_indi_client, start_indi_client, stop_indi_client
 
 # default settings
 WEB_HOST = '0.0.0.0'
@@ -90,7 +91,6 @@
 
 # Serve static files
 app.mount("/static", StaticFiles(directory=views_path), name="static")
-app.mount("/favicon.ico", StaticFiles(directory=views_path), name="favicon.ico")
 
 
 saved_profile = None
@@ -377,6 +377,17 @@ async def start_server(profile: str, response: Response):
     active_profile = profile
     response.set_cookie(key="indiserver_profile", value=profile, max_age=3600000, path='/')
     start_profile(profile)
+
+    # Start INDI client connection after a short delay
+    import asyncio
+    async def start_client():
+        await asyncio.sleep(3)  # Wait for server to start
+        profile_info = db.get_profile(profile)
+        port = profile_info.get('port', 7624) if profile_info else 7624
+        start_indi_client('localhost', port)
+
+    asyncio.create_task(start_client())
+
     return {"message": f"INDI server started for profile {profile}"}
 
 
@@ -386,6 +397,7 @@ async def stop_server():
     Stops the INDI server.
     """
     indi_server.stop()
+    stop_indi_client()  # Also stop the INDI client
 
     global active_profile
     active_profile = ""
@@ -560,7 +572,180 @@ async def get_devices():
     Returns:
         str: A JSON string representing the connected devices.
     """
-    return JSONResponse(content=indi_device.get_devices())
+    # Try INDI client first, fallback to old method
+    client = get_indi_client()
+    if client.is_connected():
+        devices = client.get_devices()
+        return JSONResponse(content=devices)
+    else:
+        return JSONResponse(content=indi_device.get_devices())
+
+
+@app.get('/device/{device_name}', response_class=HTMLResponse, tags=["Web Interface"])
+async def device_control_panel(request: Request, device_name: str):
+    """
+    Renders the device control panel page.
+
+    Args:
+        device_name (str): The name of the device to control.
+
+    Returns:
+        str: The rendered HTML template.
+    """
+    try:
+        logging.info(f"Loading device control panel for: {device_name}")
+
+        # Check if template file exists
+        import os
+        template_path = os.path.join(views_path, "device_control.tpl")
+        if not os.path.exists(template_path):
+            raise HTTPException(status_code=500, detail=f"Template not found: {template_path}")
+
+        return templates.TemplateResponse(
+            "device_control.tpl",
+            {"request": request, "device_name": device_name}
+        )
+    except Exception as e:
+        logging.error(f"Error loading device control panel for {device_name}: {e}")
+        raise HTTPException(status_code=500, detail=f"Error loading device control panel: {str(e)}")
+
+
+@app.get('/api/devices/{device_name}/structure', tags=["Devices"])
+async def get_device_structure(device_name: str):
+    """
+    Gets the property structure for a specific device.
+
+    Args:
+        device_name (str): The name of the device.
+
+    Returns:
+        dict: A dictionary containing the device property structure grouped by property groups.
+    """
+    client = get_indi_client()
+    if not client.is_connected():
+        # Try to connect to INDI server
+        if indi_server.is_running():
+            port = 7624  # Default INDI port
+            profiles = db.get_profiles()
+            for profile in profiles:
+                if profile.get('name') == active_profile:
+                    port = profile.get('port', 7624)
+                    break
+
+            if not start_indi_client('localhost', port):
+                raise HTTPException(status_code=503, detail="Cannot connect to INDI server")
+        else:
+            raise HTTPException(status_code=503, detail="INDI server is not running")
+
+    # Wait for device to be available
+    if not client.wait_for_device(device_name, timeout=3):
+        raise HTTPException(status_code=404, detail=f"Device '{device_name}' not found or not available")
+
+    structure = client.get_device_structure(device_name)
+    if not structure:
+        raise HTTPException(status_code=404, detail="Device found but no properties available yet. Try refreshing.")
+
+    return JSONResponse(content=structure)
+
+
+@app.get('/api/devices/{device_name}/dirty', tags=["Devices"])
+async def get_dirty_properties(device_name: str):
+    """
+    Gets list of properties that have changed since last check.
+
+    Args:
+        device_name (str): The name of the device.
+
+    Returns:
+        list: A list of property names that have changed.
+    """
+    client = get_indi_client()
+    if not client.is_connected():
+        raise HTTPException(status_code=503, detail="INDI client not connected")
+
+    dirty_props = client.get_dirty_properties(device_name)
+    return JSONResponse(content=dirty_props)
+
+
+@app.post('/api/devices/{device_name}/properties/batch', tags=["Devices"])
+async def get_changed_properties(device_name: str, request: Request):
+    """
+    Gets current values for specified properties.
+
+    Args:
+        device_name (str): The name of the device.
+        request: The request containing the list of property names.
+
+    Returns:
+        dict: Current values for the specified properties.
+    """
+    client = get_indi_client()
+    if not client.is_connected():
+        raise HTTPException(status_code=503, detail="INDI client not connected")
+
+    data = await request.json()
+    property_names = data.get('properties', [])
+
+    if not property_names:
+        raise HTTPException(status_code=400, detail="No property names provided")
+
+    properties = client.get_changed_properties(device_name, property_names)
+    return JSONResponse(content=properties)
+
+
+@app.get('/api/devices/{device_name}/groups', tags=["Devices"])
+async def get_device_groups(device_name: str):
+    """
+    Gets property groups for a specific device.
+
+    Args:
+        device_name (str): The name of the device.
+
+    Returns:
+        dict: A dictionary containing device property groups.
+    """
+    client = get_indi_client()
+    if not client.is_connected():
+        raise HTTPException(status_code=503, detail="INDI client not connected")
+
+    properties = client.get_device_properties(device_name)
+    if not properties:
+        raise HTTPException(status_code=404, detail="Device not found")
+
+    # Group properties by group name
+    groups = {}
+    for prop_name, prop_data in properties.items():
+        group_name = prop_data.get('group', 'Main')
+        if group_name not in groups:
+            groups[group_name] = []
+        groups[group_name].append(prop_name)
+
+    return JSONResponse(content=groups)
+
+
+@app.get('/api/devices/{device_name}/properties/{property_name}', tags=["Devices"])
+async def get_device_property(device_name: str, property_name: str):
+    """
+    Gets a specific property for a device.
+
+    Args:
+        device_name (str): The name of the device.
+        property_name (str): The name of the property.
+
+    Returns:
+        dict: The property data.
+    """
+    client = get_indi_client()
+    if not client.is_connected():
+        raise HTTPException(status_code=503, detail="INDI client not connected")
+
+    property_data = client.get_property(device_name, property_name)
+    if not property_data:
+        raise HTTPException(status_code=404, detail="Property not found")
+
+    return JSONResponse(content=property_data)
+
+
 
 ###############################################################################
 # System control endpoints
diff --git a/indiweb/views/css/device_control.css b/indiweb/views/css/device_control.css
new file mode 100644
index 0000000..9f6b82d
--- /dev/null
+++ b/indiweb/views/css/device_control.css
@@ -0,0 +1,673 @@
+/* Device Control Panel CSS */
+
+.property-group {
+  margin-bottom: 20px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  padding: 15px;
+  background-color: #fafafa;
+}
+
+.property-group h4 {
+  margin-top: 0;
+  color: #555;
+  border-bottom: 1px solid #ddd;
+  padding-bottom: 5px;
+}
+
+.property-item {
+  margin-bottom: 15px;
+  padding: 12px;
+  border: 1px solid #e7e7e7;
+  border-radius: 3px;
+  background-color: white;
+}
+
+.property-header {
+  display: flex;
+  align-items: center;
+  margin-bottom: 10px;
+}
+
+.property-label {
+  font-weight: bold;
+  margin-right: 10px;
+  min-width: 150px;
+  color: #333;
+}
+
+.property-state {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  display: inline-block;
+  margin-right: 8px;
+  border: 1px solid #ccc;
+}
+
+.state-idle {
+  background-color: #d9d9d9;
+}
+
+.state-ok {
+  background-color: #5cb85c;
+}
+
+.state-busy {
+  background-color: #f0ad4e;
+}
+
+.state-alert {
+  background-color: #d9534f;
+}
+
+.property-elements {
+  margin-left: 20px;
+}
+
+.element-row {
+  display: flex;
+  align-items: center;
+  margin-bottom: 8px;
+  padding: 5px 0;
+}
+
+.element-label {
+  min-width: 140px;
+  margin-right: 10px;
+  font-weight: normal;
+  color: #666;
+}
+
+.element-input {
+  margin-right: 10px;
+  max-width: 200px;
+}
+
+.property-buttons {
+  margin-top: 12px;
+  padding-top: 8px;
+  border-top: 1px solid #eee;
+}
+
+.switch-group {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 15px;
+  margin: 5px 0;
+}
+
+.switch-group label {
+  margin-bottom: 0;
+  cursor: pointer;
+}
+
+.light-indicator {
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  display: inline-block;
+  margin-right: 8px;
+  border: 2px solid #ccc;
+  vertical-align: middle;
+}
+
+.connection-controls {
+  margin-bottom: 25px;
+  padding: 20px;
+  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+  border-radius: 6px;
+  border: 1px solid #ddd;
+}
+
+.connection-controls .form-group {
+  margin-bottom: 0;
+}
+
+.connection-status-connected {
+  background-color: #5cb85c !important;
+  color: white;
+}
+
+.connection-status-disconnected {
+  background-color: #d9534f !important;
+  color: white;
+}
+
+.connection-status-busy {
+  background-color: #f0ad4e !important;
+  color: white;
+}
+
+.device-messages {
+  height: 200px;
+  overflow-y: auto;
+  background-color: #f8f8f8;
+  padding: 12px;
+  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+  font-size: 12px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+}
+
+.message-timestamp {
+  color: #999;
+  margin-right: 8px;
+}
+
+.message-device {
+  color: #0066cc;
+  font-weight: bold;
+  margin-right: 8px;
+}
+
+.message-text {
+  color: #333;
+}
+
+.message-entry {
+  padding: 2px 0;
+  border-bottom: 1px solid #eee;
+}
+
+.message-entry:last-child {
+  border-bottom: none;
+}
+
+.message-info {
+  background-color: #f8f9fa;
+}
+
+.message-success {
+  background-color: #d4edda;
+  color: #155724;
+}
+
+.message-warning {
+  background-color: #fff3cd;
+  color: #856404;
+}
+
+.message-error {
+  background-color: #f8d7da;
+  color: #721c24;
+}
+
+.message-source {
+  color: #0066cc;
+  font-weight: bold;
+  margin-right: 8px;
+}
+
+.nav-tabs {
+  border-bottom: 2px solid #ddd;
+  margin-bottom: 0;
+}
+
+.nav-tabs > li > a {
+  border-radius: 4px 4px 0 0;
+  color: #555;
+}
+
+.nav-tabs > li.active > a {
+  background-color: #fff;
+  border-color: #ddd #ddd transparent;
+  border-width: 2px 1px 1px 1px;
+  color: #333;
+  font-weight: bold;
+}
+
+.tab-content {
+  padding: 20px 0;
+  background-color: white;
+  border-left: 1px solid #ddd;
+  border-right: 1px solid #ddd;
+  border-bottom: 1px solid #ddd;
+  border-radius: 0 0 4px 4px;
+  min-height: 400px;
+}
+
+.property-readonly {
+  background-color: #f9f9f9;
+  border-left: 4px solid #ccc;
+}
+
+.property-writeonly {
+  border-left: 4px solid #428bca;
+}
+
+.property-readwrite {
+  border-left: 4px solid #5cb85c;
+}
+
+.btn-property {
+  font-size: 12px;
+  padding: 4px 12px;
+}
+
+/* Read-only property styling */
+.element-value {
+  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+  background-color: #f8f9fa;
+  padding: 2px 6px;
+  border-radius: 3px;
+  border: 1px solid #e9ecef;
+  display: inline-block;
+  min-width: 60px;
+}
+
+.switch-element {
+  margin-right: 15px;
+  padding: 3px 8px;
+  border-radius: 4px;
+  display: inline-block;
+}
+
+.switch-on {
+  background-color: #d4edda;
+  border: 1px solid #c3e6cb;
+  color: #155724;
+}
+
+.switch-off {
+  background-color: #f8d7da;
+  border: 1px solid #f5c6cb;
+  color: #721c24;
+}
+
+/* Switch rule type styles */
+.switch-rule-info {
+  margin-bottom: 8px;
+  font-style: italic;
+}
+
+/* Radio button style switches (OneOfMany, AtMostOne) */
+.switch-radio-group {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.switch-radio-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 4px 8px;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+.switch-radio-item:hover {
+  background-color: #f8f9fa;
+}
+
+.switch-radio {
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  border: 2px solid #007bff;
+  display: inline-block;
+  margin-right: 8px;
+  position: relative;
+  vertical-align: middle;
+}
+
+.switch-radio.radio-selected::before {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background-color: #007bff;
+}
+
+.switch-radio.radio-unselected {
+  background-color: transparent;
+}
+
+/* Checkbox style switches (AnyOfMany) */
+.switch-checkbox-group {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.switch-checkbox-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 4px 8px;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+.switch-checkbox-item:hover {
+  background-color: #f8f9fa;
+}
+
+.switch-checkbox {
+  width: 16px;
+  height: 16px;
+  border: 2px solid #007bff;
+  border-radius: 3px;
+  display: inline-block;
+  margin-right: 8px;
+  position: relative;
+  vertical-align: middle;
+}
+
+.switch-checkbox.checkbox-checked {
+  background-color: #007bff;
+}
+
+.switch-checkbox.checkbox-checked::before {
+  content: '✓';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  color: white;
+  font-size: 12px;
+  font-weight: bold;
+  line-height: 1;
+}
+
+.switch-checkbox.checkbox-unchecked {
+  background-color: transparent;
+}
+
+/* Optional button groups (AtMostOne) styling */
+.switch-optional .switch-button.button-active {
+  background-color: #6c757d;
+  border-color: #545b62;
+}
+
+.switch-optional .switch-button.button-active:hover {
+  background-color: #545b62;
+}
+
+/* Switch status indicators */
+.switch-status {
+  margin-left: auto;
+  font-size: 12px;
+  font-weight: bold;
+  padding: 2px 6px;
+  border-radius: 3px;
+  min-width: 30px;
+  text-align: center;
+}
+
+.switch-status.status-on {
+  background-color: #d4edda;
+  color: #155724;
+  border: 1px solid #c3e6cb;
+}
+
+.switch-status.status-off {
+  background-color: #f8d7da;
+  color: #721c24;
+  border: 1px solid #f5c6cb;
+}
+
+/* Switch control grouping */
+.switch-control {
+  display: flex;
+  align-items: center;
+  flex: 1;
+}
+
+.switch-control .element-label {
+  margin-left: 0;
+  margin-right: 8px;
+}
+
+/* Button group style switches (OneOfMany) */
+.switch-button-group {
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: 0;
+  margin: 5px 0;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.switch-button {
+  padding: 8px 16px;
+  border: none;
+  border-right: 1px solid #ddd;
+  background-color: #ffffff;
+  color: #495057;
+  font-size: 14px;
+  font-weight: normal;
+  transition: all 0.2s ease;
+  cursor: pointer;
+  white-space: nowrap;
+  min-width: auto;
+}
+
+.switch-button:hover {
+  background-color: #e9ecef;
+}
+
+.switch-button.button-active {
+  background-color: #28a745;
+  color: white;
+  font-weight: bold;
+  border: 1px solid #1e7e34;
+  box-shadow: inset 0 1px 3px rgba(0,0,0,0.2);
+  transform: translateY(1px);
+}
+
+.switch-button.button-active:hover {
+  background-color: #218838;
+}
+
+.switch-button.button-inactive {
+  background-color: #f8f9fa;
+  color: #495057;
+  border: 1px solid #dee2e6;
+  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
+  transform: translateY(0px);
+}
+
+.switch-button:first-child {
+  border-top-left-radius: 3px;
+  border-bottom-left-radius: 3px;
+}
+
+.switch-button:last-child {
+  border-top-right-radius: 3px;
+  border-bottom-right-radius: 3px;
+  border-right: none;
+}
+
+
+/* Rule type specific styling */
+
+
+
+/* Enhanced visual feedback */
+.switch-radio-item.selected,
+.switch-checkbox-item.selected {
+  background-color: #e7f3ff;
+  border: 1px solid #b3d9ff;
+}
+
+/* Disabled state for read-only properties */
+.property-readonly .switch-radio,
+.property-readonly .switch-checkbox,
+.property-readonly .switch-button {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.property-readonly .switch-radio-item,
+.property-readonly .switch-checkbox-item {
+  cursor: not-allowed;
+}
+
+.property-readonly .switch-radio-item:hover,
+.property-readonly .switch-checkbox-item:hover {
+  background-color: transparent;
+}
+
+.property-readonly .switch-button:hover {
+  background-color: inherit !important;
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+  .element-row {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .element-label {
+    min-width: auto;
+    margin-bottom: 5px;
+  }
+
+  .element-input {
+    max-width: 100%;
+    width: 100%;
+  }
+
+  .switch-group {
+    flex-direction: column;
+    gap: 5px;
+  }
+
+  .switch-radio-group,
+  .switch-checkbox-group {
+    gap: 6px;
+  }
+
+  .switch-radio-item,
+  .switch-checkbox-item {
+    padding: 6px 8px;
+  }
+
+  .switch-button-group {
+    flex-direction: column;
+    display: flex;
+    align-items: flex-start;
+    width: auto;
+  }
+
+  .switch-button {
+    border-radius: 0 !important;
+    border-right: none !important;
+    border-bottom: 1px solid #ddd;
+    text-align: left;
+    width: auto;
+    min-width: 120px;
+  }
+
+  .switch-button:first-child {
+    border-top-left-radius: 3px !important;
+    border-top-right-radius: 3px !important;
+  }
+
+  .switch-button:last-child {
+    border-bottom-left-radius: 3px !important;
+    border-bottom-right-radius: 3px !important;
+    border-bottom: none !important;
+  }
+
+  .property-header {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .property-label {
+    min-width: auto;
+    margin-bottom: 5px;
+  }
+}
+
+/* Loading animation */
+.loading {
+  opacity: 0.6;
+  pointer-events: none;
+}
+
+.spinner {
+  border: 2px solid #f3f3f3;
+  border-top: 2px solid #3498db;
+  border-radius: 50%;
+  width: 16px;
+  height: 16px;
+  animation: spin 1s linear infinite;
+  display: inline-block;
+  margin-right: 5px;
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+/* Property type indicators */
+.property-type-text::before {
+  content: "T";
+  background-color: #5bc0de;
+  color: white;
+  border-radius: 50%;
+  width: 20px;
+  height: 20px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 12px;
+  font-weight: bold;
+  margin-right: 8px;
+}
+
+.property-type-number::before {
+  content: "#";
+  background-color: #f0ad4e;
+  color: white;
+  border-radius: 50%;
+  width: 20px;
+  height: 20px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 12px;
+  font-weight: bold;
+  margin-right: 8px;
+}
+
+.property-type-switch::before {
+  content: "S";
+  background-color: #5cb85c;
+  color: white;
+  border-radius: 50%;
+  width: 20px;
+  height: 20px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 12px;
+  font-weight: bold;
+  margin-right: 8px;
+}
+
+.property-type-light::before {
+  content: "L";
+  background-color: #d9534f;
+  color: white;
+  border-radius: 50%;
+  width: 20px;
+  height: 20px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 12px;
+  font-weight: bold;
+  margin-right: 8px;
+}
\ No newline at end of file
diff --git a/indiweb/views/device_control.tpl b/indiweb/views/device_control.tpl
new file mode 100644
index 0000000..de5cdcb
--- /dev/null
+++ b/indiweb/views/device_control.tpl
@@ -0,0 +1,519 @@
+<!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">
+  <title>{{device_name}} - INDI Control Panel</title>
+  <link rel="stylesheet" type="text/css" href="/static/css/bootstrap.min.css">
+  <link rel="stylesheet" type="text/css" href="/static/css/jquery-ui.min.css">
+  <link rel="stylesheet" type="text/css" href="/static/css/schoolhouse.css">
+  <link rel="stylesheet" type="text/css" href="/static/css/device_control.css">
+</head>
+<body>
+  <div class="container-fluid">
+    <div class="row">
+      <div class="col-md-12">
+        <h3>{{device_name}} Control Panel</h3>
+
+        <!-- Device Status -->
+        <div class="connection-controls">
+          <div class="row">
+            <div class="col-md-12">
+              <div class="form-group">
+                <label>Device Status:</label>
+                <span id="device_status" class="label label-info">Loading...</span>
+                <small class="text-muted" style="margin-left: 10px;">Properties update automatically</small>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Property Groups Tabs -->
+        <ul class="nav nav-tabs" id="property-tabs" role="tablist">
+          <!-- Tabs will be populated dynamically -->
+        </ul>
+
+        <!-- Tab Content -->
+        <div class="tab-content" id="property-tab-content">
+          <!-- Tab content will be populated dynamically -->
+        </div>
+
+        <!-- Log Messages -->
+        <div class="row">
+          <div class="col-md-12">
+            <div class="panel panel-default">
+              <div class="panel-heading">
+                <h4 class="panel-title">Device Messages</h4>
+              </div>
+              <div class="panel-body">
+                <div id="device_messages" class="device-messages">
+                  <p class="text-muted">No messages yet...</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <script src="/static/js/jquery.min.js"></script>
+  <script src="/static/js/bootstrap.min.js"></script>
+  <script src="/static/js/jquery-ui.min.js"></script>
+  <script>
+    var deviceName = "{{device_name}}";
+    var deviceStructure = {};
+    var lastUpdateTime = Date.now();
+    var messageLog = [];
+    var maxMessages = 100;
+
+    $(document).ready(function() {
+      loadDeviceStructure();
+
+      // Start polling for changes every 2 seconds
+      setInterval(checkForUpdates, 2000);
+
+      // Initialize message log
+      addMessage("info", "Device control panel loaded", "System");
+    });
+
+    function loadDeviceStructure() {
+      $("#device_status").removeClass("label-success label-warning label-danger")
+                        .addClass("label-info")
+                        .text("Loading...");
+
+      $.getJSON("/api/devices/" + encodeURIComponent(deviceName) + "/structure", function(data) {
+        console.log('Loaded device structure:', data);
+        deviceStructure = data;
+        buildPropertyDisplay();
+
+        $("#device_status").removeClass("label-info label-danger")
+                          .addClass("label-success")
+                          .text("Connected - Auto-updating");
+        addMessage("success", "Device structure loaded successfully", "System");
+      }).fail(function(xhr, status, error) {
+        console.error('Failed to load device structure:', error);
+        $("#property-tab-content").html('<div class="alert alert-danger">Failed to load device structure. Make sure the device is connected and the INDI server is running.<br>Error: ' + (xhr.responseJSON?.detail || error) + '</div>');
+
+        $("#device_status").removeClass("label-info label-success")
+                          .addClass("label-danger")
+                          .text("Error");
+        addMessage("error", "Failed to load device structure: " + (xhr.responseJSON?.detail || error), "System");
+      });
+    }
+
+    function checkForUpdates() {
+      $.getJSON("/api/devices/" + encodeURIComponent(deviceName) + "/dirty", function(dirtyProps) {
+        if (dirtyProps && dirtyProps.length > 0) {
+          console.log('Dirty properties:', dirtyProps);
+          fetchUpdatedProperties(dirtyProps);
+        }
+      }).fail(function(xhr, status, error) {
+        console.error('Failed to check for updates:', error);
+        addMessage("warning", "Connection check failed: " + error, "System");
+
+        // If we get a 503 (service unavailable), try to reload the structure
+        if (xhr.status === 503) {
+          $("#device_status").removeClass("label-success")
+                            .addClass("label-warning")
+                            .text("Reconnecting...");
+          addMessage("warning", "Device connection lost, attempting to reconnect...", "System");
+          setTimeout(loadDeviceStructure, 5000);
+        }
+      });
+    }
+
+    function fetchUpdatedProperties(propertyNames) {
+      $.ajax({
+        type: 'POST',
+        url: '/api/devices/' + encodeURIComponent(deviceName) + '/properties/batch',
+        data: JSON.stringify({ properties: propertyNames }),
+        contentType: 'application/json',
+        success: function(updatedProps) {
+          console.log('Updated properties:', updatedProps);
+          updateProperties(updatedProps);
+          addMessage("info", "Updated " + Object.keys(updatedProps).length + " properties", "System");
+        },
+        error: function(xhr, status, error) {
+          console.error('Failed to fetch updated properties:', error);
+          addMessage("error", "Failed to fetch property updates: " + error, "System");
+        }
+      });
+    }
+
+    function buildPropertyDisplay() {
+      // Remember currently active tab
+      var activeTabId = $("#property-tabs .active a").attr("href");
+      var activeGroupName = null;
+      if (activeTabId) {
+        var tabId = activeTabId.substring(1); // Remove #
+        activeGroupName = tabId.replace("tab-", "").replace(/-/g, " ");
+      }
+
+      // Create tabs for each group
+      var tabsHtml = "";
+      var contentHtml = "";
+      var isFirst = true;
+      var foundActiveTab = false;
+
+      for (var groupName in deviceStructure) {
+        var tabId = "tab-" + groupName.replace(/[^a-zA-Z0-9]/g, '-');
+        var isActive = (activeGroupName === groupName) || (!foundActiveTab && isFirst);
+
+        if (isActive) {
+          foundActiveTab = true;
+        }
+
+        tabsHtml += '<li role="presentation"' + (isActive ? ' class="active"' : '') + '>' +
+                   '<a href="#' + tabId + '" role="tab" data-toggle="tab">' + groupName + '</a></li>';
+
+        contentHtml += '<div role="tabpanel" class="tab-pane' + (isActive ? ' active' : '') + '" id="' + tabId + '">';
+        contentHtml += generateGroupContent(deviceStructure[groupName]);
+        contentHtml += '</div>';
+
+        isFirst = false;
+      }
+
+      $("#property-tabs").html(tabsHtml);
+      $("#property-tab-content").html(contentHtml);
+    }
+
+    function updateProperties(updatedProps) {
+      // Update the device structure with new property values
+      for (var propName in updatedProps) {
+        var updatedProp = updatedProps[propName];
+        var groupName = updatedProp.group || "Main";
+
+        if (deviceStructure[groupName] && deviceStructure[groupName][propName]) {
+          var oldProp = deviceStructure[groupName][propName];
+
+          // Log property changes for each element
+          for (var elemName in updatedProp.elements) {
+            var newElement = updatedProp.elements[elemName];
+            var oldElement = oldProp.elements[elemName];
+
+            var newValue = newElement.value;
+            var oldValue = oldElement ? oldElement.value : null;
+
+            if (oldValue !== newValue) {
+              // For number properties, show formatted value in log if available
+              var displayNewValue = newValue;
+              var displayOldValue = oldValue;
+
+              if (updatedProp.type === 'number') {
+                displayNewValue = newElement.formatted_value || newValue;
+                displayOldValue = (oldElement && oldElement.formatted_value) || oldValue;
+              }
+
+              logPropertyUpdate(propName, displayOldValue, displayNewValue, elemName);
+            }
+          }
+
+          // Log state changes
+          if (oldProp.state !== updatedProp.state) {
+            addMessage("info", 'Property "' + propName + '" state changed: ' +
+                      (oldProp.state || 'unknown') + ' → ' + updatedProp.state, deviceName);
+          }
+
+          // Update the property in our structure
+          deviceStructure[groupName][propName] = updatedProp;
+
+          // Update the UI elements for this property
+          updatePropertyUI(propName, updatedProp);
+        }
+      }
+    }
+
+    function updatePropertyUI(propName, prop) {
+      // Update individual property elements in the UI without rebuilding entire structure
+      for (var elemName in prop.elements) {
+        var element = prop.elements[elemName];
+        var elemSelector = '[data-property="' + propName + '"][data-element="' + elemName + '"]';
+
+        if (prop.type === 'text') {
+          $(elemSelector).text(element.value || '');
+        } else if (prop.type === 'number') {
+          // Use formatted_value if available, otherwise fall back to value
+          $(elemSelector).text(element.formatted_value || element.value || '');
+        } else if (prop.type === 'switch') {
+          // Update switch elements based on rule type
+          var rule = prop.rule || 'OneOfMany';
+          var isOn = element.value === 'On' || element.value === 'ON';
+
+          if (rule === 'OneOfMany' || rule === 'AtMostOne') {
+            // Update button group style
+            var buttonSelector = '.switch-button[data-property="' + propName + '"][data-element="' + elemName + '"]';
+            $(buttonSelector).removeClass('button-active button-inactive')
+                           .addClass(isOn ? 'button-active' : 'button-inactive');
+          } else if (rule === 'AnyOfMany') {
+            // Update checkbox style
+            var checkboxSelector = '.switch-checkbox[data-property="' + propName + '"][data-element="' + elemName + '"]';
+            $(checkboxSelector).removeClass('checkbox-checked checkbox-unchecked')
+                              .addClass(isOn ? 'checkbox-checked' : 'checkbox-unchecked');
+
+            // Update status text
+            var statusSelector = '.switch-status[data-property="' + propName + '"][data-element="' + elemName + '"]';
+            $(statusSelector).removeClass('status-on status-off')
+                            .addClass(isOn ? 'status-on' : 'status-off')
+                            .text(element.value || 'Off');
+          } else {
+            // Fallback to original text update
+            $(elemSelector).text(element.value || 'Off');
+          }
+        } else if (prop.type === 'light') {
+          var lightSelector = '.light-indicator[data-property="' + propName + '"][data-element="' + elemName + '"]';
+          $(lightSelector).removeClass('state-idle state-ok state-busy state-alert')
+                         .addClass('state-' + (element.value || 'idle').toLowerCase());
+        }
+      }
+
+      // Update property state indicator
+      var stateSelector = '.property-state[data-property="' + propName + '"]';
+      $(stateSelector).removeClass('state-idle state-ok state-busy state-alert')
+                     .addClass('state-' + (prop.state || 'idle'));
+    }
+
+    function generateGroupContent(groupProperties) {
+      var html = "";
+
+      for (var propName in groupProperties) {
+        var prop = groupProperties[propName];
+        html += '<div class="property-item" id="prop-' + prop.name + '">';
+        html += generatePropertyContent(prop);
+        html += '</div>';
+      }
+
+      return html;
+    }
+
+    function generatePropertyContent(prop) {
+      var html = '<div class="property-header">';
+      html += '<span class="property-state state-' + (prop.state || 'idle') + '" data-property="' + prop.name + '"></span>';
+      html += '<span class="property-label">' + (prop.label || prop.name) + '</span>';
+
+      // Show type and rule information
+      var typeInfo = prop.type;
+      if (prop.type === 'switch' && prop.rule) {
+        typeInfo += ' (' + prop.rule + ')';
+      }
+      html += '<small class="text-muted">(' + prop.name + ') - ' + typeInfo + '</small>';
+      html += '</div>';
+
+      if (prop.type === 'text') {
+        html += generateTextProperty(prop);
+      } else if (prop.type === 'number') {
+        html += generateNumberProperty(prop);
+      } else if (prop.type === 'switch') {
+        html += generateSwitchProperty(prop);
+      } else if (prop.type === 'light') {
+        html += generateLightProperty(prop);
+      }
+
+      return html;
+    }
+
+    function generateTextProperty(prop) {
+      var html = '<div class="property-elements">';
+      for (var elemName in prop.elements) {
+        var elem = prop.elements[elemName];
+        html += '<div class="element-row">';
+        html += '<span class="element-label">' + (elem.label || elemName) + ':</span>';
+        html += '<span class="element-value" data-property="' + prop.name + '" data-element="' + elemName + '">';
+        html += (elem.value || '(empty)');
+        html += '</span>';
+        html += '</div>';
+      }
+      html += '</div>';
+      return html;
+    }
+
+    function generateNumberProperty(prop) {
+      var html = '<div class="property-elements">';
+      for (var elemName in prop.elements) {
+        var elem = prop.elements[elemName];
+        html += '<div class="element-row">';
+        html += '<span class="element-label">' + (elem.label || elemName) + ':</span>';
+        html += '<span class="element-value" data-property="' + prop.name + '" data-element="' + elemName + '">';
+        // Use formatted_value if available, otherwise fall back to value
+        html += (elem.formatted_value || elem.value || '0');
+        html += '</span>';
+        if (elem.format) {
+          html += '<span class="text-muted"> (' + elem.format + ')</span>';
+        }
+        if (elem.min !== undefined && elem.max !== undefined) {
+          html += '<small class="text-muted"> [' + elem.min + ' - ' + elem.max + ']</small>';
+        }
+        html += '</div>';
+      }
+      html += '</div>';
+      return html;
+    }
+
+    function generateSwitchProperty(prop) {
+      var html = '<div class="property-elements">';
+      var rule = prop.rule || 'OneOfMany'; // Default to OneOfMany if not specified
+
+
+      if (rule === 'OneOfMany') {
+        // Button group style - only one button can be active
+        html += '<div class="switch-group switch-button-group">';
+        for (var elemName in prop.elements) {
+          var elem = prop.elements[elemName];
+          var isOn = elem.value === 'On' || elem.value === 'ON';
+          console.log('Switch element:', elemName, 'value:', elem.value, 'type:', typeof elem.value, 'isOn:', isOn, 'rule:', rule);
+          html += '<button type="button" class="switch-button ' + (isOn ? 'button-active' : 'button-inactive') + '" ';
+          html += 'data-property="' + prop.name + '" data-element="' + elemName + '">';
+          html += (elem.label || elemName);
+          html += '</button>';
+        }
+        html += '</div>';
+      } else if (rule === 'AtMostOne') {
+        // Button group style - at most one button can be active
+        html += '<div class="switch-group switch-button-group switch-optional">';
+        for (var elemName in prop.elements) {
+          var elem = prop.elements[elemName];
+          var isOn = elem.value === 'On' || elem.value === 'ON';
+          console.log('Switch element:', elemName, 'value:', elem.value, 'type:', typeof elem.value, 'isOn:', isOn, 'rule:', rule);
+          html += '<button type="button" class="switch-button ' + (isOn ? 'button-active' : 'button-inactive') + '" ';
+          html += 'data-property="' + prop.name + '" data-element="' + elemName + '">';
+          html += (elem.label || elemName);
+          html += '</button>';
+        }
+        html += '</div>';
+      } else if (rule === 'AnyOfMany') {
+        // Checkbox style - multiple can be selected
+        html += '<div class="switch-group switch-checkbox-group">';
+        for (var elemName in prop.elements) {
+          var elem = prop.elements[elemName];
+          var isOn = elem.value === 'On' || elem.value === 'ON';
+          html += '<div class="switch-checkbox-item">';
+          html += '<div class="switch-control">';
+          html += '<span class="switch-checkbox ' + (isOn ? 'checkbox-checked' : 'checkbox-unchecked') + '" ';
+          html += 'data-property="' + prop.name + '" data-element="' + elemName + '"></span>';
+          html += '<span class="element-label">' + (elem.label || elemName) + '</span>';
+          html += '</div>';
+          html += '<span class="switch-status ' + (isOn ? 'status-on' : 'status-off') + '" ';
+          html += 'data-property="' + prop.name + '" data-element="' + elemName + '">';
+          html += (elem.value || 'Off');
+          html += '</span>';
+          html += '</div>';
+        }
+        html += '</div>';
+      } else {
+        // Fallback to original style for unknown rules
+        html += '<div class="switch-group">';
+        for (var elemName in prop.elements) {
+          var elem = prop.elements[elemName];
+          var isOn = elem.value === 'On' || elem.value === 'ON';
+          html += '<span class="switch-element ' + (isOn ? 'switch-on' : 'switch-off') + '">';
+          html += '<span class="element-label">' + (elem.label || elemName) + ':</span> ';
+          html += '<strong data-property="' + prop.name + '" data-element="' + elemName + '">';
+          html += (elem.value || 'Off');
+          html += '</strong>';
+          html += '</span>';
+        }
+        html += '</div>';
+      }
+
+      html += '</div>';
+      return html;
+    }
+
+    function generateLightProperty(prop) {
+      var html = '<div class="property-elements">';
+      for (var elemName in prop.elements) {
+        var elem = prop.elements[elemName];
+        var lightClass = 'state-' + (elem.value || 'idle').toLowerCase();
+        html += '<div class="element-row">';
+        html += '<span class="light-indicator ' + lightClass + '" data-property="' + prop.name + '" data-element="' + elemName + '"></span>';
+        html += '<span class="element-label">' + (elem.label || elemName) + ': </span>';
+        html += '<span class="element-value" data-property="' + prop.name + '" data-element="' + elemName + '">';
+        html += (elem.value || 'Unknown');
+        html += '</span>';
+        html += '</div>';
+      }
+      html += '</div>';
+      return html;
+    }
+
+    function addMessage(type, message, source) {
+      var timestamp = new Date();
+      var messageObj = {
+        timestamp: timestamp,
+        type: type, // info, success, warning, error
+        message: message,
+        source: source || deviceName
+      };
+
+      messageLog.push(messageObj);
+
+      // Limit to maxMessages
+      if (messageLog.length > maxMessages) {
+        messageLog.shift(); // Remove oldest message
+      }
+
+      updateMessageDisplay();
+    }
+
+    function updateMessageDisplay() {
+      var messagesHtml = "";
+
+      if (messageLog.length === 0) {
+        messagesHtml = '<p class="text-muted">No messages yet...</p>';
+      } else {
+        for (var i = messageLog.length - 1; i >= 0; i--) { // Show newest first
+          var msg = messageLog[i];
+          var timeStr = formatTimestamp(msg.timestamp);
+          var typeClass = "message-" + msg.type;
+
+          messagesHtml += '<div class="message-entry ' + typeClass + '">';
+          messagesHtml += '<span class="message-timestamp">' + timeStr + '</span>';
+          messagesHtml += '<span class="message-source">[' + msg.source + ']</span>';
+          messagesHtml += '<span class="message-text">' + msg.message + '</span>';
+          messagesHtml += '</div>';
+        }
+      }
+
+      $("#device_messages").html(messagesHtml);
+
+      // Auto-scroll to bottom to show newest messages
+      var messagesDiv = $("#device_messages")[0];
+      messagesDiv.scrollTop = messagesDiv.scrollHeight;
+    }
+
+    function formatTimestamp(timestamp) {
+      var hours = timestamp.getHours().toString().padStart(2, '0');
+      var minutes = timestamp.getMinutes().toString().padStart(2, '0');
+      var seconds = timestamp.getSeconds().toString().padStart(2, '0');
+      var ms = timestamp.getMilliseconds().toString().padStart(3, '0');
+
+      return hours + ':' + minutes + ':' + seconds + '.' + ms;
+    }
+
+    function logPropertyUpdate(propName, oldValue, newValue, elementName) {
+      var message;
+      if (elementName) {
+        message = 'Property "' + propName + '.' + elementName + '" changed: ' +
+                 (oldValue || 'null') + ' → ' + (newValue || 'null');
+      } else {
+        message = 'Property "' + propName + '" updated';
+      }
+      addMessage("info", message, deviceName);
+    }
+
+    function logSwitchRuleInfo(propName, rule, elementName, newValue) {
+      var ruleDesc = {
+        'OneOfMany': 'button group selection',
+        'AtMostOne': 'optional exclusive selection',
+        'AnyOfMany': 'multiple selection allowed'
+      };
+
+      var message = 'Switch "' + propName + '.' + elementName + '" (' +
+                   (ruleDesc[rule] || rule) + ') set to: ' + newValue;
+      addMessage("info", message, deviceName);
+    }
+
+  </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/indiweb/views/form.tpl b/indiweb/views/form.tpl
index 8c32f03..6e3ce5f 100644
--- a/indiweb/views/form.tpl
+++ b/indiweb/views/form.tpl
@@ -115,6 +115,14 @@
     </div>
 
     <div class="row">
+        <div class="col-sm-6">
+            <div class="form-group">
+                <label class="control-label">Connected Devices:</label>
+                <div id="devices_list" class="well">
+                    <p class="text-muted">No devices connected. Start a profile to see connected devices.</p>
+                </div>
+            </div>
+        </div>
         <div class="col-sm-6">
             <div class="form-group">
                 <label class="control-label">Poweroff Reboot:</label>
diff --git a/indiweb/views/js/indi.js b/indiweb/views/js/indi.js
index 6f47f91..28ba7ec 100644
--- a/indiweb/views/js/indi.js
+++ b/indiweb/views/js/indi.js
@@ -313,6 +313,7 @@ function getStatus()
         {
             $("#server_command").html("<span class='glyphicon glyphicon-cog' aria-hidden='true'></span> Start");
             $("#server_notify").html("<p class='alert alert-success'>Server is offline.</p>");
+            $("#devices_list").html("<p class=\"text-muted\">No devices connected. Start a profile to see connected devices.</p>");
         }
 
     });
@@ -347,6 +348,53 @@ function getActiveDrivers()
         }
     });
 
+    // Also update the devices list
+    getConnectedDevices();
+}
+
+function getConnectedDevices()
+{
+    $.getJSON("api/devices", function (devices)
+    {
+        if (devices && devices.length > 0)
+        {
+            var devicesList = "<ul class=\"list-unstyled\">";
+            $.each(devices, function (i, deviceInfo)
+            {
+                // Handle both new format (simple string array) and old format (object array)
+                var deviceName;
+                if (typeof deviceInfo === 'string') {
+                    deviceName = deviceInfo;
+                } else if (deviceInfo.device) {
+                    deviceName = deviceInfo.device;
+                } else {
+                    deviceName = deviceInfo.toString();
+                }
+
+                devicesList += "<li>" +
+                    "<a href=\"/device/" + encodeURIComponent(deviceName) + "\" " +
+                    "target=\"_blank\" class=\"btn btn-link\" style=\"text-decoration: none;\">" +
+                    "<span class=\"glyphicon glyphicon-cog\" aria-hidden=\"true\"></span> " +
+                    deviceName + " Control Panel</a></li>";
+            });
+            devicesList += "</ul>";
+            $("#devices_list").html(devicesList);
+        }
+        else
+        {
+            $("#devices_list").html("<p class=\"text-muted\">No devices connected. Start a profile to see connected devices.</p>");
+        }
+    }).fail(function()
+    {
+        $("#devices_list").html("<p class=\"text-muted\">No devices connected. Start a profile to see connected devices.</p>");
+    });
+}
+
+function openDeviceControlPanel(deviceName)
+{
+    // Open device control panel in a new window/tab
+    var url = "/device/" + encodeURIComponent(deviceName);
+    window.open(url, '_blank', 'width=1200,height=800,scrollbars=yes,resizable=yes');
 }
 
 
diff --git a/requirements.txt b/requirements.txt
index 732aed5..b9bcff3 100644
--- a/requirements.txt
+++ b/requirements.txt
@@ -1,4 +1,7 @@
 requests==2.32.4
 psutil==6.0.0
-bottle==0.12.25
+fastapi==0.104.1
+uvicorn==0.24.0
+jinja2==3.1.2
+python-multipart==0.0.6
 importlib_metadata==8.5.0

From 2f24d32740675e30c8c69ad4399eda11d45a71ad Mon Sep 17 00:00:00 2001
From: Jens Scheidtmann <Jens.Scheidtmann@gmail.com>
Date: Sun, 21 Sep 2025 20:22:06 +0200
Subject: [PATCH 02/16] Add ui elements for entering values. Send these to
 backend. Backend logs received values.

---
 indiweb/main.py                      |  51 +++-
 indiweb/views/css/device_control.css | 216 ++++++++++++++++-
 indiweb/views/device_control.tpl     | 339 +++++++++++++++++++++++++--
 3 files changed, 583 insertions(+), 23 deletions(-)

diff --git a/indiweb/main.py b/indiweb/main.py
index 0249f39..f336518 100644
--- a/indiweb/main.py
+++ b/indiweb/main.py
@@ -648,10 +648,10 @@ async def get_device_structure(device_name: str):
     return JSONResponse(content=structure)
 
 
-@app.get('/api/devices/{device_name}/dirty', tags=["Devices"])
-async def get_dirty_properties(device_name: str):
+@app.get('/api/devices/{device_name}/poll', tags=["Devices"])
+async def poll_device_properties(device_name: str):
     """
-    Gets list of properties that have changed since last check.
+    Polls for properties that have changed since last check.
 
     Args:
         device_name (str): The name of the device.
@@ -746,6 +746,51 @@ async def get_device_property(device_name: str, property_name: str):
     return JSONResponse(content=property_data)
 
 
+@app.post('/api/devices/{device_name}/properties/{property_name}/set', tags=["Devices"])
+async def set_device_property(device_name: str, property_name: str, request: Request):
+    """
+    Sets values for a specific property on a device.
+
+    Args:
+        device_name (str): The name of the device.
+        property_name (str): The name of the property.
+        request: The request containing the property element values.
+
+    Returns:
+        dict: Success response or error details.
+    """
+    client = get_indi_client()
+    if not client.is_connected():
+        raise HTTPException(status_code=503, detail="INDI client not connected")
+
+    try:
+        data = await request.json()
+        elements = data.get('elements', {})
+
+        if not elements:
+            raise HTTPException(status_code=400, detail="No element values provided")
+
+        # Log the received values for now
+        logging.warning(f"Setting property {device_name}.{property_name} with values: {elements}")
+
+        # TODO: Implement actual INDI property setting here
+        # For now, just log and return success
+
+        return JSONResponse(content={
+            "success": True,
+            "message": f"Property {property_name} set request received",
+            "device": device_name,
+            "property": property_name,
+            "elements": elements
+        })
+
+    except json.JSONDecodeError:
+        raise HTTPException(status_code=400, detail="Invalid JSON in request body")
+    except Exception as e:
+        logging.error(f"Error setting property {device_name}.{property_name}: {str(e)}")
+        raise HTTPException(status_code=500, detail=f"Internal server error: {str(e)}")
+
+
 
 ###############################################################################
 # System control endpoints
diff --git a/indiweb/views/css/device_control.css b/indiweb/views/css/device_control.css
index 9f6b82d..1cecf8e 100644
--- a/indiweb/views/css/device_control.css
+++ b/indiweb/views/css/device_control.css
@@ -70,6 +70,8 @@
   align-items: center;
   margin-bottom: 8px;
   padding: 5px 0;
+  flex-wrap: wrap;
+  gap: 5px;
 }
 
 .element-label {
@@ -77,11 +79,15 @@
   margin-right: 10px;
   font-weight: normal;
   color: #666;
+  flex-shrink: 0;
 }
 
 .element-input {
   margin-right: 10px;
-  max-width: 200px;
+  max-width: 150px;
+  margin-left: 5px;
+  display: inline-block;
+  vertical-align: middle;
 }
 
 .property-buttons {
@@ -90,6 +96,56 @@
   border-top: 1px solid #eee;
 }
 
+/* Property control buttons */
+.copy-value-btn {
+  margin-left: 5px;
+  margin-right: 5px;
+  padding: 3px 8px;
+  font-size: 11px;
+  line-height: 1.2;
+  min-width: 32px;
+  vertical-align: middle;
+  border: 1px solid #ccc;
+  border-radius: 3px;
+  background: linear-gradient(to bottom, #fff 0%, #f0f0f0 100%);
+  cursor: pointer;
+  flex-shrink: 0;
+}
+
+.copy-value-btn:hover {
+  background: linear-gradient(to bottom, #f8f8f8 0%, #e8e8e8 100%);
+  border-color: #aaa;
+}
+
+.copy-value-btn:active {
+  background: linear-gradient(to bottom, #e8e8e8 0%, #f0f0f0 100%);
+  box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
+}
+
+.property-set-control {
+  margin-left: 10px;
+  flex-shrink: 0;
+}
+
+.set-property-btn {
+  min-width: 60px;
+}
+
+/* Styling for current value display in writable properties */
+.element-current-value {
+  margin-right: 5px;
+  min-width: 80px;
+  flex-shrink: 0;
+}
+
+/* Better layout for value + controls */
+.element-value-controls {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  flex: 1;
+}
+
 .switch-group {
   display: flex;
   flex-wrap: wrap;
@@ -228,8 +284,45 @@
 }
 
 .property-readonly {
-  background-color: #f9f9f9;
-  border-left: 4px solid #ccc;
+  background-color: #f5f5f5;
+  border-left: 4px solid #bbb;
+}
+
+/* Make text elements in read-only properties more grayish */
+.property-readonly .property-label {
+  color: #777;
+}
+
+.property-readonly .element-label {
+  color: #888;
+}
+
+.property-readonly .element-value {
+  background-color: #e9e9e9;
+  color: #666;
+  border-color: #d5d5d5;
+}
+
+/* Make light indicators in read-only properties more grayish */
+.property-readonly .light-indicator {
+  opacity: 0.7;
+}
+
+/* Make switch elements in read-only properties more grayish */
+.property-readonly .switch-element {
+  opacity: 0.8;
+}
+
+.property-readonly .switch-on {
+  background-color: #e0e7e0;
+  border-color: #c0c8c0;
+  color: #556755;
+}
+
+.property-readonly .switch-off {
+  background-color: #ebe5e5;
+  border-color: #d0c5c5;
+  color: #6b5555;
 }
 
 .property-writeonly {
@@ -263,6 +356,18 @@
   display: inline-block;
 }
 
+/* Box styling for switch fallback strong elements */
+.switch-element strong {
+  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+  background-color: #f8f9fa;
+  padding: 2px 6px;
+  border-radius: 3px;
+  border: 1px solid #e9ecef;
+  display: inline-block;
+  min-width: 60px;
+  font-weight: normal;
+}
+
 .switch-on {
   background-color: #d4edda;
   border: 1px solid #c3e6cb;
@@ -398,6 +503,10 @@
   border-radius: 3px;
   min-width: 30px;
   text-align: center;
+  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+  background-color: #f8f9fa;
+  border: 1px solid #e9ecef;
+  display: inline-block;
 }
 
 .switch-status.status-on {
@@ -474,6 +583,15 @@
   transform: translateY(0px);
 }
 
+/* Blue clicked state for switch buttons */
+.switch-button.button-clicked {
+  background-color: #007bff !important;
+  color: white !important;
+  border-color: #0056b3 !important;
+  box-shadow: inset 0 1px 3px rgba(0,0,0,0.2);
+  transform: translateY(1px);
+}
+
 .switch-button:first-child {
   border-top-left-radius: 3px;
   border-bottom-left-radius: 3px;
@@ -519,6 +637,41 @@
   background-color: inherit !important;
 }
 
+/* Dark gray styling for read-only button switches */
+.property-readonly .switch-button.button-active {
+  background-color: #6c757d !important;
+  color: #f8f9fa !important;
+  border-color: #495057 !important;
+}
+
+.property-readonly .switch-button.button-inactive {
+  background-color: #e9ecef !important;
+  color: #6c757d !important;
+  border-color: #adb5bd !important;
+}
+
+/* More grayish styling for read-only checkbox switches */
+.property-readonly .switch-checkbox.checkbox-checked {
+  background-color: #999 !important;
+  border-color: #777 !important;
+}
+
+.property-readonly .switch-checkbox.checkbox-unchecked {
+  border-color: #ccc !important;
+}
+
+.property-readonly .switch-status.status-on {
+  background-color: #e0e7e0 !important;
+  color: #556755 !important;
+  border-color: #c0c8c0 !important;
+}
+
+.property-readonly .switch-status.status-off {
+  background-color: #ebe5e5 !important;
+  color: #6b5555 !important;
+  border-color: #d0c5c5 !important;
+}
+
 /* Responsive adjustments */
 @media (max-width: 768px) {
   .element-row {
@@ -611,6 +764,63 @@
   100% { transform: rotate(360deg); }
 }
 
+/* Legend section styling */
+.legend-section {
+  margin: 20px 0;
+  padding: 15px;
+  background-color: #f8f9fa;
+  border: 1px solid #e9ecef;
+  border-radius: 4px;
+}
+
+.legend-section h5 {
+  margin-top: 0;
+  margin-bottom: 10px;
+  color: #495057;
+  font-size: 14px;
+  font-weight: bold;
+}
+
+.legend-horizontal {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 15px;
+}
+
+.legend-item {
+  display: flex;
+  align-items: center;
+  font-size: 13px;
+  white-space: nowrap;
+}
+
+.legend-item span {
+  margin-right: 6px;
+}
+
+.legend-border {
+  width: 20px;
+  height: 12px;
+  border-radius: 2px;
+  display: inline-block;
+  margin-right: 8px;
+}
+
+.property-readonly-border {
+  background-color: #f5f5f5;
+  border-left: 4px solid #bbb;
+}
+
+.property-readwrite-border {
+  background-color: #ffffff;
+  border-left: 4px solid #5cb85c;
+}
+
+.property-writeonly-border {
+  background-color: #ffffff;
+  border-left: 4px solid #428bca;
+}
+
 /* Property type indicators */
 .property-type-text::before {
   content: "T";
diff --git a/indiweb/views/device_control.tpl b/indiweb/views/device_control.tpl
index de5cdcb..e66b3d6 100644
--- a/indiweb/views/device_control.tpl
+++ b/indiweb/views/device_control.tpl
@@ -29,6 +29,50 @@
           </div>
         </div>
 
+        <!-- Legend -->
+        <div class="legend-section">
+          <div class="row">
+            <div class="col-md-6">
+              <h5>Property Permissions</h5>
+              <div class="legend-horizontal">
+                <div class="legend-item">
+                  <span class="legend-border property-readonly-border"></span>
+                  <span>Read-only (grayish)</span>
+                </div>
+                <div class="legend-item">
+                  <span class="legend-border property-readwrite-border"></span>
+                  <span>Read-write</span>
+                </div>
+                <div class="legend-item">
+                  <span class="legend-border property-writeonly-border"></span>
+                  <span>Write-only</span>
+                </div>
+              </div>
+            </div>
+            <div class="col-md-6">
+              <h5>Property States</h5>
+              <div class="legend-horizontal">
+                <div class="legend-item">
+                  <span class="property-state state-idle"></span>
+                  <span>Idle</span>
+                </div>
+                <div class="legend-item">
+                  <span class="property-state state-ok"></span>
+                  <span>OK</span>
+                </div>
+                <div class="legend-item">
+                  <span class="property-state state-busy"></span>
+                  <span>Busy</span>
+                </div>
+                <div class="legend-item">
+                  <span class="property-state state-alert"></span>
+                  <span>Alert</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
         <!-- Property Groups Tabs -->
         <ul class="nav nav-tabs" id="property-tabs" role="tablist">
           <!-- Tabs will be populated dynamically -->
@@ -76,6 +120,9 @@
 
       // Initialize message log
       addMessage("info", "Device control panel loaded", "System");
+
+      // Set up event handlers for copy and set buttons
+      setupPropertyControls();
     });
 
     function loadDeviceStructure() {
@@ -104,7 +151,7 @@
     }
 
     function checkForUpdates() {
-      $.getJSON("/api/devices/" + encodeURIComponent(deviceName) + "/dirty", function(dirtyProps) {
+      $.getJSON("/api/devices/" + encodeURIComponent(deviceName) + "/poll", function(dirtyProps) {
         if (dirtyProps && dirtyProps.length > 0) {
           console.log('Dirty properties:', dirtyProps);
           fetchUpdatedProperties(dirtyProps);
@@ -242,9 +289,9 @@
           var isOn = element.value === 'On' || element.value === 'ON';
 
           if (rule === 'OneOfMany' || rule === 'AtMostOne') {
-            // Update button group style
+            // Update button group style and remove blue clicked state
             var buttonSelector = '.switch-button[data-property="' + propName + '"][data-element="' + elemName + '"]';
-            $(buttonSelector).removeClass('button-active button-inactive')
+            $(buttonSelector).removeClass('button-active button-inactive button-clicked')
                            .addClass(isOn ? 'button-active' : 'button-inactive');
           } else if (rule === 'AnyOfMany') {
             // Update checkbox style
@@ -279,7 +326,17 @@
 
       for (var propName in groupProperties) {
         var prop = groupProperties[propName];
-        html += '<div class="property-item" id="prop-' + prop.name + '">';
+        // Determine permission class
+        var permClass = '';
+        if (prop.perm === 'ro') {
+          permClass = 'property-readonly';
+        } else if (prop.perm === 'wo') {
+          permClass = 'property-writeonly';
+        } else if (prop.perm === 'rw') {
+          permClass = 'property-readwrite';
+        }
+
+        html += '<div class="property-item ' + permClass + '" id="prop-' + prop.name + '">';
         html += generatePropertyContent(prop);
         html += '</div>';
       }
@@ -288,6 +345,16 @@
     }
 
     function generatePropertyContent(prop) {
+      // Determine permission class
+      var permClass = '';
+      if (prop.perm === 'ro') {
+        permClass = 'property-readonly';
+      } else if (prop.perm === 'wo') {
+        permClass = 'property-writeonly';
+      } else if (prop.perm === 'rw') {
+        permClass = 'property-readwrite';
+      }
+
       var html = '<div class="property-header">';
       html += '<span class="property-state state-' + (prop.state || 'idle') + '" data-property="' + prop.name + '"></span>';
       html += '<span class="property-label">' + (prop.label || prop.name) + '</span>';
@@ -315,37 +382,133 @@
 
     function generateTextProperty(prop) {
       var html = '<div class="property-elements">';
+      var isWritable = (prop.perm === 'rw' || prop.perm === 'wo');
+
       for (var elemName in prop.elements) {
         var elem = prop.elements[elemName];
         html += '<div class="element-row">';
         html += '<span class="element-label">' + (elem.label || elemName) + ':</span>';
-        html += '<span class="element-value" data-property="' + prop.name + '" data-element="' + elemName + '">';
-        html += (elem.value || '(empty)');
-        html += '</span>';
+
+        if (isWritable) {
+          // Writable property: current value + input controls
+          html += '<div class="element-value-controls">';
+
+          // For read-write properties, show current value and copy button
+          if (prop.perm === 'rw') {
+            html += '<span class="element-value element-current-value" data-property="' + prop.name + '" data-element="' + elemName + '">';
+            html += (elem.value || '(empty)');
+            html += '</span>';
+
+            html += '<button type="button" class="btn btn-xs btn-default copy-value-btn" ';
+            html += 'data-property="' + prop.name + '" data-element="' + elemName + '">↦</button>';
+          }
+
+          html += '<input type="text" class="form-control input-sm element-input" ';
+          html += 'data-property="' + prop.name + '" data-element="' + elemName + '" ';
+          html += 'placeholder="Enter text">';
+          html += '</div>';
+        } else {
+          // Read-only property: just the value
+          html += '<span class="element-value" data-property="' + prop.name + '" data-element="' + elemName + '">';
+          html += (elem.value || '(empty)');
+          html += '</span>';
+        }
+
+        html += '</div>';
+      }
+
+      // Add set button for writable properties (inline after last element)
+      if (isWritable) {
+        html += '<div class="element-row">';
+        html += '<span class="element-label"></span>'; // Empty label for alignment
+        html += '<div class="property-set-control">';
+        html += '<button type="button" class="btn btn-sm btn-primary set-property-btn" ';
+        html += 'data-property="' + prop.name + '">Set</button>';
+        html += '</div>';
         html += '</div>';
       }
+
       html += '</div>';
       return html;
     }
 
     function generateNumberProperty(prop) {
       var html = '<div class="property-elements">';
+      var isWritable = (prop.perm === 'rw' || prop.perm === 'wo');
+
       for (var elemName in prop.elements) {
         var elem = prop.elements[elemName];
         html += '<div class="element-row">';
         html += '<span class="element-label">' + (elem.label || elemName) + ':</span>';
-        html += '<span class="element-value" data-property="' + prop.name + '" data-element="' + elemName + '">';
-        // Use formatted_value if available, otherwise fall back to value
-        html += (elem.formatted_value || elem.value || '0');
-        html += '</span>';
-        if (elem.format) {
-          html += '<span class="text-muted"> (' + elem.format + ')</span>';
-        }
-        if (elem.min !== undefined && elem.max !== undefined) {
-          html += '<small class="text-muted"> [' + elem.min + ' - ' + elem.max + ']</small>';
+
+        if (isWritable) {
+          // Writable property: current value + input controls
+          html += '<div class="element-value-controls">';
+
+          // For read-write properties, show current value and copy button
+          if (prop.perm === 'rw') {
+            html += '<span class="element-value element-current-value" data-property="' + prop.name + '" data-element="' + elemName + '">';
+            html += (elem.formatted_value || elem.value || '0');
+            html += '</span>';
+
+            if (elem.format) {
+              html += '<span class="text-muted"> (' + elem.format + ')</span>';
+            }
+            if (elem.min !== undefined && elem.max !== undefined) {
+              html += '<small class="text-muted"> [' + elem.min + ' - ' + elem.max + ']</small>';
+            }
+
+            html += '<button type="button" class="btn btn-xs btn-default copy-value-btn" ';
+            html += 'data-property="' + prop.name + '" data-element="' + elemName + '">↦</button>';
+          } else {
+            // For write-only properties, show format and range info without current value
+            if (elem.format) {
+              html += '<span class="text-muted">(' + elem.format + ')</span>';
+            }
+            if (elem.min !== undefined && elem.max !== undefined) {
+              html += '<small class="text-muted"> [' + elem.min + ' - ' + elem.max + ']</small>';
+            }
+          }
+
+          // Use text input for %m formatted fields to avoid spin controls
+          var inputType = (elem.format && elem.format.includes('%m')) ? 'text' : 'number';
+          html += '<input type="' + inputType + '" class="form-control input-sm element-input" ';
+          html += 'data-property="' + prop.name + '" data-element="' + elemName + '" ';
+          if (inputType === 'number') {
+            if (elem.min !== undefined) html += 'min="' + elem.min + '" ';
+            if (elem.max !== undefined) html += 'max="' + elem.max + '" ';
+            if (elem.step !== undefined) html += 'step="' + elem.step + '" ';
+          }
+          html += 'placeholder="Enter value">';
+          html += '</div>';
+        } else {
+          // Read-only property: just the value
+          html += '<span class="element-value" data-property="' + prop.name + '" data-element="' + elemName + '">';
+          html += (elem.formatted_value || elem.value || '0');
+          html += '</span>';
+
+          if (elem.format) {
+            html += '<span class="text-muted"> (' + elem.format + ')</span>';
+          }
+          if (elem.min !== undefined && elem.max !== undefined) {
+            html += '<small class="text-muted"> [' + elem.min + ' - ' + elem.max + ']</small>';
+          }
         }
+
+        html += '</div>';
+      }
+
+      // Add set button for writable properties (inline after last element)
+      if (isWritable) {
+        html += '<div class="element-row">';
+        html += '<span class="element-label"></span>'; // Empty label for alignment
+        html += '<div class="property-set-control">';
+        html += '<button type="button" class="btn btn-sm btn-primary set-property-btn" ';
+        html += 'data-property="' + prop.name + '">Set</button>';
+        html += '</div>';
         html += '</div>';
       }
+
       html += '</div>';
       return html;
     }
@@ -462,7 +625,7 @@
       if (messageLog.length === 0) {
         messagesHtml = '<p class="text-muted">No messages yet...</p>';
       } else {
-        for (var i = messageLog.length - 1; i >= 0; i--) { // Show newest first
+        for (var i = 0; i < messageLog.length; i++) { // Show oldest first, newest last
           var msg = messageLog[i];
           var timeStr = formatTimestamp(msg.timestamp);
           var typeClass = "message-" + msg.type;
@@ -514,6 +677,148 @@
       addMessage("info", message, deviceName);
     }
 
+    function setupPropertyControls() {
+      // Event delegation for copy value buttons
+      $(document).on('click', '.copy-value-btn', function() {
+        var propName = $(this).data('property');
+        var elemName = $(this).data('element');
+        var currentValueSpan = $('.element-current-value[data-property="' + propName + '"][data-element="' + elemName + '"]');
+        var inputField = $('.element-input[data-property="' + propName + '"][data-element="' + elemName + '"]');
+
+        var currentValue = currentValueSpan.text().trim();
+        // Extract numeric value from formatted display if needed
+        var numericValue = parseFloat(currentValue);
+        if (!isNaN(numericValue)) {
+          inputField.val(numericValue);
+        } else {
+          inputField.val(currentValue);
+        }
+
+        inputField.focus().select();
+        addMessage("info", 'Copied current value "' + currentValue + '" to input field for ' + propName + '.' + elemName, "System");
+      });
+
+      // Event delegation for set property buttons
+      $(document).on('click', '.set-property-btn', function() {
+        var propName = $(this).data('property');
+        var values = {};
+        var hasValues = false;
+
+        // Collect all input values for this property
+        $('.element-input[data-property="' + propName + '"]').each(function() {
+          var elemName = $(this).data('element');
+          var value = $(this).val().trim();
+          if (value !== '') {
+            values[elemName] = value;
+            hasValues = true;
+          }
+        });
+
+        if (!hasValues) {
+          addMessage("warning", "No values entered for property " + propName, "System");
+          return;
+        }
+
+        // Send the values to the backend
+        setPropertyValues(propName, values);
+      });
+
+      // Event delegation for switch button clicks
+      $(document).on('click', '.switch-button', function() {
+        var propName = $(this).data('property');
+        var elemName = $(this).data('element');
+
+        // Only handle clicks for writable properties
+        var propertyItem = $(this).closest('.property-item');
+        if (propertyItem.hasClass('property-readonly')) {
+          return; // Ignore clicks on read-only switches
+        }
+
+        // Add blue clicked state
+        $(this).addClass('button-clicked');
+
+        // Determine the switch rule and handle accordingly
+        var switchGroup = $(this).closest('.switch-button-group');
+        var rule = 'OneOfMany'; // Default
+        if (switchGroup.hasClass('switch-optional')) {
+          rule = 'AtMostOne';
+        }
+
+        // Send switch update to backend
+        setSwitchValue(propName, elemName, rule, $(this));
+      });
+    }
+
+    function setPropertyValues(propName, values) {
+      addMessage("info", "Setting property " + propName + " with values: " + JSON.stringify(values), "System");
+
+      $.ajax({
+        type: 'POST',
+        url: '/api/devices/' + encodeURIComponent(deviceName) + '/properties/' + encodeURIComponent(propName) + '/set',
+        data: JSON.stringify({ elements: values }),
+        contentType: 'application/json',
+        success: function(response) {
+          addMessage("success", "Property " + propName + " set successfully", deviceName);
+          // Clear the input fields after successful set
+          $('.element-input[data-property="' + propName + '"]').val('');
+        },
+        error: function(xhr, status, error) {
+          var errorMsg = xhr.responseJSON?.detail || error;
+          addMessage("error", "Failed to set property " + propName + ": " + errorMsg, "System");
+        }
+      });
+    }
+
+    function setSwitchValue(propName, elemName, rule, clickedButton) {
+      var values = {};
+
+      if (rule === 'OneOfMany') {
+        // OneOfMany: Only one can be active, turn off all others
+        values[elemName] = 'On';
+        // Find all other elements in this property and set them to Off
+        clickedButton.closest('.switch-button-group').find('.switch-button').each(function() {
+          var otherElemName = $(this).data('element');
+          if (otherElemName !== elemName) {
+            values[otherElemName] = 'Off';
+          }
+        });
+      } else if (rule === 'AtMostOne') {
+        // AtMostOne: Can turn off current, or turn on and turn off others
+        var isCurrentlyActive = clickedButton.hasClass('button-active');
+        if (isCurrentlyActive) {
+          // Turn off the currently active one
+          values[elemName] = 'Off';
+        } else {
+          // Turn on this one and turn off all others
+          values[elemName] = 'On';
+          clickedButton.closest('.switch-button-group').find('.switch-button').each(function() {
+            var otherElemName = $(this).data('element');
+            if (otherElemName !== elemName && $(this).hasClass('button-active')) {
+              values[otherElemName] = 'Off';
+            }
+          });
+        }
+      }
+
+      addMessage("info", "Setting switch " + propName + " (" + rule + ") with values: " + JSON.stringify(values), "System");
+
+      $.ajax({
+        type: 'POST',
+        url: '/api/devices/' + encodeURIComponent(deviceName) + '/properties/' + encodeURIComponent(propName) + '/set',
+        data: JSON.stringify({ elements: values }),
+        contentType: 'application/json',
+        success: function(response) {
+          addMessage("success", "Switch " + propName + " set successfully", deviceName);
+        },
+        error: function(xhr, status, error) {
+          var errorMsg = xhr.responseJSON?.detail || error;
+          addMessage("error", "Failed to set switch " + propName + ": " + errorMsg, "System");
+          // Remove blue state on error
+          clickedButton.removeClass('button-clicked');
+        }
+      });
+    }
+
   </script>
 </body>
 </html>
\ No newline at end of file

From e543c6d05e0a4300f6c1400e8ce7ab3332a618d3 Mon Sep 17 00:00:00 2001
From: Jens Scheidtmann <Jens.Scheidtmann@gmail.com>
Date: Mon, 22 Sep 2025 17:04:26 +0200
Subject: [PATCH 03/16] Fully working control panels (including editing)

---
 indiweb/indi_client.py               | 636 +++++++++++++++++----------
 indiweb/main.py                      |  55 ++-
 indiweb/views/css/device_control.css |  83 ++++
 indiweb/views/device_control.tpl     | 196 ++++++---
 4 files changed, 679 insertions(+), 291 deletions(-)

diff --git a/indiweb/indi_client.py b/indiweb/indi_client.py
index b9e620d..87fc88d 100644
--- a/indiweb/indi_client.py
+++ b/indiweb/indi_client.py
@@ -1,56 +1,50 @@
 #!/usr/bin/env python
 
-import socket
-import threading
-import xml.etree.ElementTree as ET
 import time
 import logging
-import re
+import threading
 from collections import defaultdict
 
+try:
+    import PyIndi
+except ImportError:
+    print("PyIndi module not found. Please install pyindi-client.")
+    raise
+
 
-class INDIClient:
+class INDIClient(PyIndi.BaseClient):
     """
     A simple INDI client for connecting to an INDI server and managing device properties.
     Based on the INDI protocol: https://indilib.org/develop/developer-manual/101-standard-properties.html
     """
 
     def __init__(self, host='localhost', port=7624):
+        super(INDIClient, self).__init__()
         self.host = host
         self.port = port
-        self.socket = None
         self.connected = False
         self.devices = {}
         self.properties = defaultdict(dict)
         self.dirty_properties = defaultdict(set)  # Track changed properties per device
+        self.property_timestamps = defaultdict(dict)  # Track when properties were last updated
         self.auto_connect_devices = True
         self.listeners = []
-        self.receive_thread = None
-        self.running = False
+        # Removed pending_operations - all operations are now asynchronous
+        self.connection_lock = threading.Lock()
 
     def connect(self):
         """Connect to the INDI server"""
         try:
-            self.socket = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
-            self.socket.settimeout(10)  # 10 second timeout for connection
-            self.socket.connect((self.host, self.port))
-            self.socket.settimeout(None)  # Remove timeout after connection
-            self.connected = True
-            self.running = True
-
-            # Start receive thread
-            self.receive_thread = threading.Thread(target=self._receive_loop)
-            self.receive_thread.daemon = True
-            self.receive_thread.start()
-
-            # Request device list
-            self.send_message('<getProperties version="1.7"/>')
-            logging.info(f"Connected to INDI server at {self.host}:{self.port}")
-
-            # Wait a bit for initial properties to load
-            time.sleep(1)
-            return True
-
+            with self.connection_lock:
+                self.setServer(self.host, self.port)
+                success = self.connectServer()
+                if success:
+                    # Don't set connected=True here, wait for serverConnected() callback
+                    logging.info(f"Attempting to connect to INDI server at {self.host}:{self.port}")
+                    # Wait a bit for connection to establish and initial properties to load
+                    time.sleep(2)
+                    return self.connected  # Return actual connection status from callback
+                return False
         except Exception as e:
             logging.error(f"Failed to connect to INDI server: {e}")
             self.connected = False
@@ -58,221 +52,252 @@ def connect(self):
 
     def disconnect(self):
         """Disconnect from the INDI server"""
-        self.running = False
-        if self.socket:
-            try:
-                self.socket.close()
-            except:
-                pass
-        self.connected = False
-        self.socket = None
-        logging.info("Disconnected from INDI server")
+        with self.connection_lock:
+            if self.connected:
+                self.disconnectServer()
+                self.connected = False
+                logging.info("Disconnected from INDI server")
 
     def send_message(self, message):
-        """Send a message to the INDI server"""
-        if not self.connected or not self.socket:
-            return False
+        """Send a message to the INDI server (deprecated - use PyIndi methods)"""
+        # This method is kept for compatibility but should not be used
+        # with PyIndi client. Use sendNewProperty and other PyIndi methods instead.
+        logging.warning("send_message is deprecated with PyIndi client")
+        return False
 
-        try:
-            self.socket.send(message.encode() + b'\n')
-            return True
-        except Exception as e:
-            logging.error(f"Failed to send message: {e}")
-            return False
+    # PyIndi callback methods
+    def newDevice(self, device):
+        """Called when a new device is created"""
+        device_name = device.getDeviceName()
+        if device_name not in self.devices:
+            self.devices[device_name] = {}
+        logging.debug(f"New device: {device_name}")
+        self._notify_listeners('device_added', device_name, None)
+
+    def removeDevice(self, device):
+        """Called when a device is removed"""
+        device_name = device.getDeviceName()
+        if device_name in self.devices:
+            del self.devices[device_name]
+        if device_name in self.properties:
+            del self.properties[device_name]
+        logging.debug(f"Removed device: {device_name}")
+        self._notify_listeners('device_deleted', device_name, None)
+
+    def newProperty(self, prop):
+        """Called when a new property is created"""
+        device_name = prop.getDeviceName()
+        prop_name = prop.getName()
+
+        property_data = self._convert_property_to_dict(prop)
+
+        if device_name not in self.devices:
+            self.devices[device_name] = {}
+        if device_name not in self.properties:
+            self.properties[device_name] = {}
 
-    def _receive_loop(self):
-        """Main receive loop for processing INDI messages"""
-        buffer = ""
+        self.properties[device_name][prop_name] = property_data
+        self.devices[device_name][prop_name] = property_data
 
-        while self.running and self.connected:
-            try:
-                data = self.socket.recv(4096).decode()
-                if not data:
-                    break
-
-                buffer += data
-
-                # Process complete XML messages
-                while True:
-                    # Find the start and end of an XML message
-                    start = buffer.find('<')
-                    if start == -1:
-                        break
-
-                    # Find the matching closing tag
-                    tag_end = buffer.find('>', start)
-                    if tag_end == -1:
-                        break
-
-                    tag_name = buffer[start+1:tag_end].split()[0]
-                    if tag_name.endswith('/'):
-                        # Self-closing tag
-                        message = buffer[start:tag_end+1]
-                        buffer = buffer[tag_end+1:]
-                        self._process_message(message)
-                    else:
-                        # Find closing tag
-                        closing_tag = f"</{tag_name}>"
-                        end = buffer.find(closing_tag, tag_end)
-                        if end == -1:
-                            break
-
-                        message = buffer[start:end + len(closing_tag)]
-                        buffer = buffer[end + len(closing_tag):]
-                        self._process_message(message)
+        # Mark property as dirty (new property)
+        self.dirty_properties[device_name].add(prop_name)
 
-            except Exception as e:
-                logging.error(f"Error in receive loop: {e}")
-                break
+        # Auto-connect device if it has a CONNECTION property
+        if self.auto_connect_devices and prop_name == 'CONNECTION':
+            self._auto_connect_device(device_name)
 
-        self.connected = False
+        # Notify listeners
+        self._notify_listeners('property_defined', device_name, property_data)
 
-    def _process_message(self, message):
-        """Process an INDI XML message"""
-        try:
-            root = ET.fromstring(message)
-
-            if root.tag == 'defTextVector':
-                self._process_def_property(root, 'text')
-            elif root.tag == 'defNumberVector':
-                self._process_def_property(root, 'number')
-            elif root.tag == 'defSwitchVector':
-                self._process_def_property(root, 'switch')
-            elif root.tag == 'defLightVector':
-                self._process_def_property(root, 'light')
-            elif root.tag == 'defBLOBVector':
-                self._process_def_property(root, 'blob')
-            elif root.tag in ['setTextVector', 'setNumberVector', 'setSwitchVector', 'setLightVector', 'setBLOBVector']:
-                self._process_set_property(root)
-            elif root.tag == 'delProperty':
-                self._process_del_property(root)
-            elif root.tag == 'message':
-                self._process_message_tag(root)
-
-        except ET.ParseError as e:
-            logging.warning(f"Failed to parse XML message: {e}")
-        except Exception as e:
-            logging.error(f"Error processing message: {e}")
+    def updateProperty(self, prop):
+        """Called when a property is updated"""
+        device_name = prop.getDeviceName()
+        prop_name = prop.getName()
+
+        property_data = self._convert_property_to_dict(prop)
+
+        if device_name in self.properties and prop_name in self.properties[device_name]:
+            old_prop = self.properties[device_name][prop_name]
+            old_state = old_prop.get('state', 'idle')
+
+            # Update the property data
+            self.properties[device_name][prop_name] = property_data
+            self.devices[device_name][prop_name] = property_data
+
+            # No need for completion tracking since all operations are now asynchronous
+
+            # Mark property as dirty (updated property)
+            self.dirty_properties[device_name].add(prop_name)
+            # Update timestamp for this property
+            self.property_timestamps[device_name][prop_name] = time.time()
+
+            # Notify listeners
+            self._notify_listeners('property_updated', device_name, property_data)
+
+    def removeProperty(self, prop):
+        """Called when a property is removed"""
+        device_name = prop.getDeviceName()
+        prop_name = prop.getName()
+
+        if device_name in self.properties and prop_name in self.properties[device_name]:
+            del self.properties[device_name][prop_name]
+            if device_name in self.devices and prop_name in self.devices[device_name]:
+                del self.devices[device_name][prop_name]
+            self._notify_listeners('property_deleted', device_name, {'name': prop_name})
+
+    def newMessage(self, device, message_id):
+        """Called when a new message arrives"""
+        device_name = device.getDeviceName() if device else "Server"
+        message_text = device.messageQueue(message_id) if device else ""
+
+        self._notify_listeners('message', device_name, {
+            'message': message_text,
+            'timestamp': str(time.time())
+        })
 
-    def _process_def_property(self, root, prop_type):
-        """Process a property definition message"""
-        device = root.get('device')
-        name = root.get('name')
-        label = root.get('label', name)
-        group = root.get('group', 'Main')
-        state = root.get('state', 'Idle')
-        perm = root.get('perm', 'rw')
-        rule = root.get('rule') if prop_type == 'switch' else None
+    def serverConnected(self):
+        """Called when server connects"""
+        self.connected = True
+        logging.info(f"Server connected ({self.getHost()}:{self.getPort()})")
 
-        if device not in self.devices:
-            self.devices[device] = {}
+    def serverDisconnected(self, exit_code):
+        """Called when server disconnects"""
+        self.connected = False
+        logging.info(f"Server disconnected (exit code = {exit_code})")
+
+    def _convert_property_to_dict(self, prop):
+        """Convert a PyIndi property to dictionary format"""
+        device_name = prop.getDeviceName()
+        prop_name = prop.getName()
+        prop_label = prop.getLabel()
+        prop_group = prop.getGroupName()
+        prop_state = prop.getStateAsString().lower()
+        # Convert permission number to string
+        perm_num = prop.getPermission()
+        if perm_num == PyIndi.IP_RO:
+            prop_perm = 'ro'
+        elif perm_num == PyIndi.IP_WO:
+            prop_perm = 'wo'
+        elif perm_num == PyIndi.IP_RW:
+            prop_perm = 'rw'
+        else:
+            prop_perm = 'rw'  # default
+        prop_type_str = prop.getTypeAsString().lower()
+
+        # Map PyIndi property types to our format
+        # PyIndi returns "INDI_Text", "INDI_Number", etc.
+        type_mapping = {
+            'indi_text': 'text',
+            'indi_number': 'number',
+            'indi_switch': 'switch',
+            'indi_light': 'light',
+            'indi_blob': 'blob'
+        }
+        prop_type = type_mapping.get(prop_type_str, prop_type_str)
 
         elements = {}
-        for child in root:
-            if child.tag.startswith('def'):
-                elem_name = child.get('name')
-                elem_label = child.get('label', elem_name)
-                elem_value = (child.text or '').strip()
+        switch_rule = None  # Initialize for switch properties
+
+        if prop.getType() == PyIndi.INDI_TEXT:
+            text_prop = PyIndi.PropertyText(prop)
+            for widget in text_prop:
+                elements[widget.name] = {
+                    'name': widget.name,
+                    'label': widget.label,
+                    'value': widget.text
+                }
 
+        elif prop.getType() == PyIndi.INDI_NUMBER:
+            number_prop = PyIndi.PropertyNumber(prop)
+            for widget in number_prop:
                 element = {
-                    'name': elem_name,
-                    'label': elem_label,
-                    'value': elem_value
+                    'name': widget.name,
+                    'label': widget.label,
+                    'value': str(widget.value),
+                    'min': str(widget.min) if widget.min is not None else None,
+                    'max': str(widget.max) if widget.max is not None else None,
+                    'step': str(widget.step) if widget.step is not None else None,
+                    'format': widget.format if widget.format else None
                 }
+                elements[widget.name] = element
+
+        elif prop.getType() == PyIndi.INDI_SWITCH:
+            switch_prop = PyIndi.PropertySwitch(prop)
+            # Get the rule from the switch property - this will be used later in property_data
+            switch_rule = switch_prop.getRule() if hasattr(switch_prop, 'getRule') else None
+            if switch_rule is not None:
+                # Convert PyIndi rule constants to strings
+                if switch_rule == PyIndi.ISR_1OFMANY:
+                    switch_rule = 'OneOfMany'
+                elif switch_rule == PyIndi.ISR_ATMOST1:
+                    switch_rule = 'AtMostOne'
+                elif switch_rule == PyIndi.ISR_NOFMANY:
+                    switch_rule = 'AnyOfMany'
+                else:
+                    switch_rule = 'OneOfMany'  # default
 
-                # Add type-specific attributes
-                if prop_type == 'number':
-                    element.update({
-                        'min': child.get('min'),
-                        'max': child.get('max'),
-                        'step': child.get('step'),
-                        'format': child.get('format')
-                    })
+            for widget in switch_prop:
+                elements[widget.name] = {
+                    'name': widget.name,
+                    'label': widget.label,
+                    'value': 'On' if widget.s == PyIndi.ISS_ON else 'Off'
+                }
+
+        elif prop.getType() == PyIndi.INDI_LIGHT:
+            light_prop = PyIndi.PropertyLight(prop)
+            for widget in light_prop:
+                # Convert light state to string
+                state_str = 'Idle'
+                if widget.s == PyIndi.IPS_IDLE:
+                    state_str = 'Idle'
+                elif widget.s == PyIndi.IPS_OK:
+                    state_str = 'Ok'
+                elif widget.s == PyIndi.IPS_BUSY:
+                    state_str = 'Busy'
+                elif widget.s == PyIndi.IPS_ALERT:
+                    state_str = 'Alert'
+
+                elements[widget.name] = {
+                    'name': widget.name,
+                    'label': widget.label,
+                    'value': state_str
+                }
+
+        elif prop.getType() == PyIndi.INDI_BLOB:
+            blob_prop = PyIndi.PropertyBlob(prop)
+            for widget in blob_prop:
+                size = getattr(widget, 'size', 0) if hasattr(widget, 'size') else 0
+                elements[widget.name] = {
+                    'name': widget.name,
+                    'label': widget.label,
+                    'value': f'<blob {size} bytes>'
+                }
 
-                elements[elem_name] = element
+        # Set the rule based on property type
+        rule_value = None
+        if prop.getType() == PyIndi.INDI_SWITCH:
+            rule_value = switch_rule
 
         property_data = {
-            'name': name,
-            'label': label,
-            'group': group,
+            'name': prop_name,
+            'label': prop_label,
+            'group': prop_group,
             'type': prop_type,
-            'state': state.lower(),
-            'perm': perm,
-            'rule': rule,
+            'state': prop_state,
+            'perm': prop_perm.lower(),
+            'rule': rule_value,
             'elements': elements,
-            'device': device
+            'device': device_name
         }
 
         # Apply formatting to number properties
         property_data = self._apply_formatting_to_property(property_data)
 
-        self.properties[device][name] = property_data
-        self.devices[device][name] = property_data
-
-        # Mark property as dirty (new property)
-        self.dirty_properties[device].add(name)
-
-        # Auto-connect device if it has a CONNECTION property
-        if self.auto_connect_devices and name == 'CONNECTION':
-            self._auto_connect_device(device)
-
-        # Notify listeners
-        self._notify_listeners('property_defined', device, property_data)
-
-    def _process_set_property(self, root):
-        """Process a property update message"""
-        device = root.get('device')
-        name = root.get('name')
-        state = root.get('state', 'Idle')
+        return property_data
 
-        if device in self.properties and name in self.properties[device]:
-            prop = self.properties[device][name]
-            prop['state'] = state.lower()
 
-            # Update element values
-            for child in root:
-                if child.tag.startswith('one'):
-                    elem_name = child.get('name')
-                    if elem_name in prop['elements']:
-                        prop['elements'][elem_name]['value'] = (child.text or '').strip()
 
-            # Apply formatting to updated property
-            prop = self._apply_formatting_to_property(prop)
 
-            # Mark property as dirty (updated property)
-            self.dirty_properties[device].add(name)
-
-            # Notify listeners
-            self._notify_listeners('property_updated', device, prop)
-
-    def _process_del_property(self, root):
-        """Process a property deletion message"""
-        device = root.get('device')
-        name = root.get('name')
-
-        if device in self.properties:
-            if name:
-                # Delete specific property
-                if name in self.properties[device]:
-                    del self.properties[device][name]
-                    self._notify_listeners('property_deleted', device, {'name': name})
-            else:
-                # Delete all properties for device
-                self.properties[device] = {}
-                if device in self.devices:
-                    del self.devices[device]
-                self._notify_listeners('device_deleted', device, None)
-
-    def _process_message_tag(self, root):
-        """Process a message tag"""
-        device = root.get('device')
-        message = root.text or ''
-        timestamp = root.get('timestamp', str(time.time()))
-
-        self._notify_listeners('message', device, {
-            'message': message,
-            'timestamp': timestamp
-        })
 
     def _notify_listeners(self, event_type, device, data):
         """Notify all registered listeners of an event"""
@@ -293,6 +318,9 @@ def remove_listener(self, callback):
 
     def get_devices(self):
         """Get list of available devices"""
+        if self.connected:
+            pyindi_devices = self.getDevices()
+            return [device.getDeviceName() for device in pyindi_devices]
         return list(self.devices.keys())
 
     def get_device_properties(self, device_name):
@@ -308,19 +336,61 @@ def wait_for_device(self, device_name, timeout=5):
         """Wait for a device to become available"""
         start_time = time.time()
         while time.time() - start_time < timeout:
-            if device_name in self.devices:
+            if self.connected:
+                device = self.getDevice(device_name)
+                if device:
+                    return True
+            elif device_name in self.devices:
                 return True
             time.sleep(0.1)
         return False
 
     def set_property(self, device_name, property_name, elements):
-        """Set property values"""
+        """
+        Set property values and return detailed result information.
+
+        Args:
+            device_name (str): Name of the device
+            property_name (str): Name of the property
+            elements (dict): Dictionary of element names and values
+
+        Returns:
+            dict: Result with success status, message, and details
+        """
         prop = self.get_property(device_name, property_name)
         if not prop:
-            return False
+            return {
+                'success': False,
+                'error': f'Property {device_name}.{property_name} not found',
+                'error_type': 'property_not_found'
+            }
+
+        # Check if property is writable
+        perm = prop.get('perm', 'rw')
+        if perm not in ['rw', 'wo']:
+            return {
+                'success': False,
+                'error': f'Property {device_name}.{property_name} is read-only',
+                'error_type': 'permission_denied'
+            }
+
+        # Validate elements exist
+        for elem_name in elements:
+            if elem_name not in prop.get('elements', {}):
+                return {
+                    'success': False,
+                    'error': f'Element {elem_name} not found in property {device_name}.{property_name}',
+                    'error_type': 'element_not_found'
+                }
 
         prop_type = prop['type']
-        message = ""
+        original_prop_type = prop_type
+
+        # Normalize property type (handle both old and new formats)
+        if prop_type.startswith('indi_'):
+            prop_type = prop_type[5:]  # Remove 'indi_' prefix
+
+        logging.info(f"Setting property {device_name}.{property_name}: original type '{original_prop_type}' -> normalized type '{prop_type}'")
 
         if prop_type == 'text':
             message = f'<newTextVector device="{device_name}" name="{property_name}">'
@@ -331,31 +401,122 @@ def set_property(self, device_name, property_name, elements):
         elif prop_type == 'number':
             message = f'<newNumberVector device="{device_name}" name="{property_name}">'
             for elem_name, value in elements.items():
-                message += f'<oneNumber name="{elem_name}">{value}</oneNumber>'
+                try:
+                    # Validate number format
+                    float(value)
+                    message += f'<oneNumber name="{elem_name}">{value}</oneNumber>'
+                except ValueError:
+                    return {
+                        'success': False,
+                        'error': f'Invalid number format for element {elem_name}: {value}',
+                        'error_type': 'invalid_value'
+                    }
             message += '</newNumberVector>'
 
         elif prop_type == 'switch':
             message = f'<newSwitchVector device="{device_name}" name="{property_name}">'
             for elem_name, value in elements.items():
+                # Validate switch values
+                if value not in ['On', 'Off', 'ON', 'OFF']:
+                    return {
+                        'success': False,
+                        'error': f'Invalid switch value for element {elem_name}: {value}. Must be On/Off',
+                        'error_type': 'invalid_value'
+                    }
                 message += f'<oneSwitch name="{elem_name}">{value}</oneSwitch>'
             message += '</newSwitchVector>'
 
-        return self.send_message(message)
+        else:
+            return {
+                'success': False,
+                'error': f'Unsupported property type: {original_prop_type} (normalized: {prop_type})',
+                'error_type': 'unsupported_type'
+            }
+
+        # Send using PyIndi methods
+        device = self.getDevice(device_name)
+        if not device:
+            return {
+                'success': False,
+                'error': f'Device {device_name} not found',
+                'error_type': 'device_not_found'
+            }
+
+        property_obj = device.getProperty(property_name)
+        if not property_obj:
+            return {
+                'success': False,
+                'error': f'Property {device_name}.{property_name} not found',
+                'error_type': 'property_not_found'
+            }
+
+        try:
+            if prop_type == 'text':
+                text_prop = PyIndi.PropertyText(property_obj)
+                for elem_name, value in elements.items():
+                    widget = text_prop.findWidgetByName(elem_name)
+                    if widget:
+                        widget.setText(str(value))
+                self.sendNewProperty(text_prop)
+
+            elif prop_type == 'number':
+                number_prop = PyIndi.PropertyNumber(property_obj)
+                for elem_name, value in elements.items():
+                    widget = number_prop.findWidgetByName(elem_name)
+                    if widget:
+                        widget.setValue(float(value))
+                self.sendNewProperty(number_prop)
+
+            elif prop_type == 'switch':
+                switch_prop = PyIndi.PropertySwitch(property_obj)
+                for elem_name, value in elements.items():
+                    widget = switch_prop.findWidgetByName(elem_name)
+                    if widget:
+                        if value in ['On', 'ON']:
+                            widget.setState(PyIndi.ISS_ON)
+                        else:
+                            widget.setState(PyIndi.ISS_OFF)
+                self.sendNewProperty(switch_prop)
+
+        except Exception as e:
+            return {
+                'success': False,
+                'error': f'Failed to send property update: {str(e)}',
+                'error_type': 'communication_error'
+            }
+
+        # All INDI operations are asynchronous - return success immediately after sending
+        # The actual property updates will be received via PyIndi callbacks and polling
+        return {
+            'success': True,
+            'message': f'Property {property_name} command sent successfully',
+            'property': property_name,
+            'device': device_name,
+            'elements': elements
+        }
 
     def is_connected(self):
         """Check if connected to INDI server"""
         return self.connected
 
+    # Removed _cleanup_old_operations - no longer needed with asynchronous operations
+
     def _auto_connect_device(self, device_name):
         """Automatically connect a device when it becomes available"""
         def connect_after_delay():
             time.sleep(2)  # Wait for device to be fully initialized
             logging.info(f"Auto-connecting device: {device_name}")
-            connection_prop = self.get_property(device_name, 'CONNECTION')
-            if connection_prop and connection_prop['elements'].get('CONNECT'):
-                # Only connect if not already connected
-                if connection_prop['elements']['CONNECT']['value'] != 'On':
-                    self.set_property(device_name, 'CONNECTION', {'CONNECT': 'On', 'DISCONNECT': 'Off'})
+            device = self.getDevice(device_name)
+            if device and not device.isConnected():
+                connection_prop = device.getProperty('CONNECTION')
+                if connection_prop:
+                    switch_prop = PyIndi.PropertySwitch(connection_prop)
+                    connect_widget = switch_prop.findWidgetByName('CONNECT')
+                    disconnect_widget = switch_prop.findWidgetByName('DISCONNECT')
+                    if connect_widget and disconnect_widget:
+                        connect_widget.setState(PyIndi.ISS_ON)
+                        disconnect_widget.setState(PyIndi.ISS_OFF)
+                        self.sendNewProperty(switch_prop)
 
         # Run in separate thread to avoid blocking
         thread = threading.Thread(target=connect_after_delay)
@@ -379,11 +540,30 @@ def get_device_structure(self, device_name):
 
         return structure
 
-    def get_dirty_properties(self, device_name):
+    def get_dirty_properties(self, device_name, since_timestamp=None):
         """Get list of properties that have changed since last check"""
-        dirty_props = list(self.dirty_properties[device_name])
-        # Clear dirty flags after returning them
-        self.dirty_properties[device_name].clear()
+        if since_timestamp is None:
+            since_timestamp = time.time() - 10  # Default: get changes from last 10 seconds
+
+        dirty_props = []
+        current_time = time.time()
+
+        for prop_name, update_time in self.property_timestamps.get(device_name, {}).items():
+            if update_time > since_timestamp:
+                dirty_props.append(prop_name)
+
+        # Clean up old timestamps (older than 60 seconds)
+        cutoff_time = current_time - 60
+        if device_name in self.property_timestamps:
+            props_to_remove = [
+                prop_name for prop_name, update_time
+                in self.property_timestamps[device_name].items()
+                if update_time < cutoff_time
+            ]
+            for prop_name in props_to_remove:
+                del self.property_timestamps[device_name][prop_name]
+                self.dirty_properties[device_name].discard(prop_name)
+
         return dirty_props
 
     def get_changed_properties(self, device_name, property_names):
diff --git a/indiweb/main.py b/indiweb/main.py
index f336518..3c3a7d0 100644
--- a/indiweb/main.py
+++ b/indiweb/main.py
@@ -649,12 +649,13 @@ async def get_device_structure(device_name: str):
 
 
 @app.get('/api/devices/{device_name}/poll', tags=["Devices"])
-async def poll_device_properties(device_name: str):
+async def poll_device_properties(device_name: str, since: float = None):
     """
     Polls for properties that have changed since last check.
 
     Args:
         device_name (str): The name of the device.
+        since (float): Timestamp since when to check for changes (optional).
 
     Returns:
         list: A list of property names that have changed.
@@ -663,7 +664,7 @@ async def poll_device_properties(device_name: str):
     if not client.is_connected():
         raise HTTPException(status_code=503, detail="INDI client not connected")
 
-    dirty_props = client.get_dirty_properties(device_name)
+    dirty_props = client.get_dirty_properties(device_name, since)
     return JSONResponse(content=dirty_props)
 
 
@@ -770,24 +771,50 @@ async def set_device_property(device_name: str, property_name: str, request: Req
         if not elements:
             raise HTTPException(status_code=400, detail="No element values provided")
 
-        # Log the received values for now
+        # Log the received values
         logging.warning(f"Setting property {device_name}.{property_name} with values: {elements}")
 
-        # TODO: Implement actual INDI property setting here
-        # For now, just log and return success
-
-        return JSONResponse(content={
-            "success": True,
-            "message": f"Property {property_name} set request received",
-            "device": device_name,
-            "property": property_name,
-            "elements": elements
-        })
+        # Set the property using the INDI client
+        result = client.set_property(device_name, property_name, elements)
+
+        if result['success']:
+            # Success - property setting command was sent
+            logging.info(f"Property {device_name}.{property_name} set successfully")
+            return JSONResponse(content={
+                "success": True,
+                "message": result['message'],
+                "device": device_name,
+                "property": property_name,
+                "elements": elements
+            })
+        else:
+            # Error occurred during property setting
+            error_msg = result['error']
+            error_type = result.get('error_type', 'unknown_error')
+
+            logging.error(f"Failed to set property {device_name}.{property_name}: {error_msg}")
+
+            # Map error types to appropriate HTTP status codes
+            if error_type in ['property_not_found', 'element_not_found']:
+                status_code = 404
+            elif error_type == 'permission_denied':
+                status_code = 403
+            elif error_type in ['invalid_value', 'unsupported_type']:
+                status_code = 400
+            elif error_type == 'communication_error':
+                status_code = 503
+            else:
+                status_code = 500
+
+            raise HTTPException(status_code=status_code, detail=error_msg)
 
     except json.JSONDecodeError:
         raise HTTPException(status_code=400, detail="Invalid JSON in request body")
+    except HTTPException:
+        # Re-raise HTTP exceptions (these are our expected errors)
+        raise
     except Exception as e:
-        logging.error(f"Error setting property {device_name}.{property_name}: {str(e)}")
+        logging.error(f"Unexpected error setting property {device_name}.{property_name}: {str(e)}")
         raise HTTPException(status_code=500, detail=f"Internal server error: {str(e)}")
 
 
diff --git a/indiweb/views/css/device_control.css b/indiweb/views/css/device_control.css
index 1cecf8e..6b1f34e 100644
--- a/indiweb/views/css/device_control.css
+++ b/indiweb/views/css/device_control.css
@@ -108,6 +108,7 @@
   border: 1px solid #ccc;
   border-radius: 3px;
   background: linear-gradient(to bottom, #fff 0%, #f0f0f0 100%);
+  color: #333 !important;
   cursor: pointer;
   flex-shrink: 0;
 }
@@ -115,11 +116,13 @@
 .copy-value-btn:hover {
   background: linear-gradient(to bottom, #f8f8f8 0%, #e8e8e8 100%);
   border-color: #aaa;
+  color: #333 !important;
 }
 
 .copy-value-btn:active {
   background: linear-gradient(to bottom, #e8e8e8 0%, #f0f0f0 100%);
   box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
+  color: #333 !important;
 }
 
 .property-set-control {
@@ -453,6 +456,29 @@
   background-color: #f8f9fa;
 }
 
+/* Horizontal checkbox style switches (AnyOfMany) */
+.switch-checkbox-group-horizontal {
+  display: flex;
+  flex-direction: row;
+  gap: 15px;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.switch-checkbox-item-horizontal {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 4px 8px;
+  border-radius: 4px;
+  cursor: pointer;
+  white-space: nowrap;
+}
+
+.switch-checkbox-item-horizontal:hover {
+  background-color: #f8f9fa;
+}
+
 .switch-checkbox {
   width: 16px;
   height: 16px;
@@ -764,6 +790,63 @@
   100% { transform: rotate(360deg); }
 }
 
+/* Disconnected state styling */
+body.disconnected .set-property-btn,
+body.disconnected .copy-value-btn,
+body.disconnected .switch-button,
+body.disconnected .switch-checkbox,
+body.disconnected .element-input {
+  opacity: 0.4 !important;
+  cursor: not-allowed !important;
+  pointer-events: none !important;
+}
+
+body.disconnected .property-item {
+  background-color: #f5f5f5 !important;
+  border-color: #ddd !important;
+}
+
+body.disconnected .property-readwrite,
+body.disconnected .property-writeonly {
+  border-left-color: #999 !important;
+}
+
+body.disconnected .switch-button.button-active {
+  background-color: #999 !important;
+  border-color: #777 !important;
+  color: #ddd !important;
+}
+
+body.disconnected .switch-button.button-inactive {
+  background-color: #f0f0f0 !important;
+  border-color: #ccc !important;
+  color: #999 !important;
+}
+
+body.disconnected .switch-checkbox.checkbox-checked {
+  background-color: #999 !important;
+  border-color: #777 !important;
+}
+
+body.disconnected .switch-checkbox.checkbox-unchecked {
+  border-color: #ccc !important;
+}
+
+body.disconnected::before {
+  content: "⚠ DISCONNECTED - Controls Disabled";
+  position: fixed;
+  top: 10px;
+  right: 10px;
+  background-color: #d9534f;
+  color: white;
+  padding: 8px 16px;
+  border-radius: 4px;
+  z-index: 1000;
+  font-weight: bold;
+  font-size: 14px;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
+}
+
 /* Legend section styling */
 .legend-section {
   margin: 20px 0;
diff --git a/indiweb/views/device_control.tpl b/indiweb/views/device_control.tpl
index e66b3d6..f7f1204 100644
--- a/indiweb/views/device_control.tpl
+++ b/indiweb/views/device_control.tpl
@@ -109,14 +109,19 @@
     var deviceName = "{{device_name}}";
     var deviceStructure = {};
     var lastUpdateTime = Date.now();
+    var lastPollTime = Date.now() / 1000; // Track last poll timestamp in seconds
     var messageLog = [];
     var maxMessages = 100;
+    var isConnected = true; // Track connection state
+    var reconnectAttempts = 0;
+    var maxReconnectAttempts = 10;
+    var reconnectTimeout = null;
 
     $(document).ready(function() {
       loadDeviceStructure();
 
-      // Start polling for changes every 2 seconds
-      setInterval(checkForUpdates, 2000);
+      // Start polling for changes every 1 second
+      setInterval(checkForUpdates, 1000);
 
       // Initialize message log
       addMessage("info", "Device control panel loaded", "System");
@@ -135,23 +140,29 @@
         deviceStructure = data;
         buildPropertyDisplay();
 
-        $("#device_status").removeClass("label-info label-danger")
-                          .addClass("label-success")
-                          .text("Connected - Auto-updating");
+        setConnectionState(true);
         addMessage("success", "Device structure loaded successfully", "System");
       }).fail(function(xhr, status, error) {
         console.error('Failed to load device structure:', error);
         $("#property-tab-content").html('<div class="alert alert-danger">Failed to load device structure. Make sure the device is connected and the INDI server is running.<br>Error: ' + (xhr.responseJSON?.detail || error) + '</div>');
 
-        $("#device_status").removeClass("label-info label-success")
-                          .addClass("label-danger")
-                          .text("Error");
+        setConnectionState(false);
         addMessage("error", "Failed to load device structure: " + (xhr.responseJSON?.detail || error), "System");
       });
     }
 
     function checkForUpdates() {
-      $.getJSON("/api/devices/" + encodeURIComponent(deviceName) + "/poll", function(dirtyProps) {
+      var currentTime = Date.now() / 1000;
+      var pollUrl = "/api/devices/" + encodeURIComponent(deviceName) + "/poll?since=" + lastPollTime;
+
+      $.getJSON(pollUrl, function(dirtyProps) {
+        lastPollTime = currentTime; // Update poll timestamp
+
+        // Connection is working - ensure we're in connected state
+        if (!isConnected) {
+          setConnectionState(true);
+        }
+
         if (dirtyProps && dirtyProps.length > 0) {
           console.log('Dirty properties:', dirtyProps);
           fetchUpdatedProperties(dirtyProps);
@@ -160,17 +171,68 @@
         console.error('Failed to check for updates:', error);
         addMessage("warning", "Connection check failed: " + error, "System");
 
-        // If we get a 503 (service unavailable), try to reload the structure
-        if (xhr.status === 503) {
-          $("#device_status").removeClass("label-success")
-                            .addClass("label-warning")
-                            .text("Reconnecting...");
-          addMessage("warning", "Device connection lost, attempting to reconnect...", "System");
-          setTimeout(loadDeviceStructure, 5000);
-        }
+        // Set disconnected state
+        setConnectionState(false);
+
+        // The automatic reconnection will be handled by setConnectionState(false)
       });
     }
 
+    function setConnectionState(connected) {
+      isConnected = connected;
+
+      if (connected) {
+        // Connection restored - reset reconnection state
+        reconnectAttempts = 0;
+        if (reconnectTimeout) {
+          clearTimeout(reconnectTimeout);
+          reconnectTimeout = null;
+        }
+
+        // Remove disconnected styling and re-enable controls
+        $('body').removeClass('disconnected');
+        $('.set-property-btn, .copy-value-btn, .switch-button, .switch-checkbox, .element-input').prop('disabled', false);
+
+        $("#device_status").removeClass("label-warning label-danger")
+                          .addClass("label-success")
+                          .text("Connected - Auto-updating");
+        addMessage("success", "Connection restored", "System");
+      } else {
+        // Add disconnected styling and disable all interactive controls
+        $('body').addClass('disconnected');
+        $('.set-property-btn, .copy-value-btn, .switch-button, .switch-checkbox, .element-input').prop('disabled', true);
+
+        $("#device_status").removeClass("label-success label-info")
+                          .addClass("label-danger")
+                          .text("Disconnected");
+        addMessage("error", "Connection lost - controls disabled", "System");
+
+        // Start automatic reconnection attempts
+        attemptReconnection();
+      }
+    }
+
+    function attemptReconnection() {
+      if (reconnectAttempts >= maxReconnectAttempts) {
+        $("#device_status").text("Disconnected - Max retries reached");
+        addMessage("error", "Maximum reconnection attempts reached. Please refresh the page.", "System");
+        return;
+      }
+
+      reconnectAttempts++;
+      var retryDelay = Math.min(5000 * reconnectAttempts, 30000); // Exponential backoff, max 30s
+
+      $("#device_status").removeClass("label-danger")
+                        .addClass("label-warning")
+                        .text("Reconnecting... (attempt " + reconnectAttempts + "/" + maxReconnectAttempts + ")");
+
+      addMessage("info", "Attempting reconnection #" + reconnectAttempts + " in " + (retryDelay/1000) + " seconds...", "System");
+
+      reconnectTimeout = setTimeout(function() {
+        loadDeviceStructure();
+      }, retryDelay);
+    }
+
     function fetchUpdatedProperties(propertyNames) {
       $.ajax({
         type: 'POST',
@@ -227,6 +289,8 @@
     }
 
     function updateProperties(updatedProps) {
+      var needsStructureReload = false;
+
       // Update the device structure with new property values
       for (var propName in updatedProps) {
         var updatedProp = updatedProps[propName];
@@ -235,6 +299,17 @@
         if (deviceStructure[groupName] && deviceStructure[groupName][propName]) {
           var oldProp = deviceStructure[groupName][propName];
 
+          // Check for CONNECTION property changes that might affect device structure
+          if (propName === 'CONNECTION') {
+            var oldConnectValue = oldProp.elements.CONNECT ? oldProp.elements.CONNECT.value : 'Off';
+            var newConnectValue = updatedProp.elements.CONNECT ? updatedProp.elements.CONNECT.value : 'Off';
+
+            if (oldConnectValue !== newConnectValue) {
+              addMessage("info", 'Device connection changed: ' + oldConnectValue + ' → ' + newConnectValue, deviceName);
+              needsStructureReload = true;
+            }
+          }
+
           // Log property changes for each element
           for (var elemName in updatedProp.elements) {
             var newElement = updatedProp.elements[elemName];
@@ -270,6 +345,15 @@
           updatePropertyUI(propName, updatedProp);
         }
       }
+
+      // If CONNECTION changed, reload the entire device structure after a short delay
+      // to allow new properties to be fully available
+      if (needsStructureReload) {
+        addMessage("info", "Device connection state changed, reloading device structure...", "System");
+        setTimeout(function() {
+          loadDeviceStructure();
+        }, 1500); // Wait 1.5 seconds for device to fully connect/disconnect
+      }
     }
 
     function updatePropertyUI(propName, prop) {
@@ -294,16 +378,10 @@
             $(buttonSelector).removeClass('button-active button-inactive button-clicked')
                            .addClass(isOn ? 'button-active' : 'button-inactive');
           } else if (rule === 'AnyOfMany') {
-            // Update checkbox style
+            // Update checkbox style (horizontal layout doesn't have status text)
             var checkboxSelector = '.switch-checkbox[data-property="' + propName + '"][data-element="' + elemName + '"]';
             $(checkboxSelector).removeClass('checkbox-checked checkbox-unchecked')
                               .addClass(isOn ? 'checkbox-checked' : 'checkbox-unchecked');
-
-            // Update status text
-            var statusSelector = '.switch-status[data-property="' + propName + '"][data-element="' + elemName + '"]';
-            $(statusSelector).removeClass('status-on status-off')
-                            .addClass(isOn ? 'status-on' : 'status-off')
-                            .text(element.value || 'Off');
           } else {
             // Fallback to original text update
             $(elemSelector).text(element.value || 'Off');
@@ -387,7 +465,7 @@
       for (var elemName in prop.elements) {
         var elem = prop.elements[elemName];
         html += '<div class="element-row">';
-        html += '<span class="element-label">' + (elem.label || elemName) + ':</span>';
+        html += '<span class="element-label" title="Element ID: ' + elemName + '">' + (elem.label || elemName) + ':</span>';
 
         if (isWritable) {
           // Writable property: current value + input controls
@@ -439,7 +517,7 @@
       for (var elemName in prop.elements) {
         var elem = prop.elements[elemName];
         html += '<div class="element-row">';
-        html += '<span class="element-label">' + (elem.label || elemName) + ':</span>';
+        html += '<span class="element-label" title="Element ID: ' + elemName + '">' + (elem.label || elemName) + ':</span>';
 
         if (isWritable) {
           // Writable property: current value + input controls
@@ -450,10 +528,6 @@
             html += '<span class="element-value element-current-value" data-property="' + prop.name + '" data-element="' + elemName + '">';
             html += (elem.formatted_value || elem.value || '0');
             html += '</span>';
-
-            if (elem.format) {
-              html += '<span class="text-muted"> (' + elem.format + ')</span>';
-            }
             if (elem.min !== undefined && elem.max !== undefined) {
               html += '<small class="text-muted"> [' + elem.min + ' - ' + elem.max + ']</small>';
             }
@@ -461,10 +535,7 @@
             html += '<button type="button" class="btn btn-xs btn-default copy-value-btn" ';
             html += 'data-property="' + prop.name + '" data-element="' + elemName + '">↦</button>';
           } else {
-            // For write-only properties, show format and range info without current value
-            if (elem.format) {
-              html += '<span class="text-muted">(' + elem.format + ')</span>';
-            }
+            // For write-only properties, show range info without current value
             if (elem.min !== undefined && elem.max !== undefined) {
               html += '<small class="text-muted"> [' + elem.min + ' - ' + elem.max + ']</small>';
             }
@@ -487,9 +558,6 @@
           html += (elem.formatted_value || elem.value || '0');
           html += '</span>';
 
-          if (elem.format) {
-            html += '<span class="text-muted"> (' + elem.format + ')</span>';
-          }
           if (elem.min !== undefined && elem.max !== undefined) {
             html += '<small class="text-muted"> [' + elem.min + ' - ' + elem.max + ']</small>';
           }
@@ -545,21 +613,15 @@
         }
         html += '</div>';
       } else if (rule === 'AnyOfMany') {
-        // Checkbox style - multiple can be selected
-        html += '<div class="switch-group switch-checkbox-group">';
+        // Checkbox style - multiple can be selected, display horizontally
+        html += '<div class="switch-group switch-checkbox-group-horizontal">';
         for (var elemName in prop.elements) {
           var elem = prop.elements[elemName];
           var isOn = elem.value === 'On' || elem.value === 'ON';
-          html += '<div class="switch-checkbox-item">';
-          html += '<div class="switch-control">';
+          html += '<div class="switch-checkbox-item-horizontal">';
           html += '<span class="switch-checkbox ' + (isOn ? 'checkbox-checked' : 'checkbox-unchecked') + '" ';
           html += 'data-property="' + prop.name + '" data-element="' + elemName + '"></span>';
-          html += '<span class="element-label">' + (elem.label || elemName) + '</span>';
-          html += '</div>';
-          html += '<span class="switch-status ' + (isOn ? 'status-on' : 'status-off') + '" ';
-          html += 'data-property="' + prop.name + '" data-element="' + elemName + '">';
-          html += (elem.value || 'Off');
-          html += '</span>';
+          html += '<span class="element-label" title="Element ID: ' + elemName + '">' + (elem.label || elemName) + '</span>';
           html += '</div>';
         }
         html += '</div>';
@@ -570,7 +632,7 @@
           var elem = prop.elements[elemName];
           var isOn = elem.value === 'On' || elem.value === 'ON';
           html += '<span class="switch-element ' + (isOn ? 'switch-on' : 'switch-off') + '">';
-          html += '<span class="element-label">' + (elem.label || elemName) + ':</span> ';
+          html += '<span class="element-label" title="Element ID: ' + elemName + '">' + (elem.label || elemName) + ':</span> ';
           html += '<strong data-property="' + prop.name + '" data-element="' + elemName + '">';
           html += (elem.value || 'Off');
           html += '</strong>';
@@ -590,7 +652,7 @@
         var lightClass = 'state-' + (elem.value || 'idle').toLowerCase();
         html += '<div class="element-row">';
         html += '<span class="light-indicator ' + lightClass + '" data-property="' + prop.name + '" data-element="' + elemName + '"></span>';
-        html += '<span class="element-label">' + (elem.label || elemName) + ': </span>';
+        html += '<span class="element-label" title="Element ID: ' + elemName + '">' + (elem.label || elemName) + ': </span>';
         html += '<span class="element-value" data-property="' + prop.name + '" data-element="' + elemName + '">';
         html += (elem.value || 'Unknown');
         html += '</span>';
@@ -747,6 +809,42 @@
         // Send switch update to backend
         setSwitchValue(propName, elemName, rule, $(this));
       });
+
+      // Event delegation for switch checkbox clicks (AnyOfMany)
+      $(document).on('click', '.switch-checkbox', function() {
+        var propName = $(this).data('property');
+        var elemName = $(this).data('element');
+
+        // Only handle clicks for writable properties
+        var propertyItem = $(this).closest('.property-item');
+        if (propertyItem.hasClass('property-readonly')) {
+          return; // Ignore clicks on read-only switches
+        }
+
+        // Toggle the checkbox state and send update
+        var isCurrentlyChecked = $(this).hasClass('checkbox-checked');
+        var newValue = isCurrentlyChecked ? 'Off' : 'On';
+
+        // For AnyOfMany, just toggle this specific element
+        var values = {};
+        values[elemName] = newValue;
+
+        addMessage("info", "Setting checkbox " + propName + "." + elemName + " to: " + newValue, "System");
+
+        $.ajax({
+          type: 'POST',
+          url: '/api/devices/' + encodeURIComponent(deviceName) + '/properties/' + encodeURIComponent(propName) + '/set',
+          data: JSON.stringify({ elements: values }),
+          contentType: 'application/json',
+          success: function(response) {
+            addMessage("success", "Checkbox " + propName + "." + elemName + " set successfully", deviceName);
+          },
+          error: function(xhr, status, error) {
+            var errorMsg = xhr.responseJSON?.detail || error;
+            addMessage("error", "Failed to set checkbox " + propName + "." + elemName + ": " + errorMsg, "System");
+          }
+        });
+      });
     }
 
     function setPropertyValues(propName, values) {

From 6b5afb7c4ea9eee06ed0da029f2dc8b7a2ea2c6f Mon Sep 17 00:00:00 2001
From: Jens Scheidtmann <Jens.Scheidtmann@gmail.com>
Date: Mon, 22 Sep 2025 17:31:40 +0200
Subject: [PATCH 04/16] small cleanup

---
 indiweb/indi_client.py | 25 +++----------------------
 1 file changed, 3 insertions(+), 22 deletions(-)

diff --git a/indiweb/indi_client.py b/indiweb/indi_client.py
index 87fc88d..3bc9b92 100644
--- a/indiweb/indi_client.py
+++ b/indiweb/indi_client.py
@@ -14,7 +14,7 @@
 
 class INDIClient(PyIndi.BaseClient):
     """
-    A simple INDI client for connecting to an INDI server and managing device properties.
+    An INDI client for connecting to an INDI server and managing device properties.
     Based on the INDI protocol: https://indilib.org/develop/developer-manual/101-standard-properties.html
     """
 
@@ -23,7 +23,6 @@ def __init__(self, host='localhost', port=7624):
         self.host = host
         self.port = port
         self.connected = False
-        self.devices = {}
         self.properties = defaultdict(dict)
         self.dirty_properties = defaultdict(set)  # Track changed properties per device
         self.property_timestamps = defaultdict(dict)  # Track when properties were last updated
@@ -58,27 +57,16 @@ def disconnect(self):
                 self.connected = False
                 logging.info("Disconnected from INDI server")
 
-    def send_message(self, message):
-        """Send a message to the INDI server (deprecated - use PyIndi methods)"""
-        # This method is kept for compatibility but should not be used
-        # with PyIndi client. Use sendNewProperty and other PyIndi methods instead.
-        logging.warning("send_message is deprecated with PyIndi client")
-        return False
-
     # PyIndi callback methods
     def newDevice(self, device):
         """Called when a new device is created"""
         device_name = device.getDeviceName()
-        if device_name not in self.devices:
-            self.devices[device_name] = {}
         logging.debug(f"New device: {device_name}")
         self._notify_listeners('device_added', device_name, None)
 
     def removeDevice(self, device):
         """Called when a device is removed"""
         device_name = device.getDeviceName()
-        if device_name in self.devices:
-            del self.devices[device_name]
         if device_name in self.properties:
             del self.properties[device_name]
         logging.debug(f"Removed device: {device_name}")
@@ -91,13 +79,10 @@ def newProperty(self, prop):
 
         property_data = self._convert_property_to_dict(prop)
 
-        if device_name not in self.devices:
-            self.devices[device_name] = {}
         if device_name not in self.properties:
             self.properties[device_name] = {}
 
         self.properties[device_name][prop_name] = property_data
-        self.devices[device_name][prop_name] = property_data
 
         # Mark property as dirty (new property)
         self.dirty_properties[device_name].add(prop_name)
@@ -118,11 +103,9 @@ def updateProperty(self, prop):
 
         if device_name in self.properties and prop_name in self.properties[device_name]:
             old_prop = self.properties[device_name][prop_name]
-            old_state = old_prop.get('state', 'idle')
 
             # Update the property data
             self.properties[device_name][prop_name] = property_data
-            self.devices[device_name][prop_name] = property_data
 
             # No need for completion tracking since all operations are now asynchronous
 
@@ -141,8 +124,6 @@ def removeProperty(self, prop):
 
         if device_name in self.properties and prop_name in self.properties[device_name]:
             del self.properties[device_name][prop_name]
-            if device_name in self.devices and prop_name in self.devices[device_name]:
-                del self.devices[device_name][prop_name]
             self._notify_listeners('property_deleted', device_name, {'name': prop_name})
 
     def newMessage(self, device, message_id):
@@ -321,7 +302,7 @@ def get_devices(self):
         if self.connected:
             pyindi_devices = self.getDevices()
             return [device.getDeviceName() for device in pyindi_devices]
-        return list(self.devices.keys())
+        return list(self.properties.keys())
 
     def get_device_properties(self, device_name):
         """Get all properties for a specific device"""
@@ -340,7 +321,7 @@ def wait_for_device(self, device_name, timeout=5):
                 device = self.getDevice(device_name)
                 if device:
                     return True
-            elif device_name in self.devices:
+            elif device_name in self.properties:
                 return True
             time.sleep(0.1)
         return False

From 3e9297ebae9dfc153187759676fc7bc1aeb5aa2a Mon Sep 17 00:00:00 2001
From: Jens Scheidtmann <Jens.Scheidtmann@gmail.com>
Date: Tue, 23 Sep 2025 09:27:28 +0200
Subject: [PATCH 05/16] Improve API docs.

---
 indiweb/main.py | 324 ++++++++++++++++++++++++++++++++++++++++++------
 1 file changed, 284 insertions(+), 40 deletions(-)

diff --git a/indiweb/main.py b/indiweb/main.py
index 3c3a7d0..670532a 100644
--- a/indiweb/main.py
+++ b/indiweb/main.py
@@ -564,23 +564,6 @@ async def restart_driver(label: str):
 ###############################################################################
 
 
-@app.get('/api/devices', tags=["Devices"])
-async def get_devices():
-    """
-    Gets a list of connected INDI devices as JSON.
-
-    Returns:
-        str: A JSON string representing the connected devices.
-    """
-    # Try INDI client first, fallback to old method
-    client = get_indi_client()
-    if client.is_connected():
-        devices = client.get_devices()
-        return JSONResponse(content=devices)
-    else:
-        return JSONResponse(content=indi_device.get_devices())
-
-
 @app.get('/device/{device_name}', response_class=HTMLResponse, tags=["Web Interface"])
 async def device_control_panel(request: Request, device_name: str):
     """
@@ -610,16 +593,78 @@ async def device_control_panel(request: Request, device_name: str):
         raise HTTPException(status_code=500, detail=f"Error loading device control panel: {str(e)}")
 
 
+@app.get('/api/devices', tags=["Devices"])
+async def get_devices():
+    """
+    Retrieve all currently connected INDI devices.
+
+    This endpoint returns a list of all devices currently connected
+    to the INDI server.
+
+    Returns:
+        list: Device names as an array of strings.
+
+    Example response:
+    ```json
+    [
+        "CCD Simulator",
+        "Telescope Simulator",
+        "..."
+    ]
+    ```
+
+    Raises:
+        503: Service unavailable if INDI server is not running
+    """
+    # Try INDI client first, fallback to old method
+    client = get_indi_client()
+    if client.is_connected():
+        devices = client.get_devices()
+        return JSONResponse(content=devices)
+    else:
+        return JSONResponse(content=indi_device.get_devices())
+
+
 @app.get('/api/devices/{device_name}/structure', tags=["Devices"])
 async def get_device_structure(device_name: str):
     """
-    Gets the property structure for a specific device.
+    Retrieve the complete property structure for a specific INDI device.
+
+    This endpoint provides the hierarchical structure of all properties available
+    on the specified device, organized by property groups. This is essential for
+    building dynamic user interfaces that can adapt to different device types.
 
     Args:
-        device_name (str): The name of the device.
+        device_name (str): The exact name of the INDI device (case-sensitive)
 
     Returns:
-        dict: A dictionary containing the device property structure grouped by property groups.
+        dict: Nested dictionary containing the complete device structure:
+            - Top level: property group names
+            - Second level: property names within each group
+            - Third level: property metadata and element definitions
+
+    Example response:
+    ```json
+    {
+        "Main Control": {
+            "CONNECTION": {
+                "type": "Switch",
+                "perm": "rw",
+                "state": "Ok",
+                "elements": {
+                    "CONNECT": {"value": "On", "label": "Connect", ...},
+                    "DISCONNECT": {"value": "Off", "label": "Disconnect", ...}
+                },
+                ...
+            }
+        },
+        ...
+    }
+    ```
+
+    Raises:
+        404: Device not found or not available
+        503: INDI server not running or client not connected
     """
     client = get_indi_client()
     if not client.is_connected():
@@ -651,14 +696,33 @@ async def get_device_structure(device_name: str):
 @app.get('/api/devices/{device_name}/poll', tags=["Devices"])
 async def poll_device_properties(device_name: str, since: float = None):
     """
-    Polls for properties that have changed since last check.
+    Poll for device properties that have changed since a specific timestamp.
+
+    This endpoint enables real-time monitoring by returning only the
+    properties that have been modified since the last check. 
 
     Args:
-        device_name (str): The name of the device.
-        since (float): Timestamp since when to check for changes (optional).
+        device_name (str): The exact name of the INDI device to monitor
+        since (float, optional): Unix timestamp (seconds since epoch) to check
+                                changes from. If omitted, returns all dirty properties.
 
     Returns:
-        list: A list of property names that have changed.
+        list: Array of property names that have changed since the specified timestamp
+
+    Example response:
+    ```json
+    [
+        "EQUATORIAL_EOD_COORD"
+    ]
+    ```
+
+    Example request:
+    ```
+    GET /api/devices/CCD Simulator/poll?since=1641024000.5
+    ```
+
+    Raises:
+        503: INDI client not connected to server
     """
     client = get_indi_client()
     if not client.is_connected():
@@ -671,14 +735,56 @@ async def poll_device_properties(device_name: str, since: float = None):
 @app.post('/api/devices/{device_name}/properties/batch', tags=["Devices"])
 async def get_changed_properties(device_name: str, request: Request):
     """
-    Gets current values for specified properties.
+    Retrieve current values for multiple properties in a single request.
+
+    This batch endpoint allows efficient retrieval of multiple property values
+    at once, reducing the number of HTTP requests needed for UI updates.
+    Particularly useful when updating dashboard displays or status panels.
 
     Args:
-        device_name (str): The name of the device.
-        request: The request containing the list of property names.
+        device_name (str): The exact name of the INDI device
+        request: JSON request body containing the list of property names to fetch
+
+    Request body schema:
+    ```json
+    {
+        "properties": ["property1", "property2", "property3"]
+    }
+    ```
 
     Returns:
-        dict: Current values for the specified properties.
+        dict: Current values for the specified properties, keyed by property name
+
+    Example request:
+    ```json
+    {
+        "properties": ["CCD_TEMPERATURE", "CCD_EXPOSURE"]
+    }
+    ```
+
+    Example response:
+    ```json
+    {
+        "CCD_TEMPERATURE": {
+            "type": "Number",
+            "state": "Ok",
+            "elements": {
+                "CCD_TEMPERATURE_VALUE": {"value": -10.5}
+            }
+        },
+        "CCD_EXPOSURE": {
+            "type": "Number",
+            "state": "Busy",
+            "elements": {
+                "CCD_EXPOSURE_VALUE": {"value": 30.0}
+            }
+        }
+    }
+    ```
+
+    Raises:
+        400: No property names provided in request,
+        503: INDI client not connected to server
     """
     client = get_indi_client()
     if not client.is_connected():
@@ -697,13 +803,39 @@ async def get_changed_properties(device_name: str, request: Request):
 @app.get('/api/devices/{device_name}/groups', tags=["Devices"])
 async def get_device_groups(device_name: str):
     """
-    Gets property groups for a specific device.
+    Retrieve property groups and their associated properties for a device.
+
+    This endpoint provides a simplified view of device properties organized by
+    functional groups (e.g., "Main Control", "Image Settings", "Cooler").
+    Useful for creating tabbed interfaces or organizing device controls.
 
     Args:
-        device_name (str): The name of the device.
+        device_name (str): The exact name of the INDI device
 
     Returns:
-        dict: A dictionary containing device property groups.
+        dict: Property groups with arrays of property names in each group
+
+    Example response:
+    ```json
+    {
+        "Main Control": [
+            "CONNECTION",
+            "ON_COORD_SET",
+            "EQUATORIAL_EOD_COORD",
+            ...
+        ],
+        "Connection": [
+            "DRIVER_INFO",
+            CONNECTION_MODE",
+            ...
+        ],
+        ...
+    }
+    ```
+
+    Raises:
+        404: Device not found
+        503: INDI client not connected to server
     """
     client = get_indi_client()
     if not client.is_connected():
@@ -727,14 +859,65 @@ async def get_device_groups(device_name: str):
 @app.get('/api/devices/{device_name}/properties/{property_name}', tags=["Devices"])
 async def get_device_property(device_name: str, property_name: str):
     """
-    Gets a specific property for a device.
+    Retrieve detailed information for a specific device property.
+
+    This endpoint provides metadata and current values for a single
+    property, including type information, permissions, state, and all elements
+    with their current values and constraints.
 
     Args:
-        device_name (str): The name of the device.
-        property_name (str): The name of the property.
+        device_name (str): The exact name of the INDI device
+        property_name (str): The exact name of the property to retrieve
 
     Returns:
-        dict: The property data.
+        dict: Complete property information including metadata and current values
+
+    Example response for a Number property:
+    ```json
+    {
+        "name": "TELESCOPE_TRACK_RATE",
+        "label": "Track Rates",
+        "group": "Main Control",
+        "type": "number",
+        "state": "idle",
+        "perm": "rw",
+        "rule": null,
+        "elements": {
+            "TRACK_RATE_RA": {
+            "name": "TRACK_RATE_RA",
+            "label": "RA (arcsecs/s)",
+            "value": "15.041067178670204",
+            "min": "-16384.0",
+            "max": "16384.0",
+            "step": "1e-06",
+            "format": "%.6f",
+            "formatted_value": "15.041067"
+        },
+        ...
+    }
+    ```
+    
+    Example response for a Switch property:
+    ```json
+	{
+        "name": "CONNECTION",
+        "label": "Connection",
+        "group": "Main Control",
+        "type": "switch",
+        "state": "ok",
+        "perm": "rw",
+        "rule": "OneOfMany",
+        "elements": {
+            "CONNECT": { "name": "CONNECT", "label": "Connect", "value": "On" },
+            "DISCONNECT": { "name": "DISCONNECT", "label": "Disconnect", "value": "Off" 
+        },
+        "device": "Telescope Simulator"
+    }
+    ```
+
+    Raises:
+        404: Property not found on the specified device
+        503: INDI client not connected to server
     """
     client = get_indi_client()
     if not client.is_connected():
@@ -750,15 +933,76 @@ async def get_device_property(device_name: str, property_name: str):
 @app.post('/api/devices/{device_name}/properties/{property_name}/set', tags=["Devices"])
 async def set_device_property(device_name: str, property_name: str, request: Request):
     """
-    Sets values for a specific property on a device.
+    Set new values for elements within a specific device property.
+
+    This endpoint allows modification of property element values, such as changing
+    exposure time, connecting/disconnecting devices, or adjusting temperature setpoints.
+    The property must be writable (permission 'rw' or 'wo') for the operation to succeed.
 
     Args:
-        device_name (str): The name of the device.
-        property_name (str): The name of the property.
-        request: The request containing the property element values.
+        device_name (str): The exact name of the INDI device
+        property_name (str): The exact name of the property to modify
+        request: JSON request body containing element values to set
+
+    Request body schema:
+    ```json
+    {
+        "elements": {
+            "element_name1": "value1",
+            "element_name2": "value2"
+        }
+    }
+    ```
 
     Returns:
-        dict: Success response or error details.
+        dict: Operation result with success status and details
+
+    Example request (setting exposure time):
+    ```json
+    {
+        "elements": {
+            "CCD_EXPOSURE_VALUE": 30.0
+        }
+    }
+    ```
+
+    Example request (connecting device):
+    ```json
+    {
+        "elements": {
+            "CONNECT": "On",
+            "DISCONNECT": "Off"
+        }
+    }
+    ```
+
+    Example success response:
+    ```json
+    {
+        "success": true,
+        "message": "Property set successfully",
+        "device": "CCD Simulator",
+        "property": "CCD_EXPOSURE",
+        "elements": {
+            "CCD_EXPOSURE_VALUE": 30.0
+        }
+    }
+    ```
+
+    Example error response:
+    ```json
+    {
+        "success": false,
+        "error": "Property is read-only",
+        "error_type": "permission_denied"
+    }
+    ```
+
+    Raises:
+        400: No element values provided or invalid values
+        404: Property or element not found
+        422: Property is read-only or validation failed
+        503: INDI client not connected to server
     """
     client = get_indi_client()
     if not client.is_connected():

From 55c60105cd75e9223ee86200477b025397eb134f Mon Sep 17 00:00:00 2001
From: Jens Scheidtmann <Jens.Scheidtmann@gmail.com>
Date: Tue, 23 Sep 2025 09:27:33 +0200
Subject: [PATCH 06/16] Add author

---
 AUTHORS | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/AUTHORS b/AUTHORS
index f4e931f..349eab4 100644
--- a/AUTHORS
+++ b/AUTHORS
@@ -1,3 +1,3 @@
 Jasem Mutlaq <mutlaqja@ikarustech.com>
 Juan Menendez <juanmb@gmail.com>
-
+Jens Scheidtmann <jens.scheidtmann@gmail.com>

From 95c309a5f5a3a1a3fff9aa1009d5f05419182f5f Mon Sep 17 00:00:00 2001
From: Jens Scheidtmann <Jens.Scheidtmann@gmail.com>
Date: Thu, 16 Oct 2025 08:48:04 +0200
Subject: [PATCH 07/16] Add info icons for switches, showing the technical
 names of the widgets.

---
 indiweb/views/css/device_control.css | 82 ++++++++++++++++++++++++++++
 indiweb/views/device_control.tpl     | 16 ++++++
 2 files changed, 98 insertions(+)

diff --git a/indiweb/views/css/device_control.css b/indiweb/views/css/device_control.css
index 6b1f34e..ea75e20 100644
--- a/indiweb/views/css/device_control.css
+++ b/indiweb/views/css/device_control.css
@@ -904,6 +904,88 @@ body.disconnected::before {
   border-left: 4px solid #428bca;
 }
 
+/* Switch info icon styling */
+.switch-info-icon {
+  display: inline-block;
+  margin-left: 8px;
+  cursor: help;
+  color: #5bc0de;
+  font-size: 16px;
+  font-weight: bold;
+  transition: color 0.2s ease;
+  position: relative;
+}
+
+.switch-info-icon:hover {
+  color: #31b0d5;
+  text-shadow: 0 0 3px rgba(91, 192, 222, 0.5);
+}
+
+/* Custom tooltip */
+.switch-info-tooltip {
+  visibility: hidden;
+  opacity: 0;
+  position: absolute;
+  z-index: 1000;
+  background-color: #fff;
+  color: #000;
+  text-align: left;
+  border-radius: 4px;
+  padding: 10px 12px;
+  left: 100%;
+  margin-left: 10px;
+  top: 50%;
+  transform: translateY(-50%);
+  white-space: nowrap;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  border: 1px solid #ccc;
+  transition: opacity 0.3s ease, visibility 0.3s ease;
+  font-size: 13px;
+  font-weight: normal;
+}
+
+.switch-info-tooltip::before {
+  content: '';
+  position: absolute;
+  top: 50%;
+  right: 100%;
+  margin-top: -5px;
+  border-width: 5px;
+  border-style: solid;
+  border-color: transparent #fff transparent transparent;
+}
+
+.switch-info-tooltip::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  right: 100%;
+  margin-top: -6px;
+  border-width: 6px;
+  border-style: solid;
+  border-color: transparent #ccc transparent transparent;
+  z-index: -1;
+}
+
+.switch-info-icon:hover .switch-info-tooltip {
+  visibility: visible;
+  opacity: 1;
+}
+
+.switch-tooltip-title {
+  font-weight: bold;
+  margin-bottom: 6px;
+  border-bottom: 1px solid #ddd;
+  padding-bottom: 4px;
+  color: #333;
+}
+
+.switch-tooltip-item {
+  padding: 2px 0;
+  line-height: 1.4;
+  color: #000;
+}
+
 /* Property type indicators */
 .property-type-text::before {
   content: "T";
diff --git a/indiweb/views/device_control.tpl b/indiweb/views/device_control.tpl
index f7f1204..bd8f38f 100644
--- a/indiweb/views/device_control.tpl
+++ b/indiweb/views/device_control.tpl
@@ -443,6 +443,22 @@
         typeInfo += ' (' + prop.rule + ')';
       }
       html += '<small class="text-muted">(' + prop.name + ') - ' + typeInfo + '</small>';
+
+      // Add info icon for switch properties with tooltip showing names and labels
+      if (prop.type === 'switch') {
+        var tooltipContent = '<div class="switch-tooltip-title">Switch elements in order:</div>';
+        var elementIndex = 1;
+        for (var elemName in prop.elements) {
+          var elem = prop.elements[elemName];
+          tooltipContent += '<div class="switch-tooltip-item">' + elementIndex + '. ' + (elem.label || elemName) + ' (Element ID: ' + elemName + ')</div>';
+          elementIndex++;
+        }
+        html += '<span class="switch-info-icon" style="margin-left: 8px; cursor: help; color: #5bc0de; font-size: 16px;">';
+        html += 'ⓘ';
+        html += '<span class="switch-info-tooltip">' + tooltipContent + '</span>';
+        html += '</span>';
+      }
+
       html += '</div>';
 
       if (prop.type === 'text') {

From e08635bc415849aa3ea850452fd9ae8a2bf31270 Mon Sep 17 00:00:00 2001
From: Jens Scheidtmann <Jens.Scheidtmann@gmail.com>
Date: Sun, 2 Nov 2025 15:00:43 +0100
Subject: [PATCH 08/16] Use event based updates for device display.

---
 indiweb/evt_indi_client.py       | 120 ++++++++++++++++++++++++
 indiweb/main.py                  |  79 +++++++++++++++-
 indiweb/views/device_control.tpl | 151 ++++++++++++++++++++++---------
 3 files changed, 304 insertions(+), 46 deletions(-)
 create mode 100644 indiweb/evt_indi_client.py

diff --git a/indiweb/evt_indi_client.py b/indiweb/evt_indi_client.py
new file mode 100644
index 0000000..065d9ee
--- /dev/null
+++ b/indiweb/evt_indi_client.py
@@ -0,0 +1,120 @@
+#!/usr/bin/env python
+
+import logging
+import asyncio
+from typing import Dict, Set
+from fastapi import WebSocket
+from collections import defaultdict
+
+
+class WebSocketManager:
+    """
+    Manages WebSocket connections for INDI device updates.
+    Bridges INDI client callbacks to WebSocket clients.
+    """
+
+    def __init__(self):
+        # Dictionary of device_name -> set of WebSocket connections
+        self.connections: Dict[str, Set[WebSocket]] = defaultdict(set)
+        # Lock for thread-safe operations
+        self._lock = asyncio.Lock()
+
+    async def connect(self, websocket: WebSocket, device_name: str):
+        """Register a new WebSocket connection for a device"""
+        await websocket.accept()
+        async with self._lock:
+            self.connections[device_name].add(websocket)
+        logging.info(f"WebSocket connected for device: {device_name} (total connections: {len(self.connections[device_name])})")
+
+    async def disconnect(self, websocket: WebSocket, device_name: str):
+        """Remove a WebSocket connection for a device"""
+        async with self._lock:
+            self.connections[device_name].discard(websocket)
+        logging.info(f"WebSocket disconnected for device: {device_name} (remaining connections: {len(self.connections[device_name])})")
+
+    async def send_event(self, device_name: str, event_type: str, data: dict):
+        """
+        Send an event to all WebSocket clients listening to a specific device.
+
+        Args:
+            device_name: Name of the device
+            event_type: Type of event (property_updated, property_defined, message, etc.)
+            data: Event data to send
+        """
+        if device_name not in self.connections or not self.connections[device_name]:
+            return
+
+        message = {
+            "event": event_type,
+            "device": device_name,
+            "data": data
+        }
+
+        # Create a copy of connections to avoid modification during iteration
+        async with self._lock:
+            connections = list(self.connections[device_name])
+
+        # Send to all connected clients
+        disconnected = []
+        for websocket in connections:
+            try:
+                await websocket.send_json(message)
+            except Exception as e:
+                logging.error(f"Error sending to WebSocket for {device_name}: {e}")
+                disconnected.append(websocket)
+
+        # Clean up disconnected clients
+        if disconnected:
+            async with self._lock:
+                for websocket in disconnected:
+                    self.connections[device_name].discard(websocket)
+
+    def get_connection_count(self, device_name: str = None) -> int:
+        """Get the number of active connections for a device or all devices"""
+        if device_name:
+            return len(self.connections.get(device_name, set()))
+        return sum(len(conns) for conns in self.connections.values())
+
+
+# Global WebSocket manager instance
+websocket_manager = WebSocketManager()
+
+
+def get_websocket_manager() -> WebSocketManager:
+    """Get the global WebSocket manager instance"""
+    return websocket_manager
+
+
+def create_indi_event_listener(indi_client, event_loop):
+    """
+    Create and register an INDI event listener that forwards events to WebSocket clients.
+
+    Args:
+        indi_client: The INDI client instance
+        event_loop: The asyncio event loop to use for async operations
+
+    Returns:
+        The listener function (for potential removal later)
+    """
+    manager = get_websocket_manager()
+
+    def indi_event_listener(event_type: str, device_name: str, data: dict):
+        """
+        Callback for INDI client events. Runs in INDI client thread.
+        Forwards events to WebSocket clients in the main event loop.
+        """
+        if not data:
+            return
+
+        # Schedule the coroutine in the main event loop (thread-safe)
+        asyncio.run_coroutine_threadsafe(
+            manager.send_event(device_name, event_type, data),
+            event_loop
+        )
+
+    # Register the listener with the INDI client
+    indi_client.add_listener(indi_event_listener)
+
+    logging.info("INDI event listener registered with WebSocket manager")
+
+    return indi_event_listener
diff --git a/indiweb/main.py b/indiweb/main.py
index 670532a..bd1b9a3 100644
--- a/indiweb/main.py
+++ b/indiweb/main.py
@@ -10,7 +10,7 @@
 import platform
 from importlib_metadata import version
 
-from fastapi import FastAPI, Request, Response, HTTPException
+from fastapi import FastAPI, Request, Response, HTTPException, WebSocket, WebSocketDisconnect
 from fastapi.staticfiles import StaticFiles
 from fastapi.templating import Jinja2Templates
 from fastapi.responses import HTMLResponse, JSONResponse, RedirectResponse
@@ -21,6 +21,7 @@
 from .database import Database
 from .device import Device
 from .indi_client import get_indi_client, start_indi_client, stop_indi_client
+from .evt_indi_client import get_websocket_manager, create_indi_event_listener
 
 # default settings
 WEB_HOST = '0.0.0.0'
@@ -95,6 +96,7 @@
 
 saved_profile = None
 active_profile = ""
+evt_listener_initialized = False
 
 
 def start_profile(profile):
@@ -375,6 +377,7 @@ async def start_server(profile: str, response: Response):
     saved_profile = profile
     global active_profile
     active_profile = profile
+    global evt_listener_initialized
     response.set_cookie(key="indiserver_profile", value=profile, max_age=3600000, path='/')
     start_profile(profile)
 
@@ -386,6 +389,15 @@ async def start_client():
         port = profile_info.get('port', 7624) if profile_info else 7624
         start_indi_client('localhost', port)
 
+        # Initialize event listener for WebSocket updates
+        global evt_listener_initialized
+        if not evt_listener_initialized:
+            indi_client = get_indi_client()
+            event_loop = asyncio.get_event_loop()
+            create_indi_event_listener(indi_client, event_loop)
+            evt_listener_initialized = True
+            logging.info("INDI event listener initialized for WebSocket updates")
+
     asyncio.create_task(start_client())
 
     return {"message": f"INDI server started for profile {profile}"}
@@ -666,6 +678,7 @@ async def get_device_structure(device_name: str):
         404: Device not found or not available
         503: INDI server not running or client not connected
     """
+    global evt_listener_initialized
     client = get_indi_client()
     if not client.is_connected():
         # Try to connect to INDI server
@@ -679,6 +692,14 @@ async def get_device_structure(device_name: str):
 
             if not start_indi_client('localhost', port):
                 raise HTTPException(status_code=503, detail="Cannot connect to INDI server")
+
+            # Initialize event listener for WebSocket updates if not already done
+            if not evt_listener_initialized:
+                import asyncio
+                event_loop = asyncio.get_event_loop()
+                create_indi_event_listener(client, event_loop)
+                evt_listener_initialized = True
+                logging.info("INDI event listener initialized for WebSocket updates (via structure endpoint)")
         else:
             raise HTTPException(status_code=503, detail="INDI server is not running")
 
@@ -1063,6 +1084,62 @@ async def set_device_property(device_name: str, property_name: str, request: Req
 
 
 
+###############################################################################
+# WebSocket endpoints
+###############################################################################
+
+@app.websocket('/evt_device/{device_name}')
+async def evt_device_websocket(websocket: WebSocket, device_name: str):
+    """
+    WebSocket endpoint for real-time device property updates.
+
+    This endpoint provides a persistent connection for receiving real-time updates
+    from INDI devices. Events are pushed to clients as soon as properties change,
+    eliminating the need for polling.
+
+    Args:
+        websocket: The WebSocket connection
+        device_name: The exact name of the INDI device to monitor
+
+    Events sent to client:
+        - property_updated: When a property value changes
+        - property_defined: When a new property is created
+        - property_deleted: When a property is removed
+        - message: When the device sends a message
+
+    Example event:
+    ```json
+    {
+        "event": "property_updated",
+        "device": "CCD Simulator",
+        "data": {
+            "name": "CCD_TEMPERATURE",
+            "type": "number",
+            "state": "ok",
+            "elements": {...}
+        }
+    }
+    ```
+    """
+    manager = get_websocket_manager()
+    await manager.connect(websocket, device_name)
+
+    try:
+        # Keep the connection alive and listen for client messages
+        while True:
+            # Wait for any message from client (used for keepalive)
+            data = await websocket.receive_text()
+            # Echo back for keepalive confirmation
+            if data == "ping":
+                await websocket.send_text("pong")
+    except WebSocketDisconnect:
+        logging.info(f"WebSocket disconnected for device: {device_name}")
+    except Exception as e:
+        logging.error(f"WebSocket error for device {device_name}: {e}")
+    finally:
+        await manager.disconnect(websocket, device_name)
+
+
 ###############################################################################
 # System control endpoints
 ###############################################################################
diff --git a/indiweb/views/device_control.tpl b/indiweb/views/device_control.tpl
index bd8f38f..3d0ee3e 100644
--- a/indiweb/views/device_control.tpl
+++ b/indiweb/views/device_control.tpl
@@ -23,7 +23,7 @@
               <div class="form-group">
                 <label>Device Status:</label>
                 <span id="device_status" class="label label-info">Loading...</span>
-                <small class="text-muted" style="margin-left: 10px;">Properties update automatically</small>
+                <small class="text-muted" style="margin-left: 10px;">Real-time updates via WebSocket</small>
               </div>
             </div>
           </div>
@@ -109,25 +109,26 @@
     var deviceName = "{{device_name}}";
     var deviceStructure = {};
     var lastUpdateTime = Date.now();
-    var lastPollTime = Date.now() / 1000; // Track last poll timestamp in seconds
     var messageLog = [];
     var maxMessages = 100;
-    var isConnected = true; // Track connection state
+    var isConnected = false; // Track connection state
     var reconnectAttempts = 0;
     var maxReconnectAttempts = 10;
     var reconnectTimeout = null;
+    var websocket = null;
+    var keepaliveInterval = null;
 
     $(document).ready(function() {
       loadDeviceStructure();
 
-      // Start polling for changes every 1 second
-      setInterval(checkForUpdates, 1000);
-
       // Initialize message log
       addMessage("info", "Device control panel loaded", "System");
 
       // Set up event handlers for copy and set buttons
       setupPropertyControls();
+
+      // Connect to WebSocket for real-time updates
+      connectWebSocket();
     });
 
     function loadDeviceStructure() {
@@ -151,31 +152,108 @@
       });
     }
 
-    function checkForUpdates() {
-      var currentTime = Date.now() / 1000;
-      var pollUrl = "/api/devices/" + encodeURIComponent(deviceName) + "/poll?since=" + lastPollTime;
+    function connectWebSocket() {
+      // Close existing connection if any
+      if (websocket) {
+        websocket.close();
+        websocket = null;
+      }
+
+      // Clear existing keepalive
+      if (keepaliveInterval) {
+        clearInterval(keepaliveInterval);
+        keepaliveInterval = null;
+      }
+
+      // Determine WebSocket protocol (ws:// or wss://)
+      var wsProtocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+      var wsUrl = wsProtocol + '//' + window.location.host + '/evt_device/' + encodeURIComponent(deviceName);
 
-      $.getJSON(pollUrl, function(dirtyProps) {
-        lastPollTime = currentTime; // Update poll timestamp
+      addMessage("info", "Connecting to WebSocket: " + wsUrl, "System");
 
-        // Connection is working - ensure we're in connected state
-        if (!isConnected) {
+      try {
+        websocket = new WebSocket(wsUrl);
+
+        websocket.onopen = function(event) {
+          console.log('WebSocket connected:', event);
+          addMessage("success", "WebSocket connected - receiving real-time updates", "System");
           setConnectionState(true);
-        }
 
-        if (dirtyProps && dirtyProps.length > 0) {
-          console.log('Dirty properties:', dirtyProps);
-          fetchUpdatedProperties(dirtyProps);
-        }
-      }).fail(function(xhr, status, error) {
-        console.error('Failed to check for updates:', error);
-        addMessage("warning", "Connection check failed: " + error, "System");
+          // Start keepalive ping every 30 seconds
+          keepaliveInterval = setInterval(function() {
+            if (websocket && websocket.readyState === WebSocket.OPEN) {
+              websocket.send("ping");
+            }
+          }, 30000);
+        };
+
+        websocket.onmessage = function(event) {
+          console.log('WebSocket message received:', event.data);
 
-        // Set disconnected state
+          // Handle pong response
+          if (event.data === "pong") {
+            return;
+          }
+
+          try {
+            var message = JSON.parse(event.data);
+            handleWebSocketEvent(message);
+          } catch (e) {
+            console.error('Failed to parse WebSocket message:', e);
+            addMessage("error", "Failed to parse WebSocket message: " + e, "System");
+          }
+        };
+
+        websocket.onerror = function(error) {
+          console.error('WebSocket error:', error);
+          addMessage("error", "WebSocket error occurred", "System");
+        };
+
+        websocket.onclose = function(event) {
+          console.log('WebSocket closed:', event);
+          addMessage("warning", "WebSocket connection closed", "System");
+          setConnectionState(false);
+
+          // Clear keepalive
+          if (keepaliveInterval) {
+            clearInterval(keepaliveInterval);
+            keepaliveInterval = null;
+          }
+        };
+      } catch (e) {
+        console.error('Failed to create WebSocket:', e);
+        addMessage("error", "Failed to create WebSocket: " + e, "System");
         setConnectionState(false);
+      }
+    }
 
-        // The automatic reconnection will be handled by setConnectionState(false)
-      });
+    function handleWebSocketEvent(message) {
+      var eventType = message.event;
+      var deviceName = message.device;
+      var data = message.data;
+
+      console.log('Handling event:', eventType, 'for device:', deviceName, 'data:', data);
+
+      if (eventType === 'property_updated' || eventType === 'property_defined') {
+        // Update the property in the UI
+        var propName = data.name;
+        var updatedProps = {};
+        updatedProps[propName] = data;
+        updateProperties(updatedProps);
+      } else if (eventType === 'property_deleted') {
+        // Handle property deletion (reload structure)
+        addMessage("info", "Property deleted: " + data.name, deviceName);
+        setTimeout(function() {
+          loadDeviceStructure();
+        }, 500);
+      } else if (eventType === 'message') {
+        // Handle device messages
+        addMessage("info", data.message, deviceName);
+      } else if (eventType === 'device_added') {
+        addMessage("success", "Device added: " + deviceName, "System");
+      } else if (eventType === 'device_deleted') {
+        addMessage("warning", "Device removed: " + deviceName, "System");
+      }
     }
 
     function setConnectionState(connected) {
@@ -195,8 +273,8 @@
 
         $("#device_status").removeClass("label-warning label-danger")
                           .addClass("label-success")
-                          .text("Connected - Auto-updating");
-        addMessage("success", "Connection restored", "System");
+                          .text("Connected - Real-time updates");
+        addMessage("success", "WebSocket connection restored", "System");
       } else {
         // Add disconnected styling and disable all interactive controls
         $('body').addClass('disconnected');
@@ -226,30 +304,13 @@
                         .addClass("label-warning")
                         .text("Reconnecting... (attempt " + reconnectAttempts + "/" + maxReconnectAttempts + ")");
 
-      addMessage("info", "Attempting reconnection #" + reconnectAttempts + " in " + (retryDelay/1000) + " seconds...", "System");
+      addMessage("info", "Attempting WebSocket reconnection #" + reconnectAttempts + " in " + (retryDelay/1000) + " seconds...", "System");
 
       reconnectTimeout = setTimeout(function() {
-        loadDeviceStructure();
+        connectWebSocket();
       }, retryDelay);
     }
 
-    function fetchUpdatedProperties(propertyNames) {
-      $.ajax({
-        type: 'POST',
-        url: '/api/devices/' + encodeURIComponent(deviceName) + '/properties/batch',
-        data: JSON.stringify({ properties: propertyNames }),
-        contentType: 'application/json',
-        success: function(updatedProps) {
-          console.log('Updated properties:', updatedProps);
-          updateProperties(updatedProps);
-          addMessage("info", "Updated " + Object.keys(updatedProps).length + " properties", "System");
-        },
-        error: function(xhr, status, error) {
-          console.error('Failed to fetch updated properties:', error);
-          addMessage("error", "Failed to fetch property updates: " + error, "System");
-        }
-      });
-    }
 
     function buildPropertyDisplay() {
       // Remember currently active tab

From 27a0418edd095baf55dc99b1a385b7c527f9a9ad Mon Sep 17 00:00:00 2001
From: Jens Scheidtmann <Jens.Scheidtmann@gmail.com>
Date: Sun, 2 Nov 2025 15:07:01 +0100
Subject: [PATCH 09/16] Remove polling endpoints and change tracking

---
 .gitignore             |   2 +
 indiweb/indi_client.py |  53 --------------------
 indiweb/main.py        | 107 -----------------------------------------
 3 files changed, 2 insertions(+), 160 deletions(-)

diff --git a/.gitignore b/.gitignore
index 62cf441..c40a041 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,6 +1,8 @@
 *.pyc
 *.egg-info
 *~
+.pytest_cache/
+tests/__pycache__
 __pycache__/**
 /build
 /dist
diff --git a/indiweb/indi_client.py b/indiweb/indi_client.py
index 3bc9b92..4201834 100644
--- a/indiweb/indi_client.py
+++ b/indiweb/indi_client.py
@@ -24,11 +24,8 @@ def __init__(self, host='localhost', port=7624):
         self.port = port
         self.connected = False
         self.properties = defaultdict(dict)
-        self.dirty_properties = defaultdict(set)  # Track changed properties per device
-        self.property_timestamps = defaultdict(dict)  # Track when properties were last updated
         self.auto_connect_devices = True
         self.listeners = []
-        # Removed pending_operations - all operations are now asynchronous
         self.connection_lock = threading.Lock()
 
     def connect(self):
@@ -84,9 +81,6 @@ def newProperty(self, prop):
 
         self.properties[device_name][prop_name] = property_data
 
-        # Mark property as dirty (new property)
-        self.dirty_properties[device_name].add(prop_name)
-
         # Auto-connect device if it has a CONNECTION property
         if self.auto_connect_devices and prop_name == 'CONNECTION':
             self._auto_connect_device(device_name)
@@ -102,18 +96,9 @@ def updateProperty(self, prop):
         property_data = self._convert_property_to_dict(prop)
 
         if device_name in self.properties and prop_name in self.properties[device_name]:
-            old_prop = self.properties[device_name][prop_name]
-
             # Update the property data
             self.properties[device_name][prop_name] = property_data
 
-            # No need for completion tracking since all operations are now asynchronous
-
-            # Mark property as dirty (updated property)
-            self.dirty_properties[device_name].add(prop_name)
-            # Update timestamp for this property
-            self.property_timestamps[device_name][prop_name] = time.time()
-
             # Notify listeners
             self._notify_listeners('property_updated', device_name, property_data)
 
@@ -521,44 +506,6 @@ def get_device_structure(self, device_name):
 
         return structure
 
-    def get_dirty_properties(self, device_name, since_timestamp=None):
-        """Get list of properties that have changed since last check"""
-        if since_timestamp is None:
-            since_timestamp = time.time() - 10  # Default: get changes from last 10 seconds
-
-        dirty_props = []
-        current_time = time.time()
-
-        for prop_name, update_time in self.property_timestamps.get(device_name, {}).items():
-            if update_time > since_timestamp:
-                dirty_props.append(prop_name)
-
-        # Clean up old timestamps (older than 60 seconds)
-        cutoff_time = current_time - 60
-        if device_name in self.property_timestamps:
-            props_to_remove = [
-                prop_name for prop_name, update_time
-                in self.property_timestamps[device_name].items()
-                if update_time < cutoff_time
-            ]
-            for prop_name in props_to_remove:
-                del self.property_timestamps[device_name][prop_name]
-                self.dirty_properties[device_name].discard(prop_name)
-
-        return dirty_props
-
-    def get_changed_properties(self, device_name, property_names):
-        """Get current values for specified properties"""
-        if device_name not in self.properties:
-            return {}
-
-        result = {}
-        for prop_name in property_names:
-            if prop_name in self.properties[device_name]:
-                result[prop_name] = self.properties[device_name][prop_name]
-
-        return result
-
     def _format_number_value(self, value, format_str):
         """Format a number value according to INDI printf-style format"""
         if not format_str or not value:
diff --git a/indiweb/main.py b/indiweb/main.py
index bd1b9a3..60e4671 100644
--- a/indiweb/main.py
+++ b/indiweb/main.py
@@ -714,113 +714,6 @@ async def get_device_structure(device_name: str):
     return JSONResponse(content=structure)
 
 
-@app.get('/api/devices/{device_name}/poll', tags=["Devices"])
-async def poll_device_properties(device_name: str, since: float = None):
-    """
-    Poll for device properties that have changed since a specific timestamp.
-
-    This endpoint enables real-time monitoring by returning only the
-    properties that have been modified since the last check. 
-
-    Args:
-        device_name (str): The exact name of the INDI device to monitor
-        since (float, optional): Unix timestamp (seconds since epoch) to check
-                                changes from. If omitted, returns all dirty properties.
-
-    Returns:
-        list: Array of property names that have changed since the specified timestamp
-
-    Example response:
-    ```json
-    [
-        "EQUATORIAL_EOD_COORD"
-    ]
-    ```
-
-    Example request:
-    ```
-    GET /api/devices/CCD Simulator/poll?since=1641024000.5
-    ```
-
-    Raises:
-        503: INDI client not connected to server
-    """
-    client = get_indi_client()
-    if not client.is_connected():
-        raise HTTPException(status_code=503, detail="INDI client not connected")
-
-    dirty_props = client.get_dirty_properties(device_name, since)
-    return JSONResponse(content=dirty_props)
-
-
-@app.post('/api/devices/{device_name}/properties/batch', tags=["Devices"])
-async def get_changed_properties(device_name: str, request: Request):
-    """
-    Retrieve current values for multiple properties in a single request.
-
-    This batch endpoint allows efficient retrieval of multiple property values
-    at once, reducing the number of HTTP requests needed for UI updates.
-    Particularly useful when updating dashboard displays or status panels.
-
-    Args:
-        device_name (str): The exact name of the INDI device
-        request: JSON request body containing the list of property names to fetch
-
-    Request body schema:
-    ```json
-    {
-        "properties": ["property1", "property2", "property3"]
-    }
-    ```
-
-    Returns:
-        dict: Current values for the specified properties, keyed by property name
-
-    Example request:
-    ```json
-    {
-        "properties": ["CCD_TEMPERATURE", "CCD_EXPOSURE"]
-    }
-    ```
-
-    Example response:
-    ```json
-    {
-        "CCD_TEMPERATURE": {
-            "type": "Number",
-            "state": "Ok",
-            "elements": {
-                "CCD_TEMPERATURE_VALUE": {"value": -10.5}
-            }
-        },
-        "CCD_EXPOSURE": {
-            "type": "Number",
-            "state": "Busy",
-            "elements": {
-                "CCD_EXPOSURE_VALUE": {"value": 30.0}
-            }
-        }
-    }
-    ```
-
-    Raises:
-        400: No property names provided in request,
-        503: INDI client not connected to server
-    """
-    client = get_indi_client()
-    if not client.is_connected():
-        raise HTTPException(status_code=503, detail="INDI client not connected")
-
-    data = await request.json()
-    property_names = data.get('properties', [])
-
-    if not property_names:
-        raise HTTPException(status_code=400, detail="No property names provided")
-
-    properties = client.get_changed_properties(device_name, property_names)
-    return JSONResponse(content=properties)
-
-
 @app.get('/api/devices/{device_name}/groups', tags=["Devices"])
 async def get_device_groups(device_name: str):
     """

From f942dac994aed44cd21c85de75238fad0178125b Mon Sep 17 00:00:00 2001
From: Jens Scheidtmann <Jens.Scheidtmann@gmail.com>
Date: Sun, 2 Nov 2025 15:20:40 +0100
Subject: [PATCH 10/16] Add --development argument to show technical infos only
 when present.

---
 indiweb/main.py                  |  10 ++-
 indiweb/views/device_control.tpl | 101 +++++++++++++++++--------------
 2 files changed, 63 insertions(+), 48 deletions(-)

diff --git a/indiweb/main.py b/indiweb/main.py
index 60e4671..2f68267 100644
--- a/indiweb/main.py
+++ b/indiweb/main.py
@@ -54,8 +54,10 @@
 parser.add_argument('--logfile', '-l', help='log file name')
 parser.add_argument('--server', '-s', default='standalone',
                     help='HTTP server [standalone|apache] (default: standalone')
-parser.add_argument('--sudo', '-S', action='store_true',                    
+parser.add_argument('--sudo', '-S', action='store_true',
                     help='Run poweroff/reboot commands with sudo')
+parser.add_argument('--development', '-d', action='store_true',
+                    help='Show development information in device control panel (property names, element IDs, etc.)')
 
 args = parser.parse_args()
 
@@ -598,7 +600,11 @@ async def device_control_panel(request: Request, device_name: str):
 
         return templates.TemplateResponse(
             "device_control.tpl",
-            {"request": request, "device_name": device_name}
+            {
+                "request": request,
+                "device_name": device_name,
+                "development_mode": args.development
+            }
         )
     except Exception as e:
         logging.error(f"Error loading device control panel for {device_name}: {e}")
diff --git a/indiweb/views/device_control.tpl b/indiweb/views/device_control.tpl
index 3d0ee3e..49803ef 100644
--- a/indiweb/views/device_control.tpl
+++ b/indiweb/views/device_control.tpl
@@ -14,22 +14,13 @@
   <div class="container-fluid">
     <div class="row">
       <div class="col-md-12">
-        <h3>{{device_name}} Control Panel</h3>
+        <h3>
+          {{device_name}} Control Panel
+          <span id="device_status" class="label label-info" style="display: none; margin-left: 10px;">Loading...</span>
+        </h3>
 
-        <!-- Device Status -->
-        <div class="connection-controls">
-          <div class="row">
-            <div class="col-md-12">
-              <div class="form-group">
-                <label>Device Status:</label>
-                <span id="device_status" class="label label-info">Loading...</span>
-                <small class="text-muted" style="margin-left: 10px;">Real-time updates via WebSocket</small>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <!-- Legend -->
+        <!-- Legend (Development Mode Only) -->
+        {% if development_mode %}
         <div class="legend-section">
           <div class="row">
             <div class="col-md-6">
@@ -72,6 +63,7 @@
             </div>
           </div>
         </div>
+        {% endif %}
 
         <!-- Property Groups Tabs -->
         <ul class="nav nav-tabs" id="property-tabs" role="tablist">
@@ -107,6 +99,7 @@
   <script src="/static/js/jquery-ui.min.js"></script>
   <script>
     var deviceName = "{{device_name}}";
+    var developmentMode = {{ 'true' if development_mode else 'false' }};
     var deviceStructure = {};
     var lastUpdateTime = Date.now();
     var messageLog = [];
@@ -134,7 +127,8 @@
     function loadDeviceStructure() {
       $("#device_status").removeClass("label-success label-warning label-danger")
                         .addClass("label-info")
-                        .text("Loading...");
+                        .text("Loading...")
+                        .show();
 
       $.getJSON("/api/devices/" + encodeURIComponent(deviceName) + "/structure", function(data) {
         console.log('Loaded device structure:', data);
@@ -169,6 +163,12 @@
       var wsProtocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
       var wsUrl = wsProtocol + '//' + window.location.host + '/evt_device/' + encodeURIComponent(deviceName);
 
+      // Show connecting status
+      $("#device_status").removeClass("label-danger label-warning")
+                        .addClass("label-info")
+                        .text("Connecting...")
+                        .show();
+
       addMessage("info", "Connecting to WebSocket: " + wsUrl, "System");
 
       try {
@@ -271,18 +271,19 @@
         $('body').removeClass('disconnected');
         $('.set-property-btn, .copy-value-btn, .switch-button, .switch-checkbox, .element-input').prop('disabled', false);
 
-        $("#device_status").removeClass("label-warning label-danger")
-                          .addClass("label-success")
-                          .text("Connected - Real-time updates");
+        // Hide status badge when connected
+        $("#device_status").hide();
         addMessage("success", "WebSocket connection restored", "System");
       } else {
         // Add disconnected styling and disable all interactive controls
         $('body').addClass('disconnected');
         $('.set-property-btn, .copy-value-btn, .switch-button, .switch-checkbox, .element-input').prop('disabled', true);
 
+        // Show status badge when disconnected
         $("#device_status").removeClass("label-success label-info")
                           .addClass("label-danger")
-                          .text("Disconnected");
+                          .text("Disconnected")
+                          .show();
         addMessage("error", "Connection lost - controls disabled", "System");
 
         // Start automatic reconnection attempts
@@ -292,7 +293,7 @@
 
     function attemptReconnection() {
       if (reconnectAttempts >= maxReconnectAttempts) {
-        $("#device_status").text("Disconnected - Max retries reached");
+        $("#device_status").text("Disconnected - Max retries reached").show();
         addMessage("error", "Maximum reconnection attempts reached. Please refresh the page.", "System");
         return;
       }
@@ -302,7 +303,8 @@
 
       $("#device_status").removeClass("label-danger")
                         .addClass("label-warning")
-                        .text("Reconnecting... (attempt " + reconnectAttempts + "/" + maxReconnectAttempts + ")");
+                        .text("Reconnecting... (attempt " + reconnectAttempts + "/" + maxReconnectAttempts + ")")
+                        .show();
 
       addMessage("info", "Attempting WebSocket reconnection #" + reconnectAttempts + " in " + (retryDelay/1000) + " seconds...", "System");
 
@@ -498,26 +500,28 @@
       html += '<span class="property-state state-' + (prop.state || 'idle') + '" data-property="' + prop.name + '"></span>';
       html += '<span class="property-label">' + (prop.label || prop.name) + '</span>';
 
-      // Show type and rule information
-      var typeInfo = prop.type;
-      if (prop.type === 'switch' && prop.rule) {
-        typeInfo += ' (' + prop.rule + ')';
-      }
-      html += '<small class="text-muted">(' + prop.name + ') - ' + typeInfo + '</small>';
-
-      // Add info icon for switch properties with tooltip showing names and labels
-      if (prop.type === 'switch') {
-        var tooltipContent = '<div class="switch-tooltip-title">Switch elements in order:</div>';
-        var elementIndex = 1;
-        for (var elemName in prop.elements) {
-          var elem = prop.elements[elemName];
-          tooltipContent += '<div class="switch-tooltip-item">' + elementIndex + '. ' + (elem.label || elemName) + ' (Element ID: ' + elemName + ')</div>';
-          elementIndex++;
+      // Show type and rule information (development mode only)
+      if (developmentMode) {
+        var typeInfo = prop.type;
+        if (prop.type === 'switch' && prop.rule) {
+          typeInfo += ' (' + prop.rule + ')';
+        }
+        html += '<small class="text-muted">(' + prop.name + ') - ' + typeInfo + '</small>';
+
+        // Add info icon for switch properties with tooltip showing names and labels
+        if (prop.type === 'switch') {
+          var tooltipContent = '<div class="switch-tooltip-title">Switch elements in order:</div>';
+          var elementIndex = 1;
+          for (var elemName in prop.elements) {
+            var elem = prop.elements[elemName];
+            tooltipContent += '<div class="switch-tooltip-item">' + elementIndex + '. ' + (elem.label || elemName) + ' (Element ID: ' + elemName + ')</div>';
+            elementIndex++;
+          }
+          html += '<span class="switch-info-icon" style="margin-left: 8px; cursor: help; color: #5bc0de; font-size: 16px;">';
+          html += 'ⓘ';
+          html += '<span class="switch-info-tooltip">' + tooltipContent + '</span>';
+          html += '</span>';
         }
-        html += '<span class="switch-info-icon" style="margin-left: 8px; cursor: help; color: #5bc0de; font-size: 16px;">';
-        html += 'ⓘ';
-        html += '<span class="switch-info-tooltip">' + tooltipContent + '</span>';
-        html += '</span>';
       }
 
       html += '</div>';
@@ -542,7 +546,8 @@
       for (var elemName in prop.elements) {
         var elem = prop.elements[elemName];
         html += '<div class="element-row">';
-        html += '<span class="element-label" title="Element ID: ' + elemName + '">' + (elem.label || elemName) + ':</span>';
+        var labelTitle = developmentMode ? ' title="Element ID: ' + elemName + '"' : '';
+        html += '<span class="element-label"' + labelTitle + '>' + (elem.label || elemName) + ':</span>';
 
         if (isWritable) {
           // Writable property: current value + input controls
@@ -594,7 +599,8 @@
       for (var elemName in prop.elements) {
         var elem = prop.elements[elemName];
         html += '<div class="element-row">';
-        html += '<span class="element-label" title="Element ID: ' + elemName + '">' + (elem.label || elemName) + ':</span>';
+        var labelTitle = developmentMode ? ' title="Element ID: ' + elemName + '"' : '';
+        html += '<span class="element-label"' + labelTitle + '>' + (elem.label || elemName) + ':</span>';
 
         if (isWritable) {
           // Writable property: current value + input controls
@@ -698,7 +704,8 @@
           html += '<div class="switch-checkbox-item-horizontal">';
           html += '<span class="switch-checkbox ' + (isOn ? 'checkbox-checked' : 'checkbox-unchecked') + '" ';
           html += 'data-property="' + prop.name + '" data-element="' + elemName + '"></span>';
-          html += '<span class="element-label" title="Element ID: ' + elemName + '">' + (elem.label || elemName) + '</span>';
+          var labelTitle = developmentMode ? ' title="Element ID: ' + elemName + '"' : '';
+          html += '<span class="element-label"' + labelTitle + '>' + (elem.label || elemName) + '</span>';
           html += '</div>';
         }
         html += '</div>';
@@ -709,7 +716,8 @@
           var elem = prop.elements[elemName];
           var isOn = elem.value === 'On' || elem.value === 'ON';
           html += '<span class="switch-element ' + (isOn ? 'switch-on' : 'switch-off') + '">';
-          html += '<span class="element-label" title="Element ID: ' + elemName + '">' + (elem.label || elemName) + ':</span> ';
+          var labelTitle = developmentMode ? ' title="Element ID: ' + elemName + '"' : '';
+          html += '<span class="element-label"' + labelTitle + '>' + (elem.label || elemName) + ':</span> ';
           html += '<strong data-property="' + prop.name + '" data-element="' + elemName + '">';
           html += (elem.value || 'Off');
           html += '</strong>';
@@ -729,7 +737,8 @@
         var lightClass = 'state-' + (elem.value || 'idle').toLowerCase();
         html += '<div class="element-row">';
         html += '<span class="light-indicator ' + lightClass + '" data-property="' + prop.name + '" data-element="' + elemName + '"></span>';
-        html += '<span class="element-label" title="Element ID: ' + elemName + '">' + (elem.label || elemName) + ': </span>';
+        var labelTitle = developmentMode ? ' title="Element ID: ' + elemName + '"' : '';
+        html += '<span class="element-label"' + labelTitle + '>' + (elem.label || elemName) + ': </span>';
         html += '<span class="element-value" data-property="' + prop.name + '" data-element="' + elemName + '">';
         html += (elem.value || 'Unknown');
         html += '</span>';

From 167e601f8b8948ee4d2d7a4300576a1d494ffb38 Mon Sep 17 00:00:00 2001
From: Jens Scheidtmann <Jens.Scheidtmann@gmail.com>
Date: Sun, 2 Nov 2025 18:41:54 +0100
Subject: [PATCH 11/16] Space condensed vertical layout.

---
 indiweb/views/css/device_control.css | 125 +++++++++++++++-----------
 indiweb/views/device_control.tpl     | 129 ++++++++++++---------------
 2 files changed, 133 insertions(+), 121 deletions(-)

diff --git a/indiweb/views/css/device_control.css b/indiweb/views/css/device_control.css
index ea75e20..70472f5 100644
--- a/indiweb/views/css/device_control.css
+++ b/indiweb/views/css/device_control.css
@@ -21,19 +21,24 @@
   border: 1px solid #e7e7e7;
   border-radius: 3px;
   background-color: white;
+  display: grid;
+  grid-template-columns: auto auto 1fr auto;
+  gap: 8px 12px;
+  align-items: center;
 }
 
 .property-header {
+  grid-column: 1;
+  grid-row: 1;
   display: flex;
   align-items: center;
-  margin-bottom: 10px;
 }
 
 .property-label {
   font-weight: bold;
-  margin-right: 10px;
-  min-width: 150px;
+  margin-left: 8px;
   color: #333;
+  white-space: nowrap;
 }
 
 .property-state {
@@ -62,24 +67,31 @@
 }
 
 .property-elements {
-  margin-left: 20px;
+  display: contents;
 }
 
 .element-row {
-  display: flex;
-  align-items: center;
-  margin-bottom: 8px;
-  padding: 5px 0;
-  flex-wrap: wrap;
-  gap: 5px;
+  display: contents;
 }
 
 .element-label {
-  min-width: 140px;
-  margin-right: 10px;
+  grid-column: 2;
   font-weight: normal;
   color: #666;
-  flex-shrink: 0;
+  white-space: nowrap;
+  text-align: right;
+  padding-right: 8px;
+}
+
+.element-value-container {
+  grid-column: 3;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.set-button-container {
+  grid-column: 4;
 }
 
 .element-input {
@@ -150,6 +162,7 @@
 }
 
 .switch-group {
+  grid-column: 2 / -1;
   display: flex;
   flex-wrap: wrap;
   gap: 15px;
@@ -700,24 +713,52 @@
 
 /* Responsive adjustments */
 @media (max-width: 768px) {
-  .element-row {
-    flex-direction: column;
-    align-items: flex-start;
+  .property-item {
+    grid-template-columns: auto 1fr auto;
+    gap: 4px 8px;
+    padding: 8px;
+    margin-bottom: 10px;
+  }
+
+  .property-header {
+    grid-column: 1 / -1;
+    margin-bottom: 6px;
   }
 
   .element-label {
-    min-width: auto;
-    margin-bottom: 5px;
+    grid-column: 1;
+    text-align: left;
+    padding-right: 6px;
+    font-weight: normal;
+    font-size: 12px;
+    min-width: 80px;
   }
 
-  .element-input {
-    max-width: 100%;
-    width: 100%;
+  .element-value-container {
+    grid-column: 2;
+    margin-bottom: 0;
+  }
+
+  .set-button-container {
+    grid-column: 2;
+    grid-row: -1 / -1;
+    display: flex;
+    align-items: flex-end;
+    justify-content: flex-end;
+    padding-bottom: 0;
   }
 
   .switch-group {
-    flex-direction: column;
-    gap: 5px;
+    grid-column: 1 / -1;
+    flex-direction: row;
+    flex-wrap: wrap;
+    gap: 8px;
+    margin: 4px 0;
+  }
+
+  .element-input {
+    max-width: 150px;
+    width: 150px;
   }
 
   .switch-radio-group,
@@ -727,44 +768,26 @@
 
   .switch-radio-item,
   .switch-checkbox-item {
-    padding: 6px 8px;
+    padding: 4px 6px;
   }
 
   .switch-button-group {
-    flex-direction: column;
-    display: flex;
-    align-items: flex-start;
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: center;
     width: auto;
   }
 
   .switch-button {
-    border-radius: 0 !important;
-    border-right: none !important;
-    border-bottom: 1px solid #ddd;
-    text-align: left;
-    width: auto;
-    min-width: 120px;
-  }
-
-  .switch-button:first-child {
-    border-top-left-radius: 3px !important;
-    border-top-right-radius: 3px !important;
+    padding: 4px 8px;
+    font-size: 12px;
+    border-radius: 3px !important;
+    border-right: 1px solid #ddd !important;
+    margin: 1px;
   }
 
   .switch-button:last-child {
-    border-bottom-left-radius: 3px !important;
-    border-bottom-right-radius: 3px !important;
-    border-bottom: none !important;
-  }
-
-  .property-header {
-    flex-direction: column;
-    align-items: flex-start;
-  }
-
-  .property-label {
-    min-width: auto;
-    margin-bottom: 5px;
+    border-right: none !important;
   }
 }
 
diff --git a/indiweb/views/device_control.tpl b/indiweb/views/device_control.tpl
index 49803ef..0461785 100644
--- a/indiweb/views/device_control.tpl
+++ b/indiweb/views/device_control.tpl
@@ -467,14 +467,16 @@
 
       for (var propName in groupProperties) {
         var prop = groupProperties[propName];
-        // Determine permission class
+        // Determine permission class (only in development mode)
         var permClass = '';
-        if (prop.perm === 'ro') {
-          permClass = 'property-readonly';
-        } else if (prop.perm === 'wo') {
-          permClass = 'property-writeonly';
-        } else if (prop.perm === 'rw') {
-          permClass = 'property-readwrite';
+        if (developmentMode) {
+          if (prop.perm === 'ro') {
+            permClass = 'property-readonly';
+          } else if (prop.perm === 'wo') {
+            permClass = 'property-writeonly';
+          } else if (prop.perm === 'rw') {
+            permClass = 'property-readwrite';
+          }
         }
 
         html += '<div class="property-item ' + permClass + '" id="prop-' + prop.name + '">';
@@ -486,16 +488,6 @@
     }
 
     function generatePropertyContent(prop) {
-      // Determine permission class
-      var permClass = '';
-      if (prop.perm === 'ro') {
-        permClass = 'property-readonly';
-      } else if (prop.perm === 'wo') {
-        permClass = 'property-writeonly';
-      } else if (prop.perm === 'rw') {
-        permClass = 'property-readwrite';
-      }
-
       var html = '<div class="property-header">';
       html += '<span class="property-state state-' + (prop.state || 'idle') + '" data-property="' + prop.name + '"></span>';
       html += '<span class="property-label">' + (prop.label || prop.name) + '</span>';
@@ -507,21 +499,6 @@
           typeInfo += ' (' + prop.rule + ')';
         }
         html += '<small class="text-muted">(' + prop.name + ') - ' + typeInfo + '</small>';
-
-        // Add info icon for switch properties with tooltip showing names and labels
-        if (prop.type === 'switch') {
-          var tooltipContent = '<div class="switch-tooltip-title">Switch elements in order:</div>';
-          var elementIndex = 1;
-          for (var elemName in prop.elements) {
-            var elem = prop.elements[elemName];
-            tooltipContent += '<div class="switch-tooltip-item">' + elementIndex + '. ' + (elem.label || elemName) + ' (Element ID: ' + elemName + ')</div>';
-            elementIndex++;
-          }
-          html += '<span class="switch-info-icon" style="margin-left: 8px; cursor: help; color: #5bc0de; font-size: 16px;">';
-          html += 'ⓘ';
-          html += '<span class="switch-info-tooltip">' + tooltipContent + '</span>';
-          html += '</span>';
-        }
       }
 
       html += '</div>';
@@ -542,17 +519,21 @@
     function generateTextProperty(prop) {
       var html = '<div class="property-elements">';
       var isWritable = (prop.perm === 'rw' || prop.perm === 'wo');
+      var elemNames = Object.keys(prop.elements);
 
-      for (var elemName in prop.elements) {
+      for (var i = 0; i < elemNames.length; i++) {
+        var elemName = elemNames[i];
         var elem = prop.elements[elemName];
-        html += '<div class="element-row">';
+        var isLastElement = (i === elemNames.length - 1);
+
+        // Element label (column 2)
         var labelTitle = developmentMode ? ' title="Element ID: ' + elemName + '"' : '';
         html += '<span class="element-label"' + labelTitle + '>' + (elem.label || elemName) + ':</span>';
 
-        if (isWritable) {
-          // Writable property: current value + input controls
-          html += '<div class="element-value-controls">';
+        // Element value and controls (column 3)
+        html += '<div class="element-value-container">';
 
+        if (isWritable) {
           // For read-write properties, show current value and copy button
           if (prop.perm === 'rw') {
             html += '<span class="element-value element-current-value" data-property="' + prop.name + '" data-element="' + elemName + '">';
@@ -566,26 +547,23 @@
           html += '<input type="text" class="form-control input-sm element-input" ';
           html += 'data-property="' + prop.name + '" data-element="' + elemName + '" ';
           html += 'placeholder="Enter text">';
-          html += '</div>';
         } else {
           // Read-only property: just the value
           html += '<span class="element-value" data-property="' + prop.name + '" data-element="' + elemName + '">';
           html += (elem.value || '(empty)');
           html += '</span>';
         }
-
         html += '</div>';
-      }
 
-      // Add set button for writable properties (inline after last element)
-      if (isWritable) {
-        html += '<div class="element-row">';
-        html += '<span class="element-label"></span>'; // Empty label for alignment
-        html += '<div class="property-set-control">';
-        html += '<button type="button" class="btn btn-sm btn-primary set-property-btn" ';
-        html += 'data-property="' + prop.name + '">Set</button>';
-        html += '</div>';
-        html += '</div>';
+        // Set button on last element (column 4)
+        if (isWritable && isLastElement) {
+          html += '<div class="set-button-container">';
+          html += '<button type="button" class="btn btn-sm btn-primary set-property-btn" ';
+          html += 'data-property="' + prop.name + '">Set</button>';
+          html += '</div>';
+        } else {
+          html += '<span></span>'; // Empty placeholder for column 4
+        }
       }
 
       html += '</div>';
@@ -595,17 +573,21 @@
     function generateNumberProperty(prop) {
       var html = '<div class="property-elements">';
       var isWritable = (prop.perm === 'rw' || prop.perm === 'wo');
+      var elemNames = Object.keys(prop.elements);
 
-      for (var elemName in prop.elements) {
+      for (var i = 0; i < elemNames.length; i++) {
+        var elemName = elemNames[i];
         var elem = prop.elements[elemName];
-        html += '<div class="element-row">';
+        var isLastElement = (i === elemNames.length - 1);
+
+        // Element label (column 2)
         var labelTitle = developmentMode ? ' title="Element ID: ' + elemName + '"' : '';
         html += '<span class="element-label"' + labelTitle + '>' + (elem.label || elemName) + ':</span>';
 
-        if (isWritable) {
-          // Writable property: current value + input controls
-          html += '<div class="element-value-controls">';
+        // Element value and controls (column 3)
+        html += '<div class="element-value-container">';
 
+        if (isWritable) {
           // For read-write properties, show current value and copy button
           if (prop.perm === 'rw') {
             html += '<span class="element-value element-current-value" data-property="' + prop.name + '" data-element="' + elemName + '">';
@@ -634,7 +616,6 @@
             if (elem.step !== undefined) html += 'step="' + elem.step + '" ';
           }
           html += 'placeholder="Enter value">';
-          html += '</div>';
         } else {
           // Read-only property: just the value
           html += '<span class="element-value" data-property="' + prop.name + '" data-element="' + elemName + '">';
@@ -645,19 +626,17 @@
             html += '<small class="text-muted"> [' + elem.min + ' - ' + elem.max + ']</small>';
           }
         }
-
         html += '</div>';
-      }
 
-      // Add set button for writable properties (inline after last element)
-      if (isWritable) {
-        html += '<div class="element-row">';
-        html += '<span class="element-label"></span>'; // Empty label for alignment
-        html += '<div class="property-set-control">';
-        html += '<button type="button" class="btn btn-sm btn-primary set-property-btn" ';
-        html += 'data-property="' + prop.name + '">Set</button>';
-        html += '</div>';
-        html += '</div>';
+        // Set button on last element (column 4)
+        if (isWritable && isLastElement) {
+          html += '<div class="set-button-container">';
+          html += '<button type="button" class="btn btn-sm btn-primary set-property-btn" ';
+          html += 'data-property="' + prop.name + '">Set</button>';
+          html += '</div>';
+        } else {
+          html += '<span></span>'; // Empty placeholder for column 4
+        }
       }
 
       html += '</div>';
@@ -732,17 +711,27 @@
 
     function generateLightProperty(prop) {
       var html = '<div class="property-elements">';
-      for (var elemName in prop.elements) {
+      var elemNames = Object.keys(prop.elements);
+
+      for (var i = 0; i < elemNames.length; i++) {
+        var elemName = elemNames[i];
         var elem = prop.elements[elemName];
         var lightClass = 'state-' + (elem.value || 'idle').toLowerCase();
-        html += '<div class="element-row">';
-        html += '<span class="light-indicator ' + lightClass + '" data-property="' + prop.name + '" data-element="' + elemName + '"></span>';
+
+        // Element label (column 2)
         var labelTitle = developmentMode ? ' title="Element ID: ' + elemName + '"' : '';
-        html += '<span class="element-label"' + labelTitle + '>' + (elem.label || elemName) + ': </span>';
+        html += '<span class="element-label"' + labelTitle + '>' + (elem.label || elemName) + ':</span>';
+
+        // Light indicator and value (column 3)
+        html += '<div class="element-value-container">';
+        html += '<span class="light-indicator ' + lightClass + '" data-property="' + prop.name + '" data-element="' + elemName + '"></span>';
         html += '<span class="element-value" data-property="' + prop.name + '" data-element="' + elemName + '">';
         html += (elem.value || 'Unknown');
         html += '</span>';
         html += '</div>';
+
+        // Empty placeholder for column 4 (no buttons for lights)
+        html += '<span></span>';
       }
       html += '</div>';
       return html;

From 2c8aaf6a84e3c14cacd5f2c7971892545a6345a1 Mon Sep 17 00:00:00 2001
From: Jens Scheidtmann <Jens.Scheidtmann@gmail.com>
Date: Sun, 2 Nov 2025 18:53:27 +0100
Subject: [PATCH 12/16] Nices set button flow, when changing width of display

---
 indiweb/views/css/device_control.css | 2 ++
 indiweb/views/device_control.tpl     | 8 ++++----
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/indiweb/views/css/device_control.css b/indiweb/views/css/device_control.css
index 70472f5..4d8e9d2 100644
--- a/indiweb/views/css/device_control.css
+++ b/indiweb/views/css/device_control.css
@@ -92,6 +92,8 @@
 
 .set-button-container {
   grid-column: 4;
+  grid-row: 1 / 1;
+  align-items: flex-start;
 }
 
 .element-input {
diff --git a/indiweb/views/device_control.tpl b/indiweb/views/device_control.tpl
index 0461785..0a51202 100644
--- a/indiweb/views/device_control.tpl
+++ b/indiweb/views/device_control.tpl
@@ -423,13 +423,13 @@
       // Update individual property elements in the UI without rebuilding entire structure
       for (var elemName in prop.elements) {
         var element = prop.elements[elemName];
-        var elemSelector = '[data-property="' + propName + '"][data-element="' + elemName + '"]';
+        var valueSelector = '.element-value[data-property="' + propName + '"][data-element="' + elemName + '"]';
 
         if (prop.type === 'text') {
-          $(elemSelector).text(element.value || '');
+          $(valueSelector).text(element.value || '');
         } else if (prop.type === 'number') {
           // Use formatted_value if available, otherwise fall back to value
-          $(elemSelector).text(element.formatted_value || element.value || '');
+          $(valueSelector).text(element.formatted_value || element.value || '');
         } else if (prop.type === 'switch') {
           // Update switch elements based on rule type
           var rule = prop.rule || 'OneOfMany';
@@ -447,7 +447,7 @@
                               .addClass(isOn ? 'checkbox-checked' : 'checkbox-unchecked');
           } else {
             // Fallback to original text update
-            $(elemSelector).text(element.value || 'Off');
+            $(valueSelector).text(element.value || 'Off');
           }
         } else if (prop.type === 'light') {
           var lightSelector = '.light-indicator[data-property="' + propName + '"][data-element="' + elemName + '"]';

From f5a6fe9ce976ec46ad35a06b86b42a2bf5b18434 Mon Sep 17 00:00:00 2001
From: Jens Scheidtmann <Jens.Scheidtmann@gmail.com>
Date: Sun, 2 Nov 2025 19:00:08 +0100
Subject: [PATCH 13/16] Nices set button flow, when changing width of display

---
 indiweb/views/css/device_control.css | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/indiweb/views/css/device_control.css b/indiweb/views/css/device_control.css
index 4d8e9d2..c6149ef 100644
--- a/indiweb/views/css/device_control.css
+++ b/indiweb/views/css/device_control.css
@@ -164,11 +164,12 @@
 }
 
 .switch-group {
-  grid-column: 2 / -1;
+  grid-column: 2;
   display: flex;
   flex-wrap: wrap;
   gap: 15px;
   margin: 5px 0;
+  justify-self: start;
 }
 
 .switch-group label {
@@ -756,6 +757,7 @@
     flex-wrap: wrap;
     gap: 8px;
     margin: 4px 0;
+    justify-self: start;
   }
 
   .element-input {

From 542805a3a0ab255148c9e470860f16405a436a14 Mon Sep 17 00:00:00 2001
From: Jens Scheidtmann <Jens.Scheidtmann@gmail.com>
Date: Sun, 2 Nov 2025 19:42:36 +0100
Subject: [PATCH 14/16] Fix sexagesimal entries (text instead of number)

---
 indiweb/views/device_control.tpl | 30 ++++++++++++++++++++++--------
 1 file changed, 22 insertions(+), 8 deletions(-)

diff --git a/indiweb/views/device_control.tpl b/indiweb/views/device_control.tpl
index 0a51202..3b6ad1b 100644
--- a/indiweb/views/device_control.tpl
+++ b/indiweb/views/device_control.tpl
@@ -606,16 +606,21 @@
             }
           }
 
-          // Use text input for %m formatted fields to avoid spin controls
-          var inputType = (elem.format && elem.format.includes('%m')) ? 'text' : 'number';
+          // Use text input for sexagesimal formatted fields to avoid spin controls
+          // Check for INDI sexagesimal format: %w.fm (where f is precision, m is literal 'm')
+          var isSexagesimal = (elem.format && /%.+\..*m$/.test(elem.format)) || 
+                             (elem.formatted_value && elem.formatted_value.includes(':'));
+          var inputType = isSexagesimal ? 'text' : 'number';
           html += '<input type="' + inputType + '" class="form-control input-sm element-input" ';
           html += 'data-property="' + prop.name + '" data-element="' + elemName + '" ';
           if (inputType === 'number') {
             if (elem.min !== undefined) html += 'min="' + elem.min + '" ';
             if (elem.max !== undefined) html += 'max="' + elem.max + '" ';
             if (elem.step !== undefined) html += 'step="' + elem.step + '" ';
+            html += 'placeholder="Enter value">';
+          } else {
+            html += 'placeholder="Enter sexagesimal value (e.g., 12:34:56.78)">';
           }
-          html += 'placeholder="Enter value">';
         } else {
           // Read-only property: just the value
           html += '<span class="element-value" data-property="' + prop.name + '" data-element="' + elemName + '">';
@@ -823,12 +828,21 @@
         var inputField = $('.element-input[data-property="' + propName + '"][data-element="' + elemName + '"]');
 
         var currentValue = currentValueSpan.text().trim();
-        // Extract numeric value from formatted display if needed
-        var numericValue = parseFloat(currentValue);
-        if (!isNaN(numericValue)) {
-          inputField.val(numericValue);
-        } else {
+        
+        // Check if the target input field is a text field (likely sexagesimal)
+        var isTextInput = inputField.attr('type') === 'text';
+        
+        if (isTextInput) {
+          // For text inputs (sexagesimal), copy the full formatted value
           inputField.val(currentValue);
+        } else {
+          // For number inputs, extract numeric value from formatted display if needed
+          var numericValue = parseFloat(currentValue);
+          if (!isNaN(numericValue)) {
+            inputField.val(numericValue);
+          } else {
+            inputField.val(currentValue);
+          }
         }
 
         inputField.focus().select();

From 4c07bc3c0cccf34147dfea709d480e0ec3229c72 Mon Sep 17 00:00:00 2001
From: Jens Scheidtmann <Jens.Scheidtmann@gmail.com>
Date: Sun, 2 Nov 2025 19:54:26 +0100
Subject: [PATCH 15/16] Flush left layout.

---
 indiweb/views/css/device_control.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/indiweb/views/css/device_control.css b/indiweb/views/css/device_control.css
index c6149ef..fa7e993 100644
--- a/indiweb/views/css/device_control.css
+++ b/indiweb/views/css/device_control.css
@@ -22,7 +22,7 @@
   border-radius: 3px;
   background-color: white;
   display: grid;
-  grid-template-columns: auto auto 1fr auto;
+  grid-template-columns: auto auto auto auto 1fr;
   gap: 8px 12px;
   align-items: center;
 }

From 8bcf9f1ac25b0acc0e822a6e123a465b77f3439e Mon Sep 17 00:00:00 2001
From: Jens Scheidtmann <Jens.Scheidtmann@gmail.com>
Date: Sun, 2 Nov 2025 20:02:38 +0100
Subject: [PATCH 16/16] Readd info display for switches

---
 indiweb/views/device_control.tpl | 26 ++++++++++++++++++++++++++
 1 file changed, 26 insertions(+)

diff --git a/indiweb/views/device_control.tpl b/indiweb/views/device_control.tpl
index 3b6ad1b..5013cbe 100644
--- a/indiweb/views/device_control.tpl
+++ b/indiweb/views/device_control.tpl
@@ -499,6 +499,32 @@
           typeInfo += ' (' + prop.rule + ')';
         }
         html += '<small class="text-muted">(' + prop.name + ') - ' + typeInfo + '</small>';
+        
+        // Add switch rule info icon for switch properties
+        if (prop.type === 'switch') {
+          html += '<span class="switch-info-icon" title="Switch Rule Information">';
+          html += 'ⓘ';
+          html += '<div class="switch-info-tooltip">';
+          html += '<div class="switch-tooltip-title">Switch Rule: ' + (prop.rule || 'OneOfMany') + '</div>';
+          if (prop.rule === 'OneOfMany') {
+            html += '<div class="switch-tooltip-item">• Exactly one option must be selected</div>';
+            html += '<div class="switch-tooltip-item">• Selecting one deselects others</div>';
+          } else if (prop.rule === 'AtMostOne') {
+            html += '<div class="switch-tooltip-item">• At most one option can be selected</div>';
+            html += '<div class="switch-tooltip-item">• All options can be off</div>';
+          } else if (prop.rule === 'AnyOfMany') {
+            html += '<div class="switch-tooltip-item">• Multiple options can be selected</div>';
+            html += '<div class="switch-tooltip-item">• Independent checkboxes</div>';
+          }
+          // Show element IDs for each switch
+          html += '<div class="switch-tooltip-item">Element IDs:</div>';
+          for (var elemName in prop.elements) {
+            var elem = prop.elements[elemName];
+            html += '<div class="switch-tooltip-item">  • ' + elemName + ' ("' + (elem.label || elemName) + '")</div>';
+          }
+          html += '</div>';
+          html += '</span>';
+        }
       }
 
       html += '</div>';