annotation.html

{% extends "adim/annotation.html" %}
{% load static i18n %}


{# ================ #}
{# MAIN TOP TAB-BAR #}
{# ================ #}
{% block tool-top-row %}
    <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>
        {% endif %}
    </div>
{% endblock tool-top-row %}


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


{# ============= #}
{# Drawing Tools #}
{# ============= #}
{% block draw-tool-tb %}
    <label class="btn btn-lg btn-primary" title="Selection (A)">
        <input type="radio" name="toolType" value="select" id="tool-select" data-tool-name="select">
        <span class="fas fa-mouse-pointer"></span><span class="tool-text"> Select</span>
    </label>
    <label class="btn btn-lg btn-primary" title="Déplacement (Espace)">
        <input type="radio" name="toolType" value="pan" id="tool-pan" data-tool-name="pan">
        <span class="fas fa-hand-paper"></span><span class="tool-text"> Pan</span>
    </label>

    <label class="btn btn-lg btn-primary" title="Bords de champ (B)">
        <input type="radio" name="toolType" value="fieldedges" id="tool-fieldedges" data-tool-name="fieldedges">
        <span class="adim-icon-bord-de-champ"></span>
    </label>
    <label class="btn btn-lg btn-primary" title="Strie concordante (C)">
        <input type="radio" name="toolType" value="concordantstr" id="tool-concordantstr"
               data-tool-name="concordantstr">
        <span class="adim-icon-concordant"></span>
    </label>
    <label class="btn btn-lg btn-primary" title="Strie discordante (D)">
        <input type="radio" name="toolType" value="discordantstr" id="tool-discordantstr"
               data-tool-name="discordantstr">
        <span class="adim-icon-discordant"></span>
    </label>
    <label class="btn btn-lg btn-primary" title="Zone de concordance (Z)">
        <input type="radio" name="toolType" value="cmsarea" id="tool-cmsarea" data-tool-name="cmsarea">
        <span class="adim-icon-zone-concordance"></span>
    </label>
    <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>
    <label class="btn btn-lg btn-primary" title="Rectangle (R)">
        <input type="radio" name="toolType" value="rectangle" id="tool-rectangle" data-tool-name="rectangle">
        <span class="far fa-square"></span><span class="tool-text"> Rectangle</span>
    </label>
    <label class="btn btn-lg btn-primary" title="Flèche (F)">
        <input type="radio" name="toolType" value="arrow" id="tool-arrow" data-tool-name="arrow">
        <span class="fas fa-arrow-right"></span><span class="tool-text"> Flèche</span>
    </label>
{% endblock %}


{# =============== #}
{# Tool parameters #}
{# =============== #}
{% block param-tool-tb %}
    <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>
        </button>
        <div class="dropdown-menu color-menu right" aria-labelledby="btnGroupDrop1">
            <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 c1 cpicker"></div>
                </div>
                <div class="d-flex flex-row">
                    <div class="p-2 m-2 c7 cpicker"></div>
                </div>
            </div>
        </div>
    </div>

    <div class="sldr btn btn-light" id="attr-size-slider">
        <span class="adim-icon-line-width" title="Epaisseur du trait"></span>
        <input type="range" min="1" max="50" step="1" value="3"
               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;">3
        </output>
    </div>

    <div class="sldr btn btn-light" id="attr-opacity-slider">
        <span class="adim-icon-opacity" title="Opacité"></span>
        <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>
    </div>

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

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


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

    <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>

    <div id="annotation-display-panel">
        <div class="collapse show panel-dark" id="collapseDisplay">
            <div class="card card-body">
                <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>
                </div>
            </div>
        </div>
    </div>

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

    {% block members-panel %}{{ block.super }}{% endblock %}
    {#    {{ block.super }}#}
{% endblock %}


{# ============== #}
{# Property Panel #}
{# ============== #}
{% block property-panel-content %}
    <div class="property-group confidence-prop">
        <label class="control-label" for="confidence-input">Confiance :</label>
        <input id="confidence-input" name="confidence" type="number" class="form-control rating" data-display="on"
               data-min="1" data-max="3"/>
    </div>

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

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



{% block content_js %}
    <script type="application/javascript" src="{% static "js/libs/require.min.js" %}"
            data-main="{% static "js/cimaf_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 %}