[Refactor] Replace instructions_text with disappearing toast in ScanScreen

src/seedsigner/gui/screens/scan_screens.py

@@ -6,6 +6,7 @@
 
 from seedsigner.gui import renderer
 from seedsigner.gui.components import GUIConstants, Fonts
+from seedsigner.gui.toast import ToastOverlay
 from seedsigner.models.decode_qr import DecodeQR
 from seedsigner.models.threads import BaseThread, ThreadsafeCounter
 
@@ -109,6 +110,7 @@ def run(self):
             num_frames = 0
             debug = False
             show_framerate = False  # enable for debugging / testing
+            start = time.time()
             while self.keep_running:
                 frame = self.camera.read_video_stream(as_image=True)
                 if frame is not None:
@@ -142,27 +144,11 @@ def run(self):
                             # Note: shadowed text (adding a 'stroke' outline) can
                             # significantly slow down the rendering.
                             # Temp solution: render a slight 1px shadow behind the text
-                            # TODO: Replace the instructions_text with a disappearing
-                            # toast/popup (see: QR Brightness UI)?
                             draw = ImageDraw.Draw(frame)
-                            draw.text(xy=(
-                                        int(self.renderer.canvas_width/2 + 2),
-                                        self.renderer.canvas_height - GUIConstants.EDGE_PADDING + 2
-                                     ),
-                                     text=scan_text,
-                                     fill="black",
-                                     font=instructions_font,
-                                     anchor="ms")
-
-                            # Render the onscreen instructions
-                            draw.text(xy=(
-                                        int(self.renderer.canvas_width/2),
-                                        self.renderer.canvas_height - GUIConstants.EDGE_PADDING
-                                     ),
-                                     text=scan_text,
-                                     fill=GUIConstants.BODY_FONT_COLOR,
-                                     font=instructions_font,
-                                     anchor="ms")
+                            if time.time() - start < 3:
+                                ToastOverlay(image_draw=draw, canvas=frame, label_text=scan_text, font_size=15,
+                                                     render_with_current_canvas=True, is_text_centered=True,
+                                                     has_background_box=False).render()
 
                         else:
                             # Render the progress bar

src/seedsigner/gui/toast.py

@@ -18,6 +18,9 @@ class ToastOverlay(BaseComponent):
     height: int = GUIConstants.ICON_TOAST_FONT_SIZE + 2*GUIConstants.EDGE_PADDING
     font_size: int = 19
     outline_thickness: int = 2  # pixels
+    render_with_current_canvas:bool = False
+    is_text_centered:bool = False
+    has_background_box:bool = True
 
     def __post_init__(self):
         super().__post_init__()
@@ -41,7 +44,7 @@ def __post_init__(self):
             font_size=self.font_size,
             font_color=self.font_color,
             edge_padding=0,
-            is_text_centered=False,
+            is_text_centered=self.is_text_centered,
             auto_line_break=True,
             width=self.canvas_width - icon_delta_x - 2 * GUIConstants.COMPONENT_PADDING - 2 * self.outline_thickness,
             screen_x=icon_delta_x + GUIConstants.COMPONENT_PADDING,
@@ -62,21 +65,25 @@ def __post_init__(self):
 
     def render(self):
         # Render the toast's solid background
-        self.image_draw.rounded_rectangle(
-            (0, self.canvas_height - self.height, self.canvas_width, self.canvas_height),
-            fill=GUIConstants.BACKGROUND_COLOR,
-            radius=8,
-            outline=self.color,
-            width=self.outline_thickness,
-        )
+        if self.has_background_box:
+            self.image_draw.rounded_rectangle(
+                (0, self.canvas_height - self.height, self.canvas_width, self.canvas_height),
+                fill=GUIConstants.BACKGROUND_COLOR,
+                radius=8,
+                outline=self.color,
+                width=self.outline_thickness,
+            )
 
         # Draw the toast visual elements
         if self.icon_name:
             self.icon.render()
 
         self.label.render()
 
-        self.renderer.show_image()
+        if self.render_with_current_canvas:
+            self.renderer.show_image(image=self.canvas)
+        else:
+            self.renderer.show_image()