make displaying images from widgets work with flask

README.md

@@ -1,3 +1,7 @@
+> *_Note_*
+> This project is in a very early development stage. While it will be used by me in a smart mirror project,
+> it is also my learning ground for Python.
+
 # Developing widgets
 There a few sample widgets already included. On each page reload, each widgets `render()` method is called and
 a dictionary of type`RenderResult` is expected. Structure your module like so:
@@ -19,10 +23,19 @@ class Renderer(BaseRenderer):
         }
 ```
 
+## Custom Routes
+If your widget uses custom routes, eg. to display an image, you can do so by implementing `render.BaseRenderer.register_custom_routes`
+An example of how to do that can be found in the example widget 'simple_image'.
+
 # How to run
-## Development mode
+## Development mode Windows
 Get all you need by typing `pip install -e .`, then run the application directly from VSCode.
 
+To run, either start directly from your preferred editor, or, if you have Flask installed, type
+```shell
+flask --app happyMirror run --debug
+```
+
 ## Production mode
 Make sure, waitress is installed. On Linux, you can do so by typing `sudo apt install python3-waitress`
 Then run `waitress-serve --call 'HappyMirror:create_app'`

happyMirror/__init__.py

@@ -26,6 +26,7 @@ def create_app(widgets=None, test_config=None):
 
     for widget in widgets:
         widget['instance'] = widget['module'].Renderer()
+        widget['instance'].register_custom_routes(app)
 
     try:
         os.makedirs(app.instance_path)

happyMirror/render.py

@@ -1,13 +1,19 @@
 from abc import ABC, abstractmethod
 from typing import TypedDict
 
+from flask import Flask
+
+
 class RenderResult(TypedDict, total=False):
     script: str
     view: str
     name: str
 
 
 class BaseRenderer(ABC):
+    def register_custom_routes(self, app: Flask):
+        pass
+
     @abstractmethod
     def render(self) -> RenderResult:
         pass

happyMirror/widgets/simple_image/simple_image.py

@@ -1,18 +1,24 @@
-import base64
 import os
 
-from flask import render_template_string
+from flask import Flask, render_template_string, send_from_directory
 
 from happyMirror.render import BaseRenderer, RenderResult
 
 
 class Renderer(BaseRenderer):
-    def render(self) -> RenderResult:
-        image = '/' + os.path.dirname(os.path.relpath(__file__)) + '/images/01.png'
-        print(image)
 
-        return {
-            'view': render_template_string('<img src="{{ image }}" />',  image=image)
-        }
+    def register_custom_routes(self, app: Flask):
+        print(f"Widget '{__name__}' is registering custom routes...")
+        app.add_url_rule(
+            '/widgets/simple_image/images/<path:image_file>', view_func=self.send_image
+        )
 
+    def send_image(self, image_file):
+        image_dir = os.path.dirname(os.path.relpath(__file__)) + '/images'
+        return send_from_directory(image_dir, image_file)
 
+    def render(self) -> RenderResult:
+        image = '/' + os.path.dirname(os.path.relpath(__file__)) + '/images/640px-Youngkitten.jpg'
+        return {
+            'view': render_template_string('<img src="{{ image }}" />', image=image)
+        }