Iss17 feature add input

app/api/main.py

@@ -24,7 +24,12 @@ async def homepage(request: Request):
     Splashpage.
     """
 
-    return settings.templates.TemplateResponse("pages/index.html", {"request": request})
+    centre = complex(0.0, 0.0)
+    zoom = 0.5
+
+    return settings.templates.TemplateResponse(
+        "pages/index.html", {"request": request, "centre": centre, "zoom": zoom}
+    )
 
 
 class MandelbrotInput(BaseModel):
@@ -42,14 +47,14 @@ async def sample_mandelbrot(input: MandelbrotInput):
     return mandelbrot(complex(input.real, input.imag), input.max_iter)
 
 
-@app.get("/mandelbrot_image/{real}/{imag}/{zoom}")
-async def sample_mandelbrot_area(real: float, imag: float, zoom: float):
+@app.get("/mandelbrot_image/{real}/{imag}/{zoom}/{res}")
+async def sample_mandelbrot_area(real: float, imag: float, zoom: float, res: int):
     """
     Evaluate an area of complex numbers.
     """
 
     center = complex(real, imag)
-    resolution = (512, 512)
+    resolution = (res, res)
     levels = 80
 
     red = Color("red")

app/templates/components/controls.html

@@ -0,0 +1,32 @@
+<button
+    type="button"
+    class="btn btn-secondary"
+    onclick="move_camera(-1.0, 0.0)"
+>
+    Left <
+</button>
+<button type="button" class="btn btn-secondary" onclick="move_camera(1.0, 0.0)">
+    Right >
+</button>
+<button
+    type="button"
+    class="btn btn-secondary"
+    onclick="move_camera(0.0, -1.0)"
+>
+    Up ^
+</button>
+<button type="button" class="btn btn-secondary" onclick="move_camera(0.0, 1.0)">
+    Down V
+</button>
+
+<input id="zoom_input" class="form-control" type="number" style="width:200px; float:right" onchange="$zoom=this.value;update_image()" value="1" min="1">
+</input>
+
+
+<script>
+    const move_camera = (dx, dy) => {
+        $real += 0.1 * (dx / $zoom);
+        $imag += 0.1 * (dy / $zoom);
+        update_image();
+    };
+</script>

app/templates/components/display.html

@@ -1,11 +1,6 @@
 <canvas id="display" style="width: 100%; height: 100%"> </canvas>
 
 <script>
-    var $real = 0.4200101;
-    var $imag = 0.20101023;
-    var $zoom = 1.0;
-    var $zoom_rate = 4.0;
-
     const update_image = () => {
         var image = new Image();
         image.onload = function () {
@@ -16,9 +11,6 @@
             scale_y = ctx.canvas.height / $("#image_display").height();
 
             ctx.drawImage(image, 0, 0);
-
-            $zoom *= $zoom_rate;
-            update_image();
         };
         image.src =
             "/mandelbrot_image/" +
@@ -27,6 +19,8 @@
             $imag +
             "/" +
             $zoom +
+            "/" +
+            $resolution +
             "?t=" +
             new Date().getTime();
     };

app/templates/components/keybindings.html

@@ -0,0 +1,35 @@
+<script>
+    $(document).keypress((e) => {
+        if (e.which == 119) {
+            move_camera(0, -1);
+        } else if (e.which == 115) {
+            move_camera(0, 1);
+        } else if (e.which == 97) {
+            move_camera(-1, 0);
+        } else if (e.which == 100) {
+            move_camera(1, 0);
+        } else if (e.which == 101) {
+            $zoom = $zoom * 2.0;
+            $("#zoom_input").val($zoom);
+            update_image();
+        } else if (e.which == 113) {
+            $zoom = $zoom * 0.5;
+            $("#zoom_input").val($zoom);
+            update_image();
+        } else if (e.which == 61) {
+            $resolution *= 2;
+            update_image();
+        } else if (e.which == 45) {
+            $resolution /= 2;
+            update_image();
+        } else if (e.which == 167) {
+            $real = 0.0;
+            $imag = 0.0;
+            $zoom = 0.5;
+            $("#zoom_input").val($zoom);
+            update_image();
+        } else {
+            console.log("Unknown key pressed: " + e.which);
+        }
+    });
+</script>

app/templates/pages/index.html

@@ -2,5 +2,14 @@
 
 <h1 class="display-5 fw-bold" style="text-align: center">WebApp</h1>
 <div>{% include "components/display.html" %}</div>
+<div>{% include "components/controls.html" %}</div>
+<div>{% include "components/keybindings.html" %}</div>
+
+<script>
+    var $real = {{ centre.real }};
+    var $imag = {{ centre.imag }};
+    var $zoom = {{ zoom }};
+    var $resolution = 128;
+</script>
 
 {% endblock %}