bd31f68121ae5c0929fb4da5efa6a59ff8f6eac9
[mandelbrot-web.git] / index.html
1 <!-- This Source Code Form is subject to the terms of the Mozilla Public
2    - License, v. 2.0. If a copy of the MPL was not distributed with this file,
3    - You can obtain one at http://mozilla.org/MPL/2.0/.  -->
4
5 <!DOCTYPE html>
6 <html manifest="manifest.appcache">
7 <head>
8   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
9   <!-- try to counts default scaling on mobile, see 
10        https://developer.mozilla.org/en/Mobile/Viewport_meta_tag -->
11   <meta name="viewport" content="width=device-width, height=device-height, initial-scale=.6667, maximum-scale=.6667">
12   <title>KaiRo.at Mandelbrot Web</title>
13   <script src="js/mandelbrot.js"></script>
14   <link rel="stylesheet" href="style/mandelbrot.css">
15   <link rel="shortcut icon" href="style/mandelbrotIcon16.png" type="image/png">
16 </head>
17 <body onload="Startup();">
18 <h1>KaiRo.at Mandelbrot Web</h1>
19
20 <div id="overlayArea">
21 <input type="button" id="drawButton" value="Draw Image"
22        onclick="drawImage();">
23 <input type="button" id="backButton" value="Back"
24        onclick="goBack();" disabled="true">
25 <input type="button" id="settingsButton" value="Settings"
26        onclick="toggleSettings();">
27 <fieldset id="settings"><legend>Image data</legend>
28 Image coordinates:
29 <br>Real:
30 <br>Min:
31 <input id="Cr_min" value="-2.0" maxlength="10" size="10" type="text"
32        onchange="checkISValue(this, 'coord'); recalcCoord('Cr', 'scale');">
33 Max:
34 <input id="Cr_max" value="1.0" maxlength="10" size="10" type="text"
35        onchange="checkISValue(this, 'coord'); recalcCoord('Cr', 'scale');">
36 Scale:
37 <input id="Cr_scale" value="3.0" maxlength="10" size="10" type="text"
38        onchange="checkISValue(this, 'coord'); recalcCoord('Cr', 'max');">
39 <br>Imag:
40 <br>Min:
41 <input id="Ci_min" value="-1.5" maxlength="10" size="10" type="text"
42        onchange="checkISValue(this, 'coord'); recalcCoord('Ci', 'scale');">
43 Max:
44 <input id="Ci_max" value="1.5" maxlength="10" size="10" type="text"
45        onchange="checkISValue(this, 'coord'); recalcCoord('Ci', 'scale');">
46 Scale:
47 <input id="Ci_scale" value="3.0" maxlength="10" size="10" type="text"
48        onchange="checkISValue(this, 'coord'); recalcCoord('Ci', 'max');">
49
50 <br><br>Image size:
51 <br>Width:
52 <input id="image_width" value="300" maxlength="4" size="4" type="number"
53        onchange="checkISValue(this, 'dim'); recalcCoord('Ci', 'scale');">
54 Height:
55 <input id="image_height" value="300" maxlength="4" size="4" type="number"
56        onchange="checkISValue(this, 'dim'); recalcCoord('Cr', 'scale');">
57 <input type="checkbox" id="proportional" onchange="checkProportions();">
58 <label for="proportional">proportional</label>
59
60 <br><br>Maximum of iterations:
61 <select id="iterMax">
62 <option value="50">50</option>
63 <option value="100">100</option>
64 <option value="500" selected="selected">500</option>
65 <option value="1000">1000</option>
66 <option value="5000">5000</option>
67 </select>
68
69 <br>Color palette:
70 <select id="palette">
71 <option value="bw">Black &amp; White</option>
72 <option value="kairo" selected="selected">KaiRo default</option>
73 <option value="rainbow-linear1">Rainbow-linear 1</option>
74 <option value="rainbow-squared1">Rainbow 1 Squared</option>
75 <option value="rainbow-linear2">Rainbow 2 Linear</option>
76 <option value="rainbow-squared2">Rainbow 2 Squared</option>
77 </select>
78 </fieldset>
79 </div>
80
81 <div id="mainArea">
82 <canvas id="mbrotImage" width="300" height="300"
83         onclick="drawIfEmpty();"></canvas>
84 </div>
85
86 <p>Time taken for calculation: <span id="calcTime">none yet</span></p>
87
88 </body></html>