spirula/implicit2/index.html at master · ArchiyouApp/spirula · 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
69
70
71
72
73
74
75
<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <title>Implicit Curve Grapher | Spirula</title>
    <meta name="description"
        content="This tool is created for testing 2D renderer and equation parser. Do not treat it too seriously." />

    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <link rel="stylesheet" href="../styles/style.css" />

</head>

<body>
    <canvas id="canvas"></canvas>

    <div id="legend">
        <div id="fps"></div>
        <svg id="axes" width="120" height="40">
            <g transform="translate(0,5)">
                <rect id="legend-scale" x="0" y="0" width="0" height="20" stroke="none" fill="rgba(96,96,96,0.7)" />
                <text id="legend-text" x="0" y="15" text-anchor="middle" alignment-baseline="top" stroke="none"
                    fill="white" font-family="monospace" font-size="1.2em"></text>
            </g>
        </svg>
    </div>

    <div id="control">
        <select id="builtin-functions"></select>
        <span title="Update equation (Alt+Enter)"><button id="button-update">update</button></span>
        <a href='#' style="float:right"
            onclick='javascript:event.preventDefault();document.getElementById("help-menu").style.visibility="visible";'>help</a>
        <br />
        <span title="Display a preview of the input equation"><input type="checkbox" id="checkbox-latex"
                checked />equation preview</span>&ensp;
        <span title="Automatically update the shader on input"><input type="checkbox" id="checkbox-auto-compile"
                checked />auto-update</span>&ensp;
        <br />
        <textarea id="equation-input" spellcheck="false" autocapitalize="off" autocorrect="off"
            data-gramm="false"></textarea>
        <br />
        <span title="Show axes and grid"><input type="checkbox" id="checkbox-grid" checked />grid</span>&ensp;
        <br />
        <p id="error-message" style="display:none"></p>
    </div>

    <div id="mathjax-preview" style="left:0px;top:0px;display:none"></div>

    <div id="help-menu" style="visibility:hidden">
        <div id="help-menu-hide" onclick='document.getElementById("help-menu").style.visibility="hidden"'>×</div>
    </div>

    <script>
        (function () {
            // refresh cache every one hour
            function loadScript(src) {
                var hour = Math.floor(Date.now() / 3600000);
                var script = document.createElement("script");
                script.src = src + "?nocache=" + hour;
                document.head.appendChild(script);
            }
            loadScript("../scripts/parameter.js");
            loadScript("../scripts/parser.js");
            loadScript("../scripts/render-gl.js");
            loadScript("../scripts/render-2d.js");
            loadScript("../scripts/latex.js");
            loadScript("script.js");
        })();
    </script>

</body>

</html>