Gitlab CSE Unil

annotation.html 8.99 KB
Newer Older
M. Chardon's avatar
M. Chardon committed
1
2
{% extends "adim/annotation.html" %}
{% load static i18n adim_app_tags %}
M. Chardon's avatar
M. Chardon committed
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
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201


{# ============== #}
{# MAIN CONTAINER #}
{# ============== #}
{% block main_container %}
{% with adim_env="adim-env-geomo" %}
    {{ block.super }}
{% endwith %}
{% endblock %}


{# ============= #}
{# Drawing Tools #}
{# ============= #}
{% block draw-tool-tb %}
    <label class="btn btn-lg-off btn-primary">
        <input type="radio" name="toolType" value="select" id="tool-select" data-tool-name="select">
        <span class="icon-cursor"></span><span class="tool-text"> Select</span>
    </label>
    <label class="btn btn-lg-off btn-primary">
        <input type="radio" name="toolType" value="pan" id="tool-pan" data-tool-name="pan">
        <span class="icon-handdrag"></span><span class="tool-text"> Pan</span>
    </label>

    <label class="btn btn-lg-off btn-primary">
        <input type="radio" name="toolType" value="drawing" id="tool-drawing" data-tool-name="drawing">
        <span class="icon-pencil"></span><span class="tool-text"> Dessin</span>
    </label>
    <label class="btn btn-lg-off btn-primary">
        <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>
    <label class="btn btn-lg-off btn-primary">
        <input type="radio" name="toolType" value="ellipse" id="tool-ellipse" data-tool-name="ellipse">
        <span class="icon icon-elipse"></span><span class="tool-text"> Cercle</span>
    </label>
    <label class="btn btn-lg-off btn-primary">
        <input type="radio" name="toolType" value="rectangle" id="tool-rectangle" data-tool-name="rectanglegeo">
        <span class="icon icon-rectangle"></span><span class="tool-text"> Rectangle</span>
    </label>
    <label class="btn btn-lg-off btn-primary">
        <input type="radio" name="toolType" value="arrow" id="tool-arrow" data-tool-name="arrow">
        <span class="icon icon-arrow-right"></span><span class="tool-text"> Flèche</span>
    </label>
    <label class="btn btn-lg-off btn-primary">
        <input type="radio" name="toolType" value="text" id="tool-text" data-tool-name="text">
        <span class="icon-font"></span><span class="tool-text"> Texte</span>
    </label>
{% endblock %}

{% block param-tool-tb %}

    <button class="btn btn-default" id="attr-font" type="button">
        <span class="icon-fontcase"></span>
    </button>

    <div class="sldr btn btn-default" id="attr-size-slider">
        <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>

    <div class="sldr btn btn-default" id="attr-opacity-slider">
        <span class="adim-icon-opacity" title="Opacité"></span>
        <input type="text" class="slider" value="100" autocomplete="off"
               data-attr-name="opacity">
    </div>

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

    <button class="btn btn-default" id="attr-orderdown" type="button" autocomplete="off"
            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 %}

    <div class="panel panel-dark" id="annotation-display-panel">
        <header class="panel-heading">
            <h1 class="panel-title">
                <a data-toggle="collapse" href="#collapseDisplay">
                    Afficher <span class="pull-right icon-circleup"></span>
                </a>
            </h1>
        </header>
        <div id="collapseDisplay" class="panel-collapse collapse in">
            <div class="panel-body text-center" id="annotation-display-container">
                <div class="btn-group x-btn-group-2-col adim-display-type-selector category-list">
                {% with cat_set_name=anobj.envparam.category_set_name|default:"default" %}
                    {% for cat in env_settings.categories|get_item:cat_set_name %}
                    <button type="button" class="btn btn-block btn-sm btn-adim-layer active"
                            data-category="{{ cat.id }}"
                            title="Afficher/masquer la catégorie «{{ cat.label }}»">
                        <span class="glyphicon glyphicon-tag" style="color:{{ cat.color }}"></span>&nbsp;{{ cat.label }}
                    </button>
                    {% endfor %}
                {% endwith %}

{#                Bouton "Sans catégorie et bouton "image" sur deux colonnes #}

                    <button type="button" class="btn btn-block btn-sm btn-adim-layer active"
                            data-category="image">
                        <span class="glyphicon glyphicon-picture"></span> Image
                    </button>


{#                Si le nombre de catégories et impaire, on met le bouton image sur deux colonnes #}
{% comment %}
                    <button type="button" class="btn btn-block btn-col-span btn-sm btn-adim-layer active"
                            data-category="image">
                        <span class="glyphicon glyphicon-picture"></span> Image
                    </button><span class="btn hidden"></span>
{% endcomment %}
                </div>
            </div>
        </div>
    </div>


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

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

{% comment %}
    <div class="panel panel-dark" id="annotation-markers-panel">
        <header class="panel-heading">
            <h1 class="panel-title">
                <a data-toggle="collapse" href="#collapseMarkers">
                    Labels <span class="pull-right icon-circleup"></span>
                </a>
            </h1>
        </header>
        <div id="collapseMarkers" class="panel-collapse collapse in">
            <div class="panel-body" id="annotation-markers-container">
                <ul class="list-group">
                </ul>
            </div>
        </div>

        <script type="text/template" id="adim-tool-marker-label">
            <li class="adim-tool-marker-label-item list-group-item"
                 data-label="<%= label %>" data-annot-id="<%= id %>">
                <div class="list-group-item-heading text-center" style="float:left;width:12%">
                    <h4><%= label %></h4>
                </div>
                <div class="list-group-item-text" style="width:88%;margin-left:12%">
                    <textarea class="form-control" style="resize: vertical" <%= ro ? 'readonly' : '' %>><%= labelComment %></textarea>
                </div>
            </li>
        </script>
    </div>
{% endcomment %}

{% endblock %}



{# ============== #}
{# Property Panel #}
{# ============== #}
{% block property-panel-content %}
{% comment %}
    <div class="property-group confidence-prop">
        <label class="control-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"/>
    </div>
{% endcomment %}
    <div class="property-group category-prop">
        <label class="control-label">
            <small>Formes et processus&hairsp;:</small>
        </label>
        <div class="btn-group x-btn-group-2-col category-list" id="prop-annot-category" data-toggle="buttons">
        {% with cat_set_name=anobj.envparam.category_set_name|default:"default" %}
            {% for cat in env_settings.categories|get_item:cat_set_name %}
            <label class="btn btn-sm btn-block btn-cat"
                   data-category="{{ cat.id }}" data-color="{{ cat.color }}" data-color-bg="{{ cat.colorbg }}"
                   title="{{ cat.title|default:cat.label }}">
                <input type="radio" name="category" autocomplete="off"/>
                {{ cat.label }}
            </label>
            {% endfor %}
        {% endwith %}
        </div>
    </div>
M. Chardon's avatar
M. Chardon committed
202
203
204
205
206
    <div class="property-group fill-prop">
        <label class="control-label"><small>Remplissage: &nbsp;</small>
        <input id="fill-check" name="fill" type="checkbox">
        </label>
    </div>
M. Chardon's avatar
M. Chardon committed
207
208
209
210
211
212
213
214
215
216
217
    <div class="property-group comment-prop">
        <label class="control-label" for="prop-annot-comment"><small>Commentaire&hairsp;:</small></label>
        <textarea class="form-control" id="prop-annot-comment" name="comment"></textarea>
    </div>
{% endblock property-panel-content %}



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