You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
322 lines
15 KiB
322 lines
15 KiB
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Papier</title>
|
|
<link rel="stylesheet" type="text/css" href="jquery/jquery-ui-base.min.css">
|
|
<link rel="stylesheet" type="text/css" href="spectrum-1.8.1/spectrum.css">
|
|
<link rel="stylesheet" type="text/css" href="papier.css">
|
|
|
|
<script type="text/javascript" src="jquery/jquery-2.2.4.min.js"></script>
|
|
<script type="text/javascript" src="jquery/jquery-ui-1.12.1.min.js"></script>
|
|
|
|
<script type="text/javascript" src="spectrum-1.8.1/spectrum.js"></script>
|
|
<script type="text/javascript" src="spectrum-1.8.1/i18n/jquery.spectrum-fr.js"></script>
|
|
<script type="text/javascript" src="papier.js"></script>
|
|
|
|
</head>
|
|
<body onload="initialisation();">
|
|
<div id="widget">
|
|
<div class="onglet">
|
|
<!-- Définition des onglets !-->
|
|
<button class="lien_onglet" onclick="onglet(event, 'uni')">Uni</button>
|
|
<button class="lien_onglet" onclick="onglet(event, 'seyes')">Seyes</button>
|
|
<button class="lien_onglet" onclick="onglet(event, 'maternelle')">Maternelle</button>
|
|
<button class="lien_onglet" onclick="onglet(event, 'guide_ane')">Guide Âne</button>
|
|
<button class="lien_onglet" onclick="onglet(event, 'dys')">Dys</button>
|
|
<button class="lien_onglet" onclick="onglet(event, 'quadrillage')">Quadrillage</button>
|
|
<button class="lien_onglet" onclick="onglet(event, 'mm')">Millimétré</button>
|
|
<button class="lien_onglet" onclick="onglet(event, 'pointé')">Pointé</button>
|
|
<button class="lien_onglet" onclick="onglet(event, 'aide')">?</button>
|
|
</div>
|
|
<!-- Contenu de l'onglet 1 !-->
|
|
<div id="uni" class="contenu_onglet">
|
|
<!-- Boîte de commandes à droite !-->
|
|
<div class="boite_droite">
|
|
<!-- Bouton générateur !-->
|
|
<button id="bouton_générer" class="bouton_commande"></button>
|
|
<!-- Paramètres de la page !-->
|
|
<div class="parametres">
|
|
<!-- Choix du format de page !-->
|
|
<div class="etiquette haut"><span>Format de page</span><br></div>
|
|
<input type="radio" id="4/3" name="taille_page_uni" value="4/3">4/3
|
|
<input type="radio" checked id="16/9" name="taille_page_uni" value="16/9">16/9
|
|
</div>
|
|
</div>
|
|
<!-- Boîte des options à gauche !-->
|
|
<div class="boite_gauche">
|
|
<!-- Option 1 !-->
|
|
<div class="etiquette haut"><span>Couleur</span></div>
|
|
<div class='palette'>
|
|
<input type='text' id="palette_fond_uni"/> <!-- Couleur du fond !-->
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<!-- Contenu de l'onglet 2 !-->
|
|
<div id="seyes" class="contenu_onglet">
|
|
<!-- Boîte de commandes à droite !-->
|
|
<div class="boite_droite">
|
|
<!-- Bouton générateur !-->
|
|
<button id="bouton_générer" class="bouton_commande"></button>
|
|
<!-- Paramètres de la page !-->
|
|
<div class="parametres">
|
|
<!-- Choix du format de page !-->
|
|
<div class="etiquette haut"><span>Format de page</span></div>
|
|
<input type="radio" id="4/3" name="taille_page_seyes" value="4/3">4/3
|
|
<input type="radio" checked id="16/9" name="taille_page_seyes" value="16/9">16/9
|
|
<!-- Marge ? !-->
|
|
<div class="etiquette milieu"><input type="checkbox" id="marge_seyes"><span>Marge</span></div>
|
|
<input type="text" id="taille_marge_seyes" class="taille">
|
|
<div id="curseur_position_marge_seyes" class="potentiometre" ></div>
|
|
</div>
|
|
</div>
|
|
<!-- Boîte des options à gauche !-->
|
|
<div class="boite_gauche">
|
|
<!-- Option 1 !-->
|
|
<div class="etiquette haut"><span>Interligne</span></div>
|
|
<input type="text" id="taille_carreau_seyes" class="taille">
|
|
<div id="curseur_seyes" class="potentiometre" ></div>
|
|
<!-- Option 2 !-->
|
|
<div class="etiquette milieu"><span>Couleurs des lignes/du fond</span></div>
|
|
<div class='palette'>
|
|
<input type='text' id="palette_seyes_1"/> <!-- Ligne Horizontale !-->
|
|
<input type='text' id="palette_seyes_2"/><!-- Ligne Verticale !-->
|
|
<input type='text' id="palette_seyes_3"/><!-- Interligne !-->
|
|
<input type='text' id="palette_fond_seyes" class='palette'/> <!-- Couleur du fond !-->
|
|
</div>
|
|
<!-- Option 3 !-->
|
|
<div class="etiquette milieu"><span>Épaisseur des lignes</span></div>
|
|
<input type="text" id="épaisseur_seyes" readonly class="taille">
|
|
<div id="curseur_épaisseur_seyes" class="potentiometre" ></div>
|
|
</div>
|
|
</div>
|
|
<!-- Contenu de l'onglet 3 !-->
|
|
<div id="maternelle" class="contenu_onglet">
|
|
<!-- Boîte de commandes à droite !-->
|
|
<div class="boite_droite">
|
|
<!-- Bouton générateur !-->
|
|
<button id="bouton_générer" class="bouton_commande"></button>
|
|
<!-- Paramètres de la page !-->
|
|
<div class="parametres">
|
|
<!-- Choix du format de page !-->
|
|
<div class="etiquette haut"><span>Format de page</span></div>
|
|
<input type="radio" id="4/3" name="taille_page_maternelle" value="4/3">4/3
|
|
<input type="radio" checked id="16/9" name="taille_page_maternelle" value="16/9">16/9
|
|
<!-- Marge ? !-->
|
|
<div class="etiquette milieu"><input type="checkbox" id="marge_maternelle"><span>Marge</span></div>
|
|
<input type="text" id="taille_marge_maternelle" class="taille">
|
|
<div id="curseur_position_marge_maternelle" class="potentiometre" ></div>
|
|
</div>
|
|
</div>
|
|
<!-- Boîte des options à gauche !-->
|
|
<div class="boite_gauche">
|
|
<!-- Option 1 !-->
|
|
<div class="etiquette haut"><span>Interligne</span></div>
|
|
<input type="text" id="taille_carreau_maternelle" class="taille">
|
|
<div id="curseur_maternelle" class="potentiometre" ></div>
|
|
<!-- Option 2 !-->
|
|
<div class="etiquette milieu"><span>Couleurs des lignes/du fond</span></div>
|
|
<div class='palette'>
|
|
<input type='text' id="palette_maternelle_1"/> <!-- Ligne Horizontale !-->
|
|
<input type='text' id="palette_maternelle_2"/><!-- Interligne !-->
|
|
<input type='text' id="palette_fond_maternelle" class='palette'/> <!-- Couleur du fond !-->
|
|
</div>
|
|
<!-- Option 3 !-->
|
|
<div class="etiquette milieu"><span>Épaisseur des lignes</span></div>
|
|
<input type="text" id="épaisseur_maternelle" readonly class="taille">
|
|
<div id="curseur_épaisseur_maternelle" class="potentiometre" ></div>
|
|
</div>
|
|
</div>
|
|
<!-- Contenu de l'onglet 3 !-->
|
|
<div id="guide_ane" class="contenu_onglet">
|
|
<!-- Boîte de commandes à droite !-->
|
|
<div class="boite_droite">
|
|
<!-- Bouton générateur !-->
|
|
<button id="bouton_générer" class="bouton_commande"></button>
|
|
<!-- Paramètres de la page !-->
|
|
<div class="parametres">
|
|
<!-- Choix du format de page !-->
|
|
<div class="etiquette haut"><span>Format de page</span></div>
|
|
<input type="radio" id="4/3" name="taille_page_guide_ane" value="4/3">4/3
|
|
<input type="radio" checked id="16/9" name="taille_page_guide_ane" value="16/9">16/9
|
|
|
|
<div class="etiquette milieu"><input type="checkbox" id="marge_guide_ane"><span>Marge</span></div>
|
|
<input type="text" id="taille_marge_guide_ane" class="taille">
|
|
<div id="curseur_position_marge_guide_ane" class="potentiometre" ></div>
|
|
</div>
|
|
</div>
|
|
<!-- Boîte des options à gauche !-->
|
|
<div class="boite_gauche">
|
|
<!-- Option 1 !-->
|
|
<div class="etiquette haut"><span>Interligne</span></div>
|
|
<input type="text" id="interligne_guide_ane" class="taille">
|
|
<div id="curseur_guide_ane" class="potentiometre" ></div>
|
|
<!-- Option 2 !-->
|
|
<div class="etiquette milieu"><span>Couleurs des lignes/du fond</span></div>
|
|
<div class='palette'>
|
|
<input type='text' id="palette_fond_guide_ane"/> <!-- Couleur du fond !-->
|
|
<input type='text' id="palette_ligne_guide_ane"/> <!-- Couleur des lignes !-->
|
|
</div>
|
|
<!-- Option 3 !-->
|
|
<div class="etiquette milieu"><span>Épaisseur des lignes</span></div>
|
|
<input type="text" id="épaisseur_guide_ane" readonly class="taille">
|
|
<div id="curseur_épaisseur_guide_ane" class="potentiometre" ></div>
|
|
</div>
|
|
</div>
|
|
<!-- Contenu de l'onglet 4 !-->
|
|
<div id="dys" class="contenu_onglet">
|
|
<!-- Boîte de commandes à droite !-->
|
|
<div class="boite_droite">
|
|
<!-- Bouton générateur !-->
|
|
<button id="bouton_générer" class="bouton_commande"></button>
|
|
<!-- Paramètres de la page !-->
|
|
<div class="parametres">
|
|
<!-- Choix du format de page !-->
|
|
<div class="etiquette haut"><span>Format de page</span></div>
|
|
<input type="radio" id="4/3" name="taille_page_dys" value="4/3">4/3
|
|
<input type="radio" checked id="16/9" name="taille_page_dys" value="16/9">16/9
|
|
</div>
|
|
</div>
|
|
<!-- Boîte des options à gauche !-->
|
|
<div class="boite_gauche">
|
|
<!-- Option 1 !-->
|
|
<div class="etiquette haut"><span>Interligne centrale</span></div>
|
|
<input type="text" id="taille_carreau_dys" class="taille">
|
|
<div id="curseur_dys" class="potentiometre" ></div>
|
|
<!-- Option 2 !-->
|
|
<div class="etiquette milieu"><span>Couleur du fond</span></div>
|
|
<div class='palette'>
|
|
<input type='text' id="palette_fond_dys" class='palette'/> <!-- Couleur du fond !-->
|
|
</div>
|
|
<!-- Option 3 !-->
|
|
<div class="etiquette milieu"><span>Épaisseur des lignes</span></div>
|
|
<input type="text" id="épaisseur_dys" readonly class="taille">
|
|
<div id="curseur_épaisseur_dys" class="potentiometre" ></div>
|
|
</div>
|
|
</div>
|
|
<!-- Contenu de l'onglet 5 !-->
|
|
<div id="quadrillage" class="contenu_onglet">
|
|
<!-- Boîte de commandes à droite !-->
|
|
<div class="boite_droite">
|
|
<!-- Bouton générateur !-->
|
|
<button id="bouton_générer" class="bouton_commande"></button>
|
|
<!-- Paramètres de la page !-->
|
|
<div class="parametres">
|
|
<!-- Choix du format de page !-->
|
|
<div class="etiquette haut"><span>Format de page</span></div>
|
|
<input type="radio" id="4/3" name="taille_page_quadrillage" value="4/3">4/3
|
|
<input type="radio" checked id="16/9" name="taille_page_quadrillage" value="16/9">16/9
|
|
</div>
|
|
</div>
|
|
<!-- Boîte des options à gauche !-->
|
|
<div class="boite_gauche">
|
|
<!-- Option 1 !-->
|
|
<div class="etiquette haut"><span>Quadrillage</span></div>
|
|
<input type="text" id="taille_carreau_quadrillage" class="taille">
|
|
<div id="curseur_quadrillage" class="potentiometre" ></div>
|
|
<!-- Option 2 !-->
|
|
<div class="etiquette milieu"><span>Couleurs des lignes/du fond</span></div>
|
|
<div class='palette'>
|
|
<input type='text' id='palette_quadrillage'/><!-- Ligne !-->
|
|
<input type='text' id="palette_fond_quadrillage" class='palette'/> <!-- Couleur du fond !-->
|
|
</div>
|
|
<!-- Option 3 !-->
|
|
<div class="etiquette milieu"><span>Épaisseur des lignes</span></div>
|
|
<input type="text" id="épaisseur_quadrillage" readonly class="taille">
|
|
<div id="curseur_épaisseur_quadrillage" class="potentiometre" ></div>
|
|
</div>
|
|
</div>
|
|
<!-- Contenu de l'onglet 6 !-->
|
|
<div id="mm" class="contenu_onglet">
|
|
<!-- Boîte de commandes à droite !-->
|
|
<div class="boite_droite">
|
|
<!-- Bouton générateur !-->
|
|
<button id="bouton_générer" class="bouton_commande"></button>
|
|
<!-- Paramètres de la page !-->
|
|
<div class="parametres">
|
|
<!-- Choix du format de page !-->
|
|
<div class="etiquette haut"><span>Format de page</span></div>
|
|
<input type="radio" id="4/3" name="taille_page_mm" value="4/3">4/3
|
|
<input type="radio" checked id="16/9" name="taille_page_mm" value="16/9">16/9
|
|
</div>
|
|
</div>
|
|
<!-- Boîte des options à gauche !-->
|
|
<div class="boite_gauche">
|
|
<!-- Option 1 !-->
|
|
<div class="etiquette haut"><span>Interligne</span></div>
|
|
<input type="text" id="taille_carreau_mm" class="taille">
|
|
<div id="curseur_mm" class="potentiometre" ></div>
|
|
<!-- Option 2 !-->
|
|
<div class="etiquette milieu"><span>Couleurs des lignes/du fond</span></div>
|
|
<div class='palette'>
|
|
<input type='text' id='palette_mm_ligne'/><!-- Ligne Horizontale et Verticale!-->
|
|
<input type='text' id='palette_mm_interligne'/><!-- Interligne !-->
|
|
<input type='text' id="palette_fond_mm" class='palette'/> <!-- Couleur du fond !-->
|
|
</div>
|
|
<!-- Option 3 !-->
|
|
<div class="etiquette milieu"><span>Épaisseur des lignes</span></div>
|
|
<input type="text" id="épaisseur_mm" readonly class="taille">
|
|
<div id="curseur_épaisseur_mm" class="potentiometre" ></div>
|
|
</div>
|
|
</div>
|
|
<!-- Contenu de l'onglet 7 !-->
|
|
<div id="pointé" class="contenu_onglet">
|
|
<!-- Boîte de commandes à droite !-->
|
|
<div class="boite_droite">
|
|
<!-- Bouton générateur !-->
|
|
<button id="bouton_générer" class="bouton_commande"></button>
|
|
<!-- Paramètres de la page !-->
|
|
<div class="parametres">
|
|
<!-- Choix du format de page !-->
|
|
<div class="etiquette haut"><span>Format de page</span></div>
|
|
<input type="radio" id="4/3" name="taille_page_pointé" value="4/3">4/3
|
|
<input type="radio" checked id="16/9" name="taille_page_pointé" value="16/9">16/9
|
|
<!-- Choix du type de point !-->
|
|
<div class="etiquette milieu"><span>Type de point</span></div>
|
|
<input type="radio" checked id="point" name="type_point_page_pointé" value="point"><span>•</span>
|
|
<input type="radio" id="plus" name="type_point_page_pointé" value="plus"><span>+</span>
|
|
<input type="radio" id="croix" name="type_point_page_pointé" value="croix"><span>x</span>
|
|
<!-- Choix du Maillage !-->
|
|
<div class="etiquette milieu"><span>Type de Maillage</span></div>
|
|
<input type="radio" checked id="pointé_carré" name="type_papier_pointé" value="pointé_carré"><span><b style="font-size:20pt">∷</b></span>
|
|
<input type="radio" id="pointé_iso" name="type_papier_pointé" value="pointé_iso"><span><b style="font-size:20pt">∴</b></span>
|
|
</div>
|
|
</div>
|
|
<!-- Boîte des options à gauche !-->
|
|
<div class="boite_gauche">
|
|
<!-- Option 1 !-->
|
|
<div class="etiquette haut"><span>Maillage</span></div>
|
|
<input type="text" id="taille_pointé" class="taille">
|
|
<div id="curseur_pointé" class="potentiometre" ></div>
|
|
<!-- Option 2 !-->
|
|
<div class="etiquette milieu"><span>Couleur des points/du fond</span></div>
|
|
<div class='palette'>
|
|
<input type='text' id='palette_pointé'/> <!-- Couleur des points !-->
|
|
<input type='text' id="palette_fond_pointé"/> <!-- Couleur du fond !-->
|
|
</div>
|
|
<!-- Option 3 !-->
|
|
<div class="etiquette milieu"><span>Épaisseur des points</span></div>
|
|
<input type="text" id="épaisseur_pointé" readonly class="taille">
|
|
<div id="curseur_épaisseur_pointé" class="potentiometre" ></div>
|
|
</div>
|
|
</div>
|
|
<!-- Contenu de l'onglet 8 !-->
|
|
<div id="aide" class="contenu_onglet"> <!-- Aide ponctuelle !-->
|
|
<h1>PAPIER</h1>
|
|
<h2>Application pour Open-Sankoré / OpenBoard</h2>
|
|
|
|
<p>
|
|
<li>Cliquer sur les onglets pour choisir le papier à mettre en fond de page.</li>
|
|
<li>Modifier les paramètres du papier et visualisez le résultat dans la fenêtre d'apeçu.</li>
|
|
<li>Cliquer sur le bouton <button class="petit_bouton_commande" width="10" height="10" disabled></button> pour générer le fond.</li>
|
|
</p>
|
|
<p style="text-align:center">Développée par F. Le Cléac'h
|
|
<img src="images/cc-by-nc-sa-min.svg">
|
|
Version 2.5.4 Novembre 2020
|
|
</p>
|
|
</div>
|
|
<canvas id="aperçu" width="300px" height="200px">Votre navigateur ne supporte pas le CANVAS</canvas> <!-- fenêtre d'aperçu dans l'onglet !-->
|
|
<canvas id="feuille" width="1820px" height="1024px">Votre navigateur ne supporte pas le CANVAS</canvas> <!-- page finale 4/3 ou 16/9 !-->
|
|
</div>
|
|
</body>
|
|
</html>
|
|
|