Gitlab CSE Unil

annotation.html 10.6 KB
Newer Older
1
2
3
{% extends "adim/annotation.html" %}
{% load static i18n %}

4
5
6
7
8

{# ================ #}
{# MAIN TOP TAB-BAR #}
{# ================ #}
{% block tool-top-row %}
M. Chardon's avatar
M. Chardon committed
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
    <div class="col-xs-12">
        {% if is_owner or display_shared_annotations %}
            <ul class="nav nav-tabs adim-view-mod-tabs" role="tablist">
                <li class="nav-item active">
                    <a class="nav-link" href="#!annoter" role="tab" data-adim-mode="edit" data-toggle="tooltip"
                       title="Ajouter et modifier vos annotations">
                        <span class="fas fa-edit"></span> Annoter
                    </a>
                </li>
                {% if display_shared_annotations %}
                    <li class="nav-item">
                        <a class="nav-link" href="#!afficher" role="tab" data-adim-mode="review" data-toggle="tooltip"
                           title="Afficher les annotations partagées des autres membres">
                            <span class="fas fa-eye"></span> Annotations partagées
                        </a>
                    </li>
                {% endif %}
                {% if is_owner %}
                    <li class="nav-item">
                        <a class="nav-link" href="{% url "adim.env.cimaf:cimaf_analysis" anobj_uuid=anobj.uuid %}"
                           role="tab"
                           data-toggle="tooltip" title="Afficher le module d'analyse des données">
                            <span class="fas fa-chart-bar"></span> Analyse
                        </a>
                    </li>
                {% endif %}
            </ul>
36
        {% endif %}
M. Chardon's avatar
M. Chardon committed
37
    </div>
38
39
40
41
42
43
{% endblock tool-top-row %}


{# ============== #}
{# MAIN CONTAINER #}
{# ============== #}
44
{% block main_container %}
M. Chardon's avatar
M. Chardon committed
45
46
47
    {% with adim_env="adim-env-cimaf" %}
        {{ block.super }}
    {% endwith %}
48
49
{% endblock %}

50

51
52
53
54
{# ============= #}
{# Drawing Tools #}
{# ============= #}
{% block draw-tool-tb %}
55
    <label class="btn btn-lg btn-primary" title="Selection (A)">
56
        <input type="radio" name="toolType" value="select" id="tool-select" data-tool-name="select">
M. Chardon's avatar
M. Chardon committed
57
        <span class="fas fa-mouse-pointer"></span><span class="tool-text"> Select</span>
58
    </label>
59
    <label class="btn btn-lg btn-primary" title="Déplacement (Espace)">
60
        <input type="radio" name="toolType" value="pan" id="tool-pan" data-tool-name="pan">
M. Chardon's avatar
M. Chardon committed
61
        <span class="fas fa-hand-paper"></span><span class="tool-text"> Pan</span>
62
63
    </label>

64
    <label class="btn btn-lg btn-primary" title="Bords de champ (B)">
65
66
67
        <input type="radio" name="toolType" value="fieldedges" id="tool-fieldedges" data-tool-name="fieldedges">
        <span class="adim-icon-bord-de-champ"></span>
    </label>
68
    <label class="btn btn-lg btn-primary" title="Strie concordante (C)">
M. Chardon's avatar
M. Chardon committed
69
70
        <input type="radio" name="toolType" value="concordantstr" id="tool-concordantstr"
               data-tool-name="concordantstr">
71
72
        <span class="adim-icon-concordant"></span>
    </label>
73
    <label class="btn btn-lg btn-primary" title="Strie discordante (D)">
M. Chardon's avatar
M. Chardon committed
74
75
        <input type="radio" name="toolType" value="discordantstr" id="tool-discordantstr"
               data-tool-name="discordantstr">
76
77
        <span class="adim-icon-discordant"></span>
    </label>
78
    <label class="btn btn-lg btn-primary" title="Zone de concordance (Z)">
79
80
81
        <input type="radio" name="toolType" value="cmsarea" id="tool-cmsarea" data-tool-name="cmsarea">
        <span class="adim-icon-zone-concordance"></span>
    </label>
M. Chardon's avatar
M. Chardon committed
82
83
84
85
86
87
88
89
90
91
92
    <label class="btn btn-lg btn-primary" title="Dessin libre (D)">
        <input type="radio" name="toolType" value="drawing" id="tool-drawing"
               data-tool-name="drawing" autocomplete="off">
        <span class="fas fa-pencil-alt" data-fa-transform="flip-h"></span><span
            class="tool-text"> Dessin</span>
    </label>
    <label class="btn btn-lg btn-primary" title="Cercle (C)">
        <input type="radio" name="toolType" value="ellipse" id="tool-ellipse"
               data-tool-name="ellipse" autocomplete="off">
        <span class="far fa-circle"></span><span class="tool-text"> Cercle</span>
    </label>
93
    <label class="btn btn-lg btn-primary" title="Rectangle (R)">
94
        <input type="radio" name="toolType" value="rectangle" id="tool-rectangle" data-tool-name="rectangle">
95
        <span class="far fa-square"></span><span class="tool-text"> Rectangle</span>
96
    </label>
97
    <label class="btn btn-lg btn-primary" title="Flèche (F)">
98
        <input type="radio" name="toolType" value="arrow" id="tool-arrow" data-tool-name="arrow">
M. Chardon's avatar
M. Chardon committed
99
        <span class="fas fa-arrow-right"></span><span class="tool-text"> Flèche</span>
100
101
102
    </label>
{% endblock %}

103

104
105
106
107
{# =============== #}
{# Tool parameters #}
{# =============== #}
{% block param-tool-tb %}
108
    <div class="btn-group" id="tool-colorselect" role="group">
M. Chardon's avatar
M. Chardon committed
109
110
111
112
        <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>
113
114
        </button>
        <div class="dropdown-menu color-menu right" aria-labelledby="btnGroupDrop1">
M. Chardon's avatar
M. Chardon committed
115
116
117
118
119
120
121
122
123
124
            <div class="dropdown-item-text p-0">
                <div class="d-flex flex-row">
                    <div class="p-2 m-2 c4 cpicker"></div>
                    <div class="p-2 m-2 c6 cpicker"></div>
                </div>
                <div class="d-flex flex-row">
                    <div class="p-2 m-2 c3 cpicker"></div>
                    <div class="p-2 m-2 c7 cpicker"></div>
                </div>
            </div>
125
126
127
        </div>
    </div>

128
    <div class="sldr btn btn-light" id="attr-size-slider">
129
        <span class="adim-icon-line-width" title="Epaisseur du trait"></span>
M. Chardon's avatar
M. Chardon committed
130
        <input type="range" min="1" max="50" step="1" value="3"
M. Chardon's avatar
M. Chardon committed
131
132
               data-attr-name="size"
               style="transform: rotate(270deg);width: 50px;margin-top: 15px;"/><br/>
M. Chardon's avatar
M. Chardon committed
133
        <output name="sliderOutput" id="sliderOutputId" class="badge badge-secondary" style="margin-top:15px;">3
M. Chardon's avatar
M. Chardon committed
134
        </output>
135
136
    </div>

137
    <div class="sldr btn btn-light" id="attr-opacity-slider">
138
        <span class="adim-icon-opacity" title="Opacité"></span>
M. Chardon's avatar
M. Chardon committed
139
140
141
142
143
        <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>
144
145
    </div>

146
    <button class="btn btn-light" id="attr-orderup" type="button" autocomplete="off"
147
            title="Mettre au premier plan. shift-click: avancer de un niveau">
148
        <i class="material-icons">flip_to_front</i>
149
150
    </button>

151
    <button class="btn btn-light" id="attr-orderdown" type="button" autocomplete="off"
152
            title="Mettre à l'arrière-plan. shift-click: reculer d'un niveau">
153
        <i class="material-icons">flip_to_back</i>
154
155
156
157
158
159
160
161
    </button>
{% endblock param-tool-tb %}


{# ================= #}
{# Side Panel Column #}
{# ================= #}
{% block side-col-panel-group %}
162
163
    {% block publication-panel %}{{ block.super }}{% endblock %}

M. Chardon's avatar
M. Chardon committed
164
165
    <a class="btn btn-secondary btn-sm btn-block d-inline-flex" data-toggle="collapse" href="#collapseDisplay"
       role="button"
166
       aria-expanded="false" aria-controls="collapseDisplay">
M. Chardon's avatar
M. Chardon committed
167
168
        <div>Afficher</div>
        <i class="fas fa-chevron-circle-up ml-auto"></i>
169
170
171
172
173
    </a>

    <div id="annotation-display-panel">
        <div class="collapse show panel-dark" id="collapseDisplay">
            <div class="card card-body">
M. Chardon's avatar
M. Chardon committed
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
                <div class="card-text text-center" id="annotation-display-container">
                    <div class="btn-group-vertical adim-display-type-selector">
                        <button type="button" class="btn btn-sm btn-adim-layer active"
                                data-type-name="concordantstr,discordantstr">
                            <span class="adim-icon-concordant"></span>&emsp;Stries
                        </button>
                        <button type="button" class="btn btn-sm btn-adim-layer active"
                                data-type-name="cmsarea">
                            <span class="adim-icon-zone-concordance"></span>&emsp;Zones
                        </button>
                        <button type="button" class="btn btn-sm btn-adim-layer active"
                                data-type-name="fieldedges">
                            <span class="adim-icon-bord-de-champ"></span>&emsp;Bords de champ
                        </button>
                        <button type="button" class="btn btn-sm btn-adim-layer active"
                                data-type-name="image">
                            <i class="fas fa-image"></i>&emsp;Image
                        </button>
                    </div>
193
194
195
196
                </div>
            </div>
        </div>
    </div>
197
198
199
200

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

    {% block members-panel %}{{ block.super }}{% endblock %}
M. Chardon's avatar
M. Chardon committed
201
    {#    {{ block.super }}#}
202
203
204
205
206
207
208
209
{% endblock %}


{# ============== #}
{# Property Panel #}
{# ============== #}
{% block property-panel-content %}
    <div class="property-group confidence-prop">
210
        <label class="control-label" for="confidence-input">Confiance :</label>
M. Chardon's avatar
M. Chardon committed
211
212
        <input id="confidence-input" name="confidence" type="number" class="form-control rating" data-display="on"
               data-min="1" data-max="3"/>
213
214
215
    </div>

    <div class="property-group comment-prop">
216
        <label class="control-label" for="prop-annot-comment">Commentaire&hairsp;:</label>
217
218
219
220
        <textarea class="form-control" id="prop-annot-comment" name="comment"></textarea>
    </div>

    <div class="property-group nbconcordance-prop">
221
        <label class="control-label">Concordances:</label>
222
        <span class="badge badge-default" id="prop-annot-nbconcordance" name="nbconcordance"></span>
223
224
225
226
227
    </div>
{% endblock property-panel-content %}



228
{% block content_js %}
M. Chardon's avatar
M. Chardon committed
229
230
    <script type="application/javascript" src="{% static "js/libs/require.min.js" %}"
            data-main="{% static "js/cimaf_app" %}{{ JS_MIN }}"></script>
231
232
233
234
{% endblock %}



235
{% comment %}
M. Chardon's avatar
M. Chardon committed
236
237
238
239
240
241
242
243
    {# 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 %}
244
{% endcomment %}