Gitlab CSE Unil

annotation.html 15.5 KB
Newer Older
1
2
3
4
5
6
7
8
{% extends "adim/annotation.html" %}
{% load static i18n adim_app_tags %}


{# ============== #}
{# MAIN CONTAINER #}
{# ============== #}
{% block main_container %}
M. Chardon's avatar
M. Chardon committed
9
10
11
    {% with adim_env="adim-env-anodate" %}
        {{ block.super }}
    {% endwith %}
12
13
14
15
16
17
18
{% endblock %}


{# ============= #}
{# Drawing Tools #}
{# ============= #}
{% block draw-tool-tb %}
19
    <label class="btn btn-lg btn-primary" title="Selection (A)">
20
        <input type="radio" name="toolType" value="select" id="tool-select" data-tool-name="select">
M. Chardon's avatar
M. Chardon committed
21
        <span class="fas fa-mouse-pointer"></span><span class="tool-text"> Select</span>
22
    </label>
23
    <label class="btn btn-lg btn-primary" title="Déplacement (Espace)">
24
        <input type="radio" name="toolType" value="pan" id="tool-pan" data-tool-name="pan">
M. Chardon's avatar
M. Chardon committed
25
        <span class="fas fa-hand-paper"></span><span class="tool-text"> Pan</span>
26
27
    </label>

28
    <label class="btn btn-lg btn-primary" title="Dessin libre (D)">
29
        <input type="radio" name="toolType" value="drawing" id="tool-drawing" data-tool-name="drawing">
M. Chardon's avatar
M. Chardon committed
30
        <span class="fas fa-pencil-alt" data-fa-transform="flip-h"></span><span class="tool-text"> Dessin</span>
31
    </label>
32
    <label class="btn btn-lg btn-primary" title="Lignes (L)">
33
        <input type="radio" name="toolType" value="lines" id="tool-lines" data-tool-name="lines">
34
        <span class="fas fa-minus"></span><span class="tool-text"> Lignes</span>
35
    </label>
36
    <label class="btn btn-lg btn-primary" title="Cercle (C)">
37
        <input type="radio" name="toolType" value="ellipse" id="tool-ellipse" data-tool-name="ellipse">
38
        <span class="far fa-circle"></span><span class="tool-text"> Cercle</span>
39
    </label>
40
    <label class="btn btn-lg btn-primary" title="Rectangle (R)">
41
        <input type="radio" name="toolType" value="rectangle" id="tool-rectangle" data-tool-name="rectangle">
42
        <span class="far fa-square"></span><span class="tool-text"> Rectangle</span>
43
    </label>
44

45
    <label class="btn btn-lg-off btn-primary" title="Marker">
46
        <input type="radio" name="toolType" value="text" id="tool-marker" data-tool-name="marker">
M. Chardon's avatar
M. Chardon committed
47
        <span class="fas fa-map-marker-alt"></span>
48
49
50
51
52
    </label>
{% endblock %}


{% block param-tool-tb %}
53
    <div class="btn-group" id="tool-colorselect" role="group">
M. Chardon's avatar
M. Chardon committed
54
55
56
57
        <button id="btnGroupDrop1" type="button" class="btn btn-light tinter dropdown-toggle" data-toggle="dropdown"
                aria-haspopup="true" aria-expanded="false"
                data-attr-name="color" title="Choix de la couleur">
            <span class="adim-icon-color"></span>
58
        </button>
59
        <div class="dropdown-menu color-menu right" aria-labelledby="btnGroupDrop1">
M. Chardon's avatar
M. Chardon committed
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
            <div class="dropdown-item-text p-0">
                <div class="d-flex flex-row">
                    <div class="p-2 m-2 c1 cpicker"></div>
                    <div class="p-2 m-2 c2 cpicker"></div>
                </div>
                <div class="d-flex flex-row">
                    <div class="p-2 m-2 c3 cpicker"></div>
                    <div class="p-2 m-2 c4 cpicker"></div>
                </div>
                <div class="d-flex flex-row">
                    <div class="p-2 m-2 c5 cpicker"></div>
                    <div class="p-2 m-2 c6 cpicker"></div>
                </div>
                <div class="d-flex flex-row mt-2">
                    <input type="color" name="colorpicker" value="#8017d4"
                           class="p-0 cx" style="border-radius: 25px;">
                </div>
            </div>
78
        </div>
79
80
    </div>

81
    <button class="btn btn-light" id="attr-font" type="button">
M. Chardon's avatar
M. Chardon committed
82
        <span class="fas fa-text-height"></span>
83
84
    </button>

85
    <div class="sldr btn btn-light" id="attr-size-slider">
86
        <span class="adim-icon-line-width" title="Epaisseur du trait"></span>
M. Chardon's avatar
M. Chardon committed
87
88
89
90
91
        <input type="range" min="1" max="50" step="1" value="5"
               data-attr-name="size"
               style="transform: rotate(270deg);width: 50px;margin-top: 15px;"/><br/>
        <output name="sliderOutput" id="sliderOutputId" class="badge badge-secondary" style="margin-top:15px;">5
        </output>
92
93
    </div>

94
    <div class="sldr btn btn-light" id="attr-opacity-slider">
M. Chardon's avatar
M. Chardon committed
95
        {#                        <div class="small tool-title" title="Opacité">Opacité</div>#}
96
        <span class="adim-icon-opacity" title="Opacité"></span>
M. Chardon's avatar
M. Chardon committed
97
98
99
100
101
        <input type="range" min="0" max="100" step="10" value="100"
               data-attr-name="opacity"
               style="transform: rotate(270deg);width: 50px;margin-top: 15px;"/><br/>
        <output name="opacityOutput" id="opacityOutputId" class="badge badge-secondary" style="margin-top:15px;">100%
        </output>
102
103
    </div>

104
    <button class="btn btn-light" id="attr-orderup" type="button" autocomplete="off"
105
            title="Mettre au premier plan. shift-click: avancer de un niveau">
106
        <i class="material-icons">flip_to_front</i>
107
108
    </button>

109
    <button class="btn btn-light" id="attr-orderdown" type="button" autocomplete="off"
110
            title="Mettre à l'arrière-plan. shift-click: reculer d'un niveau">
111
        <i class="material-icons">flip_to_back</i>
112
113
114
115
116
117
118
119
120
    </button>
{% endblock param-tool-tb %}


{# ================= #}
{# Side Panel Column #}
{# ================= #}
{% block side-col-panel-group %}

M. Chardon's avatar
M. Chardon committed
121
122
123
{% block publication-panel %}
    {% with collapsed=1 %}{{ block.super }}{% endwith %}
{% endblock publication-panel %}
124

M. Chardon's avatar
M. Chardon committed
125
126
127
128
129
<a class="btn btn-secondary btn-sm btn-block d-inline-flex" data-toggle="collapse" href="#collapseDisplay" role="button"
   aria-expanded="false" aria-controls="collapseDisplay">
    <div>Afficher</div>
    <i class="fas fa-chevron-circle-up ml-auto"></i>
</a>
130

M. Chardon's avatar
M. Chardon committed
131
132
133
<div class="collapse show panel-dark" id="collapseDisplay">
    <div class="card card-body">
        <div class="card-text" id="annotation-display-container">
134
            <!--div class="btn-group x-btn-group-2-col adim-display-type-selector category-list"-->
M. Chardon's avatar
M. Chardon committed
135
            <div class="adim-display-type-selector">
136
                {% set compteur = 0 %}
137
                {% with cat_set_name=anobj.envparam.category_set_name|default:"default" %}
M. Chardon's avatar
M. Chardon committed
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
                {% for cat in env_settings.categories|get_item:cat_set_name %}
                {% ifequal compteur 0 %}
                    <div class="row">
                {% endifequal %}
                <div class="col-6" style="padding:0;">
                    <button type="button" class="btn btn-sm btn-block btn-info btn-adim-layer active"
                            data-env="{{ adim_env }}"
                            data-category="{{ cat.id }}"
                            title="Afficher/masquer la catégorie «{{ cat.label }}»">
                        <span class="fas fa-tag" style="color:{{ cat.color }};"></span><span
                            class="btn-adim-layer-label"> {{ cat.label }}</span>
                    </button>
                </div>
                {% ifequal compteur 1 %}
                </div>
                {% set compteur = 0 %}
                {% else %}
                {% set compteur = 1 %}
                {% endifequal %}
                {% endfor %}
158
                {% endwith %}
Julien Furrer's avatar
Julien Furrer committed
159

M. Chardon's avatar
M. Chardon committed
160
                {#                Bouton "Sans catégorie et bouton "image" sur une/deux colonnes #}
161
                {% ifequal compteur 1 %}
M. Chardon's avatar
M. Chardon committed
162
163
164
165
166
                    <div class="col-6" style="padding:0;">
                        <button type="button" class="btn btn-sm btn-block btn-info btn-adim-layer active"
                                data-category="image">
                            <span class="fas fa-image"></span> Image
                        </button>
167
                    </div>
M. Chardon's avatar
M. Chardon committed
168
169
                    </div>
                    {% else %}
170
171
172
173
                    <div class="row">
                        <div class="col-12" style="padding:0;">
                            <button type="button" class="btn btn-block btn-sm btn-info btn-adim-layer active"
                                    data-category="image">
M. Chardon's avatar
M. Chardon committed
174
                                <span class="fas fa-image"></span> Image
175
176
177
178
                            </button>
                        </div>
                    </div>
                {% endifequal %}
179
180
        </div>
    </div>
M. Chardon's avatar
M. Chardon committed
181
182
183
    <!--/div-->
</div>
</div>
184
185


M. Chardon's avatar
M. Chardon committed
186
{% block property-panel %}{{ block.super }}{% endblock %}
187

M. Chardon's avatar
M. Chardon committed
188
189
190
{% block members-panel %}
    {% with collapsed=1 hidenames=1 %}{{ block.super }}{% endwith %}
{% endblock %}
191

M. Chardon's avatar
M. Chardon committed
192
193
194
195
196
197
198
<div id="annotation-markers-panel">
    <a class="btn btn-secondary btn-sm btn-block d-inline-flex" data-toggle="collapse" href="#collapseMarkers"
       role="button"
       aria-expanded="false" aria-controls="collapseMarkers">
        <div>Labels</div>
        <i class="fas fa-chevron-circle-up ml-auto"></i>
    </a>
199

M. Chardon's avatar
M. Chardon committed
200
201
202
203
204
    <div class="collapse show panel-dark" id="collapseMarkers">
        <div class="card card-body">
            <div class="card-text" id="annotation-markers-container">
                <ul class="list-group">
                </ul>
205
206
            </div>
        </div>
M. Chardon's avatar
M. Chardon committed
207
    </div>
208

M. Chardon's avatar
M. Chardon committed
209
210
211
212
213
214
215
216
    <script type="text/template" id="adim-tool-marker-label">
        <li class="adim-tool-marker-label-item list-group-item list-group-item-secondary"
            data-label="<%= label %>" data-annot-id="<%= id %>">
            <div class="d-inline-flex justify-content-start">
                <div class="p-1 list-group-item-heading"><h4><%= label %></h4></div>
                <div class="ml-auto p-1 list-group-item-text">
                    <textarea class="form-control" style="resize: vertical" <%= ro ? 'readonly' : '' %>><%= labelComment
                    %></textarea>
217
                </div>
M. Chardon's avatar
M. Chardon committed
218
219
220
221
            </div>
        </li>
    </script>
</div>
222
223
224
225
226
227
228
229
230
231

{% endblock %}


{# ============== #}
{# Property Panel #}
{# ============== #}
{% block property-panel-content %}
{% comment %}
    <div class="property-group confidence-prop">
M. Chardon's avatar
M. Chardon committed
232
233
234
235
236
        <label class="col-form-label" for="confidence-input">
            <small>Confiance: &nbsp;</small>
        </label>
        <input id="confidence-input" name="confidence" type="number" class="form-control rating" data-display="on"
               data-min="1" data-max="3"/>
237
238
    </div>
{% endcomment %}
M. Chardon's avatar
M. Chardon committed
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
<div class="property-group category-prop">
    <label class="col-form-label">
        Catégorie&hairsp;:
    </label>
    <div class="btn-toolbar btn-group-toggle category-list" id="prop-annot-category" data-toggle="buttons">
        {% set compteur = 0 %}
        {% with cat_set_name=anobj.envparam.category_set_name|default:"default" %}
        {% for cat in env_settings.categories|get_item:cat_set_name %}
        {% ifequal compteur 0 %}
            <div class="row btn-group" style="width: 100%;margin-left: 0;">
        {% endifequal %}
        <!--div class="col-6 btn-group" style="padding:0;"-->
        <button type="button" class="btn btn-sm btn-cat"
                data-env="{{ adim_env }}"
                data-category="{{ cat.id }}" data-color="{{ cat.color }}" data-color-bg="{{ cat.colorbg }}"
                title="{{ cat.title|default:cat.label }}"
                style="width:50%;height:100%;">
            <input type="radio" name="category" autocomplete="off"/>
            {{ cat.label }}
        </button>
        <!--/div-->
        {% ifequal compteur 1 %}
        </div>
        {% set compteur = 0 %}
        {% else %}
        {% set compteur = 1 %}
        {% endifequal %}
        {% endfor %}
        {% comment %}
            <label class="btn btn-sm btn-block btn-cat" data-category="cat_1" title="Marqueur">
269
270
271
                <input type="radio" name="category" autocomplete="off"/>
                Marqueur
            </label>
M. Chardon's avatar
M. Chardon committed
272
            <label class="btn btn-sm btn-block btn-cat" data-category="cat_2" title="Une date absolue">
273
274
275
276
277
278
279
                <input type="radio" name="category" autocomplete="off"/>
                Date
            </label>
            <label class="btn btn-sm btn-block btn-cat" data-category="cat_3">
                <input type="radio" name="category" autocomplete="off"/>
                Année
            </label>
M. Chardon's avatar
M. Chardon committed
280
            <label class="btn btn-sm btn-block btn-cat" data-category="cat_4" data-color="#FFA826">
281
282
283
                <input type="radio" name="category" autocomplete="off"/>
                Mois
            </label>
M. Chardon's avatar
M. Chardon committed
284
            <label class="btn btn-sm btn-block btn-cat" data-category="cat_4" data-color="#FFA826">
285
286
287
                <input type="radio" name="category" autocomplete="off"/>
                Mois
            </label>
M. Chardon's avatar
M. Chardon committed
288
            <label class="btn btn-sm btn-block btn-cat" data-category="cat_4" data-color="#FFA826">
289
290
291
                <input type="radio" name="category" autocomplete="off"/>
                Mois
            </label>
M. Chardon's avatar
M. Chardon committed
292
            <label class="btn btn-sm btn-block btn-cat" data-category="cat_4" data-color="#FFA826">
293
294
295
                <input type="radio" name="category" autocomplete="off"/>
                Mois
            </label>
M. Chardon's avatar
M. Chardon committed
296
            <label class="btn btn-sm btn-block btn-cat" data-category="cat_4" data-color="#FFA826">
297
298
299
                <input type="radio" name="category" autocomplete="off"/>
                Mois
            </label>
M. Chardon's avatar
M. Chardon committed
300
301
        {% endcomment %}
        {% endwith %}
302
    </div>
M. Chardon's avatar
M. Chardon committed
303
</div>
304

305
306
{% comment %}
    <div class="property-group comment-prop">
M. Chardon's avatar
M. Chardon committed
307
308
309
        <label class="col-form-label" for="prop-annot-comment">
            <small>Commentaire&hairsp;:</small>
        </label>
310
311
312
313
314
315
316
317
318
319
        <textarea class="form-control" id="prop-annot-comment" name="comment"></textarea>
    </div>
{% endcomment %}
{% endblock property-panel-content %}


{# ============================ #}
{# Altertative Side Panel Group #}
{# ============================ #}
{% block alt-side-col-panel-group %}
M. Chardon's avatar
M. Chardon committed
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
    <div id="alt-side-col-panel-group" class="p-1 w-50 panel-group"
         style="margin-right:0;padding-right:0;display:none;">

        <div id="shared-annotation-markers-panel" style="display: none;">
            <a class="btn btn-secondary btn-sm btn-block d-inline-flex" data-toggle="collapse"
               href="#collapseSharedMarkers" role="button"
               aria-expanded="false" aria-controls="collapseSharedMarkers">
                <div>Labels</div>
                <i class="fas fa-chevron-circle-right ml-auto"></i>
            </a>

            <div class="collapse show panel-dark show" id="collapseSharedMarkers">
                <div class="card card-body">
                    <div class="card-text" id="shared-annotation-markers-container">
                        <ul class="list-group">
                        </ul>
                    </div>
                </div>
338
            </div>
M. Chardon's avatar
M. Chardon committed
339
340
341
342
343
344
345
346
347

            <script type="text/template" id="shared-adim-tool-marker-label">
                <li class="adim-tool-marker-label-item list-group-item" data-annot-id="<%= id %>">
                    <div class="d-flex justify-content-start">
                        <div class="p-1 list-group-item-heading"><h5><%= label %></h5></div>
                        <div class="p-1 list-group-item-text"><%= labelComment %></div>
                    </div>
                </li>
            </script>
348
349
350
351
352
353
354
355
356
357
        </div>

    </div>
{% endblock alt-side-col-panel-group %}





{% block content_js %}
M. Chardon's avatar
M. Chardon committed
358
359
    <script type="application/javascript" src="{% static "js/libs/require.min.js" %}"
            data-main="{% static "js/anodate_app" %}{{ JS_MIN }}"></script>
360
361
362
363
364
{% endblock %}



{% comment %}
M. Chardon's avatar
M. Chardon committed
365
366
367
368
369
370
371
372
    {# This js config allow to specify the annotation types to be displayed. #}
    {# If not defined, it will be built from the tools found in the tool bars #}
    {% block inline_script %}
        {{ block.super }}
        <script>
            window.ADIM_CONFIG.activeTools = ['select', 'pan', 'drawing', 'lines', 'rectangle', 'arrow'];
        </script>
    {% endblock inline_script %}
373
{% endcomment %}