mirror of
https://github.com/ChuckBuilds/LEDMatrix.git
synced 2026-08-02 17:28:05 +00:00
Compare commits
3
Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
978a03b42d | ||
|
|
bd9f461f70 | ||
|
|
3b93024993 |
Vendored
+12
-5
@@ -68,14 +68,15 @@ class DiskCache:
|
||||
return None
|
||||
return os.path.join(self.cache_dir, f"{key}.json")
|
||||
|
||||
def get(self, key: str, max_age: int = 300) -> Optional[Dict[str, Any]]:
|
||||
def get(self, key: str, max_age: Optional[int] = 300) -> Optional[Dict[str, Any]]:
|
||||
"""
|
||||
Get data from disk cache.
|
||||
|
||||
|
||||
Args:
|
||||
key: Cache key
|
||||
max_age: Maximum age in seconds
|
||||
|
||||
max_age: Maximum age in seconds; None disables age-based expiry
|
||||
(the record never counts as stale). Mirrors MemoryCache.get.
|
||||
|
||||
Returns:
|
||||
Cached data or None if not found or expired
|
||||
"""
|
||||
@@ -105,7 +106,13 @@ class DiskCache:
|
||||
record_ts = None
|
||||
|
||||
now = time.time()
|
||||
if record_ts is None or (now - record_ts) <= max_age:
|
||||
# max_age=None means "never expires" (mirrors MemoryCache and the
|
||||
# cache_manager docstring). Guard it explicitly — otherwise the
|
||||
# comparison below raises TypeError and the record is treated as a
|
||||
# miss, which silently breaks callers that persist long-lived state
|
||||
# via get(key, max_age=None) (e.g. plugin health/metrics that must
|
||||
# survive restarts and be read cross-process).
|
||||
if record_ts is None or max_age is None or (now - record_ts) <= max_age:
|
||||
return record
|
||||
else:
|
||||
# Stale on disk; keep file for potential diagnostics but treat as miss
|
||||
|
||||
+13
-3
@@ -574,9 +574,19 @@ class CacheManager:
|
||||
}
|
||||
return self.save_cache(data_type, cache_data)
|
||||
|
||||
def get(self, key: str, max_age: int = 300) -> Optional[Dict[str, Any]]:
|
||||
"""Get data from cache if it exists and is not stale."""
|
||||
cached_data = self.get_cached_data(key, max_age)
|
||||
def get(self, key: str, max_age: Optional[int] = 300,
|
||||
memory_ttl: Optional[int] = None) -> Optional[Dict[str, Any]]:
|
||||
"""Get data from cache if it exists and is not stale.
|
||||
|
||||
Args:
|
||||
key: Cache key
|
||||
max_age: Max age (seconds) for the on-disk entry; None never expires.
|
||||
memory_ttl: Max age (seconds) for the in-memory entry. Pass 0 to
|
||||
bypass the memory tier and force a fresh read from disk — used by
|
||||
cross-process readers that must observe another process's latest
|
||||
write rather than a stale first snapshot. Defaults to max_age.
|
||||
"""
|
||||
cached_data = self.get_cached_data(key, max_age, memory_ttl=memory_ttl)
|
||||
if cached_data and 'data' in cached_data:
|
||||
return cached_data['data']
|
||||
return cached_data
|
||||
|
||||
@@ -230,7 +230,24 @@ class DisplayController:
|
||||
cache_manager=self.cache_manager,
|
||||
font_manager=self.font_manager
|
||||
)
|
||||
|
||||
|
||||
# Activate the plugin health/metrics subsystem. PluginManager leaves
|
||||
# health_tracker/resource_monitor as None by default; wiring real
|
||||
# instances here turns on the circuit breaker (a repeatedly-failing
|
||||
# plugin's update() is skipped after consecutive failures, then
|
||||
# retried after a cooldown) and per-plugin execution-time metrics.
|
||||
# Both persist to the shared cache so the web UI can surface them.
|
||||
# Done before discovery/loading so load-time schema warnings have a
|
||||
# tracker to record against.
|
||||
try:
|
||||
from src.plugin_system.plugin_health import PluginHealthTracker
|
||||
from src.plugin_system.resource_monitor import PluginResourceMonitor
|
||||
self.plugin_manager.health_tracker = PluginHealthTracker(self.cache_manager)
|
||||
self.plugin_manager.resource_monitor = PluginResourceMonitor(self.cache_manager)
|
||||
logger.info("Plugin health tracking and resource monitoring enabled")
|
||||
except Exception as e:
|
||||
logger.warning("Could not enable plugin health/resource monitoring: %s", e)
|
||||
|
||||
# Validate plugins after plugin manager is created
|
||||
try:
|
||||
from src.startup_validator import StartupValidator
|
||||
|
||||
@@ -52,11 +52,18 @@ class PluginHealthTracker:
|
||||
"""Get cache key for plugin health data."""
|
||||
return f"plugin_health:{plugin_id}"
|
||||
|
||||
def _load_health_state(self, plugin_id: str) -> Dict[str, Any]:
|
||||
"""Load health state from cache or return defaults."""
|
||||
def _load_health_state(self, plugin_id: str, force_reload: bool = False) -> Dict[str, Any]:
|
||||
"""Load health state from cache or return defaults.
|
||||
|
||||
``force_reload=True`` bypasses the cache manager's in-memory tier so a
|
||||
read-only consumer (e.g. the web process) observes the writer process's
|
||||
latest persisted state instead of a stale first snapshot.
|
||||
"""
|
||||
cache_key = self._get_health_key(plugin_id)
|
||||
cached = self.cache_manager.get(cache_key, max_age=None)
|
||||
|
||||
cached = self.cache_manager.get(
|
||||
cache_key, max_age=None, memory_ttl=0 if force_reload else None
|
||||
)
|
||||
|
||||
if cached:
|
||||
return cached
|
||||
|
||||
@@ -79,10 +86,17 @@ class PluginHealthTracker:
|
||||
self.cache_manager.set(cache_key, state) # Persist indefinitely
|
||||
self._health_state[plugin_id] = state
|
||||
|
||||
def get_health_state(self, plugin_id: str) -> Dict[str, Any]:
|
||||
"""Get current health state for a plugin."""
|
||||
if plugin_id not in self._health_state:
|
||||
self._health_state[plugin_id] = self._load_health_state(plugin_id)
|
||||
def get_health_state(self, plugin_id: str, force_reload: bool = False) -> Dict[str, Any]:
|
||||
"""Get current health state for a plugin.
|
||||
|
||||
``force_reload=True`` re-reads the persisted state from the cache,
|
||||
bypassing the in-memory copy — needed by cross-process readers that
|
||||
would otherwise be pinned to the first snapshot they loaded.
|
||||
"""
|
||||
if force_reload or plugin_id not in self._health_state:
|
||||
self._health_state[plugin_id] = self._load_health_state(
|
||||
plugin_id, force_reload=force_reload
|
||||
)
|
||||
return self._health_state[plugin_id]
|
||||
|
||||
def record_success(self, plugin_id: str) -> None:
|
||||
@@ -139,6 +153,28 @@ class PluginHealthTracker:
|
||||
|
||||
self._save_health_state(plugin_id, state)
|
||||
|
||||
def set_degraded(self, plugin_id: str, reason: Optional[str]) -> None:
|
||||
"""Flag (or clear) a plugin as degraded without touching the circuit breaker.
|
||||
|
||||
Used for non-fatal issues — e.g. a config that no longer satisfies the
|
||||
plugin's schema — that should be surfaced to the user but must NOT cause
|
||||
the plugin to be skipped or counted as a runtime failure. Passing
|
||||
``reason=None`` clears the flag. The write is skipped when nothing
|
||||
actually changes, so calling this on every load is cheap.
|
||||
|
||||
Args:
|
||||
plugin_id: Plugin identifier
|
||||
reason: Human-readable reason string, or None to clear the flag
|
||||
"""
|
||||
state = self.get_health_state(plugin_id)
|
||||
new_degraded = bool(reason)
|
||||
new_reason = reason if reason else None
|
||||
if state.get('degraded', False) == new_degraded and state.get('degraded_reason') == new_reason:
|
||||
return # No change — avoid a redundant cache write
|
||||
state['degraded'] = new_degraded
|
||||
state['degraded_reason'] = new_reason
|
||||
self._save_health_state(plugin_id, state)
|
||||
|
||||
def should_skip_plugin(self, plugin_id: str) -> bool:
|
||||
"""
|
||||
Check if plugin should be skipped due to circuit breaker.
|
||||
@@ -181,9 +217,13 @@ class PluginHealthTracker:
|
||||
|
||||
return False
|
||||
|
||||
def get_health_summary(self, plugin_id: str) -> Dict[str, Any]:
|
||||
"""Get health summary for a plugin."""
|
||||
state = self.get_health_state(plugin_id)
|
||||
def get_health_summary(self, plugin_id: str, force_reload: bool = False) -> Dict[str, Any]:
|
||||
"""Get health summary for a plugin.
|
||||
|
||||
``force_reload=True`` refreshes from the persisted cache first so
|
||||
cross-process readers reflect the writer's latest state.
|
||||
"""
|
||||
state = self.get_health_state(plugin_id, force_reload=force_reload)
|
||||
|
||||
total_calls = state.get('total_successes', 0) + state.get('total_failures', 0)
|
||||
success_rate = 0.0
|
||||
@@ -201,6 +241,8 @@ class PluginHealthTracker:
|
||||
'last_failure_time': state.get('last_failure_time'),
|
||||
'last_error': state.get('last_error'),
|
||||
'is_healthy': state.get('circuit_state') == CircuitState.CLOSED.value,
|
||||
'degraded': state.get('degraded', False),
|
||||
'degraded_reason': state.get('degraded_reason'),
|
||||
'circuit_opened_time': state.get('circuit_opened_time'),
|
||||
'half_open_start_time': state.get('half_open_start_time')
|
||||
}
|
||||
|
||||
@@ -390,7 +390,15 @@ class PluginManager:
|
||||
self.logger.error("Error validating plugin %s config: %s", plugin_id, e, exc_info=True)
|
||||
self.state_manager.set_state(plugin_id, PluginState.ERROR, error=e)
|
||||
return False
|
||||
|
||||
|
||||
# Schema validation (warn/degrade only — never blocks loading).
|
||||
# A config that violates the plugin's JSON schema is surfaced to the
|
||||
# user (log warning + degraded flag in the health tracker) but the
|
||||
# plugin still loads exactly as it does today. This deliberately does
|
||||
# NOT change load_plugin()'s pass/fail behaviour for any plugin that
|
||||
# loads under the current code.
|
||||
self._validate_config_schema_soft(plugin_id, config)
|
||||
|
||||
# Store plugin instance
|
||||
self.plugins[plugin_id] = plugin_instance
|
||||
self.plugin_last_update[plugin_id] = 0.0
|
||||
@@ -419,6 +427,59 @@ class PluginManager:
|
||||
self.state_manager.set_state(plugin_id, PluginState.ERROR, error=e)
|
||||
return False
|
||||
|
||||
def _validate_config_schema_soft(self, plugin_id: str, config: Dict[str, Any]) -> None:
|
||||
"""Validate a plugin's config against its JSON schema — warn/degrade only.
|
||||
|
||||
On a schema violation this logs a warning and marks the plugin degraded
|
||||
in the health tracker (when one is wired), so the problem is visible in
|
||||
the web UI. It never raises, never changes plugin state, and never
|
||||
affects whether the plugin loads. ``config`` here has already been
|
||||
merged with schema defaults by the caller, so fields that ship a default
|
||||
never appear "missing" — only genuinely user-supplied required fields
|
||||
(e.g. an API key) can trip the required-field check.
|
||||
"""
|
||||
try:
|
||||
schema = self.schema_manager.load_schema(plugin_id)
|
||||
except Exception as e: # pragma: no cover - defensive
|
||||
self.logger.debug("Could not load schema for %s: %s", plugin_id, e)
|
||||
return
|
||||
|
||||
if not schema:
|
||||
# No schema shipped — nothing to validate. Clear any stale flag.
|
||||
self._set_degraded_safe(plugin_id, None)
|
||||
return
|
||||
|
||||
try:
|
||||
is_valid, errors = self.schema_manager.validate_config_against_schema(
|
||||
config, schema, plugin_id
|
||||
)
|
||||
except Exception as e: # pragma: no cover - defensive
|
||||
# Validation machinery itself failed — do not penalise the plugin.
|
||||
self.logger.debug("Schema validation raised for %s: %s", plugin_id, e)
|
||||
return
|
||||
|
||||
if is_valid or not errors:
|
||||
self._set_degraded_safe(plugin_id, None)
|
||||
return
|
||||
|
||||
summary = "; ".join(errors[:5])
|
||||
if len(errors) > 5:
|
||||
summary += f" (+{len(errors) - 5} more)"
|
||||
self.logger.warning(
|
||||
"Plugin %s config does not match its schema (loading anyway): %s",
|
||||
plugin_id, summary,
|
||||
)
|
||||
self._set_degraded_safe(plugin_id, f"Config schema: {summary}")
|
||||
|
||||
def _set_degraded_safe(self, plugin_id: str, reason: Optional[str]) -> None:
|
||||
"""Best-effort ``health_tracker.set_degraded`` that never raises."""
|
||||
if not self.health_tracker:
|
||||
return
|
||||
try:
|
||||
self.health_tracker.set_degraded(plugin_id, reason)
|
||||
except Exception as e: # pragma: no cover - defensive
|
||||
self.logger.debug("Could not set degraded flag for %s: %s", plugin_id, e)
|
||||
|
||||
def unload_plugin(self, plugin_id: str) -> bool:
|
||||
"""
|
||||
Unload a plugin by ID.
|
||||
@@ -836,7 +897,7 @@ class PluginManager:
|
||||
|
||||
# Get health tracker metrics if available
|
||||
if self.health_tracker:
|
||||
health_info = self.health_tracker.get_plugin_health(plugin_id)
|
||||
health_info = self.health_tracker.get_health_summary(plugin_id)
|
||||
plugin_metrics['health'] = health_info
|
||||
else:
|
||||
plugin_metrics['health'] = {'status': 'unknown'}
|
||||
@@ -861,7 +922,7 @@ class PluginManager:
|
||||
|
||||
# Get resource monitor metrics if available
|
||||
if self.resource_monitor:
|
||||
resource_info = self.resource_monitor.get_plugin_metrics(plugin_id)
|
||||
resource_info = self.resource_monitor.get_metrics_summary(plugin_id)
|
||||
plugin_metrics['resources'] = resource_info
|
||||
else:
|
||||
plugin_metrics['resources'] = {'status': 'unknown'}
|
||||
|
||||
@@ -71,17 +71,32 @@ class PluginResourceMonitor:
|
||||
self.cache_manager = cache_manager
|
||||
self.enable_monitoring = enable_monitoring and PSUTIL_AVAILABLE
|
||||
self.logger = logging.getLogger(__name__)
|
||||
|
||||
|
||||
# Resource metrics per plugin
|
||||
self._metrics: Dict[str, ResourceMetrics] = {}
|
||||
self._limits: Dict[str, ResourceLimits] = {}
|
||||
|
||||
|
||||
# Thread-local storage for execution tracking
|
||||
self._local = threading.local()
|
||||
|
||||
|
||||
# Lock for thread-safe access
|
||||
self._lock = threading.Lock()
|
||||
|
||||
|
||||
# Cache a single psutil.Process handle. Reusing the same handle is what
|
||||
# lets cpu_percent() be read non-blocking (interval=None): psutil returns
|
||||
# the utilisation since the *previous* call on that same object. Creating
|
||||
# a fresh Process() per call would force interval-based sampling that
|
||||
# blocks the caller — unacceptable on the display loop's update path.
|
||||
self._process = None
|
||||
if self.enable_monitoring:
|
||||
try:
|
||||
self._process = psutil.Process()
|
||||
# Prime cpu_percent so the first real measurement returns a
|
||||
# meaningful delta instead of 0.0.
|
||||
self._process.cpu_percent(interval=None)
|
||||
except Exception: # pragma: no cover - psutil edge cases
|
||||
self._process = None
|
||||
|
||||
if not PSUTIL_AVAILABLE and enable_monitoring:
|
||||
self.logger.warning(
|
||||
"psutil not available - resource monitoring will be limited to execution time only"
|
||||
@@ -95,13 +110,21 @@ class PluginResourceMonitor:
|
||||
"""Get cache key for plugin limits."""
|
||||
return f"plugin_limits:{plugin_id}"
|
||||
|
||||
def get_metrics(self, plugin_id: str) -> ResourceMetrics:
|
||||
"""Get current metrics for a plugin."""
|
||||
def get_metrics(self, plugin_id: str, force_reload: bool = False) -> ResourceMetrics:
|
||||
"""Get current metrics for a plugin.
|
||||
|
||||
``force_reload=True`` bypasses both the in-memory copy and the cache
|
||||
manager's memory tier so a read-only consumer (e.g. the web process)
|
||||
sees the writer process's latest persisted metrics rather than a stale
|
||||
first snapshot.
|
||||
"""
|
||||
with self._lock:
|
||||
if plugin_id not in self._metrics:
|
||||
if force_reload or plugin_id not in self._metrics:
|
||||
# Try to load from cache
|
||||
cache_key = self._get_metrics_key(plugin_id)
|
||||
cached = self.cache_manager.get(cache_key, max_age=None)
|
||||
cached = self.cache_manager.get(
|
||||
cache_key, max_age=None, memory_ttl=0 if force_reload else None
|
||||
)
|
||||
if cached:
|
||||
metrics = ResourceMetrics(**cached)
|
||||
else:
|
||||
@@ -137,21 +160,24 @@ class PluginResourceMonitor:
|
||||
|
||||
def _get_process_memory_mb(self) -> float:
|
||||
"""Get current process memory usage in MB."""
|
||||
if not self.enable_monitoring:
|
||||
if not self.enable_monitoring or self._process is None:
|
||||
return 0.0
|
||||
try:
|
||||
process = psutil.Process()
|
||||
return process.memory_info().rss / 1024 / 1024
|
||||
return self._process.memory_info().rss / 1024 / 1024
|
||||
except Exception:
|
||||
return 0.0
|
||||
|
||||
def _get_process_cpu_percent(self, interval: float = 0.1) -> float:
|
||||
"""Get current process CPU usage percentage."""
|
||||
if not self.enable_monitoring:
|
||||
|
||||
def _get_process_cpu_percent(self) -> float:
|
||||
"""Get current process CPU usage percentage (non-blocking).
|
||||
|
||||
Reads cpu_percent(interval=None) against the cached process handle, so
|
||||
it returns immediately with the utilisation observed since the previous
|
||||
call rather than blocking to sample a fresh interval.
|
||||
"""
|
||||
if not self.enable_monitoring or self._process is None:
|
||||
return 0.0
|
||||
try:
|
||||
process = psutil.Process()
|
||||
return process.cpu_percent(interval=interval)
|
||||
return self._process.cpu_percent(interval=None)
|
||||
except Exception:
|
||||
return 0.0
|
||||
|
||||
@@ -281,9 +307,13 @@ class PluginResourceMonitor:
|
||||
self.logger.error(error_msg)
|
||||
raise ResourceLimitExceeded(error_msg)
|
||||
|
||||
def get_metrics_summary(self, plugin_id: str) -> Dict[str, Any]:
|
||||
"""Get metrics summary for a plugin."""
|
||||
metrics = self.get_metrics(plugin_id)
|
||||
def get_metrics_summary(self, plugin_id: str, force_reload: bool = False) -> Dict[str, Any]:
|
||||
"""Get metrics summary for a plugin.
|
||||
|
||||
``force_reload=True`` refreshes from the persisted cache first so
|
||||
cross-process readers reflect the writer's latest metrics.
|
||||
"""
|
||||
metrics = self.get_metrics(plugin_id, force_reload=force_reload)
|
||||
limits = self.get_limits(plugin_id)
|
||||
|
||||
avg_execution_time = 0.0
|
||||
|
||||
+90
-1
@@ -1883,7 +1883,96 @@ class WiFiManager:
|
||||
|
||||
logger.warning(f"Failed to enable WiFi radio after {max_retries} attempts")
|
||||
return False
|
||||
|
||||
|
||||
def get_wifi_radio_state(self) -> Dict:
|
||||
"""
|
||||
Report whether the WiFi radio is currently enabled, plus whether a wired
|
||||
fallback exists. Used by the web UI's radio toggle so it can warn before
|
||||
an action that could disconnect the browser.
|
||||
|
||||
Returns:
|
||||
{
|
||||
'enabled': Optional[bool], # True/False, or None if undeterminable
|
||||
'ethernet_connected': bool, # wired fallback present
|
||||
'available': bool, # nmcli present / radio state readable
|
||||
}
|
||||
"""
|
||||
ethernet_connected = self._is_ethernet_connected()
|
||||
enabled: Optional[bool] = None
|
||||
available = False
|
||||
try:
|
||||
result = subprocess.run(
|
||||
["nmcli", "radio", "wifi"],
|
||||
capture_output=True,
|
||||
text=True,
|
||||
timeout=5
|
||||
)
|
||||
if result.returncode == 0:
|
||||
status = result.stdout.strip().lower()
|
||||
if status in ("enabled", "disabled"):
|
||||
enabled = status == "enabled"
|
||||
available = True
|
||||
except Exception as e:
|
||||
logger.debug(f"Could not read WiFi radio state: {e}")
|
||||
return {
|
||||
'enabled': enabled,
|
||||
'ethernet_connected': ethernet_connected,
|
||||
'available': available,
|
||||
}
|
||||
|
||||
def set_wifi_radio(self, enabled: bool, force: bool = False) -> Tuple[bool, str, Optional[str]]:
|
||||
"""
|
||||
Turn the WiFi radio on or off.
|
||||
|
||||
Turning the radio OFF from the web interface is dangerous: if the device
|
||||
is reachable only over WiFi, disabling it disconnects the very page that
|
||||
issued the request. To prevent that lockout, disabling is refused unless a
|
||||
wired (Ethernet) fallback is present, or the caller explicitly passes
|
||||
force=True to acknowledge the risk.
|
||||
|
||||
Enabling reuses the hardened _ensure_wifi_radio_enabled() path (handles
|
||||
rfkill soft-blocks + retries). Both directions rely only on
|
||||
`nmcli radio wifi on|off`, which is already covered by the passwordless
|
||||
sudoers allowlist (configure_wifi_permissions.sh) — no new privileged
|
||||
command is introduced.
|
||||
|
||||
Returns:
|
||||
(success, human-readable message, reason_code). reason_code is
|
||||
'no_ethernet' when a disable is refused for lockout safety, or a
|
||||
short failure code otherwise; None on success. The web UI keys on
|
||||
'no_ethernet' to decide whether to offer a force-off prompt.
|
||||
"""
|
||||
if enabled:
|
||||
if self._ensure_wifi_radio_enabled():
|
||||
return True, "WiFi radio enabled.", None
|
||||
return False, "Failed to enable WiFi radio. Check logs for details.", 'enable_failed'
|
||||
|
||||
# Disabling — guard against locking the user out of the web interface.
|
||||
if not force and not self._is_ethernet_connected():
|
||||
return False, (
|
||||
"Refusing to disable WiFi: no wired (Ethernet) connection was "
|
||||
"detected, so turning off WiFi would disconnect you from this "
|
||||
"page. Connect Ethernet first, or force it if you're sure."
|
||||
), 'no_ethernet'
|
||||
|
||||
try:
|
||||
result = subprocess.run(
|
||||
["sudo", "nmcli", "radio", "wifi", "off"],
|
||||
capture_output=True,
|
||||
text=True,
|
||||
timeout=10
|
||||
)
|
||||
if result.returncode == 0:
|
||||
logger.info("WiFi radio disabled via web interface (force=%s)", force)
|
||||
return True, "WiFi radio disabled.", None
|
||||
logger.warning("Failed to disable WiFi radio: %s", result.stderr.strip())
|
||||
return False, "Failed to disable WiFi radio. Check logs for details.", 'command_failed'
|
||||
except subprocess.TimeoutExpired:
|
||||
return False, "Command timed out while disabling WiFi radio.", 'timeout'
|
||||
except (OSError, subprocess.SubprocessError) as e:
|
||||
logger.error("Error disabling WiFi radio: %s", e, exc_info=True)
|
||||
return False, "An error occurred while disabling WiFi radio.", 'error'
|
||||
|
||||
def enable_ap_mode(self, force: bool = False) -> Tuple[bool, str]:
|
||||
"""
|
||||
Enable access point mode
|
||||
|
||||
@@ -279,10 +279,23 @@ class TestDiskCache:
|
||||
"""Test getting expired cache entry."""
|
||||
cache = DiskCache(cache_dir=str(tmp_path))
|
||||
cache.set("test_key", {"data": "value"})
|
||||
|
||||
|
||||
# Get with max_age=0 to force expiration
|
||||
result = cache.get("test_key", max_age=0)
|
||||
assert result is None
|
||||
|
||||
def test_get_max_age_none_never_expires(self, tmp_path):
|
||||
"""max_age=None must return persisted records regardless of age.
|
||||
|
||||
Regression: the age comparison raised TypeError for max_age=None,
|
||||
which was swallowed and treated as a miss — silently breaking
|
||||
long-lived state (plugin health/metrics) read across processes.
|
||||
"""
|
||||
cache = DiskCache(cache_dir=str(tmp_path))
|
||||
cache.set("test_key", {"data": "value", "timestamp": 0}) # epoch → very old
|
||||
result = cache.get("test_key", max_age=None)
|
||||
assert result is not None
|
||||
assert result["data"] == "value"
|
||||
|
||||
def test_get_nonexistent(self, tmp_path):
|
||||
"""Test getting non-existent key."""
|
||||
|
||||
@@ -391,3 +391,16 @@ class TestDisplayControllerSchedule:
|
||||
|
||||
controller._check_schedule()
|
||||
assert controller.is_display_active is False
|
||||
|
||||
|
||||
class TestPluginHealthWiring:
|
||||
"""Phase 1: DisplayController activates the dormant plugin health/metrics
|
||||
subsystem by wiring real tracker/monitor instances onto the plugin manager."""
|
||||
|
||||
def test_health_tracker_and_resource_monitor_wired(self, test_display_controller):
|
||||
from src.plugin_system.plugin_health import PluginHealthTracker
|
||||
from src.plugin_system.resource_monitor import PluginResourceMonitor
|
||||
|
||||
pm = test_display_controller.plugin_manager
|
||||
assert isinstance(pm.health_tracker, PluginHealthTracker)
|
||||
assert isinstance(pm.resource_monitor, PluginResourceMonitor)
|
||||
|
||||
@@ -0,0 +1,93 @@
|
||||
"""
|
||||
Tests for src/plugin_system/plugin_health.py
|
||||
|
||||
Focus on the additive ``set_degraded`` mechanism used by the warn-only schema
|
||||
validation path: it must surface a degraded reason without touching the circuit
|
||||
breaker or causing the plugin to be skipped.
|
||||
"""
|
||||
|
||||
from unittest.mock import MagicMock
|
||||
|
||||
from src.plugin_system.plugin_health import PluginHealthTracker, CircuitState
|
||||
|
||||
|
||||
def _cache():
|
||||
cache = MagicMock()
|
||||
cache.get.return_value = None
|
||||
return cache
|
||||
|
||||
|
||||
def test_set_degraded_marks_and_surfaces_reason():
|
||||
tracker = PluginHealthTracker(_cache())
|
||||
tracker.set_degraded("p", "bad config")
|
||||
summary = tracker.get_health_summary("p")
|
||||
assert summary["degraded"] is True
|
||||
assert summary["degraded_reason"] == "bad config"
|
||||
|
||||
|
||||
def test_set_degraded_none_clears():
|
||||
tracker = PluginHealthTracker(_cache())
|
||||
tracker.set_degraded("p", "bad config")
|
||||
tracker.set_degraded("p", None)
|
||||
summary = tracker.get_health_summary("p")
|
||||
assert summary["degraded"] is False
|
||||
assert summary["degraded_reason"] is None
|
||||
|
||||
|
||||
def test_set_degraded_does_not_affect_circuit_breaker():
|
||||
tracker = PluginHealthTracker(_cache())
|
||||
tracker.set_degraded("p", "bad config")
|
||||
summary = tracker.get_health_summary("p")
|
||||
# Degraded is a *separate* signal from circuit health: the plugin is not
|
||||
# counted as failing, the circuit stays closed, and it is not skipped.
|
||||
assert summary["circuit_state"] == CircuitState.CLOSED.value
|
||||
assert summary["consecutive_failures"] == 0
|
||||
assert summary["is_healthy"] is True
|
||||
assert tracker.should_skip_plugin("p") is False
|
||||
|
||||
|
||||
def test_set_degraded_skips_redundant_cache_write():
|
||||
cache = _cache()
|
||||
tracker = PluginHealthTracker(cache)
|
||||
tracker.set_degraded("p", "x")
|
||||
writes_after_first = cache.set.call_count
|
||||
assert writes_after_first >= 1
|
||||
tracker.set_degraded("p", "x") # unchanged → no extra write
|
||||
assert cache.set.call_count == writes_after_first
|
||||
|
||||
|
||||
def test_default_summary_has_degraded_fields():
|
||||
tracker = PluginHealthTracker(_cache())
|
||||
summary = tracker.get_health_summary("never-seen")
|
||||
assert summary["degraded"] is False
|
||||
assert summary["degraded_reason"] is None
|
||||
|
||||
|
||||
def test_force_reload_refreshes_stale_in_memory_snapshot():
|
||||
"""A long-lived reader (e.g. the web process) must not be pinned to the
|
||||
first snapshot: force_reload re-reads persisted state and bypasses the
|
||||
cache manager's memory tier so cross-process updates are visible."""
|
||||
cache = _cache()
|
||||
tracker = PluginHealthTracker(cache)
|
||||
|
||||
# First read snapshots an empty (healthy) state into the in-memory copy.
|
||||
assert tracker.get_health_summary("p")["consecutive_failures"] == 0
|
||||
|
||||
# The display service later persists a failing/open state.
|
||||
cache.get.return_value = {
|
||||
"consecutive_failures": 5,
|
||||
"circuit_state": "open",
|
||||
"total_failures": 5,
|
||||
"total_successes": 0,
|
||||
}
|
||||
|
||||
# A plain read is still pinned to the stale snapshot...
|
||||
assert tracker.get_health_summary("p")["consecutive_failures"] == 0
|
||||
|
||||
# ...but force_reload observes the new persisted state.
|
||||
fresh = tracker.get_health_summary("p", force_reload=True)
|
||||
assert fresh["consecutive_failures"] == 5
|
||||
assert fresh["circuit_state"] == "open"
|
||||
|
||||
# and it asked the cache to bypass the in-memory tier (memory_ttl=0).
|
||||
assert any(c.kwargs.get("memory_ttl") == 0 for c in cache.get.call_args_list)
|
||||
@@ -0,0 +1,79 @@
|
||||
"""
|
||||
Tests for PluginManager._validate_config_schema_soft (Phase 1, warn-only schema
|
||||
validation).
|
||||
|
||||
Contract:
|
||||
- A schema violation logs a warning and marks the plugin degraded in the health
|
||||
tracker, but never raises and never changes load pass/fail behaviour.
|
||||
- A valid config (or no schema) clears any stale degraded flag.
|
||||
- The method is safe when no health tracker is wired.
|
||||
"""
|
||||
|
||||
import tempfile
|
||||
from pathlib import Path
|
||||
from unittest.mock import MagicMock
|
||||
|
||||
import pytest
|
||||
|
||||
from src.plugin_system.plugin_manager import PluginManager
|
||||
|
||||
|
||||
@pytest.fixture
|
||||
def pm():
|
||||
with tempfile.TemporaryDirectory() as tmp:
|
||||
manager = PluginManager(plugins_dir=str(Path(tmp) / "plugins"))
|
||||
manager.schema_manager = MagicMock()
|
||||
yield manager
|
||||
|
||||
|
||||
def test_invalid_config_marks_degraded_without_raising(pm):
|
||||
pm.health_tracker = MagicMock()
|
||||
pm.schema_manager.load_schema.return_value = {"type": "object"}
|
||||
pm.schema_manager.validate_config_against_schema.return_value = (
|
||||
False,
|
||||
["Missing required field: 'api_key'"],
|
||||
)
|
||||
|
||||
pm._validate_config_schema_soft("youtube-stats", {})
|
||||
|
||||
pm.health_tracker.set_degraded.assert_called_once()
|
||||
plugin_id, reason = pm.health_tracker.set_degraded.call_args[0]
|
||||
assert plugin_id == "youtube-stats"
|
||||
assert "api_key" in reason
|
||||
|
||||
|
||||
def test_valid_config_clears_degraded(pm):
|
||||
pm.health_tracker = MagicMock()
|
||||
pm.schema_manager.load_schema.return_value = {"type": "object"}
|
||||
pm.schema_manager.validate_config_against_schema.return_value = (True, [])
|
||||
|
||||
pm._validate_config_schema_soft("p", {"api_key": "x"})
|
||||
|
||||
pm.health_tracker.set_degraded.assert_called_once_with("p", None)
|
||||
|
||||
|
||||
def test_no_schema_clears_degraded(pm):
|
||||
pm.health_tracker = MagicMock()
|
||||
pm.schema_manager.load_schema.return_value = None
|
||||
|
||||
pm._validate_config_schema_soft("p", {})
|
||||
|
||||
pm.health_tracker.set_degraded.assert_called_once_with("p", None)
|
||||
|
||||
|
||||
def test_validation_exception_is_swallowed(pm):
|
||||
pm.health_tracker = MagicMock()
|
||||
pm.schema_manager.load_schema.return_value = {"type": "object"}
|
||||
pm.schema_manager.validate_config_against_schema.side_effect = RuntimeError("boom")
|
||||
|
||||
# Must not raise — the validation machinery failing must never break loading.
|
||||
pm._validate_config_schema_soft("p", {})
|
||||
|
||||
|
||||
def test_safe_without_health_tracker(pm):
|
||||
pm.health_tracker = None
|
||||
pm.schema_manager.load_schema.return_value = {"type": "object"}
|
||||
pm.schema_manager.validate_config_against_schema.return_value = (False, ["err"])
|
||||
|
||||
# Must not raise even though there is no tracker to record against.
|
||||
pm._validate_config_schema_soft("p", {})
|
||||
@@ -0,0 +1,129 @@
|
||||
"""
|
||||
Tests for src/plugin_system/resource_monitor.py
|
||||
|
||||
Focus areas:
|
||||
- Execution-time metrics are captured regardless of psutil availability.
|
||||
- CPU sampling is non-blocking (regression guard for the previous
|
||||
``cpu_percent(interval=0.1)`` call that blocked 100 ms per monitored call).
|
||||
- Resource limits are enforced.
|
||||
"""
|
||||
|
||||
import time
|
||||
|
||||
import pytest
|
||||
from unittest.mock import MagicMock
|
||||
|
||||
from src.plugin_system.resource_monitor import (
|
||||
PluginResourceMonitor,
|
||||
ResourceLimits,
|
||||
ResourceLimitExceeded,
|
||||
PSUTIL_AVAILABLE,
|
||||
)
|
||||
|
||||
|
||||
def _cache():
|
||||
cache = MagicMock()
|
||||
cache.get.return_value = None
|
||||
return cache
|
||||
|
||||
|
||||
class TestExecutionTimeMetrics:
|
||||
def test_monitor_call_returns_value_and_records_call(self):
|
||||
mon = PluginResourceMonitor(_cache(), enable_monitoring=False)
|
||||
result = mon.monitor_call("p", lambda: 42)
|
||||
assert result == 42
|
||||
metrics = mon.get_metrics("p")
|
||||
assert metrics.call_count == 1
|
||||
assert metrics.total_execution_time >= 0.0
|
||||
|
||||
def test_avg_and_max_execution_time(self):
|
||||
mon = PluginResourceMonitor(_cache(), enable_monitoring=False)
|
||||
mon.monitor_call("p", lambda: time.sleep(0.01))
|
||||
mon.monitor_call("p", lambda: None)
|
||||
summary = mon.get_metrics_summary("p")
|
||||
assert summary["call_count"] == 2
|
||||
assert summary["max_execution_time"] >= summary["avg_execution_time"] >= 0.0
|
||||
|
||||
def test_exception_propagates_but_is_still_timed(self):
|
||||
mon = PluginResourceMonitor(_cache(), enable_monitoring=False)
|
||||
|
||||
def boom():
|
||||
raise ValueError("nope")
|
||||
|
||||
with pytest.raises(ValueError):
|
||||
mon.monitor_call("p", boom)
|
||||
# Execution time is still recorded even when the call raised.
|
||||
assert mon.get_metrics("p").execution_time >= 0.0
|
||||
|
||||
|
||||
class TestNonBlockingCpu:
|
||||
def test_cpu_sampling_is_fast_when_disabled(self):
|
||||
mon = PluginResourceMonitor(_cache(), enable_monitoring=False)
|
||||
start = time.time()
|
||||
for _ in range(50):
|
||||
mon._get_process_cpu_percent()
|
||||
# The old implementation blocked ~0.1s/call (~5s for 50). Non-blocking
|
||||
# must complete near-instantly.
|
||||
assert time.time() - start < 0.5
|
||||
assert mon._get_process_cpu_percent() == 0.0
|
||||
|
||||
@pytest.mark.skipif(not PSUTIL_AVAILABLE, reason="psutil not installed")
|
||||
def test_cpu_sampling_is_fast_with_psutil(self):
|
||||
mon = PluginResourceMonitor(_cache(), enable_monitoring=True)
|
||||
assert mon._process is not None
|
||||
start = time.time()
|
||||
for _ in range(30):
|
||||
mon._get_process_cpu_percent()
|
||||
# 30 blocking 0.1s samples would be ~3s; non-blocking must be well under.
|
||||
assert time.time() - start < 0.5
|
||||
|
||||
def test_monitor_call_does_not_block_on_cpu_sampling(self):
|
||||
mon = PluginResourceMonitor(_cache()) # enable depends on psutil
|
||||
start = time.time()
|
||||
for _ in range(25):
|
||||
mon.monitor_call("p", lambda: None)
|
||||
# 25 * 0.1s = 2.5s under the old blocking bug; must be far faster now.
|
||||
assert time.time() - start < 1.0
|
||||
|
||||
|
||||
class TestResourceLimits:
|
||||
def test_execution_time_limit_raises(self):
|
||||
mon = PluginResourceMonitor(_cache(), enable_monitoring=False)
|
||||
mon.set_limits("p", ResourceLimits(max_execution_time=0.001))
|
||||
with pytest.raises(ResourceLimitExceeded):
|
||||
mon.monitor_call("p", lambda: time.sleep(0.02))
|
||||
|
||||
def test_reset_metrics_clears_counts(self):
|
||||
cache = _cache()
|
||||
mon = PluginResourceMonitor(cache, enable_monitoring=False)
|
||||
mon.monitor_call("p", lambda: None)
|
||||
assert mon.get_metrics("p").call_count == 1
|
||||
mon.reset_metrics("p")
|
||||
assert mon.get_metrics("p").call_count == 0
|
||||
|
||||
|
||||
class TestForceReload:
|
||||
def test_force_reload_refreshes_stale_snapshot(self):
|
||||
"""A read-only consumer must see the writer process's latest persisted
|
||||
metrics rather than a pinned first snapshot."""
|
||||
cache = MagicMock()
|
||||
persisted = {"value": None} # only the metrics key returns data
|
||||
|
||||
def cache_get(key, max_age=None, memory_ttl=None):
|
||||
return persisted["value"] if key.startswith("plugin_metrics:") else None
|
||||
|
||||
cache.get.side_effect = cache_get
|
||||
mon = PluginResourceMonitor(cache, enable_monitoring=False)
|
||||
|
||||
# First read snapshots empty metrics.
|
||||
assert mon.get_metrics_summary("p")["call_count"] == 0
|
||||
|
||||
# The display service later persists real metrics.
|
||||
persisted["value"] = {"call_count": 7, "total_execution_time": 1.4}
|
||||
|
||||
# Plain read stays stale...
|
||||
assert mon.get_metrics_summary("p")["call_count"] == 0
|
||||
# ...force_reload picks up the persisted values and bypasses memory.
|
||||
fresh = mon.get_metrics_summary("p", force_reload=True)
|
||||
assert fresh["call_count"] == 7
|
||||
assert any(c.kwargs.get("memory_ttl") == 0 for c in cache.get.call_args_list)
|
||||
@@ -759,3 +759,54 @@ class TestDottedKeyNormalization:
|
||||
teams = soccer_cfg.get('leagues', {}).get('eng.1', {}).get('favorite_teams')
|
||||
assert isinstance(teams, list), f"Expected list, got: {type(teams)}"
|
||||
assert teams == [], f"Expected empty default list, got: {teams}"
|
||||
|
||||
|
||||
class TestPluginHealthRoutes:
|
||||
"""Phase 1: /plugins/health and /plugins/metrics build per-installed-id so
|
||||
they surface cross-process data persisted by the display service."""
|
||||
|
||||
def test_health_route_builds_per_installed_id(self, client, mock_plugin_manager):
|
||||
from web_interface.blueprints.api_v3 import api_v3
|
||||
from src.plugin_system.plugin_health import PluginHealthTracker
|
||||
|
||||
cache = MagicMock()
|
||||
cache.get.return_value = None
|
||||
api_v3.plugin_manager = mock_plugin_manager
|
||||
mock_plugin_manager.plugin_manifests = {'p1': {}, 'p2': {}}
|
||||
mock_plugin_manager.health_tracker = PluginHealthTracker(cache)
|
||||
|
||||
resp = client.get('/api/v3/plugins/health')
|
||||
assert resp.status_code == 200
|
||||
data = resp.get_json()['data']
|
||||
assert set(data.keys()) == {'p1', 'p2'}
|
||||
assert data['p1']['is_healthy'] is True
|
||||
assert data['p1']['degraded'] is False
|
||||
|
||||
def test_health_route_reports_not_available_without_tracker(self, client, mock_plugin_manager):
|
||||
from web_interface.blueprints.api_v3 import api_v3
|
||||
api_v3.plugin_manager = mock_plugin_manager
|
||||
mock_plugin_manager.health_tracker = None
|
||||
|
||||
resp = client.get('/api/v3/plugins/health')
|
||||
assert resp.status_code == 200
|
||||
body = resp.get_json()
|
||||
assert body['data'] == {}
|
||||
assert 'not available' in body['message'].lower()
|
||||
|
||||
def test_metrics_route_builds_per_installed_id(self, client, mock_plugin_manager):
|
||||
from web_interface.blueprints.api_v3 import api_v3
|
||||
from src.plugin_system.resource_monitor import PluginResourceMonitor
|
||||
|
||||
cache = MagicMock()
|
||||
cache.get.return_value = None
|
||||
api_v3.plugin_manager = mock_plugin_manager
|
||||
mock_plugin_manager.plugin_manifests = {'p1': {}}
|
||||
mock_plugin_manager.resource_monitor = PluginResourceMonitor(
|
||||
cache, enable_monitoring=False
|
||||
)
|
||||
|
||||
resp = client.get('/api/v3/plugins/metrics')
|
||||
assert resp.status_code == 200
|
||||
data = resp.get_json()['data']
|
||||
assert 'p1' in data
|
||||
assert data['p1']['call_count'] == 0
|
||||
|
||||
@@ -0,0 +1,184 @@
|
||||
"""
|
||||
Smoke tests for the settings tooltips + search UI.
|
||||
|
||||
These render the settings partials through Flask and assert that every settings
|
||||
field carries:
|
||||
- a stable search anchor id (`id="setting-..."` on its .form-group), and
|
||||
- an info tooltip (`class="help-tip"` emitted by the help_tip macro).
|
||||
|
||||
They guard against macro/import breakage and against fields losing their anchor
|
||||
or tooltip when partials are edited. See web_interface/static/v3/js/tooltips.js
|
||||
and settings-search.js for the consumers of this markup.
|
||||
"""
|
||||
|
||||
import sys
|
||||
from pathlib import Path
|
||||
from unittest.mock import MagicMock
|
||||
|
||||
import pytest
|
||||
from flask import Flask
|
||||
|
||||
PROJECT_ROOT = Path(__file__).parent.parent
|
||||
sys.path.insert(0, str(PROJECT_ROOT))
|
||||
|
||||
|
||||
# A realistic-enough config so the hand-written partials render every field.
|
||||
REALISTIC_CONFIG = {
|
||||
"web_display_autostart": True,
|
||||
"timezone": "America/Chicago",
|
||||
"location": {"city": "Dallas", "state": "Texas", "country": "US"},
|
||||
"plugin_system": {
|
||||
"auto_discover": True,
|
||||
"auto_load_enabled": True,
|
||||
"development_mode": False,
|
||||
"plugins_directory": "plugin-repos",
|
||||
},
|
||||
"schedule": {},
|
||||
"dim_schedule": {"dim_brightness": 30},
|
||||
"sync": {"role": "standalone", "port": 5765, "follower_position": "left"},
|
||||
"display": {
|
||||
"hardware": {
|
||||
"rows": 32, "cols": 64, "chain_length": 2, "parallel": 1,
|
||||
"brightness": 95, "hardware_mapping": "adafruit-hat-pwm",
|
||||
"led_rgb_sequence": "RGB", "multiplexing": 0, "panel_type": "",
|
||||
"row_address_type": 0, "scan_mode": 0, "pwm_bits": 9,
|
||||
"pwm_dither_bits": 1, "pwm_lsb_nanoseconds": 130,
|
||||
"limit_refresh_rate_hz": 120, "disable_hardware_pulsing": False,
|
||||
"inverse_colors": False, "show_refresh_rate": False,
|
||||
},
|
||||
"runtime": {"gpio_slowdown": 3, "rp1_rio": 0},
|
||||
"double_sided": {"enabled": False, "copies": 2, "axis": "horizontal"},
|
||||
"use_short_date_format": False,
|
||||
"dynamic_duration": {"max_duration_seconds": 180},
|
||||
"vegas_scroll": {
|
||||
"enabled": False, "scroll_speed": 50, "separator_width": 32,
|
||||
"target_fps": 125, "buffer_ahead": 2,
|
||||
"plugin_order": [], "excluded_plugins": [],
|
||||
},
|
||||
"display_durations": {"clock": 15, "weather": 30},
|
||||
},
|
||||
}
|
||||
|
||||
|
||||
@pytest.fixture
|
||||
def client():
|
||||
base = PROJECT_ROOT / "web_interface"
|
||||
app = Flask(
|
||||
__name__,
|
||||
template_folder=str(base / "templates"),
|
||||
static_folder=str(base / "static"),
|
||||
)
|
||||
app.config["TESTING"] = True
|
||||
|
||||
from web_interface.blueprints import pages_v3 as pv
|
||||
|
||||
mock_cm = MagicMock()
|
||||
mock_cm.load_config.return_value = REALISTIC_CONFIG
|
||||
mock_cm.get_raw_file_content.return_value = REALISTIC_CONFIG
|
||||
mock_cm.get_config_path.return_value = "config/config.json"
|
||||
mock_cm.get_secrets_path.return_value = "config/config_secrets.json"
|
||||
pv.pages_v3.config_manager = mock_cm
|
||||
pv.pages_v3.plugin_manager = MagicMock(plugins={})
|
||||
|
||||
app.register_blueprint(pv.pages_v3, url_prefix="/v3")
|
||||
return app.test_client()
|
||||
|
||||
|
||||
# Settings tabs that must expose searchable, tooltipped fields.
|
||||
SETTINGS_TABS = ["general", "display", "durations", "schedule", "wifi"]
|
||||
|
||||
|
||||
@pytest.mark.parametrize("tab", SETTINGS_TABS)
|
||||
def test_settings_partial_has_tooltips_and_anchors(client, tab):
|
||||
resp = client.get(f"/v3/partials/{tab}")
|
||||
assert resp.status_code == 200, f"{tab} partial failed to render"
|
||||
body = resp.get_data(as_text=True)
|
||||
|
||||
assert 'class="help-tip"' in body, f"{tab}: no tooltips rendered"
|
||||
assert 'id="setting-' in body, f"{tab}: no search anchors rendered"
|
||||
# Every settings field should be both anchored and tooltipped; tooltip count
|
||||
# should not exceed anchor count (each field has at most one help_tip).
|
||||
anchors = body.count('id="setting-')
|
||||
tips = body.count('class="help-tip"')
|
||||
assert tips >= 1 and anchors >= 1
|
||||
assert tips <= anchors, f"{tab}: more tooltips ({tips}) than anchors ({anchors})"
|
||||
|
||||
|
||||
@pytest.mark.parametrize("tab", SETTINGS_TABS)
|
||||
def test_settings_partial_has_per_tab_filter(client, tab):
|
||||
body = client.get(f"/v3/partials/{tab}").get_data(as_text=True)
|
||||
assert 'class="settings-filter' in body, f"{tab}: per-tab filter box missing"
|
||||
|
||||
|
||||
def test_display_tooltip_carries_rich_text(client):
|
||||
# The brightness tooltip should include the authored guidance, not just a label.
|
||||
body = client.get("/v3/partials/display").get_data(as_text=True)
|
||||
assert 'id="setting-display-brightness"' in body
|
||||
assert "Recommended:" in body # rich detail authored into a tooltip
|
||||
|
||||
|
||||
def test_search_index_endpoint(client):
|
||||
"""The server-built search index powers the global settings search."""
|
||||
resp = client.get("/v3/settings/search-index")
|
||||
assert resp.status_code == 200
|
||||
data = resp.get_json()
|
||||
assert isinstance(data, dict) and isinstance(data.get("fields"), list)
|
||||
fields = data["fields"]
|
||||
assert len(fields) >= 40, "expected the core settings fields to be indexed"
|
||||
|
||||
by_id = {f["anchorId"]: f for f in fields}
|
||||
# Representative fields across tabs must be present with usable text.
|
||||
for anchor in ("setting-general-timezone", "setting-display-brightness",
|
||||
"setting-wifi-password", "setting-durations-clock"):
|
||||
assert anchor in by_id, f"{anchor} missing from search index"
|
||||
entry = by_id[anchor]
|
||||
assert entry["label"], f"{anchor} has no label"
|
||||
assert entry["help"], f"{anchor} has no tooltip help"
|
||||
assert entry["tab"] and entry["tabLabel"]
|
||||
|
||||
# Every entry must carry a non-empty label and a stable anchor id.
|
||||
assert all(f["label"] and f["anchorId"].startswith("setting-") for f in fields)
|
||||
# Section context is captured for grouped fields (e.g. Display hardware).
|
||||
assert by_id["setting-display-brightness"]["section"] == "Hardware Configuration"
|
||||
|
||||
|
||||
def test_plugin_config_partial_has_filter_and_nested_anchors():
|
||||
"""Plugin config tabs expose the per-tab filter and anchor nested fields.
|
||||
|
||||
The client fixture has no installed plugins, so render the partial directly
|
||||
with a schema that includes a nested section (render_nested_section).
|
||||
"""
|
||||
from jinja2 import Environment, FileSystemLoader, select_autoescape
|
||||
|
||||
env = Environment(
|
||||
loader=FileSystemLoader(str(PROJECT_ROOT / "web_interface" / "templates")),
|
||||
autoescape=select_autoescape(["html"]),
|
||||
)
|
||||
plugin = {
|
||||
"id": "demo-plugin", "name": "Demo Plugin", "description": "A demo",
|
||||
"enabled": True, "author": "me", "version": "1.0.0",
|
||||
}
|
||||
schema = {
|
||||
"type": "object",
|
||||
"properties": {
|
||||
"title_text": {"type": "string", "title": "Title Text",
|
||||
"description": "The heading."},
|
||||
"advanced": {
|
||||
"type": "object", "title": "Advanced Options",
|
||||
"description": "Nested options.",
|
||||
"properties": {
|
||||
"scroll_speed": {"type": "integer", "title": "Scroll Speed",
|
||||
"description": "Pixels per second."},
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
config = {"title_text": "Hi", "advanced": {"scroll_speed": 50}}
|
||||
html = env.get_template("v3/partials/plugin_config.html").render(
|
||||
plugin=plugin, schema=schema, config=config
|
||||
)
|
||||
|
||||
assert 'class="settings-filter' in html, "plugin config: per-tab filter box missing"
|
||||
assert "nested-content" in html, "plugin config: nested section not rendered"
|
||||
assert 'id="setting-' in html, "plugin config: no search anchors rendered"
|
||||
assert 'class="help-tip"' in html, "plugin config: no tooltips rendered"
|
||||
@@ -160,6 +160,22 @@ api_v3.health_monitor = health_monitor
|
||||
from src.cache_manager import CacheManager
|
||||
api_v3.cache_manager = CacheManager()
|
||||
|
||||
# Wire plugin health/metrics for the web process. The display service records
|
||||
# health and execution-time metrics to the shared on-disk cache; giving the web
|
||||
# process its own tracker/monitor backed by that same cache lets the health API
|
||||
# routes (/api/v3/plugins/health, /plugins/metrics) read that persisted data.
|
||||
# Guarded so any init failure degrades to "not available" rather than breaking
|
||||
# the web server.
|
||||
try:
|
||||
from src.plugin_system.plugin_health import PluginHealthTracker
|
||||
from src.plugin_system.resource_monitor import PluginResourceMonitor
|
||||
plugin_manager.health_tracker = PluginHealthTracker(api_v3.cache_manager)
|
||||
plugin_manager.resource_monitor = PluginResourceMonitor(api_v3.cache_manager)
|
||||
except Exception as _hm_err: # pragma: no cover - defensive startup guard
|
||||
logging.getLogger(__name__).warning(
|
||||
"Could not enable plugin health/metrics for web UI: %s", _hm_err
|
||||
)
|
||||
|
||||
app.register_blueprint(pages_v3, url_prefix='/v3')
|
||||
app.register_blueprint(api_v3, url_prefix='/api/v3')
|
||||
|
||||
|
||||
@@ -2073,6 +2073,18 @@ def get_installed_plugins():
|
||||
return None
|
||||
|
||||
def _build_plugin_entry_inner(plugin_info, plugin_id):
|
||||
# Capture runtime state (state machine + error context) before the
|
||||
# manifest merge below can shadow the 'state' key. get_all_plugin_info
|
||||
# attaches this via PluginStateManager.get_state_info(); surfacing it
|
||||
# lets the UI show *why* a plugin isn't running instead of just
|
||||
# 'loaded: false'.
|
||||
state_info = plugin_info.get('state')
|
||||
plugin_state = None
|
||||
plugin_error_info = None
|
||||
if isinstance(state_info, dict):
|
||||
plugin_state = state_info.get('state')
|
||||
plugin_error_info = state_info.get('error_info')
|
||||
|
||||
# Re-read manifest from disk to ensure we have the latest metadata
|
||||
manifest_path = Path(api_v3.plugin_manager.plugins_dir) / plugin_id / "manifest.json"
|
||||
if manifest_path.exists():
|
||||
@@ -2154,6 +2166,8 @@ def get_installed_plugins():
|
||||
'enabled': enabled,
|
||||
'verified': verified,
|
||||
'loaded': plugin_info.get('loaded', False),
|
||||
'state': plugin_state,
|
||||
'error_info': plugin_error_info,
|
||||
'last_updated': last_updated,
|
||||
'last_commit': last_commit,
|
||||
'last_commit_message': last_commit_message,
|
||||
@@ -2173,6 +2187,31 @@ def get_installed_plugins():
|
||||
logger.error('Error in get_installed_plugins', exc_info=True)
|
||||
return jsonify({'status': 'error', 'message': 'An error occurred; see logs for details'}), 500
|
||||
|
||||
def _installed_plugin_ids():
|
||||
"""Best-effort list of installed plugin IDs for the web process.
|
||||
|
||||
Health/metrics state is written by the separate display service to the
|
||||
shared on-disk cache, so the tracker's in-memory set is empty here. We
|
||||
enumerate the installed plugins and read each one's persisted summary by ID
|
||||
instead of relying on the tracker's in-memory `get_all_*` view.
|
||||
"""
|
||||
pm = api_v3.plugin_manager
|
||||
manifests = getattr(pm, 'plugin_manifests', None)
|
||||
if not manifests:
|
||||
# Only pay for a discovery scan when we haven't discovered anything yet;
|
||||
# subsequent polls reuse the already-populated manifest map.
|
||||
try:
|
||||
pm.discover_plugins()
|
||||
except Exception:
|
||||
logger.debug('discover_plugins failed while listing plugin ids', exc_info=True)
|
||||
manifests = getattr(pm, 'plugin_manifests', None)
|
||||
try:
|
||||
return list(manifests.keys()) if manifests else []
|
||||
except Exception:
|
||||
logger.debug('listing plugin_manifests failed while building plugin ids', exc_info=True)
|
||||
return []
|
||||
|
||||
|
||||
@api_v3.route('/plugins/health', methods=['GET'])
|
||||
def get_plugin_health():
|
||||
"""Get health metrics for all plugins"""
|
||||
@@ -2188,8 +2227,23 @@ def get_plugin_health():
|
||||
'message': 'Health tracking not available'
|
||||
})
|
||||
|
||||
# Get health summaries for all plugins
|
||||
health_summaries = api_v3.plugin_manager.health_tracker.get_all_health_summaries()
|
||||
tracker = api_v3.plugin_manager.health_tracker
|
||||
# Build per-plugin summaries by ID so persisted (cross-process) health
|
||||
# is included, then fold in any in-memory-only entries.
|
||||
health_summaries = {}
|
||||
for pid in _installed_plugin_ids():
|
||||
try:
|
||||
# force_reload: this process only reads; bypass the in-memory
|
||||
# snapshot so each poll reflects the display service's latest
|
||||
# persisted state.
|
||||
health_summaries[pid] = tracker.get_health_summary(pid, force_reload=True)
|
||||
except Exception:
|
||||
logger.debug('Could not read health summary for %s', pid, exc_info=True)
|
||||
try:
|
||||
for pid, summary in tracker.get_all_health_summaries().items():
|
||||
health_summaries.setdefault(pid, summary)
|
||||
except Exception:
|
||||
logger.debug('get_all_health_summaries failed', exc_info=True)
|
||||
|
||||
return jsonify({
|
||||
'status': 'success',
|
||||
@@ -2264,8 +2318,22 @@ def get_plugin_metrics():
|
||||
'message': 'Resource monitoring not available'
|
||||
})
|
||||
|
||||
# Get metrics summaries for all plugins
|
||||
metrics_summaries = api_v3.plugin_manager.resource_monitor.get_all_metrics_summaries()
|
||||
monitor = api_v3.plugin_manager.resource_monitor
|
||||
# Build per-plugin summaries by ID so persisted (cross-process) metrics
|
||||
# are included, then fold in any in-memory-only entries.
|
||||
metrics_summaries = {}
|
||||
for pid in _installed_plugin_ids():
|
||||
try:
|
||||
# force_reload: read-only path — bypass the in-memory snapshot so
|
||||
# each poll reflects the display service's latest persisted metrics.
|
||||
metrics_summaries[pid] = monitor.get_metrics_summary(pid, force_reload=True)
|
||||
except Exception:
|
||||
logger.debug('Could not read metrics summary for %s', pid, exc_info=True)
|
||||
try:
|
||||
for pid, summary in monitor.get_all_metrics_summaries().items():
|
||||
metrics_summaries.setdefault(pid, summary)
|
||||
except Exception:
|
||||
logger.debug('get_all_metrics_summaries failed', exc_info=True)
|
||||
|
||||
return jsonify({
|
||||
'status': 'success',
|
||||
@@ -7184,6 +7252,74 @@ def set_auto_enable_ap_mode():
|
||||
'message': 'An error occurred; see logs for details'
|
||||
}), 500
|
||||
|
||||
@api_v3.route('/wifi/radio', methods=['GET'])
|
||||
def get_wifi_radio():
|
||||
"""Get current WiFi radio state (enabled/disabled) and wired-fallback status."""
|
||||
try:
|
||||
from src.wifi_manager import WiFiManager
|
||||
|
||||
wifi_manager = WiFiManager()
|
||||
state = wifi_manager.get_wifi_radio_state()
|
||||
|
||||
return jsonify({
|
||||
'status': 'success',
|
||||
'data': state
|
||||
})
|
||||
except Exception as e:
|
||||
logger.error("Error getting WiFi radio state", exc_info=True)
|
||||
return jsonify({
|
||||
'status': 'error',
|
||||
'message': 'An error occurred; see logs for details'
|
||||
}), 500
|
||||
|
||||
@api_v3.route('/wifi/radio', methods=['POST'])
|
||||
def set_wifi_radio():
|
||||
"""Turn the WiFi radio on or off.
|
||||
|
||||
Body: {"enabled": bool, "force": bool (optional)}. Disabling is refused
|
||||
unless Ethernet is connected or force=True, to avoid locking the user out
|
||||
of this web interface.
|
||||
"""
|
||||
try:
|
||||
from src.wifi_manager import WiFiManager
|
||||
|
||||
data = request.get_json(silent=True) or {}
|
||||
if 'enabled' not in data:
|
||||
return jsonify({
|
||||
'status': 'error',
|
||||
'message': 'enabled is required'
|
||||
}), 400
|
||||
|
||||
# Parse defensively: bool("false") is True, so mirror the string-aware
|
||||
# coercion used for `force` — the endpoint is a public contract, not just
|
||||
# the shipped UI (which always sends real JSON booleans).
|
||||
_enabled_raw = data['enabled']
|
||||
enabled = _enabled_raw is True or (isinstance(_enabled_raw, str) and _enabled_raw.lower() in ('true', '1', 'yes'))
|
||||
_force_raw = data.get('force', False)
|
||||
force = _force_raw is True or (isinstance(_force_raw, str) and _force_raw.lower() in ('true', '1', 'yes'))
|
||||
|
||||
wifi_manager = WiFiManager()
|
||||
success, message, reason = wifi_manager.set_wifi_radio(enabled, force=force)
|
||||
|
||||
if success:
|
||||
return jsonify({
|
||||
'status': 'success',
|
||||
'message': message,
|
||||
'data': wifi_manager.get_wifi_radio_state()
|
||||
})
|
||||
else:
|
||||
return jsonify({
|
||||
'status': 'error',
|
||||
'message': message,
|
||||
'reason': reason
|
||||
}), 400
|
||||
except Exception as e:
|
||||
logger.error("Error setting WiFi radio state", exc_info=True)
|
||||
return jsonify({
|
||||
'status': 'error',
|
||||
'message': 'An error occurred; see logs for details'
|
||||
}), 500
|
||||
|
||||
@api_v3.route('/cache/list', methods=['GET'])
|
||||
def list_cache_files():
|
||||
"""List all cache files with metadata"""
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
from flask import Blueprint, render_template, flash
|
||||
from flask import Blueprint, render_template, flash, jsonify
|
||||
from jinja2 import TemplateNotFound
|
||||
from markupsafe import escape
|
||||
from html.parser import HTMLParser
|
||||
import json
|
||||
import logging
|
||||
import os
|
||||
@@ -22,6 +23,114 @@ plugin_store_manager = None
|
||||
|
||||
pages_v3 = Blueprint('pages_v3', __name__)
|
||||
|
||||
|
||||
class _SettingsIndexParser(HTMLParser):
|
||||
"""Extract searchable settings fields from a rendered partial's HTML.
|
||||
|
||||
Captures one entry per ``<div class="form-group" id="setting-…">``: the
|
||||
anchor id, ``data-setting-key``, the field's ``<label>`` text, the
|
||||
``.help-tip`` tooltip text (``data-tooltip``), and the nearest preceding
|
||||
``<h3>``/``<h4>`` section heading. Parsing the *rendered* HTML (rather than
|
||||
the schema) guarantees the anchor ids match the live DOM exactly, so the
|
||||
search index cannot drift from what users actually see.
|
||||
"""
|
||||
|
||||
def __init__(self, tab, tab_label):
|
||||
super().__init__(convert_charrefs=True)
|
||||
self.tab = tab
|
||||
self.tab_label = tab_label
|
||||
self.fields = []
|
||||
self._section = ''
|
||||
self._field = None
|
||||
self._depth = 0 # open-div depth within the current field
|
||||
self._in_label = False
|
||||
self._label_parts = []
|
||||
self._in_heading = False
|
||||
self._heading_parts = []
|
||||
|
||||
def handle_starttag(self, tag, attrs):
|
||||
a = {k: (v or '') for k, v in attrs}
|
||||
classes = a.get('class', '').split()
|
||||
# Section headings (only when not already inside a field)
|
||||
if tag in ('h3', 'h4') and self._field is None:
|
||||
self._in_heading = True
|
||||
self._heading_parts = []
|
||||
if tag == 'div':
|
||||
fid = a.get('id', '')
|
||||
if self._field is None and 'form-group' in classes and fid.startswith('setting-'):
|
||||
self._field = {
|
||||
'anchorId': fid,
|
||||
'key': a.get('data-setting-key', '') or fid[len('setting-'):],
|
||||
'label': '',
|
||||
'help': '',
|
||||
'section': self._section,
|
||||
'tab': self.tab,
|
||||
'tabLabel': self.tab_label,
|
||||
}
|
||||
self._depth = 1
|
||||
return
|
||||
if self._field is not None:
|
||||
self._depth += 1
|
||||
if self._field is not None:
|
||||
if tag == 'label' and not self._field['label']:
|
||||
self._in_label = True
|
||||
self._label_parts = []
|
||||
if tag == 'button' and 'help-tip' in classes and not self._field['help']:
|
||||
self._field['help'] = a.get('data-tooltip', '')
|
||||
|
||||
def handle_data(self, data):
|
||||
if self._in_label:
|
||||
self._label_parts.append(data)
|
||||
elif self._in_heading:
|
||||
self._heading_parts.append(data)
|
||||
|
||||
def handle_endtag(self, tag):
|
||||
if tag in ('h3', 'h4') and self._in_heading:
|
||||
self._in_heading = False
|
||||
self._section = ' '.join(''.join(self._heading_parts).split()).strip()
|
||||
return
|
||||
if self._field is None:
|
||||
return
|
||||
if tag == 'label' and self._in_label:
|
||||
self._in_label = False
|
||||
self._field['label'] = ' '.join(''.join(self._label_parts).split()).strip()
|
||||
elif tag == 'div':
|
||||
self._depth -= 1
|
||||
if self._depth <= 0:
|
||||
if self._field['label']:
|
||||
self.fields.append(self._field)
|
||||
self._field = None
|
||||
self._depth = 0
|
||||
|
||||
|
||||
def _partial_html(loader):
|
||||
"""Run a partial loader and return its HTML string ('' on error)."""
|
||||
try:
|
||||
result = loader()
|
||||
except Exception:
|
||||
logger.warning("search-index: partial render failed", exc_info=True)
|
||||
return ''
|
||||
if isinstance(result, str):
|
||||
return result
|
||||
if isinstance(result, tuple): # loaders return (msg, status) on error
|
||||
return ''
|
||||
try:
|
||||
return result.get_data(as_text=True)
|
||||
except Exception:
|
||||
return ''
|
||||
|
||||
|
||||
def _extract_settings_fields(html, tab, tab_label):
|
||||
parser = _SettingsIndexParser(tab, tab_label)
|
||||
parser.feed(html)
|
||||
return parser.fields
|
||||
|
||||
|
||||
# Cache the built index keyed on the installed-plugin set. Core labels/tooltips
|
||||
# are static template text, so only a change in installed plugins invalidates it.
|
||||
_SEARCH_INDEX_CACHE = {'sig': None, 'fields': None}
|
||||
|
||||
|
||||
@pages_v3.route('/')
|
||||
def index():
|
||||
"""Main v3 interface page"""
|
||||
@@ -111,6 +220,56 @@ def load_plugin_config_partial(plugin_id):
|
||||
return '<div class="text-red-500 p-4">Error loading plugin config; see logs for details</div>', 500
|
||||
|
||||
|
||||
@pages_v3.route('/settings/search-index')
|
||||
def settings_search_index():
|
||||
"""Return a flat JSON index of every searchable setting (core + plugin).
|
||||
|
||||
Powers the web UI's global settings search. Built by rendering the settings
|
||||
partials server-side and extracting field metadata, then cached per
|
||||
installed-plugin set so it is off the display's hot path.
|
||||
"""
|
||||
# Core settings tabs: (activeTab value, human label, loader).
|
||||
core_tabs = [
|
||||
('general', 'General', _load_general_partial),
|
||||
('display', 'Display', _load_display_partial),
|
||||
('durations', 'Durations', _load_durations_partial),
|
||||
('schedule', 'Schedule', _load_schedule_partial),
|
||||
('wifi', 'WiFi', _load_wifi_partial),
|
||||
]
|
||||
try:
|
||||
plugin_ids = []
|
||||
if pages_v3.plugin_manager:
|
||||
try:
|
||||
pages_v3.plugin_manager.discover_plugins()
|
||||
plugin_ids = sorted(
|
||||
pi.get('id') for pi in pages_v3.plugin_manager.get_all_plugin_info()
|
||||
if pi.get('id')
|
||||
)
|
||||
except Exception:
|
||||
logger.warning("search-index: could not enumerate plugins", exc_info=True)
|
||||
|
||||
sig = tuple(plugin_ids)
|
||||
if _SEARCH_INDEX_CACHE['sig'] == sig and _SEARCH_INDEX_CACHE['fields'] is not None:
|
||||
return jsonify({'fields': _SEARCH_INDEX_CACHE['fields']})
|
||||
|
||||
fields = []
|
||||
for tab, label, loader in core_tabs:
|
||||
fields.extend(_extract_settings_fields(_partial_html(loader), tab, label))
|
||||
|
||||
for pid in plugin_ids:
|
||||
info = pages_v3.plugin_manager.get_plugin_info(pid) or {}
|
||||
label = info.get('name', pid)
|
||||
html = _partial_html(lambda pid=pid: _load_plugin_config_partial(pid))
|
||||
fields.extend(_extract_settings_fields(html, pid, label))
|
||||
|
||||
_SEARCH_INDEX_CACHE['sig'] = sig
|
||||
_SEARCH_INDEX_CACHE['fields'] = fields
|
||||
return jsonify({'fields': fields})
|
||||
except Exception:
|
||||
logger.error("Error building settings search index", exc_info=True)
|
||||
return jsonify({'fields': []}), 500
|
||||
|
||||
|
||||
@pages_v3.route('/plugin-ui/<plugin_id>/web-ui/<path:filename>')
|
||||
def serve_plugin_web_ui(plugin_id, filename):
|
||||
"""Serve a plugin's web_ui/ HTML fragment as a standalone page.
|
||||
|
||||
@@ -766,6 +766,153 @@ button.bg-white {
|
||||
}
|
||||
}
|
||||
|
||||
/* ============================================================================ */
|
||||
/* Settings tooltips (help_tip macro + tooltips.js) */
|
||||
/* ============================================================================ */
|
||||
|
||||
/* The (i) info trigger placed next to a setting label. */
|
||||
.help-tip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 1.15rem;
|
||||
height: 1.15rem;
|
||||
margin-left: 0.375rem;
|
||||
padding: 0;
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: var(--color-text-tertiary);
|
||||
font-size: 0.8125rem;
|
||||
line-height: 1;
|
||||
cursor: help;
|
||||
vertical-align: middle;
|
||||
border-radius: 9999px;
|
||||
transition: color 0.12s ease;
|
||||
}
|
||||
|
||||
.help-tip:hover,
|
||||
.help-tip:focus-visible {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
.help-tip:focus-visible {
|
||||
outline: 2px solid var(--color-primary);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
/* Singleton tooltip panel appended to <body> by tooltips.js. */
|
||||
#ledm-tooltip {
|
||||
position: fixed;
|
||||
z-index: 1000;
|
||||
max-width: 20rem;
|
||||
padding: 0.5rem 0.75rem;
|
||||
background: var(--color-surface);
|
||||
color: var(--color-text-secondary);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 0.5rem;
|
||||
box-shadow: var(--shadow-lg);
|
||||
font-size: 0.8125rem;
|
||||
line-height: 1.45;
|
||||
white-space: pre-line; /* renders authored "\n" line breaks */
|
||||
pointer-events: none; /* never steals hover/click from the page */
|
||||
animation: tooltipFade 0.12s ease;
|
||||
}
|
||||
|
||||
#ledm-tooltip[hidden] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@keyframes tooltipFade {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
|
||||
/* ============================================================================ */
|
||||
/* Settings search — global header dropdown + per-tab filter */
|
||||
/* ============================================================================ */
|
||||
|
||||
#settings-search-results {
|
||||
background: var(--color-surface);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 0.5rem;
|
||||
box-shadow: var(--shadow-lg);
|
||||
z-index: 50;
|
||||
padding: 0.25rem;
|
||||
max-height: min(60vh, 24rem);
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.ssr-group {
|
||||
padding: 0.375rem 0.625rem 0.25rem;
|
||||
font-size: 0.6875rem;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
color: var(--color-text-tertiary);
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background: var(--color-surface);
|
||||
}
|
||||
|
||||
.ssr-option {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
padding: 0.4rem 0.625rem;
|
||||
border: none;
|
||||
background: transparent;
|
||||
border-radius: 0.375rem;
|
||||
cursor: pointer;
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.ssr-option:hover,
|
||||
.ssr-option.active {
|
||||
background: var(--color-info-bg);
|
||||
}
|
||||
|
||||
.ssr-label {
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.ssr-help {
|
||||
font-size: 0.75rem;
|
||||
color: var(--color-text-tertiary);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.ssr-empty {
|
||||
padding: 0.75rem 0.625rem;
|
||||
font-size: 0.8125rem;
|
||||
color: var(--color-text-tertiary);
|
||||
}
|
||||
|
||||
/* Flash highlight applied to a field after search navigation. */
|
||||
@keyframes settingFlash {
|
||||
0% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0); }
|
||||
25% { box-shadow: 0 0 0 3px var(--color-primary); }
|
||||
100% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0); }
|
||||
}
|
||||
|
||||
.setting-flash {
|
||||
animation: settingFlash 1.4s ease;
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
#ledm-tooltip { animation: none; }
|
||||
.setting-flash {
|
||||
animation: none;
|
||||
outline: 2px solid var(--color-primary);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Removed .divider and .divider-light - not used anywhere */
|
||||
|
||||
/* Enhanced Spacing Utilities - Only unique classes not in main utility section */
|
||||
|
||||
@@ -340,11 +340,25 @@ const PluginAPI = {
|
||||
* @returns {Promise<Object>} Health data
|
||||
*/
|
||||
async getPluginHealth(pluginId = null) {
|
||||
const endpoint = pluginId
|
||||
const endpoint = pluginId
|
||||
? `/plugins/health/${pluginId}`
|
||||
: '/plugins/health';
|
||||
const response = await this.request(endpoint);
|
||||
return response.data || {};
|
||||
},
|
||||
|
||||
/**
|
||||
* Get plugin resource metrics (execution time, memory, cpu).
|
||||
*
|
||||
* @param {string} pluginId - Optional plugin identifier (null for all)
|
||||
* @returns {Promise<Object>} Metrics data keyed by plugin id
|
||||
*/
|
||||
async getPluginMetrics(pluginId = null) {
|
||||
const endpoint = pluginId
|
||||
? `/plugins/metrics/${pluginId}`
|
||||
: '/plugins/metrics';
|
||||
const response = await this.request(endpoint);
|
||||
return response.data || {};
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
@@ -0,0 +1,477 @@
|
||||
/*
|
||||
* settings-search.js — global settings search + per-tab filter for the v3 UI.
|
||||
*
|
||||
* Two features share one lightweight index built from the same markup the
|
||||
* tooltip work standardizes (.form-group[id^="setting-"] + <label> +
|
||||
* .help-tip[data-tooltip]), so it can never drift from what is rendered:
|
||||
*
|
||||
* 1. Global search (header box): finds settings across ALL tabs, even ones
|
||||
* not yet opened, by fetching a single server-side JSON index
|
||||
* (/v3/settings/search-index) built from all rendered partials.
|
||||
* Clicking a result switches to the tab, waits for the field to load,
|
||||
* then scrolls to and flashes it.
|
||||
* 2. Per-tab filter (the .settings-filter box under a partial title):
|
||||
* hides non-matching fields on the current tab. Delegated, so it keeps
|
||||
* working across HTMX swaps.
|
||||
*
|
||||
* The server owns index generation (including plugin enumeration) and caches
|
||||
* it per installed-plugin set, so the client makes exactly one JSON request.
|
||||
*/
|
||||
(function () {
|
||||
'use strict';
|
||||
|
||||
if (window._settingsSearchInit) return;
|
||||
window._settingsSearchInit = true;
|
||||
|
||||
var MAX_RESULTS = 25;
|
||||
|
||||
function debounce(fn, ms) {
|
||||
var t;
|
||||
return function () {
|
||||
var args = arguments, ctx = this;
|
||||
clearTimeout(t);
|
||||
t = setTimeout(function () { fn.apply(ctx, args); }, ms);
|
||||
};
|
||||
}
|
||||
|
||||
// True when every search term is present in the haystack.
|
||||
function termsMatch(hay, terms) {
|
||||
return terms.every(function (t) { return hay.indexOf(t) !== -1; });
|
||||
}
|
||||
|
||||
function textOf(el) {
|
||||
return (el && el.textContent ? el.textContent : '').replace(/\s+/g, ' ').trim();
|
||||
}
|
||||
|
||||
// --- Index building -------------------------------------------------------
|
||||
|
||||
var buildPromise = null;
|
||||
|
||||
// Fetch the prebuilt index from the server (one literal-URL JSON request)
|
||||
// and cache it for the session. Each entry gets a lowercased `hay` haystack
|
||||
// for matching. The server owns which tabs/plugins are included.
|
||||
function buildIndex(force) {
|
||||
if (window._settingsIndex && !force) return Promise.resolve(window._settingsIndex);
|
||||
if (buildPromise && !force) return buildPromise;
|
||||
|
||||
buildPromise = fetch('/v3/settings/search-index', { headers: { 'X-Requested-With': 'settings-search' } })
|
||||
.then(function (r) { return r.ok ? r.json() : { fields: [] }; })
|
||||
.then(function (data) {
|
||||
var fields = (data && data.fields) || [];
|
||||
fields.forEach(function (f) {
|
||||
f.hay = [f.label, f.help, f.key, f.tabLabel, f.section].join(' ').toLowerCase();
|
||||
});
|
||||
window._settingsIndex = fields;
|
||||
return fields;
|
||||
})
|
||||
.catch(function () {
|
||||
// Don't cache the failure: clear the in-flight promise so a
|
||||
// later call can retry after a transient fetch error.
|
||||
buildPromise = null;
|
||||
return [];
|
||||
});
|
||||
return buildPromise;
|
||||
}
|
||||
|
||||
// --- Global search UI -----------------------------------------------------
|
||||
|
||||
var input = null, resultsBox = null, activeIndex = -1, currentResults = [];
|
||||
|
||||
function search(q) {
|
||||
q = q.trim().toLowerCase();
|
||||
if (!q) return [];
|
||||
var terms = q.split(/\s+/);
|
||||
var out = [];
|
||||
(window._settingsIndex || []).some(function (entry) {
|
||||
if (termsMatch(entry.hay, terms)) out.push(entry);
|
||||
return out.length >= MAX_RESULTS; // stop once we have enough
|
||||
});
|
||||
return out;
|
||||
}
|
||||
|
||||
function span(cls, text) {
|
||||
var s = document.createElement('span');
|
||||
s.className = cls;
|
||||
s.textContent = text;
|
||||
return s;
|
||||
}
|
||||
|
||||
// Build the dropdown with DOM nodes + textContent (never innerHTML) so
|
||||
// setting labels/help can never be interpreted as markup.
|
||||
function renderResults(results) {
|
||||
currentResults = results;
|
||||
activeIndex = -1;
|
||||
resultsBox.textContent = '';
|
||||
if (!results.length) {
|
||||
resultsBox.appendChild(span('ssr-empty', 'No settings found.'));
|
||||
openResults();
|
||||
return;
|
||||
}
|
||||
var lastTab = null;
|
||||
results.forEach(function (r, i) {
|
||||
if (r.tabLabel !== lastTab) {
|
||||
const group = document.createElement('div');
|
||||
group.className = 'ssr-group';
|
||||
group.textContent = r.tabLabel;
|
||||
resultsBox.appendChild(group);
|
||||
lastTab = r.tabLabel;
|
||||
}
|
||||
var sub = r.section ? (r.section + ' · ') : '';
|
||||
var snippet = r.help ? r.help.split('\n')[0] : '';
|
||||
var opt = document.createElement('button');
|
||||
opt.type = 'button';
|
||||
opt.className = 'ssr-option';
|
||||
opt.setAttribute('role', 'option');
|
||||
opt.id = 'ssr-' + i;
|
||||
opt.setAttribute('data-idx', String(i));
|
||||
opt.appendChild(span('ssr-label', r.label));
|
||||
var helpText = snippet ? (sub + snippet) : (sub ? r.section : '');
|
||||
if (helpText) opt.appendChild(span('ssr-help', helpText));
|
||||
resultsBox.appendChild(opt);
|
||||
});
|
||||
openResults();
|
||||
}
|
||||
|
||||
function openResults() {
|
||||
resultsBox.classList.remove('hidden');
|
||||
// .hidden has no effect without a matching CSS rule (this app's stylesheet
|
||||
// is a hand-picked utility subset, not full Tailwind) - force it directly,
|
||||
// same as the revealNode/collapseNode fallback below.
|
||||
resultsBox.style.display = '';
|
||||
if (input) input.setAttribute('aria-expanded', 'true');
|
||||
}
|
||||
function closeResults() {
|
||||
resultsBox.classList.add('hidden');
|
||||
resultsBox.style.display = 'none';
|
||||
activeIndex = -1;
|
||||
if (input) {
|
||||
input.setAttribute('aria-expanded', 'false');
|
||||
input.removeAttribute('aria-activedescendant');
|
||||
}
|
||||
}
|
||||
|
||||
function highlight(idx) {
|
||||
var opts = resultsBox.querySelectorAll('.ssr-option');
|
||||
opts.forEach(function (o) { o.classList.remove('active'); });
|
||||
if (idx < 0 || idx >= opts.length) { activeIndex = -1; return; }
|
||||
activeIndex = idx;
|
||||
var el = opts.item(idx);
|
||||
el.classList.add('active');
|
||||
el.scrollIntoView({ block: 'nearest' });
|
||||
input.setAttribute('aria-activedescendant', el.id);
|
||||
}
|
||||
|
||||
// --- Navigation to a setting ---------------------------------------------
|
||||
|
||||
function getAppData() {
|
||||
var appEl = document.querySelector('[x-data="app()"]') || document.querySelector('[x-data]');
|
||||
if (!appEl) return null;
|
||||
if (appEl._x_dataStack && appEl._x_dataStack[0]) return appEl._x_dataStack[0];
|
||||
if (appEl.__x && appEl.__x.$data) return appEl.__x.$data;
|
||||
return null;
|
||||
}
|
||||
|
||||
function setActiveTab(tab) {
|
||||
var data = getAppData();
|
||||
if (data) { data.activeTab = tab; return true; }
|
||||
return false;
|
||||
}
|
||||
|
||||
function waitForElement(id, timeout) {
|
||||
return new Promise(function (resolve) {
|
||||
var existing = document.getElementById(id);
|
||||
if (existing) { resolve(existing); return; }
|
||||
var host = document.getElementById('tab-content') || document.body;
|
||||
var done = false;
|
||||
var obs = new MutationObserver(function () {
|
||||
var el = document.getElementById(id);
|
||||
if (el && !done) {
|
||||
done = true;
|
||||
obs.disconnect();
|
||||
resolve(el);
|
||||
}
|
||||
});
|
||||
obs.observe(host, { childList: true, subtree: true });
|
||||
setTimeout(function () {
|
||||
if (!done) { done = true; obs.disconnect(); resolve(document.getElementById(id)); }
|
||||
}, timeout || 6000);
|
||||
});
|
||||
}
|
||||
|
||||
function isNodeHidden(node) {
|
||||
return node.classList.contains('hidden') ||
|
||||
(node.style && node.style.display === 'none') ||
|
||||
window.getComputedStyle(node).display === 'none';
|
||||
}
|
||||
|
||||
function revealNode(node) {
|
||||
// toggleSection handles the class, inline display, and chevron.
|
||||
if (node.id && typeof window.toggleSection === 'function') {
|
||||
window.toggleSection(node.id);
|
||||
} else {
|
||||
node.classList.remove('hidden');
|
||||
node.style.display = 'block';
|
||||
}
|
||||
}
|
||||
|
||||
// Re-collapse a nested section the filter previously opened. toggleSection is
|
||||
// state-based, so only toggle while the node is actually visible.
|
||||
function collapseNode(node) {
|
||||
if (isNodeHidden(node)) return;
|
||||
if (node.id && typeof window.toggleSection === 'function') {
|
||||
window.toggleSection(node.id);
|
||||
} else {
|
||||
node.classList.add('hidden');
|
||||
node.style.display = 'none';
|
||||
}
|
||||
}
|
||||
|
||||
// Reveal any collapsed nested section (from render_nested_section) so the
|
||||
// target field is actually visible before we scroll to it.
|
||||
function revealAncestors(el) {
|
||||
var node = el.parentElement;
|
||||
while (node && node !== document.body) {
|
||||
if (node.classList && node.classList.contains('nested-content') && isNodeHidden(node)) {
|
||||
revealNode(node);
|
||||
}
|
||||
node = node.parentElement;
|
||||
}
|
||||
}
|
||||
|
||||
// Like revealAncestors, but tags each section we open so the per-tab filter
|
||||
// can restore the original collapsed layout once the query is cleared.
|
||||
function expandNestedFor(el) {
|
||||
var node = el.parentElement;
|
||||
while (node && node !== document.body) {
|
||||
if (node.classList && node.classList.contains('nested-content') && isNodeHidden(node)) {
|
||||
revealNode(node);
|
||||
node.dataset.filterExpanded = '1';
|
||||
}
|
||||
node = node.parentElement;
|
||||
}
|
||||
}
|
||||
|
||||
function flash(el) {
|
||||
el.classList.remove('setting-flash');
|
||||
// force reflow so re-adding the class restarts the animation
|
||||
void el.offsetWidth;
|
||||
el.classList.add('setting-flash');
|
||||
var clear = function () { el.classList.remove('setting-flash'); el.removeEventListener('animationend', clear); };
|
||||
el.addEventListener('animationend', clear);
|
||||
}
|
||||
|
||||
function navigateToSetting(entry) {
|
||||
closeResults();
|
||||
// Clear the box so it doesn't re-open stale results when refocused.
|
||||
if (input) input.value = '';
|
||||
setActiveTab(entry.tab);
|
||||
waitForElement(entry.anchorId, 6000).then(function (el) {
|
||||
if (!el) return;
|
||||
revealAncestors(el);
|
||||
// Let the tab transition settle before scrolling.
|
||||
setTimeout(function () {
|
||||
el.scrollIntoView({ behavior: 'smooth', block: 'center' });
|
||||
flash(el);
|
||||
}, 60);
|
||||
});
|
||||
}
|
||||
|
||||
// --- Wire up the header search box ----------------------------------------
|
||||
|
||||
function initSearchBox() {
|
||||
input = document.getElementById('settings-search');
|
||||
resultsBox = document.getElementById('settings-search-results');
|
||||
if (!input || !resultsBox) return;
|
||||
|
||||
// Warm the index in the background so the first search is instant.
|
||||
var warm = function () { buildIndex().catch(function () {}); };
|
||||
if ('requestIdleCallback' in window) {
|
||||
requestIdleCallback(warm, { timeout: 4000 });
|
||||
} else {
|
||||
setTimeout(warm, 3000);
|
||||
}
|
||||
|
||||
input.addEventListener('focus', function () {
|
||||
buildIndex().then(function () {
|
||||
if (input.value.trim()) renderResults(search(input.value));
|
||||
});
|
||||
});
|
||||
|
||||
input.addEventListener('input', debounce(function () {
|
||||
var q = input.value;
|
||||
if (!q.trim()) { closeResults(); return; }
|
||||
// Focus may have left during the debounce (typed then clicked away);
|
||||
// don't re-open a dropdown the user has already dismissed.
|
||||
if (document.activeElement !== input) return;
|
||||
buildIndex().then(function () {
|
||||
if (document.activeElement === input) renderResults(search(q));
|
||||
});
|
||||
}, 200));
|
||||
|
||||
input.addEventListener('keydown', function (e) {
|
||||
var opts = resultsBox.querySelectorAll('.ssr-option');
|
||||
if (e.key === 'ArrowDown') {
|
||||
e.preventDefault();
|
||||
if (resultsBox.classList.contains('hidden')) { renderResults(search(input.value)); return; }
|
||||
highlight(Math.min(activeIndex + 1, opts.length - 1));
|
||||
} else if (e.key === 'ArrowUp') {
|
||||
e.preventDefault();
|
||||
highlight(Math.max(activeIndex - 1, 0));
|
||||
} else if (e.key === 'Enter') {
|
||||
const chosen = currentResults.at(activeIndex >= 0 ? activeIndex : 0);
|
||||
if (chosen) {
|
||||
e.preventDefault();
|
||||
navigateToSetting(chosen);
|
||||
}
|
||||
} else if (e.key === 'Escape') {
|
||||
closeResults();
|
||||
input.blur();
|
||||
}
|
||||
});
|
||||
|
||||
resultsBox.addEventListener('mousedown', function (e) {
|
||||
// mousedown (not click) so it fires before the input blur closes us
|
||||
var opt = e.target.closest('.ssr-option');
|
||||
if (!opt) return;
|
||||
e.preventDefault();
|
||||
const idx = parseInt(opt.getAttribute('data-idx'), 10);
|
||||
const chosen = currentResults.at(idx);
|
||||
if (chosen) navigateToSetting(chosen);
|
||||
});
|
||||
|
||||
// Close when a click/tap lands outside the search widget. Capture phase
|
||||
// (the `true`) runs on the way DOWN, before any bubbling stopPropagation
|
||||
// from Alpine/HTMX/widget handlers can swallow the event — a plain
|
||||
// bubble-phase document listener was being eaten and never closing us.
|
||||
// pointerdown also covers touch (Raspberry Pi screen).
|
||||
document.addEventListener('pointerdown', function (e) {
|
||||
if (!input || resultsBox.classList.contains('hidden')) return;
|
||||
var wrap = document.getElementById('settings-search-wrap');
|
||||
var inside = wrap ? wrap.contains(e.target)
|
||||
: (e.target === input || resultsBox.contains(e.target));
|
||||
if (!inside) closeResults();
|
||||
}, true);
|
||||
|
||||
// Reliable dismiss: close shortly after focus leaves the box. Result
|
||||
// selection uses mousedown + preventDefault (focus stays on the input),
|
||||
// so this never fires on a result click; the guard covers focus landing
|
||||
// in the results list (e.g. dragging its scrollbar).
|
||||
input.addEventListener('blur', function () {
|
||||
setTimeout(function () {
|
||||
if (resultsBox && resultsBox.contains(document.activeElement)) return;
|
||||
closeResults();
|
||||
}, 120);
|
||||
});
|
||||
|
||||
// A tab swap (including our own search navigation) should dismiss it.
|
||||
document.body.addEventListener('htmx:afterSwap', closeResults);
|
||||
}
|
||||
|
||||
// --- Per-tab filter (delegated) -------------------------------------------
|
||||
|
||||
function filterScope(input) {
|
||||
// Return the nearest tab/content container, or null — never `document`,
|
||||
// which would let the filter hide setting fields across unrelated tabs.
|
||||
return input.closest('.plugin-config-tab') ||
|
||||
input.closest('[id$="-content"]') ||
|
||||
input.closest('.bg-white') ||
|
||||
null;
|
||||
}
|
||||
|
||||
function fieldHay(fg) {
|
||||
var label = textOf(fg.querySelector('label'));
|
||||
var tip = fg.querySelector('.help-tip');
|
||||
var help = tip ? (tip.getAttribute('data-tooltip') || '') : '';
|
||||
var key = fg.getAttribute('data-setting-key') || fg.id.replace(/^setting-/, '');
|
||||
return (label + ' ' + help + ' ' + key).toLowerCase();
|
||||
}
|
||||
|
||||
function applyTabFilter(scope, q) {
|
||||
q = q.trim().toLowerCase();
|
||||
var terms = q ? q.split(/\s+/) : [];
|
||||
var fields = scope.querySelectorAll('.form-group[id^="setting-"]');
|
||||
var anyVisible = false;
|
||||
|
||||
fields.forEach(function (fg) {
|
||||
var show = !terms.length || termsMatch(fieldHay(fg), terms);
|
||||
fg.style.display = show ? '' : 'none';
|
||||
if (show) {
|
||||
anyVisible = true;
|
||||
// Expand any collapsed nested section holding this match so it
|
||||
// is actually visible (plugin tabs default their sections shut).
|
||||
if (terms.length) expandNestedFor(fg);
|
||||
}
|
||||
});
|
||||
|
||||
if (!terms.length) {
|
||||
// Filter cleared: restore the sections we opened and un-hide every
|
||||
// nested-section wrapper, leaving user-expanded sections untouched.
|
||||
scope.querySelectorAll('.nested-content[data-filter-expanded]').forEach(function (nc) {
|
||||
collapseNode(nc);
|
||||
delete nc.dataset.filterExpanded;
|
||||
});
|
||||
scope.querySelectorAll('.nested-section').forEach(function (ns) { ns.style.display = ''; });
|
||||
} else {
|
||||
// Hide nested-section wrappers whose fields all filtered out.
|
||||
scope.querySelectorAll('.nested-section').forEach(function (ns) {
|
||||
var secFields = ns.querySelectorAll('.form-group[id^="setting-"]');
|
||||
var visible = 0;
|
||||
secFields.forEach(function (f) { if (f.style.display !== 'none') visible++; });
|
||||
ns.style.display = (secFields.length > 0 && visible === 0) ? 'none' : '';
|
||||
});
|
||||
}
|
||||
|
||||
// Hide section headings whose settings all got filtered out. A visible
|
||||
// nested-section (plugin tabs) counts as content for its parent heading,
|
||||
// so a heading isn't hidden while a subsection below it still has matches.
|
||||
var nodes = scope.querySelectorAll('h3, h4, .form-group, .nested-section');
|
||||
var headings = [];
|
||||
var current = null;
|
||||
nodes.forEach(function (node) {
|
||||
if (node.tagName === 'H3' || node.tagName === 'H4') {
|
||||
current = { el: node, total: 0, visible: 0 };
|
||||
headings.push(current);
|
||||
} else if (current && node.matches('.form-group[id^="setting-"]')) {
|
||||
current.total++;
|
||||
if (node.style.display !== 'none') current.visible++;
|
||||
} else if (current && node.classList.contains('nested-section')) {
|
||||
current.total++;
|
||||
if (node.style.display !== 'none') current.visible++;
|
||||
}
|
||||
});
|
||||
headings.forEach(function (h) {
|
||||
// Only auto-hide headings that exclusively group settings fields.
|
||||
h.el.style.display = (terms.length && h.total > 0 && h.visible === 0) ? 'none' : '';
|
||||
});
|
||||
|
||||
// Toggle the "no matches" note if the filter box provides one.
|
||||
const wrap = scope.querySelector('.settings-filter-wrap');
|
||||
if (wrap) {
|
||||
const empty = wrap.querySelector('.settings-filter-empty');
|
||||
if (empty) empty.classList.toggle('hidden', !(terms.length && !anyVisible));
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener('input', function (e) {
|
||||
var box = e.target.closest ? e.target.closest('.settings-filter') : null;
|
||||
if (!box) return;
|
||||
var scope = filterScope(box);
|
||||
if (scope) applyTabFilter(scope, box.value);
|
||||
});
|
||||
|
||||
// --- Boot -----------------------------------------------------------------
|
||||
|
||||
if (document.readyState === 'loading') {
|
||||
document.addEventListener('DOMContentLoaded', initSearchBox);
|
||||
} else {
|
||||
initSearchBox();
|
||||
}
|
||||
|
||||
// Expose for debugging / programmatic use.
|
||||
window.LEDMatrixSettingsSearch = {
|
||||
buildIndex: buildIndex,
|
||||
navigateToSetting: navigateToSetting
|
||||
};
|
||||
|
||||
console.log('[SettingsSearch] registered');
|
||||
})();
|
||||
@@ -0,0 +1,161 @@
|
||||
/*
|
||||
* tooltips.js — accessible, delegated tooltip controller for the v3 web UI.
|
||||
*
|
||||
* A single controller handles every `.help-tip` trigger on the page, including
|
||||
* ones inside partials that HTMX swaps in later, with zero per-field wiring.
|
||||
* Triggers are emitted by the `help_tip` Jinja macro (partials/_macros.html) as
|
||||
* <button class="help-tip" data-tooltip="..."><i class="fas fa-circle-info">.
|
||||
*
|
||||
* Behaviour:
|
||||
* - hover (mouse) -> show / hide
|
||||
* - keyboard focus -> show / hide (only for :focus-visible)
|
||||
* - click / tap -> toggle (the touch path)
|
||||
* - Escape / outside click -> hide
|
||||
* The tooltip text is set via textContent (XSS-safe) and supports "\n" line
|
||||
* breaks via CSS `white-space: pre-line`. Styling lives in app.css and uses the
|
||||
* --color-* theme vars, so light/dark mode work automatically.
|
||||
*/
|
||||
(function () {
|
||||
'use strict';
|
||||
|
||||
if (window._tooltipsInit) return;
|
||||
window._tooltipsInit = true;
|
||||
|
||||
var panel = null;
|
||||
var currentTrigger = null;
|
||||
|
||||
function getPanel() {
|
||||
if (panel) return panel;
|
||||
panel = document.createElement('div');
|
||||
panel.id = 'ledm-tooltip';
|
||||
panel.setAttribute('role', 'tooltip');
|
||||
panel.hidden = true;
|
||||
document.body.appendChild(panel);
|
||||
return panel;
|
||||
}
|
||||
|
||||
function positionPanel(trigger) {
|
||||
var p = getPanel();
|
||||
var margin = 8;
|
||||
var rect = trigger.getBoundingClientRect();
|
||||
var pw = p.offsetWidth;
|
||||
var ph = p.offsetHeight;
|
||||
var vw = document.documentElement.clientWidth;
|
||||
var vh = document.documentElement.clientHeight;
|
||||
|
||||
// Prefer above the trigger; flip below if it would clip the top.
|
||||
var top = rect.top - ph - margin;
|
||||
var placedBelow = false;
|
||||
if (top < margin) {
|
||||
top = rect.bottom + margin;
|
||||
placedBelow = true;
|
||||
}
|
||||
// Keep it on screen vertically as a last resort.
|
||||
if (top + ph > vh - margin) top = Math.max(margin, vh - ph - margin);
|
||||
|
||||
// Center horizontally on the trigger, clamped to the viewport.
|
||||
var left = rect.left + rect.width / 2 - pw / 2;
|
||||
if (left < margin) left = margin;
|
||||
if (left + pw > vw - margin) left = Math.max(margin, vw - pw - margin);
|
||||
|
||||
p.style.top = Math.round(top) + 'px';
|
||||
p.style.left = Math.round(left) + 'px';
|
||||
p.setAttribute('data-placement', placedBelow ? 'below' : 'above');
|
||||
}
|
||||
|
||||
function show(trigger) {
|
||||
var text = trigger.getAttribute('data-tooltip');
|
||||
if (!text) return;
|
||||
var p = getPanel();
|
||||
p.textContent = text;
|
||||
p.hidden = false;
|
||||
// Measure after it is displayed, then position.
|
||||
positionPanel(trigger);
|
||||
trigger.setAttribute('aria-describedby', 'ledm-tooltip');
|
||||
currentTrigger = trigger;
|
||||
}
|
||||
|
||||
function hide() {
|
||||
if (!panel) return;
|
||||
panel.hidden = true;
|
||||
if (currentTrigger) {
|
||||
currentTrigger.removeAttribute('aria-describedby');
|
||||
currentTrigger = null;
|
||||
}
|
||||
}
|
||||
|
||||
function triggerFrom(target) {
|
||||
return target && target.closest ? target.closest('.help-tip') : null;
|
||||
}
|
||||
|
||||
// --- Delegated listeners on document (survive HTMX swaps) ---
|
||||
|
||||
document.addEventListener('mouseover', function (e) {
|
||||
var t = triggerFrom(e.target);
|
||||
if (t) show(t);
|
||||
});
|
||||
|
||||
document.addEventListener('mouseout', function (e) {
|
||||
var t = triggerFrom(e.target);
|
||||
if (!t) return;
|
||||
// Ignore moves that stay within the same trigger.
|
||||
var to = e.relatedTarget;
|
||||
if (to && t.contains(to)) return;
|
||||
if (currentTrigger === t) hide();
|
||||
});
|
||||
|
||||
document.addEventListener('focusin', function (e) {
|
||||
var t = triggerFrom(e.target);
|
||||
if (!t) return;
|
||||
// Only auto-show on keyboard focus, so a mouse/touch focus does not
|
||||
// fight the click handler below.
|
||||
var focusVisible;
|
||||
try {
|
||||
focusVisible = t.matches(':focus-visible');
|
||||
} catch { // older browsers without :focus-visible
|
||||
focusVisible = true;
|
||||
}
|
||||
if (focusVisible) show(t);
|
||||
});
|
||||
|
||||
document.addEventListener('focusout', function (e) {
|
||||
var t = triggerFrom(e.target);
|
||||
if (t && currentTrigger === t) hide();
|
||||
});
|
||||
|
||||
document.addEventListener('click', function (e) {
|
||||
var t = triggerFrom(e.target);
|
||||
if (t) {
|
||||
// Prevent an enclosing <label> from toggling its control, and
|
||||
// prevent form submission.
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
if (currentTrigger === t && !getPanel().hidden) {
|
||||
hide();
|
||||
} else {
|
||||
show(t);
|
||||
}
|
||||
return;
|
||||
}
|
||||
// Click anywhere else closes an open tooltip.
|
||||
if (panel && !panel.hidden && !panel.contains(e.target)) hide();
|
||||
});
|
||||
|
||||
document.addEventListener('keydown', function (e) {
|
||||
if (e.key === 'Escape' && panel && !panel.hidden) hide();
|
||||
});
|
||||
|
||||
// Reposition while visible; close when content is swapped out.
|
||||
window.addEventListener('scroll', function () {
|
||||
if (currentTrigger && panel && !panel.hidden) positionPanel(currentTrigger);
|
||||
}, true);
|
||||
window.addEventListener('resize', function () {
|
||||
if (currentTrigger && panel && !panel.hidden) positionPanel(currentTrigger);
|
||||
});
|
||||
document.body.addEventListener('htmx:afterSwap', function () {
|
||||
// The current trigger may have been removed by the swap.
|
||||
if (currentTrigger && !document.body.contains(currentTrigger)) hide();
|
||||
});
|
||||
|
||||
console.log('[Tooltips] controller registered');
|
||||
})();
|
||||
@@ -882,6 +882,25 @@
|
||||
|
||||
<!-- Connection status and theme toggle -->
|
||||
<div class="flex items-center space-x-4">
|
||||
<!-- Global settings search -->
|
||||
<div class="relative hidden sm:block" id="settings-search-wrap">
|
||||
<input id="settings-search"
|
||||
type="text"
|
||||
role="combobox"
|
||||
aria-expanded="false"
|
||||
aria-autocomplete="list"
|
||||
aria-controls="settings-search-results"
|
||||
aria-label="Search settings"
|
||||
placeholder="Search settings…"
|
||||
autocomplete="off"
|
||||
class="form-control text-sm pl-8 pr-4 py-1.5 w-48 lg:w-64">
|
||||
<i class="fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 text-xs" aria-hidden="true"></i>
|
||||
<div id="settings-search-results"
|
||||
role="listbox"
|
||||
aria-label="Settings search results"
|
||||
class="hidden absolute right-0 mt-1 w-80 max-h-96 overflow-y-auto"></div>
|
||||
</div>
|
||||
|
||||
<!-- Theme toggle -->
|
||||
<button id="theme-toggle"
|
||||
type="button"
|
||||
@@ -4747,7 +4766,11 @@
|
||||
|
||||
<!-- Custom v3 JavaScript -->
|
||||
<script src="{{ url_for('static', filename='v3/app.js') }}" defer></script>
|
||||
|
||||
|
||||
<!-- Settings tooltips + settings search -->
|
||||
<script src="{{ url_for('static', filename='v3/js/tooltips.js') }}" defer></script>
|
||||
<script src="{{ url_for('static', filename='v3/js/settings-search.js') }}" defer></script>
|
||||
|
||||
<!-- Modular Plugin Management JavaScript -->
|
||||
<!-- Load utilities first -->
|
||||
<script src="{{ url_for('static', filename='v3/js/utils/error_handler.js') }}" defer></script>
|
||||
|
||||
@@ -0,0 +1,42 @@
|
||||
{# ============================================================================ #}
|
||||
{# Shared UI macros for the v3 web interface. #}
|
||||
{# #}
|
||||
{# Import at the top of a partial with: #}
|
||||
{# {% import 'v3/partials/_macros.html' as ui %} #}
|
||||
{# #}
|
||||
{# These power the settings tooltips and the settings search feature: #}
|
||||
{# - help_tip(text, label): the (i) info icon whose hover/focus tooltip #}
|
||||
{# explains a setting. This replaces the old always-visible <p> help. #}
|
||||
{# - fg_id(tab, key): stable anchor id for a .form-group so global search #}
|
||||
{# can scroll to it (e.g. "setting-display-brightness"). #}
|
||||
{# - settings_filter(): the per-tab filter box shown under a partial title. #}
|
||||
{# ============================================================================ #}
|
||||
|
||||
{# Info (i) tooltip trigger placed next to a setting label. #}
|
||||
{# `text` supports "\n" line breaks (rendered via CSS white-space: pre-line). #}
|
||||
{# Renders nothing when `text` is empty so callers can pass through schema data. #}
|
||||
{% macro help_tip(text, label='') -%}
|
||||
{%- if text -%}
|
||||
<button type="button" class="help-tip" data-tooltip="{{ text }}"
|
||||
aria-label="{% if label %}Help for {{ label }}{% else %}More information{% endif %}">
|
||||
<i class="fas fa-circle-info" aria-hidden="true"></i>
|
||||
</button>
|
||||
{%- endif -%}
|
||||
{%- endmacro %}
|
||||
|
||||
{# Stable anchor id for a settings field's .form-group wrapper. #}
|
||||
{% macro fg_id(tab, key) -%}setting-{{ tab }}-{{ key }}{%- endmacro %}
|
||||
|
||||
{# Per-tab filter box. Place directly under a partial's <h2> title block. #}
|
||||
{# The delegated handler in settings-search.js scopes to the enclosing tab. #}
|
||||
{% macro settings_filter(placeholder='Filter these settings…') -%}
|
||||
<div class="settings-filter-wrap relative mb-6">
|
||||
<input type="text"
|
||||
class="settings-filter form-control text-sm pl-9 pr-4 py-2 w-full"
|
||||
placeholder="{{ placeholder }}"
|
||||
aria-label="Filter settings on this tab"
|
||||
autocomplete="off">
|
||||
<i class="fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 text-sm" aria-hidden="true"></i>
|
||||
<p class="settings-filter-empty text-sm text-gray-500 mt-3 hidden">No settings match your filter.</p>
|
||||
</div>
|
||||
{%- endmacro %}
|
||||
@@ -1,3 +1,4 @@
|
||||
{% import 'v3/partials/_macros.html' as ui %}
|
||||
<div class="space-y-6" id="backup-restore-root">
|
||||
|
||||
<!-- Security warning -->
|
||||
@@ -70,12 +71,12 @@
|
||||
|
||||
<h3 class="text-sm font-medium text-gray-900 mt-4 mb-2">Choose what to restore</h3>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-2 text-sm text-gray-700">
|
||||
<label class="flex items-center gap-2"><input type="checkbox" id="opt-config" checked> <span>Main configuration</span></label>
|
||||
<label class="flex items-center gap-2"><input type="checkbox" id="opt-secrets" checked> <span>API keys (secrets)</span></label>
|
||||
<label class="flex items-center gap-2"><input type="checkbox" id="opt-wifi" checked> <span>WiFi configuration</span></label>
|
||||
<label class="flex items-center gap-2"><input type="checkbox" id="opt-fonts" checked> <span>User-uploaded fonts</span></label>
|
||||
<label class="flex items-center gap-2"><input type="checkbox" id="opt-plugin-uploads" checked> <span>Plugin image uploads</span></label>
|
||||
<label class="flex items-center gap-2"><input type="checkbox" id="opt-reinstall" checked> <span>Reinstall missing plugins</span></label>
|
||||
<label class="flex items-center gap-2"><input type="checkbox" id="opt-config" checked> <span>Main configuration</span>{{ ui.help_tip('Restore config.json — display settings, schedules, location, and plugin configuration.', 'Main configuration') }}</label>
|
||||
<label class="flex items-center gap-2"><input type="checkbox" id="opt-secrets" checked> <span>API keys (secrets)</span>{{ ui.help_tip('Restore config_secrets.json — your weather, sports, and other service API keys.\nLeave off if you prefer to re-enter keys by hand.', 'API keys') }}</label>
|
||||
<label class="flex items-center gap-2"><input type="checkbox" id="opt-wifi" checked> <span>WiFi configuration</span>{{ ui.help_tip('Restore saved WiFi network names and credentials.', 'WiFi configuration') }}</label>
|
||||
<label class="flex items-center gap-2"><input type="checkbox" id="opt-fonts" checked> <span>User-uploaded fonts</span>{{ ui.help_tip('Restore any custom fonts you uploaded via the Fonts tab.', 'User-uploaded fonts') }}</label>
|
||||
<label class="flex items-center gap-2"><input type="checkbox" id="opt-plugin-uploads" checked> <span>Plugin image uploads</span>{{ ui.help_tip('Restore images and files that plugins let you upload (logos, backgrounds, etc.).', 'Plugin image uploads') }}</label>
|
||||
<label class="flex items-center gap-2"><input type="checkbox" id="opt-reinstall" checked> <span>Reinstall missing plugins</span>{{ ui.help_tip('After restoring, re-download any plugins that were installed in the backup but are missing now.', 'Reinstall missing plugins') }}</label>
|
||||
</div>
|
||||
|
||||
<div class="mt-4 flex gap-2">
|
||||
|
||||
@@ -1,9 +1,12 @@
|
||||
{% import 'v3/partials/_macros.html' as ui %}
|
||||
<div class="bg-white rounded-lg shadow p-6">
|
||||
<div class="border-b border-gray-200 pb-4 mb-6">
|
||||
<h2 class="text-lg font-semibold text-gray-900">Display Settings</h2>
|
||||
<p class="mt-1 text-sm text-gray-600">Configure LED matrix hardware settings and display options.</p>
|
||||
</div>
|
||||
|
||||
{{ ui.settings_filter('Filter display settings…') }}
|
||||
|
||||
<!-- Hardware status banner: shown when display service is in fallback/simulation mode -->
|
||||
<div x-data="{ show: false, errorMsg: '' }"
|
||||
x-init="fetch('/api/v3/hardware/status').then(r => r.json()).then(d => {
|
||||
@@ -37,8 +40,8 @@
|
||||
<h3 class="text-md font-medium text-gray-900 mb-4">Hardware Configuration</h3>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-4 2xl:grid-cols-4 gap-4 mb-4">
|
||||
<div class="form-group">
|
||||
<label for="rows" class="block text-sm font-medium text-gray-700">Rows</label>
|
||||
<div class="form-group" id="setting-display-rows" data-setting-key="display.hardware.rows">
|
||||
<label for="rows" class="block text-sm font-medium text-gray-700">Rows{{ ui.help_tip('Number of LED rows on a single panel.\nCommon: 16, 32, or 64. Default: 32. Must match your panel.', 'Rows') }}</label>
|
||||
<input type="number"
|
||||
id="rows"
|
||||
name="rows"
|
||||
@@ -46,11 +49,10 @@
|
||||
min="1"
|
||||
max="64"
|
||||
class="form-control">
|
||||
<p class="mt-1 text-sm text-gray-600">Number of LED rows</p>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="cols" class="block text-sm font-medium text-gray-700">Columns</label>
|
||||
<div class="form-group" id="setting-display-cols" data-setting-key="display.hardware.cols">
|
||||
<label for="cols" class="block text-sm font-medium text-gray-700">Columns{{ ui.help_tip('Number of LED columns on a single panel.\nCommon: 32 or 64. Default: 64. Must match your panel.', 'Columns') }}</label>
|
||||
<input type="number"
|
||||
id="cols"
|
||||
name="cols"
|
||||
@@ -58,11 +60,10 @@
|
||||
min="1"
|
||||
max="128"
|
||||
class="form-control">
|
||||
<p class="mt-1 text-sm text-gray-600">Number of LED columns</p>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="chain_length" class="block text-sm font-medium text-gray-700">Chain Length</label>
|
||||
<div class="form-group" id="setting-display-chain_length" data-setting-key="display.hardware.chain_length">
|
||||
<label for="chain_length" class="block text-sm font-medium text-gray-700">Chain Length{{ ui.help_tip('How many panels are wired end-to-end in one chain.\nDefault: 2. Example: two 64×32 panels chained make a 128×32 display.', 'Chain Length') }}</label>
|
||||
<input type="number"
|
||||
id="chain_length"
|
||||
name="chain_length"
|
||||
@@ -70,11 +71,10 @@
|
||||
min="1"
|
||||
max="24"
|
||||
class="form-control">
|
||||
<p class="mt-1 text-sm text-gray-600">Number of LED panels chained together</p>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="parallel" class="block text-sm font-medium text-gray-700">Parallel</label>
|
||||
<div class="form-group" id="setting-display-parallel" data-setting-key="display.hardware.parallel">
|
||||
<label for="parallel" class="block text-sm font-medium text-gray-700">Parallel{{ ui.help_tip('Number of separate chains driven in parallel from the HAT.\nDefault: 1. The Raspberry Pi supports up to 3 (some HATs allow more).', 'Parallel') }}</label>
|
||||
<input type="number"
|
||||
id="parallel"
|
||||
name="parallel"
|
||||
@@ -82,13 +82,12 @@
|
||||
min="1"
|
||||
max="4"
|
||||
class="form-control">
|
||||
<p class="mt-1 text-sm text-gray-600">Number of parallel chains</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div class="form-group">
|
||||
<label for="brightness" class="block text-sm font-medium text-gray-700">Brightness</label>
|
||||
<div class="form-group" id="setting-display-brightness" data-setting-key="display.hardware.brightness">
|
||||
<label for="brightness" class="block text-sm font-medium text-gray-700">Brightness{{ ui.help_tip('Overall LED brightness (1–100%).\nLower is dimmer, higher is brighter. Recommended: 70–90 indoors, 90–100 in bright rooms.', 'Brightness') }}</label>
|
||||
<div class="flex items-center space-x-2">
|
||||
<input type="range"
|
||||
id="brightness"
|
||||
@@ -99,11 +98,10 @@
|
||||
class="flex-1">
|
||||
<span id="brightness-value" class="text-sm font-medium w-12">{{ main_config.display.hardware.brightness or 95 }}</span>
|
||||
</div>
|
||||
<p class="mt-1 text-sm text-gray-600">LED brightness: <span id="brightness-display">{{ main_config.display.hardware.brightness or 95 }}</span>%</p>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="hardware_mapping" class="block text-sm font-medium text-gray-700">Hardware Mapping</label>
|
||||
<div class="form-group" id="setting-display-hardware_mapping" data-setting-key="display.hardware.hardware_mapping">
|
||||
<label for="hardware_mapping" class="block text-sm font-medium text-gray-700">Hardware Mapping{{ ui.help_tip('How the LED panel is wired to the Pi.\nUse "Adafruit HAT PWM" for an Adafruit HAT/Bonnet with the PWM solder mod; "Adafruit HAT" without it; "Regular" for direct GPIO wiring.', 'Hardware Mapping') }}</label>
|
||||
<select id="hardware_mapping" name="hardware_mapping" class="form-control">
|
||||
<option value="adafruit-hat-pwm" {% if main_config.display.hardware.hardware_mapping == "adafruit-hat-pwm" %}selected{% endif %}>Adafruit HAT PWM</option>
|
||||
<option value="adafruit-hat" {% if main_config.display.hardware.hardware_mapping == "adafruit-hat" %}selected{% endif %}>Adafruit HAT</option>
|
||||
@@ -114,8 +112,8 @@
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<div class="form-group">
|
||||
<label for="led_rgb_sequence" class="block text-sm font-medium text-gray-700">LED RGB Sequence</label>
|
||||
<div class="form-group" id="setting-display-led_rgb_sequence" data-setting-key="display.hardware.led_rgb_sequence">
|
||||
<label for="led_rgb_sequence" class="block text-sm font-medium text-gray-700">LED RGB Sequence{{ ui.help_tip('Order the panel expects color channels in.\nChange this only if reds/greens/blues look swapped. Default: RGB.', 'LED RGB Sequence') }}</label>
|
||||
<select id="led_rgb_sequence" name="led_rgb_sequence" class="form-control">
|
||||
<option value="RGB" {% if main_config.display.hardware.get('led_rgb_sequence', 'RGB') == "RGB" %}selected{% endif %}>RGB</option>
|
||||
<option value="RBG" {% if main_config.display.hardware.get('led_rgb_sequence', 'RGB') == "RBG" %}selected{% endif %}>RBG</option>
|
||||
@@ -124,11 +122,10 @@
|
||||
<option value="BRG" {% if main_config.display.hardware.get('led_rgb_sequence', 'RGB') == "BRG" %}selected{% endif %}>BRG</option>
|
||||
<option value="BGR" {% if main_config.display.hardware.get('led_rgb_sequence', 'RGB') == "BGR" %}selected{% endif %}>BGR</option>
|
||||
</select>
|
||||
<p class="mt-1 text-sm text-gray-600">Color channel order for your LED panels</p>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="multiplexing" class="block text-sm font-medium text-gray-700">Multiplexing</label>
|
||||
<div class="form-group" id="setting-display-multiplexing" data-setting-key="display.hardware.multiplexing">
|
||||
<label for="multiplexing" class="block text-sm font-medium text-gray-700">Multiplexing{{ ui.help_tip('Pixel-mapping scheme used by outdoor/specialty panels.\nLeave at 0 (Direct) for most indoor panels. Only change if the image is scrambled — try values until it looks right.', 'Multiplexing') }}</label>
|
||||
<select id="multiplexing" name="multiplexing" class="form-control">
|
||||
<option value="0" {% if main_config.display.hardware.get('multiplexing', 0)|int == 0 %}selected{% endif %}>0 - Direct</option>
|
||||
<option value="1" {% if main_config.display.hardware.get('multiplexing', 0)|int == 1 %}selected{% endif %}>1 - Stripe</option>
|
||||
@@ -154,21 +151,19 @@
|
||||
<option value="21" {% if main_config.display.hardware.get('multiplexing', 0)|int == 21 %}selected{% endif %}>21 - DoubleZMultiplex</option>
|
||||
<option value="22" {% if main_config.display.hardware.get('multiplexing', 0)|int == 22 %}selected{% endif %}>22 - P4Outdoor-80x40</option>
|
||||
</select>
|
||||
<p class="mt-1 text-sm text-gray-600">Multiplexing scheme for your LED panels</p>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="panel_type" class="block text-sm font-medium text-gray-700">Panel Type</label>
|
||||
<div class="form-group" id="setting-display-panel_type" data-setting-key="display.hardware.panel_type">
|
||||
<label for="panel_type" class="block text-sm font-medium text-gray-700">Panel Type{{ ui.help_tip('Special initialization for panels with a specific driver chip (e.g. FM6126A, FM6127).\nLeave on Standard unless your panel stays blank or shows only the first pixel.', 'Panel Type') }}</label>
|
||||
<select id="panel_type" name="panel_type" class="form-control">
|
||||
<option value="" {% if not main_config.display.hardware.get('panel_type', '') %}selected{% endif %}>Standard</option>
|
||||
<option value="FM6126A" {% if main_config.display.hardware.get('panel_type', '') == "FM6126A" %}selected{% endif %}>FM6126A</option>
|
||||
<option value="FM6127" {% if main_config.display.hardware.get('panel_type', '') == "FM6127" %}selected{% endif %}>FM6127</option>
|
||||
</select>
|
||||
<p class="mt-1 text-sm text-gray-600">Special panel chipset initialization (use Standard unless your panel requires it)</p>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="row_address_type" class="block text-sm font-medium text-gray-700">Row Address Type</label>
|
||||
<div class="form-group" id="setting-display-row_address_type" data-setting-key="display.hardware.row_address_type">
|
||||
<label for="row_address_type" class="block text-sm font-medium text-gray-700">Row Address Type{{ ui.help_tip('Row addressing scheme used by the panel.\nLeave at 0 (Default) unless your panel needs AB/ABC addressing — a wrong value shows a garbled or shifted image.', 'Row Address Type') }}</label>
|
||||
<select id="row_address_type" name="row_address_type" class="form-control">
|
||||
<option value="0" {% if main_config.display.hardware.get('row_address_type', 0)|int == 0 %}selected{% endif %}>0 - Default</option>
|
||||
<option value="1" {% if main_config.display.hardware.get('row_address_type', 0)|int == 1 %}selected{% endif %}>1 - AB-addressed panels</option>
|
||||
@@ -176,13 +171,12 @@
|
||||
<option value="3" {% if main_config.display.hardware.get('row_address_type', 0)|int == 3 %}selected{% endif %}>3 - ABC-addressed panels</option>
|
||||
<option value="4" {% if main_config.display.hardware.get('row_address_type', 0)|int == 4 %}selected{% endif %}>4 - ABC Shift + DE direct</option>
|
||||
</select>
|
||||
<p class="mt-1 text-sm text-gray-600">Row addressing scheme — leave at Default (0) unless your panel requires a specific type</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<div class="form-group">
|
||||
<label for="gpio_slowdown" class="block text-sm font-medium text-gray-700">GPIO Slowdown</label>
|
||||
<div class="form-group" id="setting-display-gpio_slowdown" data-setting-key="display.runtime.gpio_slowdown">
|
||||
<label for="gpio_slowdown" class="block text-sm font-medium text-gray-700">GPIO Slowdown{{ ui.help_tip('Slows the GPIO signal so the panel keeps up.\nGuide: Pi 3 → 1–2, Pi 4 → 2–4, Pi 5 (PIO) → 1–3. Increase if the display shows garbage or flicker; in RIO mode higher values may improve performance.', 'GPIO Slowdown') }}</label>
|
||||
<input type="number"
|
||||
id="gpio_slowdown"
|
||||
name="gpio_slowdown"
|
||||
@@ -190,22 +184,20 @@
|
||||
min="0"
|
||||
max="10"
|
||||
class="form-control">
|
||||
<p class="mt-1 text-sm text-gray-600">Pi 3: 1–2 · Pi 4: 2–4 · Pi 5 PIO: 1–3. Increase if display shows garbage; in RIO mode higher values may improve performance.</p>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<div class="form-group" id="setting-display-rp1_rio" data-setting-key="display.runtime.rp1_rio">
|
||||
<label for="rp1_rio" class="block text-sm font-medium text-gray-700">
|
||||
RP1 Backend <span class="text-xs text-gray-400 font-normal">(Pi 5 only)</span>
|
||||
RP1 Backend <span class="text-xs text-gray-400 font-normal">(Pi 5 only)</span>{{ ui.help_tip('Pi 5 RP1 coprocessor driver mode.\nPIO (0) is the default and uses less CPU. RIO (1) can push a higher refresh rate but inverts the GPIO Slowdown behavior. Ignored on Pi 3/4.', 'RP1 Backend') }}
|
||||
</label>
|
||||
<select id="rp1_rio" name="rp1_rio" class="form-control">
|
||||
<option value="0" {% if main_config.display.get('runtime', {}).get('rp1_rio', 0)|int == 0 %}selected{% endif %}>0 — PIO (default, low CPU)</option>
|
||||
<option value="1" {% if main_config.display.get('runtime', {}).get('rp1_rio', 0)|int == 1 %}selected{% endif %}>1 — RIO (higher throughput; slowdown inverted)</option>
|
||||
</select>
|
||||
<p class="mt-1 text-sm text-gray-600">Pi 5 RP1 coprocessor mode. Ignored on Pi 3/4.</p>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="scan_mode" class="block text-sm font-medium text-gray-700">Scan Mode</label>
|
||||
<div class="form-group" id="setting-display-scan_mode" data-setting-key="display.hardware.scan_mode">
|
||||
<label for="scan_mode" class="block text-sm font-medium text-gray-700">Scan Mode{{ ui.help_tip('Order rows are refreshed in.\n0 = progressive (default), 1 = interlaced. Change only if you see banding or flicker on certain panels.', 'Scan Mode') }}</label>
|
||||
<input type="number"
|
||||
id="scan_mode"
|
||||
name="scan_mode"
|
||||
@@ -213,13 +205,12 @@
|
||||
min="0"
|
||||
max="1"
|
||||
class="form-control">
|
||||
<p class="mt-1 text-sm text-gray-600">Scan mode for LED matrix (0-1)</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div class="form-group">
|
||||
<label for="pwm_bits" class="block text-sm font-medium text-gray-700">PWM Bits</label>
|
||||
<div class="form-group" id="setting-display-pwm_bits" data-setting-key="display.hardware.pwm_bits">
|
||||
<label for="pwm_bits" class="block text-sm font-medium text-gray-700">PWM Bits{{ ui.help_tip('Color depth per channel (1–11).\nHigher means smoother color but a lower refresh rate; lower means faster refresh with more banding. Default: 11 (this build defaults to 9).', 'PWM Bits') }}</label>
|
||||
<input type="number"
|
||||
id="pwm_bits"
|
||||
name="pwm_bits"
|
||||
@@ -227,11 +218,10 @@
|
||||
min="1"
|
||||
max="11"
|
||||
class="form-control">
|
||||
<p class="mt-1 text-sm text-gray-600">PWM bits for brightness control (1-11)</p>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="pwm_dither_bits" class="block text-sm font-medium text-gray-700">PWM Dither Bits</label>
|
||||
<div class="form-group" id="setting-display-pwm_dither_bits" data-setting-key="display.hardware.pwm_dither_bits">
|
||||
<label for="pwm_dither_bits" class="block text-sm font-medium text-gray-700">PWM Dither Bits{{ ui.help_tip('Time-dithering to gain apparent color depth (0–4).\nDefault: 0. Raising it can smooth gradients at the cost of a slightly lower refresh rate.', 'PWM Dither Bits') }}</label>
|
||||
<input type="number"
|
||||
id="pwm_dither_bits"
|
||||
name="pwm_dither_bits"
|
||||
@@ -239,13 +229,12 @@
|
||||
min="0"
|
||||
max="4"
|
||||
class="form-control">
|
||||
<p class="mt-1 text-sm text-gray-600">PWM dither bits (0-4)</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div class="form-group">
|
||||
<label for="pwm_lsb_nanoseconds" class="block text-sm font-medium text-gray-700">PWM LSB Nanoseconds</label>
|
||||
<div class="form-group" id="setting-display-pwm_lsb_nanoseconds" data-setting-key="display.hardware.pwm_lsb_nanoseconds">
|
||||
<label for="pwm_lsb_nanoseconds" class="block text-sm font-medium text-gray-700">PWM LSB Nanoseconds{{ ui.help_tip('Base time for the least-significant color bit (50–500 ns).\nDefault: 130. Raising it can reduce flicker on some panels but lowers the maximum refresh rate.', 'PWM LSB Nanoseconds') }}</label>
|
||||
<input type="number"
|
||||
id="pwm_lsb_nanoseconds"
|
||||
name="pwm_lsb_nanoseconds"
|
||||
@@ -253,11 +242,10 @@
|
||||
min="50"
|
||||
max="500"
|
||||
class="form-control">
|
||||
<p class="mt-1 text-sm text-gray-600">PWM LSB nanoseconds (50-500)</p>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="limit_refresh_rate_hz" class="block text-sm font-medium text-gray-700">Limit Refresh Rate (Hz)</label>
|
||||
<div class="form-group" id="setting-display-limit_refresh_rate_hz" data-setting-key="display.hardware.limit_refresh_rate_hz">
|
||||
<label for="limit_refresh_rate_hz" class="block text-sm font-medium text-gray-700">Limit Refresh Rate (Hz){{ ui.help_tip('Caps the panel refresh rate (1–1000 Hz).\nDefault: 120. A steady cap reduces flicker in camera recordings and keeps timing consistent. Set higher or to the max your panel supports for the smoothest motion.', 'Limit Refresh Rate') }}</label>
|
||||
<input type="number"
|
||||
id="limit_refresh_rate_hz"
|
||||
name="limit_refresh_rate_hz"
|
||||
@@ -265,7 +253,6 @@
|
||||
min="1"
|
||||
max="1000"
|
||||
class="form-control">
|
||||
<p class="mt-1 text-sm text-gray-600">Limit refresh rate in Hz (1-1000)</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -276,7 +263,7 @@
|
||||
<p class="text-sm text-gray-600 mb-4">Show the same content on every panel in the chain — e.g. two 64×32 panels mirrored, or four panels as two identical screens. Rendered once and duplicated, so it adds no extra CPU. Takes effect after a display restart.</p>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<div class="form-group">
|
||||
<div class="form-group" id="setting-display-double_sided_enabled" data-setting-key="display.double_sided.enabled">
|
||||
<label class="flex items-center gap-2">
|
||||
<input type="checkbox"
|
||||
id="double_sided_enabled"
|
||||
@@ -285,12 +272,12 @@
|
||||
{% if main_config.display.get('double_sided', {}).get('enabled') %}checked{% endif %}
|
||||
class="form-control h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
|
||||
<span class="text-sm font-medium text-gray-700">Enabled</span>
|
||||
{{ ui.help_tip('Show the same content mirrored across every panel in the chain.\nRendered once and duplicated, so it adds no extra CPU. Takes effect after a display restart.', 'Double-Sided Enabled') }}
|
||||
</label>
|
||||
<p class="mt-1 text-sm text-gray-600">Mirror one screen across all panels.</p>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="double_sided_copies" class="block text-sm font-medium text-gray-700">Copies</label>
|
||||
<div class="form-group" id="setting-display-double_sided_copies" data-setting-key="display.double_sided.copies">
|
||||
<label for="double_sided_copies" class="block text-sm font-medium text-gray-700">Copies{{ ui.help_tip('How many identical screens to split the panel area into (2–8).\nMust divide the panel evenly — e.g. 2 for a two-sided cube.', 'Copies') }}</label>
|
||||
<input type="number"
|
||||
id="double_sided_copies"
|
||||
name="double_sided_copies"
|
||||
@@ -298,16 +285,14 @@
|
||||
min="2"
|
||||
max="8"
|
||||
class="form-control">
|
||||
<p class="mt-1 text-sm text-gray-600">Number of identical screens. Must divide the panel evenly.</p>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="double_sided_axis" class="block text-sm font-medium text-gray-700">Split Axis</label>
|
||||
<div class="form-group" id="setting-display-double_sided_axis" data-setting-key="display.double_sided.axis">
|
||||
<label for="double_sided_axis" class="block text-sm font-medium text-gray-700">Split Axis{{ ui.help_tip('Direction the display is divided into copies.\nHorizontal splits along the chained panels (side by side); Vertical splits along parallel chains (stacked).', 'Split Axis') }}</label>
|
||||
<select id="double_sided_axis" name="double_sided_axis" class="form-control">
|
||||
<option value="horizontal" {% if main_config.display.get('double_sided', {}).get('axis', 'horizontal') == 'horizontal' %}selected{% endif %}>Horizontal — chained panels (side by side)</option>
|
||||
<option value="vertical" {% if main_config.display.get('double_sided', {}).get('axis', 'horizontal') == 'vertical' %}selected{% endif %}>Vertical — parallel chains (stacked)</option>
|
||||
</select>
|
||||
<p class="mt-1 text-sm text-gray-600">Horizontal splits the chain; vertical splits parallel outputs.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -317,7 +302,7 @@
|
||||
<h3 class="text-md font-medium text-gray-900 mb-4">Display Options</h3>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div class="form-group">
|
||||
<div class="form-group" id="setting-display-disable_hardware_pulsing" data-setting-key="display.hardware.disable_hardware_pulsing">
|
||||
<label class="flex items-center">
|
||||
<input type="checkbox"
|
||||
name="disable_hardware_pulsing"
|
||||
@@ -325,10 +310,11 @@
|
||||
{% if main_config.display.hardware.disable_hardware_pulsing %}checked{% endif %}
|
||||
class="form-control h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
|
||||
<span class="ml-2 text-sm font-medium text-gray-900">Disable Hardware Pulsing</span>
|
||||
{{ ui.help_tip('Turn off hardware PWM pulsing.\nEnable this if the Pi audio is in use or you hear buzzing / see instability. Slightly increases CPU usage.', 'Disable Hardware Pulsing') }}
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<div class="form-group" id="setting-display-inverse_colors" data-setting-key="display.hardware.inverse_colors">
|
||||
<label class="flex items-center">
|
||||
<input type="checkbox"
|
||||
name="inverse_colors"
|
||||
@@ -336,10 +322,11 @@
|
||||
{% if main_config.display.hardware.inverse_colors %}checked{% endif %}
|
||||
class="form-control h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
|
||||
<span class="ml-2 text-sm font-medium text-gray-900">Inverse Colors</span>
|
||||
{{ ui.help_tip('Invert every color the panel shows.\nDefault: off. Only needed for panels wired with inverted color logic.', 'Inverse Colors') }}
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<div class="form-group" id="setting-display-show_refresh_rate" data-setting-key="display.hardware.show_refresh_rate">
|
||||
<label class="flex items-center">
|
||||
<input type="checkbox"
|
||||
name="show_refresh_rate"
|
||||
@@ -347,10 +334,11 @@
|
||||
{% if main_config.display.hardware.show_refresh_rate %}checked{% endif %}
|
||||
class="form-control h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
|
||||
<span class="ml-2 text-sm font-medium text-gray-900">Show Refresh Rate</span>
|
||||
{{ ui.help_tip('Overlay the live panel refresh rate on the display.\nUseful for tuning GPIO Slowdown and PWM settings; turn off for normal use.', 'Show Refresh Rate') }}
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<div class="form-group" id="setting-display-use_short_date_format" data-setting-key="display.use_short_date_format">
|
||||
<label class="flex items-center">
|
||||
<input type="checkbox"
|
||||
name="use_short_date_format"
|
||||
@@ -358,6 +346,7 @@
|
||||
{% if main_config.display.use_short_date_format %}checked{% endif %}
|
||||
class="form-control h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
|
||||
<span class="ml-2 text-sm font-medium text-gray-900">Use Short Date Format</span>
|
||||
{{ ui.help_tip('Show dates in a compact form (e.g. 7/8 instead of July 8).\nHandy on narrow displays where space is tight.', 'Use Short Date Format') }}
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
@@ -366,8 +355,8 @@
|
||||
<div class="mt-6 pt-4 border-t border-gray-300">
|
||||
<h4 class="text-sm font-medium text-gray-900 mb-3">Dynamic Duration</h4>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div class="form-group">
|
||||
<label for="max_dynamic_duration_seconds" class="block text-sm font-medium text-gray-700">Max Dynamic Duration (seconds)</label>
|
||||
<div class="form-group" id="setting-display-max_dynamic_duration_seconds" data-setting-key="display.dynamic_duration.max_duration_seconds">
|
||||
<label for="max_dynamic_duration_seconds" class="block text-sm font-medium text-gray-700">Max Dynamic Duration (seconds){{ ui.help_tip('Ceiling on how long a plugin may extend its own on-screen time (30–1800s).\nDefault: 180. Plugins with live content (e.g. a game in progress) can request extra time up to this limit.', 'Max Dynamic Duration') }}</label>
|
||||
<input type="number"
|
||||
id="max_dynamic_duration_seconds"
|
||||
name="max_dynamic_duration_seconds"
|
||||
@@ -375,7 +364,6 @@
|
||||
min="30"
|
||||
max="1800"
|
||||
class="form-control">
|
||||
<p class="mt-1 text-sm text-gray-600">Maximum time plugins can extend display duration (30-1800 seconds)</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -405,8 +393,8 @@
|
||||
<!-- Vegas Settings (shown when enabled) -->
|
||||
<div id="vegas_scroll_settings" class="space-y-4" style="{% if not main_config.display.get('vegas_scroll', {}).get('enabled', false) %}display: none;{% endif %}">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div class="form-group">
|
||||
<label for="vegas_scroll_speed" class="block text-sm font-medium text-gray-700">Scroll Speed (pixels/second)</label>
|
||||
<div class="form-group" id="setting-display-vegas_scroll_speed" data-setting-key="display.vegas_scroll.scroll_speed">
|
||||
<label for="vegas_scroll_speed" class="block text-sm font-medium text-gray-700">Scroll Speed (pixels/second){{ ui.help_tip('How fast the Vegas ticker scrolls (10–200 px/s).\nDefault: 50. Higher is faster but harder to read.', 'Scroll Speed') }}</label>
|
||||
<div class="flex items-center space-x-2">
|
||||
<input type="range"
|
||||
id="vegas_scroll_speed"
|
||||
@@ -418,11 +406,10 @@
|
||||
class="flex-1">
|
||||
<span id="vegas_scroll_speed_value" class="text-sm font-medium w-12">{{ main_config.display.get('vegas_scroll', {}).get('scroll_speed', 50) }}</span>
|
||||
</div>
|
||||
<p class="mt-1 text-sm text-gray-600">Speed of the scrolling ticker (10-200 px/s)</p>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="vegas_separator_width" class="block text-sm font-medium text-gray-700">Separator Width (pixels)</label>
|
||||
<div class="form-group" id="setting-display-vegas_separator_width" data-setting-key="display.vegas_scroll.separator_width">
|
||||
<label for="vegas_separator_width" class="block text-sm font-medium text-gray-700">Separator Width (pixels){{ ui.help_tip('Blank gap inserted between each plugin block in the ticker (0–128 px).\nDefault: 32. Larger values make the boundary between plugins clearer.', 'Separator Width') }}</label>
|
||||
<input type="number"
|
||||
id="vegas_separator_width"
|
||||
name="vegas_separator_width"
|
||||
@@ -430,29 +417,26 @@
|
||||
min="0"
|
||||
max="128"
|
||||
class="form-control">
|
||||
<p class="mt-1 text-sm text-gray-600">Gap between plugin content blocks (0-128 px)</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div class="form-group">
|
||||
<label for="vegas_target_fps" class="block text-sm font-medium text-gray-700">Target FPS</label>
|
||||
<div class="form-group" id="setting-display-vegas_target_fps" data-setting-key="display.vegas_scroll.target_fps">
|
||||
<label for="vegas_target_fps" class="block text-sm font-medium text-gray-700">Target FPS{{ ui.help_tip('Frames per second the Vegas ticker aims to render.\nHigher = smoother scrolling but more CPU. Default: 125 (smoothest). Drop to 60/90 if the Pi runs hot.', 'Target FPS') }}</label>
|
||||
<select id="vegas_target_fps" name="vegas_target_fps" class="form-control">
|
||||
<option value="60" {% if main_config.display.get('vegas_scroll', {}).get('target_fps', 125) == 60 %}selected{% endif %}>60 FPS (Lower CPU)</option>
|
||||
<option value="90" {% if main_config.display.get('vegas_scroll', {}).get('target_fps', 125) == 90 %}selected{% endif %}>90 FPS (Balanced)</option>
|
||||
<option value="125" {% if main_config.display.get('vegas_scroll', {}).get('target_fps', 125) == 125 %}selected{% endif %}>125 FPS (Smoothest)</option>
|
||||
</select>
|
||||
<p class="mt-1 text-sm text-gray-600">Higher FPS = smoother scroll, more CPU usage</p>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="vegas_buffer_ahead" class="block text-sm font-medium text-gray-700">Buffer Ahead</label>
|
||||
<div class="form-group" id="setting-display-vegas_buffer_ahead" data-setting-key="display.vegas_scroll.buffer_ahead">
|
||||
<label for="vegas_buffer_ahead" class="block text-sm font-medium text-gray-700">Buffer Ahead{{ ui.help_tip('How many upcoming plugins to pre-render so the scroll never stalls.\nDefault: 2 (recommended). More uses extra memory; less saves memory but risks hitches.', 'Buffer Ahead') }}</label>
|
||||
<select id="vegas_buffer_ahead" name="vegas_buffer_ahead" class="form-control">
|
||||
<option value="1" {% if main_config.display.get('vegas_scroll', {}).get('buffer_ahead', 2) == 1 %}selected{% endif %}>1 Plugin (Less memory)</option>
|
||||
<option value="2" {% if main_config.display.get('vegas_scroll', {}).get('buffer_ahead', 2) == 2 %}selected{% endif %}>2 Plugins (Recommended)</option>
|
||||
<option value="3" {% if main_config.display.get('vegas_scroll', {}).get('buffer_ahead', 2) == 3 %}selected{% endif %}>3 Plugins (More buffer)</option>
|
||||
</select>
|
||||
<p class="mt-1 text-sm text-gray-600">How many plugins to pre-load ahead</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -485,18 +469,17 @@
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div class="form-group">
|
||||
<label for="sync_role" class="block text-sm font-medium text-gray-700">Role</label>
|
||||
<div class="form-group" id="setting-display-sync_role" data-setting-key="sync.role">
|
||||
<label for="sync_role" class="block text-sm font-medium text-gray-700">Role{{ ui.help_tip('This unit\'s part in a two-display setup.\nStandalone = sync off. Set one Pi to Leader (drives the scroll) and the other to Follower (receives frames). Restart required after changing.', 'Sync Role') }}</label>
|
||||
<select id="sync_role" name="sync_role" class="form-control" onchange="updateSyncUI()">
|
||||
<option value="standalone" {% if main_config.get('sync', {}).get('role', 'standalone') == 'standalone' %}selected{% endif %}>Standalone (disabled)</option>
|
||||
<option value="leader" {% if main_config.get('sync', {}).get('role', 'standalone') == 'leader' %}selected{% endif %}>Leader (drives scroll)</option>
|
||||
<option value="follower" {% if main_config.get('sync', {}).get('role', 'standalone') == 'follower' %}selected{% endif %}>Follower (receives frames)</option>
|
||||
</select>
|
||||
<p class="mt-1 text-sm text-gray-600">Set Leader on one Pi, Follower on the other. Restart required after changing.</p>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="sync_port" class="block text-sm font-medium text-gray-700">UDP Port</label>
|
||||
<div class="form-group" id="setting-display-sync_port" data-setting-key="sync.port">
|
||||
<label for="sync_port" class="block text-sm font-medium text-gray-700">UDP Port{{ ui.help_tip('UDP port the two displays use to exchange frames (1024–65535).\nDefault: 5765. Must match on both Pis. If the ufw firewall is active, allow it with: sudo ufw allow ' ~ main_config.get('sync', {}).get('port', 5765) ~ '/udp', 'Sync UDP Port') }}</label>
|
||||
<input type="number"
|
||||
id="sync_port"
|
||||
name="sync_port"
|
||||
@@ -504,19 +487,14 @@
|
||||
min="1024"
|
||||
max="65535"
|
||||
class="form-control">
|
||||
<p class="mt-1 text-sm text-gray-600">
|
||||
Must match on both Pis. If ufw is active:
|
||||
<code class="text-xs bg-gray-200 px-1 rounded">sudo ufw allow {{ main_config.get('sync', {}).get('port', 5765) }}/udp</code>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="form-group" id="sync_position_group" style="display:none">
|
||||
<label for="sync_follower_position" class="block text-sm font-medium text-gray-700">Position</label>
|
||||
<div class="form-group" id="setting-display-sync_follower_position" data-setting-key="sync.follower_position" style="display:none">
|
||||
<label for="sync_follower_position" class="block text-sm font-medium text-gray-700">Position{{ ui.help_tip('Which side of the leader this follower display sits on.\nSets whether this unit shows the left or right half of the extended scroll.', 'Follower Position') }}</label>
|
||||
<select id="sync_follower_position" name="sync_follower_position" class="form-control">
|
||||
<option value="left" {% if main_config.get('sync', {}).get('follower_position', 'left') == 'left' %}selected{% endif %}>Left of leader</option>
|
||||
<option value="right" {% if main_config.get('sync', {}).get('follower_position', 'left') == 'right' %}selected{% endif %}>Right of leader</option>
|
||||
</select>
|
||||
<p class="mt-1 text-sm text-gray-600">Which side of the leader display this unit sits on.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -795,7 +773,7 @@ if (typeof window.fixInvalidNumberInputs !== 'function') {
|
||||
function updateSyncUI() {
|
||||
const role = document.getElementById('sync_role').value;
|
||||
const bar = document.getElementById('sync_status_bar');
|
||||
const posGroup = document.getElementById('sync_position_group');
|
||||
const posGroup = document.getElementById('setting-display-sync_follower_position');
|
||||
if (role === 'standalone') {
|
||||
bar.classList.add('hidden');
|
||||
document.getElementById('sync_error_detail').classList.add('hidden');
|
||||
|
||||
@@ -1,9 +1,12 @@
|
||||
{% import 'v3/partials/_macros.html' as ui %}
|
||||
<div class="bg-white rounded-lg shadow p-6">
|
||||
<div class="border-b border-gray-200 pb-4 mb-6">
|
||||
<h2 class="text-lg font-semibold text-gray-900">Display Durations</h2>
|
||||
<p class="mt-1 text-sm text-gray-600">Configure how long each screen is shown before switching. Values in seconds.</p>
|
||||
</div>
|
||||
|
||||
{{ ui.settings_filter() }}
|
||||
|
||||
<form hx-post="/api/v3/config/main"
|
||||
hx-ext="json-enc"
|
||||
hx-headers='{"Content-Type": "application/json"}'
|
||||
@@ -15,9 +18,9 @@
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
{% for key, value in main_config.display.display_durations.items() %}
|
||||
<div class="form-group">
|
||||
<div class="form-group" id="setting-durations-{{ key }}" data-setting-key="display.display_durations.{{ key }}">
|
||||
<label for="duration_{{ key }}" class="block text-sm font-medium text-gray-700">
|
||||
{{ key | replace('_', ' ') | title }}
|
||||
{{ key | replace('_', ' ') | title }}{{ ui.help_tip('How long the ' ~ (key | replace('_', ' ')) ~ ' screen stays on before rotating to the next one, in seconds.\nRange: 5–600. Currently ' ~ value ~ 's.', key | replace('_', ' ') | title) }}
|
||||
</label>
|
||||
<input type="number"
|
||||
id="duration_{{ key }}"
|
||||
@@ -26,7 +29,6 @@
|
||||
min="5"
|
||||
max="600"
|
||||
class="form-control">
|
||||
<p class="mt-1 text-sm text-gray-600">{{ value }} seconds</p>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
@@ -1,9 +1,12 @@
|
||||
{% import 'v3/partials/_macros.html' as ui %}
|
||||
<div class="bg-white rounded-lg shadow p-6">
|
||||
<div class="border-b border-gray-200 pb-4 mb-6">
|
||||
<h2 class="text-lg font-semibold text-gray-900">General Settings</h2>
|
||||
<p class="mt-1 text-sm text-gray-600">Configure general system settings and location information.</p>
|
||||
</div>
|
||||
|
||||
{{ ui.settings_filter() }}
|
||||
|
||||
<form hx-post="/api/v3/config/main"
|
||||
hx-ext="json-enc"
|
||||
hx-headers='{"Content-Type": "application/json"}'
|
||||
@@ -29,7 +32,7 @@
|
||||
class="space-y-6">
|
||||
|
||||
<!-- Web Display Autostart -->
|
||||
<div class="form-group">
|
||||
<div class="form-group" id="setting-general-web_display_autostart" data-setting-key="web_display_autostart">
|
||||
<label class="flex items-center">
|
||||
<input type="checkbox"
|
||||
name="web_display_autostart"
|
||||
@@ -37,15 +40,14 @@
|
||||
{% if main_config.web_display_autostart %}checked{% endif %}
|
||||
class="form-control h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
|
||||
<span class="ml-2 text-sm font-medium text-gray-900">Web Display Autostart</span>
|
||||
{{ ui.help_tip('Automatically start the web interface when the device boots.\nDefault: on. Turn off if you launch the web UI manually or run headless.', 'Web Display Autostart') }}
|
||||
</label>
|
||||
<p class="mt-1 text-sm text-gray-600">Start the web interface on boot for easier access.</p>
|
||||
</div>
|
||||
|
||||
<!-- Timezone -->
|
||||
<div class="form-group">
|
||||
<label for="timezone" class="block text-sm font-medium text-gray-700">Timezone</label>
|
||||
<div class="form-group" id="setting-general-timezone" data-setting-key="timezone">
|
||||
<label for="timezone" class="block text-sm font-medium text-gray-700">Timezone{{ ui.help_tip('Time zone used for clocks, schedules, and time-based content.\nChoose the zone where the display physically lives so on/off schedules fire at the correct local time.', 'Timezone') }}</label>
|
||||
<div id="timezone_container" class="mt-1"></div>
|
||||
<p class="mt-1 text-sm text-gray-600">Select your timezone for time-based features and scheduling.</p>
|
||||
</div>
|
||||
<script>
|
||||
(function() {
|
||||
@@ -80,8 +82,8 @@
|
||||
|
||||
<!-- Location Information -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 xl:grid-cols-3 2xl:grid-cols-3 gap-4">
|
||||
<div class="form-group">
|
||||
<label for="city" class="block text-sm font-medium text-gray-700">City</label>
|
||||
<div class="form-group" id="setting-general-city" data-setting-key="location.city">
|
||||
<label for="city" class="block text-sm font-medium text-gray-700">City{{ ui.help_tip('City used for weather, sunrise/sunset, and other location-based content.\nExample: Dallas.', 'City') }}</label>
|
||||
<input type="text"
|
||||
id="city"
|
||||
name="city"
|
||||
@@ -89,8 +91,8 @@
|
||||
class="form-control">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="state" class="block text-sm font-medium text-gray-700">State</label>
|
||||
<div class="form-group" id="setting-general-state" data-setting-key="location.state">
|
||||
<label for="state" class="block text-sm font-medium text-gray-700">State{{ ui.help_tip('State or region for your location.\nExample: Texas. Improves location-lookup accuracy.', 'State') }}</label>
|
||||
<input type="text"
|
||||
id="state"
|
||||
name="state"
|
||||
@@ -98,8 +100,8 @@
|
||||
class="form-control">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="country" class="block text-sm font-medium text-gray-700">Country</label>
|
||||
<div class="form-group" id="setting-general-country" data-setting-key="location.country">
|
||||
<label for="country" class="block text-sm font-medium text-gray-700">Country{{ ui.help_tip('Country code or name for your location.\nExample: US. Used with City and State for weather and geolocation.', 'Country') }}</label>
|
||||
<input type="text"
|
||||
id="country"
|
||||
name="country"
|
||||
@@ -115,7 +117,7 @@
|
||||
|
||||
<div class="space-y-4">
|
||||
<!-- Auto Discover -->
|
||||
<div class="form-group">
|
||||
<div class="form-group" id="setting-general-auto_discover" data-setting-key="plugin_system.auto_discover">
|
||||
<label class="flex items-center">
|
||||
<input type="checkbox"
|
||||
name="auto_discover"
|
||||
@@ -123,12 +125,12 @@
|
||||
{% if main_config.get('plugin_system', {}).get('auto_discover', True) %}checked{% endif %}
|
||||
class="form-control h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
|
||||
<span class="ml-2 text-sm font-medium text-gray-900">Auto Discover Plugins</span>
|
||||
{{ ui.help_tip('Scan the plugins directory for installed plugins each time the service starts.\nDefault: on. Leave on unless you manage plugins manually.', 'Auto Discover Plugins') }}
|
||||
</label>
|
||||
<p class="mt-1 text-sm text-gray-600">Automatically discover plugins in the plugins directory on startup.</p>
|
||||
</div>
|
||||
|
||||
<!-- Auto Load Enabled -->
|
||||
<div class="form-group">
|
||||
<div class="form-group" id="setting-general-auto_load_enabled" data-setting-key="plugin_system.auto_load_enabled">
|
||||
<label class="flex items-center">
|
||||
<input type="checkbox"
|
||||
name="auto_load_enabled"
|
||||
@@ -136,12 +138,12 @@
|
||||
{% if main_config.get('plugin_system', {}).get('auto_load_enabled', True) %}checked{% endif %}
|
||||
class="form-control h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
|
||||
<span class="ml-2 text-sm font-medium text-gray-900">Auto Load Enabled Plugins</span>
|
||||
{{ ui.help_tip('Load every plugin marked enabled in the configuration at startup.\nDefault: on. Turn off to keep plugins installed but dormant.', 'Auto Load Enabled Plugins') }}
|
||||
</label>
|
||||
<p class="mt-1 text-sm text-gray-600">Automatically load plugins that are enabled in configuration.</p>
|
||||
</div>
|
||||
|
||||
<!-- Development Mode -->
|
||||
<div class="form-group">
|
||||
<div class="form-group" id="setting-general-development_mode" data-setting-key="plugin_system.development_mode">
|
||||
<label class="flex items-center">
|
||||
<input type="checkbox"
|
||||
name="development_mode"
|
||||
@@ -149,20 +151,19 @@
|
||||
{% if main_config.get('plugin_system', {}).get('development_mode', False) %}checked{% endif %}
|
||||
class="form-control h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
|
||||
<span class="ml-2 text-sm font-medium text-gray-900">Development Mode</span>
|
||||
{{ ui.help_tip('Enable verbose logging and developer features for plugin debugging.\nDefault: off. Keep off for normal use — it increases log volume.', 'Development Mode') }}
|
||||
</label>
|
||||
<p class="mt-1 text-gray-600 text-sm">Enable verbose logging and development features for plugin debugging.</p>
|
||||
</div>
|
||||
|
||||
<!-- Plugins Directory -->
|
||||
<div class="form-group">
|
||||
<label for="plugins_directory" class="block text-sm font-medium text-gray-700">Plugins Directory</label>
|
||||
<div class="form-group" id="setting-general-plugins_directory" data-setting-key="plugin_system.plugins_directory">
|
||||
<label for="plugins_directory" class="block text-sm font-medium text-gray-700">Plugins Directory{{ ui.help_tip('Folder (relative to the project root) where plugins are stored.\nDefault: plugin-repos. Only change this if you keep plugins in a custom location.', 'Plugins Directory') }}</label>
|
||||
<input type="text"
|
||||
id="plugins_directory"
|
||||
name="plugins_directory"
|
||||
value="{{ main_config.get('plugin_system', {}).get('plugins_directory', 'plugin-repos') }}"
|
||||
placeholder="plugin-repos"
|
||||
class="form-control">
|
||||
<p class="mt-1 text-sm text-gray-600">Directory where plugins are stored (relative to project root).</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,6 +1,8 @@
|
||||
{# Plugin Configuration Partial - Server-side rendered form #}
|
||||
{# This template is loaded via HTMX when a plugin tab is clicked #}
|
||||
|
||||
{% import 'v3/partials/_macros.html' as ui %}
|
||||
|
||||
{# ===== MACROS FOR FORM FIELD GENERATION ===== #}
|
||||
|
||||
{# Render a single form field based on schema type #}
|
||||
@@ -18,9 +20,8 @@
|
||||
{% if obj_widget == 'schedule-picker' %}
|
||||
{# Schedule picker widget - renders enable/mode/times UI #}
|
||||
{% set obj_value = value if value is not none else {} %}
|
||||
<div class="form-group mb-4">
|
||||
<label class="block text-sm font-medium text-gray-700 mb-1">{{ label }}</label>
|
||||
{% if description %}<p class="text-sm text-gray-500 mb-2">{{ description }}</p>{% endif %}
|
||||
<div class="form-group mb-4" id="setting-{{ field_id }}" data-setting-key="{{ full_key }}">
|
||||
<label class="block text-sm font-medium text-gray-700 mb-1">{{ label }}{{ ui.help_tip(description, label) }}</label>
|
||||
<div id="{{ field_id }}_container" class="schedule-picker-container mt-1"></div>
|
||||
<input type="hidden" id="{{ field_id }}_data" name="{{ full_key }}" value='{{ (obj_value|tojson|safe)|replace("'", "'") }}'>
|
||||
</div>
|
||||
@@ -46,9 +47,8 @@
|
||||
{% elif obj_widget == 'time-range' %}
|
||||
{# Time range widget - renders start/end time inputs #}
|
||||
{% set obj_value = value if value is not none else {} %}
|
||||
<div class="form-group mb-4">
|
||||
<label class="block text-sm font-medium text-gray-700 mb-1">{{ label }}</label>
|
||||
{% if description %}<p class="text-sm text-gray-500 mb-2">{{ description }}</p>{% endif %}
|
||||
<div class="form-group mb-4" id="setting-{{ field_id }}" data-setting-key="{{ full_key }}">
|
||||
<label class="block text-sm font-medium text-gray-700 mb-1">{{ label }}{{ ui.help_tip(description, label) }}</label>
|
||||
<div id="{{ field_id }}_container" class="time-range-container mt-1"></div>
|
||||
<input type="hidden" id="{{ field_id }}_data" name="{{ full_key }}" value='{{ (obj_value|tojson|safe)|replace("'", "'") }}'>
|
||||
</div>
|
||||
@@ -75,15 +75,11 @@
|
||||
{{ render_nested_section(key, prop, value, prefix, plugin_id) }}
|
||||
{% endif %}
|
||||
{% else %}
|
||||
<div class="form-group mb-4">
|
||||
<div class="form-group mb-4" id="setting-{{ field_id }}" data-setting-key="{{ full_key }}">
|
||||
<label for="{{ field_id }}" class="block text-sm font-medium text-gray-700 mb-1">
|
||||
{{ label }}
|
||||
{{ label }}{{ ui.help_tip(description, label) }}
|
||||
</label>
|
||||
|
||||
{% if description %}
|
||||
<p class="text-sm text-gray-500 mb-2">{{ description }}</p>
|
||||
{% endif %}
|
||||
|
||||
|
||||
{# Boolean - check for widget first #}
|
||||
{% if field_type == 'boolean' %}
|
||||
{% set bool_widget = prop.get('x-widget') or prop.get('x_widget') %}
|
||||
@@ -1003,6 +999,7 @@
|
||||
{# Configuration Form Panel #}
|
||||
<div class="bg-gray-50 rounded-lg p-4">
|
||||
<h3 class="text-md font-medium text-gray-900 mb-3">Configuration</h3>
|
||||
{{ ui.settings_filter("Filter this plugin's settings…") }}
|
||||
<div class="space-y-4 max-h-96 overflow-y-auto pr-2">
|
||||
{% if schema and schema.properties %}
|
||||
{# Use property order if defined, otherwise use natural order #}
|
||||
|
||||
@@ -1,9 +1,12 @@
|
||||
{% import 'v3/partials/_macros.html' as ui %}
|
||||
<div class="bg-white rounded-lg shadow p-6">
|
||||
<div class="border-b border-gray-200 pb-4 mb-6">
|
||||
<h2 class="text-lg font-semibold text-gray-900">Schedule Settings</h2>
|
||||
<p class="mt-1 text-sm text-gray-600">Configure when the LED matrix display should be active. You can set global hours or customize times for each day of the week.</p>
|
||||
</div>
|
||||
|
||||
{{ ui.settings_filter() }}
|
||||
|
||||
<form id="schedule_form"
|
||||
hx-post="/api/v3/config/schedule"
|
||||
hx-ext="json-enc"
|
||||
@@ -42,9 +45,9 @@
|
||||
class="space-y-6">
|
||||
|
||||
<!-- Dim Brightness Level -->
|
||||
<div class="bg-gray-50 rounded-lg p-4 mb-4">
|
||||
<div class="form-group bg-gray-50 rounded-lg p-4 mb-4" id="setting-schedule-dim_brightness" data-setting-key="dim_schedule.dim_brightness">
|
||||
<label for="dim_brightness" class="block text-sm font-medium text-gray-700 mb-2">
|
||||
Dim Brightness Level
|
||||
Dim Brightness Level{{ ui.help_tip('Brightness the display drops to during dim hours (0–100%).\nApplies only while the display is on. Your normal brightness is currently ' ~ normal_brightness ~ '%.', 'Dim Brightness Level') }}
|
||||
</label>
|
||||
<div class="flex items-center space-x-4">
|
||||
<input type="range"
|
||||
@@ -59,7 +62,6 @@
|
||||
{{ dim_schedule_config.dim_brightness | default(30) }}%
|
||||
</span>
|
||||
</div>
|
||||
<p class="mt-1 text-xs text-gray-500">Current normal brightness: {{ normal_brightness }}%</p>
|
||||
</div>
|
||||
|
||||
<!-- Dim Schedule Picker Widget Container -->
|
||||
|
||||
@@ -1,5 +1,23 @@
|
||||
<div class="space-y-6" id="tools-root">
|
||||
|
||||
<!-- System Diagnostics -->
|
||||
<div class="bg-white rounded-lg shadow p-6">
|
||||
<div class="border-b border-gray-200 pb-4 mb-6 flex items-start justify-between gap-4">
|
||||
<div>
|
||||
<h2 class="text-lg font-semibold text-gray-900">System Diagnostics</h2>
|
||||
<p class="mt-1 text-sm text-gray-600">Live CPU, memory, temperature, disk, and uptime for this Raspberry Pi.</p>
|
||||
</div>
|
||||
<button id="btn-diag-refresh" onclick="loadSystemDiagnostics()"
|
||||
class="shrink-0 inline-flex items-center px-3 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
|
||||
<i class="fas fa-sync-alt mr-2"></i>Refresh
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div id="diag-panel" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
<div class="animate-pulse text-gray-400 col-span-full">Loading diagnostics…</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Git & Updates -->
|
||||
<div class="bg-white rounded-lg shadow p-6">
|
||||
<div class="border-b border-gray-200 pb-4 mb-6">
|
||||
@@ -123,6 +141,46 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Network Radio -->
|
||||
<div class="bg-white rounded-lg shadow p-6">
|
||||
<div class="border-b border-gray-200 pb-4 mb-6">
|
||||
<h2 class="text-lg font-semibold text-gray-900">Network Radio</h2>
|
||||
<p class="mt-1 text-sm text-gray-600">Turn the WiFi radio on or off. Full WiFi setup (scan, connect, hotspot) lives on the <span class="font-medium">WiFi</span> tab.</p>
|
||||
</div>
|
||||
|
||||
<div class="flex items-start justify-between gap-4">
|
||||
<div>
|
||||
<p class="text-sm font-medium text-gray-900">WiFi radio</p>
|
||||
<p id="wifi-radio-note" class="text-xs text-gray-500 mt-0.5">Checking current state…</p>
|
||||
</div>
|
||||
<div class="shrink-0 flex flex-col items-end gap-2">
|
||||
<!-- Toggle switch -->
|
||||
<button id="wifi-radio-toggle" type="button" role="switch" aria-checked="false"
|
||||
onclick="onWifiRadioToggleClick()" disabled
|
||||
class="relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent bg-gray-200 transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 opacity-60">
|
||||
<span id="wifi-radio-knob" aria-hidden="true"
|
||||
class="pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out translate-x-0"></span>
|
||||
</button>
|
||||
|
||||
<!-- Force-off confirm row (shown only when disabling without Ethernet is refused) -->
|
||||
<div id="wifi-radio-force-row" class="hidden flex-col items-end gap-2">
|
||||
<span class="text-xs text-red-700 font-medium text-right max-w-xs">No wired connection detected — turning WiFi off will disconnect you from this page. Continue anyway?</span>
|
||||
<div class="flex items-center gap-2">
|
||||
<button onclick="forceDisableWifiRadio()"
|
||||
class="inline-flex items-center px-3 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-red-600 hover:bg-red-700">
|
||||
Turn WiFi off anyway
|
||||
</button>
|
||||
<button onclick="hideWifiForceRow()"
|
||||
class="inline-flex items-center px-3 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="result-wifi-radio" class="hidden"></div>
|
||||
</div>
|
||||
|
||||
<!-- Services -->
|
||||
<div class="bg-white rounded-lg shadow p-6">
|
||||
<div class="border-b border-gray-200 pb-4 mb-6">
|
||||
@@ -157,6 +215,100 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- System Power -->
|
||||
<div class="bg-white rounded-lg shadow p-6">
|
||||
<div class="border-b border-gray-200 pb-4 mb-6">
|
||||
<h2 class="text-lg font-semibold text-gray-900">System Power</h2>
|
||||
<p class="mt-1 text-sm text-gray-600">Reboot or shut down the Raspberry Pi. The web interface will go offline.</p>
|
||||
</div>
|
||||
|
||||
<div class="space-y-4">
|
||||
<!-- Reboot -->
|
||||
<div class="flex items-start justify-between gap-4">
|
||||
<div>
|
||||
<p class="text-sm font-medium text-gray-900">Reboot</p>
|
||||
<p class="text-xs text-gray-500 mt-0.5">Runs <code class="bg-gray-100 px-1 rounded">sudo reboot</code>. The Pi will restart and come back online in a minute or two.</p>
|
||||
</div>
|
||||
<div class="shrink-0 flex flex-col items-end gap-2">
|
||||
<button id="btn-reboot" onclick="showPowerConfirm('reboot')"
|
||||
class="inline-flex items-center px-3 py-2 border border-amber-300 text-sm font-medium rounded-md text-amber-700 bg-white hover:bg-amber-50">
|
||||
<i class="fas fa-power-off mr-2"></i>Reboot…
|
||||
</button>
|
||||
<div id="reboot-confirm-row" class="hidden flex items-center gap-2">
|
||||
<span class="text-xs text-amber-700 font-medium">Reboot now?</span>
|
||||
<button onclick="powerAction('reboot_system', 'btn-reboot', 'result-reboot', 'Reboot command sent — the Pi is restarting. This page will go offline and should return in a minute or two.'); hidePowerConfirm('reboot')"
|
||||
class="inline-flex items-center px-3 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-amber-600 hover:bg-amber-700">
|
||||
Yes, reboot
|
||||
</button>
|
||||
<button onclick="hidePowerConfirm('reboot')"
|
||||
class="inline-flex items-center px-3 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="result-reboot" class="hidden"></div>
|
||||
|
||||
<!-- Shutdown -->
|
||||
<div class="flex items-start justify-between gap-4 pt-4 border-t border-gray-100">
|
||||
<div>
|
||||
<p class="text-sm font-medium text-gray-900">Shut down</p>
|
||||
<p class="text-xs text-gray-500 mt-0.5">Runs <code class="bg-gray-100 px-1 rounded">sudo poweroff</code>. The Pi will power off and must be unplugged/replugged (or power-cycled) to turn back on.</p>
|
||||
</div>
|
||||
<div class="shrink-0 flex flex-col items-end gap-2">
|
||||
<button id="btn-shutdown" onclick="showPowerConfirm('shutdown')"
|
||||
class="inline-flex items-center px-3 py-2 border border-red-300 text-sm font-medium rounded-md text-red-700 bg-white hover:bg-red-50">
|
||||
<i class="fas fa-plug mr-2"></i>Shut Down…
|
||||
</button>
|
||||
<div id="shutdown-confirm-row" class="hidden flex items-center gap-2">
|
||||
<span class="text-xs text-red-700 font-medium">Power off now?</span>
|
||||
<button onclick="powerAction('shutdown_system', 'btn-shutdown', 'result-shutdown', 'Shutdown command sent — the Pi is powering off. You will need to power-cycle it to turn it back on.'); hidePowerConfirm('shutdown')"
|
||||
class="inline-flex items-center px-3 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-red-600 hover:bg-red-700">
|
||||
Yes, shut down
|
||||
</button>
|
||||
<button onclick="hidePowerConfirm('shutdown')"
|
||||
class="inline-flex items-center px-3 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="result-shutdown" class="hidden"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Plugin Health -->
|
||||
<div class="bg-white rounded-lg shadow p-6">
|
||||
<div class="border-b border-gray-200 pb-4 mb-6 flex items-start justify-between gap-4">
|
||||
<div>
|
||||
<h2 class="text-lg font-semibold text-gray-900">Plugin Health</h2>
|
||||
<p class="mt-1 text-sm text-gray-600">Circuit-breaker status and per-plugin update timings recorded by the display service. A plugin whose <code class="bg-gray-100 px-1 rounded">update()</code> keeps failing is paused ("Circuit open") and retried automatically after a cooldown.</p>
|
||||
</div>
|
||||
<button id="btn-plugin-health-refresh" onclick="refreshPluginHealth(true)"
|
||||
class="shrink-0 inline-flex items-center px-3 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
|
||||
<i class="fas fa-sync-alt mr-2"></i>Refresh
|
||||
</button>
|
||||
</div>
|
||||
<div id="plugin-health-message" class="hidden mb-4 text-sm text-gray-500"></div>
|
||||
<div class="overflow-x-auto">
|
||||
<table class="min-w-full divide-y divide-gray-200">
|
||||
<thead class="bg-gray-50">
|
||||
<tr>
|
||||
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Plugin</th>
|
||||
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
|
||||
<th class="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Avg update</th>
|
||||
<th class="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Max update</th>
|
||||
<th class="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Updates</th>
|
||||
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Last error</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="plugin-health-tbody" class="bg-white divide-y divide-gray-200">
|
||||
<tr><td colspan="6" class="px-4 py-8 text-center text-gray-500">Loading…</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
@@ -397,7 +549,290 @@
|
||||
});
|
||||
}
|
||||
|
||||
// ── system diagnostics panel ──────────────────────────────────────────────
|
||||
// Reads the existing /api/v3/system/status JSON endpoint (10s cached) for
|
||||
// richer metrics (disk, uptime, memory MB) than the SSE stats stream carries.
|
||||
|
||||
function diagTile(icon, iconColor, label, value, sub) {
|
||||
return `
|
||||
<div class="bg-gray-50 rounded-lg p-4">
|
||||
<div class="flex items-center">
|
||||
<div class="flex-shrink-0"><i class="fas ${icon} ${iconColor} text-xl"></i></div>
|
||||
<div class="ml-3 w-0 flex-1">
|
||||
<dt class="text-sm font-medium text-gray-500 truncate">${escHtml(label)}</dt>
|
||||
<dd class="text-lg font-medium text-gray-900">${escHtml(value)}</dd>
|
||||
${sub ? `<dd class="text-xs text-gray-400 mt-0.5">${escHtml(sub)}</dd>` : ''}
|
||||
</div>
|
||||
</div>
|
||||
</div>`;
|
||||
}
|
||||
|
||||
window.loadSystemDiagnostics = function() {
|
||||
const panel = document.getElementById('diag-panel');
|
||||
if (!panel) return;
|
||||
|
||||
fetch('/api/v3/system/status')
|
||||
.then(r => {
|
||||
if (!r.ok) return r.json()
|
||||
.then(d => Promise.reject(d.message || `HTTP ${r.status}`))
|
||||
.catch(() => Promise.reject(`HTTP ${r.status}`));
|
||||
return r.json();
|
||||
})
|
||||
.then(res => {
|
||||
const d = (res && res.data) || {};
|
||||
const mUsedGb = d.memory_used_mb != null ? (d.memory_used_mb / 1024).toFixed(1) : null;
|
||||
const mTotGb = d.memory_total_mb != null ? (d.memory_total_mb / 1024).toFixed(1) : null;
|
||||
const temp = d.cpu_temp != null ? d.cpu_temp + '°C' : 'N/A';
|
||||
panel.innerHTML =
|
||||
diagTile('fa-microchip', 'text-blue-600', 'CPU Usage',
|
||||
(d.cpu_percent != null ? d.cpu_percent : '--') + '%', null) +
|
||||
diagTile('fa-memory', 'text-green-600', 'Memory',
|
||||
(d.memory_used_percent != null ? d.memory_used_percent : '--') + '%',
|
||||
(mUsedGb && mTotGb) ? `${mUsedGb} / ${mTotGb} GB` : null) +
|
||||
diagTile('fa-thermometer-half', 'text-red-600', 'CPU Temp', temp, null) +
|
||||
diagTile('fa-hdd', 'text-indigo-600', 'Disk',
|
||||
(d.disk_used_percent != null ? d.disk_used_percent : '--') + '%',
|
||||
(d.disk_used_gb != null && d.disk_total_gb != null) ? `${d.disk_used_gb} / ${d.disk_total_gb} GB` : null) +
|
||||
diagTile('fa-clock', 'text-purple-600', 'Uptime', d.uptime || '--', null) +
|
||||
diagTile('fa-desktop', d.service_active ? 'text-green-600' : 'text-gray-400',
|
||||
'Display Service', d.service_active ? 'Active' : 'Inactive', null);
|
||||
})
|
||||
.catch(err => {
|
||||
panel.innerHTML = `<div class="col-span-full text-sm text-red-600">Diagnostics unavailable: ${escHtml(String(err))}</div>`;
|
||||
});
|
||||
};
|
||||
|
||||
// ── system power (reboot / shutdown) ──────────────────────────────────────
|
||||
// Like toolsAction, but a dropped connection is the expected, successful
|
||||
// outcome (the Pi is going down), so it is reported as info, not an error.
|
||||
|
||||
window.powerAction = function(action, btnId, resultId, offlineMsg) {
|
||||
setBusy(btnId, true);
|
||||
const el = document.getElementById(resultId);
|
||||
if (el) el.classList.add('hidden');
|
||||
|
||||
fetch('/api/v3/system/action', {
|
||||
method: 'POST',
|
||||
headers: {'Content-Type': 'application/json'},
|
||||
body: JSON.stringify({action})
|
||||
})
|
||||
.then(r => r.json().catch(() => ({status: 'success'})))
|
||||
.then(data => {
|
||||
if (data.status === 'error') {
|
||||
showResult(resultId, false, data.message || 'Command failed');
|
||||
} else {
|
||||
showResult(resultId, true, offlineMsg);
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
// Connection dropped mid-request — expected when the Pi reboots/powers off.
|
||||
showResult(resultId, true, offlineMsg);
|
||||
})
|
||||
.finally(() => setBusy(btnId, false));
|
||||
};
|
||||
|
||||
window.showPowerConfirm = function(kind) {
|
||||
document.getElementById(kind + '-confirm-row').classList.remove('hidden');
|
||||
document.getElementById('btn-' + kind).classList.add('hidden');
|
||||
};
|
||||
window.hidePowerConfirm = function(kind) {
|
||||
document.getElementById(kind + '-confirm-row').classList.add('hidden');
|
||||
document.getElementById('btn-' + kind).classList.remove('hidden');
|
||||
};
|
||||
|
||||
// ── WiFi radio toggle ─────────────────────────────────────────────────────
|
||||
|
||||
function renderWifiRadio(state) {
|
||||
const toggle = document.getElementById('wifi-radio-toggle');
|
||||
const knob = document.getElementById('wifi-radio-knob');
|
||||
const note = document.getElementById('wifi-radio-note');
|
||||
if (!toggle || !knob || !note) return;
|
||||
|
||||
const setKnob = (on) => {
|
||||
if (on) {
|
||||
knob.classList.remove('translate-x-0'); knob.classList.add('translate-x-5');
|
||||
toggle.classList.remove('bg-gray-200'); toggle.classList.add('bg-blue-600');
|
||||
} else {
|
||||
knob.classList.remove('translate-x-5'); knob.classList.add('translate-x-0');
|
||||
toggle.classList.remove('bg-blue-600'); toggle.classList.add('bg-gray-200');
|
||||
}
|
||||
};
|
||||
|
||||
if (!state || state.available === false) {
|
||||
toggle.disabled = true;
|
||||
toggle.classList.add('opacity-60');
|
||||
toggle.setAttribute('aria-checked', 'false');
|
||||
setKnob(false);
|
||||
note.textContent = 'WiFi radio control is not available on this system (nmcli not found).';
|
||||
note.className = 'text-xs text-gray-500 mt-0.5';
|
||||
return;
|
||||
}
|
||||
|
||||
const on = state.enabled === true;
|
||||
toggle.disabled = false;
|
||||
toggle.classList.remove('opacity-60');
|
||||
toggle.setAttribute('aria-checked', on ? 'true' : 'false');
|
||||
setKnob(on);
|
||||
const eth = state.ethernet_connected
|
||||
? 'Wired connection detected — safe to turn WiFi off.'
|
||||
: 'No wired connection — turning WiFi off will disconnect this page.';
|
||||
note.textContent = `Radio is ${on ? 'on' : 'off'}. ${eth}`;
|
||||
note.className = 'text-xs mt-0.5 ' + (state.ethernet_connected ? 'text-gray-500' : 'text-amber-600');
|
||||
}
|
||||
|
||||
window.loadWifiRadio = function() {
|
||||
fetch('/api/v3/wifi/radio')
|
||||
.then(r => r.json())
|
||||
.then(res => renderWifiRadio(res && res.data))
|
||||
.catch(() => renderWifiRadio(null));
|
||||
};
|
||||
|
||||
window.onWifiRadioToggleClick = function() {
|
||||
const toggle = document.getElementById('wifi-radio-toggle');
|
||||
if (!toggle || toggle.disabled) return;
|
||||
const currentlyOn = toggle.getAttribute('aria-checked') === 'true';
|
||||
setWifiRadio(!currentlyOn, false);
|
||||
};
|
||||
|
||||
function setWifiRadio(enabled, force) {
|
||||
const toggle = document.getElementById('wifi-radio-toggle');
|
||||
const resultEl = document.getElementById('result-wifi-radio');
|
||||
if (toggle) toggle.disabled = true;
|
||||
if (resultEl) resultEl.classList.add('hidden');
|
||||
hideWifiForceRow();
|
||||
|
||||
fetch('/api/v3/wifi/radio', {
|
||||
method: 'POST',
|
||||
headers: {'Content-Type': 'application/json'},
|
||||
body: JSON.stringify({enabled, force})
|
||||
})
|
||||
.then(r => r.json().then(d => ({ok: r.ok, d})))
|
||||
.then(({ok, d}) => {
|
||||
if (ok && d.status === 'success') {
|
||||
if (d.data) renderWifiRadio(d.data); else window.loadWifiRadio();
|
||||
showResult('result-wifi-radio', true, d.message || 'Done');
|
||||
} else if (!enabled && !force && d.reason === 'no_ethernet') {
|
||||
// Disable refused for safety (no wired fallback) — offer the force path.
|
||||
showWifiForceRow();
|
||||
window.loadWifiRadio();
|
||||
} else {
|
||||
showResult('result-wifi-radio', false, d.message || 'Failed to change WiFi radio.');
|
||||
window.loadWifiRadio();
|
||||
}
|
||||
})
|
||||
.catch(err => {
|
||||
showResult('result-wifi-radio', false, 'Request failed: ' + err.message);
|
||||
window.loadWifiRadio();
|
||||
})
|
||||
.finally(() => { if (toggle) toggle.disabled = false; });
|
||||
}
|
||||
|
||||
window.forceDisableWifiRadio = function() {
|
||||
hideWifiForceRow();
|
||||
setWifiRadio(false, true);
|
||||
};
|
||||
|
||||
function showWifiForceRow() {
|
||||
const row = document.getElementById('wifi-radio-force-row');
|
||||
if (row) { row.classList.remove('hidden'); row.classList.add('flex'); }
|
||||
}
|
||||
window.hideWifiForceRow = function() {
|
||||
const row = document.getElementById('wifi-radio-force-row');
|
||||
if (row) { row.classList.add('hidden'); row.classList.remove('flex'); }
|
||||
};
|
||||
|
||||
// ── plugin health panel ──────────────────────────────────────────────────
|
||||
function phEscape(s) {
|
||||
return String(s).replace(/[&<>"']/g, function (c) {
|
||||
return { '&': '&', '<': '<', '>': '>', '"': '"', "'": ''' }[c];
|
||||
});
|
||||
}
|
||||
function phFmtSecs(v) {
|
||||
if (typeof v !== 'number' || !isFinite(v)) return '—';
|
||||
return v.toFixed(3) + 's';
|
||||
}
|
||||
function phStatus(h) {
|
||||
if (!h) return { label: 'Unknown', cls: 'warning' };
|
||||
if (h.circuit_state === 'open') return { label: 'Circuit open', cls: 'error' };
|
||||
if (h.circuit_state === 'half_open') return { label: 'Recovering', cls: 'warning' };
|
||||
if (h.degraded) return { label: 'Degraded', cls: 'warning' };
|
||||
if (h.is_healthy) return { label: 'Healthy', cls: 'success' };
|
||||
return { label: 'Unknown', cls: 'warning' };
|
||||
}
|
||||
async function refreshPluginHealth(force) {
|
||||
const tbody = document.getElementById('plugin-health-tbody');
|
||||
const msg = document.getElementById('plugin-health-message');
|
||||
if (!tbody || !window.PluginAPI) return;
|
||||
try {
|
||||
if (force && PluginAPI.clearCache) PluginAPI.clearCache();
|
||||
const results = await Promise.all([
|
||||
PluginAPI.getPluginHealth(),
|
||||
PluginAPI.getPluginMetrics()
|
||||
]);
|
||||
const health = results[0] || {};
|
||||
const metrics = results[1] || {};
|
||||
const ids = Array.from(new Set(Object.keys(health).concat(Object.keys(metrics)))).sort();
|
||||
if (!ids.length) {
|
||||
if (msg) {
|
||||
msg.textContent = 'No plugin health data yet — it appears once the display service has run plugins.';
|
||||
msg.classList.remove('hidden');
|
||||
}
|
||||
tbody.innerHTML = '<tr><td colspan="6" class="px-4 py-8 text-center text-gray-500">No data</td></tr>';
|
||||
return;
|
||||
}
|
||||
if (msg) msg.classList.add('hidden');
|
||||
let rows = '';
|
||||
ids.forEach(function (id) {
|
||||
const h = health[id] || {};
|
||||
const m = metrics[id] || {};
|
||||
const st = phStatus(h);
|
||||
const lastErr = h.degraded_reason || h.last_error || '';
|
||||
const calls = (typeof m.call_count === 'number') ? m.call_count : '—';
|
||||
const errCell = lastErr
|
||||
? '<span title="' + phEscape(lastErr) + '">' + phEscape(lastErr) + '</span>'
|
||||
: '<span class="text-gray-400">—</span>';
|
||||
rows += '<tr>' +
|
||||
'<td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-900">' + phEscape(id) + '</td>' +
|
||||
'<td class="px-4 py-3 whitespace-nowrap"><span class="status-indicator ' + st.cls + '">' + st.label + '</span></td>' +
|
||||
'<td class="px-4 py-3 whitespace-nowrap text-right text-sm text-gray-600">' + phFmtSecs(m.avg_execution_time) + '</td>' +
|
||||
'<td class="px-4 py-3 whitespace-nowrap text-right text-sm text-gray-600">' + phFmtSecs(m.max_execution_time) + '</td>' +
|
||||
'<td class="px-4 py-3 whitespace-nowrap text-right text-sm text-gray-600">' + calls + '</td>' +
|
||||
'<td class="px-4 py-3 text-sm text-red-600 max-w-xs truncate">' + errCell + '</td>' +
|
||||
'</tr>';
|
||||
});
|
||||
tbody.innerHTML = rows;
|
||||
} catch (e) {
|
||||
const emsg = (e && e.message) ? e.message : String(e);
|
||||
tbody.innerHTML = '<tr><td colspan="6" class="px-4 py-6 text-center text-red-500">Failed to load plugin health: ' + phEscape(emsg) + '</td></tr>';
|
||||
}
|
||||
}
|
||||
window.refreshPluginHealth = refreshPluginHealth;
|
||||
|
||||
// Load on first render; HTMX will have already swapped us in by this point.
|
||||
loadGitInfo();
|
||||
|
||||
// Plugin health: initial load + periodic refresh. Guard against duplicate
|
||||
// timers if this partial is re-swapped in by HTMX; the handler re-resolves
|
||||
// DOM nodes by id each tick.
|
||||
refreshPluginHealth(false);
|
||||
if (!window._pluginHealthTimer) {
|
||||
window._pluginHealthTimer = setInterval(function () { refreshPluginHealth(true); }, 15000);
|
||||
}
|
||||
|
||||
// System diagnostics: load now, then refresh every 10s. Clear any prior
|
||||
// interval so re-swapping the partial doesn't stack. The recurring poll is
|
||||
// gated on visibility — the partial stays in the DOM (hidden via x-show)
|
||||
// when another tab is active, so without this it would keep hitting
|
||||
// /api/v3/system/status every 10s and churn the Pi while off-screen.
|
||||
if (window._diagPollInterval) clearInterval(window._diagPollInterval);
|
||||
window.loadSystemDiagnostics();
|
||||
window._diagPollInterval = setInterval(function () {
|
||||
const panel = document.getElementById('diag-panel');
|
||||
if (!panel || document.hidden || panel.offsetParent === null) return;
|
||||
window.loadSystemDiagnostics();
|
||||
}, 10000);
|
||||
|
||||
// WiFi radio current state.
|
||||
window.loadWifiRadio();
|
||||
})();
|
||||
</script>
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
{% import 'v3/partials/_macros.html' as ui %}
|
||||
<div class="bg-white rounded-lg shadow p-6" x-data="wifiSetup()" x-init="init(); loadStatus()">
|
||||
<!-- Captive Portal Banner (shown when AP mode is active) -->
|
||||
<div x-show="status.ap_mode_active"
|
||||
@@ -23,6 +24,8 @@
|
||||
<p class="mt-1 text-sm text-gray-600">Configure WiFi connection for your Raspberry Pi. Access point mode will automatically activate when no WiFi connection is detected.</p>
|
||||
</div>
|
||||
|
||||
{{ ui.settings_filter('Filter WiFi settings…') }}
|
||||
|
||||
<!-- Current WiFi Status -->
|
||||
<div class="mb-6 p-4 bg-gray-50 rounded-lg">
|
||||
<h3 class="text-sm font-medium text-gray-900 mb-2">Current Status</h3>
|
||||
@@ -73,9 +76,9 @@
|
||||
<h3 class="text-sm font-medium text-gray-900 mb-4">Connect to WiFi Network</h3>
|
||||
|
||||
<!-- Network Selection -->
|
||||
<div class="form-group mb-4">
|
||||
<div class="form-group mb-4" id="setting-wifi-ssid" data-setting-key="wifi.ssid">
|
||||
<label for="wifi-ssid" class="block text-sm font-medium text-gray-700 mb-2">
|
||||
Step 1: Select Network
|
||||
Step 1: Select Network{{ ui.help_tip('Choose the WiFi network to join.\nClick Scan to list nearby networks, or type the name manually below if it is hidden.', 'Select Network') }}
|
||||
</label>
|
||||
<div class="flex gap-2">
|
||||
<select id="wifi-ssid"
|
||||
@@ -98,7 +101,6 @@
|
||||
<span class="ml-2">Scan</span>
|
||||
</button>
|
||||
</div>
|
||||
<p class="mt-1 text-sm text-gray-600">Scan for available networks or manually enter SSID below.</p>
|
||||
<!-- Show selected network -->
|
||||
<div x-show="selectedSSID" class="mt-2 p-2 bg-blue-50 border border-blue-200 rounded text-sm" x-cloak>
|
||||
<i class="fas fa-check-circle text-blue-600 mr-2"></i>
|
||||
@@ -107,9 +109,9 @@
|
||||
</div>
|
||||
|
||||
<!-- Manual SSID Entry -->
|
||||
<div class="form-group mb-4">
|
||||
<div class="form-group mb-4" id="setting-wifi-manual_ssid" data-setting-key="wifi.manual_ssid">
|
||||
<label for="manual-ssid" class="block text-sm font-medium text-gray-700 mb-2">
|
||||
Or Enter SSID Manually
|
||||
Or Enter SSID Manually{{ ui.help_tip('Type a network name by hand when it is hidden or not shown in the scan results.\nExact spelling and capitalization matter.', 'Enter SSID Manually') }}
|
||||
</label>
|
||||
<input type="text"
|
||||
id="manual-ssid"
|
||||
@@ -120,19 +122,15 @@
|
||||
</div>
|
||||
|
||||
<!-- Password -->
|
||||
<div class="form-group mb-4">
|
||||
<div class="form-group mb-4" id="setting-wifi-password" data-setting-key="wifi.password">
|
||||
<label for="wifi-password" class="block text-sm font-medium text-gray-700 mb-2">
|
||||
Step 2: Enter Password
|
||||
Step 2: Enter Password{{ ui.help_tip('Password for the selected network.\nLeave empty if the network is open (no password required).', 'WiFi Password') }}
|
||||
</label>
|
||||
<input type="password"
|
||||
<input type="password"
|
||||
id="wifi-password"
|
||||
x-model="password"
|
||||
placeholder="Enter password (leave empty for open networks)"
|
||||
class="form-control">
|
||||
<p class="mt-1 text-sm text-gray-600">
|
||||
<i class="fas fa-info-circle mr-1"></i>
|
||||
Enter the WiFi password. Leave empty if the network is open (no password required).
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Connect Button -->
|
||||
@@ -154,14 +152,10 @@
|
||||
</p>
|
||||
|
||||
<!-- Auto-Enable Toggle -->
|
||||
<div class="mb-4 p-4 bg-gray-50 rounded-lg border border-gray-200">
|
||||
<div class="form-group mb-4 p-4 bg-gray-50 rounded-lg border border-gray-200" id="setting-wifi-auto_enable_ap_mode" data-setting-key="wifi.auto_enable_ap_mode">
|
||||
<div class="flex items-start justify-between gap-4">
|
||||
<div class="flex-1">
|
||||
<label class="text-sm font-medium text-gray-900 block mb-1">Auto-Enable AP Mode</label>
|
||||
<p class="text-xs text-gray-600">
|
||||
When enabled, AP mode will automatically activate when both WiFi and Ethernet are disconnected.
|
||||
When disabled, AP mode must be manually enabled.
|
||||
</p>
|
||||
<label class="text-sm font-medium text-gray-900 block mb-1">Auto-Enable AP Mode{{ ui.help_tip('Automatically start access-point mode when both WiFi and Ethernet are disconnected, so you can always reach the device to reconfigure it.\nDefault: on. When off, AP mode must be enabled manually.', 'Auto-Enable AP Mode') }}</label>
|
||||
</div>
|
||||
<div class="flex-shrink-0">
|
||||
<button type="button"
|
||||
|
||||
Reference in New Issue
Block a user