Add per-widget border option (style, thickness, palette color)
Build and push server image / test (push) Has been cancelled
Build and push server image / build-and-push (push) Has been cancelled
Build and push server image / deploy (push) Has been cancelled

A Widget-level property (border_style/border_thickness/border_color_index),
not a per-type config field, since every widget type can have one -- drawn
once centrally in device.py's _render_widgets before compositing, using
an exact panel palette color so it never dithers. Styles: solid, dashed,
dotted, and a fancy double-line picture-frame-mat look. Configurable from
a shared "Border" card in every widget's gear-icon dialog.
This commit is contained in:
2026-07-27 19:51:04 +00:00
parent eb7127718b
commit b15747a604
30 changed files with 503 additions and 19 deletions
@@ -0,0 +1,32 @@
<section class="card" style="margin-top: 20px;">
<h2 class="card-title">Border</h2>
<p class="sub">An optional border drawn around this widget's own box --
"None" (the default) draws nothing. Shows on the frame's actual live
view, not in the standalone preview below.</p>
<form id="border-config-form">
<label>Style
<select id="border_style">
{% for style in border_styles %}
<option value="{{ style }}" {% if widget.border_style == style %}selected{% endif %}>{{ border_style_labels[style] }}</option>
{% endfor %}
</select>
</label>
<label>Thickness
<input type="range" id="border_thickness" min="{{ min_border_thickness }}" max="{{ max_border_thickness }}" step="1"
value="{{ widget.border_thickness }}">
<span class="slider-value" id="border_thickness_value">{{ widget.border_thickness }}px</span>
</label>
<label>Color</label>
{% set current_palette = frame.palette_rgb or default_palette_rgb %}
{% set current_hex = palette_to_hex(current_palette) %}
<div class="border-color-picker" id="border-color-picker">
{% for label in border_color_labels %}
<button type="button" class="color-swatch {% if widget.border_color_index == loop.index0 %}selected{% endif %}"
data-index="{{ loop.index0 }}" title="{{ label }}"
style="background-color: {{ current_hex[loop.index0] }};"></button>
{% endfor %}
</div>
<input type="hidden" id="border_color_index" value="{{ widget.border_color_index }}">
<button type="submit">Save</button>
</form>
</section>