label_printer/templates/image.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 %}