Web-based-experimental-video-analysis/main.html at main · chasonghui/Web-based-experimental-video-analysis · 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
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Virtual Lab (SVG ver.)</title>
    <link rel="shortcut icon" href="#">
    <link rel="stylesheet" href="svg.css">
    <link rel="stylesheet" href="assets/theme/css/style.css">
    <link rel="stylesheet" href="assets/tether/tether.min.css">
    <link rel="stylesheet" href="assets/web/assets/mobirise-icons2/mobirise2.css">
    <link href="https://cdn.jsdelivr.net/npm/handsontable@9.0.1/dist/handsontable.full.min.css" rel="stylesheet"
        media="screen">
    <link rel="preload"
        href="https://fonts.googleapis.com/css?family=Jost:100,200,300,400,500,600,700,800,900,100i,200i,300i,400i,500i,600i,700i,800i,900i&display=swap"
        as="style" onload="this.onload=null;this.rel='stylesheet'">
    <noscript>
        <link rel="stylesheet"
            href="https://fonts.googleapis.com/css?family=Jost:100,200,300,400,500,600,700,800,900,100i,200i,300i,400i,500i,600i,700i,800i,900i&display=swap">
    </noscript>
    <link rel="preload" as="style" href="assets/mobirise/css/mbr-additional.css">
    <link rel="stylesheet" href="assets/mobirise/css/mbr-additional.css" type="text/css">
</head>

<body>
    <svg id="svg1" class="invisible" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 700 30"
        onload="makeDraggable(evt)">
        <path id="xyline1" class="draggable" d="M 50 50 L80 50 M51 50 L50 21" stroke-width="2" stroke="yellow"
            fill="transparent">
        </path>
        <path id="xyline2" class="draggable" d="M 20 50 L50 49 M50 50 L50 20" stroke-width="2" stroke="yellow"
            fill="transparent">
        </path>
        <path id="guideline" d="M50 170 L150 170" stroke-width="3" stroke="red" fill="transparent">
        </path>
        <text id="guidetext" x="90" y="185" fill="red" font-size="15">x</text>
    </svg>
    <video class="video" autoplay id="vd1" src="son.mp4"></video>
    <!-- Video Controls -->
    <div id="vcontrols" class="video-controls">
        <input type="range" id="seek-bar" value="0">
        <br>
        <button type="button" class="btn btn-white display-4" id="goback" onclick="gobackFrame();">
            << </button>
                <button type="button" class="btn btn-white display-4" id="pause" onclick="playPause();">||</button>
                <button type="button" class="btn btn-white display-4" id="gofoward" onclick="gofowardFrame();"> >>
                </button>
                &nbsp;&nbsp;
                <button type="button" class="btn btn-white display-4" id="replay" onclick="replay();">⟳</button>
                <button type="button" class="btn btn-white display-4" id="reverse"
                    onclick="toggleHide('#xyline1')">반전</button>

                <br>
                <button type="button" class="btn btn-white display-4" id="analysis" onclick="analysisMode();">분석
                    모드</button>
                <button type="button" class="btn btn-white display-4" id="setxy" onclick="drawDot();">좌표 고정</button>
                <button type="button" class="btn btn-white display-4" id="dotRedraw" onclick="retry();">다시찍기</button>
        </button>
        <br>
        <form id="inputform">
            <input id="input1" type="number" min="0" placeholder="X의 길이 입력 (단위:cm)" /><br>*입력하지않으면 픽셀 단위*
        </form>
        <div id="readout"></div>
        <div id="handson">
            <!--여기에 표 동적 생성-->
        </div>
        <div>
            <form id="userdata-create">
                <input type="text" id="solverId" name="solverId" placeholder="SolverId" autocomplete="off" />
                <button type="submit">저장하기</button>
            </form>
            <form id="userdata-search">
                <input type="text" id="search" name="search" placeholder="Userdatas ID ..." autocomplete="off" />
                <button type="submit">표 불러오기</button>
            </form>
            <!-- <div>
                <select id="userdata-container"></select>
            </div> -->
        </div>
        <!-- 민정 -->
        <select id="selectBox" name="degree" onchange="change_Type(this)" class="btn btn-white display-4">
            <option value="0" selected>피팅함수선택</option>
            <option value="1">선형</option>
            <option value="2">곡선형</option>

        </select>
        <select id="selectBox" name="degree" onchange="change_Roof_Type(this)" class="btn btn-white display-4">
            <option value="-1" selected>반복</option>
            <option value="0">x1</option>
            <option value="1">x2</option>
            <option value="3">x8</option>
            <option value="5">x32</option>

        </select>

        <a class="btn btn-white display-4" onclick="action_button();">
            <div class="mobi-mbri mobi-mbri-edit-2 mbr-iconfont mbr-iconfont-btn"></div>
        </a>
        <a class="btn btn-white display-4" onclick="fitting();">
            <div class="mobi-mbri mobi-mbri-extension mbr-iconfont mbr-iconfont-btn"></div>
        </a>
        <a class="btn btn-white display-4" onclick="reset();">
            <div class="mobi-mbri mobi-mbri-trash mbr-iconfont mbr-iconfont-btn"></div>
        </a>

        <div id="myGraph" style="  cursor: crosshair;"></div>

        <a class="btn btn-white display-6">
            <div id="result">
                <span id="fitting_result">fitting 함수</span>
            </div>
        </a>
    </div>

    <script src="svg.js"></script>
    <script src="createUserdata.js"></script>
    <script src="getUserdataById.js"></script>
    <script src="graph.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/handsontable@9.0.1/dist/handsontable.full.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.15.5/xlsx.full.min.js"></script>
    <script language="JavaScript" src="https://cdnjs.cloudflare.com/ajax/libs/mathjs/3.2.1/math.js"></script>
</body>
<script>
</script>

</html>