text overlay app

frameos/apps/clock/config.json

@@ -44,8 +44,8 @@
             "type": "string",
             "value": "1",
             "required": true,
-            "label": "Border width (0 = disabled)",
-            "placeholder": "1"
+            "label": "Border width",
+            "placeholder": "0"
         },
         {
             "name": "border_color",

frameos/apps/text/config.json

@@ -0,0 +1,83 @@
+{
+  "name": "Text Overlay",
+  "description": "Overlay a block of text",
+  "category": "overlay",
+  "version": "1.0.0",
+  "fields": [
+    {
+      "name": "text",
+      "type": "text",
+      "value": "",
+      "required": false,
+      "label": "Text",
+      "placeholder": "Write your prose here"
+    },
+    {
+      "name": "position",
+      "type": "select",
+      "options": [
+        "top-left",
+        "top-center",
+        "top-right",
+        "center-left",
+        "center-center",
+        "center-right",
+        "bottom-left",
+        "bottom-center",
+        "bottom-right"
+      ],
+      "value": "center-center",
+      "required": true,
+      "label": "Position",
+      "placeholder": "center-center"
+    },
+    {
+      "name": "offset_x",
+      "type": "string",
+      "value": "0",
+      "required": true,
+      "label": "Offset X",
+      "placeholder": "0"
+    },
+      {
+      "name": "offset_y",
+      "type": "string",
+      "value": "0",
+      "required": true,
+      "label": "Offset Y",
+      "placeholder": "0"
+    },
+    {
+      "name": "font_color",
+      "type": "string",
+      "value": "black",
+      "required": true,
+      "label": "Font Color",
+      "placeholder": "black"
+    },
+    {
+      "name": "font_size",
+      "type": "string",
+      "value": "20",
+      "required": true,
+      "label": "Font Size",
+      "placeholder": "20"
+    },
+    {
+      "name": "border_color",
+      "type": "string",
+      "value": "white",
+      "required": true,
+      "label": "Border Color",
+      "placeholder": "white"
+    },
+    {
+      "name": "border_width",
+      "type": "string",
+      "value": "1",
+      "required": true,
+      "label": "Border width",
+      "placeholder": "0"
+    }
+  ]
+}

frameos/apps/text/frame.py

@@ -0,0 +1,57 @@
+from PIL import Image, ImageDraw, ImageFont
+from datetime import datetime
+from apps import App, ExecutionContext
+from frame.image_utils import draw_text_with_border
+
+class ClockApp(App):
+    def run(self, context: ExecutionContext):
+        text = self.get_config(context.state, 'text', '')
+
+        # Get the config settings
+        font_color = self.config.get('font_color', 'black')
+        font_size = int(self.config.get('font_size', 20))
+        position = self.config.get('position', 'center-center')
+        border_color = self.config.get('border_color', 'white')
+        border_width = int(self.config.get('border_width', 1))
+
+        # Prepare to draw the text
+        draw = ImageDraw.Draw(context.image)
+        font = ImageFont.truetype("/usr/share/fonts/truetype/dejavu/DejaVuSans.ttf", font_size)
+        text_width, text_height = draw.textsize(text, font=font)
+        text_width += border_width * 2
+        text_height += border_width * 2
+
+        # Positioning the text
+        x, y = 4, 4
+        if position == 'top-right':
+            x = context.image.width - text_width - 4
+        elif position == 'top-center':
+            x = (context.image.width - text_width) / 2
+        elif position == 'bottom-left':
+            y = context.image.height - text_height - 4
+        elif position == 'bottom-center':
+            x = (context.image.width - text_width) / 2
+            y = context.image.height - text_height - 4
+        elif position == 'bottom-right':
+            x = context.image.width - text_width - 4
+        elif position == 'center-left':
+            y = (context.image.height - text_height) / 2
+        elif position == 'center-center':
+            x = (context.image.width - text_width) / 2
+            y = (context.image.height - text_height) / 2
+        elif position == 'center-right':
+            x = context.image.width - text_width - 4
+            y = (context.image.height - text_height) / 2
+
+        offset_x = int(self.config.get('offset_x', '0'))
+        offset_y = int(self.config.get('offset_y', '0'))
+
+        x += offset_x
+        y += offset_y
+
+        # Draw the text on the image
+        if border_width != 0:
+            draw_text_with_border(draw, (x, y), text, font, font_color, border_color, border_width)
+        else:
+            draw.text((x, y), text, fill=font_color, font=font)
+        self.log(f"Drew text: {text} at position {position}")

frontend/src/scenes/frame/panels/Diagram/AppNode.tsx

@@ -100,27 +100,30 @@ export function AppNode({ data, id, isConnectable }: NodeProps<AppNodeData>): JS
                         : undefined
                     }
                   >
-                    {field.name}
+                    {field.label ?? field.name}
                   </td>
                   <td className="cursor-text">
                     {field.secret && !secretRevealed[field.name] ? (
                       <RevealDots onClick={() => setSecretRevealed({ ...secretRevealed, [field.name]: true })} />
                     ) : field.type === 'select' ? (
                       <Select
                         theme="node"
+                        placeholder={field.placeholder}
                         value={field.name in data.config ? data.config[field.name] : field.value}
                         options={(field.options ?? []).map((o) => ({ value: o, label: o }))}
                         onChange={(value) => updateNodeConfig(id, field.name, value)}
                       />
                     ) : field.type === 'text' ? (
                       <TextArea
                         theme="node"
+                        placeholder={field.placeholder}
                         value={String((field.name in data.config ? data.config[field.name] : field.value) ?? '')}
                         onChange={(value) => updateNodeConfig(id, field.name, value)}
                       />
                     ) : (
                       <TextInput
                         theme="node"
+                        placeholder={field.placeholder}
                         value={String((field.name in data.config ? data.config[field.name] : field.value) ?? '')}
                         onChange={(value) => updateNodeConfig(id, field.name, value)}
                       />