FollowJS/main.html at master · lclbo/FollowJS · 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
76
77
78
79
80
81
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="dependencies/css/follow.css">
    <script>
        window.nodeRequire = require;
        delete window.exports;
        delete window.module;
    </script>
    <title>FollowJS</title>
</head>
<body class="theme-default">
    <div id="outerArea">
        <div id="mainDrawArea">
            <div id="controllerConnectOverlay" class="cameraImageHugeWarningTextOverlay">Waiting for controller…</div>
            <div id="inputOverlay" class="textInputOverlay hidden">
                <label for="inputOverlayText">Calibration Data for Spot <span id="inputOverlaySpotNo">?</span>:</label>
                <br>
                <textarea rows="10" cols="48" id="inputOverlayText"></textarea>
                <br>
                <button onclick="endImportCalibration();">Cancel &amp; Close</button>
                <button id="inputOverlaySubmitButton">Import Data</button>
                <br>
                <p>Use "Store Config" to permanently save the new calibration.</p>
            </div>
            <img id="mainWebcamImage" alt="Camera image will be here" class="webcam">

            <svg height="100%" width="100%" class="gridOverlay hidden" id="tenthGridOverlay">
                <line x1="0" y1="0" x2="100%" y2="100%" stroke="orange"></line>
                <line x1="0" y1="100%" x2="100%" y2="0" stroke="orange"></line>

                <g stroke="green">
                    <line x1="0" y1="10%" x2="100%" y2="10%"></line>
                    <line x1="0" y1="20%" x2="100%" y2="20%"></line>
                    <line x1="0" y1="30%" x2="100%" y2="30%"></line>
                    <line x1="0" y1="40%" x2="100%" y2="40%"></line>
                    <line x1="0" y1="50%" x2="100%" y2="50%"></line>
                    <line x1="0" y1="60%" x2="100%" y2="60%"></line>
                    <line x1="0" y1="70%" x2="100%" y2="70%"></line>
                    <line x1="0" y1="80%" x2="100%" y2="80%"></line>
                    <line x1="0" y1="90%" x2="100%" y2="90%"></line>

                    <line x1="10%" y1="0" x2="10%" y2="100%"></line>
                    <line x1="20%" y1="0" x2="20%" y2="100%"></line>
                    <line x1="30%" y1="0" x2="30%" y2="100%"></line>
                    <line x1="40%" y1="0" x2="40%" y2="100%"></line>
                    <line x1="50%" y1="0" x2="50%" y2="100%"></line>
                    <line x1="60%" y1="0" x2="60%" y2="100%"></line>
                    <line x1="70%" y1="0" x2="70%" y2="100%"></line>
                    <line x1="80%" y1="0" x2="80%" y2="100%"></line>
                    <line x1="90%" y1="0" x2="90%" y2="100%"></line>
                </g>
            </svg>
            <svg height="50" width="50" class="spotMarker hidden" id="highlightMarker">
                <circle cx="50%" cy="50%" r="25" stroke="blue" stroke-width="2" fill="none" />
                <circle cx="50%" cy="50%" r="5" fill="blue" fill-opacity=".4" />
            </svg>

            <div id="spotStatusOverlayArea" class="spotStatusOverlayArea"></div>

        </div>

        <div id="calibrationMenu">
            <button id="cancelCalibrationButton" class="hidden button-red" onclick="endCalibration();">Cancel Calibration</button>
            <div id="downloadButtonLanding"></div>
        </div>

        <div id="dmxFooter">
            <table style="font-size: 0.6em;" id="dmxTable">
                <thead id="dmxTableHeader"></thead>
                <tbody id="dmxTableBody"></tbody>
            </table>
        </div>
    </div>
    <div class="barelyVisibleFooter"><span id="versionInfo">-?-</span></div>

    <script src="dependencies/js/follow.js"></script>
</body>
</html>