appengine-mandelbrot-python/builder.html at master · cbaueratwork/appengine-mandelbrot-python · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<!--
Copyright 2011 Google Inc.
#
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
#
    http://www.apache.org/licenses/LICENSE-2.0
#
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->
<html>
  <head>
    <title>Mandelbrot Builder</title>
    <script type="text/javascript">
      function build() {
        var plot = document.getElementById("plot");
        var url = "mandelbrot-animation?";
        var inputs = document.getElementsByClassName('value')
        for (var i=0; i < inputs.length; ++i) {
          url += inputs[i].name + "=" + inputs[i].value + "&";
        }
        plot.src = url;
      }

      function image_loaded() {
        document.getElementById("plot").style.visibility = 'visible';
        document.getElementById("loading").style.display = 'none';
      }
    </script>
  </head>
  <body onload="build()">
    <div style="float: right">
      <div id="loading" style="border: 1px solid #ccc; padding: 20px; color: blue; font-size: 200%;">
        Loading image. Please wait...
      </div>
      <img id="plot" style="visibility: hidden;" src="" onload="image_loaded()" src=""/>
    </div>
    <div style="width: 20em">
      <form>
        <fieldset>
          <legend>Mandelbrot&nbsp;Parameters:</legend>
          Left: <input class="value" type="text" name="left" value="-2.68"/><br />
          Right: <input class="value" type="text" name="right" value="1.32"/><br />
          Top: <input class="value" type="text" name="top" value="-1.5"/><br />
          Bottom: <input class="value" type="text" name="bottom" value="1.5"/><br />
          Iterations: <input class="value" type="text" name="iterations" value="10"/><br />
        </fieldset>
        <fieldset>
          <legend>Image&nbsp;Parameters:</legend>
          Width: <input class="value" type="text" name="width" value="250"/><br />
          Height: <input class="value" type="text" name="height" value="250"/><br />
        </fieldset>
        <fieldset>
          <legend>Animation&nbsp;Parameters:</legend>
          Start z0: <input class="value" type="text" name="start_z0" value="-3"/><br />
          End z0: <input class="value" type="text" name="end_z0" value="3"/><br />
          Step z0: <input class="value" type="text" name="step_z0" value="0.1"/><br />
        </fieldset>
      </form>
    </div>
    <button type="button" onclick="build()">Build Animated GIF!</button>
  </body>
</html>