Merge pull request #55 from ebeeton/54-add-a-button-to-the-plot-form-…

…to-randomize-the-plot-area

54 add a button to the plot form to randomize the plot area

webapp/app/plot.tsx

@@ -1,6 +1,7 @@
+// A record of a individual plot.
 export default interface Plot {
     readonly CreatedAt: string;
     readonly UpdatedAt: string;
     readonly ID: number;
     readonly Filename: string;
-}
+};

webapp/app/plotParams.tsx

@@ -0,0 +1,12 @@
+import Region from "./region";
+import Stop from "./stop";
+
+// Parameters used to plot the 'brot.
+export default interface PlotParams {
+    readonly sampleSize: number,
+    readonly maxIterations: number,
+    readonly region: Region,
+    readonly width: number,
+    readonly height: number,
+    readonly gradient: Stop[]
+};

webapp/app/plotform.tsx

@@ -1,37 +1,27 @@
 'use client'
 
-import { APIURL, PLOTROUTE } from "./apiRoutes"
+import { useState } from "react";
+import { APIURL, PLOTROUTE } from "./apiRoutes";
+import PlotParams from "./plotParams";
 
 export default function PlotForm() {
-    // Plot area of the complex plane.
-    interface Region {
-        readonly minReal: number,
-        readonly maxReal: number,
-        readonly minImag: number,
-        readonly maxImag: number
-    };
-
-    // A hex color and its position in a gradient.
-    interface Stop {
-        readonly color: string,
-        readonly position: number
-    }
-
-    // Parameters used to plot the 'brot.
-    interface PlotParams {
-        readonly sampleSize: number,
-        readonly maxIterations: number,
-        readonly region: Region,
-        readonly width: number,
-        readonly height: number,
-        readonly gradient: Stop[]
-    };
-
     // Data returned by the plot request.
     interface PlotResponse {
         readonly id: number
     }
 
+    const MinReal = -2,
+        MaxReal = 1.6,
+        MinImag = -2,
+        MaxImag = 2;
+
+    const [minReal, setMinReal] = useState(MinReal);
+    const [maxReal, setMaxReal] = useState(MaxReal);
+    const [minImag, setMinImag] = useState(MinImag);
+    const [maxImag, setMaxImag] = useState(MaxImag);
+    const [width, setWidth] = useState(512);
+    const [height, setHeight] = useState(512);
+
     async function plot(formData: FormData) {
         // Copy the plot parameters from the submitted form.
         const plotParams: PlotParams = {
@@ -72,24 +62,50 @@ export default function PlotForm() {
             .then(body => body as PlotResponse)
             .catch(console.error);
 
-        // TODO:: Redirect to... something?
+        // TODO:: Add a message indicating the plot was submitted successfully.
         console.log(plotResponse);
     }
 
+    function random(min: number, max: number): number {
+        return Math.random() * (max - min) + min;
+    }
+
+    function randomizeRegion() {
+        // Get two points on the real axis.
+        const reals = [ random(MinReal, MaxReal), random(MinReal, MaxReal)];
+        const minR = Math.min(...reals),
+              maxR = Math.max(...reals);
+
+        // Figure out the imaginary height while maintaining the image aspect ratio.
+        const aspectRatio = height / width;
+        const widthR = maxR - minR;
+        const heightI = widthR * aspectRatio;
+        console.debug(`Aspect ratio: ${aspectRatio} Real width: ${widthR} Imaginary height: ${heightI}`);
+
+        // Get a minimum imaginary number, and offset the maximum from it.
+        const minI = random(MinImag, MaxImag - heightI);
+        const maxI = minI + heightI;
+
+        setMinReal(Number(minR.toFixed(3)));
+        setMaxReal(Number(maxR.toFixed(3)));
+        setMinImag(Number(minI.toFixed(3)));
+        setMaxImag(Number(maxI.toFixed(3)));
+    }
+
     return (
-        <form action={plot} className="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4 h-5/6">
+        <form action={plot} className="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
             <div className="mb-4">
                 <label htmlFor="width" className="block uppercase tracking-wide text-gray-700 text-xs font-bold mr-2">
                     Width
                 </label>
-                <input name="width" defaultValue={512} type="number" min="1"
+                <input name="width" defaultValue={width} type="number" min="1" onChange={e => setWidth(Number(e.target.value))}
                     className="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500" />
             </div>
             <div className="mb-4">
                 <label htmlFor="height" className="block uppercase tracking-wide text-gray-700 text-xs font-bold mr-2">
                     Height
                 </label>
-                <input name="height" defaultValue={512} type="number" min="1"
+                <input name="height" defaultValue={height} type="number" min="1" onChange={e => setHeight(Number(e.target.value))}
                     className="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500" />
             </div>
             <div className="mb-4">
@@ -113,32 +129,33 @@ export default function PlotForm() {
                 <label htmlFor="minReal" className="block uppercase tracking-wide text-gray-700 text-xs font-bold mr-2">
                     Minimum real
                 </label>
-                <input name="minReal" defaultValue={-2.0} type="number" min="-2.0" max="1.6" step="0.0001"
+                <input name="minReal" defaultValue={minReal} type="number" min="-2.0" max="1.6" step="0.0001"
                     className="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500" />
             </div>
             <div className="mb-4">
                 <label htmlFor="maxReal" className="block uppercase tracking-wide text-gray-700 text-xs font-bold mr-2">
                     Maximum real
                 </label>
-                <input name="maxReal" defaultValue={1.6} type="number" min="-2.0" max="1.6" step="0.0001"
+                <input name="maxReal" defaultValue={maxReal} type="number" min="-2.0" max="1.6" step="0.0001"
                     className="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500" />
             </div>
             <div className="mb-4">
                 <label htmlFor="minImag" className="block uppercase tracking-wide text-gray-700 text-xs font-bold mr-2">
                     Minimum imaginary
                 </label>
-                <input name="minImag" defaultValue={-2} type="number" min="-2.0" max="2.0" step="0.0001"
+                <input name="minImag" defaultValue={minImag} type="number" min="-2.0" max="2.0" step="0.0001"
                     className="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500" />
             </div>
             <div className="mb-4">
                 <label htmlFor="maxImag" className="block uppercase tracking-wide text-gray-700 text-xs font-bold mr-2">
                     Maximum imaginary
                 </label>
-                <input name="maxImag" defaultValue={2} type="number" min="-2.0" max="2.0" step="0.0001"
+                <input name="maxImag" defaultValue={maxImag} type="number" min="-2.0" max="2.0" step="0.0001"
                     className="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500" />
             </div>
             <div>
                 <button type="submit" className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">Plot</button>
+                <button type="button" onClick={randomizeRegion} className="ml-4 outline hover:text-white hover:bg-blue-700 outline-blue-500 text-blue-500 font-bold py-2 px-4 rounded outline-1">Random Region</button>
             </div>
         </form>
     );

webapp/app/plotsummarylist.tsx

@@ -14,7 +14,6 @@ export default function PlotSummaryList() {
             .then(response => response.json())
             .then(body => {
                 setPlots(body);
-                console.debug("Plot summary list updated.");
             })
             .catch(console.error);
         };
@@ -29,7 +28,7 @@ export default function PlotSummaryList() {
     }, []);
 
     return (
-        <div className="bg-white shadow-md rounded ml-8 px-8 pt-6 h-5/6 overflow-y-scroll">
+        <div className="bg-white shadow-md rounded ml-8 px-8 pt-6 max-h-96 overflow-y-scroll">
             <table className="w-full">
                 <caption>
                     Plot History

webapp/app/region.tsx

@@ -0,0 +1,7 @@
+// Plot area of the complex plane.
+export default interface Region {
+    readonly minReal: number,
+    readonly maxReal: number,
+    readonly minImag: number,
+    readonly maxImag: number
+};

webapp/app/stop.tsx

@@ -0,0 +1,5 @@
+    // A hex color and its position in a gradient.
+    export default interface Stop {
+        readonly color: string,
+        readonly position: number
+    };