mirror of
https://github.com/ChuckBuilds/LEDMatrix.git
synced 2026-04-10 13:02:59 +00:00
feat: add dev preview server and CLI render script (#264)
* fix(web): wire up "Check & Update All" plugins button window.updateAllPlugins was never assigned, so the button always showed "Bulk update handler unavailable." Wire it to PluginInstallManager.updateAll(), add per-plugin progress feedback in the button text, show a summary notification on completion, and skip redundant plugin list reloads. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * feat: add dev preview server, CLI render script, and visual test display manager Adds local development tools for rapid plugin iteration without deploying to RPi: - VisualTestDisplayManager: renders real pixels via PIL (same fonts/interface as production) - Dev preview server (Flask): interactive web UI with plugin picker, auto-generated config forms, zoom/grid controls, and mock data support for API-dependent plugins - CLI render script: render any plugin to PNG for AI-assisted visual feedback loops - Updated test runner and conftest to auto-detect plugin-repos/ directory Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * fix(dev-preview): address code review issues - Use get_logger() from src.logging_config instead of logging.getLogger() in visual_display_manager.py to match project logging conventions - Eliminate duplicate public/private weather draw methods — public draw_sun/ draw_cloud/draw_rain/draw_snow now delegate to the private _draw_* variants so plugins get consistent pixel output in tests vs production - Default install_deps=False in dev_server.py and render_plugin.py — dev scripts don't need to run pip install; developers are expected to have plugin deps installed in their venv already - Guard plugins_dir fixture against PermissionError during directory iteration - Fix PluginInstallManager.updateAll() to fall back to window.installedPlugins when PluginStateManager.installedPlugins is empty (plugins_manager.js populates window.installedPlugins independently of PluginStateManager) - Remove 5 debug console.log statements from plugins_manager.js button setup and initialization code Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * fix(scroll): fix scroll completion to prevent multi-pass wrapping Change required_total_distance from total_scroll_width + display_width to total_scroll_width alone. The scrolling image already contains display_width pixels of blank initial padding, so reaching total_scroll_width means all content has scrolled off-screen. The extra display_width term was causing 1-2+ unnecessary wrap-arounds, making the same games appear multiple times and producing a black flicker between passes. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * fix(dev-preview): address PR #264 code review findings - docs/DEV_PREVIEW.md: add bash language tag to fenced code block - scripts/dev_server.py: add MAX/MIN_WIDTH/HEIGHT constants and validate width/height in render endpoint; add structured logger calls to discover_plugins (missing dirs, hidden entries, missing manifest, JSON/OS errors, duplicate ids); add type annotations to all helpers - scripts/render_plugin.py: add MIN/MAX_DIMENSION validation after parse_args; replace prints with get_logger() calls; narrow broad Exception catches to ImportError/OSError/ValueError in plugin load block; add type annotations to all helpers and main(); rename unused module binding to _module - scripts/run_plugin_tests.py: wrap plugins_path.iterdir() in try/except PermissionError with fallback to plugin-repos/ - scripts/templates/dev_preview.html: replace non-focusable div toggles with button role="switch" + aria-checked; add keyboard handlers (Enter/Space); sync aria-checked in toggleGrid/toggleAutoRefresh - src/common/scroll_helper.py: early-guard zero total_scroll_width to keep scroll_position at 0 and skip completion/wrap logic - src/plugin_system/testing/visual_display_manager.py: forward color arg in draw_cloud -> _draw_cloud; add color param to _draw_cloud; restore _scrolling_state in reset(); narrow broad Exception catches in _load_fonts to FileNotFoundError/OSError/ImportError; add explicit type annotations to draw_text - test/plugins/test_visual_rendering.py: use context manager for Image.open in test_save_snapshot - test/plugins/conftest.py: add return type hints to all fixtures Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * chore: add bandit and gitleaks pre-commit hooks Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> --------- Co-authored-by: Chuck <chuck@example.com> Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Chuck
@@ -81,25 +81,38 @@ const PluginInstallManager = {
|
||||
/**
|
||||
* Update all plugins.
|
||||
*
|
||||
* @param {Function} onProgress - Optional callback(index, total, pluginId) for progress updates
|
||||
* @returns {Promise<Array>} Update results
|
||||
*/
|
||||
async updateAll() {
|
||||
if (!window.PluginStateManager || !window.PluginStateManager.installedPlugins) {
|
||||
throw new Error('Installed plugins not loaded');
|
||||
}
|
||||
async updateAll(onProgress) {
|
||||
// Prefer PluginStateManager if populated, fall back to window.installedPlugins
|
||||
// (plugins_manager.js populates window.installedPlugins independently)
|
||||
const stateManagerPlugins = window.PluginStateManager && window.PluginStateManager.installedPlugins;
|
||||
const plugins = (stateManagerPlugins && stateManagerPlugins.length > 0)
|
||||
? stateManagerPlugins
|
||||
: (window.installedPlugins || []);
|
||||
|
||||
const plugins = window.PluginStateManager.installedPlugins;
|
||||
if (!plugins.length) {
|
||||
return [];
|
||||
}
|
||||
const results = [];
|
||||
|
||||
for (const plugin of plugins) {
|
||||
for (let i = 0; i < plugins.length; i++) {
|
||||
const plugin = plugins[i];
|
||||
if (onProgress) onProgress(i + 1, plugins.length, plugin.id);
|
||||
try {
|
||||
const result = await this.update(plugin.id);
|
||||
const result = await window.PluginAPI.updatePlugin(plugin.id);
|
||||
results.push({ pluginId: plugin.id, success: true, result });
|
||||
} catch (error) {
|
||||
results.push({ pluginId: plugin.id, success: false, error });
|
||||
}
|
||||
}
|
||||
|
||||
// Reload plugin list once at the end
|
||||
if (window.PluginStateManager) {
|
||||
await window.PluginStateManager.loadInstalledPlugins();
|
||||
}
|
||||
|
||||
return results;
|
||||
}
|
||||
};
|
||||
@@ -109,5 +122,6 @@ if (typeof module !== 'undefined' && module.exports) {
|
||||
module.exports = PluginInstallManager;
|
||||
} else {
|
||||
window.PluginInstallManager = PluginInstallManager;
|
||||
window.updateAllPlugins = (onProgress) => PluginInstallManager.updateAll(onProgress);
|
||||
}
|
||||
|
||||
|
||||
@@ -1066,26 +1066,17 @@ window.initPluginsPage = function() {
|
||||
const onDemandForm = document.getElementById('on-demand-form');
|
||||
const onDemandModal = document.getElementById('on-demand-modal');
|
||||
|
||||
console.log('[initPluginsPage] Setting up button listeners:', {
|
||||
refreshBtn: !!refreshBtn,
|
||||
updateAllBtn: !!updateAllBtn,
|
||||
restartBtn: !!restartBtn
|
||||
});
|
||||
|
||||
if (refreshBtn) {
|
||||
refreshBtn.replaceWith(refreshBtn.cloneNode(true));
|
||||
document.getElementById('refresh-plugins-btn').addEventListener('click', refreshPlugins);
|
||||
console.log('[initPluginsPage] Attached refreshPlugins listener');
|
||||
}
|
||||
if (updateAllBtn) {
|
||||
updateAllBtn.replaceWith(updateAllBtn.cloneNode(true));
|
||||
document.getElementById('update-all-plugins-btn').addEventListener('click', runUpdateAllPlugins);
|
||||
console.log('[initPluginsPage] Attached runUpdateAllPlugins listener');
|
||||
}
|
||||
if (restartBtn) {
|
||||
restartBtn.replaceWith(restartBtn.cloneNode(true));
|
||||
document.getElementById('restart-display-btn').addEventListener('click', restartDisplay);
|
||||
console.log('[initPluginsPage] Attached restartDisplay listener');
|
||||
}
|
||||
// Restore persisted store sort/perPage
|
||||
const storeSortEl = document.getElementById('store-sort');
|
||||
@@ -1135,28 +1126,22 @@ window.initPluginsPage = function() {
|
||||
|
||||
// Consolidated initialization function
|
||||
function initializePluginPageWhenReady() {
|
||||
console.log('Checking for plugin elements...');
|
||||
return window.initPluginsPage();
|
||||
}
|
||||
|
||||
// Single initialization entry point
|
||||
(function() {
|
||||
console.log('Plugin manager script loaded, setting up initialization...');
|
||||
|
||||
let initTimer = null;
|
||||
|
||||
|
||||
function attemptInit() {
|
||||
// Clear any pending timer
|
||||
if (initTimer) {
|
||||
clearTimeout(initTimer);
|
||||
initTimer = null;
|
||||
}
|
||||
|
||||
|
||||
// Try immediate initialization
|
||||
if (initializePluginPageWhenReady()) {
|
||||
console.log('Initialized immediately');
|
||||
return;
|
||||
}
|
||||
initializePluginPageWhenReady();
|
||||
}
|
||||
|
||||
// Strategy 1: Immediate check (for direct page loads)
|
||||
@@ -1763,8 +1748,7 @@ function startOnDemandStatusPolling() {
|
||||
|
||||
window.loadOnDemandStatus = loadOnDemandStatus;
|
||||
|
||||
async function runUpdateAllPlugins() {
|
||||
console.log('[runUpdateAllPlugins] Button clicked, checking for updates...');
|
||||
function runUpdateAllPlugins() {
|
||||
const button = document.getElementById('update-all-plugins-btn');
|
||||
|
||||
if (!button) {
|
||||
@@ -1786,58 +1770,47 @@ async function runUpdateAllPlugins() {
|
||||
button.dataset.running = 'true';
|
||||
button.disabled = true;
|
||||
button.classList.add('opacity-60', 'cursor-wait');
|
||||
button.innerHTML = '<i class="fas fa-sync fa-spin mr-2"></i>Checking...';
|
||||
|
||||
let updated = 0, upToDate = 0, failed = 0;
|
||||
const onProgress = (current, total, pluginId) => {
|
||||
button.innerHTML = `<i class="fas fa-sync fa-spin mr-2"></i>Updating ${current}/${total}...`;
|
||||
};
|
||||
|
||||
try {
|
||||
for (let i = 0; i < plugins.length; i++) {
|
||||
const plugin = plugins[i];
|
||||
const pluginId = plugin.id;
|
||||
button.innerHTML = `<i class="fas fa-sync fa-spin mr-2"></i>Updating ${i + 1}/${plugins.length}...`;
|
||||
|
||||
try {
|
||||
const response = await fetch('/api/v3/plugins/update', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ plugin_id: pluginId })
|
||||
});
|
||||
const data = await response.json();
|
||||
|
||||
if (data.status === 'success') {
|
||||
if (data.message && data.message.includes('already up to date')) {
|
||||
upToDate++;
|
||||
} else {
|
||||
updated++;
|
||||
}
|
||||
} else {
|
||||
failed++;
|
||||
}
|
||||
} catch (error) {
|
||||
failed++;
|
||||
console.error(`Error updating ${pluginId}:`, error);
|
||||
Promise.resolve(window.updateAllPlugins(onProgress))
|
||||
.then(results => {
|
||||
if (!results || !results.length) {
|
||||
showNotification('No plugins to update.', 'info');
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
// Refresh plugin list once at the end
|
||||
if (updated > 0) {
|
||||
loadInstalledPlugins(true);
|
||||
}
|
||||
|
||||
const parts = [];
|
||||
if (updated > 0) parts.push(`${updated} updated`);
|
||||
if (upToDate > 0) parts.push(`${upToDate} already up to date`);
|
||||
if (failed > 0) parts.push(`${failed} failed`);
|
||||
const type = failed > 0 ? (updated > 0 ? 'warning' : 'error') : 'success';
|
||||
showNotification(parts.join(', '), type);
|
||||
} catch (error) {
|
||||
console.error('Bulk plugin update failed:', error);
|
||||
showNotification('Failed to update all plugins: ' + error.message, 'error');
|
||||
} finally {
|
||||
button.innerHTML = originalContent;
|
||||
button.disabled = false;
|
||||
button.classList.remove('opacity-60', 'cursor-wait');
|
||||
button.dataset.running = 'false';
|
||||
}
|
||||
let updated = 0, upToDate = 0, failed = 0;
|
||||
for (const r of results) {
|
||||
if (!r.success) {
|
||||
failed++;
|
||||
} else if (r.result && r.result.message && r.result.message.includes('already up to date')) {
|
||||
upToDate++;
|
||||
} else {
|
||||
updated++;
|
||||
}
|
||||
}
|
||||
const parts = [];
|
||||
if (updated > 0) parts.push(`${updated} updated`);
|
||||
if (upToDate > 0) parts.push(`${upToDate} already up to date`);
|
||||
if (failed > 0) parts.push(`${failed} failed`);
|
||||
const type = failed > 0 ? (updated > 0 ? 'warning' : 'error') : 'success';
|
||||
showNotification(parts.join(', '), type);
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error updating all plugins:', error);
|
||||
if (typeof showNotification === 'function') {
|
||||
showNotification('Error updating all plugins: ' + error.message, 'error');
|
||||
}
|
||||
})
|
||||
.finally(() => {
|
||||
button.innerHTML = originalContent;
|
||||
button.disabled = false;
|
||||
button.classList.remove('opacity-60', 'cursor-wait');
|
||||
button.dataset.running = 'false';
|
||||
});
|
||||
}
|
||||
|
||||
// Initialize on-demand modal setup (runs unconditionally since modal is in base.html)
|
||||
|
||||
Reference in New Issue
Block a user