Commit e0d93964 authored by Anatoly Mihalchenko's avatar Anatoly Mihalchenko

Merge branch 'master' of github.com:Sankore/Sankore-3.1

parents 4ab21015 ac24a97e
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!--
GeoInfo permet d'obtenir différentes informations sur les pays du monde.
Copyright (C) 2010 Baptiste Sottas — Tous droits réservés.
Ce programme est un logiciel libre ; vous pouvez le redistribuer ou le
modifier suivant les termes de la “GNU General Public License” telle que
publiée par la Free Software Foundation : soit la version 3 de cette
licence, soit (à votre gré) toute version ultérieure.
Ce programme est distribué dans l’espoir qu’il vous sera utile, mais SANS
AUCUNE GARANTIE : sans même la garantie implicite de COMMERCIALISABILITÉ
ni d’ADÉQUATION À UN OBJECTIF PARTICULIER. Consultez la Licence Générale
Publique GNU pour plus de détails.
Vous devriez avoir reçu une copie de la Licence Générale Publique GNU avec
ce programme ; si ce n’est pas le cas, consultez :
http://www.gnu.org/licenses
baptiste.sottas@bluewin.ch
<!--
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
-->
<html>
<head>
......@@ -33,7 +26,7 @@
<script type="text/javascript" src="js/GeoInfo.js"></script>
</head>
<body onLoad="recevoirPays('')"; onClick="coords = coords + (event.clientX-13) + ',' + (event.clientY-13) + ','">
<body onLoad="recevoirPays('')" onClick="coords = coords + (event.clientX-13) + ',' + (event.clientY-13) + ','">
<!-- Div contenant le point d'interrogation pour les satistiques-->
<div class="question">
......@@ -46,28 +39,28 @@
<!-- Zones délimitant chaque continent-->
<map name="monde1">
<area class="curseur" alt="Amerique du Nord" shape="poly" coords="10,57,45,32,103,31,120,20,142,25,172,10,210,8,283,9,270,24,262,37,197,74,198,83,134,119,168,149,171,169,159,166,139,160,124,167,114,173,65,146,46,106,49,89,57,68,47,56,22,65,9,64"
onMouseOver="writeText('Amerique du Nord'); document.getElementById('monde').src='images/Cartes/Carte_Monde_AmeriqueNord.bmp'"
<area class="curseur" alt="North America" shape="poly" coords="10,57,45,32,103,31,120,20,142,25,172,10,210,8,283,9,270,24,262,37,197,74,198,83,134,119,168,149,171,169,159,166,139,160,124,167,114,173,65,146,46,106,49,89,57,68,47,56,22,65,9,64"
onMouseOver="writeText('North America'); document.getElementById('monde').src='images/Cartes/Carte_Monde_AmeriqueNord.bmp'"
onMouseOut="effaceTexte(); document.getElementById('monde').src='images/Cartes/Carte_Monde_1.png'"
onClick="document.getElementById('carteAmeriqueNord').innerHTML = imageAmeriqueNord; apparition('carteAmeriqueNord')"
/>
<area class="curseur" alt="Eurasie" shape="poly" coords="279,104,309,101,357,114,384,152,415,141,434,142,453,177,466,175,476,144,505,207,554,211,562,184,542,134,545,118,573,108,560,71,583,73,580,59,604,40,460,20,416,12,401,23,377,17,366,30,339,25,335,13,307,14,313,33,296,48,300,65,284,54,269,38,257,46,275,68,284,83,272,90,272,102,279,102,294,100"
onMouseOver="writeText('Eurasie'); document.getElementById('monde').src='images/Cartes/Carte_Monde_Eurasie.bmp'"
<area class="curseur" alt="Eurasia" shape="poly" coords="279,104,309,101,357,114,384,152,415,141,434,142,453,177,466,175,476,144,505,207,554,211,562,184,542,134,545,118,573,108,560,71,583,73,580,59,604,40,460,20,416,12,401,23,377,17,366,30,339,25,335,13,307,14,313,33,296,48,300,65,284,54,269,38,257,46,275,68,284,83,272,90,272,102,279,102,294,100"
onMouseOver="writeText('Eurasia'); document.getElementById('monde').src='images/Cartes/Carte_Monde_Eurasie.bmp'"
onMouseOut="effaceTexte(); document.getElementById('monde').src='images/Cartes/Carte_Monde_1.png'"
onClick="document.getElementById('carteEurasie').innerHTML = imageEurasie; apparition('carteEurasie')"
/>
<area class="curseur" alt="Amerique du Sud" shape="poly" coords="139,160,159,167,220,201,206,241,171,291,188,305,174,318,148,299,141,234,113,198,124,177,124,168,139,158"
onMouseOver="writeText('Amerique du Sud'); document.getElementById('monde').src='images/Cartes/Carte_Monde_AmeriqueSud.bmp'"
<area class="curseur" alt="South America" shape="poly" coords="139,160,159,167,220,201,206,241,171,291,188,305,174,318,148,299,141,234,113,198,124,177,124,168,139,158"
onMouseOver="writeText('South America'); document.getElementById('monde').src='images/Cartes/Carte_Monde_AmeriqueSud.bmp'"
onMouseOut="effaceTexte(); document.getElementById('monde').src='images/Cartes/Carte_Monde_1.png'"
onClick="document.getElementById('carteAmeriqueSud').innerHTML = imageAmeriqueSud; apparition('carteAmeriqueSud')"
/>
<area class="curseur" alt="Afrique" shape="poly" coords="279,107,356,119,395,165,390,237,334,267,301,179,257,174,265,135"
onMouseOver="writeText('Afrique'); document.getElementById('monde').src='images/Cartes/Carte_Monde_Afrique.bmp'"
<area class="curseur" alt="Africa" shape="poly" coords="279,107,356,119,395,165,390,237,334,267,301,179,257,174,265,135"
onMouseOver="writeText('Africa'); document.getElementById('monde').src='images/Cartes/Carte_Monde_Afrique.bmp'"
onMouseOut="effaceTexte(); document.getElementById('monde').src='images/Cartes/Carte_Monde_1.png'"
onClick="document.getElementById('carteAfrique').innerHTML = imageAfrique; apparition('carteAfrique')"
/>
<area class="curseur" alt="Oceanie" shape="poly" coords="566,191,563,215,522,238,519,271,553,264,570,290,607,298,644,278,643,225,610,194,567,189,565,194,566,213,547,223"
onMouseOver="writeText('Oceanie'); document.getElementById('monde').src='images/Cartes/Carte_Monde_Oceanie.bmp'"
<area class="curseur" alt="Oceania" shape="poly" coords="566,191,563,215,522,238,519,271,553,264,570,290,607,298,644,278,643,225,610,194,567,189,565,194,566,213,547,223"
onMouseOver="writeText('Oceania'); document.getElementById('monde').src='images/Cartes/Carte_Monde_Oceanie.bmp'"
onMouseOut="effaceTexte(); document.getElementById('monde').src='images/Cartes/Carte_Monde_1.png'"
onClick="document.getElementById('carteOceanie').innerHTML = imageOceanie; apparition('carteOceanie')"/>
</map>
......@@ -1010,7 +1003,7 @@
</div></br>
<!-- Divs pour afficher les détails des pays comparés-->
<span class="comparer">Comparer les pays: <input id="compare" type="checkbox" onClick="vide()" ></span>
<span class="comparer">Compare countries:<input id="compare" type="checkbox" onClick="vide()" ></span>
<table width="654px" border="0">
<tr>
<td><div class="styleDiv" id="info1"></td>
......@@ -1023,1062 +1016,1062 @@
<!-- Informations sur les pays d'Afrique-->
<div id="MA" class="cacher">
<span class="nomPays">Maroc</span></br>
<span class="capitalePays">Capitale: Rabat</span></br>
<span class="nomPays">Morocco</span></br>
<span class="capitalePays">Capital city: Rabat</span></br>
<object data="images/Drapeaux/Afrique/Flag_of_Morocco.png" class="drapeaux"/>
</div>
<div id="DZ" class="cacher">
<span class="nomPays">Algerie</span></br>
<span class="capitalePays">Capitale: Alger</span></br>
<span class="nomPays">Algeria</span></br>
<span class="capitalePays">Capital city: Alger</span></br>
<img src="images/Drapeaux/Afrique/Flag_of_Algeria.png" class="drapeaux"/>
</div>
<div id="TN" class="cacher">
<span class="nomPays">Tunisie</span></br>
<span class="capitalePays">Capitale: Tunis</span></br>
<span class="nomPays">Tunisia/span></br>
<span class="capitalePays">Capital city: Tunis</span></br>
<object data="images/Drapeaux/Afrique/Flag_of_Tunisia.png" class="drapeaux"/>
</div>
<div id="LY" class="cacher">
<span class="nomPays">Libye</span></br>
<span class="capitalePays">Capitale: Tripoli</span></br>
<span class="nomPays">Libya</span></br>
<span class="capitalePays">Capital city: Tripoli</span></br>
<object data="images/Drapeaux/Afrique/Flag_of_Libya.png" class="drapeaux"/>
</div>
<div id="EG" class="cacher">
<span class="nomPays">Egypte</span></br>
<span class="capitalePays">Capitale: Le Caire</span></br>
<span class="nomPays">Egypt</span></br>
<span class="capitalePays">Capital city: Cairo</span></br>
<object data="images/Drapeaux/Afrique/Flag_of_Egypt.png" class="drapeaux"/>
</div>
<div id="Sahara occidental" class="cacher">
<span class="nomPays">Sahara occidental</span></br>
<span class="capitalePays">Capitale: </span></br>
<span class="capitalePays">Capital city: </span></br>
<object data="images/Drapeaux/Afrique/Flag_of_.png" class="drapeaux"/>
</div>
<div id="MR" class="cacher">
<span class="nomPays">Mauritanie</span></br>
<span class="capitalePays">Capitale: Nouakchott</span></br>
<span class="nomPays">Mauritania</span></br>
<span class="capitalePays">Capital city: Nouakchott</span></br>
<object data="images/Drapeaux/Afrique/Flag_of_Mauritania.png" class="drapeaux"/>
</div>
<div id="ML" class="cacher">
<span class="nomPays">Mali</span></br>
<span class="capitalePays">Capitale: Bamako</span></br>
<span class="capitalePays">Capital city: Bamako</span></br>
<object data="images/Drapeaux/Afrique/Flag_of_Mali.png" class="drapeaux"/>
</div>
<div id="NE" class="cacher">
<span class="nomPays">Niger</span></br>
<span class="capitalePays">Capitale: Niamey</span></br>
<span class="capitalePays">Capital city: Niamey</span></br>
<img src="images/Drapeaux/Afrique/Flag_of_Niger.png" class="drapeaux"/>
</div>
<div id="TD" class="cacher">
<span class="nomPays">Tchad</span></br>
<span class="capitalePays">Capitale: Ndjamena</span></br>
<span class="capitalePays">Capital city: Ndjamena</span></br>
<img src="images/Drapeaux/Afrique/Flag_of_Chad.png" class="drapeaux"/>
</div>
<div id="SD" class="cacher">
<span class="nomPays">Soudan</span></br>
<span class="capitalePays">Capitale: Khartoum</span></br>
<span class="capitalePays">Capital city: Khartoum</span></br>
<img src="images/Drapeaux/Afrique/Flag_of_Sudan.png" class="drapeaux"/>
</div>
<div id="ER" class="cacher">
<span class="nomPays">Erythree</span></br>
<span class="capitalePays">Capitale: Asmara</span></br>
<span class="nomPays">Eritrea</span></br>
<span class="capitalePays">Capital city: Asmara</span></br>
<img src="images/Drapeaux/Afrique/Flag_of_Eritrea.png" class="drapeaux"/>
</div>
<div id="DJ" class="cacher"><span class="nomPays">Djibouti</span></br>
<span class="capitalePays">Capitale: Djibouti</span></br>
<span class="capitalePays">Capital city: Djibouti</span></br>
<img src="images/Drapeaux/Afrique/Flag_of_Djibouti.png" class="drapeaux"/>
</div>
<div id="ET" class="cacher">
<span class="nomPays">Ethiopie</span></br>
<span class="capitalePays">Capitale: Addis Abeba</span></br>
<span class="nomPays">Ethiopia</span></br>
<span class="capitalePays">Capital city: Addis Ababa</span></br>
<img src="images/Drapeaux/Afrique/Flag_of_Ethiopia.png" class="drapeaux"/>
</div>
<div id="SO" class="cacher">
<span class="nomPays">Somalie</span></br>
<span class="capitalePays">Capitale: Mogadiscio</span></br>
<span class="nomPays">Somalia</span></br>
<span class="capitalePays">Capital city: Mogadiscio</span></br>
<img src="images/Drapeaux/Afrique/Flag_of_Somalia.png" class="drapeaux"/>
</div>
<div id="KE" class="cacher">
<span class="nomPays">Kenya</span></br>
<span class="capitalePays">Capitale: Nairobi</span></br>
<span class="capitalePays">Capital city: Nairobi</span></br>
<img src="images/Drapeaux/Afrique/Flag_of_Kenya.png" class="drapeaux"/>
</div>
<div id="UG" class="cacher">
<span class="nomPays">Ouganda</span></br>
<span class="capitalePays">Capitale: Kampala</span></br>
<span class="nomPays">Uganda</span></br>
<span class="capitalePays">Capital city: Kampala</span></br>
<img src="images/Drapeaux/Afrique/Flag_of_Uganda.png" class="drapeaux"/>
</div>
<div id="CD" class="cacher">
<span class="nomPays">Republique democratique du Congo</span></br>
<span class="capitalePays">Capitale: Kinshasa</span></br>
<span class="nomPays">Democratic Republic of Congo</span></br>
<span class="capitalePays">Capital city: Kinshasa</span></br>
<img src="images/Drapeaux/Afrique/Flag_of_the_Democratic_Republic_of_the_Congo.png" class="drapeaux"/>
</div>
<div id="CF" class="cacher">
<span class="nomPays">Republique centrafricaine</span></br>
<span class="capitalePays">Capitale: Bangui</span></br>
<span class="nomPays">Central African Republic</span></br>
<span class="capitalePays">Capital city: Bangui</span></br>
<img src="images/Drapeaux/Afrique/Flag_of_the_Central_African_Republic.png" class="drapeaux"/>
</div>
<div id="CM" class="cacher">
<span class="nomPays">Cameroun</span></br>
<span class="capitalePays">Capitale: Yaounde</span></br>
<span class="capitalePays">Capital city: Yaounde</span></br>
<img src="images/Drapeaux/Afrique/Flag_of_Cameroon.png" class="drapeaux"/>
</div>
<div id="NG" class="cacher">
<span class="nomPays">Nigeria</span></br>
<span class="capitalePays">Capitale: Abuja</span></br>
<span class="capitalePays">Capital city: Abuja</span></br>
<img src="images/Drapeaux/Afrique/Flag_of_Nigeria.png" class="drapeaux"/>
</div>
<div id="BJ" class="cacher">
<span class="nomPays">Benin</span></br>
<span class="capitalePays">Capitale: Porto Novo</span></br>
<span class="capitalePays">Capital city: Porto Novo</span></br>
<img src="images/Drapeaux/Afrique/Flag_of_Benin.png" class="drapeaux"/>
</div>
<div id="TG" class="cacher">
<span class="nomPays">Togo</span></br>
<span class="capitalePays">Capitale: Lome</span></br>
<span class="capitalePays">Capital city: Lome</span></br>
<img src="images/Drapeaux/Afrique/Flag_of_Togo.png" class="drapeaux"/>
</div>
<div id="GH" class="cacher">
<span class="nomPays">Ghana</span></br>
<span class="capitalePays">Capitale: Accra</span></br>
<span class="capitalePays">Capital city: Accra</span></br>
<img src="images/Drapeaux/Afrique/Flag_of_Ghana.png" class="drapeaux"/>
</div>
<div id="CI" class="cacher">
<span class="nomPays">Cote d'Ivoire</span></br>
<span class="capitalePays">Capitale: Yamoussoukro</span></br>
<span class="capitalePays">Capital city: Yamoussoukro</span></br>
<img src="images/Drapeaux/Afrique/Flag_of_Cote_d'Ivoire.png" class="drapeaux"/>
</div>
<div id="BF" class="cacher">
<span class="nomPays">Burkina Faso</span></br>
<span class="capitalePays">Capitale: Ouagadougou</span></br>
<span class="capitalePays">Capital city: Ouagadougou</span></br>
<img src="images/Drapeaux/Afrique/Flag_of_Burkina_Faso.png" class="drapeaux"/>
</div>
<div id="LR" class="cacher">
<span class="nomPays">Liberia</span></br>
<span class="capitalePays">Capitale: Monravia</span></br>
<span class="capitalePays">Capital city: Monravia</span></br>
<img src="images/Drapeaux/Afrique/Flag_of_Liberia.png" class="drapeaux"/>
</div>
<div id="SL" class="cacher">
<span class="nomPays">Sierra Leone</span></br>
<span class="capitalePays">Capitale: Freetown</span></br>
<span class="capitalePays">Capital city: Freetown</span></br>
<img src="images/Drapeaux/Afrique/Flag_of_Sierra_Leone.png" class="drapeaux"/>
</div>
<div id="GN" class="cacher">
<span class="nomPays">Guinee</span></br>
<span class="capitalePays">Capitale: Conakry</span></br>
<span class="nomPays">Guinea</span></br>
<span class="capitalePays">Capital city: Conakry</span></br>
<img src="images/Drapeaux/Afrique/Flag_of_Guinea.png" class="drapeaux"/>
</div>
<div id="GW" class="cacher">
<span class="nomPays">Guinee-Bissau</span></br>
<span class="capitalePays">Capitale: Bissau</span></br>
<span class="nomPays">Guinea-Bissau</span></br>
<span class="capitalePays">Capital city: Bissau</span></br>
<img src="images/Drapeaux/Afrique/Flag_of_Guinea-Bissau.png" class="drapeaux"/>
</div>
<div id="SN" class="cacher">
<span class="nomPays">Senegal</span></br>
<span class="capitalePays">Capitale: Dakar</span></br>
<span class="capitalePays">Capital city: Dakar</span></br>
<img src="images/Drapeaux/Afrique/Flag_of_Senegal.png" class="drapeaux"/>
</div>
<div id="GM" class="cacher">
<span class="nomPays">Gambie</span></br>
<span class="capitalePays">Capitale: Banjul</span></br>
<span class="nomPays">Gambia</span></br>
<span class="capitalePays">Capital city: Banjul</span></br>
<img src="images/Drapeaux/Afrique/Flag_of_The_Gambia.png" class="drapeaux"/>
</div>
<div id="RW" class="cacher">
<span class="nomPays">Rwanda</span></br>
<span class="capitalePays">Capitale: Kigali</span></br>
<span class="capitalePays">Capital city: Kigali</span></br>
<img src="images/Drapeaux/Afrique/Flag_of_Rwanda.png" class="drapeaux"/>
</div>
<div id="BI" class="cacher">
<span class="nomPays">Burundi</span></br>
<span class="capitalePays">Capitale: Bujumbura</span></br>
<span class="capitalePays">Capital city: Bujumbura</span></br>
<img src="images/Drapeaux/Afrique/Flag_of_Burundi.png" class="drapeaux"/>
</div>
<div id="CG" class="cacher">
<span class="nomPays">Republique du Congo</span></br>
<span class="capitalePays">Capitale: Brazzaville</span></br>
<span class="nomPays">Republic of Congo</span></br>
<span class="capitalePays">Capital city: Brazzaville</span></br>
<img src="images/Drapeaux/Afrique/Flag_of_the_Republic_of_the_Congo.png" class="drapeaux"/>
</div>
<div id="GA" class="cacher">
<span class="nomPays">Gabon</span></br>
<span class="capitalePays">Capitale: Libreville</span></br>
<span class="capitalePays">Capital city: Libreville</span></br>
<img src="images/Drapeaux/Afrique/Flag_of_Gabon.png" class="drapeaux"/>
</div>
<div id="GQ" class="cacher">
<span class="nomPays">Guinee Equatoriale</span></br>
<span class="capitalePays">Capitale: Malabo</span></br>
<span class="nomPays">Equatorial Guinea</span></br>
<span class="capitalePays">Capital city: Malabo</span></br>
<img src="images/Drapeaux/Afrique/Flag_of_Equatorial_Guinea.png" class="drapeaux"/>
</div>
<div id="TZ" class="cacher">
<span class="nomPays">Tanzanie</span></br>
<span class="capitalePays">Capitale: Dodoma</span></br>
<span class="nomPays">Tanzania</span></br>
<span class="capitalePays">Capital city: Dodoma</span></br>
<img src="images/Drapeaux/Afrique/Flag_of_Tanzania.png" class="drapeaux"/>
</div>
<div id="MW" class="cacher">
<span class="nomPays">Malawi</span></br>
<span class="capitalePays">Capitale: Lilongwe</span></br>
<span class="capitalePays">Capital city: Lilongwe</span></br>
<img src="images/Drapeaux/Afrique/Flag_of_Malawi.png" class="drapeaux"/>
</div>
<div id="ZM" class="cacher">
<span class="nomPays">Zambie</span></br>
<span class="capitalePays">Capitale: Lusaka</span></br>
<span class="nomPays">Zambia</span></br>
<span class="capitalePays">Capital city: Lusaka</span></br>
<img src="images/Drapeaux/Afrique/Flag_of_Zambia.png" class="drapeaux"/>
</div>
<div id="AO" class="cacher">
<span class="nomPays">Angola</span></br>
<span class="capitalePays">Capitale: Luanda</span></br>
<span class="capitalePays">Capital city: Luanda</span></br>
<img src="images/Drapeaux/Afrique/Flag_of_Angola.png" class="drapeaux"/>
</div>
<div id="MZ" class="cacher">
<span class="nomPays">Mozambique</span></br>
<span class="capitalePays">Capitale: Maputo</span></br>
<span class="capitalePays">Capital city: Maputo</span></br>
<img src="images/Drapeaux/Afrique/Flag_of_Mozambique.png" class="drapeaux"/>
</div>
<div id="ZW" class="cacher">
<span class="nomPays">Zimbabwe</span></br>
<span class="capitalePays">Capitale: Harare</span></br>
<span class="capitalePays">Capital city: Harare</span></br>
<img src="images/Drapeaux/Afrique/Flag_of_Zimbabwe.png" class="drapeaux"/>
</div>
<div id="BW" class="cacher">
<span class="nomPays">Botswana</span></br>
<span class="capitalePays">Capitale: Gaborone</span></br>
<span class="capitalePays">Capital city: Gaborone</span></br>
<img src="images/Drapeaux/Afrique/Flag_of_Botswana.png" class="drapeaux"/>
</div>
<div id="NA" class="cacher">
<span class="nomPays">Namibie</span></br>
<span class="capitalePays">Capitale: Windhoec</span></br>
<span class="nomPays">Namibia</span></br>
<span class="capitalePays">Capital city: Windhoec</span></br>
<img src="images/Drapeaux/Afrique/Flag_of_Namibia.png" class="drapeaux"/>
</div>
<div id="ZA" class="cacher">
<span class="nomPays">Afrique du Sud</span></br>
<span class="capitalePays">Capitale: Pretoria</span></br>
<span class="nomPays">South Africa</span></br>
<span class="capitalePays">Capital city: Pretoria</span></br>
<img src="images/Drapeaux/Afrique/Flag_of_South_Africa.png" class="drapeaux"/>
</div>
<div id="LS" class="cacher">
<span class="nomPays">Lesotho</span></br>
<span class="capitalePays">Capitale: Maseru</span></br>
<span class="capitalePays">Capital city: Maseru</span></br>
<img src="images/Drapeaux/Afrique/Flag_of_Lesotho.png" class="drapeaux"/>
</div>
<div id="SZ" class="cacher">
<span class="nomPays">Swaziland</span></br>
<span class="capitalePays">Capitale: Mbabane</span></br>
<span class="capitalePays">Capital city: Mbabane</span></br>
<img src="images/Drapeaux/Afrique/Flag_of_Swaziland.png" class="drapeaux"/>
</div>
<div id="MG" class="cacher">
<span class="nomPays">Madagascar</span></br>
<span class="capitalePays">Capitale: Antananarivo</span></br>
<span class="capitalePays">Capital city: Antananarivo</span></br>
<img src="images/Drapeaux/Afrique/Flag_of_Madagascar.png" class="drapeaux"/>
</div>
<!-- Informations sur les pays d'Amerique du Sud-->
<div id="AR" class="cacher">
<span class="nomPays">Argentine</span></br>
<span class="capitalePays">Capitale: Buenos Aires</span></br>
<span class="capitalePays">Capital city: Buenos Aires</span></br>
<img src="images/Drapeaux/AmeriqueSud/Flag_of_Argentina.png" class="drapeaux"/>
</div>
<div id="CL" class="cacher">
<span class="nomPays">Chili</span></br>
<span class="capitalePays">Capitale: Santiago</span></br>
<span class="capitalePays">Capital city: Santiago</span></br>
<img src="images/Drapeaux/AmeriqueSud/Flag_of_Chile.png" class="drapeaux"/>
</div>
<div id="UY" class="cacher">
<span class="nomPays">Uruguay</span></br>
<span class="capitalePays">Capitale: Montevideo</span></br>
<span class="capitalePays">Capital city: Montevideo</span></br>
<img src="images/Drapeaux/AmeriqueSud/Flag_of_Uruguay.png" class="drapeaux"/>
</div>
<div id="PY" class="cacher">
<span class="nomPays">Paraguay</span></br>
<span class="capitalePays">Capitale: Asuncion</span></br>
<span class="capitalePays">Capital city: Asuncion</span></br>
<img src="images/Drapeaux/AmeriqueSud/Flag_of_Paraguay.png" class="drapeaux"/>
</div>
<div id="BO" class="cacher">
<span class="nomPays">Bolivie</span></br>
<span class="capitalePays">Capitale: La Paz</span></br>
<span class="nomPays">Bolivia</span></br>
<span class="capitalePays">Capital city: La Paz</span></br>
<img src="images/Drapeaux/AmeriqueSud/Flag_of_Bolivia.png" class="drapeaux"/>
</div>
<div id="BR" class="cacher">
<span class="nomPays">Bresil</span></br>
<span class="capitalePays">Capitale: Brasilia</span></br>
<span class="nomPays">Brazil</span></br>
<span class="capitalePays">Capital city: Brasilia</span></br>
<img src="images/Drapeaux/AmeriqueSud/Flag_of_Brazil.png" class="drapeaux"/>
</div>
<div id="PE" class="cacher">
<span class="nomPays">Perou</span></br>
<span class="capitalePays">Capitale: Lima</span></br>
<span class="nomPays">Peru</span></br>
<span class="capitalePays">Capital city: Lima</span></br>
<img src="images/Drapeaux/AmeriqueSud/Flag_of_Peru.png" class="drapeaux"/>
</div>
<div id="EC" class="cacher">
<span class="nomPays">Equateur</span></br>
<span class="capitalePays">Capitale: Quito</span></br>
<span class="nomPays">Ecuador</span></br>
<span class="capitalePays">Capital city: Quito</span></br>
<img src="images/Drapeaux/AmeriqueSud/Flag_of_Ecuador.png" class="drapeaux"/>
</div>
<div id="CO" class="cacher">
<span class="nomPays">Colombie</span></br>
<span class="capitalePays">Capitale: Bogota</span></br>
<span class="nomPays">Colombia</span></br>
<span class="capitalePays">Capital city: Bogota</span></br>
<img src="images/Drapeaux/AmeriqueSud/Flag_of_Colombia.png" class="drapeaux"/>
</div>
<div id="VE" class="cacher">
<span class="nomPays">Venezuela</span></br>
<span class="capitalePays">Capitale: Caracas</span></br>
<span class="capitalePays">Capital city: Caracas</span></br>
<img src="images/Drapeaux/AmeriqueSud/Flag_of_Venezuela.png" class="drapeaux"/>
</div>
<div id="GY" class="cacher">
<span class="nomPays">Guyana</span></br>
<span class="capitalePays">Capitale: Georgetown</span></br>
<span class="capitalePays">Capital city: Georgetown</span></br>
<img src="images/Drapeaux/AmeriqueSud/Flag_of_Guyana.png" class="drapeaux"/>
</div>
<div id="SR" class="cacher">
<span class="nomPays">Suriname</span></br>
<span class="capitalePays">Capitale: Paramaribo</span></br>
<span class="capitalePays">Capital city: Paramaribo</span></br>
<img src="images/Drapeaux/AmeriqueSud/Flag_of_Suriname.png" class="drapeaux"/>
</div>
<div id="GF" class="cacher">
<span class="nomPays">Guyane</span></br>
<span class="capitalePays">Capitale: Paris</span></br>
<span class="nomPays">Guyana</span></br>
<span class="capitalePays">Capital city: Paris</span></br>
<img src="images/Drapeaux/AmeriqueSud/Flag_of_France.png" class="drapeaux"/>
</div>
<!-- Informations sur les pays d'Amérique du Nord-->
<div id="CA" class="cacher">
<span class="nomPays">Canada</span></br>
<span class="capitalePays">Capitale: Ottawa</span></br>
<span class="capitalePays">Capital city: Ottawa</span></br>
<img src="images/Drapeaux/AmeriqueNord/Flag_of_Canada.png" class="drapeaux"/>
</div>
<div id="GL" class="cacher">
<span class="nomPays">Groenland</span></br>
<span class="capitalePays">Capitale: Nuuk</span></br>
<span class="nomPays">Greenland</span></br>
<span class="capitalePays">Capital city: Nuuk</span></br>
<img src="images/Drapeaux/AmeriqueNord/Flag_of_Greenland.png" class="drapeaux"/>
</div>
<div id="US" class="cacher">
<span class="nomPays">Etats-Unis d'Amerique</span></br>
<span class="capitalePays">Capitale: Washington DC</span></br>
<span class="nomPays">United States of America</span></br>
<span class="capitalePays">Capital city: Washington DC</span></br>
<img src="images/Drapeaux/AmeriqueNord/Flag_of_the_United_States.png" class="drapeaux"/>
</div>
<div id="MX" class="cacher">
<span class="nomPays">Mexique</span></br>
<span class="capitalePays">Capitale: Mexico</span></br>
<span class="nomPays">Mexico</span></br>
<span class="capitalePays">Capital city: Mexico</span></br>
<img src="images/Drapeaux/AmeriqueNord/Flag_of_Mexico.png" class="drapeaux"/>
</div>
<div id="CU" class="cacher">
<span class="nomPays">Cuba</span></br>
<span class="capitalePays">Capitale: La Havane</span></br>
<span class="capitalePays">Capital city: Havana</span></br>
<img src="images/Drapeaux/AmeriqueNord/Flag_of_Cuba.png" class="drapeaux"/>
</div>
<div id="HT" class="cacher">
<span class="nomPays">Haiti</span></br>
<span class="capitalePays">Capitale: Port-au-Prince</span></br>
<span class="capitalePays">Capital city: Port-au-Prince</span></br>
<img src="images/Drapeaux/AmeriqueNord/Flag_of_Haiti.png" class="drapeaux"/>
</div>
<div id="DO" class="cacher">
<span class="nomPays">Republique dominicaine</span></br>
<span class="capitalePays">Capitale: Saint-Domingue</span></br>
<span class="nomPays">Dominican Republic</span></br>
<span class="capitalePays">Capital city: Santo Domingo</span></br>
<img src="images/Drapeaux/AmeriqueNord/Flag_of_the_Dominican_Republic.png" class="drapeaux"/>
</div>
<div id="JM" class="cacher">
<span class="nomPays">Jamaique</span></br>
<span class="capitalePays">Capitale: Kingston</span></br>
<span class="nomPays">Jamaica</span></br>
<span class="capitalePays">Capital city: Kingston</span></br>
<img src="images/Drapeaux/AmeriqueNord/Flag_of_Jamaica.png" class="drapeaux"/>
</div>
<div id="BS" class="cacher">
<span class="nomPays">Bahamas</span></br>
<span class="capitalePays">Capitale: Nassau</span></br>
<span class="capitalePays">Capital city: Nassau</span></br>
<img src="images/Drapeaux/AmeriqueNord/Flag_of_the_Bahamas.png" class="drapeaux"/>
</div>
<div id="GT" class="cacher">
<span class="nomPays">Guatemala</span></br>
<span class="capitalePays">Capitale: Guatemala</span></br>
<span class="capitalePays">Capital city: Guatemala</span></br>
<img src="images/Drapeaux/AmeriqueNord/Flag_of_Guatemala.png" class="drapeaux"/>
</div>
<div id="BZ" class="cacher">
<span class="nomPays">Belize</span></br>
<span class="capitalePays">Capitale: Belmopan</span></br>
<span class="capitalePays">Capital city: Belmopan</span></br>
<img src="images/Drapeaux/AmeriqueNord/Flag_of_Belize.png" class="drapeaux"/>
</div>
<div id="SV" class="cacher">
<span class="nomPays">El Salvador</span></br>
<span class="capitalePays">Capitale: San Salvador</span></br>
<span class="nomPays">Salvador</span></br>
<span class="capitalePays">Capital city: San Salvador</span></br>
<img src="images/Drapeaux/AmeriqueNord/Flag_of_El_Salvador.png" class="drapeaux"/>
</div>
<div id="HN" class="cacher">
<span class="nomPays">Honduras</span></br>
<span class="capitalePays">Capitale: Tegucigalpa</span></br>
<span class="capitalePays">Capital city: Tegucigalpa</span></br>
<img src="images/Drapeaux/AmeriqueNord/Flag_of_Honduras.png" class="drapeaux"/>
</div>
<div id="NI" class="cacher">
<span class="nomPays">Nicaragua</span></br>
<span class="capitalePays">Capitale: Managua</span></br>
<span class="capitalePays">Capital city: Managua</span></br>
<img src="images/Drapeaux/AmeriqueNord/Flag_of_Nicaragua.png" class="drapeaux"/>
</div>
<div id="CR" class="cacher">
<span class="nomPays">Costa-Rica</span></br>
<span class="capitalePays">Capitale: San Jose</span></br>
<span class="capitalePays">Capital city: San Jose</span></br>
<img src="images/Drapeaux/AmeriqueNord/Flag_of_Costa_Rica.png" class="drapeaux"/>
</div>
<div id="PA" class="cacher">
<span class="nomPays">Panama</span></br>
<span class="capitalePays">Capitale: Panama</span></br>
<span class="capitalePays">Capital city: Panama</span></br>
<img src="images/Drapeaux/AmeriqueNord/Flag_of_Panama.png" class="drapeaux"/>
</div>
<!-- Informations sur les pays d'Oceanie-->
<div id="AU" class="cacher">
<span class="nomPays">Australie</span></br>
<span class="capitalePays">Capitale: Canberra</span></br>
<span class="nomPays">Australia</span></br>
<span class="capitalePays">Capital city: Canberra</span></br>
<img src="images/Drapeaux/Oceanie/Flag_of_Australia.png" class="drapeaux"/>
</div>
<div id="NZ" class="cacher">
<span class="nomPays">Nouvelle-Zelande</span></br>
<span class="capitalePays">Capitale: Wellington</span></br>
<span class="nomPays">New Zealand</span></br>
<span class="capitalePays">Capital city: Wellington</span></br>
<img src="images/Drapeaux/Oceanie/Flag_of_New_Zealand.png" class="drapeaux"/>
</div>
<div id="PG" class="cacher">
<span class="nomPays">Papouasie-Nouvelle-Guinee</span></br>
<span class="capitalePays">Capitale: Port Moresby</span></br>
<span class="nomPays">Papua New Guinea</span></br>
<span class="capitalePays">Capital city: Port Moresby</span></br>
<img src="images/Drapeaux/Oceanie/Flag_of_Papua_New_Guinea.png" class="drapeaux"/>
</div>
<div id="ID" class="cacher">
<span class="nomPays">Indonesie</span></br>
<span class="capitalePays">Capitale: Jakarta</span></br>
<span class="nomPays">Indonesia</span></br>
<span class="capitalePays">Capital city: Jakarta</span></br>
<img src="images/Drapeaux/Oceanie/Flag_of_Indonesia.png" class="drapeaux"/>
</div>
<div id="SB" class="cacher">
<span class="nomPays">Iles Salomon</span></br>
<span class="capitalePays">Capitale: Honiara</span></br>
<span class="nomPays">Solomon Islands</span></br>
<span class="capitalePays">Capital city: Honiara</span></br>
<img src="images/Drapeaux/Oceanie/Flag_of_the_Solomon_Islands.png" class="drapeaux"/>
</div>
<div id="VU" class="cacher">
<span class="nomPays">Vanuatu</span></br>
<span class="capitalePays">Capitale: Port-Vila</span></br>
<span class="capitalePays">Capital city: Port-Vila</span></br>
<img src="images/Drapeaux/Oceanie/Flag_of_Vanuatu.png" class="drapeaux"/>
</div>
<div id="NC" class="cacher">
<span class="nomPays">Nouvelle-Caledonie</span></br>
<span class="capitalePays">Capitale: Paris</span></br>
<span class="nomPays">New Caledonia</span></br>
<span class="capitalePays">Capital city: Paris</span></br>
<img src="images/Drapeaux/Oceanie/Flag_of_France.png" class="drapeaux"/>
</div>
<!-- Informations sur les pays d'Europe-->
<div id="AL" class="cacher">
<span class="nomPays">Albanie</span></br>
<span class="capitalePays">Capitale: Tirana</span></br>
<span class="nomPays">Albania</span></br>
<span class="capitalePays">Capital city: Tirana</span></br>
<img src="images/Drapeaux/Europe/Flag_of_Albania.png" class="drapeaux"/>
</div>
<div id="DE" class="cacher">
<span class="nomPays">Allemagne</span></br>
<span class="capitalePays">Capitale: Berlin</span></br>
<span class="nomPays">Germany</span></br>
<span class="capitalePays">Capital city: Berlin</span></br>
<img src="images/Drapeaux/Europe/Flag_of_Germany.png" class="drapeaux"/>
</div>
<div id="AD" class="cacher">
<span class="nomPays">Andorre</span></br>
<span class="capitalePays">Capitale: Andorre-la-Vieille</span></br>
<span class="nomPays">Andorra</span></br>
<span class="capitalePays">Capital city: Andorra la Vella</span></br>
<img src="images/Drapeaux/Europe/Flag_of_Andorra.png" class="drapeaux"/>
</div>
<div id="AM" class="cacher">
<span class="nomPays">Armenie</span></br>
<span class="capitalePays">Capitale: Erevan</span></br>
<span class="nomPays">Armenia</span></br>
<span class="capitalePays">Capital city: Erevan</span></br>
<img src="images/Drapeaux/Europe/Flag_of_Armenia.png" class="drapeaux"/>
</div>
<div id="AT" class="cacher">
<span class="nomPays">Autriche</span></br>
<span class="capitalePays">Capitale: Vienne</span></br>
<span class="nomPays">Austria</span></br>
<span class="capitalePays">Capital city: Vienne</span></br>
<img src="images/Drapeaux/Europe/Flag_of_Austria.png" class="drapeaux"/>
</div>
<div id="AZ" class="cacher">
<span class="nomPays">Azerbaidjan</span></br>
<span class="capitalePays">Capitale: Bakou</span></br>
<span class="nomPays">Azerbaijan</span></br>
<span class="capitalePays">Capital city: Baku</span></br>
<img src="images/Drapeaux/Europe/Flag_of_Azerbaijan.png" class="drapeaux"/>
</div>
<div id="BE" class="cacher">
<span class="nomPays">Belgique</span></br>
<span class="capitalePays">Capitale: Bruxelles</span></br>
<span class="nomPays">Belgium</span></br>
<span class="capitalePays">Capital city: Bruxelles</span></br>
<img src="images/Drapeaux/Europe/Flag_of_Belgium.png" class="drapeaux"/>
</div>
<div id="BY" class="cacher">
<span class="nomPays">Belarus</span></br>
<span class="capitalePays">Capitale: Minsk</span></br>
<span class="capitalePays">Capital city: Minsk</span></br>
<img src="images/Drapeaux/Europe/Flag_of_Belarus.png" class="drapeaux"/>
</div>
<div id="BA" class="cacher">
<span class="nomPays">Bosnie</span></br>
<span class="capitalePays">Capitale: Sarajevo</span></br>
<span class="nomPays">Bosnia</span></br>
<span class="capitalePays">Capital city: Sarajevo</span></br>
<img src="images/Drapeaux/Europe/Flag_of_Bosnia_and_Herzegovina.png" class="drapeaux"/>
</div>
<div id="BG" class="cacher">
<span class="nomPays">Bulgarie</span></br>
<span class="capitalePays">Capitale: Sofia</span></br>
<span class="nomPays">Bulgaria</span></br>
<span class="capitalePays">Capital city: Sofia</span></br>
<img src="images/Drapeaux/Europe/Flag_of_Bulgaria.png" class="drapeaux"/>
</div>
<div id="CY" class="cacher">
<span class="nomPays">Chypre</span></br>
<span class="capitalePays">Capitale: Nicosie</span></br>
<span class="nomPays">Cyprus</span></br>
<span class="capitalePays">Capital city: Nicosia</span></br>
<img src="images/Drapeaux/Europe/Flag_of_Cyprus.png" class="drapeaux"/>
</div>
<div id="HR" class="cacher">
<span class="nomPays">Croatie</span></br>
<span class="capitalePays">Capitale: Zagreb</span></br>
<span class="nomPays">Croatia</span></br>
<span class="capitalePays">Capital city: Zagreb</span></br>
<img src="images/Drapeaux/Europe/Flag_of_Croatia.png" class="drapeaux"/>
</div>
<div id="DK" class="cacher">
<span class="nomPays">Danemark</span></br>
<span class="capitalePays">Capitale: Copenhague</span></br>
<span class="nomPays">Denmark</span></br>
<span class="capitalePays">Capital city: Copenhagen</span></br>
<img src="images/Drapeaux/Europe/Flag_of_Denmark.png" class="drapeaux"/>
</div>
<div id="ES" class="cacher">
<span class="nomPays">Espagne</span></br>
<span class="capitalePays">Capitale: Madrid</span></br>
<span class="nomPays">Spain</span></br>
<span class="capitalePays">Capital city: Madrid</span></br>
<img src="images/Drapeaux/Europe/Flag_of_Spain.png" class="drapeaux"/>
</div>
<div id="EE" class="cacher">
<span class="nomPays">Estonie</span></br>
<span class="capitalePays">Capitale: Tallinn</span></br>
<span class="nomPays">Estonia</span></br>
<span class="capitalePays">Capital city: Tallinn</span></br>
<img src="images/Drapeaux/Europe/Flag_of_Estonia.png" class="drapeaux"/>
</div>
<div id="FI" class="cacher">
<span class="nomPays">Finlande</span></br>
<span class="capitalePays">Capitale: Helsinki</span></br>
<span class="nomPays">Finland</span></br>
<span class="capitalePays">Capital city: Helsinki</span></br>
<img src="images/Drapeaux/Europe/Flag_of_Finland.png" class="drapeaux"/>
</div>
<div id="FR" class="cacher">
<span class="nomPays">France</span></br>
<span class="capitalePays">Capitale: Paris</span></br>
<span class="capitalePays">Capital city: Paris</span></br>
<img src="images/Drapeaux/Europe/Flag_of_France.png" class="drapeaux"/>
</div>
<div id="GE" class="cacher">
<span class="nomPays">Georgie</span></br>
<span class="capitalePays">Capitale: Tbilissi</span></br>
<span class="nomPays">Georgia</span></br>
<span class="capitalePays">Capital city: Tbilisi</span></br>
<img src="images/Drapeaux/Europe/Flag_of_Georgia.png" class="drapeaux"/>
</div>
<div id="EL" class="cacher">
<span class="nomPays">Grece</span></br>
<span class="capitalePays">Capitale: Athenes</span></br>
<span class="nomPays">Greece</span></br>
<span class="capitalePays">Capital city: Athenes</span></br>
<img src="images/Drapeaux/Europe/Flag_of_Greece.png" class="drapeaux"/>
</div>
<div id="HU" class="cacher">
<span class="nomPays">Hongrie</span></br>
<span class="capitalePays">Capitale: Budapest</span></br>
<span class="nomPays">Hungary</span></br>
<span class="capitalePays">Capital city: Budapest</span></br>
<img src="images/Drapeaux/Europe/Flag_of_Hungary.png" class="drapeaux"/>
</div>
<div id="IE" class="cacher">
<span class="nomPays">Irlande</span></br>
<span class="capitalePays">Capitale: Dublin</span></br>
<span class="nomPays">Ireland</span></br>
<span class="capitalePays">Capital city: Dublin</span></br>
<img src="images/Drapeaux/Europe/Flag_of_Ireland.png" class="drapeaux"/>
</div>
<div id="IS" class="cacher">
<span class="nomPays">Islande</span></br>
<span class="capitalePays">Capitale: Reykjavik</span></br>
<span class="nomPays">Island</span></br>
<span class="capitalePays">Capital city: Reykjavik</span></br>
<img src="images/Drapeaux/Europe/Flag_of_Iceland.png" class="drapeaux"/>
</div>
<div id="IT" class="cacher">
<span class="nomPays">Italie</span></br>
<span class="capitalePays">Capitale: Rome</span></br>
<span class="nomPays">Italy</span></br>
<span class="capitalePays">Capital city: Rome</span></br>
<img src="images/Drapeaux/Europe/Flag_of_Italy.png" class="drapeaux"/>
</div>
<div id="LV" class="cacher">
<span class="nomPays">Lettonie</span></br>
<span class="capitalePays">Capitale: Riga</span></br>
<span class="nomPays">Latvia</span></br>
<span class="capitalePays">Capital city: Riga</span></br>
<img src="images/Drapeaux/Europe/Flag_of_Latvia.png" class="drapeaux"/>
</div>
<div id="LI" class="cacher">
<span class="nomPays">Liechtenstein</span></br>
<span class="capitalePays">Capitale: Vaduz</span></br>
<span class="capitalePays">Capital city: Vaduz</span></br>
<img src="images/Drapeaux/Europe/Flag_of_Liechtenstein.png" class="drapeaux"/>
</div>
<div id="LT" class="cacher">
<span class="nomPays">Lituanie</span></br>
<span class="capitalePays">Capitale: Vilnius</span></br>
<span class="nomPays">Lithuania</span></br>
<span class="capitalePays">Capital city: Vilnius</span></br>
<img src="images/Drapeaux/Europe/Flag_of_Lithuania.png" class="drapeaux"/>
</div>
<div id="LU" class="cacher">
<span class="nomPays">Luxembourg</span></br>
<span class="capitalePays">Capitale: Luxembourg</span></br>
<span class="capitalePays">Capital city: Luxembourg</span></br>
<img src="images/Drapeaux/Europe/Flag_of_Luxembourg.png" class="drapeaux"/>
</div>
<div id="MK" class="cacher">
<span class="nomPays">Macedoine</span></br>
<span class="capitalePays">Capitale: Skopje</span></br>
<span class="capitalePays">Capital city: Skopje</span></br>
<img src="images/Drapeaux/Europe/Flag_of_Macedonia.png" class="drapeaux"/>
</div>
<div id="MT" class="cacher">
<span class="nomPays">Malte</span></br>
<span class="capitalePays">Capitale: La Valette</span></br>
<span class="nomPays">Malta</span></br>
<span class="capitalePays">Capital city: La Valetta</span></br>
<img src="images/Drapeaux/Europe/Flag_of_Malta.png" class="drapeaux"/>
</div>
<div id="MD" class="cacher">
<span class="nomPays">Moldavie</span></br>
<span class="capitalePays">Capitale: Chisinau</span></br>
<span class="nomPays">Moldavia</span></br>
<span class="capitalePays">Capital city: Chisinau</span></br>
<img src="images/Drapeaux/Europe/Flag_of_Moldova.png" class="drapeaux"/>
</div>
<div id="MC" class="cacher">
<span class="nomPays">Monaco</span></br>
<span class="capitalePays">Capitale: Monaco</span></br>
<span class="capitalePays">Capital city: Monaco</span></br>
<img src="images/Drapeaux/Europe/Flag_of_Monaco.png" class="drapeaux"/>
</div>
<div id="ME" class="cacher">
<span class="nomPays">Montenegro</span></br>
<span class="capitalePays">Capitale: Podaorica</span></br>
<span class="capitalePays">Capital city: Podaorica</span></br>
<img src="images/Drapeaux/Europe/Flag_of_Montenegro.png" class="drapeaux"/>
</div>
<div id="NO" class="cacher">
<span class="nomPays">Norvege</span></br>
<span class="capitalePays">Capitale: Oslo</span></br>
<span class="nomPays">Norway</span></br>
<span class="capitalePays">Capital city: Oslo</span></br>
<img src="images/Drapeaux/Europe/Flag_of_Norway.png" class="drapeaux"/>
</div>
<div id="NL" class="cacher">
<span class="nomPays">Pays-Bas</span></br>
<span class="capitalePays">Capitale: Amsterdam</span></br>
<span class="capitalePays">Capital city: Amsterdam</span></br>
<img src="images/Drapeaux/Europe/Flag_of_the_Netherlands.png" class="drapeaux"/>
</div>
<div id="PL" class="cacher">
<span class="nomPays">Pologne</span></br>
<span class="capitalePays">Capitale: Varsovie</span></br>
<span class="nomPays">Poland</span></br>
<span class="capitalePays">Capital city: Warsaw</span></br>
<img src="images/Drapeaux/Europe/Flag_of_Poland.png" class="drapeaux"/>
</div>
<div id="PT" class="cacher">
<span class="nomPays">Portugal</span></br>
<span class="capitalePays">Capitale: Lisbonne</span></br>
<span class="capitalePays">Capital city: Lisbon</span></br>
<img src="images/Drapeaux/Europe/Flag_of_Portugal.png" class="drapeaux"/>
</div>
<div id="CZ" class="cacher">
<span class="nomPays">Republique tcheque</span></br>
<span class="capitalePays">Capitale: Prague</span></br>
<span class="nomPays">Czech Republic</span></br>
<span class="capitalePays">Capital city: Prague</span></br>
<img src="images/Drapeaux/Europe/Flag_of_the_Czech_Republic.png" class="drapeaux"/>
</div>
<div id="RO" class="cacher">
<span class="nomPays">Roumanie</span></br>
<span class="capitalePays">Capitale: Bucarest</span></br>
<span class="nomPays">Romania</span></br>
<span class="capitalePays">Capital city: Bucharest</span></br>
<img src="images/Drapeaux/Europe/Flag_of_Romania.png" class="drapeaux"/>
</div>
<div id="UK" class="cacher">
<span class="nomPays">Royaume-Uni</span></br>
<span class="capitalePays">Capitale: Londres</span></br>
<span class="nomPays">United Kingdom</span></br>
<span class="capitalePays">Capital city: London</span></br>
<img src="images/Drapeaux/Europe/Flag_of_the_United_Kingdom.png" class="drapeaux"/>
</div>
<div id="SM" class="cacher">
<span class="nomPays">Saint-Marin</span></br>
<span class="capitalePays">Capitale: Saint-Marin</span></br>
<span class="capitalePays">Capital city: Saint-Marin</span></br>
<img src="images/Drapeaux/Europe/Flag_of_San_Marino.png" class="drapeaux"/>
</div>
<div id="RS" class="cacher">
<span class="nomPays">Serbie</span></br>
<span class="capitalePays">Capitale: Belgrade</span></br>
<span class="nomPays">Serbia</span></br>
<span class="capitalePays">Capital city: Belgrade</span></br>
<img src="images/Drapeaux/Europe/Flag_of_Serbia.png" class="drapeaux"/>
</div>
<div id="SK" class="cacher">
<span class="nomPays">Slovaquie</span></br>
<span class="capitalePays">Capitale: Bratislava</span></br>
<span class="nomPays">Slovakia</span></br>
<span class="capitalePays">Capital city: Bratislava</span></br>
<img src="images/Drapeaux/Europe/Flag_of_Slovakia.png" class="drapeaux"/>
</div>
<div id="SI" class="cacher">
<span class="nomPays">Slovenie</span></br>
<span class="capitalePays">Capitale: Ljubljana</span></br>
<span class="nomPays">Slovenia</span></br>
<span class="capitalePays">Capital city: Ljubljana</span></br>
<img src="images/Drapeaux/Europe/Flag_of_Slovenia.png" class="drapeaux"/>
</div>
<div id="SE" class="cacher">
<span class="nomPays">Suede</span></br>
<span class="capitalePays">Capitale: Stockholm</span></br>
<span class="capitalePays">Capital city: Stockholm</span></br>
<img src="images/Drapeaux/Europe/Flag_of_Sweden.png" class="drapeaux"/>
</div>
<div id="CH" class="cacher">
<span class="nomPays">Suisse</span></br>
<span class="capitalePays">Capitale: Berne</span></br>
<span class="capitalePays">Capital city: Berne</span></br>
<img src="images/Drapeaux/Europe/Flag_of_Switzerland.png" class="drapeaux"/>
</div>
<div id="TR" class="cacher">
<span class="nomPays">Turquie</span></br>
<span class="capitalePays">Capitale: Ankara</span></br>
<span class="nomPays">Turkey</span></br>
<span class="capitalePays">Capital city: Ankara</span></br>
<img src="images/Drapeaux/Europe/Flag_of_Turkey.png" class="drapeaux"/>
</div>
<div id="UA" class="cacher">
<span class="nomPays">Ukraine</span></br>
<span class="capitalePays">Capitale: Kiev</span></br>
<span class="capitalePays">Capital city: Kiev</span></br>
<img src="images/Drapeaux/Europe/Flag_of_Ukraine.png" class="drapeaux"/>
</div>
<div id="VA" class="cacher">
<span class="nomPays">Vatican</span></br>
<span class="capitalePays">Capitale: Cite du Vatican</span></br>
<span class="capitalePays">Capital city: Cite du Vatican</span></br>
<img src="images/Drapeaux/Europe/Flag_of_the_Vatican_City.png" class="drapeaux"/>
</div>
<!-- Informations sur les pays d'Asie-->
<div id="AF" class="cacher">
<span class="nomPays">Afghanistan</span></br>
<span class="capitalePays">Capitale: Kaboul</span></br>
<span class="capitalePays">Capital city: Kabul</span></br>
<img src="images/Drapeaux/Asie/Flag_of_Afghanistan.png" class="drapeaux"/>
</div>
<div id="SA" class="cacher">
<span class="nomPays">Arabie Saoudite</span></br>
<span class="capitalePays">Capitale: Riyad</span></br>
<span class="nomPays">Saudi Arabia</span></br>
<span class="capitalePays">Capital city: Riyadh</span></br>
<img src="images/Drapeaux/Asie/Flag_of_Saudi_Arabia.png" class="drapeaux"/>
</div>
<div id="BH" class="cacher">
<span class="nomPays">Bahrein</span></br>
<span class="capitalePays">Capitale: Manama</span></br>
<span class="capitalePays">Capital city: Manama</span></br>
<img src="images/Drapeaux/Asie/Flag_of_Bahrain.png" class="drapeaux"/>
</div>
<div id="BD" class="cacher">
<span class="nomPays">Bangladesh</span></br>
<span class="capitalePays">Capitale: Dhaka</span></br>
<span class="capitalePays">Capital city: Dhaka</span></br>
<img src="images/Drapeaux/Asie/Flag_of_Bangladesh.png" class="drapeaux"/>
</div>
<div id="BT" class="cacher">
<span class="nomPays">Bhoutan</span></br>
<span class="capitalePays">Capitale: Thimphou</span></br>
<span class="nomPays">Bhutan</span></br>
<span class="capitalePays">Capital city: Thimphu</span></br>
<img src="images/Drapeaux/Asie/Flag_of_Bhutan.png" class="drapeaux"/>
</div>
<div id="BN" class="cacher">
<span class="nomPays">Brunei</span></br>
<span class="capitalePays">Capitale: Bandar Seri Begawan</span></br>
<span class="capitalePays">Capital city: Bandar Seri Begawan</span></br>
<img src="images/Drapeaux/Asie/Flag_of_Brunei.png" class="drapeaux"/>
</div>
<div id="KH" class="cacher">
<span class="nomPays">Cambodge</span></br>
<span class="capitalePays">Capitale: Phnom Penh</span></br>
<span class="nomPays">Cambodia</span></br>
<span class="capitalePays">Capital city: Phnom Penh</span></br>
<img src="images/Drapeaux/Asie/Flag_of_Cambodia.png" class="drapeaux"/>
</div>
<div id="CN" class="cacher">
<span class="nomPays">Chine</span></br>
<span class="capitalePays">Capitale: Pekin</span></br>
<span class="capitalePays">Capital city: Pekin</span></br>
<img src="images/Drapeaux/Asie/Flag_of_the_People's_Republic_of_China.png" class="drapeaux"/>
</div>
<div id="KP" class="cacher">
<span class="nomPays">Coree du Nord</span></br>
<span class="capitalePays">Capitale: Pyongyang</span></br>
<span class="nomPays">North Korea</span></br>
<span class="capitalePays">Capital city: Pyongyang</span></br>
<img src="images/Drapeaux/Asie/Flag_of_North_Korea.png" class="drapeaux"/>
</div>
<div id="KR" class="cacher">
<span class="nomPays">Coree du Sud</span></br>
<span class="capitalePays">Capitale: Seoul</span></br>
<span class="nomPays">South Korea</span></br>
<span class="capitalePays">Capital city: Seoul</span></br>
<img src="images/Drapeaux/Asie/Flag_of_South_Korea.png" class="drapeaux"/>
</div>
<div id="AE" class="cacher">
<span class="nomPays">Emirats arabes unis</span></br>
<span class="capitalePays">Capitale: Abou Dabi</span></br>
<span class="nomPays">United Arab Emirates</span></br>
<span class="capitalePays">Capital city: Abu Dhabi</span></br>
<img src="images/Drapeaux/Asie/Flag_of_the_United_Arab_Emirates.png" class="drapeaux"/>
</div>
<div id="IN" class="cacher">
<span class="nomPays">Inde</span></br>
<span class="capitalePays">Capitale: New Delhi</span></br>
<span class="nomPays">India</span></br>
<span class="capitalePays">Capital city: New Delhi</span></br>
<img src="images/Drapeaux/Asie/Flag_of_India.png" class="drapeaux"/>
</div>
<div id="ID" class="cacher">
<span class="nomPays">Indonesie</span></br>
<span class="capitalePays">Capitale: Jakarta</span></br>
<span class="nomPays">Indonesia</span></br>
<span class="capitalePays">Capital city: Jakarta</span></br>
<img src="images/Drapeaux/Asie/Flag_of_Indonesia.png" class="drapeaux"/>
</div>
<div id="IR" class="cacher">
<span class="nomPays">Iran</span></br>
<span class="capitalePays">Capitale: Teheran</span></br>
<span class="capitalePays">Capital city: Teheran</span></br>
<img src="images/Drapeaux/Asie/Flag_of_Iran.png" class="drapeaux"/>
</div>
<div id="IQ" class="cacher">
<span class="nomPays">Iraq</span></br>
<span class="capitalePays">Capitale: Bagdad</span></br>
<span class="capitalePays">Capital city: Bagdad</span></br>
<img src="images/Drapeaux/Asie/Flag_of_Iraq.png" class="drapeaux"/>
</div>
<div id="IL" class="cacher">
<span class="nomPays">Israel</span></br>
<span class="capitalePays">Capitale: Jerusalem</span></br>
<span class="capitalePays">Capital city: Jerusalem</span></br>
<img src="images/Drapeaux/Asie/Flag_of_Israel.png" class="drapeaux"/>
</div>
<div id="JP" class="cacher">
<span class="nomPays">Japon</span></br>
<span class="capitalePays">Capitale: Tokyo</span></br>
<span class="nomPays">Japan</span></br>
<span class="capitalePays">Capital city: Tokyo</span></br>
<img src="images/Drapeaux/Asie/Flag_of_Japan.png" class="drapeaux"/>
</div>
<div id="JO" class="cacher">
<span class="nomPays">Jordanie</span></br>
<span class="capitalePays">Capitale: Amman</span></br>
<span class="nomPays">Jordan</span></br>
<span class="capitalePays">Capital city: Amman</span></br>
<img src="images/Drapeaux/Asie/Flag_of_Jordan.png" class="drapeaux"/>
</div>
<div id="KZ" class="cacher">
<span class="nomPays">Kazakhstan</span></br>
<span class="capitalePays">Capitale: Astana</span></br>
<span class="capitalePays">Capital city: Astana</span></br>
<img src="images/Drapeaux/Europe/Flag_of_Kazakhstan.png" class="drapeaux"/>
</div>
<div id="KG" class="cacher">
<span class="nomPays">Kirghizistan</span></br>
<span class="capitalePays">Capitale: Bichkek</span></br>
<span class="nomPays">Kyrgyzstan</span></br>
<span class="capitalePays">Capital city: Bishkek</span></br>
<img src="images/Drapeaux/Asie/Flag_of_Kyrgyzstan.png" class="drapeaux"/>
</div>
<div id="KW" class="cacher">
<span class="nomPays">Koweit</span></br>
<span class="capitalePays">Capitale: Koweit</span></br>
<span class="capitalePays">Capital city: Koweit</span></br>
<img src="images/Drapeaux/Asie/Flag_of_Kuwait.png" class="drapeaux"/>
</div>
<div id="LA" class="cacher">
<span class="nomPays">Laos</span></br>
<span class="capitalePays">Capitale: Vientiane</span></br>
<span class="capitalePays">Capital city: Vientiane</span></br>
<img src="images/Drapeaux/Asie/Flag_of_Laos.png" class="drapeaux"/>
</div>
<div id="LB" class="cacher">
<span class="nomPays">Liban</span></br>
<span class="capitalePays">Capitale: Beyrouth</span></br>
<span class="nomPays">Lebanon</span></br>
<span class="capitalePays">Capital city: Beyrouth</span></br>
<img src="images/Drapeaux/Asie/Flag_of_Lebanon.png" class="drapeaux"/>
</div>
<div id="MY" class="cacher">
<span class="nomPays">Malaisie</span></br>
<span class="capitalePays">Capitale: Kuala Lumpur</span></br>
<span class="nomPays">Malaysia</span></br>
<span class="capitalePays">Capital city: Kuala Lumpur</span></br>
<img src="images/Drapeaux/Asie/Flag_of_Malaysia.png" class="drapeaux"/>
</div>
<div id="MV" class="cacher">
<span class="nomPays">Maldives</span></br>
<span class="capitalePays">Capitale: Male</span></br>
<span class="capitalePays">Capital city: Male</span></br>
<img src="images/Drapeaux/Asie/Flag_of_Maldives.png" class="drapeaux"/>
</div>
<div id="MN" class="cacher">
<span class="nomPays">Mongolie</span></br>
<span class="capitalePays">Capitale: Oulan-Bator</span></br>
<span class="nomPays">Mongolia</span></br>
<span class="capitalePays">Capital city: Ulan-Bator</span></br>
<img src="images/Drapeaux/Asie/Flag_of_Mongolia.png" class="drapeaux"/>
</div>
<div id="MM" class="cacher">
<span class="nomPays">Myanmar</span></br>
<span class="capitalePays">Capitale: Naypyidaw</span></br>
<span class="capitalePays">Capital city: Naypyidaw</span></br>
<img src="images/Drapeaux/Asie/Flag_of_Myanmar.png" class="drapeaux"/>
</div>
<div id="NP" class="cacher">
<span class="nomPays">Nepal</span></br>
<span class="capitalePays">Capitale: Katmandou</span></br>
<span class="capitalePays">Capital city: Katmandu</span></br>
<img src="images/Drapeaux/Asie/Flag_of_Nepal.png" class="drapeaux"/>
</div>
<div id="OM" class="cacher">
<span class="nomPays">Oman</span></br>
<span class="capitalePays">Capitale: Mascate</span></br>
<span class="capitalePays">Capital city: Muscat</span></br>
<img src="images/Drapeaux/Asie/Flag_of_Oman.png" class="drapeaux"/>
</div>
<div id="UZ" class="cacher">
<span class="nomPays">Ouzbekistan</span></br>
<span class="capitalePays">Capitale: Tachkent</span></br>
<span class="nomPays">Uzbekistan</span></br>
<span class="capitalePays">Capital city: Tashkent</span></br>
<img src="images/Drapeaux/Asie/Flag_of_Uzbekistan.png" class="drapeaux"/>
</div>
<div id="PK" class="cacher">
<span class="nomPays">Pakistan</span></br>
<span class="capitalePays">Capitale: Islamabad</span></br>
<span class="capitalePays">Capital city: Islamabad</span></br>
<img src="images/Drapeaux/Asie/Flag_of_Pakistan.png" class="drapeaux"/>
</div>
<div id="PH" class="cacher">
<span class="nomPays">Philippines</span></br>
<span class="capitalePays">Capitale: Manille</span></br>
<span class="capitalePays">Capital city: Manille</span></br>
<img src="images/Drapeaux/Asie/Flag_of_the_Philippines.png" class="drapeaux"/>
</div>
<div id="QA" class="cacher">
<span class="nomPays">Qatar</span></br>
<span class="capitalePays">Capitale: Doha</span></br>
<span class="capitalePays">Capital city: Doha</span></br>
<img src="images/Drapeaux/Asie/Flag_of_Qatar.png" class="drapeaux"/>
</div>
<div id="RU" class="cacher">
<span class="nomPays">Russie</span></br>
<span class="capitalePays">Capitale: Moscou</span></br>
<span class="nomPays">Russia</span></br>
<span class="capitalePays">Capital city: Moscow</span></br>
<img src="images/Drapeaux/Asie/Flag_of_Russia.png" class="drapeaux"/>
</div>
<div id="SG" class="cacher">
<span class="nomPays">Singapour</span></br>
<span class="capitalePays">Capitale: Singapour</span></br>
<span class="nomPays">Singapore</span></br>
<span class="capitalePays">Capital city: Singapore</span></br>
<img src="images/Drapeaux/Asie/Flag_of_Singapore.png" class="drapeaux"/>
</div>
<div id="LK" class="cacher">
<span class="nomPays">Sri Lanka</span></br>
<span class="capitalePays">Capitale: Colombo</span></br>
<span class="capitalePays">Capital city: Colombo</span></br>
<img src="images/Drapeaux/Asie/Flag_of_Sri_Lanka.png" class="drapeaux"/>
</div>
<div id="SY" class="cacher">
<span class="nomPays">Syrie</span></br>
<span class="capitalePays">Capitale: Damas</span></br>
<span class="nomPays">Syria</span></br>
<span class="capitalePays">Capital city: Damask</span></br>
<img src="images/Drapeaux/Asie/Flag_of_Syria.png" class="drapeaux"/>
</div>
<div id="TJ" class="cacher">
<span class="nomPays">Tadjikistan</span></br>
<span class="capitalePays">Capitale: Douchanbe</span></br>
<span class="nomPays">Tajikistan</span></br>
<span class="capitalePays">Capital city: Dushanbe</span></br>
<img src="images/Drapeaux/Asie/Flag_of_Tajikistan.png" class="drapeaux"/>
</div>
<div id="TH" class="cacher">
<span class="nomPays">Thailande</span></br>
<span class="capitalePays">Capitale: Bangkok</span></br>
<span class="nomPays">Thailand</span></br>
<span class="capitalePays">Capital city: Bangkok</span></br>
<img src="images/Drapeaux/Asie/Flag_of_Thailand.png" class="drapeaux"/>
</div>
<div id="TL" class="cacher">
<span class="nomPays">Timor-oriental</span></br>
<span class="capitalePays">Capitale: Dili</span></br>
<span class="capitalePays">Capital city: Dili</span></br>
<img src="images/Drapeaux/Asie/Flag_of_East_Timor.png" class="drapeaux"/>
</div>
<div id="TM" class="cacher">
<span class="nomPays">Turkmenistan</span></br>
<span class="capitalePays">Capitale: Achgabat</span></br>
<span class="capitalePays">Capital city: Ashgabat</span></br>
<img src="images/Drapeaux/Asie/Flag_of_Turkmenistan.png" class="drapeaux"/>
</div>
<div id="VN" class="cacher">
<span class="nomPays">Viet Nam</span></br>
<span class="capitalePays">Capitale: Hanoi</span></br>
<span class="capitalePays">Capital city: Hanoi</span></br>
<img src="images/Drapeaux/Asie/Flag_of_Vietnam.png" class="drapeaux"/>
</div>
<div id="YE" class="cacher">
<span class="nomPays">Yemen</span></br>
<span class="capitalePays">Capitale: Sanaa</span></br>
<span class="capitalePays">Capital city: Sanaa</span></br>
<img src="images/Drapeaux/Asie/Flag_of_Yemen.png" class="drapeaux"/>
</div>
</body>
......
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="description" content="Traceur de fonctions mathématiques en JavaScript"/>
<meta name="author" content="Yannick Vessaz"/>
<meta name="revised" content="2010/09/25"/>
<title>Graphics</title>
<link rel="stylesheet" type="text/css" href="Style/default.css"/>
<script type="text/javascript" src="JavaScript/ColorPicker.js"></script>
<script type="text/javascript" src="JavaScript/Etude.js"></script>
<script type="text/javascript" src="JavaScript/Interface.js"></script>
<script type="text/javascript" src="JavaScript/Outils.js"></script>
<script type="text/javascript" src="JavaScript/Sauvegardes.js"></script>
<script type="text/javascript" src="JavaScript/AffichageStandard.js"></script>
<script type="text/javascript" src="JavaScript/Affichage3D.js"></script>
<script type="text/javascript" src="JavaScript/AffichageUniboard.js"></script>
<script type="text/javascript" src="JavaScript/AffichageXPM.js"></script>
<script type="text/javascript">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="description" content="Traceur de fonctions mathématiques en JavaScript"/>
<meta name="author" content="Yannick Vessaz"/>
<meta name="revised" content="2010/09/25"/>
<title>Graphics</title>
<link rel="stylesheet" type="text/css" href="Style/default.css"/>
<script type="text/javascript" src="JavaScript/ColorPicker.js"></script>
<script type="text/javascript" src="JavaScript/Etude.js"></script>
<script type="text/javascript" src="JavaScript/Interface.js"></script>
<script type="text/javascript" src="JavaScript/Outils.js"></script>
<script type="text/javascript" src="JavaScript/Sauvegardes.js"></script>
<script type="text/javascript" src="JavaScript/AffichageStandard.js"></script>
<script type="text/javascript" src="JavaScript/Affichage3D.js"></script>
<script type="text/javascript" src="JavaScript/AffichageUniboard.js"></script>
<script type="text/javascript" src="JavaScript/AffichageXPM.js"></script>
<script src="JavaScript/jQuery/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="JavaScript/jQuery/jquery.disable.text.select.js" type="text/javascript"></script>
<script type="text/javascript">
// <![CDATA[
// --- Variables nécessaires au fonctionnement du widget ---
var largeur = 500
var hauteur = 400
var graphique = ""
var image = ""
var tableau = new Array()
var ligne = new Array()
var j = 0
var interdit = new Array(";", "interdit", "'", '"', "eval", "new", "sankore", "=", "document", "window", "alert")
var menuActuel = ""
var mouseDown = false
var outil = "point"
var pointX = new Array()
var pointY = new Array()
var pente = new Array()
var pente2 = new Array()
var precision = 0.02
var couleurFonction = "rgb(193,255,0)"
var r = 255
var g = 0
var b = 0
var couleurEchelle = "rgba(255,255,255,0.8)"
var couleurGrille = "rgba(255,255,255,0.1)"
var couleurAxes = "rgba(0,0,0,0.5)"
var decalageX = 0
var decalageY = 0
var lineWidth = 3
//alert(navigator.appName+" ; "+navigator.appVersion+" ; "+navigator.userAgent)
// ------------- Fonctions du widgets -------------
// Lance la procédure pour dessiner la fonction qui se trouve dans l'input en haut du widget.
// Permet aussi d'actualiser le graphique.
function actualiserGraph(){
evaluer(document.getElementById("inputEq").value)
}
// Cette fonction détermine si la fonction entrée est valide ou non.
// Elle retourne "true" si la fonction ne comporte pas de caractères interdits et "false" dans le cas contraire.
function check(eq){
for(var i=0; i<interdit.length; i++){
var condition = ""
for(var k=0; k<interdit[i].length; k++){
if(k==0){
condition = condition + "eq.charAt(j) == interdit[i].charAt(0)"
}
else{
condition = condition + "&& eq.charAt(j+"+k+") == interdit[i].charAt("+k+")"
}
}
//alert(interdit[i]+" ; "+condition)
for(var j=0; j<eq.length; j++){
if(eval(condition)){
document.getElementById("spanFctInterdite").innerHTML = interdit[i]
afficherMenu("fctInterdite")
//alert("------- Erreur -------\nImpossible de dessiner la fonction ... \nExpression ou carractère invalide : "+interdit[i]+"")
return false
}
}
}
return true
}
// Cette fonction permet de choisir la méthode d'affichage entre:
// 1) Image au format XPM
// 2) Affichage directe dans sankore
// 3) Autres Méthodes d'affichages (svg ou canvas)
function evaluer(eq){
if(check(eq)){
try{
if(historique[0]!=eq && eq!="1000"){
for(var i=0;i<historique.length;i++){
if(historique[i]==eq){
historique.splice(i, 1)
}
}
historique.unshift(eq)
actualiserHistorique()
}
if(fonction3D){
dessiner3D(eq)
}
else if(document.getElementById("selectMethodeAffichage").value == "xpm"){
evaluerXPM(eq)
}
else if(document.getElementById("selectMethodeAffichage").value == "sankore"){
evaluerUniboard(eq)
}
else if(document.getElementById("selectMethodeAffichage").value == "canvas" || document.getElementById("selectMethodeAffichage").value == "canvas2"){
evaluerCanvas(eq)
}
else{
evaluerSVG(eq)
}
}
catch(err){
afficherMenu("erreurFct")
}
}
}
// ---- Fonctions Mathématiques et constantes ----
// (rempalce sin() par Math.sin(), cos() par Math.cos(), tan() par Math.tan(), etc.
var pi = 4 * atan(1)
var e = exp(1)
function sin(valeur){
return Math.sin(valeur)
}
function cos(valeur){
return Math.cos(valeur)
}
function tan(valeur){
return Math.tan(valeur)
}
function cot(valeur){
return 1/Math.tan(valeur)
}
function sec(valeur){
return 1/cos(valeur)
}
function csc(valeur){
return 1/sin(valeur)
}
function asin(valeur){
return Math.asin(valeur)
}
function acos(valeur){
return Math.acos(valeur)
}
function atan(valeur){
return Math.atan(valeur)
}
function acot(valeur){
return Math.atan(1/valeur)
}
function asec(valeur){
return Math.acos(1/valeur)
}
function acsc(valeur){
return Math.asin(1/valeur)
}
var arcsin = asin
var arccos = acos
var arctan = atan
var arccot = acot
var arcsec = asec
var arccsc = acsc
function sinh(valeur){
return (Math.exp(valeur)-Math.exp(-valeur))/2
}
function cosh(valeur){
return (Math.exp(valeur)+Math.exp(-valeur))/2
}
function tanh(valeur){
return (Math.exp(valeur)-Math.exp(-valeur))/(Math.exp(valeur)+Math.exp(-valeur))
}
function coth(valeur){
return (Math.exp(valeur)+Math.exp(-valeur))/(Math.exp(valeur)-Math.exp(-valeur))
}
function sech(valeur){
return 1/cosh(valeur)
}
function csch(valeur){
return 1/sinh(valeur)
}
function asinh(valeur){
return Math.log(valeur+Math.sqrt(Math.pow(valeur,2)+1))
}
function acosh(valeur){
return Math.log(valeur+Math.sqrt(Math.pow(valeur,2)-1))
}
function atanh(valeur){
return Math.log((1+valeur)/(1-valeur))/2
}
function acoth(valeur){
return Math.log((valeur+1)/(valeur-1))/2
}
var arcsinh = asinh
var arccosh = acosh
var arctanh = atanh
var arccoth = acoth
function sqrt(valeur){
return Math.sqrt(valeur)
}
function pow(valeur1, valeur2){
return Math.pow(valeur1, valeur2)
}
function root(valeur1, valeur2){
if(valeur2%2==1 && valeur1<0){
return -Math.pow(-valeur1, (1/valeur2))
}
else{
return Math.pow(valeur1, (1/valeur2))
}
}
function exp(valeur){
return Math.exp(valeur)
}
function log(valeur){
return Math.log(valeur)/Math.log(10)
}
function ln(valeur){
return Math.log(valeur)
}
function abs(valeur){
return Math.abs(valeur)
}
function sign(valeur){
if(valeur<0){
return -1
}
else if(valeur>0){
return 1
}
else{
return undefined
}
}
function round(valeur){
return Math.round(valeur)
}
function ceil(valeur){
return Math.ceil(valeur)
}
function floor(valeur){
return Math.floor(valeur)
}
function random(){
return Math.random()
}
// --- Variables nécessaires au fonctionnement du widget ---
$(document).ready(function(){
$(document).disableTextSelect();
$("input").mouseover(function(){
$(document).enableTextSelect();
});
$("input").mouseout(function(){
$(document).disableTextSelect();
});
//$("input").change(function(){$(this).trigger('blur');});
});
var largeur = 500
var hauteur = 400
var graphique = ""
var image = ""
var tableau = new Array()
var ligne = new Array()
var j = 0
var interdit = new Array(";", "interdit", "'", '"', "eval", "new", "sankore", "=", "document", "window", "alert")
var menuActuel = ""
var mouseDown = false
var outil = "point"
var pointX = new Array()
var pointY = new Array()
var pente = new Array()
var pente2 = new Array()
var precision = 0.02
var couleurFonction = "rgb(193,255,0)"
var r = 255
var g = 0
var b = 0
var couleurEchelle = "rgba(255,255,255,0.8)"
var couleurGrille = "rgba(255,255,255,0.1)"
var couleurAxes = "rgba(0,0,0,0.5)"
var decalageX = 0
var decalageY = 0
var lineWidth = 3
//alert(navigator.appName+" ; "+navigator.appVersion+" ; "+navigator.userAgent)
// ------------- Fonctions du widgets -------------
// Lance la procédure pour dessiner la fonction qui se trouve dans l'input en haut du widget.
// Permet aussi d'actualiser le graphique.
function actualiserGraph(){
evaluer(document.getElementById("inputEq").value)
}
// Cette fonction détermine si la fonction entrée est valide ou non.
// Elle retourne "true" si la fonction ne comporte pas de caractères interdits et "false" dans le cas contraire.
function check(eq){
for(var i=0; i<interdit.length; i++){
var condition = ""
for(var k=0; k<interdit[i].length; k++){
if(k==0){
condition = condition + "eq.charAt(j) == interdit[i].charAt(0)"
}
else{
condition = condition + "&& eq.charAt(j+"+k+") == interdit[i].charAt("+k+")"
}
}
//alert(interdit[i]+" ; "+condition)
for(var j=0; j<eq.length; j++){
if(eval(condition)){
document.getElementById("spanFctInterdite").innerHTML = interdit[i]
afficherMenu("fctInterdite")
//alert("------- Erreur -------\nImpossible de dessiner la fonction ... \nExpression ou carractère invalide : "+interdit[i]+"")
return false
}
}
}
return true
}
// Cette fonction permet de choisir la méthode d'affichage entre:
// 1) Image au format XPM
// 2) Affichage directe dans sankore
// 3) Autres Méthodes d'affichages (svg ou canvas)
function evaluer(eq){
if(check(eq)){
try{
if(historique[0]!=eq && eq!="1000"){
for(var i=0;i<historique.length;i++){
if(historique[i]==eq){
historique.splice(i, 1)
}
}
historique.unshift(eq)
actualiserHistorique()
}
if(fonction3D){
dessiner3D(eq)
}
else if(document.getElementById("selectMethodeAffichage").value == "xpm"){
evaluerXPM(eq)
}
else if(document.getElementById("selectMethodeAffichage").value == "sankore"){
evaluerUniboard(eq)
}
else if(document.getElementById("selectMethodeAffichage").value == "canvas" || document.getElementById("selectMethodeAffichage").value == "canvas2"){
evaluerCanvas(eq)
}
else{
evaluerSVG(eq)
}
}
catch(err){
afficherMenu("erreurFct")
}
}
}
// ---- Fonctions Mathématiques et constantes ----
// (rempalce sin() par Math.sin(), cos() par Math.cos(), tan() par Math.tan(), etc.
var pi = 4 * atan(1)
var e = exp(1)
function sin(valeur){
return Math.sin(valeur)
}
function cos(valeur){
return Math.cos(valeur)
}
function tan(valeur){
return Math.tan(valeur)
}
function cot(valeur){
return 1/Math.tan(valeur)
}
function sec(valeur){
return 1/cos(valeur)
}
function csc(valeur){
return 1/sin(valeur)
}
function asin(valeur){
return Math.asin(valeur)
}
function acos(valeur){
return Math.acos(valeur)
}
function atan(valeur){
return Math.atan(valeur)
}
function acot(valeur){
return Math.atan(1/valeur)
}
function asec(valeur){
return Math.acos(1/valeur)
}
function acsc(valeur){
return Math.asin(1/valeur)
}
var arcsin = asin
var arccos = acos
var arctan = atan
var arccot = acot
var arcsec = asec
var arccsc = acsc
function sinh(valeur){
return (Math.exp(valeur)-Math.exp(-valeur))/2
}
function cosh(valeur){
return (Math.exp(valeur)+Math.exp(-valeur))/2
}
function tanh(valeur){
return (Math.exp(valeur)-Math.exp(-valeur))/(Math.exp(valeur)+Math.exp(-valeur))
}
function coth(valeur){
return (Math.exp(valeur)+Math.exp(-valeur))/(Math.exp(valeur)-Math.exp(-valeur))
}
function sech(valeur){
return 1/cosh(valeur)
}
function csch(valeur){
return 1/sinh(valeur)
}
function asinh(valeur){
return Math.log(valeur+Math.sqrt(Math.pow(valeur,2)+1))
}
function acosh(valeur){
return Math.log(valeur+Math.sqrt(Math.pow(valeur,2)-1))
}
function atanh(valeur){
return Math.log((1+valeur)/(1-valeur))/2
}
function acoth(valeur){
return Math.log((valeur+1)/(valeur-1))/2
}
var arcsinh = asinh
var arccosh = acosh
var arctanh = atanh
var arccoth = acoth
function sqrt(valeur){
return Math.sqrt(valeur)
}
function pow(valeur1, valeur2){
return Math.pow(valeur1, valeur2)
}
function root(valeur1, valeur2){
if(valeur2%2==1 && valeur1<0){
return -Math.pow(-valeur1, (1/valeur2))
}
else{
return Math.pow(valeur1, (1/valeur2))
}
}
function exp(valeur){
return Math.exp(valeur)
}
function log(valeur){
return Math.log(valeur)/Math.log(10)
}
function ln(valeur){
return Math.log(valeur)
}
function abs(valeur){
return Math.abs(valeur)
}
function sign(valeur){
if(valeur<0){
return -1
}
else if(valeur>0){
return 1
}
else{
return undefined
}
}
function round(valeur){
return Math.round(valeur)
}
function ceil(valeur){
return Math.ceil(valeur)
}
function floor(valeur){
return Math.floor(valeur)
}
function random(){
return Math.random()
}
// ]]>
</script>
</head>
<body onload="evaluer(1000);checkCouleurs3D();loadOptions();majAuto()" onkeypress="keyPress(event)">
<!-- ..... Haut du Widget ..... -->
<span id="haut">
<span id="texteFonction">Function: </span><input id="inputEq" onkeypress='if(event.keyCode==13) evaluer(this.value)' onkeyup="document.getElementById('fonctionActuelle').innerHTML = this.value"/>
<input type="button" onclick='evaluer(document.getElementById("inputEq").value)' value="Display"/><input type="button" style="width:21px;" onclick="menuFonctions()" value="+"/>
</span>
<!--<div id="miniMax" onclick="miniMax()">-</div> ▶▼ -->
<div id="boutonAgrandir" class="miniBouton" onclick="agrandirAffichage()">^</div>
<!--<div id="boutonFermer" class="miniBouton" onclick="close()"></div>-->
<br/>
<!-- ..... Millieu du Widget ..... -->
<!-- Zone d'affichage -->
<div id="affichage" onmousedown="sourisDown()" onmouseup="sourisUp()" onmousemove="sourisMove(event)" ondblclick="doubleClick(event.ctrlKey)"></div>
<!-- Zone de boutons gauche -->
<div id="gauche">
X-axis: <br/>
<input id="borneXGauche" class="smallInput" value="-5" onkeypress='if(event.keyCode==13) actualiserGraph()'/> à <input id="borneXDroite" class="smallInput" value="5" onkeypress='if(event.keyCode==13) actualiserGraph()'/> <br/>
Y-axis: <br/>
<input id="borneYGauche" class="smallInput" value="-5" onkeypress='if(event.keyCode==13) actualiserGraph()'/> à <input id="borneYDroite" class="smallInput" value="5" onkeypress='if(event.keyCode==13) actualiserGraph()'/>
<br/>Zoom: <br/>
<input type="button" style="width:45%;" onclick='zoom(1.25)' value="-"/><input type="button" style="width:45%; position:relative; left: 9px;" onclick='zoom(0.8)' value="+"/><br/><br/>
Color: <br/>
<div id="buttonColor" title="couleurFonction" onclick="colorPicker(this.id); afficherMenu('menuCouleur')"></div>
<br/><br/>
<hr/>
<br/>
Menus:
<input type="button" class="boutonGauche" onclick='document.getElementById("etudeFct").innerHTML = document.getElementById("inputEq").value;afficherMenu("menuOutils")' value="Tools"/>
<input type="button" class="boutonGauche" onclick='afficherMenu("menuOptions")' value="Options"/>
<input type="button" class="boutonGauche" onclick='afficherMenu("menuAide")' value="Help"/>
<input type="button" class="boutonGauche" onclick='afficherMenu("menuCredits")' value="About"/>
<!-- ..... Menus ..... -->
<div id="menu" class="menu">
<div id="contenuMenu" class="contenuMenu"></div>
<div class="barreBasMenu">
<input type="button" onclick='cacherMenu()' value="Cancel"/>
</div>
</div>
</div>
<div id="gauche3D">
<input type="button" class="boutonGauche3D" onclick='afficherMenu("menuCredits")' value="About"/>
<input type="button" class="boutonGauche3D" onclick='afficherMenu("menuAide")' value="Help"/>
<input type="button" class="boutonGauche3D" onclick='afficherMenu("menuOptions")' value="Options"/>
<input type="button" style="width:30px;" onclick='zoom3D(0.8)' value="-"/><input type="button" style="width:30px;" onclick='zoom3D(1.25)' value="+"/>
</div>
<!-- Options -->
<div id="menuOptions" class="menu">
<table class="ongletMenu">
<tr>
<td class="ongletMenuActuel" onclick='afficherMenu("menuOptions")'>Widget</td>
<td onclick='afficherMenu("menuOptions2D")'>2D</td>
<td onclick='afficherMenu("menuOptions3D")'>3D</td>
</tr>
</table>
<div class="contenuMenu avecBordures">
<h3>Widget options</h3>
Themes of widget: <select id="selectTheme" onchange="changerTheme(this.value)">
<option value="noir">Black</option>
<option value="bleu">Blue</option>
<option value="blanc">White</option>
</select><br/>
<br/><br/><br/>
<span class="gras">Control options:</span><br/>
<input type="button" class="boutonSauvegarde" onclick="saveOptions()" value="Save"/><input type="button" class="boutonSauvegarde" onclick="loadOptions()" value="Load"/> <input class="boutonSauvegarde2" type="button" onclick="delOptions()" value="Delete"/><input class="boutonSauvegarde2" type="button" onclick="alertOptions()" value="Display"/><br/>
<span class="texteSecondaire">Save a widget options in cookies or load an options from cookies or delete a registered options.</span>
<br/><br/>
<label for="checkMaJ">Automatically update when a widget opening.</label> <input type="checkbox" id="checkMaJ" onclick="checkboxMaJ()"/>
<br/>
<div id="cacheCookies"><br/><br/><h1>Cookies are disabled. You cannot save an options...</h1></div>
<div id="cacheMaJ">You are using the last version of this widget.</div>
<input type="button" onclick='reset()' value="Reload widget" style="position:absolute; bottom:20px; width:140px; height:32px;"/>
<input type="button" onclick='miseAjour()' value="Updated" style="position:absolute; bottom:20px; left:160px; width:140px; height:32px;"/>
</div>
<div class="barreBasMenu"><input type="button" onclick="cacherMenu(); actualiserGraph()" value="Check"/></div>
</div>
<div id="menuOptions2D" class="menu">
<table class="ongletMenu">
<tr>
<td onclick='afficherMenu("menuOptions")'>Widget</td>
<td class="ongletMenuActuel" onclick='afficherMenu("menuOptions2D")'>2D</td>
<td onclick='afficherMenu("menuOptions3D")'>3D</td>
</tr>
</table>
<div class="contenuMenu avecBordures">
<h3>Options 2D</h3>
The graphical method displaying:<select id="selectMethodeAffichage">
<option value="canvas">canvas (lines)</option>
<option value="canvas2">canvas (points)</option>
<option value="svg">svg</option>
<option value="svg2">svg (1 image)</option>
<option value="xpm">xpm</option>
<option value="sankore">sankore</option>
</select> <br/>
Zoom default:
<input value="5" class="smallInput" id="zoomDefaut"/>
<input type="button" onclick='reinitialiserZoom(document.getElementById("zoomDefaut").value)' value="Reset zoom"/> <br/>
<br/>
<input type="checkbox" id="checkGrille" checked="true" onclick="actualiserGraph()"/><label for="checkGrille">Show grid</label> <br/>
<input type="checkbox" id="checkAxes" checked="true" onclick="actualiserGraph()"/><label for="checkAxes">Show axis</label> <br/>
<input type="checkbox" id="checkEchelle" checked="true" onclick="actualiserGraph()"/><label for="checkEchelle">Scale</label> <br/>
Thickness: <input id="inputTaille" class="smallInput" value="3" onkeypress='if(event.keyCode==13) actualiserGraph()' style=""/>
<div class="boutonPlus" type="button" onclick="boutonPlus('inputTaille', 1); actualiserGraph()">+</div><div class="boutonMoins" type="button" onclick="boutonMoins('inputTaille', 1); actualiserGraph()">-</div> <br/>
<br/>
Offset diagram:
x=<input value="0" class="smallInput" id="inputDecalageX" onkeyup="decalageX = parseFloat(this.value)"/>
y=<input value="0" class="smallInput" id="inputDecalageY" onkeyup="decalageY = parseFloat(this.value)"/>
<br/>
Accuracy graph:
<input value="0.02" class="smallInput" id="inputPrecision" onkeyup="precision = parseFloat(this.value)"/>
<div class="boutonPlus" type="button" onclick="boutonPlus('inputPrecision', 0.01); precision = parseFloat(document.getElementById('inputPrecision').value); actualiserGraph()">+</div><div class="boutonMoins" type="button" onclick="boutonMoins('inputPrecision', 0.01); precision = parseFloat(document.getElementById('inputPrecision').value); actualiserGraph()">-</div> <br/>
<br/>
</div>
<div class="barreBasMenu"><input type="button" onclick='cacherMenu(); actualiserGraph()' value="Check"/></div>
</div>
<div id="menuOptions3D" class="menu">
<table class="ongletMenu">
<tr>
<td onclick='afficherMenu("menuOptions")'>Widget</td>
<td onclick='afficherMenu("menuOptions2D")'>2D</td>
<td class="ongletMenuActuel" onclick='afficherMenu("menuOptions3D")'>3D</td>
</tr>
</table>
<div class="contenuMenu avecBordures">
<h3>Options 3D</h3>
Show the style:
<select id="selectAffichage3D">
<option value="surfaces"> surfaces </option>
<option value="points"> points </option>
</select> <input type="button" onclick='reinitialiserZoom(5)' value="Reset display"/> <br/>
<br/>
Accuracy function: <input value="0.2" class="smallInput" id="inputPrecision3D" onkeyup="precisionFonction3D = parseFloat(this.value)"/>
<div class="boutonPlus" type="button" onclick="boutonPlus('inputPrecision3D', 0.1); precisionFonction3D = parseFloat(document.getElementById('inputPrecision3D').value); actualiserGraph()">+</div><div class="boutonMoins" type="button" onclick="boutonMoins('inputPrecision3D', 0.1); precisionFonction3D = parseFloat(document.getElementById('inputPrecision3D').value); actualiserGraph()">-</div> <br/>
<br/>
Use the color:<br/>
red:
<select onchange="checkCouleurs3D()" id="selectRouge3D">
<option value="plus">positive value</option>
<option value="moins">negative value</option>
<option value="tout">general value</option>
</select>
<br/>
green :
<select onchange="checkCouleurs3D()" id="selectVert3D">
<option value="moins">negative value</option>
<option value="plus">positive value</option>
<option value="tout">general value</option>
</select>
<br/>
blue :
<select onchange="checkCouleurs3D()" id="selectBleu3D">
<option value="tout">general value</option>
<option value="plus">positive value</option>
<option value="moins">negative value</option>
</select>
<br/>
General value : <input class="smallInput" id="couleur3Dgenerale" type="texte" value="0" onkeyup="checkCouleurs3D()"/> (from 0 to 255)
<br/>
<span id="apercuCouleur3D"></span>
</div>
<div class="barreBasMenu"><input type="button" onclick='cacherMenu(); actualiserGraph()' value="Check"/></div>
</div>
<!-- Aide -->
<div id="menuAide" class="menu">
<table class="ongletMenu">
<tr>
<td class="ongletMenuActuel" onclick='afficherMenu("menuAide")'>Using</td>
<td onclick='afficherMenu("menuAideExemples")'>Examples</td>
<td onclick='afficherMenu("menuAideAutres")'>Other</td>
</tr>
</table>
<div class="contenuMenu avecBordures">
<h1>How it work.</h1>
<p>This widget allow to draw mathematical function. Enter function in the field in the top part of widget and press "Show".</p>
<p>You can enter following mathematical function:<br/>
<h2>Basic operations</h2>
<ul>
<li>Plus -> <span class="gras">+</span></li>
<li>Minus -> <span class="gras">-</span></li>
<li>Multiplication -> <span class="gras">*</span></li>
<li>Division -> <span class="gras">/</span></li>
<li>Mod -> <span class="gras">%</span></li>
</ul>
<h2>Trigonometric functions</h2>
<ul>
<li>Sine -> <span class="gras">sin(x)</span></li>
<li>Cosine -> <span class="gras">cos(x)</span></li>
<li>Tangent -> <span class="gras">tan(x)</span></li>
<li>Cotangent -> <span class="gras">cot(x)</span></li>
<li>Secant -> <span class="gras">sec(x)</span></li>
<li>Cosecant -> <span class="gras">csc(x)</span></li>
</ul>
<ul>
<li>Arc sine -> <span class="gras">arcsin(x)</span> ou <span class="gras">asin(x)</span></li>
<li>Arc cosine -> <span class="gras">arccos(x)</span> ou <span class="gras">acos(x)</span></li>
<li>Arc tangent -> <span class="gras">arctan(x)</span> ou <span class="gras">atan(x)</span></li>
<li>Arc cotangent -> <span class="gras">arccot(x)</span> ou <span class="gras">acot(x)</span></li>
</ul>
<h2>Hyperbolic functions</h2>
<ul>
<li>Hyperbolic sine -> <span class="gras">sinh(x)</span></li>
<li>Hyperbolic cosine -> <span class="gras">cosh(x)</span></li>
<li>Hyperbolic tangent -> <span class="gras">tanh(x)</span></li>
<li>Hyperbolic cotangent -> <span class="gras">coth(x)</span></li>
<li>Hyperbolic secant -> <span class="gras">sech(x)</span></li>
<li>Hyperbolic cosecant -> <span class="gras">csch(x)</span></li>
</ul>
<ul>
<li>Hyperbolic arc sine -> <span class="gras">arcsinh(x)</span> or <span class="gras">asinh(x)</span></li>
<li>Hyperbolic arc cosine -> <span class="gras">arccosh(x)</span> or <span class="gras">acosh(x)</span></li>
<li>Hyperbolic arc tangent -> <span class="gras">arctanh(x)</span> or <span class="gras">atanh(x)</span></li>
<li>Hyperbolic arc cotangent -> <span class="gras">arccoth(x)</span> or <span class="gras">acoth(x)</span></li>
</ul>
<h2>Square roots and degrees</h2>
<ul>
<li>Square root -> <span class="gras">sqrt(x)</span></li>
<li>Degree -> <span class="gras">pow(x, y)</span> <span class="texteSecondaire">Variable x to the power y</span></li>
<li>Root -> <span class="gras">root(x, y)</span> <span class="texteSecondaire">Root y of x</span></li>
</ul>
<h2>Exponential and logarithm</h2>
<ul>
<li>e<span style="vertical-align:super;">x</span> -> <span class="gras">exp(x)</span></li>
<li>Natural logarithm -> <span class="gras">ln(x)</span></li>
<li>Decimal logarithm -> <span class="gras">log(x)</span></li>
</ul>
<h2>Absolute number value</h2>
<ul>
<li>|x| -> <span class="gras">abs(x)</span></li>
</ul>
<h2>Rounding</h2>
<ul>
<li><span class="gras">round(x)</span> -> rounding to the nearest whole number</li>
<li><span class="gras">ceil(x)</span> -> rounding to the nearest whole number in a big way</li>
<li><span class="gras">floor(x)</span> -> rounding to the nearest whole number the smaller side</li>
</ul>
</p> <br/>
<hr/>
<h1>Constants</h1>
<p>Also are available some constants:<br/>
<ul>
<li><span class="gras">pi</span> = 4 * atan(1) ≈ 3,141592653589793</li>
<li><span class="gras">e</span> = exp(1) ≈ 2.718281828459045</li>
</ul>
</p>
<br/>
<hr/>
<h1>Keyboard keys</h1>
<p style="font-size:90%;">
esc -> reset widget <br/>
ctrl + left arrow -> graph will be moved left<br/>
ctrl + top arrow -> graph will be moved top<br/>
ctrl + right arrow -> graph will be moved right<br/>
ctrl + bottom arrow -> graph will be moved bottom<br/>
<br/>
</p>
<br/>
<input type="button" value="User's guide" onclick="navigateur('Guide_Utilisateur.html')" style="position:absolute;bottom:0px;left:0px;"/>
</div>
<div class="barreBasMenu"><input type="button" onclick='cacherMenu()' value="Cancel"/></div>
</div>
<div id="menuAideExemples" class="menu">
<table class="ongletMenu">
<tr>
<td onclick='afficherMenu("menuAide")'>Using</td>
<td class="ongletMenuActuel" onclick='afficherMenu("menuAideExemples")'>Examples</td>
<td onclick='afficherMenu("menuAideAutres")'>Other</td>
</tr>
</table>
<div class="contenuMenu avecBordures">
<span class="texteSecondaire">(You can view example. Do not forget to set accuracy in options if necessary.)</span>
<br/><br/>
<hr/>
<h1>Functions 2D</h1>
<p>
<span class="survol" onclick="document.getElementById('inputEq').value = '0.5*x+1' ; actualiserGraph()">0.5*x+1</span> <br/>
<span class="survol" onclick="document.getElementById('inputEq').value = 'pow(x,2)-3' ; actualiserGraph()">pow(x,2)-3</span> <br/>
<span class="survol" onclick="document.getElementById('inputEq').value = '1/x' ; actualiserGraph()">1/x</span> <br/>
<span class="survol" onclick="document.getElementById('inputEq').value = 'atan(x)' ; actualiserGraph()">atan(x)</span> <br/>
<span class="survol" onclick="document.getElementById('inputEq').value = '(x+1/x)/1.2' ; actualiserGraph()">(x+1/x)/1.2</span> <br/>
<span class="survol" onclick="document.getElementById('inputEq').value = 'sin(10*x*x)*0.5' ; actualiserGraph()">sin(10*x*x)*0.5</span> <br/>
<span class="survol" onclick="document.getElementById('inputEq').value = 'log(pow(x-2,2))' ; actualiserGraph()">log(pow(x-2,2))</span> <br/>
<span class="survol" onclick="document.getElementById('inputEq').value = '(x*x-5*x+5)*exp(x)/5' ; actualiserGraph()">(x*x-5*x+5)*exp(x)/5</span> <br/>
<span class="survol" onclick="document.getElementById('inputEq').value = 'random()' ; evaluer('random()')">random()</span> <br/>
</p>
<br/><br/>
<hr/>
<h1>Functions 3D</h1>
<p>
<span class="survol" onclick="document.getElementById('inputEq').value = 'sin(x)+cos(y)' ; actualiserGraph()">sin(x)+cos(y)</span> <br/>
<span class="survol" onclick="document.getElementById('inputEq').value = 'sqrt(10-x*x)' ; actualiserGraph()">sqrt(10-x*x)</span> <br/>
<span class="survol" onclick="document.getElementById('inputEq').value = 'atan(x)+atan(y)' ; actualiserGraph()">atan(x)+atan(y)</span> <br/>
</p>
<br/>
</div>
<div class="barreBasMenu"><input type="button" onclick='cacherMenu()' value="Cancel"/></div>
</div>
<div id="menuAideAutres" class="menu">
<table class="ongletMenu">
<tr>
<td onclick='afficherMenu("menuAide")'>Using</td>
<td onclick='afficherMenu("menuAideExemples")'>Examples</td>
<td class="ongletMenuActuel" onclick='afficherMenu("menuAideAutres")'>Other</td>
</tr>
</table>
<div class="contenuMenu avecBordures">
<h4>Save graph</h4>
In some browsers when used display method "Canvas" you can save graph by clicking it with right mouse button and selecting "Save image". Also you can save 3D-graphs.
<br/><br/>
<h4>Offset</h4>
If graph isn't in the right place (larger than canvas) then can you set necessary parameters graph displaying in settings menu.
</div>
<div class="barreBasMenu"><input type="button" onclick='cacherMenu()' value="Cancel"/></div>
</div>
<!-- Crédits -->
<div id="menuCredits" class="menu">
<div class="contenuMenu" style="text-align:justify;">
<br/>
<table id="credits">
<tr>
<td>
<img src="icon.png"/>
<h3>Widget is developed by</h3>
Yannick Vessaz <br/>
<a href='mailto:yannick.vessaz@gmail.com'>yannick.vessaz@gmail.com</a>
</td>
</tr>
</table>
<span class="texteSecondaire">
<br/><br/>
If you want to inform about bug, make a proposal or just ask some questions then you can contact to me at the following e-mail: <a href='mailto:yannick.vessaz@gmail.com'>e-mail</a>.
<br/><br/>
If you want to change background design then you can contact at following address: <a href="http://kde.org">KDE</a>.
</span>
<span id="version" class="texteSecondaire" style="position:absolute;bottom:10px;left:15px;">version 1.3</span>
</div>
<div class="barreBasMenu"><input type="button" onclick='cacherMenu()' value="Cancel"/></div>
</div>
<!-- Outils -->
<div id="menuOutils" class="menu">
<div class="contenuMenu">
<h3 style="margin-top:0px; margin-bottom:15px;">Tools</h3>
Mouse events:<br/>
<input type="button" class="choixOutil" onclick="choixOutil('deplacement');cacherMenu()" value="Moving"/>
<input type="button" class="choixOutil" onclick="choixOutil('tangente');cacherMenu()" value="Tangente"/>
<input type="button" class="choixOutil" onclick="choixOutil('point');cacherMenu()" value="Point"/>
<br/><br/>
Derivative:<br/>
<label for="checkDerivee"> f'(x) </label><input type="checkbox" id="checkDerivee" onclick="actualiserGraph()"/><label for="checkDerivee2"> f''(x) </label><input type="checkbox" id="checkDerivee2" onclick="actualiserGraph()"/>
<br/><br/>
Square under function:<br/>
From <input value="-5" class="smallInput" id="aireG"/> to <input value="5" class="smallInput" id="aireD"/> <input type="button" onclick='calculerAire()' value="Calculate"/> <span id="outputAire"></span>
<div style="float: right;"><label for="checkAire">Draw </label><input type="checkbox" id="checkAire" onclick="actualiserGraph()"/></div>
<br/><br/>
Calculate the point on the function:<br/>
x=<input value="0" class="smallInput" id="inputX" onkeypress='if(event.keyCode==13) execute(document.getElementById("inputEq").value)'/>
<input type="button" onclick='execute(document.getElementById("inputEq").value)' value="Estimate"/>
<span id="outputX"></span>
<br/><br/>
Analysis of function: <br/>
f(x) = <span id="etudeFct"></span> <input type="button" value="Start to analysis" onclick='etudier(document.getElementById("inputEq").value);afficherMenu("menuEtude")'/>
<br/><br/>
Display test:<br/>
<input type="button" onclick='cacherMenu(); testXPM()' value="Test XPM"/><input type="button" onclick='cacherMenu(); testSVG()' value="Test SVG"/><input type="button" onclick='cacherMenu(); testCanvas()' value="Test Canvas"/>
</div>
<div class="barreBasMenu"><input type="button" onclick='cacherMenu()' value="Cancel"/></div>
</div>
<!--Etude de fonction -->
<div id="menuEtude" class="menu">
<div class="contenuMenu">
<h3>Analysis of function in the</h3>
Set of definitions : <span id="etudeEDF">...</span> <br/>
Parity : <span id="etudeParite">...</span> <br/>
Zeros of functions : <span id="etudeZeros">...</span> <br/>
<table>
<tr id="etudeSigne">
<td>Sign : ...</td>
</tr>
</table>
Asymptotes <br/>
AH left : <span id="etudeAHG">...</span> <br/>
AH right : <span id="etudeAHD">...</span> <br/>
AV : <span id="etudeAV">...</span>
</script>
</head>
<body onload="evaluer(1000);checkCouleurs3D();loadOptions();majAuto()" onkeypress="keyPress(event)">
<!-- ..... Haut du Widget ..... -->
<span id="haut">
<span id="texteFonction">Function: </span><input id="inputEq" onkeypress='if(event.keyCode==13) evaluer(this.value)' onkeyup="document.getElementById('fonctionActuelle').innerHTML = this.value"/>
<input type="button" onclick='evaluer(document.getElementById("inputEq").value)' value="Display"/><input type="button" style="width:21px;" onclick="menuFonctions()" value="+"/>
</span>
<!--<div id="miniMax" onclick="miniMax()">-</div> ▶▼ -->
<div id="boutonAgrandir" class="miniBouton" onclick="agrandirAffichage()">^</div>
<!--<div id="boutonFermer" class="miniBouton" onclick="close()"></div>-->
<br/>
<!-- ..... Millieu du Widget ..... -->
<!-- Zone d'affichage -->
<div id="affichage" onmousedown="sourisDown()" onmouseup="sourisUp()" onmousemove="sourisMove(event)" ondblclick="doubleClick(event.ctrlKey)"></div>
<!-- Zone de boutons gauche -->
<div id="gauche">
X-axis: <br/>
<input id="borneXGauche" class="smallInput" value="-5" onkeypress='if(event.keyCode==13) actualiserGraph()'/> à <input id="borneXDroite" class="smallInput" value="5" onkeypress='if(event.keyCode==13) actualiserGraph()'/> <br/>
Y-axis: <br/>
<input id="borneYGauche" class="smallInput" value="-5" onkeypress='if(event.keyCode==13) actualiserGraph()'/> à <input id="borneYDroite" class="smallInput" value="5" onkeypress='if(event.keyCode==13) actualiserGraph()'/>
<br/>Zoom: <br/>
<input type="button" style="width:45%;" onclick='zoom(1.25)' value="-"/><input type="button" style="width:45%; position:relative; left: 9px;" onclick='zoom(0.8)' value="+"/><br/><br/>
Color: <br/>
<div id="buttonColor" title="couleurFonction" onclick="colorPicker(this.id); afficherMenu('menuCouleur')"></div>
<br/><br/>
<hr/>
<br/>
Menus:
<input type="button" class="boutonGauche" onclick='document.getElementById("etudeFct").innerHTML = document.getElementById("inputEq").value;afficherMenu("menuOutils")' value="Tools"/>
<input type="button" class="boutonGauche" onclick='afficherMenu("menuOptions")' value="Options"/>
<input type="button" class="boutonGauche" onclick='afficherMenu("menuAide")' value="Help"/>
<input type="button" class="boutonGauche" onclick='afficherMenu("menuCredits")' value="About"/>
<!-- ..... Menus ..... -->
<div id="menu" class="menu">
<div id="contenuMenu" class="contenuMenu"></div>
<div class="barreBasMenu">
<input type="button" onclick='cacherMenu()' value="Cancel"/>
</div>
</div>
</div>
<div id="gauche3D">
<input type="button" class="boutonGauche3D" onclick='afficherMenu("menuCredits")' value="About"/>
<input type="button" class="boutonGauche3D" onclick='afficherMenu("menuAide")' value="Help"/>
<input type="button" class="boutonGauche3D" onclick='afficherMenu("menuOptions")' value="Options"/>
<input type="button" style="width:30px;" onclick='zoom3D(0.8)' value="-"/><input type="button" style="width:30px;" onclick='zoom3D(1.25)' value="+"/>
</div>
<!-- Options -->
<div id="menuOptions" class="menu">
<table class="ongletMenu">
<tr>
<td class="ongletMenuActuel" onclick='afficherMenu("menuOptions")'>Widget</td>
<td onclick='afficherMenu("menuOptions2D")'>2D</td>
<td onclick='afficherMenu("menuOptions3D")'>3D</td>
</tr>
</table>
<div class="contenuMenu avecBordures">
<h3>Widget options</h3>
Themes of widget: <select id="selectTheme" onchange="changerTheme(this.value)">
<option value="noir">Black</option>
<option value="bleu">Blue</option>
<option value="blanc">White</option>
</select><br/>
<br/><br/><br/>
<span class="gras">Control options:</span><br/>
<input type="button" class="boutonSauvegarde" onclick="saveOptions()" value="Save"/><input type="button" class="boutonSauvegarde" onclick="loadOptions()" value="Load"/> <input class="boutonSauvegarde2" type="button" onclick="delOptions()" value="Delete"/><input class="boutonSauvegarde2" type="button" onclick="alertOptions()" value="Display"/><br/>
<span class="texteSecondaire">Save a widget options in cookies or load an options from cookies or delete a registered options.</span>
<br/><br/>
<label for="checkMaJ">Automatically update when a widget opening.</label> <input type="checkbox" id="checkMaJ" onclick="checkboxMaJ()"/>
<br/>
<div id="cacheCookies"><br/><br/><h1>Cookies are disabled. You cannot save an options...</h1></div>
<div id="cacheMaJ">You are using the last version of this widget.</div>
<input type="button" onclick='reset()' value="Reload widget" style="position:absolute; bottom:20px; width:140px; height:32px;"/>
<input type="button" onclick='miseAjour()' value="Updated" style="position:absolute; bottom:20px; left:160px; width:140px; height:32px;"/>
</div>
<div class="barreBasMenu"><input type="button" onclick="cacherMenu(); actualiserGraph()" value="Check"/></div>
</div>
<div id="menuOptions2D" class="menu">
<table class="ongletMenu">
<tr>
<td onclick='afficherMenu("menuOptions")'>Widget</td>
<td class="ongletMenuActuel" onclick='afficherMenu("menuOptions2D")'>2D</td>
<td onclick='afficherMenu("menuOptions3D")'>3D</td>
</tr>
</table>
<div class="contenuMenu avecBordures">
<h3>Options 2D</h3>
The graphical method displaying:<select id="selectMethodeAffichage">
<option value="canvas">canvas (lines)</option>
<option value="canvas2">canvas (points)</option>
<option value="svg">svg</option>
<option value="svg2">svg (1 image)</option>
<option value="xpm">xpm</option>
<option value="sankore">sankore</option>
</select> <br/>
Zoom default:
<input value="5" class="smallInput" id="zoomDefaut"/>
<input type="button" onclick='reinitialiserZoom(document.getElementById("zoomDefaut").value)' value="Reset zoom"/> <br/>
<br/>
<input type="checkbox" id="checkGrille" checked="true" onclick="actualiserGraph()"/><label for="checkGrille">Show grid</label> <br/>
<input type="checkbox" id="checkAxes" checked="true" onclick="actualiserGraph()"/><label for="checkAxes">Show axis</label> <br/>
<input type="checkbox" id="checkEchelle" checked="true" onclick="actualiserGraph()"/><label for="checkEchelle">Scale</label> <br/>
Thickness: <input id="inputTaille" class="smallInput" value="3" onkeypress='if(event.keyCode==13) actualiserGraph()' style=""/>
<div class="boutonPlus" type="button" onclick="boutonPlus('inputTaille', 1); actualiserGraph()">+</div><div class="boutonMoins" type="button" onclick="boutonMoins('inputTaille', 1); actualiserGraph()">-</div> <br/>
<br/>
Offset diagram:
x=<input value="0" class="smallInput" id="inputDecalageX" onkeyup="decalageX = parseFloat(this.value)"/>
y=<input value="0" class="smallInput" id="inputDecalageY" onkeyup="decalageY = parseFloat(this.value)"/>
<br/>
Accuracy graph:
<input value="0.02" class="smallInput" id="inputPrecision" onkeyup="precision = parseFloat(this.value)"/>
<div class="boutonPlus" type="button" onclick="boutonPlus('inputPrecision', 0.01); precision = parseFloat(document.getElementById('inputPrecision').value); actualiserGraph()">+</div><div class="boutonMoins" type="button" onclick="boutonMoins('inputPrecision', 0.01); precision = parseFloat(document.getElementById('inputPrecision').value); actualiserGraph()">-</div> <br/>
<br/>
</div>
<div class="barreBasMenu"><input type="button" onclick='cacherMenu(); actualiserGraph()' value="Check"/></div>
</div>
<div id="menuOptions3D" class="menu">
<table class="ongletMenu">
<tr>
<td onclick='afficherMenu("menuOptions")'>Widget</td>
<td onclick='afficherMenu("menuOptions2D")'>2D</td>
<td class="ongletMenuActuel" onclick='afficherMenu("menuOptions3D")'>3D</td>
</tr>
</table>
<div class="contenuMenu avecBordures">
<h3>Options 3D</h3>
Show the style:
<select id="selectAffichage3D">
<option value="surfaces"> surfaces </option>
<option value="points"> points </option>
</select> <input type="button" onclick='reinitialiserZoom(5)' value="Reset display"/> <br/>
<br/>
Accuracy function: <input value="0.2" class="smallInput" id="inputPrecision3D" onkeyup="precisionFonction3D = parseFloat(this.value)"/>
<div class="boutonPlus" type="button" onclick="boutonPlus('inputPrecision3D', 0.1); precisionFonction3D = parseFloat(document.getElementById('inputPrecision3D').value); actualiserGraph()">+</div><div class="boutonMoins" type="button" onclick="boutonMoins('inputPrecision3D', 0.1); precisionFonction3D = parseFloat(document.getElementById('inputPrecision3D').value); actualiserGraph()">-</div> <br/>
<br/>
Use the color:<br/>
red:
<select onchange="checkCouleurs3D()" id="selectRouge3D">
<option value="plus">positive value</option>
<option value="moins">negative value</option>
<option value="tout">general value</option>
</select>
<br/>
green :
<select onchange="checkCouleurs3D()" id="selectVert3D">
<option value="moins">negative value</option>
<option value="plus">positive value</option>
<option value="tout">general value</option>
</select>
<br/>
blue :
<select onchange="checkCouleurs3D()" id="selectBleu3D">
<option value="tout">general value</option>
<option value="plus">positive value</option>
<option value="moins">negative value</option>
</select>
<br/>
General value : <input class="smallInput" id="couleur3Dgenerale" type="texte" value="0" onkeyup="checkCouleurs3D()"/> (from 0 to 255)
<br/>
<span id="apercuCouleur3D"></span>
</div>
<div class="barreBasMenu"><input type="button" onclick='cacherMenu(); actualiserGraph()' value="Check"/></div>
</div>
<!-- Aide -->
<div id="menuAide" class="menu">
<table class="ongletMenu">
<tr>
<td class="ongletMenuActuel" onclick='afficherMenu("menuAide")'>Using</td>
<td onclick='afficherMenu("menuAideExemples")'>Examples</td>
<td onclick='afficherMenu("menuAideAutres")'>Other</td>
</tr>
</table>
<div class="contenuMenu avecBordures">
<h1>How it work.</h1>
<p>This widget allow to draw mathematical function. Enter function in the field in the top part of widget and press "Show".</p>
<p>You can enter following mathematical function:<br/>
<h2>Basic operations</h2>
<ul>
<li>Plus -> <span class="gras">+</span></li>
<li>Minus -> <span class="gras">-</span></li>
<li>Multiplication -> <span class="gras">*</span></li>
<li>Division -> <span class="gras">/</span></li>
<li>Mod -> <span class="gras">%</span></li>
</ul>
<h2>Trigonometric functions</h2>
<ul>
<li>Sine -> <span class="gras">sin(x)</span></li>
<li>Cosine -> <span class="gras">cos(x)</span></li>
<li>Tangent -> <span class="gras">tan(x)</span></li>
<li>Cotangent -> <span class="gras">cot(x)</span></li>
<li>Secant -> <span class="gras">sec(x)</span></li>
<li>Cosecant -> <span class="gras">csc(x)</span></li>
</ul>
<ul>
<li>Arc sine -> <span class="gras">arcsin(x)</span> ou <span class="gras">asin(x)</span></li>
<li>Arc cosine -> <span class="gras">arccos(x)</span> ou <span class="gras">acos(x)</span></li>
<li>Arc tangent -> <span class="gras">arctan(x)</span> ou <span class="gras">atan(x)</span></li>
<li>Arc cotangent -> <span class="gras">arccot(x)</span> ou <span class="gras">acot(x)</span></li>
</ul>
<h2>Hyperbolic functions</h2>
<ul>
<li>Hyperbolic sine -> <span class="gras">sinh(x)</span></li>
<li>Hyperbolic cosine -> <span class="gras">cosh(x)</span></li>
<li>Hyperbolic tangent -> <span class="gras">tanh(x)</span></li>
<li>Hyperbolic cotangent -> <span class="gras">coth(x)</span></li>
<li>Hyperbolic secant -> <span class="gras">sech(x)</span></li>
<li>Hyperbolic cosecant -> <span class="gras">csch(x)</span></li>
</ul>
<ul>
<li>Hyperbolic arc sine -> <span class="gras">arcsinh(x)</span> or <span class="gras">asinh(x)</span></li>
<li>Hyperbolic arc cosine -> <span class="gras">arccosh(x)</span> or <span class="gras">acosh(x)</span></li>
<li>Hyperbolic arc tangent -> <span class="gras">arctanh(x)</span> or <span class="gras">atanh(x)</span></li>
<li>Hyperbolic arc cotangent -> <span class="gras">arccoth(x)</span> or <span class="gras">acoth(x)</span></li>
</ul>
<h2>Square roots and degrees</h2>
<ul>
<li>Square root -> <span class="gras">sqrt(x)</span></li>
<li>Degree -> <span class="gras">pow(x, y)</span> <span class="texteSecondaire">Variable x to the power y</span></li>
<li>Root -> <span class="gras">root(x, y)</span> <span class="texteSecondaire">Root y of x</span></li>
</ul>
<h2>Exponential and logarithm</h2>
<ul>
<li>e<span style="vertical-align:super;">x</span> -> <span class="gras">exp(x)</span></li>
<li>Natural logarithm -> <span class="gras">ln(x)</span></li>
<li>Decimal logarithm -> <span class="gras">log(x)</span></li>
</ul>
<h2>Absolute number value</h2>
<ul>
<li>|x| -> <span class="gras">abs(x)</span></li>
</ul>
<h2>Rounding</h2>
<ul>
<li><span class="gras">round(x)</span> -> rounding to the nearest whole number</li>
<li><span class="gras">ceil(x)</span> -> rounding to the nearest whole number in a big way</li>
<li><span class="gras">floor(x)</span> -> rounding to the nearest whole number the smaller side</li>
</ul>
</p> <br/>
<hr/>
<h1>Constants</h1>
<p>Also are available some constants:<br/>
<ul>
<li><span class="gras">pi</span> = 4 * atan(1) ≈ 3,141592653589793</li>
<li><span class="gras">e</span> = exp(1) ≈ 2.718281828459045</li>
</ul>
</p>
<br/>
<hr/>
<h1>Keyboard keys</h1>
<p style="font-size:90%;">
esc -> reset widget <br/>
ctrl + left arrow -> graph will be moved left<br/>
ctrl + top arrow -> graph will be moved top<br/>
ctrl + right arrow -> graph will be moved right<br/>
ctrl + bottom arrow -> graph will be moved bottom<br/>
<br/>
</p>
<br/>
<input type="button" value="User's guide" onclick="navigateur('Guide_Utilisateur.html')" style="position:absolute;bottom:0px;left:0px;"/>
</div>
<div class="barreBasMenu"><input type="button" onclick='cacherMenu()' value="Cancel"/></div>
</div>
<div id="menuAideExemples" class="menu">
<table class="ongletMenu">
<tr>
<td onclick='afficherMenu("menuAide")'>Using</td>
<td class="ongletMenuActuel" onclick='afficherMenu("menuAideExemples")'>Examples</td>
<td onclick='afficherMenu("menuAideAutres")'>Other</td>
</tr>
</table>
<div class="contenuMenu avecBordures">
<span class="texteSecondaire">(You can view example. Do not forget to set accuracy in options if necessary.)</span>
<br/><br/>
<hr/>
<h1>Functions 2D</h1>
<p>
<span class="survol" onclick="document.getElementById('inputEq').value = '0.5*x+1' ; actualiserGraph()">0.5*x+1</span> <br/>
<span class="survol" onclick="document.getElementById('inputEq').value = 'pow(x,2)-3' ; actualiserGraph()">pow(x,2)-3</span> <br/>
<span class="survol" onclick="document.getElementById('inputEq').value = '1/x' ; actualiserGraph()">1/x</span> <br/>
<span class="survol" onclick="document.getElementById('inputEq').value = 'atan(x)' ; actualiserGraph()">atan(x)</span> <br/>
<span class="survol" onclick="document.getElementById('inputEq').value = '(x+1/x)/1.2' ; actualiserGraph()">(x+1/x)/1.2</span> <br/>
<span class="survol" onclick="document.getElementById('inputEq').value = 'sin(10*x*x)*0.5' ; actualiserGraph()">sin(10*x*x)*0.5</span> <br/>
<span class="survol" onclick="document.getElementById('inputEq').value = 'log(pow(x-2,2))' ; actualiserGraph()">log(pow(x-2,2))</span> <br/>
<span class="survol" onclick="document.getElementById('inputEq').value = '(x*x-5*x+5)*exp(x)/5' ; actualiserGraph()">(x*x-5*x+5)*exp(x)/5</span> <br/>
<span class="survol" onclick="document.getElementById('inputEq').value = 'random()' ; evaluer('random()')">random()</span> <br/>
</p>
<br/><br/>
<hr/>
<h1>Functions 3D</h1>
<p>
<span class="survol" onclick="document.getElementById('inputEq').value = 'sin(x)+cos(y)' ; actualiserGraph()">sin(x)+cos(y)</span> <br/>
<span class="survol" onclick="document.getElementById('inputEq').value = 'sqrt(10-x*x)' ; actualiserGraph()">sqrt(10-x*x)</span> <br/>
<span class="survol" onclick="document.getElementById('inputEq').value = 'atan(x)+atan(y)' ; actualiserGraph()">atan(x)+atan(y)</span> <br/>
</p>
<br/>
</div>
<div class="barreBasMenu"><input type="button" onclick='cacherMenu()' value="Cancel"/></div>
</div>
<div id="menuAideAutres" class="menu">
<table class="ongletMenu">
<tr>
<td onclick='afficherMenu("menuAide")'>Using</td>
<td onclick='afficherMenu("menuAideExemples")'>Examples</td>
<td class="ongletMenuActuel" onclick='afficherMenu("menuAideAutres")'>Other</td>
</tr>
</table>
<div class="contenuMenu avecBordures">
<h4>Save graph</h4>
In some browsers when used display method "Canvas" you can save graph by clicking it with right mouse button and selecting "Save image". Also you can save 3D-graphs.
<br/><br/>
<h4>Offset</h4>
If graph isn't in the right place (larger than canvas) then can you set necessary parameters graph displaying in settings menu.
</div>
<div class="barreBasMenu"><input type="button" onclick='cacherMenu()' value="Cancel"/></div>
</div>
<!-- Crédits -->
<div id="menuCredits" class="menu">
<div class="contenuMenu" style="text-align:justify;">
<br/>
<table id="credits">
<tr>
<td>
<img src="icon.png"/>
<h3>Widget is developed by</h3>
Yannick Vessaz <br/>
<a href='mailto:yannick.vessaz@gmail.com'>yannick.vessaz@gmail.com</a>
</td>
</tr>
</table>
<span class="texteSecondaire">
<br/><br/>
If you want to inform about bug, make a proposal or just ask some questions then you can contact to me at the following e-mail: <a href='mailto:yannick.vessaz@gmail.com'>e-mail</a>.
<br/><br/>
If you want to change background design then you can contact at following address: <a href="http://kde.org">KDE</a>.
</span>
<span id="version" class="texteSecondaire" style="position:absolute;bottom:10px;left:15px;">version 1.3</span>
</div>
<div class="barreBasMenu"><input type="button" onclick='cacherMenu()' value="Cancel"/></div>
</div>
<!-- Outils -->
<div id="menuOutils" class="menu">
<div class="contenuMenu">
<h3 style="margin-top:0px; margin-bottom:15px;">Tools</h3>
Mouse events:<br/>
<input type="button" class="choixOutil" onclick="choixOutil('deplacement');cacherMenu()" value="Moving"/>
<input type="button" class="choixOutil" onclick="choixOutil('tangente');cacherMenu()" value="Tangente"/>
<input type="button" class="choixOutil" onclick="choixOutil('point');cacherMenu()" value="Point"/>
<br/><br/>
Derivative:<br/>
<label for="checkDerivee"> f'(x) </label><input type="checkbox" id="checkDerivee" onclick="actualiserGraph()"/><label for="checkDerivee2"> f''(x) </label><input type="checkbox" id="checkDerivee2" onclick="actualiserGraph()"/>
<br/><br/>
Square under function:<br/>
From <input value="-5" class="smallInput" id="aireG"/> to <input value="5" class="smallInput" id="aireD"/> <input type="button" onclick='calculerAire()' value="Calculate"/> <span id="outputAire"></span>
<div style="float: right;"><label for="checkAire">Draw </label><input type="checkbox" id="checkAire" onclick="actualiserGraph()"/></div>
<br/><br/>
Calculate the point on the function:<br/>
x=<input value="0" class="smallInput" id="inputX" onkeypress='if(event.keyCode==13) execute(document.getElementById("inputEq").value)'/>
<input type="button" onclick='execute(document.getElementById("inputEq").value)' value="Estimate"/>
<span id="outputX"></span>
<br/><br/>
Analysis of function: <br/>
f(x) = <span id="etudeFct"></span> <input type="button" value="Start to analysis" onclick='etudier(document.getElementById("inputEq").value);afficherMenu("menuEtude")'/>
<br/><br/>
Display test:<br/>
<input type="button" onclick='cacherMenu(); testXPM()' value="Test XPM"/><input type="button" onclick='cacherMenu(); testSVG()' value="Test SVG"/><input type="button" onclick='cacherMenu(); testCanvas()' value="Test Canvas"/>
</div>
<div class="barreBasMenu"><input type="button" onclick='cacherMenu()' value="Cancel"/></div>
</div>
<!--Etude de fonction -->
<div id="menuEtude" class="menu">
<div class="contenuMenu">
<h3>Analysis of function in the</h3>
Set of definitions : <span id="etudeEDF">...</span> <br/>
Parity : <span id="etudeParite">...</span> <br/>
Zeros of functions : <span id="etudeZeros">...</span> <br/>
<table>
<tr id="etudeSigne">
<td>Sign : ...</td>
</tr>
</table>
Asymptotes <br/>
AH left : <span id="etudeAHG">...</span> <br/>
AH right : <span id="etudeAHD">...</span> <br/>
AV : <span id="etudeAV">...</span>
<span id="etudeMin">...</span>
<span id="etudeMax">...</span>
<span id="etudeI">...</span> <br/><br/>
<span class="texteSecondaire" style="font-size:10px;">Tool for analysis of function is not reliable on 100%. Don't forget check results of analysis before use it.</span>
</div>
<div class="barreBasMenu"><input type="button" onclick="etudier(document.getElementById('inputEq').value)" value="Actualize" style="position:relative;right:310px;"/> <input type="button" onclick='cacherMenu()' value="Cancel"/></div>
</div>
<!-- Fonctions multiples -->
<div id="menuFonctions" class="menu">
<table class="ongletMenu">
<tr>
<td class="ongletMenuActuel" onclick='afficherMenu("menuFonctions")'>Functions</td>
<td onclick='afficherMenu("menuHistorique")'>History</td>
</tr>
</table>
<div class="contenuMenu avecBordures">
<em>Current</em><br/>
f(x) = <span id="fonctionActuelle">x</span> <input type="button" value="+" onclick="ajouterFonction(document.getElementById('fonctionActuelle').innerHTML)"/>
<br/><br/>
<em>Additional</em><br/>
<span id="fonctionsSupp">n/a ...</span>
</div>
<div class="barreBasMenu"><input type="button" onclick='cacherMenu()' value="Cancel"/></div>
</div>
<!-- Historique -->
<div id="menuHistorique" class="menu">
<table class="ongletMenu">
<tr>
<td onclick='afficherMenu("menuFonctions")'>Functions</td>
<td class="ongletMenuActuel" onclick='afficherMenu("menuHistorique")'>History</td>
</tr>
</table>
<div class="contenuMenu avecBordures" id="divHistorique">
<span id="spanHistorique"></span>
</div>
<div class="barreBasMenu"><input type="button" onclick='cacherMenu()' value="Cancel"/></div>
</div>
<!-- Couleur -->
<div id="menuCouleur" class="menu">
<div class="contenuMenu">
<em>Choosing the color:</em> <br/><br/>
<div id="colorSV" onmousemove="if(mouseDown==true){colorSV(event)}" onmousedown="colorSV(event); mouseDown = true" onmouseup="mouseDown = false">
<svg:svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
<svg:defs id="defs1">
<svg:linearGradient id="linearGradient1" x1="0%" y1="0%" x2="100%" y2="0%">
<svg:stop
style="stop-color:#000000;stop-opacity:1;"
offset="0%" />
<svg:stop
style="stop-color:#000000;stop-opacity:0;"
offset="100%" />
</svg:linearGradient>
<svg:linearGradient id="linearGradient2" x1="0%" y1="0%" x2="0%" y2="100%">
<svg:stop
style="stop-color:#ffffff;stop-opacity:0;"
offset="0%" />
<svg:stop
style="stop-color:#ffffff;stop-opacity:1;"
offset="100%" />
</svg:linearGradient>
</svg:defs>
<svg:rect
style="fill:url(#linearGradient2);fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;fill-opacity:1"
width="255"
height="255"
x="0"
y="0"
ry="0" />
<svg:rect
style="fill:url(#linearGradient1);fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;fill-opacity:1"
width="255"
height="255"
x="0"
y="0"
ry="0" />
<svg:line
id="ligneValeur"
x1="255"
y1="0"
x2="255"
y2="255"
style="stroke:rgb(0,0,0);stroke-width:2"/>
<svg:line
id="ligneSaturation"
x1="0"
y1="0"
x2="255"
y2="0"
style="stroke:rgb(0,0,0);stroke-width:2"/>
</svg:svg>
</div>
<div id="colorT" onmousemove="if(mouseDown==true){colorT(event)}" onmousedown="colorT(event); mouseDown = true" onmouseup="mouseDown = false">
<svg:svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
<svg:defs id="defs2">
<svg:linearGradient id="linearGradient3" x1="0%" y1="100%" x2="0%" y2="0%">
<svg:stop
style="stop-color:#ff0000;stop-opacity:1;"
offset="0%" />
<svg:stop
style="stop-color:#ff00ff;stop-opacity:1;"
offset="16.66%" />
<svg:stop
style="stop-color:#0000ff;stop-opacity:1;"
offset="33.33%" />
<svg:stop
style="stop-color:#00ffff;stop-opacity:1;"
offset="50%" />
<svg:stop
style="stop-color:#00ff00;stop-opacity:1;"
offset="66.66%" />
<svg:stop
style="stop-color:#ffff00;stop-opacity:1;"
offset="83.33%" />
<svg:stop
style="stop-color:#ff0000;stop-opacity:1;"
offset="100%" />
</svg:linearGradient>
</svg:defs>
<svg:rect
style="fill:url(#linearGradient3);fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;fill-opacity:1"
width="255"
height="255"
x="0"
y="0"
ry="0" />
<svg:line
id="ligneTeinte"
x1="0"
y1="0"
x2="20"
y2="0"
style="stroke:rgb(0,0,0);stroke-width:2"/>
</svg:svg>
</div>
<table id="colorValues">
<tr>
<td>Color: </td><td><input id="inputTeinte" class="smallInput" value="0" onkeypress=''/></td>
</tr><tr>
<td>Value: </td><td><input id="inputValeur" class="smallInput" value="0" onkeypress=''/></td>
</tr><tr>
<td>Saturation: </td><td><input id="inputSaturation" class="smallInput" value="0" onkeypress=''/></td>
</tr><tr>
<td>Red: </td><td><input id="inputRouge" class="smallInput" value="255" onkeypress=''/></td>
</tr><tr>
<td>Green: </td><td><input id="inputVert" class="smallInput" value="0" onkeypress=''/></td>
</tr><tr>
<td>Blue: </td><td><input id="inputBleu" class="smallInput" value="0" onkeypress=''/></td>
</tr><tr>
<td>Opacity: </td><td><input id="inputOpacity" class="smallInput" value="1" onkeypress=''/></td>
</tr><!--<tr>
<td><input id="inputCouleur" style="width: 70%" value="cyan" onkeypress='couleurFonction = this.value; if(event.keyCode==13) actualiserGraph()'/></td>
</tr>-->
</table>
<div id="apercuCouleur" title="New Color"></div><div id="apercuCouleur2" title="Old Color"></div>
</div>
<div class="barreBasMenu"><input type="button" onclick="if(idColor=='buttonColor'){cacherMenu()}else{afficherMenu('menuFonctions')}; actualiserGraph()" value="Check"/></div>
</div>
<!-- Erreurs Fonctions interdites -->
<div id="fctInterdite" class="miniMenu">
<br/>
<h1>------- Error -------</h1>
<br/>
Impossible to draw the function ...
<br/><br/>
Error in expression or unexpected char: <br/>
<span id="spanFctInterdite" style="font-style:italic;"></span>
<br/><br/>
<input type="button" onclick="cacherMenu()" value="Ok"/>
</div>
<!-- Autres erreurs -->
<div id="erreurFct" class="miniMenu">
<h1>------- Error -------</h1>
Runtime error! Check your function and try to draw it again.
<br/>
Description and parameters various functions which are available to help.
<br/><br/>
<input type="button" onclick="afficherMenu('menuAide')" value="Help"/>
<input type="button" onclick="cacherMenu()" value="Ok"/>
</div>
<!-- Menu des mises à jour -->
<div id="mAj" class="menu">
<h1>Updated</h1>
Current version: <br/><span id="thisVersion"></span><br/>
The last on-line version: <br/><span id="newVersion"></span><br/>
<br/>
This widget is available to using on web-site: <em>http://gyb.educanet2.ch/tm-widgets/yannick</em><br/>
<br/>
</div>
<!-- Erreur mise à jour -->
<div id="erreurMaJ" class="miniMenu">
<br/>
<h1>------- Error -------</h1>
<br/><br/>
Update to latest version is not available because you already use the latest version.
<br/><br/><br/>
<input type="button" onclick="cacherMenu()" value="Ok"/>
</div>
<!-- Info options sauvegardées -->
<div id="infoSauvegarde" class="alertMenu">
<br/>
<h1>Options saved!</h1>
<br/>
<input type="button" onclick="document.getElementById('infoSauvegarde').style.display = 'none'" value="Ok"/>
</div>
<!-- ..... Flèches de déplacement ..... -->
<div class="flecheDeplacement" id="flecheHaut" onclick="if(fonction3D){zoom3D(1.25)}else{deplacerY(1)}" onmousemove="sourisMove(event)"></div>
<div class="flecheDeplacement" id="flecheGauche" onclick="deplacerX(-1)" onmousemove="sourisMove(event)"></div>
<div class="flecheDeplacement" id="flecheBas" onclick="if(fonction3D){zoom3D(0.8)}else{deplacerY(-1)}" onmousemove="sourisMove(event)"></div>
<div class="flecheDeplacement" id="flecheDroite" onclick="deplacerX(1)" onmousemove="sourisMove(event)"></div>
<!-- ..... Bas du Widget ..... -->
<div class="info" id="info"></div>
<div id="point">o</div>
<div id="tangente"></div>
<!-- .... Autres .... -->
<div id="onglet3D" onclick="activer3D()">3D</div>
</body>
<!-- .............................. Widget réalisé par Yannick Vessaz .............................. -->
<!-- .............................. e-mail: yannick.vessaz@gmail.com .............................. -->
<span class="texteSecondaire" style="font-size:10px;">Tool for analysis of function is not reliable on 100%. Don't forget check results of analysis before use it.</span>
</div>
<div class="barreBasMenu"><input type="button" onclick="etudier(document.getElementById('inputEq').value)" value="Actualize" style="position:relative;right:310px;"/> <input type="button" onclick='cacherMenu()' value="Cancel"/></div>
</div>
<!-- Fonctions multiples -->
<div id="menuFonctions" class="menu">
<table class="ongletMenu">
<tr>
<td class="ongletMenuActuel" onclick='afficherMenu("menuFonctions")'>Functions</td>
<td onclick='afficherMenu("menuHistorique")'>History</td>
</tr>
</table>
<div class="contenuMenu avecBordures">
<em>Current</em><br/>
f(x) = <span id="fonctionActuelle">x</span> <input type="button" value="+" onclick="ajouterFonction(document.getElementById('fonctionActuelle').innerHTML)"/>
<br/><br/>
<em>Additional</em><br/>
<span id="fonctionsSupp">n/a ...</span>
</div>
<div class="barreBasMenu"><input type="button" onclick='cacherMenu()' value="Cancel"/></div>
</div>
<!-- Historique -->
<div id="menuHistorique" class="menu">
<table class="ongletMenu">
<tr>
<td onclick='afficherMenu("menuFonctions")'>Functions</td>
<td class="ongletMenuActuel" onclick='afficherMenu("menuHistorique")'>History</td>
</tr>
</table>
<div class="contenuMenu avecBordures" id="divHistorique">
<span id="spanHistorique"></span>
</div>
<div class="barreBasMenu"><input type="button" onclick='cacherMenu()' value="Cancel"/></div>
</div>
<!-- Couleur -->
<div id="menuCouleur" class="menu">
<div class="contenuMenu">
<em>Choosing the color:</em> <br/><br/>
<div id="colorSV" onmousemove="if(mouseDown==true){colorSV(event)}" onmousedown="colorSV(event); mouseDown = true" onmouseup="mouseDown = false">
<svg:svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
<svg:defs id="defs1">
<svg:linearGradient id="linearGradient1" x1="0%" y1="0%" x2="100%" y2="0%">
<svg:stop
style="stop-color:#000000;stop-opacity:1;"
offset="0%" />
<svg:stop
style="stop-color:#000000;stop-opacity:0;"
offset="100%" />
</svg:linearGradient>
<svg:linearGradient id="linearGradient2" x1="0%" y1="0%" x2="0%" y2="100%">
<svg:stop
style="stop-color:#ffffff;stop-opacity:0;"
offset="0%" />
<svg:stop
style="stop-color:#ffffff;stop-opacity:1;"
offset="100%" />
</svg:linearGradient>
</svg:defs>
<svg:rect
style="fill:url(#linearGradient2);fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;fill-opacity:1"
width="255"
height="255"
x="0"
y="0"
ry="0" />
<svg:rect
style="fill:url(#linearGradient1);fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;fill-opacity:1"
width="255"
height="255"
x="0"
y="0"
ry="0" />
<svg:line
id="ligneValeur"
x1="255"
y1="0"
x2="255"
y2="255"
style="stroke:rgb(0,0,0);stroke-width:2"/>
<svg:line
id="ligneSaturation"
x1="0"
y1="0"
x2="255"
y2="0"
style="stroke:rgb(0,0,0);stroke-width:2"/>
</svg:svg>
</div>
<div id="colorT" onmousemove="if(mouseDown==true){colorT(event)}" onmousedown="colorT(event); mouseDown = true" onmouseup="mouseDown = false">
<svg:svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
<svg:defs id="defs2">
<svg:linearGradient id="linearGradient3" x1="0%" y1="100%" x2="0%" y2="0%">
<svg:stop
style="stop-color:#ff0000;stop-opacity:1;"
offset="0%" />
<svg:stop
style="stop-color:#ff00ff;stop-opacity:1;"
offset="16.66%" />
<svg:stop
style="stop-color:#0000ff;stop-opacity:1;"
offset="33.33%" />
<svg:stop
style="stop-color:#00ffff;stop-opacity:1;"
offset="50%" />
<svg:stop
style="stop-color:#00ff00;stop-opacity:1;"
offset="66.66%" />
<svg:stop
style="stop-color:#ffff00;stop-opacity:1;"
offset="83.33%" />
<svg:stop
style="stop-color:#ff0000;stop-opacity:1;"
offset="100%" />
</svg:linearGradient>
</svg:defs>
<svg:rect
style="fill:url(#linearGradient3);fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;fill-opacity:1"
width="255"
height="255"
x="0"
y="0"
ry="0" />
<svg:line
id="ligneTeinte"
x1="0"
y1="0"
x2="20"
y2="0"
style="stroke:rgb(0,0,0);stroke-width:2"/>
</svg:svg>
</div>
<table id="colorValues">
<tr>
<td>Color: </td><td><input id="inputTeinte" class="smallInput" value="0" onkeypress=''/></td>
</tr><tr>
<td>Value: </td><td><input id="inputValeur" class="smallInput" value="0" onkeypress=''/></td>
</tr><tr>
<td>Saturation: </td><td><input id="inputSaturation" class="smallInput" value="0" onkeypress=''/></td>
</tr><tr>
<td>Red: </td><td><input id="inputRouge" class="smallInput" value="255" onkeypress=''/></td>
</tr><tr>
<td>Green: </td><td><input id="inputVert" class="smallInput" value="0" onkeypress=''/></td>
</tr><tr>
<td>Blue: </td><td><input id="inputBleu" class="smallInput" value="0" onkeypress=''/></td>
</tr><tr>
<td>Opacity: </td><td><input id="inputOpacity" class="smallInput" value="1" onkeypress=''/></td>
</tr><!--<tr>
<td><input id="inputCouleur" style="width: 70%" value="cyan" onkeypress='couleurFonction = this.value; if(event.keyCode==13) actualiserGraph()'/></td>
</tr>-->
</table>
<div id="apercuCouleur" title="New Color"></div><div id="apercuCouleur2" title="Old Color"></div>
</div>
<div class="barreBasMenu"><input type="button" onclick="if(idColor=='buttonColor'){cacherMenu()}else{afficherMenu('menuFonctions')}; actualiserGraph()" value="Check"/></div>
</div>
<!-- Erreurs Fonctions interdites -->
<div id="fctInterdite" class="miniMenu">
<br/>
<h1>------- Error -------</h1>
<br/>
Impossible to draw the function ...
<br/><br/>
Error in expression or unexpected char: <br/>
<span id="spanFctInterdite" style="font-style:italic;"></span>
<br/><br/>
<input type="button" onclick="cacherMenu()" value="Ok"/>
</div>
<!-- Autres erreurs -->
<div id="erreurFct" class="miniMenu">
<h1>------- Error -------</h1>
Runtime error! Check your function and try to draw it again.
<br/>
Description and parameters various functions which are available to help.
<br/><br/>
<input type="button" onclick="afficherMenu('menuAide')" value="Help"/>
<input type="button" onclick="cacherMenu()" value="Ok"/>
</div>
<!-- Menu des mises à jour -->
<div id="mAj" class="menu">
<h1>Updated</h1>
Current version: <br/><span id="thisVersion"></span><br/>
The last on-line version: <br/><span id="newVersion"></span><br/>
<br/>
This widget is available to using on web-site: <em>http://gyb.educanet2.ch/tm-widgets/yannick</em><br/>
<br/>
</div>
<!-- Erreur mise à jour -->
<div id="erreurMaJ" class="miniMenu">
<br/>
<h1>------- Error -------</h1>
<br/><br/>
Update to latest version is not available because you already use the latest version.
<br/><br/><br/>
<input type="button" onclick="cacherMenu()" value="Ok"/>
</div>
<!-- Info options sauvegardées -->
<div id="infoSauvegarde" class="alertMenu">
<br/>
<h1>Options saved!</h1>
<br/>
<input type="button" onclick="document.getElementById('infoSauvegarde').style.display = 'none'" value="Ok"/>
</div>
<!-- ..... Flèches de déplacement ..... -->
<div class="flecheDeplacement" id="flecheHaut" onclick="if(fonction3D){zoom3D(1.25)}else{deplacerY(1)}" onmousemove="sourisMove(event)"></div>
<div class="flecheDeplacement" id="flecheGauche" onclick="deplacerX(-1)" onmousemove="sourisMove(event)"></div>
<div class="flecheDeplacement" id="flecheBas" onclick="if(fonction3D){zoom3D(0.8)}else{deplacerY(-1)}" onmousemove="sourisMove(event)"></div>
<div class="flecheDeplacement" id="flecheDroite" onclick="deplacerX(1)" onmousemove="sourisMove(event)"></div>
<!-- ..... Bas du Widget ..... -->
<div class="info" id="info"></div>
<div id="point">o</div>
<div id="tangente"></div>
<!-- .... Autres .... -->
<div id="onglet3D" onclick="activer3D()">3D</div>
</body>
<!-- .............................. Widget réalisé par Yannick Vessaz .............................. -->
<!-- .............................. e-mail: yannick.vessaz@gmail.com .............................. -->
</html>
/*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
#include <QRegExp>
#include <QSvgGenerator>
#include <QSvgRenderer>
#include "UBCFFSubsetAdaptor.h"
#include "core/UBPersistenceManager.h"
#include "document/UBDocumentProxy.h"
#include "domain/UBItem.h"
#include "domain/UBGraphicsPolygonItem.h"
#include "domain/UBGraphicsStroke.h"
#include "domain/UBGraphicsTextItem.h"
#include "domain/UBGraphicsSvgItem.h"
#include "UBCFFSubsetAdaptor.h"
#include "UBMetadataDcSubsetAdaptor.h"
#include "UBThumbnailAdaptor.h"
#include "UBSvgSubsetAdaptor.h"
......@@ -19,32 +35,42 @@
//tag names definition
//use them everiwhere!
static char* tElement = "element";
static char* tEllipse = "ellipse";
static char* tIwb = "iwb";
static char* tMeta = "meta";
static char* tPage = "page";
static char* tPageset = "pageset";
static char* tPolygon = "polygon";
static char* tRect = "rect";
static char* tSvg = "svg";
static char* tTextarea = "textarea";
static QString tElement = "element";
static QString tEllipse = "ellipse";
static QString tIwb = "iwb";
static QString tMeta = "meta";
static QString tPage = "page";
static QString tPageset = "pageset";
static QString tPolygon = "polygon";
static QString tRect = "rect";
static QString tSvg = "svg";
static QString tText = "text";
static QString tTextarea = "textarea";
static QString tTspan = "tspan";
static QString tBreak = "tbreak";
//attribute names definition
static char* aFill = "fill";
static char* aFillopacity = "fill-opacity";
static char* aX = "x";
static char* aY = "y";
static char* aWidth = "width";
static char* aHeight = "height";
static char* aStroke = "stroke";
static char* aStrokewidth = "stroke-width";
static char* aCx = "cx";
static char* aCy = "cy";
static char* aRx = "rx";
static char* aRy = "ry";
static char* aTransform = "transform";
static char* aViewbox = "viewbox";
static QString aFill = "fill";
static QString aFillopacity = "fill-opacity";
static QString aX = "x";
static QString aY = "y";
static QString aWidth = "width";
static QString aHeight = "height";
static QString aStroke = "stroke";
static QString aStrokewidth = "stroke-width";
static QString aCx = "cx";
static QString aCy = "cy";
static QString aRx = "rx";
static QString aRy = "ry";
static QString aTransform = "transform";
static QString aViewbox = "viewbox";
static QString aFontSize = "font-size";
static QString aFontfamily = "font-family";
static QString aFontstretch = "font-stretch";
static QString aFontstyle = "font-style";
static QString aFontweight = "font-weight";
static QString aTextalign = "text-align";
UBCFFSubsetAdaptor::UBCFFSubsetAdaptor()
{
......@@ -82,10 +108,8 @@ bool UBCFFSubsetAdaptor::ConvertCFFFileToUbz(QString &cffSourceFile, UBDocumentP
UBCFFSubsetAdaptor::UBCFFSubsetReader::UBCFFSubsetReader(UBDocumentProxy *proxy, QByteArray &content):
mReader(content), mProxy(proxy), currentState(NONE)
{
//TODO parse
}
bool UBCFFSubsetAdaptor::UBCFFSubsetReader::parse()
{
UBMetadataDcSubsetAdaptor::persist(mProxy);
......@@ -187,6 +211,12 @@ bool UBCFFSubsetAdaptor::UBCFFSubsetReader::parseCurrentElementStart()
return false;
}
else
if ( elName == tText)
{
if (!parseText())
return false;
}
else
if ( elName == tTextarea)
{
if (!parseTextArea())
......@@ -300,6 +330,37 @@ bool UBCFFSubsetAdaptor::UBCFFSubsetReader::parseSvg()
return true;
}
void UBCFFSubsetAdaptor::UBCFFSubsetReader::repositionSvgItem(UBGraphicsSvgItem *item, qreal width, qreal height, qreal x, qreal y, bool useTransform, QTransform &transform)
{
QTransform curTrans = item->transform();
qWarning() << QString().sprintf("Item current transform = %f 0 0 %f %f %f, position %f, %f", curTrans.m11(), curTrans.m22(), curTrans.dx(), curTrans.dy(), item->x(), item->y());
//check if rect is rotated
//rotate svg item itself
QRectF itemBounds = item->boundingRect();
//first, svg is mapped to svg item bound
//second, svg item is mapped to scene
//so, get svg to svg item scale and multiple by scene scale
qreal hScale = itemBounds.width() / width * curTrans.m11();
qreal vScale = itemBounds.height() / height * curTrans.m22();
if (useTransform)
{
QPointF oldVector((x - transform.dx()), (y - transform.dy()));
QTransform rTransform(transform.m11(), transform.m12(), transform.m21(), transform.m22(), 0, 0);
QPointF newVector = rTransform.map(oldVector);
rTransform.scale(curTrans.m11(), curTrans.m22());
item->setTransform(QTransform(rTransform.m11(), rTransform.m12(), rTransform.m21(), rTransform.m22(), 0, 0));
item->setPos((x - mViewBoxCenter.x() + (newVector - oldVector).x()) * hScale, (y - mViewBoxCenter.y() + (newVector - oldVector).y()) * vScale );
}
else
{
item->setPos((x - mViewBoxCenter.x()) * hScale, (y - mViewBoxCenter.y()) * vScale);
}
QTransform newTrans = item->transform();
qWarning() << QString("Item new transform = %3 0 0 %4 %1 %2, position %5, %6").arg(newTrans.dx()).arg(newTrans.dy()).arg(newTrans.m11()).arg(newTrans.m22()).arg(item->x()).arg(item->y());
}
bool UBCFFSubsetAdaptor::UBCFFSubsetReader::parseRect()
{
if (currentState != SVG && currentState != PAGE)
......@@ -312,11 +373,6 @@ bool UBCFFSubsetAdaptor::UBCFFSubsetReader::parseRect()
if (currentState == SVG && mCurrentScene == NULL)
createNewScene();
//fill and stroke color
QColor fillColor = colorFromString(mReader.attributes().value(aFill).toString());
QColor strokeColor = colorFromString(mReader.attributes().value(aStroke).toString());
int strokeWidth = mReader.attributes().value(aStrokewidth).toString().toInt();
//rect lef top corner coordinates
qreal x1 = mReader.attributes().value(aX).toString().toDouble();
qreal y1 = mReader.attributes().value(aY).toString().toDouble();
......@@ -325,34 +381,41 @@ bool UBCFFSubsetAdaptor::UBCFFSubsetReader::parseRect()
qreal height = mReader.attributes().value(aHeight).toString().toDouble();
//init svg generator with temp file
QSvgGenerator *generator = createSvgGenerator();
QSvgGenerator *generator = createSvgGenerator(width + 10, height + 10);
//init painter to paint to svg
QPainter painter;
painter.begin(generator);
//check if rect is rotated
if (mReader.attributes().hasAttribute(aTransform))
//fill rect
if (mReader.attributes().hasAttribute(aFill))
{
QTransform transform = transformFromString(mReader.attributes().value(aTransform).toString());
painter.setTransform(transform);
//change left top coordinates to correspond to transformation
x1 -= transform.dx();
y1 -= transform.dy();
QColor fillColor = colorFromString(mReader.attributes().value(aFill).toString());
painter.setBrush(QBrush(fillColor));
painter.fillRect(5, 5, width, height, fillColor);
}
painter.setBrush(QBrush(fillColor));
painter.fillRect(x1, y1, width, height, fillColor);
QPen pen(strokeColor);
pen.setWidth(strokeWidth);
painter.setPen(pen);
painter.drawRect(x1, y1, width, height);
bool hasStrokeColor = mReader.attributes().hasAttribute(aStroke);
bool hasStrokeWidth = mReader.attributes().hasAttribute(aStrokewidth);
if (hasStrokeColor || hasStrokeWidth)
{
QPen pen;
if (hasStrokeColor)
pen.setColor(colorFromString(mReader.attributes().value(aStroke).toString()));
if (hasStrokeWidth)
pen.setWidth(mReader.attributes().value(aStrokewidth).toString().toInt());
painter.setPen(pen);
painter.drawRect(5, 5, width, height);
}
painter.end();
//add resulting svg file to scene
mCurrentScene->addSvg(QUrl::fromLocalFile(generator->fileName()));
UBGraphicsSvgItem *svgItem = mCurrentScene->addSvg(QUrl::fromLocalFile(generator->fileName()));
QTransform transform;
bool hastransform = getCurElementTransorm(transform);
repositionSvgItem(svgItem, width + 10, height + 10, x1 - 5, y1 - 5, hastransform, transform);
delete generator;
return true;
......@@ -370,7 +433,10 @@ bool UBCFFSubsetAdaptor::UBCFFSubsetReader::parseEllipse()
if (currentState == SVG && mCurrentScene == NULL)
createNewScene();
QSvgGenerator *generator = createSvgGenerator();
//ellipse horisontal and vertical radius
qreal rx = mReader.attributes().value(aRx).toString().toDouble();
qreal ry = mReader.attributes().value(aRy).toString().toDouble();
QSvgGenerator *generator = createSvgGenerator(rx * 2 + 10, ry * 2 + 10);
//fill and stroke color
QColor fillColor = colorFromString(mReader.attributes().value(aFill).toString());
......@@ -380,44 +446,33 @@ bool UBCFFSubsetAdaptor::UBCFFSubsetReader::parseEllipse()
//ellipse center coordinates
qreal cx = mReader.attributes().value(aCx).toString().toDouble();
qreal cy = mReader.attributes().value(aCy).toString().toDouble();
//ellipse horisontal and vertical radius
qreal rx = mReader.attributes().value(aRx).toString().toDouble();
qreal ry = mReader.attributes().value(aRy).toString().toDouble();
//we should change cx and cy by rx and ry because qpainter
//draws ellipse by its rect coordinates
cx -= rx;
cy -= ry;
//init painter to paint to svg
QPainter painter;
painter.begin(generator);
//check if ellipse is rotated
if (mReader.attributes().hasAttribute(aTransform))
{
QTransform transform = transformFromString(mReader.attributes().value(aTransform).toString());
painter.setTransform(transform);
//change cx and cy to correspond to transformation
cx -= transform.dx();
cy -= transform.dy();
}
QPen pen(strokeColor);
pen.setWidth(strokeWidth);
painter.setPen(pen);
painter.setBrush(QBrush(fillColor));
painter.drawEllipse(cx, cy, rx * 2, ry * 2);
painter.drawEllipse(5, 5, rx * 2, ry * 2);
painter.end();
//add resulting svg file to scene
mCurrentScene->addSvg(QUrl::fromLocalFile(generator->fileName()));
UBGraphicsSvgItem *svgItem = mCurrentScene->addSvg(QUrl::fromLocalFile(generator->fileName()));
QTransform transform;
bool hasTransform = getCurElementTransorm(transform);
repositionSvgItem(svgItem, rx * 2 + 10, ry * 2 + 10, cx - rx - 5, cy - ry -5, hasTransform, transform);
delete generator;
return true;
}
}
bool UBCFFSubsetAdaptor::UBCFFSubsetReader::parseTextArea()
{
......@@ -431,6 +486,254 @@ bool UBCFFSubsetAdaptor::UBCFFSubsetReader::parseTextArea()
if (currentState == SVG && mCurrentScene == NULL)
createNewScene();
//TODO textarea node
qreal x = mReader.attributes().value(aX).toString().toDouble();
qreal y = mReader.attributes().value(aY).toString().toDouble();
qreal width = mReader.attributes().value(aWidth).toString().toDouble();
qreal height = mReader.attributes().value(aHeight).toString().toDouble();
qWarning() << QString().sprintf("Text coordinates : %f,%f. Text size %f,%f", x, y, width, height);
qreal fontSize = 12.0;
QColor fontColor;
QString fontFamily = "Arial";
QString fontStretch = "normal";
bool italic = false;
int fontWeight = QFont::Normal;
int textAlign = Qt::AlignLeft;
QTransform fontTransform;
parseTextAttributes(fontSize, fontColor, fontFamily, fontStretch, italic, fontWeight, textAlign, fontTransform);
QSvgGenerator *generator = createSvgGenerator(width, height);
QPainter painter;
painter.begin(generator);
painter.setFont(QFont(fontFamily, fontSize, fontWeight, italic));
qreal curY = 0.0;
qreal curX = 0.0;
qreal linespacing = QFontMetricsF(painter.font()).leading();
//remember if text area has transform
QString transformString;
QTransform transform;
bool hasTransform = getCurElementTransorm(transform);
QRectF lastDrawnTextBoundingRect;
//parse text area tags
while(true)
{
mReader.readNext();
QStringRef elementName = mReader.name();
if (mReader.isEndDocument())
break;
if (mReader.isEndElement() && elementName == tBreak)
{
//when tbreak appers, move down by the drawn rect height
//TODO: line spacing is not calculated yet, additional code is required
curY += lastDrawnTextBoundingRect.height() + linespacing;
curX = 0.0;
lastDrawnTextBoundingRect = QRectF(0,0,0,0);
continue;
}
if (mReader.isEndElement() && elementName == tTextarea)
break;
if (mReader.isStartElement() && elementName == tTspan)
{
parseTextAttributes(fontSize, fontColor, fontFamily, fontStretch, italic, fontWeight, textAlign, fontTransform);
painter.setFont(QFont(fontFamily, fontSize, fontWeight, italic));
painter.setPen(fontColor);
linespacing = QFontMetricsF(painter.font()).leading();
continue;
}
if (mReader.isCharacters() || mReader.isCDATA())
{
QString text = mReader.text().toString().trimmed();
//skip empty text
if (text.length() == 0)
continue;
//get bounding rect to obtain desired text height
lastDrawnTextBoundingRect = painter.boundingRect(QRectF(curX, curY, width, height - curY), textAlign|Qt::TextWordWrap, text);
QString log = QString().sprintf(" at rect %f, %f, %f, %f. Bounding rect is %f, %f, %f, %f", 0.0, curY, width, height - curY, lastDrawnTextBoundingRect.x(), lastDrawnTextBoundingRect.y(), lastDrawnTextBoundingRect.width(), lastDrawnTextBoundingRect.height());
qWarning() << "Text " << text << log;
painter.drawText(curX, curY, width, lastDrawnTextBoundingRect.height(), textAlign|Qt::TextWordWrap, text);
curX += lastDrawnTextBoundingRect.x() + lastDrawnTextBoundingRect.width();
continue;
}
}
painter.end();
//add resulting svg file to scene
UBGraphicsSvgItem *svgItem = mCurrentScene->addSvg(QUrl::fromLocalFile(generator->fileName()));
repositionSvgItem(svgItem, width, height, x, y, hasTransform, transform);
delete generator;
return true;
}
bool UBCFFSubsetAdaptor::UBCFFSubsetReader::parseText()
{
if (currentState != SVG && currentState != PAGE)
{
qWarning() << "iwb content parse error, unexpected textarea tag at line" << mReader.lineNumber();
return false;
}
//create new scene if it's not created yet (for one page document case)
if (currentState == SVG && mCurrentScene == NULL)
createNewScene();
qreal x = mReader.attributes().value(aX).toString().toDouble();
qreal y = mReader.attributes().value(aY).toString().toDouble();
qreal width = 0;
qreal height = 0;
QList<QRectF> textRects;
QList<QFont> textFonts;
QList<QString> textLines;
QList<int> textAligns;
QList<QColor> textColors;
qWarning() << QString().sprintf("Text coordinates : %f,%f. Text size %f,%f", x, y, width, height);
qreal fontSize = 12.0;
QFont textFont;
QColor fontColor;
QString fontFamily = "Arial";
QString fontStretch = "normal";
bool italic = false;
int fontWeight = QFont::Normal;
int textAlign = Qt::AlignLeft;
QTransform fontTransform;
parseTextAttributes(fontSize, fontColor, fontFamily, fontStretch, italic, fontWeight, textAlign, fontTransform);
textFont = QFont(fontFamily, fontSize, fontWeight, italic);
QFontMetricsF metrics = QFontMetricsF(textFont);
qreal curHeight = metrics.height();
qreal curY = 0.0;
qreal curX = 0.0;
qreal linespacing = QFontMetrics(textFont).leading();
//remember if text area has transform
QTransform transform;
bool hasTransform = getCurElementTransorm(transform);
QRectF lastDrawnTextBoundingRect;
QStack<QFont> fontStack;
QStack<QColor> colorStack;
QStack<int> alignStack;
// first extimate desired text area size
// to do that, parse text area tags
while(true)
{
mReader.readNext();
QStringRef elementName = mReader.name();
if (mReader.isEndDocument())
break;
if (mReader.isEndElement())
{
if (elementName == tBreak)
{
//when tbreak appers, move down by the drawn rect height
//TODO: line spacing is not calculated yet, probably additional code is required
curY += lastDrawnTextBoundingRect.height() + linespacing;
curX = 0.0;
height += lastDrawnTextBoundingRect.height();
lastDrawnTextBoundingRect = QRectF(0,0,0,0);
continue;
}
if (elementName == tTspan)
{
textFont = fontStack.pop();
fontColor = colorStack.pop();
textAlign = alignStack.pop();
continue;
}
}
if (mReader.isEndElement() && elementName == tText)
break;
if (mReader.isStartElement() && elementName == tTspan)
{
fontStack.push(textFont);
colorStack.push(fontColor);
alignStack.push(textAlign);
parseTextAttributes(fontSize, fontColor, fontFamily, fontStretch, italic, fontWeight, textAlign, fontTransform);
textFont = QFont(fontFamily, fontSize, fontWeight, italic);
metrics = QFontMetricsF(textFont);
curHeight = metrics.height();
linespacing = QFontMetricsF(textFont).leading();
continue;
}
if (mReader.isCharacters() || mReader.isCDATA())
{
QString text = mReader.text().toString();
//skip empty text
if (text.trimmed().length() == 0)
continue;
//get bounding rect to obtain desired text height
lastDrawnTextBoundingRect = metrics.boundingRect(QRectF(), textAlign, text);
QString log = QString().sprintf(" at rect %f, %f, %f, %f. Bounding rect is %f, %f, %f, %f", 0.0, curY, width, height - curY, lastDrawnTextBoundingRect.x(), lastDrawnTextBoundingRect.y(), lastDrawnTextBoundingRect.width(), lastDrawnTextBoundingRect.height());
qWarning() << "Text " << text << log;
textFonts.append(textFont);
textRects.append(QRectF(curX, curY, lastDrawnTextBoundingRect.width(), lastDrawnTextBoundingRect.height()));
textLines.append(text);
textAligns.append(textAlign);
textColors.append(fontColor);
curX += lastDrawnTextBoundingRect.width();
if (width < curX)
width = curX;
if (height == 0)
height = curHeight;
continue;
}
}
QSvgGenerator *generator = createSvgGenerator(width, height);
QPainter painter;
painter.begin(generator);
if (textRects.count() != 0)
{
QListIterator<QRectF> textRectsIter(textRects);
QListIterator<QFont> textFontsIter(textFonts);
QListIterator<QString> textLinesIter(textLines);
QListIterator<int> textAlignsIter(textAligns);
QListIterator<QColor> textColorsIter(textColors);
while (textRectsIter.hasNext())
{
QRectF rt = textRectsIter.next();
QFont font = textFontsIter.next();
QString line = textLinesIter.next();
int align = textAlignsIter.next();
QColor color = textColorsIter.next();
painter.setFont(font);
painter.setPen(color);
painter.drawText(rt.x(), rt.y(), rt.width(), rt.height(), align, line);
}
}
painter.end();
//add resulting svg file to scene
UBGraphicsSvgItem *svgItem = mCurrentScene->addSvg(QUrl::fromLocalFile(generator->fileName()));
repositionSvgItem(svgItem, width, height, x, y, hasTransform, transform);
delete generator;
return true;
}
......@@ -459,6 +762,8 @@ bool UBCFFSubsetAdaptor::UBCFFSubsetReader::parsePage()
createNewScene();
qWarning() << "Added page number" << mProxy->pageCount();
return true;
}
......@@ -487,6 +792,7 @@ bool UBCFFSubsetAdaptor::UBCFFSubsetReader::parseIwbElementRef()
bool UBCFFSubsetAdaptor::UBCFFSubsetReader::createNewScene()
{
mCurrentScene = UBPersistenceManager::persistenceManager()->createDocumentSceneAt(mProxy, mProxy->pageCount());
mCurrentSceneRect = mCurrentScene->normalizedSceneRect();
return true;
}
......@@ -530,10 +836,21 @@ QColor UBCFFSubsetAdaptor::UBCFFSubsetReader::colorFromString(const QString& clr
return QColor(clrString);
}
bool UBCFFSubsetAdaptor::UBCFFSubsetReader::getCurElementTransorm(QTransform &transform)
{
if (mReader.attributes().hasAttribute(aTransform))
{
transform = transformFromString(mReader.attributes().value(aTransform).toString());
return true;
}
else
return false;
}
QTransform UBCFFSubsetAdaptor::UBCFFSubsetReader::transformFromString(const QString trString)
{
//check pattern for strings like 'rotate(10)'
QRegExp regexp("rotate\\(([-+]{0,1}[0-9]*\\.{0,1}[0-9]*)\\)");
QRegExp regexp("rotate\\( *([-+]{0,1}[0-9]*\\.{0,1}[0-9]*) *\\)");
if (regexp.exactMatch(trString))
{
if (regexp.capturedTexts().count() == 2 && regexp.capturedTexts().at(0).length() == trString.length())
......@@ -544,7 +861,7 @@ QTransform UBCFFSubsetAdaptor::UBCFFSubsetReader::transformFromString(const QStr
}
//check pattern for strings like 'rotate(10,20,20)' or 'rotate(10.1,10.2,34.2)'
regexp.setPattern("rotate\\(([-+]{0,1}[0-9]*\\.{0,1}[0-9]*),([-+]{0,1}[0-9]*\\.{0,1}[0-9]*),([-+]{0,1}[0-9]*\\.{0,1}[0-9]*)\\)");
regexp.setPattern("rotate\\( *([-+]{0,1}[0-9]*\\.{0,1}[0-9]*) *, *([-+]{0,1}[0-9]*\\.{0,1}[0-9]*) *, *([-+]{0,1}[0-9]*\\.{0,1}[0-9]*) *\\)");
if (regexp.exactMatch(trString))
{
if (regexp.capturedTexts().count() == 4 && regexp.capturedTexts().at(0).length() == trString.length())
......@@ -569,20 +886,26 @@ bool UBCFFSubsetAdaptor::UBCFFSubsetReader::getViewBoxDimenstions(const QString&
if (capturesCount == 5 && regexp.capturedTexts().at(0).length() == viewBox.length())
{
mViewBox = QRectF(0, 0, regexp.capturedTexts().at(3).toDouble(), regexp.capturedTexts().at(4).toDouble());
mViewBoxCenter.setX(mViewBox.width() / 2);
mViewBoxCenter.setY(mViewBox.height() / 2);
return true;
}
}
mViewBox = QRectF(0, 0, 1000, 1000);
mViewBoxCenter = QPointF(500, 500);
return false;
}
QSvgGenerator* UBCFFSubsetAdaptor::UBCFFSubsetReader::createSvgGenerator()
QSvgGenerator* UBCFFSubsetAdaptor::UBCFFSubsetReader::createSvgGenerator(qreal width, qreal height)
{
QSvgGenerator* generator = new QSvgGenerator();
qWarning() << QString("Making generator with file %1, size (%2, %3) and viewbox (%4 %5 %6 %7)").arg(mTempFilePath)
.arg(width).arg(height).arg(0.0).arg(0.0).arg(width).arg(width);
generator->setResolution(QApplication::desktop()->physicalDpiY());
generator->setFileName(mTempFilePath);
generator->setSize(mSize);
generator->setViewBox(mViewBox);
generator->setSize(QSize(width, height));
generator->setViewBox(QRectF(0, 0, width, height));
return generator;
}
......@@ -608,3 +931,62 @@ bool UBCFFSubsetAdaptor::UBCFFSubsetReader::getTempFileName()
}
}
void UBCFFSubsetAdaptor::UBCFFSubsetReader::parseTextAttributes(qreal &fontSize, QColor &fontColor,
QString &fontFamily, QString &fontStretch, bool &italic,
int &fontWeight, int &textAlign, QTransform &fontTransform)
{
if (mReader.attributes().hasAttribute(aFontSize))
{
//consider inch has 72 liens
//since svg font size is given in pixels, divide it by pixels per line
fontSize = mReader.attributes().value(aFontSize).toString().toDouble() * 72 / QApplication::desktop()->physicalDpiY();
}
if (mReader.attributes().hasAttribute(aFill))
fontColor = colorFromString(mReader.attributes().value(aFill).toString());
if (mReader.attributes().hasAttribute(aFontfamily))
fontFamily = mReader.attributes().value(aFontfamily).toString();
if (mReader.attributes().hasAttribute(aFontstretch))
fontStretch = mReader.attributes().value(aFontstretch).toString();
if (mReader.attributes().hasAttribute(aFontstyle))
{
QStringRef fontStyle = mReader.attributes().value(aFontstyle);
italic = fontStyle == "italic";
}
if (mReader.attributes().hasAttribute(aFontweight))
{
QStringRef weight = mReader.attributes().value(aFontweight);
if (weight == "normal")
fontWeight = QFont::Normal;
else if (weight == "light")
fontWeight = QFont::Light;
else if (weight == "demibold")
fontWeight = QFont::DemiBold;
else if (weight == "bold")
fontWeight = QFont::Bold;
if (weight == "black")
fontWeight = QFont::Black;
}
if (mReader.attributes().hasAttribute(aTextalign))
{
QString align = mReader.attributes().value(aTextalign).toString();
if (align == "middle" || align == "center")
textAlign = Qt::AlignHCenter;
else
if (align == "start")
textAlign = Qt::AlignLeft;
else
if (align == "end")
textAlign = Qt::AlignRight;
}
if (mReader.attributes().hasAttribute(aTransform))
fontTransform = transformFromString(mReader.attributes().value(aTransform).toString());
}
/*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
#ifndef UBCFFSUBSETADAPTOR_H
#define UBCFFSUBSETADAPTOR_H
......@@ -8,6 +23,8 @@
class UBDocumentProxy;
class UBGraphicsScene;
class QSvgGenerator;
class UBGraphicsSvgItem;
class QTransform;
class UBCFFSubsetAdaptor
{
......@@ -42,8 +59,10 @@ private:
private:
QString mTempFilePath;
UBGraphicsScene *mCurrentScene;
QRectF mCurrentSceneRect;
QString mIndent;
QRectF mViewBox;
QPointF mViewBoxCenter;
QSize mSize;
//methods to store current xml parse state
......@@ -63,6 +82,7 @@ private:
bool parseRect();
bool parseEllipse();
bool parseTextArea();
bool parseText();
bool parsePolygon();
bool parsePage();
bool parsePageSet();
......@@ -75,11 +95,16 @@ private:
int currentState;
//helper methods
bool getCurElementTransorm(QTransform &transform);
void repositionSvgItem(UBGraphicsSvgItem *item, qreal width, qreal height, qreal x, qreal y, bool useTransform, QTransform &transform);
QColor colorFromString(const QString& clrString);
QTransform transformFromString(const QString trString);
bool getViewBoxDimenstions(const QString& viewBox);
QSvgGenerator* createSvgGenerator();
QSvgGenerator* createSvgGenerator(qreal width, qreal height);
bool getTempFileName();
void parseTextAttributes(qreal &fontSize, QColor &fontColor,
QString &fontFamily, QString &fontStretch, bool &italic,
int &fontWeight, int &textAlign, QTransform &fontTransform);
};
};
......
/*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
#include <QDir>
#include "UBImportCFF.h"
#include "document/UBDocumentProxy.h"
#include "core/UBApplication.h"
#include "core/UBPersistenceManager.h"
#include "core/UBDocumentManager.h"
#include "core/memcheck.h"
#include "core/UBPersistenceManager.h"
#include "frameworks/UBFileSystemUtils.h"
#include "document/UBDocumentProxy.h"
#include "domain/UBGraphicsPDFItem.h"
#include "frameworks/UBFileSystemUtils.h"
#include "pdf/PDFRenderer.h"
#include "UBCFFSubsetAdaptor.h"
#include "UBImportCFF.h"
#include "quazip.h"
#include "quazipfile.h"
......
/*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
#ifndef UBIMPORTCFF_H
#define UBIMPORTCFF_H
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment