// Déclaration des zones de dessin var aperçu = document.getElementById('aperçu'), // Fenêtre Aperçu dans l'onglet feuille = document.getElementById('feuille'), //Feuille qui sera envoyée comme fond de page à Sankoré largeur_16_9='1820px', // Dimension de la page en 16/9 hauteur_16_9='1024px', largeur_4_3='1280px', // Dimension de la page en 4/3 hauteur_4_3='960px'; // Déclaration des couleurs par défaut var couleur_fond_uni='#ccc', // Couleur du fond uni couleur_marge_seyes='red',//Couleur de la marge Seyes couleur_marge_maternelle='red',//Couleur de la marge Maternelle couleur_marge_guide_ane='red',//Couleur de la marge guide_ane couleur_seyes_ligne_horizontale='#8E7CC3', //Violet couleur_seyes_ligne_verticale='#8E7CC3', //Violet couleur_seyes_interligne='#6FA8DC', //bleu pâle couleur_fond_seyes='white', // Couleur du fond Seyes couleur_maternelle_ligne_horizontale='#8E7CC3', //Ligne principale Violet couleur_maternelle_interligne='#6FA8DC', //Interligne bleu pâle couleur_fond_maternelle='white', //Couleur de fond Maternelle couleur_ligne_guide_ane='rgb(207,226,243)', //Ligne principale Bleu clair couleur_fond_guide_ane='white',//Couleur fond guide ane couleur_dys_1='blue', // 1ere ligne Dys couleur_dys_2='green', // 2e ligne Dys couleur_dys_3='brown', //3e ligne Dys couleur_dys_4='red', //4e ligne Dys couleur_fond_dys='white', // Couleur de Fond Dys couleur_quadrillage='#4a86e8',// Couleur des Lignes du quadrillage Bleu clair couleur_fond_quadrillage='white',//Couleur du fond du quadrillage couleur_mm_ligne='black', // Lignes principales papier mm Noir couleur_mm_2='#888888', // Lignes intermédiaires papier mm Gris couleur_fond_mm='white',// Couleur du fond papier mm couleur_pointé='#888888',// Couleur des points Gris couleur_fond_pointé='white';//Couleur de fond du papier pointé // Épaisseurs de traits par défaut var epaisseur_seyes=2, epaisseur_maternelle=2, epaisseur_guide_ane=2, epaisseur_dys=2, epaisseur_quadrillage=4, epaisseur_mm=3, epaisseur_pointé=5; var position_marge_seyes=5, // Marge de 5 carreaux sur feuille Seyes finale position_marge_maternelle=5, // Marge de 5 carreaux sur feuille Maternelle finale position_marge_guide_ane=5; // Marge de 5 carreaux sur feuille Guide Âne finale var interligne;// Espacement entre les lignes // Palette de couleurs pour les fonds (avec couleur transparente) var palette1=[ ['rgba(0,0,0,0)',"#000","#444","#666","#888","#ccc","#eee","#fff"], ["#f00","#f90","#ff0","#0f0","#0ff","#00f","#90f","#f0f"], ["#f4cccc","#fce5cd","#fff2cc","#d9ead3","#d0e0e3","#cfe2f3","#d9d2e9","#ead1dc"], ["#ea9999","#f9cb9c","#ffe599","#b6d7a8","#a2c4c9","#9fc5e8","#b4a7d6","#d5a6bd"], ["#e06666","#f6b26b","#ffd966","#93c47d","#76a5af","#6fa8dc","#8e7cc3","#c27ba0"], ["#c00","#e69138","#f1c232","#6aa84f","#45818e","#3d85c6","#674ea7","#a64d79"], ["#900","#b45f06","#bf9000","#38761d","#134f5c","#0b5394","#351c75","#741b47"], ["#600","#783f04","#7f6000","#274e13","#0c343d","#073763","#20124d","#4c1130"] ], // Palette de couleurs pour les lignes (sans couleur transparente) palette2=[ ["#000","#444","#666","#888","#ccc","#eee","#f3f3f3","#fff"], ["#f00","#f90","#ff0","#0f0","#0ff","#00f","#90f","#f0f"], ["#f4cccc","#fce5cd","#fff2cc","#d9ead3","#d0e0e3","#cfe2f3","#d9d2e9","#ead1dc"], ["#ea9999","#f9cb9c","#ffe599","#b6d7a8","#a2c4c9","#9fc5e8","#b4a7d6","#d5a6bd"], ["#e06666","#f6b26b","#ffd966","#93c47d","#76a5af","#6fa8dc","#8e7cc3","#c27ba0"], ["#c00","#e69138","#f1c232","#6aa84f","#45818e","#3d85c6","#674ea7","#a64d79"], ["#900","#b45f06","#bf9000","#38761d","#134f5c","#0b5394","#351c75","#741b47"], ["#600","#783f04","#7f6000","#274e13","#0c343d","#073763","#20124d","#4c1130"] ]; function initialisation(){ $("#feuille").hide(); // On masque la feuille de papier, elle sera transférée dans Open-Sankoré $("#aperçu").show(); // On affiche la fenêtre qui sert d'aperçu $("#marge_seyes").prop("checked", false); // Marge et réglage de la marge désactivé par défaut sur papier Seyes $("#curseur_position_marge_seyes").hide(); $("#marge_maternelle").prop("checked", false); // Marge et réglage de la marge désactivé par défaut sur papier Maternelle $("#curseur_position_marge_maternelle").hide(); $("#marge_guide_ane").prop("checked", false); // Marge et réglage de la marge désactivées par défaut sur papier Guide Âne $("#curseur_position_marge_guide_ane").hide(); //##### Sélection du 1er onglet ##### document.getElementById('uni').style.display = "block";//On affiche l'onglet sélectionné document.getElementsByClassName("lien_onglet")[0].className += " active"; // On active le lien dessiner('uni','aperçu'); // Actualisation de l'aperçu //############################## //##### Définition des palettes ##### //##### ##### //##### Comportement ##### //##### Paramétrage ##### //############################## //##### UNI ##### $("#palette_fond_uni").spectrum({ showPaletteOnly: true, hideAfterPaletteSelect:true, color: couleur_fond_uni, palette: palette2, change: function(c) { couleur_fond_uni=c.toRgbString();// Renvoie le code Rgba de la couleur sélectionnée dessiner('uni','aperçu'); // Actualisation de l'aperçu } }); //##### SEYES ##### $("#palette_seyes_1").spectrum({ showPaletteOnly: true, hideAfterPaletteSelect:true, color: couleur_seyes_ligne_horizontale, palette: palette2, change: function(c) { couleur_seyes_ligne_horizontale=c.toRgbString();// Renvoie le code Rgba de la couleur sélectionnée dessiner('seyes','aperçu'); // Actualisation de l'aperçu } }); $("#palette_seyes_2").spectrum({ showPaletteOnly: true, hideAfterPaletteSelect:true, color: couleur_seyes_ligne_verticale, palette: palette2, change: function(c) { couleur_seyes_ligne_verticale=c.toRgbString();// Renvoie le code Rgba de la couleur sélectionnée dessiner('seyes','aperçu'); // Actualisation de l'aperçu } }); $("#palette_seyes_3").spectrum({ showPaletteOnly: true, hideAfterPaletteSelect:true, color: couleur_seyes_interligne, palette: palette2, change: function(c) { couleur_seyes_interligne=c.toRgbString();// Renvoie le code Rgba de la couleur sélectionnée dessiner('seyes','aperçu'); // Actualisation de l'aperçu } }); $("#palette_fond_seyes").spectrum({ showPaletteOnly: true, hideAfterPaletteSelect:true, color: couleur_fond_seyes, palette: palette1, change: function(c) { couleur_fond_seyes=c.toRgbString();// Renvoie le code Rgba de la couleur sélectionnée dessiner('seyes','aperçu'); // Actualisation de l'aperçu } }); //##### MATERNELLE ##### $("#palette_maternelle_1").spectrum({ showPaletteOnly: true, hideAfterPaletteSelect:true, color: couleur_maternelle_ligne_horizontale, palette: palette2, change: function(c) { couleur_maternelle_ligne_horizontale=c.toRgbString();// Renvoie le code Rgba de la couleur sélectionnée dessiner('maternelle','aperçu'); // Actualisation de l'aperçu } }); $("#palette_maternelle_2").spectrum({ showPaletteOnly: true, hideAfterPaletteSelect:true, color: couleur_maternelle_interligne, palette: palette2, change: function(c) { couleur_maternelle_interligne=c.toRgbString();// Renvoie le code Rgba de la couleur sélectionnée dessiner('maternelle','aperçu'); // Actualisation de l'aperçu } }); $("#palette_fond_maternelle").spectrum({ showPaletteOnly: true, hideAfterPaletteSelect:true, color: couleur_fond_maternelle, palette: palette1, change: function(c) { couleur_fond_maternelle=c.toRgbString();// Renvoie le code Rgba de la couleur sélectionnée dessiner('maternelle','aperçu'); // Actualisation de l'aperçu } }); //##### GUIDE ANE ##### $("#palette_ligne_guide_ane").spectrum({ showPaletteOnly: true, hideAfterPaletteSelect:true, color: couleur_ligne_guide_ane, palette: palette2, change: function(c) { couleur_ligne_guide_ane=c.toRgbString();// Renvoie le code Rgba de la couleur sélectionnée dessiner('guide_ane','aperçu'); // Actualisation de l'aperçu } }); $("#palette_fond_guide_ane").spectrum({ showPaletteOnly: true, hideAfterPaletteSelect:true, color: couleur_fond_guide_ane, palette: palette1, change: function(c) { couleur_fond_guide_ane=c.toRgbString();// Renvoie le code Rgba de la couleur sélectionnée dessiner('guide_ane','aperçu'); // Actualisation de l'aperçu } }); //##### DYS ##### $("#palette_dys_1").spectrum({ showPaletteOnly: true, hideAfterPaletteSelect:true, color: couleur_dys_1, palette: palette2, change: function(c) { couleur_dys_1=c.toRgbString();// Renvoie le code Rgba de la couleur sélectionnée dessiner('dys','aperçu'); // Actualisation de l'aperçu } }); $("#palette_dys_2").spectrum({ showPaletteOnly: true, hideAfterPaletteSelect:true, color: couleur_dys_2, palette: palette2, change: function(c) { couleur_dys_2=c.toRgbString();// Renvoie le code Rgba de la couleur sélectionnée dessiner('dys','aperçu'); // Actualisation de l'aperçu } }); $("#palette_dys_3").spectrum({ showPaletteOnly: true, hideAfterPaletteSelect:true, color: couleur_dys_3, palette: palette2, change: function(c) { couleur_dys_3=c.toRgbString();// Renvoie le code Rgba de la couleur sélectionnée dessiner('dys','aperçu'); // Actualisation de l'aperçu } }); $("#palette_dys_4").spectrum({ showPaletteOnly: true, hideAfterPaletteSelect:true, color: couleur_dys_4, palette: palette2, change: function(c) { couleur_dys_4=c.toRgbString();// Renvoie le code Rgba de la couleur sélectionnée dessiner('dys','aperçu'); // Actualisation de l'aperçu } }); $("#palette_fond_dys").spectrum({ showPaletteOnly: true, hideAfterPaletteSelect:true, color: couleur_fond_dys, palette: palette1, change: function(c) { couleur_fond_dys=c.toRgbString();// Renvoie le code Rgba de la couleur sélectionnée dessiner('dys','aperçu'); // Actualisation de l'aperçu } }); //##### QUADRILLAGE ##### $("#palette_quadrillage").spectrum({ showPaletteOnly: true, hideAfterPaletteSelect:true, color: couleur_quadrillage, palette: palette2, change: function(c) { couleur_quadrillage=c.toRgbString();// Renvoie le code Rgba de la couleur sélectionnée dessiner('quadrillage','aperçu'); // Actualisation de l'aperçu } }); $("#palette_fond_quadrillage").spectrum({ showPaletteOnly: true, hideAfterPaletteSelect:true, color: couleur_fond_quadrillage, palette: palette1, change: function(c) { couleur_fond_quadrillage=c.toRgbString();// Renvoie le code Rgba de la couleur sélectionnée dessiner('quadrillage','aperçu'); // Actualisation de l'aperçu } }); //##### MILLIMÉTRÉ ##### $("#palette_mm_ligne").spectrum({ showPaletteOnly: true, hideAfterPaletteSelect:true, color: couleur_mm_ligne, palette: palette2, change: function(c) { couleur_mm_ligne=c.toRgbString();// Renvoie le code Rgba de la couleur sélectionnée dessiner('mm','aperçu'); // Actualisation de l'aperçu } }); $("#palette_mm_interligne").spectrum({ showPaletteOnly: true, hideAfterPaletteSelect:true, color: couleur_mm_2, palette: palette2, change: function(c) { couleur_mm_2=c.toRgbString();// Renvoie le code Rgba de la couleur sélectionnée dessiner('mm','aperçu'); // Actualisation de l'aperçu } }); $("#palette_fond_mm").spectrum({ showPaletteOnly: true, hideAfterPaletteSelect:true, color: couleur_fond_mm, palette: palette1, change: function(c) { couleur_fond_mm=c.toRgbString();// Renvoie le code Rgba de la couleur sélectionnée dessiner('mm','aperçu'); // Actualisation de l'aperçu } }); //##### POINTÉ ##### $("#palette_pointé").spectrum({ showPaletteOnly: true, hideAfterPaletteSelect:true, color: couleur_pointé, palette: palette2, change: function(c) { couleur_pointé=c.toRgbString();// Renvoie le code Rgba de la couleur sélectionnée dessiner('pointé','aperçu'); // Actualisation de l'aperçu } }); $("#palette_fond_pointé").spectrum({ showPaletteOnly: true, hideAfterPaletteSelect:true, color: couleur_fond_pointé, palette: palette1, change: function(c) { couleur_fond_pointé=c.toRgbString();// Renvoie le code Rgba de la couleur sélectionnée dessiner('pointé','aperçu'); // Actualisation de l'aperçu } }); // ########################## //##### GESTION DES MARGES ##### // ########################## //##### SEYES ##### // Modification de la case à cocher Affichage de la marge $('#marge_seyes').on('change', function () { $("#curseur_position_marge_seyes").toggle(); // Bascule de l'affichage du curseur de réglage de la marge dessiner('seyes','aperçu'); // Actualisation de l'aperçu }); // Modification de la position de la marge $( function() {$( "#curseur_position_marge_seyes" ).slider({ value:5, min: 1, max: 10, step: 1, slide:function( event, ui ) { $( "#taille_marge_seyes" ).val( ui.value ); // Actualisation de la valeur affichée }, change:function( event, ui ) { dessiner('seyes','aperçu'); // Actualisation de l'aperçu } }); $( "#taille_marge_seyes" ).val( $( "#curseur_position_marge_seyes" ).slider( "value" )); // Affichage de la valeur initiale }); //##### MATERNELLE ##### // Modification de la case à cocher Affichage de la marge en Maternelle $('#marge_maternelle').on('change', function () { $("#curseur_position_marge_maternelle").toggle(); // Bascule de l'affichage du curseur de réglage de la marge dessiner('maternelle','aperçu'); // Actualisation de l'aperçu }); // Modification de la position de la marge en Maternelle $( function() {$( "#curseur_position_marge_maternelle" ).slider({ value:1, min: 1, max: 10, step: 1, slide:function( event, ui ) { $( "#taille_marge_maternelle" ).val( ui.value ); // Actualisation de la valeur affichée }, change:function( event, ui ) { dessiner('maternelle','aperçu'); // Actualisation de l'aperçu } }); $( "#taille_marge_maternelle" ).val( $( "#curseur_position_marge_maternelle" ).slider( "value" )); // Affichage de la valeur initiale }); //##### GUIDE_ANE ##### // Modification de la case à cocher Affichage de la marge en Guide Âne $('#marge_guide_ane').on('change', function () { $("#curseur_position_marge_guide_ane").toggle(); // Bascule de l'affichage du curseur de réglage de la marge dessiner('guide_ane','aperçu'); // Actualisation de l'aperçu }); // Modification de la position de la marge Guide Âne $( function() {$( "#curseur_position_marge_guide_ane" ).slider({ value:4, min: 1, max: 20, step: 1, slide:function( event, ui ) { $( "#taille_marge_guide_ane" ).val( ui.value ); // Actualisation de la valeur affichée }, change:function( event, ui ) { dessiner('guide_ane','aperçu'); // Actualisation de l'aperçu } }); $( "#taille_marge_guide_ane" ).val( $( "#curseur_position_marge_guide_ane" ).slider( "value" )); // Affichage de la valeur initiale }); } //############################################################# //##### Définitions des curseurs de réglage des dimensions des HAUTEURS DE LIGNES ##### //############################################################ $( function() { //##### CREATION DES CURSEURS ##### //##### SEYES ##### $( "#curseur_seyes" ).slider({ value:15, min: 10, max: 60, step: 5, slide: function( event, ui ) { $( "#taille_carreau_seyes" ).val( ui.value ); // Actualisation de la valeur affichée }, change: function( event, ui ) { dessiner('seyes','aperçu'); // Actualisation de l'aperçu } }); //##### MATERNELLE ##### $( "#curseur_maternelle" ).slider({ value:20, min: 10, max: 50, step: 10, slide:function( event, ui ) { $( "#taille_carreau_maternelle" ).val( ui.value ); // Actualisation de la valeur affichée }, change:function( event, ui ) { dessiner('maternelle','aperçu'); // Actualisation de l'aperçu } }); //##### GUIDE ÂNE ##### $( "#curseur_guide_ane" ).slider({ value:50, min: 10, max: 200, step: 10, slide:function( event, ui ) { $( "#interligne_guide_ane" ).val( ui.value ); // Actualisation de la valeur affichée }, change:function( event, ui ) { dessiner('guide_ane','aperçu'); // Actualisation de l'aperçu } }); //##### DYS ##### $( "#curseur_dys" ).slider({ value:30, min: 10, max: 60, step: 5, slide:function( event, ui ) { $( "#taille_carreau_dys" ).val( ui.value ); // Actualisation de la valeur affichée }, change:function( event, ui ) { dessiner('dys','aperçu'); // Actualisation de l'aperçu } }); //##### QUADRILLAGE ##### $( "#curseur_quadrillage" ).slider({ value:30, min: 10, max: 200, step: 10, slide:function( event, ui ) { $( "#taille_carreau_quadrillage" ).val( ui.value +"x"+ui.value); // Actualisation de la valeur affichée }, change:function( event, ui ) { dessiner('quadrillage','aperçu'); // Actualisation de l'aperçu } }); //##### MILLIMÉTRÉ ##### $( "#curseur_mm" ).slider({ value:10, min: 5, max: 30, step: 5, slide:function( event, ui ) { $( "#taille_carreau_mm" ).val( ui.value ); // Actualisation de la valeur affichée }, change:function( event, ui ) { dessiner('mm','aperçu'); // Actualisation de l'aperçu } }); //##### POINTÉ ##### $( "#curseur_pointé" ).slider({ value:30, min: 10, max: 150, step: 10, slide:function( event, ui ) { $( "#taille_pointé" ).val( ui.value ); // Actualisation de la valeur affichée }, change:function( event, ui ) { dessiner('pointé','aperçu'); // Actualisation de l'aperçu } }); //##### INITIALISATION DES CURSEURS ##### $( "#taille_carreau_maternelle" ).val( $( "#curseur_maternelle" ).slider( "value" )); // Affichage de la valeur initiale $( "#taille_carreau_seyes" ).val( $( "#curseur_seyes" ).slider( "value" )); // Affichage de la valeur initiale $( "#interligne_guide_ane" ).val( $( "#curseur_guide_ane" ).slider( "value" )); // Affichage de la valeur initiale $( "#taille_carreau_dys" ).val( $( "#curseur_dys" ).slider( "value" )); // Affichage de la valeur initiale $( "#taille_carreau_quadrillage" ).val( $( "#curseur_quadrillage" ).slider( "value" )+"x"+$( "#curseur_quadrillage" ).slider( "value" ) ); // Affichage de la valeur initiale $( "#taille_carreau_mm" ).val( $( "#curseur_mm" ).slider( "value" )); // Affichage de la valeur initiale $( "#taille_pointé" ).val( $( "#curseur_pointé" ).slider( "value" )); // Affichage de la valeur initiale }); // ############################## //##### GESTION DU PAPIER POINTÉ ##### // ############################## $( function() { // Changement du type de point pour le papier pointé maillage carré $('input[type=radio][name=type_point_page_pointé]').change(function() { dessiner('pointé','aperçu'); // Actualisation de l'aperçu }); // Changement du type de papier pointé maillage (carré/iso) $('input[type=radio][name=type_papier_pointé]').change(function() { dessiner('pointé','aperçu'); // Actualisation de l'aperçu }); }); //########################### //##### ÉPAISSEURS DE TRAITS ##### //########################## $( function() { //##### CREATION DES CURSEURS ##### //##### SEYES ##### $( "#curseur_épaisseur_seyes" ).slider({ value:epaisseur_seyes, min: 1, max: 10, step: 1, slide:function( event, ui ) { $( "#épaisseur_seyes" ).val( ui.value ); // Actualisation de la valeur affichée }, change:function( event, ui ) { dessiner('seyes','aperçu'); // Actualisation de l'aperçu } }); //##### MATERNELLE ##### $( "#curseur_épaisseur_maternelle" ).slider({ value:epaisseur_maternelle, min: 1, max: 10, step: 1, change:function( event, ui ) { $( "#épaisseur_maternelle" ).val( ui.value ); // Actualisation de la valeur affichée }, change:function( event, ui ) { dessiner('maternelle','aperçu'); // Actualisation de l'aperçu } }); //##### GUIDE ÂNE ##### $( "#curseur_épaisseur_guide_ane" ).slider({ value:epaisseur_guide_ane, min: 1, max: 10, step: 1, slide:function( event, ui ) { $( "#épaisseur_guide_ane" ).val( ui.value ); // Actualisation de la valeur affichée }, change:function( event, ui ) { dessiner('guide_ane','aperçu'); // Actualisation de l'aperçu } }); //##### DYS ##### $( "#curseur_épaisseur_dys" ).slider({ value:epaisseur_dys, min: 1, max: 10, step: 1, change:function( event, ui ) { $( "#épaisseur_dys" ).val( ui.value ); dessiner('dys','aperçu'); // Actualisation de l'aperçu } }); //##### QUADRILLAGE ##### $( "#curseur_épaisseur_quadrillage" ).slider({ value:epaisseur_quadrillage, min: 1, max: 10, step: 1, slide:function( event, ui ) { $( "#épaisseur_quadrillage" ).val( ui.value ); // Actualisation de la valeur affichée }, change:function( event, ui ) { dessiner('quadrillage','aperçu'); // Actualisation de l'aperçu } }); //##### MILLIMÉTRÉ ##### $( "#curseur_épaisseur_mm" ).slider({ value:epaisseur_mm, min: 1, max: 10, step: 1, change:function( event, ui ) { $( "#épaisseur_mm" ).val( ui.value ); // Actualisation de la valeur affichée }, change:function( event, ui ) { dessiner('mm','aperçu'); // Actualisation de l'aperçu } }); //##### POINTÉ ##### $( "#curseur_épaisseur_pointé" ).slider({ value:epaisseur_pointé, min: 1, max: 10, step: 1, slide:function( event, ui ) { $( "#épaisseur_pointé" ).val( ui.value ); // Actualisation de la valeur affichée }, change:function( event, ui ) { dessiner('pointé','aperçu'); // Actualisation de l'aperçu } }); //##### INITIALISATION DES CURSEURS ##### $( "#épaisseur_seyes" ).val( $( "#curseur_épaisseur_seyes" ).slider( "value" )); $( "#épaisseur_maternelle" ).val( $( "#curseur_épaisseur_maternelle" ).slider( "value" )); $( "#épaisseur_guide_ane" ).val( $( "#curseur_épaisseur_guide_ane" ).slider( "value" )); $( "#épaisseur_dys" ).val( $( "#curseur_épaisseur_dys" ).slider( "value" )); $( "#épaisseur_quadrillage" ).val( $( "#curseur_épaisseur_quadrillage" ).slider( "value" )); $( "#épaisseur_mm" ).val( $( "#curseur_épaisseur_mm" ).slider( "value" )); $( "#épaisseur_pointé" ).val( $( "#curseur_épaisseur_pointé" ).slider( "value" )); $( "#épaisseur_pointé" ).val( $( "#curseur_épaisseur_pointé" ).slider( "value" )); }); //############################ //##### CRÉATION DES ONGLETS ##### //########################### function onglet(evt, nom_onglet) { var i, contenu_onglet, lien_onglet; contenu_onglet = document.getElementsByClassName("contenu_onglet");//On masque le contenu de tous les onglets for (i = 0; i < contenu_onglet.length; i++) { contenu_onglet[i].style.display = "none"; } lien_onglet = document.getElementsByClassName("lien_onglet");// On désactive les lien for (i = 0; i < lien_onglet.length; i++) { lien_onglet[i].className = lien_onglet[i].className.replace(" active", ""); } document.getElementById(nom_onglet).style.display = "block";//On affiche l'onglet sélectionné evt.currentTarget.className += " active"; // On active le lien if (nom_onglet=='aide') { $("#aperçu").hide(); // On masque la fenêtre qui sert d'aperçu }else{ $("#aperçu").show(); // On affiche la fenêtre qui sert d'aperçu dessiner(nom_onglet,'aperçu'); // Actualisation de l'aperçu } } //####################### //##### TRACÉ DU PAPIER ##### //####################### //##### Comportement du bouton de commande Aperçu/Générer ##### $(document).on('click', '.bouton_commande', function (e) { e.preventDefault(); // On récupèration le type de papier sélectionné var type_papier=$(this).parents('.contenu_onglet').attr('id'); dessiner(type_papier,'feuille'); var canvas = document.getElementById('feuille'); var adresse=canvas.toDataURL('image/png',0.1); // Compression forte (0.1) car sans compression (1), image générée trop lourde à charger sous windows // Décallage pour voir toutes les étiquettes sankore.addObject(adresse,'100%','100%',0,0,true); //~ Description Ajoute l'objet à la scène //~ Paramètres //~ [QString] pUrl: the object URL. //~ [int] width: la largeur. //~ [int] height: la hauteur. //~ [int] x: the x coordinate. //~ [int] y: the y coordinate. //~ [bool] background: if this flag is true, the object is set as background. }) //##### Tracer du papier sur une zone (aperçu ou feuille) function dessiner(type_papier,zone){ // Utilisation du booléen 'tabelau' afin d'adapter l'interligne en fonction de l'aperçu ou du tableau var tableau=true; // Dessin du papier sur le tableau switch (zone){ case 'aperçu': var ctx =document.getElementById("aperçu").getContext('2d'), hauteur=$('#aperçu').height(); largeur=$('#aperçu').width(); tableau=false; // Dessin dans la fenêtre d'aperçu break; case 'feuille': //~ Détection du format de page 16/9 ou 4/3 var origine="taille_page_"+type_papier; if ($('input[type=radio][name=taille_page_'+type_papier+']:checked').val()=='16/9') { $('#feuille').attr({width: largeur_16_9,height:hauteur_16_9}); }else{ $('#feuille').attr({width: largeur_4_3,height:hauteur_4_3}); } var ctx =document.getElementById("feuille").getContext('2d'), hauteur=$('#feuille').height(); largeur=$('#feuille').width(); break; } var epaisseur; // Épaisseur du tracé var i=0,j=0,i2=0,j2=0,n=0; ctx.clearRect(0, 0, largeur, hauteur); // On efface le fond switch (type_papier){ //Détection du papier choisi case "uni": ctx.fillStyle =couleur_fond_uni;//Couleur du fond sélectionné dans la palette ctx.fillRect(0, 0, largeur, hauteur); // On rempli le fond avec la couleur choisie break; case "seyes": // Seyes; // Couleur de fond du papier ctx.fillStyle =couleur_fond_seyes;//Couleur du fond sélectionné dans la palette ctx.fillRect(0, 0, largeur, hauteur); // On rempli le fond avec la couleur choisie // Épaisseur epaisseur=$( "#curseur_épaisseur_seyes" ).slider("value");// Épaisseur définie par le curseur // Interlignes interligne=$( "#curseur_seyes" ).slider("value"), taille_carreau=interligne*4;//N° de ligne ctx.beginPath(); ctx.lineWidth = epaisseur/2; // épaisseur des lignes tracées ctx.strokeStyle = couleur_seyes_interligne; var n=0; for (i = interligne; i < hauteur+1; i += interligne) {// i=0 est une ligne donc on commence à i=interligne (on en saute 1) if (n % 4!== 0) { ctx.moveTo(0, i); ctx.lineTo(largeur, i); }// Tous les 4 interlignes, on saute une ligne (3 interlignes par carreaux n+=1;//Ligne suivante } ctx.stroke(); // Lignes Verticales var position_marge=0; // Aucune marge par défaut if ($('#marge_seyes').is(':checked')){// Si la case Marge est cochée position_marge_seyes=$( "#curseur_position_marge_seyes" ).slider("value");// Position de la marge définie par le curseur if (zone=='aperçu') {position_marge=taille_carreau} else {position_marge=position_marge_seyes*taille_carreau} // marge à 1 carreau sur l'aperçu et à 5 carreaux sur la feuille } ctx.beginPath(); ctx.lineWidth = epaisseur; // épaisseur des lignes tracées ctx.strokeStyle=couleur_seyes_ligne_verticale; for (i = position_marge+taille_carreau; i < largeur+1; i += taille_carreau) {// On commence à tracer les lignes verticales 1 carreau après la marge ctx.moveTo(i, 0); ctx.lineTo(i, hauteur); } ctx.stroke(); // Lignes Horizontales ctx.beginPath(); ctx.lineWidth = epaisseur; // épaisseur des lignes tracées ctx.strokeStyle = couleur_seyes_ligne_horizontale; for (i = interligne; i < largeur+1; i += taille_carreau) { ctx.moveTo(0, i); ctx.lineTo(largeur, i); } ctx.stroke(); // Affichage de la marge si nécessaire if ($('#marge_seyes').is(':checked')){ ctx.beginPath(); ctx.lineWidth = epaisseur; // épaisseur de la marge ctx.strokeStyle=couleur_marge_seyes; ctx.moveTo(position_marge, 0); ctx.lineTo(position_marge, hauteur); ctx.stroke(); } break; case "maternelle": // maternelle; // Couleur de fond du papier ctx.fillStyle =couleur_fond_maternelle;//Couleur du fond sélectionné dans la palette ctx.fillRect(0, 0, largeur, hauteur); // On remplit le fond avec la couleur choisie // Épaisseur epaisseur=$( "#curseur_épaisseur_maternelle" ).slider("value");// Épaisseur définie par le curseur // Interlignes if (tableau) { interligne=$( "#curseur_maternelle" ).slider("value")*2}//Hauteur de ligne sur la page else{ interligne=$( "#curseur_maternelle" ).slider("value")*0.5}//Hauteur de ligne dans l'aperçu taille_carreau=interligne*3;//Hauteur de ligne // Lignes Horizontales principales ctx.beginPath(); ctx.lineWidth = epaisseur; // épaisseur des lignes tracées ctx.strokeStyle = couleur_maternelle_ligne_horizontale; for (i = interligne; i < largeur+1; i += taille_carreau) { ctx.moveTo(0, i); ctx.lineTo(largeur, i); } ctx.stroke(); // Lignes Horizontales secondaires ctx.beginPath(); ctx.lineWidth = epaisseur/2; // épaisseur des lignes tracées ctx.strokeStyle = couleur_maternelle_interligne; for (i = 0; i < largeur+1; i += taille_carreau) { ctx.moveTo(0, i); ctx.lineTo(largeur, i); } ctx.stroke(); // Marge ? var position_marge=0; // Aucune marge par défaut if ($('#marge_maternelle').is(':checked')){// Si la case Marge est cochée position_marge_maternelle=$( "#curseur_position_marge_maternelle" ).slider("value");// Position de la marge définie par le curseur if (zone=='aperçu') {position_marge=position_marge_maternelle*taille_carreau/2} else {position_marge=position_marge_maternelle*taille_carreau} // marge à une distance différente sur l'aperçu et sur le tableau (mise à l'échelle) ctx.beginPath(); ctx.lineWidth = epaisseur; // épaisseur de la marge ctx.strokeStyle=couleur_marge_maternelle; ctx.moveTo(position_marge, 0); ctx.lineTo(position_marge, hauteur); ctx.stroke(); } break; case 'guide_ane': // Couleur de fond du papier ctx.fillStyle =couleur_fond_guide_ane;//Couleur du fond sélectionné dans la palette ctx.fillRect(0, 0, largeur, hauteur); // On rempli le fond avec la couleur choisie // Épaisseur epaisseur=$( "#curseur_épaisseur_guide_ane" ).slider("value");// Épaisseur définie par le curseur // Interlignes interligne=$( "#curseur_guide_ane" ).slider("value");//N° de ligne // Lignes Horizontales ctx.beginPath(); ctx.lineWidth = epaisseur; // épaisseur des lignes tracées ctx.strokeStyle = couleur_ligne_guide_ane; for (i = interligne; i < largeur+1; i += interligne) { ctx.moveTo(0, i); ctx.lineTo(largeur, i); } ctx.stroke(); // Affichage de la marge si nécessaire var position_marge=0; // Aucune marge par défaut if ($('#marge_guide_ane').is(':checked')){// Si la case Marge est cochée position_marge_guide_ane=$( "#curseur_position_marge_guide_ane" ).slider("value");// Position de la marge définie par le curseur if (zone=='aperçu') {position_marge=interligne*4} else {position_marge=interligne*position_marge_guide_ane} // marge plus petite sur l'aperçu ou plus grande sur la feuille } if ($('#marge_guide_ane').is(':checked')){ ctx.beginPath(); ctx.lineWidth = epaisseur; // épaisseur de la marge ctx.strokeStyle=couleur_marge_guide_ane; ctx.moveTo(position_marge, 0); ctx.lineTo(position_marge, hauteur); ctx.stroke(); } break; case "dys": // Dyspraxie; // Couleur de fond du papier ctx.fillStyle =couleur_fond_dys;//Couleur du fond sélectionné dans la palette ctx.fillRect(0, 0, largeur, hauteur); // On rempli le fond avec la couleur choisie // Épaisseur epaisseur=$( "#curseur_épaisseur_dys" ).slider("value");// Épaisseur définie par le curseur // Interlignes interligne=$( "#curseur_dys" ).slider("value"); taille_carreau_dys=interligne*5;//Espace entre 2 lignages // Lignes Horizontales for (j= epaisseur; j< hauteur+1; j+=taille_carreau_dys) {// La première ligne est entière, on commence à epaisseur ctx.beginPath(); ctx.lineWidth = epaisseur; // épaisseur des lignes tracées ctx.strokeStyle = couleur_dys_1; ctx.moveTo(i, j); ctx.lineTo(largeur, j); ctx.stroke(); ctx.beginPath(); j+=interligne*2; ctx.strokeStyle = couleur_dys_2; ctx.moveTo(i, j); ctx.lineTo(largeur,j); ctx.stroke(); ctx.beginPath(); j+=interligne; ctx.strokeStyle = couleur_dys_3; ctx.moveTo(0, j); ctx.lineTo(largeur, j); ctx.stroke(); ctx.beginPath(); j+=interligne*2; ctx.strokeStyle = couleur_dys_4; ctx.moveTo(0,j); ctx.lineTo(largeur, j); ctx.stroke(); } break; case "quadrillage" : // Petits Carreaux type 10x10 // Couleur de fond du papier ctx.fillStyle =couleur_fond_quadrillage;//Couleur du fond sélectionné dans la palette ctx.fillRect(0, 0, largeur, hauteur); // On rempli le fond avec la couleur choisie // Épaisseur epaisseur=$( "#curseur_épaisseur_quadrillage" ).slider("value");// Épaisseur définie par le curseur // Lignes interligne=$( "#curseur_quadrillage" ).slider("value"); // Taille du quadrillage, 30 par défaut ctx.lineWidth = epaisseur; // épaisseur des lignes tracées ctx.beginPath(); ctx.strokeStyle = couleur_quadrillage; // Démarrage des boucle à "epaisseur" pour que les lignes périphériques apparaissent en entier. for(i=epaisseur;i