tfaour
8ea1c53ec3
The weather widget's icons/layout are hand-drawn PIL primitives -- clean under quantization but flat, no gradients/shadows. Adds an opt-in render_style="modern" (current/daily modes only) that instead renders a Jinja2 template through a persistent headless-Chromium browser (app/html_render.py), following the approach of Tesserae, an open-source e-ink dashboard targeting this same panel family. Key design points: - The Chromium dependency (Playwright) is lazily imported only when a weather widget actually uses "modern" style, and the background browser itself only launches on first use -- every other widget type, and this one's own classic/hourly/multi_city paths, never pay for it. - No Frame-level dithering setting needed: html_render dithers its own rendered widget to exact palette colors (Bayer/ordered, not Floyd-Steinberg) before compositing, so the shared whole-canvas Floyd-Steinberg pass sees zero quantization error there and leaves it untouched -- same trick draw_text/hand-drawn icons already use. Floyd- Steinberg keeps working unchanged for photos and every other widget. - A "Load calibrated Spectra 6 preset" button in Advanced configuration offers a community-measured palette (data ported from paperlesspaper/epdoptimize, Apache 2.0) as an alternative starting point to the existing idealized DEFAULT_PALETTE_RGB -- fills the existing palette table, doesn't save by itself. Known open risk, not resolved here: a headless Chromium binary is far larger than the ~100MB single-layer limit that already forced this project's pip/npm installs into split layers, and (unlike those) is a single ~180MB file that can't be split across layers by ordinary Dockerfile restructuring. Flagged prominently in server/Dockerfile and docs/widgets.md -- treat this render style as experimental/local-only until that's resolved.
94 lines
4.4 KiB
HTML
94 lines
4.4 KiB
HTML
<h2 class="dialog-title">Weather widget</h2>
|
|
|
|
<section class="card">
|
|
<h2 class="card-title">Display</h2>
|
|
<form id="weather-config-form">
|
|
<label>Mode
|
|
<select id="weather_mode">
|
|
<option value="current" {% if weather_cfg.mode == "current" %}selected{% endif %}>Current conditions</option>
|
|
<option value="hourly" {% if weather_cfg.mode == "hourly" %}selected{% endif %}>Hourly forecast</option>
|
|
<option value="daily" {% if weather_cfg.mode == "daily" %}selected{% endif %}>Multi-day forecast</option>
|
|
<option value="multi_city" {% if weather_cfg.mode == "multi_city" %}selected{% endif %}>Multiple cities</option>
|
|
</select>
|
|
</label>
|
|
<div id="weather-render-style-row">
|
|
<label>Render style
|
|
<select id="weather_render_style">
|
|
<option value="classic" {% if weather_cfg.render_style == "classic" %}selected{% endif %}>Classic (hand-drawn icons)</option>
|
|
<option value="modern" {% if weather_cfg.render_style == "modern" %}selected{% endif %}>Modern (experimental, current/daily only)</option>
|
|
</select>
|
|
</label>
|
|
</div>
|
|
<label>Weather source
|
|
<select id="weather_provider">
|
|
{% for value, label in weather_provider_labels.items() %}
|
|
<option value="{{ value }}" {% if weather_cfg.provider == value %}selected{% endif %}>{{ label }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
</label>
|
|
<p class="sub" style="margin-top: 4px;">National Weather Service only covers US locations; Environment Canada only covers Canadian locations.</p>
|
|
<label>Units
|
|
<select id="weather_units">
|
|
<option value="fahrenheit" {% if weather_cfg.units == "fahrenheit" %}selected{% endif %}>Fahrenheit</option>
|
|
<option value="celsius" {% if weather_cfg.units == "celsius" %}selected{% endif %}>Celsius</option>
|
|
</select>
|
|
</label>
|
|
<div id="weather-hourly-interval-row">
|
|
<label>Hours between ticks
|
|
<select id="weather_hourly_interval_hours">
|
|
{% for hours in (3, 4, 6, 12) %}
|
|
<option value="{{ hours }}" {% if weather_cfg.hourly_interval_hours == hours %}selected{% endif %}>{{ hours }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
</label>
|
|
</div>
|
|
<div id="weather-daily-days-row">
|
|
<label>Days to show
|
|
<input type="number" id="weather_daily_days" min="1" max="14" value="{{ weather_cfg.daily_days }}">
|
|
</label>
|
|
</div>
|
|
<button type="submit">Save</button>
|
|
</form>
|
|
</section>
|
|
|
|
<section class="card" id="weather-location-section" style="margin-top: 20px;">
|
|
<h2 class="card-title">Location</h2>
|
|
<p class="sub" id="weather-location-current">
|
|
{% if weather_cfg.city_label %}Currently: {{ weather_cfg.city_label }}{% else %}No location set yet.{% endif %}
|
|
</p>
|
|
<div class="checkbox-row" style="flex-wrap: wrap;">
|
|
<input type="text" id="weather-location-input" placeholder="e.g. Portland, OR" style="margin-top: 0; flex: 1 1 160px;">
|
|
<button type="button" class="btn-inline" id="weather-location-set">Set</button>
|
|
<button type="button" class="btn-inline secondary" id="weather-location-clear">Clear</button>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="card" id="weather-cities-section" style="margin-top: 20px;">
|
|
<h2 class="card-title">Cities</h2>
|
|
<ul class="calendar-user-list" id="weather-widget-city-list">
|
|
{% for c in weather_cfg.cities or [] %}
|
|
<li class="checkbox-row" style="justify-content: space-between; margin-top: 6px;">
|
|
<span>{{ c.label }}</span>
|
|
<button type="button" class="btn-inline secondary weather-widget-city-remove" data-label="{{ c.label }}">Remove</button>
|
|
</li>
|
|
{% else %}
|
|
<li class="sub" id="weather-widget-city-empty">No cities added yet.</li>
|
|
{% endfor %}
|
|
</ul>
|
|
<div class="checkbox-row" style="margin-top: 10px;">
|
|
<input type="text" id="weather-widget-city-input" placeholder="e.g. Portland, OR" style="margin-top: 0; flex: 1;">
|
|
<button type="button" class="btn-inline" id="weather-widget-city-add">Add</button>
|
|
</div>
|
|
</section>
|
|
|
|
{% include "_widget_border_fields.html" %}
|
|
|
|
{% include "_widget_button_fields.html" %}
|
|
|
|
<section class="card" style="margin-top: 20px;">
|
|
<h2 class="card-title">Preview</h2>
|
|
<p class="sub">How this widget currently renders.</p>
|
|
<img class="preview-img" id="weather-preview" alt="Weather preview">
|
|
<button type="button" class="secondary" id="weather-preview-refresh">Refresh now</button>
|
|
</section>
|