новые иконки в OpenBoard
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.
OpenBoard/resources/library/applications/Papier.wgt/papier.html

323 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<EFBFBD>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 <EFBFBD>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<EFBFBD>tr<EFBFBD></button>
<button class="lien_onglet" onclick="onglet(event, 'point<EFBFBD>')">Point<EFBFBD></button>
<button class="lien_onglet" onclick="onglet(event, 'aide')">?</button>
</div>
<!-- Contenu de l'onglet 1 !-->
<div id="uni" class="contenu_onglet">
<!-- Bo<EFBFBD>te de commandes <EFBFBD> droite !-->
<div class="boite_droite">
<!-- Bouton g<EFBFBD>n<EFBFBD>rateur !-->
<button id="bouton_g<EFBFBD>n<EFBFBD>rer" class="bouton_commande"></button>
<!-- Param<EFBFBD>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<EFBFBD>te des options <EFBFBD> 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<EFBFBD>te de commandes <EFBFBD> droite !-->
<div class="boite_droite">
<!-- Bouton g<EFBFBD>n<EFBFBD>rateur !-->
<button id="bouton_g<EFBFBD>n<EFBFBD>rer" class="bouton_commande"></button>
<!-- Param<EFBFBD>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<EFBFBD>te des options <EFBFBD> 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><EFBFBD>paisseur des lignes</span></div>
<input type="text" id="<EFBFBD>paisseur_seyes" readonly class="taille">
<div id="curseur_<EFBFBD>paisseur_seyes" class="potentiometre" ></div>
</div>
</div>
<!-- Contenu de l'onglet 3 !-->
<div id="maternelle" class="contenu_onglet">
<!-- Bo<EFBFBD>te de commandes <EFBFBD> droite !-->
<div class="boite_droite">
<!-- Bouton g<EFBFBD>n<EFBFBD>rateur !-->
<button id="bouton_g<EFBFBD>n<EFBFBD>rer" class="bouton_commande"></button>
<!-- Param<EFBFBD>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<EFBFBD>te des options <EFBFBD> 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><EFBFBD>paisseur des lignes</span></div>
<input type="text" id="<EFBFBD>paisseur_maternelle" readonly class="taille">
<div id="curseur_<EFBFBD>paisseur_maternelle" class="potentiometre" ></div>
</div>
</div>
<!-- Contenu de l'onglet 3 !-->
<div id="guide_ane" class="contenu_onglet">
<!-- Bo<EFBFBD>te de commandes <EFBFBD> droite !-->
<div class="boite_droite">
<!-- Bouton g<EFBFBD>n<EFBFBD>rateur !-->
<button id="bouton_g<EFBFBD>n<EFBFBD>rer" class="bouton_commande"></button>
<!-- Param<EFBFBD>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<EFBFBD>te des options <EFBFBD> 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><EFBFBD>paisseur des lignes</span></div>
<input type="text" id="<EFBFBD>paisseur_guide_ane" readonly class="taille">
<div id="curseur_<EFBFBD>paisseur_guide_ane" class="potentiometre" ></div>
</div>
</div>
<!-- Contenu de l'onglet 4 !-->
<div id="dys" class="contenu_onglet">
<!-- Bo<EFBFBD>te de commandes <EFBFBD> droite !-->
<div class="boite_droite">
<!-- Bouton g<EFBFBD>n<EFBFBD>rateur !-->
<button id="bouton_g<EFBFBD>n<EFBFBD>rer" class="bouton_commande"></button>
<!-- Param<EFBFBD>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<EFBFBD>te des options <EFBFBD> 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><EFBFBD>paisseur des lignes</span></div>
<input type="text" id="<EFBFBD>paisseur_dys" readonly class="taille">
<div id="curseur_<EFBFBD>paisseur_dys" class="potentiometre" ></div>
</div>
</div>
<!-- Contenu de l'onglet 5 !-->
<div id="quadrillage" class="contenu_onglet">
<!-- Bo<EFBFBD>te de commandes <EFBFBD> droite !-->
<div class="boite_droite">
<!-- Bouton g<EFBFBD>n<EFBFBD>rateur !-->
<button id="bouton_g<EFBFBD>n<EFBFBD>rer" class="bouton_commande"></button>
<!-- Param<EFBFBD>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<EFBFBD>te des options <EFBFBD> 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><EFBFBD>paisseur des lignes</span></div>
<input type="text" id="<EFBFBD>paisseur_quadrillage" readonly class="taille">
<div id="curseur_<EFBFBD>paisseur_quadrillage" class="potentiometre" ></div>
</div>
</div>
<!-- Contenu de l'onglet 6 !-->
<div id="mm" class="contenu_onglet">
<!-- Bo<EFBFBD>te de commandes <EFBFBD> droite !-->
<div class="boite_droite">
<!-- Bouton g<EFBFBD>n<EFBFBD>rateur !-->
<button id="bouton_g<EFBFBD>n<EFBFBD>rer" class="bouton_commande"></button>
<!-- Param<EFBFBD>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<EFBFBD>te des options <EFBFBD> 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><EFBFBD>paisseur des lignes</span></div>
<input type="text" id="<EFBFBD>paisseur_mm" readonly class="taille">
<div id="curseur_<EFBFBD>paisseur_mm" class="potentiometre" ></div>
</div>
</div>
<!-- Contenu de l'onglet 7 !-->
<div id="point<EFBFBD>" class="contenu_onglet">
<!-- Bo<EFBFBD>te de commandes <EFBFBD> droite !-->
<div class="boite_droite">
<!-- Bouton g<EFBFBD>n<EFBFBD>rateur !-->
<button id="bouton_g<EFBFBD>n<EFBFBD>rer" class="bouton_commande"></button>
<!-- Param<EFBFBD>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<EFBFBD>" value="4/3">4/3
<input type="radio" checked id="16/9" name="taille_page_point<EFBFBD>" 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<EFBFBD>" value="point"><span>&#8226;</span>
<input type="radio" id="plus" name="type_point_page_point<EFBFBD>" value="plus"><span>+</span>
<input type="radio" id="croix" name="type_point_page_point<EFBFBD>" value="croix"><span>x</span>
<!-- Choix du Maillage !-->
<div class="etiquette milieu"><span>Type de Maillage</span></div>
<input type="radio" checked id="point<EFBFBD>_carr<EFBFBD>" name="type_papier_point<EFBFBD>" value="point<EFBFBD>_carr<EFBFBD>"><span><b style="font-size:20pt">&#x2237;</b></span>
<input type="radio" id="point<EFBFBD>_iso" name="type_papier_point<EFBFBD>" value="point<EFBFBD>_iso"><span><b style="font-size:20pt">&#x2234;</b></span>
</div>
</div>
<!-- Bo<EFBFBD>te des options <EFBFBD> gauche !-->
<div class="boite_gauche">
<!-- Option 1 !-->
<div class="etiquette haut"><span>Maillage</span></div>
<input type="text" id="taille_point<EFBFBD>" class="taille">
<div id="curseur_point<EFBFBD>" 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<EFBFBD>'/> <!-- Couleur des points !-->
<input type='text' id="palette_fond_point<EFBFBD>"/> <!-- Couleur du fond !-->
</div>
<!-- Option 3 !-->
<div class="etiquette milieu"><span><EFBFBD>paisseur des points</span></div>
<input type="text" id="<EFBFBD>paisseur_point<EFBFBD>" readonly class="taille">
<div id="curseur_<EFBFBD>paisseur_point<EFBFBD>" 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<EFBFBD> / OpenBoard</h2>
<p>
<li>Cliquer sur les onglets pour choisir le papier <EFBFBD> mettre en fond de page.</li>
<li>Modifier les param<EFBFBD>tres du papier et visualisez le r<EFBFBD>sultat dans la fen<EFBFBD>tre d'ape<EFBFBD>u.</li>
<li>Cliquer sur le bouton <button class="petit_bouton_commande" width="10" height="10" disabled></button> pour g<EFBFBD>n<EFBFBD>rer le fond.</li>
</p>
<p style="text-align:center">D<EFBFBD>velopp<EFBFBD>e par F. Le Cl<EFBFBD>ac'h
<a href="http://creativecommons.org/licenses/by-nc-sa/3.0/fr/legalcode" target="blank"><img src="images/cc-by-nc-sa-min.svg"></a>
<a href="rev.txt" target="blank">Version 2.5.4</a> Novembre 2020
</p>
</div>
<canvas id="aper<EFBFBD>u" width="300px" height="200px">Votre navigateur ne supporte pas le CANVAS</canvas> <!-- fen<EFBFBD>tre d'aper<EFBFBD>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>