cxgraph/cxgraph-web/index.html

158 lines
5.3 KiB
HTML
Raw Normal View History

2023-06-07 22:58:20 +00:00
<!DOCTYPE html>
2024-09-07 22:59:55 +00:00
<html lang="en">
2023-06-07 22:58:20 +00:00
<head>
2024-09-07 22:59:55 +00:00
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="author" content="trimill">
<meta name="description" content="Plot complex functions">
<meta property="og:description" content="Plot complex functions">
<meta property="og:title" content="CXGraph">
<meta property="og:site_name" content="cx.trimill.xyz">
<title>CXGraph</title>
2023-06-07 22:58:20 +00:00
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="canvas-container">
<canvas id="canvas"></canvas>
2023-06-14 04:03:41 +00:00
<svg id="overlay">
2023-06-15 04:27:09 +00:00
<line id="svg_axis_x" x1="0" y1="0" x2="0" y2="0" stroke="#0006" stroke-width="1.5" visibility="hidden" />
<line id="svg_axis_y" x1="0" y1="0" x2="0" y2="0" stroke="#0006" stroke-width="1.5" visibility="hidden" />
<circle id="svg_unitcircle" cx="0" cy="0" r="0" stroke="#0006" fill="none" stroke-width="1.5" visibility="hidden" />
2023-06-14 04:03:41 +00:00
<g id="svg_point_template" visibility="hidden">
2024-09-07 22:59:55 +00:00
<circle cx="0" cy="0" r="15" stroke="none" fill="#3337" />
<circle cx="0" cy="0" r="5" stroke="none" fill="#dddc" />
2023-06-14 04:03:41 +00:00
</g>
<g id="overlay_points">
</g>
</svg>
2023-06-07 22:58:20 +00:00
</div>
2023-06-14 04:03:41 +00:00
<div class="menus">
<details class="menu" open>
<summary>Source</summary>
2023-06-09 00:25:06 +00:00
2023-06-14 04:03:41 +00:00
<div>
<input type="button" id="button_graph" value="Graph">
<input type="button" id="button_redraw" value="Redraw">
<input type="checkbox" id="checkbox_autoredraw" checked>
<label for="checkbox_autoredraw">Auto redraw</label>
</div>
2023-06-09 00:25:06 +00:00
2023-06-14 04:03:41 +00:00
<div id="div_error_msg" hidden></div>
2024-09-07 22:59:55 +00:00
<div><textarea id="source_text">f(z) = 6z^2 - 2i - 1&#10;plot(z) = f(1 + sin(z)) / 8</textarea></div>
2023-06-14 04:03:41 +00:00
</details>
<div>
<details class="menu" open>
<summary>Options</summary>
<div>
<input type="button" id="button_reset_view" value="Reset view">
2023-06-15 04:27:09 +00:00
<input type="button" id="button_help" value="Help" onclick="window.open('https://g.trimill.xyz/trimill/cxgraph')">
2023-06-14 04:03:41 +00:00
</div>
2023-06-09 00:25:06 +00:00
<div>
<div><label for="range_resolution">Resolution</label></div>
<input type="range" id="range_resolution" name="resolution" min="-2" max="2" step="1" value="0">
</div>
<div>
<div><label for="range_shading">Shading intensity</label></div>
<input type="range" id="range_shading" min="0" max="1" step="0.01" value="0.3">
</div>
<div>
<div>
<input type="checkbox" class="decor" id="checkbox_decor_1" data-value="1">
<label for="checkbox_decor_1">Real contours</label>
</div>
<div>
<input type="checkbox" class="decor" id="checkbox_decor_2" data-value="2">
<label for="checkbox_decor_2">Imaginary contours</label>
</div>
<div>
<input type="checkbox" class="decor" id="checkbox_decor_4" data-value="4">
<label for="checkbox_decor_4">Argument contours</label>
</div>
<div>
<input type="checkbox" class="decor" id="checkbox_decor_8" data-value="8">
<label for="checkbox_decor_8">Magnitude contours</label>
</div>
2024-09-07 22:59:55 +00:00
<div>
<div><label for="range_contour">Contour intensity</label></div>
<input type="range" id="range_contour" min="0" max="1" step="0.01" value="0.0">
</div>
2023-06-09 00:25:06 +00:00
</div>
<div>
<div>Coloring</div>
2024-09-07 22:59:55 +00:00
<input type="radio" name="color_mode" id="radio_color_0" data-value="0">
2023-06-09 00:25:06 +00:00
<label for="radio_color_0">Standard</label><br>
<input type="radio" name="color_mode" id="radio_color_1" data-value="1">
<label for="radio_color_1">Uniform</label><br>
<input type="radio" name="color_mode" id="radio_color_2" data-value="2">
<label for="radio_color_2">None</label>
</div>
2023-06-14 04:03:41 +00:00
<div>
Overlay
<div>
2023-06-15 04:27:09 +00:00
<input type="checkbox" id="overlay_axes">
2023-06-14 04:03:41 +00:00
<label for="overlay_axes">Draw axes</label>
</div>
2023-06-15 04:27:09 +00:00
<div>
<input type="checkbox" id="overlay_unitcircle">
<label for="overlay_unitcircle">Draw unit circle</label>
</div>
2023-06-14 04:03:41 +00:00
</div>
2023-06-09 00:25:06 +00:00
</details>
2023-06-14 04:03:41 +00:00
<details class="menu" open>
<summary>Variables</summary>
<div id="slider_template" hidden>
<div>
2024-09-07 22:59:55 +00:00
<input type="text" class="var-name" style="width: 5ch;" placeholder="a">
2023-06-14 04:03:41 +00:00
=
<input type="number" class="var-value" style="width: 10ch;" value="0" required>
<input type="button" class="var-delete" value="X">
</div>
<div>
<input type="range" class="var-slider" min="-1" max="1" step="0.01" value="0">
</div>
<div style="display: flex; flex-direction: row; justify-content: space-between;">
<input type="number" class="var-min" style="width: 6ch;" required value="-1">
<input type="number" class="var-step" style="width: 6ch;" required value="0.01">
<input type="number" class="var-max" style="width: 6ch;" required value="1">
</div>
<hr>
</div>
<div id="point_template" hidden>
2024-09-07 22:59:55 +00:00
<input type="text" class="var-name" style="width: 5ch;" placeholder="b">
2023-06-14 04:03:41 +00:00
=
<input type="number" class="var-value-re" style="width: 8ch;" required value="0">
+
<input type="number" class="var-value-im" style="width: 8ch;" required value="0">i
<input type="button" class="var-delete" value="X">
<hr>
</div>
<div id="div_variables"></div>
<div id="buttons_var_new">
<input type="button" id="button_slider_new" value="+slider">
<input type="button" id="button_point_new" value="+point">
</div>
</details>
</div>
</div>
2023-06-07 22:58:20 +00:00
<script>
2024-09-07 22:59:55 +00:00
window.modules = {};
import('./index.js').then(m => window.modules.index = m);
import('./editor.js').then(m => window.modules.editor = m);
2023-06-07 22:58:20 +00:00
</script>
</body>
</html>