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">
|
|
|
|
|
|
2024-09-17 21:45:56 +00:00
|
|
|
<link rel="icon" type="image/png" sizes="16x16" href="/static/icon/favicon16.png">
|
|
|
|
|
<link rel="icon" type="image/png" sizes="32x32" href="/static/icon/favicon32.png">
|
|
|
|
|
<link rel="icon" type="image/png" sizes="48x48" href="/static/icon/favicon48.png">
|
|
|
|
|
<link rel="icon" type="image/png" sizes="64x64" href="/static/icon/favicon64.png">
|
|
|
|
|
<link rel="icon" type="image/png" sizes="160x160" href="/static/icon/favicon160.png">
|
|
|
|
|
<link rel="icon" type="image/png" sizes="320x320" href="/static/icon/favicon320.png">
|
|
|
|
|
<link rel="icon" type="image/png" sizes="640x640" href="/static/icon/favicon640.png">
|
|
|
|
|
|
|
|
|
|
<title>cxgraph</title>
|
|
|
|
|
<link rel="stylesheet" href="static/style.css">
|
2023-06-07 22:58:20 +00:00
|
|
|
</head>
|
2024-09-17 21:45:56 +00:00
|
|
|
<body id="body" class="theme_dark">
|
2023-06-07 22:58:20 +00:00
|
|
|
<div class="canvas-container">
|
|
|
|
|
<canvas id="canvas"></canvas>
|
2023-06-14 04:03:41 +00:00
|
|
|
<svg id="overlay">
|
|
|
|
|
<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-17 21:45:56 +00:00
|
|
|
<div><textarea id="source_text" spellcheck="false" title="Source text"></textarea></div>
|
|
|
|
|
|
|
|
|
|
<div>
|
|
|
|
|
<input type="checkbox" id="checkbox_theme" checked>
|
|
|
|
|
<label for="checkbox_theme">Dark theme</label>
|
|
|
|
|
</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>
|
2024-09-17 21:45:56 +00:00
|
|
|
<div><fieldset>
|
|
|
|
|
<legend><label for="range_resolution">Resolution</label></legend>
|
2023-06-09 00:25:06 +00:00
|
|
|
<input type="range" id="range_resolution" name="resolution" min="-2" max="2" step="1" value="0">
|
2024-09-17 21:45:56 +00:00
|
|
|
</fieldset></div>
|
2023-06-09 00:25:06 +00:00
|
|
|
|
2024-09-17 21:45:56 +00:00
|
|
|
<div><fieldset>
|
|
|
|
|
<legend><label for="range_shading">Shading intensity</label></legend>
|
2023-06-09 00:25:06 +00:00
|
|
|
<input type="range" id="range_shading" min="0" max="1" step="0.01" value="0.3">
|
2024-09-17 21:45:56 +00:00
|
|
|
</fieldset></div>
|
2023-06-09 00:25:06 +00:00
|
|
|
|
2024-09-17 21:45:56 +00:00
|
|
|
<div><fieldset>
|
|
|
|
|
<legend>Contours</legend>
|
|
|
|
|
<div>
|
|
|
|
|
<input type="range" id="range_contour" min="0" max="1" step="0.01" value="0.0" title="Contour intensity">
|
|
|
|
|
</div>
|
2023-06-09 00:25:06 +00:00
|
|
|
<div>
|
|
|
|
|
<input type="checkbox" class="decor" id="checkbox_decor_1" data-value="1">
|
2024-09-17 21:45:56 +00:00
|
|
|
<label for="checkbox_decor_1">Real</label>
|
2023-06-09 00:25:06 +00:00
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<input type="checkbox" class="decor" id="checkbox_decor_2" data-value="2">
|
2024-09-17 21:45:56 +00:00
|
|
|
<label for="checkbox_decor_2">Imaginary</label>
|
2023-06-09 00:25:06 +00:00
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<input type="checkbox" class="decor" id="checkbox_decor_4" data-value="4">
|
2024-09-17 21:45:56 +00:00
|
|
|
<label for="checkbox_decor_4">Argument</label>
|
2023-06-09 00:25:06 +00:00
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<input type="checkbox" class="decor" id="checkbox_decor_8" data-value="8">
|
2024-09-17 21:45:56 +00:00
|
|
|
<label for="checkbox_decor_8">Magnitude</label>
|
2024-09-07 22:59:55 +00:00
|
|
|
</div>
|
2024-09-17 21:45:56 +00:00
|
|
|
</fieldset></div>
|
2023-06-09 00:25:06 +00:00
|
|
|
|
2024-09-17 21:45:56 +00:00
|
|
|
<div><fieldset>
|
|
|
|
|
<legend>Coloring</legend>
|
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>
|
2024-09-17 21:45:56 +00:00
|
|
|
</fieldset></div>
|
|
|
|
|
|
|
|
|
|
<div><fieldset>
|
|
|
|
|
<legend>Grid</legend>
|
|
|
|
|
<input type="radio" name="grid_mode" id="radio_grid_0" data-value="0">
|
|
|
|
|
<label for="radio_grid_0">None</label><br>
|
|
|
|
|
<input type="radio" name="grid_mode" id="radio_grid_1" data-value="1">
|
|
|
|
|
<label for="radio_grid_1">Axes</label><br>
|
|
|
|
|
<input type="radio" name="grid_mode" id="radio_grid_2" data-value="2">
|
|
|
|
|
<label for="radio_grid_2">Cartesian</label>
|
|
|
|
|
</fieldset></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-17 21:45:56 +00:00
|
|
|
<input type="button" class="var-delete" value="X" title="Delete">
|
|
|
|
|
<input type="text" class="var-name" style="width: 5ch;" placeholder="a" title="Variable name">
|
2023-06-14 04:03:41 +00:00
|
|
|
=
|
2024-09-17 21:45:56 +00:00
|
|
|
<input type="number" class="var-value" style="width: 10ch;" value="0" required title="Value">
|
2023-06-14 04:03:41 +00:00
|
|
|
</div>
|
|
|
|
|
<div>
|
2024-09-17 21:45:56 +00:00
|
|
|
<input type="range" class="var-slider" min="-1" max="1" step="0.01" value="0" title="Slider">
|
2023-06-14 04:03:41 +00:00
|
|
|
</div>
|
|
|
|
|
<div style="display: flex; flex-direction: row; justify-content: space-between;">
|
2024-09-17 21:45:56 +00:00
|
|
|
<input type="number" class="var-bounds var-min" style="width: 6ch;" required value="-1" title="Minimum">
|
|
|
|
|
<input type="number" class="var-bounds var-max" style="width: 6ch;" required value="1" title="Maximum">
|
|
|
|
|
<input type="number" class="var-bounds var-step" style="width: 6ch;" required value="0.01" title="Step">
|
2023-06-14 04:03:41 +00:00
|
|
|
</div>
|
|
|
|
|
<hr>
|
|
|
|
|
</div>
|
|
|
|
|
<div id="point_template" hidden>
|
2024-09-17 21:45:56 +00:00
|
|
|
<input type="button" class="var-delete" value="X" title="Delete">
|
|
|
|
|
<input type="text" class="var-name" style="width: 5ch;" placeholder="b" title="Variable name">
|
2023-06-14 04:03:41 +00:00
|
|
|
=
|
2024-09-17 21:45:56 +00:00
|
|
|
<input type="number" class="var-value-re" style="width: 8ch;" required value="0" title="Real part">
|
2023-06-14 04:03:41 +00:00
|
|
|
+
|
2024-09-17 21:45:56 +00:00
|
|
|
<input type="number" class="var-value-im" style="width: 8ch;" required value="0" title="Imaginary part">i
|
2023-06-14 04:03:41 +00:00
|
|
|
<hr>
|
|
|
|
|
</div>
|
|
|
|
|
<div id="div_variables"></div>
|
|
|
|
|
<div id="buttons_var_new">
|
2024-09-17 21:45:56 +00:00
|
|
|
<input type="button" id="button_slider_new" value="+slider" title="Add slider">
|
|
|
|
|
<input type="button" id="button_point_new" value="+point" title="Add point">
|
2023-06-14 04:03:41 +00:00
|
|
|
</div>
|
|
|
|
|
</details>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2023-06-07 22:58:20 +00:00
|
|
|
|
2024-09-17 21:45:56 +00:00
|
|
|
<div class="info_overlay">
|
|
|
|
|
<span id="mouse_pos"></span>
|
|
|
|
|
</div>
|
|
|
|
|
|
2023-06-07 22:58:20 +00:00
|
|
|
<script>
|
2024-09-07 22:59:55 +00:00
|
|
|
window.modules = {};
|
2024-09-17 21:45:56 +00:00
|
|
|
import('./static/index.js').then(m => window.modules.index = m);
|
|
|
|
|
import('./static/editor.js').then(m => window.modules.editor = m);
|
|
|
|
|
import('./static/themes.js').then(m => window.modules.themes = m);
|
2023-06-07 22:58:20 +00:00
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
