Gitlab CSE Unil

annotation.html 10.7 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
            <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>
122
123
124
                    <div class="p-2 m-2 c1 cpicker"></div>
                </div>
                <div class="d-flex flex-row">
M. Chardon's avatar
M. Chardon committed
125
126
127
                    <div class="p-2 m-2 c7 cpicker"></div>
                </div>
            </div>
128
129
130
        </div>
    </div>

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

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

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

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


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

M. Chardon's avatar
M. Chardon committed
167
168
    <a class="btn btn-secondary btn-sm btn-block d-inline-flex" data-toggle="collapse" href="#collapseDisplay"
       role="button"
169
       aria-expanded="false" aria-controls="collapseDisplay">
M. Chardon's avatar
M. Chardon committed
170
171
        <div>Afficher</div>
        <i class="fas fa-chevron-circle-up ml-auto"></i>
172
173
174
175
176
    </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
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
                <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>
196
197
198
199
                </div>
            </div>
        </div>
    </div>
200
201
202
203

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

    {% block members-panel %}{{ block.super }}{% endblock %}
M. Chardon's avatar
M. Chardon committed
204
    {#    {{ block.super }}#}
205
206
207
208
209
210
211
212
{% endblock %}


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

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

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



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



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