Allow setting font color individually per line

Signed-off-by: DL6ER <[email protected]>

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,8 +396,6 @@ 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
 
@@ -419,6 +419,11 @@ def _draw_text(self, img = None, bboxes = [], text_offset = (0, 0)):
             else:
                 raise ValueError(f"Unsupported alignment: {align}")
 
+            red_font = 'font_color' in line and line['font_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 'font_inverted' in line and line['font_inverted']:
                 # Draw a filled rectangle
                 center_x = 0
@@ -437,7 +442,8 @@ def _draw_text(self, img = None, bboxes = [], text_offset = (0, 0)):
                 shift = 0.1 * int(line['font_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

app/labeldesigner/routes.py

@@ -289,6 +289,8 @@ def get_uploaded_image(image):
         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

@@ -46,19 +46,6 @@
                                     <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 +114,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">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>
 

app/static/js/main.js

@@ -23,7 +23,8 @@ function setFontSettingsPerLine() {
         font_size: $('#fontSize').val(),
         font_inverted: $('#fontInverted').is(':checked'),
         align: $('input[name=fontAlign]:checked').val(),
-        line_spacing: $('input[name=lineSpacing]:checked').val()
+        line_spacing: $('input[name=lineSpacing]:checked').val(),
+        font_color: $('#fontColor').val()
     };
 
     // Create lines in the <option> with id #lineSelect
@@ -111,6 +112,9 @@ $(document).ready(function () {
         $('input[name=lineSpacing][value="' + fs.line_spacing + '"]').prop('checked', true).parent().addClass('active');
         // Set font inversion
         $('#fontInverted').prop('checked', fs.font_inverted);
+        // Set font color
+        $('input[name=fontColor]').prop('checked', false).parent().removeClass('active');
+        $('input[name=fontColor][value="' + fs.font_color + '"]').prop('checked', true).parent().addClass('active');
     });
 
     // When the user changes the caret/selection in the textarea, update #lineSelect and font controls
@@ -401,7 +405,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);

tests/large_label.png

@@ -567,11 +567,32 @@ def test_invalid_http_methods(client, method):
     assert response.status_code == 405
 
 
+def test_print_red_text(client):
+    data = EXAMPLE_FORMDATA.copy()
+    data['text'] = json.dumps([
+        {'font_family': 'DejaVu Sans', 'font_style': 'Regular', 'text': 'Red Text', 'font_size': '24', 'align': 'center', 'font_color': 'red'},
+        {'font_family': 'DejaVu Sans', 'font_style': 'Regular', 'text': 'Red Text INVERTED', 'font_size': '24', 'align': 'center', 'font_inverted': True, 'font_color': 'red'}
+    ])
+    response = client.post('/labeldesigner/api/preview', data=data)
+    assert response.status_code == 200
+    assert response.content_type in ['image/png']
+
+    # Check image
+    verify_image(response.data, 'tests/red_text.png')
+
+
 def test_large_number_of_text_blocks(client):
     data = EXAMPLE_FORMDATA.copy()
     ALIGNS = ['center', 'left', 'right']
     data['text'] = json.dumps([
-        {'font_family': 'DejaVu Sans', 'font_style': 'Regular', 'text': f'--- {i} ---', 'font_size': str(i + 1), 'align': ALIGNS[i % 3], 'font_inverted': bool(i % 2)} for i in range(100)
+        {'font_family': 'DejaVu Sans',
+         'font_style': 'Regular',
+         'text': f'--- {i} ---',
+         'font_size': str(i + 1),
+         'align': ALIGNS[i % 3],
+         'font_inverted': bool(i % 2),
+         'font_color': 'red' if i % 5 == 0 else 'black'
+        } for i in range(100)
     ])
     response = client.post('/labeldesigner/api/preview', data=data)
     assert response.status_code == 200