mirror of
https://github.com/ChuckBuilds/LEDMatrix.git
synced 2026-08-01 16:58:06 +00:00
Compare commits
5
Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
c90129285c | ||
|
|
66f9950a30 | ||
|
|
4abcd0e4f9 | ||
|
|
2a1c47fa76 | ||
|
|
9db1d2391a |
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 33 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
+29
@@ -0,0 +1,29 @@
|
||||
# bandit.yaml — LEDMatrix bandit configuration
|
||||
# https://bandit.readthedocs.io/en/latest/config.html
|
||||
#
|
||||
# Skips are justified by the specific codebase context documented below.
|
||||
# Do not remove skips without updating the justification comment.
|
||||
|
||||
skips:
|
||||
# B104: Binding to all interfaces (0.0.0.0)
|
||||
# Intentional — the Flask server binds 0.0.0.0 for LAN access on a Raspberry Pi.
|
||||
# This is not internet-facing and is documented in web_interface/app.py.
|
||||
- B104
|
||||
|
||||
# B603: subprocess call without shell=True
|
||||
# All subprocess.run() calls in this codebase use list arguments (confirmed by
|
||||
# grep — zero uses of shell=True in src/ or web_interface/). List args prevent
|
||||
# shell injection. See src/common/permission_utils.py for the primary usage.
|
||||
- B603
|
||||
|
||||
# B607: Starting a process with a partial executable path
|
||||
# The subprocess calls invoke system utilities (systemctl, sudo, git) by name.
|
||||
# These are fixed-list invocations, not user-controlled, and rely on PATH.
|
||||
- B607
|
||||
|
||||
exclude_dirs:
|
||||
- tests
|
||||
- test
|
||||
- venv
|
||||
- .venv
|
||||
- rpi-rgb-led-matrix-master
|
||||
@@ -121,6 +121,7 @@
|
||||
"axis": "horizontal"
|
||||
},
|
||||
"display_durations": {},
|
||||
"plugin_rotation_order": [],
|
||||
"use_short_date_format": true,
|
||||
"vegas_scroll": {
|
||||
"enabled": false,
|
||||
|
||||
@@ -248,7 +248,6 @@ test/
|
||||
├── test_config_service.py # Config service tests
|
||||
├── test_config_validation_edge_cases.py # Config edge cases
|
||||
├── test_font_manager.py # Font manager tests
|
||||
├── test_layout_manager.py # Layout manager tests
|
||||
├── test_text_helper.py # Text helper tests
|
||||
├── test_error_handling.py # Error handling tests
|
||||
├── test_error_aggregator.py # Error aggregation tests
|
||||
|
||||
@@ -206,6 +206,40 @@ To use an existing widget in your plugin's `config_schema.json`, simply add the
|
||||
|
||||
The widget will be automatically rendered when the plugin configuration form is loaded.
|
||||
|
||||
## Marking Fields as Advanced (`x-advanced`)
|
||||
|
||||
Add `"x-advanced": true` to any top-level, non-object property to move it out
|
||||
of the main form and into a single collapsed **Advanced Settings** section at
|
||||
the bottom of the plugin's configuration page:
|
||||
|
||||
```json
|
||||
{
|
||||
"properties": {
|
||||
"city": {
|
||||
"type": "string",
|
||||
"title": "City"
|
||||
},
|
||||
"request_timeout": {
|
||||
"type": "integer",
|
||||
"default": 10,
|
||||
"description": "HTTP timeout in seconds",
|
||||
"x-advanced": true
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Guidelines:
|
||||
|
||||
- Use it for fine-tuning knobs most users never touch (timeouts, retry
|
||||
behavior, cache TTLs, styling overrides). Anything a first-time user must
|
||||
set to get the plugin working should stay basic.
|
||||
- Nothing is hidden permanently — the section expands on click, and the
|
||||
settings search finds and auto-expands advanced fields like any others.
|
||||
- The flag is ignored on `object`-type properties (they already render as
|
||||
their own collapsible sections) and is safely ignored by older cores, so
|
||||
adding it never breaks compatibility.
|
||||
|
||||
## Creating Custom Widgets
|
||||
|
||||
### Step 1: Create Widget File
|
||||
|
||||
@@ -8,16 +8,11 @@ numpy>=1.24.0 # For fast array operations in ScrollHelper (compatible with 2.x)
|
||||
|
||||
# Timezone handling
|
||||
pytz>=2024.2,<2025.0 # Updated for latest timezone data
|
||||
timezonefinder>=6.5.0,<7.0.0 # Updated for better performance and accuracy
|
||||
geopy>=2.4.1,<3.0.0
|
||||
|
||||
# HTTP requests
|
||||
requests>=2.33.0,<3.0.0
|
||||
|
||||
# Google API integration
|
||||
google-auth-oauthlib>=1.2.0,<2.0.0
|
||||
google-auth-httplib2>=0.2.0,<1.0.0
|
||||
google-api-python-client>=2.147.0,<3.0.0
|
||||
|
||||
# Font rendering
|
||||
freetype-py>=2.5.1,<3.0.0
|
||||
@@ -29,10 +24,8 @@ spotipy>=2.25.2,<3.0.0
|
||||
Flask>=3.1.3,<4.0.0
|
||||
|
||||
# Text processing
|
||||
unidecode>=1.3.8,<2.0.0
|
||||
|
||||
# Calendar integration
|
||||
icalevents>=0.1.27,<1.0.0
|
||||
|
||||
# WebSocket support
|
||||
python-socketio>=5.14.0,<6.0.0
|
||||
|
||||
@@ -0,0 +1,344 @@
|
||||
#!/usr/bin/env python3
|
||||
"""
|
||||
LEDMatrix Plugin Security Auditor
|
||||
|
||||
Performs AST-based security analysis of all Python files in plugin directories.
|
||||
Designed to run in CI — exits non-zero on CRITICAL findings only.
|
||||
|
||||
Usage:
|
||||
python scripts/audit_plugins.py
|
||||
python scripts/audit_plugins.py --verbose
|
||||
python scripts/audit_plugins.py --plugin hello-world
|
||||
python scripts/audit_plugins.py --output results.json
|
||||
"""
|
||||
|
||||
import ast
|
||||
import argparse
|
||||
import json
|
||||
import sys
|
||||
from dataclasses import dataclass, asdict
|
||||
from pathlib import Path
|
||||
from datetime import datetime, timezone
|
||||
|
||||
PROJECT_ROOT = Path(__file__).resolve().parent.parent
|
||||
|
||||
PLUGIN_BASE_DIRS = [
|
||||
PROJECT_ROOT / "plugins",
|
||||
PROJECT_ROOT / "plugin-repos",
|
||||
]
|
||||
|
||||
|
||||
# ─────────────────────────────────────────────────────────────────────────────
|
||||
# Finding dataclass
|
||||
# ─────────────────────────────────────────────────────────────────────────────
|
||||
|
||||
@dataclass
|
||||
class Finding:
|
||||
plugin_id: str
|
||||
file: str
|
||||
line: int
|
||||
severity: str # CRITICAL | WARNING | INFO
|
||||
rule: str
|
||||
message: str
|
||||
|
||||
def to_dict(self) -> dict:
|
||||
return asdict(self)
|
||||
|
||||
|
||||
# ─────────────────────────────────────────────────────────────────────────────
|
||||
# AST visitor
|
||||
# ─────────────────────────────────────────────────────────────────────────────
|
||||
|
||||
class _PluginVisitor(ast.NodeVisitor):
|
||||
"""Collect security findings from a single plugin Python file."""
|
||||
|
||||
def __init__(self, filepath: Path, plugin_id: str):
|
||||
self.filepath = filepath
|
||||
self.plugin_id = plugin_id
|
||||
self.findings: list[Finding] = []
|
||||
# Local name -> real dotted path, so aliased imports and from-imports
|
||||
# of dangerous APIs (import subprocess as sp; from builtins import
|
||||
# eval as e) are still recognized in visit_Call below.
|
||||
self._aliases: dict[str, str] = {}
|
||||
|
||||
def _add(self, node: ast.AST, severity: str, rule: str, message: str) -> None:
|
||||
self.findings.append(Finding(
|
||||
plugin_id=self.plugin_id,
|
||||
file=str(self.filepath.relative_to(PROJECT_ROOT)),
|
||||
line=getattr(node, "lineno", 0),
|
||||
severity=severity,
|
||||
rule=rule,
|
||||
message=message,
|
||||
))
|
||||
|
||||
def _resolve(self, local_name: str) -> str:
|
||||
"""Resolve a local name through recorded import aliases to its real
|
||||
dotted path (e.g. "sp" -> "subprocess"); unresolved names pass through
|
||||
unchanged."""
|
||||
return self._aliases.get(local_name, local_name)
|
||||
|
||||
def _resolve_call_target(self, func: ast.expr) -> str | None:
|
||||
"""Resolve a Call's func node to a fully-qualified dotted target,
|
||||
covering a direct name (bare builtin, aliased import, or
|
||||
from-import: from builtins import eval as e; from subprocess
|
||||
import run; from os import system as s) and module-attribute
|
||||
access (subprocess.run, sp.run, os.system, o.system) uniformly.
|
||||
Returns None for call shapes this doesn't attempt to resolve."""
|
||||
if isinstance(func, ast.Name):
|
||||
return self._resolve(func.id)
|
||||
if isinstance(func, ast.Attribute) and isinstance(func.value, ast.Name):
|
||||
base = self._resolve(func.value.id)
|
||||
return f"{base}.{func.attr}"
|
||||
return None
|
||||
|
||||
def visit_Call(self, node: ast.Call) -> None:
|
||||
target = self._resolve_call_target(node.func)
|
||||
if target is None:
|
||||
self.generic_visit(node)
|
||||
return
|
||||
|
||||
leaf = target.rsplit(".", 1)[-1]
|
||||
|
||||
# eval() / exec() / compile() — arbitrary code execution, whether a
|
||||
# bare call, an aliased import, or a from-import
|
||||
# (from builtins import eval as e; e(...))
|
||||
if leaf == "eval":
|
||||
self._add(node, "CRITICAL", "PLUGIN-001",
|
||||
"eval() call — arbitrary code execution risk")
|
||||
elif leaf == "exec":
|
||||
self._add(node, "CRITICAL", "PLUGIN-002",
|
||||
"exec() call — arbitrary code execution risk")
|
||||
elif leaf == "compile":
|
||||
self._add(node, "WARNING", "PLUGIN-003",
|
||||
"compile() call — dynamic code compilation")
|
||||
|
||||
# subprocess.*(shell=True), whether subprocess.run(...), sp.run(...),
|
||||
# or a from-import (from subprocess import run; run(..., shell=True))
|
||||
if target in {
|
||||
"subprocess.run", "subprocess.call", "subprocess.Popen",
|
||||
"subprocess.check_call", "subprocess.check_output",
|
||||
}:
|
||||
for kw in node.keywords:
|
||||
if (kw.arg == "shell" and
|
||||
isinstance(kw.value, ast.Constant) and
|
||||
kw.value.value is True):
|
||||
self._add(node, "WARNING", "PLUGIN-004",
|
||||
f"subprocess.{leaf}(shell=True) — "
|
||||
f"shell injection risk if args include user input")
|
||||
|
||||
# os.system(), whether os.system(...), o.system(...), or a
|
||||
# from-import (from os import system as s; s(...))
|
||||
if target == "os.system":
|
||||
self._add(node, "WARNING", "PLUGIN-005",
|
||||
"os.system() call — prefer subprocess with list args")
|
||||
|
||||
self.generic_visit(node)
|
||||
|
||||
def visit_Import(self, node: ast.Import) -> None:
|
||||
for alias in node.names:
|
||||
if alias.asname:
|
||||
local, real = alias.asname, alias.name
|
||||
else:
|
||||
# `import os.path` binds the top-level name `os`, not `os.path`
|
||||
local = real = alias.name.split(".")[0]
|
||||
self._aliases[local] = real
|
||||
self._check_import(node, alias.name)
|
||||
self.generic_visit(node)
|
||||
|
||||
def visit_ImportFrom(self, node: ast.ImportFrom) -> None:
|
||||
if node.module:
|
||||
for alias in node.names:
|
||||
local = alias.asname or alias.name
|
||||
self._aliases[local] = f"{node.module}.{alias.name}"
|
||||
self._check_import(node, node.module)
|
||||
self.generic_visit(node)
|
||||
|
||||
def _check_import(self, node: ast.AST, module_name: str) -> None:
|
||||
dangerous = {
|
||||
"ctypes": ("WARNING", "PLUGIN-010", "ctypes import — native code execution"),
|
||||
"cffi": ("WARNING", "PLUGIN-011", "cffi import — native code execution"),
|
||||
"pickle": ("WARNING", "PLUGIN-012",
|
||||
"pickle import — deserialization can execute arbitrary code"),
|
||||
"marshal": ("WARNING", "PLUGIN-013",
|
||||
"marshal import — deserialization risk"),
|
||||
}
|
||||
for mod, (severity, rule, msg) in dangerous.items():
|
||||
if module_name == mod or module_name.startswith(mod + "."):
|
||||
self._add(node, severity, rule, msg)
|
||||
|
||||
|
||||
# ─────────────────────────────────────────────────────────────────────────────
|
||||
# Per-plugin audit
|
||||
# ─────────────────────────────────────────────────────────────────────────────
|
||||
|
||||
def audit_plugin(plugin_dir: Path) -> list[Finding]:
|
||||
"""Audit a single plugin directory. Returns all findings."""
|
||||
findings: list[Finding] = []
|
||||
plugin_id = plugin_dir.name
|
||||
|
||||
# Check for required files
|
||||
for required_file, rule, msg in [
|
||||
("manifest.json", "PLUGIN-020",
|
||||
"manifest.json missing — plugin may be incomplete"),
|
||||
("config_schema.json", "PLUGIN-021",
|
||||
"config_schema.json missing — no input validation schema declared"),
|
||||
]:
|
||||
if not (plugin_dir / required_file).exists():
|
||||
findings.append(Finding(
|
||||
plugin_id=plugin_id,
|
||||
file=str((plugin_dir / required_file).relative_to(PROJECT_ROOT)),
|
||||
line=0,
|
||||
severity="WARNING",
|
||||
rule=rule,
|
||||
message=msg,
|
||||
))
|
||||
|
||||
# AST analysis of all Python files
|
||||
for py_file in sorted(plugin_dir.rglob("*.py")):
|
||||
try:
|
||||
source = py_file.read_text(encoding="utf-8")
|
||||
tree = ast.parse(source, filename=str(py_file))
|
||||
visitor = _PluginVisitor(py_file, plugin_id)
|
||||
visitor.visit(tree)
|
||||
findings.extend(visitor.findings)
|
||||
except SyntaxError as exc:
|
||||
# A file the visitor can't even parse is a file we can't verify
|
||||
# is safe -- this must block the audit, not just warn.
|
||||
findings.append(Finding(
|
||||
plugin_id=plugin_id,
|
||||
file=str(py_file.relative_to(PROJECT_ROOT)),
|
||||
line=getattr(exc, "lineno", 0) or 0,
|
||||
severity="CRITICAL",
|
||||
rule="PLUGIN-030",
|
||||
message=f"Python syntax error — cannot be parsed: {exc}",
|
||||
))
|
||||
except OSError as exc:
|
||||
# Same reasoning as SyntaxError: an unreadable file was never
|
||||
# actually scanned, so it must block rather than pass silently.
|
||||
findings.append(Finding(
|
||||
plugin_id=plugin_id,
|
||||
file=str(py_file.relative_to(PROJECT_ROOT)),
|
||||
line=0,
|
||||
severity="CRITICAL",
|
||||
rule="PLUGIN-031",
|
||||
message=f"Could not read file: {exc}",
|
||||
))
|
||||
|
||||
return findings
|
||||
|
||||
|
||||
# ─────────────────────────────────────────────────────────────────────────────
|
||||
# Main
|
||||
# ─────────────────────────────────────────────────────────────────────────────
|
||||
|
||||
def main() -> int:
|
||||
parser = argparse.ArgumentParser(
|
||||
description="LEDMatrix plugin security auditor",
|
||||
formatter_class=argparse.RawDescriptionHelpFormatter,
|
||||
)
|
||||
parser.add_argument("--plugin", "-p", default=None,
|
||||
help="Audit a specific plugin ID only")
|
||||
parser.add_argument("--output", "-o", default=None,
|
||||
help="Write JSON results to this file")
|
||||
parser.add_argument("--verbose", "-v", action="store_true",
|
||||
help="Show all findings, not just summary")
|
||||
args = parser.parse_args()
|
||||
|
||||
print("=" * 60)
|
||||
print("LEDMatrix Plugin Security Audit")
|
||||
print(f"Project root: {PROJECT_ROOT}")
|
||||
print("=" * 60)
|
||||
|
||||
all_findings: list[Finding] = []
|
||||
plugins_scanned = 0
|
||||
plugin_found = args.plugin is None
|
||||
|
||||
for base_dir in PLUGIN_BASE_DIRS:
|
||||
if not base_dir.exists():
|
||||
if args.verbose:
|
||||
print(f" ⏭️ Skipping {base_dir.name}/ (directory not found)")
|
||||
continue
|
||||
|
||||
base_label = base_dir.relative_to(PROJECT_ROOT)
|
||||
print(f"\n Scanning {base_label}/")
|
||||
|
||||
for plugin_dir in sorted(base_dir.iterdir()):
|
||||
if not plugin_dir.is_dir():
|
||||
continue
|
||||
if plugin_dir.name.startswith((".", "_")):
|
||||
continue
|
||||
if args.plugin and plugin_dir.name != args.plugin:
|
||||
continue
|
||||
if args.plugin:
|
||||
plugin_found = True
|
||||
|
||||
findings = audit_plugin(plugin_dir)
|
||||
all_findings.extend(findings)
|
||||
plugins_scanned += 1
|
||||
|
||||
critical = [f for f in findings if f.severity == "CRITICAL"]
|
||||
warnings = [f for f in findings if f.severity == "WARNING"]
|
||||
|
||||
if critical:
|
||||
icon, label = "🚨", "CRITICAL"
|
||||
elif warnings:
|
||||
icon, label = "⚠️ ", "WARN "
|
||||
else:
|
||||
icon, label = "✅", "PASS "
|
||||
|
||||
print(f" {icon} [{label}] {plugin_dir.name}"
|
||||
f" — {len(critical)} critical, {len(warnings)} warnings")
|
||||
|
||||
if args.verbose:
|
||||
for f in findings:
|
||||
severity_icon = {"CRITICAL": "🚨", "WARNING": "⚠️ ", "INFO": "ℹ️ "}.get(
|
||||
f.severity, " "
|
||||
)
|
||||
print(f" {severity_icon} {f.rule} {f.file}:{f.line} — {f.message}")
|
||||
|
||||
if args.plugin and not plugin_found:
|
||||
print(f"\n 🚨 Plugin '{args.plugin}' not found in any of "
|
||||
f"{[str(d.relative_to(PROJECT_ROOT)) for d in PLUGIN_BASE_DIRS]} — "
|
||||
f"nothing was audited")
|
||||
return 1
|
||||
|
||||
# Summary
|
||||
critical_findings = [f for f in all_findings if f.severity == "CRITICAL"]
|
||||
warning_findings = [f for f in all_findings if f.severity == "WARNING"]
|
||||
|
||||
print(f"\n{'=' * 60}")
|
||||
print(f" Plugins scanned : {plugins_scanned}")
|
||||
print(f" CRITICAL : {len(critical_findings)}")
|
||||
print(f" WARNING : {len(warning_findings)}")
|
||||
|
||||
if critical_findings:
|
||||
print("\n 🚨 CRITICAL findings:")
|
||||
for f in critical_findings:
|
||||
print(f" {f.plugin_id} | {Path(f.file).name}:{f.line} | {f.message}")
|
||||
|
||||
# Write JSON output
|
||||
if args.output:
|
||||
output_data = {
|
||||
"timestamp": datetime.now(timezone.utc).isoformat(),
|
||||
"plugins_scanned": plugins_scanned,
|
||||
"summary": {
|
||||
"critical": len(critical_findings),
|
||||
"warnings": len(warning_findings),
|
||||
},
|
||||
"findings": [f.to_dict() for f in all_findings],
|
||||
}
|
||||
Path(args.output).write_text(
|
||||
json.dumps(output_data, indent=2), encoding="utf-8"
|
||||
)
|
||||
print(f"\n Results written to: {args.output}")
|
||||
|
||||
if critical_findings:
|
||||
print("\n 🚨 Blocking — CRITICAL issues must be resolved")
|
||||
return 1
|
||||
|
||||
print("\n ✅ No critical issues found")
|
||||
return 0
|
||||
|
||||
|
||||
if __name__ == "__main__":
|
||||
sys.exit(main())
|
||||
@@ -55,7 +55,7 @@ def main():
|
||||
failures += not check("draw.textbbox",
|
||||
lambda: draw.textbbox((0, 0), "Test", font=font))
|
||||
|
||||
print("\nResampling (used in logo_helper, image_utils, sports base):")
|
||||
print("\nResampling (used in logo_helper, sports base):")
|
||||
logo = Image.new('RGBA', (200, 200), (255, 128, 0, 200))
|
||||
failures += not check("Image.Resampling.LANCZOS exists",
|
||||
lambda: str(Image.Resampling.LANCZOS))
|
||||
|
||||
@@ -0,0 +1,356 @@
|
||||
#!/usr/bin/env python3
|
||||
"""
|
||||
Security Report Generator
|
||||
|
||||
Aggregates JSON output from all CI security audit jobs into a single
|
||||
Markdown report suitable for PR comments and artifact storage.
|
||||
|
||||
Expected artifact layout (from actions/download-artifact@v4):
|
||||
<artifact-dir>/
|
||||
sast-results/
|
||||
bandit-results.json
|
||||
semgrep-results.json
|
||||
dependency-audit-results/
|
||||
pip-audit-results.json
|
||||
safety-results.json
|
||||
secrets-scan-results/
|
||||
gitleaks-results.json
|
||||
security-proofs-results/
|
||||
security-proofs-results.json
|
||||
plugin-audit-results/
|
||||
plugin-audit-results.json
|
||||
|
||||
Usage:
|
||||
python scripts/generate_report.py --artifact-dir audit-artifacts/ --output report.md
|
||||
python scripts/generate_report.py --artifact-dir audit-artifacts/ --output report.md --verbose
|
||||
"""
|
||||
|
||||
import argparse
|
||||
import json
|
||||
import sys
|
||||
from pathlib import Path
|
||||
from datetime import datetime, timezone
|
||||
|
||||
PROJECT_ROOT = Path(__file__).resolve().parent.parent
|
||||
|
||||
# Gitleaks matches exactly equal to one of these (not a substring match -- a
|
||||
# real secret that merely contains one of these words as part of its actual
|
||||
# value must still be reported) are known template placeholders.
|
||||
_GITLEAKS_SUPPRESS_EXACT_VALUES = {
|
||||
"YOUR_YOUTUBE_API_KEY",
|
||||
"YOUR_YOUTUBE_CHANNEL_ID",
|
||||
"YOUR_GITHUB_PERSONAL_ACCESS_TOKEN",
|
||||
}
|
||||
|
||||
# Findings in these files are suppressed regardless of value -- they are
|
||||
# template/example files that are expected to only ever contain placeholders.
|
||||
_GITLEAKS_SUPPRESS_PATHS = [
|
||||
"config_secrets.template.json",
|
||||
"config.template.json",
|
||||
]
|
||||
|
||||
|
||||
# ─────────────────────────────────────────────────────────────────────────────
|
||||
# Helpers
|
||||
# ─────────────────────────────────────────────────────────────────────────────
|
||||
|
||||
def _load(path: Path) -> tuple[dict | list | None, str | None]:
|
||||
"""Load a JSON artifact file.
|
||||
|
||||
Returns (data, error): error is None on success (data is whatever was
|
||||
parsed, which may legitimately be an empty list/dict for a clean scan);
|
||||
otherwise error is a human-readable reason the artifact is unavailable,
|
||||
distinguishing "missing/malformed artifact" from "valid empty result" so
|
||||
callers don't silently treat a broken CI job as a clean pass.
|
||||
"""
|
||||
if not path.exists():
|
||||
return None, f"artifact not found: {path}"
|
||||
try:
|
||||
return json.loads(path.read_text(encoding="utf-8")), None
|
||||
except (json.JSONDecodeError, OSError) as exc:
|
||||
return None, f"could not read/parse {path}: {exc}"
|
||||
|
||||
|
||||
def _md_sanitize_cell(value: object) -> str:
|
||||
"""Escape/normalize a value so scanner-controlled content (a matched
|
||||
secret, a bandit issue_text, a file path) can't alter the Markdown
|
||||
table's structure: pipes would add bogus columns, newlines would break
|
||||
out of the row (or forge a fake header/separator line)."""
|
||||
text = str(value)
|
||||
text = text.replace("\\", "\\\\").replace("|", "\\|")
|
||||
text = text.replace("\r\n", " ").replace("\n", " ").replace("\r", " ")
|
||||
return text
|
||||
|
||||
|
||||
def _md_table_row(*cells: str) -> str:
|
||||
return "| " + " | ".join(_md_sanitize_cell(c) for c in cells) + " |"
|
||||
|
||||
|
||||
# ─────────────────────────────────────────────────────────────────────────────
|
||||
# Per-tool summarizers
|
||||
# Returns: (markdown_lines: list[str], critical_count: int, available: bool)
|
||||
# `available=False` means the artifact was missing or malformed -- distinct
|
||||
# from a valid scan that simply found nothing -- so the caller can report
|
||||
# INCOMPLETE instead of silently counting it as a clean pass.
|
||||
# ─────────────────────────────────────────────────────────────────────────────
|
||||
|
||||
def _summarize_bandit(artifact_dir: Path) -> tuple[list[str], int, bool]:
|
||||
data, error = _load(artifact_dir / "sast-results" / "bandit-results.json")
|
||||
if error:
|
||||
return [f"_bandit results unavailable: {error}_"], 0, False
|
||||
|
||||
results = data.get("results", [])
|
||||
high = [r for r in results if r.get("issue_severity") == "HIGH"]
|
||||
medium = [r for r in results if r.get("issue_severity") == "MEDIUM"]
|
||||
low = [r for r in results if r.get("issue_severity") == "LOW"]
|
||||
|
||||
lines = [
|
||||
f"**Bandit**: {len(high)} HIGH · {len(medium)} MEDIUM · {len(low)} LOW"
|
||||
]
|
||||
|
||||
if high:
|
||||
lines += [
|
||||
"",
|
||||
"| Severity | File | Line | Issue |",
|
||||
"| --- | --- | --- | --- |",
|
||||
]
|
||||
for r in high[:10]:
|
||||
fname = Path(r.get("filename", "")).name
|
||||
lines.append(_md_table_row(
|
||||
"HIGH", f"`{fname}`",
|
||||
str(r.get("line_number", "?")),
|
||||
r.get("issue_text", "")
|
||||
))
|
||||
if len(high) > 10:
|
||||
lines.append(f"_… and {len(high) - 10} more HIGH findings_")
|
||||
|
||||
return lines, len(high), True
|
||||
|
||||
|
||||
def _summarize_pip_audit(artifact_dir: Path) -> tuple[list[str], int, bool]:
|
||||
data, error = _load(artifact_dir / "dependency-audit-results" / "pip-audit-results.json")
|
||||
if error:
|
||||
return [f"_pip-audit results unavailable: {error}_"], 0, False
|
||||
|
||||
# pip-audit JSON format: {"dependencies": [{"name": ..., "vulns": [...]}]}
|
||||
vulns: list[dict] = []
|
||||
for dep in data.get("dependencies", []):
|
||||
for v in dep.get("vulns", []):
|
||||
vulns.append({"package": dep.get("name", "?"), **v})
|
||||
|
||||
lines = [f"**pip-audit**: {len(vulns)} vulnerabilities found"]
|
||||
|
||||
if vulns:
|
||||
lines += ["", "| Package | ID | Fix |", "| --- | --- | --- |"]
|
||||
for v in vulns[:10]:
|
||||
fix = v.get("fix_versions", ["none"])
|
||||
fix_str = ", ".join(fix) if fix else "none"
|
||||
lines.append(_md_table_row(
|
||||
v.get("package", "?"),
|
||||
v.get("id", "?"),
|
||||
fix_str,
|
||||
))
|
||||
|
||||
# Treat known vulnerabilities as warnings, not critical (they may be unavoidable)
|
||||
return lines, 0, True
|
||||
|
||||
|
||||
def _summarize_gitleaks(artifact_dir: Path) -> tuple[list[str], int, bool]:
|
||||
data, error = _load(artifact_dir / "secrets-scan-results" / "gitleaks-results.json")
|
||||
if error:
|
||||
return [f"_gitleaks results unavailable: {error}_"], 0, False
|
||||
|
||||
if not isinstance(data, list):
|
||||
data = []
|
||||
|
||||
real_findings = []
|
||||
suppressed = 0
|
||||
for finding in data:
|
||||
secret_val = str(finding.get("Secret", "") or finding.get("Match", ""))
|
||||
file_name = Path(finding.get("File", "")).name
|
||||
if (secret_val in _GITLEAKS_SUPPRESS_EXACT_VALUES
|
||||
or file_name in _GITLEAKS_SUPPRESS_PATHS):
|
||||
suppressed += 1
|
||||
else:
|
||||
real_findings.append(finding)
|
||||
|
||||
lines = [
|
||||
f"**Gitleaks**: {len(real_findings)} finding(s) "
|
||||
f"({suppressed} suppressed as template placeholders)"
|
||||
]
|
||||
|
||||
if real_findings:
|
||||
lines += ["", "| Rule | File | Line | Description |", "| --- | --- | --- | --- |"]
|
||||
for f in real_findings[:10]:
|
||||
fname = Path(f.get("File", "")).name
|
||||
lines.append(_md_table_row(
|
||||
f.get("RuleID", "?"),
|
||||
f"`{fname}`",
|
||||
str(f.get("StartLine", "?")),
|
||||
f.get("Description", ""),
|
||||
))
|
||||
|
||||
critical = len(real_findings) # any real secret is critical
|
||||
return lines, critical, True
|
||||
|
||||
|
||||
def _summarize_security_proofs(artifact_dir: Path) -> tuple[list[str], int, bool]:
|
||||
data, error = _load(artifact_dir / "security-proofs-results" / "security-proofs-results.json")
|
||||
if error:
|
||||
return [f"_security proofs results unavailable: {error}_"], 0, False
|
||||
|
||||
if not isinstance(data, list):
|
||||
data = []
|
||||
|
||||
critical = [r for r in data if r.get("severity") == "CRITICAL"]
|
||||
warnings = [r for r in data if r.get("severity") == "WARNING"]
|
||||
passed = [r for r in data if r.get("severity") == "PASS"]
|
||||
skipped = [r for r in data if r.get("severity") == "SKIP"]
|
||||
|
||||
lines = [
|
||||
f"**Security Proofs**: "
|
||||
f"{len(passed)} PASS · {len(warnings)} WARN · "
|
||||
f"{len(critical)} CRITICAL · {len(skipped)} SKIP",
|
||||
"",
|
||||
]
|
||||
|
||||
_icon = {"PASS": "✅", "INFO": "ℹ️", "WARNING": "⚠️", # nosec B105 - severity labels, not credentials
|
||||
"CRITICAL": "🚨", "SKIP": "⏭️"}
|
||||
for r in data:
|
||||
icon = _icon.get(r.get("severity", ""), "❓")
|
||||
lines.append(
|
||||
f"- {icon} **{r.get('test_id', '?')}**: {r.get('message', '')}"
|
||||
)
|
||||
if r.get("details") and r.get("severity") in ("CRITICAL", "WARNING"):
|
||||
lines.append(f" - _{r['details']}_")
|
||||
|
||||
return lines, len(critical), True
|
||||
|
||||
|
||||
def _summarize_plugin_audit(artifact_dir: Path) -> tuple[list[str], int, bool]:
|
||||
data, error = _load(artifact_dir / "plugin-audit-results" / "plugin-audit-results.json")
|
||||
if error:
|
||||
return [f"_plugin audit results unavailable: {error}_"], 0, False
|
||||
|
||||
summary = data.get("summary", {})
|
||||
findings = data.get("findings", [])
|
||||
critical_findings = [f for f in findings if f.get("severity") == "CRITICAL"]
|
||||
warning_findings = [f for f in findings if f.get("severity") == "WARNING"]
|
||||
|
||||
lines = [
|
||||
f"**Plugin Audit**: {data.get('plugins_scanned', '?')} plugins scanned — "
|
||||
f"{summary.get('critical', 0)} CRITICAL · {summary.get('warnings', 0)} WARNINGS"
|
||||
]
|
||||
|
||||
if critical_findings:
|
||||
lines += ["", "| Plugin | File | Line | Rule | Message |",
|
||||
"| --- | --- | --- | --- | --- |"]
|
||||
for f in critical_findings[:10]:
|
||||
fname = Path(f.get("file", "")).name
|
||||
lines.append(_md_table_row(
|
||||
f.get("plugin_id", "?"),
|
||||
f"`{fname}`",
|
||||
str(f.get("line", "?")),
|
||||
f.get("rule", "?"),
|
||||
f.get("message", ""),
|
||||
))
|
||||
|
||||
if warning_findings and not critical_findings:
|
||||
lines.append(f"\n_{len(warning_findings)} warning(s) found — see artifact for details_")
|
||||
|
||||
return lines, summary.get("critical", 0), True
|
||||
|
||||
|
||||
# ─────────────────────────────────────────────────────────────────────────────
|
||||
# Main
|
||||
# ─────────────────────────────────────────────────────────────────────────────
|
||||
|
||||
def main() -> int:
|
||||
parser = argparse.ArgumentParser(
|
||||
description="Generate consolidated security audit report",
|
||||
formatter_class=argparse.RawDescriptionHelpFormatter,
|
||||
)
|
||||
parser.add_argument("--artifact-dir", required=True,
|
||||
help="Directory containing downloaded CI artifacts")
|
||||
parser.add_argument("--output", "-o", required=True,
|
||||
help="Output Markdown file path")
|
||||
parser.add_argument("--verbose", "-v", action="store_true")
|
||||
args = parser.parse_args()
|
||||
|
||||
artifact_dir = Path(args.artifact_dir)
|
||||
timestamp = datetime.now(timezone.utc).strftime("%Y-%m-%d %H:%M UTC")
|
||||
|
||||
bandit_lines, bandit_crit, bandit_ok = _summarize_bandit(artifact_dir)
|
||||
pip_audit_lines, pip_audit_crit, pip_audit_ok = _summarize_pip_audit(artifact_dir)
|
||||
gitleaks_lines, gitleaks_crit, gitleaks_ok = _summarize_gitleaks(artifact_dir)
|
||||
proofs_lines, proofs_crit, proofs_ok = _summarize_security_proofs(artifact_dir)
|
||||
plugins_lines, plugins_crit, plugins_ok = _summarize_plugin_audit(artifact_dir)
|
||||
|
||||
unavailable_tools = [
|
||||
name for name, ok in [
|
||||
("bandit", bandit_ok), ("pip-audit", pip_audit_ok),
|
||||
("gitleaks", gitleaks_ok), ("security-proofs", proofs_ok),
|
||||
("plugin-audit", plugins_ok),
|
||||
] if not ok
|
||||
]
|
||||
|
||||
total_critical = bandit_crit + pip_audit_crit + gitleaks_crit + proofs_crit + plugins_crit
|
||||
if unavailable_tools:
|
||||
# A missing/malformed artifact means that tool's checks never
|
||||
# actually ran -- this must not be reported as a clean PASS just
|
||||
# because the *artifacts that did load* found nothing.
|
||||
overall = "INCOMPLETE ⚠️"
|
||||
elif total_critical > 0:
|
||||
overall = "ACTION REQUIRED 🚨"
|
||||
else:
|
||||
overall = "PASSED ✅"
|
||||
|
||||
def section(title: str, lines: list[str]) -> str:
|
||||
return f"### {title}\n\n" + "\n".join(lines) + "\n"
|
||||
|
||||
incomplete_note = (
|
||||
f"\n_⚠️ Incomplete: results unavailable for {', '.join(unavailable_tools)} "
|
||||
f"— see the corresponding section(s) below for details_\n"
|
||||
if unavailable_tools else ""
|
||||
)
|
||||
|
||||
report = f"""## 🔒 Security Audit — {overall}
|
||||
|
||||
_Generated: {timestamp}_
|
||||
{incomplete_note}
|
||||
| Critical | High/Warn | Overall |
|
||||
| :---: | :---: | :---: |
|
||||
| {'🚨 ' + str(total_critical) if total_critical else '✅ 0'} | ⚠️ see below | {overall} |
|
||||
|
||||
---
|
||||
|
||||
{section('SAST — Bandit', bandit_lines)}
|
||||
{section('Dependencies — pip-audit', pip_audit_lines)}
|
||||
{section('Secrets — Gitleaks', gitleaks_lines)}
|
||||
{section('LEDMatrix Security Proofs', proofs_lines)}
|
||||
{section('Plugin Security Audit', plugins_lines)}
|
||||
---
|
||||
|
||||
_Total critical findings: **{total_critical}**_
|
||||
"""
|
||||
|
||||
output_path = Path(args.output)
|
||||
output_path.write_text(report, encoding="utf-8")
|
||||
|
||||
if args.verbose:
|
||||
print(f" Report written to: {output_path}")
|
||||
print(f" Status: {overall}")
|
||||
print(f" Critical findings: {total_critical}")
|
||||
print(f" bandit={bandit_crit} pip-audit={pip_audit_crit} "
|
||||
f"gitleaks={gitleaks_crit} proofs={proofs_crit} plugins={plugins_crit}")
|
||||
if unavailable_tools:
|
||||
print(f" Unavailable: {', '.join(unavailable_tools)}")
|
||||
|
||||
if unavailable_tools:
|
||||
return 1
|
||||
|
||||
return 0
|
||||
|
||||
|
||||
if __name__ == "__main__":
|
||||
sys.exit(main())
|
||||
@@ -0,0 +1,593 @@
|
||||
#!/usr/bin/env python3
|
||||
"""
|
||||
LEDMatrix Security Proof Tests
|
||||
|
||||
Automated proofs that run in CI to verify security properties hold on every
|
||||
commit. Inspired by the Huntarr security review approach of using standard
|
||||
tooling to confirm specific vulnerability classes are absent.
|
||||
|
||||
Usage:
|
||||
python scripts/prove_security.py
|
||||
python scripts/prove_security.py --verbose
|
||||
python scripts/prove_security.py --output results.json
|
||||
|
||||
Exit code: 1 only if CRITICAL findings are detected. Warnings are reported
|
||||
but do not block CI.
|
||||
"""
|
||||
|
||||
import ast
|
||||
import argparse
|
||||
import hashlib
|
||||
import json
|
||||
import re
|
||||
import sys
|
||||
from dataclasses import dataclass, asdict
|
||||
from pathlib import Path
|
||||
|
||||
PROJECT_ROOT = Path(__file__).resolve().parent.parent
|
||||
|
||||
|
||||
# ─────────────────────────────────────────────────────────────────────────────
|
||||
# Result dataclass
|
||||
# ─────────────────────────────────────────────────────────────────────────────
|
||||
|
||||
@dataclass
|
||||
class TestResult:
|
||||
test_id: str
|
||||
severity: str # PASS | INFO | WARNING | CRITICAL | SKIP
|
||||
message: str
|
||||
details: str = ""
|
||||
|
||||
def to_dict(self) -> dict:
|
||||
return asdict(self)
|
||||
|
||||
@property
|
||||
def icon(self) -> str:
|
||||
return {
|
||||
"PASS": "✅", # nosec B105 - severity label, not a credential
|
||||
"INFO": "ℹ️ ",
|
||||
"WARNING": "⚠️ ",
|
||||
"CRITICAL": "🚨",
|
||||
"SKIP": "⏭️ ",
|
||||
}.get(self.severity, "❓")
|
||||
|
||||
|
||||
# ─────────────────────────────────────────────────────────────────────────────
|
||||
# T1: Plugin Loading / Zip Slip
|
||||
# ─────────────────────────────────────────────────────────────────────────────
|
||||
|
||||
def test_t1a_zip_slip_protection() -> TestResult:
|
||||
"""
|
||||
Verify that zip-slip protection actually guards zip extraction in
|
||||
store_manager.py.
|
||||
|
||||
A whole-file substring check for "is_relative_to"/"Zip-slip detected"
|
||||
would pass even if the guard existed somewhere unrelated, or covered
|
||||
only one of several extract()/extractall() call sites. Instead, this
|
||||
walks the AST: for every extract()/extractall() call, it confirms an
|
||||
is_relative_to() check (and the "Zip-slip detected" log) appears
|
||||
earlier in that same enclosing function -- validate-then-bulk-extract
|
||||
(validate every member, then call extractall() only after all passed)
|
||||
counts as protecting the call, since it covers the same member list.
|
||||
"""
|
||||
store_manager = PROJECT_ROOT / "src" / "plugin_system" / "store_manager.py"
|
||||
if not store_manager.exists():
|
||||
return TestResult("T1a", "CRITICAL",
|
||||
"store_manager.py not found",
|
||||
f"Expected at {store_manager}")
|
||||
|
||||
content = store_manager.read_text(encoding="utf-8")
|
||||
try:
|
||||
tree = ast.parse(content, filename=str(store_manager))
|
||||
except SyntaxError as exc:
|
||||
return TestResult("T1a", "CRITICAL",
|
||||
"store_manager.py could not be parsed",
|
||||
str(exc))
|
||||
|
||||
extraction_sites = 0
|
||||
unprotected: list[str] = []
|
||||
|
||||
for func in ast.walk(tree):
|
||||
if not isinstance(func, (ast.FunctionDef, ast.AsyncFunctionDef)):
|
||||
continue
|
||||
|
||||
extract_calls = [
|
||||
node for node in ast.walk(func)
|
||||
if isinstance(node, ast.Call) and isinstance(node.func, ast.Attribute)
|
||||
and node.func.attr in ("extract", "extractall")
|
||||
]
|
||||
if not extract_calls:
|
||||
continue
|
||||
extraction_sites += len(extract_calls)
|
||||
|
||||
guard_lines = [
|
||||
n.lineno for n in ast.walk(func)
|
||||
if isinstance(n, ast.Attribute) and n.attr == "is_relative_to"
|
||||
]
|
||||
has_zip_slip_log = any(
|
||||
isinstance(n, ast.Constant) and isinstance(n.value, str)
|
||||
and "Zip-slip detected" in n.value
|
||||
for n in ast.walk(func)
|
||||
)
|
||||
|
||||
for call in extract_calls:
|
||||
guarded = has_zip_slip_log and any(g < call.lineno for g in guard_lines)
|
||||
if not guarded:
|
||||
unprotected.append(
|
||||
f"{func.name}() line {call.lineno}: {call.func.attr}() call not "
|
||||
f"clearly preceded by an is_relative_to() guard + Zip-slip log "
|
||||
f"in the same function"
|
||||
)
|
||||
|
||||
if extraction_sites == 0:
|
||||
return TestResult("T1a", "WARNING",
|
||||
"No zipfile extract()/extractall() calls found in store_manager.py",
|
||||
"Verify plugin installation no longer extracts zip archives, "
|
||||
"or that this check still targets the right file")
|
||||
|
||||
if unprotected:
|
||||
return TestResult("T1a", "CRITICAL",
|
||||
f"{len(unprotected)} of {extraction_sites} zip extraction "
|
||||
f"call(s) not clearly guarded",
|
||||
"; ".join(unprotected))
|
||||
|
||||
return TestResult("T1a", "PASS",
|
||||
"Zip-slip protection verified",
|
||||
f"All {extraction_sites} extract()/extractall() call(s) in "
|
||||
f"store_manager.py are preceded by an is_relative_to() guard "
|
||||
f"with a Zip-slip log in the same function")
|
||||
|
||||
|
||||
def test_t1b_dangerous_plugin_calls() -> list[TestResult]:
|
||||
"""
|
||||
Scan plugin directories for dangerous function calls (eval, exec).
|
||||
These represent arbitrary code execution risks in plugin code.
|
||||
"""
|
||||
results = []
|
||||
plugin_dirs = [
|
||||
PROJECT_ROOT / "plugins",
|
||||
PROJECT_ROOT / "plugin-repos",
|
||||
]
|
||||
|
||||
violations: list[str] = []
|
||||
files_scanned = 0
|
||||
|
||||
scan_errors: list[str] = []
|
||||
|
||||
for base in plugin_dirs:
|
||||
if not base.exists():
|
||||
continue
|
||||
for plugin_dir in sorted(base.iterdir()):
|
||||
if not plugin_dir.is_dir() or plugin_dir.name.startswith(('.', '_')):
|
||||
continue
|
||||
for py_file in plugin_dir.rglob("*.py"):
|
||||
files_scanned += 1
|
||||
try:
|
||||
source = py_file.read_text(encoding="utf-8")
|
||||
tree = ast.parse(source, filename=str(py_file))
|
||||
for node in ast.walk(tree):
|
||||
if isinstance(node, ast.Call) and isinstance(node.func, ast.Name):
|
||||
if node.func.id in ("eval", "exec"):
|
||||
rel = py_file.relative_to(PROJECT_ROOT)
|
||||
violations.append(
|
||||
f"{rel}:{node.lineno} — {node.func.id}() call")
|
||||
except (SyntaxError, OSError) as exc:
|
||||
# A file we couldn't parse/read was never actually
|
||||
# scanned for eval()/exec() -- that must block this
|
||||
# test, not silently pass as if it were clean.
|
||||
rel = py_file.relative_to(PROJECT_ROOT)
|
||||
scan_errors.append(f"{rel} — {type(exc).__name__}: {exc}")
|
||||
|
||||
if scan_errors:
|
||||
results.append(TestResult(
|
||||
"T1b", "CRITICAL",
|
||||
f"{len(scan_errors)} plugin file(s) could not be scanned for eval()/exec()",
|
||||
"; ".join(scan_errors[:10])
|
||||
))
|
||||
|
||||
if violations:
|
||||
results.append(TestResult(
|
||||
"T1b", "CRITICAL",
|
||||
f"Dangerous function calls found in plugins ({len(violations)} instance(s))",
|
||||
"; ".join(violations[:10])
|
||||
))
|
||||
elif not scan_errors:
|
||||
results.append(TestResult(
|
||||
"T1b", "PASS",
|
||||
"No eval()/exec() calls found in plugins",
|
||||
f"{files_scanned} plugin Python files scanned"
|
||||
))
|
||||
|
||||
return results
|
||||
|
||||
|
||||
# ─────────────────────────────────────────────────────────────────────────────
|
||||
# T2: API Surface Inventory
|
||||
# ─────────────────────────────────────────────────────────────────────────────
|
||||
|
||||
def test_t2a_api_surface_inventory() -> TestResult:
|
||||
"""
|
||||
Document the API surface area.
|
||||
|
||||
This app intentionally has no authentication (local-only Raspberry Pi
|
||||
design, documented in web_interface/app.py). This test produces an
|
||||
inventory for audit purposes and warns only if the design-intent comment
|
||||
is removed from app.py (which would indicate someone deleted the rationale
|
||||
without adding auth, rather than a deliberate undocumented change).
|
||||
"""
|
||||
api_file = PROJECT_ROOT / "web_interface" / "blueprints" / "api_v3.py"
|
||||
app_file = PROJECT_ROOT / "web_interface" / "app.py"
|
||||
|
||||
if not api_file.exists():
|
||||
return TestResult("T2a", "WARNING", "api_v3.py not found", str(api_file))
|
||||
|
||||
api_content = api_file.read_text(encoding="utf-8")
|
||||
routes = re.findall(r"@api_v3\.route\('([^']+)'", api_content)
|
||||
|
||||
csrf_documented = False
|
||||
if app_file.exists():
|
||||
app_content = app_file.read_text(encoding="utf-8")
|
||||
csrf_documented = "CSRF protection disabled for local-only" in app_content
|
||||
|
||||
summary = (
|
||||
f"{len(routes)} API routes in api_v3.py. "
|
||||
f"No auth decorators (intentional local-only design). "
|
||||
f"CSRF disabled: {'YES — design intent documented in app.py' if csrf_documented else 'YES — but design intent comment NOT found in app.py'}. "
|
||||
f"Rate limiting: 1000/min."
|
||||
)
|
||||
|
||||
if not csrf_documented:
|
||||
return TestResult(
|
||||
"T2a", "WARNING",
|
||||
"CSRF is disabled but the design-intent comment is missing from app.py",
|
||||
"Add the rationale comment back, or add proper CSRF protection if "
|
||||
"the app is now internet-facing"
|
||||
)
|
||||
|
||||
# There is currently no config mechanism that actually enforces the
|
||||
# local-only boundary the design-intent comment describes -- app.py
|
||||
# hardcodes host='0.0.0.0' unconditionally, so nothing here can confirm
|
||||
# this deployment is in fact LAN-only. Reporting this as mere INFO
|
||||
# understates that: an unauthenticated, CSRF-disabled API surface is a
|
||||
# real risk the moment this ever runs somewhere other than a home LAN,
|
||||
# documented rationale or not.
|
||||
return TestResult(
|
||||
"T2a", "WARNING",
|
||||
"API surface has no auth and CSRF disabled; enforcement of the "
|
||||
"documented local-only boundary cannot be confirmed",
|
||||
summary
|
||||
)
|
||||
|
||||
|
||||
# ─────────────────────────────────────────────────────────────────────────────
|
||||
# T3: Secrets & Credential Handling
|
||||
# ─────────────────────────────────────────────────────────────────────────────
|
||||
|
||||
# Patterns that suggest real credentials (must be >8 chars, not placeholders)
|
||||
_SECRET_PATTERNS = [
|
||||
(r'(?i)password\s*=\s*["\'](?!none|empty|placeholder|example|test|default|""|'')[^"\']{8,}["\']', "WARNING", "password"),
|
||||
(r'(?i)api[_-]?key\s*=\s*["\'](?!none|empty|placeholder|YOUR_|example|test)[^"\']{16,}["\']', "WARNING", "api_key"),
|
||||
(r'(?i)secret\s*=\s*["\'](?!none|empty|placeholder|YOUR_|example|test)[^"\']{16,}["\']', "WARNING", "secret"),
|
||||
# Real GitHub token pattern
|
||||
(r'ghp_[a-zA-Z0-9]{36}', "CRITICAL", "github_token"),
|
||||
# Generic long bearer tokens
|
||||
(r'Bearer\s+[a-zA-Z0-9\-_\.]{32,}', "WARNING", "bearer_token"),
|
||||
]
|
||||
|
||||
_TEMPLATE_SKIP_STRINGS = [
|
||||
"YOUR_", "PLACEHOLDER", "_HERE", "example.com", "config_secrets.template",
|
||||
"prove_security", # this file itself
|
||||
]
|
||||
|
||||
_SCAN_DIRS = ["src", "web_interface", "scripts"]
|
||||
|
||||
|
||||
def test_t3a_hardcoded_secrets() -> TestResult:
|
||||
"""Scan source code for hardcoded credentials."""
|
||||
violations: list[str] = []
|
||||
|
||||
for dir_name in _SCAN_DIRS:
|
||||
scan_dir = PROJECT_ROOT / dir_name
|
||||
if not scan_dir.exists():
|
||||
continue
|
||||
for py_file in scan_dir.rglob("*.py"):
|
||||
# Skip test files and this script
|
||||
if "test" in str(py_file).lower() or "prove_security" in str(py_file):
|
||||
continue
|
||||
try:
|
||||
content = py_file.read_text(encoding="utf-8")
|
||||
except OSError:
|
||||
continue
|
||||
|
||||
for pattern, severity, pattern_type in _SECRET_PATTERNS:
|
||||
for match in re.finditer(pattern, content):
|
||||
line_content = match.group(0)
|
||||
# Skip lines containing template placeholder strings.
|
||||
# line_content is only used for this in-memory check --
|
||||
# it must never be stored or included in output below.
|
||||
if any(skip in line_content for skip in _TEMPLATE_SKIP_STRINGS):
|
||||
continue
|
||||
rel = py_file.relative_to(PROJECT_ROOT)
|
||||
line_no = content[: match.start()].count("\n") + 1
|
||||
# Redacted fingerprint lets the same finding be recognized
|
||||
# across scans without ever reporting the matched
|
||||
# credential itself (which would otherwise get published
|
||||
# into CI logs, JSON artifacts, and PR comments -- wider
|
||||
# exposure than the original leak).
|
||||
fingerprint = hashlib.sha256(line_content.encode()).hexdigest()[:12]
|
||||
violations.append(
|
||||
f"[{severity}] {rel}:{line_no} — {pattern_type} "
|
||||
f"(fingerprint {fingerprint})"
|
||||
)
|
||||
|
||||
critical_violations = [v for v in violations if "[CRITICAL]" in v]
|
||||
if critical_violations:
|
||||
return TestResult(
|
||||
"T3a", "CRITICAL",
|
||||
f"Hardcoded secrets found ({len(critical_violations)} critical)",
|
||||
"; ".join(critical_violations[:5])
|
||||
)
|
||||
if violations:
|
||||
return TestResult(
|
||||
"T3a", "WARNING",
|
||||
f"Potential hardcoded secrets found ({len(violations)} instance(s))",
|
||||
"; ".join(violations[:5])
|
||||
)
|
||||
|
||||
return TestResult("T3a", "PASS", "No hardcoded secrets detected",
|
||||
f"Scanned {', '.join(_SCAN_DIRS)}")
|
||||
|
||||
|
||||
def test_t3b_plaintext_password_storage() -> TestResult:
|
||||
"""
|
||||
Check for user account password storage without hashing.
|
||||
|
||||
The LEDMatrix app has no user account system, so this should produce INFO.
|
||||
It would only CRITICAL if someone added user auth and stored passwords without hashing.
|
||||
|
||||
We require all three of: a password *variable assignment or DB operation*,
|
||||
a clear storage call (INSERT / db commit / ORM save), and no hashing lib present
|
||||
— to avoid false positives from files that contain 'password' for WiFi handling
|
||||
and '.save()' for image/file saving in unrelated functions.
|
||||
"""
|
||||
hashing_libs = ["bcrypt", "argon2", "pbkdf2", "scrypt",
|
||||
"generate_password_hash", "hashpw", "make_password"]
|
||||
# Patterns that indicate password being stored in a database / ORM context.
|
||||
# Must be specific enough to avoid matching set.add(), file.save(), etc.
|
||||
db_storage_patterns = ["INSERT INTO", "db.session", "session.add(", "session.commit(", "orm.save"]
|
||||
|
||||
password_storage_found = False
|
||||
|
||||
for dir_name in _SCAN_DIRS:
|
||||
scan_dir = PROJECT_ROOT / dir_name
|
||||
if not scan_dir.exists():
|
||||
continue
|
||||
for py_file in scan_dir.rglob("*.py"):
|
||||
try:
|
||||
content = py_file.read_text(encoding="utf-8")
|
||||
except OSError:
|
||||
continue
|
||||
# Require DB/ORM context specifically — not just any .save() call
|
||||
if ("password" in content.lower() and
|
||||
any(store in content for store in db_storage_patterns) and
|
||||
not any(h in content for h in hashing_libs)):
|
||||
password_storage_found = True
|
||||
|
||||
if password_storage_found:
|
||||
return TestResult(
|
||||
"T3b", "CRITICAL",
|
||||
"Potential plaintext password storage in database/ORM detected",
|
||||
"Found password + database storage operations without a recognized hashing library"
|
||||
)
|
||||
|
||||
return TestResult("T3b", "INFO",
|
||||
"No plaintext password storage detected",
|
||||
"App has no user account system — expected result")
|
||||
|
||||
|
||||
# ─────────────────────────────────────────────────────────────────────────────
|
||||
# T4: Path Traversal
|
||||
# ─────────────────────────────────────────────────────────────────────────────
|
||||
|
||||
def test_t4a_path_traversal() -> TestResult:
|
||||
"""
|
||||
Verify static file serving uses send_from_directory (safe) rather than
|
||||
open() with user-supplied paths. Also checks for extractall() calls that
|
||||
lack the is_relative_to() guard.
|
||||
"""
|
||||
issues: list[str] = []
|
||||
|
||||
app_file = PROJECT_ROOT / "web_interface" / "app.py"
|
||||
if app_file.exists():
|
||||
content = app_file.read_text(encoding="utf-8")
|
||||
# The file-serve route should use send_from_directory or commonpath
|
||||
if "send_from_directory" not in content and "commonpath" not in content:
|
||||
issues.append("app.py: file-serve routes may not use send_from_directory/commonpath")
|
||||
|
||||
# Check all extractall() calls have a preceding is_relative_to guard
|
||||
for py_file in (PROJECT_ROOT / "src").rglob("*.py"):
|
||||
try:
|
||||
content = py_file.read_text(encoding="utf-8")
|
||||
except OSError:
|
||||
continue
|
||||
if "extractall(" in content and "is_relative_to" not in content:
|
||||
rel = py_file.relative_to(PROJECT_ROOT)
|
||||
issues.append(f"{rel}: extractall() without is_relative_to() guard")
|
||||
|
||||
if issues:
|
||||
return TestResult(
|
||||
"T4a", "WARNING",
|
||||
f"Potential path traversal patterns found ({len(issues)})",
|
||||
"; ".join(issues)
|
||||
)
|
||||
|
||||
return TestResult("T4a", "PASS",
|
||||
"Path traversal mitigations verified",
|
||||
"send_from_directory/commonpath used for file serving; "
|
||||
"extractall() calls have is_relative_to() guards")
|
||||
|
||||
|
||||
# ─────────────────────────────────────────────────────────────────────────────
|
||||
# T5: Auth Bypass Patterns
|
||||
# ─────────────────────────────────────────────────────────────────────────────
|
||||
|
||||
def test_t5a_auth_bypass_patterns() -> TestResult:
|
||||
"""
|
||||
Look for broken auth bypass patterns — not the intentional no-auth design
|
||||
(T2a covers that), but patterns that suggest auth was INTENDED to exist
|
||||
but has an exploitable bypass: broad substring matching, debug-mode skips,
|
||||
or if-True conditions.
|
||||
"""
|
||||
bypass_signals = [
|
||||
(r'if\s+True\s*:', "if True: bypass"),
|
||||
(r'if\s+debug\s*:', "debug-mode auth skip"),
|
||||
(r'request\.path\s+in\s+', "substring path matching in auth (Huntarr pattern)"),
|
||||
(r'EXEMPT_ROUTES\s*=', "exempt routes list"),
|
||||
]
|
||||
|
||||
findings: list[str] = []
|
||||
|
||||
for dir_name in ["src", "web_interface"]:
|
||||
scan_dir = PROJECT_ROOT / dir_name
|
||||
if not scan_dir.exists():
|
||||
continue
|
||||
for py_file in scan_dir.rglob("*.py"):
|
||||
try:
|
||||
content = py_file.read_text(encoding="utf-8")
|
||||
except OSError:
|
||||
continue
|
||||
for pattern, label in bypass_signals:
|
||||
if re.search(pattern, content):
|
||||
# Only flag if the file also contains auth-related terms
|
||||
if any(auth in content.lower() for auth in
|
||||
["auth", "login", "authenticate", "token", "permission"]):
|
||||
rel = py_file.relative_to(PROJECT_ROOT)
|
||||
findings.append(f"{rel}: {label}")
|
||||
|
||||
if findings:
|
||||
return TestResult(
|
||||
"T5a", "WARNING",
|
||||
f"Potential auth bypass patterns found ({len(findings)})",
|
||||
"; ".join(findings[:5])
|
||||
)
|
||||
|
||||
return TestResult("T5a", "PASS",
|
||||
"No auth bypass patterns detected",
|
||||
"Checked src/ and web_interface/ for bypass signals")
|
||||
|
||||
|
||||
# ─────────────────────────────────────────────────────────────────────────────
|
||||
# T6: Docker / Container Hardening
|
||||
# ─────────────────────────────────────────────────────────────────────────────
|
||||
|
||||
def test_t6_docker_hardening() -> TestResult:
|
||||
"""Container security — skipped if no Dockerfile exists."""
|
||||
dockerfile = PROJECT_ROOT / "Dockerfile"
|
||||
if not dockerfile.exists():
|
||||
return TestResult("T6", "SKIP",
|
||||
"No Dockerfile found — container security scan not applicable",
|
||||
"If Docker support is added in future, enable hadolint/trivy scanning "
|
||||
"in .github/workflows/security-audit.yml")
|
||||
|
||||
content = dockerfile.read_text(encoding="utf-8")
|
||||
issues: list[str] = []
|
||||
|
||||
# Check for non-root USER directive
|
||||
user_lines = [l for l in content.splitlines() if l.strip().startswith("USER")]
|
||||
if not user_lines or user_lines[-1].strip() == "USER root":
|
||||
issues.append("Container runs as root — use USER directive to drop privileges")
|
||||
|
||||
# Check for pinned base image tags. A tag (even a specific version, not
|
||||
# just :latest) is mutable -- the same tag can point to a different
|
||||
# image later. Only a @sha256 digest is truly immutable/reproducible.
|
||||
from_lines = [line for line in content.splitlines() if line.strip().startswith("FROM")]
|
||||
for from_line in from_lines:
|
||||
parts = from_line.split()
|
||||
# FROM [--platform=<platform>] <image> [AS <name>] -- skip an
|
||||
# optional --platform= flag so it's never mistaken for the image
|
||||
# token itself (which would falsely report it as unpinned).
|
||||
image_parts = [p for p in parts[1:] if not p.startswith("--platform=")]
|
||||
if image_parts:
|
||||
image = image_parts[0]
|
||||
if "@sha256:" not in image:
|
||||
issues.append(f"Base image not pinned to a digest: {image}")
|
||||
|
||||
if issues:
|
||||
return TestResult("T6", "WARNING",
|
||||
f"Dockerfile hardening issues ({len(issues)})",
|
||||
"; ".join(issues))
|
||||
|
||||
return TestResult("T6", "PASS", "Dockerfile hardening checks passed", "")
|
||||
|
||||
|
||||
# ─────────────────────────────────────────────────────────────────────────────
|
||||
# Runner
|
||||
# ─────────────────────────────────────────────────────────────────────────────
|
||||
|
||||
def main() -> int:
|
||||
parser = argparse.ArgumentParser(
|
||||
description="LEDMatrix security proof tests",
|
||||
formatter_class=argparse.RawDescriptionHelpFormatter,
|
||||
)
|
||||
parser.add_argument("--output", "-o", default=None,
|
||||
help="Write JSON results to this file")
|
||||
parser.add_argument("--verbose", "-v", action="store_true",
|
||||
help="Show details for each check")
|
||||
args = parser.parse_args()
|
||||
|
||||
print("=" * 60)
|
||||
print("LEDMatrix Security Proof Tests")
|
||||
print(f"Project root: {PROJECT_ROOT}")
|
||||
print("=" * 60)
|
||||
|
||||
all_results: list[TestResult] = []
|
||||
|
||||
# Run all test groups
|
||||
all_results.append(test_t1a_zip_slip_protection())
|
||||
all_results.extend(test_t1b_dangerous_plugin_calls())
|
||||
all_results.append(test_t2a_api_surface_inventory())
|
||||
all_results.append(test_t3a_hardcoded_secrets())
|
||||
all_results.append(test_t3b_plaintext_password_storage())
|
||||
all_results.append(test_t4a_path_traversal())
|
||||
all_results.append(test_t5a_auth_bypass_patterns())
|
||||
all_results.append(test_t6_docker_hardening())
|
||||
|
||||
# Print results
|
||||
print()
|
||||
for r in all_results:
|
||||
line = f" {r.icon} [{r.severity:<8}] {r.test_id}: {r.message}"
|
||||
print(line)
|
||||
if args.verbose and r.details:
|
||||
print(f" {r.details}")
|
||||
|
||||
# Tally
|
||||
critical = [r for r in all_results if r.severity == "CRITICAL"]
|
||||
warnings = [r for r in all_results if r.severity == "WARNING"]
|
||||
passed = [r for r in all_results if r.severity == "PASS"]
|
||||
skipped = [r for r in all_results if r.severity == "SKIP"]
|
||||
|
||||
print()
|
||||
print(f" Results: {len(passed)} PASS {len(warnings)} WARN "
|
||||
f"{len(critical)} CRITICAL {len(skipped)} SKIP")
|
||||
|
||||
# Write JSON output
|
||||
if args.output:
|
||||
output_data = [r.to_dict() for r in all_results]
|
||||
Path(args.output).write_text(
|
||||
json.dumps(output_data, indent=2), encoding="utf-8"
|
||||
)
|
||||
print(f" Results written to: {args.output}")
|
||||
|
||||
if critical:
|
||||
print(f"\n 🚨 {len(critical)} CRITICAL issue(s) found — blocking")
|
||||
return 1
|
||||
|
||||
if warnings:
|
||||
print(f"\n ⚠️ {len(warnings)} warning(s) found — non-blocking")
|
||||
|
||||
print("\n ✅ All checks passed (warnings are non-blocking)")
|
||||
return 0
|
||||
|
||||
|
||||
if __name__ == "__main__":
|
||||
sys.exit(main())
|
||||
@@ -1,134 +0,0 @@
|
||||
"""
|
||||
Background Cache Mixin for Sports Managers
|
||||
|
||||
This mixin provides common caching functionality to eliminate code duplication
|
||||
across all sports managers. It implements the background service cache pattern
|
||||
where Recent/Upcoming managers consume data from the background service cache.
|
||||
"""
|
||||
|
||||
import time
|
||||
from typing import Dict, Optional, Any, Callable
|
||||
|
||||
|
||||
class BackgroundCacheMixin:
|
||||
"""
|
||||
Mixin class that provides background service cache functionality to sports managers.
|
||||
|
||||
This mixin eliminates code duplication by providing a common implementation
|
||||
for the background service cache pattern used across all sports managers.
|
||||
|
||||
Note: For non-sports managers (weather, stocks, news, etc.), use
|
||||
GenericCacheMixin instead. See src/generic_cache_mixin.py for details.
|
||||
"""
|
||||
|
||||
def _fetch_data_with_background_cache(self,
|
||||
sport_key: str,
|
||||
api_fetch_method: Callable,
|
||||
live_manager_class: type = None) -> Optional[Dict]:
|
||||
"""
|
||||
Common logic for fetching data with background service cache support.
|
||||
|
||||
This method implements the background service cache pattern:
|
||||
1. Live managers always fetch fresh data
|
||||
2. Recent/Upcoming managers try background cache first
|
||||
3. Fallback to direct API call if background data unavailable
|
||||
|
||||
Args:
|
||||
sport_key: Sport identifier (e.g., 'nba', 'nfl', 'ncaa_fb')
|
||||
api_fetch_method: Method to call for direct API fetch
|
||||
live_manager_class: Class to check if this is a live manager
|
||||
|
||||
Returns:
|
||||
Cached or fresh data from API
|
||||
"""
|
||||
start_time = time.time()
|
||||
cache_hit = False
|
||||
cache_source = None
|
||||
|
||||
try:
|
||||
# For Live managers, always fetch fresh data
|
||||
if live_manager_class and isinstance(self, live_manager_class):
|
||||
self.logger.info(f"[{sport_key.upper()}] Live manager - fetching fresh data")
|
||||
result = api_fetch_method(use_cache=False)
|
||||
cache_source = "live_fresh"
|
||||
else:
|
||||
# For Recent/Upcoming managers, try background service cache first
|
||||
cache_key = self.cache_manager.generate_sport_cache_key(sport_key)
|
||||
|
||||
# Check if background service has fresh data
|
||||
if self.cache_manager.is_background_data_available(cache_key, sport_key):
|
||||
cached_data = self.cache_manager.get_background_cached_data(cache_key, sport_key)
|
||||
if cached_data:
|
||||
self.logger.info(f"[{sport_key.upper()}] Using background service cache for {cache_key}")
|
||||
result = cached_data
|
||||
cache_hit = True
|
||||
cache_source = "background_cache"
|
||||
else:
|
||||
self.logger.warning(f"[{sport_key.upper()}] Background cache check passed but no data returned for {cache_key}")
|
||||
result = None
|
||||
cache_source = "background_miss"
|
||||
else:
|
||||
self.logger.info(f"[{sport_key.upper()}] Background data not available for {cache_key}")
|
||||
result = None
|
||||
cache_source = "background_unavailable"
|
||||
|
||||
# Fallback to direct API call if background data not available
|
||||
if result is None:
|
||||
self.logger.info(f"[{sport_key.upper()}] Fetching directly from API for {cache_key}")
|
||||
result = api_fetch_method(use_cache=True)
|
||||
cache_source = "api_fallback"
|
||||
|
||||
# Record performance metrics
|
||||
duration = time.time() - start_time
|
||||
self.cache_manager.record_fetch_time(duration)
|
||||
|
||||
# Log performance metrics
|
||||
self._log_fetch_performance(sport_key, duration, cache_hit, cache_source)
|
||||
|
||||
return result
|
||||
|
||||
except Exception as e:
|
||||
duration = time.time() - start_time
|
||||
self.logger.error(f"[{sport_key.upper()}] Error in background cache fetch after {duration:.2f}s: {e}")
|
||||
self.cache_manager.record_fetch_time(duration)
|
||||
raise
|
||||
|
||||
def _log_fetch_performance(self, sport_key: str, duration: float, cache_hit: bool, cache_source: str):
|
||||
"""
|
||||
Log detailed performance metrics for fetch operations.
|
||||
|
||||
Args:
|
||||
sport_key: Sport identifier
|
||||
duration: Fetch operation duration in seconds
|
||||
cache_hit: Whether this was a cache hit
|
||||
cache_source: Source of the data (background_cache, api_fallback, etc.)
|
||||
"""
|
||||
# Log basic performance info
|
||||
self.logger.info(f"[{sport_key.upper()}] Fetch completed in {duration:.2f}s "
|
||||
f"(cache_hit={cache_hit}, source={cache_source})")
|
||||
|
||||
# Log detailed metrics every 10 operations
|
||||
if hasattr(self, '_fetch_count'):
|
||||
self._fetch_count += 1
|
||||
else:
|
||||
self._fetch_count = 1
|
||||
|
||||
if self._fetch_count % 10 == 0:
|
||||
metrics = self.cache_manager.get_cache_metrics()
|
||||
self.logger.info(f"[{sport_key.upper()}] Cache Performance Summary - "
|
||||
f"Hit Rate: {metrics['cache_hit_rate']:.2%}, "
|
||||
f"Background Hit Rate: {metrics['background_hit_rate']:.2%}, "
|
||||
f"API Calls Saved: {metrics['api_calls_saved']}")
|
||||
|
||||
def get_cache_performance_summary(self) -> Dict[str, Any]:
|
||||
"""
|
||||
Get cache performance summary for this manager.
|
||||
|
||||
Returns:
|
||||
Dictionary containing cache performance metrics
|
||||
"""
|
||||
return self.cache_manager.get_cache_metrics()
|
||||
|
||||
def log_cache_performance(self):
|
||||
"""Log current cache performance metrics."""
|
||||
self.cache_manager.log_cache_metrics()
|
||||
@@ -1,328 +0,0 @@
|
||||
"""
|
||||
Example: Basketball Plugin using LEDMatrix Common Helpers
|
||||
|
||||
This example shows how to refactor the basketball plugin to use the
|
||||
ledmatrix-common package for cleaner, more maintainable code.
|
||||
"""
|
||||
|
||||
from pathlib import Path
|
||||
from typing import Any, Dict, List, Optional
|
||||
|
||||
|
||||
# Import common helpers
|
||||
from src.common import (
|
||||
LogoHelper, TextHelper, APIHelper, DisplayHelper,
|
||||
GameHelper, ConfigHelper
|
||||
)
|
||||
from src.plugin_system.base_plugin import BasePlugin
|
||||
|
||||
|
||||
class BasketballPluginManager(BasePlugin):
|
||||
"""
|
||||
Basketball scoreboard plugin using LEDMatrix Common helpers.
|
||||
|
||||
This version is much cleaner and more maintainable than the original
|
||||
because it delegates common functionality to the shared helpers.
|
||||
"""
|
||||
|
||||
def __init__(
|
||||
self,
|
||||
plugin_id: str,
|
||||
config: Dict[str, Any],
|
||||
display_manager,
|
||||
cache_manager,
|
||||
plugin_manager
|
||||
):
|
||||
"""Initialize the basketball plugin with common helpers."""
|
||||
super().__init__(plugin_id, config, display_manager, cache_manager, plugin_manager)
|
||||
|
||||
# Get display dimensions
|
||||
self.display_width = display_manager.matrix.width
|
||||
self.display_height = display_manager.matrix.height
|
||||
|
||||
# Initialize common helpers
|
||||
self._init_helpers()
|
||||
|
||||
# Load configuration
|
||||
self._load_config()
|
||||
|
||||
# State tracking
|
||||
self.current_games = []
|
||||
self.current_game = None
|
||||
|
||||
# Log initialization
|
||||
enabled_leagues = [k for k, v in self.league_configs.items() if v['enabled']]
|
||||
self.logger.info(f"Basketball plugin initialized with leagues: {enabled_leagues}")
|
||||
|
||||
def _init_helpers(self):
|
||||
"""Initialize all common helpers."""
|
||||
# Logo helper for team logos
|
||||
self.logo_helper = LogoHelper(
|
||||
display_width=self.display_width,
|
||||
display_height=self.display_height,
|
||||
logger=self.logger
|
||||
)
|
||||
|
||||
# Text helper for rendering
|
||||
self.text_helper = TextHelper(logger=self.logger)
|
||||
self.fonts = self.text_helper.load_fonts()
|
||||
|
||||
# API helper for ESPN data
|
||||
self.api_helper = APIHelper(
|
||||
cache_manager=self.cache_manager,
|
||||
logger=self.logger
|
||||
)
|
||||
|
||||
# Display helper for layouts
|
||||
self.display_helper = DisplayHelper(
|
||||
display_width=self.display_width,
|
||||
display_height=self.display_height,
|
||||
logger=self.logger
|
||||
)
|
||||
|
||||
# Game helper for data processing
|
||||
self.game_helper = GameHelper(
|
||||
timezone_str=self.config.get('timezone', 'UTC'),
|
||||
logger=self.logger
|
||||
)
|
||||
|
||||
# Config helper for configuration management
|
||||
self.config_helper = ConfigHelper(logger=self.logger)
|
||||
|
||||
def _load_config(self):
|
||||
"""Load and validate configuration."""
|
||||
# Get basketball-specific config
|
||||
basketball_config = self.config_helper.get_sports_config(self.config, 'basketball')
|
||||
|
||||
# Build league configurations
|
||||
self.league_configs = {
|
||||
'nba': {
|
||||
'enabled': basketball_config.get('nba_enabled', True),
|
||||
'url': 'https://site.api.espn.com/apis/site/v2/sports/basketball/nba/scoreboard',
|
||||
'logo_dir': Path('assets/sports/nba_logos'),
|
||||
'favorite_teams': basketball_config.get('nba_favorite_teams', []),
|
||||
'display_modes': {
|
||||
'nba_live': basketball_config.get('nba_display_modes_live', True),
|
||||
'nba_recent': basketball_config.get('nba_display_modes_recent', True),
|
||||
'nba_upcoming': basketball_config.get('nba_display_modes_upcoming', True),
|
||||
},
|
||||
},
|
||||
'wnba': {
|
||||
'enabled': basketball_config.get('wnba_enabled', False),
|
||||
'url': 'https://site.api.espn.com/apis/site/v2/sports/basketball/wnba/scoreboard',
|
||||
'logo_dir': Path('assets/sports/wnba_logos'),
|
||||
'favorite_teams': basketball_config.get('wnba_favorite_teams', []),
|
||||
'display_modes': {
|
||||
'wnba_live': basketball_config.get('wnba_display_modes_live', True),
|
||||
'wnba_recent': basketball_config.get('wnba_display_modes_recent', True),
|
||||
'wnba_upcoming': basketball_config.get('wnba_display_modes_upcoming', True),
|
||||
},
|
||||
},
|
||||
'ncaam': {
|
||||
'enabled': basketball_config.get('ncaam_basketball_enabled', False),
|
||||
'url': 'https://site.api.espn.com/apis/site/v2/sports/basketball/mens-college-basketball/scoreboard',
|
||||
'logo_dir': Path('assets/sports/ncaa_logos'),
|
||||
'favorite_teams': basketball_config.get('ncaam_basketball_favorite_teams', []),
|
||||
'display_modes': {
|
||||
'ncaam_basketball_live': basketball_config.get('ncaam_basketball_display_modes_live', True),
|
||||
'ncaam_basketball_recent': basketball_config.get('ncaam_basketball_display_modes_recent', True),
|
||||
'ncaam_basketball_upcoming': basketball_config.get('ncaam_basketball_display_modes_upcoming', True),
|
||||
},
|
||||
},
|
||||
'ncaaw': {
|
||||
'enabled': basketball_config.get('ncaaw_basketball_enabled', False),
|
||||
'url': 'https://site.api.espn.com/apis/site/v2/sports/basketball/womens-college-basketball/scoreboard',
|
||||
'logo_dir': Path('assets/sports/ncaa_logos'),
|
||||
'favorite_teams': basketball_config.get('ncaaw_basketball_favorite_teams', []),
|
||||
'display_modes': {
|
||||
'ncaaw_basketball_live': basketball_config.get('ncaaw_basketball_display_modes_live', True),
|
||||
'ncaaw_basketball_recent': basketball_config.get('ncaaw_basketball_display_modes_recent', True),
|
||||
'ncaaw_basketball_upcoming': basketball_config.get('ncaaw_basketball_display_modes_upcoming', True),
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
def update(self) -> None:
|
||||
"""Update game data for all enabled leagues."""
|
||||
try:
|
||||
all_games = []
|
||||
|
||||
for league_key, league_config in self.league_configs.items():
|
||||
if not league_config['enabled']:
|
||||
continue
|
||||
|
||||
games = self._fetch_league_games(league_key, league_config)
|
||||
for game in games:
|
||||
game['league_key'] = league_key
|
||||
game['league_config'] = league_config
|
||||
all_games.extend(games)
|
||||
|
||||
self.current_games = all_games
|
||||
self.logger.debug(f"Updated basketball data: {len(all_games)} total games")
|
||||
|
||||
except Exception as e:
|
||||
self.logger.error(f"Error updating basketball data: {e}", exc_info=True)
|
||||
|
||||
def _fetch_league_games(self, league_key: str, league_config: Dict) -> List[Dict]:
|
||||
"""Fetch games for a specific league using API helper."""
|
||||
try:
|
||||
# Use API helper to fetch ESPN data with caching
|
||||
data = self.api_helper.fetch_espn_scoreboard(
|
||||
sport='basketball',
|
||||
league=league_key,
|
||||
cache_key=f"basketball_{league_key}",
|
||||
cache_ttl=300 # 5 minutes cache
|
||||
)
|
||||
|
||||
if not data:
|
||||
return []
|
||||
|
||||
# Use game helper to process events
|
||||
events = data.get('events', [])
|
||||
games = self.game_helper.process_games(events, sport='basketball')
|
||||
|
||||
# Add logo paths to games
|
||||
for game in games:
|
||||
logo_dir = league_config['logo_dir']
|
||||
game['home_logo_path'] = logo_dir / f"{game['home_abbr']}.png"
|
||||
game['away_logo_path'] = logo_dir / f"{game['away_abbr']}.png"
|
||||
|
||||
return games
|
||||
|
||||
except Exception as e:
|
||||
self.logger.error(f"Error fetching {league_key} games: {e}", exc_info=True)
|
||||
return []
|
||||
|
||||
def display(self, force_clear: bool = False, display_mode: str = None) -> None:
|
||||
"""Display basketball games using display helper."""
|
||||
try:
|
||||
mode = display_mode or self._determine_display_mode()
|
||||
|
||||
if not mode:
|
||||
self._display_no_games()
|
||||
return
|
||||
|
||||
# Filter games for mode
|
||||
filtered_games = self._filter_games_for_mode(mode)
|
||||
|
||||
if not filtered_games:
|
||||
self._display_no_games()
|
||||
return
|
||||
|
||||
# Display first game
|
||||
self.current_game = filtered_games[0]
|
||||
self._draw_scorebug_layout(self.current_game, force_clear)
|
||||
|
||||
except Exception as e:
|
||||
self.logger.error(f"Error displaying game: {e}", exc_info=True)
|
||||
|
||||
def _determine_display_mode(self) -> Optional[str]:
|
||||
"""Determine display mode based on available games."""
|
||||
# Priority: live > recent > upcoming
|
||||
for game in self.current_games:
|
||||
if game.get('is_live'):
|
||||
return f"{game['league_key']}_live"
|
||||
for game in self.current_games:
|
||||
if game.get('is_final'):
|
||||
return f"{game['league_key']}_recent"
|
||||
for game in self.current_games:
|
||||
if game.get('is_upcoming'):
|
||||
return f"{game['league_key']}_upcoming"
|
||||
return None
|
||||
|
||||
def _filter_games_for_mode(self, mode: str) -> List[Dict]:
|
||||
"""Filter games based on display mode."""
|
||||
filtered = []
|
||||
|
||||
for game in self.current_games:
|
||||
league_config = game.get('league_config', {})
|
||||
display_modes = league_config.get('display_modes', {})
|
||||
|
||||
if mode in display_modes and display_modes[mode]:
|
||||
if 'live' in mode and game.get('is_live'):
|
||||
filtered.append(game)
|
||||
elif 'recent' in mode and game.get('is_final'):
|
||||
filtered.append(game)
|
||||
elif 'upcoming' in mode and game.get('is_upcoming'):
|
||||
filtered.append(game)
|
||||
|
||||
return filtered[:5]
|
||||
|
||||
def _draw_scorebug_layout(self, game: Dict, force_clear: bool = False) -> None:
|
||||
"""Draw the basketball scorebug layout using display helper."""
|
||||
try:
|
||||
# Load logos using logo helper
|
||||
home_logo = self.logo_helper.load_logo(
|
||||
game['home_abbr'],
|
||||
game['home_logo_path']
|
||||
)
|
||||
away_logo = self.logo_helper.load_logo(
|
||||
game['away_abbr'],
|
||||
game['away_logo_path']
|
||||
)
|
||||
|
||||
if not home_logo or not away_logo:
|
||||
self.logger.error("Failed to load logos")
|
||||
self._display_error("Logo Error")
|
||||
return
|
||||
|
||||
# Use display helper to create scorebug layout
|
||||
final_img = self.display_helper.draw_scorebug_layout(
|
||||
game_data=game,
|
||||
fonts=self.fonts,
|
||||
home_logo=home_logo,
|
||||
away_logo=away_logo
|
||||
)
|
||||
|
||||
# Display the image
|
||||
self.display_manager.image.paste(final_img, (0, 0))
|
||||
self.display_manager.update_display()
|
||||
|
||||
except Exception as e:
|
||||
self.logger.error(f"Error drawing scorebug: {e}", exc_info=True)
|
||||
|
||||
def _display_no_games(self) -> None:
|
||||
"""Display 'no games' message using display helper."""
|
||||
try:
|
||||
img = self.display_helper.draw_no_data_message("No Games")
|
||||
self.display_manager.image = img.copy()
|
||||
self.display_manager.update_display()
|
||||
except Exception as e:
|
||||
self.logger.error(f"Error displaying no games: {e}", exc_info=True)
|
||||
|
||||
def _display_error(self, message: str) -> None:
|
||||
"""Display error message using display helper."""
|
||||
try:
|
||||
img = self.display_helper.draw_error_message(message)
|
||||
self.display_manager.image = img.copy()
|
||||
self.display_manager.update_display()
|
||||
except Exception as e:
|
||||
self.logger.error(f"Error displaying error message: {e}", exc_info=True)
|
||||
|
||||
def get_display_duration(self) -> float:
|
||||
"""Get display duration."""
|
||||
return self.config.get('display_duration', 15)
|
||||
|
||||
def cleanup(self) -> None:
|
||||
"""Cleanup resources."""
|
||||
self.current_games = []
|
||||
self.logger.info("Basketball plugin cleaned up")
|
||||
|
||||
|
||||
# Example usage and benefits:
|
||||
"""
|
||||
Benefits of using LEDMatrix Common helpers:
|
||||
|
||||
1. **Cleaner Code**: The plugin is much shorter and more readable
|
||||
2. **Reusable Components**: Common functionality is shared across plugins
|
||||
3. **Better Testing**: Each helper can be tested independently
|
||||
4. **Easier Maintenance**: Bug fixes in helpers benefit all plugins
|
||||
5. **Consistent Behavior**: All plugins use the same underlying logic
|
||||
6. **Reduced Dependencies**: Plugins don't need to import LEDMatrix core
|
||||
7. **Better Error Handling**: Centralized error handling in helpers
|
||||
8. **Configuration Management**: Consistent config handling across plugins
|
||||
|
||||
The original basketball plugin was 326 lines. This version is much cleaner
|
||||
and delegates most functionality to the common helpers, making it easier to
|
||||
maintain and extend.
|
||||
"""
|
||||
@@ -146,6 +146,60 @@ def ensure_file_permissions(path: Path, mode: int = 0o644) -> None:
|
||||
raise
|
||||
|
||||
|
||||
_shared_group_gid_cache: Optional[int] = None
|
||||
|
||||
|
||||
def get_shared_group_gid() -> Optional[int]:
|
||||
"""
|
||||
Return the gid that should own config/secrets files shared between the
|
||||
root-run ``ledmatrix.service`` (main display) and the non-root user that
|
||||
``ledmatrix-web.service`` runs as (see install_web_service.sh, which sets
|
||||
``User=$SUDO_USER``).
|
||||
|
||||
Resolved once from the project root directory's current group (normally
|
||||
the login user's group from the initial ``git clone``), since that user
|
||||
is stable across reinstalls unlike any single file's ownership.
|
||||
|
||||
Returns:
|
||||
The gid, or None if it cannot be determined.
|
||||
"""
|
||||
global _shared_group_gid_cache
|
||||
if _shared_group_gid_cache is not None:
|
||||
return _shared_group_gid_cache
|
||||
try:
|
||||
project_root = Path(__file__).resolve().parent.parent.parent
|
||||
_shared_group_gid_cache = project_root.stat().st_gid
|
||||
return _shared_group_gid_cache
|
||||
except OSError:
|
||||
return None
|
||||
|
||||
|
||||
def ensure_shared_group_ownership(path: Path) -> None:
|
||||
"""
|
||||
Best-effort chgrp of ``path`` to the shared group (see
|
||||
:func:`get_shared_group_gid`) when running as root.
|
||||
|
||||
Only root can change a file's group to one the calling process isn't a
|
||||
member of, which is exactly the case that causes the web interface
|
||||
(running as a non-root user) to get ``PermissionError`` reading files
|
||||
the root-run display service just wrote with a 0o640/2775 mode: the mode
|
||||
is group-readable, but without this the group is root's, not the web
|
||||
user's. Silently does nothing if not running as root or on any error —
|
||||
this is a hardening step, not a required one.
|
||||
"""
|
||||
if os.geteuid() != 0:
|
||||
return
|
||||
gid = get_shared_group_gid()
|
||||
if gid is None:
|
||||
return
|
||||
try:
|
||||
if path.exists() and path.stat().st_gid != gid:
|
||||
os.chown(path, -1, gid)
|
||||
logger.debug(f"Set shared group ownership (gid {gid}) on {path}")
|
||||
except OSError as e:
|
||||
logger.debug(f"Could not set shared group ownership on {path}: {e}")
|
||||
|
||||
|
||||
def get_config_file_mode(file_path: Path) -> int:
|
||||
"""
|
||||
Return appropriate permission mode for config files.
|
||||
|
||||
+25
-1
@@ -38,6 +38,7 @@ from src.config_manager_atomic import (
|
||||
from src.common.permission_utils import (
|
||||
ensure_directory_permissions,
|
||||
ensure_file_permissions,
|
||||
ensure_shared_group_ownership,
|
||||
get_config_file_mode,
|
||||
get_config_dir_mode
|
||||
)
|
||||
@@ -234,6 +235,11 @@ class ConfigManager:
|
||||
|
||||
# Load and merge secrets if they exist (be permissive on errors)
|
||||
if os.path.exists(self.secrets_path):
|
||||
# Self-heal stale group ownership (e.g. the root-run display
|
||||
# service wrote this file before the web user was granted
|
||||
# group access) before every load attempt; no-op unless
|
||||
# running as root and the group is already wrong.
|
||||
ensure_shared_group_ownership(Path(self.secrets_path))
|
||||
try:
|
||||
with open(self.secrets_path, 'r') as f:
|
||||
secrets = json.load(f)
|
||||
@@ -363,6 +369,7 @@ class ConfigManager:
|
||||
# Set proper file permissions after creation
|
||||
config_path_obj = Path(self.config_path)
|
||||
ensure_file_permissions(config_path_obj, get_config_file_mode(config_path_obj))
|
||||
ensure_shared_group_ownership(config_path_obj)
|
||||
|
||||
self.logger.info(f"Created config.json from template at {os.path.abspath(self.config_path)}")
|
||||
|
||||
@@ -475,6 +482,11 @@ class ConfigManager:
|
||||
self.logger.error(error_msg)
|
||||
raise ConfigError(error_msg, config_path=path_to_load)
|
||||
|
||||
if file_type == "secrets":
|
||||
# Best-effort self-heal: no-op unless running as root and the
|
||||
# group is stale (see load_config for why this can happen).
|
||||
ensure_shared_group_ownership(Path(path_to_load))
|
||||
|
||||
try:
|
||||
with open(path_to_load, 'r') as f:
|
||||
return json.load(f)
|
||||
@@ -482,7 +494,18 @@ class ConfigManager:
|
||||
error_msg = f"Error parsing {file_type} configuration file: {path_to_load}"
|
||||
self.logger.error(error_msg, exc_info=True)
|
||||
raise ConfigError(error_msg, config_path=path_to_load) from e
|
||||
except (IOError, OSError, PermissionError) as e:
|
||||
except PermissionError as e:
|
||||
if file_type == "secrets":
|
||||
# Match load_config()'s tolerance: a secrets file the web
|
||||
# process can't read (e.g. written 0640 by the root-run
|
||||
# display service before the group was fixed up) shouldn't
|
||||
# 500 the settings page — degrade to "no secrets" instead.
|
||||
self.logger.warning(f"Secrets file not readable ({path_to_load}): {e}. Returning empty secrets.")
|
||||
return {}
|
||||
error_msg = f"Error loading {file_type} configuration file {path_to_load}: {str(e)}"
|
||||
self.logger.error(error_msg, exc_info=True)
|
||||
raise ConfigError(error_msg, config_path=path_to_load) from e
|
||||
except (IOError, OSError) as e:
|
||||
error_msg = f"Error loading {file_type} configuration file {path_to_load}: {str(e)}"
|
||||
self.logger.error(error_msg, exc_info=True)
|
||||
raise ConfigError(error_msg, config_path=path_to_load) from e
|
||||
@@ -539,6 +562,7 @@ class ConfigManager:
|
||||
# Ensure final file has correct permissions
|
||||
try:
|
||||
ensure_file_permissions(path_obj, file_mode)
|
||||
ensure_shared_group_ownership(path_obj)
|
||||
except OSError as perm_error:
|
||||
# If we can't set permissions but file was written, log warning but don't fail
|
||||
self.logger.warning(
|
||||
|
||||
@@ -17,6 +17,7 @@ from enum import Enum
|
||||
|
||||
from src.exceptions import ConfigError
|
||||
from src.logging_config import get_logger
|
||||
from src.common.permission_utils import ensure_shared_group_ownership
|
||||
|
||||
|
||||
class SaveResultStatus(Enum):
|
||||
@@ -410,6 +411,13 @@ class AtomicConfigManager:
|
||||
# This is important because temp files may have different permissions
|
||||
# and we need root service to be able to read config.json
|
||||
os.chmod(destination, target_mode)
|
||||
|
||||
# Also fix group ownership when this save is running as root
|
||||
# (the display service): 0o640 alone only helps the non-root web
|
||||
# user read a root-written secrets file if its group already
|
||||
# matches the web user's group, which isn't guaranteed. See
|
||||
# permission_utils.ensure_shared_group_ownership for why.
|
||||
ensure_shared_group_ownership(destination)
|
||||
|
||||
except Exception as e:
|
||||
raise ConfigError(f"Error during atomic move: {e}") from e
|
||||
|
||||
@@ -381,6 +381,10 @@ class DisplayController:
|
||||
logger.debug("%d plugin(s) disabled in config", disabled_count)
|
||||
|
||||
logger.info("Plugin system initialized in %.3f seconds", time.time() - plugin_time)
|
||||
# Parallel loading appends modes in load-completion order, which
|
||||
# varies between restarts; apply the user's configured rotation
|
||||
# order (no-op when not configured).
|
||||
self._apply_plugin_rotation_order()
|
||||
logger.info("Total available modes: %d", len(self.available_modes))
|
||||
logger.info("Available modes: %s", self.available_modes)
|
||||
|
||||
@@ -2843,11 +2847,52 @@ class DisplayController:
|
||||
except Exception as e:
|
||||
logger.error("Plugin reconcile: error enabling %s: %s", plugin_id, e, exc_info=True)
|
||||
|
||||
# Newly enabled plugins were appended at the end; put them in the
|
||||
# configured rotation slot before resyncing the index.
|
||||
self._apply_plugin_rotation_order()
|
||||
self._resync_mode_index_after_change(previous_mode)
|
||||
logger.info("Plugin reconcile complete: +%s -%s (%d modes)",
|
||||
logger.info("[DisplayController] Plugin reconcile complete: +%s -%s (%d modes)",
|
||||
sorted(to_add), sorted(to_remove), len(self.available_modes))
|
||||
return True
|
||||
|
||||
def _apply_plugin_rotation_order(self) -> None:
|
||||
"""Reorder available_modes to follow display.plugin_rotation_order.
|
||||
|
||||
The configured value is a list of plugin ids; their modes rotate in
|
||||
that order (each plugin's own modes keep their declared order), with
|
||||
any enabled-but-unlisted plugins appended afterwards in their current
|
||||
relative order. An empty/missing list leaves available_modes exactly
|
||||
as built (today's behavior). Mirrors vegas_mode/config.py's
|
||||
get_ordered_plugins() semantics for the primary rotation.
|
||||
"""
|
||||
configured = (self.config.get("display", {}) or {}).get("plugin_rotation_order", []) or []
|
||||
# Defensive: hand-edited or migrated configs may hold a non-list or
|
||||
# non-string entries; keep the existing rotation rather than applying
|
||||
# a garbage order.
|
||||
if not isinstance(configured, list):
|
||||
logger.warning("[DisplayController] Ignoring invalid plugin_rotation_order (not a list): %r",
|
||||
type(configured).__name__)
|
||||
return
|
||||
configured = [p for p in configured if isinstance(p, str)]
|
||||
if not configured or not self.available_modes:
|
||||
return
|
||||
|
||||
ordered_ids = [p for p in configured if p in self.plugin_display_modes]
|
||||
new_modes: List[str] = []
|
||||
for plugin_id in ordered_ids:
|
||||
for mode in self.plugin_display_modes[plugin_id]:
|
||||
if mode in self.available_modes and mode not in new_modes:
|
||||
new_modes.append(mode)
|
||||
# Unlisted plugins' modes (and any mode not attributable to a plugin)
|
||||
# follow in their existing relative order.
|
||||
for mode in self.available_modes:
|
||||
if mode not in new_modes:
|
||||
new_modes.append(mode)
|
||||
if new_modes != self.available_modes:
|
||||
self.available_modes = new_modes
|
||||
logger.info("[DisplayController] Applied plugin rotation order %s -> modes: %s",
|
||||
configured, self.available_modes)
|
||||
|
||||
def _resync_mode_index_after_change(self, previous_mode: Optional[str]) -> None:
|
||||
"""Clamp rotation state after available_modes changed. Stays on the
|
||||
previous mode if it survived, otherwise restarts cleanly within range."""
|
||||
|
||||
@@ -1,135 +0,0 @@
|
||||
import os
|
||||
import freetype
|
||||
from PIL import ImageDraw, ImageFont
|
||||
import logging
|
||||
from typing import Dict, Any
|
||||
from src.display_manager import DisplayManager
|
||||
|
||||
# Configure logging
|
||||
logging.basicConfig(level=logging.INFO)
|
||||
logger = logging.getLogger(__name__)
|
||||
|
||||
class FontTestManager:
|
||||
"""Manager for testing fonts with easy BDF/TTF switching."""
|
||||
|
||||
def __init__(self, config: Dict[str, Any], display_manager: DisplayManager):
|
||||
self.display_manager = display_manager
|
||||
self.config = config
|
||||
self.logger = logging.getLogger('FontTest')
|
||||
|
||||
# FONT CONFIGURATION - EASY SWITCHING
|
||||
# Set to 'bdf' or 'ttf' to switch font types
|
||||
self.font_type = 'bdf' # Change this to 'ttf' to use TTF font
|
||||
|
||||
# Font configurations
|
||||
self.font_configs = {
|
||||
'bdf': {
|
||||
'path': "assets/fonts/cozette.bdf",
|
||||
'display_name': "Cozette BTF",
|
||||
'description': "BTF font Test"
|
||||
},
|
||||
'ttf': {
|
||||
'path': "assets/fonts/5by7.regular.ttf",
|
||||
'display_name': "5by7 TTF",
|
||||
'description': "TTF font test"
|
||||
}
|
||||
}
|
||||
|
||||
# Get current font configuration
|
||||
self.current_config = self.font_configs[self.font_type]
|
||||
self.font_path = self.current_config['path']
|
||||
|
||||
# Verify font exists
|
||||
if not os.path.exists(self.font_path):
|
||||
self.logger.error(f"Font file not found: {self.font_path}")
|
||||
raise FileNotFoundError(f"Font file not found: {self.font_path}")
|
||||
|
||||
# Load the font based on type
|
||||
if self.font_type == 'bdf':
|
||||
self._load_bdf_font()
|
||||
else:
|
||||
self._load_ttf_font()
|
||||
|
||||
self.logger.info(f"Initialized FontTestManager with {self.current_config['description']}")
|
||||
|
||||
def _load_bdf_font(self):
|
||||
"""Load BDF font using freetype."""
|
||||
try:
|
||||
self.face = freetype.Face(self.font_path)
|
||||
self.logger.info(f"Successfully loaded BDF font from {self.font_path}")
|
||||
except Exception as e:
|
||||
self.logger.error(f"Failed to load BDF font: {e}")
|
||||
raise
|
||||
|
||||
def _load_ttf_font(self):
|
||||
"""Load TTF font using PIL."""
|
||||
try:
|
||||
self.font = ImageFont.truetype(self.font_path, 8) # Size 8 for 5x7 font
|
||||
self.logger.info(f"Successfully loaded TTF font from {self.font_path}")
|
||||
except Exception as e:
|
||||
self.logger.error(f"Failed to load TTF font: {e}")
|
||||
raise
|
||||
|
||||
def update(self):
|
||||
"""No update needed for static display."""
|
||||
|
||||
def display(self, force_clear: bool = False):
|
||||
"""Display the font with sample text."""
|
||||
try:
|
||||
# Clear the display
|
||||
self.display_manager.clear()
|
||||
|
||||
# Draw font name at the top
|
||||
self.display_manager.draw_text(self.current_config['display_name'], y=2, color=(255, 255, 255))
|
||||
|
||||
# Draw sample text
|
||||
draw = ImageDraw.Draw(self.display_manager.image)
|
||||
sample_text = "ABCDEFGHIJKLMNOPQRSTUVWXYZ"
|
||||
|
||||
# Calculate starting position
|
||||
x = 10 # Start 10 pixels from the left
|
||||
y = 10 # Start 10 pixels from the top
|
||||
|
||||
# Draw text based on font type
|
||||
if self.font_type == 'bdf':
|
||||
self._draw_bdf_text(draw, sample_text, x, y)
|
||||
else:
|
||||
self._draw_ttf_text(draw, sample_text, x, y)
|
||||
|
||||
# Update the display once
|
||||
self.display_manager.update_display()
|
||||
|
||||
# Log that display is complete
|
||||
self.logger.info("Font test display complete.")
|
||||
|
||||
except Exception as e:
|
||||
self.logger.error(f"Error displaying font test: {e}", exc_info=True)
|
||||
|
||||
def _draw_bdf_text(self, draw, text, x, y):
|
||||
"""Draw text using BDF font."""
|
||||
for char in text:
|
||||
# Load the glyph
|
||||
self.face.load_char(char)
|
||||
bitmap = self.face.glyph.bitmap
|
||||
|
||||
# Draw the glyph
|
||||
for i in range(bitmap.rows):
|
||||
for j in range(bitmap.width):
|
||||
try:
|
||||
# Get the byte containing the pixel
|
||||
byte_index = i * bitmap.pitch + (j // 8)
|
||||
if byte_index < len(bitmap.buffer):
|
||||
byte = bitmap.buffer[byte_index]
|
||||
# Check if the specific bit is set
|
||||
if byte & (1 << (7 - (j % 8))):
|
||||
draw.point((x + j, y + i), fill=(255, 255, 255))
|
||||
except IndexError:
|
||||
self.logger.warning(f"Index out of range for char '{char}' at position ({i}, {j})")
|
||||
continue
|
||||
|
||||
# Move to next character position
|
||||
x += self.face.glyph.advance.x >> 6
|
||||
|
||||
def _draw_ttf_text(self, draw, text, x, y):
|
||||
"""Draw text using TTF font."""
|
||||
draw.text((x, y), text, font=self.font, fill=(255, 255, 255))
|
||||
@@ -1,150 +0,0 @@
|
||||
"""
|
||||
Generic Cache Mixin for Any Manager
|
||||
|
||||
This mixin provides caching functionality that can be used by any manager
|
||||
that needs to cache data, not just sports managers. It's a more general
|
||||
version of BackgroundCacheMixin that works for weather, stocks, news, etc.
|
||||
"""
|
||||
|
||||
import time
|
||||
from typing import Dict, Optional, Any, Callable
|
||||
|
||||
|
||||
class GenericCacheMixin:
|
||||
"""
|
||||
Generic mixin class that provides caching functionality to any manager.
|
||||
|
||||
This mixin can be used by weather, stock, news, or any other manager
|
||||
that needs to cache data with performance monitoring.
|
||||
|
||||
Note: For sports managers that need background service cache integration,
|
||||
use BackgroundCacheMixin instead. See src/background_cache_mixin.py for details.
|
||||
"""
|
||||
|
||||
def _fetch_data_with_cache(self,
|
||||
cache_key: str,
|
||||
api_fetch_method: Callable,
|
||||
cache_ttl: int = 300,
|
||||
force_refresh: bool = False) -> Optional[Dict]:
|
||||
"""
|
||||
Generic caching pattern for any manager.
|
||||
|
||||
Args:
|
||||
cache_key: Unique cache key for this data
|
||||
api_fetch_method: Method to call for fresh data
|
||||
cache_ttl: Time-to-live in seconds (default: 5 minutes)
|
||||
force_refresh: Skip cache and fetch fresh data
|
||||
|
||||
Returns:
|
||||
Cached or fresh data from API
|
||||
"""
|
||||
start_time = time.time()
|
||||
cache_hit = False
|
||||
cache_source = None
|
||||
|
||||
try:
|
||||
# Check cache first (unless forcing refresh)
|
||||
if not force_refresh:
|
||||
cached_data = self.cache_manager.get_cached_data(cache_key, cache_ttl)
|
||||
if cached_data:
|
||||
self.logger.info(f"Using cached data for {cache_key}")
|
||||
cache_hit = True
|
||||
cache_source = "cache"
|
||||
self.cache_manager.record_cache_hit('regular')
|
||||
|
||||
# Record performance metrics
|
||||
duration = time.time() - start_time
|
||||
self.cache_manager.record_fetch_time(duration)
|
||||
self._log_fetch_performance(cache_key, duration, cache_hit, cache_source)
|
||||
|
||||
return cached_data
|
||||
|
||||
# Fetch fresh data
|
||||
self.logger.info(f"Fetching fresh data for {cache_key}")
|
||||
result = api_fetch_method()
|
||||
cache_source = "api_fresh"
|
||||
|
||||
# Store in cache if we got data
|
||||
if result:
|
||||
self.cache_manager.save_cache(cache_key, result)
|
||||
self.cache_manager.record_cache_miss('regular')
|
||||
else:
|
||||
self.logger.warning(f"No data returned for {cache_key}")
|
||||
|
||||
# Record performance metrics
|
||||
duration = time.time() - start_time
|
||||
self.cache_manager.record_fetch_time(duration)
|
||||
|
||||
# Log performance
|
||||
self._log_fetch_performance(cache_key, duration, cache_hit, cache_source)
|
||||
|
||||
return result
|
||||
|
||||
except Exception as e:
|
||||
duration = time.time() - start_time
|
||||
self.logger.error(f"Error fetching data for {cache_key} after {duration:.2f}s: {e}")
|
||||
self.cache_manager.record_fetch_time(duration)
|
||||
raise
|
||||
|
||||
def _log_fetch_performance(self, cache_key: str, duration: float, cache_hit: bool, cache_source: str):
|
||||
"""
|
||||
Log detailed performance metrics for fetch operations.
|
||||
|
||||
Args:
|
||||
cache_key: Cache key that was accessed
|
||||
duration: Fetch operation duration in seconds
|
||||
cache_hit: Whether this was a cache hit
|
||||
cache_source: Source of the data (cache, api_fresh, etc.)
|
||||
"""
|
||||
# Log basic performance info
|
||||
self.logger.info(f"Fetch completed for {cache_key} in {duration:.2f}s "
|
||||
f"(cache_hit={cache_hit}, source={cache_source})")
|
||||
|
||||
# Log detailed metrics every 10 operations
|
||||
if hasattr(self, '_fetch_count'):
|
||||
self._fetch_count += 1
|
||||
else:
|
||||
self._fetch_count = 1
|
||||
|
||||
if self._fetch_count % 10 == 0:
|
||||
metrics = self.cache_manager.get_cache_metrics()
|
||||
self.logger.info(f"Cache Performance Summary - "
|
||||
f"Hit Rate: {metrics['cache_hit_rate']:.2%}, "
|
||||
f"API Calls Saved: {metrics['api_calls_saved']}, "
|
||||
f"Avg Fetch Time: {metrics['average_fetch_time']:.2f}s")
|
||||
|
||||
def get_cache_performance_summary(self) -> Dict[str, Any]:
|
||||
"""
|
||||
Get cache performance summary for this manager.
|
||||
|
||||
Returns:
|
||||
Dictionary containing cache performance metrics
|
||||
"""
|
||||
return self.cache_manager.get_cache_metrics()
|
||||
|
||||
def log_cache_performance(self):
|
||||
"""Log current cache performance metrics."""
|
||||
self.cache_manager.log_cache_metrics()
|
||||
|
||||
def clear_cache_for_key(self, cache_key: str):
|
||||
"""Clear cache for a specific key."""
|
||||
self.cache_manager.clear_cache(cache_key)
|
||||
self.logger.info(f"Cleared cache for {cache_key}")
|
||||
|
||||
def get_cache_info(self, cache_key: str) -> Dict[str, Any]:
|
||||
"""
|
||||
Get information about a cached item.
|
||||
|
||||
Args:
|
||||
cache_key: Cache key to check
|
||||
|
||||
Returns:
|
||||
Dictionary with cache information
|
||||
"""
|
||||
# This would need to be implemented in CacheManager
|
||||
# For now, just return basic info
|
||||
return {
|
||||
'key': cache_key,
|
||||
'exists': self.cache_manager.get_cached_data(cache_key, 0) is not None,
|
||||
'ttl': 'unknown' # Would need to be implemented
|
||||
}
|
||||
@@ -1,22 +0,0 @@
|
||||
"""Deprecated: use src/adaptive_images.py (fit_image) instead.
|
||||
|
||||
This module predates the adaptive image system and has no known callers.
|
||||
It is kept only so any out-of-tree code importing it keeps working.
|
||||
"""
|
||||
|
||||
import logging
|
||||
from PIL import Image
|
||||
|
||||
logger = logging.getLogger(__name__)
|
||||
|
||||
def scale_to_max_dimensions(img, max_width, max_height):
|
||||
h_to_w_ratio = img.height / img.width
|
||||
w_to_h_ratio = img.width / img.height
|
||||
|
||||
if img.height > max_height:
|
||||
img = img.resize((int(max_height * w_to_h_ratio), max_height), Image.Resampling.LANCZOS)
|
||||
|
||||
if img.width > max_width:
|
||||
img = img.resize((max_width, int(max_width * h_to_w_ratio)), Image.Resampling.LANCZOS)
|
||||
|
||||
return img
|
||||
@@ -1,409 +0,0 @@
|
||||
"""
|
||||
Layout Manager for LED Matrix Display
|
||||
Handles custom layouts, element positioning, and display composition.
|
||||
"""
|
||||
|
||||
import json
|
||||
import os
|
||||
import logging
|
||||
from typing import Dict, List, Any
|
||||
from datetime import datetime
|
||||
|
||||
logger = logging.getLogger(__name__)
|
||||
|
||||
class LayoutManager:
|
||||
def __init__(self, display_manager=None, config_path="config/custom_layouts.json"):
|
||||
self.display_manager = display_manager
|
||||
self.config_path = config_path
|
||||
self.layouts = self.load_layouts()
|
||||
self.current_layout = None
|
||||
|
||||
def load_layouts(self) -> Dict[str, Any]:
|
||||
"""Load saved layouts from file."""
|
||||
try:
|
||||
if os.path.exists(self.config_path):
|
||||
with open(self.config_path, 'r') as f:
|
||||
return json.load(f)
|
||||
return {}
|
||||
except Exception as e:
|
||||
logger.error(f"Error loading layouts: {e}")
|
||||
return {}
|
||||
|
||||
def save_layouts(self) -> bool:
|
||||
"""Save layouts to file."""
|
||||
try:
|
||||
from pathlib import Path
|
||||
from src.common.permission_utils import (
|
||||
ensure_directory_permissions,
|
||||
get_config_dir_mode
|
||||
)
|
||||
config_path_obj = Path(self.config_path)
|
||||
ensure_directory_permissions(config_path_obj.parent, get_config_dir_mode())
|
||||
with open(self.config_path, 'w') as f:
|
||||
json.dump(self.layouts, f, indent=2)
|
||||
return True
|
||||
except Exception as e:
|
||||
logger.error(f"Error saving layouts: {e}")
|
||||
return False
|
||||
|
||||
def create_layout(self, name: str, elements: List[Dict], description: str = "") -> bool:
|
||||
"""Create a new layout."""
|
||||
try:
|
||||
self.layouts[name] = {
|
||||
'elements': elements,
|
||||
'description': description,
|
||||
'created': datetime.now().isoformat(),
|
||||
'modified': datetime.now().isoformat()
|
||||
}
|
||||
return self.save_layouts()
|
||||
except Exception as e:
|
||||
logger.error(f"Error creating layout '{name}': {e}")
|
||||
return False
|
||||
|
||||
def update_layout(self, name: str, elements: List[Dict], description: str = None) -> bool:
|
||||
"""Update an existing layout."""
|
||||
try:
|
||||
if name not in self.layouts:
|
||||
return False
|
||||
|
||||
self.layouts[name]['elements'] = elements
|
||||
self.layouts[name]['modified'] = datetime.now().isoformat()
|
||||
|
||||
if description is not None:
|
||||
self.layouts[name]['description'] = description
|
||||
|
||||
return self.save_layouts()
|
||||
except Exception as e:
|
||||
logger.error(f"Error updating layout '{name}': {e}")
|
||||
return False
|
||||
|
||||
def delete_layout(self, name: str) -> bool:
|
||||
"""Delete a layout."""
|
||||
try:
|
||||
if name in self.layouts:
|
||||
del self.layouts[name]
|
||||
return self.save_layouts()
|
||||
return False
|
||||
except Exception as e:
|
||||
logger.error(f"Error deleting layout '{name}': {e}")
|
||||
return False
|
||||
|
||||
def get_layout(self, name: str) -> Dict[str, Any]:
|
||||
"""Get a specific layout."""
|
||||
return self.layouts.get(name, {})
|
||||
|
||||
def list_layouts(self) -> List[str]:
|
||||
"""Get list of all layout names."""
|
||||
return list(self.layouts.keys())
|
||||
|
||||
def set_current_layout(self, name: str) -> bool:
|
||||
"""Set the current active layout."""
|
||||
if name in self.layouts:
|
||||
self.current_layout = name
|
||||
return True
|
||||
return False
|
||||
|
||||
def render_layout(self, layout_name: str = None, data_context: Dict = None) -> bool:
|
||||
"""Render a layout to the display."""
|
||||
if not self.display_manager:
|
||||
logger.error("No display manager available")
|
||||
return False
|
||||
|
||||
layout_name = layout_name or self.current_layout
|
||||
if not layout_name or layout_name not in self.layouts:
|
||||
logger.error(f"Layout '{layout_name}' not found")
|
||||
return False
|
||||
|
||||
try:
|
||||
# Clear the display
|
||||
self.display_manager.clear()
|
||||
|
||||
# Get layout elements
|
||||
elements = self.layouts[layout_name]['elements']
|
||||
|
||||
# Render each element
|
||||
for element in elements:
|
||||
self.render_element(element, data_context or {})
|
||||
|
||||
# Update the display
|
||||
self.display_manager.update_display()
|
||||
return True
|
||||
|
||||
except Exception as e:
|
||||
logger.error(f"Error rendering layout '{layout_name}': {e}")
|
||||
return False
|
||||
|
||||
def render_element(self, element: Dict, data_context: Dict) -> None:
|
||||
"""Render a single element."""
|
||||
element_type = element.get('type')
|
||||
x = element.get('x', 0)
|
||||
y = element.get('y', 0)
|
||||
properties = element.get('properties', {})
|
||||
|
||||
try:
|
||||
if element_type == 'text':
|
||||
self._render_text_element(x, y, properties, data_context)
|
||||
elif element_type == 'weather_icon':
|
||||
self._render_weather_icon_element(x, y, properties, data_context)
|
||||
elif element_type == 'rectangle':
|
||||
self._render_rectangle_element(x, y, properties)
|
||||
elif element_type == 'line':
|
||||
self._render_line_element(x, y, properties)
|
||||
elif element_type == 'clock':
|
||||
self._render_clock_element(x, y, properties)
|
||||
elif element_type == 'data_text':
|
||||
self._render_data_text_element(x, y, properties, data_context)
|
||||
else:
|
||||
logger.warning(f"Unknown element type: {element_type}")
|
||||
|
||||
except Exception as e:
|
||||
logger.error(f"Error rendering element {element_type}: {e}")
|
||||
|
||||
def _render_text_element(self, x: int, y: int, properties: Dict, data_context: Dict) -> None:
|
||||
"""Render a text element."""
|
||||
text = properties.get('text', 'Sample Text')
|
||||
color = tuple(properties.get('color', [255, 255, 255]))
|
||||
font_size = properties.get('font_size', 'normal')
|
||||
|
||||
# Support template variables in text
|
||||
text = self._process_template_text(text, data_context)
|
||||
|
||||
# Select font
|
||||
if font_size == 'small':
|
||||
font = self.display_manager.small_font
|
||||
elif font_size == 'large':
|
||||
font = self.display_manager.regular_font
|
||||
else:
|
||||
font = self.display_manager.regular_font
|
||||
|
||||
self.display_manager.draw_text(text, x, y, color, font=font)
|
||||
|
||||
def _render_weather_icon_element(self, x: int, y: int, properties: Dict, data_context: Dict) -> None:
|
||||
"""Render a weather icon element."""
|
||||
condition = properties.get('condition', 'sunny')
|
||||
size = properties.get('size', 16)
|
||||
|
||||
# Use weather data from context if available
|
||||
if 'weather' in data_context and 'condition' in data_context['weather']:
|
||||
condition = data_context['weather']['condition'].lower()
|
||||
|
||||
self.display_manager.draw_weather_icon(condition, x, y, size)
|
||||
|
||||
def _render_rectangle_element(self, x: int, y: int, properties: Dict) -> None:
|
||||
"""Render a rectangle element."""
|
||||
width = properties.get('width', 10)
|
||||
height = properties.get('height', 10)
|
||||
color = tuple(properties.get('color', [255, 255, 255]))
|
||||
filled = properties.get('filled', False)
|
||||
|
||||
if filled:
|
||||
self.display_manager.draw.rectangle(
|
||||
[x, y, x + width, y + height],
|
||||
fill=color
|
||||
)
|
||||
else:
|
||||
self.display_manager.draw.rectangle(
|
||||
[x, y, x + width, y + height],
|
||||
outline=color
|
||||
)
|
||||
|
||||
def _render_line_element(self, x: int, y: int, properties: Dict) -> None:
|
||||
"""Render a line element."""
|
||||
x2 = properties.get('x2', x + 10)
|
||||
y2 = properties.get('y2', y)
|
||||
color = tuple(properties.get('color', [255, 255, 255]))
|
||||
width = properties.get('width', 1)
|
||||
|
||||
self.display_manager.draw.line([x, y, x2, y2], fill=color, width=width)
|
||||
|
||||
def _render_clock_element(self, x: int, y: int, properties: Dict) -> None:
|
||||
"""Render a clock element."""
|
||||
format_str = properties.get('format', '%H:%M')
|
||||
color = tuple(properties.get('color', [255, 255, 255]))
|
||||
|
||||
current_time = datetime.now().strftime(format_str)
|
||||
self.display_manager.draw_text(current_time, x, y, color)
|
||||
|
||||
def _render_data_text_element(self, x: int, y: int, properties: Dict, data_context: Dict) -> None:
|
||||
"""Render a data-driven text element."""
|
||||
data_key = properties.get('data_key', '')
|
||||
format_str = properties.get('format', '{value}')
|
||||
color = tuple(properties.get('color', [255, 255, 255]))
|
||||
default_value = properties.get('default', 'N/A')
|
||||
|
||||
# Extract data from context
|
||||
value = self._get_nested_value(data_context, data_key, default_value)
|
||||
|
||||
# Format the text
|
||||
try:
|
||||
text = format_str.format(value=value)
|
||||
except (ValueError, TypeError, KeyError, IndexError):
|
||||
text = str(value)
|
||||
|
||||
self.display_manager.draw_text(text, x, y, color)
|
||||
|
||||
def _process_template_text(self, text: str, data_context: Dict) -> str:
|
||||
"""Process template variables in text."""
|
||||
try:
|
||||
# Simple template processing - replace {key} with values from context
|
||||
for key, value in data_context.items():
|
||||
placeholder = f"{{{key}}}"
|
||||
if placeholder in text:
|
||||
text = text.replace(placeholder, str(value))
|
||||
return text
|
||||
except Exception as e:
|
||||
logger.error(f"Error processing template text: {e}")
|
||||
return text
|
||||
|
||||
def _get_nested_value(self, data: Dict, key: str, default=None):
|
||||
"""Get a nested value from a dictionary using dot notation."""
|
||||
try:
|
||||
keys = key.split('.')
|
||||
value = data
|
||||
for k in keys:
|
||||
value = value[k]
|
||||
return value
|
||||
except (KeyError, TypeError):
|
||||
return default
|
||||
|
||||
def create_preset_layouts(self) -> None:
|
||||
"""Create some preset layouts for common use cases."""
|
||||
# Basic clock layout
|
||||
clock_layout = [
|
||||
{
|
||||
'type': 'clock',
|
||||
'x': 10,
|
||||
'y': 10,
|
||||
'properties': {
|
||||
'format': '%H:%M',
|
||||
'color': [255, 255, 255]
|
||||
}
|
||||
},
|
||||
{
|
||||
'type': 'clock',
|
||||
'x': 10,
|
||||
'y': 20,
|
||||
'properties': {
|
||||
'format': '%m/%d',
|
||||
'color': [100, 100, 255]
|
||||
}
|
||||
}
|
||||
]
|
||||
self.create_layout('basic_clock', clock_layout, 'Simple clock with date')
|
||||
|
||||
# Weather layout
|
||||
weather_layout = [
|
||||
{
|
||||
'type': 'weather_icon',
|
||||
'x': 5,
|
||||
'y': 5,
|
||||
'properties': {
|
||||
'condition': 'sunny',
|
||||
'size': 20
|
||||
}
|
||||
},
|
||||
{
|
||||
'type': 'data_text',
|
||||
'x': 30,
|
||||
'y': 8,
|
||||
'properties': {
|
||||
'data_key': 'weather.temperature',
|
||||
'format': '{value}°',
|
||||
'color': [255, 200, 0],
|
||||
'default': '--°'
|
||||
}
|
||||
},
|
||||
{
|
||||
'type': 'data_text',
|
||||
'x': 30,
|
||||
'y': 18,
|
||||
'properties': {
|
||||
'data_key': 'weather.condition',
|
||||
'format': '{value}',
|
||||
'color': [200, 200, 200],
|
||||
'default': 'Unknown'
|
||||
}
|
||||
}
|
||||
]
|
||||
self.create_layout('weather_display', weather_layout, 'Weather icon with temperature and condition')
|
||||
|
||||
# Mixed dashboard layout
|
||||
dashboard_layout = [
|
||||
{
|
||||
'type': 'clock',
|
||||
'x': 2,
|
||||
'y': 2,
|
||||
'properties': {
|
||||
'format': '%H:%M',
|
||||
'color': [255, 255, 255]
|
||||
}
|
||||
},
|
||||
{
|
||||
'type': 'weather_icon',
|
||||
'x': 50,
|
||||
'y': 2,
|
||||
'properties': {
|
||||
'size': 16
|
||||
}
|
||||
},
|
||||
{
|
||||
'type': 'data_text',
|
||||
'x': 70,
|
||||
'y': 5,
|
||||
'properties': {
|
||||
'data_key': 'weather.temperature',
|
||||
'format': '{value}°',
|
||||
'color': [255, 200, 0],
|
||||
'default': '--°'
|
||||
}
|
||||
},
|
||||
{
|
||||
'type': 'line',
|
||||
'x': 0,
|
||||
'y': 15,
|
||||
'properties': {
|
||||
'x2': 128,
|
||||
'y2': 15,
|
||||
'color': [100, 100, 100]
|
||||
}
|
||||
},
|
||||
{
|
||||
'type': 'data_text',
|
||||
'x': 2,
|
||||
'y': 18,
|
||||
'properties': {
|
||||
'data_key': 'stocks.AAPL.price',
|
||||
'format': 'AAPL: ${value}',
|
||||
'color': [0, 255, 0],
|
||||
'default': 'AAPL: N/A'
|
||||
}
|
||||
}
|
||||
]
|
||||
self.create_layout('dashboard', dashboard_layout, 'Mixed dashboard with clock, weather, and stocks')
|
||||
|
||||
logger.info("Created preset layouts")
|
||||
|
||||
def get_layout_preview(self, layout_name: str) -> Dict[str, Any]:
|
||||
"""Get a preview representation of a layout."""
|
||||
if layout_name not in self.layouts:
|
||||
return {}
|
||||
|
||||
layout = self.layouts[layout_name]
|
||||
elements = layout['elements']
|
||||
|
||||
# Create a simple preview representation
|
||||
preview = {
|
||||
'name': layout_name,
|
||||
'description': layout.get('description', ''),
|
||||
'element_count': len(elements),
|
||||
'elements': []
|
||||
}
|
||||
|
||||
for element in elements:
|
||||
preview['elements'].append({
|
||||
'type': element.get('type'),
|
||||
'position': f"({element.get('x', 0)}, {element.get('y', 0)})",
|
||||
'properties': list(element.get('properties', {}).keys())
|
||||
})
|
||||
|
||||
return preview
|
||||
@@ -1,392 +0,0 @@
|
||||
"""
|
||||
Tests for LayoutManager.
|
||||
|
||||
Tests layout creation, management, rendering, and element positioning.
|
||||
"""
|
||||
|
||||
import pytest
|
||||
import json
|
||||
from unittest.mock import MagicMock
|
||||
from src.layout_manager import LayoutManager
|
||||
|
||||
|
||||
class TestLayoutManager:
|
||||
"""Test LayoutManager functionality."""
|
||||
|
||||
@pytest.fixture
|
||||
def tmp_layout_file(self, tmp_path):
|
||||
"""Create a temporary layout file."""
|
||||
layout_file = tmp_path / "custom_layouts.json"
|
||||
return str(layout_file)
|
||||
|
||||
@pytest.fixture
|
||||
def mock_display_manager(self):
|
||||
"""Create a mock display manager."""
|
||||
dm = MagicMock()
|
||||
dm.clear = MagicMock()
|
||||
dm.update_display = MagicMock()
|
||||
dm.draw_text = MagicMock()
|
||||
dm.draw_weather_icon = MagicMock()
|
||||
dm.small_font = MagicMock()
|
||||
dm.regular_font = MagicMock()
|
||||
return dm
|
||||
|
||||
@pytest.fixture
|
||||
def layout_manager(self, tmp_layout_file, mock_display_manager):
|
||||
"""Create a LayoutManager instance."""
|
||||
return LayoutManager(
|
||||
display_manager=mock_display_manager,
|
||||
config_path=tmp_layout_file
|
||||
)
|
||||
|
||||
def test_init(self, tmp_layout_file, mock_display_manager):
|
||||
"""Test LayoutManager initialization."""
|
||||
lm = LayoutManager(
|
||||
display_manager=mock_display_manager,
|
||||
config_path=tmp_layout_file
|
||||
)
|
||||
|
||||
assert lm.display_manager == mock_display_manager
|
||||
assert lm.config_path == tmp_layout_file
|
||||
assert lm.layouts == {}
|
||||
assert lm.current_layout is None
|
||||
|
||||
def test_load_layouts_file_exists(self, tmp_path, mock_display_manager):
|
||||
"""Test loading layouts from existing file."""
|
||||
layout_file = tmp_path / "custom_layouts.json"
|
||||
layout_data = {
|
||||
"test_layout": {
|
||||
"elements": [{"type": "text", "x": 0, "y": 0}],
|
||||
"description": "Test layout"
|
||||
}
|
||||
}
|
||||
with open(layout_file, 'w') as f:
|
||||
json.dump(layout_data, f)
|
||||
|
||||
lm = LayoutManager(
|
||||
display_manager=mock_display_manager,
|
||||
config_path=str(layout_file)
|
||||
)
|
||||
|
||||
assert "test_layout" in lm.layouts
|
||||
assert lm.layouts["test_layout"]["description"] == "Test layout"
|
||||
|
||||
def test_load_layouts_file_not_exists(self, tmp_layout_file, mock_display_manager):
|
||||
"""Test loading layouts when file doesn't exist."""
|
||||
lm = LayoutManager(
|
||||
display_manager=mock_display_manager,
|
||||
config_path=tmp_layout_file
|
||||
)
|
||||
|
||||
assert lm.layouts == {}
|
||||
|
||||
def test_create_layout(self, layout_manager):
|
||||
"""Test creating a new layout."""
|
||||
elements = [{"type": "text", "x": 10, "y": 20, "properties": {"text": "Hello"}}]
|
||||
|
||||
result = layout_manager.create_layout("test_layout", elements, "Test description")
|
||||
|
||||
assert result is True
|
||||
assert "test_layout" in layout_manager.layouts
|
||||
assert layout_manager.layouts["test_layout"]["elements"] == elements
|
||||
assert layout_manager.layouts["test_layout"]["description"] == "Test description"
|
||||
assert "created" in layout_manager.layouts["test_layout"]
|
||||
assert "modified" in layout_manager.layouts["test_layout"]
|
||||
|
||||
def test_update_layout(self, layout_manager):
|
||||
"""Test updating an existing layout."""
|
||||
# Create a layout first
|
||||
elements1 = [{"type": "text", "x": 0, "y": 0}]
|
||||
layout_manager.create_layout("test_layout", elements1, "Original")
|
||||
|
||||
# Update it
|
||||
elements2 = [{"type": "text", "x": 10, "y": 20}]
|
||||
result = layout_manager.update_layout("test_layout", elements2, "Updated")
|
||||
|
||||
assert result is True
|
||||
assert layout_manager.layouts["test_layout"]["elements"] == elements2
|
||||
assert layout_manager.layouts["test_layout"]["description"] == "Updated"
|
||||
assert "modified" in layout_manager.layouts["test_layout"]
|
||||
|
||||
def test_update_layout_not_exists(self, layout_manager):
|
||||
"""Test updating a non-existent layout."""
|
||||
elements = [{"type": "text", "x": 0, "y": 0}]
|
||||
result = layout_manager.update_layout("nonexistent", elements)
|
||||
|
||||
assert result is False
|
||||
|
||||
def test_delete_layout(self, layout_manager):
|
||||
"""Test deleting a layout."""
|
||||
elements = [{"type": "text", "x": 0, "y": 0}]
|
||||
layout_manager.create_layout("test_layout", elements)
|
||||
|
||||
result = layout_manager.delete_layout("test_layout")
|
||||
|
||||
assert result is True
|
||||
assert "test_layout" not in layout_manager.layouts
|
||||
|
||||
def test_delete_layout_not_exists(self, layout_manager):
|
||||
"""Test deleting a non-existent layout."""
|
||||
result = layout_manager.delete_layout("nonexistent")
|
||||
|
||||
assert result is False
|
||||
|
||||
def test_get_layout(self, layout_manager):
|
||||
"""Test getting a specific layout."""
|
||||
elements = [{"type": "text", "x": 0, "y": 0}]
|
||||
layout_manager.create_layout("test_layout", elements)
|
||||
|
||||
layout = layout_manager.get_layout("test_layout")
|
||||
|
||||
assert layout is not None
|
||||
assert layout["elements"] == elements
|
||||
|
||||
def test_get_layout_not_exists(self, layout_manager):
|
||||
"""Test getting a non-existent layout."""
|
||||
layout = layout_manager.get_layout("nonexistent")
|
||||
|
||||
assert layout == {}
|
||||
|
||||
def test_list_layouts(self, layout_manager):
|
||||
"""Test listing all layouts."""
|
||||
layout_manager.create_layout("layout1", [])
|
||||
layout_manager.create_layout("layout2", [])
|
||||
layout_manager.create_layout("layout3", [])
|
||||
|
||||
layouts = layout_manager.list_layouts()
|
||||
|
||||
assert len(layouts) == 3
|
||||
assert "layout1" in layouts
|
||||
assert "layout2" in layouts
|
||||
assert "layout3" in layouts
|
||||
|
||||
def test_set_current_layout(self, layout_manager):
|
||||
"""Test setting the current layout."""
|
||||
layout_manager.create_layout("test_layout", [])
|
||||
|
||||
result = layout_manager.set_current_layout("test_layout")
|
||||
|
||||
assert result is True
|
||||
assert layout_manager.current_layout == "test_layout"
|
||||
|
||||
def test_set_current_layout_not_exists(self, layout_manager):
|
||||
"""Test setting a non-existent layout as current."""
|
||||
result = layout_manager.set_current_layout("nonexistent")
|
||||
|
||||
assert result is False
|
||||
assert layout_manager.current_layout is None
|
||||
|
||||
def test_render_layout(self, layout_manager, mock_display_manager):
|
||||
"""Test rendering a layout."""
|
||||
elements = [
|
||||
{"type": "text", "x": 0, "y": 0, "properties": {"text": "Hello"}},
|
||||
{"type": "text", "x": 10, "y": 10, "properties": {"text": "World"}}
|
||||
]
|
||||
layout_manager.create_layout("test_layout", elements)
|
||||
|
||||
result = layout_manager.render_layout("test_layout")
|
||||
|
||||
assert result is True
|
||||
mock_display_manager.clear.assert_called_once()
|
||||
mock_display_manager.update_display.assert_called_once()
|
||||
assert mock_display_manager.draw_text.call_count == 2
|
||||
|
||||
def test_render_layout_no_display_manager(self, tmp_layout_file):
|
||||
"""Test rendering without display manager."""
|
||||
lm = LayoutManager(display_manager=None, config_path=tmp_layout_file)
|
||||
lm.create_layout("test_layout", [])
|
||||
|
||||
result = lm.render_layout("test_layout")
|
||||
|
||||
assert result is False
|
||||
|
||||
def test_render_layout_not_exists(self, layout_manager):
|
||||
"""Test rendering a non-existent layout."""
|
||||
result = layout_manager.render_layout("nonexistent")
|
||||
|
||||
assert result is False
|
||||
|
||||
def test_render_element_text(self, layout_manager, mock_display_manager):
|
||||
"""Test rendering a text element."""
|
||||
element = {
|
||||
"type": "text",
|
||||
"x": 10,
|
||||
"y": 20,
|
||||
"properties": {
|
||||
"text": "Hello",
|
||||
"color": [255, 0, 0],
|
||||
"font_size": "small"
|
||||
}
|
||||
}
|
||||
|
||||
layout_manager.render_element(element, {})
|
||||
|
||||
mock_display_manager.draw_text.assert_called_once()
|
||||
call_args = mock_display_manager.draw_text.call_args
|
||||
assert call_args[0][0] == "Hello" # text
|
||||
assert call_args[0][1] == 10 # x
|
||||
assert call_args[0][2] == 20 # y
|
||||
|
||||
def test_render_element_weather_icon(self, layout_manager, mock_display_manager):
|
||||
"""Test rendering a weather icon element."""
|
||||
element = {
|
||||
"type": "weather_icon",
|
||||
"x": 10,
|
||||
"y": 20,
|
||||
"properties": {
|
||||
"condition": "sunny",
|
||||
"size": 16
|
||||
}
|
||||
}
|
||||
|
||||
layout_manager.render_element(element, {})
|
||||
|
||||
mock_display_manager.draw_weather_icon.assert_called_once_with("sunny", 10, 20, 16)
|
||||
|
||||
def test_render_element_weather_icon_from_context(self, layout_manager, mock_display_manager):
|
||||
"""Test rendering weather icon with data from context."""
|
||||
element = {
|
||||
"type": "weather_icon",
|
||||
"x": 10,
|
||||
"y": 20,
|
||||
"properties": {"size": 16}
|
||||
}
|
||||
data_context = {
|
||||
"weather": {
|
||||
"condition": "cloudy"
|
||||
}
|
||||
}
|
||||
|
||||
layout_manager.render_element(element, data_context)
|
||||
|
||||
mock_display_manager.draw_weather_icon.assert_called_once_with("cloudy", 10, 20, 16)
|
||||
|
||||
def test_render_element_rectangle(self, layout_manager, mock_display_manager):
|
||||
"""Test rendering a rectangle element."""
|
||||
element = {
|
||||
"type": "rectangle",
|
||||
"x": 10,
|
||||
"y": 20,
|
||||
"properties": {
|
||||
"width": 50,
|
||||
"height": 30,
|
||||
"color": [255, 0, 0],
|
||||
"filled": True
|
||||
}
|
||||
}
|
||||
|
||||
# Mock the draw object and rectangle method
|
||||
mock_draw = MagicMock()
|
||||
mock_display_manager.draw = mock_draw
|
||||
|
||||
layout_manager.render_element(element, {})
|
||||
|
||||
# Verify rectangle was drawn
|
||||
mock_draw.rectangle.assert_called_once()
|
||||
|
||||
def test_render_element_unknown_type(self, layout_manager):
|
||||
"""Test rendering an unknown element type."""
|
||||
element = {
|
||||
"type": "unknown_type",
|
||||
"x": 0,
|
||||
"y": 0,
|
||||
"properties": {}
|
||||
}
|
||||
|
||||
# Should not raise an exception
|
||||
layout_manager.render_element(element, {})
|
||||
|
||||
def test_process_template_text(self, layout_manager):
|
||||
"""Test template text processing."""
|
||||
text = "Hello {name}, temperature is {temp}°F"
|
||||
data_context = {
|
||||
"name": "World",
|
||||
"temp": 72
|
||||
}
|
||||
|
||||
result = layout_manager._process_template_text(text, data_context)
|
||||
|
||||
assert result == "Hello World, temperature is 72°F"
|
||||
|
||||
def test_process_template_text_no_context(self, layout_manager):
|
||||
"""Test template text with missing context."""
|
||||
text = "Hello {name}"
|
||||
data_context = {}
|
||||
|
||||
result = layout_manager._process_template_text(text, data_context)
|
||||
|
||||
# Should leave template as-is or handle gracefully
|
||||
assert "{name}" in result or result == "Hello "
|
||||
|
||||
def test_save_layouts_error_handling(self, layout_manager):
|
||||
"""Test error handling when saving layouts."""
|
||||
# Create a layout
|
||||
layout_manager.create_layout("test", [])
|
||||
|
||||
# Make save fail by using invalid path
|
||||
layout_manager.config_path = "/nonexistent/directory/layouts.json"
|
||||
|
||||
result = layout_manager.save_layouts()
|
||||
|
||||
# Should handle error gracefully
|
||||
assert result is False
|
||||
|
||||
def test_render_element_line(self, layout_manager, mock_display_manager):
|
||||
"""Test rendering a line element."""
|
||||
element = {
|
||||
"type": "line",
|
||||
"x": 10,
|
||||
"y": 20,
|
||||
"properties": {
|
||||
"x2": 50,
|
||||
"y2": 30,
|
||||
"color": [255, 0, 0],
|
||||
"width": 2
|
||||
}
|
||||
}
|
||||
|
||||
mock_draw = MagicMock()
|
||||
mock_display_manager.draw = mock_draw
|
||||
|
||||
layout_manager.render_element(element, {})
|
||||
|
||||
mock_draw.line.assert_called_once()
|
||||
|
||||
def test_render_element_clock(self, layout_manager, mock_display_manager):
|
||||
"""Test rendering a clock element."""
|
||||
element = {
|
||||
"type": "clock",
|
||||
"x": 10,
|
||||
"y": 20,
|
||||
"properties": {
|
||||
"format": "%H:%M",
|
||||
"color": [255, 255, 255]
|
||||
}
|
||||
}
|
||||
|
||||
layout_manager.render_element(element, {})
|
||||
|
||||
mock_display_manager.draw_text.assert_called_once()
|
||||
|
||||
def test_render_element_data_text(self, layout_manager, mock_display_manager):
|
||||
"""Test rendering a data text element."""
|
||||
element = {
|
||||
"type": "data_text",
|
||||
"x": 10,
|
||||
"y": 20,
|
||||
"properties": {
|
||||
"data_key": "weather.temperature",
|
||||
"format": "Temp: {value}°F",
|
||||
"color": [255, 255, 255],
|
||||
"default": "N/A"
|
||||
}
|
||||
}
|
||||
data_context = {
|
||||
"weather": {
|
||||
"temperature": 72
|
||||
}
|
||||
}
|
||||
|
||||
layout_manager.render_element(element, data_context)
|
||||
|
||||
mock_display_manager.draw_text.assert_called_once()
|
||||
@@ -0,0 +1,184 @@
|
||||
"""
|
||||
Web-UI smoke tests: every page, partial, and critical static asset must render.
|
||||
|
||||
These boot the pages blueprint with the same dual registration app.py uses
|
||||
(un-prefixed primary + /v3 legacy alias) and assert each surface returns 200
|
||||
with its load-bearing markers present. They exist to catch, in CI, the class
|
||||
of regression that only shows up when a real request renders a real template:
|
||||
a broken partial, a missing tab wiring, a renamed element id that JS depends
|
||||
on, or a static asset that stopped being served.
|
||||
"""
|
||||
|
||||
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))
|
||||
|
||||
|
||||
SMOKE_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"},
|
||||
"clock": {"enabled": True},
|
||||
"ledmatrix-weather": {"enabled": True},
|
||||
"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": {"stale_saved_mode": 45},
|
||||
"plugin_rotation_order": ["ledmatrix-weather", "clock"],
|
||||
},
|
||||
}
|
||||
|
||||
PLUGIN_MODES = {
|
||||
"clock": ["clock"],
|
||||
"ledmatrix-weather": ["weather_current", "weather_daily"],
|
||||
}
|
||||
|
||||
|
||||
@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
|
||||
|
||||
# pages_v3 is a module-level Blueprint singleton shared by the whole test
|
||||
# process (test_web_settings_ui.py mutates the same attributes) - save
|
||||
# the originals and restore them on teardown so this fixture can't leak
|
||||
# its mocks into tests that run afterward.
|
||||
original_config_manager = getattr(pv.pages_v3, "config_manager", None)
|
||||
original_plugin_manager = getattr(pv.pages_v3, "plugin_manager", None)
|
||||
|
||||
mock_cm = MagicMock()
|
||||
mock_cm.load_config.return_value = SMOKE_CONFIG
|
||||
mock_cm.get_raw_file_content.return_value = SMOKE_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
|
||||
|
||||
mock_pm = MagicMock()
|
||||
mock_pm.plugins = {}
|
||||
mock_pm.get_all_plugin_info.return_value = [
|
||||
{"id": "clock", "name": "Clock"},
|
||||
{"id": "ledmatrix-weather", "name": "Weather"},
|
||||
]
|
||||
mock_pm.get_plugin_display_modes.side_effect = (
|
||||
lambda pid: PLUGIN_MODES.get(pid, [])
|
||||
)
|
||||
pv.pages_v3.plugin_manager = mock_pm
|
||||
|
||||
# Same dual registration as web_interface/app.py: un-prefixed primary,
|
||||
# /v3 kept as a working legacy alias.
|
||||
app.register_blueprint(pv.pages_v3, url_prefix="")
|
||||
app.register_blueprint(pv.pages_v3, url_prefix="/v3", name="pages_v3_legacy")
|
||||
try:
|
||||
yield app.test_client()
|
||||
finally:
|
||||
pv.pages_v3.config_manager = original_config_manager
|
||||
pv.pages_v3.plugin_manager = original_plugin_manager
|
||||
|
||||
|
||||
# (path, [markers that must appear in the body])
|
||||
PAGES = [
|
||||
("/", ["site-nav", "mobileNavOpen", 'rel="manifest"',
|
||||
"restart-pending-banner", "activeTab = 'durations'"]),
|
||||
("/partials/overview", ["getting-started-card", "displayImage"]),
|
||||
("/partials/general", ["timezone"]),
|
||||
("/partials/display", ["display-section-advanced-hardware",
|
||||
"display-resolution-value", "vegas_scroll_label"]),
|
||||
("/partials/durations", ["rotation_plugin_order", "duration__clock",
|
||||
"duration__weather_current",
|
||||
"duration__stale_saved_mode"]),
|
||||
("/partials/schedule", ["schedule"]),
|
||||
]
|
||||
|
||||
|
||||
@pytest.mark.parametrize("path,markers", PAGES, ids=[p for p, _ in PAGES])
|
||||
def test_page_renders_with_markers(client, path, markers):
|
||||
resp = client.get(path)
|
||||
assert resp.status_code == 200, f"{path} -> {resp.status_code}"
|
||||
body = resp.get_data(as_text=True)
|
||||
for marker in markers:
|
||||
assert marker in body, f"{path}: missing marker {marker!r}"
|
||||
|
||||
|
||||
@pytest.mark.parametrize("path", [p for p, _ in PAGES if p != "/"])
|
||||
def test_legacy_v3_alias_serves_the_same_partials(client, path):
|
||||
assert client.get("/v3" + path).status_code == 200
|
||||
|
||||
|
||||
STATIC_ASSETS = [
|
||||
"/static/v3/app.css",
|
||||
"/static/v3/app.js",
|
||||
"/static/v3/manifest.json",
|
||||
"/static/v3/icons/icon-192.png",
|
||||
"/static/v3/js/app-shell.js",
|
||||
"/static/v3/js/app-early.js",
|
||||
"/static/v3/js/htmx-config.js",
|
||||
"/static/v3/js/widgets/plugin-order-list.js",
|
||||
"/static/v3/js/widgets/notification.js",
|
||||
"/static/v3/vendor/fontawesome/css/all.min.css",
|
||||
"/static/v3/vendor/codemirror/codemirror.min.js",
|
||||
]
|
||||
|
||||
|
||||
@pytest.mark.parametrize("asset", STATIC_ASSETS)
|
||||
def test_static_asset_served(client, asset):
|
||||
resp = client.get(asset)
|
||||
assert resp.status_code == 200, f"{asset} -> {resp.status_code}"
|
||||
assert len(resp.data) > 0
|
||||
|
||||
|
||||
def test_durations_page_groups_by_plugin(client):
|
||||
"""One duration input per display mode of each enabled plugin, plus the
|
||||
leftover group for saved keys no enabled plugin owns."""
|
||||
body = client.get("/partials/durations").get_data(as_text=True)
|
||||
assert body.count("duration__") >= 2 * len(
|
||||
[m for modes in PLUGIN_MODES.values() for m in modes]
|
||||
) # each mode: id= and name=
|
||||
assert "Other saved entries" in body
|
||||
|
||||
|
||||
def test_display_advanced_section_contains_tuning_fields(client):
|
||||
body = client.get("/partials/display").get_data(as_text=True)
|
||||
adv = body.find('id="display-section-advanced-hardware"')
|
||||
adv_close = body.find("/#display-section-advanced-hardware")
|
||||
assert 0 < adv < adv_close
|
||||
for field in ["multiplexing", "pwm_bits", "inverse_colors"]:
|
||||
pos = body.find(f'name="{field}"')
|
||||
assert adv < pos < adv_close, f"{field} not inside the advanced section"
|
||||
@@ -0,0 +1,85 @@
|
||||
"""
|
||||
Static-analysis audits for the web UI, as tests so CI enforces them.
|
||||
|
||||
1. Breakpoint utility audit: app.css hand-maintains a Tailwind-style utility
|
||||
subset, so a template can reference a responsive class (e.g. sm:block)
|
||||
that no CSS rule defines — it silently no-ops. This once left the header
|
||||
search box and system stats invisible at every screen width. The audit
|
||||
diffs classes used in templates against classes defined in app.css.
|
||||
|
||||
2. Asset reference audit: every url_for('static', filename=...) in the
|
||||
templates must point to a file that exists, so a renamed/moved asset
|
||||
can't ship as a broken <script>/<link>/<img>.
|
||||
|
||||
3. debugLog globals audit: any static JS file calling debugLog() (a global
|
||||
defined in base.html) must declare it in a /* global */ header so linting
|
||||
stays clean and the dependency is explicit.
|
||||
"""
|
||||
|
||||
import re
|
||||
from pathlib import Path
|
||||
|
||||
PROJECT_ROOT = Path(__file__).parent.parent
|
||||
WEB = PROJECT_ROOT / "web_interface"
|
||||
TEMPLATES = WEB / "templates"
|
||||
STATIC = WEB / "static"
|
||||
APP_CSS = STATIC / "v3" / "app.css"
|
||||
|
||||
BP_PREFIXES = ("sm", "md", "lg", "xl", "2xl")
|
||||
|
||||
|
||||
def _template_files():
|
||||
return sorted(TEMPLATES.rglob("*.html"))
|
||||
|
||||
|
||||
def test_every_used_breakpoint_class_is_defined():
|
||||
used = set()
|
||||
class_attr = re.compile(r'class="([^"]*)"')
|
||||
bp_class = re.compile(r"\b(%s):[A-Za-z0-9_.-]+" % "|".join(BP_PREFIXES))
|
||||
for path in _template_files():
|
||||
for attr in class_attr.findall(path.read_text()):
|
||||
for m in bp_class.finditer(attr):
|
||||
used.add(m.group(0))
|
||||
|
||||
css = APP_CSS.read_text()
|
||||
defined = {
|
||||
m.group(0).lstrip(".").replace("\\:", ":")
|
||||
for m in re.finditer(
|
||||
r"\.(%s)\\:[A-Za-z0-9_-]+" % "|".join(BP_PREFIXES), css
|
||||
)
|
||||
}
|
||||
|
||||
missing = sorted(used - defined)
|
||||
assert not missing, (
|
||||
"Responsive utility classes referenced in templates but never defined "
|
||||
f"in app.css (they silently no-op): {missing}"
|
||||
)
|
||||
|
||||
|
||||
def test_every_static_url_for_points_to_a_real_file():
|
||||
ref = re.compile(
|
||||
r"url_for\(\s*['\"]static['\"]\s*,\s*filename\s*=\s*['\"]([^'\"]+)['\"]"
|
||||
)
|
||||
missing = []
|
||||
for path in _template_files():
|
||||
for filename in ref.findall(path.read_text()):
|
||||
if not (STATIC / filename).is_file():
|
||||
missing.append(f"{path.relative_to(PROJECT_ROOT)}: {filename}")
|
||||
assert not missing, f"Templates reference missing static assets: {missing}"
|
||||
|
||||
|
||||
def test_js_files_calling_debuglog_declare_the_global():
|
||||
undeclared = []
|
||||
for path in sorted((STATIC / "v3").rglob("*.js")):
|
||||
if "vendor" in path.parts:
|
||||
continue
|
||||
text = path.read_text()
|
||||
# Calls debugLog( but neither defines it nor declares the global
|
||||
calls = re.search(r"(?<![.\w])debugLog\(", text)
|
||||
defines = "window.debugLog" in text
|
||||
declares = re.search(r"/\*\s*global[^*]*\bdebugLog\b", text)
|
||||
if calls and not defines and not declares:
|
||||
undeclared.append(str(path.relative_to(PROJECT_ROOT)))
|
||||
assert not undeclared, (
|
||||
f"JS files call debugLog() without a /* global debugLog */ header: {undeclared}"
|
||||
)
|
||||
+47
-27
@@ -59,6 +59,20 @@ except ImportError:
|
||||
# flask-limiter not installed, rate limiting disabled
|
||||
limiter = None
|
||||
|
||||
# Enable gzip/brotli response compression (Flask-Compress skips streaming
|
||||
# responses, so the SSE endpoints are unaffected). Optional, like limiter:
|
||||
# missing package just means uncompressed responses.
|
||||
try:
|
||||
from flask_compress import Compress
|
||||
|
||||
Compress(app)
|
||||
except ImportError:
|
||||
logging.getLogger(__name__).warning(
|
||||
"flask-compress not installed - responses will be served uncompressed. "
|
||||
"Install it with the Tools tab's 'Install Base Requirements' button or "
|
||||
"'pip install flask-compress'."
|
||||
)
|
||||
|
||||
# Import cache functions from separate module to avoid circular imports
|
||||
|
||||
# Initialize plugin managers - read plugins directory from config
|
||||
@@ -176,7 +190,12 @@ except Exception as _hm_err: # pragma: no cover - defensive startup guard
|
||||
"Could not enable plugin health/metrics for web UI: %s", _hm_err
|
||||
)
|
||||
|
||||
app.register_blueprint(pages_v3, url_prefix='/v3')
|
||||
# Pages are served un-prefixed (the interface lives at /); the /v3 mount is a
|
||||
# legacy alias kept so existing bookmarks and the hardcoded /v3/partials/...
|
||||
# fetches in templates/JS keep working unchanged. url_for('pages_v3.*')
|
||||
# resolves against the primary (un-prefixed) registration.
|
||||
app.register_blueprint(pages_v3, url_prefix='')
|
||||
app.register_blueprint(pages_v3, url_prefix='/v3', name='pages_v3_legacy')
|
||||
app.register_blueprint(api_v3, url_prefix='/api/v3')
|
||||
|
||||
# Route to serve plugin asset files (registered on main app, not blueprint, for /assets/... path)
|
||||
@@ -407,7 +426,11 @@ def captive_portal_redirect():
|
||||
|
||||
# List of paths that should NOT be redirected (allow normal operation)
|
||||
allowed_paths = [
|
||||
'/v3', # Main interface and all sub-paths (includes /v3/setup)
|
||||
'/v3', # Legacy-prefixed interface and all sub-paths
|
||||
'/setup', # Captive setup page itself (un-prefixed mount)
|
||||
'/partials/', # HTMX partials (un-prefixed mount)
|
||||
'/settings/', # Settings search index (un-prefixed mount)
|
||||
'/plugin-ui/', # Plugin-provided web UI assets (un-prefixed mount)
|
||||
'/api/v3/', # All API endpoints
|
||||
'/static/', # Static files (CSS, JS, images)
|
||||
'/hotspot-detect.html', # iOS/macOS detection
|
||||
@@ -606,8 +629,6 @@ def system_status_generator():
|
||||
def display_preview_generator():
|
||||
"""Generate display preview updates from snapshot file"""
|
||||
import base64
|
||||
from PIL import Image
|
||||
import io
|
||||
|
||||
snapshot_path = "/tmp/led_matrix_preview.png" # nosec B108 - fixed path matches display_manager; only read here
|
||||
# Viewer marker: this generator only runs while the broadcaster has
|
||||
@@ -649,24 +670,26 @@ def display_preview_generator():
|
||||
# Only read if file is new or has been updated
|
||||
if last_modified is None or current_modified > last_modified:
|
||||
try:
|
||||
# Read and encode the image
|
||||
with Image.open(snapshot_path) as img:
|
||||
# Convert to PNG and encode as base64
|
||||
buffer = io.BytesIO()
|
||||
img.save(buffer, format='PNG')
|
||||
img_str = base64.b64encode(buffer.getvalue()).decode('utf-8')
|
||||
|
||||
preview_data = {
|
||||
'timestamp': time.time(),
|
||||
'width': width,
|
||||
'height': height,
|
||||
'image': img_str
|
||||
}
|
||||
last_modified = current_modified
|
||||
yield preview_data
|
||||
except Exception: # nosec B110 - SSE preview file may be mid-write; transient error, skip this update
|
||||
# File might be being written, skip this update
|
||||
pass
|
||||
# The snapshot is already a PNG, written atomically by
|
||||
# the display service (tmp + os.replace in
|
||||
# display_manager), so pass the raw bytes straight
|
||||
# through instead of PIL-decoding and re-encoding —
|
||||
# identical payload, much less CPU on the Pi.
|
||||
with open(snapshot_path, 'rb') as f:
|
||||
img_str = base64.b64encode(f.read()).decode('utf-8')
|
||||
|
||||
preview_data = {
|
||||
'timestamp': time.time(),
|
||||
'width': width,
|
||||
'height': height,
|
||||
'image': img_str
|
||||
}
|
||||
last_modified = current_modified
|
||||
yield preview_data
|
||||
except OSError:
|
||||
# Transient filesystem race (file rotated/replaced
|
||||
# between mtime check and read); skip this update.
|
||||
app.logger.debug("Preview snapshot read failed; skipping frame", exc_info=True)
|
||||
else:
|
||||
# No snapshot available
|
||||
yield {
|
||||
@@ -799,11 +822,8 @@ if limiter:
|
||||
limiter.limit("200 per minute")(stream_display)
|
||||
limiter.limit("200 per minute")(stream_logs)
|
||||
|
||||
# Main route - redirect to v3 interface as default
|
||||
@app.route('/')
|
||||
def index():
|
||||
"""Redirect to v3 interface"""
|
||||
return redirect(url_for('pages_v3.index'))
|
||||
# The pages blueprint's index now serves '/' directly (see the un-prefixed
|
||||
# blueprint registration above), so no redirect route is needed here.
|
||||
|
||||
@app.route('/favicon.ico')
|
||||
def favicon():
|
||||
|
||||
@@ -961,8 +961,31 @@ def save_main_config():
|
||||
return jsonify({"status": "error", "message": "sync_follower_position must be left or right"}), 400
|
||||
current_config["sync"]["follower_position"] = pos_val
|
||||
|
||||
# Handle display durations
|
||||
duration_fields = [k for k in data.keys() if k.endswith('_duration') or k in ['default_duration', 'transition_duration']]
|
||||
# Handle primary rotation order: must be a JSON array of plugin-id
|
||||
# strings. Reject anything else with a 400 rather than silently
|
||||
# coercing, so a buggy client can't clear or corrupt the saved order.
|
||||
if 'plugin_rotation_order' in data:
|
||||
raw_order = data.pop('plugin_rotation_order')
|
||||
try:
|
||||
parsed = json.loads(raw_order) if isinstance(raw_order, str) else raw_order
|
||||
except (json.JSONDecodeError, TypeError, ValueError):
|
||||
return jsonify({'status': 'error',
|
||||
'message': 'plugin_rotation_order must be valid JSON'}), 400
|
||||
if not isinstance(parsed, list) or not all(isinstance(p, str) for p in parsed):
|
||||
return jsonify({'status': 'error',
|
||||
'message': 'plugin_rotation_order must be a list of plugin-id strings'}), 400
|
||||
if 'display' not in current_config:
|
||||
current_config['display'] = {}
|
||||
current_config['display']['plugin_rotation_order'] = parsed
|
||||
|
||||
# Handle display durations. Popped from `data` (not just read) so
|
||||
# they can never also fall through to the generic "remaining keys"
|
||||
# merge near the end of this function, which would otherwise write
|
||||
# them AGAIN as bogus top-level config keys (e.g. "clock_duration": 30
|
||||
# sitting at config root alongside the correct
|
||||
# display.display_durations.clock_duration).
|
||||
duration_fields = [k for k in list(data.keys())
|
||||
if k.endswith('_duration') or k in ('default_duration', 'transition_duration')]
|
||||
if duration_fields:
|
||||
if 'display' not in current_config:
|
||||
current_config['display'] = {}
|
||||
@@ -970,8 +993,36 @@ def save_main_config():
|
||||
current_config['display']['display_durations'] = {}
|
||||
|
||||
for field in duration_fields:
|
||||
if field in data:
|
||||
current_config['display']['display_durations'][field] = int(data[field])
|
||||
raw_value = data.pop(field)
|
||||
try:
|
||||
int_value = int(raw_value)
|
||||
except (ValueError, TypeError):
|
||||
return jsonify({'status': 'error',
|
||||
'message': f"Invalid duration for {field}: must be an integer"}), 400
|
||||
current_config['display']['display_durations'][field] = int_value
|
||||
|
||||
# Per-mode durations from the Rotation & Durations page, posted as
|
||||
# duration__<mode_key> (mode keys are arbitrary plugin mode names, so
|
||||
# they can't use the suffix convention above). Same pop-and-validate
|
||||
# treatment, for the same reason.
|
||||
mode_duration_fields = [k for k in list(data.keys()) if k.startswith('duration__')]
|
||||
if mode_duration_fields:
|
||||
if 'display' not in current_config:
|
||||
current_config['display'] = {}
|
||||
if 'display_durations' not in current_config['display']:
|
||||
current_config['display']['display_durations'] = {}
|
||||
|
||||
for field in mode_duration_fields:
|
||||
raw_value = data.pop(field)
|
||||
mode_key = field[len('duration__'):]
|
||||
if not mode_key:
|
||||
continue
|
||||
try:
|
||||
int_value = int(raw_value)
|
||||
except (ValueError, TypeError):
|
||||
return jsonify({'status': 'error',
|
||||
'message': f"Invalid duration for mode '{mode_key}': must be an integer"}), 400
|
||||
current_config['display']['display_durations'][mode_key] = int_value
|
||||
|
||||
# Handle plugin configurations dynamically
|
||||
# Any key that matches a plugin ID should be saved as plugin config
|
||||
@@ -1639,6 +1690,16 @@ def execute_system_action():
|
||||
except subprocess.TimeoutExpired:
|
||||
logger.warning("git stash timed out, proceeding with pull")
|
||||
|
||||
# Record HEAD before the pull so dependency changes can be detected
|
||||
old_head = None
|
||||
try:
|
||||
_pre = subprocess.run(['git', 'rev-parse', 'HEAD'],
|
||||
capture_output=True, text=True, timeout=10, cwd=project_dir)
|
||||
if _pre.returncode == 0:
|
||||
old_head = _pre.stdout.strip()
|
||||
except subprocess.TimeoutExpired:
|
||||
logger.warning("git rev-parse timed out before pull")
|
||||
|
||||
# Perform the git pull
|
||||
result = subprocess.run(
|
||||
['git', 'pull', '--rebase'],
|
||||
@@ -1655,6 +1716,54 @@ def execute_system_action():
|
||||
pull_message = f"Code updated successfully. Local changes were automatically stashed.{stash_info}"
|
||||
if result.stdout and "Already up to date" not in result.stdout:
|
||||
pull_message = f"Code updated successfully.{stash_info}"
|
||||
|
||||
# Keep Python dependencies in sync automatically: if the pull
|
||||
# changed a requirements file, install it now — users updating
|
||||
# from the web UI (most of them) never SSH in to pip install.
|
||||
# Installs go through the same root-visible path as the
|
||||
# Tools-tab buttons (_pip_install_requirements).
|
||||
dep_notes = []
|
||||
try:
|
||||
_post = subprocess.run(['git', 'rev-parse', 'HEAD'],
|
||||
capture_output=True, text=True, timeout=10, cwd=project_dir)
|
||||
new_head = _post.stdout.strip() if _post.returncode == 0 else None
|
||||
if old_head and new_head and old_head != new_head:
|
||||
diff = subprocess.run(
|
||||
['git', 'diff', '--name-only', f'{old_head}..{new_head}'],
|
||||
capture_output=True, text=True, timeout=15, cwd=project_dir)
|
||||
changed = set(diff.stdout.split()) if diff.returncode == 0 else set()
|
||||
for rel in ('requirements.txt', 'web_interface/requirements.txt'):
|
||||
req_path = PROJECT_ROOT / rel
|
||||
if rel not in changed or not req_path.exists():
|
||||
continue
|
||||
# Each file's install is isolated: a timeout or
|
||||
# OSError (e.g. the sudo wrapper/interpreter
|
||||
# missing) on one file must not abort the other.
|
||||
try:
|
||||
r = _pip_install_requirements(req_path, timeout=180)
|
||||
if r.returncode == 0:
|
||||
dep_notes.append(f"Dependencies from {rel} updated.")
|
||||
else:
|
||||
dep_notes.append(
|
||||
f"Dependency install from {rel} failed — "
|
||||
"run Install Base Requirements from the Tools tab.")
|
||||
logger.warning("post-update pip install failed for %s: %s",
|
||||
rel, _truncate_output(r.stdout, r.stderr))
|
||||
except subprocess.TimeoutExpired:
|
||||
dep_notes.append(
|
||||
f"Dependency install from {rel} timed out — "
|
||||
"run Install Base Requirements from the Tools tab.")
|
||||
logger.warning("post-update pip install timed out for %s", rel)
|
||||
except OSError as install_err:
|
||||
dep_notes.append(
|
||||
f"Dependency install from {rel} failed — "
|
||||
"run Install Base Requirements from the Tools tab.")
|
||||
logger.warning("post-update pip install errored for %s: %s",
|
||||
rel, install_err)
|
||||
except subprocess.TimeoutExpired:
|
||||
logger.warning("post-update dependency sync timed out")
|
||||
if dep_notes:
|
||||
pull_message += " " + " ".join(dep_notes)
|
||||
# A `git pull` restores built-in plugins (committed under
|
||||
# plugin-repos/) even if the user uninstalled them. Re-remove
|
||||
# any the user previously uninstalled so the update doesn't
|
||||
@@ -1685,14 +1794,36 @@ def execute_system_action():
|
||||
result = subprocess.run(['sudo', 'systemctl', 'restart', 'ledmatrix-web.service'],
|
||||
capture_output=True, text=True, timeout=10)
|
||||
elif action == 'install_base_requirements':
|
||||
req_file = PROJECT_ROOT / 'requirements.txt'
|
||||
if not req_file.exists():
|
||||
# Base + web interface requirements: flask-compress and friends
|
||||
# live in web_interface/requirements.txt, not the root file.
|
||||
req_files = [f for f in (PROJECT_ROOT / 'requirements.txt',
|
||||
PROJECT_ROOT / 'web_interface' / 'requirements.txt')
|
||||
if f.exists()]
|
||||
if not req_files:
|
||||
return jsonify({'status': 'error', 'message': 'No requirements.txt found at project root'})
|
||||
result = _pip_install_requirements(req_file, timeout=120)
|
||||
outputs = []
|
||||
all_ok = True
|
||||
for req_file in req_files:
|
||||
label = req_file.relative_to(PROJECT_ROOT)
|
||||
# Isolate each file's install: a timeout or OSError on one
|
||||
# (e.g. requirements.txt) must not abort the rest of the
|
||||
# loop (e.g. web_interface/requirements.txt never attempted).
|
||||
try:
|
||||
result = _pip_install_requirements(req_file, timeout=120)
|
||||
all_ok = all_ok and result.returncode == 0
|
||||
outputs.append(f"== {label} ==\n" + _truncate_output(result.stdout, result.stderr))
|
||||
except subprocess.TimeoutExpired:
|
||||
all_ok = False
|
||||
outputs.append(f"== {label} ==\nTimed out after 120s")
|
||||
logger.warning("install_base_requirements timed out for %s", label)
|
||||
except OSError as install_err:
|
||||
all_ok = False
|
||||
outputs.append(f"== {label} ==\nFailed: {install_err}")
|
||||
logger.warning("install_base_requirements errored for %s: %s", label, install_err)
|
||||
return jsonify({
|
||||
'status': 'success' if result.returncode == 0 else 'error',
|
||||
'message': 'Base requirements installed successfully' if result.returncode == 0 else 'pip install failed',
|
||||
'output': _truncate_output(result.stdout, result.stderr)
|
||||
'status': 'success' if all_ok else 'error',
|
||||
'message': 'Base requirements installed successfully' if all_ok else 'pip install failed',
|
||||
'output': "\n".join(outputs)
|
||||
})
|
||||
elif action == 'install_plugin_requirements':
|
||||
active_pm = getattr(api_v3, 'plugin_manager', None)
|
||||
|
||||
@@ -1,847 +0,0 @@
|
||||
"""
|
||||
Plugin Composer blueprint — drag-and-drop plugin builder for LEDMatrix.
|
||||
|
||||
Routes:
|
||||
GET /composer/ — Composer page
|
||||
POST /composer/api/generate — Generate and return plugin ZIP
|
||||
POST /composer/api/install — Write plugin directly to plugins_dir
|
||||
GET /composer/api/fonts/<name> — Serve TTF font files for canvas rendering
|
||||
GET /composer/api/validate-id/<id> — Check if a plugin ID is already taken
|
||||
"""
|
||||
import ast
|
||||
import io
|
||||
import json
|
||||
import logging
|
||||
import re
|
||||
import zipfile
|
||||
from datetime import datetime
|
||||
from pathlib import Path
|
||||
|
||||
import jinja2
|
||||
import jsonschema
|
||||
from flask import Blueprint, jsonify, render_template, request, send_file
|
||||
|
||||
logger = logging.getLogger(__name__)
|
||||
|
||||
composer_bp = Blueprint('composer', __name__)
|
||||
|
||||
# Module-level attributes injected by app.py at registration time
|
||||
composer_bp.config_manager = None
|
||||
composer_bp.plugin_manager = None
|
||||
composer_bp.plugins_dir = None
|
||||
composer_bp.project_root = None
|
||||
|
||||
# Fonts safe to serve to the browser for canvas rendering
|
||||
_ALLOWED_FONTS = frozenset({'PressStart2P-Regular.ttf', '4x6-font.ttf', '5by7.regular.ttf'})
|
||||
|
||||
# Map composer font keys → DisplayManager attribute names
|
||||
_FONT_ATTR_MAP = {
|
||||
'press_start': 'regular_font',
|
||||
'four_by_six': 'extra_small_font',
|
||||
'five_by_seven': 'bdf_5x7_font',
|
||||
}
|
||||
|
||||
# Font sizes in LED pixels (used to compute second-line Y offsets)
|
||||
_FONT_SIZE_MAP = {
|
||||
'press_start': 8,
|
||||
'four_by_six': 6,
|
||||
'five_by_seven': 7,
|
||||
}
|
||||
|
||||
_PLUGIN_ID_RE = re.compile(r'^[a-z][a-z0-9-]{0,62}$')
|
||||
_PYTHON_IDENT_RE = re.compile(r'^[a-zA-Z_][a-zA-Z0-9_]*$')
|
||||
|
||||
# ── Jinja2 environment (separate from Flask's; autoescape=False for code gen) ──
|
||||
|
||||
_jinja_env: jinja2.Environment | None = None
|
||||
|
||||
|
||||
def _get_jinja_env() -> jinja2.Environment:
|
||||
global _jinja_env
|
||||
if _jinja_env is None:
|
||||
template_dir = Path(__file__).parent.parent / 'templates' / 'v3' / 'composer'
|
||||
_jinja_env = jinja2.Environment(
|
||||
loader=jinja2.FileSystemLoader(str(template_dir)),
|
||||
autoescape=False,
|
||||
trim_blocks=True,
|
||||
lstrip_blocks=True,
|
||||
)
|
||||
_jinja_env.filters['as_rgb'] = _as_rgb_filter
|
||||
_jinja_env.filters['as_fill'] = _as_fill_filter
|
||||
return _jinja_env
|
||||
|
||||
|
||||
def _as_rgb_filter(val) -> str:
|
||||
"""[r, g, b] → '(r, g, b)'"""
|
||||
if val is None:
|
||||
return 'None'
|
||||
return f'({int(val[0])}, {int(val[1])}, {int(val[2])})'
|
||||
|
||||
|
||||
def _as_fill_filter(val) -> str:
|
||||
"""[r, g, b] or None → '(r, g, b)' or 'None'"""
|
||||
if val is None:
|
||||
return 'None'
|
||||
return _as_rgb_filter(val)
|
||||
|
||||
|
||||
# ── Helper functions ──────────────────────────────────────────────────────────
|
||||
|
||||
def _to_class_name(name: str) -> str:
|
||||
"""'My Clock' → 'MyClockPlugin' (avoids double-suffix if name already ends with Plugin)"""
|
||||
words = re.sub(r'[^a-zA-Z0-9]', ' ', name).split()
|
||||
base = ''.join(w.capitalize() for w in words)
|
||||
return base if base.endswith('Plugin') else base + 'Plugin'
|
||||
|
||||
|
||||
def _compute_pos_expr(val: int, anchor: str | None, dim_var: str) -> str:
|
||||
"""Produce a Python expression string for an anchored or fixed position.
|
||||
|
||||
anchor=None/'left'/'top' → fixed pixel value
|
||||
anchor='center' → dim_var // 2 ± offset
|
||||
anchor='right'/'bottom' → dim_var - offset
|
||||
"""
|
||||
if not anchor or anchor in ('left', 'top'):
|
||||
return str(val)
|
||||
if anchor in ('center', 'middle'):
|
||||
if val == 0:
|
||||
return f"{dim_var} // 2"
|
||||
return f"{dim_var} // 2 + {val}" if val > 0 else f"{dim_var} // 2 - {abs(val)}"
|
||||
if anchor in ('right', 'bottom'):
|
||||
return dim_var if val == 0 else f"{dim_var} - {val}"
|
||||
return str(val)
|
||||
|
||||
|
||||
# Character widths in LED pixels per font (for text-alignment x offset math)
|
||||
_FONT_CHAR_W = {
|
||||
'press_start': 8,
|
||||
'four_by_six': 4,
|
||||
'five_by_seven': 5,
|
||||
}
|
||||
|
||||
|
||||
def _aligned_x_expr(x_base_expr: str, text_align: str, char_count: int, char_w: int) -> str:
|
||||
"""Return Python x expression for text alignment.
|
||||
|
||||
left → x_base_expr (no change)
|
||||
center → x_base_expr - half_text_width
|
||||
right → x_base_expr - text_width
|
||||
"""
|
||||
if text_align == 'left' or not text_align:
|
||||
return x_base_expr
|
||||
text_px = char_count * char_w
|
||||
if text_align == 'center':
|
||||
offset = text_px // 2
|
||||
return f"({x_base_expr}) - {offset}" if offset else x_base_expr
|
||||
if text_align == 'right':
|
||||
return f"({x_base_expr}) - {text_px}" if text_px else x_base_expr
|
||||
return x_base_expr
|
||||
|
||||
|
||||
def _preprocess_elements(elements: list) -> list:
|
||||
"""Expand raw element dicts into template-ready dicts with anchor expressions.
|
||||
|
||||
Invisible elements (visible=False) are excluded from generated code entirely.
|
||||
"""
|
||||
result = []
|
||||
for el in elements:
|
||||
# Skip hidden elements — they exist only in the preview
|
||||
if el.get('visible') is False:
|
||||
continue
|
||||
|
||||
p = dict(el)
|
||||
t = el.get('type', '')
|
||||
|
||||
# Section elements are layer-list annotations only — no canvas output
|
||||
if t == 'section':
|
||||
continue
|
||||
|
||||
x_anchor = el.get('xAnchor') or None
|
||||
y_anchor = el.get('yAnchor') or None
|
||||
p['min_width'] = int(el.get('minWidth', 0) or 0)
|
||||
|
||||
if t in ('text', 'clock'):
|
||||
font_key = el.get('font', 'press_start')
|
||||
p['font_attr'] = _FONT_ATTR_MAP.get(font_key, 'regular_font')
|
||||
p['rgb_tuple'] = f"({el.get('r', 255)}, {el.get('g', 255)}, {el.get('b', 255)})"
|
||||
text_align = el.get('textAlign', 'left')
|
||||
raw_x = el.get('x', 0)
|
||||
x_base_expr = _compute_pos_expr(raw_x, x_anchor, 'width')
|
||||
p['y_expr'] = _compute_pos_expr(el.get('y', 0), y_anchor, 'height')
|
||||
font_size = _FONT_SIZE_MAP.get(font_key, 8)
|
||||
char_w = _FONT_CHAR_W.get(font_key, 8)
|
||||
line_spacing = int(el.get('lineSpacing', 2))
|
||||
y_expr = p['y_expr']
|
||||
p['y2_expr'] = f"({y_expr}) + {font_size + line_spacing}"
|
||||
if t == 'text':
|
||||
t1 = el.get('text', '') or ''
|
||||
t2 = el.get('text2', '') or ''
|
||||
p['text2'] = t2
|
||||
# Detect {variable} tokens — generate format_map() call instead of literal
|
||||
_var_re = re.compile(r'\{([a-zA-Z_]\w*)\}')
|
||||
p['text_is_template'] = bool(_var_re.search(t1) or _var_re.search(t2))
|
||||
ref_len = max(len(t1), len(t2)) if t2 else len(t1)
|
||||
p['x_expr'] = _aligned_x_expr(x_base_expr, text_align, ref_len, char_w)
|
||||
p['x2_expr'] = p['x_expr'] # second line uses same x
|
||||
else: # clock
|
||||
fmt1 = el.get('format', '%H:%M') or '%H:%M'
|
||||
fmt2 = el.get('format2', '') or ''
|
||||
p['format2'] = fmt2
|
||||
ref_len = max(len(fmt1), len(fmt2)) if fmt2 else len(fmt1)
|
||||
p['x_expr'] = _aligned_x_expr(x_base_expr, text_align, ref_len, char_w)
|
||||
p['x2_expr'] = p['x_expr']
|
||||
p['blink'] = bool(el.get('blink', False))
|
||||
|
||||
elif t == 'dynamic_text':
|
||||
binding = el.get('binding', {})
|
||||
p['binding_source'] = binding.get('source', 'config')
|
||||
p['binding_key'] = binding.get('key', '')
|
||||
p['binding_format'] = binding.get('format')
|
||||
font_key = el.get('font', 'press_start')
|
||||
p['font_attr'] = _FONT_ATTR_MAP.get(font_key, 'regular_font')
|
||||
p['rgb_tuple'] = f"({el.get('r', 255)}, {el.get('g', 200)}, {el.get('b', 100)})"
|
||||
x_base_expr = _compute_pos_expr(el.get('x', 0), x_anchor, 'width')
|
||||
p['x_expr'] = x_base_expr # dynamic text: runtime content determines width; use raw pos
|
||||
p['y_expr'] = _compute_pos_expr(el.get('y', 0), y_anchor, 'height')
|
||||
p['blink'] = bool(el.get('blink', False))
|
||||
|
||||
elif t == 'rectangle':
|
||||
x_expr = _compute_pos_expr(el.get('x', 0), x_anchor, 'width')
|
||||
y_expr = _compute_pos_expr(el.get('y', 0), y_anchor, 'height')
|
||||
w = el.get('width', 10)
|
||||
h = el.get('height', 8)
|
||||
p['x_expr'] = x_expr
|
||||
p['y_expr'] = y_expr
|
||||
# x2/y2 as runtime expressions to support anchored positions
|
||||
p['x2_expr'] = f"({x_expr}) + {w}"
|
||||
p['y2_expr'] = f"({y_expr}) + {h}"
|
||||
fill = (
|
||||
[el.get('fillR', 0), el.get('fillG', 0), el.get('fillB', 128)]
|
||||
if el.get('hasFill', True) else None
|
||||
)
|
||||
outline = (
|
||||
[el.get('outR', 255), el.get('outG', 255), el.get('outB', 255)]
|
||||
if el.get('hasOutline', True) else None
|
||||
)
|
||||
p['fill_tuple'] = _as_fill_filter(fill)
|
||||
p['outline_tuple'] = _as_fill_filter(outline)
|
||||
p['blink'] = bool(el.get('blink', False))
|
||||
|
||||
elif t in ('line', 'divider'):
|
||||
if t == 'divider':
|
||||
orient = el.get('orientation', 'horizontal')
|
||||
if orient == 'horizontal':
|
||||
y_val = el.get('y', 16)
|
||||
y_expr = _compute_pos_expr(y_val, y_anchor, 'height')
|
||||
p.update(x0_expr='0', y0_expr=y_expr, x1_expr='width - 1', y1_expr=y_expr)
|
||||
else:
|
||||
x_val = el.get('x', 64)
|
||||
x_expr = _compute_pos_expr(x_val, x_anchor, 'width')
|
||||
p.update(x0_expr=x_expr, y0_expr='0', x1_expr=x_expr, y1_expr='height - 1')
|
||||
else:
|
||||
p['x0_expr'] = _compute_pos_expr(el.get('x0', 0), x_anchor, 'width')
|
||||
p['y0_expr'] = _compute_pos_expr(el.get('y0', 0), y_anchor, 'height')
|
||||
p['x1_expr'] = str(el.get('x1', 127))
|
||||
p['y1_expr'] = str(el.get('y1', 0))
|
||||
p['rgb_tuple'] = f"({el.get('r', 180)}, {el.get('g', 180)}, {el.get('b', 180)})"
|
||||
p['line_width'] = el.get('lineWidth', 1)
|
||||
p['blink'] = bool(el.get('blink', False))
|
||||
|
||||
elif t == 'progress_bar':
|
||||
p['x_expr'] = _compute_pos_expr(el.get('x', 0), x_anchor, 'width')
|
||||
p['y_expr'] = _compute_pos_expr(el.get('y', 0), y_anchor, 'height')
|
||||
p['bar_width'] = int(el.get('barWidth', 40))
|
||||
p['bar_height'] = int(el.get('barHeight', 6))
|
||||
binding = el.get('binding', {})
|
||||
p['binding_key'] = binding.get('key', '')
|
||||
p['fill_tuple'] = f"({el.get('r', 100)}, {el.get('g', 200)}, {el.get('b', 100)})"
|
||||
bg = (
|
||||
[el.get('bgR', 30), el.get('bgG', 30), el.get('bgB', 30)]
|
||||
if el.get('hasBg', True) else None
|
||||
)
|
||||
outline = (
|
||||
[el.get('outR', 100), el.get('outG', 100), el.get('outB', 100)]
|
||||
if el.get('hasOutline', True) else None
|
||||
)
|
||||
p['bg_tuple'] = _as_fill_filter(bg)
|
||||
p['outline_tuple'] = _as_fill_filter(outline)
|
||||
p['blink'] = bool(el.get('blink', False))
|
||||
|
||||
elif t == 'arc':
|
||||
x_expr = _compute_pos_expr(el.get('x', 0), x_anchor, 'width')
|
||||
y_expr = _compute_pos_expr(el.get('y', 0), y_anchor, 'height')
|
||||
w = el.get('width', 24)
|
||||
h = el.get('height', 24)
|
||||
p['x_expr'] = x_expr
|
||||
p['y_expr'] = y_expr
|
||||
p['x2_expr'] = f"({x_expr}) + {w}"
|
||||
p['y2_expr'] = f"({y_expr}) + {h}"
|
||||
p['start_angle'] = int(el.get('startAngle', 0))
|
||||
p['end_angle'] = int(el.get('endAngle', 270))
|
||||
p['line_width'] = max(1, int(el.get('lineWidth', 2)))
|
||||
p['rgb_tuple'] = f"({el.get('r', 255)}, {el.get('g', 200)}, {el.get('b', 0)})"
|
||||
p['blink'] = bool(el.get('blink', False))
|
||||
|
||||
elif t == 'ellipse':
|
||||
x_expr = _compute_pos_expr(el.get('x', 0), x_anchor, 'width')
|
||||
y_expr = _compute_pos_expr(el.get('y', 0), y_anchor, 'height')
|
||||
w = el.get('width', 24)
|
||||
h = el.get('height', 12)
|
||||
p['x_expr'] = x_expr
|
||||
p['y_expr'] = y_expr
|
||||
p['x2_expr'] = f"({x_expr}) + {w}"
|
||||
p['y2_expr'] = f"({y_expr}) + {h}"
|
||||
fill = (
|
||||
[el.get('fillR', 0), el.get('fillG', 100), el.get('fillB', 200)]
|
||||
if el.get('hasFill', True) else None
|
||||
)
|
||||
outline = (
|
||||
[el.get('outR', 100), el.get('outG', 180), el.get('outB', 255)]
|
||||
if el.get('hasOutline', True) else None
|
||||
)
|
||||
p['fill_tuple'] = _as_fill_filter(fill)
|
||||
p['outline_tuple'] = _as_fill_filter(outline)
|
||||
p['blink'] = bool(el.get('blink', False))
|
||||
|
||||
elif t == 'pixel':
|
||||
p['x_expr'] = _compute_pos_expr(el.get('x', 0), x_anchor, 'width')
|
||||
p['y_expr'] = _compute_pos_expr(el.get('y', 0), y_anchor, 'height')
|
||||
p['rgb_tuple'] = f"({el.get('r', 255)}, {el.get('g', 255)}, {el.get('b', 255)})"
|
||||
p['blink'] = bool(el.get('blink', False))
|
||||
|
||||
elif t == 'rounded_rectangle':
|
||||
x_expr = _compute_pos_expr(el.get('x', 0), x_anchor, 'width')
|
||||
y_expr = _compute_pos_expr(el.get('y', 0), y_anchor, 'height')
|
||||
w = el.get('width', 24)
|
||||
h = el.get('height', 10)
|
||||
p['x_expr'] = x_expr
|
||||
p['y_expr'] = y_expr
|
||||
p['x2_expr'] = f"({x_expr}) + {w}"
|
||||
p['y2_expr'] = f"({y_expr}) + {h}"
|
||||
p['border_radius'] = int(el.get('borderRadius', 3))
|
||||
fill = (
|
||||
[el.get('fillR', 0), el.get('fillG', 80), el.get('fillB', 180)]
|
||||
if el.get('hasFill', True) else None
|
||||
)
|
||||
outline = (
|
||||
[el.get('outR', 120), el.get('outG', 180), el.get('outB', 255)]
|
||||
if el.get('hasOutline', True) else None
|
||||
)
|
||||
p['fill_tuple'] = _as_fill_filter(fill)
|
||||
p['outline_tuple'] = _as_fill_filter(outline)
|
||||
p['blink'] = bool(el.get('blink', False))
|
||||
|
||||
elif t == 'countdown':
|
||||
font_key = el.get('font', 'four_by_six')
|
||||
p['font_attr'] = _FONT_ATTR_MAP.get(font_key, 'extra_small_font')
|
||||
p['rgb_tuple'] = f"({el.get('r', 255)}, {el.get('g', 180)}, {el.get('b', 0)})"
|
||||
binding = el.get('binding', {})
|
||||
p['binding_key'] = binding.get('key', '')
|
||||
p['countdown_format'] = el.get('countdownFormat', 'dh')
|
||||
x_base_expr = _compute_pos_expr(el.get('x', 0), x_anchor, 'width')
|
||||
p['x_expr'] = x_base_expr
|
||||
p['y_expr'] = _compute_pos_expr(el.get('y', 0), y_anchor, 'height')
|
||||
p['blink'] = bool(el.get('blink', False))
|
||||
|
||||
elif t == 'pips':
|
||||
p['x_expr'] = _compute_pos_expr(el.get('x', 0), x_anchor, 'width')
|
||||
p['y_expr'] = _compute_pos_expr(el.get('y', 0), y_anchor, 'height')
|
||||
p['pip_count'] = max(1, int(el.get('count', 5)))
|
||||
p['pip_size'] = max(1, int(el.get('pipSize', 4)))
|
||||
p['pip_spacing'] = max(0, int(el.get('pipSpacing', 2)))
|
||||
p['show_empty'] = bool(el.get('showEmpty', True))
|
||||
binding = el.get('binding', {})
|
||||
p['binding_key'] = binding.get('key', '')
|
||||
p['fill_tuple'] = f"({el.get('r', 255)}, {el.get('g', 200)}, {el.get('b', 0)})"
|
||||
p['empty_tuple'] = f"({el.get('emptyR', 50)}, {el.get('emptyG', 50)}, {el.get('emptyB', 50)})"
|
||||
p['blink'] = bool(el.get('blink', False))
|
||||
|
||||
elif t == 'sparkline':
|
||||
x_expr = _compute_pos_expr(el.get('x', 0), x_anchor, 'width')
|
||||
y_expr = _compute_pos_expr(el.get('y', 0), y_anchor, 'height')
|
||||
p['x_expr'] = x_expr
|
||||
p['y_expr'] = y_expr
|
||||
p['bar_width_px'] = int(el.get('width', 40))
|
||||
p['bar_height_px'] = int(el.get('height', 12))
|
||||
p['bar_count'] = max(1, int(el.get('barCount', 8)))
|
||||
p['bar_spacing'] = max(0, int(el.get('barSpacing', 1)))
|
||||
binding = el.get('binding', {})
|
||||
p['binding_key'] = binding.get('key', '')
|
||||
p['fill_tuple'] = f"({el.get('r', 80)}, {el.get('g', 200)}, {el.get('b', 120)})"
|
||||
bg = [el.get('bgR', 30), el.get('bgG', 30), el.get('bgB', 30)] if el.get('hasBg', False) else None
|
||||
p['bg_tuple'] = _as_fill_filter(bg)
|
||||
p['blink'] = bool(el.get('blink', False))
|
||||
|
||||
elif t == 'gauge':
|
||||
x_expr = _compute_pos_expr(el.get('x', 0), x_anchor, 'width')
|
||||
y_expr = _compute_pos_expr(el.get('y', 0), y_anchor, 'height')
|
||||
w = el.get('width', 32)
|
||||
h = el.get('height', 32)
|
||||
p['x_expr'] = x_expr
|
||||
p['y_expr'] = y_expr
|
||||
p['x2_expr'] = f"({x_expr}) + {w}"
|
||||
p['y2_expr'] = f"({y_expr}) + {h}"
|
||||
p['start_angle'] = int(el.get('startAngle', 135))
|
||||
p['end_angle'] = int(el.get('endAngle', 45))
|
||||
p['line_width'] = max(1, int(el.get('lineWidth', 3)))
|
||||
p['rgb_tuple'] = f"({el.get('r', 80)}, {el.get('g', 220)}, {el.get('b', 80)})"
|
||||
track = (
|
||||
[el.get('trackR', 40), el.get('trackG', 40), el.get('trackB', 40)]
|
||||
if el.get('hasTrack', True) else None
|
||||
)
|
||||
p['track_tuple'] = _as_fill_filter(track)
|
||||
binding = el.get('binding', {})
|
||||
p['binding_key'] = binding.get('key', '')
|
||||
font_key = el.get('font', 'four_by_six')
|
||||
p['font_attr'] = _FONT_ATTR_MAP.get(font_key, 'extra_small_font')
|
||||
p['show_label'] = bool(el.get('showLabel', True))
|
||||
p['label_tuple'] = f"({el.get('labelR', 200)}, {el.get('labelG', 200)}, {el.get('labelB', 200)})"
|
||||
p['blink'] = bool(el.get('blink', False))
|
||||
|
||||
elif t == 'marquee':
|
||||
font_key = el.get('font', 'press_start')
|
||||
p['font_attr'] = _FONT_ATTR_MAP.get(font_key, 'regular_font')
|
||||
p['rgb_tuple'] = f"({el.get('r', 255)}, {el.get('g', 255)}, {el.get('b', 255)})"
|
||||
p['y_expr'] = _compute_pos_expr(el.get('y', 0), y_anchor, 'height')
|
||||
p['text'] = el.get('text', 'Scrolling text')
|
||||
p['char_w'] = _FONT_CHAR_W.get(font_key, 8)
|
||||
p['gap'] = int(el.get('gap', 16))
|
||||
p['scroll_speed'] = max(1, int(el.get('scrollSpeed', 1)))
|
||||
p['direction'] = el.get('direction', 'left')
|
||||
# Data key stored in self._data for stateful scrolling across display() calls
|
||||
raw_id = str(el.get('id', 0)).replace('-', '_')
|
||||
p['data_key'] = f"mq_{raw_id}"
|
||||
p['blink'] = bool(el.get('blink', False))
|
||||
|
||||
result.append(p)
|
||||
return result
|
||||
|
||||
|
||||
def _generate_plugin_files(data: dict) -> dict:
|
||||
"""
|
||||
Generate all plugin file contents as strings.
|
||||
|
||||
Returns dict: {'manager.py', 'manifest.json', 'config_schema.json', 'requirements.txt'}
|
||||
Raises ValueError with a human-readable message on any validation failure.
|
||||
"""
|
||||
metadata = data.get('metadata', {})
|
||||
elements = data.get('elements', [])
|
||||
data_model = data.get('dataModel', {})
|
||||
config_vars = data_model.get('configVars', [])
|
||||
|
||||
plugin_id = metadata.get('id', '').strip()
|
||||
if not _PLUGIN_ID_RE.match(plugin_id):
|
||||
raise ValueError(
|
||||
'Plugin ID must start with a lowercase letter and contain only '
|
||||
'lowercase letters, numbers, and hyphens (max 63 chars).'
|
||||
)
|
||||
|
||||
plugin_name = metadata.get('name', '').strip()
|
||||
if not plugin_name:
|
||||
raise ValueError('Plugin name is required.')
|
||||
|
||||
author = metadata.get('author', '').strip()
|
||||
if not author:
|
||||
raise ValueError('Author is required.')
|
||||
|
||||
version = metadata.get('version', '1.0.0').strip()
|
||||
|
||||
# Validate config var keys are valid Python identifiers
|
||||
for cv in config_vars:
|
||||
key = cv.get('key', '')
|
||||
if not _PYTHON_IDENT_RE.match(key):
|
||||
raise ValueError(f'Config variable key "{key}" is not a valid Python identifier.')
|
||||
|
||||
class_name = _to_class_name(plugin_name)
|
||||
# Only consider visible elements for code generation flags
|
||||
visible_elements = [e for e in elements if e.get('visible') is not False]
|
||||
processed = _preprocess_elements(elements)
|
||||
has_clock = any(e.get('type') == 'clock' for e in visible_elements)
|
||||
has_blink = any(e.get('blink') for e in visible_elements)
|
||||
has_countdown = any(e.get('type') == 'countdown' for e in visible_elements)
|
||||
_var_re = re.compile(r'\{[a-zA-Z_]\w*\}')
|
||||
has_text_template = any(
|
||||
e.get('type') == 'text' and (
|
||||
_var_re.search(e.get('text', '') or '') or
|
||||
_var_re.search(e.get('text2', '') or '')
|
||||
)
|
||||
for e in visible_elements
|
||||
)
|
||||
|
||||
# Background fill color (None → don't render, use LED panel's native black)
|
||||
bg_color: str | None = None
|
||||
bg_raw = metadata.get('bgColor')
|
||||
if isinstance(bg_raw, dict):
|
||||
r, g, b = int(bg_raw.get('r', 0)), int(bg_raw.get('g', 0)), int(bg_raw.get('b', 0))
|
||||
if r or g or b:
|
||||
bg_color = f'({r}, {g}, {b})'
|
||||
|
||||
# Render manager.py
|
||||
env = _get_jinja_env()
|
||||
try:
|
||||
tmpl = env.get_template('manager.py.j2')
|
||||
except jinja2.TemplateNotFound:
|
||||
raise ValueError('Code generation template not found. This is a server configuration issue.')
|
||||
|
||||
manager_py = tmpl.render(
|
||||
plugin_name=plugin_name,
|
||||
class_name=class_name,
|
||||
plugin_id=plugin_id,
|
||||
generated_date=datetime.now().strftime('%Y-%m-%d'),
|
||||
config_vars=config_vars,
|
||||
elements=processed,
|
||||
has_clock=has_clock,
|
||||
has_blink=has_blink,
|
||||
has_countdown=has_countdown,
|
||||
has_text_template=has_text_template,
|
||||
bg_color=bg_color,
|
||||
)
|
||||
|
||||
# Syntax-check the generated Python
|
||||
try:
|
||||
ast.parse(manager_py)
|
||||
except SyntaxError as exc:
|
||||
raise ValueError(f'Generated code has a syntax error: {exc}') from exc
|
||||
|
||||
# Build manifest
|
||||
manifest = {
|
||||
'id': plugin_id,
|
||||
'name': plugin_name,
|
||||
'version': version,
|
||||
'author': author,
|
||||
'description': metadata.get('description', 'Custom plugin created with LEDMatrix Plugin Composer'),
|
||||
'category': metadata.get('category', 'custom'),
|
||||
'tags': ['composer', 'custom'],
|
||||
'entry_point': 'manager.py',
|
||||
'class_name': class_name,
|
||||
'display_modes': [plugin_id],
|
||||
'compatible_versions': ['>=2.0.0'],
|
||||
'last_updated': datetime.now().strftime('%Y-%m-%d'),
|
||||
'update_interval': int(metadata.get('update_interval', 60)),
|
||||
'default_duration': float(metadata.get('display_duration', 15)),
|
||||
'versions': [
|
||||
{'released': datetime.now().strftime('%Y-%m-%d'), 'version': version}
|
||||
],
|
||||
}
|
||||
|
||||
# Validate manifest against the project's schema
|
||||
if composer_bp.project_root:
|
||||
schema_path = Path(composer_bp.project_root) / 'schema' / 'manifest_schema.json'
|
||||
if schema_path.exists():
|
||||
schema = json.loads(schema_path.read_text())
|
||||
validator = jsonschema.Draft7Validator(schema)
|
||||
errors = list(validator.iter_errors(manifest))
|
||||
if errors:
|
||||
msgs = '; '.join(e.message for e in errors[:3])
|
||||
raise ValueError(f'Manifest validation failed: {msgs}')
|
||||
|
||||
# Build config_schema
|
||||
type_map = {
|
||||
'string': {'type': 'string'},
|
||||
'number': {'type': 'number', 'minimum': 0},
|
||||
'boolean': {'type': 'boolean'},
|
||||
'color': {
|
||||
'type': 'array',
|
||||
'items': {'type': 'integer', 'minimum': 0, 'maximum': 255},
|
||||
'minItems': 3,
|
||||
'maxItems': 3,
|
||||
},
|
||||
}
|
||||
|
||||
config_properties = {
|
||||
'enabled': {'type': 'boolean', 'default': True},
|
||||
'display_duration': {'type': 'number', 'minimum': 1, 'default': float(metadata.get('display_duration', 15))},
|
||||
}
|
||||
for cv in config_vars:
|
||||
cv_type = cv.get('type', 'string')
|
||||
prop = dict(type_map.get(cv_type, {'type': 'string'}))
|
||||
if cv.get('description'):
|
||||
prop['description'] = cv['description']
|
||||
if cv.get('label'):
|
||||
prop['title'] = cv['label']
|
||||
default = cv.get('default', '')
|
||||
if cv_type == 'number':
|
||||
try:
|
||||
prop['default'] = float(default) if default != '' else 0
|
||||
except (TypeError, ValueError):
|
||||
prop['default'] = 0
|
||||
elif cv_type == 'boolean':
|
||||
prop['default'] = bool(default)
|
||||
else:
|
||||
prop['default'] = default
|
||||
config_properties[cv['key']] = prop
|
||||
|
||||
config_schema = {
|
||||
'$schema': 'http://json-schema.org/draft-07/schema#',
|
||||
'type': 'object',
|
||||
'properties': config_properties,
|
||||
}
|
||||
|
||||
return {
|
||||
'manager.py': manager_py,
|
||||
'manifest.json': json.dumps(manifest, indent=2),
|
||||
'config_schema.json': json.dumps(config_schema, indent=2),
|
||||
'requirements.txt': '',
|
||||
}
|
||||
|
||||
|
||||
def _save_composer_state(target_dir: Path, payload: dict) -> None:
|
||||
"""Persist the raw composer payload alongside the generated plugin files."""
|
||||
(target_dir / '_composer_state.json').write_text(
|
||||
json.dumps(payload, indent=2, ensure_ascii=False), encoding='utf-8'
|
||||
)
|
||||
|
||||
|
||||
def _pack_zip(files: dict, plugin_id: str) -> io.BytesIO:
|
||||
"""Pack generated plugin files into an in-memory ZIP."""
|
||||
buf = io.BytesIO()
|
||||
with zipfile.ZipFile(buf, 'w', compression=zipfile.ZIP_DEFLATED) as zf:
|
||||
for filename, content in files.items():
|
||||
info = zipfile.ZipInfo(f'{plugin_id}/{filename}')
|
||||
info.compress_type = zipfile.ZIP_DEFLATED
|
||||
zf.writestr(info, content.encode('utf-8') if isinstance(content, str) else content)
|
||||
buf.seek(0)
|
||||
return buf
|
||||
|
||||
|
||||
# ── Routes ────────────────────────────────────────────────────────────────────
|
||||
|
||||
@composer_bp.route('/')
|
||||
def index():
|
||||
return render_template('v3/composer.html')
|
||||
|
||||
|
||||
@composer_bp.route('/api/generate', methods=['POST'])
|
||||
def generate_zip():
|
||||
data = request.get_json(force=True, silent=True)
|
||||
if not data:
|
||||
return jsonify({'status': 'error', 'message': 'No JSON body'}), 400
|
||||
try:
|
||||
files = _generate_plugin_files(data)
|
||||
except ValueError as exc:
|
||||
return jsonify({'status': 'error', 'message': str(exc)}), 422
|
||||
|
||||
plugin_id = data.get('metadata', {}).get('id', 'plugin')
|
||||
files['_composer_state.json'] = json.dumps(data, indent=2, ensure_ascii=False)
|
||||
zip_buf = _pack_zip(files, plugin_id)
|
||||
return send_file(
|
||||
zip_buf,
|
||||
mimetype='application/zip',
|
||||
as_attachment=True,
|
||||
download_name=f'{plugin_id}.zip',
|
||||
)
|
||||
|
||||
|
||||
@composer_bp.route('/api/install', methods=['POST'])
|
||||
def install_locally():
|
||||
if not composer_bp.plugins_dir:
|
||||
return jsonify({'status': 'error', 'message': 'Plugin directory not configured'}), 503
|
||||
|
||||
data = request.get_json(force=True, silent=True)
|
||||
if not data:
|
||||
return jsonify({'status': 'error', 'message': 'No JSON body'}), 400
|
||||
|
||||
try:
|
||||
files = _generate_plugin_files(data)
|
||||
except ValueError as exc:
|
||||
return jsonify({'status': 'error', 'message': str(exc)}), 422
|
||||
|
||||
plugin_id = data.get('metadata', {}).get('id', '')
|
||||
# _generate_plugin_files() above already validates metadata.id via this
|
||||
# same regex before it will return, but that guarantee lives in a
|
||||
# different function -- re-check here, at the point the path is actually
|
||||
# built, so this route stays safe on its own if that call is ever
|
||||
# reordered or changed.
|
||||
if not _PLUGIN_ID_RE.match(plugin_id):
|
||||
return jsonify({'status': 'error', 'message': 'Invalid plugin ID'}), 400
|
||||
target = Path(composer_bp.plugins_dir) / plugin_id
|
||||
force = bool(data.get('_force', False))
|
||||
|
||||
if target.exists() and not force:
|
||||
return jsonify({
|
||||
'status': 'conflict',
|
||||
'message': f'Plugin "{plugin_id}" is already installed.',
|
||||
}), 409
|
||||
|
||||
try:
|
||||
if target.exists() and force:
|
||||
import shutil as _shutil
|
||||
_shutil.rmtree(target)
|
||||
target.mkdir(parents=True, exist_ok=False)
|
||||
for filename, content in files.items():
|
||||
(target / filename).write_text(content, encoding='utf-8')
|
||||
_save_composer_state(target, data)
|
||||
except OSError as exc:
|
||||
logger.error('Failed to write plugin files for %s: %s', plugin_id, exc)
|
||||
return jsonify({'status': 'error', 'message': 'Failed to write plugin files'}), 500
|
||||
|
||||
# Trigger plugin discovery so it shows up in the Plugin Manager immediately
|
||||
if composer_bp.plugin_manager:
|
||||
try:
|
||||
composer_bp.plugin_manager.discover_plugins()
|
||||
except Exception as exc:
|
||||
logger.warning('discover_plugins() failed after composer install: %s', exc)
|
||||
|
||||
return jsonify({
|
||||
'status': 'success',
|
||||
'message': f'Plugin "{plugin_id}" installed successfully.',
|
||||
'plugin_id': plugin_id,
|
||||
})
|
||||
|
||||
|
||||
@composer_bp.route('/api/fonts/<font_name>')
|
||||
def serve_font(font_name):
|
||||
"""Serve an allowlisted font file for canvas FontFace loading."""
|
||||
if font_name not in _ALLOWED_FONTS:
|
||||
return '', 404
|
||||
if not composer_bp.project_root:
|
||||
return '', 503
|
||||
font_path = Path(composer_bp.project_root) / 'assets' / 'fonts' / font_name
|
||||
if not font_path.exists():
|
||||
return '', 404
|
||||
return send_file(str(font_path), mimetype='font/ttf')
|
||||
|
||||
|
||||
@composer_bp.route('/api/validate-id/<plugin_id>')
|
||||
def validate_id(plugin_id):
|
||||
"""Check whether a plugin ID is valid and available."""
|
||||
if not _PLUGIN_ID_RE.match(plugin_id):
|
||||
return jsonify({'valid': False, 'available': False, 'reason': 'Invalid format'})
|
||||
if composer_bp.plugins_dir:
|
||||
taken = (Path(composer_bp.plugins_dir) / plugin_id).exists()
|
||||
if taken:
|
||||
return jsonify({'valid': True, 'available': False, 'reason': 'Already installed'})
|
||||
return jsonify({'valid': True, 'available': True})
|
||||
|
||||
|
||||
@composer_bp.route('/api/plugins')
|
||||
def list_plugins():
|
||||
"""List installed plugins, flagging which ones have a saved composer state."""
|
||||
if not composer_bp.plugins_dir:
|
||||
return jsonify([])
|
||||
plugins_dir = Path(composer_bp.plugins_dir)
|
||||
results = []
|
||||
for entry in sorted(plugins_dir.iterdir()):
|
||||
if not entry.is_dir():
|
||||
continue
|
||||
manifest_path = entry / 'manifest.json'
|
||||
if not manifest_path.exists():
|
||||
continue
|
||||
try:
|
||||
manifest = json.loads(manifest_path.read_text())
|
||||
except Exception as e:
|
||||
logger.warning("Skipping %s: unreadable manifest.json (%s)", entry.name, e)
|
||||
continue
|
||||
has_state = (entry / '_composer_state.json').exists()
|
||||
results.append({
|
||||
'id': manifest.get('id', entry.name),
|
||||
'name': manifest.get('name', entry.name),
|
||||
'version': manifest.get('version', ''),
|
||||
'author': manifest.get('author', ''),
|
||||
'has_composer_state': has_state,
|
||||
})
|
||||
return jsonify(results)
|
||||
|
||||
|
||||
@composer_bp.route('/api/preview', methods=['POST'])
|
||||
def preview_code():
|
||||
"""Generate plugin files and return them as JSON for the code preview modal."""
|
||||
data = request.get_json(force=True, silent=True)
|
||||
if not data:
|
||||
return jsonify({'status': 'error', 'message': 'No JSON body'}), 400
|
||||
try:
|
||||
files = _generate_plugin_files(data)
|
||||
except ValueError as exc:
|
||||
return jsonify({'status': 'error', 'message': str(exc)}), 422
|
||||
return jsonify({
|
||||
'status': 'ok',
|
||||
'files': {
|
||||
'manager.py': files['manager.py'],
|
||||
'manifest.json': files['manifest.json'],
|
||||
'config_schema.json': files['config_schema.json'],
|
||||
},
|
||||
})
|
||||
|
||||
|
||||
@composer_bp.route('/api/load/<plugin_id>')
|
||||
def load_plugin(plugin_id):
|
||||
"""Load a plugin's composer state for editing.
|
||||
|
||||
If a _composer_state.json exists, return it verbatim.
|
||||
Otherwise, extract config vars from config_schema.json for a partial import.
|
||||
"""
|
||||
if not composer_bp.plugins_dir:
|
||||
return jsonify({'status': 'error', 'message': 'Plugin directory not configured'}), 503
|
||||
if not _PLUGIN_ID_RE.match(plugin_id):
|
||||
return jsonify({'status': 'error', 'message': 'Invalid plugin ID'}), 400
|
||||
|
||||
plugin_dir = Path(composer_bp.plugins_dir) / plugin_id
|
||||
if not plugin_dir.exists():
|
||||
return jsonify({'status': 'error', 'message': 'Plugin not found'}), 404
|
||||
|
||||
# Full composer state
|
||||
state_path = plugin_dir / '_composer_state.json'
|
||||
if state_path.exists():
|
||||
try:
|
||||
state = json.loads(state_path.read_text())
|
||||
return jsonify({'status': 'ok', 'source': 'composer', 'state': state})
|
||||
except Exception as exc:
|
||||
logger.error('Failed to read composer state for %s: %s', plugin_id, exc)
|
||||
return jsonify({'status': 'error', 'message': 'Failed to read state'}), 500
|
||||
|
||||
# Partial import from config_schema.json
|
||||
schema_path = plugin_dir / 'config_schema.json'
|
||||
manifest_path = plugin_dir / 'manifest.json'
|
||||
config_vars = []
|
||||
|
||||
if schema_path.exists():
|
||||
try:
|
||||
schema = json.loads(schema_path.read_text())
|
||||
props = schema.get('properties', {})
|
||||
skip = {'enabled', 'display_duration', 'update_interval'}
|
||||
type_map = {'boolean': 'boolean', 'number': 'number', 'integer': 'number', 'string': 'string'}
|
||||
for key, prop in props.items():
|
||||
if key in skip:
|
||||
continue
|
||||
prop_type = prop.get('type', 'string')
|
||||
if isinstance(prop_type, list):
|
||||
prop_type = next((t for t in prop_type if t != 'null'), 'string')
|
||||
# Detect color arrays
|
||||
if prop_type == 'array' and prop.get('maxItems') == 3:
|
||||
cv_type = 'color'
|
||||
else:
|
||||
cv_type = type_map.get(prop_type, 'string')
|
||||
config_vars.append({
|
||||
'key': key,
|
||||
'label': prop.get('title', key.replace('_', ' ').title()),
|
||||
'type': cv_type,
|
||||
'default': prop.get('default', ''),
|
||||
'description': prop.get('description', ''),
|
||||
})
|
||||
except Exception as e:
|
||||
logger.warning("Failed to parse config_schema.json for %s: %s", plugin_id, e)
|
||||
|
||||
manifest = {}
|
||||
if manifest_path.exists():
|
||||
try:
|
||||
manifest = json.loads(manifest_path.read_text())
|
||||
except Exception:
|
||||
pass
|
||||
|
||||
partial_state = {
|
||||
'composer_version': '1.0',
|
||||
'metadata': {
|
||||
'id': manifest.get('id', plugin_id),
|
||||
'name': manifest.get('name', plugin_id),
|
||||
'author': manifest.get('author', ''),
|
||||
'version': manifest.get('version', '1.0.0'),
|
||||
'description': manifest.get('description', ''),
|
||||
'category': manifest.get('category', 'custom'),
|
||||
'display_duration': manifest.get('default_duration', 15),
|
||||
'update_interval': manifest.get('update_interval', 60),
|
||||
'api_requirements': manifest.get('api_requirements', []),
|
||||
},
|
||||
'elements': [],
|
||||
'dataModel': {'configVars': config_vars, 'dataSources': [], 'computedVars': []},
|
||||
}
|
||||
return jsonify({'status': 'ok', 'source': 'schema_import', 'state': partial_state})
|
||||
@@ -397,12 +397,51 @@ def _load_display_partial():
|
||||
return "Error loading partial", 500
|
||||
|
||||
def _load_durations_partial():
|
||||
"""Load display durations partial"""
|
||||
"""Load rotation & durations partial.
|
||||
|
||||
Builds one duration entry per display mode of every enabled plugin
|
||||
(falling back to the display controller's 30s default), overlaid with any
|
||||
values saved in display.display_durations. Historically the template only
|
||||
looped over saved keys, and nothing ever populated them, so the page
|
||||
rendered empty.
|
||||
"""
|
||||
try:
|
||||
if pages_v3.config_manager:
|
||||
main_config = pages_v3.config_manager.load_config()
|
||||
duration_groups = []
|
||||
covered_keys = set()
|
||||
if pages_v3.plugin_manager:
|
||||
try:
|
||||
pages_v3.plugin_manager.discover_plugins()
|
||||
saved = (main_config.get('display', {}) or {}).get('display_durations', {}) or {}
|
||||
infos = sorted(pages_v3.plugin_manager.get_all_plugin_info(),
|
||||
key=lambda i: (i.get('name') or i.get('id') or '').lower())
|
||||
for info in infos:
|
||||
pid = info.get('id')
|
||||
if not pid or not (main_config.get(pid, {}) or {}).get('enabled', False):
|
||||
continue
|
||||
modes = pages_v3.plugin_manager.get_plugin_display_modes(pid) or [pid]
|
||||
covered_keys.update(modes)
|
||||
duration_groups.append({
|
||||
'plugin_id': pid,
|
||||
'plugin_name': info.get('name') or pid,
|
||||
'modes': [{'key': m, 'value': saved.get(m, 30)} for m in modes],
|
||||
})
|
||||
# Saved keys not owned by any enabled plugin (disabled or
|
||||
# uninstalled plugins) stay visible rather than vanishing.
|
||||
leftovers = [{'key': k, 'value': v} for k, v in saved.items()
|
||||
if k not in covered_keys]
|
||||
if leftovers:
|
||||
duration_groups.append({
|
||||
'plugin_id': '',
|
||||
'plugin_name': 'Other saved entries',
|
||||
'modes': leftovers,
|
||||
})
|
||||
except Exception:
|
||||
logger.warning("durations: could not enumerate plugin modes", exc_info=True)
|
||||
return render_template('v3/partials/durations.html',
|
||||
main_config=main_config)
|
||||
main_config=main_config,
|
||||
duration_groups=duration_groups)
|
||||
except Exception as e:
|
||||
logger.error("Error loading partial", exc_info=True)
|
||||
return "Error loading partial", 500
|
||||
|
||||
@@ -7,6 +7,7 @@ flask>=3.1.3,<4.0.0
|
||||
werkzeug>=3.1.6,<4.0.0
|
||||
flask-wtf>=1.2.0 # CSRF protection (optional for local-only, but recommended)
|
||||
flask-limiter>=3.5.0 # Rate limiting (prevent accidental abuse)
|
||||
flask-compress>=1.14 # gzip/brotli response compression (big win for the large JS/HTML over WiFi)
|
||||
|
||||
# WebSocket support for plugins
|
||||
# Note: Web interface uses Server-Sent Events (SSE) for real-time updates, not WebSockets
|
||||
|
||||
@@ -413,6 +413,9 @@ a, button, input, select, textarea {
|
||||
/* Responsive breakpoints */
|
||||
@media (min-width: 640px) {
|
||||
.sm\:px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
|
||||
.sm\:block { display: block; }
|
||||
.sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
||||
.sm\:text-sm { font-size: 0.875rem; line-height: 1.25rem; }
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
@@ -421,6 +424,8 @@ a, button, input, select, textarea {
|
||||
.md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
|
||||
.md\:flex { display: flex; }
|
||||
.md\:hidden { display: none; }
|
||||
.md\:block { display: block; }
|
||||
.md\:w-auto { width: auto; }
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
@@ -431,9 +436,14 @@ a, button, input, select, textarea {
|
||||
.lg\:px-8 { padding-left: 2rem; padding-right: 2rem; }
|
||||
.lg\:gap-x-3 { column-gap: 0.75rem; }
|
||||
.lg\:gap-x-6 { column-gap: 1.5rem; }
|
||||
.lg\:block { display: block; }
|
||||
.lg\:flex { display: flex; }
|
||||
.lg\:w-64 { width: 16rem; }
|
||||
}
|
||||
|
||||
@media (min-width: 1280px) {
|
||||
.xl\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
||||
.xl\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
|
||||
.xl\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
|
||||
.xl\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
|
||||
.xl\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
|
||||
@@ -446,6 +456,9 @@ a, button, input, select, textarea {
|
||||
}
|
||||
|
||||
@media (min-width: 1536px) {
|
||||
.2xl\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
||||
.2xl\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
|
||||
.2xl\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
|
||||
.2xl\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
|
||||
.2xl\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
|
||||
.2xl\:grid-cols-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); }
|
||||
@@ -456,6 +469,129 @@ a, button, input, select, textarea {
|
||||
.2xl\:space-x-8 > * + * { margin-left: 2rem; }
|
||||
}
|
||||
|
||||
/* ===== Mobile navigation drawer =====
|
||||
Below md the #site-nav wrapper becomes an off-canvas drawer; at md and up
|
||||
none of these rules apply and the nav renders exactly as before. */
|
||||
@media (max-width: 767.98px) {
|
||||
.site-nav {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
z-index: 60;
|
||||
width: min(85vw, 320px);
|
||||
background-color: var(--color-surface);
|
||||
border-right: 1px solid var(--color-border);
|
||||
transform: translateX(-100%);
|
||||
transition: transform 0.25s ease;
|
||||
overflow-y: auto;
|
||||
padding: 1rem;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
.site-nav.open {
|
||||
transform: translateX(0);
|
||||
box-shadow: 0 0 24px rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
/* Tabs become full-width rows with >=44px touch targets */
|
||||
.site-nav .nav-tab {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
text-align: left;
|
||||
padding: 0.75rem 1rem;
|
||||
min-height: 44px;
|
||||
}
|
||||
.site-nav nav.-mb-px {
|
||||
display: block;
|
||||
}
|
||||
.nav-backdrop {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 55;
|
||||
background-color: rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
/* Header widgets relocated into the drawer (see placeHeaderWidgets in
|
||||
app.js). The originals carry `hidden`/breakpoint classes tuned for the
|
||||
header, so re-enable them explicitly in the drawer context. */
|
||||
#drawer-widgets #settings-search-wrap {
|
||||
display: block !important;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
#drawer-widgets #settings-search-wrap input {
|
||||
width: 100%;
|
||||
}
|
||||
#drawer-widgets #settings-search-results {
|
||||
position: static;
|
||||
width: 100%;
|
||||
max-height: 50vh;
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
#drawer-widgets #system-stats {
|
||||
display: flex !important;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
/* Larger touch targets inside horizontally scrolling tables */
|
||||
.overflow-x-auto table button {
|
||||
min-width: 44px;
|
||||
min-height: 44px;
|
||||
}
|
||||
.overflow-x-auto table input:not([type="checkbox"]),
|
||||
.overflow-x-auto table select {
|
||||
min-height: 40px;
|
||||
}
|
||||
.overflow-x-auto table input[type="checkbox"] {
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
/* Hard guards: even if mobileNavOpen was left true when the viewport
|
||||
crossed the breakpoint, the drawer/backdrop must render as plain
|
||||
in-flow nav on desktop. */
|
||||
.site-nav {
|
||||
position: static;
|
||||
transform: none;
|
||||
width: auto;
|
||||
padding: 0;
|
||||
border-right: none;
|
||||
box-shadow: none;
|
||||
background-color: transparent;
|
||||
overflow-y: visible;
|
||||
}
|
||||
.nav-backdrop {
|
||||
display: none !important;
|
||||
}
|
||||
#drawer-widgets {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Mobile modal sizing: every .modal-content dialog fits the viewport with
|
||||
internal scrolling instead of overflowing it. */
|
||||
@media (max-width: 640px) {
|
||||
.modal-content {
|
||||
width: 95vw !important;
|
||||
max-width: 95vw !important;
|
||||
max-height: 90vh;
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
|
||||
/* Edge-fade hint that a container scrolls horizontally (pure CSS,
|
||||
Lea Verou scrolling-shadows technique — backgrounds sit behind content). */
|
||||
.overflow-x-auto {
|
||||
background:
|
||||
linear-gradient(90deg, var(--color-surface) 30%, rgba(255, 255, 255, 0)) left / 24px 100%,
|
||||
linear-gradient(270deg, var(--color-surface) 30%, rgba(255, 255, 255, 0)) right / 24px 100%,
|
||||
radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0)) left / 12px 100%,
|
||||
radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0)) right / 12px 100%;
|
||||
background-repeat: no-repeat;
|
||||
background-attachment: local, local, scroll, scroll;
|
||||
}
|
||||
|
||||
/* HTMX loading states */
|
||||
.htmx-request .loading {
|
||||
display: inline-block;
|
||||
@@ -1220,3 +1356,44 @@ button.bg-white {
|
||||
[data-theme="dark"] .power-warning-banner-dismiss {
|
||||
color: #fca5a5;
|
||||
}
|
||||
|
||||
/* ===== Floating live preview (all tabs except Overview) ===== */
|
||||
.floating-preview {
|
||||
position: fixed;
|
||||
right: 1rem;
|
||||
bottom: 1rem;
|
||||
z-index: 70;
|
||||
background-color: #111827;
|
||||
border: 1px solid #374151;
|
||||
border-radius: 0.5rem;
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
|
||||
overflow: hidden;
|
||||
/* Desktop: draggable resize handle (bottom-left visually, since the
|
||||
panel is anchored to the right). Touch devices use the size button. */
|
||||
resize: both;
|
||||
min-width: 160px;
|
||||
max-width: 90vw;
|
||||
}
|
||||
.floating-preview img {
|
||||
background-color: #000;
|
||||
}
|
||||
.floating-preview-toggle {
|
||||
position: fixed;
|
||||
right: 1rem;
|
||||
bottom: 1rem;
|
||||
z-index: 70;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
border-radius: 9999px;
|
||||
background-color: var(--color-primary);
|
||||
color: #ffffff;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
@media (max-width: 640px) {
|
||||
/* Whatever size is chosen, never wider than the phone viewport */
|
||||
.floating-preview {
|
||||
max-width: calc(100vw - 2rem);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
/* global showNotification, updateSystemStats, updateDisplayPreview, htmx */
|
||||
/* global showNotification, updateSystemStats, updateDisplayPreview, htmx, debugLog */
|
||||
// LED Matrix v3 JavaScript
|
||||
// Additional helpers for HTMX and Alpine.js integration
|
||||
|
||||
@@ -12,8 +12,8 @@ window.showNotification = function(message, type = 'info') {
|
||||
});
|
||||
document.dispatchEvent(event);
|
||||
} else {
|
||||
// Fallback notification
|
||||
console.log(`${type}: ${message}`);
|
||||
// Fallback notification — user-facing last resort, so never gated
|
||||
console.info(`${type}: ${message}`);
|
||||
}
|
||||
};
|
||||
|
||||
@@ -49,6 +49,111 @@ document.body.addEventListener('htmx:afterRequest', function(event) {
|
||||
// Not JSON, ignore
|
||||
}
|
||||
}
|
||||
|
||||
// Main-config saves (display hardware, rotation/durations, general) only
|
||||
// take effect after a display-service restart — surface the reminder
|
||||
// banner. Plugin config saves apply live and are deliberately excluded.
|
||||
try {
|
||||
const cfg = event.detail.requestConfig;
|
||||
if (cfg && cfg.verb === 'post' &&
|
||||
(cfg.path || '').includes('/api/v3/config/main') &&
|
||||
response && response.status >= 200 && response.status < 300) {
|
||||
window.showRestartPending();
|
||||
}
|
||||
} catch { /* banner is best-effort */ }
|
||||
});
|
||||
|
||||
// ===== Unsaved-changes guard =====
|
||||
// Plugin config panels are Alpine x-if templates: navigating away DESTROYS
|
||||
// the panel and revisiting re-fetches it, silently discarding any edits.
|
||||
// (System tabs use x-show + data-loaded and persist, so they're exempt.)
|
||||
// Track dirty forms and confirm before a lossy navigation.
|
||||
(function() {
|
||||
function markDirty(e) {
|
||||
const form = e.target && e.target.closest ? e.target.closest('form') : null;
|
||||
if (form) form.setAttribute('data-dirty', '');
|
||||
}
|
||||
document.body.addEventListener('input', markDirty);
|
||||
document.body.addEventListener('change', markDirty);
|
||||
|
||||
// A successful submit makes the form clean again
|
||||
document.body.addEventListener('htmx:afterRequest', function(event) {
|
||||
const xhr = event.detail.xhr;
|
||||
const form = event.detail.elt && event.detail.elt.closest ? event.detail.elt.closest('form') : null;
|
||||
if (form && xhr && xhr.status >= 200 && xhr.status < 300) {
|
||||
form.removeAttribute('data-dirty');
|
||||
}
|
||||
});
|
||||
|
||||
// Capture phase so this runs before Alpine's bubbling @click switches tabs
|
||||
document.addEventListener('click', function(e) {
|
||||
const tabBtn = e.target && e.target.closest ? e.target.closest('.nav-tab') : null;
|
||||
if (!tabBtn) return;
|
||||
const lossy = Array.prototype.filter.call(
|
||||
document.querySelectorAll('.plugin-config-tab form[data-dirty]'),
|
||||
function(f) { return f.offsetParent !== null; }
|
||||
);
|
||||
if (lossy.length === 0) return;
|
||||
if (!window.confirm('You have unsaved plugin settings — leaving this page will discard them. Leave anyway?')) {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
}
|
||||
}, true);
|
||||
|
||||
// Full page unload loses every panel's edits
|
||||
window.addEventListener('beforeunload', function(e) {
|
||||
const dirty = Array.prototype.some.call(
|
||||
document.querySelectorAll('form[data-dirty]'),
|
||||
function(f) { return f.offsetParent !== null; }
|
||||
);
|
||||
if (dirty) {
|
||||
e.preventDefault();
|
||||
e.returnValue = '';
|
||||
}
|
||||
});
|
||||
})();
|
||||
|
||||
// ===== Restart-pending banner =====
|
||||
// Shown after restart-requiring saves; persists across tab switches (and
|
||||
// reloads, via sessionStorage) until the display restarts or it's dismissed.
|
||||
window.showRestartPending = function() {
|
||||
try { sessionStorage.setItem('ledmatrix-restart-pending', '1'); } catch { /* private browsing */ }
|
||||
const banner = document.getElementById('restart-pending-banner');
|
||||
if (banner) banner.style.display = 'block';
|
||||
};
|
||||
|
||||
window.dismissRestartPending = function() {
|
||||
try { sessionStorage.removeItem('ledmatrix-restart-pending'); } catch { /* no-op */ }
|
||||
const banner = document.getElementById('restart-pending-banner');
|
||||
if (banner) banner.style.display = 'none';
|
||||
};
|
||||
|
||||
window.restartPendingNow = function() {
|
||||
const btn = document.getElementById('restart-pending-btn');
|
||||
if (btn) btn.disabled = true;
|
||||
fetch('/api/v3/system/action', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ action: 'restart_display_service' })
|
||||
})
|
||||
.then(r => r.json())
|
||||
.then(data => {
|
||||
showNotification(data.message || 'Display restarting…', data.status || 'success');
|
||||
window.dismissRestartPending();
|
||||
})
|
||||
.catch(err => {
|
||||
showNotification('Error restarting display: ' + err.message, 'error');
|
||||
})
|
||||
.finally(() => { if (btn) btn.disabled = false; });
|
||||
};
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
try {
|
||||
if (sessionStorage.getItem('ledmatrix-restart-pending') === '1') {
|
||||
const banner = document.getElementById('restart-pending-banner');
|
||||
if (banner) banner.style.display = 'block';
|
||||
}
|
||||
} catch { /* no-op */ }
|
||||
});
|
||||
|
||||
// SSE reconnection helper — closes and reopens both SSE streams,
|
||||
@@ -246,13 +351,13 @@ window.performanceMonitor = {
|
||||
logMetrics: function() {
|
||||
const metrics = this.getMetrics();
|
||||
console.group('Performance Metrics');
|
||||
console.log('DOM Content Loaded:', metrics.domContentLoaded?.toFixed(2) || 'N/A', 'ms');
|
||||
console.log('Load Complete:', metrics.loadComplete?.toFixed(2) || 'N/A', 'ms');
|
||||
console.log('First Paint:', metrics.firstPaint?.toFixed(2) || 'N/A', 'ms');
|
||||
console.log('First Contentful Paint:', metrics.firstContentfulPaint?.toFixed(2) || 'N/A', 'ms');
|
||||
console.log('Resources:', metrics.resourceCount || 0, 'files,', (metrics.totalResourceSize / 1024).toFixed(2) || '0', 'KB');
|
||||
debugLog('DOM Content Loaded:', metrics.domContentLoaded?.toFixed(2) || 'N/A', 'ms');
|
||||
debugLog('Load Complete:', metrics.loadComplete?.toFixed(2) || 'N/A', 'ms');
|
||||
debugLog('First Paint:', metrics.firstPaint?.toFixed(2) || 'N/A', 'ms');
|
||||
debugLog('First Contentful Paint:', metrics.firstContentfulPaint?.toFixed(2) || 'N/A', 'ms');
|
||||
debugLog('Resources:', metrics.resourceCount || 0, 'files,', (metrics.totalResourceSize / 1024).toFixed(2) || '0', 'KB');
|
||||
if (Object.keys(metrics.measures || {}).length > 0) {
|
||||
console.log('Custom Measures:', metrics.measures);
|
||||
debugLog('Custom Measures:', metrics.measures);
|
||||
}
|
||||
console.groupEnd();
|
||||
}
|
||||
@@ -273,3 +378,170 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||
}, 100);
|
||||
});
|
||||
});
|
||||
|
||||
// ===== Floating live preview =====
|
||||
// A mini preview of the display, available on every tab except Overview
|
||||
// (which has the full-size one). Open/closed state persists per browser;
|
||||
// frames arrive via the existing SSE stream (updateDisplayPreview in
|
||||
// app-shell.js feeds #floating-preview-img).
|
||||
window.toggleFloatingPreview = function(open) {
|
||||
try { localStorage.setItem('ledmatrix-floating-preview', open ? '1' : '0'); } catch { /* no-op */ }
|
||||
window.updateFloatingPreviewVisibility();
|
||||
};
|
||||
|
||||
// Preset widths the size button cycles through (px). Desktop users can also
|
||||
// drag the panel's native resize handle (CSS resize: both).
|
||||
const FLOATING_PREVIEW_SIZES = [192, 256, 384, 512];
|
||||
|
||||
window.applyFloatingPreviewSize = function() {
|
||||
const panel = document.getElementById('floating-preview');
|
||||
if (!panel) return;
|
||||
let size = 256;
|
||||
try { size = parseInt(localStorage.getItem('ledmatrix-floating-preview-size'), 10) || 256; } catch { /* no-op */ }
|
||||
panel.style.width = size + 'px';
|
||||
// Clear any manual drag-resize height so the image's aspect ratio rules
|
||||
panel.style.height = '';
|
||||
};
|
||||
|
||||
window.cycleFloatingPreviewSize = function() {
|
||||
let size = 256;
|
||||
try { size = parseInt(localStorage.getItem('ledmatrix-floating-preview-size'), 10) || 256; } catch { /* no-op */ }
|
||||
const idx = FLOATING_PREVIEW_SIZES.indexOf(size);
|
||||
const next = FLOATING_PREVIEW_SIZES[(idx + 1) % FLOATING_PREVIEW_SIZES.length];
|
||||
try { localStorage.setItem('ledmatrix-floating-preview-size', String(next)); } catch { /* no-op */ }
|
||||
window.applyFloatingPreviewSize();
|
||||
};
|
||||
|
||||
window.updateFloatingPreviewVisibility = function(tab) {
|
||||
const panel = document.getElementById('floating-preview');
|
||||
const toggle = document.getElementById('floating-preview-toggle');
|
||||
if (!panel || !toggle) return;
|
||||
let active = tab;
|
||||
if (!active) {
|
||||
const el = document.querySelector('[x-data="app()"]') || document.querySelector('[x-data]');
|
||||
const data = el && el._x_dataStack && el._x_dataStack[0];
|
||||
active = data && data.activeTab;
|
||||
}
|
||||
const onOverview = active === 'overview';
|
||||
let open = false;
|
||||
try { open = localStorage.getItem('ledmatrix-floating-preview') === '1'; } catch { /* no-op */ }
|
||||
const showPanel = !onOverview && open;
|
||||
panel.style.display = showPanel ? 'block' : 'none';
|
||||
toggle.style.display = (!onOverview && !open) ? 'flex' : 'none';
|
||||
if (showPanel) {
|
||||
window.applyFloatingPreviewSize();
|
||||
// Show the last cached frame immediately — SSE only pushes on
|
||||
// display changes, so a freshly opened panel would otherwise stay
|
||||
// empty until the next change.
|
||||
const img = document.getElementById('floating-preview-img');
|
||||
if (img && !img.src && window._lastPreviewFrame) {
|
||||
img.src = 'data:image/png;base64,' + window._lastPreviewFrame;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
window.updateFloatingPreviewVisibility();
|
||||
});
|
||||
|
||||
// Run a plugin on the real display for 60s via the existing on-demand API
|
||||
// and open the floating preview so the effect is visible while configuring.
|
||||
window.previewPluginNow = function(pluginId) {
|
||||
fetch('/api/v3/display/on-demand/start', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ plugin_id: pluginId, duration: 60 })
|
||||
})
|
||||
.then(r => r.json())
|
||||
.then(data => {
|
||||
showNotification(data.message || ('Previewing ' + pluginId + ' for 60 seconds'),
|
||||
data.status || 'success');
|
||||
if (data.status === 'success') window.toggleFloatingPreview(true);
|
||||
})
|
||||
.catch(err => {
|
||||
showNotification('Preview failed: ' + err.message, 'error');
|
||||
});
|
||||
};
|
||||
|
||||
// ===== Nav accessibility =====
|
||||
// aria-current tracks the active tab. Buttons are matched by their Alpine
|
||||
// @click expression ("activeTab = '<tab>'"), which works for both the static
|
||||
// system tabs and the dynamically injected plugin tabs.
|
||||
window.updateNavAriaCurrent = function(tab) {
|
||||
document.querySelectorAll('.nav-tab').forEach(function(btn) {
|
||||
const expr = btn.getAttribute('@click') || btn.getAttribute('x-on:click') || '';
|
||||
const isCurrent = expr.indexOf("activeTab = '" + tab + "'") !== -1;
|
||||
if (isCurrent) {
|
||||
btn.setAttribute('aria-current', 'page');
|
||||
} else {
|
||||
btn.removeAttribute('aria-current');
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// Escape closes the mobile nav drawer and returns focus to the hamburger;
|
||||
// opening the drawer moves focus to its first tab.
|
||||
(function() {
|
||||
function appData() {
|
||||
const el = document.querySelector('[x-data="app()"]') || document.querySelector('[x-data]');
|
||||
return el && el._x_dataStack && el._x_dataStack[0];
|
||||
}
|
||||
document.addEventListener('keydown', function(e) {
|
||||
if (e.key !== 'Escape') return;
|
||||
const data = appData();
|
||||
if (data && data.mobileNavOpen) {
|
||||
data.mobileNavOpen = false;
|
||||
const burger = document.querySelector('[aria-controls="site-nav"]');
|
||||
if (burger) burger.focus();
|
||||
}
|
||||
});
|
||||
document.addEventListener('click', function(e) {
|
||||
const burger = e.target && e.target.closest
|
||||
? e.target.closest('[aria-controls="site-nav"]') : null;
|
||||
if (!burger) return;
|
||||
// The click handler toggles mobileNavOpen; focus the first tab once
|
||||
// the drawer has slid in (matches the CSS transition timing).
|
||||
setTimeout(function() {
|
||||
const data = appData();
|
||||
if (data && data.mobileNavOpen) {
|
||||
const first = document.querySelector('#site-nav .nav-tab');
|
||||
if (first) first.focus();
|
||||
}
|
||||
}, 120);
|
||||
});
|
||||
})();
|
||||
|
||||
// ===== Mobile nav: header-widget relocation =====
|
||||
// Below the md breakpoint the settings-search box and system-stats block are
|
||||
// MOVED (same DOM nodes, listeners intact) from the header into the nav
|
||||
// drawer's #drawer-widgets slot; at md and up they move back. Single-instance
|
||||
// constraint: settings-search.js and the SSE stats updater both look these
|
||||
// elements up by id, so they must never be duplicated.
|
||||
window.placeHeaderWidgets = function() {
|
||||
const drawer = document.getElementById('drawer-widgets');
|
||||
const header = document.getElementById('header-widgets');
|
||||
const search = document.getElementById('settings-search-wrap');
|
||||
const stats = document.getElementById('system-stats');
|
||||
if (!drawer || !header) return;
|
||||
|
||||
const desktop = window.matchMedia('(min-width: 768px)').matches;
|
||||
if (desktop) {
|
||||
// Restore original header order: search before the theme toggle,
|
||||
// stats as the last item.
|
||||
const themeToggle = document.getElementById('theme-toggle');
|
||||
if (search && search.parentElement !== header) {
|
||||
header.insertBefore(search, themeToggle || null);
|
||||
}
|
||||
if (stats && stats.parentElement !== header) {
|
||||
header.appendChild(stats);
|
||||
}
|
||||
} else {
|
||||
if (search && search.parentElement !== drawer) drawer.appendChild(search);
|
||||
if (stats && stats.parentElement !== drawer) drawer.appendChild(stats);
|
||||
}
|
||||
};
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
window.placeHeaderWidgets();
|
||||
window.matchMedia('(min-width: 768px)').addEventListener('change', window.placeHeaderWidgets);
|
||||
});
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 5.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.4 KiB |
@@ -0,0 +1,356 @@
|
||||
/* global debugLog */
|
||||
// Early helpers and the app() stub (must run before Alpine init)
|
||||
// Extracted from templates/v3/base.html so browsers cache it as a static asset.
|
||||
// Helper function to get installed plugins with fallback
|
||||
// Must be defined before app() function that uses it
|
||||
async function getInstalledPluginsSafe() {
|
||||
if (window.PluginAPI && window.PluginAPI.getInstalledPlugins) {
|
||||
try {
|
||||
const plugins = await window.PluginAPI.getInstalledPlugins();
|
||||
// Ensure plugins is always an array
|
||||
const pluginsArray = Array.isArray(plugins) ? plugins : [];
|
||||
return { status: 'success', data: { plugins: pluginsArray } };
|
||||
} catch (error) {
|
||||
console.error('Error using PluginAPI.getInstalledPlugins, falling back to direct fetch:', error);
|
||||
// Fall through to direct fetch
|
||||
}
|
||||
}
|
||||
// Fallback to direct fetch if PluginAPI not loaded
|
||||
const response = await fetch('/api/v3/plugins/installed');
|
||||
return await response.json();
|
||||
}
|
||||
|
||||
// Global event listener for pluginsUpdated - works even if Alpine isn't ready yet
|
||||
// This ensures tabs update when plugins_manager.js loads plugins
|
||||
document.addEventListener('pluginsUpdated', function(event) {
|
||||
debugLog('[GLOBAL] Received pluginsUpdated event:', event.detail?.plugins?.length || 0, 'plugins');
|
||||
const plugins = event.detail?.plugins || [];
|
||||
|
||||
// Update window.installedPlugins
|
||||
window.installedPlugins = plugins;
|
||||
|
||||
// Try to update Alpine component if it exists (only if using full implementation)
|
||||
if (window.Alpine) {
|
||||
const appElement = document.querySelector('[x-data="app()"]');
|
||||
if (appElement && appElement._x_dataStack && appElement._x_dataStack[0]) {
|
||||
const appComponent = appElement._x_dataStack[0];
|
||||
appComponent.installedPlugins = plugins;
|
||||
// Only call updatePluginTabs if it's the full implementation (has _doUpdatePluginTabs)
|
||||
if (typeof appComponent.updatePluginTabs === 'function' &&
|
||||
appComponent.updatePluginTabs.toString().includes('_doUpdatePluginTabs')) {
|
||||
debugLog('[GLOBAL] Updating plugin tabs via Alpine component (full implementation)');
|
||||
appComponent.updatePluginTabs();
|
||||
return; // Full implementation handles it, don't do direct update
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Only do direct DOM update if full implementation isn't available yet
|
||||
const pluginTabsRow = document.getElementById('plugin-tabs-row');
|
||||
const pluginTabsNav = pluginTabsRow?.querySelector('nav');
|
||||
if (pluginTabsRow && pluginTabsNav && plugins.length > 0) {
|
||||
// Clear existing plugin tabs (except Plugin Manager)
|
||||
const existingTabs = pluginTabsNav.querySelectorAll('.plugin-tab');
|
||||
existingTabs.forEach(tab => { tab.remove(); });
|
||||
|
||||
// Add tabs for each installed plugin
|
||||
plugins.forEach(plugin => {
|
||||
const tabButton = document.createElement('button');
|
||||
tabButton.type = 'button';
|
||||
tabButton.setAttribute('data-plugin-id', plugin.id);
|
||||
tabButton.className = `plugin-tab nav-tab`;
|
||||
tabButton.onclick = function() {
|
||||
// Try to set activeTab via Alpine if available
|
||||
if (window.Alpine) {
|
||||
const appElement = document.querySelector('[x-data="app()"]');
|
||||
if (appElement && appElement._x_dataStack && appElement._x_dataStack[0]) {
|
||||
appElement._x_dataStack[0].activeTab = plugin.id;
|
||||
// Only call updatePluginTabStates if it exists
|
||||
if (typeof appElement._x_dataStack[0].updatePluginTabStates === 'function') {
|
||||
appElement._x_dataStack[0].updatePluginTabStates();
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
// Built with DOM APIs (no innerHTML): the icon class and
|
||||
// name come from plugin manifests, which are only
|
||||
// semi-trusted input.
|
||||
const tabIcon = document.createElement('i');
|
||||
tabIcon.className = plugin.icon || 'fas fa-puzzle-piece';
|
||||
tabButton.textContent = '';
|
||||
tabButton.appendChild(tabIcon);
|
||||
tabButton.appendChild(document.createTextNode(plugin.name || plugin.id));
|
||||
pluginTabsNav.appendChild(tabButton);
|
||||
});
|
||||
debugLog('[GLOBAL] Updated plugin tabs directly:', plugins.length, 'tabs added');
|
||||
}
|
||||
});
|
||||
|
||||
// Guard flag to prevent duplicate stub-to-full enhancement
|
||||
window._appEnhanced = false;
|
||||
|
||||
// Define app() function early so Alpine can find it when it initializes
|
||||
// This is a complete implementation that will work immediately
|
||||
(function() {
|
||||
const isAPMode = window.location.hostname === '192.168.4.1' ||
|
||||
window.location.hostname.startsWith('192.168.4.');
|
||||
|
||||
// Create the app function - will be enhanced by full implementation later
|
||||
window.app = function() {
|
||||
return {
|
||||
activeTab: isAPMode ? 'wifi' : 'overview',
|
||||
mobileNavOpen: false,
|
||||
installedPlugins: [],
|
||||
|
||||
init() {
|
||||
// Try to enhance immediately with full implementation
|
||||
const tryEnhance = () => {
|
||||
if (window._appEnhanced) return true;
|
||||
if (typeof window.app === 'function') {
|
||||
const fullApp = window.app();
|
||||
// Check if this is the full implementation (has updatePluginTabs with proper implementation)
|
||||
if (fullApp && typeof fullApp.updatePluginTabs === 'function' && fullApp.updatePluginTabs.toString().includes('_doUpdatePluginTabs')) {
|
||||
window._appEnhanced = true;
|
||||
// Preserve runtime state that should not be reset
|
||||
const preservedPlugins = this.installedPlugins;
|
||||
const preservedTab = this.activeTab;
|
||||
const defaultTab = isAPMode ? 'wifi' : 'overview';
|
||||
const wasInitialized = this._initialized;
|
||||
Object.assign(this, fullApp);
|
||||
// Restore runtime state if non-default
|
||||
if (preservedPlugins && preservedPlugins.length > 0) {
|
||||
this.installedPlugins = preservedPlugins;
|
||||
}
|
||||
if (preservedTab && preservedTab !== defaultTab) {
|
||||
this.activeTab = preservedTab;
|
||||
}
|
||||
if (wasInitialized) {
|
||||
this._initialized = wasInitialized;
|
||||
}
|
||||
// Only call init if not already initialized
|
||||
if (typeof this.init === 'function' && !this._initialized) {
|
||||
this.init();
|
||||
}
|
||||
return true;
|
||||
}
|
||||
}
|
||||
return false;
|
||||
};
|
||||
|
||||
// Set up event listener for pluginsUpdated in stub (only if not already enhanced)
|
||||
// The full implementation will have its own listener, so we only need this for the stub
|
||||
if (!this._pluginsUpdatedListenerSet) {
|
||||
const handlePluginsUpdated = (event) => {
|
||||
debugLog('[STUB] Received pluginsUpdated event:', event.detail?.plugins?.length || 0, 'plugins');
|
||||
const plugins = event.detail?.plugins || [];
|
||||
// Only update if we're still in stub mode (not enhanced yet)
|
||||
if (typeof this.updatePluginTabs === 'function' && !this.updatePluginTabs.toString().includes('_doUpdatePluginTabs')) {
|
||||
this.installedPlugins = plugins;
|
||||
if (this.$nextTick && typeof this.$nextTick === 'function') {
|
||||
this.$nextTick(() => {
|
||||
this.updatePluginTabs();
|
||||
});
|
||||
} else {
|
||||
setTimeout(() => {
|
||||
this.updatePluginTabs();
|
||||
}, 100);
|
||||
}
|
||||
}
|
||||
};
|
||||
document.addEventListener('pluginsUpdated', handlePluginsUpdated);
|
||||
this._pluginsUpdatedListenerSet = true;
|
||||
debugLog('[STUB] init: Set up pluginsUpdated event listener');
|
||||
}
|
||||
|
||||
// Try immediately - if full implementation is already loaded, use it right away
|
||||
if (!tryEnhance()) {
|
||||
// Full implementation not ready yet, load plugins directly while waiting
|
||||
this.loadInstalledPluginsDirectly();
|
||||
// Try again very soon to enhance with full implementation
|
||||
setTimeout(tryEnhance, 10);
|
||||
|
||||
// Also set up a periodic check to update tabs if plugins get loaded by plugins_manager.js
|
||||
let retryCount = 0;
|
||||
const maxRetries = 20; // Check for 2 seconds (20 * 100ms)
|
||||
const checkAndUpdateTabs = () => {
|
||||
if (retryCount >= maxRetries) {
|
||||
// Fallback: if plugins_manager.js hasn't loaded after 2 seconds, fetch directly
|
||||
if (!window.installedPlugins || window.installedPlugins.length === 0) {
|
||||
debugLog('[STUB] checkAndUpdateTabs: Fallback - fetching plugins directly after timeout');
|
||||
this.loadInstalledPluginsDirectly();
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
// Check if plugins are available (either from window or component)
|
||||
const plugins = window.installedPlugins || this.installedPlugins || [];
|
||||
if (plugins.length > 0) {
|
||||
debugLog('[STUB] checkAndUpdateTabs: Found', plugins.length, 'plugins, updating tabs');
|
||||
this.installedPlugins = plugins;
|
||||
if (typeof this.updatePluginTabs === 'function') {
|
||||
this.updatePluginTabs();
|
||||
}
|
||||
} else {
|
||||
retryCount++;
|
||||
setTimeout(checkAndUpdateTabs, 100);
|
||||
}
|
||||
};
|
||||
// Start checking after a short delay
|
||||
setTimeout(checkAndUpdateTabs, 200);
|
||||
} else {
|
||||
// Full implementation loaded, but still set up fallback timer
|
||||
setTimeout(() => {
|
||||
if (!window.installedPlugins || window.installedPlugins.length === 0) {
|
||||
debugLog('[STUB] init: Fallback timer - fetching plugins directly');
|
||||
this.loadInstalledPluginsDirectly();
|
||||
}
|
||||
}, 2000);
|
||||
}
|
||||
},
|
||||
|
||||
// Direct plugin loading for stub (before full implementation loads)
|
||||
async loadInstalledPluginsDirectly() {
|
||||
try {
|
||||
debugLog('[STUB] loadInstalledPluginsDirectly: Starting...');
|
||||
// Ensure DOM is ready
|
||||
const ensureDOMReady = () => {
|
||||
return new Promise((resolve) => {
|
||||
if (document.readyState === 'complete' || document.readyState === 'interactive') {
|
||||
// Use requestAnimationFrame to ensure DOM is painted
|
||||
requestAnimationFrame(() => {
|
||||
setTimeout(resolve, 50); // Small delay to ensure rendering
|
||||
});
|
||||
} else {
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
requestAnimationFrame(() => {
|
||||
setTimeout(resolve, 50);
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
await ensureDOMReady();
|
||||
|
||||
const data = await getInstalledPluginsSafe();
|
||||
if (data.status === 'success') {
|
||||
const plugins = data.data.plugins || [];
|
||||
debugLog('[STUB] loadInstalledPluginsDirectly: Loaded', plugins.length, 'plugins');
|
||||
|
||||
// Update both component and window
|
||||
this.installedPlugins = plugins;
|
||||
window.installedPlugins = plugins;
|
||||
|
||||
// Dispatch event so global listener can update tabs
|
||||
document.dispatchEvent(new CustomEvent('pluginsUpdated', {
|
||||
detail: { plugins: plugins }
|
||||
}));
|
||||
debugLog('[STUB] loadInstalledPluginsDirectly: Dispatched pluginsUpdated event');
|
||||
|
||||
// Update tabs if we have the method - use $nextTick if available
|
||||
if (typeof this.updatePluginTabs === 'function') {
|
||||
if (this.$nextTick && typeof this.$nextTick === 'function') {
|
||||
this.$nextTick(() => {
|
||||
this.updatePluginTabs();
|
||||
});
|
||||
} else {
|
||||
// Fallback: wait a bit for DOM
|
||||
setTimeout(() => {
|
||||
this.updatePluginTabs();
|
||||
}, 100);
|
||||
}
|
||||
}
|
||||
} else {
|
||||
console.warn('[STUB] loadInstalledPluginsDirectly: Failed to load plugins:', data.message);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('[STUB] loadInstalledPluginsDirectly: Error loading plugins:', error);
|
||||
}
|
||||
},
|
||||
|
||||
// Stub methods that will be replaced by full implementation
|
||||
loadTabContent: function(tab) {},
|
||||
loadInstalledPlugins: async function() {
|
||||
// Try to use global function if available, otherwise use direct loading
|
||||
if (typeof window.loadInstalledPlugins === 'function') {
|
||||
await window.loadInstalledPlugins();
|
||||
// Update tabs after loading (window.installedPlugins should be set by the global function)
|
||||
if (window.installedPlugins && Array.isArray(window.installedPlugins)) {
|
||||
this.installedPlugins = window.installedPlugins;
|
||||
this.updatePluginTabs();
|
||||
}
|
||||
} else if (typeof window.pluginManager?.loadInstalledPlugins === 'function') {
|
||||
await window.pluginManager.loadInstalledPlugins();
|
||||
// Update tabs after loading
|
||||
if (window.installedPlugins && Array.isArray(window.installedPlugins)) {
|
||||
this.installedPlugins = window.installedPlugins;
|
||||
this.updatePluginTabs();
|
||||
}
|
||||
} else {
|
||||
// Fallback to direct loading (which already calls updatePluginTabs)
|
||||
await this.loadInstalledPluginsDirectly();
|
||||
}
|
||||
},
|
||||
updatePluginTabs: function() {
|
||||
// Basic implementation for stub - will be replaced by full implementation
|
||||
// Debounce to prevent multiple rapid calls
|
||||
if (this._updatePluginTabsTimeout) {
|
||||
clearTimeout(this._updatePluginTabsTimeout);
|
||||
}
|
||||
|
||||
this._updatePluginTabsTimeout = setTimeout(() => {
|
||||
debugLog('[STUB] updatePluginTabs: Executing with', this.installedPlugins?.length || 0, 'plugins');
|
||||
const pluginTabsRow = document.getElementById('plugin-tabs-row');
|
||||
const pluginTabsNav = pluginTabsRow?.querySelector('nav');
|
||||
if (!pluginTabsRow || !pluginTabsNav) {
|
||||
console.warn('[STUB] updatePluginTabs: Plugin tabs container not found');
|
||||
return;
|
||||
}
|
||||
if (!this.installedPlugins || this.installedPlugins.length === 0) {
|
||||
debugLog('[STUB] updatePluginTabs: No plugins to display');
|
||||
return;
|
||||
}
|
||||
|
||||
// Check if tabs are already correct by comparing plugin IDs
|
||||
const existingTabs = pluginTabsNav.querySelectorAll('.plugin-tab');
|
||||
const existingIds = Array.from(existingTabs).map(tab => tab.getAttribute('data-plugin-id')).sort().join(',');
|
||||
const currentIds = this.installedPlugins.map(p => p.id).sort().join(',');
|
||||
|
||||
if (existingIds === currentIds && existingTabs.length === this.installedPlugins.length) {
|
||||
debugLog('[STUB] updatePluginTabs: Tabs already match, skipping update');
|
||||
return;
|
||||
}
|
||||
|
||||
// Clear existing plugin tabs (except Plugin Manager)
|
||||
existingTabs.forEach(tab => { tab.remove(); });
|
||||
debugLog('[STUB] updatePluginTabs: Cleared', existingTabs.length, 'existing tabs');
|
||||
|
||||
// Add tabs for each installed plugin
|
||||
this.installedPlugins.forEach(plugin => {
|
||||
const tabButton = document.createElement('button');
|
||||
tabButton.type = 'button';
|
||||
tabButton.setAttribute('data-plugin-id', plugin.id);
|
||||
tabButton.className = `plugin-tab nav-tab ${this.activeTab === plugin.id ? 'nav-tab-active' : ''}`;
|
||||
tabButton.onclick = () => {
|
||||
this.activeTab = plugin.id;
|
||||
if (typeof this.updatePluginTabStates === 'function') {
|
||||
this.updatePluginTabStates();
|
||||
}
|
||||
};
|
||||
// DOM APIs instead of innerHTML: manifest
|
||||
// icon/name are semi-trusted input.
|
||||
const tabIcon = document.createElement('i');
|
||||
tabIcon.className = plugin.icon || 'fas fa-puzzle-piece';
|
||||
tabButton.textContent = '';
|
||||
tabButton.appendChild(tabIcon);
|
||||
tabButton.appendChild(document.createTextNode(plugin.name || plugin.id));
|
||||
pluginTabsNav.appendChild(tabButton);
|
||||
});
|
||||
debugLog('[STUB] updatePluginTabs: Added', this.installedPlugins.length, 'plugin tabs');
|
||||
}, 100);
|
||||
},
|
||||
showNotification: function(message, type) {},
|
||||
escapeHtml: function(text) { return String(text || '').replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>'); }
|
||||
};
|
||||
};
|
||||
})();
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@@ -1,757 +0,0 @@
|
||||
/**
|
||||
* ComposerCanvas — stateless LED matrix canvas renderer.
|
||||
*
|
||||
* Coordinate system: LED pixels (integers). All drawing multiplies by SCALE.
|
||||
* PIL draw.text(x,y) is top-left; canvas fillText(x,y) is baseline.
|
||||
* → Canvas text cy = (actualY + fontSizePx) * SCALE
|
||||
*
|
||||
* Anchors: element x/y are offsets from their anchor point:
|
||||
* xAnchor=null/'left' → x is fixed offset from left
|
||||
* xAnchor='center' → x is offset from width/2
|
||||
* xAnchor='right' → x is offset inward from right edge
|
||||
* yAnchor follows the same pattern with 'top'/'middle'/'bottom'
|
||||
*
|
||||
* Breakpoints: elements with minWidth > currentMatrixW are rendered at 25% opacity.
|
||||
*
|
||||
* Resize handles: drawn on selected rectangles; 8 handles (corners + edge mids).
|
||||
*/
|
||||
window.ComposerCanvas = (() => {
|
||||
'use strict';
|
||||
|
||||
let _canvas = null;
|
||||
let _ctx = null;
|
||||
let _showGrid = true;
|
||||
|
||||
const DISPLAY_PRESETS = [
|
||||
{ label: '64×32', w: 64, h: 32 },
|
||||
{ label: '128×32', w: 128, h: 32 },
|
||||
{ label: '128×64', w: 128, h: 64 },
|
||||
{ label: '256×32', w: 256, h: 32 },
|
||||
{ label: '256×64', w: 256, h: 64 },
|
||||
];
|
||||
|
||||
const FONT_MAP = {
|
||||
press_start: { family: "'PressStart2P', monospace", sizePx: 8, charW: 8 },
|
||||
four_by_six: { family: 'monospace', sizePx: 6, charW: 4 },
|
||||
five_by_seven: { family: 'monospace', sizePx: 7, charW: 5 },
|
||||
};
|
||||
|
||||
const ELEMENT_DEFAULTS = {
|
||||
text: {
|
||||
text: 'Hello', font: 'press_start',
|
||||
r: 255, g: 255, b: 255,
|
||||
text2: '', lineSpacing: 2, textAlign: 'left',
|
||||
xAnchor: null, yAnchor: null, minWidth: 0, locked: false, blink: false, visible: true,
|
||||
},
|
||||
dynamic_text: {
|
||||
binding: { source: 'config', key: '', format: null },
|
||||
font: 'press_start', textAlign: 'left',
|
||||
r: 255, g: 200, b: 100,
|
||||
xAnchor: null, yAnchor: null, minWidth: 0, locked: false, blink: false, visible: true,
|
||||
},
|
||||
clock: {
|
||||
format: '%H:%M', font: 'press_start',
|
||||
r: 100, g: 255, b: 100,
|
||||
format2: '', lineSpacing: 2, textAlign: 'left',
|
||||
xAnchor: null, yAnchor: null, minWidth: 0, locked: false, blink: false, visible: true,
|
||||
},
|
||||
rectangle: {
|
||||
width: 20, height: 8,
|
||||
fillR: 0, fillG: 0, fillB: 128, hasFill: true,
|
||||
outR: 255, outG: 255, outB: 255, hasOutline: true,
|
||||
xAnchor: null, yAnchor: null, minWidth: 0, locked: false, blink: false, visible: true,
|
||||
},
|
||||
ellipse: {
|
||||
width: 24, height: 12,
|
||||
fillR: 0, fillG: 100, fillB: 200, hasFill: true,
|
||||
outR: 100, outG: 180, outB: 255, hasOutline: true,
|
||||
xAnchor: null, yAnchor: null, minWidth: 0, locked: false, blink: false, visible: true,
|
||||
},
|
||||
arc: {
|
||||
width: 24, height: 24,
|
||||
startAngle: 0, endAngle: 270, lineWidth: 2,
|
||||
r: 255, g: 200, b: 0,
|
||||
xAnchor: null, yAnchor: null, minWidth: 0, locked: false, blink: false, visible: true,
|
||||
},
|
||||
pixel: {
|
||||
r: 255, g: 255, b: 255,
|
||||
xAnchor: null, yAnchor: null, minWidth: 0, locked: false, blink: false, visible: true,
|
||||
},
|
||||
rounded_rectangle: {
|
||||
width: 24, height: 10, borderRadius: 3,
|
||||
fillR: 0, fillG: 80, fillB: 180, hasFill: true,
|
||||
outR: 120, outG: 180, outB: 255, hasOutline: true,
|
||||
xAnchor: null, yAnchor: null, minWidth: 0, locked: false, blink: false, visible: true,
|
||||
},
|
||||
line: {
|
||||
x0: 0, y0: 16, x1: 63, y1: 16,
|
||||
r: 180, g: 180, b: 180, lineWidth: 1,
|
||||
xAnchor: null, yAnchor: null, minWidth: 0, locked: false, blink: false, visible: true,
|
||||
},
|
||||
divider: {
|
||||
orientation: 'horizontal', y: 16, x: 64,
|
||||
r: 100, g: 100, b: 100,
|
||||
xAnchor: null, yAnchor: null, minWidth: 0, locked: false, blink: false, visible: true,
|
||||
},
|
||||
progress_bar: {
|
||||
barWidth: 60, barHeight: 6,
|
||||
binding: { source: 'config', key: '', format: null },
|
||||
r: 80, g: 200, b: 80,
|
||||
bgR: 30, bgG: 30, bgB: 30, hasBg: true,
|
||||
outR: 100, outG: 100, outB: 100, hasOutline: true,
|
||||
previewPct: 65,
|
||||
xAnchor: null, yAnchor: null, minWidth: 0, locked: false, blink: false, visible: true,
|
||||
},
|
||||
countdown: {
|
||||
binding: { source: 'config', key: '', format: null },
|
||||
countdownFormat: 'dh',
|
||||
font: 'four_by_six', textAlign: 'left',
|
||||
r: 255, g: 180, b: 0,
|
||||
previewText: '42d 3h',
|
||||
xAnchor: null, yAnchor: null, minWidth: 0, locked: false, blink: false, visible: true,
|
||||
},
|
||||
marquee: {
|
||||
text: 'Scrolling text', font: 'press_start',
|
||||
r: 255, g: 255, b: 255,
|
||||
scrollSpeed: 1, gap: 16, direction: 'left',
|
||||
xAnchor: null, yAnchor: null, minWidth: 0, locked: false, blink: false, visible: true,
|
||||
},
|
||||
section: {
|
||||
label: 'Section',
|
||||
xAnchor: null, yAnchor: null, minWidth: 0, locked: false, blink: false, visible: true,
|
||||
},
|
||||
pips: {
|
||||
count: 5, filled: 3, pipSize: 4, pipSpacing: 2,
|
||||
r: 255, g: 200, b: 0,
|
||||
emptyR: 50, emptyG: 50, emptyB: 50, showEmpty: true,
|
||||
binding: { source: 'config', key: '', format: null },
|
||||
xAnchor: null, yAnchor: null, minWidth: 0, locked: false, blink: false, visible: true,
|
||||
},
|
||||
sparkline: {
|
||||
width: 40, height: 12,
|
||||
barCount: 8, barSpacing: 1,
|
||||
r: 80, g: 200, b: 120,
|
||||
bgR: 30, bgG: 30, bgB: 30, hasBg: false,
|
||||
binding: { source: 'config', key: '', format: null },
|
||||
previewData: '0.3,0.6,0.4,0.8,0.5,0.9,0.7,0.85',
|
||||
xAnchor: null, yAnchor: null, minWidth: 0, locked: false, blink: false, visible: true,
|
||||
},
|
||||
gauge: {
|
||||
width: 32, height: 32,
|
||||
startAngle: 135, endAngle: 45, lineWidth: 3,
|
||||
binding: { source: 'config', key: '', format: null },
|
||||
r: 80, g: 220, b: 80,
|
||||
trackR: 40, trackG: 40, trackB: 40, hasTrack: true,
|
||||
showLabel: true, font: 'four_by_six', labelR: 200, labelG: 200, labelB: 200,
|
||||
previewPct: 65,
|
||||
xAnchor: null, yAnchor: null, minWidth: 0, locked: false, blink: false, visible: true,
|
||||
},
|
||||
};
|
||||
|
||||
// ── Anchor resolution ────────────────────────────────────────────────
|
||||
function resolveAnchor(val, anchor, dim) {
|
||||
if (!anchor || anchor === 'left' || anchor === 'top') return val;
|
||||
if (anchor === 'center' || anchor === 'middle') return Math.floor(dim / 2) + val;
|
||||
if (anchor === 'right' || anchor === 'bottom') return dim - val;
|
||||
return val;
|
||||
}
|
||||
|
||||
function computeActualPos(el, matrixW, matrixH) {
|
||||
const ax = resolveAnchor(el.x ?? el.x0 ?? 0, el.xAnchor, matrixW);
|
||||
const ay = resolveAnchor(el.y ?? el.y0 ?? 0, el.yAnchor, matrixH);
|
||||
return { x: ax, y: ay };
|
||||
}
|
||||
|
||||
// ── Bounding box (LED pixel space) ──────────────────────────────────
|
||||
function getBoundingBox(el, matrixW, matrixH) {
|
||||
const { x: ax, y: ay } = computeActualPos(el, matrixW, matrixH);
|
||||
const finfo = FONT_MAP[el.font] || FONT_MAP.press_start;
|
||||
|
||||
switch (el.type) {
|
||||
case 'text': {
|
||||
const t1 = el.text || '', t2 = el.text2 || '';
|
||||
const w = Math.max(t1.length, t2.length) * finfo.charW;
|
||||
const h = t2 ? finfo.sizePx * 2 + (el.lineSpacing ?? 2) : finfo.sizePx;
|
||||
const bx = el.textAlign === 'center' ? ax - w / 2 : el.textAlign === 'right' ? ax - w : ax;
|
||||
return { x: bx, y: ay, w, h };
|
||||
}
|
||||
case 'dynamic_text': {
|
||||
const key = el.binding?.key || '?';
|
||||
const w = (`{${key}}`).length * finfo.charW;
|
||||
const bx = el.textAlign === 'center' ? ax - w / 2 : el.textAlign === 'right' ? ax - w : ax;
|
||||
return { x: bx, y: ay, w, h: finfo.sizePx };
|
||||
}
|
||||
case 'clock': {
|
||||
const t1 = el.format || '%H:%M', t2 = el.format2 || '';
|
||||
const w = Math.max(t1.length, t2.length) * finfo.charW;
|
||||
const h = t2 ? finfo.sizePx * 2 + (el.lineSpacing ?? 2) : finfo.sizePx;
|
||||
const bx = el.textAlign === 'center' ? ax - w / 2 : el.textAlign === 'right' ? ax - w : ax;
|
||||
return { x: bx, y: ay, w, h };
|
||||
}
|
||||
case 'countdown': {
|
||||
const pt = el.previewText || '--d --h';
|
||||
const w = pt.length * finfo.charW;
|
||||
const bx = el.textAlign === 'center' ? ax - w / 2 : el.textAlign === 'right' ? ax - w : ax;
|
||||
return { x: bx, y: ay, w, h: finfo.sizePx };
|
||||
}
|
||||
case 'rectangle':
|
||||
case 'rounded_rectangle':
|
||||
case 'ellipse':
|
||||
case 'arc':
|
||||
return { x: ax, y: ay, w: el.width, h: el.height };
|
||||
case 'pixel':
|
||||
return { x: ax, y: ay, w: 1, h: 1 };
|
||||
case 'line':
|
||||
return {
|
||||
x: Math.min(el.x0, el.x1), y: Math.min(el.y0, el.y1),
|
||||
w: Math.max(1, Math.abs(el.x1 - el.x0)),
|
||||
h: Math.max(1, Math.abs(el.y1 - el.y0)),
|
||||
};
|
||||
case 'divider':
|
||||
return el.orientation === 'horizontal'
|
||||
? { x: 0, y: ay, w: matrixW, h: 1 }
|
||||
: { x: ax, y: 0, w: 1, h: matrixH };
|
||||
case 'progress_bar':
|
||||
return { x: ax, y: ay, w: el.barWidth ?? 60, h: el.barHeight ?? 6 };
|
||||
case 'marquee': {
|
||||
const mfinfo = FONT_MAP[el.font] || FONT_MAP.press_start;
|
||||
return { x: 0, y: ay, w: matrixW, h: mfinfo.sizePx };
|
||||
}
|
||||
case 'gauge':
|
||||
return { x: ax, y: ay, w: el.width ?? 32, h: el.height ?? 32 };
|
||||
case 'sparkline':
|
||||
return { x: ax, y: ay, w: el.width ?? 40, h: el.height ?? 12 };
|
||||
case 'pips': {
|
||||
const pc = el.count ?? 5, ps = el.pipSize ?? 4, pg = el.pipSpacing ?? 2;
|
||||
return { x: ax, y: ay, w: pc * ps + (pc - 1) * pg, h: ps };
|
||||
}
|
||||
case 'section':
|
||||
return { x: ax, y: ay, w: 0, h: 0 };
|
||||
default:
|
||||
return { x: ax, y: ay, w: 4, h: 4 };
|
||||
}
|
||||
}
|
||||
|
||||
// ── Resize handle support ─────────────────────────────────────────────
|
||||
// Returns 8 handle points for a rectangle in LED pixel space
|
||||
function _getRectHandles(el, matrixW, matrixH) {
|
||||
const { x: ax, y: ay } = computeActualPos(el, matrixW, matrixH);
|
||||
const w = el.width, h = el.height;
|
||||
const cx = ax + w / 2, cy = ay + h / 2;
|
||||
return {
|
||||
nw: { x: ax, y: ay },
|
||||
n: { x: cx, y: ay },
|
||||
ne: { x: ax + w, y: ay },
|
||||
w: { x: ax, y: cy },
|
||||
e: { x: ax + w, y: cy },
|
||||
sw: { x: ax, y: ay + h },
|
||||
s: { x: cx, y: ay + h },
|
||||
se: { x: ax + w, y: ay + h },
|
||||
};
|
||||
}
|
||||
|
||||
// Returns the handle direction under LED-space point (lx, ly), or null
|
||||
function getResizeHandle(el, lx, ly, matrixW, matrixH) {
|
||||
if (!['rectangle', 'rounded_rectangle', 'ellipse', 'arc', 'gauge', 'sparkline'].includes(el.type)) return null;
|
||||
const handles = _getRectHandles(el, matrixW, matrixH);
|
||||
const PAD = 4;
|
||||
for (const [dir, pt] of Object.entries(handles)) {
|
||||
if (Math.abs(lx - pt.x) <= PAD && Math.abs(ly - pt.y) <= PAD) return dir;
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
const _HANDLE_CURSORS = {
|
||||
nw: 'nw-resize', n: 'n-resize', ne: 'ne-resize',
|
||||
w: 'w-resize', e: 'e-resize',
|
||||
sw: 'sw-resize', s: 's-resize', se: 'se-resize',
|
||||
};
|
||||
function getCursorForHandle(handle) {
|
||||
return _HANDLE_CURSORS[handle] || 'crosshair';
|
||||
}
|
||||
|
||||
// ── Hit test ─────────────────────────────────────────────────────────
|
||||
function hitTest(el, lx, ly, matrixW, matrixH) {
|
||||
const PAD = 3;
|
||||
const bb = getBoundingBox(el, matrixW, matrixH);
|
||||
return (
|
||||
lx >= bb.x - PAD && lx <= bb.x + bb.w + PAD &&
|
||||
ly >= bb.y - PAD && ly <= bb.y + bb.h + PAD
|
||||
);
|
||||
}
|
||||
|
||||
// ── Draw a single element ─────────────────────────────────────────────
|
||||
function _drawElement(ctx, el, SCALE, matrixW, matrixH, opts = {}) {
|
||||
const s = SCALE;
|
||||
const { x: ax, y: ay } = computeActualPos(el, matrixW, matrixH);
|
||||
const belowBreakpoint = el.minWidth > 0 && matrixW < el.minWidth;
|
||||
const hidden = el.visible === false;
|
||||
|
||||
ctx.save();
|
||||
if (hidden) ctx.globalAlpha = 0.12;
|
||||
else if (belowBreakpoint) ctx.globalAlpha = 0.25;
|
||||
|
||||
// Blink animation: when blinkOff, fully hide blinking elements
|
||||
if (el.blink) {
|
||||
if (opts.blinkOff) { ctx.restore(); return; }
|
||||
ctx.globalAlpha *= 0.55;
|
||||
}
|
||||
|
||||
// Helper: compute draw X for text alignment
|
||||
const _textX = (text, finfo) => {
|
||||
const tw = text.length * finfo.charW * s;
|
||||
if (el.textAlign === 'center') return ax * s - tw / 2;
|
||||
if (el.textAlign === 'right') return ax * s - tw;
|
||||
return ax * s;
|
||||
};
|
||||
|
||||
try {
|
||||
switch (el.type) {
|
||||
case 'text':
|
||||
case 'dynamic_text':
|
||||
case 'clock': {
|
||||
const finfo = FONT_MAP[el.font] || FONT_MAP.press_start;
|
||||
const key = el.binding?.key || '?';
|
||||
const pv = opts.previewValues?.[key];
|
||||
// Substitute {variable} tokens in text using previewValues
|
||||
const _subVars = str => (str || '').replace(/\{(\w+)\}/g, (_, k) => {
|
||||
const v = opts.previewValues?.[k];
|
||||
return v !== undefined && v !== '' ? String(v) : `{${k}}`;
|
||||
});
|
||||
const displayText =
|
||||
el.type === 'text' ? _subVars(el.text || '')
|
||||
: el.type === 'clock' ? (el.format || '%H:%M')
|
||||
: (pv !== undefined && pv !== '' ? String(pv) : `{${key}}`);
|
||||
ctx.font = `${finfo.sizePx * s}px ${finfo.family}`;
|
||||
ctx.fillStyle = `rgb(${el.r},${el.g},${el.b})`;
|
||||
ctx.fillText(displayText, _textX(displayText, finfo), (ay + finfo.sizePx) * s);
|
||||
// Second line (text and clock)
|
||||
if (el.type === 'text' && el.text2) {
|
||||
const t2 = _subVars(el.text2);
|
||||
const y2 = ay + finfo.sizePx + (el.lineSpacing ?? 2);
|
||||
ctx.fillText(t2, _textX(t2, finfo), (y2 + finfo.sizePx) * s);
|
||||
}
|
||||
if (el.type === 'clock' && el.format2) {
|
||||
const y2 = ay + finfo.sizePx + (el.lineSpacing ?? 2);
|
||||
ctx.fillText(el.format2, _textX(el.format2, finfo), (y2 + finfo.sizePx) * s);
|
||||
}
|
||||
break;
|
||||
}
|
||||
|
||||
case 'countdown': {
|
||||
const finfo = FONT_MAP[el.font] || FONT_MAP.press_start;
|
||||
const t = el.previewText || '--d --h';
|
||||
ctx.font = `${finfo.sizePx * s}px ${finfo.family}`;
|
||||
ctx.fillStyle = `rgb(${el.r},${el.g},${el.b})`;
|
||||
ctx.fillText(t, _textX(t, finfo), (ay + finfo.sizePx) * s);
|
||||
break;
|
||||
}
|
||||
|
||||
case 'rectangle': {
|
||||
const rx = ax * s, ry = ay * s;
|
||||
const rw = el.width * s, rh = el.height * s;
|
||||
if (el.hasFill) {
|
||||
ctx.fillStyle = `rgb(${el.fillR},${el.fillG},${el.fillB})`;
|
||||
ctx.fillRect(rx, ry, rw, rh);
|
||||
}
|
||||
if (el.hasOutline) {
|
||||
ctx.strokeStyle = `rgb(${el.outR},${el.outG},${el.outB})`;
|
||||
ctx.lineWidth = 1;
|
||||
ctx.strokeRect(rx, ry, rw, rh);
|
||||
}
|
||||
break;
|
||||
}
|
||||
|
||||
case 'ellipse': {
|
||||
const cx = (ax + el.width / 2) * s;
|
||||
const cy = (ay + el.height / 2) * s;
|
||||
const rx = (el.width / 2) * s;
|
||||
const ry = (el.height / 2) * s;
|
||||
ctx.beginPath();
|
||||
ctx.ellipse(cx, cy, rx, ry, 0, 0, Math.PI * 2);
|
||||
if (el.hasFill) {
|
||||
ctx.fillStyle = `rgb(${el.fillR},${el.fillG},${el.fillB})`;
|
||||
ctx.fill();
|
||||
}
|
||||
if (el.hasOutline) {
|
||||
ctx.strokeStyle = `rgb(${el.outR},${el.outG},${el.outB})`;
|
||||
ctx.lineWidth = 1;
|
||||
ctx.stroke();
|
||||
}
|
||||
break;
|
||||
}
|
||||
|
||||
case 'arc': {
|
||||
const cx = (ax + el.width / 2) * s;
|
||||
const cy = (ay + el.height / 2) * s;
|
||||
const rx = (el.width / 2) * s;
|
||||
const ry = (el.height / 2) * s;
|
||||
// PIL: 0°=right, clockwise. Canvas: same with anticlockwise=false
|
||||
const startRad = (el.startAngle ?? 0) * Math.PI / 180;
|
||||
const endRad = (el.endAngle ?? 270) * Math.PI / 180;
|
||||
ctx.beginPath();
|
||||
ctx.ellipse(cx, cy, rx, ry, 0, startRad, endRad, false);
|
||||
ctx.strokeStyle = `rgb(${el.r},${el.g},${el.b})`;
|
||||
ctx.lineWidth = Math.max(1, el.lineWidth || 2);
|
||||
ctx.stroke();
|
||||
break;
|
||||
}
|
||||
|
||||
case 'pixel': {
|
||||
ctx.fillStyle = `rgb(${el.r},${el.g},${el.b})`;
|
||||
ctx.fillRect(ax * s, ay * s, s, s);
|
||||
break;
|
||||
}
|
||||
|
||||
case 'rounded_rectangle': {
|
||||
const rx = ax * s, ry = ay * s;
|
||||
const rw = el.width * s, rh = el.height * s;
|
||||
const rad = Math.min((el.borderRadius ?? 3) * s, rw / 2, rh / 2);
|
||||
ctx.beginPath();
|
||||
ctx.roundRect(rx, ry, rw, rh, rad);
|
||||
if (el.hasFill) {
|
||||
ctx.fillStyle = `rgb(${el.fillR},${el.fillG},${el.fillB})`;
|
||||
ctx.fill();
|
||||
}
|
||||
if (el.hasOutline) {
|
||||
ctx.strokeStyle = `rgb(${el.outR},${el.outG},${el.outB})`;
|
||||
ctx.lineWidth = 1;
|
||||
ctx.stroke();
|
||||
}
|
||||
break;
|
||||
}
|
||||
|
||||
case 'line': {
|
||||
ctx.strokeStyle = `rgb(${el.r},${el.g},${el.b})`;
|
||||
ctx.lineWidth = Math.max(1, el.lineWidth || 1);
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(el.x0 * s, el.y0 * s);
|
||||
ctx.lineTo(el.x1 * s, el.y1 * s);
|
||||
ctx.stroke();
|
||||
break;
|
||||
}
|
||||
|
||||
case 'divider': {
|
||||
const isH = (el.orientation || 'horizontal') === 'horizontal';
|
||||
ctx.strokeStyle = `rgb(${el.r},${el.g},${el.b})`;
|
||||
ctx.lineWidth = 1;
|
||||
ctx.beginPath();
|
||||
if (isH) {
|
||||
ctx.moveTo(0, ay * s + 0.5);
|
||||
ctx.lineTo(_canvas.width, ay * s + 0.5);
|
||||
} else {
|
||||
ctx.moveTo(ax * s + 0.5, 0);
|
||||
ctx.lineTo(ax * s + 0.5, _canvas.height);
|
||||
}
|
||||
ctx.stroke();
|
||||
break;
|
||||
}
|
||||
|
||||
case 'pips': {
|
||||
const pipCount = Math.max(1, el.count ?? 5);
|
||||
const pvPips = opts.previewValues?.[el.binding?.key];
|
||||
const filledN = pvPips !== undefined
|
||||
? Math.max(0, Math.min(pipCount, Math.round(parseFloat(pvPips) || 0)))
|
||||
: Math.max(0, Math.min(pipCount, el.filled ?? 3));
|
||||
const ps = Math.max(1, el.pipSize ?? 4);
|
||||
const pg = Math.max(0, el.pipSpacing ?? 2);
|
||||
for (let i = 0; i < pipCount; i++) {
|
||||
const isFilled = i < filledN;
|
||||
if (!isFilled && !el.showEmpty) continue;
|
||||
ctx.fillStyle = isFilled
|
||||
? `rgb(${el.r},${el.g},${el.b})`
|
||||
: `rgb(${el.emptyR ?? 50},${el.emptyG ?? 50},${el.emptyB ?? 50})`;
|
||||
ctx.fillRect((ax + i * (ps + pg)) * s, ay * s, ps * s, ps * s);
|
||||
}
|
||||
break;
|
||||
}
|
||||
|
||||
case 'sparkline': {
|
||||
const slW = el.width ?? 40, slH = el.height ?? 12;
|
||||
const count = Math.max(1, el.barCount ?? 8);
|
||||
const spacing = el.barSpacing ?? 1;
|
||||
const barW = Math.max(1, Math.floor((slW - spacing * (count - 1)) / count));
|
||||
const rawVals = (el.previewData || '').split(',')
|
||||
.map(v => parseFloat(v.trim())).filter(n => !isNaN(n));
|
||||
while (rawVals.length < count) rawVals.push(0);
|
||||
const maxV = Math.max(...rawVals.slice(0, count), 0.001);
|
||||
const rx = ax * s, ry = ay * s;
|
||||
if (el.hasBg) {
|
||||
ctx.fillStyle = `rgb(${el.bgR ?? 30},${el.bgG ?? 30},${el.bgB ?? 30})`;
|
||||
ctx.fillRect(rx, ry, slW * s, slH * s);
|
||||
}
|
||||
ctx.fillStyle = `rgb(${el.r},${el.g},${el.b})`;
|
||||
for (let i = 0; i < count; i++) {
|
||||
const norm = Math.max(0, Math.min(1, rawVals[i] / maxV));
|
||||
const barH = Math.max(1, Math.round(slH * norm));
|
||||
const bx = rx + (barW + spacing) * i * s;
|
||||
const by = ry + (slH - barH) * s;
|
||||
ctx.fillRect(bx, by, barW * s, barH * s);
|
||||
}
|
||||
break;
|
||||
}
|
||||
|
||||
case 'gauge': {
|
||||
const gw = (el.width ?? 32), gh = (el.height ?? 32);
|
||||
const cx = (ax + gw / 2) * s, cy = (ay + gh / 2) * s;
|
||||
const rx = (gw / 2) * s, ry = (gh / 2) * s;
|
||||
const lw = Math.max(1, (el.lineWidth ?? 3));
|
||||
const startDeg = el.startAngle ?? 135;
|
||||
const endDeg = el.endAngle ?? 45;
|
||||
// Arc sweep: from startDeg clockwise to endDeg (PIL convention)
|
||||
const totalSweep = ((endDeg - startDeg) + 360) % 360 || 360;
|
||||
const pvGauge = opts.previewValues?.[el.binding?.key];
|
||||
const pct = pvGauge !== undefined
|
||||
? Math.max(0, Math.min(100, parseFloat(pvGauge) || 0)) / 100
|
||||
: Math.max(0, Math.min(100, el.previewPct ?? 65)) / 100;
|
||||
const fillSweep = totalSweep * pct;
|
||||
const toRad = deg => (deg - 90) * Math.PI / 180; // canvas 0=top, PIL 0=right → offset -90
|
||||
|
||||
// Track arc
|
||||
if (el.hasTrack !== false) {
|
||||
ctx.beginPath();
|
||||
ctx.ellipse(cx, cy, rx - lw / 2, ry - lw / 2, 0, toRad(startDeg), toRad(startDeg + totalSweep), false);
|
||||
ctx.strokeStyle = `rgb(${el.trackR ?? 40},${el.trackG ?? 40},${el.trackB ?? 40})`;
|
||||
ctx.lineWidth = lw * s;
|
||||
ctx.stroke();
|
||||
}
|
||||
// Fill arc
|
||||
if (pct > 0) {
|
||||
ctx.beginPath();
|
||||
ctx.ellipse(cx, cy, rx - lw / 2, ry - lw / 2, 0, toRad(startDeg), toRad(startDeg + fillSweep), false);
|
||||
ctx.strokeStyle = `rgb(${el.r},${el.g},${el.b})`;
|
||||
ctx.lineWidth = lw * s;
|
||||
ctx.stroke();
|
||||
}
|
||||
// Centre label
|
||||
if (el.showLabel) {
|
||||
const gfinfo = FONT_MAP[el.font || 'four_by_six'] || FONT_MAP.four_by_six;
|
||||
const labelText = Math.round(pct * 100) + '%';
|
||||
ctx.font = `${gfinfo.sizePx * s}px ${gfinfo.family}`;
|
||||
ctx.fillStyle = `rgb(${el.labelR ?? 200},${el.labelG ?? 200},${el.labelB ?? 200})`;
|
||||
const ltw = ctx.measureText(labelText).width;
|
||||
ctx.fillText(labelText, cx - ltw / 2, cy + (gfinfo.sizePx * s) / 2);
|
||||
}
|
||||
break;
|
||||
}
|
||||
|
||||
case 'marquee': {
|
||||
const finfo = FONT_MAP[el.font] || FONT_MAP.press_start;
|
||||
const text = el.text || 'Scrolling text';
|
||||
const tw = text.length * finfo.charW * s;
|
||||
const gap = (el.gap ?? 16) * s;
|
||||
const totalW = tw + gap;
|
||||
const tick = opts.animTick ?? 0;
|
||||
const speed = (el.scrollSpeed ?? 1) * 2;
|
||||
const scrolled = (tick * speed) % totalW;
|
||||
// left: text enters from right; right: text enters from left
|
||||
const startX = el.direction === 'right'
|
||||
? scrolled - tw
|
||||
: matrixW * s - scrolled;
|
||||
ctx.font = `${finfo.sizePx * s}px ${finfo.family}`;
|
||||
ctx.fillStyle = `rgb(${el.r},${el.g},${el.b})`;
|
||||
// Clip to canvas width so text doesn't bleed outside
|
||||
ctx.save();
|
||||
ctx.beginPath();
|
||||
ctx.rect(0, ay * s - 1, matrixW * s, (finfo.sizePx + 2) * s);
|
||||
ctx.clip();
|
||||
for (let i = -1; i <= 2; i++) {
|
||||
ctx.fillText(text, startX + i * totalW, (ay + finfo.sizePx) * s);
|
||||
}
|
||||
ctx.restore();
|
||||
break;
|
||||
}
|
||||
|
||||
case 'progress_bar': {
|
||||
const bw = el.barWidth ?? 60, bh = el.barHeight ?? 6;
|
||||
const pvPb = opts.previewValues?.[el.binding?.key];
|
||||
const pct = pvPb !== undefined
|
||||
? Math.max(0, Math.min(100, parseFloat(pvPb) || 0)) / 100
|
||||
: Math.max(0, Math.min(100, el.previewPct ?? 65)) / 100;
|
||||
const rx = ax * s, ry = ay * s;
|
||||
if (el.hasBg) {
|
||||
ctx.fillStyle = `rgb(${el.bgR ?? 30},${el.bgG ?? 30},${el.bgB ?? 30})`;
|
||||
ctx.fillRect(rx, ry, bw * s, bh * s);
|
||||
}
|
||||
const fillW = Math.max(0, Math.round(bw * pct));
|
||||
if (fillW > 0) {
|
||||
ctx.fillStyle = `rgb(${el.r},${el.g},${el.b})`;
|
||||
ctx.fillRect(rx, ry, fillW * s, bh * s);
|
||||
}
|
||||
if (el.hasOutline) {
|
||||
ctx.strokeStyle = `rgb(${el.outR ?? 100},${el.outG ?? 100},${el.outB ?? 100})`;
|
||||
ctx.lineWidth = 1;
|
||||
ctx.strokeRect(rx, ry, bw * s, bh * s);
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
if (belowBreakpoint) {
|
||||
ctx.globalAlpha = 0.6;
|
||||
const bb = getBoundingBox(el, matrixW, matrixH);
|
||||
ctx.font = `${Math.max(8, s * 2)}px monospace`;
|
||||
ctx.fillStyle = '#facc15';
|
||||
ctx.fillText(`≥${el.minWidth}px`, bb.x * s, (bb.y + 4) * s);
|
||||
}
|
||||
} finally {
|
||||
ctx.restore();
|
||||
}
|
||||
}
|
||||
|
||||
// ── Selection indicator ──────────────────────────────────────────────
|
||||
function _drawSelection(ctx, el, SCALE, matrixW, matrixH) {
|
||||
const bb = getBoundingBox(el, matrixW, matrixH);
|
||||
const PAD = 2, s = SCALE;
|
||||
const rx = bb.x * s - PAD, ry = bb.y * s - PAD;
|
||||
const rw = bb.w * s + PAD * 2, rh = bb.h * s + PAD * 2;
|
||||
|
||||
ctx.save();
|
||||
ctx.strokeStyle = '#3b82f6';
|
||||
ctx.lineWidth = 1;
|
||||
ctx.setLineDash([3, 2]);
|
||||
ctx.strokeRect(rx, ry, rw, rh);
|
||||
ctx.setLineDash([]);
|
||||
|
||||
if (el.xAnchor || el.yAnchor) {
|
||||
ctx.font = `${Math.max(7, s)}px sans-serif`;
|
||||
ctx.fillStyle = '#a78bfa';
|
||||
const anchorText = [
|
||||
el.xAnchor ? `x:${el.xAnchor[0]}` : '',
|
||||
el.yAnchor ? `y:${el.yAnchor[0]}` : '',
|
||||
].filter(Boolean).join(' ');
|
||||
if (anchorText) ctx.fillText(anchorText, rx + 1, ry - 2);
|
||||
}
|
||||
|
||||
// Resize handles: on rect, rounded rect, ellipse
|
||||
if (['rectangle', 'rounded_rectangle', 'ellipse', 'arc', 'gauge', 'sparkline'].includes(el.type)) {
|
||||
const handles = _getRectHandles(el, matrixW, matrixH);
|
||||
const HS = 5;
|
||||
ctx.fillStyle = 'white';
|
||||
ctx.strokeStyle = '#2563eb';
|
||||
ctx.lineWidth = 1;
|
||||
for (const pt of Object.values(handles)) {
|
||||
const hx = pt.x * s - HS / 2;
|
||||
const hy = pt.y * s - HS / 2;
|
||||
ctx.fillRect(hx, hy, HS, HS);
|
||||
ctx.strokeRect(hx, hy, HS, HS);
|
||||
}
|
||||
} else {
|
||||
// Corner dots for non-rectangle elements
|
||||
ctx.fillStyle = '#3b82f6';
|
||||
const HS = 4;
|
||||
for (const [hx, hy] of [
|
||||
[rx - HS / 2, ry - HS / 2], [rx + rw - HS / 2, ry - HS / 2],
|
||||
[rx - HS / 2, ry + rh - HS / 2], [rx + rw - HS / 2, ry + rh - HS / 2],
|
||||
]) ctx.fillRect(hx, hy, HS, HS);
|
||||
}
|
||||
|
||||
ctx.restore();
|
||||
}
|
||||
|
||||
// ── Dimension tooltip while dragging ─────────────────────────────────
|
||||
function drawDragTooltip(ctx, el, SCALE, matrixW, matrixH) {
|
||||
const bb = getBoundingBox(el, matrixW, matrixH);
|
||||
const label = el.type === 'rectangle'
|
||||
? `${el.width}×${el.height}`
|
||||
: `${bb.x},${bb.y}`;
|
||||
const s = SCALE;
|
||||
ctx.save();
|
||||
ctx.font = `${Math.max(9, s * 1.5)}px monospace`;
|
||||
const tw = ctx.measureText(label).width;
|
||||
const tx = bb.x * s, ty = (bb.y - 2) * s;
|
||||
ctx.fillStyle = 'rgba(0,0,0,0.7)';
|
||||
ctx.fillRect(tx - 2, ty - 10, tw + 4, 12);
|
||||
ctx.fillStyle = 'white';
|
||||
ctx.fillText(label, tx, ty);
|
||||
ctx.restore();
|
||||
}
|
||||
|
||||
// ── Public API ───────────────────────────────────────────────────────
|
||||
|
||||
function init(canvasEl) {
|
||||
_canvas = canvasEl;
|
||||
_ctx = canvasEl.getContext('2d');
|
||||
}
|
||||
|
||||
function setGrid(show) { _showGrid = show; }
|
||||
|
||||
function updateCanvasSize(matrixW, matrixH, SCALE) {
|
||||
if (!_canvas) return;
|
||||
_canvas.width = matrixW * SCALE;
|
||||
_canvas.height = matrixH * SCALE;
|
||||
}
|
||||
|
||||
function render(elements, selectedId, matrixW, matrixH, SCALE, opts = {}) {
|
||||
if (!_ctx) return;
|
||||
const cW = matrixW * SCALE, cH = matrixH * SCALE;
|
||||
|
||||
const bg = opts.bgColor;
|
||||
_ctx.fillStyle = bg ? `rgb(${bg.r},${bg.g},${bg.b})` : '#000';
|
||||
_ctx.fillRect(0, 0, cW, cH);
|
||||
|
||||
if (_showGrid) {
|
||||
_ctx.strokeStyle = 'rgba(255,255,255,0.07)';
|
||||
_ctx.lineWidth = 0.5;
|
||||
for (let x = SCALE; x < cW; x += SCALE) {
|
||||
_ctx.beginPath(); _ctx.moveTo(x, 0); _ctx.lineTo(x, cH); _ctx.stroke();
|
||||
}
|
||||
for (let y = SCALE; y < cH; y += SCALE) {
|
||||
_ctx.beginPath(); _ctx.moveTo(0, y); _ctx.lineTo(cW, y); _ctx.stroke();
|
||||
}
|
||||
}
|
||||
|
||||
for (const el of elements) _drawElement(_ctx, el, SCALE, matrixW, matrixH, opts);
|
||||
|
||||
if (opts.showRuler) {
|
||||
_ctx.save();
|
||||
_ctx.fillStyle = 'rgba(255,255,255,0.08)';
|
||||
_ctx.fillRect(0, 0, cW, SCALE); // top strip
|
||||
_ctx.fillRect(0, 0, SCALE, cH); // left strip
|
||||
_ctx.strokeStyle = 'rgba(255,255,255,0.5)';
|
||||
_ctx.fillStyle = 'rgba(255,255,255,0.6)';
|
||||
_ctx.font = `${Math.max(5, SCALE - 1)}px monospace`;
|
||||
const step = SCALE >= 4 ? 8 : 16;
|
||||
for (let px = 0; px <= matrixW; px += step) {
|
||||
const cx = px * SCALE;
|
||||
const major = px % 32 === 0;
|
||||
_ctx.lineWidth = 0.5;
|
||||
_ctx.beginPath(); _ctx.moveTo(cx, 0); _ctx.lineTo(cx, major ? SCALE : SCALE * 0.5); _ctx.stroke();
|
||||
if (major && px > 0 && px < matrixW - 4) _ctx.fillText(String(px), cx + 1, SCALE - 1);
|
||||
}
|
||||
for (let py = 0; py <= matrixH; py += step) {
|
||||
const cy = py * SCALE;
|
||||
const major = py % 32 === 0;
|
||||
_ctx.beginPath(); _ctx.moveTo(0, cy); _ctx.lineTo(major ? SCALE : SCALE * 0.5, cy); _ctx.stroke();
|
||||
if (major && py > 0 && py < matrixH - 4) _ctx.fillText(String(py), 1, cy + SCALE - 1);
|
||||
}
|
||||
_ctx.restore();
|
||||
}
|
||||
|
||||
if (opts.showGuides) {
|
||||
_ctx.save();
|
||||
_ctx.strokeStyle = 'rgba(255,60,60,0.45)';
|
||||
_ctx.lineWidth = 1;
|
||||
_ctx.setLineDash([4, 3]);
|
||||
const mx = Math.floor(cW / 2) + 0.5;
|
||||
const my = Math.floor(cH / 2) + 0.5;
|
||||
_ctx.beginPath(); _ctx.moveTo(mx, 0); _ctx.lineTo(mx, cH); _ctx.stroke();
|
||||
_ctx.beginPath(); _ctx.moveTo(0, my); _ctx.lineTo(cW, my); _ctx.stroke();
|
||||
_ctx.setLineDash([]);
|
||||
_ctx.restore();
|
||||
}
|
||||
|
||||
const sel = selectedId != null ? elements.find(e => e.id === selectedId) : null;
|
||||
if (sel) {
|
||||
_drawSelection(_ctx, sel, SCALE, matrixW, matrixH);
|
||||
if (opts.showTooltip) drawDragTooltip(_ctx, sel, SCALE, matrixW, matrixH);
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
init, render, setGrid, updateCanvasSize,
|
||||
hitTest, getBoundingBox, computeActualPos, resolveAnchor,
|
||||
getResizeHandle, getCursorForHandle,
|
||||
ELEMENT_DEFAULTS, FONT_MAP, DISPLAY_PRESETS,
|
||||
};
|
||||
})();
|
||||
@@ -0,0 +1,256 @@
|
||||
/* global debugLog */
|
||||
// HTMX swap/script-execution configuration and section toggle helpers
|
||||
// Extracted from templates/v3/base.html so browsers cache it as a static asset.
|
||||
// Configure HTMX to evaluate scripts in swapped content and fix insertBefore errors
|
||||
(function() {
|
||||
function setupScriptExecution() {
|
||||
if (document.body) {
|
||||
// Fix HTMX insertBefore errors by validating targets before swap
|
||||
document.body.addEventListener('htmx:beforeSwap', function(event) {
|
||||
try {
|
||||
const target = event.detail.target;
|
||||
if (!target) {
|
||||
console.warn('[HTMX] Target is null, skipping swap');
|
||||
event.detail.shouldSwap = false;
|
||||
return false;
|
||||
}
|
||||
|
||||
// Check if target is a valid DOM element
|
||||
if (!(target instanceof Element)) {
|
||||
console.warn('[HTMX] Target is not a valid Element, skipping swap');
|
||||
event.detail.shouldSwap = false;
|
||||
return false;
|
||||
}
|
||||
|
||||
// Check if target has a parent node (required for insertBefore)
|
||||
if (!target.parentNode) {
|
||||
console.warn('[HTMX] Target has no parent node, skipping swap');
|
||||
event.detail.shouldSwap = false;
|
||||
return false;
|
||||
}
|
||||
|
||||
// Ensure target is in the DOM
|
||||
if (!document.body.contains(target) && !document.head.contains(target)) {
|
||||
console.warn('[HTMX] Target is not in DOM, skipping swap');
|
||||
event.detail.shouldSwap = false;
|
||||
return false;
|
||||
}
|
||||
|
||||
// Additional check: ensure parent is also in DOM
|
||||
if (target.parentNode && !document.body.contains(target.parentNode) && !document.head.contains(target.parentNode)) {
|
||||
console.warn('[HTMX] Target parent is not in DOM, skipping swap');
|
||||
event.detail.shouldSwap = false;
|
||||
return false;
|
||||
}
|
||||
|
||||
// All checks passed, allow swap
|
||||
return true;
|
||||
} catch (e) {
|
||||
// If validation fails, cancel swap
|
||||
console.warn('[HTMX] Error validating target:', e);
|
||||
event.detail.shouldSwap = false;
|
||||
return false;
|
||||
}
|
||||
});
|
||||
|
||||
// Suppress HTMX insertBefore errors and other noisy errors - they're harmless but noisy
|
||||
const originalError = console.error;
|
||||
const originalWarn = console.warn;
|
||||
|
||||
console.error = function(...args) {
|
||||
const errorStr = args.join(' ');
|
||||
const errorStack = args.find(arg => arg && typeof arg === 'string' && arg.includes('htmx')) || '';
|
||||
|
||||
// Suppress HTMX insertBefore errors (comprehensive check)
|
||||
// These occur when HTMX tries to swap content but the target element is null
|
||||
// Usually happens due to timing/race conditions and is harmless
|
||||
if (errorStr.includes("insertBefore") ||
|
||||
errorStr.includes("Cannot read properties of null") ||
|
||||
errorStr.includes("reading 'insertBefore'")) {
|
||||
// Check if it's from HTMX by looking at stack trace or error string
|
||||
// Also check the call stack if available
|
||||
const isHtmxError = errorStr.includes('htmx') ||
|
||||
errorStack.includes('htmx') ||
|
||||
args.some(arg => {
|
||||
if (typeof arg === 'string') {
|
||||
return arg.includes('htmx');
|
||||
}
|
||||
// Check error objects for stack traces
|
||||
if (arg && typeof arg === 'object' && arg.stack) {
|
||||
return arg.stack.includes('htmx');
|
||||
}
|
||||
return false;
|
||||
});
|
||||
|
||||
if (isHtmxError) {
|
||||
return; // Suppress - this is a harmless HTMX timing/race condition issue
|
||||
}
|
||||
}
|
||||
|
||||
// Suppress script execution errors from malformed HTML
|
||||
if (errorStr.includes("Failed to execute 'appendChild' on 'Node'") ||
|
||||
errorStr.includes("Failed to execute 'insertBefore' on 'Node'")) {
|
||||
if (errorStr.includes('Unexpected token')) {
|
||||
return; // Suppress malformed HTML errors
|
||||
}
|
||||
}
|
||||
originalError.apply(console, args);
|
||||
};
|
||||
|
||||
console.warn = function(...args) {
|
||||
const warnStr = args.join(' ');
|
||||
// Suppress Permissions-Policy warnings (harmless browser warnings)
|
||||
if (warnStr.includes('Permissions-Policy header') ||
|
||||
warnStr.includes('Unrecognized feature') ||
|
||||
warnStr.includes('Origin trial controlled feature') ||
|
||||
warnStr.includes('browsing-topics') ||
|
||||
warnStr.includes('run-ad-auction') ||
|
||||
warnStr.includes('join-ad-interest-group') ||
|
||||
warnStr.includes('private-state-token') ||
|
||||
warnStr.includes('private-aggregation') ||
|
||||
warnStr.includes('attribution-reporting')) {
|
||||
return; // Suppress - these are harmless browser feature warnings
|
||||
}
|
||||
originalWarn.apply(console, args);
|
||||
};
|
||||
|
||||
// Handle HTMX errors gracefully with detailed logging
|
||||
document.body.addEventListener('htmx:responseError', function(event) {
|
||||
const detail = event.detail;
|
||||
const xhr = detail.xhr;
|
||||
const target = detail.target;
|
||||
|
||||
// Enhanced error logging
|
||||
console.error('HTMX response error:', {
|
||||
status: xhr?.status,
|
||||
statusText: xhr?.statusText,
|
||||
url: xhr?.responseURL,
|
||||
target: target?.id || target?.tagName,
|
||||
responseText: xhr?.responseText
|
||||
});
|
||||
|
||||
// For form submissions, log field names only — values
|
||||
// may contain API keys, passwords, or other secrets
|
||||
// that must never reach the console.
|
||||
if (target && target.tagName === 'FORM') {
|
||||
const formData = new FormData(target);
|
||||
const fieldNames = [];
|
||||
for (const [key] of formData.entries()) {
|
||||
fieldNames.push(key);
|
||||
}
|
||||
console.error('Form fields (values redacted):', fieldNames);
|
||||
|
||||
// Try to parse error response for validation details
|
||||
if (xhr?.responseText) {
|
||||
try {
|
||||
const errorData = JSON.parse(xhr.responseText);
|
||||
console.error('Error details:', {
|
||||
message: errorData.message,
|
||||
details: errorData.details,
|
||||
validation_errors: errorData.validation_errors,
|
||||
context: errorData.context
|
||||
});
|
||||
} catch {
|
||||
console.error('Error response (non-JSON):', xhr.responseText.substring(0, 500));
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
document.body.addEventListener('htmx:swapError', function(event) {
|
||||
// Log but don't break the app
|
||||
console.warn('HTMX swap error:', event.detail);
|
||||
});
|
||||
|
||||
// Execute <script> tags in swapped content ourselves, on
|
||||
// htmx:afterSwap (synchronous, right after the swap) rather
|
||||
// than relying on htmx's own script handling, which runs
|
||||
// during its later "settle" phase (~20ms after swap, per
|
||||
// htmx's defaultSettleDelay). Alpine's MutationObserver
|
||||
// processes newly-inserted x-data elements synchronously
|
||||
// as soon as the swap lands, which is BEFORE htmx's settle
|
||||
// phase - so any partial whose x-data component function
|
||||
// (e.g. wifiSetup()) is defined by an inline <script> in
|
||||
// that same partial would have that script still un-run
|
||||
// when Alpine evaluates x-data, permanently failing with
|
||||
// "wifiSetup is not defined" (Alpine does not retry).
|
||||
// Disable htmx's own native script re-execution so the
|
||||
// same script doesn't also run a second time via settle.
|
||||
if (typeof htmx !== 'undefined' && htmx.config) {
|
||||
htmx.config.allowScriptTags = false;
|
||||
}
|
||||
document.body.addEventListener('htmx:afterSwap', function(event) {
|
||||
const target = event.detail && event.detail.target;
|
||||
if (!target || !(target instanceof Element)) return;
|
||||
target.querySelectorAll('script').forEach(function(oldScript) {
|
||||
const newScript = document.createElement('script');
|
||||
for (const attr of oldScript.attributes) {
|
||||
newScript.setAttribute(attr.name, attr.value);
|
||||
}
|
||||
newScript.textContent = oldScript.textContent;
|
||||
oldScript.replaceWith(newScript);
|
||||
});
|
||||
});
|
||||
|
||||
// Mark tab containers as loaded once their content settles, so switching
|
||||
// away and back doesn't re-fetch. Scoped to the "loadtab" trigger (tab
|
||||
// containers only) so modals and plugin config panels can still reload.
|
||||
document.body.addEventListener('htmx:afterSettle', function(event) {
|
||||
if (event.detail && event.detail.target) {
|
||||
const target = event.detail.target;
|
||||
const trigger = target.getAttribute('hx-trigger') || '';
|
||||
if (trigger.includes('loadtab')) {
|
||||
target.setAttribute('data-loaded', 'true');
|
||||
}
|
||||
}
|
||||
});
|
||||
} else {
|
||||
if (document.readyState === 'loading') {
|
||||
document.addEventListener('DOMContentLoaded', setupScriptExecution);
|
||||
} else {
|
||||
setTimeout(setupScriptExecution, 100);
|
||||
}
|
||||
}
|
||||
}
|
||||
setupScriptExecution();
|
||||
|
||||
// Section toggle function - define early so it's available for HTMX-loaded content
|
||||
window.toggleSection = function(sectionId) {
|
||||
const section = document.getElementById(sectionId);
|
||||
const icon = document.getElementById(sectionId + '-icon');
|
||||
if (!section) {
|
||||
console.warn('toggleSection: Could not find section for', sectionId);
|
||||
return;
|
||||
}
|
||||
if (!icon) {
|
||||
console.warn('toggleSection: Could not find icon for', sectionId);
|
||||
return;
|
||||
}
|
||||
|
||||
// Check if currently hidden by checking both class and computed display
|
||||
const hasHiddenClass = section.classList.contains('hidden');
|
||||
const computedDisplay = window.getComputedStyle(section).display;
|
||||
const isHidden = hasHiddenClass || computedDisplay === 'none';
|
||||
|
||||
if (isHidden) {
|
||||
// Show the section - remove hidden class and explicitly set display to block
|
||||
section.classList.remove('hidden');
|
||||
section.style.display = 'block';
|
||||
icon.classList.remove('fa-chevron-right');
|
||||
icon.classList.add('fa-chevron-down');
|
||||
} else {
|
||||
// Hide the section - add hidden class and set display to none
|
||||
section.classList.add('hidden');
|
||||
section.style.display = 'none';
|
||||
icon.classList.remove('fa-chevron-down');
|
||||
icon.classList.add('fa-chevron-right');
|
||||
}
|
||||
|
||||
// Keep assistive tech in sync: any toggle button that declares
|
||||
// aria-controls for this section mirrors the expanded state.
|
||||
const controlBtn = document.querySelector(`[aria-controls="${sectionId}"]`);
|
||||
if (controlBtn) {
|
||||
controlBtn.setAttribute('aria-expanded', String(isHidden));
|
||||
}
|
||||
};
|
||||
})();
|
||||
@@ -173,7 +173,14 @@
|
||||
|
||||
function setActiveTab(tab) {
|
||||
var data = getAppData();
|
||||
if (data) { data.activeTab = tab; return true; }
|
||||
if (data) {
|
||||
data.activeTab = tab;
|
||||
// Navigating from a search result should also dismiss the mobile
|
||||
// nav drawer (harmless no-op on desktop, where the drawer CSS
|
||||
// doesn't apply).
|
||||
if ('mobileNavOpen' in data) data.mobileNavOpen = false;
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
|
||||
@@ -209,6 +209,7 @@
|
||||
const removeButton = document.createElement('button');
|
||||
removeButton.type = 'button';
|
||||
removeButton.className = 'text-red-600 hover:text-red-800 px-2 py-1';
|
||||
removeButton.setAttribute('aria-label', 'Remove feed');
|
||||
removeButton.addEventListener('click', function() {
|
||||
window.removeCustomFeedRow(this);
|
||||
});
|
||||
@@ -333,6 +334,7 @@
|
||||
const removeButton = document.createElement('button');
|
||||
removeButton.type = 'button';
|
||||
removeButton.className = 'text-red-600 hover:text-red-800 px-2 py-1';
|
||||
removeButton.setAttribute('aria-label', 'Remove feed');
|
||||
removeButton.addEventListener('click', function() {
|
||||
window.removeCustomFeedRow(this);
|
||||
});
|
||||
@@ -404,7 +406,10 @@
|
||||
if (!file) return;
|
||||
|
||||
const formData = new FormData();
|
||||
formData.append('file', file);
|
||||
// Backend contract (api_v3.upload_plugin_asset): field must be named
|
||||
// "files" (request.files.getlist('files')), and the response carries
|
||||
// results in a top-level "uploaded_files" key, not nested under "data".
|
||||
formData.append('files', file);
|
||||
formData.append('plugin_id', pluginId);
|
||||
|
||||
fetch('/api/v3/plugins/assets/upload', {
|
||||
@@ -421,8 +426,8 @@
|
||||
return response.json();
|
||||
})
|
||||
.then(data => {
|
||||
if (data.status === 'success' && data.data && data.data.files && data.data.files.length > 0) {
|
||||
const uploadedFile = data.data.files[0];
|
||||
if (data.status === 'success' && data.uploaded_files && data.uploaded_files.length > 0) {
|
||||
const uploadedFile = data.uploaded_files[0];
|
||||
const row = document.querySelector(`#${fieldId}_tbody tr[data-index="${index}"]`);
|
||||
if (row) {
|
||||
const logoCell = row.querySelector('td:nth-child(3)');
|
||||
@@ -495,8 +500,6 @@
|
||||
// Append container to logoCell
|
||||
logoCell.appendChild(container);
|
||||
}
|
||||
// Allow re-uploading the same file
|
||||
event.target.value = '';
|
||||
} else {
|
||||
const notifyFn = window.showNotification || alert;
|
||||
notifyFn('Upload failed: ' + (data.message || 'Unknown error'), 'error');
|
||||
@@ -506,6 +509,12 @@
|
||||
console.error('Upload error:', error);
|
||||
const notifyFn = window.showNotification || alert;
|
||||
notifyFn('Upload failed: ' + error.message, 'error');
|
||||
})
|
||||
.finally(() => {
|
||||
// Reset regardless of outcome, so the same file can be re-selected
|
||||
// to retry after a failure (browsers won't fire "change" again
|
||||
// for an input that still holds that exact file).
|
||||
event.target.value = '';
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
@@ -58,6 +58,10 @@
|
||||
|
||||
// Track active notifications
|
||||
let activeNotifications = [];
|
||||
// onAction callbacks for notifications with an inline action button,
|
||||
// keyed by notification id (cleaned up on dismiss). A Map rather than a
|
||||
// plain object so ids can never collide with prototype properties.
|
||||
const actionCallbacks = new Map();
|
||||
let notificationCounter = 0;
|
||||
|
||||
/**
|
||||
@@ -113,6 +117,7 @@
|
||||
|
||||
// Remove from tracking array
|
||||
activeNotifications = activeNotifications.filter(id => id !== notificationId);
|
||||
actionCallbacks.delete(notificationId);
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -158,6 +163,20 @@
|
||||
|
||||
html += `<span class="flex-1 text-sm">${escapeHtml(message)}</span>`;
|
||||
|
||||
// Optional inline action button (e.g. "Restart Now" on a restart nudge).
|
||||
// The callback is stored by id and invoked via triggerAction, which
|
||||
// also dismisses the notification.
|
||||
if (options.actionLabel && typeof options.onAction === 'function') {
|
||||
actionCallbacks.set(notificationId, options.onAction);
|
||||
html += `
|
||||
<button type="button"
|
||||
onclick="window.LEDMatrixWidgets.get('notification').triggerAction('${notificationId}')"
|
||||
class="flex-shrink-0 ml-2 px-3 py-1 text-xs font-semibold rounded-md bg-white bg-opacity-20 hover:bg-opacity-30 transition-colors duration-150">
|
||||
${escapeHtml(options.actionLabel)}
|
||||
</button>
|
||||
`;
|
||||
}
|
||||
|
||||
if (dismissible) {
|
||||
html += `
|
||||
<button type="button"
|
||||
@@ -227,6 +246,17 @@
|
||||
removeNotification(notificationId);
|
||||
},
|
||||
|
||||
/**
|
||||
* Invoke a notification's onAction callback (see options.actionLabel /
|
||||
* options.onAction on show) and dismiss it.
|
||||
* @param {string} notificationId - Notification ID whose action to run
|
||||
*/
|
||||
triggerAction: function(notificationId) {
|
||||
const cb = actionCallbacks.get(notificationId);
|
||||
removeNotification(notificationId);
|
||||
if (typeof cb === 'function') cb();
|
||||
},
|
||||
|
||||
/**
|
||||
* Clear all notifications
|
||||
*/
|
||||
@@ -262,9 +292,11 @@
|
||||
}
|
||||
});
|
||||
|
||||
// Global shorthand function (backwards compatible with existing code)
|
||||
// Global shorthand function (backwards compatible with existing code).
|
||||
// Accepts either the legacy type string or a full options object
|
||||
// ({ type, duration, actionLabel, onAction, ... }).
|
||||
window.showNotification = function(message, type = 'info') {
|
||||
return showNotification(message, { type: type });
|
||||
return showNotification(message, typeof type === 'string' ? { type: type } : (type || {}));
|
||||
};
|
||||
|
||||
// Initialize container on load
|
||||
|
||||
@@ -0,0 +1,225 @@
|
||||
/**
|
||||
* Plugin Order List — shared drag-and-drop reorder list of enabled plugins.
|
||||
*
|
||||
* Factored out of the Vegas Scroll section of display.html so both Vegas mode
|
||||
* and the primary rotation (Durations tab) use one implementation. Renders
|
||||
* one draggable row per enabled plugin into a container and keeps a hidden
|
||||
* input's value in sync as a JSON array of plugin ids in display order.
|
||||
*
|
||||
* Usage:
|
||||
* PluginOrderList.init({
|
||||
* containerId: 'vegas_plugin_order', // rows render here
|
||||
* orderInputId: 'vegas_plugin_order_value', // hidden input, JSON array of ids
|
||||
* excludedInputId: 'vegas_excluded_plugins_value', // optional: adds an
|
||||
* // include-checkbox per row; unchecked ids collect here (JSON array)
|
||||
* showVegasModeBadge: true // optional: Scroll/Fixed/Static badge
|
||||
* });
|
||||
*
|
||||
* The container re-renders from /api/v3/plugins/installed each init; the
|
||||
* hidden input(s) must already hold the saved order/exclusions (JSON).
|
||||
*/
|
||||
(function() {
|
||||
'use strict';
|
||||
|
||||
const MODE_LABELS = new Map([
|
||||
['scroll', { label: 'Scroll', icon: 'fa-scroll', color: 'text-blue-600' }],
|
||||
['fixed', { label: 'Fixed', icon: 'fa-square', color: 'text-green-600' }],
|
||||
['static', { label: 'Static', icon: 'fa-pause', color: 'text-orange-600' }]
|
||||
]);
|
||||
|
||||
function init(options) {
|
||||
const container = document.getElementById(options.containerId);
|
||||
const orderInput = document.getElementById(options.orderInputId);
|
||||
const excludedInput = options.excludedInputId ? document.getElementById(options.excludedInputId) : null;
|
||||
if (!container || !orderInput) return;
|
||||
|
||||
function syncInputs() {
|
||||
const order = [];
|
||||
const excluded = [];
|
||||
container.querySelectorAll('.plugin-order-item').forEach(item => {
|
||||
const pluginId = item.dataset.pluginId;
|
||||
order.push(pluginId);
|
||||
const checkbox = item.querySelector('.plugin-order-include');
|
||||
if (checkbox && !checkbox.checked) excluded.push(pluginId);
|
||||
});
|
||||
orderInput.value = JSON.stringify(order);
|
||||
if (excludedInput) excludedInput.value = JSON.stringify(excluded);
|
||||
}
|
||||
|
||||
function setupDragAndDrop() {
|
||||
let draggedItem = null;
|
||||
container.querySelectorAll('.plugin-order-item').forEach(item => {
|
||||
item.addEventListener('dragstart', function(e) {
|
||||
draggedItem = this;
|
||||
this.style.opacity = '0.5';
|
||||
e.dataTransfer.effectAllowed = 'move';
|
||||
});
|
||||
item.addEventListener('dragend', function() {
|
||||
this.style.opacity = '1';
|
||||
draggedItem = null;
|
||||
syncInputs();
|
||||
});
|
||||
item.addEventListener('dragover', function(e) {
|
||||
e.preventDefault();
|
||||
e.dataTransfer.dropEffect = 'move';
|
||||
const rect = this.getBoundingClientRect();
|
||||
const midY = rect.top + rect.height / 2;
|
||||
if (e.clientY < midY) {
|
||||
this.style.borderTop = '2px solid #3b82f6';
|
||||
this.style.borderBottom = '';
|
||||
} else {
|
||||
this.style.borderBottom = '2px solid #3b82f6';
|
||||
this.style.borderTop = '';
|
||||
}
|
||||
});
|
||||
item.addEventListener('dragleave', function() {
|
||||
this.style.borderTop = '';
|
||||
this.style.borderBottom = '';
|
||||
});
|
||||
item.addEventListener('drop', function(e) {
|
||||
e.preventDefault();
|
||||
this.style.borderTop = '';
|
||||
this.style.borderBottom = '';
|
||||
if (draggedItem && draggedItem !== this) {
|
||||
const rect = this.getBoundingClientRect();
|
||||
const midY = rect.top + rect.height / 2;
|
||||
if (e.clientY < midY) {
|
||||
container.insertBefore(draggedItem, this);
|
||||
} else {
|
||||
container.insertBefore(draggedItem, this.nextSibling);
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
fetch('/api/v3/plugins/installed')
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
const allPlugins = (data.data && data.data.plugins) || data.plugins || [];
|
||||
const plugins = allPlugins.filter(p => p.enabled);
|
||||
if (plugins.length === 0) {
|
||||
const empty = document.createElement('p');
|
||||
empty.className = 'text-sm text-gray-500 italic';
|
||||
empty.textContent = 'No enabled plugins';
|
||||
container.textContent = '';
|
||||
container.appendChild(empty);
|
||||
return;
|
||||
}
|
||||
|
||||
let currentOrder = [];
|
||||
let excluded = [];
|
||||
try {
|
||||
currentOrder = JSON.parse(orderInput.value || '[]');
|
||||
if (excludedInput) excluded = JSON.parse(excludedInput.value || '[]');
|
||||
} catch (e) {
|
||||
console.error('Error parsing saved plugin order:', e);
|
||||
}
|
||||
// JSON.parse can succeed and still return null/objects
|
||||
// (e.g. a saved value of "null"); normalize to arrays.
|
||||
if (!Array.isArray(currentOrder)) currentOrder = [];
|
||||
if (!Array.isArray(excluded)) excluded = [];
|
||||
|
||||
// Saved order first, then any newly enabled plugins.
|
||||
const orderedPlugins = [];
|
||||
currentOrder.forEach(id => {
|
||||
const plugin = plugins.find(p => p.id === id);
|
||||
if (plugin) orderedPlugins.push(plugin);
|
||||
});
|
||||
plugins.forEach(plugin => {
|
||||
if (!orderedPlugins.find(p => p.id === plugin.id)) orderedPlugins.push(plugin);
|
||||
});
|
||||
|
||||
// Rows are built with DOM APIs rather than innerHTML — plugin
|
||||
// ids/names come from installed manifests (semi-trusted).
|
||||
container.textContent = '';
|
||||
orderedPlugins.forEach(plugin => {
|
||||
const row = document.createElement('div');
|
||||
row.className = 'flex items-center p-2 bg-gray-50 rounded border border-gray-200 cursor-move plugin-order-item';
|
||||
row.dataset.pluginId = plugin.id;
|
||||
row.draggable = true;
|
||||
|
||||
const grip = document.createElement('i');
|
||||
grip.className = 'fas fa-grip-vertical text-gray-400 mr-3';
|
||||
row.appendChild(grip);
|
||||
|
||||
if (excludedInput) {
|
||||
const isExcluded = excluded.includes(plugin.id);
|
||||
const label = document.createElement('label');
|
||||
label.className = 'flex items-center flex-1';
|
||||
const checkbox = document.createElement('input');
|
||||
checkbox.type = 'checkbox';
|
||||
checkbox.className = 'plugin-order-include h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded mr-2';
|
||||
checkbox.checked = !isExcluded;
|
||||
const name = document.createElement('span');
|
||||
name.className = 'text-sm font-medium text-gray-700';
|
||||
name.textContent = plugin.name || plugin.id;
|
||||
label.appendChild(checkbox);
|
||||
label.appendChild(name);
|
||||
row.appendChild(label);
|
||||
} else {
|
||||
const name = document.createElement('span');
|
||||
name.className = 'text-sm font-medium text-gray-700 flex-1';
|
||||
name.textContent = plugin.name || plugin.id;
|
||||
row.appendChild(name);
|
||||
}
|
||||
|
||||
if (options.showVegasModeBadge) {
|
||||
const vegasMode = plugin.vegas_mode || plugin.vegas_content_type || 'fixed';
|
||||
const modeInfo = MODE_LABELS.get(vegasMode) || MODE_LABELS.get('fixed');
|
||||
const badge = document.createElement('span');
|
||||
badge.className = `text-xs ${modeInfo.color} ml-2`;
|
||||
badge.title = `Vegas display mode: ${modeInfo.label}`;
|
||||
const badgeIcon = document.createElement('i');
|
||||
badgeIcon.className = `fas ${modeInfo.icon} mr-1`;
|
||||
badge.appendChild(badgeIcon);
|
||||
badge.appendChild(document.createTextNode(modeInfo.label));
|
||||
row.appendChild(badge);
|
||||
}
|
||||
|
||||
// Up/down buttons: touch- and keyboard-accessible
|
||||
// reordering alongside native drag-and-drop (HTML5 drag
|
||||
// events don't fire on most mobile browsers).
|
||||
const pluginLabel = plugin.name || plugin.id;
|
||||
[['up', 'fa-chevron-up', `Move ${pluginLabel} up`],
|
||||
['down', 'fa-chevron-down', `Move ${pluginLabel} down`]].forEach(([dir, iconCls, ariaLabel]) => {
|
||||
const moveBtn = document.createElement('button');
|
||||
moveBtn.type = 'button';
|
||||
moveBtn.className = 'plugin-order-move text-gray-400 hover:text-gray-700 px-2 py-1';
|
||||
moveBtn.setAttribute('aria-label', ariaLabel);
|
||||
const moveIcon = document.createElement('i');
|
||||
moveIcon.className = `fas ${iconCls} text-xs`;
|
||||
moveBtn.appendChild(moveIcon);
|
||||
moveBtn.addEventListener('click', function() {
|
||||
if (dir === 'up' && row.previousElementSibling) {
|
||||
container.insertBefore(row, row.previousElementSibling);
|
||||
} else if (dir === 'down' && row.nextElementSibling) {
|
||||
container.insertBefore(row.nextElementSibling, row);
|
||||
}
|
||||
syncInputs();
|
||||
moveBtn.focus();
|
||||
});
|
||||
row.appendChild(moveBtn);
|
||||
});
|
||||
|
||||
container.appendChild(row);
|
||||
});
|
||||
|
||||
setupDragAndDrop();
|
||||
container.querySelectorAll('.plugin-order-include').forEach(checkbox => {
|
||||
checkbox.addEventListener('change', syncInputs);
|
||||
});
|
||||
syncInputs();
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error fetching plugins:', error);
|
||||
const err = document.createElement('p');
|
||||
err.className = 'text-sm text-red-500';
|
||||
err.textContent = 'Error loading plugins';
|
||||
container.textContent = '';
|
||||
container.appendChild(err);
|
||||
});
|
||||
}
|
||||
|
||||
window.PluginOrderList = { init: init };
|
||||
})();
|
||||
@@ -0,0 +1,24 @@
|
||||
{
|
||||
"name": "LED Matrix Control",
|
||||
"short_name": "LEDMatrix",
|
||||
"description": "Control panel for the LEDMatrix display",
|
||||
"start_url": "/",
|
||||
"scope": "/",
|
||||
"display": "standalone",
|
||||
"background_color": "#111827",
|
||||
"theme_color": "#111827",
|
||||
"icons": [
|
||||
{
|
||||
"src": "/static/v3/icons/icon-192.png",
|
||||
"sizes": "192x192",
|
||||
"type": "image/png",
|
||||
"purpose": "any maskable"
|
||||
},
|
||||
{
|
||||
"src": "/static/v3/icons/icon-512.png",
|
||||
"sizes": "512x512",
|
||||
"type": "image/png",
|
||||
"purpose": "any maskable"
|
||||
}
|
||||
]
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1 @@
|
||||
!function(e){"object"==typeof exports&&"object"==typeof module?e(require("../../lib/codemirror")):"function"==typeof define&&define.amd?define(["../../lib/codemirror"],e):e(CodeMirror)}(function(P){var t={pairs:"()[]{}''\"\"",closeBefore:")]}'\":;>",triples:"",explode:"[]{}"},S=P.Pos;function k(e,n){return"pairs"==n&&"string"==typeof e?e:("object"==typeof e&&null!=e[n]?e:t)[n]}P.defineOption("autoCloseBrackets",!1,function(e,n,t){t&&t!=P.Init&&(e.removeKeyMap(i),e.state.closeBrackets=null),n&&(r(k(n,"pairs")),e.state.closeBrackets=n,e.addKeyMap(i))});var i={Backspace:function(e){var n=y(e);if(!n||e.getOption("disableInput"))return P.Pass;for(var t=k(n,"pairs"),r=e.listSelections(),i=0;i<r.length;i++){if(!r[i].empty())return P.Pass;var a=s(e,r[i].head);if(!a||t.indexOf(a)%2!=0)return P.Pass}for(i=r.length-1;0<=i;i--){var o=r[i].head;e.replaceRange("",S(o.line,o.ch-1),S(o.line,o.ch+1),"+delete")}},Enter:function(r){var e=y(r),n=e&&k(e,"explode");if(!n||r.getOption("disableInput"))return P.Pass;for(var i=r.listSelections(),t=0;t<i.length;t++){if(!i[t].empty())return P.Pass;var a=s(r,i[t].head);if(!a||n.indexOf(a)%2!=0)return P.Pass}r.operation(function(){var e=r.lineSeparator()||"\n";r.replaceSelection(e+e,null),O(r,-1),i=r.listSelections();for(var n=0;n<i.length;n++){var t=i[n].head.line;r.indentLine(t,null,!0),r.indentLine(t+1,null,!0)}})}};function r(e){for(var n=0;n<e.length;n++){var t=e.charAt(n),r="'"+t+"'";i[r]||(i[r]=function(n){return function(e){return function(i,e){var n=y(i);if(!n||i.getOption("disableInput"))return P.Pass;var t=k(n,"pairs"),r=t.indexOf(e);if(-1==r)return P.Pass;for(var a,o=k(n,"closeBefore"),s=k(n,"triples"),l=t.charAt(r+1)==e,c=i.listSelections(),f=r%2==0,h=0;h<c.length;h++){var u,d=c[h],p=d.head,g=i.getRange(p,S(p.line,p.ch+1));if(f&&!d.empty())u="surround";else if(!l&&f||g!=e)if(l&&1<p.ch&&0<=s.indexOf(e)&&i.getRange(S(p.line,p.ch-2),p)==e+e){if(2<p.ch&&/\bstring/.test(i.getTokenTypeAt(S(p.line,p.ch-2))))return P.Pass;u="addFour"}else if(l){d=0==p.ch?" ":i.getRange(S(p.line,p.ch-1),p);if(P.isWordChar(g)||d==e||P.isWordChar(d))return P.Pass;u="both"}else{if(!f||!(0===g.length||/\s/.test(g)||-1<o.indexOf(g)))return P.Pass;u="both"}else u=l&&function(e,n){var t=e.getTokenAt(S(n.line,n.ch+1));return/\bstring/.test(t.type)&&t.start==n.ch&&(0==n.ch||!/\bstring/.test(e.getTokenTypeAt(n)))}(i,p)?"both":0<=s.indexOf(e)&&i.getRange(p,S(p.line,p.ch+3))==e+e+e?"skipThree":"skip";if(a){if(a!=u)return P.Pass}else a=u}var v=r%2?t.charAt(r-1):e,b=r%2?e:t.charAt(r+1);i.operation(function(){if("skip"==a)O(i,1);else if("skipThree"==a)O(i,3);else if("surround"==a){for(var e=i.getSelections(),n=0;n<e.length;n++)e[n]=v+e[n]+b;i.replaceSelections(e,"around");for(e=i.listSelections().slice(),n=0;n<e.length;n++)e[n]=(t=e[n],r=void 0,r=0<P.cmpPos(t.anchor,t.head),{anchor:new S(t.anchor.line,t.anchor.ch+(r?-1:1)),head:new S(t.head.line,t.head.ch+(r?1:-1))});i.setSelections(e)}else"both"==a?(i.replaceSelection(v+b,null),i.triggerElectric(v+b),O(i,-1)):"addFour"==a&&(i.replaceSelection(v+v+v+v,"before"),O(i,1));var t,r})}(e,n)}}(t))}}function y(e){var n=e.state.closeBrackets;return n&&!n.override&&e.getModeAt(e.getCursor()).closeBrackets||n}function O(e,n){for(var t=[],r=e.listSelections(),i=0,a=0;a<r.length;a++){var o=r[a];o.head==e.getCursor()&&(i=a);o=o.head.ch||0<n?{line:o.head.line,ch:o.head.ch+n}:{line:o.head.line-1};t.push({anchor:o,head:o})}e.setSelections(t,i)}function s(e,n){n=e.getRange(S(n.line,n.ch-1),S(n.line,n.ch+1));return 2==n.length?n:null}r(t.pairs+"`")});
|
||||
@@ -0,0 +1 @@
|
||||
!function(t){"object"==typeof exports&&"object"==typeof module?t(require("../../lib/codemirror")):"function"==typeof define&&define.amd?define(["../../lib/codemirror"],t):t(CodeMirror)}(function(r){var u=/MSIE \d/.test(navigator.userAgent)&&(null==document.documentMode||document.documentMode<8),k=r.Pos,p={"(":")>",")":"(<","[":"]>","]":"[<","{":"}>","}":"{<","<":">>",">":"<<"};function y(t){return t&&t.bracketRegex||/[(){}[\]]/}function f(t,e,n){var r=t.getLineHandle(e.line),i=e.ch-1,c=n&&n.afterCursor;null==c&&(c=/(^| )cm-fat-cursor($| )/.test(t.getWrapperElement().className));var a=y(n),c=!c&&0<=i&&a.test(r.text.charAt(i))&&p[r.text.charAt(i)]||a.test(r.text.charAt(i+1))&&p[r.text.charAt(++i)];if(!c)return null;a=">"==c.charAt(1)?1:-1;if(n&&n.strict&&0<a!=(i==e.ch))return null;r=t.getTokenTypeAt(k(e.line,i+1)),n=o(t,k(e.line,i+(0<a?1:0)),a,r,n);return null==n?null:{from:k(e.line,i),to:n&&n.pos,match:n&&n.ch==c.charAt(0),forward:0<a}}function o(t,e,n,r,i){for(var c=i&&i.maxScanLineLength||1e4,a=i&&i.maxScanLines||1e3,o=[],h=y(i),l=0<n?Math.min(e.line+a,t.lastLine()+1):Math.max(t.firstLine()-1,e.line-a),s=e.line;s!=l;s+=n){var u=t.getLine(s);if(u){var f=0<n?0:u.length-1,m=0<n?u.length:-1;if(!(u.length>c))for(s==e.line&&(f=e.ch-(n<0?1:0));f!=m;f+=n){var g=u.charAt(f);if(h.test(g)&&(void 0===r||(t.getTokenTypeAt(k(s,f+1))||"")==(r||""))){var d=p[g];if(d&&">"==d.charAt(1)==0<n)o.push(g);else{if(!o.length)return{pos:k(s,f),ch:g};o.pop()}}}}}return s-n!=(0<n?t.lastLine():t.firstLine())&&null}function e(t,e,n){for(var r=t.state.matchBrackets.maxHighlightLineLength||1e3,i=n&&n.highlightNonMatching,c=[],a=t.listSelections(),o=0;o<a.length;o++){var h,l=a[o].empty()&&f(t,a[o].head,n);l&&(l.match||!1!==i)&&t.getLine(l.from.line).length<=r&&(h=l.match?"CodeMirror-matchingbracket":"CodeMirror-nonmatchingbracket",c.push(t.markText(l.from,k(l.from.line,l.from.ch+1),{className:h})),l.to&&t.getLine(l.to.line).length<=r&&c.push(t.markText(l.to,k(l.to.line,l.to.ch+1),{className:h})))}if(c.length){u&&t.state.focused&&t.focus();function s(){t.operation(function(){for(var t=0;t<c.length;t++)c[t].clear()})}if(!e)return s;setTimeout(s,800)}}function i(t){t.operation(function(){t.state.matchBrackets.currentlyHighlighted&&(t.state.matchBrackets.currentlyHighlighted(),t.state.matchBrackets.currentlyHighlighted=null),t.state.matchBrackets.currentlyHighlighted=e(t,!1,t.state.matchBrackets)})}function c(t){t.state.matchBrackets&&t.state.matchBrackets.currentlyHighlighted&&(t.state.matchBrackets.currentlyHighlighted(),t.state.matchBrackets.currentlyHighlighted=null)}r.defineOption("matchBrackets",!1,function(t,e,n){n&&n!=r.Init&&(t.off("cursorActivity",i),t.off("focus",i),t.off("blur",c),c(t)),e&&(t.state.matchBrackets="object"==typeof e?e:{},t.on("cursorActivity",i),t.on("focus",i),t.on("blur",c))}),r.defineExtension("matchBrackets",function(){e(this,!0)}),r.defineExtension("findMatchingBracket",function(t,e,n){return f(this,t,e=n||"boolean"==typeof e?n?(n.strict=e,n):e?{strict:!0}:null:e)}),r.defineExtension("scanForBracket",function(t,e,n,r){return o(this,t,e,n,r)})});
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -0,0 +1 @@
|
||||
.cm-s-monokai.CodeMirror{background:#272822;color:#f8f8f2}.cm-s-monokai div.CodeMirror-selected{background:#49483e}.cm-s-monokai .CodeMirror-line::selection,.cm-s-monokai .CodeMirror-line>span::selection,.cm-s-monokai .CodeMirror-line>span>span::selection{background:rgba(73,72,62,.99)}.cm-s-monokai .CodeMirror-line::-moz-selection,.cm-s-monokai .CodeMirror-line>span::-moz-selection,.cm-s-monokai .CodeMirror-line>span>span::-moz-selection{background:rgba(73,72,62,.99)}.cm-s-monokai .CodeMirror-gutters{background:#272822;border-right:0}.cm-s-monokai .CodeMirror-guttermarker{color:#fff}.cm-s-monokai .CodeMirror-guttermarker-subtle{color:#d0d0d0}.cm-s-monokai .CodeMirror-linenumber{color:#d0d0d0}.cm-s-monokai .CodeMirror-cursor{border-left:1px solid #f8f8f0}.cm-s-monokai span.cm-comment{color:#75715e}.cm-s-monokai span.cm-atom{color:#ae81ff}.cm-s-monokai span.cm-number{color:#ae81ff}.cm-s-monokai span.cm-comment.cm-attribute{color:#97b757}.cm-s-monokai span.cm-comment.cm-def{color:#bc9262}.cm-s-monokai span.cm-comment.cm-tag{color:#bc6283}.cm-s-monokai span.cm-comment.cm-type{color:#5998a6}.cm-s-monokai span.cm-attribute,.cm-s-monokai span.cm-property{color:#a6e22e}.cm-s-monokai span.cm-keyword{color:#f92672}.cm-s-monokai span.cm-builtin{color:#66d9ef}.cm-s-monokai span.cm-string{color:#e6db74}.cm-s-monokai span.cm-variable{color:#f8f8f2}.cm-s-monokai span.cm-variable-2{color:#9effff}.cm-s-monokai span.cm-type,.cm-s-monokai span.cm-variable-3{color:#66d9ef}.cm-s-monokai span.cm-def{color:#fd971f}.cm-s-monokai span.cm-bracket{color:#f8f8f2}.cm-s-monokai span.cm-tag{color:#f92672}.cm-s-monokai span.cm-header{color:#ae81ff}.cm-s-monokai span.cm-link{color:#ae81ff}.cm-s-monokai span.cm-error{background:#f92672;color:#f8f8f0}.cm-s-monokai .CodeMirror-activeline-background{background:#373831}.cm-s-monokai .CodeMirror-matchingbracket{text-decoration:underline;color:#fff!important}
|
||||
File diff suppressed because one or more lines are too long
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
+186
-4255
File diff suppressed because it is too large
Load Diff
@@ -87,7 +87,7 @@ select:focus,input:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px
|
||||
</div>
|
||||
|
||||
<div class="footer">
|
||||
<a href="/v3">Open Full Interface</a>
|
||||
<a href="/">Open Full Interface</a>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,298 +0,0 @@
|
||||
"""
|
||||
{{ plugin_name }} — LEDMatrix Plugin
|
||||
Generated by LEDMatrix Plugin Composer on {{ generated_date }}
|
||||
|
||||
Extension points:
|
||||
update() → add HTTP/MQTT data-fetching logic here
|
||||
_get_display_values() → map fetched data to display strings
|
||||
display() → add new elements or adapt layout per display size
|
||||
"""
|
||||
from src.plugin_system.base_plugin import BasePlugin
|
||||
{% if has_clock or has_countdown %}
|
||||
from datetime import datetime
|
||||
{% endif %}
|
||||
{% if has_blink %}
|
||||
import time
|
||||
{% endif %}
|
||||
{% if has_text_template %}
|
||||
from collections import defaultdict
|
||||
{% endif %}
|
||||
|
||||
|
||||
class {{ class_name }}(BasePlugin):
|
||||
|
||||
def __init__(self, plugin_id, config, display_manager, cache_manager, plugin_manager):
|
||||
super().__init__(plugin_id, config, display_manager, cache_manager, plugin_manager)
|
||||
{% for var in config_vars %}
|
||||
self.{{ var.key }} = config.get({{ var.key | tojson }}, {{ var.default | tojson }})
|
||||
{% endfor %}
|
||||
# Live data cache — populated by update(); always {} in static layouts
|
||||
self._data = {}
|
||||
|
||||
def update(self):
|
||||
"""Fetch and refresh display data.
|
||||
|
||||
For dynamic plugins: fetch from APIs/MQTT here and store in self._data.
|
||||
_get_display_values() will read self._data to produce display strings.
|
||||
"""
|
||||
# --- Data sources (add fetch logic here for dynamic plugins) ---
|
||||
pass
|
||||
|
||||
def _get_display_values(self):
|
||||
"""Map config variables and live data to display-ready strings.
|
||||
|
||||
This is the single extension point for v2 data sources:
|
||||
add self._data lookups here once update() populates them.
|
||||
"""
|
||||
return {
|
||||
{% for var in config_vars %}
|
||||
{{ var.key | tojson }}: str(self.{{ var.key }}),
|
||||
{% endfor %}
|
||||
}
|
||||
|
||||
def display(self, force_clear=False):
|
||||
try:
|
||||
{% if has_text_template %}
|
||||
values = defaultdict(str, self._get_display_values())
|
||||
{% else %}
|
||||
values = self._get_display_values()
|
||||
{% endif %}
|
||||
|
||||
if force_clear:
|
||||
self.display_manager.clear()
|
||||
|
||||
width = self.display_manager.width
|
||||
height = self.display_manager.height
|
||||
{% if bg_color %}
|
||||
|
||||
self.display_manager.draw.rectangle([0, 0, width, height], fill={{ bg_color }})
|
||||
{% endif %}
|
||||
|
||||
# ── Elements (rendered bottom to top) ──────────────────────────
|
||||
{% for el in elements %}
|
||||
{% set p = " " if el.min_width > 0 else " " %}
|
||||
{% set pi = (p + " ") if el.blink else p %}
|
||||
{% if el.min_width > 0 %}
|
||||
if width >= {{ el.min_width }}: # breakpoint: {{ el.min_width }}px+ displays only
|
||||
{% endif %}
|
||||
{% if el.blink %}
|
||||
{{ p }}if int(time.time() * 2) % 2:
|
||||
{% endif %}
|
||||
|
||||
{% if el.type == 'text' %}
|
||||
{{ pi }}self.display_manager.draw_text(
|
||||
{% if el.text_is_template %}
|
||||
{{ pi }} {{ el.text | tojson }}.format_map(values),
|
||||
{% else %}
|
||||
{{ pi }} {{ el.text | tojson }},
|
||||
{% endif %}
|
||||
{{ pi }} x={{ el.x_expr }}, y={{ el.y_expr }},
|
||||
{{ pi }} color={{ el.rgb_tuple }},
|
||||
{{ pi }} font=self.display_manager.{{ el.font_attr }},
|
||||
{{ pi }})
|
||||
{% if el.text2 %}
|
||||
{{ pi }}self.display_manager.draw_text(
|
||||
{% if el.text_is_template %}
|
||||
{{ pi }} {{ el.text2 | tojson }}.format_map(values),
|
||||
{% else %}
|
||||
{{ pi }} {{ el.text2 | tojson }},
|
||||
{% endif %}
|
||||
{{ pi }} x={{ el.x2_expr }}, y={{ el.y2_expr }},
|
||||
{{ pi }} color={{ el.rgb_tuple }},
|
||||
{{ pi }} font=self.display_manager.{{ el.font_attr }},
|
||||
{{ pi }})
|
||||
{% endif %}
|
||||
{% elif el.type == 'dynamic_text' %}
|
||||
{% if el.binding_source == 'config' %}
|
||||
{{ pi }}self.display_manager.draw_text(
|
||||
{{ pi }} values.get({{ el.binding_key | tojson }}, ''),
|
||||
{{ pi }} x={{ el.x_expr }}, y={{ el.y_expr }},
|
||||
{{ pi }} color={{ el.rgb_tuple }},
|
||||
{{ pi }} font=self.display_manager.{{ el.font_attr }},
|
||||
{{ pi }})
|
||||
{% endif %}
|
||||
{% elif el.type == 'clock' %}
|
||||
{{ pi }}self.display_manager.draw_text(
|
||||
{{ pi }} datetime.now().strftime({{ el.format | tojson }}),
|
||||
{{ pi }} x={{ el.x_expr }}, y={{ el.y_expr }},
|
||||
{{ pi }} color={{ el.rgb_tuple }},
|
||||
{{ pi }} font=self.display_manager.{{ el.font_attr }},
|
||||
{{ pi }})
|
||||
{% if el.format2 %}
|
||||
{{ pi }}self.display_manager.draw_text(
|
||||
{{ pi }} datetime.now().strftime({{ el.format2 | tojson }}),
|
||||
{{ pi }} x={{ el.x2_expr }}, y={{ el.y2_expr }},
|
||||
{{ pi }} color={{ el.rgb_tuple }},
|
||||
{{ pi }} font=self.display_manager.{{ el.font_attr }},
|
||||
{{ pi }})
|
||||
{% endif %}
|
||||
{% elif el.type == 'countdown' %}
|
||||
{{ pi }}_cd_target = float(values.get({{ el.binding_key | tojson }}, 0) or 0)
|
||||
{{ pi }}_cd_secs = max(0.0, _cd_target - datetime.now().timestamp())
|
||||
{% if el.countdown_format == 'dhms' %}
|
||||
{{ pi }}_cd_d, _cd_rem = divmod(int(_cd_secs), 86400)
|
||||
{{ pi }}_cd_h, _cd_rem = divmod(_cd_rem, 3600)
|
||||
{{ pi }}_cd_m, _cd_s = divmod(_cd_rem, 60)
|
||||
{{ pi }}_cd_str = f'{_cd_d}d {_cd_h:02d}:{_cd_m:02d}:{_cd_s:02d}'
|
||||
{% elif el.countdown_format == 'hms' %}
|
||||
{{ pi }}_cd_h, _cd_rem = divmod(int(_cd_secs), 3600)
|
||||
{{ pi }}_cd_m, _cd_s = divmod(_cd_rem, 60)
|
||||
{{ pi }}_cd_str = f'{_cd_h}h {_cd_m:02d}:{_cd_s:02d}'
|
||||
{% elif el.countdown_format == 'dhm' %}
|
||||
{{ pi }}_cd_d, _cd_rem = divmod(int(_cd_secs), 86400)
|
||||
{{ pi }}_cd_h, _cd_m = divmod(_cd_rem // 60, 60)
|
||||
{{ pi }}_cd_str = f'{_cd_d}d {_cd_h:02d}h {_cd_m:02d}m'
|
||||
{% else %}
|
||||
{{ pi }}_cd_d, _cd_rem = divmod(int(_cd_secs), 86400)
|
||||
{{ pi }}_cd_h = _cd_rem // 3600
|
||||
{{ pi }}_cd_str = f'{_cd_d}d {_cd_h}h'
|
||||
{% endif %}
|
||||
{{ pi }}self.display_manager.draw_text(
|
||||
{{ pi }} _cd_str,
|
||||
{{ pi }} x={{ el.x_expr }}, y={{ el.y_expr }},
|
||||
{{ pi }} color={{ el.rgb_tuple }},
|
||||
{{ pi }} font=self.display_manager.{{ el.font_attr }},
|
||||
{{ pi }})
|
||||
{% elif el.type == 'rectangle' %}
|
||||
{{ pi }}self.display_manager.draw.rectangle(
|
||||
{{ pi }} [{{ el.x_expr }}, {{ el.y_expr }}, {{ el.x2_expr }}, {{ el.y2_expr }}],
|
||||
{{ pi }} fill={{ el.fill_tuple }},
|
||||
{{ pi }} outline={{ el.outline_tuple }},
|
||||
{{ pi }})
|
||||
{% elif el.type == 'arc' %}
|
||||
{{ pi }}self.display_manager.draw.arc(
|
||||
{{ pi }} [{{ el.x_expr }}, {{ el.y_expr }}, {{ el.x2_expr }}, {{ el.y2_expr }}],
|
||||
{{ pi }} start={{ el.start_angle }}, end={{ el.end_angle }},
|
||||
{{ pi }} fill={{ el.rgb_tuple }},
|
||||
{{ pi }} width={{ el.line_width }},
|
||||
{{ pi }})
|
||||
{% elif el.type == 'ellipse' %}
|
||||
{{ pi }}self.display_manager.draw.ellipse(
|
||||
{{ pi }} [{{ el.x_expr }}, {{ el.y_expr }}, {{ el.x2_expr }}, {{ el.y2_expr }}],
|
||||
{{ pi }} fill={{ el.fill_tuple }},
|
||||
{{ pi }} outline={{ el.outline_tuple }},
|
||||
{{ pi }})
|
||||
{% elif el.type == 'pixel' %}
|
||||
{{ pi }}self.display_manager.draw.point(
|
||||
{{ pi }} [{{ el.x_expr }}, {{ el.y_expr }}],
|
||||
{{ pi }} fill={{ el.rgb_tuple }},
|
||||
{{ pi }})
|
||||
{% elif el.type == 'rounded_rectangle' %}
|
||||
{{ pi }}self.display_manager.draw.rounded_rectangle(
|
||||
{{ pi }} [{{ el.x_expr }}, {{ el.y_expr }}, {{ el.x2_expr }}, {{ el.y2_expr }}],
|
||||
{{ pi }} radius={{ el.border_radius }},
|
||||
{{ pi }} fill={{ el.fill_tuple }},
|
||||
{{ pi }} outline={{ el.outline_tuple }},
|
||||
{{ pi }})
|
||||
{% elif el.type in ('line', 'divider') %}
|
||||
{{ pi }}self.display_manager.draw.line(
|
||||
{{ pi }} [{{ el.x0_expr }}, {{ el.y0_expr }}, {{ el.x1_expr }}, {{ el.y1_expr }}],
|
||||
{{ pi }} fill={{ el.rgb_tuple }},
|
||||
{{ pi }} width={{ el.line_width }},
|
||||
{{ pi }})
|
||||
{% elif el.type == 'pips' %}
|
||||
{{ pi }}_pip_filled = max(0, min({{ el.pip_count }}, int(float(values.get({{ el.binding_key | tojson }}, 0) or 0))))
|
||||
{{ pi }}for _pip_i in range({{ el.pip_count }}):
|
||||
{{ pi }} _pip_x = ({{ el.x_expr }}) + _pip_i * ({{ el.pip_size }} + {{ el.pip_spacing }})
|
||||
{{ pi }} _pip_color = {{ el.fill_tuple }} if _pip_i < _pip_filled else {{ el.empty_tuple }}
|
||||
{% if not el.show_empty %}
|
||||
{{ pi }} if _pip_i >= _pip_filled:
|
||||
{{ pi }} continue
|
||||
{% endif %}
|
||||
{{ pi }} self.display_manager.draw.rectangle(
|
||||
{{ pi }} [_pip_x, {{ el.y_expr }}, _pip_x + {{ el.pip_size }} - 1, ({{ el.y_expr }}) + {{ el.pip_size }} - 1],
|
||||
{{ pi }} fill=_pip_color,
|
||||
{{ pi }} )
|
||||
{% elif el.type == 'sparkline' %}
|
||||
{{ pi }}_sl_raw = str(values.get({{ el.binding_key | tojson }}, '') or '')
|
||||
{{ pi }}_sl_vals = [float(v.strip()) for v in _sl_raw.split(',') if v.strip()][:{{ el.bar_count }}]
|
||||
{{ pi }}_sl_vals += [0.0] * max(0, {{ el.bar_count }} - len(_sl_vals))
|
||||
{{ pi }}_sl_max = max(_sl_vals) if any(_sl_vals) else 1.0
|
||||
{{ pi }}_sl_bw = max(1, ({{ el.bar_width_px }} - {{ el.bar_spacing }} * ({{ el.bar_count }} - 1)) // {{ el.bar_count }})
|
||||
{% if el.bg_tuple != 'None' %}
|
||||
{{ pi }}self.display_manager.draw.rectangle(
|
||||
{{ pi }} [{{ el.x_expr }}, {{ el.y_expr }}, ({{ el.x_expr }}) + {{ el.bar_width_px }}, ({{ el.y_expr }}) + {{ el.bar_height_px }}],
|
||||
{{ pi }} fill={{ el.bg_tuple }},
|
||||
{{ pi }})
|
||||
{% endif %}
|
||||
{{ pi }}for _sl_i, _sl_v in enumerate(_sl_vals):
|
||||
{{ pi }} _sl_norm = max(0.0, min(1.0, _sl_v / (_sl_max or 1)))
|
||||
{{ pi }} _sl_bh = max(1, round({{ el.bar_height_px }} * _sl_norm))
|
||||
{{ pi }} _sl_bx = ({{ el.x_expr }}) + (_sl_bw + {{ el.bar_spacing }}) * _sl_i
|
||||
{{ pi }} _sl_by = ({{ el.y_expr }}) + {{ el.bar_height_px }} - _sl_bh
|
||||
{{ pi }} self.display_manager.draw.rectangle(
|
||||
{{ pi }} [_sl_bx, _sl_by, _sl_bx + _sl_bw - 1, _sl_by + _sl_bh - 1],
|
||||
{{ pi }} fill={{ el.fill_tuple }},
|
||||
{{ pi }} )
|
||||
{% elif el.type == 'gauge' %}
|
||||
{{ pi }}_gv = max(0.0, min(100.0, float(values.get({{ el.binding_key | tojson }}, 0) or 0)))
|
||||
{{ pi }}_g_total = (({{ el.end_angle }} - {{ el.start_angle }}) % 360) or 360
|
||||
{{ pi }}_g_sweep = _g_total * _gv / 100.0
|
||||
{% if el.track_tuple != 'None' %}
|
||||
{{ pi }}self.display_manager.draw.arc(
|
||||
{{ pi }} [{{ el.x_expr }}, {{ el.y_expr }}, {{ el.x2_expr }}, {{ el.y2_expr }}],
|
||||
{{ pi }} start={{ el.start_angle }}, end={{ el.start_angle }} + _g_total,
|
||||
{{ pi }} fill={{ el.track_tuple }},
|
||||
{{ pi }} width={{ el.line_width }},
|
||||
{{ pi }})
|
||||
{% endif %}
|
||||
{{ pi }}if _g_sweep > 0:
|
||||
{{ pi }} self.display_manager.draw.arc(
|
||||
{{ pi }} [{{ el.x_expr }}, {{ el.y_expr }}, {{ el.x2_expr }}, {{ el.y2_expr }}],
|
||||
{{ pi }} start={{ el.start_angle }}, end={{ el.start_angle }} + _g_sweep,
|
||||
{{ pi }} fill={{ el.rgb_tuple }},
|
||||
{{ pi }} width={{ el.line_width }},
|
||||
{{ pi }} )
|
||||
{% if el.show_label %}
|
||||
{{ pi }}_g_cx = ({{ el.x_expr }}) + ({{ el.x2_expr }} - ({{ el.x_expr }})) // 2
|
||||
{{ pi }}_g_cy = ({{ el.y_expr }}) + ({{ el.y2_expr }} - ({{ el.y_expr }})) // 2
|
||||
{{ pi }}self.display_manager.draw_text(
|
||||
{{ pi }} f'{int(_gv)}%',
|
||||
{{ pi }} x=_g_cx, y=_g_cy,
|
||||
{{ pi }} color={{ el.label_tuple }},
|
||||
{{ pi }} font=self.display_manager.{{ el.font_attr }},
|
||||
{{ pi }})
|
||||
{% endif %}
|
||||
{% elif el.type == 'marquee' %}
|
||||
{{ pi }}_{{ el.data_key }}_text = {{ el.text | tojson }}
|
||||
{{ pi }}_{{ el.data_key }}_tw = len(_{{ el.data_key }}_text) * {{ el.char_w }}
|
||||
{{ pi }}_{{ el.data_key }}_x = int(self._data.get({{ el.data_key | tojson }}, width))
|
||||
{% if el.direction == 'right' %}
|
||||
{{ pi }}_{{ el.data_key }}_x += {{ el.scroll_speed }}
|
||||
{{ pi }}if _{{ el.data_key }}_x > width:
|
||||
{{ pi }} _{{ el.data_key }}_x = -(_{{ el.data_key }}_tw + {{ el.gap }})
|
||||
{% else %}
|
||||
{{ pi }}_{{ el.data_key }}_x -= {{ el.scroll_speed }}
|
||||
{{ pi }}if _{{ el.data_key }}_x < -(_{{ el.data_key }}_tw + {{ el.gap }}):
|
||||
{{ pi }} _{{ el.data_key }}_x = width
|
||||
{% endif %}
|
||||
{{ pi }}self._data[{{ el.data_key | tojson }}] = _{{ el.data_key }}_x
|
||||
{{ pi }}self.display_manager.draw_text(
|
||||
{{ pi }} _{{ el.data_key }}_text,
|
||||
{{ pi }} x=_{{ el.data_key }}_x, y={{ el.y_expr }},
|
||||
{{ pi }} color={{ el.rgb_tuple }},
|
||||
{{ pi }} font=self.display_manager.{{ el.font_attr }},
|
||||
{{ pi }})
|
||||
{% elif el.type == 'progress_bar' %}
|
||||
{{ pi }}_pb_x = {{ el.x_expr }}
|
||||
{{ pi }}_pb_y = {{ el.y_expr }}
|
||||
{{ pi }}_pb_pct = max(0.0, min(100.0, float(values.get({{ el.binding_key | tojson }}, 0) or 0))) / 100.0
|
||||
{{ pi }}_pb_fill_w = int({{ el.bar_width }} * _pb_pct)
|
||||
{{ pi }}self.display_manager.draw.rectangle(
|
||||
{{ pi }} [_pb_x, _pb_y, _pb_x + {{ el.bar_width }}, _pb_y + {{ el.bar_height }}],
|
||||
{{ pi }} fill={{ el.bg_tuple }},
|
||||
{{ pi }} outline={{ el.outline_tuple }},
|
||||
{{ pi }})
|
||||
{{ pi }}if _pb_fill_w > 0:
|
||||
{{ pi }} self.display_manager.draw.rectangle(
|
||||
{{ pi }} [_pb_x, _pb_y, _pb_x + _pb_fill_w, _pb_y + {{ el.bar_height }}],
|
||||
{{ pi }} fill={{ el.fill_tuple }},
|
||||
{{ pi }} )
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
# ── End elements ───────────────────────────────────────────────
|
||||
|
||||
self.display_manager.update_display()
|
||||
|
||||
except Exception as e:
|
||||
self.logger.error('Display error: %s', e, exc_info=True)
|
||||
@@ -22,7 +22,7 @@
|
||||
On Raspberry Pi 5: ensure the library was rebuilt from the latest submodule
|
||||
(<code class="bg-yellow-100 px-1 rounded">first_time_install.sh</code>)
|
||||
and try adjusting <strong>GPIO Slowdown</strong> (start at 3, reduce if the display looks dim or choppy).
|
||||
Check the <a href="/v3/logs" class="underline font-medium">Logs tab</a> for the full error.
|
||||
Check the <a href="#" @click.prevent="activeTab = 'logs'" class="underline font-medium">Logs tab</a> for the full error.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@@ -47,7 +47,7 @@
|
||||
name="rows"
|
||||
value="{{ main_config.display.hardware.rows or 32 }}"
|
||||
min="1"
|
||||
max="64"
|
||||
max="128"
|
||||
class="form-control">
|
||||
</div>
|
||||
|
||||
@@ -85,7 +85,14 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<!-- Live total-resolution readout: width = cols x chain_length, height = rows x parallel -->
|
||||
<p id="display-resolution-readout" class="text-sm text-gray-600 mb-4" aria-live="polite">
|
||||
<i class="fas fa-expand-arrows-alt mr-1 text-gray-400"></i>
|
||||
Your display: <strong id="display-resolution-value">—</strong>
|
||||
<span class="text-gray-400">(columns × chain length wide, rows × parallel tall)</span>
|
||||
</p>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<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">
|
||||
@@ -109,9 +116,7 @@
|
||||
<option value="regular-pi1" {% if main_config.display.hardware.hardware_mapping == "regular-pi1" %}selected{% endif %}>Regular Pi1</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<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">
|
||||
@@ -123,7 +128,29 @@
|
||||
<option value="BGR" {% if main_config.display.hardware.get('led_rgb_sequence', 'RGB') == "BGR" %}selected{% endif %}>BGR</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Advanced hardware settings: niche-panel and deep tuning fields.
|
||||
Collapsed by default; reuses the same nested-section shell as
|
||||
plugin config forms, so toggleSection() and the settings
|
||||
search's auto-expand both work unchanged. -->
|
||||
<div class="nested-section border border-gray-300 rounded-lg mt-4">
|
||||
<button type="button"
|
||||
class="w-full bg-gray-100 hover:bg-gray-200 px-4 py-3 flex items-center justify-between text-left transition-colors rounded-t-lg"
|
||||
aria-controls="display-section-advanced-hardware"
|
||||
aria-expanded="false"
|
||||
onclick="toggleSection('display-section-advanced-hardware')">
|
||||
<div class="flex-1">
|
||||
<h4 class="font-semibold text-gray-900">
|
||||
<i class="fas fa-sliders-h mr-1 text-gray-500"></i>Advanced Hardware & Display Options (15)
|
||||
</h4>
|
||||
<p class="text-sm text-gray-600 mt-1">Multiplexing, panel variants, PWM tuning, and display options — the defaults work for standard HUB75 panels.</p>
|
||||
</div>
|
||||
<i id="display-section-advanced-hardware-icon" class="fas fa-chevron-right text-gray-500 transition-transform"></i>
|
||||
</button>
|
||||
<div id="display-section-advanced-hardware" class="nested-content bg-gray-50 px-4 py-4 space-y-4 hidden" style="display: none;">
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<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">
|
||||
@@ -255,47 +282,6 @@
|
||||
class="form-control">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Double-Sided Display -->
|
||||
<div class="bg-gray-50 rounded-lg p-4">
|
||||
<h3 class="text-md font-medium text-gray-900 mb-1">Double-Sided Display</h3>
|
||||
<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" 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"
|
||||
name="double_sided_enabled"
|
||||
value="true"
|
||||
{% 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>
|
||||
</div>
|
||||
|
||||
<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"
|
||||
value="{{ main_config.display.get('double_sided', {}).get('copies', 2) }}"
|
||||
min="2"
|
||||
max="8"
|
||||
class="form-control">
|
||||
</div>
|
||||
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Display Options -->
|
||||
<div class="bg-gray-50 rounded-lg p-4">
|
||||
@@ -368,6 +354,36 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> <!-- /#display-section-advanced-hardware (nested-content) -->
|
||||
</div> <!-- /advanced hardware nested-section -->
|
||||
|
||||
<script>
|
||||
// Live "Your display: W x H" readout - width = cols x chain_length,
|
||||
// height = rows x parallel (same math as the chain-length tooltip).
|
||||
(function () {
|
||||
const ids = ['rows', 'cols', 'chain_length', 'parallel'];
|
||||
const out = document.getElementById('display-resolution-value');
|
||||
if (!out) return;
|
||||
function recompute() {
|
||||
const v = {};
|
||||
for (const id of ids) {
|
||||
const el = document.getElementById(id);
|
||||
v[id] = el ? parseInt(el.value, 10) : NaN;
|
||||
}
|
||||
if (Object.values(v).some(n => !Number.isFinite(n) || n <= 0)) {
|
||||
out.textContent = '—';
|
||||
return;
|
||||
}
|
||||
out.textContent = (v.cols * v.chain_length) + ' × ' + (v.rows * v.parallel) + ' pixels';
|
||||
}
|
||||
for (const id of ids) {
|
||||
const el = document.getElementById(id);
|
||||
if (el) el.addEventListener('input', recompute);
|
||||
}
|
||||
recompute();
|
||||
})();
|
||||
</script>
|
||||
</div>
|
||||
|
||||
<!-- Vegas Scroll Mode Settings -->
|
||||
<div class="bg-gray-50 rounded-lg p-4 mt-6">
|
||||
@@ -454,6 +470,48 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Double-Sided Display -->
|
||||
<div class="bg-gray-50 rounded-lg p-4">
|
||||
<h3 class="text-md font-medium text-gray-900 mb-1">Double-Sided Display</h3>
|
||||
<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" 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"
|
||||
name="double_sided_enabled"
|
||||
value="true"
|
||||
{% 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>
|
||||
</div>
|
||||
|
||||
<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"
|
||||
value="{{ main_config.display.get('double_sided', {}).get('copies', 2) }}"
|
||||
min="2"
|
||||
max="8"
|
||||
class="form-control">
|
||||
</div>
|
||||
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- Multi-Display Sync Settings -->
|
||||
<div class="bg-gray-50 rounded-lg p-4 mt-6">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
@@ -583,183 +641,32 @@ if (typeof window.fixInvalidNumberInputs !== 'function') {
|
||||
});
|
||||
}
|
||||
|
||||
// Initialize plugin order list
|
||||
function initPluginOrderList() {
|
||||
// Initialize plugin order list via the shared drag-and-drop module
|
||||
// (static/v3/js/widgets/plugin-order-list.js) — the same component the
|
||||
// Durations tab uses for the primary rotation order.
|
||||
function initPluginOrderList(attempt) {
|
||||
const container = document.getElementById('vegas_plugin_order');
|
||||
if (!container) return;
|
||||
|
||||
// Fetch available plugins
|
||||
fetch('/api/v3/plugins/installed')
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
// Handle both {data: {plugins: []}} and {plugins: []} response formats
|
||||
const allPlugins = data.data?.plugins || data.plugins || [];
|
||||
if (!allPlugins || allPlugins.length === 0) {
|
||||
container.innerHTML = '<p class="text-sm text-gray-500 italic">No plugins available</p>';
|
||||
return;
|
||||
}
|
||||
|
||||
// Get current order and exclusions
|
||||
const orderInput = document.getElementById('vegas_plugin_order_value');
|
||||
const excludedInput = document.getElementById('vegas_excluded_plugins_value');
|
||||
let currentOrder = [];
|
||||
let excluded = [];
|
||||
|
||||
try {
|
||||
currentOrder = JSON.parse(orderInput.value || '[]');
|
||||
excluded = JSON.parse(excludedInput.value || '[]');
|
||||
} catch (e) {
|
||||
console.error('Error parsing vegas config:', e);
|
||||
}
|
||||
|
||||
// Build ordered plugin list (only enabled plugins)
|
||||
const plugins = allPlugins.filter(p => p.enabled);
|
||||
const orderedPlugins = [];
|
||||
|
||||
// First add plugins in current order
|
||||
currentOrder.forEach(id => {
|
||||
const plugin = plugins.find(p => p.id === id);
|
||||
if (plugin) orderedPlugins.push(plugin);
|
||||
});
|
||||
|
||||
// Then add remaining plugins
|
||||
plugins.forEach(plugin => {
|
||||
if (!orderedPlugins.find(p => p.id === plugin.id)) {
|
||||
orderedPlugins.push(plugin);
|
||||
}
|
||||
});
|
||||
|
||||
// Build HTML with display mode indicators
|
||||
let html = '';
|
||||
orderedPlugins.forEach((plugin, index) => {
|
||||
const isExcluded = excluded.includes(plugin.id);
|
||||
// Determine display mode (from plugin config or default)
|
||||
const vegasMode = plugin.vegas_mode || plugin.vegas_content_type || 'fixed';
|
||||
const modeLabels = {
|
||||
'scroll': { label: 'Scroll', icon: 'fa-scroll', color: 'text-blue-600' },
|
||||
'fixed': { label: 'Fixed', icon: 'fa-square', color: 'text-green-600' },
|
||||
'static': { label: 'Static', icon: 'fa-pause', color: 'text-orange-600' }
|
||||
};
|
||||
const modeInfo = modeLabels[vegasMode] || modeLabels['fixed'];
|
||||
// Escape plugin metadata to prevent XSS
|
||||
const safePluginId = escapeAttr(plugin.id);
|
||||
const safePluginName = escapeHtml(plugin.name || plugin.id);
|
||||
html += `
|
||||
<div class="flex items-center p-2 bg-gray-50 rounded border border-gray-200 cursor-move vegas-plugin-item"
|
||||
data-plugin-id="${safePluginId}" draggable="true">
|
||||
<i class="fas fa-grip-vertical text-gray-400 mr-3"></i>
|
||||
<label class="flex items-center flex-1">
|
||||
<input type="checkbox"
|
||||
class="vegas-plugin-include h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded mr-2"
|
||||
${!isExcluded ? 'checked' : ''}>
|
||||
<span class="text-sm font-medium text-gray-700">${safePluginName}</span>
|
||||
</label>
|
||||
<span class="text-xs ${modeInfo.color} ml-2" title="Vegas display mode: ${modeInfo.label}">
|
||||
<i class="fas ${modeInfo.icon} mr-1"></i>${modeInfo.label}
|
||||
</span>
|
||||
</div>
|
||||
`;
|
||||
});
|
||||
|
||||
container.innerHTML = html || '<p class="text-sm text-gray-500 italic">No enabled plugins</p>';
|
||||
|
||||
// Setup drag and drop
|
||||
setupDragAndDrop(container);
|
||||
|
||||
// Setup checkbox handlers
|
||||
container.querySelectorAll('.vegas-plugin-include').forEach(checkbox => {
|
||||
checkbox.addEventListener('change', updatePluginConfig);
|
||||
});
|
||||
|
||||
// Initialize hidden inputs with current state
|
||||
updatePluginConfig();
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error fetching plugins:', error);
|
||||
container.innerHTML = '<p class="text-sm text-red-500">Error loading plugins</p>';
|
||||
});
|
||||
}
|
||||
|
||||
function setupDragAndDrop(container) {
|
||||
let draggedItem = null;
|
||||
|
||||
container.querySelectorAll('.vegas-plugin-item').forEach(item => {
|
||||
item.addEventListener('dragstart', function(e) {
|
||||
draggedItem = this;
|
||||
this.style.opacity = '0.5';
|
||||
e.dataTransfer.effectAllowed = 'move';
|
||||
});
|
||||
|
||||
item.addEventListener('dragend', function() {
|
||||
this.style.opacity = '1';
|
||||
draggedItem = null;
|
||||
updatePluginConfig();
|
||||
});
|
||||
|
||||
item.addEventListener('dragover', function(e) {
|
||||
e.preventDefault();
|
||||
e.dataTransfer.dropEffect = 'move';
|
||||
|
||||
const rect = this.getBoundingClientRect();
|
||||
const midY = rect.top + rect.height / 2;
|
||||
|
||||
if (e.clientY < midY) {
|
||||
this.style.borderTop = '2px solid #3b82f6';
|
||||
this.style.borderBottom = '';
|
||||
} else {
|
||||
this.style.borderBottom = '2px solid #3b82f6';
|
||||
this.style.borderTop = '';
|
||||
}
|
||||
});
|
||||
|
||||
item.addEventListener('dragleave', function() {
|
||||
this.style.borderTop = '';
|
||||
this.style.borderBottom = '';
|
||||
});
|
||||
|
||||
item.addEventListener('drop', function(e) {
|
||||
e.preventDefault();
|
||||
this.style.borderTop = '';
|
||||
this.style.borderBottom = '';
|
||||
|
||||
if (draggedItem && draggedItem !== this) {
|
||||
const rect = this.getBoundingClientRect();
|
||||
const midY = rect.top + rect.height / 2;
|
||||
|
||||
if (e.clientY < midY) {
|
||||
container.insertBefore(draggedItem, this);
|
||||
} else {
|
||||
container.insertBefore(draggedItem, this.nextSibling);
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function updatePluginConfig() {
|
||||
const container = document.getElementById('vegas_plugin_order');
|
||||
const orderInput = document.getElementById('vegas_plugin_order_value');
|
||||
const excludedInput = document.getElementById('vegas_excluded_plugins_value');
|
||||
|
||||
if (!container || !orderInput || !excludedInput) return;
|
||||
|
||||
const order = [];
|
||||
const excluded = [];
|
||||
|
||||
container.querySelectorAll('.vegas-plugin-item').forEach(item => {
|
||||
const pluginId = item.dataset.pluginId;
|
||||
const checkbox = item.querySelector('.vegas-plugin-include');
|
||||
|
||||
order.push(pluginId);
|
||||
if (checkbox && !checkbox.checked) {
|
||||
excluded.push(pluginId);
|
||||
if (!window.PluginOrderList) {
|
||||
// Widget script is deferred; retry briefly, then surface a real
|
||||
// error instead of waiting forever.
|
||||
if ((attempt || 0) < 50) {
|
||||
setTimeout(function() { initPluginOrderList((attempt || 0) + 1); }, 100);
|
||||
} else {
|
||||
container.textContent = 'Could not load the reorder widget — reload the page to try again.';
|
||||
container.className = 'text-sm text-red-500';
|
||||
}
|
||||
return;
|
||||
}
|
||||
window.PluginOrderList.init({
|
||||
containerId: 'vegas_plugin_order',
|
||||
orderInputId: 'vegas_plugin_order_value',
|
||||
excludedInputId: 'vegas_excluded_plugins_value',
|
||||
showVegasModeBadge: true
|
||||
});
|
||||
|
||||
orderInput.value = JSON.stringify(order);
|
||||
excludedInput.value = JSON.stringify(excluded);
|
||||
}
|
||||
|
||||
|
||||
// Initialize on DOM ready
|
||||
if (document.readyState === 'loading') {
|
||||
document.addEventListener('DOMContentLoaded', initPluginOrderList);
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
{% 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>
|
||||
<h2 class="text-lg font-semibold text-gray-900">Rotation & Durations</h2>
|
||||
<p class="mt-1 text-sm text-gray-600">Set the order plugins rotate on the display and how long each screen is shown. Durations are in seconds.</p>
|
||||
</div>
|
||||
|
||||
{{ ui.settings_filter() }}
|
||||
@@ -16,22 +16,53 @@
|
||||
novalidate
|
||||
onsubmit="fixInvalidNumberInputs(this); return true;">
|
||||
|
||||
<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" 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 }}{{ 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 }}"
|
||||
name="{{ key }}"
|
||||
value="{{ value }}"
|
||||
min="5"
|
||||
max="600"
|
||||
class="form-control">
|
||||
<!-- Primary rotation order: drag to reorder which plugin shows first,
|
||||
second, ... in the normal display rotation. Saved as
|
||||
display.plugin_rotation_order and applied by the display
|
||||
controller on startup and live plugin enable/disable. -->
|
||||
<div class="bg-gray-50 rounded-lg p-4">
|
||||
<h3 class="text-md font-medium text-gray-900 mb-1">Rotation Order</h3>
|
||||
<p class="text-sm text-gray-600 mb-3">Drag plugins to set the order they rotate on the display. Each plugin's screens keep their own order within its turn. Takes effect after saving and restarting the display.</p>
|
||||
<div id="rotation_plugin_order" class="space-y-2 bg-white rounded-lg p-3 border border-gray-200">
|
||||
<p class="text-sm text-gray-500 italic">Loading plugins…</p>
|
||||
</div>
|
||||
<input type="hidden" id="rotation_plugin_order_value" name="plugin_rotation_order"
|
||||
value='{{ main_config.display.get("plugin_rotation_order", [])|tojson }}'>
|
||||
</div>
|
||||
|
||||
{% if duration_groups %}
|
||||
<div class="bg-gray-50 rounded-lg p-4 space-y-5">
|
||||
<div>
|
||||
<h3 class="text-md font-medium text-gray-900 mb-1">Screen Durations</h3>
|
||||
<p class="text-sm text-gray-600">How long each screen stays on before rotating to the next one, in seconds (5–600, default 30).</p>
|
||||
</div>
|
||||
{% for group in duration_groups %}
|
||||
<div>
|
||||
<h4 class="text-sm font-semibold text-gray-800 mb-2">{{ group.plugin_name }}</h4>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
{% for mode in group.modes %}
|
||||
<div class="form-group" id="setting-durations-{{ mode.key }}" data-setting-key="display.display_durations.{{ mode.key }}">
|
||||
<label for="duration__{{ mode.key }}" class="block text-sm font-medium text-gray-700">
|
||||
{{ mode.key | replace('_', ' ') | title }}{{ ui.help_tip('How long the ' ~ (mode.key | replace('_', ' ')) ~ ' screen stays on before rotating to the next one, in seconds.\nRange: 5–600. Currently ' ~ mode.value ~ 's.', mode.key | replace('_', ' ') | title) }}
|
||||
</label>
|
||||
<input type="number"
|
||||
id="duration__{{ mode.key }}"
|
||||
name="duration__{{ mode.key }}"
|
||||
value="{{ mode.value }}"
|
||||
min="5"
|
||||
max="600"
|
||||
class="form-control">
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="bg-gray-50 rounded-lg p-4">
|
||||
<p class="text-sm text-gray-500 italic">No enabled plugins found — enable a plugin in the Plugin Manager to set its screen durations here.</p>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<!-- Submit Button -->
|
||||
<div class="flex justify-end">
|
||||
@@ -43,3 +74,34 @@
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
// Shared drag-and-drop plugin list (static/v3/js/widgets/plugin-order-list.js,
|
||||
// same module the Vegas Scroll section uses).
|
||||
function initRotationOrderList(attempt) {
|
||||
const container = document.getElementById('rotation_plugin_order');
|
||||
if (!container) return;
|
||||
if (!window.PluginOrderList) {
|
||||
// Widget script is deferred; retry briefly, then surface a real
|
||||
// error instead of showing "Loading…" forever.
|
||||
if ((attempt || 0) < 50) {
|
||||
setTimeout(function() { initRotationOrderList((attempt || 0) + 1); }, 100);
|
||||
} else {
|
||||
container.textContent = 'Could not load the reorder widget — reload the page to try again.';
|
||||
container.className = 'text-sm text-red-500';
|
||||
}
|
||||
return;
|
||||
}
|
||||
window.PluginOrderList.init({
|
||||
containerId: 'rotation_plugin_order',
|
||||
orderInputId: 'rotation_plugin_order_value'
|
||||
});
|
||||
}
|
||||
if (document.readyState === 'loading') {
|
||||
document.addEventListener('DOMContentLoaded', initRotationOrderList);
|
||||
} else {
|
||||
initRotationOrderList();
|
||||
}
|
||||
}());
|
||||
</script>
|
||||
|
||||
@@ -61,6 +61,149 @@
|
||||
}());
|
||||
</script>
|
||||
|
||||
<!-- Getting Started checklist: non-gating, dismissible (localStorage), items
|
||||
auto-check from existing config/endpoints — no new persisted state.
|
||||
Known heuristic limits (acceptable, disclosed): values left at legitimate
|
||||
defaults (e.g. a user actually in Tampa) read as "not done". -->
|
||||
{% set _hw = main_config.display.hardware if main_config and main_config.display else {} %}
|
||||
{% set _hw_done = (_hw.rows or 0) > 0 and (_hw.cols or 0) > 0 and (_hw.chain_length or 0) > 0 %}
|
||||
{% set _loc = main_config.location if main_config and main_config.location else {} %}
|
||||
{% set _loc_done = (main_config.timezone and main_config.timezone != 'America/New_York')
|
||||
or (_loc.city and _loc.city != 'Tampa') %}
|
||||
<div id="getting-started-card" class="bg-blue-50 border border-blue-200 rounded-lg p-4 mb-4" style="display:none" role="region" aria-label="Getting started checklist">
|
||||
<div class="flex items-start justify-between">
|
||||
<div class="flex-1">
|
||||
<p class="text-sm font-semibold text-blue-900"><i class="fas fa-rocket mr-1"></i>Getting Started</p>
|
||||
<p class="text-xs text-blue-700 mt-0.5 mb-2">A few steps to get your display up and running. Click a step to jump there, or click its checkbox to mark it done yourself. The card hides once everything is checked.</p>
|
||||
<ul class="space-y-1 text-sm" id="getting-started-items">
|
||||
<li><button type="button" class="gs-item text-left w-full" data-done="{{ '1' if _hw_done else '0' }}" data-tab="display">
|
||||
<i class="far fa-square mr-2"></i>Set your panel size (Display tab)</button></li>
|
||||
<li><button type="button" class="gs-item text-left w-full" data-done="{{ '1' if _loc_done else '0' }}" data-tab="general">
|
||||
<i class="far fa-square mr-2"></i>Set your timezone and location (General tab)</button></li>
|
||||
<li><button type="button" class="gs-item text-left w-full" data-done="0" data-check="installed" data-tab="plugins">
|
||||
<i class="far fa-square mr-2"></i>Install a plugin from the Plugin Store</button></li>
|
||||
<li><button type="button" class="gs-item text-left w-full" data-done="0" data-check="enabled" data-tab="plugins">
|
||||
<i class="far fa-square mr-2"></i>Enable a plugin</button></li>
|
||||
<li><button type="button" class="gs-item text-left w-full" data-done="0" data-check="configured" data-tab="plugins">
|
||||
<i class="far fa-square mr-2"></i>Configure it (each plugin gets its own tab)</button></li>
|
||||
</ul>
|
||||
</div>
|
||||
<button type="button" onclick="window.dismissGettingStarted()" class="ml-4 flex-shrink-0 text-blue-400 hover:text-blue-600" aria-label="Dismiss getting started checklist">
|
||||
<i class="fas fa-times"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
(function () {
|
||||
var KEY = 'ledmatrix-getting-started-dismissed';
|
||||
var MANUAL_KEY = 'ledmatrix-getting-started-manual';
|
||||
var card = document.getElementById('getting-started-card');
|
||||
if (!card) return;
|
||||
try { if (localStorage.getItem(KEY) === '1') return; } catch (e) {}
|
||||
card.style.display = 'block';
|
||||
|
||||
// Manual per-item overrides: the auto-detection is heuristic (a value
|
||||
// saved AT its default — e.g. a user genuinely in the default timezone —
|
||||
// reads as "not done"), so clicking an item's checkbox marks it done by
|
||||
// hand, persisted per browser.
|
||||
var manual = {};
|
||||
try { manual = JSON.parse(localStorage.getItem(MANUAL_KEY) || '{}') || {}; } catch (e) {}
|
||||
function saveManual() {
|
||||
try { localStorage.setItem(MANUAL_KEY, JSON.stringify(manual)); } catch (e) {}
|
||||
}
|
||||
|
||||
function setDone(btn, done) {
|
||||
btn.dataset.done = done ? '1' : '0';
|
||||
var icon = btn.querySelector('i');
|
||||
if (icon) { icon.className = done ? 'fas fa-check-square mr-2 text-green-600' : 'far fa-square mr-2'; }
|
||||
btn.classList.toggle('text-gray-500', done);
|
||||
btn.classList.toggle('line-through', done);
|
||||
}
|
||||
|
||||
// Once every step is done (auto-detected or manually checked), the card
|
||||
// has served its purpose — hide it without requiring an explicit dismiss.
|
||||
function maybeAutoHide() {
|
||||
var items = card.querySelectorAll('.gs-item');
|
||||
for (var i = 0; i < items.length; i++) {
|
||||
if (items[i].dataset.done !== '1') return;
|
||||
}
|
||||
card.style.display = 'none';
|
||||
}
|
||||
|
||||
function markDone(btn) {
|
||||
if (!btn) return;
|
||||
setDone(btn, true);
|
||||
maybeAutoHide();
|
||||
}
|
||||
|
||||
// Apply server-derived + manual states, wire deep links (same app-data
|
||||
// access pattern as settings-search.js). Clicking the checkbox icon
|
||||
// toggles manual done; clicking the text deep-links to the tab.
|
||||
Array.prototype.forEach.call(card.querySelectorAll('.gs-item'), function (btn, idx) {
|
||||
if (manual[idx] === 1) btn.dataset.done = '1';
|
||||
if (btn.dataset.done === '1') setDone(btn, true);
|
||||
btn.addEventListener('click', function (ev) {
|
||||
var icon = btn.querySelector('i');
|
||||
if (icon && ev.target === icon) {
|
||||
var nowDone = btn.dataset.done !== '1';
|
||||
setDone(btn, nowDone);
|
||||
manual[idx] = nowDone ? 1 : 0;
|
||||
saveManual();
|
||||
if (nowDone) maybeAutoHide();
|
||||
return;
|
||||
}
|
||||
var appEl = document.querySelector('[x-data="app()"]') || document.querySelector('[x-data]');
|
||||
// Same two-tier resolution as settings-search.js's getAppData():
|
||||
// _x_dataStack on current Alpine, __x.$data as an older-API fallback.
|
||||
var data = appEl && ((appEl._x_dataStack && appEl._x_dataStack[0]) ||
|
||||
(appEl.__x && appEl.__x.$data));
|
||||
if (data) {
|
||||
data.activeTab = btn.dataset.tab;
|
||||
if ('mobileNavOpen' in data) data.mobileNavOpen = false;
|
||||
}
|
||||
});
|
||||
});
|
||||
maybeAutoHide();
|
||||
|
||||
// Plugin-derived states from the existing installed-plugins endpoint.
|
||||
fetch('/api/v3/plugins/installed')
|
||||
.then(function (r) { return r.json(); })
|
||||
.then(function (resp) {
|
||||
var plugins = (resp.data && resp.data.plugins) || [];
|
||||
if (plugins.length > 0) markDone(card.querySelector('[data-check="installed"]'));
|
||||
var enabled = plugins.filter(function (p) { return p.enabled; });
|
||||
if (enabled.length > 0) {
|
||||
markDone(card.querySelector('[data-check="enabled"]'));
|
||||
// "Configured" heuristic: the first enabled plugin has at least
|
||||
// one saved value that differs from its schema defaults.
|
||||
var pid = enabled[0].id;
|
||||
Promise.all([
|
||||
fetch('/api/v3/plugins/config?plugin_id=' + encodeURIComponent(pid)).then(function (r) { return r.json(); }),
|
||||
fetch('/api/v3/plugins/schema?plugin_id=' + encodeURIComponent(pid)).then(function (r) { return r.json(); })
|
||||
]).then(function (res) {
|
||||
// GET /plugins/config returns the config dict directly in .data
|
||||
var cfg = res[0].data || {};
|
||||
var props = (res[1].data && res[1].data.schema && res[1].data.schema.properties) || {};
|
||||
for (var k in cfg) {
|
||||
if (k === 'enabled' || !(k in props)) continue;
|
||||
if (props[k] && 'default' in props[k] &&
|
||||
JSON.stringify(cfg[k]) !== JSON.stringify(props[k]['default'])) {
|
||||
markDone(card.querySelector('[data-check="configured"]'));
|
||||
return;
|
||||
}
|
||||
}
|
||||
}).catch(function () {});
|
||||
}
|
||||
})
|
||||
.catch(function () {});
|
||||
|
||||
window.dismissGettingStarted = function () {
|
||||
card.style.display = 'none';
|
||||
try { localStorage.setItem(KEY, '1'); } catch (e) {}
|
||||
};
|
||||
}());
|
||||
</script>
|
||||
|
||||
<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 Overview</h2>
|
||||
@@ -221,7 +364,10 @@
|
||||
<h3 class="text-md font-medium text-gray-900 mb-4">
|
||||
<i class="fas fa-desktop"></i> Live Display Preview
|
||||
</h3>
|
||||
<div class="bg-gray-900 rounded-lg p-6 border border-gray-700" style="position: relative;">
|
||||
<!-- overflow-x-auto: on narrow screens a wide preview scrolls at its
|
||||
true pixel-perfect size instead of being squeezed (fractional
|
||||
downscaling of pixel art reads as blur) -->
|
||||
<div class="bg-gray-900 rounded-lg p-6 border border-gray-700 overflow-x-auto" style="position: relative;">
|
||||
<div id="previewStage" class="preview-stage" style="display:none; position:relative; display:inline-block;">
|
||||
<div id="previewMeta" style="position:absolute; top:-28px; left:0; color:#ddd; font-size:12px; opacity:0.85;"></div>
|
||||
<img id="displayImage" style="image-rendering: pixelated; display: block;" alt="LED Matrix Display">
|
||||
|
||||
@@ -893,6 +893,12 @@
|
||||
<p class="mt-1 text-sm text-gray-600">{{ plugin.description or 'Plugin configuration' }}</p>
|
||||
</div>
|
||||
<div class="flex items-center space-x-4">
|
||||
<button type="button"
|
||||
onclick="window.previewPluginNow('{{ plugin.id }}')"
|
||||
class="btn bg-blue-600 hover:bg-blue-700 text-white px-3 py-1.5 text-sm rounded-md"
|
||||
title="Run this plugin on the display for 60 seconds and open the live preview">
|
||||
<i class="fas fa-play mr-1"></i>Preview on display
|
||||
</button>
|
||||
<label class="flex items-center cursor-pointer">
|
||||
<input type="checkbox"
|
||||
id="plugin-enabled-{{ plugin.id }}"
|
||||
@@ -1005,13 +1011,53 @@
|
||||
{# Use property order if defined, otherwise use natural order #}
|
||||
{# Skip 'enabled' field - it's handled by the header toggle #}
|
||||
{% set property_order = schema['x-propertyOrder'] if 'x-propertyOrder' in schema else schema.properties.keys()|list %}
|
||||
{# Flat (non-object) properties flagged "x-advanced": true are
|
||||
grouped into one collapsed "Advanced Settings" section after
|
||||
the basic fields. Object-type properties already render as
|
||||
their own collapsible sections, so the flag is ignored for
|
||||
them. Schemas without the flag render exactly as before. #}
|
||||
{% set tiers = namespace(basic=[], advanced=[]) %}
|
||||
{% for key in property_order %}
|
||||
{% if key in schema.properties and key != 'enabled' %}
|
||||
{% set prop = schema.properties[key] %}
|
||||
{% set value = config[key] if key in config else none %}
|
||||
{{ render_field(key, prop, value, '', plugin.id) }}
|
||||
{% set is_object = prop.type is defined and 'object' in prop.type %}
|
||||
{% if prop.get('x-advanced') and not is_object %}
|
||||
{% set tiers.advanced = tiers.advanced + [key] %}
|
||||
{% else %}
|
||||
{% set tiers.basic = tiers.basic + [key] %}
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% for key in tiers.basic %}
|
||||
{% set prop = schema.properties[key] %}
|
||||
{% set value = config[key] if key in config else none %}
|
||||
{{ render_field(key, prop, value, '', plugin.id) }}
|
||||
{% endfor %}
|
||||
{% if tiers.advanced %}
|
||||
{% set adv_section_id = (plugin.id ~ '-section-advanced-settings')|replace('.', '-')|replace('_', '-') %}
|
||||
<div class="nested-section border border-gray-300 rounded-lg mb-4">
|
||||
<button type="button"
|
||||
class="w-full bg-gray-100 hover:bg-gray-200 px-4 py-3 flex items-center justify-between text-left transition-colors rounded-t-lg"
|
||||
aria-controls="{{ adv_section_id }}"
|
||||
aria-expanded="false"
|
||||
onclick="toggleSection('{{ adv_section_id }}')">
|
||||
<div class="flex-1">
|
||||
<h4 class="font-semibold text-gray-900">
|
||||
<i class="fas fa-sliders-h mr-1 text-gray-500"></i>Advanced Settings ({{ tiers.advanced|length }})
|
||||
</h4>
|
||||
<p class="text-sm text-gray-600 mt-1">Optional fine-tuning — the defaults work for most setups.</p>
|
||||
</div>
|
||||
<i id="{{ adv_section_id }}-icon" class="fas fa-chevron-right text-gray-500 transition-transform"></i>
|
||||
</button>
|
||||
<div id="{{ adv_section_id }}" class="nested-content bg-gray-50 px-4 py-4 space-y-3 hidden" style="display: none;">
|
||||
{% for key in tiers.advanced %}
|
||||
{% set prop = schema.properties[key] %}
|
||||
{% set value = config[key] if key in config else none %}
|
||||
{{ render_field(key, prop, value, '', plugin.id) }}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% else %}
|
||||
{# No schema - render simple form from config #}
|
||||
{% if config %}
|
||||
|
||||
@@ -466,65 +466,6 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Plugin Configuration Modal -->
|
||||
<div id="plugin-config-modal" class="fixed inset-0 modal-backdrop flex items-center justify-center z-50" style="display: none;">
|
||||
<div class="modal-content p-6 w-full max-w-4xl max-h-[90vh] overflow-y-auto">
|
||||
<div class="flex justify-between items-center mb-4">
|
||||
<h3 id="plugin-config-title" class="text-lg font-semibold">Plugin Configuration</h3>
|
||||
<div class="flex items-center space-x-2">
|
||||
<!-- View Toggle -->
|
||||
<div class="flex items-center bg-gray-100 rounded-lg p-1">
|
||||
<button id="view-toggle-form" class="view-toggle-btn active px-3 py-1 rounded text-sm font-medium transition-colors" data-view="form">
|
||||
<i class="fas fa-list mr-1"></i>Form
|
||||
</button>
|
||||
<button id="view-toggle-json" class="view-toggle-btn px-3 py-1 rounded text-sm font-medium transition-colors" data-view="json">
|
||||
<i class="fas fa-code mr-1"></i>JSON
|
||||
</button>
|
||||
</div>
|
||||
<!-- Reset Button -->
|
||||
<button id="reset-to-defaults-btn" class="px-3 py-1 text-sm bg-yellow-500 hover:bg-yellow-600 text-white rounded transition-colors" title="Reset to defaults">
|
||||
<i class="fas fa-undo mr-1"></i>Reset
|
||||
</button>
|
||||
<button id="close-plugin-config" class="text-gray-400 hover:text-gray-600">
|
||||
<i class="fas fa-times"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Validation Errors Display -->
|
||||
<div id="plugin-config-validation-errors" class="hidden mb-4 p-3 bg-red-50 border border-red-200 rounded-md">
|
||||
<div class="flex items-start">
|
||||
<i class="fas fa-exclamation-circle text-red-600 mt-0.5 mr-2"></i>
|
||||
<div class="flex-1">
|
||||
<p class="text-sm font-medium text-red-800 mb-2">Configuration Validation Errors</p>
|
||||
<ul id="validation-errors-list" class="text-sm text-red-700 list-disc list-inside space-y-1"></ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Form View -->
|
||||
<div id="plugin-config-form-view" class="plugin-config-view">
|
||||
<div id="plugin-config-content">
|
||||
<!-- Plugin config form will be loaded here -->
|
||||
</div>
|
||||
</div>
|
||||
<!-- JSON Editor View -->
|
||||
<div id="plugin-config-json-view" class="plugin-config-view hidden">
|
||||
<div class="mb-2">
|
||||
<label class="block text-sm font-medium text-gray-700 mb-1">Configuration JSON</label>
|
||||
<textarea id="plugin-config-json-editor" class="w-full border border-gray-300 rounded-md font-mono text-sm" rows="20"></textarea>
|
||||
</div>
|
||||
<div class="flex justify-end space-x-2 pt-2 border-t border-gray-200">
|
||||
<button type="button" onclick="closePluginConfigModal()" class="btn bg-gray-600 hover:bg-gray-700 text-white px-4 py-2 rounded-md">
|
||||
Cancel
|
||||
</button>
|
||||
<button type="button" id="save-json-config-btn" class="btn bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md">
|
||||
<i class="fas fa-save mr-2"></i>Save Configuration
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- On-Demand Modal moved to base.html so it's always available -->
|
||||
|
||||
<style>
|
||||
|
||||
Reference in New Issue
Block a user