Newer
Older
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
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.

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.

## 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.
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
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
### 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>
```

### 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
- **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 <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.

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

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