Adapt theme editor for large displays

Author: mathoudebine

library/display.py

@@ -60,9 +60,9 @@ def _get_theme_size() -> tuple[int, int]:
     elif config.THEME_DATA["display"].get("DISPLAY_SIZE", '') == '8.8"':
         return 480, 1920
     else:
-        logger.error(
-            f"Cannot find valid DISPLAY_SIZE property in selected theme {config.CONFIG_DATA['config']['THEME']}")
-        return 0, 0
+        logger.warning(
+            f'Cannot find valid DISPLAY_SIZE property in selected theme {config.CONFIG_DATA["config"]["THEME"]}, defaulting to 3.5"')
+        return 320, 480
 
 
 class Display:

theme-editor.py

@@ -82,6 +82,9 @@
 
 RGB_LED_MARGIN = 12
 
+# Resize editor if display is too big (e.g. 8.8" displays are 1920x480)
+RESIZE_FACTOR = 2 if (display.lcd.get_width() > 1000 or display.lcd.get_height() > 1000) else 1
+
 
 def refresh_theme():
     config.load_theme()
@@ -159,35 +162,42 @@ def on_button1_press(event):
 
     def on_button1_press_and_drag(event):
         global x0, y0
+        display_width, display_height = int(display.lcd.get_width() / RESIZE_FACTOR), int(
+            display.lcd.get_height() / RESIZE_FACTOR)
         x1, y1 = event.x, event.y
 
         # Do not draw zone outside of theme preview
         if x1 < 0:
             x1 = 0
-        elif x1 >= display.lcd.get_width():
-            x1 = display.lcd.get_width() - 1
+        elif x1 >= display_width:
+            x1 = display_width - 1
         if y1 < 0:
             y1 = 0
-        elif y1 >= display.lcd.get_height():
-            y1 = display.lcd.get_height() - 1
+        elif y1 >= display_height:
+            y1 = display_height - 1
 
-        label_coord.config(text='Drawing zone from [{},{}] to [{},{}]'.format(x0, y0, x1, y1))
+        label_coord.config(text='Drawing zone from [{:0.0f},{:0.0f}] to [{:0.0f},{:0.0f}]'.format(x0 * RESIZE_FACTOR,
+                                                                                                  y0 * RESIZE_FACTOR,
+                                                                                                  x1 * RESIZE_FACTOR,
+                                                                                                  y1 * RESIZE_FACTOR))
         draw_zone(x0, y0, x1, y1)
 
 
     def on_button1_release(event):
         global x0, y0
+        display_width, display_height = int(display.lcd.get_width() / RESIZE_FACTOR), int(
+            display.lcd.get_height() / RESIZE_FACTOR)
         x1, y1 = event.x, event.y
         if x1 != x0 or y1 != y0:
             # Do not draw zone outside of theme preview
             if x1 < 0:
                 x1 = 0
-            elif x1 >= display.lcd.get_width():
-                x1 = display.lcd.get_width() - 1
+            elif x1 >= display_width:
+                x1 = display_width - 1
             if y1 < 0:
                 y1 = 0
-            elif y1 >= display.lcd.get_height():
-                y1 = display.lcd.get_height() - 1
+            elif y1 >= display_height:
+                y1 = display_height - 1
 
             # Display drawn zone and coordinates
             draw_zone(x0, y0, x1, y1)
@@ -197,11 +207,16 @@ def on_button1_release(event):
             y = min(y0, y1)
             width = max(x0, x1) - min(x0, x1)
             height = max(y0, y1) - min(y0, y1)
-            label_coord.config(text='Zone: X={}, Y={}, width={} height={}'.format(x, y, width, height))
+
+            label_coord.config(text='Zone: X={:0.0f}, Y={:0.0f}, width={:0.0f} height={:0.0f}'.format(x * RESIZE_FACTOR,
+                                                                                                      y * RESIZE_FACTOR,
+                                                                                                      width * RESIZE_FACTOR,
+                                                                                                      height * RESIZE_FACTOR))
         else:
             # Display click coordinates
             label_coord.config(
-                text='X={}, Y={} (click and drag to draw a zone)'.format(x0, y0, abs(x1 - x0), abs(y1 - y0)))
+                text='X={:0.0f}, Y={:0.0f} (click and drag to draw a zone)'.format(x0 * RESIZE_FACTOR,
+                                                                                   y0 * RESIZE_FACTOR))
 
 
     def on_zone_click(event):
@@ -231,13 +246,15 @@ def on_zone_click(event):
     # Load theme file and generate first preview
     refresh_theme()
 
+    display_width, display_height = int(display.lcd.get_width() / RESIZE_FACTOR), int(
+        display.lcd.get_height() / RESIZE_FACTOR)
+
     # Create preview window
     logger.debug("Opening theme preview window with static data")
     viewer = tkinter.Tk()
     viewer.title("Turing SysMon Theme Editor")
     viewer.iconphoto(True, tkinter.PhotoImage(file=config.MAIN_DIRECTORY / "res/icons/monitor-icon-17865/64.png"))
-    viewer.geometry(str(display.lcd.get_width() + 2 * RGB_LED_MARGIN) + "x" + str(
-        display.lcd.get_height() + 2 * RGB_LED_MARGIN + 40))
+    viewer.geometry(str(display_width + 2 * RGB_LED_MARGIN) + "x" + str(display_height + 2 * RGB_LED_MARGIN + 40))
     viewer.protocol("WM_DELETE_WINDOW", on_closing)
     viewer.call('wm', 'attributes', '.', '-topmost', '1')  # Preview window always on top
     viewer.config(cursor="cross")
@@ -254,7 +271,9 @@ def on_zone_click(event):
     if config.THEME_DATA["display"].get("DISPLAY_SIZE", '3.5"') == '2.1"':
         # This is a circular screen: apply a circle mask over the preview
         display.lcd.screen_image.paste(circular_mask, mask=circular_mask)
-    display_image = ImageTk.PhotoImage(display.lcd.screen_image)
+    screen_image = display.lcd.screen_image
+    display_image = ImageTk.PhotoImage(
+        screen_image.resize((int(screen_image.width / RESIZE_FACTOR), int(screen_image.height / RESIZE_FACTOR))))
     viewer_picture = tkinter.Label(viewer, image=display_image, borderwidth=0)
     viewer_picture.place(x=RGB_LED_MARGIN, y=RGB_LED_MARGIN)
 
@@ -264,12 +283,12 @@ def on_zone_click(event):
     viewer_picture.bind("<ButtonRelease-1>", on_button1_release)
 
     label_coord = tkinter.Label(viewer, text="Click or draw a zone to show coordinates")
-    label_coord.place(x=0, y=display.lcd.get_height() + 2 * RGB_LED_MARGIN,
-                      width=display.lcd.get_width() + 2 * RGB_LED_MARGIN)
+    label_coord.place(x=0, y=display_height + 2 * RGB_LED_MARGIN,
+                      width=display_width + 2 * RGB_LED_MARGIN)
 
     label_info = tkinter.Label(viewer, text="This preview will reload when theme file is updated")
-    label_info.place(x=0, y=display.lcd.get_height() + 2 * RGB_LED_MARGIN + 20,
-                     width=display.lcd.get_width() + 2 * RGB_LED_MARGIN)
+    label_info.place(x=0, y=display_height + 2 * RGB_LED_MARGIN + 20,
+                     width=display_width + 2 * RGB_LED_MARGIN)
 
     label_zone = tkinter.Label(viewer, bg='#%02x%02x%02x' % tuple(map(lambda x: 255 - x, led_color)))
     label_zone.bind("<ButtonRelease-1>", on_zone_click)
@@ -291,7 +310,9 @@ def on_zone_click(event):
             if config.THEME_DATA["display"].get("DISPLAY_SIZE", '3.5"') == '2.1"':
                 # This is a circular screen: apply a circle mask over the preview
                 display.lcd.screen_image.paste(circular_mask, mask=circular_mask)
-            display_image = ImageTk.PhotoImage(display.lcd.screen_image)
+            screen_image = display.lcd.screen_image
+            display_image = ImageTk.PhotoImage(screen_image.resize(
+                (int(screen_image.width / RESIZE_FACTOR), int(screen_image.height / RESIZE_FACTOR))))
             viewer_picture.config(image=display_image)
 
             # Refresh RGB backplate LEDs color