Data-Collection-Interface/interface.html at master · youngji-koh/Data-Collection-Interface · 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
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">

        <title>Image Data Collection</title>

        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

        <style>
            #container{
                width:600px;
                height:475px;
                overflow:hidden;
            }
            #slide{
                width:100%;
                height:100%;
                transition: transform .3s;
            }


            canvas{

                width:auto;
                height:auto;
                max-width:100%;

            }

            .left_common{
                display:inline-table;
                float: left;
                width: 500px;
                height: 500px;
            }


            .main_common{
                display:inline-table;
                float: left;
                width: 600px;
                height: 600px;
            }

        </style>

    </head>


    <body>

        <div class="left_common">
            <center>
                <p style="font-family:fantasy; font-size:xx-large">
                    How to use!
                </p>
            </center>
            <p style="font-family:Times New Roman;">
                Step 1. Choose the category<br><br>
                Step 2. Mark points on a picture according to the outline of the object<br><br>
                Step 3. Fill in the blank with thd object's description<br><br>
                Step 4. Click the "Finish" button when you finished marking one polygon<br><br>
                Step 5. If you mark an wrong point, you can "Undo" or "Reset" the points<br><br>
                Step 6. If you want to start other objects, click "Resume" button<br><br>
                Step 7. If you finish marking all polygons, click "Submit" button<br><br>
            </p>

        </div>


        <div class="main_common">
            <center>


                <p style="font-family:fantasy; font-size:xx-large ">The Starry Night</p>

                    <div id="container">
                        <div id="slide">

                            <canvas id="mycanvas" width="600" height="475" style="background:url('./Images/The_starry_night.jpg')"></canvas>

                        </div>
                    </div>

                <!--p>
                    coordinate value :
                    <label id="output1"></label>
                </p-->

                <br>
                <form name="category" id="form1">
                    <label> Choose category : </label>

                    <select name="menu" id="menu">
                        <option value="star">star</option>
                        <option value="moon">moon</option>
                        <option value="wind">wind</option>
                        <option value="tree">tree</option>
                        <option value="town">town</option>
                        <option value="other">other</option>
                    </select>

                    <label> Other objects : </label>
                    <input type="text" id="other" style="width:100px">

                    <br>
                    <label> Describe the object : </label>
                    <input type="text" id="description">

                    <br>
                    <label> Describe the color : </label>
                    <input type="text" id="color">

                    <br>
                    <label> Describe the position : </label>
                    <input type="text" id="position">
                </form>

                <br>
                <p>
                    <button class="btn btn-primary" id="finish">Finish</button>
                    <button class="btn btn-primary" id="undo">Undo</button>
                    <button class="btn btn-primary" id="reset">Reset</button>
                    <button class="btn btn-primary" id="resume">Resume</button>
                </p>

                <p></p>
                <p> If you finish marking all polygons, </p>


                <p><button class="btn btn-success" id="submit">Submit!</button></p>

                <!--div id="output"></div-->

                <!--pre id="json_output"></pre-->
                <a href="#" id="link" download="image_data.json">download</a>
            </center>
        </div>

        <script src="canvas_adjustment.js"></script>
        <script src="data_colletct.js"></script>

    </body>
</html>