ipysketch-lite 0.0.1__py3-none-any.whl

ipysketch_lite/__init__.py

@@ -0,0 +1,69 @@
+from http.server import BaseHTTPRequestHandler, HTTPServer
+from IPython.display import HTML, display
+from .gen import template
+import threading
+import base64
+import io
+
+try:
+    from PIL import Image
+    import numpy as np
+
+    PIL_INSTALLED = True
+except ImportError:
+    PIL_INSTALLED = False
+
+
+class SimpleHTTPRequestHandler(BaseHTTPRequestHandler):
+    def log_message(self, format, *args):
+        pass
+
+    def do_POST(self):
+        content_length = int(self.headers["Content-Length"])
+        post_data = self.rfile.read(content_length)
+        message = post_data.decode("utf-8")
+
+        global output
+        output = message
+
+        global response_received
+        response_received.set()
+
+        self.send_response(200)
+
+
+def run(server_class=HTTPServer, handler_class=SimpleHTTPRequestHandler, port=5000):
+    server_address = ("", port)
+    httpd = server_class(server_address, handler_class)
+    server_thread = threading.Thread(target=httpd.serve_forever)
+    server_thread.start()
+
+
+class Sketch:
+    def __init__(self, width: int = 400, height: int = 300):
+        global response_received
+        response_received = threading.Event()
+        run()
+
+        metadata = {
+            "{width}": width,
+            "{height}": height,
+        }
+
+        sketch_template = template
+        for key, value in metadata.items():
+            sketch_template = sketch_template.replace(key, str(value))
+
+        display(HTML(sketch_template))
+        response_received.wait()
+
+    def get_output(self) -> str:
+        return output
+
+    def get_output_array(self) -> np.ndarray:
+        if PIL_INSTALLED:
+            image_data = output.split(",")[1]
+            image = Image.open(io.BytesIO(base64.b64decode(image_data)))
+            return np.array(image)
+        else:
+            raise ImportError("PIL (Pillow) and NumPy are required to use this method.")

ipysketch_lite/gen/__init__.py

@@ -0,0 +1,196 @@
+template = """<style>
+  #toggleFill {
+    background-color: #f0f0f0;
+    border: 1px solid #999999;
+  }
+
+  #toggleFill.active {
+    background-color: #ffffff;
+    border: 1px solid #000000;
+  }
+</style>
+<canvas
+  id="canvas"
+  width="{width}"
+  height="{height}"
+  style="border: 2px solid black"
+></canvas>
+<button id="toggleFill" onclick="toggleFill()">bucket</button>
+<button onclick="clearCanvas()">clear</button>
+<input id="color" type="color" value="#000000" />
+<script>
+  var canvas = document.getElementById("canvas");
+  var colorInput = document.getElementById("color");
+  var toggleFillButton = document.getElementById("toggleFill");
+  var ctx = canvas.getContext("2d", { willReadFrequently: true });
+  ctx.lineWidth = 4;
+  ctx.lineJoin = "round";
+  var drawing = false;
+  var mouse = { x: 0, y: 0 };
+  var fillMode = false;
+
+  function canvasUpload() {
+    fetch("http://localhost:5000", {
+      method: "POST",
+      headers: {
+        "Content-Type": "text/plain",
+      },
+      body: canvas.toDataURL(),
+    });
+  }
+
+  canvasUpload();
+
+  function toggleFill() {
+    fillMode = !fillMode;
+    toggleFillButton.classList.toggle("active", fillMode);
+  }
+
+  function hexToRgb(hex) {
+    return {
+      r: parseInt(hex.substring(1, 3), 16),
+      g: parseInt(hex.substring(3, 5), 16),
+      b: parseInt(hex.substring(5, 7), 16),
+      a: 255,
+    };
+  }
+
+  canvas.addEventListener("mousedown", (e) => {
+    if (fillMode) {
+      floodFill(hexToRgb(colorInput.value), e.offsetX, e.offsetY);
+      return;
+    }
+
+    mouse = { x: e.offsetX, y: e.offsetY };
+    drawing = true;
+  });
+
+  canvas.addEventListener("mousemove", (e) => {
+    if (drawing) {
+      drawLine(ctx, mouse.x, mouse.y, e.offsetX, e.offsetY);
+      mouse = { x: e.offsetX, y: e.offsetY };
+    }
+  });
+
+  canvas.addEventListener("mouseup", (e) => {
+    if (drawing) {
+      drawLine(ctx, mouse.x, mouse.y, e.offsetX, e.offsetY);
+      drawing = false;
+      canvasUpload();
+    }
+  });
+
+  function drawLine(context, x1, y1, x2, y2) {
+    ctx.strokeStyle = colorInput.value;
+    ctx.beginPath();
+    ctx.moveTo(x1, y1);
+    ctx.lineTo(x2, y2);
+    ctx.closePath();
+    ctx.stroke();
+  }
+
+  function clearCanvas() {
+    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
+  }
+
+  function floodFill(color, x, y) {
+    var imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+    const { width, height, data } = imgData;
+    if (pixelColMatch(x, y, color, data, width)) return;
+
+    const stack = [[x, y]];
+    let baseIdx = (width * y + x) * 4;
+    const oColor = {
+      r: data[baseIdx],
+      g: data[baseIdx + 1],
+      b: data[baseIdx + 2],
+      a: data[baseIdx + 3],
+    };
+
+    while (stack.length) {
+      var [cx, cy] = stack.pop();
+      const move = (dx, dy) => {
+        let nx = cx + dx;
+        let ny = cy + dy;
+        while (
+          ny >= 0 &&
+          ny < height &&
+          pixelColMatch(nx, ny, oColor, data, width)
+        ) {
+          setPixelCol(nx, ny, color, data, width);
+          stack.push([nx, ny]);
+          ny += dy;
+        }
+      };
+      move(0, 1);
+      move(0, -1);
+      move(-1, 0);
+      move(1, 0);
+    }
+    ctx.putImageData(imgData, 0, 0);
+  }
+
+  function pixelColMatch(x, y, color, data, width) {
+    var baseIdx = (width * y + x) * 4;
+    return (
+      data[baseIdx] === color.r &&
+      data[baseIdx + 1] === color.g &&
+      data[baseIdx + 2] === color.b &&
+      data[baseIdx + 3] === color.a
+    );
+  }
+
+  function setPixelCol(x, y, color, data, width) {
+    var baseIdx = (width * y + x) * 4;
+    data[baseIdx] = color.r & 0xff;
+    data[baseIdx + 1] = color.g & 0xff;
+    data[baseIdx + 2] = color.b & 0xff;
+    data[baseIdx + 3] = color.a & 0xff;
+  }
+
+  var rect = canvas.getBoundingClientRect();
+  var offset = { x: rect.left, y: rect.top };
+  var touches = [];
+
+  canvas.addEventListener("touchstart", (e) => {
+    e.preventDefault();
+    rect = canvas.getBoundingClientRect();
+    offset = { x: rect.left, y: rect.top };
+    touches = Array.from(e.touches);
+
+    if (fillMode) {
+      var x = Math.floor(touches[0].clientX - offset.x);
+      var y = Math.floor(touches[0].clientY - offset.y);
+      floodFill(hexToRgb(colorInput.value), x, y);
+    }
+  });
+
+  canvas.addEventListener("touchend", (e) => {
+    canvasUpload();
+  });
+
+  canvas.addEventListener("touchmove", (e) => {
+    if (fillMode) return;
+
+    e.preventDefault();
+    rect = canvas.getBoundingClientRect();
+    offset = { x: rect.left, y: rect.top };
+    for (var i = 0; i < e.changedTouches.length; i++) {
+      var touch = e.changedTouches[i];
+      var previousTouch = touches.find(
+        (t) => t.identifier === touch.identifier,
+      );
+      if (previousTouch) {
+        drawLine(
+          ctx,
+          previousTouch.clientX - offset.x,
+          previousTouch.clientY - offset.y,
+          touch.clientX - offset.x,
+          touch.clientY - offset.y,
+        );
+      }
+      touches.splice(i, 1, touch);
+    }
+  });
+</script>
+"""

ipysketch_lite-0.0.1.dist-info/LICENSE

@@ -0,0 +1 @@
+Copyright (c) 2024 Matthew Andre Taylor

ipysketch_lite-0.0.1.dist-info/METADATA

@@ -0,0 +1,46 @@
+Metadata-Version: 2.1
+Name: ipysketch-lite
+Version: 0.0.1
+Summary: Simple sketching tool for jupyter notebooks
+Author-email: Matthew Taylor <matthew.taylor.andre@gmail.com>
+Project-URL: Homepage, https://github.com/MatthewAndreTaylor/ipysketch_lite
+Keywords: jupyter,sketch,drawing,canvas
+Description-Content-Type: text/markdown
+License-File: LICENSE
+Provides-Extra: utils
+Requires-Dist: numpy ; extra == 'utils'
+Requires-Dist: pillow ; extra == 'utils'
+
+# ipysketch_lite
+
+A lite sketching utility for python notebooks, no sockets or extra dependencies 🎨
+
+(no extra widget code)
+
+Make sketches right in your notebook then use the sketch in your python code.
+
+## Quickstart
+
+Start drawing a quick sketch in your notebook like this
+
+```py
+from ipysketch_lite import Sketch
+
+sketch = Sketch()
+```
+
+Then add a new cell to retrieve the sketch in python
+
+```py
+print(sketch.get_output())
+
+import matplotlib.pyplot as plt
+
+plt.imshow(sketch.get_output_array())
+```
+
+![example sketch](examples/sketches/example.png)
+
+Sketches get updated in cells after draw updates
+
+This means you can continue your sketch and get the new updated outputs

ipysketch_lite-0.0.1.dist-info/RECORD

@@ -0,0 +1,7 @@
+ipysketch_lite/__init__.py,sha256=-8lSU7nAsGHEhPlo1Civ8__miQjT7ZQ8kdpj9NlVskM,1876
+ipysketch_lite/gen/__init__.py,sha256=3J5KuxXfM5WpeiTnFrEFmGq_vMmSAWMWFnK47nXD2mk,4967
+ipysketch_lite-0.0.1.dist-info/LICENSE,sha256=-guCcX4glX_hMB9LpAtB_If_h0xpXsm0wvc55655x6M,39
+ipysketch_lite-0.0.1.dist-info/METADATA,sha256=yQLg9Wesap4-G-8DAoLOxY1DrvfHZHtOiWNI7VK8m1M,1134
+ipysketch_lite-0.0.1.dist-info/WHEEL,sha256=Wyh-_nZ0DJYolHNn1_hMa4lM7uDedD_RGVwbmTjyItk,91
+ipysketch_lite-0.0.1.dist-info/top_level.txt,sha256=IGsNv82_nxTmStOol0QKT3whl6kwu6czDb-yOUCkW14,15
+ipysketch_lite-0.0.1.dist-info/RECORD,,

ipysketch_lite-0.0.1.dist-info/WHEEL

@@ -0,0 +1,5 @@
+Wheel-Version: 1.0
+Generator: setuptools (71.1.0)
+Root-Is-Purelib: true
+Tag: py3-none-any
+

ipysketch_lite-0.0.1.dist-info/top_level.txt

@@ -0,0 +1 @@
+ipysketch_lite