64 lines
2 KiB
HTML
64 lines
2 KiB
HTML
|
{% extends "partials/base.html" %}
|
||
|
|
|
||
|
|
{% block title %} Pi Frame Server {% endblock %}
|
||
|
|
|
||
|
|
|
||
|
|
{% block content %}
|
||
|
|
<header class="container">
|
||
|
|
<hgroup>
|
||
|
|
<h1>Pi EINK Frame Server</h1>
|
||
|
|
<p>Display things accurately (ish)</p>
|
||
|
|
</header>
|
||
|
|
<main class="container">
|
||
|
|
<form hx-encoding="multipart/form-data" enctype='multipart/form-data'>
|
||
|
|
<fieldset class="grid">
|
||
|
|
<div>
|
||
|
|
<fieldset>
|
||
|
|
<legend>Target Palette</legend>
|
||
|
|
{% for m in palettes %}
|
||
|
|
<input type="radio" id="palette-{{m}}" name="palette" value="{{m}}"
|
||
|
|
{%- if loop.first %} checked {% endif %}>
|
||
|
|
<label htmlFor="palette-{{m}}">{{m}}</label>
|
||
|
|
{% endfor %}
|
||
|
|
</fieldset>
|
||
|
|
<small> "Default" uses a real-life based color scheme. "Simple" uses an idealized palette.</small>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div>
|
||
|
|
<label for="dither-select">Dither Method</label>
|
||
|
|
<select id="dither-select" name="dither_method">
|
||
|
|
{% for m in dither_methods %}
|
||
|
|
<option {%if loop.first %} selected {% endif %} value="{{m}}">{{m}}</option>
|
||
|
|
{% endfor %}
|
||
|
|
</select>
|
||
|
|
<small>
|
||
|
|
Different dither methods produce better results for certain images.
|
||
|
|
</small>
|
||
|
|
</div>
|
||
|
|
</fieldset>
|
||
|
|
|
||
|
|
<label for="image-input">Image</label>
|
||
|
|
<input type="file" name="image" id="image-input" accept="image/*">
|
||
|
|
<small>Images will be resized to <code>800x480</code>, which may stretch the image.</small>
|
||
|
|
|
||
|
|
<div class="grid">
|
||
|
|
<button hx-post="/api/setimage" hx-disabled-elt="this">Set Display</button>
|
||
|
|
<button class="secondary"
|
||
|
|
hx-post="/app/preview"
|
||
|
|
hx-disabled-elt="this"
|
||
|
|
hx-target="#preview-area"
|
||
|
|
hx-swap="outerHTML"
|
||
|
|
>
|
||
|
|
Preview
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</form>
|
||
|
|
<div id="preview-area" hidden></div>
|
||
|
|
</main>
|
||
|
|
|
||
|
|
<footer class="container-fluid">
|
||
|
|
pi-frame-server Version {{ version }}
|
||
|
|
</footer>
|
||
|
|
|
||
|
|
{% endblock %}
|