Merge pull request pklaus#11 from DL6ER/font-color

Allow setting font color individually per line

Author: DL6ER

app/labeldesigner/label.py

@@ -87,7 +87,8 @@ def __init__(
             border_roundness=0,
             border_distance=(0, 0),
             border_color=(0, 0, 0),
-            timestamp=0):
+            timestamp=0,
+            red_support=False):
         self._width = width
         self._height = height
         self.label_content = label_content
@@ -108,6 +109,7 @@ def __init__(
         self._border_color = border_color
         self._counter = 1
         self._timestamp = timestamp
+        self._red_support = red_support
 
     @property
     def label_content(self):
@@ -394,13 +396,11 @@ def _draw_text(self, img = None, bboxes = [], text_offset = (0, 0)):
 
         # Iterate over lines of text
         for i, line in enumerate(self.text):
-            color = self._fore_color
-
             # Calculate spacing
-            spacing = int(int(line['font_size'])*((int(line['line_spacing']) - 100) / 100)) if 'line_spacing' in line else 0
+            spacing = int(int(line['size'])*((int(line['line_spacing']) - 100) / 100)) if 'line_spacing' in line else 0
 
             # Get font
-            font = self._get_font(line['font_path'], line['font_size'])
+            font = self._get_font(line['path'], line['size'])
 
             # Determine anchors
             anchor = None
@@ -419,7 +419,12 @@ def _draw_text(self, img = None, bboxes = [], text_offset = (0, 0)):
             else:
                 raise ValueError(f"Unsupported alignment: {align}")
 
-            if do_draw and 'font_inverted' in line and line['font_inverted']:
+            red_font = 'color' in line and line['color'] == 'red'
+#            if red_font and not self._red_support:
+#                raise ValueError("Red font is not supported on this label")
+            color = (255, 0, 0) if red_font else (0, 0, 0)
+
+            if do_draw and 'inverted' in line and line['inverted']:
                 # Draw a filled rectangle
                 center_x = 0
                 if anchor == "lt":
@@ -434,10 +439,11 @@ def _draw_text(self, img = None, bboxes = [], text_offset = (0, 0)):
                 elif anchor == "rt":
                     max_bbox_x = text_offset[0] + max(bbox[0][2] for bbox in bboxes)
                     min_bbox_x = max_bbox_x - (bboxes[i][0][2] - bboxes[i][0][0])
-                shift = 0.1 * int(line['font_size'])
+                shift = 0.1 * int(line['size'])
                 y_min = bboxes[i][0][1] + text_offset[1] - shift
                 y_max = bboxes[i][0][3] + text_offset[1] - shift
-                draw.rectangle((min_bbox_x, y_min, max_bbox_x, y_max), fill=self._fore_color)
+                draw.rectangle((min_bbox_x, y_min, max_bbox_x, y_max), fill=color)
+                # Overwrite font color with white on colored background
                 color = (255, 255, 255)
 
             # Either calculate bbox or actually draw
@@ -481,5 +487,5 @@ def _compute_bbox(self, bboxes):
         max_width = max(bbox[0][2] for bbox in bboxes)
         return (bboxes[0][0][0], bboxes[0][0][1], max_width, bboxes[-1][0][3])
 
-    def _get_font(self, font_path, font_size):
-        return ImageFont.truetype(font_path, int(font_size))
+    def _get_font(self, font_path, size):
+        return ImageFont.truetype(font_path, int(size))

app/labeldesigner/routes.py

@@ -195,19 +195,18 @@ def get_label_dimensions(label_size):
 
     def get_font_path(line: dict):
         try:
-            font_family_name = line.get('font_family')
-            font_style_name = line.get('font_style')
-            if font_family_name not in FONTS.fonts:
-                raise LookupError("Unknown font family: %s" % font_family_name)
-            if font_style_name not in FONTS.fonts[font_family_name]:
-                font_style_name = current_app.config['LABEL_DEFAULT_FONT_STYLE']
-            if font_style_name not in FONTS.fonts[font_family_name]:
+            family_name = line.get('family')
+            style_name = line.get('style')
+            if family_name not in FONTS.fonts:
+                raise LookupError("Unknown font family: %s" % family_name)
+            if style_name not in FONTS.fonts[family_name]:
+                style_name = current_app.config['LABEL_DEFAULT_FONT_STYLE']
+            if style_name not in FONTS.fonts[family_name]:
                 raise LookupError("Unknown font style: %s for font %s" %
-                                  (font_style_name, font_family_name))
-            font_path = FONTS.fonts[font_family_name][font_style_name]
+                                  (style_name, family_name))
+            return FONTS.fonts[family_name][style_name]
         except KeyError:
-            raise LookupError("Couln't find the font & style")
-        return font_path
+            raise LookupError("Couldn't find the requested font + style")
 
     def get_uploaded_image(image):
         name, ext = os.path.splitext(image.filename)
@@ -269,18 +268,22 @@ def get_uploaded_image(image):
 
     # For each line in text, we determine and add the font path
     for line in context['text']:
-        if 'font_family' not in line:
-            line['font_family'] = current_app.config['LABEL_DEFAULT_FONT_FAMILY']
-        if 'font_style' not in line:
-            line['font_style'] = current_app.config['LABEL_DEFAULT_FONT_STYLE']
-        if 'font_size' not in line:
+        if 'family' not in line:
+            line['family'] = current_app.config['LABEL_DEFAULT_FONT_FAMILY']
+        if 'style' not in line:
+            line['style'] = current_app.config['LABEL_DEFAULT_FONT_STYLE']
+        if 'size' not in line or not line['size'].isdigit():
             raise ValueError("Font size is required")
-        line['font_path'] = get_font_path(line)
+        if int(line['size']) < 1:
+            raise ValueError("Font size must be at least 1")
+        line['path'] = get_font_path(line)
 
         # Reject extraordinary long texts
         if len(line['text']) > 10_000:
             raise ValueError("Text is too long")
 
+#    if context['print_color'] == 'red' and not context['red_support']:
+#        raise ValueError("Red font is not supported on this label")
     fore_color = (255, 0, 0) if context['print_color'] == 'red' else (0, 0, 0)
     border_color = (255, 0, 0) if context['border_color'] == 'red' else (0, 0, 0)
 

app/labeldesigner/templates/labeldesigner.html

@@ -29,36 +29,27 @@
                     <div id="collapse1" class="collapse" aria-labelledby="heading1" data-parent="#accordion">
                         <div class="card-body">
                             <label for="labelSize" style="margin-bottom: 0">Label Size:</label>
-                            <select class="form-control" id="labelSize" onChange="preview()">
-                                {% for label_size in label_sizes %}<option value="{{label_size[0]}}" data-x="{{label_size[3][0]}}" data-y="{{label_size[3][1]}}" data-round="{{label_size[2]}}" {% if default_label_size == label_size[0] %}selected{% endif %}>{{label_size[1]}}</option>{% endfor %}
+                            <select class="form-control" id="labelSize" onChange="preview()" data-default="{{default_label_size}}">
+                                {% for label_size in label_sizes %}<option value="{{label_size[0]}}" data-x="{{label_size[3][0]}}"
+                                    data-y="{{label_size[3][1]}}" data-round="{{label_size[2]}}" {% if default_label_size==label_size[0]
+                                    %}selected{% endif %}>{{label_size[1]}}</option>{% endfor %}
                             </select>
                             <div class="form-text text-muted">Detected label: <span id="label-width">???</span> x <span id="label-height">???</span></div>
                             <div id="labelMismatch" class="form-text text-danger" style="display: none;">Label size mismatch detected!</div>
 
                             <label for="orientation" class="control-label input-group" style="margin-top: 10px; margin-bottom: 0">Label Orientation:</label>
                             <div class="btn-group btn-group-toggle btn-block" data-toggle="buttons">
                                 <label class="btn btn-secondary {% if default_orientation == 'standard' %}active{% endif %}" id="orientation_standard">
-                                    <input type="radio" name="orientation" onchange="preview()" value="standard" aria-label="Standard" {% if default_orientation == 'standard' %}checked{% endif %}>
+                                    <input type="radio" name="orientation" onchange="preview()" value="standard" aria-label="Standard" {% if
+                                        default_orientation=='standard' %}checked data-default="1" {% endif %}>
                                     <span class="fas fa-ruler-horizontal" aria-hidden="true"> Standard
                                 </label>
                                 <label class="btn btn-secondary {% if default_orientation == 'rotated' %}active{% endif %}" id="orientation_rotated">
-                                    <input type="radio" name="orientation" onchange="preview()" value="rotated" aria-label="Rotated" {% if default_orientation == 'rotated' %}checked{% endif %}>
+                                    <input type="radio" name="orientation" onchange="preview()" value="rotated" aria-label="Rotated" {% if
+                                        default_orientation=='rotated' %}checked data-default="1" {% endif %}>
                                     <span class="fas fa-ruler-vertical" aria-hidden="true"> Rotated
                                 </label>
                             </div>
-
-                            <div class="red-support">
-                                <label for="printColor" class="control-label input-group" style="margin-top: 10px; margin-bottom: 0">Print Color:</label>
-                                <div class="btn-group btn-group-toggle btn-block" data-toggle="buttons">
-                                    <label class="btn btn-dark" id="print_color_black">
-                                        <input type="radio" name="printColor" onchange="preview()" value="black" aria-label="Black">Black
-                                    </label>
-                                    <label class="btn btn-danger" id="print_color_red">
-                                        <input type="radio" name="printColor" onchange="preview()" value="red" aria-label="Red">Red
-                                    </label>
-                                </div>
-                            </div>
-
                         </div>
                         <!-- class="card-body" -->
                     </div>
@@ -127,6 +118,18 @@
                                             Invert text
                                         </label>
                                     </div>
+                                    <div class="red-support">
+                                        <label for="printColor" class="control-label input-group" style="margin-top: 10px; margin-bottom: 0">Print
+                                            Color:</label>
+                                        <div class="btn-group btn-group-toggle btn-block" data-toggle="buttons">
+                                            <label class="btn btn-dark" id="print_color_black">
+                                                <input type="radio" name="fontColor" onchange="preview()" value="black" aria-label="Black" data-default="1">Black
+                                            </label>
+                                            <label class="btn btn-danger" id="print_color_red">
+                                                <input type="radio" name="fontColor" onchange="preview()" value="red" aria-label="Red">Red
+                                            </label>
+                                        </div>
+                                    </div>
                                 </div>
                             </div>
 
@@ -298,7 +301,7 @@
         <label for="printType" class="control-label input-group" style="margin-bottom: 0">Print Type:</label>
         <div class="btn-group btn-group-toggle btn-block" data-toggle="buttons">
             <label class="btn btn-secondary active" id="printTypeText">
-                <input type="radio" name="printType" onchange="preview()" value="text" aria-label="Text" checked>
+                <input type="radio" name="printType" onchange="preview()" value="text" aria-label="Text" data-default="1" checked>
                 <span class="fas fa-font" aria-hidden="true"></span><br>Text
             </label>
             <label class="btn btn-secondary" id="printTypeQrCode">

app/static/js/main.js

@@ -18,12 +18,13 @@ function setFontSettingsPerLine() {
 
     // Default font settings from the current UI controls
     var currentFont = {
-        font_family: $('#fontFamily option:selected').text(),
-        font_style: $('#fontStyle option:selected').text(),
-        font_size: $('#fontSize').val(),
-        font_inverted: $('#fontInverted').is(':checked'),
+        family: $('#fontFamily option:selected').text(),
+        style: $('#fontStyle option:selected').text(),
+        size: $('#fontSize').val(),
+        inverted: $('#fontInverted').is(':checked'),
         align: $('input[name=fontAlign]:checked').val(),
-        line_spacing: $('input[name=lineSpacing]:checked').val()
+        line_spacing: $('input[name=lineSpacing]:checked').val(),
+        color: $('input[name=fontColor]:checked').val()
     };
 
     // Create lines in the <option> with id #lineSelect
@@ -91,26 +92,29 @@ $(document).ready(function () {
         if (isNaN(idx) || !fontSettingsPerLine || !fontSettingsPerLine[idx]) return;
         var fs = fontSettingsPerLine[idx];
         // Only set font family and get styles if font family is changed
-        if (fs.font_family !== $('#fontFamily option:selected').text()) {
+        if (fs.family !== $('#fontFamily option:selected').text()) {
             // Set font family
-            $('#fontFamily').val(fs.font_family);
+            $('#fontFamily').val(fs.family);
             // Set font style
-            updateStyles(fs.font_style);
+            updateStyles(fs.style);
         }
         else {
             // Only set font style
-            $('#fontStyle').val(fs.font_style);
+            $('#fontStyle').val(fs.style);
         }
         // Set font size
-        $('#fontSize').val(fs.font_size);
+        $('#fontSize').val(fs.size);
         // Set alignment
         $('input[name=fontAlign]').prop('checked', false).parent().removeClass('active');
         $('input[name=fontAlign][value="' + fs.align + '"]').prop('checked', true).parent().addClass('active');
         // Set line spacing
         $('input[name=lineSpacing]').prop('checked', false).parent().removeClass('active');
         $('input[name=lineSpacing][value="' + fs.line_spacing + '"]').prop('checked', true).parent().addClass('active');
         // Set font inversion
-        $('#fontInverted').prop('checked', fs.font_inverted);
+        $('#fontInverted').prop('checked', fs.inverted);
+        // Set font color
+        $('input[name=fontColor]').prop('checked', false).parent().removeClass('active');
+        $('input[name=fontColor][value="' + fs.color + '"]').prop('checked', true).parent().addClass('active');
     });
 
     // When the user changes the caret/selection in the textarea, update #lineSelect and font controls
@@ -197,6 +201,7 @@ function updateStyles(style = null) {
                 }
             });
             styleSelect.trigger("change");
+            preview();
         }
     });
 }
@@ -401,7 +406,7 @@ function updatePrinterStatus() {
     if (printerPath) {
         printerPath.textContent = printer_status.path || 'Unknown';
     }
-    if (printer_status['red_support'] === true && $('#labelSize option:selected').val().includes('red')) {
+    if ($('#labelSize option:selected').val().includes('red')) {
         $(".red-support").show();
     } else {
             $('#print_color_black').prop('active', true);
@@ -499,7 +504,7 @@ function restoreAllSettingsFromLocalStorage() {
         if (this.type === 'checkbox' || this.type === 'radio') {
             $(this).prop('checked', !!data[key]);
             if (this.type === 'radio') {
-                if ($(this).val() == data[key]) $(this).prop('checked', true);
+                $(this).prop('checked', $(this).val() == data[key]);
             }
         } else {
             $(this).val(data[key]);
@@ -560,11 +565,15 @@ function resetSettings() {
 function set_all_inputs_default(force = false) {
     // Iterate over those <input> that have a data-default propery and set the value if empty
     $('input[data-default], select[data-default], textarea[data-default]').each(function() {
-        if (!$(this).val() || force) {
+        if (this.type === 'checkbox' || this.type === 'radio') {
+            $(this).prop('checked', $(this).data('default') == 1 || $(this).data('default') === true);
+        }
+        else if (this.type === 'select-one' || this.type === 'number') {
             $(this).val($(this).data('default'));
+
         }
-        if (this.type === 'checkbox') {
-            $(this).prop('checked', $(this).data('default') == 1 || $(this).data('default') === true);
+        else if (!$(this).val() || force) {
+            $(this).val($(this).data('default'));
         }
     });
 }
@@ -578,6 +587,7 @@ window.onload = function () {
 
     // Restore settings on load
     restoreAllSettingsFromLocalStorage();
+
     // Save on change
     $(document).on('change input', 'input, select, textarea', function() {
         saveAllSettingsToLocalStorage();