Add advanced options to the image page

app.py

@@ -46,9 +46,15 @@ def on_new_user(session):
     session["cut"] = True
     session["fonts"] = fonts()
 
+class Image_preset:
+    def __init__(self, path, dithering=True, threshold_if_not_dithering=0.5):
+        self.path = path
+        self.dithering = dithering
+        self.threshold_if_not_dithering = threshold_if_not_dithering
+
 
 image_presets = {
-    "Abandoned": "resources/abandoned.jpg"
+    "Abandoned": Image_preset("resources/abandoned.jpg", False, 0.5)
 }
 
 @app.route('/image', methods=['GET', 'POST'])
@@ -59,17 +65,18 @@ def image():
         if 'image' not in request.files:
             return render_image_template()
 
-
         
         if "dropdown" in request.form and request.form["dropdown"] != "file":
-            path = image_presets[request.form["dropdown"]]
+            path = image_presets[request.form["dropdown"]].path
+            dither = image_presets[request.form["dropdown"]].dithering
+            threshold_if_not_dithering = image_presets[request.form["dropdown"]].threshold_if_not_dithering
             class file:
                 filename = os.path.basename(path)
                 stream = open(path, "rb")
         else:
             file = request.files['image']
-
+            dither = "dithering" in request.form
-        print(file.stream)
+            threshold_if_not_dithering = float(request.form["threshold"]) * 0.01
 
 
         if file.filename == '':
@@ -78,7 +85,7 @@ def image():
             extension = os.path.splitext(file.filename)[1]
 
             try:
-                message, status, img = process_image(file.stream)
+                message, status, img = process_image(file.stream, dither, threshold_if_not_dithering)
                 file.stream.close()
                 session["uploaded image path"] = uploaded_image_filename
                 img.save(get_file_path(session, session["uploaded image path"]))

process_image.py

@@ -11,7 +11,7 @@ def format_image_to_label(path):
 
     return new_image
 
-def process_image(image_filestream):
+def process_image(image_filestream, dither: bool, threshold_if_not_dithering: float):
     image = Image.open(image_filestream)
     message = None
     status = None
@@ -26,7 +26,15 @@ def process_image(image_filestream):
 
         image = image.resize((new_width, new_height))
     
-    image = image.convert('1', dither=Image.FLOYDSTEINBERG)
+    if dither:
+        image = image.convert('1', dither=Image.FLOYDSTEINBERG)
+    else:
+        threshold = int(threshold_if_not_dithering * 255)
+        print("thesholding")
+        image = image.point(lambda p: 255 if p > threshold else 0)
+        print("done thesholding")
+        image = image.convert("1")
+
 
     if image.width > max_label_length:
         message= f"Label too long, max allowed length = {max_label_length}, yours = {image.width}."

templates/image.html

@@ -3,11 +3,20 @@
 
 {% block head %}
     <title>LabelPrinter Image upload</title>
+    <style>
+        .threshold {
+            display: inline;
+        }
+
+        .dithering:checked ~ .threshold {
+            display: none;
+        }
+    </style>
+
 {% endblock %}
 
 {% block content %}
-    <h1>Upload Image</h1>
+    <form method="POST" action="/image" id="image_form" enctype="multipart/form-data">
-    <form method="POST" action="/image" 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)">
@@ -20,6 +29,14 @@
 
         <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
@@ -51,20 +68,57 @@
             return localStorage.getItem(name)
         }
 
-        dropdown_value = get_persistent("image_preset_dropdown", "file")
-        document.getElementById("image_preset_dropdown").value = dropdown_value
-        handle_dropdown(dropdown_value)
-
 
         function handle_dropdown(value) {
             localStorage.setItem("image_preset_dropdown", value)
-            console.log()
             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 %}