Gitlab CSE Unil

annotation.html 15.3 KB
Newer Older
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
{% extends "adim/annotation.html" %}
{% load static i18n adim_app_tags %}


{# ============== #}
{# MAIN CONTAINER #}
{# ============== #}
{% block main_container %}
{% with adim_env="adim-env-anodate" %}
    {{ block.super }}
{% endwith %}
{% 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">
21
        <span class="fa 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">
25
        <span class="fa 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">
30
        <span class="fa 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
34
35
        <input type="radio" name="toolType" value="lines" id="tool-lines" data-tool-name="lines">
        <span class="icon-line"></span><span class="tool-text"> Lignes</span>
    </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">
47
        <span class="fa fa-map-marker-alt"></span>
48
49
50
51
52
    </label>
{% endblock %}


{% block param-tool-tb %}
53
54
55
56
    <div class="btn-group" id="tool-colorselect" role="group">
        <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>
57
        </button>
58
59
60
61
62
63
64
65
66
67
68
        <div class="dropdown-menu color-menu right" aria-labelledby="btnGroupDrop1">
          <a class="dropdown-item c1" href="#"></a>
          <a class="dropdown-item c2" href="#"></a>
          <a class="dropdown-item c3" href="#"></a>
          <a class="dropdown-item c4" href="#"></a>
          <a class="dropdown-item c5" href="#"></a>
          <a class="dropdown-item c6" href="#"></a>
          <a class="dropdown-item cx picker" href="#" data-color="rgb(128, 23, 212)"
             data-color-format="rgb" style="background-color: rgb(128, 23, 212)" style="left:50px;">
          </a>
        </div>
69
70
    </div>

71
    <button type="button" class="btn btn-light" id="tool-fill-color" title="Contours ou remplissage"
72
73
74
75
76
77
            data-toggle="button" data-attr-name="fill" >
        <span class="tool-fill-on icon-pattern hide"></span>
        <span class="tool-fill-off icon-roundrectangle"></span>
        <span class="tool-text">Plein</span>
    </button>

78
    <button class="btn btn-light" id="attr-font" type="button">
79
80
81
        <span class="icon-fontcase"></span>
    </button>

82
    <div class="sldr btn btn-light" id="attr-size-slider">
83
84
85
86
87
        <span class="adim-icon-line-width" title="Epaisseur du trait"></span>
        <input type="text" class="slider" value="7" autocomplete="off"
               data-attr-name="size">
    </div>

88
    <div class="sldr btn btn-light" id="attr-opacity-slider">
89
90
91
92
93
94
{#                        <div class="small tool-title" title="Opacité">Opacité</div>#}
        <span class="adim-icon-opacity" title="Opacité"></span>
        <input type="text" class="slider" value="100" autocomplete="off"
               data-attr-name="opacity">
    </div>

95
    <button class="btn btn-light" id="attr-orderup" type="button" autocomplete="off"
96
97
98
99
            title="Mettre au premier plan. shift-click: avancer de un niveau">
        <span class="icon-layerorderup"></span>
    </button>

100
    <button class="btn btn-light" id="attr-orderdown" type="button" autocomplete="off"
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
            title="Mettre à l'arrière-plan. shift-click: reculer d'un niveau">
        <span class="icon-layerorderdown"></span>
    </button>
{% endblock param-tool-tb %}


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

    {% block publication-panel %}
        {% with collapsed=1 %}{{ block.super }}{% endwith %}
    {% endblock publication-panel %}

116
    <a class="btn btn-secondary btn-sm btn-block d-inline-flex" data-toggle="collapse" href="#collapseDisplay" role="button"
117
       aria-expanded="false" aria-controls="collapseDisplay">
118
       <div>Afficher</div> <i class="icon-circleup ml-auto"></i>
119
120
121
122
123
124
125
126
    </a>

    <div class="collapse show panel-dark" id="collapseDisplay">
        <div class="card card-body">
          <div class="card-text" id="annotation-display-container">
            <!--div class="btn-group x-btn-group-2-col adim-display-type-selector category-list"-->
                <div class="adim-display-type-selector">
                {% set compteur = 0 %}
127
128
                {% with cat_set_name=anobj.envparam.category_set_name|default:"default" %}
                    {% for cat in env_settings.categories|get_item:cat_set_name %}
129
130
131
132
133
134
135
136
                        {% 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 }}»">
137
                                <span class="fa fa-tag" style="color:{{ cat.color }};"></span><span class="btn-adim-layer-label"> {{ cat.label }}</span>
138
139
140
141
142
143
144
145
                            </button>
                        </div>
                        {% ifequal compteur 1 %}
                            </div>
                            {% set compteur = 0 %}
                        {% else %}
                            {% set compteur = 1 %}
                        {% endifequal %}
146
147
                    {% endfor %}
                {% endwith %}
Julien Furrer's avatar
Julien Furrer committed
148

149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
{#                Bouton "Sans catégorie et bouton "image" sur une/deux colonnes #}
                {% ifequal compteur 1 %}
                        <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="fa fa-image"></span> Image
                            </button>
                        </div>
                    </div>
                {% else %}
                    <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">
                                <span class="fa fa-image"></span> Image
                            </button>
                        </div>
                    </div>
                {% endifequal %}
              </div>
169
            </div>
170
        <!--/div-->
171
172
173
174
175
176
177
178
179
180
        </div>
    </div>


    {% block property-panel %}{{ block.super }}{% endblock %}

    {% block members-panel %}
        {% with collapsed=1 hidenames=1 %}{{ block.super }}{% endwith %}
    {% endblock %}

181
    <div id="annotation-markers-panel">
182
        <a class="btn btn-secondary btn-sm btn-block d-inline-flex" data-toggle="collapse" href="#collapseMarkers" role="button"
183
           aria-expanded="false" aria-controls="collapseMarkers">
184
            <div>Labels</div> <i class="icon-circleup ml-auto"></i>
185
186
        </a>

187
188
189
190
191
192
        <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>
              </div>
193
194
195
196
            </div>
        </div>

        <script type="text/template" id="adim-tool-marker-label">
197
            <li class="adim-tool-marker-label-item list-group-item list-group-item-secondary"
198
                 data-label="<%= label %>" data-annot-id="<%= id %>">
199
200
201
202
203
                <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>
                    </div>
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
                </div>
            </li>
        </script>
    </div>

{% endblock %}



{# ============== #}
{# Property Panel #}
{# ============== #}
{% block property-panel-content %}
{% comment %}
    <div class="property-group confidence-prop">
M. Chardon's avatar
M. Chardon committed
219
        <label class="col-form-label" for="confidence-input"><small>Confiance: &nbsp;</small></label>
220
221
222
223
        <input id="confidence-input" name="confidence" type="number" class="form-control rating" data-display="on" data-min="1" data-max="3"/>
    </div>
{% endcomment %}
    <div class="property-group category-prop">
M. Chardon's avatar
M. Chardon committed
224
        <label class="col-form-label">
225
            Catégorie&hairsp;:
226
        </label>
227
228
229
230
231
232
233
234
        <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;"-->
235
                        <button type="button" class="btn btn-sm btn-cat"
236
237
238
239
240
241
                               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 }}
242
                        </button>
243
244
245
246
247
248
249
250
                        <!--/div-->
                    {% ifequal compteur 1 %}
                        </div>
                        {% set compteur = 0 %}
                    {% else %}
                        {% set compteur = 1 %}
                    {% endifequal %}
                {% endfor %}
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
{% comment %}
            <label class="btn btn-sm btn-block btn-cat"  data-category="cat_1" title="Marqueur">
                <input type="radio" name="category" autocomplete="off"/>
                Marqueur
            </label>
            <label class="btn btn-sm btn-block btn-cat"  data-category="cat_2" title="Une date absolue">
                <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>
            <label class="btn btn-sm btn-block btn-cat"  data-category="cat_4" data-color="#FFA826">
                <input type="radio" name="category" autocomplete="off"/>
                Mois
            </label>
            <label class="btn btn-sm btn-block btn-cat"  data-category="cat_4" data-color="#FFA826">
                <input type="radio" name="category" autocomplete="off"/>
                Mois
            </label>
            <label class="btn btn-sm btn-block btn-cat"  data-category="cat_4" data-color="#FFA826">
                <input type="radio" name="category" autocomplete="off"/>
                Mois
            </label>
            <label class="btn btn-sm btn-block btn-cat"  data-category="cat_4" data-color="#FFA826">
                <input type="radio" name="category" autocomplete="off"/>
                Mois
            </label>
            <label class="btn btn-sm btn-block btn-cat"  data-category="cat_4" data-color="#FFA826">
                <input type="radio" name="category" autocomplete="off"/>
                Mois
            </label>
{% endcomment %}
285
            {% endwith %}
286
287
        </div>
    </div>
288

289
290
{% comment %}
    <div class="property-group comment-prop">
M. Chardon's avatar
M. Chardon committed
291
        <label class="col-form-label" for="prop-annot-comment"><small>Commentaire&hairsp;:</small></label>
292
293
294
295
296
297
298
299
300
301
302
        <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 %}
303
304
305
<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;">
306
        <a class="btn btn-secondary btn-sm btn-block d-inline-flex" data-toggle="collapse" href="#collapseSharedMarkers" role="button"
307
           aria-expanded="false" aria-controls="collapseSharedMarkers">
308
            <div>Labels</div> <i class="icon-circleright ml-auto"></i>
309
310
311
312
313
314
315
316
        </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>
317
318
319
320
321
            </div>
        </div>

        <script type="text/template" id="shared-adim-tool-marker-label">
            <li class="adim-tool-marker-label-item list-group-item" data-annot-id="<%= id %>">
322
323
324
                <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>
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
                </div>
            </li>
        </script>
    </div>

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





{% block content_js %}
    <script type="application/javascript" src="{% static "js/libs/require.min.js" %}" data-main="{% static "js/anodate_app" %}{{ JS_MIN }}"></script>
{% endblock %}



{% comment %}
{# 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 %}
{% endcomment %}