124 lines
4.2 KiB
HTML
124 lines
4.2 KiB
HTML
<!-- SPDX-License-Identifier: GPL-3.0-or-later -->
|
|
{% extends "base.html" %}
|
|
|
|
{% block head %}
|
|
<title>LabelPrinter Image upload</title>
|
|
<style>
|
|
.threshold {
|
|
display: inline;
|
|
}
|
|
|
|
.dithering:checked ~ .threshold {
|
|
display: none;
|
|
}
|
|
</style>
|
|
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<form method="POST" action="/image" id="image_form" enctype="multipart/form-data">
|
|
{% if label_width == 450 %}
|
|
<label for="dropdown">Image:</label>
|
|
<select name="dropdown" id="image_preset_dropdown" onchange="handle_dropdown(this.value)">
|
|
<option value="file">Upload file</option>
|
|
{% if label_width == 450 %}
|
|
<option value="Abandoned">Abandoned item</option>
|
|
{% endif %}
|
|
</select><br>
|
|
{%endif%}
|
|
|
|
<div id="file">
|
|
<input type="file" name="image"><br>
|
|
<br>
|
|
<details name="advanced_options">
|
|
<summary>Advanced options</summary>
|
|
Dithering: <input type="checkbox" name="dithering" value="dithering" class="dithering" checked><br>
|
|
<div class="threshold">
|
|
Black/white cutoff threshold: <input type="number" value="50" name="threshold" style="width: 26px; padding: 3px; margin: 0px"> %
|
|
</div>
|
|
</details>
|
|
</div>
|
|
<input type="submit" value="Generate preview"><br>
|
|
Recommended image height = {{label_width}}, other sizes will be scaled
|
|
</form>
|
|
|
|
{% if info %}
|
|
<p class="info" style="color: {{info_color}}">{{info}}</p>
|
|
{% endif %}
|
|
|
|
{% if filename %}
|
|
<img src="user_data/{{filename}}" alt="Uploaded image" style="height: {{label_width * 0.7 }}px; width: auto;">
|
|
|
|
<form method="POST" action="/image-print">
|
|
{% if cut %}
|
|
<input type="checkbox" name="cut" value="cut" checked>
|
|
{%else %}
|
|
<input type="checkbox" name="cut" value="cut">
|
|
{%endif%}
|
|
<label for="cut"> Cut paper after printing </label><br>
|
|
|
|
<input type="submit" value="Print" style="font-size: 2em; padding: 20px 40px;">
|
|
{% endif %}
|
|
|
|
<script>
|
|
function get_persistent(name, initial_value) {
|
|
if (localStorage.getItem(name) == null) {
|
|
localStorage.setItem(name, initial_value)
|
|
}
|
|
return localStorage.getItem(name)
|
|
}
|
|
|
|
|
|
function handle_dropdown(value) {
|
|
localStorage.setItem("image_preset_dropdown", value)
|
|
if (value == "file") {
|
|
document.getElementById("file").style.display = "inline";
|
|
} else {
|
|
document.getElementById("file").style.display = "none";
|
|
}
|
|
}
|
|
|
|
|
|
const persistent_elements = ["dropdown", "threshold", "dithering", "advanced_options"]
|
|
|
|
for (element_name of persistent_elements) {
|
|
if (localStorage.getItem("image_form " + element_name) == null) {
|
|
continue;
|
|
}
|
|
|
|
element = document.getElementsByName(element_name)[0]
|
|
|
|
if (element.type == 'checkbox') {
|
|
element.checked = localStorage.getItem("image_form " + element_name) === "true";
|
|
} else if (element.name == 'advanced_options') {
|
|
element.open = localStorage.getItem("image_form " + element_name) === "true";
|
|
} else {
|
|
element.value = localStorage.getItem("image_form " + element_name);
|
|
}
|
|
|
|
if (element.name == 'dropdown') {
|
|
handle_dropdown(element.value);
|
|
}
|
|
}
|
|
|
|
const image_form = document.getElementById("image_form")
|
|
image_form.addEventListener('submit', function(e) {
|
|
e.preventDefault();
|
|
|
|
for (const element of image_form.elements) {
|
|
if (element.type == 'checkbox') {
|
|
localStorage.setItem("image_form " + element.name, element.checked);
|
|
} else {
|
|
localStorage.setItem("image_form " + element.name, element.value);
|
|
}
|
|
}
|
|
|
|
element = document.getElementsByName("advanced_options")[0]
|
|
localStorage.setItem("image_form " + element.name, element.open);
|
|
|
|
image_form.submit();
|
|
})
|
|
|
|
</script>
|
|
{% endblock %}
|
|
|