rick/LEDMatrix
1
0
Fork 0
mirror of https://github.com/ChuckBuilds/LEDMatrix.git synced 2026-04-11 13:23:00 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: integrate Starlark/Tronbyte app support into plugin system

Browse Source 
Add starlark-apps plugin that renders Tidbyt/Tronbyte .star apps via
Pixlet binary and integrates them into the existing Plugin Manager UI
as virtual plugins. Includes vegas scroll support, Tronbyte repository
browsing, and per-app configuration.

- Extract working starlark plugin code from starlark branch onto fresh main
- Fix plugin conventions (get_logger, VegasDisplayMode, BasePlugin)
- Add 13 starlark API endpoints to api_v3.py (CRUD, browse, install, render)
- Virtual plugin entries (starlark:<app_id>) in installed plugins list
- Starlark-aware toggle and config routing in pages_v3.py
- Tronbyte repository browser section in Plugin Store UI
- Pixlet binary download script (scripts/download_pixlet.sh)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Chuck
2026-02-18 13:27:22 -05:00
parent 963c4d3b91
commit 3ec1e987a4
15 changed files with 3198 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
web_interface/templates/v3/partials/plugins.html
View File

@@ -179,6 +179,48 @@
</div>
</div>
<!-- Starlark Apps Section (Tronbyte Community Apps) -->
<div id="starlark-apps-section" class="border-t border-gray-200 pt-8 mt-8">
<div class="flex items-center justify-between mb-5 pb-3 border-b border-gray-200">
<div class="flex items-center gap-3">
<h3 class="text-lg font-bold text-gray-900"><i class="fas fa-star text-yellow-500 mr-2"></i>Starlark Apps</h3>
<span id="starlark-apps-count" class="text-sm text-gray-500 font-medium"></span>
</div>
<button id="toggle-starlark-section" class="text-sm text-blue-600 hover:text-blue-800 flex items-center font-medium transition-colors">
<i class="fas fa-chevron-down mr-1" id="starlark-section-icon"></i>
<span>Show</span>
</button>
</div>
<div id="starlark-section-content" class="hidden">
<p class="text-sm text-gray-600 mb-4">Browse and install Starlark apps from the <a href="https://github.com/tronbyt/apps" target="_blank" class="text-blue-600 hover:text-blue-800 underline">Tronbyte community repository</a>. Requires <strong>Pixlet</strong> binary.</p>
<!-- Pixlet Status Banner -->
<div id="starlark-pixlet-status" class="mb-4"></div>
<!-- Search/Filter -->
<div class="flex gap-3 mb-4">
<input type="text" id="starlark-search" placeholder="Search Starlark apps..." class="form-control text-sm flex-[3] min-w-0 px-4 py-2.5 border border-gray-300 rounded-lg shadow-sm">
<select id="starlark-category" class="form-control text-sm flex-1 px-3 py-2.5 border border-gray-300 rounded-lg shadow-sm">
<option value="">All Categories</option>
</select>
<button id="starlark-browse-btn" class="btn bg-blue-600 hover:bg-blue-700 text-white px-5 py-2.5 rounded-lg whitespace-nowrap font-semibold shadow-sm">
<i class="fas fa-search mr-2"></i>Browse
</button>
</div>
<!-- Upload .star file -->
<div class="flex gap-3 mb-4">
<button id="starlark-upload-btn" class="btn bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-md text-sm">
<i class="fas fa-upload mr-2"></i>Upload .star File
</button>
</div>
<!-- Starlark Apps Grid -->
<div id="starlark-apps-grid" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-6">
</div>
</div>
</div>
<!-- Install from GitHub URL Section (Separate section, always visible) -->
<div class="border-t border-gray-200 pt-8 mt-8">
<div class="flex items-center justify-between mb-5 pb-3 border-b border-gray-200">

160
web_interface/templates/v3/partials/starlark_config.html Normal file
View File

@@ -0,0 +1,160 @@
<div class="space-y-6">
<!-- Header -->
<div class="flex items-center justify-between pb-4 border-b border-gray-200">
<div>
<h3 class="text-lg font-bold text-gray-900">
<i class="fas fa-star text-yellow-500 mr-2"></i>{{ app_name }}
</h3>
<p class="text-sm text-gray-500 mt-1">Starlark App &mdash; ID: {{ app_id }}</p>
</div>
<div class="flex items-center gap-3">
<span class="badge badge-warning"><i class="fas fa-star mr-1"></i>Starlark</span>
{% if app_enabled %}
<span class="badge badge-success">Enabled</span>
{% else %}
<span class="badge badge-error">Disabled</span>
{% endif %}
</div>
</div>
<!-- Status -->
<div class="bg-gray-50 rounded-lg p-4 border border-gray-200">
<h4 class="text-sm font-semibold text-gray-700 mb-3">Status</h4>
<div class="grid grid-cols-2 md:grid-cols-4 gap-4 text-sm">
<div>
<span class="text-gray-500">Frames:</span>
<span class="font-medium ml-1">{{ frame_count if has_frames else 'Not rendered' }}</span>
</div>
<div>
<span class="text-gray-500">Render Interval:</span>
<span class="font-medium ml-1">{{ render_interval }}s</span>
</div>
<div>
<span class="text-gray-500">Display Duration:</span>
<span class="font-medium ml-1">{{ display_duration }}s</span>
</div>
<div>
<span class="text-gray-500">Last Render:</span>
<span class="font-medium ml-1" id="starlark-last-render">{{ last_render_time }}</span>
</div>
</div>
</div>
<!-- Actions -->
<div class="flex gap-3">
<button onclick="forceRenderStarlarkApp('{{ app_id }}')"
class="btn bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-semibold">
<i class="fas fa-sync mr-2"></i>Force Render
</button>
<button onclick="toggleStarlarkApp('{{ app_id }}', {{ 'false' if app_enabled else 'true' }})"
class="btn {{ 'bg-red-600 hover:bg-red-700' if app_enabled else 'bg-green-600 hover:bg-green-700' }} text-white px-4 py-2 rounded-md text-sm font-semibold">
<i class="fas {{ 'fa-toggle-off' if app_enabled else 'fa-toggle-on' }} mr-2"></i>
{{ 'Disable' if app_enabled else 'Enable' }}
</button>
</div>
<!-- App-specific Config (if schema exists) -->
{% if schema %}
<div class="bg-white rounded-lg p-4 border border-gray-200">
<h4 class="text-sm font-semibold text-gray-700 mb-3">App Configuration</h4>
<div id="starlark-config-form" class="space-y-4">
{% for key, value in config.items() %}
<div class="form-group">
<label class="block text-sm font-medium text-gray-700 mb-1">{{ key }}</label>
<input type="text" class="form-control w-full px-3 py-2 border border-gray-300 rounded-md text-sm"
name="{{ key }}" value="{{ value }}"
data-starlark-config="{{ key }}">
</div>
{% endfor %}
<button onclick="saveStarlarkConfig('{{ app_id }}')"
class="btn bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-semibold">
<i class="fas fa-save mr-2"></i>Save Configuration
</button>
</div>
</div>
{% elif config %}
<div class="bg-white rounded-lg p-4 border border-gray-200">
<h4 class="text-sm font-semibold text-gray-700 mb-3">App Configuration</h4>
<div id="starlark-config-form" class="space-y-4">
{% for key, value in config.items() %}
<div class="form-group">
<label class="block text-sm font-medium text-gray-700 mb-1">{{ key }}</label>
<input type="text" class="form-control w-full px-3 py-2 border border-gray-300 rounded-md text-sm"
name="{{ key }}" value="{{ value }}"
data-starlark-config="{{ key }}">
</div>
{% endfor %}
<button onclick="saveStarlarkConfig('{{ app_id }}')"
class="btn bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-semibold">
<i class="fas fa-save mr-2"></i>Save Configuration
</button>
</div>
</div>
{% else %}
<div class="bg-gray-50 rounded-lg p-4 border border-gray-200 text-center text-gray-500 text-sm">
<i class="fas fa-info-circle mr-1"></i>This app has no configurable settings.
</div>
{% endif %}
</div>
<script>
function forceRenderStarlarkApp(appId) {
fetch('/api/v3/starlark/apps/' + encodeURIComponent(appId) + '/render', {method: 'POST'})
.then(r => r.json())
.then(data => {
if (data.status === 'success') {
alert('Rendered successfully! ' + (data.frame_count || 0) + ' frame(s)');
} else {
alert('Render failed: ' + (data.message || 'Unknown error'));
}
})
.catch(err => alert('Render failed: ' + err.message));
}
function toggleStarlarkApp(appId, enabled) {
fetch('/api/v3/starlark/apps/' + encodeURIComponent(appId) + '/toggle', {
method: 'POST',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify({enabled: enabled})
})
.then(r => r.json())
.then(data => {
if (data.status === 'success') {
// Reload the config partial to reflect new state
if (typeof loadInstalledPlugins === 'function') loadInstalledPlugins();
else if (typeof window.loadInstalledPlugins === 'function') window.loadInstalledPlugins();
// Reload this partial
const container = document.getElementById('plugin-config-starlark:' + appId);
if (container && window.htmx) {
htmx.ajax('GET', '/v3/partials/plugin-config/starlark:' + encodeURIComponent(appId), {target: container, swap: 'innerHTML'});
}
} else {
alert('Toggle failed: ' + (data.message || 'Unknown error'));
}
})
.catch(err => alert('Toggle failed: ' + err.message));
}
function saveStarlarkConfig(appId) {
const inputs = document.querySelectorAll('[data-starlark-config]');
const config = {};
inputs.forEach(input => {
config[input.getAttribute('data-starlark-config')] = input.value;
});
fetch('/api/v3/starlark/apps/' + encodeURIComponent(appId) + '/config', {
method: 'PUT',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify(config)
})
.then(r => r.json())
.then(data => {
if (data.status === 'success') {
alert('Configuration saved!');
} else {
alert('Save failed: ' + (data.message || 'Unknown error'));
}
})
.catch(err => alert('Save failed: ' + err.message));
}
</script>