Add layout alignment, Plot widget, and CLI improvements

README.md

@@ -47,17 +47,34 @@ Then install indiepixel
 uv add indiepixel
 ```
 
-Create a basic example: for example, copy [clock.py](https://github.com/tmcw/indiepixel/blob/main/examples/cli/clock.py) to the current directory.
+Create a widget file, like `clock.py`:
 
-Then run:
+```python
+import datetime
+from indiepixel import Box, Root, Row, Text
+
+def main():
+    now = datetime.datetime.now()
+    return Root(
+        child=Box(
+            Row(children=[
+                Text(content=now.strftime("%I:%M %p"), color="#fff"),
+            ]),
+            padding=2,
+            background="#000",
+        ),
+    )
+```
+
+Then run it:
 
 ```
 uv run indiepixel clock.py
 ```
 
-Then, bam! You've got that clock rendering. If you want to get fancier,
-you can create a directory of widgets and move `clock.py` into it, point
-indiepixel at that, and it'll show all of them rendered in its web interface.
+Open http://localhost:5000 in your browser and you'll see the clock rendering.
+You can also point indiepixel at a directory of widget files and it'll show
+all of them in its web interface.
 
 ## Deploying
 
@@ -108,7 +125,7 @@ uv run pre-commit install
 
 ### Running examples
 
-To run `examples/kitchen_sink.py`:
+To run examples:
 
 ```
 uv run indiepixel examples/cli/gradient.py
@@ -152,8 +169,9 @@ _* = currently not tidbyt-compatible_
   - [x] Text
   - [x] Box*
   - [x] Rect*
-  - [x] Column*
+  - [x] Column
   - [x] Row
+  - [x] Root
   - [x] Stack
   - [x] Circle
   - [x] PieChart
@@ -162,5 +180,5 @@ _* = currently not tidbyt-compatible_
   - [x] WrappedText
     - [ ] Resizing
     - [ ] Animation
-  - [ ] Plot
-  - [ ] 'expand' option
+  - [x] Plot
+  - [x] Row/Column `expanded`, `main_align`, `cross_align`

examples/cli/animated_image.py

@@ -1,8 +1,9 @@
 """Render an animation."""
 
-from indiepixel import Animation, Image
 from pathlib import Path
 
+from indiepixel import Image
+
 
 def main():
     """

examples/cli/animation_nested.py

@@ -10,7 +10,6 @@ def main():
     This matches the example in https://github.com/tidbyt/pixlet/blob/main/docs/widgets.md#stack
     Successfully matches!
     """
-
     return Animation(
         debug_label="Outer",
         children=[

examples/cli/image.py

@@ -1,8 +1,9 @@
 """Render an animation."""
 
-from indiepixel import Animation, Image
 from pathlib import Path
 
+from indiepixel import Image
+
 
 def main():
     """

examples/kitchen_sink.py → examples/cli/kitchen_sink.py

@@ -1,24 +1,15 @@
-"""Interactive kitchen sink example."""
+"""Render a bunch of stuff."""
 
-# ruff: noqa: D103
-from io import BytesIO
 from pathlib import Path
 
-from flask import Flask, send_file
-from PIL import Image as ImagePIL
-from PIL import ImageDraw
-
 # import pytz
 from indiepixel import Box, Column, Image, Rect, Row, Text
 
 
-def render():
-    frames = []
-    im = ImagePIL.new("RGB", (64, 32))
-    draw = ImageDraw.Draw(im)
-    draw.fontmode = "1"
+def main():
+    """Render a bunch of stuff."""
     # tz = pytz.timezone("America/New_York")
-    layout = Box(
+    return Box(
         Column(
             [
                 Row(
@@ -28,7 +19,7 @@ def render():
                         Rect(width=4, height=4, color="orange"),
                         Rect(width=4, height=4, color="blue"),
                     ],
-                    expand=True,
+                    expanded=True,
                 ),
                 Row(
                     [
@@ -150,42 +141,3 @@ def render():
     #     ]),
     #     padding=2, background=(100, 0, 0, 255)
     # )
-    layout.paint(draw, im, (0, 0, 64, 32), 0)
-    frames.append(im)
-    return frames
-
-
-app = Flask(__name__)
-
-
-@app.route("/")
-def root() -> str:
-    return (
-        "<p><img "
-        "style='image-rendering:pixelated;height:320px;width:640px;' "
-        "src='./image.webp' />"
-        "</p>"
-    )
-
-
-@app.route("/image.webp")
-def image():
-    img_io = BytesIO()
-    rendered = render()
-    # It's very important to specify lossless=True here,
-    # otherwise we get blurry output
-    rendered[0].save(
-        img_io,
-        "WEBP",
-        lossless=True,
-        alpha_quality=100,
-        save_all=True,
-        append_images=rendered[1:],
-        duration=100,
-    )
-    img_io.seek(0)
-    return send_file(img_io, mimetype="image/webp")
-
-
-if __name__ == "__main__":
-    app.run(debug=True, port=5000)

examples/cli/plot.py

@@ -0,0 +1,26 @@
+"""Render a plot."""
+
+import math
+
+from indiepixel import Box, Plot, Root
+
+
+def main():
+    """Render a sine wave plot."""
+    data = [(x / 4, math.sin(x / 4)) for x in range(80)]
+    return Root(
+        child=Box(
+            Plot(
+                data=data,
+                width=60,
+                height=28,
+                color="#0ff",
+                color_inverted="#f80",
+                fill=True,
+                fill_color="#033",
+                fill_color_inverted="#330",
+            ),
+            padding=2,
+            background="#000",
+        ),
+    )

renovate.json

@@ -0,0 +1,6 @@
+{
+  "$schema": "https://docs.renovatebot.com/renovate-schema.json",
+  "extends": [
+    "config:recommended"
+  ]
+}