impressions.md

# Mode impressions

Le mode impressions fait partie des modes d'administration de vMap, il se compose de trois objets permettant de créer et modifier des modèles, des styles et des paramètres d'impressions.

![mode impressions](../images/impressions_1.jpg)

Une fois ces trois modes rensignés, les utilisateurs pourront utiliser depuis le mode vMap l'outil d'impression afin de générer des fichiers PDF avec des cartes, des paramètres et autres types d'entités.


![mode impressions](../images/impressions_2.jpg)

## Objet Modèles

La première des choses à faire est de créer un modèle d'impression, pour cela il faudra cliquer sur **Ajouter un modèle** et remplir le formulaire en associant un nom, un format d'impression, une orientation, les groupes d'utilisateurs qui pourront utiliser ce modèle ainsi qu'une définition HTML.

### Structure de la définition

Une définition est écrite en langage HTML et sera composée d'un style CSS ainsi que d'un corps, nous utiliserons par défaut la définition ci-dessous.

Il s'agit d'un modèle format A4 portrait, pour cela la première <div\> qui prend pour id #A4_print_template voit son style définir une hauteur de 21cm c'est à dire la hauteur d'une feuille A4.
Les identifiants map_legend, map_image et map_overview sont des mots clés permettant d'afficher les différents éléments cartographiques.
D'autres éléments comme les classes logo, head_element etc.. affichent des éléments de décoration, vous remarquerez qu'on utilise des logos au format base64 pour des soucis de performance et que par défaut les éléments sont en position absolue ce qui permet de les placer facilement dans la page.
Pour que les couleurs s'affichent correctement il faudra utiliser la syntaxe "!important".

```HTML
    <style>
        #A4_print_template {
            width: 21cm;
        }
        #map_legend {

        }
        #map_image {
            background-color: #DFDFDF;
            height: 19cm;
            width: 14cm;
            border: 1px solid black;
        }
        #map_overview {
            background-color: #DFDFDF;
            height: 4cm;
            width: 4cm;
            border: 1px solid black;
        }
        .logo {
            height: 1cm;
        }
        .head_element, .body_element, .footer_element {
            text-align: center;
            position: absolute;
        }

    </style>
    <div id="A4_print_template">

        <!-- Entête -->
        <div class="head_element" style="top: 1.5cm; left: 2cm;">
            <img class="logo" src="data:image/png;base64,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">
        </div>
        <div class="head_element" style="top: 1cm; left: 0cm; width: 21cm">
            <h1 style="margin-bottom: 0px; padding-bottom: 0px;">{{title}}</h1>
            <i>{{headline}}</i>
        </div>
        <div class="head_element" style="top: 1.5cm; left: 16cm;">
            <img class="logo" src="data:image/png;base64,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">
        </div>

        <!-- Corps -->
        <div class="body_element" style="top: 4cm; left: 1cm;width: 4cm;">
            <!--Pour afficher la légende, utiliser id="map_legend"-->
            <div id="map_legend"></div>
        </div>
        <div class="body_element" style="top: 4cm; left: 6cm;">
            <!--Pour afficher la carte, utiliser id="map_image"-->
            <img id="map_image" src="images/transparent.png">
        </div>

        <!-- Pied de page -->
        <div class="footer_element" style="top: 24cm; left: 1cm;">
            <!-- Pour afficher l'overview utiliser id="map_overview-->
            <img id="map_overview">
        </div>
        <div class="footer_element" style="top: 27.5cm; left: 0cm; width: 21cm">
            <label class="ng-binding">{{footer}}</label>
        </div>
        <div class="footer_element" style="top: 27.5cm; left: 17cm;">
            <!-- Pour afficher l'échelle actuelle utiliser {{map_scale}}-->
            <label class="ng-binding">Echelle: {{map_scale}}</label>
        </div>


    </div>
```

### Identifiants clés

Comme je l'ai stipulé précédemment il y a plusieurs identifiants clés permettant d'afficher des différents éléments cartgraphiques.

- **map_image** : si vous donnez cet identifiants à une balise **<img\>** alors la carte résultante de l'impression viendra s'y placer.
- **map_overview** : si vous donnez cet identifiants à une balise **<img\>** alors la carte de supervision y sera inscrite.
- **map_legend** : si vous donnez cet identifiants à une balise **<div\>** alors le contenu de la légende sera copié dedans.

### Cartes en comparaison

Lors de l'utilisation du mode comparaison seule la carte principale (située à gauche) est imprimée par défaut, pour imprimer la carte de droite il faudra utiliser les balises **map_image_compare** et **map_legend_compare**.

Une fois ceci fait on retrouvera la carte secondaire sur toutes les impressions qu'on soit ou pas en mode comparaison. Pour rendre ceci variable et afficher la carte secondaire uniquement si le mode comparaison est actif la variable scope **compare_mode** utilisée avec **ng-if** permettra de conditionner l'affichage.

```HTML
<style>
    #A4_print_template {
        width: 21cm;
        font-family: arial;
        position: absolute;
    }
    #map_overview {
        background-color: #D8D8D8 !important;
        height: 4cm;
        width: 4cm;
        border: 1px solid black;
    }
    .map_image {
        background-color: #D8D8D8 !important;
        height: 22cm;
        width: 14cm;
        border: 1px solid black;
    }
    .map_image_compare_mode {
        background-color: #D8D8D8 !important;
        height: 11cm;
        width: 14cm;
        border: 1px solid black;
    }
    .map_legend {
        width: 3cm;
        margin-top: 16px;
    }
    .map_legend_compare_mode {
        width: 3cm;
        margin-top: 16px;
    }
    .color_blue{
        color: #424A96 !important;
    }
    .logo {
        height: 2cm;
    }
    .container {
        position: absolute;
    }
    #header_container{
        width: 18cm;
        height: 2.5cm;
        background-color: #D8D8D8 !important;
    }
    #footer_container{
        width: 18cm;
        height: 1cm;
        background-color: #D8D8D8 !important;
    }
    .header_content{
        margin-left: 10px;
    }
    .title{
        display: block;
        font-size: 24pt;
        font-weight: bold;
        margin-top: 0.8em;
    }
    .headline{
        font-weight: bold;
        font-size: 14pt;
    }
    .legend_headline{
        font-weight: bold;
        font-size: 14pt;
        color: black;
    }
    .footer_text{
        font-weight: bold;
        font-size: 10pt;
        margin: 0.3cm;
    }

</style>
<div id="A4_print_template">

    <div id="header_container" class="container" style="top: 1.2cm; left: 1.5cm;">
        <div class="container" style="top: -0.5cm; left: 0cm;">
            <div class="header_content title color_blue">{{title}}</div>
            <div class="header_content headline color_blue">{{headline}}</div>
        </div>
        <div class="container" style="top: 0.2cm; right: 10px;">
            <img class="logo" src="data:image/png;base64,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">
        </div>
    </div>
    <!-- Mode normal -->
    <div ng-if="!compare_mode" class="container" style="top: 5cm; left: 1.5cm;">
        <label class="legend_headline">Légende</label>
        <div id="map_legend"></div>
    </div>
    <!-- Mode comparaison -->
    <div ng-if="compare_mode" class="container" style="top: 5cm; left: 1.5cm;">
        <label class="legend_headline">Légende</label>
        <div id="map_legend"></div>
        <div id="map_legend_compare"></div>
    </div>
    <!-- Mode normal -->
    <div ng-if="!compare_mode" class="container" style="top: 4cm; right: 1.1cm;">
        <img id="map_image" class="map_image" src="images/transparent.png">
    </div>
    <!-- Mode comparaison -->
    <div ng-if="compare_mode">
        <div class="container" style="top: 4cm; right: 1.1cm;">
            <img id="map_image" class="map_image_compare_mode" src="images/transparent.png">    
        </div>    
        <div class="container" style="top: 15cm; right: 1.1cm;">
            <img id="map_image_compare" class="map_image_compare_mode" src="images/transparent.png">
        </div>
    </div>

    <div class="container" style="top: 24.5cm; left: 1.7cm; z-index: 9;">
        <!-- Pour afficher l'overview utiliser id="map_overview-->
        <img id="map_overview">
    </div>


    <div id="footer_container" class="container" style="top: 26.7cm; left: 1.5cm">
        <div class="container" style="top: 0cm; right: 0cm;">
            <div class="footer_text">
                <label class="color_blue">Source(s):</label>

                <label class="color_blue">{{sources}}</label>
            </div>
        </div>
        <div class="container" style="top: 0cm; left: 5.5cm;">
            <!-- Pour afficher l'échelle actuelle utiliser {{map_scale}}-->
            <div class="footer_text">
                <label class="color_blue"></label>

                <label class="color_blue">Echelle: {{map_scale}}</label>
            </div>
        </div>
    </div>
</div>
```

![styles impression](../images/impressions_7.jpg)

### Variables disponibles

Tous les paramètres qui vous affecterez depuis le mode Paramètres seront interprétés comme des variables et pourront être incluses dans le résultat en les mettant entre crochets dans le définition.

Au même titre que les paramètres définis, certains paramètres dynamiques sont automatiquement affectés :

- **map_scale** : échelle de la carte imprimée
- **date** : date du jour
- **layer_sources** : sources des couches
- **user_name** : nom de l'utilisateur
- **user_login** : login de l'utilisateur
- **user_company** : société de l'utilisateur
- **user_department** : service de l'utilisateur
- **user_email** : adresse mail de l'utilisateur
- **user_user_id** : identifiant de l'utilisateur

Il est également possible de créer des variable à partir de code javascript.

Exemple : ajout de la date du jour de génération de l'impression
```
<script>
n =  new Date();
y = n.getFullYear();
m = n.getMonth() + 1;
d = n.getDate();
document.getElementById("date").innerHTML = d + "/" + m + "/" + y;
</script>
```

Insertion du code html permettant de faire remonter la variable

```
<p style="text-align: left;">Le&nbsp;<a id="date"></a></p>
```

## Objet Styles

En renseignant des styles d'impressions, alors l'utilisateur pourra choisir le style qu'il souhaite utiliser lors de la phase de préparation.

![styles impression](../images/impressions_3.jpg)

Pour être utilisable chaque style devra être lié à un ou plusieurs utilisateurs, comme pour les modèles il faudra dans la partie définition écrire ne HTML un style CSS.

Ce style va venir surcharger celui du modèle et comme pour ce dernier, pour que les couleurs s'affichent correctement il faudra utiliser la syntaxe "!important".

![configuration styles impression](../images/impressions_4.jpg)

## Objet Paramètres

Ce dernier onglet va permettre à l'administrateur de définir les paramètres à saisir lors de la phase de préparation à l'impression, chaque paramêtre est lié à un modèle d'impression et est facultatif pour l'utilisateur.

Si un paramètre est non modifiable alors il sera caché dans le formulaire mais le résultat sera inclus dans l'impression.

![configuration styles impression](../images/impressions_5.jpg)