Commit bb60925b authored by Clément Fauconnier's avatar Clément Fauconnier

revert GraphMe widget

parent 1688bd53
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<meta name="description" content="Traceur de fonctions mathématiques en JavaScript"/>
<meta name="author" content="Yannick Vessaz"/>
<meta name="revised" content="2018/06/04"/>
<title>GraphMe</title>
<link rel="shortcut icon" type="image/png" href="Images/mini_icon.png"/>
<link rel="stylesheet" type="text/css" href="Style/ColorPicker.css"/>
<link rel="stylesheet" type="text/css" href="Style/Haut.css"/>
<link rel="stylesheet" type="text/css" href="Style/Menus.css"/>
<link rel="stylesheet" type="text/css" href="Style/Widget.css"/>
<script type="text/javascript" src="JavaScript/Affichage.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/ColorPicker.js"></script>
<script type="text/javascript" src="JavaScript/Editeur.js"></script>
<script type="text/javascript" src="JavaScript/Etudes.js"></script>
<script type="text/javascript" src="JavaScript/CartesianFunction.js"></script>
<script type="text/javascript" src="JavaScript/Fonction.js"></script>
<script type="text/javascript" src="JavaScript/ImplicitFunction.js"></script>
<script type="text/javascript" src="JavaScript/Interface.js"></script>
<script type="text/javascript" src="JavaScript/Languages.js"></script>
<script type="text/javascript" src="JavaScript/Outils.js"></script>
<script type="text/javascript" src="JavaScript/ParametricFunction.js"></script>
<script type="text/javascript" src="JavaScript/PolarFunction.js"></script>
<script type="text/javascript" src="JavaScript/Sauvegardes.js"></script>
<script type="text/javascript" src="JavaScript/Souris.js"></script>
<script type="text/javascript" src="JavaScript/Utils.js"></script>
<script type="text/javascript" src="JavaScript/Widget.js"></script>
</head>
<body onload="widget.init()" onresize="widget.resize()" onkeypress="keyPress(event)">
<table id="background">
<tr class="background-border-x">
<td id="background-top-left" class="background-border-y"></td>
<td id="background-top"></td>
<td id="background-top-right" class="background-border-y"></td>
</tr>
<tr>
<td id="background-left" class="background-border-y"></td>
<td id="background-center">
<!-- ..... Haut du Widget ..... -->
<!-- Onglets -->
<div id="haut">
<div id="ongletsHaut">
<span class="ongletHaut premierOngletHaut" onclick="afficherMenu('menuGraphMe')">
<img src="Images/mini_icon.png" style="width:18px; vertical-align:top;"/>
<span id="graphMeButton">
GraphMe
</span>
</span>
<span class="ongletHaut" onclick="if(fonction3D){afficherMenu('menuFonctions3D')}else{afficherMenu('menuFonctions');if(fct.list[editeur.idFct]){editeur.setOptions()}}">
<span id="functionsButton">
Functions
</span>
</span>
<span class="ongletHaut" onclick="if(fonction3D){afficherMenu('menuAffichage3D')}else{afficherMenu('menuAffichage')}">
<span id="displayButton">
Display
</span>
</span>
<span class="ongletHaut" onclick="afficherMenu('menuAide')">
<span id="helpButton">
Help
</span>
</span>
</div>
<!-- Onglet3D -->
<div id="onglet3D" onclick="activer3D()">
3D
</div>
<!-- Mini-boutons -->
<div id="topRightButtons">
<div id="boutonSaveGraph" title="Save" class="miniBouton" onclick="afficherMenu('menuSaveGraph')">S</div>
<div id="boutonAgrandir" title="Full screen" class="miniBouton" onclick="agrandirAffichage()">^</div>
<!--<div id="miniMax" onclick="miniMax()">-</div> ▶▼ -->
</div>
</div>
<!-- ..... Millieu du Widget ..... -->
<div id="widgetCenter">
<!-- Zone d'affichage -->
<div id="eventAffichage" onmousedown="souris.down(event)" onmouseup="souris.up()" onmousemove="souris.move(event)" onmouseout="souris.out(event)" ondblclick="souris.dblClick(event)">
<div id="affichage"></div>
<div id="affichageOutils"></div>
</div>
<div id="divInputRapide">
f(x) =
<input type="text" id="inputRapide" onkeypress="if(event.keyCode == 13) widget.addStartFunction()"/>
<input id="inputRapideButton" type="button" value="Display" onclick="widget.addStartFunction()"/>
</div>
<div id="zoneJoystick">
<div id="joystick" onclick="">
<table>
<tr>
<td></td>
<td onclick="if(fonction3D){display3D.zoom(1.25)}else{affichage.deplacerY(1)}"></td>
<td></td>
</tr>
<tr>
<td onclick="affichage.deplacerX(-1)"></td>
<td onclick="affichage.centrer();"></td>
<td onclick="affichage.deplacerX(1)"></td>
</tr>
<tr>
<td></td>
<td onclick="if(fonction3D){display3D.zoom(0.8)}else{affichage.deplacerY(-1)}"></td>
<td></td>
</tr>
</table>
</div>
<div id="boutonJoystick" onclick=""></div>
</div>
<div id="zoomButtons">
<div id="zoomOut" class="toolButton zoomButton" onclick="affichage.zoom(1.25)">-</div><div id="zoomIn" class="toolButton zoomButton" onclick="affichage.zoom(0.8)">+</div>
</div>
<div id="toolButtons">
<div id="pointTool" title="Point tool" class="toolButton selectedTool" onclick="outil.choisir('point')">·</div>
<div id="moveTool" title="Move tool" class="toolButton" onclick="outil.choisir('deplacement')"><div class="icon"></div></div>
<div id="tangentTool" title="Tangent tool" class="toolButton" onclick="outil.choisir('tangente')"><div class="icon"></div></div>
</div>
<!-- ..... Menus ..... -->
<!-- Menu d'exemple -->
<div id="menuExemple" class="menu">
<div class="contenuMenu"></div>
<div class="barreBasMenu"><div><div>
<input id="menuExempleCloseButton" type="button" onclick="cacherMenu()" value="Close"/>
</div></div></div>
</div>
<!-- GraphMe -->
<div id="menuGraphMe" class="menu">
<div class="ongletMenu deuxOnglets">
<span id="menuGraphMeOptionsTab" class="ongletMenuActuel" onclick='afficherMenu("menuGraphMe")'>Options</span>
<span id="menuGraphMeAboutTab" onclick='afficherMenu("menuCredits")'>About</span>
</div>
<div class="contenuMenu avecBordures">
<h3 id="widgetOptions">Widget options</h3>
<span id="widgetTheme">Widget theme</span> : <select id="selectTheme" onchange="changerTheme(this.value)">
<option id="selectThemeDarkBlue" value="darkblue">Dark blue</option>
<option id="selectThemeBlack" value="black">Black</option>
<option id="selectThemeBlue" value="blue">Blue</option>
<option id="selectThemeWhite" value="white">White</option>
</select><br/>
<br/><br/>
<input type="button" onclick='widget.reset()' id="resetWidgetButton" value="Reset widget" style=" height:32px;"/>
<!-- TODO option to resize widget on OpenBoard / Sankore -->
<!--<span class="gras">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="Remove"/><input class="boutonSauvegarde2" type="button" onclick="alertOptions()" value="Display"/><br/>
<span class="texteSecondaire">Save widget preferences in cookies, load preferences from cookies or delete preferences in cookies.</span>
<br/><br/>
<label for="checkMaJ">Update widget at startup</label> <input type="checkbox" id="checkMaJ" onclick="checkboxMaJ()"/>
<br/>
<div id="cacheCookies"><br/><br/><h1>Cookies are disabled. You cannot save preferences...</h1></div>
<div id="cacheMaJ">You are using the latest version of this widget.</div>-->
</div>
<div class="barreBasMenu"><div><div>
<input type="button" id="menuGraphMeCloseButton" class="bouton" onclick="cacherMenu(); actualiserGraph()" value="Close"/>
</div></div></div>
</div>
<!-- Cookies alert -->
<div id="menuAlertCookies" class="miniMenu">
<h1> Preferences saved :</h1>
<div id="divAlertCookies"></div>
<br/>
<input type="button" onclick="afficherMenu(dernierMenu)" value="Ok"/>
</div>
<!-- Crédits -->
<div id="menuCredits" class="menu">
<div class="ongletMenu deuxOnglets">
<span id="menuCreditsOptionsTab" onclick='afficherMenu("menuGraphMe")'>Options</span>
<span id="menuCreditsAboutTab" class="ongletMenuActuel" onclick='afficherMenu("menuCredits")'>About</span>
</div>
<div class="contenuMenu avecBordures" style="text-align:justify;">
<table id="credits">
<tr>
<td>
<img src="icon.png"/>
<h3 id="widgetDevelopedBy">Widget developed by</h3>
Yannick Vessaz <br/>
<a href='mailto:yannick.vessaz@gmail.com'>yannick.vessaz@gmail.com</a><br/>
<a href='https://yannick.vessaz.net/GraphMe'>https://yannick.vessaz.net/GraphMe</a>
</td>
</tr>
</table>
<span class="texteSecondaire">
<br/>
<span id="widgetContactInfo">If you want to report a bug, make a proposal or just ask questions about this widget, you can contact me at the following e-mail</span> : <a href='mailto:yannick.vessaz@gmail.com'>yannick.vessaz@gmail.com</a>.
<br/><br/>
<span id="widgetBackgroundSource">Background images come from the KDE desktop environment</span>.
</span>
</div>
<div class="barreBasMenu"><div><div>
<input type="button" id="menuCreditsCloseButton" class="bouton" onclick="cacherMenu()" value="Close"/>
<span id="version" class="texteSecondaire" style="position:absolute;bottom:10px;left:15px;">
version 2.1.0 (2018-06-04)
(<span id="changelogButton" style="color: rgb(0,128,255); text-decoration: underline; cursor: pointer;" onclick="afficherMenu('menuChangelog')">changelog</span>)
<input type="button" id="checkForUpdateButton" onclick='miseAjour()' value="Check for updates"/>
</span>
</div></div></div>
</div>
<!-- Changelog -->
<div id="menuChangelog" class="menu">
<div class="ongletMenu deuxOnglets">
<span id="changelogTitle" class="ongletMenuActuel">Changelog</span>
</div>
<iframe id="versionIframe" src="version.txt" style="display:none" onload="document.getElementById('versionFileContent').innerHTML = this.contentWindow.document.body.innerHTML"></iframe>
<div id="versionFileContent" class="contenuMenu">
</div>
<div class="barreBasMenu"><div><div>
<input type="button" id="menuChangelogBackButton" class="bouton" onclick="afficherMenu('menuCredits')" value="Back"/>
<input type="button" id="menuChangelogCloseButton" class="bouton" onclick="cacherMenu()" value="Close"/>
</div></div></div>
</div>
<!-- Affichage -->
<div id="menuAffichage" class="menu">
<div class="ongletMenu deuxOnglets">
<span id="menuAffichageDisplayParametersTab" class="ongletMenuActuel" onclick='afficherMenu("menuAffichage")'>Display parameters</span>
<span id="menuAffichageFunctionsParametersTab" onclick='afficherMenu("menuFunctionParameters")'>Functions parameters</span>
</div>
<div class="contenuMenu">
<table class="colonnes">
<tr>
<td class="premiereColonne" style="width: 30%;">
<!--<h4>Souris</h4>
<select id="selectSouris" onchange="outil.choisir(this.value)" style="width: 100%;">
<option value="point">Point</option>
<option value="deplacement">Déplacement</option>
<option value="tangente">Tangente</option>
</select>-->
<h4 id="plotRange">Plot range</h4>
<span id="xAxis">X-axis</span>: <br/>
<input id="borneXGauche" class="mediumInput" value="-5" onkeypress="if(event.keyCode==13) actualiserGraph()"/> <span id="xAxisTo">to</span> <input id="borneXDroite" class="mediumInput" value="5" onkeypress="if(event.keyCode==13) actualiserGraph()"/> <br/>
<span id="yAxis">Y-axis</span>: <br/>
<input id="borneYGauche" class="mediumInput" value="-5" onkeypress="if(event.keyCode==13) actualiserGraph()"/> <span id="yAxisTo">to</span> <input id="borneYDroite" class="mediumInput" value="5" onkeypress="if(event.keyCode==13) actualiserGraph()"/>
<br/>
<br/>Zoom: <br/>
<input type="button" class="bouton" style="width:30px;" onclick='affichage.zoom(1.25)' value="-"/><input type="button" class="bouton" style="width:30px; position:relative; left: 9px;" onclick='affichage.zoom(0.8)' value="+"/><br/>
<br/>
<span id="defaultZoom">Default zoom</span> :
<input value="3.7" class="smallInput" id="zoomDefaut"/>
<input type="button" id="defaultDisplayParameters" onclick="affichage.initZoom2(document.getElementById('zoomDefaut').value)" value="Default display parameters"/>
<br/><br/><br/><br/>
</td>
<td>
<h4 id="displayOptions">Options</h4>
<span id="displayMethod">Display method</span> : <select id="selectMethodeAffichage" onchange="affichage.getOptions()">
<option value="canvas">canvas</option>
<option value="svg">svg</option>
<option value="uniboard">uniboard</option>
</select> <br/>
<br/>
<input type="checkbox" id="checkGrille" checked="true" onclick="actualiserGraph()"/><label for="checkGrille"> <span id="showGrid">Show grid</span></label> <br/>
<input type="checkbox" id="checkAxes" checked="true" onclick="actualiserGraph()"/><label for="checkAxes"> <span id="showAxis">Show axis</span></label> <br/>
<input type="checkbox" id="checkEchelle" checked="true" onclick="actualiserGraph()"/><label for="checkEchelle"> <span id="showScale">Show scale</span></label> <br/>
<br/>
<span id="graphAccuracy">Graph accuracy, computed points</span> : <input value="100" class="smallInput" id="inputPrecision" onchange="affichage.calculer()"/>
<div class="boutonPlus" type="button" onclick="boutonPlus('inputPrecision', 20); affichage.calculer();">+</div><div class="boutonMoins" type="button" onclick="boutonMoins('inputPrecision', 20); affichage.calculer();">-</div> <br/>
<input type="checkbox" id="checkPrecision" onclick="actualiserGraph()"/><label for="checkPrecision"> <span id="improveAccuracy">Improve accuracy on zoom (can be slower)</span>.</label> <br/>
<br/><br/>
</td>
</tr>
</table>
</div>
<div class="barreBasMenu"><div><div>
<input type="button" id="menuAffichageOkButton" class="bouton" onclick='cacherMenu(); actualiserGraph()' value="Ok"/>
</div></div></div>
</div>
<div id="menuFunctionParameters" class="menu">
<div class="ongletMenu deuxOnglets">
<span id="menuFunctionParametersDisplayParametersTab" onclick='afficherMenu("menuAffichage")'>Display parameters</span>
<span id="menuFunctionParametersFunctionsParametersTab" class="ongletMenuActuel" onclick='afficherMenu("menuFunctionParameters")'>Functions parameters</span>
</div>
<div class="contenuMenu">
<h3 id="defaultFunctionParameters">Default functions parameters</h3>
<span id="thickness">Thickness</span> : <input id="inputTaille" class="smallInput" value="3" onkeypress="if(event.keyCode==13) actualiserGraph()"/>
<div class="boutonPlus" type="button" onclick="boutonPlus('inputTaille', 1); actualiserGraph()">+</div><div class="boutonMoins" type="button" onclick="boutonMoins('inputTaille', 1); actualiserGraph()">-</div>
<br/><br/>
<span id="drawDerivativeAndPrimitive">Draw derivatives and primitives</span> :<br/>
<label for="checkDerivee1"> f'(x) </label><input type="checkbox" id="checkDerivee1" onchange="actualiserGraph()"/><label for="checkDerivee2"> f''(x) </label><input type="checkbox" id="checkDerivee2" onchange="actualiserGraph()"/><label for="checkPrimitive1"> F(x) </label><input type="checkbox" id="checkPrimitive1" onchange="actualiserGraph()"/>
<br/><br/>
<input type="checkbox" id="checkAire" onchange="actualiserGraph()"/><label for="checkAire"> <span id="drawArea">Draw area under function</span></label><br/>
<br/>
<span id="lineStyle">Line style</span> :
<select id="selectStyle" onchange="actualiserGraph()">
<option id="selectStyleLine" value="continu">line</option>
<option id="selectStyleDotted" value="points">dotted</option>
<option id="selectStyleDashed" value="traits">dashed</option>
</select> <br/>
</div>
<div class="barreBasMenu"><div><div>
<input type="button" id="menuFunctionParametersCloseButton" class="bouton" onclick="cacherMenu()" value="Close"/>
</div></div></div>
</div>
<div id="menuAffichage3D" class="menu">
<div class="ongletMenu deuxOnglets">
<span id="display3D" class="ongletMenuActuel">3D Display</span>
</div>
<div class="contenuMenu">
<span id="displayStyle">Display style</span> :
<select id="selectAffichage3D" onchange="actualiserGraph()">
<option id="displayStyleSurfaces" value="surfaces">surfaces</option>
<option id="displayStyleDotted" value="points">dotted</option>
</select> <input type="button" id="resetDisplay3D" onclick="display3D.initZoom()" value="Reset display"/> <br/>
<br/>
<span id="graphAccuracy3D">Graph accuracy</span> : <input value="0.2" class="smallInput" id="inputPrecision3D" onchange="display3D.functionPrecision = parseFloat(this.value); actualiserGraph();"/>
<div class="boutonPlus" type="button" onclick="boutonPlus('inputPrecision3D', 0.1); display3D.functionPrecision = parseFloat(document.getElementById('inputPrecision3D').value); actualiserGraph()">+</div><div class="boutonMoins" type="button" onclick="boutonMoins('inputPrecision3D', 0.1); display3D.functionPrecision = parseFloat(document.getElementById('inputPrecision3D').value); actualiserGraph()">-</div> <br/>
<br/>
<span id="colorsConfig">Colors configuration</span><br/>
<span id="useRedFor">use red for</span>:
<select onchange="display3D.checkCouleurs3D()" id="selectRouge3D">
<option id="redPositive" value="plus">positive values</option>
<option id="redNegative" value="moins">negative values</option>
<option id="redAlways" value="tout">always</option>
</select>
<br/>
<span id="useGreenFor">use green for</span>:
<select onchange="display3D.checkCouleurs3D()" id="selectVert3D">
<option id="greenPositive" value="moins">negative values</option>
<option id="greenNegative" value="plus">positive values</option>
<option id="greenAlways" value="tout">always</option>
</select>
<br/>
<span id="useBlueFor">use blue for</span>:
<select onchange="display3D.checkCouleurs3D()" id="selectBleu3D">
<option id="bluePositive" value="tout">always</option>
<option id="blueNegative" value="plus">positive values</option>
<option id="blueAlways" value="moins">negative values</option>
</select>
<br/>
<span id="globalValue">General value</span> : <input class="smallInput" id="couleur3Dgenerale" type="texte" value="0" onkeyup="display3D.checkCouleurs3D()"/> <span id="globalValueRange">(between 0 and 255)</span>
<br/>
<span id="apercuCouleur3D"></span>
</div>
<div class="barreBasMenu"><div><div>
<input type="button" id="menuAffichage3dOk" class="bouton" onclick='cacherMenu(); actualiserGraph()' value="Ok"/>
</div></div></div>
</div>
<!-- Aide -->
<div id="menuAide" class="menu">
<div class="ongletMenu deuxOnglets">
<span id="menuAideUsageTab" class="ongletMenuActuel" onclick='afficherMenu("menuAide")'>Usage</span>
<span id="menuAideExamplesTab" onclick='afficherMenu("menuAideExemples")'>Exemples</span>
</div>
<div class="contenuMenu avecBordures">
<h1 id="howItWorks">How it works</h1>
<p id="howItWorksText">
This widget allow to draw mathematical function.
Enter function in the field in the top part of widget and press "Show".
Open the "Fonctions" menu to modify the current function or add a new function.
</p>
<p><span id="availableFunctionsText">You can enter following mathematical functions</span> : <br/>
<h2 id="basicOperations">Basic operations</h2>
<ul>
<li><span id="plus">Plus</span> -> <span class="gras">+</span></li>
<li><span id="minus">Minus</span> -> <span class="gras">-</span></li>
<li><span id="multiplication">Multiplication</span> -> <span class="gras">*</span></li>
<li><span id="division">Division</span> -> <span class="gras">/</span></li>
<li><span id="modulus">Modulus</span> -> <span class="gras">%</span></li>
</ul>
<h2 id="trigonometricFunctions">Trigonometric functions</h2>
<ul>
<li><span id="sine">Sine</span> -> <span class="gras">sin(x)</span></li>
<li><span id="cosine">Cosine</span> -> <span class="gras">cos(x)</span></li>
<li><span id="tangent">Tangent</span> -> <span class="gras">tan(x)</span></li>
<li><span id="cotangent">Cotangent</span> -> <span class="gras">cot(x)</span></li>
<li><span id="secant">Secant</span> -> <span class="gras">sec(x)</span></li>
<li><span id="cosecant">Cosecant</span> -> <span class="gras">csc(x)</span></li>
</ul>
<ul>
<li><span id="arcSine">Arc sine</span> -> <span class="gras">arcsin(x)</span> or <span class="gras">asin(x)</span></li>
<li><span id="arcCosine">Arc cosine</span> -> <span class="gras">arccos(x)</span> or <span class="gras">acos(x)</span></li>
<li><span id="arcTangent">Arc tangent</span> -> <span class="gras">arctan(x)</span> or <span class="gras">atan(x)</span></li>
<li><span id="arcCotangent">Arc cotangent</span> -> <span class="gras">arccot(x)</span> or <span class="gras">acot(x)</span></li>
</ul>
<h2 id="hyperbolicFunctions">Hyperbolic functions</h2>
<ul>
<li><span id="hypSine">Hyperbolic sine</span> -> <span class="gras">sinh(x)</span></li>
<li><span id="hypCosine">Hyperbolic cosine</span> -> <span class="gras">cosh(x)</span></li>
<li><span id="hypTangent">Hyperbolic tangent</span> -> <span class="gras">tanh(x)</span></li>
<li><span id="hypCotangent">Hyperbolic cotangent</span> -> <span class="gras">coth(x)</span></li>
<li><span id="hypSecant">Hyperbolic secant</span> -> <span class="gras">sech(x)</span></li>
<li><span id="hypCosecant">Hyperbolic cosecant</span> -> <span class="gras">csch(x)</span></li>
</ul>
<ul>
<li><span id="hypArcSine">Hyperbolic arc sine</span> -> <span class="gras">arcsinh(x)</span> or <span class="gras">asinh(x)</span></li>
<li><span id="hypArcCosine">Hyperbolic arc cosine</span> -> <span class="gras">arccosh(x)</span> or <span class="gras">acosh(x)</span></li>
<li><span id="hypArcTangent">Hyperbolic arc tangent</span> -> <span class="gras">arctanh(x)</span> or <span class="gras">atanh(x)</span></li>
<li><span id="hypArcCotangent">Hyperbolic arc cotangent</span> -> <span class="gras">arccoth(x)</span> or <span class="gras">acoth(x)</span></li>
</ul>
<h2 id="powerAndRoot">Power and root</h2>
<ul>
<li><span id="squareRoot">Square root</span> -> <span class="gras">sqrt(x)</span></li>
<li><span id="power">Power</span> -> <span class="gras">pow(x, y)</span> <span id="xPowY" class="texteSecondaire">Élève x à la puissance y</span></li>
<li><span id="root">Root</span> -> <span class="gras">root(x, y)</span> <span id="rootText" class="texteSecondaire">Root y de x</span></li>
</ul>
<h2 id="expAndLog">Exponential and logarithm</h2>
<ul>
<li>e<span style="vertical-align:super;">x</span> -> <span class="gras">exp(x)</span></li>
<li><span id="naturalLog">Natural logarithm</span> -> <span class="gras">ln(x)</span></li>
<li><span id="decimalLog">Decimal logarithm</span> -> <span class="gras">log(x)</span></li>
</ul>
<h2 id="absValue">Absolute value</h2>
<ul>
<li>|x| -> <span class="gras">abs(x)</span></li>
</ul>
<h2 id="rounding">Rounding</h2>
<ul>
<li><span class="gras">round(x)</span> -> <span id="roundText">round to the nearest integer</span></li>
<li><span class="gras">ceil(x)</span> -> <span id="ceilText">round to the first integer bigger than x</span></li>
<li><span class="gras">floor(x)</span> -> <span id="floorText">round to the first integer lower than x</span></li>
</ul>
</p> <br/>
<hr/>
<h1 id="constants">Constants</h1>
<p>
<span id="constantsText">Some constants are also available</span> : <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 id="keyboardShortcuts">Keyboard shortcuts</h1>
<p style="font-size:90%;">
ctrl + <span>left arrow</span> -> <span id="moveLeft">graph will be moved left</span><br/>
ctrl + <span>top arrow</span> -> <span id="moveTop">graph will be moved top</span><br/>
ctrl + <span>right arrow</span> -> <span id="moveRight">graph will be moved right</span><br/>
ctrl + <span>bottom arrow</span> -> <span id="moveBottom">graph will be moved bottom</span><br/>
<br/>
</p>
</div>
<div class="barreBasMenu"><div><div>
<input type="button" id="menuAideCloseButton" class="bouton" onclick="cacherMenu()" value="Close"/>
<!-- <input type="button" id="usersGuideButton" class="bouton" value="User's guide" onclick="navigateur('Guide_Utilisateur.html')" style="position:absolute;bottom:0px;left:0px;"/> -->
</div></div></div>
</div>
<div id="menuAideExemples" class="menu">
<div class="ongletMenu deuxOnglets">
<span id="menuAideExemplesUsageTab" onclick='afficherMenu("menuAide")'>Usage</span>
<span id="menuAideExemplesExamplesTab" class="ongletMenuActuel" onclick='afficherMenu("menuAideExemples")'>Exemples</span>
</div>
<div class="contenuMenu avecBordures">
<span id="examplesText" class="texteSecondaire">(You can click on an example to view it. Do not forget to set accuracy in options if necessary.)</span>
<br/><br/>
<hr/>
<h1 id="functions2d">2D Fonctions</h1>
<p>
<span class="survol" onclick="fct.addCartesian('0.5*x+1')">f(x) = 0.5*x+1</span> <br/>
<span class="survol" onclick="fct.addCartesian('pow(x,2)-3')">f(x) = pow(x,2)-3</span> <br/>
<span class="survol" onclick="fct.addCartesian('1/x')">f(x) = 1/x</span> <br/>
<span class="survol" onclick="fct.addCartesian('atan(x)')">f(x) = atan(x)</span> <br/>
<span class="survol" onclick="fct.addCartesian('(x+1/x)/1.2')">f(x) = (x+1/x)/1.2</span> <br/>
<span class="survol" onclick="fct.addCartesian('sin(10*x*x)*0.5')">f(x) = sin(10*x*x)*0.5</span> <br/>
<span class="survol" onclick="fct.addCartesian('log(pow(x-2,2))')">f(x) = log(pow(x-2,2))</span> <br/>
<span class="survol" onclick="fct.addCartesian('(x*x-5*x+5)*exp(x)/5')">f(x) = (x*x-5*x+5)*exp(x)/5</span> <br/>
<span class="survol" onclick="fct.addCartesian('random()')">f(x) = random()</span> <br/>
</p>
<br/><br/>
<hr/>
<h1 id="functions3d">3D Fonctions</h1>
<p>
<span class="survol" onclick="document.getElementById('input3D').value = 'sin(x)+cos(y)'; display3D.draw()">f(x,y) = sin(x)+cos(y)</span> <br/>
<span class="survol" onclick="document.getElementById('input3D').value = 'sqrt(10-x*x)'; display3D.draw()">f(x,y) = sqrt(10-x*x)</span> <br/>
<span class="survol" onclick="document.getElementById('input3D').value = 'atan(x)+atan(y)'; display3D.draw()">f(x,y) = atan(x)+atan(y)</span> <br/>
</p>
<br/>
</div>
<div class="barreBasMenu"><div><div>
<input type="button" id="menuAideExemplesCloseButton" class="bouton" onclick="cacherMenu()" value="Close"/>
</div></div></div>
</div>
<!--<div id="menuAideAutres" class="menu">
<div class="ongletMenu troisOnglets">
<span id="menuAideAutreUsageTab" onclick='afficherMenu("menuAide")'>Usage</span>
<span id="menuAideAutreExamplesTab" onclick='afficherMenu("menuAideExemples")'>Exemples</span>
<span id="menuAideAutreOtherTab" class="ongletMenuActuel" onclick='afficherMenu("menuAideAutres")'>Other</span>
</div>
<div class="contenuMenu avecBordures">
<h4 id="saveGraph">Save graph</h4>
<span id="saveGraphText">You can save the graph by clicking on the "S" button in the top right corner.
In some webbrowsers, it is impossible to save in JPEG format. The PNG format should be selected in preference.
Inside Sankore or Uniboard, the graph image is opened in a new web page. You can save it with right click on it. The image will be saved on desktop and you can't modify its name. Use your favourite folder explorer to rename it "image.png".</span>
<br/><br/>
<h4 id="openBoardOrSankore">OpenBoard or Sankore</h4>
<span id="openBoardOrSankoreText">If you use the widget in OpenBoard or Sankore, you can draw functions directly on the white page. For that, you can use the "uniboard" display method in preferences menu.
With this method, the graph will be displayed at the center of the page on top of existing content. To delete the graph, you have to use the erase tool of OpenBoard or Sankore.</span>
</div>
<div class="barreBasMenu"><div><div>
<input type="button" id="menuAideAutreCloseButton" class="bouton" onclick="cacherMenu()" value="Close"/>
</div></div></div>
</div>-->
<!--Etude de fonction -->
<div id="menuEtude" class="menu">
<div class="ongletMenu deuxOnglets">
<span id="functionStudyTitle" class="ongletMenuActuel">Function study</span>
</div>
<div class="contenuMenu">
<p class="gras">
f(x) = <span id="etudeFdeX">...</span>
</p>
<p><span id="domainOfDefinition" class="gras">Domain of definition</span> :
<span id="etudeEDF">...</span>
</p>
<p><span id="symmetry" class="gras">Symmetry</span> :
<span id="etudeParite">...</span>
</p>
<p><span id="zeros" class="gras">Zeros</span> :
<span id="etudeZeros">...</span>
</p>
<p><span id="sign" class="gras">Sign</span> :<table id="etudeSigne">
<tr id="etudeSigneRow">
</tr>
</table></p>
<p><span id="asymptotes" class="gras">Asymptotes</span> : <br/>
<span id="etudeA">...</span>
</p>
<p><span id="extremums" class="gras">Extremums</span> : <br/>
<span id="etudeMinMax">...</span>
</p>
<p><span id="inflexionPoints" class="gras">Inflexion points</span> : <br/>
<span id="etudeI">...</span> <br/>
</p>
<br/>
<span id="functionStudyText" class="texteSecondaire" style="font-size:10px;">The tool for function analysis is not 100% reliable. Don't forget to check the results before any usage.</span>
<br/>
<br/>
</div>
<div class="barreBasMenu"><div><div>
<!-- <input type="button" class="bouton" onclick="etude.etudier(document.getElementById('input').value)" value="Actualiser" style="position:relative;right:310px;"/> -->
<input type="button" id="menuEtudeBackButton" class="bouton" onclick="afficherMenu(dernierMenu)" style="position: absolute; left: 0px;" value="Back"/>
<input type="button" id="menuEtudeCloseButton" class="bouton" onclick="cacherMenu()" value="Close"/>
</div></div></div>
</div>
<!-- Fonctions 2D -->
<div id="menuFonctions" class="menu">
<div class="ongletMenu deuxOnglets">
<span id="menuFonctionsFunctionsTab" class="ongletMenuActuel" onclick='afficherMenu("menuFonctions")'>Functions</span>
<span id="menuFonctionsHistoryTab" onclick='afficherMenu("menuHistorique")'>History</span>
</div>
<div class="contenuMenu avecBordures">
<div id="functionMenuRight">
<div id="editeurFonction" style="visibility: hidden">
<div id="editeurPageModifier">
<div class="editeurOnglets">
<span id="editorEditPageEditTab" class="ongletActuel">Edit</span>
<span id="editorEditPageToolsTab" onclick="document.getElementById('editeurPageModifier').style.display='none';document.getElementById('editeurPageOutils').style.display='block';">Tools</span>
</div>
<br/>
<canvas id="editeurApercu" width="100" height="80"></canvas>
<br/>
<div id="editeurFctDiv">
<span id="editeurFctPrefix">f(x) = </span>
<input id="editeurInput" style="width: 75%;" onchange="editeur.getOptions()"/>
<br/>
</div>
<div id="editeurFctXYDiv" style="display:none">
x(t) = <input id="editeurFctX" style="width: 75%;" onchange="editeur.getOptions()"/>
<br/>
y(t) = <input id="editeurFctY" style="width: 75%;" onchange="editeur.getOptions()"/>
<br/>
</div>
<div id="editeurRangeDiv" style="display:none">
"t" <span id="editorRangeFrom">from</span> <input id="editeurFrom" class="smallInput" onchange="editeur.getOptions()"/>
<span id="editorRangeTo">to</span> <input id="editeurTo" class="smallInput" onchange="editeur.getOptions()"/>
<br/>
</div>
<br/>
<span id="editorThickness">Thickness</span> : <input class="smallInput" id="editeurWidth" onchange="editeur.getOptions()" value="3"/>
&nbsp;&nbsp;
<span id="editorColor">Color</span> : <span id="editeurCouleur" title="editeur.fct.couleur" class="boutonCouleur" onclick="editeur.couleur(this.id)" style="background-color: rgba(0,128,255,1)"></span>
<br/>
<div id="editeurDeriveesDiv">
<span id="editorDerivatives">Derivatives</span> : <label for="editeurD1"> f'(x)</label><input type="checkbox" id="editeurD1" onchange="editeur.getOptions()"/><span id="editeurCouleurD1" title="editeur.fct.couleurD1" class="miniCouleur" onclick="editeur.couleur(this.id)" style="background-color: rgba(0,128,255,1)"></span>
&nbsp;&nbsp;
<label for="editeurD2"> f''(x)</label><input type="checkbox" id="editeurD2" onchange="editeur.getOptions()"/><span id="editeurCouleurD2" title="editeur.fct.couleurD2" class="miniCouleur" onclick="editeur.couleur(this.id)" style="background-color: rgba(0,128,255,1)"></span>
<br/>
<span id="editorPrimitive">Primitive</span> : <label for="editeurP1"> F(x)</label><input type="checkbox" id="editeurP1" onchange="editeur.getOptions()"/><span id="editeurCouleurP1" title="editeur.fct.couleurP1" class="miniCouleur" onclick="editeur.couleur(this.id)" style="background-color: rgba(0,128,255,1)"></span>
<span id="editeurTexteConditionInitiale"> F(0) = </span><input id="editeurConditionInitiale" onchange="editeur.getOptions()" value="0" style="width:20px"/>
<br/>
</div>
<div id="editeurStyleDiv">
<span id="editorLineStyle">Style</span> :
<select id="editeurStyle" onchange="editeur.getOptions()">
<option id="editorStyleLine" value="continu">line</option>
<option id="editorStyleDotted" value="points">dotted</option>
<option id="editorStyleDashed" value="traits">dashed</option>
</select>
<br/>
</div>
<div id="editeurAireDiv">
<label for="editeurAire"><span id="editorDrawArea">Area under function</span> : </label><input type="checkbox" id="editeurAire" onchange="editeur.getOptions()"/>
<br/>
</div>
<br/>
<div style="text-align:right;">
<input type="button" id="editorDuplicate" class="bouton" value="Duplicate" onclick="editeur.dupliquer()"/>
<input type="button" id="editorRemove" class="bouton" value="Remove" onclick="editeur.supprimer()"/>
</div>
</div>
<div id="editeurPageOutils" style="display: none;">
<div class="editeurOnglets">
<span id="editorToolsPageEditTab" onclick="document.getElementById('editeurPageOutils').style.display='none';document.getElementById('editeurPageModifier').style.display='block';">Edit</span>
<span id="editorToolsPageToolsTab" class="ongletActuel">Tools</span>
</div>
<br/>
<span id="computePoint">Compute a point on the fonction</span> :<br/>
x=<input value="0" class="smallInput" id="inputX" onkeypress="if(event.keyCode==13) calculerPoint()"/>
<input type="button" id="computePointButton" onclick="calculerPoint()" value="Compute"/><br/>
<span id="outputX"> </span>
<br/><br/>
<span id="computeArea">Compute area under the function</span> :<br/>
<span id="areaFrom">De</span> <input value="-5" class="smallInput" id="aireG"/> <span id="areaTo">à</span> <input value="5" class="smallInput" id="aireD"/> <input type="button" id="computeAreaButton" onclick='calculerAire()' value="Compute"/><br/>
<span id="outputAire"> </span>
<br/><br/>
<span id="functionStudy">Function study</span> : <br/>
<input type="button" id="functionStudyButton" class="bouton" value="Start study" onclick="editeur.etudier()"/><br/>
<br/><br/>
<div style="text-align:right;">
<input type="button" id="editorToolsDuplicate" class="bouton" value="Duplicate" onclick="editeur.dupliquer()"/>
<input type="button" id="editorToolsRemove" class="bouton" value="Remove" onclick="editeur.supprimer()"/>
</div>
</div>
</div>
</div>
<div id="functionMenuLeft">
<span id="newFunction">New function</span> :
<select id="functionType" onchange="fct.changeType(this.value)">
<option id="functionTypeCartesian" value="cartesian">Cartesian</option>
<option id="functionTypePolar" value="polar">Polar</option>
<option id="functionTypeParametric" value="parametric">Parametric</option>
<option id="functionTypeImplicit" value="implicit">Implicit</option>
</select>
<br/>
<span id="cartesianDiv">
f(x) =
<input id="input" placeholder="sin(x)" style="width:220px; position:relative; right:2px;" onkeypress="if(event.keyCode == 13) fct.ajouter()"/>
</span>
<span id="implicitDiv" style="display:none">
<input id="implicitInput" placeholder="x^2 + y^2 = 9" style="width:220px; position:relative; right:2px;" onkeypress="if(event.keyCode == 13) fct.ajouter()"/>
</span>
<span id="polarDiv" style="display:none">
r(t) =
<input id="polarInput" placeholder="t" style="width:220px; position:relative; right:2px;" onkeypress="if(event.keyCode == 13) fct.ajouter()"/>
</span>
<span id="parametricDiv" style="display:none">
x(t) =
<input id="parametricInputX" placeholder="cos(t)" style="width:220px; position:relative; right:2px;" onkeypress="if(event.keyCode == 13) document.getElementById('parametricInputY').focus()"/>
<br/>
y(t) =
<input id="parametricInputY" placeholder="sin(t)" style="width:220px; position:relative; right:2px;" onkeypress="if(event.keyCode == 13) fct.ajouter()"/>
</span>
<input type="button" id="addFunctionButton" value="Add" onclick="fct.ajouter();"/>
<br/>
<br/>
<span id="functionsListText">Functions list</span> :
<div id="fonctionsSupp"></div>
</div>
</div>
<div class="barreBasMenu"><div><div>
<input type="button" id="menuFonctionsCloseButton" class="bouton" onclick="cacherMenu()" value="Close"/>
</div></div></div>
</div>
<!-- Fonctions 3D -->
<div id="menuFonctions3D" style="display:none;">
f(x,y) =
<input type="text" id="input3D" onkeypress="if(event.keyCode == 13) display3D.draw();saveOptions();"/>
<input type="button" id="input3dDisplayButton" value="Display" onclick="display3D.draw();saveOptions();"/>
</div>
<!-- Historique -->
<div id="menuHistorique" class="menu">
<div class="ongletMenu deuxOnglets">
<span id="menuHistoriqueFunctionsTab" onclick='afficherMenu("menuFonctions")'>Functions</span>
<span id="menuHistoriqueHistoryTab" class="ongletMenuActuel" onclick='afficherMenu("menuHistorique")'>History</span>
</div>
<div class="contenuMenu avecBordures" id="divHistorique">
<h3 id="latestDisplayedFunctions">Latest displayed functions</h3>
<span id="spanHistorique"></span>
</div>
<div class="barreBasMenu"><div><div>
<input type="button" id="menuHistoriqueCloseButton" class="bouton" onclick="cacherMenu()" value="Close"/>
</div></div></div>
</div>
<!-- Couleur -->
<div id="menuCouleur" class="menu" onmouseup="colorPicker.sourisUp()">
<div class="ongletMenu deuxOnglets">
<span id="chooseColor" class="ongletMenuActuel">Color picker</span>
</div>
<div class="contenuMenu">
<br/>
<canvas id="canvasSV" onmousemove="colorPicker.moveSV(event)" onmousedown="colorPicker.sourisClick(this.id); colorPicker.moveSV(event)" onmouseup="colorPicker.sourisUp()" onmouseover="colorPicker.sourisOver(this.id)" onmouseout="colorPicker.sourisOut()"></canvas>
<canvas id="canvasT" onmousemove="colorPicker.moveT(event)" onmousedown="colorPicker.sourisClick(this.id); colorPicker.moveT(event)" onmouseup="colorPicker.sourisUp()" onmouseover="colorPicker.sourisOver(this.id)" onmouseout="colorPicker.sourisOut()"></canvas>
<table id="colorValues">
<tr>
<td><span id="colorPickerColor">Color</span> : </td><td><input id="inputTeinte" class="smallInput" value="0" onchange="colorPicker.recupererInputs()"/></td>
</tr><tr>
<td><span id="colorPickerValue">Value</span> : </td><td><input id="inputValeur" class="smallInput" value="0" onchange="colorPicker.recupererInputs()"/></td>
</tr><tr>
<td><span id="colorPickerSaturation">Saturation</span> : </td><td><input id="inputSaturation" class="smallInput" value="0" onchange="colorPicker.recupererInputs()"/></td>
</tr><tr>
<td><span id="colorPickerRed">Red</span> : </td><td><input id="inputRouge" class="smallInput" value="255" onchange="colorPicker.recupererInputs2()"/></td>
</tr><tr>
<td><span id="colorPickerGreen">Green</span> : </td><td><input id="inputVert" class="smallInput" value="0" onchange="colorPicker.recupererInputs2()"/></td>
</tr><tr>
<td><span id="colorPickerBlue">Blue</span> : </td><td><input id="inputBleu" class="smallInput" value="0" onchange="colorPicker.recupererInputs2()"/></td>
</tr><tr>
<td><span id="colorPickerOpacity">Opacity</span> : </td><td><input id="inputOpacity" class="smallInput" value="1" onchange="colorPicker.recupererInputs()"/></td>
</tr><!--<tr>
<td><input id="inputCouleur" style="width: 70%" value="cyan" onkeypress="fct.couleur = this.value; if(event.keyCode==13) actualiserGraph()"/></td>
</tr>-->
</table>
<div id="apercuCouleur" title="New color"></div><div id="apercuCouleur2" title="Old color"></div>
<br/>
<canvas id="canvasO" onmousemove="colorPicker.moveO(event)" onmousedown="colorPicker.sourisClick(this.id); colorPicker.moveO(event)" onmouseup="colorPicker.sourisUp()" onmouseover="colorPicker.sourisOver(this.id)" onmouseout="colorPicker.sourisOut()"></canvas>
</div>
<div class="barreBasMenu"><div><div>
<input type="button" id="colorPickerCancelButton" class="bouton" onclick="cacherMenu()" value="Cancel"/><input type="button" id="colorPickerOkButton" class="bouton" onclick="colorPicker.fermer()" value="Ok"/>
</div></div></div>
</div>
<!-- Save image -->
<div id="menuSaveImage" class="menu">
<div class="ongletMenu deuxOnglets">
<span id="saveImageTitle" class="ongletMenuActuel">Save image</span>
</div>
<div class="contenuMenu">
<p id="saveImageText">
You can right click on the image and select "Save image". It is also possible to choose "Copy image" and past it into another application.
</p>
<div id="saveImageContent"></div>
</div>
<div class="barreBasMenu"><div><div>
<input id="menuSaveImageCloseButton" type="button" onclick="cacherMenu()" value="Close"/>
</div></div></div>
</div>
<!-- Erreurs Fonctions interdites -->
<div id="fctInterdite" class="miniMenu">
<br/>
<h1>------- <span id="blackListError">Error</span> -------</h1>
<br/>
<span id="cannotDrawFunction">Cannot draw function</span> ...
<br/><br/>
<span id="invalidExpression">Invalid character or expression</span> : <br/>
<span id="spanFctInterdite" style="font-style:italic;"></span>
<br/><br/>
<input type="button" id="blackListErrorOkButton" onclick="cacherMenu()" value="Ok"/>
</div>
<!-- Autres erreurs -->
<div id="erreurFct" class="miniMenu">
<h4>------- <span id="fctError">Error</span> -------</h4>
<span id="checkTheFunction">Check the function and try to draw it again</span>.
<br/><br/>
<span id="errorMessage">Error message</span> : <span id="spanErreurFct"></span>.
<br/><br/>
<span id="youCanFindExamples">You can find examples of various drawable functions in the help menu</span>.
<br/>
<input type="button" id="fctErrorHelpButton" onclick="afficherMenu('menuAide')" value="Help"/>
<input type="button" id="fctErrorOkButton" onclick="cacherMenu()" value="Ok"/>
</div>
<!-- Sauvegarder le graphique-->
<div id="menuSaveGraph" class="miniMenu">
<h1 id="menuSaveGraphTitle">Save graph</h1>
<span id="saveWidthText">Width</span> : <input id="saveWidth" class="smallInput" type="text" value="800"/><br/>
<span id="saveHeightText">Height</span> : <input id="saveHeight" class="smallInput" type="text" value="600"/><br/>
<br/>
<span id="saveBackgroundColor">Background color</span> : <span id="boutonBackgroundSauvegarde" class="boutonCouleur" title="backgroundSauvegarde" onclick="colorPicker.init(this.id); afficherMenu('menuCouleur')" style="background-color: rgba(0,0,0,0.5);"></span><br/>
<br/>
<span id="imageFormat">Image format</span> :
<select id="selectSaveType">
<option value="png">PNG</option>
<option value="jpg">JPG</option>
</select>
<br/><br/>
<input type="button" id="menuSaveGraphCancelButton" onclick="cacherMenu()" value="Cancel"/>
<input type="button" id="menuSaveGraphOkButton" onclick="saveGraph()" value="Ok"/>
</div>
<!-- Menu des mises à jour -->
<div id="mAj" class="menu">
<div class="ongletMenu deuxOnglets">
<span id="updateTitle" class="ongletMenuActuel">Updates</span>
</div>
<div class="contenuMenu">
<br/>
<span id="currentVersion">Current version</span> : <br/><span id="thisVersion"></span><br/><br/>
<span id="latestVersionAvailable">Latest version available online</span> : <br/><span id="newVersion"></span><br/>
<br/><br/>
<!--<span id="useLatestVersionText">You can replace the current version with an online version.
This will only affect the current session. You have to do it again after next startup.</span><br/>
<br/>
<input type="button" id="useLatestVersion" onclick="majAccept()" value="Use latest version"/><br/>-->
<!-- <input type="button" onclick="cacherMenu()" value="Keep my version"/> -->
</div>
<div class="barreBasMenu"><div><div>
<input type="button" id="updateBackButton" class="bouton" onclick="afficherMenu('menuCredits')" value="Back"/>
<input type="button" id="updateOkButton" class="bouton" onclick="cacherMenu()" value="Ok"/>
</div></div></div>
</div>
<!-- Erreur mise à jour -->
<div id="erreurMaJ" class="miniMenu">
<br/>
<h1>------- <span id="updateErrorTitle">Error</span> -------</h1>
<br/><br/>
<span id="updateErrorText">Update to latest version is not available because you already use the latest version</span>.
<br/><br/><br/>
<input type="button" id="updateErrorOkButton" onclick="cacherMenu()" value="Ok"/>
</div>
<!-- Info options sauvegardées -->
<div id="infoSauvegarde" class="alertMenu">
<br/>
<h1>Preferences saved!</h1>
<br/>
<input type="button" onclick="document.getElementById('infoSauvegarde').style.display = 'none'" value="Ok"/>
</div>
<!-- Demande mise à jour auto -->
<div id="demandeMaJ" class="miniMenu">
<br/>
<h1>Automatic update</h1>
<br/><br/>
Do you really want to use the latest online widget version ?
<br/><br/><br/>
<input type="button" onclick="afficherMenu(dernierMenu)" value="No"/>
<input type="button" onclick="majAccept()" value="Yes"/>
</div>
<!-- ..... Flèches de déplacement ..... -->
<div class="flecheDeplacement" id="flecheHaut" onclick="if(fonction3D){display3D.zoom(1.25)}else{affichage.deplacerY(1)}" onmousemove="souris.move(event)"></div>
<div class="flecheDeplacement" id="flecheGauche" onclick="affichage.deplacerX(-1)" onmousemove="souris.move(event)"></div>
<div class="flecheDeplacement" id="flecheBas" onclick="if(fonction3D){display3D.zoom(0.8)}else{affichage.deplacerY(-1)}" onmousemove="souris.move(event)"></div>
<div class="flecheDeplacement" id="flecheDroite" onclick="affichage.deplacerX(1)" onmousemove="souris.move(event)"></div>
<!-- .... Add SVG display script .... -->
<embed id="embedSVG" src="JavaScript/AffichageSVG.svg" type="image/svg+xml" style="position:absolute; display:none; z-index: -1;"/>
</div>
</td>
<td id="background-right" class="background-border-y"></td>
</tr>
<tr class="background-border-x">
<td id="background-bottom-left" class="background-border-y"></td>
<td id="background-bottom"></td>
<td id="background-bottom-right" class="background-border-y"></td>
</tr>
</table>
<!-- Menu clique droite sur le graphique -->
<div id="ctxMenu">
<h1 id="ctxMenuDisplay">Display</h1>
<input type="checkbox" id="ctxAxes" checked="checked" onchange="affichage.axes = this.checked ? true : false ; affichage.dessiner()"/>
<label for="ctxAxes" id="ctxMenuAxes">Axes</label>
<div class="miniCouleur" id="ctxCouleurAxes" style="background-color:rgba(0,0,0,0.5)" title="affichage.couleurAxes" onclick="colorPicker.init(this.id); afficherMenu('menuCouleur'); ctxMenu.fermer()"></div>
<br/>
<input type="checkbox" id="ctxEchelle" checked="checked" onchange="affichage.echelle = this.checked ? true : false ; affichage.dessiner()"/>
<label for="ctxEchelle" id="ctxMenuScale">Scale</label>
<div class="miniCouleur" id="ctxCouleurEchelle" style="background-color:rgba(255,255,255,1)" title="affichage.couleurEchelle" onclick="colorPicker.init(this.id); afficherMenu('menuCouleur'); ctxMenu.fermer()"></div>
<br/>
<input type="checkbox" id="ctxGrille" checked="checked" onchange="affichage.grille = this.checked ? true : false ; affichage.dessiner()"/>
<label for="ctxGrille" id="ctxMenuGrid">Grid</label>
<div class="miniCouleur" id="ctxCouleurGrille" style="background-color:rgba(255,255,255,0.1)" title="affichage.couleurGrille" onclick="colorPicker.init(this.id); afficherMenu('menuCouleur'); ctxMenu.fermer()"></div>
<br/>
<input type="button" id="ctxMenuReset" class="bouton" value="Reset" onclick="affichage.initZoom2(document.getElementById('zoomDefaut').value); ctxMenu.fermer()"/>
<br/>
<input type="button" id="ctxMenuSave" class="bouton" value="Save" onclick="afficherMenu('menuSaveGraph'); ctxMenu.fermer()"/>
<div class="fermer" onclick="ctxMenu.fermer();">x</div>
</div>
<!-- Boutons de suppression des points et des ronds ajoutés -->
<span id="divSuppOutil"></span>
<!-- Messages d'aide -->
<div id="divMessages"></div>
<!-- .... Setup translations .... -->
<script type="text/javascript">languages.init();</script>
</body>
<!-- Widget made by Yannick Vessaz -->
<!-- E-mail: yannick.vessaz@gmail.com -->
</html>
<?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/Interface.js"></script>
<script type="text/javascript" src="JavaScript/Outils.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" src="JavaScript/languages.js"></script>
<script type="text/javascript" src="JavaScript/Etude.js"></script>
<script type="text/javascript" src="JavaScript/Sauvegardes.js"></script>
<script src="JavaScript/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="JavaScript/jquery.disable.text.select.js" type="text/javascript"></script>
<script type="text/javascript">
// <![CDATA[
// --- Variables nécessaires au fonctionnement du widget ---
var lang = ""; //locale language
var loadingFlag = false
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
if(window.sankore){
try{
lang = sankore.locale().substr(0,2);
sankoreLang[lang].display;
} catch(e){
lang = "en";
}
} else
lang = "en";
$(document).ready(function(){
if(window.sankore){
$("#inputEq").val(sankore.preference("functionData", ""));
$("#inputTeinte").val(sankore.preference("functionColor",""));
$("#inputValeur").val(sankore.preference("functionValue","0"));
$("#inputSaturation").val(sankore.preference("functionSaturation","0"));
$("#inputRouge").val(sankore.preference("functionRed","255"));
$("#inputVert").val(sankore.preference("functionGreen","0"));
$("#inputBleu").val(sankore.preference("functionBlue","0"));
$("#inputOpacity").val(sankore.preference("functionOpacity","1"));
idColor = sankore.preference("functionColorId","");
actualiserGraph();
if(sankore.preference("simplefx","0") == 1)
$("#checkDerivee").attr("checked", "checked");
else
$("#checkDerivee").removeAttr('checked');
if(sankore.preference("hardfx","0") == 1)
$("#checkDerivee2").attr("checked", "checked");
else
$("#checkDerivee2").removeAttr('checked');
actualiserGraph();
$("#aireG").val(sankore.preference("squareUnderFrom","-5"));
$("#aireD").val(sankore.preference("squareUnderTo","5"));
calculerAire();
$("#inputX").val(sankore.preference("calculateThePoint","0"));
execute($("#inputEq").val());
if(sankore.preference("checkboxDraw","0") == 1)
$("#checkAire").attr("checked", "checked");
else
$("#checkAire").removeAttr('checked');
actualiserGraph();
$("#selectTheme").val(sankore.preference("selectedTheme","noir"));
changerTheme($("#selectTheme").val());
$("#selectMethodeAffichage").val(sankore.preference("graphicalMethodDisplaying", "canvas"));
$("#zoomDefaut").val(sankore.preference("defaultZoom", "4"));
reinitialiserZoom($("#zoomDefaut").val());
if(sankore.preference("showGrid","1") == 1)
$("#checkGrille").attr("checked", "checked");
else
$("#checkGrille").removeAttr('checked');
if(sankore.preference("showAxis","1") == 1)
$("#checkAxes").attr("checked", "checked");
else
$("#checkAxes").removeAttr('checked');
if(sankore.preference("showScale","1") == 1)
$("#checkEchelle").attr("checked", "checked");
else
$("#checkEchelle").removeAttr('checked');
actualiserGraph();
$("#inputTaille").val(sankore.preference("thickness", "3"));
actualiserGraph();
$("#inputDecalageX").val(sankore.preference("offsetDiagrammX", "0"));
decalageX = parseFloat($("#inputDecalageX").val())
$("#inputDecalageY").val(sankore.preference("offsetDiagrammY", "0"));
decalageY = parseFloat($("#inputDecalageY").val())
$("#inputPrecision").val(sankore.preference("accuracyGraph", "0.02"));
precision = parseFloat($("#inputPrecision").val());
$("#selectAffichage3D").val(sankore.preference("styleOf3DShow", "surfaces"));
reinitialiserZoom(5);
$("#inputPrecision3D").val(sankore.preference("accuracyFunction", "0.2"));
precisionFonction3D = parseFloat($("#inputPrecision3D").val());
$("#selectRouge3D").val(sankore.preference("redColor", "plus"));
$("#selectVert3D").val(sankore.preference("greenColor", "moins"));
$("#selectBleu3D").val(sankore.preference("blueColor", "tout"));
checkCouleurs3D();
$("#couleur3Dgenerale").val(sankore.preference("3DGeneralColor", "0"));
checkCouleurs3D();
actualiserGraph();
$("#borneXGauche").val(sankore.preference("xAxisFrom", "-5"));
$("#borneXDroite").val(sankore.preference("xAxisTo", "5"));
$("#borneYGauche").val(sankore.preference("yAxisFrom", "-5"));
$("#borneYDroite").val(sankore.preference("yAxisTo", "5"));
var tempArray;
if(sankore.preference("graphmeHistory",""))
tempArray = sankore.preference("graphmeHistory","").split(",");
if(sankore.preference("graphmeHistory","")){
for(i in tempArray)
evaluer(tempArray[i]);
}
actualiserGraph();
loadingFlag = true;
////////////////////////////////////// languages suppot
document.getElementById("texteFonction").innerHTML = sankoreLang[lang].fnc;
$("#xAxis").html(sankoreLang[lang].x_axis);
$("#yAxis").html(sankoreLang[lang].y_axis);
$("#scaleZoom").html(sankoreLang[lang].zoom);
$("#graphColor").html(sankoreLang[lang].color);
$("#menuCouleur .contenuMenu em").text(sankoreLang[lang].choosing_color);
$("#colorValues tr").eq(0).find("td").eq(0).html(sankoreLang[lang].color + ":");
$("#colorValues tr").eq(1).find("td").eq(0).html(sankoreLang[lang].value);
$("#colorValues tr").eq(2).find("td").eq(0).html(sankoreLang[lang].saturation);
$("#colorValues tr").eq(3).find("td").eq(0).html(sankoreLang[lang].red);
$("#colorValues tr").eq(4).find("td").eq(0).html(sankoreLang[lang].green);
$("#colorValues tr").eq(5).find("td").eq(0).html(sankoreLang[lang].blue);
$("#colorValues tr").eq(6).find("td").eq(0).html(sankoreLang[lang].opacity);
$("#menuOutils .contenuMenu h3").eq(0).text(sankoreLang[lang].tools);
$("#menuOutils .contenuMenu span").each(function(){
switch($(this).html()){
case "Mouse events:":
$(this).html(sankoreLang[lang].mouse_events);
break;
case "Derivative:":
$(this).html(sankoreLang[lang].derivative);
break;
case "Square under function:":
$(this).html(sankoreLang[lang].square_under_func);
break;
case "Calculate the point on the function:":
$(this).html(sankoreLang[lang].point_calculate);
break;
case "Analysis of function:":
$(this).html(sankoreLang[lang].analysis_of_func);
break;
case "Display test:":
$(this).html(sankoreLang[lang].display_test);
break;
case "From":
$(this).html(sankoreLang[lang].from);
break;
case "to":
$(this).html(sankoreLang[lang].to);
break;
default:
break;
}
return true;
});
$("label[for*='checkAire']").text(sankoreLang[lang].draw);
$("#menuOptions td").eq(0).html(sankoreLang[lang].widget);
$("#menuOptions h3").eq(0).text(sankoreLang[lang].widget_options);
$("#menuOptions2D h3").eq(0).text(sankoreLang[lang].options + " 2D");
$("#menuOptions2D span").each(function(){
switch($(this).html()){
case "The graphical method displaying:":
$(this).html(sankoreLang[lang].the_graphical);
break;
case "Zoom default:":
$(this).html(sankoreLang[lang].zoom_def);
break;
case "Thickness:":
$(this).html(sankoreLang[lang].thickness);
break;
case "Offset diagram:":
$(this).html(sankoreLang[lang].offset_diagram);
break;
case "Accuracy graph:":
$(this).html(sankoreLang[lang].accuracy_graph);
break;
}
return true;
});
$("#selectMethodeAffichage option").eq(0).text("canvas (" + sankoreLang[lang].lines + ")")
.next().text("canvas (" + sankoreLang[lang].points + ")")
.next().next().text("svg (1 " + sankoreLang[lang].image + ")");
$("label[for*='checkGrille']").text(sankoreLang[lang].show_grid);
$("label[for*='checkAxes']").text(sankoreLang[lang].show_axis);
$("label[for*='checkEchelle']").text(sankoreLang[lang].scale);
$("#menuOptions3D h3").eq(0).text(sankoreLang[lang].options + " 3D");
$("#menuOptions3D span").each(function(){
switch($(this).html()){
case "Show the style:":
$(this).html(sankoreLang[lang].show_the_style);
break;
case "Accuracy function:":
$(this).html(sankoreLang[lang].accuracy_func);
break;
case "Use the color":
$(this).html(sankoreLang[lang].use_the_color);
break;
case "red:":
$(this).html(sankoreLang[lang].red);
break;
case "green:":
$(this).html(sankoreLang[lang].green);
break;
case "blue:":
$(this).html(sankoreLang[lang].blue);
break;
case "General value:":
$(this).html(sankoreLang[lang].general_value);
break;
case "from":
$(this).html(sankoreLang[lang].from);
break;
case "to":
$(this).html(sankoreLang[lang].to);
break;
}
return true;
});
$("#selectAffichage3D option").eq(0).text(sankoreLang[lang].surfaces)
.next().text(sankoreLang[lang].points);
$("#selectRouge3D option").eq(0).text(sankoreLang[lang].positive_value)
.next().text(sankoreLang[lang].negative_value)
.next().text(sankoreLang[lang].general_value);
$("#selectVert3D option").eq(0).text(sankoreLang[lang].negative_value)
.next().text(sankoreLang[lang].positive_value)
.next().text(sankoreLang[lang].general_value);
$("#selectBleu3D option").eq(0).text(sankoreLang[lang].general_value)
.next().text(sankoreLang[lang].positive_value)
.next().text(sankoreLang[lang].negative_value);
$("#menuAide .ongletMenu td, #menuAideExemples .ongletMenu td, #menuAideAutres .ongletMenu td").each(function(){
switch($(this).html()){
case "Using":
$(this).html(sankoreLang[lang].using);
break;
case "Examples":
$(this).html(sankoreLang[lang].examples);
break;
case "Other":
$(this).html(sankoreLang[lang].other);
break;
}
});
$("#menuAide h1").each(function(){
switch($(this).html()){
case "How it work.":
$(this).html(sankoreLang[lang].how_it_work);
break;
case "Constants":
$(this).html(sankoreLang[lang].consts);
break;
case "Keyboard keys":
$(this).html(sankoreLang[lang].keys);
break;
}
return true;
});
$("#menuAide h2").each(function(){
switch($(this).html()){
case "Basic operations":
$(this).html(sankoreLang[lang].basic_operations);
break;
case "Trigonometric functions":
$(this).html(sankoreLang[lang].trigonometric);
break;
case "Hyperbolic functions":
$(this).html(sankoreLang[lang].hyperbolic_func);
break;
case "Square roots and degrees":
$(this).html(sankoreLang[lang].square_roots_and_degrees);
break;
case "Exponential and logarithm":
$(this).html(sankoreLang[lang].exponential);
break;
case "Absolute number value":
$(this).html(sankoreLang[lang].abs);
break;
case "Rounding":
$(this).html(sankoreLang[lang].rounding);
break;
}
return true;
});
$("#menuAide span").each(function(){
switch($(this).html()){
case "This widget allow to draw mathematical function. Enter function in the field in the top part of widget and press \"Show\".":
$(this).html(sankoreLang[lang].this_widget_allow);
break;
case "You can enter following mathematical function:":
$(this).html(sankoreLang[lang].you_can_enter);
break;
case "Plus":
$(this).html(sankoreLang[lang].plus);
break;
case "Minus":
$(this).html(sankoreLang[lang].minus);
break;
case "Multiplication":
$(this).html(sankoreLang[lang].multi);
break;
case "Division":
$(this).html(sankoreLang[lang].division);
break;
case "Mod":
$(this).html(sankoreLang[lang].mod);
break;
case "Sine":
$(this).html(sankoreLang[lang].sine);
break;
case "Cosine":
$(this).html(sankoreLang[lang].cosine);
break;
case "Tangent":
$(this).html(sankoreLang[lang].tangent);
break;
case "Cotangent":
$(this).html(sankoreLang[lang].cotangent);
break;
case "Secant":
$(this).html(sankoreLang[lang].secant);
break;
case "Cosecant":
$(this).html(sankoreLang[lang].cosecant);
break;
case "Arc sine":
$(this).html(sankoreLang[lang].arc_sine);
break;
case "Arc cosine":
$(this).html(sankoreLang[lang].arc_cosine);
break;
case "Arc tangent":
$(this).html(sankoreLang[lang].arc_tangent);
break;
case "Arc cotangent":
$(this).html(sankoreLang[lang].arc_cotangent);
break;
case "Hyperbolic sine":
$(this).html(sankoreLang[lang].hyp_sine);
break;
case "Hyperbolic cosine":
$(this).html(sankoreLang[lang].hyp_cosine);
break;
case "Hyperbolic tangent":
$(this).html(sankoreLang[lang].hyp_tangent);
break;
case "Hyperbolic cotangent":
$(this).html(sankoreLang[lang].hyp_cotangent);
break;
case "Hyperbolic secant":
$(this).html(sankoreLang[lang].hyp_secant);
break;
case "Hyperbolic cosecant":
$(this).html(sankoreLang[lang].hyp_cosecant);
break;
case "Hyperbolic arc sine":
$(this).html(sankoreLang[lang].hyp_arc_sine);
break;
case "Hyperbolic arc cosine":
$(this).html(sankoreLang[lang].hyp_arc_cosine);
break;
case "Hyperbolic arc tangent":
$(this).html(sankoreLang[lang].hyp_arc_tangent);
break;
case "Hyperbolic arc cotangent":
$(this).html(sankoreLang[lang].hyp_arc_cotangent);
break;
case "Square root":
$(this).html(sankoreLang[lang].square_root);
break;
case "Degree":
$(this).html(sankoreLang[lang].degree);
break;
case "Root":
$(this).html(sankoreLang[lang].root);
break;
case "Variable x to the power y":
$(this).html(sankoreLang[lang].variable_x);
break;
case "Root y of x":
$(this).html(sankoreLang[lang].root_y);
break;
case "Natural logarithm":
$(this).html(sankoreLang[lang].natural_log);
break;
case "Decimal logarithm":
$(this).html(sankoreLang[lang].decimal_log);
break;
case "rounding to the nearest whole number":
$(this).html(sankoreLang[lang].round_nearest);
break;
case "rounding to the nearest whole number in a big way":
$(this).html(sankoreLang[lang].round_nearest_big);
break;
case "rounding to the nearest whole number the smaller side":
$(this).html(sankoreLang[lang].round_nearest_small);
break;
case "Also are available some constants:":
$(this).html(sankoreLang[lang].available_const);
break;
case "reset widget":
$(this).html(sankoreLang[lang].reload_widget);
break;
case "left arrow":
$(this).html(sankoreLang[lang].left_arrow);
break;
case "top arrow":
$(this).html(sankoreLang[lang].top_arrow);
break;
case "right arrow":
$(this).html(sankoreLang[lang].right_arrow);
break;
case "bottom arrow":
$(this).html(sankoreLang[lang].bottom_arrow);
break;
case "graph will be moved left":
$(this).html(sankoreLang[lang].moved_left);
break;
case "graph will be moved top":
$(this).html(sankoreLang[lang].moved_top);
break;
case "graph will be moved right":
$(this).html(sankoreLang[lang].moved_right);
break;
case "graph will be moved bottom":
$(this).html(sankoreLang[lang].moved_bottom);
break;
case "or":
$(this).html(sankoreLang[lang].or);
break;
}
return true;
});
$("#menuAideExemples h1").each(function(){
if($(this).text() == "Functions 2D")
$(this).text(sankoreLang[lang].funcs + " 2D");
else
$(this).text(sankoreLang[lang].funcs + " 3D");
});
$("#menuAideExemples span").eq(0).html("(" + sankoreLang[lang].you_can_view + ")");
$("#menuAideAutres h4").eq(0).text(sankoreLang[lang].save_graph);
$("#menuAideAutres h4").eq(1).text(sankoreLang[lang].offset);
$("#menuAideAutres span").eq(0).text(sankoreLang[lang].in_some_browsers);
$("#menuAideAutres span").eq(1).text(sankoreLang[lang].if_graph_isnt);
$("#credits h3").eq(0).text(sankoreLang[lang].widget_is_developed);
$("#menuCredits .texteSecondaire span").eq(0).html(sankoreLang[lang].if_you_want_to);
$("#menuCredits .texteSecondaire span").eq(1).html(sankoreLang[lang].if_you_want_to_change);
$("#menuFonctions td").eq(0).text(sankoreLang[lang].funcs);
$("#menuFonctions td").eq(1).text(sankoreLang[lang].history);
$("#menuFonctions em").eq(0).text(sankoreLang[lang].current);
$("#menuFonctions em").eq(1).text(sankoreLang[lang].additional);
$("#menuHistorique td").eq(0).text(sankoreLang[lang].funcs);
$("#menuHistorique td").eq(1).text(sankoreLang[lang].history);
$("#menuEtude h3").text(sankoreLang[lang].analysis_of_func);
$("#menuEtude span").each(function(){
switch($(this).html()){
case "Set of definitions:":
$(this).html(sankoreLang[lang].set_of_def);
break;
case "Parity:":
$(this).html(sankoreLang[lang].parity);
break;
case "Zeros of functions:":
$(this).html(sankoreLang[lang].zeros);
break;
case "Signe:":
$(this).html(sankoreLang[lang].signe);
break;
case "Asymptotes":
$(this).html(sankoreLang[lang].asympt);
break;
case "AH left:":
$(this).html(sankoreLang[lang].ah_left);
break;
case "AH right:":
$(this).html(sankoreLang[lang].ah_right);
break;
case "AV:":
$(this).html(sankoreLang[lang].av);
break;
case "Tool for analysis of function is not reliable on 100%. Don't forget check results of analysis before use it.":
$(this).html(sankoreLang[lang].tool_for);
break;
}
return true;
});
$("#infoSauvegarde h1").text(sankoreLang[lang].options_saved);
$("#mAj h1").text(sankoreLang[lang].update);
$("#mAj span").each(function(){
switch($(this).html()){
case "Current version:":
$(this).html(sankoreLang[lang].cur_version);
break;
case "The last on-line version:":
$(this).html(sankoreLang[lang].last_version);
break;
case "This widget is available to using on web-site:":
$(this).html(sankoreLang[lang].using_web);
break;
}
});
$("#menuOptions span").each(function(){
switch($(this).html()){
case "Themes of widget:":
$(this).html(sankoreLang[lang].themes_of_widget);
break;
case "Control options:":
$(this).html(sankoreLang[lang].control_options);
break;
case "Save a widget options in cookies or load an options from cookies or delete a registered options.":
$(this).html(sankoreLang[lang].save_a_widget_options);
break;
}
return true;
});
$("#selectTheme option").eq(0).text(sankoreLang[lang].black).next().text(sankoreLang[lang].blue).next().text(sankoreLang[lang].white);
$("input:button").each(function(){
switch($(this).val()){
case "Check":
$(this).val(sankoreLang[lang].check);
break;
case "Cancel":
$(this).val(sankoreLang[lang].quit);
break;
case "Tools":
$(this).val(sankoreLang[lang].tools);
break;
case "Options":
$(this).val(sankoreLang[lang].options);
break;
case "Help":
$(this).val(sankoreLang[lang].help);
break;
case "About":
$(this).val(sankoreLang[lang].about);
break;
case "Moving":
$(this).val(sankoreLang[lang].moving);
break;
case "Tangente":
$(this).val(sankoreLang[lang].tangente);
break;
case "Point":
$(this).val(sankoreLang[lang].point);
break;
case "Calculate":
$(this).val(sankoreLang[lang].calculate);
break;
case "Estimate":
$(this).val(sankoreLang[lang].estimate);
break;
case "Start to analysis":
$(this).val(sankoreLang[lang].start_to_analysis);
break;
case "Test XPM":
$(this).val(sankoreLang[lang].test + " XPM");
break;
case "Test SVG":
$(this).val(sankoreLang[lang].test + " SVG");
break;
case "Test Canvas":
$(this).val(sankoreLang[lang].test + " Canvas");
break;
case "Save":
$(this).val(sankoreLang[lang].save);
break;
case "Load":
$(this).val(sankoreLang[lang].load);
break;
case "Delete":
$(this).val(sankoreLang[lang].del);
break;
case "Display":
$(this).val(sankoreLang[lang].display);
break;
case "Reload widget":
$(this).val(sankoreLang[lang].reload_widget);
break;
case "Updated":
$(this).val(sankoreLang[lang].update);
break;
case "Update zoom":
$(this).val(sankoreLang[lang].update_zoom);
break;
case "Reset display":
$(this).val(sankoreLang[lang].reset_display);
break;
case "User's guide":
$(this).val(sankoreLang[lang].guide);
break;
default:
break;
}
return true;
});
}
$(document).disableTextSelect();
$("input, select").mouseover(function(){
$(document).enableTextSelect();
});
$("input, select").mouseout(function(){
$(document).disableTextSelect();
});
$("body").mouseout(function(){
if(window.sankore && loadingFlag){
sankore.setPreference("functionData",$("#inputEq").val());
sankore.setPreference("xAxisFrom",$("#borneXGauche").val());
sankore.setPreference("xAxisTo",$("#borneXDroite").val());
sankore.setPreference("yAxisFrom",$("#borneYGauche").val());
sankore.setPreference("yAxisTo",$("#borneYDroite").val());
sankore.setPreference("functionColor",$("#inputTeinte").val());
sankore.setPreference("functionValue",$("#inputValeur").val());
sankore.setPreference("functionSaturation",$("#inputSaturation").val());
sankore.setPreference("functionRed",$("#inputRouge").val());
sankore.setPreference("functionGreen",$("#inputVert").val());
sankore.setPreference("functionBlue",$("#inputBleu").val());
sankore.setPreference("functionOpacity",$("#inputOpacity").val());
sankore.setPreference("functionColorId", idColor);
if ($('#checkDerivee').is(":checked"))
sankore.setPreference("simplefx","1");
else
sankore.setPreference("simplefx","0");
if ($('#checkDerivee2').is(":checked"))
sankore.setPreference("hardfx","1");
else
sankore.setPreference("hardfx","0");
sankore.setPreference("squareUnderFrom", $("#aireG").val());
sankore.setPreference("squareUnderTo", $("#aireD").val());
sankore.setPreference("calculateThePoint", $("#inputX").val());
if ($('#checkAire').is(":checked"))
sankore.setPreference("checkboxDraw","1");
else
sankore.setPreference("checkboxDraw","0");
sankore.setPreference("selectedTheme", $("#selectTheme").val());
sankore.setPreference("graphicalMethodDisplaying", $("#selectMethodeAffichage").val());
sankore.setPreference("defaultZoom", $("#zoomDefaut").val());
if ($('#checkGrille').is(":checked"))
sankore.setPreference("showGrid","1");
else
sankore.setPreference("showGrid","0");
if ($('#checkAxes').is(":checked"))
sankore.setPreference("showAxis","1");
else
sankore.setPreference("showAxis","0");
if ($('#checkEchelle').is(":checked"))
sankore.setPreference("showScale","1");
else
sankore.setPreference("showScale","0");
sankore.setPreference("styleOf3DShow", $("#selectAffichage3D").val());
sankore.setPreference("accuracyFunction", $("#inputPrecision3D").val());
sankore.setPreference("redColor", $("#selectRouge3D").val());
sankore.setPreference("greenColor", $("#selectVert3D").val());
sankore.setPreference("blueColor", $("#selectBleu3D").val());
sankore.setPreference("3DGeneralColor", $("#couleur3Dgenerale").val());
sankore.setPreference("thickness", $("#inputTaille").val());
sankore.setPreference("offsetDiagrammX", $("#inputDecalageX").val());
sankore.setPreference("offsetDiagrammY", $("#inputDecalageY").val());
sankore.setPreference("accuracyGraph", $("#inputPrecision").val());
if(historique.length)
sankore.setPreference("graphmeHistory", historique.toString());
}
});
});
//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">
<span id="xAxis">X-axis:</span> <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/>
<span id="yAxis">Y-axis:</span> <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/><span id="scaleZoom">Zoom:</span> <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/>
<span id="graphColor">Color:</span> <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>
<span>Themes of widget:</span> <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/>
<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;"/>
</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>
<span>The graphical method displaying:</span><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/>
<span>Zoom default:</span>
<input value="5" class="smallInput" id="zoomDefaut"/>
<input type="button" onclick='reinitialiserZoom(document.getElementById("zoomDefaut").value)' value="Update 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/>
<span>Thickness:</span> <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/>
<span>Offset diagram:</span>
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/>
<span>Accuracy graph:</span>
<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>
<span>Show the style:</span>
<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/>
<span>Accuracy function:</span> <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/>
<span>Use the color:</span><br/>
<span>red:</span>
<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/>
<span>green:</span>
<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/>
<span>blue:</span>
<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/>
<span>General value:</span> <input class="smallInput" id="couleur3Dgenerale" type="texte" value="0" onkeyup="checkCouleurs3D()"/> (<span>from</span> 0 <span>to</span> 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><span>This widget allow to draw mathematical function. Enter function in the field in the top part of widget and press "Show".</span></p>
<p><span>You can enter following mathematical function:</span><br/>
<h2>Basic operations</h2>
<ul>
<li><span>Plus</span> -> <span class="gras">+</span></li>
<li><span>Minus</span> -> <span class="gras">-</span></li>
<li><span>Multiplication</span> -> <span class="gras">*</span></li>
<li><span>Division</span> -> <span class="gras">/</span></li>
<li><span>Mod</span> -> <span class="gras">%</span></li>
</ul>
<h2>Trigonometric functions</h2>
<ul>
<li><span>Sine</span> -> <span class="gras">sin(x)</span></li>
<li><span>Cosine</span> -> <span class="gras">cos(x)</span></li>
<li><span>Tangent</span> -> <span class="gras">tan(x)</span></li>
<li><span>Cotangent</span> -> <span class="gras">cot(x)</span></li>
<li><span>Secant</span> -> <span class="gras">sec(x)</span></li>
<li><span>Cosecant</span> -> <span class="gras">csc(x)</span></li>
</ul>
<ul>
<li><span>Arc sine</span> -> <span class="gras">arcsin(x)</span> <span>or</span> <span class="gras">asin(x)</span></li>
<li><span>Arc cosine</span> -> <span class="gras">arccos(x)</span> <span>or</span> <span class="gras">acos(x)</span></li>
<li><span>Arc tangent</span> -> <span class="gras">arctan(x)</span> <span>or</span> <span class="gras">atan(x)</span></li>
<li><span>Arc cotangent</span> -> <span class="gras">arccot(x)</span> <span>or</span> <span class="gras">acot(x)</span></li>
</ul>
<h2>Hyperbolic functions</h2>
<ul>
<li><span>Hyperbolic sine</span> -> <span class="gras">sinh(x)</span></li>
<li><span>Hyperbolic cosine</span> -> <span class="gras">cosh(x)</span></li>
<li><span>Hyperbolic tangent</span> -> <span class="gras">tanh(x)</span></li>
<li><span>Hyperbolic cotangent</span> -> <span class="gras">coth(x)</span></li>
<li><span>Hyperbolic secant</span> -> <span class="gras">sech(x)</span></li>
<li><span>Hyperbolic cosecant</span> -> <span class="gras">csch(x)</span></li>
</ul>
<ul>
<li><span>Hyperbolic arc sine</span> -> <span class="gras">arcsinh(x)</span> <span>or</span> <span class="gras">asinh(x)</span></li>
<li><span>Hyperbolic arc cosine</span> -> <span class="gras">arccosh(x)</span> <span>or</span> <span class="gras">acosh(x)</span></li>
<li><span>Hyperbolic arc tangent</span> -> <span class="gras">arctanh(x)</span> <span>or</span> <span class="gras">atanh(x)</span></li>
<li><span>Hyperbolic arc cotangent</span> -> <span class="gras">arccoth(x)</span> <span>or</span> <span class="gras">acoth(x)</span></li>
</ul>
<h2>Square roots and degrees</h2>
<ul>
<li><span>Square root</span> -> <span class="gras">sqrt(x)</span></li>
<li><span>Degree</span> -> <span class="gras">pow(x, y)</span> <span class="texteSecondaire">Variable x to the power y</span></li>
<li><span>Root</span> -> <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><span>Natural logarithm</span> -> <span class="gras">ln(x)</span></li>
<li><span>Decimal logarithm</span> -> <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> -> <span>rounding to the nearest whole number</span></li>
<li><span class="gras">ceil(x)</span> -> <span>rounding to the nearest whole number in a big way</span></li>
<li><span class="gras">floor(x)</span> -> <span>rounding to the nearest whole number the smaller side</span></li>
</ul>
</p> <br/>
<hr/>
<h1>Constants</h1>
<p><span>Also are available some constants:</span><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 -> <span>reset widget</span> <br/>
ctrl + <span>left arrow</span> -> <span>graph will be moved left</span><br/>
ctrl + <span>top arrow</span> -> <span>graph will be moved top</span><br/>
ctrl + <span>right arrow</span> -> <span>graph will be moved right</span><br/>
ctrl + <span>bottom arrow</span> -> <span>graph will be moved bottom</span><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>
<span>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.</span>
<br/><br/>
<h4>Offset</h4>
<span>If graph isn't in the right place (larger than canvas) then can you set necessary parameters graph displaying in settings menu.</span>
</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/>
<span>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:</span> <a href='mailto:yannick.vessaz@gmail.com'>e-mail</a>.
<br/><br/>
<span>If you want to change background design then you can contact at following address:</span> <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>
<span>Mouse events:</span><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/>
<span>Derivative:</span><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/>
<span>Square under function:</span><br/>
<span>From</span> <input value="-5" class="smallInput" id="aireG"/> <span>to</span> <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/>
<span>Calculate the point on the function:</span><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/>
<span>Analysis of function:</span> <br/>
f(x) = <span id="etudeFct"></span> <input type="button" value="Start to analysis" onclick='etudier(document.getElementById("inputEq").value);afficherMenu("menuEtude")'/>
<br/><br/>
<span>Display test:</span><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</h3>
<span>Set of definitions:</span> <span id="etudeEDF">...</span> <br/>
<span>Parity:</span> <span id="etudeParite">...</span> <br/>
<span>Zeros of functions:</span> <span id="etudeZeros">...</span> <br/>
<table>
<tr id="etudeSigne">
<td>Sign : ...</td>
</tr>
</table>
<span>Asymptotes</span> <br/>
<span>AH left:</span> : <span id="etudeAHG">...</span> <br/>
<span>AH right:</span> <span id="etudeAHD">...</span> <br/>
<span>AV:</span> <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='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>
<span>Current version:</span> <br/><span id="thisVersion"></span><br/>
<span>The last on-line version:</span> <br/><span id="newVersion"></span><br/>
<br/>
<span>This widget is available to using on web-site:</span> <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>
......@@ -2,200 +2,199 @@
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>GraphMe - Guide utilisateur</title>
<title>GraphMe - User's guide.</title>
<link rel="stylesheet" type="text/css" href="Style/Guide_Utilisateur.css"/>
</head>
<body>
<h1>GraphMe</h1>
<img src="Images/GraphMe.png"/>
<h1>Guide d'utilisation</h1>
<h1>User's guide</h1>
<ol id="Sommaire">
<li><a href="#Introduction">Introduction</a></li>
<li><a href="#Installation">Installation</a></li>
<li><a href="#AfficherLeWidget">Afficher le widget</a></li>
<li><a href="#PresentationAffichage">Présentation de l'affichage</a></li>
<li><a href="#DessinerFonction">Dessiner une fonction</a></li>
<li><a href="#DeplacerAffichage">Se déplacer à travers la fonction</a></li>
<li><a href="#MenuOptions">Le menu des options</a></li>
<li><a href="#MenuOutils">Le menu des outils</a></li>
<li><a href="#PlusieursFonctions">Dessiner plusieurs fonctions</a></li>
<li><a href="#MaJ">Mettre à jour GraphMe</a></li>
<li><a href="#AfficherLeWidget">Review widget</a></li>
<li><a href="#PresentationAffichage">View presentation</a></li>
<li><a href="#DessinerFonction">Drawing the function</a></li>
<li><a href="#DeplacerAffichage">Offset function</a></li>
<li><a href="#MenuOptions">The options menu</a></li>
<li><a href="#MenuOutils">the tools menu</a></li>
<li><a href="#PlusieursFonctions">Drawing some functions</a></li>
<li><a href="#MaJ">GraphMe update</a></li>
<li><a href="#Contact">Contact</a></li>
</ol>
<h2 id="Introduction">1. Introduction</h2>
<p>
GraphMe est un traceur de fonctions mathématiques que j'ai programmé dans le cadre du travail de maturité gymnasiale. Il est codé en HTML, CSS et JavaScript. Ce grapheur est disponible sur un cd-rom accompagnant mon travail de maturité ainsi que sur internet à la page <a href="http://gyb.educanet2.ch/tm-widgets/.ws_gen/?15">http://gyb.educanet2.ch/tm-widgets/.ws_gen/?15</a>. Ce document a pour but d'expliquer comment utiliser GraphMe. Il présente ses différentes fonctions ainsi que quelques astuces utiles à l'utilisateur.
GraphMe is a app that is developed using html, javascript and css. It can be used for drawing graphs. This document must explain how to use GraphMe. This app have a different functions and some useful advices for users.
</p>
<h2 id="Installation">2. Installation</h2>
<p>
Le widget que vous pouvez télécharger sur internet est compressé au format zip. Avant de l'utiliser, il est nécessaire de le décompresser. Si vous n'avez aucuns programmes permettant d'ouvrir les fichiers zip, vous pouvez télécharger 7zip sur <a href="http://www.7-zip.org/">http://www.7-zip.org/</a>. GraphMe a été conçu pour s'utiliser dans un navigateur internet ou s'intégrer à Uniboard. Pour l'ajouter aux widgets d'Uniboard, il faut copier le dossier « GraphMe.wgt » dans « library/interactive/ ». Par exemple, sous Windows, le widget doit être dans : « C:/Program Files/Uniboard 4/library/interactive/GraphMe.wgt ». Si vous n'avez pas Uniboard, vous pouvez l'obtenir sur <a href="http://getuniboard.com">http://getuniboard.com/</a>.
</p>
This widget can be downloaded from the Internet in a packed format. Before using it must be unpacked. GraphMe was developed for using in web-browsers and integration in Sankore. To add this app in Sankore you should copy folder named "GraphMe.wgt" in "../library/interactive/". For example, on "windows OS" GraphMe must be in folder with following path: "C: / Program Files / Sankore 4/library/interactive/GraphMe.wgt". If you have no Sankore then you can get it on <a href="http://getuniboard.com">http://getuniboard.com/</a>.
</p>
<h2 id="AfficherLeWidget">3. Afficher le widget</h2>
<div class="droite"><img src="Images/Guide_Navigateur.png"/>Image de GraphMe dans un navigateur internet</div>
<h2 id="AfficherLeWidget">3. Review widget</h2>
<div class="droite"><img src="Images/Guide_Navigateur.png"/>Display GraphMe in browsers</div>
<p>
A) Pour afficher le widget dans un navigateur, il faut simplement ouvrir le fichier « Grapheur.xhtml » qui se trouve dans le dossier « GraphMe.wgt » avec votre navigateur internet. Toutefois, certains navigateurs n'arrivent pas à afficher le widget. La liste suivante contient les navigateurs sur lesquels le widget a été testé :
A) To display this app in browser just enough to open the file named "Grapheur.xhtml" (it's in root folder) with your browser. But some browsers can not display app correctly. Below is the list of browsers that are able to display app:
</p>
<ul>
<li>Mozilla Firefox (3.5) : tout fonctionne très bien.</li>
<li>Internet Explorer (8.0) : impossible d'ouvrir le widget, le format .xhtml n'est pas reconnu.</li>
<li>Internet Explorer (pré-version 9.0) : le widget est ouvrable mais seul l'affichage utilisant SVG fonctionne, « canvas » n'est toujours pas supporté.</li>
<li>Konqueror (4.3.4) : le widget s'ouvre mais il y a quelques problèmes d'affichage. Il est quand même utilisable en sélectionnant la méthode d'affichage « canvas » dans les options.</li>
<li>Rekonq (0.5) : le widget fonctionne très bien avec « canvas » mais est un peut lent en utilisant SVG.</li>
<li>Opera (10.51) : le widget est parfaitement utilisable</li>
<li>Google Chrome (4.1) : tout fonctionne également. L'affichage 3D est même très rapide comparé à d'autres navigateurs.</li>
<li>Mozilla Firefox (3.5) : Everything works fine.</li>
<li>Internet Explorer (8.0) : Cannot open a widget, because .xhtml format is not recognized.</li>
<li>Internet Explorer (pré-version 9.0) : Widget works but just using SVG. Canvas not supported yet.</li>
<li>Konqueror (4.3.4) : Widget can be opened but there is some problems with displaying. It still occur when choosed display method "canvas".</li>
<li>Opera (10.51) : Widget quite useful.</li>
<li>Google Chrome (4.1) : Everything works very nice! 3D-display is faster as compared with other browsers.</li>
</ul>
<p>
B) Pour ouvrir le widget dans Uniboard, il faut tout d'abord cliquer sur le bouton « Bibliothèque » en haut de la fenêtre. Ensuite, allez dans l'onglet « Interactif » ou autrement, selon les version d'Uniboard, dans l'onglet « Applications ». Cliquez sur l'icône correspondant à « Traceur de fonctions mathématiques » et finalement sur « Ajouter à la page ».
B) To open widget in Sankore you should first open folder "Application" that is at the left of the screen. Then you must find this app and add it to the page.
</p>
<div class="gauche"><img src="Images/Guide_Uniboard.png"/>Image de GraphMe dans Uniboard</div>
<div class="gauche"><img src="Images/Guide_Uniboard.png"/>Display GraphMe in Sankore</div>
<img src="Images/Guide_AjouterWidget.png"/>
<h2 id="PresentationAffichage">4. Présentation de l'affichage</h2>
<h2 id="PresentationAffichage">4. View presentation</h2>
<ol>
<li>Champ permettant de définir la fonction à afficher.</li>
<li>Bouton affichant la fonction.</li>
<li>Bouton servant à ajouter une nouvelle fonction ou à accéder à l'historique des fonctions.</li>
<li>Zone d'affichage.</li>
<li>Options d'affichage permettant de définir la partie de la fonction à afficher.</li>
<li>Boutons de zoom.</li>
<li>Bouton servant à changer la couleur.</li>
<li>Boutons accédant aux différents menus.</li>
<li>Onglet choisissant entre les fonctions 2D et 3D.</li>
<li>Bouton de maximisation du widget.</li>
<li>Place for functions display.</li>
<li>Button for beginning the work.</li>
<li>Button for adding new function or for getting access to functions history.</li>
<li>Display.</li>
<li>Parameters that define the part of graph that will be displayed.</li>
<li>Buttons for zoom.</li>
<li>Button for color changing.</li>
<li>Buttons for access to menu.</li>
<li>Tab-button that toggles 2D and 3D modes.</li>
<li>Button for maximize the widget.</li>
</ol>
<img src="Images/Guide_Presentation.png"/>
<h2 id="DessinerFonction">5. Dessiner une fonction</h2>
<h2 id="DessinerFonction">5. Drawing the function</h2>
<p>
Pour dessiner une fonction mathématique, il suffit d'entrer celle-ci dans le champ en haut du widget et de cliquer sur le bouton « Afficher ». On peut utiliser différentes fonctions et constantes prédéfinies:
To draw mathematical function just enter it at the top of widget and press button "Display". You can use different functions and predefined constants.
</p>
<h4>Les opérations de base</h4>
<h4>Basic operations:</h4>
<ul>
<li>l'addition → +</li>
<li>la soustraction → -</li>
<li>la multiplication → *</li>
<li>la division → /</li>
<li>le modulo → %</li>
<li>Addition → +</li>
<li>Subtraction → -</li>
<li>Multiplication → *</li>
<li>Division → /</li>
<li>Mod → %</li>
</ul>
<h4>Les fonctions trigonométriques</h4>
<h4>Trigonometric functions</h4>
<ul>
<li>sin(x), cos(x), tan(x), cot(x)</li>
<li>asin(x), acos(x), atan(x), acot(x) ( ou arcsin(x), arccos(x), arctan(x), arccot(x) )</li>
</ul>
<h4>Les racines et les puissances</h4>
<h4>Square roots and degrees</h4>
<ul>
<li>sqrt(x) fait la racine carrée de x</li>
<li>pow(x, y) élève un nombre x à une puissance y, par exemple :<br/>x² → pow(x, 2)<br/>(x+3)⁵ → pow((x+3), 5)</li>
<li>root(x, y) fait la racine yème d'un nombre x</li>
<li>sqrt(x) is square root from x</li>
<li>pow(x, y). Variable x to the power y. For examle:<br/>x² → pow(x, 2)<br/>(x+3)⁵ → pow((x+3), 5)</li>
<li>root(x, y). Root y of x</li>
</ul>
<h4>Les exponentielles et logarithmes</h4>
<h4>Exponential and logarithm</h4>
<ul>
<li>exp(x)</li>
<li>ln(x) est le logarithme naturel</li>
<li>log(x) est le logarithme de base 10</li>
<li>ln(x) is natural logarithm.</li>
<li>log(x) is decimal logarithm.</li>
</ul>
<h4>Les arrondis</h4>
<h4>Rounding</h4>
<ul>
<li>round(x) → arrondit à l'entier le plus proche</li>
<li>ceil(x) → arrondit à l'entier supérieur</li>
<li>floor(x) → arrondit à l'entier inférieur</li>
<li>round(x) → rounding to the nearest whole number</li>
<li>ceil(x) → rounding to the nearest whole number in a big way</li>
<li>floor(x) → rounding to the nearest whole number the smaller side</li>
</ul>
<h4>Autres fonctions prédéfinies</h4>
<h4>Other predefined function</h4>
<ul>
<li>abs(x) → la valeur absolue d'un nombre</li>
<li>random() → retourne un nombre aléatoire entre 0 et 1</li>
<li>abs(x) → Absolute number value</li>
<li>random() → Return random number between 0 and 1</li>
</ul>
<h4>Les constantes</h4>
<h4>Also are available some constants:</h4>
<ul>
<li>pi = 4 * atan(1) ≈ 3.141592653589793</li>
<li>e = exp(1) ≈ 2.718281828459045 </li>
</ul>
<p>
Il n'est pas toujours facile de comprendre comment écrire la fonction désirée. En effet, une petite faute et elle ne s'affichera pas. De plus, il ne faut pas oublier de mettre un « * » entre les thermes à multiplier et d'utiliser le point « . » pour écrire des nombres à virgule.
Not always it's easy to understand how to record a required function. Really if anywhere you err then graph will not displayed. Also do not forget about "*" (multiply) to multiply and "." (decimal point) to write point.
</p>
<p>
Les fonctions en deux dimensions s'écrivent sous la forme : y=[...] et les fonctions en trois dimensions sous la forme : z=[...]. D'autres exemples sont disponibles dans le menu « aide » du widget si vous avez de la peine à entrer une fonction.
The two-dimensional function must be written as y=[...] and the three-dimensional function nust be written as z=[...]. Other examples are available to use in menu "Help" if you have some difficulties with function definition.
</p>
<h2 id="DeplacerAffichage">6. Se déplacer à travers la fonction</h2>
<h2 id="DeplacerAffichage">6. Offset function</h2>
<p>
Parfois, lorsqu'on dessine une fonction, la zone visible n'est pas très intéressante. Pour cela, il est utile de déplacer l'affichage ou de définir soi-même la zone à afficher.
Sometimes when you draw the function you don't see all necessary information about this function. In this case you can change position of graph.
</p>
<img src="Images/Guide_Deplacement.png"/>
<p>
Pour déplacer la fonction, il suffit d'utiliser les flèches de navigation situées dans les quatre bords de l'affichage ou l'outil de déplacement à la souris (dans le menu « Outils »).
To move the function graph just use a navigation arrows that are in the four edges of the display or mouse move tool (menu Service).
</p>
<p>
Pour définir la zone à afficher, il faut entrer des valeurs personnalisées dans les champs à gauche du widget. La valeur de gauche doit obligatoirement être plus petite que la valeur de droite. Dans le cas contraire, la fonction ne se dessinera pas.
To define place to display you should enter a custom values in the left side of the widget. The left value must be less than the right value. In other case graph will not displayed.
</p>
<p>
Il est possible de zoomer ou dé-zoomer l'affichage en utilisant les boutons du menu de gauche pour voir une plus grande partie de la fonction. Le zoom peut être réinitialisé dans les options. On peut également cliquer deux fois sur le graphique pour zoomer ainsi que dé-zoomer en maintenant la touche « ctrl » appuyée et en cliquant deux fois.
You can increase or decrease the scale of displaying using buttons that are in the left menu. So you'll see more information about function. Zoom can be reset in options.
</p>
<h2 id="MenuOptions">7. Le menu des options</h2>
<h2 id="MenuOptions">7. The options menu</h2>
<p>
Cliquez sur le bouton « Options » à gauche du widget pour ouvrir ce menu. En cliquant à nouveau sur le bouton, cela ferme le menu. Plusieurs onglets permettent de naviguer entre les différentes options. Description des options :
To open the menu you should click a button "Options" that is in the left of the widget. If you click on this button again then menu will close. There are some buttons for navigation between options. Their short description:
</p>
<ul>
<li>Le thème du widget change l'image de fond ainsi que différentes couleurs. Dans Uniboard, changer le thème permet de rendre le widget plus visible selon qu'il se trouve sur un fond noir ou un fond blanc.</li>
<li>La méthode d'affichage permet de définir la façon dont le graphique de la fonction sera dessiné. Il y a le choix entre six possibilités : <br/>
<li>Changing a background image and color. In Sankore changing background theme used for displaying widget on black and white background.</li>
<li>Display-method used for defining displaying function. There are 6 possibilities: <br/>
<ol>
<li>SVG est un format d'image vectoriel qui peut être intégré dans une page HTML. Il est compatible dans la plupart des navigateurs Internet et est très bien supporté par Uniboard, c'est pourquoi il est choisi par défaut.</li>
<li>« SVG (une image) » ne présente que peu de différence avec la méthode d'affichage « SVG ». A moins d'un problème de compatibilité, il n'est pas très utile de la choisir.</li>
<li>Canvas est une nouvelle balise présente depuis HTML 5.0. Elle permet de définir une zone dans laquelle on peut faire des dessins. Cette méthode d'affichage est plus rapide que d'utiliser du SVG, cependant, elle n'est pas complètement compatible dans Uniboard. Il est conseillé de choisir cette option si vous utilisez le widget ailleurs que dans Uniboard.</li>
<li>Canvas (point) utilise aussi canvas, mais dessine des points à la place de lignes.</li>
<li>XPM est un format d'image très peu connu. De ce fait, il est compatible qu'avec une minorité de navigateur.</li>
<li>La méthode d'affichage « Uniboard » permet de dessiner directement sur la page d'Uniboard avec les outils de dessins.</li>
<li>SVG is a vector format of image and it can be built in HTML-page. It's compatible in most of browsers and Sankore support it very well so is it selected default.</li>
<li>There is a big difference between SVG (image) and display method SVG. If you have a compatibility problems then you should not use this method.</li>
<li>"Canvas" is a new tag that used in HTML 5.0. It define a area in which you can place some images. This display-method is faster than SVG-method, but Sankore does not fully support it. It's desirable to choose this method when you use no Sankore widget.</li>
<li>"Canvas" (point) also uses a canvas but draws a points instead of lines.</li>
<li>XPM format is little known so it's compatible just with a minority of browsers.</li>
<li>Display method "Uniboard" allows to draw directly on the page using Sankore drawing.</li>
</ol>
<img src="Images/Guide_Options.png"/>
</li>
<li>Le zoom par défaut ainsi que le bouton « réinitialiser le zoom » permettent de remettre l'affichage à l'état qu'il était à l'ouverture du widget. Cela permet aussi de centrer l'affichage sur l'origine.</li>
<li>Les options d'affichage permettent d'afficher ou non la grille, les axes ainsi que l'échelle. Elles sont utiles pour rendre l'affichage plus lisible. Il est également possible de modifier l'épaisseur du trait de la fonction.</li>
<li>Le décalage du graphique n'a en principe pas besoin d'être utilisé. Il permet de déplacer tout l'affichage dans un sens ou dans l'autre, s'il n'est pas centré à la bonne place. Cela peut arriver avec certains navigateurs Internet.</li>
<li>La précision des calculs du graphique permet d'augmenter ou de diminuer le nombre de points calculés. Plus le nombre est petit, plus la précision est grande. Il est utile de mettre cette valeur à « 0.01 » si vous dessinez des fonctions ressemblant à 0.5*sin(10*x*x).</li>
<li>Dans les options 3D, le style d'affichage permet de choisir comment la fonction est dessinée : avec des petits points ou avec des polygones (surfaces). La plupart des fonctions sont plus jolies en dessinant la surface entre les points calculés. Toutefois, c'est mieux de dessiner des points pour des fonctions comme la demi-sphère : sqrt(12-x*x-y*y).</li>
<li>Dans le dernier onglet, vous pouvez modifier d'autres options 3D, comme la précision des calculs ainsi que la couleur de la fonction.</li>
<li>Default zoom button returns display into original state. It helps alsoto return to the origin.</li>
<li>Display options allow to display or not a grid, axis and scale. They make a mapping more readable. Also you can change the thickness of function line.</li>
<li>Offset of graph not used usually. But if you use it then you can move a mapping in any direction when a center isn't in the right place. It's avaliable in some browsers.</li>
<li>The accuracy of calculations of the graph will increase or decrease the number of points calculated. The higher the number, the more accuracy. It is useful to set this value to "0.01" if you draw functions like 0.5 * sin (10 * x * x).</li>
<li>Options in 3D, the display style to choose how the function is designed: with small points or polygons (areas). Most functions are prettier drawing surface between the points calculated. However, it is better to draw points for functions such as the hemisphere: sqrt (12 - x*x - y*y).</li>
<li>In the last tab you can change such options 3D, as the accuracy of the calculations and the color of the function.</li>
</ul>
<h2 id="MenuOutils">8. Le menu des outils</h2>
<h2 id="MenuOutils">8. The tools menu.</h2>
<p>
Ce menu permet tout d'abord de choisir l'action de la souris sur le graphique. Il y a le choix entre trois possibilités :
This menu allows you to choose first action of the mouse on the graph. There is a choice of three options:
</p>
<ul>
<li>L'outil sélectionné par défaut est le point. En bougeant la souris, un point se déplace sur la fonction et les coordonnées de ce point sont indiquées en haut à gauche de l'affichage.</li>
<li>Le deuxième outil est le déplacement. Il permet de déplacer le graphique avec la souris. Il suffit de tenir cliqué sur l'affichage et de bouger la souris. Malheureusement, cet outil peut être lent sur certains navigateurs.</li>
<li>Le troisième outil est la tangente. Cet outil dessine la tangente à la fonction au point où se trouve la souris.</li>
<li>The selected tool is the default. By moving the mouse, a point moves on the function and the coordinates of this point are shown in the top left of the display.</li>
<li>The second tool is moving. It allows you to move the chart with the mouse. Just keep clicking on the display and move the mouse. Unfortunately, this tool can be slow on some browsers.</li>
<li>The third tool is the tangent. This tool draws the tangent to the function at the point where is a mouse cursor.</li>
</ul>
<p>
Ensuite, ce menu permet aussi de calculer un point de la fonction. Il faut simplement entrer la coordonnée « x » du point dont on veut trouver la coordonnée « y », et appuyer sur le bouton « Évaluer ». Par exemple, si la fonction est « x*x » et qu'on défini « x=2 », alors le point dont la coordonnée sur l'axe des X est « 2 » aura comme coordonnée sur l'axe des Y « 4 ».
Then, this menu also allows to calculate a point of the function. Simply enter the coordinate "x" from the point where we want to find the coordinate "y" and press the "Evaluate". For example, if the function is "x * x" and that defined "x = 2", then the point whose coordinate on the X axis is "2" will be to coordinate on the Y axis "4".
</p>
<p>
Un autre outil très utile est l'étude de fonction. Pour étudier la fonction entrée dans le champ en haut du widget, cliquez sur « démarrer l'étude ». Les études de fonction de ce widget ne sont pas fiables à 100% mais servent de complément à une étude de fonction que l'on fait soi-même. Il se peut que cet outil soit amélioré dans une prochaine version du widget.
Another useful tool is the analysis of function. To analyse the function click on "start the analysis". Analyses based on this widget are not 100% reliable, but are complementary to a analysis of function that you are doing yourself. It may be that this tool will be improved in a future version of the widget.
</p>
<p>
Dans ce menu, on trouve également des tests d'affichage. Ils permettent d'essayer les différentes méthodes d'affichage et de voir si elles fonctionnent sur le navigateur internet utilisé.
In this menu there are also tests the display. They can try different methods to display and see if they work on the browser used.
</p>
<h2 id="PlusieursFonctions">9. Dessiner plusieurs fonctions</h2>
<h2 id="PlusieursFonctions">9. Drawing some functions</h2>
<p>
Pour dessiner plusieurs fonctions simultanément, cliquez sur le petit bouton « + » qui se situe à droite du bouton « Afficher » (point 1). Ensuite, un menu apparaît.
To draw multiple functions simultaneously, click the small "+" button which is located to the right of "View" (point 1). Then, a menu appears.
</p>
<img src="Images/Guide_Plus.png"/>
<p>
Dans ce menu, des onglets permettent d'aller à l'historique ou aux fonctions supplémentaires (point 2). Pour ajouter une fonction, cliquez sur le bouton à droite de la fonction actuelle (point 3). En dessous, une liste contient toutes les fonctions affichées (point 4). Pour supprimer une fonction, il faut simplement cliquer sur le bouton « - » à coté de celle-ci. Il est également possible de modifier la couleur de chaque fonction séparément.
The tabs in this menu can go to the history or the additional features (point 2). To add a function click the button to the right of the current function (point 3). Below is a list that contains all the displayed functions (point 4). To remove a function, just click on the "-" button next to it. It is also possible to change the color of each function separately.
</p>
<p>
L'historique permet de revoir toutes les fonctions qui ont déjà été dessinées. Lorsque l'on clique sur une fonction de l'historique, celle qui est dessinée actuellement est remplacée par la fonction de l'historique.
History can review all the functions that have already been drawn. When you click on a function of history current function replaced by the function of history.
</p>
<p>
Dessiner plusieurs fonctions simultanément est uniquement possible avec la méthode d'affichage « canvas » en deux dimensions. Par contre, l'historique est utilisable avec toutes les méthodes d'affichage.
"Drawing several functions simultaneously" mode is only possible with the display method "canvas" in two dimensions, but the history can be used with all methods of display.
</p>
<h2 id="MaJ">10. Mettre à jour GraphMe</h2>
<h2 id="MaJ">10. GraphMe update</h2>
<p>
La dernière version du widget est téléchargeable sur la page suivante : <a href="http://gyb.educanet2.ch/tm-widgets/.ws_gen/?15">http://gyb.educanet2.ch/tm-widgets/.ws_gen/?15</a>. Pour mettre à jour GraphMe, vous pouvez aussi cliquer sur le bouton "Mise à jour" dans le menu des options.
The latest version of the widget can be downloaded from the following page: <a href="http://gyb.educanet2.ch/tm-widgets/.ws_gen/?15">http://gyb.educanet2.ch/tm-widgets/.ws_gen/?15</a>. To update GraphMe, you can also click on "Update" in the options menu.
</p>
<h2 id="Contact">11. Contact</h2>
<p>
Si vous voulez rapporter un bug, avez une suggestion par rapport au widget ou voulez simplement poser une question, merci de me contacter par e-mail à l'adresse : <a href="mailto:yannick.vessaz@gmail.com">yannick.vessaz@gmail.com</a>.
If you want to report a bug, have a suggestion from the widget or just want to ask a question, please contact me by e-mail at: <a href="mailto:yannick.vessaz@gmail.com">yannick.vessaz@gmail.com</a>.
</p>
</body>
</html>
\ No newline at end of file
// Convertir une coordonnée sur le graphique en position relative à l'affichage (ou à l'écran si ecran = true)
function coordToPosX(x, ecran){
if(ecran){
return coordToPosX(x, false)+affichage.offsetLeft;
}
else{
return (x - affichage.xGauche) * affichage.multX;
}
}
function coordToPosY(y, ecran){
if(ecran){
return coordToPosY(y, false)+affichage.offsetTop;
}
else{
return affichage.hauteur - (y - affichage.yBas) * affichage.multY;
}
}
var affichage = {
// Options
id : "affichage",
largeur : 640, // Set by init
hauteur : 430, // Set by init
couleurFond : "rgba(0,0,0,0)",
// Bornes (zone d'affichage)
xGauche : -5.5, // Set by init
xDroite : 5.5, // Set by init
yBas : -3.7,
yHaut : 3.7,
multX : 1,
multY : 1,
// Axes
axes : true,
couleurAxes : "rgba(0,0,0,0.5)",
widthAxes : 2,
// Grille
grille : true,
couleurGrille : "rgba(255,255,255,0.1)",
widthGrille : 2,
// Echelle
echelle : true,
couleurEchelle : "rgba(255,255,255,1)",
// Précision
precision : 100,
precisionAmelioree : true, // false = fonction plus jolie lorsqu'on dé-zoom, true = affichage plus rapide lors du dé-zoom.
// Méthode et style
methode : "canvas",
style : "continu",
// Variable définies lors de l'initialisation
canvas : null,
ctx : null,
object : null,
offsetTop : null, // Position de l'affichage par rapport à la page
offsetLeft : null,
init : function(element, width, height){
this.setBornes();
// Supprimer le contenu de l'affichage
if(!element){
element = document.getElementById(this.id);
}
if(element.hasChildNodes()){
while(element.childNodes.length >= 1 ){
element.removeChild(element.firstChild);
}
}
// Définir la taille
this.largeur = width || element.clientWidth;
this.hauteur = height || element.clientHeight;
// Set left and right proportionally to width, height, top and bottom
var centerX = this.xGauche + (this.xDroite - this.xGauche)/2;
var centerY = this.yBas + (this.yHaut - this.yBas)/2;
var dx = ((this.yHaut - this.yBas) / 2) * this.largeur / this.hauteur;
this.xGauche = Math.round((centerX - dx)*100)/100;
this.xDroite= Math.round((centerX + dx)*100)/100;
this.setBornes();
// Récupérer la position
var boundingClientRect = element.getBoundingClientRect();
this.offsetTop = boundingClientRect.top;
this.offsetLeft = boundingClientRect.left;
// Sélectionner la méthode d'affichage
if(this.methode == "svg"){
// this.object = document.createElement("embed");
// this.object.type = "image/svg+xml";
// this.object.src = "AffichageSVG.svg";
this.object = document.getElementById("embedSVG");
this.object.width = this.largeur;
this.object.height = this.hauteur;
this.object.style.top = this.offsetTop +1 +"px";
this.object.style.left = this.offsetLeft +1 +"px";
this.object.style.display = "block";
// element.appendChild(this.object);
// affichage.ctx = svg;
// affichage.dessiner();
// // Exécuter this.dessiner() maintenant ne va pas car svg n'est pas
// // encore défini dans cette fonction, il faut en lancer un nouvelle...
setTimeout("affichage.ctx = svg", 50);
setTimeout("affichage.dessiner()", 100);
}
else if(this.methode == "uniboard"){
if(window.uniboard || window.sankore){
try{
initUniboard();
this.ctx = uniboard;
this.dessiner();
}
catch(err){
alert(err.message);
}
}
else{
this.methode = "canvas";
this.setOptions();
this.init();
}
}
else{
document.getElementById("embedSVG").style.display = "none";
this.canvas = document.createElement("canvas");
this.canvas.width = this.largeur;
this.canvas.height = this.hauteur;
element.appendChild(this.canvas);
this.ctx = this.canvas.getContext("2d");
this.dessiner();
}
// Événements
if(window.addEventListener){
element = document.getElementById("eventAffichage");
element.addEventListener('DOMMouseScroll', souris.wheel, false);
element.onmousewheel = souris.wheel;
element.oncontextmenu = ctxMenu.ouvrir;
}
},
calculer : function(){
this.getBornes();
this.getOptions();
if(fonction3D){
display3D.draw()
}
else{
this.dessiner();
}
saveOptions();
},
dessiner : function(){
try{
// var ti = new Date().getTime();
var precision;
if(this.precisionAmelioree){
precision = 10/this.precision;
}
else{
precision = Math.abs(this.xDroite - this.xGauche)/this.precision;
}
this.multX = this.largeur/Math.abs(this.xDroite - this.xGauche);
this.multY = this.hauteur/Math.abs(this.yHaut - this.yBas);
var ctx = new Object();
ctx = this.ctx;
ctx.clearRect(0,0,this.largeur,this.hauteur);
ctx.fillStyle = this.couleurFond;
ctx.fillRect(0,0,this.largeur,this.hauteur);
ctx.strokeOpacity = 1; // svg
// Couleur pour l'aire sous la fonction
ctx.fillStyle = "rgba(0,180,255,0.3)";
// Fonctions
for(var i=0; i<fct.list.length; i++){
if(!fct.list[i]){
continue;
}
fct.list[i].plot(ctx, precision, affichage);
}
ctx.strokeOpacity = 0.2; // svg
// Grille et échelle
// var intervalX = Math.round(Math.abs(this.xGauche-this.xDroite)/10);
var interval = Math.round(Math.abs(this.yBas-this.yHaut)/10);
if(interval <= 0){
interval = 1;
}
// if(intervalY <= 0){
// intervalY = 1;
// }
var initialX = Math.floor(-this.xGauche) % interval;
var initialY = Math.floor(-this.yBas) % interval;
ctx.beginPath();
ctx.fillStyle = this.couleurEchelle;
ctx.strokeStyle = this.couleurEchelle;
ctx.lineWidth = this.widthGrille;
if(this.methode == "uniboard"){
ctx.lineWidth /= 2;
ctx.fillStyle = "rgb(0,0,0)";
ctx.strokeStyle = "rgb(100,100,100)";
}
for(var i=initialX; i<=Math.round(this.xDroite-this.xGauche); i=i+interval){
var position = Math.round((Math.ceil(this.xGauche) - this.xGauche +i) * this.multX);
if(this.grille){
ctx.moveTo(position, 0);
ctx.lineTo(position, this.hauteur);
}
if(this.echelle){
ctx.fillText(Math.ceil(i+this.xGauche), position-6, (this.hauteur-(-this.yBas*this.multY))-2);
}
}
for(var i=initialY;i<=Math.round(this.yHaut-this.yBas);i=i+interval){
var position = this.hauteur - Math.round((Math.ceil(this.yBas) - this.yBas +i) * this.multY);
if(this.grille){
ctx.moveTo(0, position);
ctx.lineTo(this.largeur, position);
}
if(this.echelle){
ctx.fillText(Math.ceil(i+this.yBas), (-this.xGauche*this.multX)+2, position+6);
}
}
ctx.strokeStyle = this.couleurGrille;
ctx.stroke();
ctx.strokeOpacity = 0.8; //svg
// Axes
if(this.axes){
ctx.beginPath();
ctx.strokeStyle = this.couleurAxes;
ctx.lineWidth = this.widthAxes;
if(this.methode == "uniboard"){
ctx.lineWidth *= 2;
ctx.strokeStyle = "rgb(0,0,0)";
}
ctx.moveTo(-this.xGauche*this.multX, 0)
ctx.lineTo(-this.xGauche*this.multX, this.hauteur)
ctx.moveTo(0, this.hauteur+this.yBas*this.multY)
ctx.lineTo(this.largeur, this.hauteur+this.yBas*this.multY)
ctx.stroke()
}
// Autres
outil.dessinerListe();
// var tf = new Date().getTime();
// window.console.log(tf-ti);
}
catch(err){
var message = err.message;
afficherErreur(message);
}
},
getBornes : function(){
this.xGauche = parseFloat(document.getElementById("borneXGauche").value);
this.xDroite = parseFloat(document.getElementById("borneXDroite").value);
this.yBas = parseFloat(document.getElementById("borneYGauche").value);
this.yHaut = parseFloat(document.getElementById("borneYDroite").value);
},
setBornes : function(){
document.getElementById("borneXGauche").value = this.xGauche;
document.getElementById("borneXDroite").value = this.xDroite;
document.getElementById("borneYGauche").value = this.yBas;
document.getElementById("borneYDroite").value = this.yHaut;
},
getOptions : function(){
this.axes = document.getElementById("checkAxes").checked ? true : false;
this.grille = document.getElementById("checkGrille").checked ? true : false;
this.echelle = document.getElementById("checkEchelle").checked ? true : false;
this.precision = document.getElementById("inputPrecision").value;
this.precisionAmelioree = document.getElementById("checkPrecision").checked ? true : false;
var methode = document.getElementById("selectMethodeAffichage").value;
if(methode != this.methode){
this.methode = methode;
this.init();
}
},
setOptions : function(){
document.getElementById("selectMethodeAffichage").value = this.methode;
document.getElementById("checkGrille").checked = this.grille;
document.getElementById("checkAxes").checked = this.axes;
document.getElementById("checkEchelle").checked = this.echelle;
document.getElementById("inputPrecision").value = this.precision;
document.getElementById("checkPrecision").checked = this.precisionAmelioree;
},
deplacerX : function(x){
if(fonction3D){
display3D.move(x);
return;
}
this.xGauche += x;
this.xDroite += x;
this.dessiner();
this.setBornes();
saveOptions();
},
deplacerY : function(y){
if(fonction3D){
return;
}
this.yHaut += y;
this.yBas += y;
this.dessiner();
this.setBornes();
saveOptions();
},
centrer: function(){
var valeurX = (this.xDroite-this.xGauche)/2;
var valeurY = (this.yHaut-this.yBas)/2;
this.initZoom(valeurX, valeurY);
},
initZoom : function(valeurX, valeurY){
if(fonction3D){
display3D.initZoom();
}
this.xGauche = -valeurX;
this.xDroite = valeurX;
this.yBas = -valeurY;
this.yHaut = valeurY;
this.setBornes();
this.dessiner();
},
initZoom2 : function(valeur){
var valeurY = parseFloat(valeur);
var valeurX = valeurY * this.largeur / this.hauteur;
this.initZoom(valeurX, valeurY);
},
zoom : function(facteur){
if(fonction3D){
return;
}
var diffBornes, ajouter;
// Horizontal
diffBornes = Math.abs(this.xDroite - this.xGauche);
ajouter = Math.round(diffBornes * (facteur-1)*2)/4;
// log(diffBornes, ajouter, facteur)
if(ajouter == 0){
ajouter = 0.25;
// log("affichage.zoom -> x : ajouter = 0.5")
}
this.xGauche -= ajouter;
this.xDroite += ajouter;
// Vertical
diffBornes = Math.abs(this.yHaut - this.yBas);
ajouter = Math.round(diffBornes * (facteur-1)*2)/4;
if(ajouter == 0){
ajouter = 0.25;
// log("affichage.zoom -> y : ajouter = 0.5")
}
this.yBas -= ajouter;
this.yHaut += ajouter;
this.dessiner();
this.setBornes();
saveOptions();
}
};
var fonction3D = false;
var outilPrecedent = "";
var ctx
var centreX, centreY
var echelle3D = 50
var precisionDroite3D = 0.02
var precisionFonction3D = 0.2
var fonction3D = false
var angle = Math.PI/8
var valeurZoom3D = 1
var gauche3D = -6.5
var droite3D = 6.5
var outilPrecedent = ""
var rouge3D = 0
var vert3D = 1
var bleu3D = 2
var couleurGenerale = 0
function activer3D(){
if(fonction3D){ // Si activé alors on le désative
fonction3D = false;
outil.choisir(outilPrecedent);
document.getElementById('onglet3D').innerHTML = "3D";
document.getElementById('zoomButtons').style.display = "block";
document.getElementById('toolButtons').style.display = "block";
affichage.init();
outil.init();
affichage.initZoom2(document.getElementById('zoomDefaut').value);
}
else{ // Sinon on l'active
fonction3D = true;
outilPrecedent = outil.actuel;
outil.choisir("deplacement");
document.getElementById('onglet3D').innerHTML = "2D";
document.getElementById('zoomButtons').style.display = "none";
document.getElementById('toolButtons').style.display = "none";
display3D.init();
outil.liste = [];
outil.init();
message.supprimer();
}
cacherMenu();
if(fonction3D){
if(document.getElementById('input3D').value == ""){
afficherMenu('menuFonctions3D');
}
else{
display3D.draw();
}
}
saveOptions();
if(fonction3D){ // Si activé alors on le désative
fonction3D = false
choixOutil(outilPrecedent)
document.getElementById('onglet3D').innerHTML = "3D"
largeur = 500
document.getElementById("affichage").style.width = largeur+"px"
document.getElementById("affichage").style.left = "129px"
document.getElementById("flecheGauche").style.left = "137px"
document.getElementById("flecheHaut").style.left = "345px"
document.getElementById("flecheBas").style.left = "345px"
document.getElementById("gauche").style.display = "block"
document.getElementById("gauche3D").style.display = "none"
var elements = document.getElementsByClassName("menu")
for(var i=0; i<elements.length; i++){
elements[i].style.left = "121px"
}
reinitialiserZoom(5)
}
else{ // Sinon on l'active
fonction3D = true
outilPrecedent = outil
choixOutil("deplacement")
document.getElementById('onglet3D').innerHTML = "2D"
largeur = 570
document.getElementById("affichage").style.width = largeur+"px"
document.getElementById("affichage").style.left = "59px"
document.getElementById("flecheGauche").style.left = "67px"
document.getElementById("flecheHaut").style.left = "290px"
document.getElementById("flecheBas").style.left = "290px"
document.getElementById("gauche").style.display = "none"
document.getElementById("gauche3D").style.display = "block"
var elements = document.getElementsByClassName("menu")
for(var i=0; i<elements.length; i++){
elements[i].style.left = "61px"
}
initialise3D()
}
}
function initialise3D() {
centreX = largeur / 2
centreY = hauteur / 2
document.getElementById("affichage").innerHTML = '<canvas id="canvas" width="'+largeur+'" height="'+hauteur+'"></canvas>'
ctx = document.getElementById('canvas').getContext('2d')
ctx.clearRect(0, 0, 640, 480)
ctx.fillStyle = "rgba(0, 0, 0, 0.5)"
ctx.fillRect(0,0,640,480)
axes()
}
var display3D = {
canvas: null,
ctx: null,
width: 0,
height: 0,
centerX: 0,
centerY: 0,
scale: 50,
linePrecision: 0.02,
functionPrecision: 0.2,
angle: Math.PI/8,
zoomValue: 1,
left: -6.5,
right: 6.5,
rouge3D: 0,
vert3D: 1,
bleu3D: 2,
couleurGenerale: 0,
background: "rgba(0, 0, 0, 0.5)",
init: function(width, height){
var displayElement = document.getElementById("affichage");
// Clear displayElement content
if(displayElement.hasChildNodes()){
while(displayElement.childNodes.length >= 1 ){
displayElement.removeChild(displayElement.firstChild);
}
}
// Setup sizes
this.width = width || displayElement.clientWidth;
this.height = height || displayElement.clientHeight;
this.centerX = this.width / 2;
this.centerY = this.height / 2;
// Create canvas
this.canvas = document.createElement("canvas");
this.canvas.width = this.width;
this.canvas.height = this.height;
displayElement.appendChild(this.canvas);
this.ctx = this.canvas.getContext('2d');
this.clear();
},
clear: function(){
var ctx = this.ctx;
ctx.clearRect(0, 0, this.width, this.height);
ctx.fillStyle = this.background;
ctx.fillRect(0, 0, this.width, this.height);
this.axes();
},
draw: function(){
// var ti = new Date().getTime();
// this.init();
this.clear();
var txtFct = fct.remplacer(fct.verifier(document.getElementById("input3D").value));
if(txtFct == ""){
return;
}
var func = new CartesianFunction(txtFct);
if(document.getElementById("selectAffichage3D").value == "points"){
var coordX, coordY, coordZ;
for(var x=this.left; x<this.right; x+=this.functionPrecision){
for(var y=this.left; y<this.right; y+=this.functionPrecision){
coordX = x;
coordY = y;
coordZ = func.f(x,y);
if(isNaN(coordZ)){
continue;
}
this.point3D(coordX, coordY, coordZ);
}
}
}
else{
var x1, y1, z1, x2, y2, z2, x3, y3, z3;
var x, y;
var valAngle = Math.round(this.angle/Math.PI);
if(valAngle%2==0){
for(var x1=this.left; x1<this.right; x1+=this.functionPrecision){
for(var y1=this.left; y1<this.right; y1+=this.functionPrecision){
x = x1;
y = y1;
z1 = func.f(x,y);
x2 = x1 + this.functionPrecision;
y2 = y1;
x = x2;
//y = y2;
z2 = func.f(x,y);
x3 = x2;
y3 = y2 + this.functionPrecision;
//x = x3
y = y3;
z3 = func.f(x,y);
x4 = x3 - this.functionPrecision;
y4 = y3;
x = x4;
//y = y4;
z4 = func.f(x,y);
if(isNaN(z1)||isNaN(z2)||isNaN(z3)||isNaN(z4)){
continue;
}
this.polygone3D(x1, y1, z1, x2, y2, z2, x3, y3, z3, x4, y4, z4);
}
}
}
else{
for(var x1=this.right; x1>this.left; x1-=this.functionPrecision){
for(var y1=this.right; y1>this.left; y1-=this.functionPrecision){
x = x1;
y = y1;
z1 = func.f(x,y);
x2 = x1 - this.functionPrecision;
y2 = y1;
x = x2;
//y = y2;
z2 = func.f(x,y);
x3 = x2;
y3 = y2 - this.functionPrecision;
//x = x3;
y = y3;
z3 = func.f(x,y);
x4 = x3 + this.functionPrecision;
y4 = y3;
x = x4;
//y = y4;
z4 = func.f(x,y);
if(isNaN(z1)||isNaN(z2)||isNaN(z3)||isNaN(z4)){
continue;
}
this.polygone3D(x1, y1, z1, x2, y2, z2, x3, y3, z3, x4, y4, z4);
}
}
}
}
// var tf = new Date().getTime();
// window.console.log(tf-ti);
},
// Dessine un point à la position (x, y, z)
point3D: function(x, y, z){
var posX = (Math.sin(this.angle)*x + Math.cos(this.angle)*y)*this.scale;
var posZ = -(z - Math.cos(this.angle)*x/2.6 + Math.sin(this.angle)*y/2.6)*this.scale;
function dessiner3D(eq){
initialise3D()
if(document.getElementById("selectAffichage3D").value == "points"){
var coordX, coordY, coordZ
for(var x=gauche3D; x<droite3D; x+=precisionFonction3D){
for(var y=gauche3D; y<droite3D; y+=precisionFonction3D){
coordX = x
coordY = y
coordZ = eval(eq)
if(isNaN(coordZ)){
continue
}
point3D(coordX, coordY, coordZ)
}
}
}
else{
var x1, y1, z1, x2, y2, z2, x3, y3, z3
var x, y
for(var x1=gauche3D; x1<droite3D; x1+=precisionFonction3D){
for(var y1=gauche3D; y1<droite3D; y1+=precisionFonction3D){
x = x1
y = y1
z1 = eval(eq)
x2 = x1 + precisionFonction3D
y2 = y1
x = x2
//y = y2
z2 = eval(eq)
x3 = x2
y3 = y2 + precisionFonction3D
//x = x3
y = y3
z3 = eval(eq)
x4 = x3 - precisionFonction3D
y4 = y3
x = x4
//y = y4
z4 = eval(eq)
if(isNaN(z1)||isNaN(z2)||isNaN(z3)||isNaN(z4)){
continue
}
polygone3D(x1, y1, z1, x2, y2, z2, x3, y3, z3, x4, y4, z4)
}
}
}
}
// Dessine un point à la position (x, y, z)
function point3D(x, y, z){
var posX = (Math.sin(angle)*x + Math.cos(angle)*y)*echelle3D
var posZ = -(z - Math.cos(angle)*x/2.6 + Math.sin(angle)*y/2.6)*echelle3D
var opacity = Math.round((1-((5+y*Math.sin(angle)-x*Math.cos(angle)) / 450)*echelle3D)*1000)/1000
var couleur = new Array()
couleur[0] = Math.round((5+z)*echelle3D)
couleur[1] = Math.round(510 - (5+z)*echelle3D)
couleur[2] = couleurGenerale
if(opacity > 1){
opacity = 1
}
if(opacity < 0){
opacity = 0
}
if(couleur[0] > 255){
couleur[0] = 255
}
if(couleur[0] < 0){
couleur[0] = 0
}
if(couleur[1] > 255){
couleur[1] = 255
}
if(couleur[1] < 0){
couleur[1] = 0
}
var opacity = Math.round((1-((5+y*Math.sin(this.angle)-x*Math.cos(this.angle)) / 450)*this.scale)*1000)/1000;
var couleur = new Array();
couleur[0] = Math.round((5+z)*this.scale);
couleur[1] = Math.round(510 - (5+z)*this.scale);
couleur[2] = this.couleurGenerale;
if(opacity > 1){ opacity = 1; }
if(opacity < 0){ opacity = 0; }
if(couleur[0] > 255){ couleur[0] = 255; }
if(couleur[0] < 0){ couleur[0] = 0; }
if(couleur[1] > 255){ couleur[1] = 255; }
if(couleur[1] < 0){ couleur[1] = 0; }
ctx.save()
ctx.translate(centreX, centreY)
ctx.scale(valeurZoom3D, valeurZoom3D)
ctx.fillStyle = "rgba("+couleur[rouge3D]+","+couleur[vert3D]+", "+couleur[bleu3D]+", "+opacity+")"
ctx.fillRect(posX-1, posZ-1, 2, 2)
ctx.restore()
}
// Dessine un polygone qui a comme sommets : (x1, y1, z1) , (x2, y2, z2), (x3, y3, z3) et (x4, y4, z4)
function polygone3D(x1, y1, z1, x2, y2, z2, x3, y3, z3, x4, y4, z4){
ctx.save()
ctx.translate(centreX, centreY)
ctx.scale(valeurZoom3D, valeurZoom3D)
ctx.beginPath()
ctx.moveTo((Math.sin(angle)*x1 + Math.cos(angle)*y1)*echelle3D , -(z1 - Math.cos(angle)*x1/2.6 + Math.sin(angle)*y1/2.6)*echelle3D)
ctx.lineTo((Math.sin(angle)*x2 + Math.cos(angle)*y2)*echelle3D , -(z2 - Math.cos(angle)*x2/2.6 + Math.sin(angle)*y2/2.6)*echelle3D)
ctx.lineTo((Math.sin(angle)*x3 + Math.cos(angle)*y3)*echelle3D , -(z3 - Math.cos(angle)*x3/2.6 + Math.sin(angle)*y3/2.6)*echelle3D)
ctx.lineTo((Math.sin(angle)*x4 + Math.cos(angle)*y4)*echelle3D , -(z4 - Math.cos(angle)*x4/2.6 + Math.sin(angle)*y4/2.6)*echelle3D)
var ctx = this.ctx;
ctx.save();
ctx.translate(this.centerX, this.centerY);
ctx.scale(this.zoomValue, this.zoomValue);
ctx.fillStyle = "rgba("+couleur[this.rouge3D]+","+couleur[this.vert3D]+", "+couleur[this.bleu3D]+", "+opacity+")";
ctx.fillRect(posX-1, posZ-1, 2, 2);
ctx.restore();
},
// Dessine un polygone qui a comme sommets : (x1, y1, z1) , (x2, y2, z2), (x3, y3, z3) et (x4, y4, z4)
polygone3D: function(x1, y1, z1, x2, y2, z2, x3, y3, z3, x4, y4, z4){
var ctx = this.ctx;
ctx.save();
ctx.translate(this.centerX, this.centerY);
ctx.scale(this.zoomValue, this.zoomValue);
ctx.beginPath();
ctx.moveTo((Math.sin(this.angle)*x1 + Math.cos(this.angle)*y1)*this.scale , -(z1 - Math.cos(this.angle)*x1/2.6 + Math.sin(this.angle)*y1/2.6)*this.scale);
ctx.lineTo((Math.sin(this.angle)*x2 + Math.cos(this.angle)*y2)*this.scale , -(z2 - Math.cos(this.angle)*x2/2.6 + Math.sin(this.angle)*y2/2.6)*this.scale);
ctx.lineTo((Math.sin(this.angle)*x3 + Math.cos(this.angle)*y3)*this.scale , -(z3 - Math.cos(this.angle)*x3/2.6 + Math.sin(this.angle)*y3/2.6)*this.scale);
ctx.lineTo((Math.sin(this.angle)*x4 + Math.cos(this.angle)*y4)*this.scale , -(z4 - Math.cos(this.angle)*x4/2.6 + Math.sin(this.angle)*y4/2.6)*this.scale);
var opacity = Math.round((1-((5+y1*Math.sin(angle)-x1*Math.cos(angle)) / 450)*echelle3D)*1000)/1000
var couleur = new Array()
couleur[0] = Math.round((5+z1)*echelle3D)
couleur[1] = Math.round(510 - (5+z1)*echelle3D)
couleur[2] = couleurGenerale
if(opacity > 1){
opacity = 1
}
if(opacity < 0){
opacity = 0
}
if(couleur[0] > 255){
couleur[0] = 255
}
if(couleur[0] < 0){
couleur[0] = 0
}
if(couleur[1] > 255){
couleur[1] = 255
}
if(couleur[1] < 0){
couleur[1] = 0
}
var opacity = Math.round((1-((5+y1*Math.sin(this.angle)-x1*Math.cos(this.angle)) / 450)*this.scale)*1000)/1000;
var couleur = new Array();
couleur[0] = Math.round((5+z1)*this.scale);
couleur[1] = Math.round(510 - (5+z1)*this.scale);
couleur[2] = this.couleurGenerale;
if(opacity > 1){ opacity = 1; }
if(opacity < 0){ opacity = 0; }
// for(var i=0; i<couleur.length; i++){
// couleur[i] -= parseInt((opacity*255));
// }
if(couleur[0] > 255){ couleur[0] = 255; }
if(couleur[0] < 0){ couleur[0] = 0; }
if(couleur[1] > 255){ couleur[1] = 255; }
if(couleur[1] < 0){ couleur[1] = 0; }
ctx.fillStyle = "rgba("+couleur[rouge3D]+","+couleur[vert3D]+", "+couleur[bleu3D]+", "+opacity+")"
ctx.closePath()
ctx.fill()
ctx.restore()
}
ctx.fillStyle = "rgba("+couleur[this.rouge3D]+","+couleur[this.vert3D]+", "+couleur[this.bleu3D]+", "+opacity+")";
ctx.strokeStyle = "rgba(0,0,0,0.1)";
ctx.closePath();
ctx.fill();
ctx.stroke();
ctx.restore();
},
// Dessine les axes
function axes(){
for(var i=-5; i<5; i+=precisionDroite3D){
point3D(0, 0, i)
}
for(var i=-5.5; i<5.5; i+=precisionDroite3D){
point3D(i, 0, 0)
}
for(var i=-5.5; i<5.5; i+=precisionDroite3D){
point3D(0, i, 0)
}
}
// Dessine les axes
axes: function(){
for(var i=-5; i<5; i+=this.linePrecision){
this.point3D(0, 0, i);
}
for(var i=-5.5; i<5.5; i+=this.linePrecision){
this.point3D(i, 0, 0);
}
for(var i=-5.5; i<5.5; i+=this.linePrecision){
this.point3D(0, i, 0);
}
},
function cube(x, y, z, r){
// Face de devant
for(var i=0; i<r; i+=precisionDroite3D){
point3D(x+i, y, z)
}
for(var i=0; i<r; i+=precisionDroite3D){
point3D(x+r, y+i, z)
}
for(var i=0; i<r; i+=precisionDroite3D){
point3D(x+r-i, y+r, z)
}
for(var i=0; i<r; i+=precisionDroite3D){
point3D(x, y+r-i, z)
}
// Face de derrière
for(var i=0; i<r; i+=precisionDroite3D){
point3D(x+i, y, z+r)
}
for(var i=0; i<r; i+=precisionDroite3D){
point3D(x+r, y+i, z+r)
}
for(var i=0; i<r; i+=precisionDroite3D){
point3D(x+r-i, y+r, z+r)
}
for(var i=0; i<r; i+=precisionDroite3D){
point3D(x, y+r-i, z+r)
}
// Arrêtes
for(var i=0; i<r; i+=precisionDroite3D){
point3D(x, y, z+i)
}
for(var i=0; i<r; i+=precisionDroite3D){
point3D(x, y+r, z+i)
}
for(var i=0; i<r; i+=precisionDroite3D){
point3D(x+r, y, z+i)
}
for(var i=0; i<r; i+=precisionDroite3D){
point3D(x+r, y+r, z+i)
}
}
cube: function(x, y, z, r){
// Face de devant
for(var i=0; i<r; i+=this.linePrecision){
this.point3D(x+i, y, z);
}
for(var i=0; i<r; i+=this.linePrecision){
this.point3D(x+r, y+i, z);
}
for(var i=0; i<r; i+=this.linePrecision){
this.point3D(x+r-i, y+r, z);
}
for(var i=0; i<r; i+=this.linePrecision){
this.point3D(x, y+r-i, z);
}
// Face de derrière
for(var i=0; i<r; i+=this.linePrecision){
this.point3D(x+i, y, z+r);
}
for(var i=0; i<r; i+=this.linePrecision){
this.point3D(x+r, y+i, z+r);
}
for(var i=0; i<r; i+=this.linePrecision){
this.point3D(x+r-i, y+r, z+r);
}
for(var i=0; i<r; i+=this.linePrecision){
this.point3D(x, y+r-i, z+r);
}
// Arrêtes
for(var i=0; i<r; i+=this.linePrecision){
this.point3D(x, y, z+i);
}
for(var i=0; i<r; i+=this.linePrecision){
this.point3D(x, y+r, z+i);
}
for(var i=0; i<r; i+=this.linePrecision){
this.point3D(x+r, y, z+i);
}
for(var i=0; i<r; i+=this.linePrecision){
this.point3D(x+r, y+r, z+i);
}
},
// Change les couleurs de l'affichage 3D et affiche l'aperçu de celles-ci.
checkCouleurs3D: function(){
var rouge, vert, bleu;
var sensRouge, sensVert, sensBleu;
var precisionApercu = 64;
this.couleurGenerale = parseInt(document.getElementById("couleur3Dgenerale").value);
if(!this.couleurGenerale){
this.couleurGenerale = 0;
}
if(this.couleurGenerale < 0){
this.couleurGenerale = 0;
}
if(this.couleurGenerale > 255){
this.couleurGenerale = 255;
}
switch(document.getElementById("selectRouge3D").value){
case "plus":
this.rouge3D = 0;
rouge = 255;
sensRouge = -1;
break;
case "moins":
this.rouge3D = 1;
rouge = 0;
sensRouge = 1;
break;
case "tout":
this.rouge3D = 2;
rouge = this.couleurGenerale;
sensRouge = 0;
break;
}
switch(document.getElementById("selectVert3D").value){
case "plus":
this.vert3D = 0;
vert = 255;
sensVert = -1;
break;
case "moins":
this.vert3D = 1;
vert = 0;
sensVert = 1;
break;
case "tout":
this.vert3D = 2;
vert = this.couleurGenerale;
sensVert = 0;
break;
}
switch(document.getElementById("selectBleu3D").value){
case "plus":
this.bleu3D = 0;
bleu = 255;
sensBleu = -1;
break;
case "moins":
this.bleu3D = 1;
bleu = 0;
sensBleu = 1;
break;
case "tout":
this.bleu3D = 2;
bleu = this.couleurGenerale;
sensBleu = 0;
break;
}
document.getElementById("apercuCouleur3D").innerHTML = "<span style='background-color:rgba("+rouge+","+vert+","+bleu+",1);color:rgba(0,0,0,0);'>.</span>";
for(var i=0; i<precisionApercu; i++){
rouge = rouge + sensRouge*(256/precisionApercu);
vert = vert + sensVert*(256/precisionApercu);
bleu = bleu + sensBleu*(256/precisionApercu);
document.getElementById("apercuCouleur3D").innerHTML = document.getElementById("apercuCouleur3D").innerHTML + "<span style='background-color:rgba("+rouge+","+vert+","+bleu+",1);color:rgba(0,0,0,0);'>.</span>";
}
if(this.ctx){
this.draw();
}
},
zoom: function(value){
if(!fonction3D){
return;
}
this.zoomValue *= value;
this.left /= value;
this.right /= value;
this.functionPrecision /= value;
this.linePrecision /= value;
//alert(this.zoomValue+" ; "+this.left+" ; "+this.right+" ; "+this.functionPrecision+" ; "+this.linePrecision);
this.draw();
},
move: function(value){
this.angle += Math.PI/32 * value;
this.draw();
},
initZoom: function(){
this.angle = Math.PI/8;
this.zoomValue = 1;
this.left = -6.5;
this.right = 6.5;
this.draw();
}
};
// Change les couleurs de l'affichage 3D et affiche l'aperçu de celles-ci.
function checkCouleurs3D(){
var rouge, vert, bleu
var sensRouge, sensVert, sensBleu
var precisionApercu = 64
couleurGenerale = parseInt(document.getElementById("couleur3Dgenerale").value)
if(!couleurGenerale){
couleurGenerale = 0
}
if(couleurGenerale < 0){
couleurGenerale = 0
}
if(couleurGenerale > 255){
couleurGenerale = 255
}
switch(document.getElementById("selectRouge3D").value){
case "plus":
rouge3D = 0
rouge = 255
sensRouge = -1
break
case "moins":
rouge3D = 1
rouge = 0
sensRouge = 1
break
case "tout":
rouge3D = 2
rouge = couleurGenerale
sensRouge = 0
break
}
switch(document.getElementById("selectVert3D").value){
case "plus":
vert3D = 0
vert = 255
sensVert = -1
break
case "moins":
vert3D = 1
vert = 0
sensVert = 1
break
case "tout":
vert3D = 2
vert = couleurGenerale
sensVert = 0
break
}
switch(document.getElementById("selectBleu3D").value){
case "plus":
bleu3D = 0
bleu = 255
sensBleu = -1
break
case "moins":
bleu3D = 1
bleu = 0
sensBleu = 1
break
case "tout":
bleu3D = 2
bleu = couleurGenerale
sensBleu = 0
break
}
document.getElementById("apercuCouleur3D").innerHTML = "<span style='background-color:rgba("+rouge+","+vert+","+bleu+",1);color:rgba(0,0,0,0);'>.</span>"
for(var i=0; i<precisionApercu; i++){
rouge = rouge + sensRouge*(256/precisionApercu)
vert = vert + sensVert*(256/precisionApercu)
bleu = bleu + sensBleu*(256/precisionApercu)
document.getElementById("apercuCouleur3D").innerHTML = document.getElementById("apercuCouleur3D").innerHTML + "<span style='background-color:rgba("+rouge+","+vert+","+bleu+",1);color:rgba(0,0,0,0);'>.</span>"
}
}
function zoom3D(valeur){
valeurZoom3D *= valeur
gauche3D /= valeur
droite3D /= valeur
precisionFonction3D /= valeur
precisionDroite3D /= valeur
//alert(valeurZoom3D+" ; "+gauche3D+" ; "+droite3D+" ; "+precisionFonction3D+" ; "+precisionDroite3D)
actualiserGraph()
}
\ No newline at end of file
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%">
<script type="text/javascript">
<![CDATA[
top.svg = {
cursorX : 50,
cursorY : 50,
fillStyle : "blue",
fillOpacity : 1,
strokeStyle : "red",
strokeOpacity : 1,
lineWidth : 1,
moveTo : function(x, y){
this.cursorX = x;
this.cursorY = y;
},
lineTo : function(x, y){
var newLine = document.createElementNS("http://www.w3.org/2000/svg", "line");
newLine.setAttribute("x1", this.cursorX);
newLine.setAttribute("y1", this.cursorY);
newLine.setAttribute("x2", x);
newLine.setAttribute("y2", y);
newLine.setAttribute("stroke", this.strokeStyle);
newLine.setAttribute("stroke-width", this.lineWidth);
newLine.setAttribute("stroke-opacity", this.strokeOpacity);
document.getElementById("affichageSVG").appendChild(newLine);
this.moveTo(x, y);
},
beginPath : function(){
this.moveTo(0,0);
},
stroke : function(){
// rien
},
fill : function(){
// rien
},
clearRect : function(){
var element = document.getElementById("affichageSVG");
if(element.hasChildNodes()){
while(element.childNodes.length >= 1 ){
element.removeChild(element.firstChild);
}
}
},
fillRect : function(x, y, l, h){
if(h<0){
h = Math.abs(h);
y -= h;
}
if(l<0){
l = Math.abs(l);
x -= l;
}
var newRect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
newRect.setAttribute("x", x);
newRect.setAttribute("y", y);
newRect.setAttribute("width", l);
newRect.setAttribute("height", h);
newRect.setAttribute("fill", this.fillStyle);
newRect.setAttribute("fill-opacity", this.fillOpacity);
document.getElementById("affichageSVG").appendChild(newRect);
},
arc : function(cx, cy, r){
var newCircle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
newCircle.setAttribute("cx", cx);
newCircle.setAttribute("cy", cy);
newCircle.setAttribute("r", r);
newCircle.setAttribute("fill", this.fillStyle);
newCircle.setAttribute("fill-opacity", this.fillOpacity);
document.getElementById("affichageSVG").appendChild(newCircle);
},
fillText : function(txt, x, y){
var newText = document.createElementNS("http://www.w3.org/2000/svg", "text");
newText.setAttribute("x", x);
newText.setAttribute("y", y);
newText.setAttribute("fill", this.fillStyle);
newText.setAttribute("fill-opacity", 0.6);
newText.setAttribute("style", "font-size: 14px;");
newText.textContent = txt;
document.getElementById("affichageSVG").appendChild(newText);
}
}
]]>
</script>
<g id="affichageSVG">
</g>
</svg>
\ No newline at end of file
// ------------------ SVG et canvas ------------------
// Cette fonction calcule tous les points de la fonction mathématique.
// Elle place chaque coordonnée "x" et "y" dans les tableaux "pointX" et "pointY"
// A la fin, elle choisi la méthode d'affichage entre :
// 1) une seule image SVG
// 2) plusieurs images SVG
function evaluerSVG(eq) {
borneXGauche = parseFloat(document.getElementById("borneXGauche").value)
borneXDroite = parseFloat(document.getElementById("borneXDroite").value)
borneYGauche = parseFloat(document.getElementById("borneYGauche").value)
borneYDroite = parseFloat(document.getElementById("borneYDroite").value)
multiplicateurX = largeur/Math.abs(borneXDroite - borneXGauche)
multiplicateurY = hauteur/Math.abs(borneYDroite - borneYGauche)
lineWidth = document.getElementById("inputTaille").value
var i = 0
var y1, p1
for(x=borneXGauche; x<=(borneXDroite+5*precision); x=x+precision){
y = eval(eq)
if(!isNaN(y)){
i++
pointX[i] = (x - borneXGauche) * multiplicateurX
pointY[i] = hauteur - ((y - borneYGauche) * multiplicateurY)
pente[i] = hauteur - (((y-y1)/precision - borneYGauche)* multiplicateurY)
pente2[i] = hauteur - ((((y-y1)/precision-p1)/precision - borneYGauche)* multiplicateurY)
p1 = (y-y1)/precision
y1 = y
}
}
pente[1]=pente[2]
pente2[2]=pente2[3]
pente2[1]=pente2[2]
//alert(pointX+'\n'+pointY)
if(document.getElementById("selectMethodeAffichage").value == "svg2"){
calculerGraphSVG2(i)
}
else{
calculerGraphSVG(i)
}
}
// Même fonction mais pour dessiner à l'aide de canvas
function evaluerCanvas(eq) {
borneXGauche = parseFloat(document.getElementById("borneXGauche").value)
borneXDroite = parseFloat(document.getElementById("borneXDroite").value)
borneYGauche = parseFloat(document.getElementById("borneYGauche").value)
borneYDroite = parseFloat(document.getElementById("borneYDroite").value)
multiplicateurX = largeur/Math.abs(borneXDroite - borneXGauche)
multiplicateurY = hauteur/Math.abs(borneYDroite - borneYGauche)
lineWidth = document.getElementById("inputTaille").value
var i = 0
var y1, p1
for(x=borneXGauche; x<=(borneXDroite+5*precision); x=x+precision){
y = eval(eq)
i++
if(!isNaN(y)){
pointX[i] = (x - borneXGauche) * multiplicateurX
pointY[i] = hauteur - ((y - borneYGauche) * multiplicateurY)
pente[i] = hauteur - (((y-y1)/precision - borneYGauche)* multiplicateurY)
pente2[i] = hauteur - ((((y-y1)/precision-p1)/precision - borneYGauche)* multiplicateurY)
p1 = (y-y1)/precision
y1 = y
}
else{
pointX[i] = "undefined"
pointY[i] = "undefined"
pente[i] = "undefined"
pente2[i] = "undefined"
}
}
pente[1]=pente[2]
pente2[2]=pente2[3]
pente2[1]=pente2[2]
calculerGraphCanevas(i)
}
// ---- SVG (une image) ----
// Génère le code HTML qui permet d'afficher le graphique et le place dans la div "affichage"
function calculerGraphSVG2(fin){
image = ""
for (i=1; i<fin; i++){
image = image + '<line x1="'+pointX[i]+'" y1="'+pointY[i]+'" x2="'+pointX[i+1]+'" y2="'+pointY[i+1]+'" style="stroke:'+couleurFonction+';stroke-width:2;"/>'
}
graphique = '<line x1="'+(-borneXGauche*multiplicateurX)+'" y1="'+0+'" x2="'+(-borneXGauche*multiplicateurX)+'" y2="'+hauteur+'" style="stroke:rgb(0,0,0);stroke-width:2;opacity:0.3;"/>'
graphique = graphique + '<line x1="'+0+'" y1="'+(hauteur-(-borneYGauche*multiplicateurY))+'" x2="'+largeur+'" y2="'+(hauteur-(-borneYGauche*multiplicateurY))+'" style="stroke:rgb(0,0,0);stroke-width:2;opacity:0.3;"/>'
image = '<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">'+image+graphique+'</svg> '
document.getElementById("affichage").innerHTML = image
//alert(image)
}
// ---- SVG (images multiples) ----
// Créé les différents éléments pour dessiner la fonction mathématique
// et les place dans la div "affichage"
function calculerGraphSVG(fin){
document.getElementById("affichage").innerHTML = ""
svg = document.createElementNS("http://www.w3.org/2000/svg", "svg")
svg.setAttribute("width", "100%")
svg.setAttribute("height", "100%")
for (i=1; i<fin; i++){
if ((pointY[i]<0) && (pointY[i+1]>hauteur)){
i++
}
if ((pointY[i]>hauteur) && (pointY[i+1]<0)){
i++
}
var ligne = document.createElementNS("http://www.w3.org/2000/svg", "line")
ligne.setAttribute("x1", pointX[i]+decalageX)
ligne.setAttribute("x2", pointX[i+1]+decalageX)
ligne.setAttribute("y1", pointY[i]+decalageY)
ligne.setAttribute("y2", pointY[i+1]+decalageY)
ligne.setAttribute("stroke", couleurFonction)
ligne.setAttribute("stroke-width", lineWidth)
svg.appendChild(ligne)
}
// dérivée
if(document.getElementById("checkDerivee").checked){
for (i=1; i<fin; i++){
var ligne = document.createElementNS("http://www.w3.org/2000/svg", "line")
ligne.setAttribute("x1", pointX[i]+decalageX)
ligne.setAttribute("x2", pointX[i+1]+decalageX)
ligne.setAttribute("y1", pente[i]+decalageY)
ligne.setAttribute("y2", pente[i+1]+decalageY)
ligne.setAttribute("stroke", "white")
ligne.setAttribute("stroke-width", lineWidth)
ligne.setAttribute("opacity", "0.8")
svg.appendChild(ligne)
}
}
if(document.getElementById("checkAxes").checked){
calculerAxes()
}
calculerGrilleEchelle()
document.getElementById("affichage").appendChild(svg)
}
// axes
function calculerAxes(){
var ligne = document.createElementNS("http://www.w3.org/2000/svg", "line")
ligne.setAttribute("x1", (-borneXGauche*multiplicateurX)+decalageX)
ligne.setAttribute("y1", 0+decalageY)
ligne.setAttribute("x2", (-borneXGauche*multiplicateurX)+decalageX)
ligne.setAttribute("y2", hauteur+decalageY)
ligne.setAttribute("stroke", "rgb(0,0,0)")
ligne.setAttribute("stroke-width", "2")
ligne.setAttribute("opacity", "0.3")
svg.appendChild(ligne)
var ligne = document.createElementNS("http://www.w3.org/2000/svg", "line")
ligne.setAttribute("x1", 0+decalageX)
ligne.setAttribute("y1", (hauteur-(-borneYGauche*multiplicateurY))+decalageY)
ligne.setAttribute("x2", largeur+decalageX)
ligne.setAttribute("y2", (hauteur-(-borneYGauche*multiplicateurY))+decalageY)
ligne.setAttribute("stroke", "rgb(0,0,0)")
ligne.setAttribute("stroke-width", "2")
ligne.setAttribute("opacity", "0.3")
svg.appendChild(ligne)
}
// grille et échelle
function calculerGrilleEchelle(){
var intervalX = Math.round(Math.abs(borneXGauche-borneXDroite)/10)
var intervalY = Math.round(Math.abs(borneYGauche-borneYDroite)/10)
var initialX = Math.round(-borneXGauche) % intervalX
var initialY = Math.round(-borneYGauche) % intervalY
for(var i=initialX;i<=Math.round(borneXDroite-borneXGauche);i=i+intervalX){
var position = Math.round((Math.round(borneXGauche) - borneXGauche +i) * multiplicateurX)
if(document.getElementById("checkGrille").checked){
var grille = document.createElementNS("http://www.w3.org/2000/svg", "line")
grille.setAttribute("x1", position)
grille.setAttribute("y1", 0)
grille.setAttribute("x2", position)
grille.setAttribute("y2", hauteur)
grille.setAttribute("stroke", "rgb(0,0,0)")
grille.setAttribute("stroke-width", "2")
grille.setAttribute("opacity", "0.05")
svg.appendChild(grille)
}
if(document.getElementById("checkEchelle").checked){
var txt = document.createElementNS("http://www.w3.org/2000/svg", "text")
txt.appendChild(document.createTextNode(i+borneXGauche))
txt.setAttribute("x", position-6)
txt.setAttribute("y", (hauteur-(-borneYGauche*multiplicateurY))+decalageY-2)
txt.setAttribute("fill-opacity", 0.6)
txt.setAttribute("fill", couleurEchelle)
svg.appendChild(txt)
}
}
for(var i=initialY;i<=Math.round(borneYDroite-borneYGauche);i=i+intervalY){
var position = hauteur - Math.round((Math.round(borneYGauche) - borneYGauche +i) * multiplicateurY)
if(document.getElementById("checkGrille").checked){
var grille = document.createElementNS("http://www.w3.org/2000/svg", "line")
grille.setAttribute("x1", 0)
grille.setAttribute("y1", position)
grille.setAttribute("x2", largeur)
grille.setAttribute("y2", position)
grille.setAttribute("stroke", "rgb(0,0,0)")
grille.setAttribute("stroke-width", "2")
grille.setAttribute("opacity", "0.05")
svg.appendChild(grille)
}
if(document.getElementById("checkEchelle").checked){
var txt = document.createElementNS("http://www.w3.org/2000/svg", "text")
txt.appendChild(document.createTextNode(i+borneYGauche))
txt.setAttribute("x", (-borneXGauche*multiplicateurX)+decalageX+2)
txt.setAttribute("y", position+6)
txt.setAttribute("fill-opacity", 0.6)
txt.setAttribute("fill", couleurEchelle)
svg.appendChild(txt)
}
}
}
// ---- Canevas ----
// Permet de générer le code HTML nécessaire à canvas et dessine la fonction
// à l'aide de lignes dans la zone de canvas.
function calculerGraphCanevas(fin){
document.getElementById("affichage").innerHTML = '<canvas id="canvas" width="'+largeur+'" height="'+hauteur+'"></canvas>'
ctx = document.getElementById('canvas').getContext('2d')
var undefined = true
// Autres fonctions
for(var i=0; i<listeFonctions.length; i++){
ctx.beginPath()
x = borneXGauche-3*precision
y = eval(listeFonctions[i])
if(isNaN(y)){
ctx.moveTo(x, 0)
}
else{
ctx.moveTo(x, y)
}
ctx.strokeStyle = listeCouleurs[i]
ctx.fillStyle = listeCouleurs[i]
ctx.lineWidth = lineWidth
for(x=borneXGauche-2*precision; x<=(borneXDroite+2*precision); x+=precision){
y = eval(listeFonctions[i])
if(!isNaN(y)){
ctx.lineTo((x - borneXGauche) * multiplicateurX+decalageX, hauteur - ((y - borneYGauche) * multiplicateurY)+decalageY)
/*pente[i] = hauteur - ((10*(y-y1) - borneYGauche) * multiplicateurY)*/
}
}
ctx.stroke()
}
// aire sous la fonctions
if(document.getElementById("checkAire").checked){
ctx.strokeStyle = "rgba(255,255,255,0)";
ctx.fillStyle = "rgba(0,180,255,0.3)";
var a = parseInt(document.getElementById("aireG").value);
var b = parseInt(document.getElementById("aireD").value);
var fct = document.getElementById("inputEq").value;
var f = function(x){
return eval(fct);
};
var convertX = function(nbr){
return (nbr - borneXGauche) * multiplicateurX;
};
var convertY = function(nbr){
return hauteur - ((nbr - borneYGauche) * multiplicateurY)
};
var n = 5000/(borneXDroite-borneXGauche);
var aire, largeurRect, gaucheRect, droiteRect, millieuRect, hauteurRect, aireRect;
aire = 0;
largeurRect = (b-a)/n;
for(var i=0; i<n; i++){
gaucheRect = a + i*largeurRect;
droiteRect = a + (i+1)*largeurRect;
millieuRect = (gaucheRect+droiteRect) / 2;
hauteurRect = f(millieuRect);
//aireRect = largeurRect * hauteurRect;
//aire = aire + aireRect;
try{
ctx.fillRect(convertX(gaucheRect), convertY(hauteurRect), 2, hauteurRect*multiplicateurY);
}
catch(err){
}
}
}
// fonction
ctx.beginPath()
//ctx.moveTo(pointX[1]+decalageX, pointY[1]+decalageY)
ctx.strokeStyle = couleurFonction
ctx.fillStyle = couleurFonction
ctx.lineWidth = lineWidth
if(document.getElementById("selectMethodeAffichage").value == "canvas"){
for (i=1; i<fin; i++){
if(isNaN(pointX[i]) || isNaN(pointY[i])){
undefined = true
}
else{
if(undefined){
ctx.moveTo(pointX[i]+decalageX, pointY[i]+decalageY)
}
undefined = false
ctx.lineTo(pointX[i]+decalageX, pointY[i]+decalageY)
}
}
ctx.stroke()
}
else{
for (i=1; i<fin; i++){
if(!isNaN(pointX[i]) && !isNaN(pointY[i])){
ctx.moveTo(pointX[i]+decalageX, pointY[i]+decalageY)
ctx.arc(pointX[i]+decalageX, pointY[i]+decalageY, lineWidth/2, 0, 2*Math.PI, false)
}
}
ctx.fill()
//ctx.stroke()
}
// dérivée première
if(document.getElementById("checkDerivee").checked){
undefined = true
ctx.beginPath()
ctx.strokeStyle = "rgba(255, 255, 255, 0.8)"
ctx.fillStyle = "rgba(255, 255, 255, 0.8)"
ctx.lineWidth = lineWidth
//ctx.moveTo(pointX[1]+decalageX, pente[1]+decalageY)
for (i=1; i<fin; i++){
if(isNaN(pointX[i]) || isNaN(pente[i])){
undefined = true
}
else{
if(undefined){
try{
ctx.moveTo(pointX[i]+decalageX, pente[i]+decalageY)
}
catch(err){
//alert(";"+pente[i]+" ; "+pointX[i])
}
}
undefined = false
try{
ctx.lineTo(pointX[i]+decalageX, pente[i]+decalageY)
}
catch(err){
//alert(pente[i]+" ; "+pointX[i])
}
}
}
ctx.stroke()
}
// dérivée seconde
if(document.getElementById("checkDerivee2").checked){
undefined = true
ctx.beginPath()
ctx.strokeStyle = "rgba(150, 150, 150, 0.8)"
ctx.fillStyle = "rgba(150, 150, 150, 0.8)"
ctx.lineWidth = lineWidth
//ctx.moveTo(pointX[1]+decalageX, pente2[1]+decalageY)
for (i=1; i<fin-1; i++){
if(isNaN(pointX[i]) || isNaN(pente2[i])){
undefined = true
}
else{
if(undefined){
try{
ctx.moveTo(pointX[i+2]+decalageX, pente2[i+2]+decalageY)
}
catch(err){
}
}
undefined = false
try{
ctx.lineTo(pointX[i+2]+decalageX, pente2[i+2]+decalageY)
}
catch(err){
}
}
}
ctx.stroke()
}
// grille et échelle
var intervalX = Math.round(Math.abs(borneXGauche-borneXDroite)/10)
var intervalY = Math.round(Math.abs(borneYGauche-borneYDroite)/10)
var initialX = Math.round(-borneXGauche) % intervalX
var initialY = Math.round(-borneYGauche) % intervalY
ctx.beginPath()
ctx.fillStyle = couleurEchelle
ctx.lineWidth = "2"
for(var i=initialX;i<=Math.round(borneXDroite-borneXGauche);i=i+intervalX){
var position = Math.round((Math.round(borneXGauche) - borneXGauche +i) * multiplicateurX)
if(document.getElementById("checkGrille").checked){
ctx.moveTo(position, 0)
ctx.lineTo(position, hauteur)
}
if(document.getElementById("checkEchelle").checked){
ctx.fillText(Math.ceil(i+borneXGauche), position-6, (hauteur-(-borneYGauche*multiplicateurY))+decalageY-2)
}
}
for(var i=initialY;i<=Math.round(borneYDroite-borneYGauche);i=i+intervalY){
var position = hauteur - Math.round((Math.round(borneYGauche) - borneYGauche +i) * multiplicateurY)
if(document.getElementById("checkGrille").checked){
ctx.moveTo(0, position)
ctx.lineTo(largeur, position)
}
if(document.getElementById("checkEchelle").checked){
ctx.fillText(Math.ceil(i+borneYGauche), (-borneXGauche*multiplicateurX)+decalageX+2, position+6)
}
}
ctx.strokeStyle = couleurGrille
ctx.stroke()
// axes
if(document.getElementById("checkAxes").checked){
ctx.beginPath()
ctx.strokeStyle = couleurAxes
ctx.lineWidth = "2"
ctx.moveTo((-borneXGauche*multiplicateurX)+decalageX, 0+decalageY)
ctx.lineTo((-borneXGauche*multiplicateurX)+decalageX, hauteur+decalageY)
ctx.moveTo(0+decalageX, (hauteur-(-borneYGauche*multiplicateurY))+decalageY)
ctx.lineTo(largeur+decalageX, (hauteur-(-borneYGauche*multiplicateurY))+decalageY)
ctx.stroke()
}
}
// -------------------- Uniboard --------------------
// Ces fonctions permettent de dessiner le graphique directement dans Uniboard.
// -------------------- sankore --------------------
// Ces fonctions permettent de dessiner le graphique directement dans sankore.
function colorToHex(color) {
var addZero = function(myString){
if (myString.length == 1) return "0" + myString;
else return myString;
}
var digits = /(.*?)rgb\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)/.exec(color);
if (digits == null){
digits = /(.*?)rgba\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)/.exec(color);
}
if(digits == null){
return "";
}
var red = parseInt(digits[2]);
var green = parseInt(digits[3]);
var blue = parseInt(digits[4]);
var hexcode = addZero(red.toString(16)) + addZero(green.toString(16)) + addZero(blue.toString(16));
return '#' + hexcode.toUpperCase();
}
// Calcule tous les points de la fonction mathématique et les place dans des tableaux.
function evaluerUniboard(eq) {
largeur += 100
hauteur += 100
decalageX -= 250
decalageY -= 200
borneXGauche = parseFloat(document.getElementById("borneXGauche").value)
borneXDroite = parseFloat(document.getElementById("borneXDroite").value)
borneYGauche = parseFloat(document.getElementById("borneYGauche").value)
borneYDroite = parseFloat(document.getElementById("borneYDroite").value)
multiplicateurX = (largeur)/Math.abs(borneXDroite - borneXGauche)
multiplicateurY = (hauteur)/Math.abs(borneYDroite - borneYGauche)
lineWidth = document.getElementById("inputTaille").value
var i = 0
function initUniboard(){
if(!window.uniboard && window.sankore){
uniboard = sankore;
}
uniboard.centerOn(337,245);
// uniboard.setTool("pen");
// Paramètres par défaut
uniboard.lineWidth = 1;
uniboard.fillStyle = "black";
uniboard.strokeStyle = "black";
// Position du curseur pour écrire des nombres
uniboard.cursorX = 0;
uniboard.cursorY = 0;
// Fonctions
uniboard.strokeColor = function(){
this.setPenColor(colorToHex(this.strokeStyle));
};
uniboard.fillColor = function(){
this.setPenColor(colorToHex(this.fillStyle));
};
uniboard.lineTo = function(x, y){
if(y>-20 && y<affichage.hauteur+20){
this.strokeColor();
this.drawLineTo(x, y, this.lineWidth/2);
}
};
uniboard.arc = function(x, y, r){
this.fillColor();
this.moveTo(x, y);
this.drawLineTo(x, y, r*2);
};
uniboard.clearRect = function(x, y, width, height){
if(height<0){
height = Math.abs(height);
y -= height;
}
if(width<0){
width = Math.abs(width);
x -= width;
}
this.moveTo(x, y)
this.eraseLineTo(x+width, y+height, this.lineWidth);
};
uniboard.fillRect = function(x, y, width, height){
this.fillColor();
if(height<0){
height = Math.abs(height);
y -= height;
}
if(width<0){
width = Math.abs(width);
x -= width;
}
this.moveTo(x, y)
this.drawLineTo(x+width, y+height, this.lineWidth);
};
uniboard.fillText = function(txt, x, y){
// TODO
this.fillNumber(txt, x, y);
};
uniboard.beginPath = function(){
this.moveTo(0, 0);
};
uniboard.fill = function(){};
uniboard.stroke = function(){};
uniboard.fillNumber = function(nbr, x, y){
var w = 5;
var number = "" + nbr;
if(!x || !y){
x = this.cursorX;
y = this.cursorY;
}
else{
x += 3;
y -= 12;
}
this.moveTo(x, y);
this.fillColor();
var move = function(){
uniboard.moveTo(x, y);
};
var draw = function(){
uniboard.drawLineTo(x, y, uniboard.lineWidth)
};
var space = function(){
x += 2*w/3;
move();
};
for(var i=0; i<number.length; i++){
switch(number.charAt(i)){
case "1":
y += w
move()
x += w
y -= w
draw()
y += 2*w
draw()
y -= 2*w
space()
break;
case "2":
x += w
draw()
y += w
draw()
x -= w
draw()
y += w
draw()
x += w
draw()
y -= 2*w
space()
break;
case "3":
x += w
draw()
y += w
draw()
x -= w
draw()
x += w
move()
y += w
draw()
x -= w
draw()
y -= 2*w
x += w
space()
break;
case "4":
y += w
draw()
x += w
draw()
y -= w
draw()
y += w
move()
y += w
draw()
y -= 2*w
space()
break;
case "5":
x += w
move()
x -= w
draw()
y += w
draw()
x += w
draw()
y += w
draw()
x -= w
draw()
x += w
y -= 2*w
space()
break;
case "6":
x += w
move()
x -= w
draw()
y += w
draw()
x += w
draw()
y += w
draw()
x -= w
draw()
y -= w
draw()
x += w
y -= w
space()
break;
case "7":
x += w
draw()
x -= w/2
y += 2*w
draw()
x += w/2
y -= 2*w
space()
break;
case "8":
x += w
draw()
y += 2*w
draw()
x -= w
draw()
y -= 2*w
draw()
y += w
move()
x += w
draw()
y -= w
move()
space()
break;
case "9":
x += w
move()
x -= w
draw()
y += w
draw()
x += w
draw()
y += w
draw()
x -= w
draw()
y -= w
x += w
move()
y -= w
draw()
space()
break;
case "0":
x += w
draw()
y += 2*w
draw()
x -= w
draw()
y -= 2*w
draw()
x += w
move()
space()
break;
case "-":
y += w
move()
x += w
draw()
y -= w
move()
space()
break;
default: // Nombre inconnu
// this.showMessage("Error : "+number.charAt(i)+" isn't a number");
}
}
this.cursorX = x;
this.cursorY = y;
// this.showMessage(number);
BoucleFor: for(x=borneXGauche; x<=(borneXDroite+0); x=x+precision){
i++
y = eval(eq)
pointX[i] = Math.round((x - borneXGauche) * multiplicateurX)
pointY[i] = hauteur - Math.round((y - borneYGauche) * multiplicateurY)
}
calculerGraphUniboard(i)
}
}
// Regarde chaque coordonnées stockées dans le tableau et dessine le graphique
function calculerGraphUniboard(fin){
document.getElementById("affichage").innerHTML = ""
sankore.setTool('pen')
sankore.moveTo(pointX[2]+decalageX, pointY[2]+decalageY)
for (i=3; i<fin; i++){
if ((pointY[i]<0) || (pointY[i]>hauteur)){
sankore.moveTo(pointX[i+1]+decalageX,pointY[i+1]+decalageY)
continue
}
sankore.drawLineTo(pointX[i]+decalageX, pointY[i]+decalageY, lineWidth)
}
//dessiner le cadre
sankore.moveTo(0+decalageX,0+decalageY)
sankore.drawLineTo(largeur+decalageX, 0+decalageY, lineWidth)
sankore.drawLineTo(largeur+decalageX, hauteur+decalageY, lineWidth)
sankore.drawLineTo(0+decalageX, hauteur+decalageY, lineWidth)
sankore.drawLineTo(0+decalageX, 0+decalageY, lineWidth)
//dessiner les axes
sankore.moveTo((-borneXGauche*multiplicateurX)+decalageX, 0+decalageY)
sankore.drawLineTo((-borneXGauche*multiplicateurX)+decalageX, hauteur+decalageY, lineWidth)
sankore.moveTo(0+decalageX, (hauteur-(-borneYGauche*multiplicateurY))+decalageY)
sankore.drawLineTo(largeur+decalageX, (hauteur-(-borneYGauche*multiplicateurY))+decalageY, lineWidth)
decalageX += 250
decalageY += 200
largeur -= 100
hauteur -= 100
sankore.setTool('arrow')
}
\ No newline at end of file
// -------------------- XPM --------------------
// Diverses fonctions permettant de dessiner la fonction mathématique à
// l'aide d'une image au format XPM
// Permet de calculer tous les points de l'image et de les placer dans un tableau.
// Chaque "case" du tableau est un point de l'image.
// Plus tard, chaque pixel de l'image correspondra a une case du tableau.
// Le pixel sera blanc si la "case" vaut 0 et sera noir si la "case" vaut 1
function evaluerXPM(eq){
tableauUni(0)
var y = 0
BoucleFor: for (x=0; x<largeur; x++){
y = Math.round(eval(eq))
if (y>hauteur-1){ break BoucleFor }
tableau[y][x] = 1
}
tableau.reverse()
graphique = ""
calculerGraphXPM()
}
// Permet de remplir le tableau avec uniquement des 1 ou des 0.
// (pour que l'image soit toute blanche ou toute noir)
function tableauUni(valeurCouleur){
for (i=0; i<hauteur; i++){
ligne = new Array()
for (k=0; k<largeur; k++){
ligne.push(valeurCouleur)
}
tableau[i] = ligne
}
graphique = ""
calculerGraphXPM()
}
// Cette fonction regarde chaque "case" du tableau.
// Elle permet de générer le texte ASCII de l'image XPM.
function calculerGraphXPM() {
graphique = graphique + '"'
for (i=0; i<largeur; i++){
switch (tableau[j][i]){
case 1:
graphique = graphique + ' '
break
default:
graphique = graphique + '.'
break
}
}
j++
graphique = graphique + '",'
if (j == hauteur){
afficherGraphXPM()
j = 0
return true
}
calculerGraphXPM()
}
// Cette fonction génére le code HTML nécessaire à afficher l'image XPM.
// Elle place ce code dans la div "affichage" ce qui permet d'afficher le graphique.
function afficherGraphXPM(){
image = "<img src='data:image/xpm;ASCII,"+'/* XPM */static char * test_xpm[] = {"'+largeur+' '+hauteur+' 2 1"," c #000000",". c #FFFFFF",' + graphique + "};'"+" />"
document.getElementById("affichage").innerHTML = image
}
\ No newline at end of file
function CartesianFunction(txtFct){
this.setFct = function(txt){
this.fct = txt;
this.f = new Function("x", "y", "return "+this.fct);
}
if(txtFct){
this.setFct(txtFct);
}
this.couleur = fct.couleur;
this.width = document.getElementById("inputTaille").value;
this.aire = document.getElementById("checkAire").checked ? true : false;
this.derivee1 = document.getElementById("checkDerivee1").checked ? true : false;
this.couleurDerivee1 = "rgba(255,128,0,1)";
this.derivee2 = document.getElementById("checkDerivee2").checked ? true : false;
this.couleurDerivee2 = "rgba(255,255,0,1)";
this.primitive1 = document.getElementById("checkPrimitive1").checked ? true : false;
this.couleurPrimitive1 = "rgba(255,50,0,1)";
this.conditionInitiale = 0;
this.style = document.getElementById("selectStyle").value;
this.getX = function(x){
return x;
};
this.getY = function(x){
return this.f(x);
};
this.set = function(f){
this.setFct(fct.remplacer(fct.verifier(f.fct)));
this.couleur = f.couleur;
this.couleurDerivee1 = f.couleurD1;
this.couleurDerivee2 = f.couleurD2;
this.couleurPrimitive1 = f.couleurP1;
this.width = f.width;
this.style = f.style;
this.aire = f.aire;
this.derivee1 = f.derivee1;
this.derivee2 = f.derivee2;
this.primitive1 = f.primitive1;
this.conditionInitiale = f.conditionInitiale;
return this;
};
this.get = function(){
var f = {};
f.type = "cartesian";
f.fct = this.fct;
f.couleur = this.couleur;
f.couleurD1 = this.couleurDerivee1;
f.couleurD2 = this.couleurDerivee2;
f.couleurP1 = this.couleurPrimitive1;
f.width = this.width;
f.style = this.style;
f.aire = this.aire;
f.derivee1 = this.derivee1;
f.derivee2 = this.derivee2;
f.primitive1 = this.primitive1;
f.conditionInitiale = this.conditionInitiale;
return f;
};
this.readableText = function(){
return "f(x) = " + this.fct;
};
this.plot = function(ctx, precision, affichage){
var x, y;
var pointX, pointY;
var nonDefini;
if(this.style == "points"){
precision *= 2;
}
// Dérivée première
if(this.derivee1){
ctx.beginPath();
ctx.strokeStyle = this.couleurDerivee1;
ctx.fillStyle = this.couleurDerivee1;
ctx.moveTo(-100,-100);
nonDefini = 1;
var pente;
var x0 = affichage.xGauche-precision;
var y0 = this.f(x0);
for(x = affichage.xGauche-precision*2; x <= affichage.xDroite+precision; x+=precision){
// Evaluer la valeur y du point x
y = this.f(x);
if(!isNaN(y)){
// Transformation des coordonnées
pente = (y-y0)/precision;
pointX = (x-precision/2 - affichage.xGauche) * affichage.multX;
pointY = affichage.hauteur - (pente - affichage.yBas) * affichage.multY;
y0 = y;
// Dessiner la dérivée
if(nonDefini>0){
nonDefini--;
ctx.moveTo(pointX, pointY);
}
else{
if(this.style == "continu"){
ctx.lineTo(pointX, pointY);
}
else if(this.style == "points"){
ctx.beginPath();
ctx.arc(pointX, pointY, this.width, 0, 2*Math.PI, true);
ctx.fill();
}
else{
ctx.lineTo(pointX, pointY);
nonDefini = 1;
}
}
}
else{
nonDefini = 2;
}
}
if(this.style != "points"){
ctx.stroke();
}
}
// Dérivée seconde
if(this.derivee2){
ctx.beginPath();
ctx.strokeStyle = this.couleurDerivee2;
ctx.fillStyle = this.couleurDerivee2;
ctx.moveTo(-100,-100);
nonDefini = 1;
var pente, pente2;
var x0 = affichage.xGauche-precision;
var y0 = this.f(x0);
var p0 = 0;
for(x = affichage.xGauche-precision*3; x <= affichage.xDroite+precision; x+=precision){
// Evaluer la valeur y du point x
y = this.f(x);
if(!isNaN(y)){
// Transformation des coordonnées
p = (y-y0)/precision;
pente = (p-p0)/precision;
pointX = (x-precision/2 - affichage.xGauche) * affichage.multX;
pointY = affichage.hauteur - (pente - affichage.yBas) * affichage.multY;
y0 = y;
p0 = p;
// Dessiner la dérivée seconde
if(nonDefini>0){
nonDefini--;
ctx.moveTo(pointX, pointY);
}
else{
if(this.style == "continu"){
ctx.lineTo(pointX, pointY);
}
else if(this.style == "points"){
ctx.beginPath();
ctx.arc(pointX, pointY, this.width, 0, 2*Math.PI, true);
ctx.fill();
}
else{
ctx.lineTo(pointX, pointY);
nonDefini = 1;
}
}
}
else{
nonDefini = 3;
}
}
if(this.style != "points"){
ctx.stroke();
}
}
// Primitive première
if(this.primitive1){
ctx.beginPath();
ctx.strokeStyle = this.couleurPrimitive1;
ctx.fillStyle = this.couleurPrimitive1;
ctx.moveTo(-affichage.xGauche*affichage.multX,affichage.hauteur-(this.conditionInitiale-affichage.yBas)*affichage.multY);
nonDefini = 0;
var pente, y0;
var conditionInitiale = this.conditionInitiale;
// precision /= 4;
// Partie droite
y0 = conditionInitiale;
for(x = precision; x <= affichage.xDroite+precision; x+=precision){
// Evaluer la valeur y du point x
pente = this.f(x);
if(!isNaN(pente)){
// Transformation des coordonnées
y = y0 + pente * precision;
pointX = (x - affichage.xGauche) * affichage.multX;
pointY = affichage.hauteur - (y - affichage.yBas) * affichage.multY;
y0 = y;
// Dessiner la primitive
if(nonDefini>0){
nonDefini--;
ctx.moveTo(pointX, pointY);
}
else{
if(this.style == "continu"){
ctx.lineTo(pointX, pointY);
}
else if(this.style == "points"){
ctx.beginPath();
ctx.arc(pointX, pointY, this.width, 0, 2*Math.PI, true);
ctx.fill();
}
else{
ctx.lineTo(pointX, pointY);
nonDefini = 1;
}
}
}
else{
nonDefini = 2;
}
}
if(this.style != "points"){
ctx.stroke();
}
// Partie gauche
ctx.beginPath();
ctx.moveTo(-affichage.xGauche*affichage.multX,affichage.hauteur-(this.conditionInitiale-affichage.yBas)*affichage.multY);
nonDefini = 0;
y0 = conditionInitiale;
for(x = -precision; x >= affichage.xGauche-precision; x-=precision){
// Evaluer la valeur y du point x
pente = this.f(x);
if(!isNaN(pente)){
// Transformation des coordonnées
y = y0 - pente * precision;
pointX = (x - affichage.xGauche) * affichage.multX;
pointY = affichage.hauteur - (y - affichage.yBas) * affichage.multY;
y0 = y;
// Dessiner la primitive
if(nonDefini>0){
nonDefini--;
ctx.moveTo(pointX, pointY);
}
else{
if(this.style == "continu"){
ctx.lineTo(pointX, pointY);
}
else if(this.style == "points"){
ctx.beginPath();
ctx.arc(pointX, pointY, this.width, 0, 2*Math.PI, true);
ctx.fill();
}
else{
ctx.lineTo(pointX, pointY);
nonDefini = 1;
}
}
}
else{
nonDefini = 2;
}
}
if(this.style != "points"){
ctx.stroke();
}
}
// Fonction
ctx.beginPath();
ctx.lineWidth = this.width;
if(affichage.methode == "uniboard"){
ctx.lineWidth *= 3;
}
ctx.strokeStyle = this.couleur;
ctx.fillStyle = this.couleur;
ctx.moveTo(-100,-100);
nonDefini = true;
for(x = affichage.xGauche-precision; x <= affichage.xDroite+precision; x+=precision){
// Evaluer la valeur y du point x
y = this.f(x);
if(!isNaN(y) && y <= affichage.yHaut+Math.abs(affichage.yHaut) && y >= affichage.yBas-Math.abs(affichage.yBas)){
// Transformation des coordonnées
pointX = (x - affichage.xGauche) * affichage.multX;
pointY = affichage.hauteur - (y - affichage.yBas) * affichage.multY;
// Dessiner la fonction
if(nonDefini){
nonDefini = false;
ctx.moveTo(pointX, pointY);
}
else{
if(this.style == "continu"){
ctx.lineTo(pointX, pointY);
}
else if(this.style == "points"){
ctx.beginPath();
ctx.arc(pointX, pointY, this.width, 0, 2*Math.PI, true);
ctx.fill();
}
else{
ctx.lineTo(pointX, pointY);
nonDefini = true;
}
}
// Dessiner l'aire sous la fonction
if(this.aire){
var zero = affichage.hauteur + affichage.yBas * affichage.multY;
var l = precision*affichage.multX;
ctx.fillStyle = "rgba(0,180,255,0.3)";
ctx.fillRect(pointX-l/2, zero, l , pointY-zero);
ctx.fillStyle = this.couleur;
}
}
else{
nonDefini = true;
}
}
if(this.style != "points"){
ctx.stroke();
}
if(this.style == "points"){
precision /= 2;
}
};
}
// -------------------- Color Picker --------------------
var idColor = "";
var idColor = ""
// Différentes fonctions nécessaire au Color Picker (menu du choix de la couleur)
function colorSV(e){
var element = document.getElementById('colorSV')
var posDivY = 0
var posDivX = 0
while(element){
posDivY = posDivY + element.offsetTop
posDivX = posDivX + element.offsetLeft
element = element.offsetParent
}
document.getElementById("info").innerHTML = posDivX+" ; "+posDivY
S = 100-Math.round((e.clientY - posDivY -0)/255*100)
V = Math.round((e.clientX - posDivX -0)/255*100)
document.getElementById("inputValeur").value = V
document.getElementById("inputSaturation").value = S
document.getElementById("ligneValeur").setAttribute("x1", e.clientX-posDivX)
document.getElementById("ligneValeur").setAttribute("x2", e.clientX-posDivX)
document.getElementById("ligneSaturation").setAttribute("y1", e.clientY-posDivY)
document.getElementById("ligneSaturation").setAttribute("y2", e.clientY-posDivY)
colorRGB()
}
var colorPicker = {
// Configuration
idSV : "canvasSV", // id du canvas affichant la saturation et la valeur
idT : "canvasT", // id du canvas affichant la teinte
idO : "canvasO", // id du canvas affichant l'opacité
width : 250, // largeur
height : 250, // hauteur
rayonRonds : 5, // rayon des ronds
ombreActive : "0px 0px 3px rgba(150,200,255,1), 0px 0px 8px rgba(64,190,255,1)",
ombreInactive : "0px 0px 5px rgba(64,64,64,0.4)",
// Variables définies lors de l'initialisation
canvasSV : null,
canvasT : null,
canvasO : null,
ctxSV : null,
ctxT : null,
ctxO : null,
lingradS : null,
lingradV : null,
lingradT : null,
// Couleurs
backgroundColor : "rgb(193,255,0)",
saturation : 100,
valeur : 100,
teinte : 75,
rouge : 193,
vert : 255,
bleu : 0,
opacity: 1,
// Couleurs RGB sans application de la saturation et de la valeur
r : 255,
g : 0,
b : 0,
// Autres variables
sourisDown : false, // Indique si on clique sur le colorPicker ou pas
sourisDehors : true, // Indique si la souris est en-dehors du colorPicker lors d'un clique
idColor : null,
// Fonction d'initialisation
init : function(id){
// Récupérer les éléments
this.canvasSV = document.getElementById(this.idSV);
this.canvasT = document.getElementById(this.idT);
this.canvasO = document.getElementById(this.idO);
// Définir la taille
this.canvasSV.width = this.width;
this.canvasSV.height = this.height;
this.canvasSV.style.width = this.width + "px";
this.canvasSV.style.height = this.height + "px";
this.canvasT.width = this.width/10;
this.canvasT.height = this.height;
this.canvasT.style.width = this.width/10 + "px";
this.canvasT.style.height = this.height + "px";
this.canvasO.width = this.width*1.15;
this.canvasO.height = this.height/10;
this.canvasO.style.width = this.width*1.15 + "px";
this.canvasO.style.height = this.height/10 + "px";
// Initialisation canvas
this.ctxSV = this.canvasSV.getContext("2d");
this.ctxT = this.canvasT.getContext("2d");
this.ctxO = this.canvasO.getContext("2d");
// Création des dégradés
this.lingradV = this.ctxSV.createLinearGradient(0, 0, 0, this.height);
this.lingradV.addColorStop(0, 'rgba(255,255,255,0)');
this.lingradV.addColorStop(1, 'rgba(255,255,255,1)');
this.lingradS = this.ctxSV.createLinearGradient(0, 0, this.width, 0);
this.lingradS.addColorStop(0, 'rgba(0,0,0,1)');
this.lingradS.addColorStop(1, 'rgba(0,0,0,0)');
this.lingradT = this.ctxT.createLinearGradient(0, 0, 0, this.height);
this.lingradT.addColorStop(0, 'rgb(255,0,0)');
this.lingradT.addColorStop(1/6, 'rgb(255,255,0)');
this.lingradT.addColorStop(2/6, 'rgb(0,255,0)');
this.lingradT.addColorStop(3/6, 'rgb(0,255,255)');
this.lingradT.addColorStop(4/6, 'rgb(0,0,255)');
this.lingradT.addColorStop(5/6, 'rgb(255,0,255)');
this.lingradT.addColorStop(1, 'rgb(255,0,0)');
// Événements roulette (initialisé seulement une fois)
if(window.addEventListener && !this.idColor){
this.canvasSV.addEventListener('DOMMouseScroll', function(event){colorPicker.eventWheel(event, colorPicker.idSV)}, false);
this.canvasSV.onmousewheel = function(event){colorPicker.eventWheel(event, colorPicker.idSV)};
this.canvasT.addEventListener('DOMMouseScroll', function(event){colorPicker.eventWheel(event, colorPicker.idT)}, false);
this.canvasT.onmousewheel = function(event){colorPicker.eventWheel(event, colorPicker.idT)};
this.canvasO.addEventListener('DOMMouseScroll', function(event){colorPicker.eventWheel(event, colorPicker.idO)}, false);
this.canvasO.onmousewheel = function(event){colorPicker.eventWheel(event, colorPicker.idO)};
}
// Définir la couleur
this.idColor = id;
var couleur = eval(document.getElementById(this.idColor).title);
// alert(id+" ; "+couleur)
document.getElementById("apercuCouleur").style.backgroundColor = couleur;
document.getElementById("apercuCouleur2").style.backgroundColor = couleur;
this.definirCouleur(couleur);
// Dessiner
this.dessiner();
this.dessinerApercu();
// Définir les valeurs des inputs
this.definirInputs();
// Définir le style de l'ombre
this.sourisOut();
},
definirCouleur : function(colorRGB){
var table = /(.*?)rgb\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)/.exec(colorRGB);
if (table == null){
table = /(.*?)rgba\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)/.exec(colorRGB);
}
if(table == null){
return "";
}
this.rouge = parseInt(table[2]);
this.vert = parseInt(table[3]);
this.bleu = parseInt(table[4]);
this.RGB_SVT();
},
sourisClick : function(id){
this.sourisDown = id;
if(id != this.idO){
document.getElementById(id).style.boxShadow = this.ombreActive;
}
},
sourisOut : function(){
this.canvasSV.style.boxShadow = this.ombreInactive;
this.canvasT.style.boxShadow = this.ombreInactive;
},
sourisOver : function(id){
if(this.sourisDown == id && id != this.idO){
document.getElementById(id).style.boxShadow = this.ombreActive;
}
},
sourisUp : function(){
this.sourisDown = false;
this.canvasSV.style.boxShadow = this.ombreInactive;
this.canvasT.style.boxShadow = this.ombreInactive;
this.dessinerO();
},
eventWheel : function(event, id){
if(!event) event = window.event;
if(event.wheelDelta){
if(event.wheelDelta < 0){
colorPicker.sourisWheelUp(id);
}
else{
colorPicker.sourisWheelDown(id);
}
}
else if(event.detail){
if(event.detail > 0){
colorPicker.sourisWheelUp(id);
}
else{
colorPicker.sourisWheelDown(id);
}
}
},
sourisWheelUp : function(id){
switch(id){
case this.idT:
colorPicker.ajouterT(5);
break;
case this.idO:
colorPicker.ajouterO(0.1);
break;
case this.idSV:
colorPicker.ajouterS(-5);
break;
}
},
sourisWheelDown : function(id){
switch(id){
case this.idT:
colorPicker.ajouterT(-5);
break;
case this.idO:
colorPicker.ajouterO(-0.1);
break;
case this.idSV:
colorPicker.ajouterS(5);
break;
}
},
ajouterT : function(nbr){
this.teinte += nbr;
if(this.teinte < 0){
this.teinte = 0;
}
else if(this.teinte > 360){
this.teinte = 360;
}
this.SVT_RGB();
},
ajouterO : function(nbr){
this.opacity = Math.round((this.opacity+nbr)*100)/100;
if(this.opacity < 0){
this.opacity = 0;
}
else if(this.opacity > 1){
this.opacity = 1;
}
this.SVT_RGB();
},
ajouterS : function(nbr){
this.saturation += nbr;
if(this.saturation < 0){
this.saturation = 0;
}
else if(this.saturation > 100){
this.saturation = 100;
}
this.SVT_RGB();
},
// Lors du déplacement de la souris
moveSV : function(event){
// Vérifie si on appuie sur la souris
if(this.sourisDown != this.idSV){
return 0;
}
var element = this.canvasSV;
var posDivY = 0;
var posDivX = 0;
// Récupérer la position du canvas par rapport à la page
while(element){
posDivY = posDivY + element.offsetTop;
posDivX = posDivX + element.offsetLeft;
element = element.offsetParent;
}
// Définir la saturation et la valeur à partir de la position de la souris
this.saturation = 100-Math.round((event.clientY - posDivY -1)/(this.height+1)*100);
this.valeur = Math.round((event.clientX - posDivX -1)/(this.width+1)*100);
this.SVT_RGB();
},
moveT : function(event){
if(this.sourisDown != this.idT){
return 0;
}
var element = this.canvasT;
var posDivY = 0;
while(element){
posDivY = posDivY + element.offsetTop;
element = element.offsetParent;
}
this.teinte = Math.round( (event.clientY - posDivY -0) / (this.height+1)*360);
this.SVT_RGB();
},
SVT_RGB : function(){
this.T_rgb();
this.rouge = Math.round((this.r + (255-this.r) * (-1) * (this.saturation-100) / 100 )* this.valeur / 100);
this.vert = Math.round((this.g + (255-this.g) * (-1) * (this.saturation-100) / 100 )* this.valeur / 100);
this.bleu = Math.round((this.b + (255-this.b) * (-1) * (this.saturation-100) / 100 )* this.valeur / 100);
this.definirInputs();
this.dessinerApercu();
this.dessiner();
},
T_rgb : function(){
var r,g,b = 0;
var T = this.teinte;
function colorT(e){
var element = document.getElementById('colorT')
var posDiv = 0
while(element){
posDiv = posDiv + element.offsetTop
element = element.offsetParent
}
T = (e.clientY - posDiv -0) / 256*360
r,g,b = 0
while (true){
if (T<60){
r = 255;
g = T/60*255;
b = 0;
}
else if (T<120){
r = (255-(T%60/60*255))%256;
g = 255;
b = 0;
}
else if (T<180){
r = 0;
g = 255;
b = T%60/60*255;
}
else if (T<240){
r = 0;
g = (255-(T%60/60*255))%256;
b = 255;
}
else if (T<300){
r = T%60/60*255;
g = 0;
b = 255;
}
else if (T<360){
r = 255;
g = 0;
b = (255-(T%60/60*255))%256;
}
else{
r = 255;
g = 0;
b = 0;
}
this.r = Math.round(r);
this.g = Math.round(g);
this.b = Math.round(b);
},
RGB_SVT : function(){
// Voir http://fr.wikipedia.org/wiki/Teinte_Saturation_Valeur#Conversion_de_RVB_vers_TSV
var r = this.rouge/255;
var g = this.vert/255;
var b = this.bleu/255;
if(!isFinite(r)){
r = 0;
}
if(!isFinite(g)){
g = 0;
}
if(!isFinite(b)){
b = 0;
}
var max = Math.max(r,g,b);
var min = Math.min(r,g,b);
var s, v, t;
// Teinte
switch(max){
case r:
t = (60 * (g-b)/(max-min) + 360) % 360;
break;
case g:
t = 60 * (b-r)/(max-min) + 120;
break;
case b:
t = 60 * (r-g)/(max-min) + 240;
break;
default: /* case min: */
t = 0;
break;
}
// Saturation
if(max == 0){
s = 0;
}
else{
s = 1-(min/max);
}
// Valeur
v = max;
// Définir les variables
this.saturation = s*100;
this.valeur = v*100;
this.teinte = Math.round(t);
this.T_rgb();
},
dessiner : function(){
var ctxSV = this.ctxSV;
var ctxT = this.ctxT;
// Fond
ctxSV.fillStyle = "rgb("+this.r+","+this.g+","+this.b+")";
ctxSV.fillRect(0, 0, this.width, this.height);
// Dégradés
ctxSV.fillStyle = this.lingradV;
ctxSV.fillRect(0, 0, this.width, this.height);
ctxSV.fillStyle = this.lingradS;
ctxSV.fillRect(0, 0, this.width, this.height);
// Souris
var x = Math.round(this.width*this.valeur/100);
var y = Math.round(this.height-this.height*this.saturation/100);
ctxSV.beginPath();
ctxSV.arc(x, y, this.rayonRonds, 0, 2*Math.PI, true);
ctxSV.strokeStyle = "rgba(255,255,255,0.8)";
ctxSV.shadowOffsetX = 1;
ctxSV.shadowOffsetY = 1;
ctxSV.shadowColor = "rgba(0,0,0,1)";
ctxSV.shadowBlur = 2;
ctxSV.lineWidth = 1.5;
ctxSV.stroke();
// Fond Teinte
ctxT.fillStyle = this.lingradT;
ctxT.fillRect(0, 0, this.width/10, this.height);
// Souris Teinte
var pos = Math.round(0.99*this.height*this.teinte/360);
ctxT.fillStyle = "rgba(255,255,255,0.8)";
ctxT.shadowOffsetX = 0;
ctxT.shadowOffsetY = 0;
ctxT.shadowColor = "rgba(0,0,0,1)";
ctxT.shadowBlur = 3;
ctxT.fillRect(0, pos, this.width/10, 2);
// Désactiver les ombres
ctxSV.shadowColor = "rgba(0,0,0,0)";
ctxT.shadowColor = "rgba(0,0,0,0)";
this.dessinerO();
},
dessinerApercu : function(){
document.getElementById("apercuCouleur").style.backgroundColor = "rgba("+this.rouge+","+this.vert+","+this.bleu+","+this.opacity+")";
},
definirInputs : function(){
document.getElementById("inputValeur").value = this.valeur;
document.getElementById("inputSaturation").value = this.saturation;
document.getElementById("inputTeinte").value = this.teinte;
document.getElementById("inputRouge").value = this.rouge;
document.getElementById("inputVert").value = this.vert;
document.getElementById("inputBleu").value = this.bleu;
document.getElementById("inputOpacity").value = this.opacity;
},
recupererInputs : function(){
this.valeur = parseInt(document.getElementById("inputValeur").value);
this.saturation = parseInt(document.getElementById("inputSaturation").value);
this.teinte = parseInt(document.getElementById("inputTeinte").value);
this.opacity = parseFloat(document.getElementById("inputOpacity").value);
this.SVT_RGB();
this.definirInputs();
this.dessinerApercu();
this.dessiner();
},
recupererInputs2 : function(){
this.rouge = parseInt(document.getElementById("inputRouge").value);
this.vert = parseInt(document.getElementById("inputVert").value);
this.bleu = parseInt(document.getElementById("inputBleu").value);
this.RGB_SVT();
this.definirInputs();
this.dessinerApercu();
this.dessiner();
},
moveO : function(event){
if(this.sourisDown != this.idO){
return 0;
}
var element = this.canvasO;
var posDivX = 0;
while(element){
posDivX = posDivX + element.offsetLeft;
element = element.offsetParent;
}
this.opacity = Math.round( (event.clientX - posDivX -this.width/10) / (this.width*0.9)*100)/100;
if(this.opacity < 0){
this.opacity = 0;
}
else if(this.opacity > 1){
this.opacity = 1;
}
this.dessinerO();
this.definirInputs();
this.dessinerApercu();
},
dessinerO : function(){
var ctx = this.ctxO;
ctx.shadowBlur = 2;
// Ligne
if(this.sourisDown == this.idO){
ctx.shadowColor = "rgba(0,50,100,1)";
}
else{
ctx.shadowColor = "rgba(0,0,0,1)";
}
ctx.globalAlpha = 1;
ctx.shadowOffsetX = 0;
ctx.shadowOffsetY = 0;
ctx.fillStyle = "rgba("+this.rouge+","+this.vert+","+this.bleu+",1)";
ctx.clearRect(0,0,this.width*1.15,this.height);
ctx.fillRect(this.width/10, this.height/20-1, this.width*0.9, 3);
// Rond
var x = this.width/10 + this.width*0.9*this.opacity-1;
var y = this.height/20;
if(this.sourisDown == this.idO){
ctx.fillStyle = "rgba(0,40,80,1)";
ctx.strokeStyle = "rgba(230,250,255,0.8)";
}
else{
ctx.fillStyle = "rgba(0,0,0,1)";
ctx.strokeStyle = "rgba(255,255,255,0.8)";
}
ctx.globalAlpha = 0.1+this.opacity*0.9;
ctx.beginPath();
ctx.arc(x, y, this.rayonRonds+1, 0, 2*Math.PI, true);
ctx.shadowColor = "rgba(0,0,0,1)";
ctx.shadowOffsetX = 1;
ctx.shadowOffsetY = 1;
ctx.lineWidth = 1;
ctx.fill();
ctx.stroke();
// Petits ronds
ctx.globalAlpha = 1;
ctx.shadowColor = "rgba(0,0,0,1)";
ctx.beginPath();
ctx.arc(8, this.height/20+0.5, this.rayonRonds, 0, 2*Math.PI, true);
ctx.strokeStyle = "rgba(0,0,0,0.5)";
ctx.shadowOffsetX = 0;
ctx.shadowOffsetY = 0;
ctx.lineWidth = 1;
ctx.stroke();
ctx.beginPath();
ctx.arc(this.width*1.08, this.height/20+0.5, this.rayonRonds, 0, 2*Math.PI, true);
ctx.strokeStyle = "rgba(0,0,0,0.8)";
ctx.fillStyle = "rgba(0,0,0,0.6)";
ctx.shadowOffsetX = 0;
ctx.shadowOffsetY = 0;
ctx.lineWidth = 1;
ctx.stroke();
ctx.fill();
},
exporterCouleur : function(){
eval(document.getElementById(this.idColor).title+' = "rgba(" + this.rouge +", " + this.vert + ", " + this.bleu +", "+this.opacity+")"');
document.getElementById(this.idColor).style.backgroundColor = eval(document.getElementById(this.idColor).title);
},
fermer : function(){
colorPicker.exporterCouleur();
if(colorPicker.idColor == 'buttonColor'){
cacherMenu();
}
else if(dernierMenu == "menuFonctions"){
editeur.getOptions();
afficherMenu(dernierMenu);
}
else{
cacherMenu();
}
actualiserGraph();
r = 255
g = T/60*255
b = 0
break
}
if (T<=120){
r = (255-(T%60/60*255))%256
g = 255
b = 0
break
}
if (T<180){
r = 0
g = 255
b = T%60/60*255
break
}
if (T<=240){
r = 0
g = (255-(T%60/60*255))%256
b = 255
break
}
if (T<300){
r = T%60/60*255
g = 0
b = 255
break
}
if (T<360){
r = 255
g = 0
b = (255-(T%60/60*255))%256
break
}
r = 255
g = 0
b = 0
break
}
};
T = Math.round(T)
r = Math.round(r)
g = Math.round(g)
b = Math.round(b)
document.getElementById("inputTeinte").value = T
document.getElementById("colorSV").style.backgroundColor = "rgb("+r+","+g+","+b+")"
document.getElementById("ligneTeinte").setAttribute("y2", e.clientY-posDiv)
document.getElementById("ligneTeinte").setAttribute("y1", e.clientY-posDiv)
colorRGB()
}
function colorRGB(){
var S = document.getElementById("inputSaturation").value
var V = document.getElementById("inputValeur").value
var rouge = Math.round((r + (255-r) * (-1) * (S-100) / 100 )* V / 100)
var vert = Math.round((g + (255-g) * (-1) * (S-100) / 100 )* V / 100)
var bleu = Math.round((b + (255-b) * (-1) * (S-100) / 100 )* V / 100)
document.getElementById("inputRouge").value = rouge
document.getElementById("inputVert").value = vert
document.getElementById("inputBleu").value = bleu
eval(document.getElementById(idColor).title+' = "rgba(" + rouge +", " + vert + ", " + bleu +", "+document.getElementById("inputOpacity").value+")"')
document.getElementById(idColor).style.backgroundColor = eval(document.getElementById(idColor).title)
document.getElementById("apercuCouleur").style.backgroundColor = eval(document.getElementById(idColor).title)
}
function colorPicker(id){
idColor = id
document.getElementById("apercuCouleur").style.backgroundColor = eval(document.getElementById(idColor).title)
document.getElementById("apercuCouleur2").style.backgroundColor = eval(document.getElementById(idColor).title)
}
var editeur = {
idFct : 0,
fct : {
fct : "",
fctX : "",
fctY : "",
from : 0,
to : 2*Math.PI,
couleur : "",
couleurD1 : "",
couleurD2 : "",
couleurP1 : "",
width : 2,
style : "continu",
aire : false,
derivee1 : false,
derivee2 : false,
primitive1 : false,
conditionInitiale : 0
},
editer : function(id){
this.idFct = id;
if(fct.list[this.idFct]){
document.getElementById("editeurFonction").style.visibility = "visible";
this.setOptions();
}
else{
document.getElementById("editeurFonction").style.visibility = "hidden";
}
fct.updateList();
},
couleur : function(id){
colorPicker.init(id);
afficherMenu('menuCouleur');
},
getOptions : function(){
this.fct.fct = document.getElementById("editeurInput").value;
this.fct.fctX = document.getElementById("editeurFctX").value;
this.fct.fctY = document.getElementById("editeurFctY").value;
this.fct.from = document.getElementById("editeurFrom").value;
this.fct.to = document.getElementById("editeurTo").value;
this.fct.width = document.getElementById("editeurWidth").value;
this.fct.style = document.getElementById("editeurStyle").value;
this.fct.aire = document.getElementById("editeurAire").checked ? true : false;
this.fct.derivee1 = document.getElementById("editeurD1").checked ? true : false;
this.fct.derivee2 = document.getElementById("editeurD2").checked ? true : false;
this.fct.primitive1 = document.getElementById("editeurP1").checked ? true : false;
if(this.fct.primitive1){
document.getElementById("editeurConditionInitiale").disabled = "";
document.getElementById("editeurTexteConditionInitiale").style.color = "rgb(0,0,0)"
}
else{
document.getElementById("editeurConditionInitiale").disabled = "disabled";
document.getElementById("editeurTexteConditionInitiale").style.color = "rgb(128,128,128)"
}
this.fct.conditionInitiale = parseFloat(document.getElementById("editeurConditionInitiale").value);
fct.list[this.idFct].set(this.fct);
fct.updateList();
historique.ajouter(fct.list[this.idFct]);
this.apercu();
},
setOptions : function(){
var f = fct.list[this.idFct].get();
for(var i in f){
this.fct[i] = f[i];
}
this.setDisplayStyle();
document.getElementById("editeurInput").value = this.fct.fct;
document.getElementById("editeurFctX").value = this.fct.fctX;
document.getElementById("editeurFctY").value = this.fct.fctY;
document.getElementById("editeurFrom").value = this.fct.from;
document.getElementById("editeurTo").value = this.fct.to;
document.getElementById("editeurCouleur").style.backgroundColor = this.fct.couleur;
document.getElementById("editeurCouleurD1").style.backgroundColor = this.fct.couleurD1;
document.getElementById("editeurCouleurD2").style.backgroundColor = this.fct.couleurD2;
document.getElementById("editeurCouleurP1").style.backgroundColor = this.fct.couleurP1;
document.getElementById("editeurWidth").value = this.fct.width;
document.getElementById("editeurStyle").value = this.fct.style;
document.getElementById("editeurAire").checked = this.fct.aire ? "checked" : "";
document.getElementById("editeurD1").checked = this.fct.derivee1 ? "checked" : "";
document.getElementById("editeurD2").checked = this.fct.derivee2 ? "checked" : "";
document.getElementById("editeurP1").checked = this.fct.primitive1 ? "checked" : "";
if(this.fct.primitive1){
document.getElementById("editeurConditionInitiale").disabled = "";
document.getElementById("editeurTexteConditionInitiale").style.color = "rgb(0,0,0)"
}
else{
document.getElementById("editeurConditionInitiale").disabled = "disabled";
document.getElementById("editeurTexteConditionInitiale").style.color = "rgb(128,128,128)"
}
document.getElementById("editeurConditionInitiale").value = this.fct.conditionInitiale;
document.getElementById("outputX").innerHTML = " ";
document.getElementById("outputAire").innerHTML = " ";
this.apercu();
},
setDisplayStyle : function(){
if(fct.list[this.idFct] instanceof CartesianFunction){
document.getElementById("editeurFctPrefix").textContent = "f(x) = ";
document.getElementById("editeurFctDiv").style.display = "block";
document.getElementById("editeurFctXYDiv").style.display = "none";
document.getElementById("editeurRangeDiv").style.display = "none";
document.getElementById("editeurDeriveesDiv").style.display = "block";
document.getElementById("editeurStyleDiv").style.display = "block";
document.getElementById("editeurAireDiv").style.display = "block";
}
else if(fct.list[this.idFct] instanceof ImplicitFunction){
document.getElementById("editeurFctPrefix").textContent = "";
document.getElementById("editeurFctDiv").style.display = "block";
document.getElementById("editeurFctXYDiv").style.display = "none";
document.getElementById("editeurRangeDiv").style.display = "none";
document.getElementById("editeurDeriveesDiv").style.display = "none";
document.getElementById("editeurStyleDiv").style.display = "none";
document.getElementById("editeurAireDiv").style.display = "none";
}
else if(fct.list[this.idFct] instanceof PolarFunction){
document.getElementById("editeurFctPrefix").textContent = "r(t) = ";
document.getElementById("editeurFctDiv").style.display = "block";
document.getElementById("editeurFctXYDiv").style.display = "none";
document.getElementById("editeurRangeDiv").style.display = "block";
document.getElementById("editeurDeriveesDiv").style.display = "none";
document.getElementById("editeurStyleDiv").style.display = "block";
document.getElementById("editeurAireDiv").style.display = "none";
}
else if(fct.list[this.idFct] instanceof ParametricFunction){
document.getElementById("editeurFctDiv").style.display = "none";
document.getElementById("editeurFctXYDiv").style.display = "block";
document.getElementById("editeurRangeDiv").style.display = "block";
document.getElementById("editeurDeriveesDiv").style.display = "none";
document.getElementById("editeurStyleDiv").style.display = "block";
document.getElementById("editeurAireDiv").style.display = "none";
}
},
etudier : function(){
fct.etudier(this.idFct);
},
supprimer : function(){
fct.enlever(this.idFct);
if(!fct.list[this.idFct]){
this.editer(this.idFct - 1);
}
else{
this.editer(this.idFct);
}
},
dupliquer : function(){
fct.dupliquer(this.idFct);
this.editer(this.idFct + 1);
},
apercu : function(){
editorPreview.drawFunction(fct.list[this.idFct]);
}
};
var editorPreview = {
id : "editeurApercu",
xGauche : -5,
xDroite : 5,
yBas : -4,
yHaut : 4,
largeur : 0,
hauteur : 0,
multX : 1,
multY : 1,
ctx: null,
init : function(){
var canvas = document.getElementById("editeurApercu");
this.ctx = canvas.getContext("2d");
this.largeur = canvas.width;
this.hauteur = canvas.height;
this.multX = this.largeur/Math.abs(this.xDroite - this.xGauche);
this.multY = this.hauteur/Math.abs(this.yHaut - this.yBas);
this.precision = Math.abs(this.xDroite - this.xGauche)/50;
},
drawFunction : function(func){
var x, y, pointX, pointY;
var ctx = this.ctx;
ctx.clearRect(0,0,100,80);
ctx.globalAlpha = 0.7;
ctx.fillStyle = "rgba(0,0,0,0.5)"
ctx.fillRect(0,39.5, 100, 1);
ctx.fillRect(49.5,0, 1, 80);
ctx.beginPath();
// ctx.lineWidth = func.width/1.8;
// ctx.strokeStyle = func.couleur;
// ctx.moveTo(-100,-100);
// for(x = -5; x <= 5; x+=0.2){
// // Evaluer la valeur y du point x
// try{
// y = func.f(x);
// }
// catch(e){}
// if(!isNaN(y)){
// // Transformation des coordonnées
// pointX = x * 10 + 50;
// pointY = 40 - y * 10;
//
// // Dessiner la fonction
// ctx.lineTo(pointX, pointY);
// }
// }
func.plot(ctx, this.precision, this);
// ctx.stroke();
}
};
// -------------------- Etude de fonctions --------------------
var etudeX = new Array()
var etudeY = new Array()
var etudeD = new Array()
var limGauche = new Array()
var limDroite = new Array()
var listeIndefini = new Array()
var listeZeros = new Array()
var intervalEtudeGauche = -50
var intervalEtudeDroite = 50
var precisionEtude = 0.001
function etudier(fct){
if(check(fct)){
prepareEtude(fct)
pariteFct()
signeFct(fct)
asymptotes()
courbure()
ensembleDefinition()
}
}
// Préparation à l'étude de fonction
function prepareEtude(fct){
listeIndefini = new Array()
var f = function(x){
return eval(fct)
}
// Calcul de tous les points de la fonction
var i = 0
for(var x=intervalEtudeGauche; x<=intervalEtudeDroite; x+=precisionEtude){
etudeX[i] = x
etudeY[i] = Math.round(f(x)*10000)/10000
etudeD[i] = Math.round(1000000*(f(x+0.0001)-f(x-0.0001))/(2*0.0001))/1000000
i++
}
// Calcul des extrémités de la fonction
var x = -100000
limGauche[0] = f(x)
x = -10000
limGauche[1] = f(x)
x = 100000
limDroite[0] = f(x)
x = 10000
limDroite[1] = f(x)
}
// Recherche de l'ensemble de définition
function ensembleDefinition(){
var fctDefinie = false
var dejaDefinie = false
var EDF = ""
if(!isNaN(limGauche[0])){
fctDefinie = true
dejaDefinie = true
EDF += "]-∞;"
}
if(!isNaN(limGauche[1]) && !fctDefinie){
fctDefinie = true
dejaDefinie = true
EDF += "]-∞;"
}
for(var i=0; i<etudeX.length; i++){
if(fctDefinie && isNaN(etudeY[i])){
fctDefinie = false
EDF += (parseInt(etudeX[i]/precisionEtude)*precisionEtude)+"["
}
else if(!fctDefinie && !isNaN(etudeY[i])){
fctDefinie = true
if(dejaDefinie){
EDF += " u "
}
EDF += "["+(parseInt(etudeX[i]/precisionEtude)*precisionEtude)+";"
dejaDefinie = true
}
}
if(fctDefinie && !isNaN(limDroite[1])){
fctDefinie = false
EDF += "+∞["
}
if(fctDefinie && !isNaN(limDroite[0])){
fctDefinie = false
EDF += "+∞["
}
for(var i=0; i<listeIndefini.length; i++){
if(i==0){
EDF += " - {"
}
EDF += listeIndefini[i]
if(i==listeIndefini.length-1){
EDF += "}"
}
else
EDF += ";"
}
document.getElementById('etudeEDF').innerHTML = EDF
}
// Etude de la parité
function pariteFct(){
var posZero
var paire = true
var impaire = true
var positif, negatif
var precisionParite = 1000
for(var i=0;i<etudeX.length;i++){
if(Math.round(etudeX[i]*precisionParite)/precisionParite==0){
posZero = i
}
}
for(var i=1; i<etudeX.length/2; i++){
if(etudeY[posZero+i]>0){
positif = Math.floor(etudeY[posZero+i])
}
else{
positif = Math.ceil(etudeY[posZero+i])
}
if(etudeY[posZero-i]>0){
negatif = Math.floor(etudeY[posZero-i])
}
else{
negatif = Math.ceil(etudeY[posZero-i])
}
if(positif<25000 && positif>-25000){
if(positif != negatif){
paire = false
//alert(i+" ; "+posZero+" ; "+etudeX.length+" ; "+positif+" ; "+negatif)
}
if(positif != (-negatif)){
impaire = false
}
}
}
if(paire){
document.getElementById("etudeParite").innerHTML = sankoreLang[lang].ev;
}
else if(impaire){
document.getElementById("etudeParite").innerHTML = sankoreLang[lang].unev;
}
else{
document.getElementById("etudeParite").innerHTML = sankoreLang[lang].na;
}
}
function zeroFct(){
listeZeros = new Array()
var listeZerosArr = new Array()
var precZeros = 5
for(var i=0; i<etudeX.length; i++){
if(Math.round(etudeY[i]*1000)/1000==0){
var nouveauZero = Math.round(etudeX[i]*precZeros)/precZeros
if(listeZerosArr[listeZerosArr.length-1]!=nouveauZero){
listeZeros.push(Math.round(etudeX[i]*10)/10)
listeZerosArr.push(nouveauZero)
}
}
}
}
function signeFct(fct){
var signe = new Array()
var signePlus = new Array()
var signeMoins = new Array()
var dernier = 0
if(limGauche[0]>0){
signe[0] = "+"
signePlus[0] = limGauche[1]
signeMoins[0] = limGauche[0]
}
else{
signe[0] = "-"
signePlus[0] = limGauche[1]
signeMoins[0] = limGauche[0]
}
for(var i=0; i<etudeY.length; i++){
if(signe[signe.length-1]=="+"){
if(etudeY[i]<0){
signe.push("-")
signePlus.push(etudeX[i])
signeMoins.push(etudeX[dernier])
}
else if(etudeY[i]>0){
dernier = i
}
}
if(signe[signe.length-1]=="-"){
if(etudeY[i]>0){
signe.push("+")
signePlus.push(etudeX[i])
signeMoins.push(etudeX[dernier])
//alert(signe+" ; "+signePlus+'\n'+etudeY[i+1]+" ; "+etudeY[i]+" ; "+etudeY[i-1]+" ; "+etudeY[i-2]+'\n'+etudeX[i+1]+" ; "+etudeX[i]+" ; "+etudeX[i-1]+" ; "+etudeX[i-2])
}
else if(etudeY[i]<0){
dernier = i
}
}
}
var valeurPlus, valeurMoins, millieu, precisionZero
listeZeros = new Array()
for(var i=1; i<signePlus.length; i++){
valeurPlus = signePlus[i]
valeurMoins = signeMoins[i]
for(var k=0;k<10000;k++){
millieu = (valeurPlus + valeurMoins)/2
x = valeurPlus
if(eval(fct)>0){
x = millieu
if(eval(fct)>0){
valeurPlus=millieu
}
else if(eval(fct)<0){
valeurMoins=millieu
}
else{
break
}
}
else if(eval(fct)<0){
x = millieu
if(eval(fct)<0){
valeurPlus=millieu
}
else if(eval(fct)>0){
valeurMoins=millieu
}
else{
break
}
}
else{
millieu = valeurPlus
break
}
x = valeurPlus
precisionZero = eval(fct)
x = valeurMoins
precisionZero -= eval(fct)
if(precisionZero>0.0001){
break
}
}
listeZeros.push(Math.round(millieu*100)/100)
}
var texteZeros = ""
if(listeZeros==""){
zeroFct()
texteZeros = "~ "
}
var texte = sankoreLang[lang].signe;
var aSupprimer = new Array()
for(var i=0; i<signe.length; i++){
texte += "<td>"+signe[i]+"</td>"
if(listeZeros[i]!=undefined){
x = listeZeros[i]
if(isFinite(eval(fct))){
texte += "<td class='border'>"+listeZeros[i]+"</td>"
}
else{
texte += "<td class='border infini'>"+listeZeros[i]+"</td>"
listeIndefini.push(listeZeros[i])
aSupprimer.push(i)
}
}
}
document.getElementById("etudeSigne").innerHTML = texte
for(var i=0; i<aSupprimer.length; i++){
listeZeros.splice((aSupprimer[i]-i), 1)
}
if(listeZeros==""){
texteZeros = sankoreLang[lang].na;
}
document.getElementById("etudeZeros").innerHTML = texteZeros+listeZeros
}
function asymptotes(){
// Horizontales
if(Math.abs(limGauche[0])<1000){
var limRound = Math.round(limGauche[0]*100)/100
if(limGauche[0]<limRound){
document.getElementById("etudeAHG").innerHTML = "y = "+limRound +" <span class='texteSecondaire'>" + sankoreLang[lang].curve_higher + "</span>"
}
else if(limGauche[0]>limRound){
document.getElementById("etudeAHG").innerHTML = "y = "+limRound +" <span class='texteSecondaire'>" + sankoreLang[lang].curve_lower + "</span>"
}
else{
document.getElementById("etudeAHG").innerHTML = "y = "+limRound
}
}
else{
document.getElementById("etudeAHG").innerHTML = sankoreLang[lang].na;
}
if(Math.abs(limDroite[0])<1000){
var limRound = Math.round(limDroite[0]*100)/100
if(limDroite[0]<limRound){
document.getElementById("etudeAHD").innerHTML = "y = "+limRound +" <span class='texteSecondaire'>" + sankoreLang[lang].curve_lower + "</span>"
}
else if(limDroite[0]>limRound){
document.getElementById("etudeAHD").innerHTML = "y = "+limRound +" <span class='texteSecondaire'>" + sankoreLang[lang].curve_higher + "</span>"
}
else{
document.getElementById("etudeAHD").innerHTML = "y = "+limRound
}
}
else{
document.getElementById("etudeAHD").innerHTML = sankoreLang[lang].na;
}
// Verticales
var texteAV = ""
for(var i=0; i<listeIndefini.length; i++){
texteAV += "x = "+listeIndefini[i]
if(listeIndefini[i+1]!=undefined){
texteAV += " ; "
}
}
if(texteAV==""){
texteAV = sankoreLang[lang].na + " <br/>"
}
document.getElementById("etudeAV").innerHTML = texteAV
}
function courbure(){
var texteMin = "";
var texteMax = "";
var texteI = "";
var nbrI = 0;
var i;
for(i=0; i<etudeD.length; i++){
if(etudeD[i]==0){
if(etudeD[i-1]<0 && etudeD[i+1]>0){
texteMin += "<br/>" + sankoreLang[lang].min + "("+Math.round(etudeX[i]*10000)/10000+";"+etudeY[i]+")";
}
else if(etudeD[i-1]>0 && etudeD[i+1]<0){
texteMax += "<br/>" + sankoreLang[lang].max + "("+Math.round(etudeX[i]*10000)/10000+";"+etudeY[i]+")";
}
else{
nbrI++;
texteI += '<br/>I<span style="vertical-align:sub;font-size:50%;">'+nbrI+"</span>("+Math.round(etudeX[i]*10000)/10000+";"+etudeY[i]+")";
}
}
}
if(texteMin==""){
texteMin = "<br/>" + sankoreLang[lang].no_min;
}
if(texteMax==""){
texteMax = "<br/>" + sankoreLang[lang].no_max;
}
if(texteI==""){
texteI = "<br/>Aucun I";
}
document.getElementById("etudeMin").innerHTML = texteMin;
document.getElementById("etudeMax").innerHTML = texteMax;
}
\ No newline at end of file
// -------------------- Etudes de fonctions --------------------
function consoleInfos(){
var table = [];
for(var i in arguments){
table.push(arguments[i]);
}
document.getElementById("infos").innerHTML += table +"<br/>";
}
Array.prototype.first = function(){
return this[0];
}
Array.prototype.last = function(){
return this[this.length-1];
}
Array.prototype.removeDoubles = function(){
// Sort numerically
this.sort(function(nbr1,nbr2){return nbr1-nbr2});
// Remove doubles
for(var i=1; i<this.length; i++){
if(this[i] == this[i-1]){
this.splice(i, 1);
i--;
}
}
}
var etude = {
f : null,
fct : "",
xGauche : -10,
xDroite : 10,
precision: 0.001,
listeX : [],
listeY : [],
listeD : [],
listeD2 : [],
listeIndefini : [],
listeZeros : [],
etudier : function(txtFct){
// document.getElementById("infos").innerHTML = "";
this.fct = fct.remplacer(fct.verifier(txtFct));
// this.fct = txtFct;
this.f = new Function("x", "return "+this.fct);
this.listeX = [];
this.listeY = [];
this.listeD = [];
this.listeD2 = [];
document.getElementById("etudeFdeX").innerHTML = ""+this.fct;
this.preparer();
this.ensembleDefNum();
this.pariteNum();
this.zerosNum();
this.signeNum();
this.asymptotesNum();
this.extremumsNum();
this.pointI();
},
round : function(nbr){
return Math.round(nbr*1000)/1000;
},
preparer : function(){
var f = this.f;
var a, b;
for(var x=this.xGauche; x<=this.xDroite; x+=this.precision){
x = this.round(x);
this.listeX.push(x);
this.listeY.push(f(x));
a = (f(x+0.0001)-f(x))/0.0001;
b = (f(x)-f(x-0.0001))/0.0001;
this.listeD.push((a+b)/2);
this.listeD2.push((b-a)/0.0001);
// this.listeD2.push(Math.round((b-a)*10000000)/100000000000);
if(x==0){
this.posZero = this.listeX.length-1;
}
// consoleInfos(x, f(x));
}
},
ensembleDefNum : function(){
var EDF = "";
var definie = false;
var listeIndefini = [];
if(isFinite(this.listeY.first())){
EDF += "]-∞;"
definie = true;
}
for(var i=0; i<this.listeY.length; i++){
// consoleInfos(i, definie, this.listeX[i])
if(definie){
if(!isFinite(this.listeY[i]) && isFinite(this.listeY[i-1])){
// consoleInfos(this.listeY[(i)], !isFinite(this.listeY[i+1]), definie)
if(!isFinite(this.listeY[i+1])){
definie = false;
// Définition de [ ou ] en fonction de l'entier le plus proche
if(Math.round(this.listeX[i-1]) == this.listeX[i-1]){
EDF += this.round(this.listeX[i-1])+"]";
}
else{
if(Math.round(this.listeX[i]) != this.listeX[i]){
// consoleInfos(Math.round(this.listeX[i-1]*10)/10, this.listeX[i-1]);
if(Math.round(this.listeX[i-1]*10)/10 == this.listeX[i-1]){
EDF += this.round(this.listeX[i-1])+"]";
}
else{
EDF += this.round(this.listeX[i])+"[";
}
}
else{
EDF += this.round(this.listeX[i])+"[";
}
}
}
else{
listeIndefini.push(this.listeX[i]);
}
}
}
else{
if(isFinite(this.listeY[i])){
definie = true;
if(EDF != ""){
EDF += " u ";
}
// Définition de [ ou ] en fonction de l'entier le plus proche
if(Math.round(this.listeX[i-1]) == this.listeX[i-1]){
EDF += "]"+this.round(this.listeX[i-1])+";";
}
else{
if(Math.round(this.listeX[i]) != this.listeX[i]){
if(Math.round(this.listeX[i-1]*10)/10 == this.listeX[i-1]){
EDF += "]"+this.round(this.listeX[i-1])+";";
}
else{
EDF += "["+this.round(this.listeX[i])+";";
}
}
else{
EDF += "["+this.round(this.listeX[i])+";";
}
}
}
}
}
if(definie && isFinite(this.listeY.last())){
EDF += "+∞["
definie = true;
}
for(var i=0; i<listeIndefini.length; i++){
if(i==0){
EDF += " - {"
}
EDF += listeIndefini[i]
if(i==listeIndefini.length-1){
EDF += "}"
}
else{
EDF += ";"
}
}
this.listeIndefini = listeIndefini;
document.getElementById("etudeEDF").textContent = EDF;
// consoleInfos("EDF = "+EDF);
},
pariteNum : function(){
var paire = true;
var impaire = true;
var yPositif, yNegatif;
for(var i=1; i<this.listeX.length/2; i++){
yPositif = this.listeY[this.posZero+i];
yNegatif = this.listeY[this.posZero-i];
if(yPositif<100000 && yPositif>-100000){
if(yPositif != yNegatif){
paire = false
}
if(yPositif != (-yNegatif)){
impaire = false
}
}
}
if(paire){
var text = "even";
try{
text = languages.getText("even");
}
catch(e){}
document.getElementById("etudeParite").textContent = text;
}
else if(impaire){
var text = "odd";
try{
text = languages.getText("odd");
}
catch(e){}
document.getElementById("etudeParite").textContent = text;
}
else{
var text = "odd";
try{
text = languages.getText("none_f");
}
catch(e){}
document.getElementById("etudeParite").textContent = text;
}
// consoleInfos("paire = "+paire);
// consoleInfos("impaire = "+impaire);
},
zerosNum : function(){
var f = this.f;
// Rechercher des zéros dans les points calculés
var listeZerosA = [];
for(var i=0; i<this.listeX.length; i++){
if(this.listeY[i] == 0){
listeZerosA.push(this.listeX[i]);
}
}
// consoleInfos("zérosA : "+listeZerosA);
// Recherche des zéros en prenant 2 points qui ne sont pas du même côté de l'axe
var listeZerosB = [];
var a, b;
for(var i=1; i<this.listeX.length-1; i++){
a = sign(this.listeY[i-1]);
b = sign(this.listeY[i+1]);
if(a!=b && a!=undefined && b!=undefined){
// consoleInfos(this.listeX[i]);
var zeros = [];
var check = false;
for(var x=this.listeX[i-1]; x<=this.listeX[i]; x+=this.precision/100){
// consoleInfos(f(x), this.round(f(x)));
if(this.round(f(x)) == 0){
check = true;
zeros.push(this.round(x));
// break;
}
}
if(check){
listeZerosB.push(zeros[Math.floor(zeros.length/2)]);
}
}
}
// consoleInfos("zérosB : "+listeZerosB);
// Résultat des deux méthodes
var listeZeros = listeZerosA.concat(listeZerosB);
listeZeros.removeDoubles();
this.listeZeros = listeZeros;
if(this.listeZeros.length == 0){
document.getElementById("etudeZeros").innerHTML = "Ø";
}
else{
document.getElementById("etudeZeros").innerHTML = "{"+listeZeros+"}";
}
// consoleInfos("zéros : "+listeZeros);
},
signeNum : function(){
var f = this.f;
var txtSigne = "";
var listeNbr = [];
// Remplire la liste des zéros et points indéf.
// true pour défini, false pour indéfini
// liste[0] <= point ; liste[1] <= true/false
for(var i=0; i<this.listeZeros.length; i++){
listeNbr.push([this.listeZeros[i], true]);
}
for(var i=0; i<this.listeIndefini.length; i++){
listeNbr.push([this.listeIndefini[i], false]);
}
// consoleInfos(listeNbr);
listeNbr.sort(function(nbr1,nbr2){return nbr1[0]-nbr2[0]});
// consoleInfos(listeNbr);
var dernierSigne;
var a, b;
switch(sign(this.listeY.first())){
case -1:
txtSigne += "<td>-</td>";
dernierSigne = "-";
break;
case 1:
txtSigne += "<td>+</td>";
dernierSigne = "+";
break;
}
for(var i=0; i<listeNbr.length; i++){
a = sign(f(listeNbr[i][0]-this.precision));
b = sign(f(listeNbr[i][0]+this.precision));
switch(a){
case -1:
if(dernierSigne != "-"){
txtSigne += "<td>-</td>";
}
break;
case 1:
if(dernierSigne != "+"){
txtSigne += "<td>+</td>";
}
break;
}
if(listeNbr[i][1]){
txtSigne += '<td class="bordure">'+listeNbr[i][0]+'</td>'
}
else{
txtSigne += '<td class="bordure fondNoir">'+listeNbr[i][0]+'</td>'
}
switch(b){
case -1:
txtSigne += "<td>-</td>";
dernierSigne = "-";
break;
case 1:
txtSigne += "<td>+</td>";
dernierSigne = "+";
break;
}
}
document.getElementById("etudeSigneRow").innerHTML = txtSigne;
// consoleInfos("<table><tr><td>Signe : </td>"+txtSigne+"</tr></table>");
},
asymptotesNum : function(){
var f = this.f;
// Verticales
var texteA = "";
for(var i=0; i<this.listeIndefini.length; i++){
if(texteA == ""){
texteA += "AV : " ;
}
if(i!=0){
texteA += " ; ";
}
texteA += "x = "+this.listeIndefini[i];
}
// consoleInfos("AV : "+texteA);
// Horizontales et obliques
var lim1, lim2, lim3, lim4, pente1, pente2;
var val1 = 100000;
var val2 = 10000;
// Gauche
lim1 = this.round(f(-val1));
lim2 = this.round(f(-val2));
lim3 = this.round(f(-val1+1));
lim4 = this.round(f(-val2+1));
// consoleInfos(lim1, lim2, lim3, lim4)
if(lim1==lim2){
// consoleInfos("AHG : y="+lim1);
if(texteA!=""){
texteA += "<br/>";
}
texteA += "AHG : y="+lim1;
}
else{
pente1 = this.round(lim3-lim1);
pente2 = this.round(lim4-lim2);
// consoleInfos(pente1, pente2);
if(pente1 == pente2 && pente1!=0){
// consoleInfos("AOG : y="+pente1+"x+"+(lim1+pente1*val1));
if(texteA!=""){
texteA += "<br/>";
}
texteA += "AOG : y="+pente1+"x+"+(lim1+pente1*val1);
}
}
// Droite
lim1 = this.round(f(val1));
lim2 = this.round(f(val2));
lim3 = this.round(f(val1+1));
lim4 = this.round(f(val2+1));
// consoleInfos(lim1, lim2, lim3, lim4)
if(lim1==lim2 && isFinite(lim1)){
// consoleInfos("AHD : y="+lim1);
if(texteA!=""){
texteA += "<br/>";
}
texteA += "AHD : y="+lim1;
}
else{
pente1 = this.round(lim3-lim1);
pente2 = this.round(lim4-lim2);
// consoleInfos(pente1, pente2);
if(pente1 == pente2 && pente1!=0){
// consoleInfos("AOD : y="+pente1+"x+"+(lim1-pente1*val1));
if(texteA!=""){
texteA += "<br/>";
}
texteA += "AOD : y="+pente1+"x+"+(lim1-pente1*val1);
}
}
if(texteA == ""){
texteA = "none";
try{
texteA = languages.getText("none_f");
}
catch(e){}
}
document.getElementById("etudeA").innerHTML = texteA;
},
extremumsNum : function(){
// Rechercher des zéros dans les points calculés
var listeID = [];
for(var i=1; i<this.listeX.length; i++){
if(Math.round(this.listeD[i]*10000000)/10000000 == 0){
listeID.push(i);
}
}
// Recherche des zéros en prenant 2 points qui ne sont pas du même côté de l'axe
var a, b;
for(var i=1; i<this.listeX.length-1; i++){
a = sign(this.listeD[i-1]);
b = sign(this.listeD[i+1]);
if(a!=b && a!=undefined && b!=undefined){
listeID.push(i);
}
}
// consoleInfos(listeID);
// Résultat des deux méthodes
listeID.removeDoubles();
var nbrI = 0;
var txtMinMax = "";
for(var j=0; j<listeID.length; j++){
var i = listeID[j];
var a = this.listeD[i-1];
var b = this.listeD[i+1];
// consoleInfos(a, b);
if(a<0 && b>0){
if(txtMinMax != ""){
txtMinMax += "<br/>";
}
txtMinMax += "Min("+this.listeX[i]+";"+this.round(this.listeY[i])+")";
}
else if(a>0 && b<0){
if(txtMinMax != ""){
txtMinMax += "<br/>";
}
txtMinMax += "Max("+this.listeX[i]+";"+this.round(this.listeY[i])+")";
}
}
// consoleInfos(txtMinMax);
if(txtMinMax == ""){
txtMinMax = "none";
try{
txtMinMax = languages.getText("none_m");
}
catch(e){}
}
document.getElementById("etudeMinMax").innerHTML = txtMinMax;
},
pointI : function(){
// Rechercher des zéros dans les points calculés
var listeID = [];
// for(var i=1; i<this.listeX.length; i++){
// if(Math.round(this.listeD2[i]*100000000)/100000000 == 0){
// listeID.push(i);
// // consoleInfos(this.listeD2[i-2], this.listeD2[i-1], this.listeD2[i], this.listeD2[i+1] ,this.listeD2[i+2]);
// }
// }
// Recherche des zéros en prenant 2 points qui ne sont pas du même côté de l'axe
var a, b;
for(var i=1; i<this.listeX.length-1; i++){
a = sign(this.listeD2[i-1]);
b = sign(this.listeD2[i+1]);
c1 = this.listeY[i-1];
c2 = this.listeY[i];
c3 = this.listeY[i+1];
// if(a!=b && a!=undefined && b!=undefined){
if(a!=b && a!=undefined && b!=undefined && isFinite(c1) && isFinite(c2) && isFinite(c3)){
// consoleInfos(this.listeD2[i-1],this.listeD2[i+1]);
listeID.push(i);
}
}
// consoleInfos(listeID);
// Résultat des deux méthodes
// listeID.removeDoubles();
var txtI = "";
for(var j=0; j<listeID.length; j++){
var i = listeID[j];
if(txtI != ""){
txtI += "<br/>";
}
txtI += 'I<span style="vertical-align:sub;font-size:50%;">'+(j+1)+"</span>("+this.listeX[i]+";"+this.round(this.listeY[i])+")";
}
// consoleInfos(txtI);
if(txtI == ""){
txtI = "none";
try{
txtI = languages.getText("none_m");
}
catch(e){}
}
document.getElementById("etudeI").innerHTML = txtI;
},
}
var fct = {
list : [],
couleur : "rgba(193,255,0,1)",
colorsList : ["rgba(255,0,0,1)","rgba(255,128,0,1)","rgba(255,255,0,1)","rgba(128,255,0,1)","rgba(0,255,0,1)","rgba(0,255,128,1)","rgba(0,255,255,1)","rgba(0,128,255,1)","rgba(0,0,255,1)","rgba(128,0,255,1)","rgba(255,0,255,1)","rgba(255,0,128,1)"],
interdit : [";", "interdit", "'", '"', "eval", "new", "uniboard", "sankore", "=", "document", "window", "alert", "fct", "affichage", "colorPicker", "languages"],
functionFromObject: function(f){
if(f.type == "cartesian"){
return new CartesianFunction().set(f);
}
else if(f.type == "implicit"){
return new ImplicitFunction().set(f);
}
else if(f.type == "polar"){
return new PolarFunction().set(f);
}
else if(f.type == "parametric"){
return new ParametricFunction().set(f);
}
console.err("Unknown function:", f);
},
addCartesian : function(txt){
var txtFct = this.remplacer(this.verifier(txt));
if(txtFct == ""){
return false;
}
var f = new CartesianFunction(txtFct);
this.add(f, true);
return true;
},
addImplicit : function(txtFct){
var equalPos = txtFct.indexOf("=");
if(equalPos >= 0){
txtFct = txtFct.replace("=", "-(") + ")";
}
txtFct = this.remplacer(this.verifier(txtFct));
if(txtFct == ""){
return false;
}
var f = new ImplicitFunction(txtFct);
this.add(f, true);
return true;
},
addPolar : function(txt){
var txtFct = this.remplacer(this.verifier(txt));
if(txtFct == ""){
return false;
}
var f = new PolarFunction(txtFct);
this.add(f, true);
return true;
},
addParametric : function(txtX, txtY){
var fctX = this.remplacer(this.verifier(txtX));
var fctY = this.remplacer(this.verifier(txtY));
if(fctX == "" || fctY == ""){
return false;
}
var f = new ParametricFunction(fctX, fctY);
this.add(f, true);
return true;
},
add : function(f, useRandomColor){
this.list.unshift(f);
if(useRandomColor){
f.couleur = this.colorsList[alea(0,this.colorsList.length-1)];
}
historique.ajouter(f);
this.updateList();
editeur.editer(0);
},
ajouter : function(){
var type = document.getElementById("functionType").value;
if(type == "cartesian"){
var input = document.getElementById("input");
if(this.addCartesian(input.value)){
input.value = "";
}
}
else if(type == "implicit"){
var input = document.getElementById("implicitInput");
if(this.addImplicit(input.value)){
input.value = "";
}
}
else if(type == "polar"){
var input = document.getElementById("polarInput");
if(this.addPolar(input.value)){
input.value = "";
}
}
else if(type == "parametric"){
var inputX = document.getElementById("parametricInputX");
var inputY = document.getElementById("parametricInputY");
if(this.addParametric(inputX.value, inputY.value)){
inputX.value = "";
inputY.value = "";
}
}
},
changeType : function(type){
document.getElementById("cartesianDiv").style.display = "none";
document.getElementById("implicitDiv").style.display = "none";
document.getElementById("polarDiv").style.display = "none";
document.getElementById("parametricDiv").style.display = "none";
document.getElementById(type+"Div").style.display = "initial";
},
enlever : function(id){
this.list.splice(id, 1);
this.updateList();
},
dupliquer : function(id){
var newFct = this.functionFromObject(this.list[id].get());
newFct.couleur = this.colorsList[alea(0,this.colorsList.length-1)];
this.list.splice(id+1, 0, newFct);
this.updateList();
},
etudier : function(id){
etude.etudier(this.list[id].fct);
afficherMenu("menuEtude");
},
updateList : function(){
var texteFctSupp = "";
for(var i=0; i<this.list.length; i++){
var className = "spanFonction";
if(i == editeur.idFct){
className += " spanFonctionSelect";
}
texteFctSupp += '<div class="'+className+'" onclick="editeur.editer('+i+')" style="text-shadow: 0px 0px 3px '+this.list[i].couleur+'">'+this.list[i].fct+'</div>';
}
document.getElementById("fonctionsSupp").innerHTML = texteFctSupp;
affichage.dessiner();
saveOptions();
},
verifier : function(txtFonction){
for(var i=0; i<this.interdit.length; i++){
var condition = "";
for(var k=0; k<this.interdit[i].length; k++){
if(k==0){
condition = condition + "txtFonction.charAt(j) == this.interdit[i].charAt(0)";
}
else{
condition = condition + "&& txtFonction.charAt(j+"+k+") == this.interdit[i].charAt("+k+")";
}
}
for(var j=0; j<txtFonction.length; j++){
if(eval(condition)){
document.getElementById("spanFctInterdite").innerHTML = this.interdit[i];
afficherMenu("fctInterdite");
return 0;
}
}
}
return txtFonction;
},
remplacer : function(txtFonction){
// Remplace a^b par pow(a, b)
var start = 0;
var end = 0;
var pos1, pos2;
while(true){
// start = end;
end = txtFonction.indexOf("^",0);
if(end != -1){
pos1 = txtFonction.getLastIndexOf(["+", "-", "*", "/", "%", "(", ","], start, end);
if(pos1 == -1){
pos1 = start-1;
}
pos2 = txtFonction.getIndexOf(["+", "-", "*", "/", "%", "^"], end+1);
if(pos2 == -1){
pos2 = txtFonction.length;
}
txtFonction = txtFonction.substring(0,pos1+1)+"pow("+txtFonction.substring(pos1+1,end)+","+txtFonction.substring(end+1,pos2)+")"+txtFonction.substring(pos2,txtFonction.length);
// alert(txtFonction)
}
else{
break;
}
}
return txtFonction;
},
get : function(){
var list = [];
for(var i=0; i<this.list.length; i++){
list.push(this.list[i].get());
}
return {list: list};
},
set: function(obj){
var list = obj.list;
for(var i=0; i<list.length; i++){
this.list.push(fct.functionFromObject(list[i]));
}
this.updateList();
if(this.list.length > 0){
editeur.editer(0);
}
}
};
function ImplicitFunction(txtFct){
this.setFct = function(txt){
this.fct = txt;
this.f = new Function("x", "y", "return "+this.fct);
}
if(txtFct){
this.setFct(txtFct);
}
this.couleur = fct.couleur;
this.width = document.getElementById("inputTaille").value;
this.style = document.getElementById("selectStyle").value;
this.getX = function(x){
return x;
};
this.getY = function(x){
return -1000000;
};
this.set = function(f){
var equalPos = f.fct.indexOf("=");
if(equalPos >= 0){
f.fct = f.fct.replace("=", "-(") + ")";
}
this.setFct(fct.remplacer(fct.verifier(f.fct)));
this.couleur = f.couleur;
this.width = f.width;
this.style = f.style;
return this;
};
this.get = function(){
var f = {};
f.type = "implicit";
f.fct = this.fct;
f.couleur = this.couleur;
f.width = this.width;
f.style = this.style;
return f;
};
this.readableText = function(){
return this.fct + " = 0";
};
this.plot = function(ctx, precision, affichage){
var epsilon = 0.01;
var width2 = this.width / 2;
precision /= 20;
ctx.beginPath();
ctx.lineWidth = this.width;
ctx.strokeStyle = this.couleur;
ctx.fillStyle = this.couleur;
ctx.moveTo(-100,-100);
for(var x = affichage.xGauche-precision; x <= affichage.xDroite+precision; x+=precision){
for(var y = affichage.yBas-precision; y <= affichage.yHaut+precision; y+=precision){
// Compute function for current (x, y) position
z = this.f(x, y);
// Check condition f(x, y) = 0
if(!isNaN(z) && Math.abs(z) < epsilon){
// Transform coordinates
var pointX = (x - affichage.xGauche) * affichage.multX;
var pointY = affichage.hauteur - (y - affichage.yBas) * affichage.multY;
ctx.fillRect(pointX-width2, pointY-width2, this.width, this.width);
// ctx.beginPath();
// ctx.arc(pointX, pointY, this.width, 0, 2*Math.PI, true);
// ctx.fill();
}
}
}
// ctx.stroke();
};
}
// -------------------- Fonctions de l'interface --------------------
var menuActuel = "divInputRapide"
var dernierMenu = ""
var pleinEcran = false
var maximise = true
var tailleFenetreX = window.innerWidth
......@@ -16,56 +12,23 @@ var AncienneMethodeAffichage = 0
function afficherMenu(id){
if (menuActuel == id){
cacherMenu()
dernierMenu = false;
}
else {
if (menuActuel != ""){
dernierMenu = menuActuel;
if (menuActuel !== ""){
cacherMenu()
}
menuActuel = id
document.getElementById(id).style.display = "block"
message.supprimer();
}
}
// Permet de cacher le menu actuellement affiché
function cacherMenu(){
if(menuActuel != ""){
document.getElementById(menuActuel).style.display = "none"
menuActuel = ""
}
document.getElementById(menuActuel).style.display = "none"
menuActuel = ""
}
// Affiche un message d'erreur
function afficherErreur(message){
document.getElementById("spanErreurFct").innerHTML = message;
afficherMenu("erreurFct");
}
// Messages d'info
var message = {
liste : [],
ajouter : function(x, y, contenu){
var newDiv = document.createElement("div");
newDiv.style.left = x + "px";
newDiv.style.top = y + "px";
var textDiv = document.createElement("span");
textDiv.innerHTML = contenu;
newDiv.appendChild(textDiv);
document.getElementById("divMessages").appendChild(newDiv);
},
supprimer : function(){
var div = document.getElementById("divMessages");
div.innerHTML = "";
}
};
// ---- Minimiser ou Maximiser le widget (pour Uniboard) ----
// ---- Minimiser ou Maximiser le widget (pour sankore) ----
function miniMax(){
if (maximise){
maximise = false
......@@ -86,17 +49,6 @@ function miniMax(){
}
}
// Affiche le menu +
function menuFonctions(){
if(fonction3D){
afficherMenu('menuHistorique');
}
else{
afficherMenu('menuFonctions');
editeur.editer(0);
}
}
// Action des petits bouton + et - dans les options
function boutonPlus(id, nombre){
var element = document.getElementById(id)
......@@ -112,73 +64,101 @@ function boutonMoins(id, nombre){
}
// Changer de thème
function changerTheme(theme){
var positions = [
"top-left",
"top",
"top-right",
"right",
"bottom-right",
"bottom",
"bottom-left",
"left",
"center"
];
for(var i=0; i<positions.length; i++){
var pos = positions[i];
var id = "background-" + pos;
var path = "Images/" + theme + "/" + pos + ".png";
document.getElementById(id).style.backgroundImage = "url("+path+")";
function changerTheme(){
var theme = document.getElementById("selectTheme").value
switch(theme){
case "noir":
document.body.style.backgroundImage = "url(Images/fond2.png)"
document.getElementById("gauche").style.backgroundImage = "url(Images/gauche2.png)"
document.getElementById("onglet3D").style.backgroundImage = "url(Images/onglet1.png)"
document.getElementById("texteFonction").style.color = "white"
var couleurEchelle = "rgba(255,255,255,0.8)"
var couleurGrille = "rgba(255,255,255,0.1)"
var couleurAxes = "rgba(0,0,0,0.5)"
break
case "bleu":
document.body.style.backgroundImage = "url(Images/fond4.png)"
document.getElementById("gauche").style.backgroundImage = "url(Images/gauche3.png)"
document.getElementById("onglet3D").style.backgroundImage = "url(Images/onglet2.png)"
document.getElementById("texteFonction").style.color = "white"
var couleurEchelle = "rgba(255,255,255,0.8)"
var couleurGrille = "rgba(255,255,255,0.1)"
var couleurAxes = "rgba(0,0,0,0.5)"
break
case "blanc":
document.body.style.backgroundImage = "url(Images/fond5.png)"
document.getElementById("gauche").style.backgroundImage = "url(Images/gauche3.png)"
document.getElementById("onglet3D").style.backgroundImage = "url(Images/onglet2.png)"
document.getElementById("texteFonction").style.color = "black"
var couleurEchelle = "rgba(0,0,0,0.8)"
var couleurGrille = "rgba(255,255,255,0.2)"
var couleurAxes = "rgba(0,0,0,0.5)"
break
}
// switch(theme){
// case "white":
// document.body.style.backgroundColor = "black";
// var couleurEchelle = "rgba(0,0,0,0.8)"
// var couleurGrille = "rgba(255,255,255,0.2)"
// var couleurAxes = "rgba(0,0,0,0.5)"
// break;
// default:
// document.body.style.backgroundColor = "transparent";
// var couleurEchelle = "rgba(255,255,255,0.8)"
// var couleurGrille = "rgba(255,255,255,0.1)"
// var couleurAxes = "rgba(0,0,0,0.5)"
// break;
// }
saveOptions();
}
// Affiche un message d'erreur
function error(err){
alert(" Erreur sur la page...\n\n Description: " + err.description + "\n\n Cliquez sur OK pour continuer.\n\n")
alert(" Error has occurred on the page ...\n\n Description: " + err.description + "\n\n Click 'OK' to continue.\n\n")
}
function agrandirAffichage(){
if(pleinEcran){
pleinEcran = false;
document.getElementById('background-center').style.paddingTop = "30px";
document.getElementById('ongletsHaut').style.display = "block";
document.getElementById('onglet3D').style.display = "block";
document.getElementById('boutonSaveGraph').style.display = "inline-block";
if(window.sankore || window.uniboard){
document.getElementById('zoneJoystick').style.display = "block";
document.getElementById('zoomButtons').style.display = "block";
document.getElementById('toolButtons').style.display = "block";
if (pleinEcran){
pleinEcran = false
if(fonction3D){
document.getElementById('gauche3D').style.display = "block"
largeur = 570
document.getElementById("affichage").style.width = largeur+"px"
document.getElementById("affichage").style.left = "59px"
document.getElementById("flecheGauche").style.left = "67px"
document.getElementById("flecheHaut").style.left = "290px"
document.getElementById("flecheBas").style.left = "290px"
}
else{
choixOutil(outilPrecedent)
document.getElementById('gauche').style.display = "block"
largeur = 500
document.getElementById("affichage").style.width = largeur+"px"
document.getElementById("affichage").style.left = "129px"
document.getElementById("flecheGauche").style.left = "137px"
document.getElementById("flecheHaut").style.left = "345px"
document.getElementById("flecheBas").style.left = "345px"
}
document.getElementById('haut').style.display = "block"
document.getElementById('onglet3D').style.display = "block"
hauteur = 400
document.getElementById("affichage").style.height = hauteur+"px"
document.getElementById("affichage").style.top = "52px"
}
else{
pleinEcran = true;
document.getElementById('background-center').style.paddingTop = "0px";
document.getElementById('ongletsHaut').style.display = "none";
document.getElementById('onglet3D').style.display = "none";
document.getElementById('boutonSaveGraph').style.display = "none";
if(window.sankore || window.uniboard){
document.getElementById('zoneJoystick').style.display = "none";
document.getElementById('zoomButtons').style.display = "none";
document.getElementById('toolButtons').style.display = "none";
pleinEcran = true
if(fonction3D){
document.getElementById('gauche3D').style.display = "none"
}
else{
document.getElementById('gauche').style.display = "none"
outilPrecedent = outil
choixOutil("deplacement")
}
document.getElementById('haut').style.display = "none"
document.getElementById('onglet3D').style.display = "none"
largeur = 625
hauteur = 445
document.getElementById("affichage").style.width = largeur+"px"
document.getElementById("affichage").style.left = "15px"
document.getElementById("affichage").style.height = hauteur+"px"
document.getElementById("affichage").style.top = "15px"
document.getElementById("flecheGauche").style.left = "67px"
document.getElementById("flecheHaut").style.left = "290px"
document.getElementById("flecheBas").style.left = "290px"
}
widget.resize();
actualiserGraph()
}
// Redémarre le widget
function reset(){
window.location.reload()
}
// Ferme le widget
......@@ -188,23 +168,14 @@ function close(){
// Actions de mise à jour du widget
function miseAjour(){
var txtHTML = "";
document.getElementById("thisVersion").innerHTML = '<object type="text/html" data="version.html"></object>';
for(var i=0; i<listeServeurs.length; i++){
if(i != 0){
txtHTML += '<br/>';
}
txtHTML += '<object type="text/html" data="'+listeServeurs[i]+'version.html"></object>';
// txtHTML += '<input type="button" value="utiliser" onclick="document.location.href = \''+listeServeurs[i]+'Grapheur.html\'"/>';
// txtHTML += '<input type="button" value="télécharger" onclick="window.open(\''+listeServeurs[i]+'../GraphMe.zip\', \'_blank\')"/>';
}
document.getElementById("newVersion").innerHTML = txtHTML;
afficherMenu("mAj");
afficherMenu("mAj")
choixOutil("deplacement")
document.getElementById("thisVersion").innerHTML = '<object type="text/html" data="version.html"></object>'
document.getElementById("newVersion").innerHTML = '<object type="text/html" data="http://gyb.educanet2.ch/tm-widgets/yannick/GraphMe.wgt/version.html"></object>'
}
function checkboxMaJ(){
if(versionOnline()){
if(document.location.href=='http://gyb.educanet2.ch/tm-widgets/yannick/GraphMe.wgt/Grapheur.xhtml'){
afficherMenu('erreurMaJ')
document.getElementById("checkMaJ").checked = false
}
......@@ -223,52 +194,20 @@ function checkboxMaJ(){
}
function majAuto(){
// var audio = new Audio();
// audio.src = "version.ogg";
// audio.load();
// setTimeout(function(){
// window.console.log(" "+audio.duration);
// }, 0)
if(versionOnline()){
document.getElementById("cacheMaJ").style.display = "block";
document.getElementById("checkMaJ").disabled = true;
document.getElementById("checkMaJ").checked = true;
if(document.location.href=='http://gyb.educanet2.ch/tm-widgets/yannick/GraphMe.wgt/Grapheur.xhtml'){
document.getElementById("cacheMaJ").style.display = "block"
document.getElementById("checkMaJ").checked = true
}
else{
if(document.getElementById("checkMaJ").checked){
afficherMenu('demandeMaJ');
}
}
}
function majAccept(){
// document.location.href='http://gyb.educanet2.ch/tm-widgets/yannick/GraphMe.wgt/Grapheur.html';
for(var i=0; i<listeServeurs.length; i++){
setTimeout(majServeur, i*500, listeServeurs[i]);
}
}
function majServeur(serveur){
var img = new Image();
img.onload = function(){
document.location.href = serveur + "Grapheur.html";
};
img.src = serveur + "icon.png";
}
// Retourne true si le widget est utilisé depuis un des sites en ligne
function versionOnline(){
for(var i=0; i<listeServeurs.length; i++){
if(document.location.href == listeServeurs[i]+"Grapheur.html"){
return true;
afficherMenu('demandeMaJ')
}
}
return false;
}
// Afficher une page web à la place dans la zone d'affichage
function navigateur(lien){
// cacherMenu()
// document.getElementById("affichage").innerHTML = '<object type="text/html" data="'+lien+'" style="width:100%;height:100%;"></object>'
window.open(lien, "_blank")
}
cacherMenu()
agrandirAffichage()
document.getElementById("affichage").innerHTML = '<object type="text/html" data="'+lien+'" style="width:100%;height:100%;"></object>'
}
\ No newline at end of file
var languages = {
current: "en",
init: function(){
var lang = this.navigatorLanguage();
if(lang){
lang = lang.substr(0,2);
this.set(lang);
}
},
navigatorLanguage: function(){
if(window.sankore){
return sankore.locale();
}
return navigator.language || navigator.userLanguage;
},
set: function(lang){
if(lang in langTexts){
this.current = lang;
this.setTexts(langTexts[lang]);
}
},
getText: function(id){
return langTexts[this.current][id];
},
setTexts: function(texts){
this.id("graphMeButton").textContent = texts.widgetName;
this.id("functionsButton").textContent = texts.functions;
this.id("displayButton").textContent = texts.display;
this.id("helpButton").textContent = texts.help;
this.id("boutonAgrandir").title = texts.fullscreen;
this.id("boutonSaveGraph").title = texts.save;
this.id("inputRapideButton").value = texts.displayAction;
this.id("pointTool").title = texts.pointTool;
this.id("moveTool").title = texts.moveTool;
this.id("tangentTool").title = texts.tangentTool;
this.id("menuExempleCloseButton").value = texts.close;
this.id("menuGraphMeOptionsTab").textContent = texts.options;
this.id("menuGraphMeAboutTab").textContent = texts.about;
this.id("widgetOptions").textContent = texts.widgetOptions;
this.id("widgetTheme").textContent = texts.widgetTheme;
this.id("selectThemeDarkBlue").textContent = texts.darkBlue;
this.id("selectThemeBlack").textContent = texts.black;
this.id("selectThemeBlue").textContent = texts.blue;
this.id("selectThemeWhite").textContent = texts.white;
this.id("resetWidgetButton").value = texts.resetWidget;
this.id("checkForUpdateButton").value = texts.checkForUpdate;
this.id("menuGraphMeCloseButton").value = texts.close;
this.id("menuCreditsOptionsTab").textContent = texts.options;
this.id("menuCreditsAboutTab").textContent = texts.about;
this.id("widgetDevelopedBy").textContent = texts.widgetDevelopedBy;
this.id("widgetContactInfo").textContent = texts.widgetContactInfo;
this.id("widgetBackgroundSource").textContent = texts.widgetBackgroundSource;
this.id("changelogButton").textContent = texts.changelogButton;
this.id("menuCreditsCloseButton").value = texts.close;
this.id("changelogTitle").textContent = texts.changelogTitle;
this.id("menuChangelogBackButton").value = texts.back;
this.id("menuChangelogCloseButton").value = texts.close;
this.id("menuAffichageDisplayParametersTab").textContent = texts.displayParameters;
this.id("menuAffichageFunctionsParametersTab").textContent = texts.functionsParameters;
this.id("plotRange").textContent = texts.plotRange;
this.id("xAxis").textContent = texts.xAxis;
this.id("yAxis").textContent = texts.yAxis;
this.id("xAxisTo").textContent = texts.to;
this.id("yAxisTo").textContent = texts.to;
this.id("defaultZoom").textContent = texts.defaultZoom;
this.id("defaultDisplayParameters").value = texts.defaultDisplayParameters;
this.id("displayOptions").textContent = texts.options;
this.id("displayMethod").textContent = texts.displayMethod;
this.id("showGrid").textContent = texts.showGrid;
this.id("showAxis").textContent = texts.showAxis;
this.id("showScale").textContent = texts.showScale;
this.id("graphAccuracy").textContent = texts.graphAccuracy;
this.id("improveAccuracy").textContent = texts.improveAccuracy;
this.id("menuAffichageOkButton").value = texts.ok;
this.id("menuFunctionParametersDisplayParametersTab").textContent = texts.displayParameters;
this.id("menuFunctionParametersFunctionsParametersTab").textContent = texts.functionsParameters;
this.id("defaultFunctionParameters").textContent = texts.defaultFunctionParameters;
this.id("thickness").textContent = texts.thickness;
this.id("drawDerivativeAndPrimitive").textContent = texts.drawDerivativeAndPrimitive;
this.id("drawArea").textContent = texts.drawArea;
this.id("lineStyle").textContent = texts.lineStyle;
this.id("selectStyleLine").textContent = texts.styleLine;
this.id("selectStyleDotted").textContent = texts.styleDotted;
this.id("selectStyleDashed").textContent = texts.styleDashed;
this.id("menuFunctionParametersCloseButton").value = texts.close;
this.id("display3D").textContent = texts.display3D;
this.id("displayStyle").textContent = texts.displayStyle;
this.id("displayStyleSurfaces").textContent = texts.styleSurfaces;
this.id("displayStyleDotted").textContent = texts.styleDotted;
this.id("resetDisplay3D").value = texts.resetDisplay;
this.id("graphAccuracy3D").textContent = texts.graphAccuracy;
this.id("colorsConfig").textContent = texts.colorsConfig;
this.id("useRedFor").textContent = texts.useRedFor;
this.id("useGreenFor").textContent = texts.useGreenFor;
this.id("useBlueFor").textContent = texts.useBlueFor;
this.id("redPositive").textContent = texts.positiveValues;
this.id("redNegative").textContent = texts.negativeValues;
this.id("redAlways").textContent = texts.always;
this.id("greenPositive").textContent = texts.positiveValues;
this.id("greenNegative").textContent = texts.negativeValues;
this.id("greenAlways").textContent = texts.always;
this.id("bluePositive").textContent = texts.positiveValues;
this.id("blueNegative").textContent = texts.negativeValues;
this.id("blueAlways").textContent = texts.always;
this.id("globalValue").textContent = texts.globalValue;
this.id("globalValueRange").textContent = texts.globalValueRange;
this.id("menuAffichage3dOk").value = texts.ok;
this.id("menuAideUsageTab").textContent = texts.usage;
this.id("menuAideExamplesTab").textContent = texts.examples;
this.id("howItWorks").textContent = texts.howItWorks;
this.id("howItWorksText").textContent = texts.howItWorksText;
this.id("availableFunctionsText").textContent = texts.availableFunctionsText;
this.id("basicOperations").textContent = texts.basicOperations;
this.id("plus").textContent = texts.plus;
this.id("minus").textContent = texts.minus;
this.id("multiplication").textContent = texts.multiplication;
this.id("division").textContent = texts.division;
this.id("modulus").textContent = texts.modulus;
this.id("trigonometricFunctions").textContent = texts.trigonometricFunctions;
this.id("sine").textContent = texts.sine;
this.id("cosine").textContent = texts.cosine;
this.id("tangent").textContent = texts.tangent;
this.id("cotangent").textContent = texts.cotangent;
this.id("secant").textContent = texts.secant;
this.id("cosecant").textContent = texts.cosecant;
this.id("arcSine").textContent = texts.arcSine;
this.id("arcCosine").textContent = texts.arcCosine;
this.id("arcTangent").textContent = texts.arcTangent;
this.id("arcCotangent").textContent = texts.arcCotangent;
this.id("hyperbolicFunctions").textContent = texts.hyperbolicFunctions;
this.id("hypSine").textContent = texts.hypSine;
this.id("hypCosine").textContent = texts.hypCosine;
this.id("hypTangent").textContent = texts.hypTangent;
this.id("hypCotangent").textContent = texts.hypCotangent;
this.id("hypSecant").textContent = texts.hypSecant;
this.id("hypCosecant").textContent = texts.hypCosecant;
this.id("hypArcSine").textContent = texts.hypArcSine;
this.id("hypArcCosine").textContent = texts.hypArcCosine;
this.id("hypArcTangent").textContent = texts.hypArcTangent;
this.id("hypArcCotangent").textContent = texts.hypArcCotangent;
this.id("powerAndRoot").textContent = texts.powerAndRoot;
this.id("squareRoot").textContent = texts.squareRoot;
this.id("power").textContent = texts.power;
this.id("xPowY").textContent = texts.xPowY;
this.id("root").textContent = texts.root;
this.id("rootText").textContent = texts.rootText;
this.id("expAndLog").textContent = texts.expAndLog;
this.id("naturalLog").textContent = texts.naturalLog;
this.id("decimalLog").textContent = texts.decimalLog;
this.id("absValue").textContent = texts.absValue;
this.id("rounding").textContent = texts.rounding;
this.id("roundText").textContent = texts.roundText;
this.id("ceilText").textContent = texts.ceilText;
this.id("floorText").textContent = texts.floorText;
this.id("constants").textContent = texts.constants;
this.id("keyboardShortcuts").textContent = texts.keyboardShortcuts;
this.id("moveLeft").textContent = texts.moveLeft;
this.id("moveTop").textContent = texts.moveTop;
this.id("moveRight").textContent = texts.moveRight;
this.id("moveBottom").textContent = texts.moveBottom;
this.id("menuAideCloseButton").value = texts.close;
this.id("menuAideExemplesUsageTab").textContent = texts.usage;
this.id("menuAideExemplesExamplesTab").textContent = texts.examples;
this.id("examplesText").textContent = texts.examplesText;
this.id("functions2d").textContent = texts.functions2d;
this.id("functions3d").textContent = texts.functions3d;
this.id("menuAideExemplesCloseButton").value = texts.close;
this.id("functionStudyTitle").textContent = texts.functionStudy;
this.id("domainOfDefinition").textContent = texts.domainOfDefinition;
this.id("symmetry").textContent = texts.symmetry;
this.id("zeros").textContent = texts.zeros;
this.id("sign").textContent = texts.sign;
this.id("asymptotes").textContent = texts.asymptotes;
this.id("extremums").textContent = texts.extremums;
this.id("inflexionPoints").textContent = texts.inflexionPoints;
this.id("functionStudyText").textContent = texts.functionStudyText;
this.id("menuEtudeBackButton").value = texts.back;
this.id("menuEtudeCloseButton").value = texts.close;
this.id("menuFonctionsFunctionsTab").textContent = texts.functions;
this.id("menuFonctionsHistoryTab").textContent = texts.history;
this.id("newFunction").textContent = texts.newFunction;
this.id("functionTypeCartesian").textContent = texts.cartesian;
this.id("functionTypeImplicit").textContent = texts.implicit;
this.id("functionTypePolar").textContent = texts.polar;
this.id("functionTypeParametric").textContent = texts.parametric;
this.id("addFunctionButton").value = texts.add;
this.id("functionsListText").textContent = texts.functionsListText;
this.id("editorEditPageEditTab").textContent = texts.edit;
this.id("editorEditPageToolsTab").textContent = texts.tools;
this.id("editorRangeFrom").textContent = texts.from;
this.id("editorRangeTo").textContent = texts.to;
this.id("editorThickness").textContent = texts.thickness;
this.id("editorColor").textContent = texts.color;
this.id("editorDerivatives").textContent = texts.derivatives;
this.id("editorPrimitive").textContent = texts.primitive;
this.id("editorLineStyle").textContent = texts.lineStyle;
this.id("editorStyleLine").textContent = texts.styleLine;
this.id("editorStyleDotted").textContent = texts.styleDotted;
this.id("editorStyleDashed").textContent = texts.styleDashed;
this.id("editorDrawArea").textContent = texts.drawArea;
this.id("editorDuplicate").value = texts.duplicate;
this.id("editorRemove").value = texts.remove;
this.id("editorToolsPageEditTab").textContent = texts.edit;
this.id("editorToolsPageToolsTab").textContent = texts.tools;
this.id("computePoint").textContent = texts.computePoint;
this.id("computePointButton").value = texts.compute;
this.id("computeArea").textContent = texts.computeArea;
this.id("areaFrom").textContent = texts.from;
this.id("areaTo").textContent = texts.to;
this.id("computeAreaButton").value = texts.compute;
this.id("functionStudy").textContent = texts.functionStudy;
this.id("functionStudyButton").value = texts.startStudy;
this.id("editorToolsDuplicate").value = texts.duplicate;
this.id("editorToolsRemove").value = texts.remove;
this.id("menuFonctionsCloseButton").value = texts.close;
this.id("input3dDisplayButton").value = texts.displayAction;
this.id("menuHistoriqueFunctionsTab").textContent = texts.functions;
this.id("menuHistoriqueHistoryTab").textContent = texts.history;
this.id("latestDisplayedFunctions").textContent = texts.latestDisplayedFunctions;
this.id("menuHistoriqueCloseButton").value = texts.close;
this.id("chooseColor").textContent = texts.chooseColor;
this.id("colorPickerColor").textContent = texts.color;
this.id("colorPickerValue").textContent = texts.value;
this.id("colorPickerSaturation").textContent = texts.saturation;
this.id("colorPickerRed").textContent = texts.red;
this.id("colorPickerGreen").textContent = texts.green;
this.id("colorPickerBlue").textContent = texts.blue;
this.id("inputOpacity").textContent = texts.opacity;
this.id("apercuCouleur").title = texts.newColor;
this.id("apercuCouleur2").title = texts.oldColor;
this.id("colorPickerCancelButton").value = texts.cancel;
this.id("colorPickerOkButton").value = texts.ok;
this.id("blackListError").textContent = texts.error;
this.id("cannotDrawFunction").textContent = texts.cannotDrawFunction;
this.id("invalidExpression").textContent = texts.invalidExpression;
this.id("blackListErrorOkButton").value = texts.ok;
this.id("fctError").textContent = texts.error;
this.id("checkTheFunction").textContent = texts.checkTheFunction;
this.id("errorMessage").textContent = texts.errorMessage;
this.id("youCanFindExamples").textContent = texts.youCanFindExamples;
this.id("fctErrorHelpButton").value = texts.help;
this.id("fctErrorOkButton").value = texts.ok;
this.id("menuSaveGraphTitle").textContent = texts.saveGraph;
this.id("saveWidthText").textContent = texts.width;
this.id("saveHeightText").textContent = texts.height;
this.id("saveBackgroundColor").textContent = texts.backgroundColor;
this.id("imageFormat").textContent = texts.imageFormat;
this.id("menuSaveGraphCancelButton").value = texts.cancel;
this.id("menuSaveGraphOkButton").value = texts.ok;
this.id("saveImageTitle").textContent = texts.saveImageTitle;
this.id("saveImageText").textContent = texts.saveImageText;
this.id("menuSaveImageCloseButton").value = texts.close;
this.id("updateTitle").textContent = texts.update;
this.id("currentVersion").textContent = texts.currentVersion;
this.id("latestVersionAvailable").textContent = texts.latestVersionAvailable;
// this.id("useLatestVersionText").textContent = texts.useLatestVersionText;
// this.id("useLatestVersion").value = texts.useLatestVersion;
this.id("updateBackButton").value = texts.back;
this.id("updateOkButton").value = texts.ok;
this.id("updateErrorTitle").textContent = texts.error;
this.id("updateErrorText").textContent = texts.updateErrorText;
this.id("updateErrorOkButton").value = texts.ok;
this.id("ctxMenuDisplay").textContent = texts.display;
this.id("ctxMenuAxes").textContent = texts.axes;
this.id("ctxMenuScale").textContent = texts.scale;
this.id("ctxMenuGrid").textContent = texts.grid;
this.id("ctxMenuReset").value = texts.reset;
this.id("ctxMenuSave").value = texts.save;
},
class: function(className){
return document.getElementsByClassName(className);
},
id: function(id){
return document.getElementById(id);
}
};
var langTexts = {
"fr": {
"widgetName": "GraphMe",
"functions": "Fonctions",
"display": "Affichage",
"help": "Aide",
"close": "Fermer",
"back": "Retour",
"ok": "Ok",
"fullscreen": "Plein écran",
"save": "Sauvegarder",
"displayAction": "Afficher",
"pointTool": "Outil point",
"moveTool": "Outil déplacement",
"tangentTool": "Outil tangente",
"options": "Options",
"about": "À propos",
"darkBlue": "Bleu foncé",
"black": "Noir",
"blue": "Bleu",
"white": "Blanc",
"widgetOptions": "Options du widget",
"widgetTheme": "Thème du widget",
"resetWidget": "Réinitialiser le widget",
"checkForUpdate": "Vérifier les mises à jour",
"widgetDevelopedBy": "Widget réalisé par",
"widgetContactInfo": "Si vous voulez rapporter un bug, avez une suggestion par rapport au widget ou voulez simplement poser une question, merci de me contacter par e-mail à l'adresse suivante",
"widgetBackgroundSource": "Les images d'arrière-plan viennent de l'environnement de bureau KDE",
"changelogButton": "qu'est-ce qui a changé?",
"changelogTitle": "Notes de version",
"displayParameters": "Paramètres d'affichage",
"functionsParameters": "Paramètres des fonctions",
"plotRange": "Zone d'affichage",
"xAxis": "Axe des X",
"yAxis": "Axe des Y",
"to": "à",
"defaultZoom": "Zoom par défaut",
"defaultDisplayParameters": "Réinitialiser l'affichage",
"displayMethod": "Méthode d'affichage du graphique",
"showGrid": "Afficher la grille",
"showAxis": "Afficher les axes",
"showScale": "Afficher l'échelle",
"graphAccuracy": "Précision du graphique, points calculés",
"improveAccuracy": "Améliorer la précision lors d'un zoom arrière (plus lent)",
"defaultFunctionParameters": "Paramètres par défaut des fonctions",
"thickness": "Épaisseur",
"drawDerivativeAndPrimitive": "Dessiner les dérivées et primitives",
"drawArea": "Dessiner l'aire sous la fonction",
"lineStyle": "Style de ligne",
"styleLine": "continu",
"styleDotted": "points",
"styleDashed": "traits",
"display3D": "Affichage 3D",
"displayStyle": "Style d'affichage",
"styleSurfaces": "surfaces",
"resetDisplay": "Réinitialiser l'affichage",
"colorsConfig": "Configuration des couleurs",
"useRedFor": "utiliser le rouge pour",
"useGreenFor": "utiliser le vert pour",
"useBlueFor": "utiliser le bleu pour",
"positiveValues": "valeur positive",
"negativeValues": "valeur négative",
"always": "toujours",
"globalValue": "Valeur générale",
"globalValueRange": "(entre 0 et 255)",
"usage": "Utilisation",
"examples": "Exemples",
"howItWorks": "Fonctionnement",
"howItWorksText": "Ce widget vous permet de dessiner des fonctions mathématiques. Entrez une première fonction dans le champ en haut du widget et cliquez sur le bouton \"Afficher\". Ouvrez le menu \"Fonctions\" pour modifier votre fonction ou en ajouter une nouvelle.",
"availableFunctionsText": "Vous pouvez saisir les fonctions mathématiques suivantes",
"basicOperations": "Les opérations de base",
"plus": "Addition",
"minus": "Soustraction",
"multiplication": "Multiplication",
"division": "Division",
"modulus": "Modulo",
"trigonometricFunctions": "Les fonctions trigonométriques",
"sine": "Sinus",
"cosine": "Cosinus",
"tangent": "Tangente",
"cotangent": "Cotangente",
"secant": "Secante",
"cosecant": "Cosecante",
"arcSine": "Arcsinus",
"arcCosine": "Arccosinus",
"arcTangent": "Arctangente",
"arcCotangent": "Arccotangente",
"hyperbolicFunctions": "Les fonctions hyperboliques",
"hypSine": "Sinus hyp",
"hypCosine": "Cosinus hyp",
"hypTangent": "Tangente hyp",
"hypCotangent": "Cotangente hyp",
"hypSecant": "Secante hyp",
"hypCosecant": "Cosecante hyp",
"hypArcSine": "Arcsinus hyp",
"hypArcCosine": "Arccosinus hyp",
"hypArcTangent": "Arctangente hyp",
"hypArcCotangent": "Arccotangente hyp",
"powerAndRoot": "Les racines et les puissances",
"squareRoot": "Racine carrée",
"power": "Puissances",
"xPowY": "Élève x à une puissance y",
"root": "Racines",
"rootText": "Racine y d'un nombre x",
"expAndLog": "Les exponentielles et logarithmes",
"naturalLog": "logarithme naturel",
"decimalLog": "logarithme de base",
"absValue": "La valeur absolue d'un nombre",
"rounding": "Les arrondis",
"roundText": "arrondit à l'entier le plus proche",
"ceilText": "arrondit à l'entier supérieur",
"floorText": "arrondit à l'entier inférieur",
"constants": "Constantes",
"keyboardShortcuts": "Raccourcis clavier",
"moveLeft": "déplacer le graphique à gauche",
"moveTop": "déplacer le graphique en haut",
"moveRight": "déplacer le graphique à droite",
"moveBottom": "déplacer le graphique en bas",
"examplesText": "(Vous pouvez cliquer sur un exemple pour l'afficher. Pensez à ajuster la précision du graphique dans les options si nécessaire.)",
"functions2d": "Fonctions 2D",
"functions3d": "Fonctions 3D",
"saveGraph": "Enregistrer le graphique",
"functionStudy": "Étude de fonction",
"domainOfDefinition": "Ensemble de définition",
"symmetry": "Parité",
"zeros": "Zéros de la fonction",
"sign": "Signe",
"asymptotes": "Asymptotes",
"extremums": "Extremums",
"inflexionPoints": "Points d'inflexion",
"functionStudyText": "L'outil permettant d'étudier les fonctions n'est pas fiable à 100%. Pensez à vérifier les résultats de l'étude avant d'en faire une quelconque utilisation.",
"history": "Historique",
"newFunction": "Nouvelle fonction",
"cartesian": "Cartésienne",
"implicit": "Implicite",
"polar": "Polaire",
"parametric": "Paramétrique",
"add": "Ajouter",
"functionsListText": "Fonction dessinées",
"edit": "Modifier",
"tools": "Outils",
"from": "de",
"to": "à",
"color": "Couleur",
"derivatives": "Dérivées",
"primitive": "Primitive",
"duplicate": "Dupliquer",
"remove": "Supprimer",
"computePoint": "Calculer un point de la fonction",
"compute": "Calculer",
"computeArea": "Calculer l'aire sous la fonction",
"startStudy": "Démarrer l'étude",
"latestDisplayedFunctions": "Dernières fonctions dessinées",
"chooseColor": "Choix de la couleur",
"value": "Valeur",
"saturation": "Saturation",
"red": "Rouge",
"green": "Vert",
"blue": "Bleu",
"opacity": "Opacité",
"oldColor": "Ancienne Couleur",
"newColor": "Nouvelle Couleur",
"cancel": "Annuler",
"error": "Erreur",
"cannotDrawFunction": "Impossible de dessiner la fonction",
"invalidExpression": "Expression ou caractère invalide",
"checkTheFunction": "Vérifiez la fonction que vous vouliez dessiner",
"errorMessage": "Message d'erreur",
"youCanFindExamples": "Une description ainsi que des exemples des différentes fonctions que vous pouvez dessiner se trouvent dans l'aide",
"width": "Largeur",
"height": "Hauteur",
"backgroundColor": "Couleur de fond",
"imageFormat": "Format de l'image",
"update": "Mise à jour",
"currentVersion": "Version en cours d'utilisation",
"latestVersionAvailable": "Dernière version disponible en ligne",
"useLatestVersionText": "Vous pouvez remplacer la version en cours d'utilisation par une version du widget en ligne. Notez que ceci ne met pas à jour le widget. Il faudra réitérer cette procédure la prochaine fois que vous l'utiliserez.",
"useLatestVersion": "Utiliser la dernière version",
"updateErrorText": "Il est impossible de mettre à jour le widget vers la version en ligne car vous utilisez déjà la version en ligne",
"axes": "Axes",
"scale": "Échelle",
"grid": "Grille",
"reset": "Réinitialiser",
"saveImageTitle": "Sauvegarder l'image",
"saveImageText": "Cliquez avec le bouton de droite sur l'image et sélectionnez \"Enregistrer l'image\". Il est aussi possible de choisir \"Copier l'image\" et ensuite la coller dans une autre application.",
/* Inside code */
"even": "paire",
"odd": "impaire",
"none_f": "aucune",
"none_m": "aucun",
"clickHereToModify": "Cliquez ici pour modifier les fonctions ou en ajouter une nouvelle.",
"enterFunction": "Entrez une fonction à dessiner",
"needHelp": "Consulter l'aide",
"unableLoadParameters": "Impossible de charger les paramètres enregistrés..."
}
};
// -------------------- Fonctions des outils --------------------
var listeFonctions = new Array()
var listeCouleurs = new Array()
var historique = new Array()
var ctxT
// Permet d'afficher la valeur en "y" pour un point donné en "x"
function calculerPoint() {
x = document.getElementById("inputX").value;
document.getElementById("outputX").innerHTML = " f(x) = "+fct.list[editeur.idFct].f(x)+"";
//alert("Si x = "+x+" \nf(x) = "+eval(fonction)+"")
}
// Cette fonction permet d'effectuer un zoom. Elle change la valeur des inputs à gauche
// qui définnissent la zone à afficher et actualise le graphique.
function zoom(valeur){
var diffBornes = Math.abs(parseFloat(document.getElementById("borneXGauche").value) - parseFloat(document.getElementById("borneXDroite").value))
var ajouter = (diffBornes * valeur - diffBornes)/2
var nouvelleValeur = parseFloat(document.getElementById("borneXGauche").value) - ajouter
if (nouvelleValeur < 0){ nouvelleValeur = Math.ceil(nouvelleValeur) }
if (nouvelleValeur > 0){ nouvelleValeur = Math.floor(nouvelleValeur) }
if (nouvelleValeur == parseFloat(document.getElementById("borneXGauche").value) && valeur>1){ nouvelleValeur=nouvelleValeur-1 }
if (nouvelleValeur == parseFloat(document.getElementById("borneXGauche").value) && valeur<1){ nouvelleValeur=nouvelleValeur+1 }
document.getElementById("borneXGauche").value = nouvelleValeur
var nouvelleValeur = parseFloat(document.getElementById("borneXDroite").value) + ajouter
if (nouvelleValeur < 0){ nouvelleValeur = Math.ceil(nouvelleValeur) }
if (nouvelleValeur > 0){ nouvelleValeur = Math.floor(nouvelleValeur) }
if (nouvelleValeur == parseFloat(document.getElementById("borneXDroite").value) && valeur>1){ nouvelleValeur=nouvelleValeur+1 }
if (nouvelleValeur == parseFloat(document.getElementById("borneXDroite").value) && valeur<1){ nouvelleValeur=nouvelleValeur-1 }
document.getElementById("borneXDroite").value = nouvelleValeur
var diffBornes = Math.abs(parseFloat(document.getElementById("borneYGauche").value) - parseFloat(document.getElementById("borneYDroite").value))
var ajouter = (diffBornes * valeur - diffBornes)/2
var nouvelleValeur = parseFloat(document.getElementById("borneYGauche").value) - ajouter
if (nouvelleValeur < 0){ nouvelleValeur = Math.ceil(nouvelleValeur) }
if (nouvelleValeur > 0){ nouvelleValeur = Math.floor(nouvelleValeur) }
if (nouvelleValeur == parseFloat(document.getElementById("borneYGauche").value) && valeur>1){ nouvelleValeur=nouvelleValeur-1 }
if (nouvelleValeur == parseFloat(document.getElementById("borneYGauche").value) && valeur<1){ nouvelleValeur=nouvelleValeur+1 }
document.getElementById("borneYGauche").value = nouvelleValeur
var nouvelleValeur = parseFloat(document.getElementById("borneYDroite").value) + ajouter
if (nouvelleValeur < 0){ nouvelleValeur = Math.ceil(nouvelleValeur) }
if (nouvelleValeur > 0){ nouvelleValeur = Math.floor(nouvelleValeur) }
if (nouvelleValeur == parseFloat(document.getElementById("borneYDroite").value) && valeur>1){ nouvelleValeur=nouvelleValeur+1 }
if (nouvelleValeur == parseFloat(document.getElementById("borneYDroite").value) && valeur<1){ nouvelleValeur=nouvelleValeur-1 }
document.getElementById("borneYDroite").value = nouvelleValeur
// Historique
var historique = {
liste : [],
actualiser : function(){
var texteHistorique = ""
for(var i=0; i<this.liste.length; i++){
texteHistorique += '<span class="survol" onclick="historique.use('+i+'); actualiserGraph()">';
texteHistorique += this.liste[i].readableText();
texteHistorique += '</span> <br/>';
}
document.getElementById("spanHistorique").innerHTML = texteHistorique
document.getElementById("divHistorique").scrollTop = 0
},
use : function(index){
fct.add(this.liste[index]);
},
ajouter : function(func){
if(func.fct == ""){
return;
}
for(var i=0; i<this.liste.length; i++){
if(this.liste[i].fct == func.fct){
this.liste.splice(i, 1);
}
}
var newFunction = fct.functionFromObject(func.get());
this.liste.unshift(newFunction);
this.actualiser();
saveOptions();
},
if(Math.abs(parseFloat(document.getElementById("borneXGauche").value) - parseFloat(document.getElementById("borneXDroite").value)) == 0){reinitialiserZoom(1)}
if(Math.abs(parseFloat(document.getElementById("borneYGauche").value) - parseFloat(document.getElementById("borneYDroite").value)) == 0){reinitialiserZoom(1)}
actualiserGraph()
}
get: function(){
var list = [];
for(var i=0; i<this.liste.length; i++){
list.push(this.liste[i].get());
}
return list;
},
// Permet de réinitialiser le zoom à la valeur donnée.
function reinitialiserZoom(valeur){
document.getElementById("borneXGauche").value = -valeur
document.getElementById("borneXDroite").value = valeur
document.getElementById("borneYGauche").value = -valeur
document.getElementById("borneYDroite").value = valeur
angle = Math.PI/8
valeurZoom3D = 1
gauche3D = -6.5
droite3D = 6.5
precisionDroite3D = 0.02
precisionFonction3D = 0.2
document.getElementById("inputPrecision3D").value = 0.2
actualiserGraph()
}
set: function(obj){
for(var i=0; i<obj.length; i++){
this.liste.push(fct.functionFromObject(obj[i]));
}
this.actualiser();
// Ces fonctions permettent de déplacer le graphique sur l'axe "x" et "y"
// Pour cela, elles redéfinissent la zone à afficher (à gauche dans les inputs)
function deplacerY(valeur){
document.getElementById("borneYGauche").value = parseFloat(document.getElementById("borneYGauche").value) + valeur
document.getElementById("borneYDroite").value = parseFloat(document.getElementById("borneYDroite").value) + valeur
actualiserGraph()
}
function deplacerX(valeur){
document.getElementById("borneXGauche").value = parseFloat(document.getElementById("borneXGauche").value) + valeur
document.getElementById("borneXDroite").value = parseFloat(document.getElementById("borneXDroite").value) + valeur
if(fonction3D){
angle = angle + valeur * Math.PI/8
}
actualiserGraph()
}
// Permet d'afficher la valeur en "y" pour un point donné en "x"
function execute(fonction) {
if(check(fonction)){
x = document.getElementById("inputX").value
document.getElementById("outputX").innerHTML = " f(x) = "+eval(fonction)+""
//alert("Si x = "+x+" \nf(x) = "+eval(fonction)+"")
}
}
// Ajoute la fonction mathématique se trouvant dans l'input en haut à une liste.
// Ceci est utile à l'affichage de plusieurs fonctions simultanées.
function menuFonctions(){
if(fonction3D){
afficherMenu('menuHistorique')
}
else{
afficherMenu('menuFonctions')
}
}
function ajouterFonction(fct){
listeFonctions.push(fct)
listeCouleurs.push("rgba(0,171,255,0.9)")
actualiserListeFonctions()
}
function actualiserListeFonctions(){
var texteFctSupp = ""
for(var i=0; i<listeFonctions.length; i++){
texteFctSupp += 'f(x)='+listeFonctions[i]+' <input type="button" value="-" onclick="listeFonctions.splice('+i+', 1); actualiserListeFonctions()"/>'
texteFctSupp += ' <span id="FctSupp'+i+'" title="listeCouleurs['+i+']" class="boutonCouleur" onclick="colorPicker(this.id); afficherMenu(\'menuCouleur\')">....</span><br/>'
}
document.getElementById("fonctionsSupp").innerHTML = texteFctSupp
actualiserGraph()
}
// Outils de la souris
function actualiserHistorique(){
var texteHistorique = ""
for(var i=0; i<historique.length; i++){
texteHistorique += '<span class="survol" onclick="document.getElementById(\'inputEq\').value = '
texteHistorique += "'"+historique[i]+"'"+'; actualiserGraph()">'+historique[i]+'</span> <br/>'
}
document.getElementById("spanHistorique").innerHTML = texteHistorique
document.getElementById("divHistorique").scrollTop = 0
}
var outil = {
//
idAffichage : "affichageOutils",
// Outil sélectionné
actuel : "point",
// Canvas
canvas : null,
ctx : null,
width: 0,
height: 0,
// Liste des éléments à dessiner
liste : [],
// Fonction d'initialisation
init : function(width, height){
var element = document.getElementById(this.idAffichage);
if(element.hasChildNodes()){
while(element.childNodes.length >= 1 ){
element.removeChild(element.firstChild);
}
}
this.width = width || element.clientWidth;
this.height = height || element.clientHeight;
// element.style.width = affichage.largeur +"px";
// element.style.height = affichage.hauteur +"px";
// element.style.left = document.getElementById(affichage.id).offsetLeft+1 +"px";
// element.style.top = document.getElementById(affichage.id).offsetTop+1 +"px";
this.canvas = document.createElement("canvas");
this.canvas.width = this.width;
this.canvas.height = this.height;
element.appendChild(this.canvas);
this.ctx = this.canvas.getContext('2d');
},
// Permet de changer d'outil et de faire différentes actions lors du choix de l'outil
choisir : function(nom){
document.getElementById("pointTool").className = "toolButton";
document.getElementById("moveTool").className = "toolButton";
document.getElementById("tangentTool").className = "toolButton";
switch(nom){
case 'point':
document.getElementById("pointTool").className += " selectedTool";
break;
case 'deplacement':
document.getElementById("moveTool").className += " selectedTool";
break;
case 'tangente':
document.getElementById("tangentTool").className += " selectedTool";
break;
}
if(nom == 'deplacement'){
document.getElementById("eventAffichage").style.cursor = "move";
}
else{
document.getElementById("eventAffichage").style.cursor = "auto";
}
this.dessinerListe();
this.actuel = nom;
saveOptions();
},
// Gestion des événements reçus de l'objet souris
move : function(x, y, xInit, yInit, active){
switch(this.actuel){
case "deplacement":
if(active){
this.deplacement(x, y, xInit, yInit);
}
break;
case "point":
this.point(x, y);
break;
case "tangente":
this.tangente(x, y);
break;
}
},
down : function(x, y){
switch(this.actuel){
case "point":
this.point(x, y, true)
break;
case "tangente":
this.tangente(x, y, true);
break;
}
},
// Fonctions des outils
deplacement : function(x, y, xInit, yInit){
var valeurX = (x-xInit)/affichage.multX;
var valeurY = (yInit-y)/affichage.multY;
if(Math.round(Math.abs(valeurX)) > 0){
if(fonction3D){
affichage.deplacerX(Math.round(2*valeurX)/2);
}
else{
affichage.deplacerX(-Math.round(2*valeurX)/2);
}
souris.xInit = x;
}
if(Math.round(Math.abs(valeurY)) > 0){
affichage.deplacerY(-Math.round(2*valeurY)/2);
souris.yInit = y;
}
},
point : function(sourisX, sourisY, ajouterDansListe){
var ctx = new Object();
ctx = this.ctx;
// Dessiner les points et tangentes supplémentaires
this.dessinerListe();
for(var i=0; i<fct.list.length; i++){
var func = fct.list[i];
if(!func || func == ""){
continue;
}
// Position de la souris par rapport au coin supérieur gauche de l'affichage
var posX = sourisX - affichage.offsetLeft - 2;
// Valeur de la coordonnée x et y sous la souris
var t = posX / affichage.multX + affichage.xGauche;
if("startAngle" in func){
if(t < func.startAngle || t > func.endAngle){
continue;
}
}
var x = func.getX(t);
var y = func.getY(t);
// Afficher les coordonnées et le point sous la souris
if(!isNaN(x) && !isNaN(y)){
if(ajouterDansListe){
this.ajouterPoint(x, y, func.couleur);
}
this.dessinerPoint(x, y, func.couleur);
}
}
},
dessinerPoint : function(x, y, couleur){
var ctx = new Object();
ctx = this.ctx;
// Conversion des coordonnées
var posX = coordToPosX(x) + 1;
var posY = coordToPosY(y) + 1;
ctx.shadowColor = couleur;
ctx.shadowBlur = 4;
// Texte
var txtPos = "("+Math.round(x*100)/100+";"+Math.round(y*100)/100+")";
ctx.fillStyle = "rgba(255,255,255,0.5)";
try{
ctx.bulle(posX+7, posY-7, txtPos.length*5.5, 20);
}
catch(err){
ctx.fillRect(posX+7, posY-27, txtPos.length*5.5, 20);
}
ctx.fillStyle = "black";
ctx.shadowColor = "black";
ctx.shadowOffsetX = 1;
ctx.shadowOffsetY = 1;
ctx.shadowBlur = 2;
ctx.fillText(txtPos, posX+8+txtPos.length/4, posY-13);
// Rond
ctx.beginPath();
ctx.arc(posX, posY, 4, 0, 2*Math.PI, true);
ctx.shadowColor = couleur;
ctx.shadowOffsetX = 0;
ctx.shadowOffsetY = 0;
ctx.shadowBlur = 4;
// Permet de changer d'outil et de faire différentes actions lors du choix de l'outil
function choixOutil(nom){
outil = nom
if(outil == 'deplacement'){
document.getElementById("affichage").style.cursor = "move"
document.getElementById("info").style.display = "none"
}
else{
document.getElementById("affichage").style.cursor = "auto"
document.getElementById("info").style.display = "block"
}
ctx.fillStyle = "rgba(0,0,0,1)";
ctx.strokeStyle = "rgba(255,255,255,0.8)";
ctx.lineWidth = 1;
ctx.fill()
ctx.stroke();
},
tangente : function(sourisX, sourisY, ajouterDansListe){
var delta = 0.001;
var ctx = new Object();
ctx = this.ctx;
// Dessiner les points et tangentes supplémentaires
this.dessinerListe();
// Dessiner les tangentes des fonctions
for(var i=0; i<fct.list.length; i++){
var func = fct.list[i];
// Vérifier la fonction sur laquelle doit s'appliquer l'outil
if(!func || func == ""){
continue;
}
// Position de la souris par rapport au coin supérieur gauche de l'affichage
var posX = sourisX - affichage.offsetLeft - 2;
// Valeur de la coordonnée x sous la souris
var t = posX / affichage.multX + affichage.xGauche;
if("startAngle" in func){
if(t < func.startAngle || t > func.endAngle){
continue;
}
}
var t1 = t + delta;
var x = func.getX(t);
var x1 = func.getX(t1);
// Calcul de deux valeurs y et de la pente
var y = func.getY(t);
var y1 = func.getY(t1);
var pente;
if(x1 != x){
pente = (y1-y)/(x1-x);
}
else{
pente = Number.POSITIVE_INFINITY;
}
// Dessiner la pente;
if(!isNaN(x) && !isNaN(y) && !isNaN(y1)){
if(ajouterDansListe){
this.ajouterTangente(x, y, pente, func.couleur);
}
this.dessinerTangente(x, y, pente, func.couleur);
}
}
},
dessinerTangente : function(x, y, pente, couleur){
var ctx = new Object();
ctx = this.ctx;
// Conversion des coordonnées
var posX = coordToPosX(x) + 1;
var posY = coordToPosY(y) + 1;
// Carré
ctx.shadowColor = couleur;
ctx.shadowBlur = 4;
ctx.fillStyle = "white";
ctx.fillRect(posX-3, posY-3, 6, 6);
// Pente
ctx.strokeStyle = "white";
ctx.lineWidth = 2;
ctx.beginPath();
var pente2 = pente * (affichage.hauteur/affichage.largeur) * (affichage.xDroite-affichage.xGauche)/(affichage.yHaut-affichage.yBas);
ctx.moveTo(0, posY+posX*pente2);
ctx.lineTo(affichage.largeur, posY+posX*pente2-affichage.largeur*pente2);
ctx.stroke();
// Texte
var txtPente;
if(isFinite(pente)){
txtPente = pente.toFixed(2);
}
else{
txtPente = "∞"
}
ctx.fillStyle = "rgba(255,255,255,0.5)";
try{
ctx.bulle(posX+7, posY-7, txtPente.length*5.5+1, 20);
}
catch(err){
ctx.fillRect(posX+7, posY-27, txtPente.length*5.5, 20);
}
ctx.fillStyle = "black";
ctx.shadowColor = "black";
ctx.shadowOffsetX = 1;
ctx.shadowOffsetY = 1;
ctx.shadowBlur = 2;
ctx.fillText(txtPente, posX+8+txtPente.length/4, posY-13);
},
ajouterPoint : function(x, y, couleur){
var newPoint = {
x : x,
y : y,
couleur : couleur,
dessiner : function(){
outil.dessinerPoint(this.x, this.y, this.couleur);
if(outil == 'point'){
document.getElementById("point").style.display = "block"
}
else{
document.getElementById("point").style.display = "none"
}
if(outil == 'tangente'){
document.getElementById("tangente").innerHTML = '<canvas id="canvasT" width="'+largeur+'" height="'+hauteur+'"></canvas>'
ctxT = document.getElementById('canvasT').getContext('2d')
}
else{
document.getElementById("tangente").innerHTML = ""
ctxT = null
}
}
// Fonctions servant à gérer les événements de la souris
function sourisDown(){
mouseDown = true
posSourisXinit = posSourisX
posSourisYinit = posSourisY
}
function sourisUp(){
mouseDown = false
}
function sourisMove(event){
posSourisX = event.clientX
posSourisY = event.clientY
if(mouseDown){
if(outil == "deplacement"){
var valeurX = (posSourisX-posSourisXinit)/multiplicateurX
var valeurY = (posSourisYinit-posSourisY)/multiplicateurY
if(Math.round(Math.abs(valeurX)) > 0){
deplacerX(-Math.round(2*valeurX)/2)
posSourisXinit = posSourisX
}
};
this.liste.push(newPoint);
},
ajouterTangente : function(x, y, pente, couleur){
var newTangente = {
x : x,
y : y,
pente : pente,
couleur : couleur,
dessiner : function(){
outil.dessinerTangente(this.x, this.y, this.pente, this.couleur);
if(Math.round(Math.abs(valeurY)) > 0){
deplacerY(-Math.round(2*valeurY)/2)
posSourisYinit = posSourisY
}
};
this.liste.push(newTangente);
},
dessinerListe : function(){
if(!this.ctx){
return;
//decalageX = posSourisX-posSourisXinit
//decalageY = posSourisY-posSourisYinit
//actualiserGraph()
}
this.ctx.clearRect(0,0,affichage.largeur*2,affichage.hauteur*2);
for(var i=0; i<this.liste.length; i++){
this.liste[i].dessiner();
}
if(outil == "point"){
var position = Math.round((posSourisX-132)*(borneXDroite-borneXGauche)/(precision*500))
var positionX = pointX[position]
var positionY = pointY[position]
if(!isNaN(positionX) && !isNaN(positionY)){
document.getElementById("info").innerHTML = "("+Math.round((positionX/multiplicateurX+borneXGauche)*100)/100+";"+Math.round(-(positionY/multiplicateurY-borneYDroite)*100)/100+")"
document.getElementById("point").style.left = (positionX+130-4)+"px"
document.getElementById("point").style.top = (positionY+53-10)+"px"
}
this.actualiserListe();
},
actualiserListe : function(){
var element = document.getElementById("divSuppOutil");
element.innerHTML = "";
for(var i=0; i<this.liste.length; i++){
var posX = Math.floor(coordToPosX(this.liste[i].x, true)+9);
var posY = Math.floor(coordToPosY(this.liste[i].y, true)-28);
if(posX > affichage.largeur+affichage.offsetLeft || posX < affichage.offsetLeft || posY > affichage.hauteur+affichage.offsetTop || posX < affichage.offsetTop){
continue;
}
var txt = '<div style="left:'
txt += posX +'px;';
txt += 'top:'
txt += posY +'px;" ';
txt += 'onclick="'
txt += 'outil.supprimer('+i+')';
txt += '">x</div>';
// alert(txt);
element.innerHTML += txt;
}
if(outil == "tangente"){
var position = Math.round((posSourisX-129)/multiplicateurX/precision)
var positionX = pointX[position]
var positionY = pointY[position]
var valeurPente = ((hauteur-pente[position])/multiplicateurY+borneYGauche)
//hauteur - (((y-y1)/precision - borneYGauche)* multiplicateurY)
document.getElementById("info").innerHTML = "("+Math.round(valeurPente*100)/100+")"
ctxT.clearRect(0,0,largeur*2,hauteur*2)
if(!isNaN(positionX) && !isNaN(positionY)){
ctxT.fillStyle = "white"
ctxT.fillRect (positionX-1, positionY-2, 6, 6)
ctxT.strokeStyle = "white"
ctxT.lineWidth = 2
ctxT.beginPath()
valeurPente = valeurPente * (hauteur/largeur) * (borneXDroite-borneXGauche)/(borneYDroite-borneYGauche)
ctxT.moveTo(0+4, positionY+positionX*valeurPente+1)
ctxT.lineTo(largeur+4, positionY+positionX*valeurPente-largeur*valeurPente+1)
ctxT.stroke()
}
},
supprimer : function(id){
outil.liste.splice(id, 1);
outil.dessinerListe();
// alert(id)
}
};
//document.getElementById("info").innerHTML = " "+ (posSourisX-120) + ";" + (posSourisY-43)
}
function doubleClick(ctrlKey){
if(ctrlKey){
zoom(1.25)
zoom3D(1.25)
}
else{
zoom(0.8)
zoom3D(0.8)
}
}
// Evènements du clavier
function keyPress(event){
switch(event.keyCode){
case 27:
// widget.resetState()
reset()
break
case 37:
if(event.ctrlKey){
affichage.deplacerX(-1)
deplacerX(-1)
}
break
case 38:
if(event.ctrlKey){
affichage.deplacerY(1)
deplacerY(1)
}
break
case 39:
if(event.ctrlKey){
affichage.deplacerX(1)
deplacerX(1)
}
break
case 40:
if(event.ctrlKey){
affichage.deplacerY(-1)
deplacerY(-1)
}
break
default:
......@@ -449,10 +255,32 @@ function keyPress(event){
}
// ---- Fonctions de test ----
function testSVG(){
document.getElementById("affichage").innerHTML = '<svg:svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"> <svg:line x1="0" y1="0" x2="300" y2="300" style="stroke:rgb(99,99,99);stroke-width:2"/> </svg:svg> '
}
function testCanvas(){
document.getElementById("affichage").innerHTML = '<canvas id="canvas" width="'+largeur+'" height="'+hauteur+'"></canvas>'
ctx = document.getElementById('canvas').getContext('2d')
var lingrad = ctx.createLinearGradient(100,100,largeur-100,hauteur-100)
lingrad.addColorStop(0, 'rgba(0,50,255,1)')
lingrad.addColorStop(1, 'rgba(0,255,255,1)')
ctx.fillStyle = lingrad
ctx.textAlign = "center"
ctx.font = "72px bold"
ctx.fillText("Canvas", largeur/2, hauteur/2-1)
}
function testXPM(){
document.getElementById("affichage").innerHTML = '<img src='+"'"+'data:image/xpm;ASCII,/* XPM */static char * text_xpm[] = {"100 50 2 1"," c None",". c #000000"," "," "," "," "," "," "," "," "," "," "," ..... ..... ............... ....... ....... "," ..... ..... .................. ....... ....... "," .... ..... ................... ........ ........ "," ..... ..... .................... ........ ........ "," ..... ..... .... ....... ........ ........ "," .... ..... .... ..... ......... ......... "," ..... ..... .... .... .... .... .... .... "," ..... ..... .... ..... .... ..... ..... .... "," .... ..... .... .... .... .... .... .... "," ..... ..... .... .... .... .... .... .... "," ..... ..... .... .... .... ..... ..... .... "," ..... ..... .... .... .... .... .... .... "," ......... .... ..... .... .... .... .... "," ........ .... .... .... .... .... .... "," ....... .... ..... .... .... .... .... "," ..... .... ....... .... ..... ..... .... "," ...... .................... .... .... .... .... "," ....... ................... .... .... .... .... "," ........ .................. .... ..... ..... .... "," .......... ............... .... .... .... .... "," ..... ..... .... .... ..... ..... .... "," .... ..... .... .... .... .... .... "," ..... .... .... .... ......... .... "," ..... ..... .... .... ......... .... "," ..... ..... .... .... ....... .... "," ..... .... .... .... ....... .... "," ..... ..... .... .... ..... .... "," ..... ..... .... .... ..... .... "," ..... .... .... .... .... "," ..... ..... .... .... .... "," ..... ..... .... .... .... "," ..... .... .... .... .... "," ..... ..... .... .... .... "," ..... ..... .... .... .... "," "," "," "," "," "," "};'+"'"+'width="500" height="330"/>'
}
// ---- Aire sous la fonction (intégrale) ----
function AireSousFct(fct, a, b, n){
var aire, largeurRect, gaucheRect, droiteRect, millieuRect, hauteurRect, aireRect;
var f = new Function("x", "return "+fct);
var f = function(x){
return eval(fct);
};
aire = 0;
largeurRect = (b-a)/n;
for(var i=0; i<n; i++){
......@@ -468,83 +296,13 @@ function AireSousFct(fct, a, b, n){
}
function calculerAire(){
var fonction = fct.remplacer(fct.verifier(fct.list[editeur.idFct].fct));
var a = parseInt(document.getElementById("aireG").value);
var b = parseInt(document.getElementById("aireD").value);
var n = 50;
var arrondi = Math.round(AireSousFct(fonction, a, b, n)*1000)/1000;
document.getElementById("outputAire").innerHTML = "A = " + arrondi;
actualiserGraph();
}
// ---- Sauvegarde du graphique ----
var backgroundSauvegarde = "rgba(0,0,0,0.5)";
function saveGraph(){
var userWidth = parseInt(document.getElementById("saveWidth").value);
var userHeight = parseInt(document.getElementById("saveHeight").value);
if(userWidth <= 0 || userHeight <= 0){
userWidth = affichage.width;
userHeight = affichage.height;
var fonction = document.getElementById("inputEq").value
if(check(fonction)){
var a = parseInt(document.getElementById("aireG").value);
var b = parseInt(document.getElementById("aireD").value);
var n = 50;
var arrondi = Math.round(AireSousFct(fonction, a, b, n)*1000)/1000;
document.getElementById("outputAire").innerHTML = "A = " + arrondi;
}
if(fonction3D){
var background = display3D.background;
display3D.background = backgroundSauvegarde;
display3D.init(userWidth, userHeight);
display3D.draw();
var dataURL;
if(document.getElementById("selectSaveType").value == "jpg"){
dataURL = display3D.canvas.toDataURL("image/jpeg");
}
else{
dataURL = display3D.canvas.toDataURL();
}
document.getElementById("saveImageContent").innerHTML = '<img src="' + dataURL + '"/>';
afficherMenu('menuSaveImage');
display3D.background = background;
setTimeout(function(){
display3D.init();
display3D.draw();
}, 1);
}
else{
if(affichage.methode == "canvas"){
var l = affichage.largeur;
var h = affichage.hauteur;
var c = affichage.couleurFond;
affichage.largeur = parseInt(document.getElementById("saveWidth").value);
affichage.hauteur = parseInt(document.getElementById("saveHeight").value);
affichage.couleurFond = backgroundSauvegarde;
var newDiv = document.createElement("div");
affichage.init(newDiv, userWidth, userHeight);
outil.init();
outil.dessinerListe();
affichage.ctx.drawImage(outil.canvas,0,0);
var dataURL;
if(document.getElementById("selectSaveType").value == "jpg"){
dataURL = affichage.canvas.toDataURL("image/jpeg");
}
else{
dataURL = affichage.canvas.toDataURL();
}
document.getElementById("saveImageContent").innerHTML = '<img src="' + dataURL + '"/>';
afficherMenu('menuSaveImage');
affichage.largeur = l;
affichage.hauteur = h;
affichage.couleurFond = c;
affichage.init();
outil.init();
}
else if(affichage.methode == "svg"){
window.open("JavaScript/AffichageSVG.svg");
}
}
}
actualiserGraph();
}
\ No newline at end of file
function ParametricFunction(fctX, fctY){
this.setFct = function(fctX, fctY){
this.fct = "x(t) = " + fctX + " ; y(t) = " + fctY;
this.fctX = fctX;
this.fctY = fctY;
this.fx = new Function("t", "return "+this.fctX);
this.fy = new Function("t", "return "+this.fctY);
}
if(fctX && fctY){
this.setFct(fctX, fctY);
}
this.couleur = fct.couleur;
this.width = document.getElementById("inputTaille").value;
this.startAngle = 0;
this.endAngle = 2*Math.PI;
this.from = "0";
this.to = "2*pi";
this.style = document.getElementById("selectStyle").value;
this.getX = function(t){
return this.fx(t);
};
this.getY = function(t){
return this.fy(t);
};
this.set = function(f){
var fctX = fct.remplacer(fct.verifier(f.fctX));
var fctY = fct.remplacer(fct.verifier(f.fctY));
this.setFct(fctX, fctY);
this.couleur = f.couleur;
this.width = f.width;
this.style = f.style;
this.from = f.from;
this.to = f.to;
this.startAngle = eval(fct.remplacer(fct.verifier(f.from)));
this.endAngle = eval(fct.remplacer(fct.verifier(f.to)));
return this;
};
this.get = function(){
var f = {};
f.type = "parametric";
f.fctX = this.fctX;
f.fctY = this.fctY;
f.couleur = this.couleur;
f.width = this.width;
f.style = this.style;
f.from = this.from;
f.to = this.to;
return f;
};
this.readableText = function(){
return "x(t) = " + this.fctX + "; y(t) = " + this.fctY;
};
this.setStartEnd = function(start, end){
if(start > end){
var tmp = start;
start = end;
end = start;
}
this.startAngle = start;
this.endAngle = end;
};
this.plot = function(ctx, precision, affichage){
if(this.style == "points"){
precision *= 2;
}
ctx.beginPath();
ctx.lineWidth = this.width;
ctx.strokeStyle = this.couleur;
ctx.fillStyle = this.couleur;
notDefined = true;
for(var t = this.startAngle; t <= this.endAngle; t+=precision){
var x = this.fx(t);
var y = this.fy(t);
if(!isNaN(x) && !isNaN(y)){
// Transform coordinates
var pointX = (x - affichage.xGauche) * affichage.multX;
var pointY = affichage.hauteur - (y - affichage.yBas) * affichage.multY;
// Draw point
if(notDefined){
notDefined = false;
ctx.moveTo(pointX, pointY);
}
else{
if(this.style == "continu"){
ctx.lineTo(pointX, pointY);
}
else if(this.style == "points"){
ctx.beginPath();
ctx.arc(pointX, pointY, this.width, 0, 2*Math.PI, true);
ctx.fill();
}
else{
ctx.lineTo(pointX, pointY);
notDefined = true;
}
}
}
}
if(this.style != "points"){
ctx.stroke();
}
};
}
function PolarFunction(txtFct){
this.setFct = function(txt){
this.fct = txt;
this.f = new Function("t", "return "+this.fct);
};
if(txtFct){
this.setFct(txtFct);
}
this.couleur = fct.couleur;
this.width = document.getElementById("inputTaille").value;
this.startAngle = 0;
this.endAngle = 2*Math.PI;
this.from = "0";
this.to = "2*pi";
this.style = document.getElementById("selectStyle").value;
this.getX = function(t){
var r = this.f(t);
return r * Math.cos(t);
};
this.getY = function(t){
var r = this.f(t);
return r * Math.sin(t);
};
this.set = function(f){
this.setFct(fct.remplacer(fct.verifier(f.fct)));
this.couleur = f.couleur;
this.width = f.width;
this.style = f.style;
this.from = f.from;
this.to = f.to;
this.startAngle = eval(fct.remplacer(fct.verifier(f.from)));
this.endAngle = eval(fct.remplacer(fct.verifier(f.to)));
return this;
};
this.get = function(){
var f = {};
f.type = "polar";
f.fct = this.fct;
f.couleur = this.couleur;
f.width = this.width;
f.style = this.style;
f.from = this.from;
f.to = this.to;
return f;
};
this.readableText = function(){
return "r(t) = " + this.fct;
};
this.setStartEnd = function(start, end){
if(start > end){
var tmp = start;
start = end;
end = start;
}
this.startAngle = start;
this.endAngle = end;
};
this.plot = function(ctx, precision, affichage){
if(this.style == "points"){
precision *= 2;
}
ctx.beginPath();
ctx.lineWidth = this.width;
ctx.strokeStyle = this.couleur;
ctx.fillStyle = this.couleur;
notDefined = true;
for(var t = this.startAngle; t <= this.endAngle; t+=precision){
var r = this.f(t);
if(!isNaN(r)){
// Transform coordinates
var x = r * Math.cos(t);
var y = r * Math.sin(t);
var pointX = (x - affichage.xGauche) * affichage.multX;
var pointY = affichage.hauteur - (y - affichage.yBas) * affichage.multY;
// Draw point
if(notDefined){
notDefined = false;
ctx.moveTo(pointX, pointY);
}
else{
if(this.style == "continu"){
ctx.lineTo(pointX, pointY);
}
else if(this.style == "points"){
ctx.beginPath();
ctx.arc(pointX, pointY, this.width, 0, 2*Math.PI, true);
ctx.fill();
}
else{
ctx.lineTo(pointX, pointY);
notDefined = true;
}
}
}
}
if(this.style != "points"){
ctx.stroke();
}
};
}
// Fonctions permettant de sauvegarder les options
var optionsLoaded = false;
var listeOptions = ["theme","precision","decalageX","decalageY","epaisseur","grille","axes","echelle","zoom","methode","methode3D","precision3D","maj"];
function setCookie(nom,valeur){
var jours = 545; // Durée de validité des cookies
......@@ -33,74 +31,89 @@ function delCookie(nom){
}
function saveOptions(){
if(!optionsLoaded){
return;
}
var state = JSON.stringify(widget.getState());
if(window.sankore){
sankore.setPreference("state", state);
}
else if(navigator.cookieEnabled){
setCookie("state", state);
}
setCookie("theme",document.getElementById("selectTheme").value);
setCookie("precision",document.getElementById("inputPrecision").value);
setCookie("decalageX",document.getElementById("inputDecalageX").value);
setCookie("decalageY",document.getElementById("inputDecalageY").value);
setCookie("epaisseur",document.getElementById("inputTaille").value);
setCookie("grille",document.getElementById("checkGrille").checked);
setCookie("axes",document.getElementById("checkAxes").checked);
setCookie("echelle",document.getElementById("checkEchelle").checked);
setCookie("zoom",document.getElementById("zoomDefaut").value);
setCookie("methode",document.getElementById("selectMethodeAffichage").value);
setCookie("methode3D",document.getElementById("selectAffichage3D").value);
setCookie("precision3D",document.getElementById("inputPrecision3D").value);
setCookie("maj",document.getElementById("checkMaJ").checked);
document.getElementById("infoSauvegarde").style.display = "block"
}
function loadOptions(){
var state;
if(window.sankore){
state = sankore.preference("state", null);
}
else if(navigator.cookieEnabled){
state = getCookie("state");
}
if(!state){
optionsLoaded = true;
return;
}
var stateObject = JSON.parse(state);
var goodState = widget.getState();
if(!checkState(stateObject, goodState)){
loadOptionsFailed();
}
try{
widget.setState(stateObject);
optionsLoaded = true;
if(navigator.cookieEnabled){
if(checkOptions()){
document.getElementById("selectTheme").value = getCookie("theme");
changerTheme(document.getElementById("selectTheme").value);
document.getElementById("inputPrecision").value = getCookie("precision");
document.getElementById("inputDecalageX").value = getCookie("decalageX");
document.getElementById("inputDecalageY").value = getCookie("decalageY");
document.getElementById("inputTaille").value = getCookie("epaisseur");
if(getCookie("grille")=="true"){
document.getElementById("checkGrille").checked = true;
}
else{
document.getElementById("checkGrille").checked = false;
}
if(getCookie("axes")=="true"){
document.getElementById("checkAxes").checked = true;
}
else{
document.getElementById("checkAxes").checked = false;
}
if(getCookie("echelle")=="true"){
document.getElementById("checkEchelle").checked = true;
}
else{
document.getElementById("checkEchelle").checked = false;
}
document.getElementById("zoomDefaut").value = getCookie("zoom");
document.getElementById("selectMethodeAffichage").value = getCookie("methode");
document.getElementById("selectAffichage3D").value = getCookie("methode3D");
document.getElementById("inputPrecision3D").value = getCookie("precision3D");
if(getCookie("maj")=="true"){
document.getElementById("checkMaJ").checked = true;
}
else{
document.getElementById("checkMaJ").checked = false;
}
actualiserGraph();
}
else{
if(document.cookie!=""){
alert("It's can't be downloaded ...");
}
}
}
catch(e){
loadOptionsFailed();
else{
document.getElementById("cacheCookies").style.display = "block";
}
}
function loadOptionsFailed(){
var text = "Unable to load the saved parameters...";
try{
text = languages.getText("unableLoadParameters");
function delOptions(){
var i;
for(i=0; i<listeOptions.length; i++){
delCookie(listeOptions[i]);
}
catch(e){}
alert(text);
delOptions();
}
function checkState(state, goodState){
for(var i in goodState){
if(! i in state){
return false;
function checkOptions(){
var test = true;
for(i=0; i<listeOptions.length; i++){
if(getCookie(listeOptions[i])==""){
test = false;
}
}
return true;
}
function delOptions(){
if(window.sankore){
sankore.setPreference("state", "");
}
else if(navigator.cookieEnabled){
delCookie("state");
}
return test;
}
function alertOptions(){
// alert("Options actuellement sauvegardées\n------------------------------------------------------------\n"+document.cookie);
document.getElementById("divAlertCookies").innerHTML = document.cookie;
afficherMenu("menuAlertCookies");
}
alert(sankoreLang[lang].show_saved + "\n------------------------------------------------------------\n"+document.cookie);
}
\ No newline at end of file
var souris = {
active : false,
xInit : 0,
yInit : 0,
down : function(event){
var x = event.clientX;
var y = event.clientY;
this.active = true;
this.xInit = x;
this.yInit = y;
if(event.button != 2 && !ctxMenu.ouvert){
outil.down(x, y);
}
ctxMenu.fermer();
},
up : function(){
this.active = false;
},
move : function(event){
var x = event.clientX;
var y = event.clientY;
outil.move(x, y, souris.xInit, souris.yInit, souris.active);
},
out : function(event){
outil.dessinerListe();
if(event.relatedTarget && event.relatedTarget.className != "flecheDeplacement"){
this.active = false;
}
},
wheel : function(event){
if(!event) event = window.event;
if(event.wheelDelta){
if(event.wheelDelta < 0){
affichage.zoom(1.25);
}
else{
affichage.zoom(0.8);
}
}
else if(event.detail){
if(event.detail > 0){
affichage.zoom(1.25);
}
else{
affichage.zoom(0.8);
}
}
},
dblClick : function(event){
if(event.ctrlKey){
affichage.zoom(1.25)
display3D.zoom(1.25)
}
else{
affichage.zoom(0.8)
display3D.zoom(0.8)
}
}
}
var ctxMenu = {
id : "ctxMenu",
ouvert : false,
ouvrir : function(){
if(!fonction3D){
ctxMenu.ouvert = true;
var element = document.getElementById("ctxMenu");
var x = souris.xInit;
var y = souris.yInit;
// var x = 300;
// var y = 300;
element.style.display = "block";
element.style.left = (x+1)+"px";
element.style.top = (y+1)+"px";
// Désactive le menu du navigateur
return false;
}
},
fermer : function(){
ctxMenu.ouvert = false;
var element = document.getElementById("ctxMenu");
element.style.display = "none";
}
}
// 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(){
affichage.calculer();
}
// Retourne l'index du dernier endroit où se trouve listCharacter dans une chaîne de caractère.
String.prototype.getLastIndexOf = function(listCharacter, minPos, maxPos){
var count = 0;
var parenthese = false;
if(!maxPos){
maxPos = this.length;
}
for(var i=maxPos; i>=minPos; i--){
if(this.charAt(i) == ")"){
count++;
parenthese = true;
}
else if(this.charAt(i) == "("){
count--;
}
// window.console.log(this.charAt(i)+" ; "+count);
for(var j=0; j<listCharacter.length; j++){
if(this.charAt(i) == listCharacter[j]){
if(count<=0){
if(parenthese){
parenthese = false;
}
else{
return i;
}
}
}
}
}
return -1;
}
String.prototype.getIndexOf = function(listCharacter, minPos, maxPos){
var count = 0;
if(!maxPos){
maxPos = this.length;
}
for(var i=minPos; i<=maxPos; i++){
if(this.charAt(i) == "("){
count++;
}
else if(this.charAt(i) == ")"){
count--;
}
for(var j=0; j<listCharacter.length; j++){
if(this.charAt(i) == listCharacter[j]){
if(count==0){
return i;
}
}
}
}
return -1;
}
// Retourne un nombre aléatoire entre a et b.
function alea(a,b){
return Math.floor((b-a+1)*Math.random()+a);
}
// ---- Fonctions canvas personnalisées ----
var ctxPrototype = Object.getPrototypeOf(document.createElement("canvas").getContext("2d"));
// Dessiner une bulle
ctxPrototype.bulle = function(x, y, largeur, hauteur, rayon){
if(!rayon){
rayon = 5;
}
this.beginPath();
this.moveTo(x+0, y-rayon);
this.quadraticCurveTo(x+0, y-0, x+rayon, y-0);
this.lineTo(x+largeur-rayon, y);
this.quadraticCurveTo(x+largeur, y-0, x+largeur, y-rayon);
this.lineTo(x+largeur, y-hauteur+rayon);
this.quadraticCurveTo(x+largeur, y-hauteur, x+largeur-rayon, y-hauteur);
this.lineTo(x+rayon, y-hauteur);
this.quadraticCurveTo(x+0, y-hauteur, x+0, y-hauteur+rayon);
this.closePath();
this.fill();
}
// ---- 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 PI = pi;
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();
}
var listeServeurs = [
'http://yannick.vessaz.net/GraphMe/GraphMe.wgt/'
/*'http://gyb.educanet2.ch/tm-widgets/yannick/GraphMe.wgt/'*/
];
var widget = {
init: function(){
// try{
document.getElementById('inputRapide').value = "";
document.getElementById('selectTheme').value = "darkblue";
affichage.setOptions();
document.getElementById('zoomDefaut').value = "3.7";
document.getElementById('functionType').value = "cartesian";
document.getElementById('inputTaille').value = "3";
document.getElementById('checkDerivee1').checked = false;
document.getElementById('checkDerivee2').checked = false;
document.getElementById('checkPrimitive1').checked = false;
document.getElementById('checkAire').checked = false;
document.getElementById('selectStyle').value = "continu";
document.getElementById('input3D').value = "";
document.getElementById('inputPrecision3D').value = "0.2";
document.getElementById('selectAffichage3D').value = "surfaces";
document.getElementById('selectRouge3D').value = "plus";
document.getElementById('selectVert3D').value = "moins";
document.getElementById('selectBleu3D').value = "tout";
document.getElementById('couleur3Dgenerale').value = "0";
affichage.init();
outil.init();
editorPreview.init();
display3D.checkCouleurs3D();
loadOptions();
if(!fonction3D){
if(fct.list.length == 0){
this.displayStartInput();
}
else if(!window.sankore){
this.displayFunctionsHelp();
}
}
// }
// catch(err){
// alert(err+'\n'+err.stack);
// }
},
displayStartInput: function(){
document.getElementById('divInputRapide').style.display = "block";
var textEnterFunction = "Enter a cartesian function";
try{
textEnterFunction = languages.getText("enterFunction");
}
catch(e){}
var textNeedHelp = "Need help ?";
try{
textNeedHelp = languages.getText("needHelp");
}
catch(e){}
var text = textEnterFunction + '. <a onclick="' + "message.supprimer(); afficherMenu('menuAide') " + '">'+ textNeedHelp +'</a>'
message.ajouter(275,75,text);
setTimeout(message.supprimer, 15000);
document.getElementById('inputRapide').focus();
},
addStartFunction: function(){
message.supprimer();
document.getElementById('divInputRapide').style.display = 'none';
document.getElementById('input').value = document.getElementById('inputRapide').value;
fct.ajouter();
this.displayFunctionsHelp();
},
displayFunctionsHelp: function(){
var text = "Click here to modify the functions or add a new function.";
try{
text = languages.getText("clickHereToModify");
}
catch(e){}
setTimeout(function(){message.ajouter(220,35,text)}, 50);
setTimeout(message.supprimer, 5000);
},
resize: function(){
if(fonction3D){
display3D.init();
display3D.draw();
}
else{
affichage.init();
}
outil.init();
},
reset: function(){
delOptions();
window.location.reload();
},
getState: function(){
var state = {
theme: document.getElementById("selectTheme").value,
displayMethod: document.getElementById("selectMethodeAffichage").value,
defaultZoom: document.getElementById("zoomDefaut").value,
displayGrid: document.getElementById("checkGrille").checked,
displayAxes: document.getElementById("checkAxes").checked,
displayScale: document.getElementById("checkEchelle").checked,
accuracy: document.getElementById("inputPrecision").value,
improvedAccuracy: document.getElementById("checkPrecision").checked,
thickness: document.getElementById("inputTaille").value,
lineStyle: document.getElementById("selectStyle").value,
derivative1: document.getElementById("checkDerivee1").checked,
derivative2: document.getElementById("checkDerivee2").checked,
primitive: document.getElementById("checkPrimitive1").checked,
drawArea: document.getElementById("checkAire").checked,
lineStyle3D: document.getElementById("selectAffichage3D").value,
accuracy3D: document.getElementById("inputPrecision3D").value,
plotHistory: historique.get(),
functions: fct.get(),
display3D: fonction3D,
input3D: document.getElementById('input3D').value,
currentTool: outil.actuel
};
if(window.sankore){
state.fullScreen = pleinEcran;
state.displayLeft = affichage.xGauche;
state.displayRight = affichage.xDroite;
state.displayUp = affichage.yHaut;
state.displayDown = affichage.yBas;
}
return state;
},
setState: function(state){
document.getElementById("selectTheme").value = state.theme;
document.getElementById("selectMethodeAffichage").value = state.displayMethod;
document.getElementById("zoomDefaut").value = state.defaultZoom;
document.getElementById("checkGrille").checked = state.displayGrid;
document.getElementById("checkAxes").checked = state.displayAxes;
document.getElementById("checkEchelle").checked = state.displayScale;
document.getElementById("inputPrecision").value = state.accuracy;
document.getElementById("checkPrecision").checked = state.improvedAccuracy;
document.getElementById("inputTaille").value = state.thickness;
document.getElementById("selectStyle").value = state.lineStyle;
document.getElementById("checkDerivee1").checked = state.derivative1;
document.getElementById("checkDerivee2").checked = state.derivative2;
document.getElementById("checkPrimitive1").checked = state.primitive;
document.getElementById("checkAire").checked = state.drawArea;
document.getElementById("selectAffichage3D").value = state.lineStyle3D;
document.getElementById("inputPrecision3D").value = state.accuracy3D;
historique.set(state.plotHistory);
fct.set(state.functions);
document.getElementById('input3D').value = state.input3D || "";
if(state.display3D){
activer3D();
}
if(window.sankore){
if(state.fullScreen){
agrandirAffichage();
}
affichage.xGauche = state.displayLeft;
affichage.xDroite = state.displayRight;
affichage.yHaut = state.displayUp;
affichage.yBas = state.displayDown;
affichage.setBornes();
}
affichage.getOptions();
if(!window.sankore){
affichage.initZoom2(document.getElementById('zoomDefaut').value);
}
changerTheme(document.getElementById("selectTheme").value);
if(state.display3D){
display3D.draw();
}
else{
affichage.dessiner();
}
outil.choisir(state.currentTool);
}
};
/*
* jQuery JavaScript Library v1.3.2
* http://jquery.com/
*
* Copyright (c) 2009 John Resig
* Dual licensed under the MIT and GPL licenses.
* http://docs.jquery.com/License
*
* Date: 2009-02-19 17:34:21 -0500 (Thu, 19 Feb 2009)
* Revision: 6246
*/
(function(){var l=this,g,y=l.jQuery,p=l.$,o=l.jQuery=l.$=function(E,F){return new o.fn.init(E,F)},D=/^[^<]*(<(.|\s)+>)[^>]*$|^#([\w-]+)$/,f=/^.[^:#\[\.,]*$/;o.fn=o.prototype={init:function(E,H){E=E||document;if(E.nodeType){this[0]=E;this.length=1;this.context=E;return this}if(typeof E==="string"){var G=D.exec(E);if(G&&(G[1]||!H)){if(G[1]){E=o.clean([G[1]],H)}else{var I=document.getElementById(G[3]);if(I&&I.id!=G[3]){return o().find(E)}var F=o(I||[]);F.context=document;F.selector=E;return F}}else{return o(H).find(E)}}else{if(o.isFunction(E)){return o(document).ready(E)}}if(E.selector&&E.context){this.selector=E.selector;this.context=E.context}return this.setArray(o.isArray(E)?E:o.makeArray(E))},selector:"",jquery:"1.3.2",size:function(){return this.length},get:function(E){return E===g?Array.prototype.slice.call(this):this[E]},pushStack:function(F,H,E){var G=o(F);G.prevObject=this;G.context=this.context;if(H==="find"){G.selector=this.selector+(this.selector?" ":"")+E}else{if(H){G.selector=this.selector+"."+H+"("+E+")"}}return G},setArray:function(E){this.length=0;Array.prototype.push.apply(this,E);return this},each:function(F,E){return o.each(this,F,E)},index:function(E){return o.inArray(E&&E.jquery?E[0]:E,this)},attr:function(F,H,G){var E=F;if(typeof F==="string"){if(H===g){return this[0]&&o[G||"attr"](this[0],F)}else{E={};E[F]=H}}return this.each(function(I){for(F in E){o.attr(G?this.style:this,F,o.prop(this,E[F],G,I,F))}})},css:function(E,F){if((E=="width"||E=="height")&&parseFloat(F)<0){F=g}return this.attr(E,F,"curCSS")},text:function(F){if(typeof F!=="object"&&F!=null){return this.empty().append((this[0]&&this[0].ownerDocument||document).createTextNode(F))}var E="";o.each(F||this,function(){o.each(this.childNodes,function(){if(this.nodeType!=8){E+=this.nodeType!=1?this.nodeValue:o.fn.text([this])}})});return E},wrapAll:function(E){if(this[0]){var F=o(E,this[0].ownerDocument).clone();if(this[0].parentNode){F.insertBefore(this[0])}F.map(function(){var G=this;while(G.firstChild){G=G.firstChild}return G}).append(this)}return this},wrapInner:function(E){return this.each(function(){o(this).contents().wrapAll(E)})},wrap:function(E){return this.each(function(){o(this).wrapAll(E)})},append:function(){return this.domManip(arguments,true,function(E){if(this.nodeType==1){this.appendChild(E)}})},prepend:function(){return this.domManip(arguments,true,function(E){if(this.nodeType==1){this.insertBefore(E,this.firstChild)}})},before:function(){return this.domManip(arguments,false,function(E){this.parentNode.insertBefore(E,this)})},after:function(){return this.domManip(arguments,false,function(E){this.parentNode.insertBefore(E,this.nextSibling)})},end:function(){return this.prevObject||o([])},push:[].push,sort:[].sort,splice:[].splice,find:function(E){if(this.length===1){var F=this.pushStack([],"find",E);F.length=0;o.find(E,this[0],F);return F}else{return this.pushStack(o.unique(o.map(this,function(G){return o.find(E,G)})),"find",E)}},clone:function(G){var E=this.map(function(){if(!o.support.noCloneEvent&&!o.isXMLDoc(this)){var I=this.outerHTML;if(!I){var J=this.ownerDocument.createElement("div");J.appendChild(this.cloneNode(true));I=J.innerHTML}return o.clean([I.replace(/ jQuery\d+="(?:\d+|null)"/g,"").replace(/^\s*/,"")])[0]}else{return this.cloneNode(true)}});if(G===true){var H=this.find("*").andSelf(),F=0;E.find("*").andSelf().each(function(){if(this.nodeName!==H[F].nodeName){return}var I=o.data(H[F],"events");for(var K in I){for(var J in I[K]){o.event.add(this,K,I[K][J],I[K][J].data)}}F++})}return E},filter:function(E){return this.pushStack(o.isFunction(E)&&o.grep(this,function(G,F){return E.call(G,F)})||o.multiFilter(E,o.grep(this,function(F){return F.nodeType===1})),"filter",E)},closest:function(E){var G=o.expr.match.POS.test(E)?o(E):null,F=0;return this.map(function(){var H=this;while(H&&H.ownerDocument){if(G?G.index(H)>-1:o(H).is(E)){o.data(H,"closest",F);return H}H=H.parentNode;F++}})},not:function(E){if(typeof E==="string"){if(f.test(E)){return this.pushStack(o.multiFilter(E,this,true),"not",E)}else{E=o.multiFilter(E,this)}}var F=E.length&&E[E.length-1]!==g&&!E.nodeType;return this.filter(function(){return F?o.inArray(this,E)<0:this!=E})},add:function(E){return this.pushStack(o.unique(o.merge(this.get(),typeof E==="string"?o(E):o.makeArray(E))))},is:function(E){return !!E&&o.multiFilter(E,this).length>0},hasClass:function(E){return !!E&&this.is("."+E)},val:function(K){if(K===g){var E=this[0];if(E){if(o.nodeName(E,"option")){return(E.attributes.value||{}).specified?E.value:E.text}if(o.nodeName(E,"select")){var I=E.selectedIndex,L=[],M=E.options,H=E.type=="select-one";if(I<0){return null}for(var F=H?I:0,J=H?I+1:M.length;F<J;F++){var G=M[F];if(G.selected){K=o(G).val();if(H){return K}L.push(K)}}return L}return(E.value||"").replace(/\r/g,"")}return g}if(typeof K==="number"){K+=""}return this.each(function(){if(this.nodeType!=1){return}if(o.isArray(K)&&/radio|checkbox/.test(this.type)){this.checked=(o.inArray(this.value,K)>=0||o.inArray(this.name,K)>=0)}else{if(o.nodeName(this,"select")){var N=o.makeArray(K);o("option",this).each(function(){this.selected=(o.inArray(this.value,N)>=0||o.inArray(this.text,N)>=0)});if(!N.length){this.selectedIndex=-1}}else{this.value=K}}})},html:function(E){return E===g?(this[0]?this[0].innerHTML.replace(/ jQuery\d+="(?:\d+|null)"/g,""):null):this.empty().append(E)},replaceWith:function(E){return this.after(E).remove()},eq:function(E){return this.slice(E,+E+1)},slice:function(){return this.pushStack(Array.prototype.slice.apply(this,arguments),"slice",Array.prototype.slice.call(arguments).join(","))},map:function(E){return this.pushStack(o.map(this,function(G,F){return E.call(G,F,G)}))},andSelf:function(){return this.add(this.prevObject)},domManip:function(J,M,L){if(this[0]){var I=(this[0].ownerDocument||this[0]).createDocumentFragment(),F=o.clean(J,(this[0].ownerDocument||this[0]),I),H=I.firstChild;if(H){for(var G=0,E=this.length;G<E;G++){L.call(K(this[G],H),this.length>1||G>0?I.cloneNode(true):I)}}if(F){o.each(F,z)}}return this;function K(N,O){return M&&o.nodeName(N,"table")&&o.nodeName(O,"tr")?(N.getElementsByTagName("tbody")[0]||N.appendChild(N.ownerDocument.createElement("tbody"))):N}}};o.fn.init.prototype=o.fn;function z(E,F){if(F.src){o.ajax({url:F.src,async:false,dataType:"script"})}else{o.globalEval(F.text||F.textContent||F.innerHTML||"")}if(F.parentNode){F.parentNode.removeChild(F)}}function e(){return +new Date}o.extend=o.fn.extend=function(){var J=arguments[0]||{},H=1,I=arguments.length,E=false,G;if(typeof J==="boolean"){E=J;J=arguments[1]||{};H=2}if(typeof J!=="object"&&!o.isFunction(J)){J={}}if(I==H){J=this;--H}for(;H<I;H++){if((G=arguments[H])!=null){for(var F in G){var K=J[F],L=G[F];if(J===L){continue}if(E&&L&&typeof L==="object"&&!L.nodeType){J[F]=o.extend(E,K||(L.length!=null?[]:{}),L)}else{if(L!==g){J[F]=L}}}}}return J};var b=/z-?index|font-?weight|opacity|zoom|line-?height/i,q=document.defaultView||{},s=Object.prototype.toString;o.extend({noConflict:function(E){l.$=p;if(E){l.jQuery=y}return o},isFunction:function(E){return s.call(E)==="[object Function]"},isArray:function(E){return s.call(E)==="[object Array]"},isXMLDoc:function(E){return E.nodeType===9&&E.documentElement.nodeName!=="HTML"||!!E.ownerDocument&&o.isXMLDoc(E.ownerDocument)},globalEval:function(G){if(G&&/\S/.test(G)){var F=document.getElementsByTagName("head")[0]||document.documentElement,E=document.createElement("script");E.type="text/javascript";if(o.support.scriptEval){E.appendChild(document.createTextNode(G))}else{E.text=G}F.insertBefore(E,F.firstChild);F.removeChild(E)}},nodeName:function(F,E){return F.nodeName&&F.nodeName.toUpperCase()==E.toUpperCase()},each:function(G,K,F){var E,H=0,I=G.length;if(F){if(I===g){for(E in G){if(K.apply(G[E],F)===false){break}}}else{for(;H<I;){if(K.apply(G[H++],F)===false){break}}}}else{if(I===g){for(E in G){if(K.call(G[E],E,G[E])===false){break}}}else{for(var J=G[0];H<I&&K.call(J,H,J)!==false;J=G[++H]){}}}return G},prop:function(H,I,G,F,E){if(o.isFunction(I)){I=I.call(H,F)}return typeof I==="number"&&G=="curCSS"&&!b.test(E)?I+"px":I},className:{add:function(E,F){o.each((F||"").split(/\s+/),function(G,H){if(E.nodeType==1&&!o.className.has(E.className,H)){E.className+=(E.className?" ":"")+H}})},remove:function(E,F){if(E.nodeType==1){E.className=F!==g?o.grep(E.className.split(/\s+/),function(G){return !o.className.has(F,G)}).join(" "):""}},has:function(F,E){return F&&o.inArray(E,(F.className||F).toString().split(/\s+/))>-1}},swap:function(H,G,I){var E={};for(var F in G){E[F]=H.style[F];H.style[F]=G[F]}I.call(H);for(var F in G){H.style[F]=E[F]}},css:function(H,F,J,E){if(F=="width"||F=="height"){var L,G={position:"absolute",visibility:"hidden",display:"block"},K=F=="width"?["Left","Right"]:["Top","Bottom"];function I(){L=F=="width"?H.offsetWidth:H.offsetHeight;if(E==="border"){return}o.each(K,function(){if(!E){L-=parseFloat(o.curCSS(H,"padding"+this,true))||0}if(E==="margin"){L+=parseFloat(o.curCSS(H,"margin"+this,true))||0}else{L-=parseFloat(o.curCSS(H,"border"+this+"Width",true))||0}})}if(H.offsetWidth!==0){I()}else{o.swap(H,G,I)}return Math.max(0,Math.round(L))}return o.curCSS(H,F,J)},curCSS:function(I,F,G){var L,E=I.style;if(F=="opacity"&&!o.support.opacity){L=o.attr(E,"opacity");return L==""?"1":L}if(F.match(/float/i)){F=w}if(!G&&E&&E[F]){L=E[F]}else{if(q.getComputedStyle){if(F.match(/float/i)){F="float"}F=F.replace(/([A-Z])/g,"-$1").toLowerCase();var M=q.getComputedStyle(I,null);if(M){L=M.getPropertyValue(F)}if(F=="opacity"&&L==""){L="1"}}else{if(I.currentStyle){var J=F.replace(/\-(\w)/g,function(N,O){return O.toUpperCase()});L=I.currentStyle[F]||I.currentStyle[J];if(!/^\d+(px)?$/i.test(L)&&/^\d/.test(L)){var H=E.left,K=I.runtimeStyle.left;I.runtimeStyle.left=I.currentStyle.left;E.left=L||0;L=E.pixelLeft+"px";E.left=H;I.runtimeStyle.left=K}}}}return L},clean:function(F,K,I){K=K||document;if(typeof K.createElement==="undefined"){K=K.ownerDocument||K[0]&&K[0].ownerDocument||document}if(!I&&F.length===1&&typeof F[0]==="string"){var H=/^<(\w+)\s*\/?>$/.exec(F[0]);if(H){return[K.createElement(H[1])]}}var G=[],E=[],L=K.createElement("div");o.each(F,function(P,S){if(typeof S==="number"){S+=""}if(!S){return}if(typeof S==="string"){S=S.replace(/(<(\w+)[^>]*?)\/>/g,function(U,V,T){return T.match(/^(abbr|br|col|img|input|link|meta|param|hr|area|embed)$/i)?U:V+"></"+T+">"});var O=S.replace(/^\s+/,"").substring(0,10).toLowerCase();var Q=!O.indexOf("<opt")&&[1,"<select multiple='multiple'>","</select>"]||!O.indexOf("<leg")&&[1,"<fieldset>","</fieldset>"]||O.match(/^<(thead|tbody|tfoot|colg|cap)/)&&[1,"<table>","</table>"]||!O.indexOf("<tr")&&[2,"<table><tbody>","</tbody></table>"]||(!O.indexOf("<td")||!O.indexOf("<th"))&&[3,"<table><tbody><tr>","</tr></tbody></table>"]||!O.indexOf("<col")&&[2,"<table><tbody></tbody><colgroup>","</colgroup></table>"]||!o.support.htmlSerialize&&[1,"div<div>","</div>"]||[0,"",""];L.innerHTML=Q[1]+S+Q[2];while(Q[0]--){L=L.lastChild}if(!o.support.tbody){var R=/<tbody/i.test(S),N=!O.indexOf("<table")&&!R?L.firstChild&&L.firstChild.childNodes:Q[1]=="<table>"&&!R?L.childNodes:[];for(var M=N.length-1;M>=0;--M){if(o.nodeName(N[M],"tbody")&&!N[M].childNodes.length){N[M].parentNode.removeChild(N[M])}}}if(!o.support.leadingWhitespace&&/^\s/.test(S)){L.insertBefore(K.createTextNode(S.match(/^\s*/)[0]),L.firstChild)}S=o.makeArray(L.childNodes)}if(S.nodeType){G.push(S)}else{G=o.merge(G,S)}});if(I){for(var J=0;G[J];J++){if(o.nodeName(G[J],"script")&&(!G[J].type||G[J].type.toLowerCase()==="text/javascript")){E.push(G[J].parentNode?G[J].parentNode.removeChild(G[J]):G[J])}else{if(G[J].nodeType===1){G.splice.apply(G,[J+1,0].concat(o.makeArray(G[J].getElementsByTagName("script"))))}I.appendChild(G[J])}}return E}return G},attr:function(J,G,K){if(!J||J.nodeType==3||J.nodeType==8){return g}var H=!o.isXMLDoc(J),L=K!==g;G=H&&o.props[G]||G;if(J.tagName){var F=/href|src|style/.test(G);if(G=="selected"&&J.parentNode){J.parentNode.selectedIndex}if(G in J&&H&&!F){if(L){if(G=="type"&&o.nodeName(J,"input")&&J.parentNode){throw"type property can't be changed"}J[G]=K}if(o.nodeName(J,"form")&&J.getAttributeNode(G)){return J.getAttributeNode(G).nodeValue}if(G=="tabIndex"){var I=J.getAttributeNode("tabIndex");return I&&I.specified?I.value:J.nodeName.match(/(button|input|object|select|textarea)/i)?0:J.nodeName.match(/^(a|area)$/i)&&J.href?0:g}return J[G]}if(!o.support.style&&H&&G=="style"){return o.attr(J.style,"cssText",K)}if(L){J.setAttribute(G,""+K)}var E=!o.support.hrefNormalized&&H&&F?J.getAttribute(G,2):J.getAttribute(G);return E===null?g:E}if(!o.support.opacity&&G=="opacity"){if(L){J.zoom=1;J.filter=(J.filter||"").replace(/alpha\([^)]*\)/,"")+(parseInt(K)+""=="NaN"?"":"alpha(opacity="+K*100+")")}return J.filter&&J.filter.indexOf("opacity=")>=0?(parseFloat(J.filter.match(/opacity=([^)]*)/)[1])/100)+"":""}G=G.replace(/-([a-z])/ig,function(M,N){return N.toUpperCase()});if(L){J[G]=K}return J[G]},trim:function(E){return(E||"").replace(/^\s+|\s+$/g,"")},makeArray:function(G){var E=[];if(G!=null){var F=G.length;if(F==null||typeof G==="string"||o.isFunction(G)||G.setInterval){E[0]=G}else{while(F){E[--F]=G[F]}}}return E},inArray:function(G,H){for(var E=0,F=H.length;E<F;E++){if(H[E]===G){return E}}return -1},merge:function(H,E){var F=0,G,I=H.length;if(!o.support.getAll){while((G=E[F++])!=null){if(G.nodeType!=8){H[I++]=G}}}else{while((G=E[F++])!=null){H[I++]=G}}return H},unique:function(K){var F=[],E={};try{for(var G=0,H=K.length;G<H;G++){var J=o.data(K[G]);if(!E[J]){E[J]=true;F.push(K[G])}}}catch(I){F=K}return F},grep:function(F,J,E){var G=[];for(var H=0,I=F.length;H<I;H++){if(!E!=!J(F[H],H)){G.push(F[H])}}return G},map:function(E,J){var F=[];for(var G=0,H=E.length;G<H;G++){var I=J(E[G],G);if(I!=null){F[F.length]=I}}return F.concat.apply([],F)}});var C=navigator.userAgent.toLowerCase();o.browser={version:(C.match(/.+(?:rv|it|ra|ie)[\/: ]([\d.]+)/)||[0,"0"])[1],safari:/webkit/.test(C),opera:/opera/.test(C),msie:/msie/.test(C)&&!/opera/.test(C),mozilla:/mozilla/.test(C)&&!/(compatible|webkit)/.test(C)};o.each({parent:function(E){return E.parentNode},parents:function(E){return o.dir(E,"parentNode")},next:function(E){return o.nth(E,2,"nextSibling")},prev:function(E){return o.nth(E,2,"previousSibling")},nextAll:function(E){return o.dir(E,"nextSibling")},prevAll:function(E){return o.dir(E,"previousSibling")},siblings:function(E){return o.sibling(E.parentNode.firstChild,E)},children:function(E){return o.sibling(E.firstChild)},contents:function(E){return o.nodeName(E,"iframe")?E.contentDocument||E.contentWindow.document:o.makeArray(E.childNodes)}},function(E,F){o.fn[E]=function(G){var H=o.map(this,F);if(G&&typeof G=="string"){H=o.multiFilter(G,H)}return this.pushStack(o.unique(H),E,G)}});o.each({appendTo:"append",prependTo:"prepend",insertBefore:"before",insertAfter:"after",replaceAll:"replaceWith"},function(E,F){o.fn[E]=function(G){var J=[],L=o(G);for(var K=0,H=L.length;K<H;K++){var I=(K>0?this.clone(true):this).get();o.fn[F].apply(o(L[K]),I);J=J.concat(I)}return this.pushStack(J,E,G)}});o.each({removeAttr:function(E){o.attr(this,E,"");if(this.nodeType==1){this.removeAttribute(E)}},addClass:function(E){o.className.add(this,E)},removeClass:function(E){o.className.remove(this,E)},toggleClass:function(F,E){if(typeof E!=="boolean"){E=!o.className.has(this,F)}o.className[E?"add":"remove"](this,F)},remove:function(E){if(!E||o.filter(E,[this]).length){o("*",this).add([this]).each(function(){o.event.remove(this);o.removeData(this)});if(this.parentNode){this.parentNode.removeChild(this)}}},empty:function(){o(this).children().remove();while(this.firstChild){this.removeChild(this.firstChild)}}},function(E,F){o.fn[E]=function(){return this.each(F,arguments)}});function j(E,F){return E[0]&&parseInt(o.curCSS(E[0],F,true),10)||0}var h="jQuery"+e(),v=0,A={};o.extend({cache:{},data:function(F,E,G){F=F==l?A:F;var H=F[h];if(!H){H=F[h]=++v}if(E&&!o.cache[H]){o.cache[H]={}}if(G!==g){o.cache[H][E]=G}return E?o.cache[H][E]:H},removeData:function(F,E){F=F==l?A:F;var H=F[h];if(E){if(o.cache[H]){delete o.cache[H][E];E="";for(E in o.cache[H]){break}if(!E){o.removeData(F)}}}else{try{delete F[h]}catch(G){if(F.removeAttribute){F.removeAttribute(h)}}delete o.cache[H]}},queue:function(F,E,H){if(F){E=(E||"fx")+"queue";var G=o.data(F,E);if(!G||o.isArray(H)){G=o.data(F,E,o.makeArray(H))}else{if(H){G.push(H)}}}return G},dequeue:function(H,G){var E=o.queue(H,G),F=E.shift();if(!G||G==="fx"){F=E[0]}if(F!==g){F.call(H)}}});o.fn.extend({data:function(E,G){var H=E.split(".");H[1]=H[1]?"."+H[1]:"";if(G===g){var F=this.triggerHandler("getData"+H[1]+"!",[H[0]]);if(F===g&&this.length){F=o.data(this[0],E)}return F===g&&H[1]?this.data(H[0]):F}else{return this.trigger("setData"+H[1]+"!",[H[0],G]).each(function(){o.data(this,E,G)})}},removeData:function(E){return this.each(function(){o.removeData(this,E)})},queue:function(E,F){if(typeof E!=="string"){F=E;E="fx"}if(F===g){return o.queue(this[0],E)}return this.each(function(){var G=o.queue(this,E,F);if(E=="fx"&&G.length==1){G[0].call(this)}})},dequeue:function(E){return this.each(function(){o.dequeue(this,E)})}});
/*
* Sizzle CSS Selector Engine - v0.9.3
* Copyright 2009, The Dojo Foundation
* Released under the MIT, BSD, and GPL Licenses.
* More information: http://sizzlejs.com/
*/
(function(){var R=/((?:\((?:\([^()]+\)|[^()]+)+\)|\[(?:\[[^[\]]*\]|['"][^'"]*['"]|[^[\]'"]+)+\]|\\.|[^ >+~,(\[\\]+)+|[>+~])(\s*,\s*)?/g,L=0,H=Object.prototype.toString;var F=function(Y,U,ab,ac){ab=ab||[];U=U||document;if(U.nodeType!==1&&U.nodeType!==9){return[]}if(!Y||typeof Y!=="string"){return ab}var Z=[],W,af,ai,T,ad,V,X=true;R.lastIndex=0;while((W=R.exec(Y))!==null){Z.push(W[1]);if(W[2]){V=RegExp.rightContext;break}}if(Z.length>1&&M.exec(Y)){if(Z.length===2&&I.relative[Z[0]]){af=J(Z[0]+Z[1],U)}else{af=I.relative[Z[0]]?[U]:F(Z.shift(),U);while(Z.length){Y=Z.shift();if(I.relative[Y]){Y+=Z.shift()}af=J(Y,af)}}}else{var ae=ac?{expr:Z.pop(),set:E(ac)}:F.find(Z.pop(),Z.length===1&&U.parentNode?U.parentNode:U,Q(U));af=F.filter(ae.expr,ae.set);if(Z.length>0){ai=E(af)}else{X=false}while(Z.length){var ah=Z.pop(),ag=ah;if(!I.relative[ah]){ah=""}else{ag=Z.pop()}if(ag==null){ag=U}I.relative[ah](ai,ag,Q(U))}}if(!ai){ai=af}if(!ai){throw"Syntax error, unrecognized expression: "+(ah||Y)}if(H.call(ai)==="[object Array]"){if(!X){ab.push.apply(ab,ai)}else{if(U.nodeType===1){for(var aa=0;ai[aa]!=null;aa++){if(ai[aa]&&(ai[aa]===true||ai[aa].nodeType===1&&K(U,ai[aa]))){ab.push(af[aa])}}}else{for(var aa=0;ai[aa]!=null;aa++){if(ai[aa]&&ai[aa].nodeType===1){ab.push(af[aa])}}}}}else{E(ai,ab)}if(V){F(V,U,ab,ac);if(G){hasDuplicate=false;ab.sort(G);if(hasDuplicate){for(var aa=1;aa<ab.length;aa++){if(ab[aa]===ab[aa-1]){ab.splice(aa--,1)}}}}}return ab};F.matches=function(T,U){return F(T,null,null,U)};F.find=function(aa,T,ab){var Z,X;if(!aa){return[]}for(var W=0,V=I.order.length;W<V;W++){var Y=I.order[W],X;if((X=I.match[Y].exec(aa))){var U=RegExp.leftContext;if(U.substr(U.length-1)!=="\\"){X[1]=(X[1]||"").replace(/\\/g,"");Z=I.find[Y](X,T,ab);if(Z!=null){aa=aa.replace(I.match[Y],"");break}}}}if(!Z){Z=T.getElementsByTagName("*")}return{set:Z,expr:aa}};F.filter=function(ad,ac,ag,W){var V=ad,ai=[],aa=ac,Y,T,Z=ac&&ac[0]&&Q(ac[0]);while(ad&&ac.length){for(var ab in I.filter){if((Y=I.match[ab].exec(ad))!=null){var U=I.filter[ab],ah,af;T=false;if(aa==ai){ai=[]}if(I.preFilter[ab]){Y=I.preFilter[ab](Y,aa,ag,ai,W,Z);if(!Y){T=ah=true}else{if(Y===true){continue}}}if(Y){for(var X=0;(af=aa[X])!=null;X++){if(af){ah=U(af,Y,X,aa);var ae=W^!!ah;if(ag&&ah!=null){if(ae){T=true}else{aa[X]=false}}else{if(ae){ai.push(af);T=true}}}}}if(ah!==g){if(!ag){aa=ai}ad=ad.replace(I.match[ab],"");if(!T){return[]}break}}}if(ad==V){if(T==null){throw"Syntax error, unrecognized expression: "+ad}else{break}}V=ad}return aa};var I=F.selectors={order:["ID","NAME","TAG"],match:{ID:/#((?:[\w\u00c0-\uFFFF_-]|\\.)+)/,CLASS:/\.((?:[\w\u00c0-\uFFFF_-]|\\.)+)/,NAME:/\[name=['"]*((?:[\w\u00c0-\uFFFF_-]|\\.)+)['"]*\]/,ATTR:/\[\s*((?:[\w\u00c0-\uFFFF_-]|\\.)+)\s*(?:(\S?=)\s*(['"]*)(.*?)\3|)\s*\]/,TAG:/^((?:[\w\u00c0-\uFFFF\*_-]|\\.)+)/,CHILD:/:(only|nth|last|first)-child(?:\((even|odd|[\dn+-]*)\))?/,POS:/:(nth|eq|gt|lt|first|last|even|odd)(?:\((\d*)\))?(?=[^-]|$)/,PSEUDO:/:((?:[\w\u00c0-\uFFFF_-]|\\.)+)(?:\((['"]*)((?:\([^\)]+\)|[^\2\(\)]*)+)\2\))?/},attrMap:{"class":"className","for":"htmlFor"},attrHandle:{href:function(T){return T.getAttribute("href")}},relative:{"+":function(aa,T,Z){var X=typeof T==="string",ab=X&&!/\W/.test(T),Y=X&&!ab;if(ab&&!Z){T=T.toUpperCase()}for(var W=0,V=aa.length,U;W<V;W++){if((U=aa[W])){while((U=U.previousSibling)&&U.nodeType!==1){}aa[W]=Y||U&&U.nodeName===T?U||false:U===T}}if(Y){F.filter(T,aa,true)}},">":function(Z,U,aa){var X=typeof U==="string";if(X&&!/\W/.test(U)){U=aa?U:U.toUpperCase();for(var V=0,T=Z.length;V<T;V++){var Y=Z[V];if(Y){var W=Y.parentNode;Z[V]=W.nodeName===U?W:false}}}else{for(var V=0,T=Z.length;V<T;V++){var Y=Z[V];if(Y){Z[V]=X?Y.parentNode:Y.parentNode===U}}if(X){F.filter(U,Z,true)}}},"":function(W,U,Y){var V=L++,T=S;if(!U.match(/\W/)){var X=U=Y?U:U.toUpperCase();T=P}T("parentNode",U,V,W,X,Y)},"~":function(W,U,Y){var V=L++,T=S;if(typeof U==="string"&&!U.match(/\W/)){var X=U=Y?U:U.toUpperCase();T=P}T("previousSibling",U,V,W,X,Y)}},find:{ID:function(U,V,W){if(typeof V.getElementById!=="undefined"&&!W){var T=V.getElementById(U[1]);return T?[T]:[]}},NAME:function(V,Y,Z){if(typeof Y.getElementsByName!=="undefined"){var U=[],X=Y.getElementsByName(V[1]);for(var W=0,T=X.length;W<T;W++){if(X[W].getAttribute("name")===V[1]){U.push(X[W])}}return U.length===0?null:U}},TAG:function(T,U){return U.getElementsByTagName(T[1])}},preFilter:{CLASS:function(W,U,V,T,Z,aa){W=" "+W[1].replace(/\\/g,"")+" ";if(aa){return W}for(var X=0,Y;(Y=U[X])!=null;X++){if(Y){if(Z^(Y.className&&(" "+Y.className+" ").indexOf(W)>=0)){if(!V){T.push(Y)}}else{if(V){U[X]=false}}}}return false},ID:function(T){return T[1].replace(/\\/g,"")},TAG:function(U,T){for(var V=0;T[V]===false;V++){}return T[V]&&Q(T[V])?U[1]:U[1].toUpperCase()},CHILD:function(T){if(T[1]=="nth"){var U=/(-?)(\d*)n((?:\+|-)?\d*)/.exec(T[2]=="even"&&"2n"||T[2]=="odd"&&"2n+1"||!/\D/.test(T[2])&&"0n+"+T[2]||T[2]);T[2]=(U[1]+(U[2]||1))-0;T[3]=U[3]-0}T[0]=L++;return T},ATTR:function(X,U,V,T,Y,Z){var W=X[1].replace(/\\/g,"");if(!Z&&I.attrMap[W]){X[1]=I.attrMap[W]}if(X[2]==="~="){X[4]=" "+X[4]+" "}return X},PSEUDO:function(X,U,V,T,Y){if(X[1]==="not"){if(X[3].match(R).length>1||/^\w/.test(X[3])){X[3]=F(X[3],null,null,U)}else{var W=F.filter(X[3],U,V,true^Y);if(!V){T.push.apply(T,W)}return false}}else{if(I.match.POS.test(X[0])||I.match.CHILD.test(X[0])){return true}}return X},POS:function(T){T.unshift(true);return T}},filters:{enabled:function(T){return T.disabled===false&&T.type!=="hidden"},disabled:function(T){return T.disabled===true},checked:function(T){return T.checked===true},selected:function(T){T.parentNode.selectedIndex;return T.selected===true},parent:function(T){return !!T.firstChild},empty:function(T){return !T.firstChild},has:function(V,U,T){return !!F(T[3],V).length},header:function(T){return/h\d/i.test(T.nodeName)},text:function(T){return"text"===T.type},radio:function(T){return"radio"===T.type},checkbox:function(T){return"checkbox"===T.type},file:function(T){return"file"===T.type},password:function(T){return"password"===T.type},submit:function(T){return"submit"===T.type},image:function(T){return"image"===T.type},reset:function(T){return"reset"===T.type},button:function(T){return"button"===T.type||T.nodeName.toUpperCase()==="BUTTON"},input:function(T){return/input|select|textarea|button/i.test(T.nodeName)}},setFilters:{first:function(U,T){return T===0},last:function(V,U,T,W){return U===W.length-1},even:function(U,T){return T%2===0},odd:function(U,T){return T%2===1},lt:function(V,U,T){return U<T[3]-0},gt:function(V,U,T){return U>T[3]-0},nth:function(V,U,T){return T[3]-0==U},eq:function(V,U,T){return T[3]-0==U}},filter:{PSEUDO:function(Z,V,W,aa){var U=V[1],X=I.filters[U];if(X){return X(Z,W,V,aa)}else{if(U==="contains"){return(Z.textContent||Z.innerText||"").indexOf(V[3])>=0}else{if(U==="not"){var Y=V[3];for(var W=0,T=Y.length;W<T;W++){if(Y[W]===Z){return false}}return true}}}},CHILD:function(T,W){var Z=W[1],U=T;switch(Z){case"only":case"first":while(U=U.previousSibling){if(U.nodeType===1){return false}}if(Z=="first"){return true}U=T;case"last":while(U=U.nextSibling){if(U.nodeType===1){return false}}return true;case"nth":var V=W[2],ac=W[3];if(V==1&&ac==0){return true}var Y=W[0],ab=T.parentNode;if(ab&&(ab.sizcache!==Y||!T.nodeIndex)){var X=0;for(U=ab.firstChild;U;U=U.nextSibling){if(U.nodeType===1){U.nodeIndex=++X}}ab.sizcache=Y}var aa=T.nodeIndex-ac;if(V==0){return aa==0}else{return(aa%V==0&&aa/V>=0)}}},ID:function(U,T){return U.nodeType===1&&U.getAttribute("id")===T},TAG:function(U,T){return(T==="*"&&U.nodeType===1)||U.nodeName===T},CLASS:function(U,T){return(" "+(U.className||U.getAttribute("class"))+" ").indexOf(T)>-1},ATTR:function(Y,W){var V=W[1],T=I.attrHandle[V]?I.attrHandle[V](Y):Y[V]!=null?Y[V]:Y.getAttribute(V),Z=T+"",X=W[2],U=W[4];return T==null?X==="!=":X==="="?Z===U:X==="*="?Z.indexOf(U)>=0:X==="~="?(" "+Z+" ").indexOf(U)>=0:!U?Z&&T!==false:X==="!="?Z!=U:X==="^="?Z.indexOf(U)===0:X==="$="?Z.substr(Z.length-U.length)===U:X==="|="?Z===U||Z.substr(0,U.length+1)===U+"-":false},POS:function(X,U,V,Y){var T=U[2],W=I.setFilters[T];if(W){return W(X,V,U,Y)}}}};var M=I.match.POS;for(var O in I.match){I.match[O]=RegExp(I.match[O].source+/(?![^\[]*\])(?![^\(]*\))/.source)}var E=function(U,T){U=Array.prototype.slice.call(U);if(T){T.push.apply(T,U);return T}return U};try{Array.prototype.slice.call(document.documentElement.childNodes)}catch(N){E=function(X,W){var U=W||[];if(H.call(X)==="[object Array]"){Array.prototype.push.apply(U,X)}else{if(typeof X.length==="number"){for(var V=0,T=X.length;V<T;V++){U.push(X[V])}}else{for(var V=0;X[V];V++){U.push(X[V])}}}return U}}var G;if(document.documentElement.compareDocumentPosition){G=function(U,T){var V=U.compareDocumentPosition(T)&4?-1:U===T?0:1;if(V===0){hasDuplicate=true}return V}}else{if("sourceIndex" in document.documentElement){G=function(U,T){var V=U.sourceIndex-T.sourceIndex;if(V===0){hasDuplicate=true}return V}}else{if(document.createRange){G=function(W,U){var V=W.ownerDocument.createRange(),T=U.ownerDocument.createRange();V.selectNode(W);V.collapse(true);T.selectNode(U);T.collapse(true);var X=V.compareBoundaryPoints(Range.START_TO_END,T);if(X===0){hasDuplicate=true}return X}}}}(function(){var U=document.createElement("form"),V="script"+(new Date).getTime();U.innerHTML="<input name='"+V+"'/>";var T=document.documentElement;T.insertBefore(U,T.firstChild);if(!!document.getElementById(V)){I.find.ID=function(X,Y,Z){if(typeof Y.getElementById!=="undefined"&&!Z){var W=Y.getElementById(X[1]);return W?W.id===X[1]||typeof W.getAttributeNode!=="undefined"&&W.getAttributeNode("id").nodeValue===X[1]?[W]:g:[]}};I.filter.ID=function(Y,W){var X=typeof Y.getAttributeNode!=="undefined"&&Y.getAttributeNode("id");return Y.nodeType===1&&X&&X.nodeValue===W}}T.removeChild(U)})();(function(){var T=document.createElement("div");T.appendChild(document.createComment(""));if(T.getElementsByTagName("*").length>0){I.find.TAG=function(U,Y){var X=Y.getElementsByTagName(U[1]);if(U[1]==="*"){var W=[];for(var V=0;X[V];V++){if(X[V].nodeType===1){W.push(X[V])}}X=W}return X}}T.innerHTML="<a href='#'></a>";if(T.firstChild&&typeof T.firstChild.getAttribute!=="undefined"&&T.firstChild.getAttribute("href")!=="#"){I.attrHandle.href=function(U){return U.getAttribute("href",2)}}})();if(document.querySelectorAll){(function(){var T=F,U=document.createElement("div");U.innerHTML="<p class='TEST'></p>";if(U.querySelectorAll&&U.querySelectorAll(".TEST").length===0){return}F=function(Y,X,V,W){X=X||document;if(!W&&X.nodeType===9&&!Q(X)){try{return E(X.querySelectorAll(Y),V)}catch(Z){}}return T(Y,X,V,W)};F.find=T.find;F.filter=T.filter;F.selectors=T.selectors;F.matches=T.matches})()}if(document.getElementsByClassName&&document.documentElement.getElementsByClassName){(function(){var T=document.createElement("div");T.innerHTML="<div class='test e'></div><div class='test'></div>";if(T.getElementsByClassName("e").length===0){return}T.lastChild.className="e";if(T.getElementsByClassName("e").length===1){return}I.order.splice(1,0,"CLASS");I.find.CLASS=function(U,V,W){if(typeof V.getElementsByClassName!=="undefined"&&!W){return V.getElementsByClassName(U[1])}}})()}function P(U,Z,Y,ad,aa,ac){var ab=U=="previousSibling"&&!ac;for(var W=0,V=ad.length;W<V;W++){var T=ad[W];if(T){if(ab&&T.nodeType===1){T.sizcache=Y;T.sizset=W}T=T[U];var X=false;while(T){if(T.sizcache===Y){X=ad[T.sizset];break}if(T.nodeType===1&&!ac){T.sizcache=Y;T.sizset=W}if(T.nodeName===Z){X=T;break}T=T[U]}ad[W]=X}}}function S(U,Z,Y,ad,aa,ac){var ab=U=="previousSibling"&&!ac;for(var W=0,V=ad.length;W<V;W++){var T=ad[W];if(T){if(ab&&T.nodeType===1){T.sizcache=Y;T.sizset=W}T=T[U];var X=false;while(T){if(T.sizcache===Y){X=ad[T.sizset];break}if(T.nodeType===1){if(!ac){T.sizcache=Y;T.sizset=W}if(typeof Z!=="string"){if(T===Z){X=true;break}}else{if(F.filter(Z,[T]).length>0){X=T;break}}}T=T[U]}ad[W]=X}}}var K=document.compareDocumentPosition?function(U,T){return U.compareDocumentPosition(T)&16}:function(U,T){return U!==T&&(U.contains?U.contains(T):true)};var Q=function(T){return T.nodeType===9&&T.documentElement.nodeName!=="HTML"||!!T.ownerDocument&&Q(T.ownerDocument)};var J=function(T,aa){var W=[],X="",Y,V=aa.nodeType?[aa]:aa;while((Y=I.match.PSEUDO.exec(T))){X+=Y[0];T=T.replace(I.match.PSEUDO,"")}T=I.relative[T]?T+"*":T;for(var Z=0,U=V.length;Z<U;Z++){F(T,V[Z],W)}return F.filter(X,W)};o.find=F;o.filter=F.filter;o.expr=F.selectors;o.expr[":"]=o.expr.filters;F.selectors.filters.hidden=function(T){return T.offsetWidth===0||T.offsetHeight===0};F.selectors.filters.visible=function(T){return T.offsetWidth>0||T.offsetHeight>0};F.selectors.filters.animated=function(T){return o.grep(o.timers,function(U){return T===U.elem}).length};o.multiFilter=function(V,T,U){if(U){V=":not("+V+")"}return F.matches(V,T)};o.dir=function(V,U){var T=[],W=V[U];while(W&&W!=document){if(W.nodeType==1){T.push(W)}W=W[U]}return T};o.nth=function(X,T,V,W){T=T||1;var U=0;for(;X;X=X[V]){if(X.nodeType==1&&++U==T){break}}return X};o.sibling=function(V,U){var T=[];for(;V;V=V.nextSibling){if(V.nodeType==1&&V!=U){T.push(V)}}return T};return;l.Sizzle=F})();o.event={add:function(I,F,H,K){if(I.nodeType==3||I.nodeType==8){return}if(I.setInterval&&I!=l){I=l}if(!H.guid){H.guid=this.guid++}if(K!==g){var G=H;H=this.proxy(G);H.data=K}var E=o.data(I,"events")||o.data(I,"events",{}),J=o.data(I,"handle")||o.data(I,"handle",function(){return typeof o!=="undefined"&&!o.event.triggered?o.event.handle.apply(arguments.callee.elem,arguments):g});J.elem=I;o.each(F.split(/\s+/),function(M,N){var O=N.split(".");N=O.shift();H.type=O.slice().sort().join(".");var L=E[N];if(o.event.specialAll[N]){o.event.specialAll[N].setup.call(I,K,O)}if(!L){L=E[N]={};if(!o.event.special[N]||o.event.special[N].setup.call(I,K,O)===false){if(I.addEventListener){I.addEventListener(N,J,false)}else{if(I.attachEvent){I.attachEvent("on"+N,J)}}}}L[H.guid]=H;o.event.global[N]=true});I=null},guid:1,global:{},remove:function(K,H,J){if(K.nodeType==3||K.nodeType==8){return}var G=o.data(K,"events"),F,E;if(G){if(H===g||(typeof H==="string"&&H.charAt(0)==".")){for(var I in G){this.remove(K,I+(H||""))}}else{if(H.type){J=H.handler;H=H.type}o.each(H.split(/\s+/),function(M,O){var Q=O.split(".");O=Q.shift();var N=RegExp("(^|\\.)"+Q.slice().sort().join(".*\\.")+"(\\.|$)");if(G[O]){if(J){delete G[O][J.guid]}else{for(var P in G[O]){if(N.test(G[O][P].type)){delete G[O][P]}}}if(o.event.specialAll[O]){o.event.specialAll[O].teardown.call(K,Q)}for(F in G[O]){break}if(!F){if(!o.event.special[O]||o.event.special[O].teardown.call(K,Q)===false){if(K.removeEventListener){K.removeEventListener(O,o.data(K,"handle"),false)}else{if(K.detachEvent){K.detachEvent("on"+O,o.data(K,"handle"))}}}F=null;delete G[O]}}})}for(F in G){break}if(!F){var L=o.data(K,"handle");if(L){L.elem=null}o.removeData(K,"events");o.removeData(K,"handle")}}},trigger:function(I,K,H,E){var G=I.type||I;if(!E){I=typeof I==="object"?I[h]?I:o.extend(o.Event(G),I):o.Event(G);if(G.indexOf("!")>=0){I.type=G=G.slice(0,-1);I.exclusive=true}if(!H){I.stopPropagation();if(this.global[G]){o.each(o.cache,function(){if(this.events&&this.events[G]){o.event.trigger(I,K,this.handle.elem)}})}}if(!H||H.nodeType==3||H.nodeType==8){return g}I.result=g;I.target=H;K=o.makeArray(K);K.unshift(I)}I.currentTarget=H;var J=o.data(H,"handle");if(J){J.apply(H,K)}if((!H[G]||(o.nodeName(H,"a")&&G=="click"))&&H["on"+G]&&H["on"+G].apply(H,K)===false){I.result=false}if(!E&&H[G]&&!I.isDefaultPrevented()&&!(o.nodeName(H,"a")&&G=="click")){this.triggered=true;try{H[G]()}catch(L){}}this.triggered=false;if(!I.isPropagationStopped()){var F=H.parentNode||H.ownerDocument;if(F){o.event.trigger(I,K,F,true)}}},handle:function(K){var J,E;K=arguments[0]=o.event.fix(K||l.event);K.currentTarget=this;var L=K.type.split(".");K.type=L.shift();J=!L.length&&!K.exclusive;var I=RegExp("(^|\\.)"+L.slice().sort().join(".*\\.")+"(\\.|$)");E=(o.data(this,"events")||{})[K.type];for(var G in E){var H=E[G];if(J||I.test(H.type)){K.handler=H;K.data=H.data;var F=H.apply(this,arguments);if(F!==g){K.result=F;if(F===false){K.preventDefault();K.stopPropagation()}}if(K.isImmediatePropagationStopped()){break}}}},props:"altKey attrChange attrName bubbles button cancelable charCode clientX clientY ctrlKey currentTarget data detail eventPhase fromElement handler keyCode metaKey newValue originalTarget pageX pageY prevValue relatedNode relatedTarget screenX screenY shiftKey srcElement target toElement view wheelDelta which".split(" "),fix:function(H){if(H[h]){return H}var F=H;H=o.Event(F);for(var G=this.props.length,J;G;){J=this.props[--G];H[J]=F[J]}if(!H.target){H.target=H.srcElement||document}if(H.target.nodeType==3){H.target=H.target.parentNode}if(!H.relatedTarget&&H.fromElement){H.relatedTarget=H.fromElement==H.target?H.toElement:H.fromElement}if(H.pageX==null&&H.clientX!=null){var I=document.documentElement,E=document.body;H.pageX=H.clientX+(I&&I.scrollLeft||E&&E.scrollLeft||0)-(I.clientLeft||0);H.pageY=H.clientY+(I&&I.scrollTop||E&&E.scrollTop||0)-(I.clientTop||0)}if(!H.which&&((H.charCode||H.charCode===0)?H.charCode:H.keyCode)){H.which=H.charCode||H.keyCode}if(!H.metaKey&&H.ctrlKey){H.metaKey=H.ctrlKey}if(!H.which&&H.button){H.which=(H.button&1?1:(H.button&2?3:(H.button&4?2:0)))}return H},proxy:function(F,E){E=E||function(){return F.apply(this,arguments)};E.guid=F.guid=F.guid||E.guid||this.guid++;return E},special:{ready:{setup:B,teardown:function(){}}},specialAll:{live:{setup:function(E,F){o.event.add(this,F[0],c)},teardown:function(G){if(G.length){var E=0,F=RegExp("(^|\\.)"+G[0]+"(\\.|$)");o.each((o.data(this,"events").live||{}),function(){if(F.test(this.type)){E++}});if(E<1){o.event.remove(this,G[0],c)}}}}}};o.Event=function(E){if(!this.preventDefault){return new o.Event(E)}if(E&&E.type){this.originalEvent=E;this.type=E.type}else{this.type=E}this.timeStamp=e();this[h]=true};function k(){return false}function u(){return true}o.Event.prototype={preventDefault:function(){this.isDefaultPrevented=u;var E=this.originalEvent;if(!E){return}if(E.preventDefault){E.preventDefault()}E.returnValue=false},stopPropagation:function(){this.isPropagationStopped=u;var E=this.originalEvent;if(!E){return}if(E.stopPropagation){E.stopPropagation()}E.cancelBubble=true},stopImmediatePropagation:function(){this.isImmediatePropagationStopped=u;this.stopPropagation()},isDefaultPrevented:k,isPropagationStopped:k,isImmediatePropagationStopped:k};var a=function(F){var E=F.relatedTarget;while(E&&E!=this){try{E=E.parentNode}catch(G){E=this}}if(E!=this){F.type=F.data;o.event.handle.apply(this,arguments)}};o.each({mouseover:"mouseenter",mouseout:"mouseleave"},function(F,E){o.event.special[E]={setup:function(){o.event.add(this,F,a,E)},teardown:function(){o.event.remove(this,F,a)}}});o.fn.extend({bind:function(F,G,E){return F=="unload"?this.one(F,G,E):this.each(function(){o.event.add(this,F,E||G,E&&G)})},one:function(G,H,F){var E=o.event.proxy(F||H,function(I){o(this).unbind(I,E);return(F||H).apply(this,arguments)});return this.each(function(){o.event.add(this,G,E,F&&H)})},unbind:function(F,E){return this.each(function(){o.event.remove(this,F,E)})},trigger:function(E,F){return this.each(function(){o.event.trigger(E,F,this)})},triggerHandler:function(E,G){if(this[0]){var F=o.Event(E);F.preventDefault();F.stopPropagation();o.event.trigger(F,G,this[0]);return F.result}},toggle:function(G){var E=arguments,F=1;while(F<E.length){o.event.proxy(G,E[F++])}return this.click(o.event.proxy(G,function(H){this.lastToggle=(this.lastToggle||0)%F;H.preventDefault();return E[this.lastToggle++].apply(this,arguments)||false}))},hover:function(E,F){return this.mouseenter(E).mouseleave(F)},ready:function(E){B();if(o.isReady){E.call(document,o)}else{o.readyList.push(E)}return this},live:function(G,F){var E=o.event.proxy(F);E.guid+=this.selector+G;o(document).bind(i(G,this.selector),this.selector,E);return this},die:function(F,E){o(document).unbind(i(F,this.selector),E?{guid:E.guid+this.selector+F}:null);return this}});function c(H){var E=RegExp("(^|\\.)"+H.type+"(\\.|$)"),G=true,F=[];o.each(o.data(this,"events").live||[],function(I,J){if(E.test(J.type)){var K=o(H.target).closest(J.data)[0];if(K){F.push({elem:K,fn:J})}}});F.sort(function(J,I){return o.data(J.elem,"closest")-o.data(I.elem,"closest")});o.each(F,function(){if(this.fn.call(this.elem,H,this.fn.data)===false){return(G=false)}});return G}function i(F,E){return["live",F,E.replace(/\./g,"`").replace(/ /g,"|")].join(".")}o.extend({isReady:false,readyList:[],ready:function(){if(!o.isReady){o.isReady=true;if(o.readyList){o.each(o.readyList,function(){this.call(document,o)});o.readyList=null}o(document).triggerHandler("ready")}}});var x=false;function B(){if(x){return}x=true;if(document.addEventListener){document.addEventListener("DOMContentLoaded",function(){document.removeEventListener("DOMContentLoaded",arguments.callee,false);o.ready()},false)}else{if(document.attachEvent){document.attachEvent("onreadystatechange",function(){if(document.readyState==="complete"){document.detachEvent("onreadystatechange",arguments.callee);o.ready()}});if(document.documentElement.doScroll&&l==l.top){(function(){if(o.isReady){return}try{document.documentElement.doScroll("left")}catch(E){setTimeout(arguments.callee,0);return}o.ready()})()}}}o.event.add(l,"load",o.ready)}o.each(("blur,focus,load,resize,scroll,unload,click,dblclick,mousedown,mouseup,mousemove,mouseover,mouseout,mouseenter,mouseleave,change,select,submit,keydown,keypress,keyup,error").split(","),function(F,E){o.fn[E]=function(G){return G?this.bind(E,G):this.trigger(E)}});o(l).bind("unload",function(){for(var E in o.cache){if(E!=1&&o.cache[E].handle){o.event.remove(o.cache[E].handle.elem)}}});(function(){o.support={};var F=document.documentElement,G=document.createElement("script"),K=document.createElement("div"),J="script"+(new Date).getTime();K.style.display="none";K.innerHTML=' <link/><table></table><a href="/a" style="color:red;float:left;opacity:.5;">a</a><select><option>text</option></select><object><param/></object>';var H=K.getElementsByTagName("*"),E=K.getElementsByTagName("a")[0];if(!H||!H.length||!E){return}o.support={leadingWhitespace:K.firstChild.nodeType==3,tbody:!K.getElementsByTagName("tbody").length,objectAll:!!K.getElementsByTagName("object")[0].getElementsByTagName("*").length,htmlSerialize:!!K.getElementsByTagName("link").length,style:/red/.test(E.getAttribute("style")),hrefNormalized:E.getAttribute("href")==="/a",opacity:E.style.opacity==="0.5",cssFloat:!!E.style.cssFloat,scriptEval:false,noCloneEvent:true,boxModel:null};G.type="text/javascript";try{G.appendChild(document.createTextNode("window."+J+"=1;"))}catch(I){}F.insertBefore(G,F.firstChild);if(l[J]){o.support.scriptEval=true;delete l[J]}F.removeChild(G);if(K.attachEvent&&K.fireEvent){K.attachEvent("onclick",function(){o.support.noCloneEvent=false;K.detachEvent("onclick",arguments.callee)});K.cloneNode(true).fireEvent("onclick")}o(function(){var L=document.createElement("div");L.style.width=L.style.paddingLeft="1px";document.body.appendChild(L);o.boxModel=o.support.boxModel=L.offsetWidth===2;document.body.removeChild(L).style.display="none"})})();var w=o.support.cssFloat?"cssFloat":"styleFloat";o.props={"for":"htmlFor","class":"className","float":w,cssFloat:w,styleFloat:w,readonly:"readOnly",maxlength:"maxLength",cellspacing:"cellSpacing",rowspan:"rowSpan",tabindex:"tabIndex"};o.fn.extend({_load:o.fn.load,load:function(G,J,K){if(typeof G!=="string"){return this._load(G)}var I=G.indexOf(" ");if(I>=0){var E=G.slice(I,G.length);G=G.slice(0,I)}var H="GET";if(J){if(o.isFunction(J)){K=J;J=null}else{if(typeof J==="object"){J=o.param(J);H="POST"}}}var F=this;o.ajax({url:G,type:H,dataType:"html",data:J,complete:function(M,L){if(L=="success"||L=="notmodified"){F.html(E?o("<div/>").append(M.responseText.replace(/<script(.|\s)*?\/script>/g,"")).find(E):M.responseText)}if(K){F.each(K,[M.responseText,L,M])}}});return this},serialize:function(){return o.param(this.serializeArray())},serializeArray:function(){return this.map(function(){return this.elements?o.makeArray(this.elements):this}).filter(function(){return this.name&&!this.disabled&&(this.checked||/select|textarea/i.test(this.nodeName)||/text|hidden|password|search/i.test(this.type))}).map(function(E,F){var G=o(this).val();return G==null?null:o.isArray(G)?o.map(G,function(I,H){return{name:F.name,value:I}}):{name:F.name,value:G}}).get()}});o.each("ajaxStart,ajaxStop,ajaxComplete,ajaxError,ajaxSuccess,ajaxSend".split(","),function(E,F){o.fn[F]=function(G){return this.bind(F,G)}});var r=e();o.extend({get:function(E,G,H,F){if(o.isFunction(G)){H=G;G=null}return o.ajax({type:"GET",url:E,data:G,success:H,dataType:F})},getScript:function(E,F){return o.get(E,null,F,"script")},getJSON:function(E,F,G){return o.get(E,F,G,"json")},post:function(E,G,H,F){if(o.isFunction(G)){H=G;G={}}return o.ajax({type:"POST",url:E,data:G,success:H,dataType:F})},ajaxSetup:function(E){o.extend(o.ajaxSettings,E)},ajaxSettings:{url:location.href,global:true,type:"GET",contentType:"application/x-www-form-urlencoded",processData:true,async:true,xhr:function(){return l.ActiveXObject?new ActiveXObject("Microsoft.XMLHTTP"):new XMLHttpRequest()},accepts:{xml:"application/xml, text/xml",html:"text/html",script:"text/javascript, application/javascript",json:"application/json, text/javascript",text:"text/plain",_default:"*/*"}},lastModified:{},ajax:function(M){M=o.extend(true,M,o.extend(true,{},o.ajaxSettings,M));var W,F=/=\?(&|$)/g,R,V,G=M.type.toUpperCase();if(M.data&&M.processData&&typeof M.data!=="string"){M.data=o.param(M.data)}if(M.dataType=="jsonp"){if(G=="GET"){if(!M.url.match(F)){M.url+=(M.url.match(/\?/)?"&":"?")+(M.jsonp||"callback")+"=?"}}else{if(!M.data||!M.data.match(F)){M.data=(M.data?M.data+"&":"")+(M.jsonp||"callback")+"=?"}}M.dataType="json"}if(M.dataType=="json"&&(M.data&&M.data.match(F)||M.url.match(F))){W="jsonp"+r++;if(M.data){M.data=(M.data+"").replace(F,"="+W+"$1")}M.url=M.url.replace(F,"="+W+"$1");M.dataType="script";l[W]=function(X){V=X;I();L();l[W]=g;try{delete l[W]}catch(Y){}if(H){H.removeChild(T)}}}if(M.dataType=="script"&&M.cache==null){M.cache=false}if(M.cache===false&&G=="GET"){var E=e();var U=M.url.replace(/(\?|&)_=.*?(&|$)/,"$1_="+E+"$2");M.url=U+((U==M.url)?(M.url.match(/\?/)?"&":"?")+"_="+E:"")}if(M.data&&G=="GET"){M.url+=(M.url.match(/\?/)?"&":"?")+M.data;M.data=null}if(M.global&&!o.active++){o.event.trigger("ajaxStart")}var Q=/^(\w+:)?\/\/([^\/?#]+)/.exec(M.url);if(M.dataType=="script"&&G=="GET"&&Q&&(Q[1]&&Q[1]!=location.protocol||Q[2]!=location.host)){var H=document.getElementsByTagName("head")[0];var T=document.createElement("script");T.src=M.url;if(M.scriptCharset){T.charset=M.scriptCharset}if(!W){var O=false;T.onload=T.onreadystatechange=function(){if(!O&&(!this.readyState||this.readyState=="loaded"||this.readyState=="complete")){O=true;I();L();T.onload=T.onreadystatechange=null;H.removeChild(T)}}}H.appendChild(T);return g}var K=false;var J=M.xhr();if(M.username){J.open(G,M.url,M.async,M.username,M.password)}else{J.open(G,M.url,M.async)}try{if(M.data){J.setRequestHeader("Content-Type",M.contentType)}if(M.ifModified){J.setRequestHeader("If-Modified-Since",o.lastModified[M.url]||"Thu, 01 Jan 1970 00:00:00 GMT")}J.setRequestHeader("X-Requested-With","XMLHttpRequest");J.setRequestHeader("Accept",M.dataType&&M.accepts[M.dataType]?M.accepts[M.dataType]+", */*":M.accepts._default)}catch(S){}if(M.beforeSend&&M.beforeSend(J,M)===false){if(M.global&&!--o.active){o.event.trigger("ajaxStop")}J.abort();return false}if(M.global){o.event.trigger("ajaxSend",[J,M])}var N=function(X){if(J.readyState==0){if(P){clearInterval(P);P=null;if(M.global&&!--o.active){o.event.trigger("ajaxStop")}}}else{if(!K&&J&&(J.readyState==4||X=="timeout")){K=true;if(P){clearInterval(P);P=null}R=X=="timeout"?"timeout":!o.httpSuccess(J)?"error":M.ifModified&&o.httpNotModified(J,M.url)?"notmodified":"success";if(R=="success"){try{V=o.httpData(J,M.dataType,M)}catch(Z){R="parsererror"}}if(R=="success"){var Y;try{Y=J.getResponseHeader("Last-Modified")}catch(Z){}if(M.ifModified&&Y){o.lastModified[M.url]=Y}if(!W){I()}}else{o.handleError(M,J,R)}L();if(X){J.abort()}if(M.async){J=null}}}};if(M.async){var P=setInterval(N,13);if(M.timeout>0){setTimeout(function(){if(J&&!K){N("timeout")}},M.timeout)}}try{J.send(M.data)}catch(S){o.handleError(M,J,null,S)}if(!M.async){N()}function I(){if(M.success){M.success(V,R)}if(M.global){o.event.trigger("ajaxSuccess",[J,M])}}function L(){if(M.complete){M.complete(J,R)}if(M.global){o.event.trigger("ajaxComplete",[J,M])}if(M.global&&!--o.active){o.event.trigger("ajaxStop")}}return J},handleError:function(F,H,E,G){if(F.error){F.error(H,E,G)}if(F.global){o.event.trigger("ajaxError",[H,F,G])}},active:0,httpSuccess:function(F){try{return !F.status&&location.protocol=="file:"||(F.status>=200&&F.status<300)||F.status==304||F.status==1223}catch(E){}return false},httpNotModified:function(G,E){try{var H=G.getResponseHeader("Last-Modified");return G.status==304||H==o.lastModified[E]}catch(F){}return false},httpData:function(J,H,G){var F=J.getResponseHeader("content-type"),E=H=="xml"||!H&&F&&F.indexOf("xml")>=0,I=E?J.responseXML:J.responseText;if(E&&I.documentElement.tagName=="parsererror"){throw"parsererror"}if(G&&G.dataFilter){I=G.dataFilter(I,H)}if(typeof I==="string"){if(H=="script"){o.globalEval(I)}if(H=="json"){I=l["eval"]("("+I+")")}}return I},param:function(E){var G=[];function H(I,J){G[G.length]=encodeURIComponent(I)+"="+encodeURIComponent(J)}if(o.isArray(E)||E.jquery){o.each(E,function(){H(this.name,this.value)})}else{for(var F in E){if(o.isArray(E[F])){o.each(E[F],function(){H(F,this)})}else{H(F,o.isFunction(E[F])?E[F]():E[F])}}}return G.join("&").replace(/%20/g,"+")}});var m={},n,d=[["height","marginTop","marginBottom","paddingTop","paddingBottom"],["width","marginLeft","marginRight","paddingLeft","paddingRight"],["opacity"]];function t(F,E){var G={};o.each(d.concat.apply([],d.slice(0,E)),function(){G[this]=F});return G}o.fn.extend({show:function(J,L){if(J){return this.animate(t("show",3),J,L)}else{for(var H=0,F=this.length;H<F;H++){var E=o.data(this[H],"olddisplay");this[H].style.display=E||"";if(o.css(this[H],"display")==="none"){var G=this[H].tagName,K;if(m[G]){K=m[G]}else{var I=o("<"+G+" />").appendTo("body");K=I.css("display");if(K==="none"){K="block"}I.remove();m[G]=K}o.data(this[H],"olddisplay",K)}}for(var H=0,F=this.length;H<F;H++){this[H].style.display=o.data(this[H],"olddisplay")||""}return this}},hide:function(H,I){if(H){return this.animate(t("hide",3),H,I)}else{for(var G=0,F=this.length;G<F;G++){var E=o.data(this[G],"olddisplay");if(!E&&E!=="none"){o.data(this[G],"olddisplay",o.css(this[G],"display"))}}for(var G=0,F=this.length;G<F;G++){this[G].style.display="none"}return this}},_toggle:o.fn.toggle,toggle:function(G,F){var E=typeof G==="boolean";return o.isFunction(G)&&o.isFunction(F)?this._toggle.apply(this,arguments):G==null||E?this.each(function(){var H=E?G:o(this).is(":hidden");o(this)[H?"show":"hide"]()}):this.animate(t("toggle",3),G,F)},fadeTo:function(E,G,F){return this.animate({opacity:G},E,F)},animate:function(I,F,H,G){var E=o.speed(F,H,G);return this[E.queue===false?"each":"queue"](function(){var K=o.extend({},E),M,L=this.nodeType==1&&o(this).is(":hidden"),J=this;for(M in I){if(I[M]=="hide"&&L||I[M]=="show"&&!L){return K.complete.call(this)}if((M=="height"||M=="width")&&this.style){K.display=o.css(this,"display");K.overflow=this.style.overflow}}if(K.overflow!=null){this.style.overflow="hidden"}K.curAnim=o.extend({},I);o.each(I,function(O,S){var R=new o.fx(J,K,O);if(/toggle|show|hide/.test(S)){R[S=="toggle"?L?"show":"hide":S](I)}else{var Q=S.toString().match(/^([+-]=)?([\d+-.]+)(.*)$/),T=R.cur(true)||0;if(Q){var N=parseFloat(Q[2]),P=Q[3]||"px";if(P!="px"){J.style[O]=(N||1)+P;T=((N||1)/R.cur(true))*T;J.style[O]=T+P}if(Q[1]){N=((Q[1]=="-="?-1:1)*N)+T}R.custom(T,N,P)}else{R.custom(T,S,"")}}});return true})},stop:function(F,E){var G=o.timers;if(F){this.queue([])}this.each(function(){for(var H=G.length-1;H>=0;H--){if(G[H].elem==this){if(E){G[H](true)}G.splice(H,1)}}});if(!E){this.dequeue()}return this}});o.each({slideDown:t("show",1),slideUp:t("hide",1),slideToggle:t("toggle",1),fadeIn:{opacity:"show"},fadeOut:{opacity:"hide"}},function(E,F){o.fn[E]=function(G,H){return this.animate(F,G,H)}});o.extend({speed:function(G,H,F){var E=typeof G==="object"?G:{complete:F||!F&&H||o.isFunction(G)&&G,duration:G,easing:F&&H||H&&!o.isFunction(H)&&H};E.duration=o.fx.off?0:typeof E.duration==="number"?E.duration:o.fx.speeds[E.duration]||o.fx.speeds._default;E.old=E.complete;E.complete=function(){if(E.queue!==false){o(this).dequeue()}if(o.isFunction(E.old)){E.old.call(this)}};return E},easing:{linear:function(G,H,E,F){return E+F*G},swing:function(G,H,E,F){return((-Math.cos(G*Math.PI)/2)+0.5)*F+E}},timers:[],fx:function(F,E,G){this.options=E;this.elem=F;this.prop=G;if(!E.orig){E.orig={}}}});o.fx.prototype={update:function(){if(this.options.step){this.options.step.call(this.elem,this.now,this)}(o.fx.step[this.prop]||o.fx.step._default)(this);if((this.prop=="height"||this.prop=="width")&&this.elem.style){this.elem.style.display="block"}},cur:function(F){if(this.elem[this.prop]!=null&&(!this.elem.style||this.elem.style[this.prop]==null)){return this.elem[this.prop]}var E=parseFloat(o.css(this.elem,this.prop,F));return E&&E>-10000?E:parseFloat(o.curCSS(this.elem,this.prop))||0},custom:function(I,H,G){this.startTime=e();this.start=I;this.end=H;this.unit=G||this.unit||"px";this.now=this.start;this.pos=this.state=0;var E=this;function F(J){return E.step(J)}F.elem=this.elem;if(F()&&o.timers.push(F)&&!n){n=setInterval(function(){var K=o.timers;for(var J=0;J<K.length;J++){if(!K[J]()){K.splice(J--,1)}}if(!K.length){clearInterval(n);n=g}},13)}},show:function(){this.options.orig[this.prop]=o.attr(this.elem.style,this.prop);this.options.show=true;this.custom(this.prop=="width"||this.prop=="height"?1:0,this.cur());o(this.elem).show()},hide:function(){this.options.orig[this.prop]=o.attr(this.elem.style,this.prop);this.options.hide=true;this.custom(this.cur(),0)},step:function(H){var G=e();if(H||G>=this.options.duration+this.startTime){this.now=this.end;this.pos=this.state=1;this.update();this.options.curAnim[this.prop]=true;var E=true;for(var F in this.options.curAnim){if(this.options.curAnim[F]!==true){E=false}}if(E){if(this.options.display!=null){this.elem.style.overflow=this.options.overflow;this.elem.style.display=this.options.display;if(o.css(this.elem,"display")=="none"){this.elem.style.display="block"}}if(this.options.hide){o(this.elem).hide()}if(this.options.hide||this.options.show){for(var I in this.options.curAnim){o.attr(this.elem.style,I,this.options.orig[I])}}this.options.complete.call(this.elem)}return false}else{var J=G-this.startTime;this.state=J/this.options.duration;this.pos=o.easing[this.options.easing||(o.easing.swing?"swing":"linear")](this.state,J,0,1,this.options.duration);this.now=this.start+((this.end-this.start)*this.pos);this.update()}return true}};o.extend(o.fx,{speeds:{slow:600,fast:200,_default:400},step:{opacity:function(E){o.attr(E.elem.style,"opacity",E.now)},_default:function(E){if(E.elem.style&&E.elem.style[E.prop]!=null){E.elem.style[E.prop]=E.now+E.unit}else{E.elem[E.prop]=E.now}}}});if(document.documentElement.getBoundingClientRect){o.fn.offset=function(){if(!this[0]){return{top:0,left:0}}if(this[0]===this[0].ownerDocument.body){return o.offset.bodyOffset(this[0])}var G=this[0].getBoundingClientRect(),J=this[0].ownerDocument,F=J.body,E=J.documentElement,L=E.clientTop||F.clientTop||0,K=E.clientLeft||F.clientLeft||0,I=G.top+(self.pageYOffset||o.boxModel&&E.scrollTop||F.scrollTop)-L,H=G.left+(self.pageXOffset||o.boxModel&&E.scrollLeft||F.scrollLeft)-K;return{top:I,left:H}}}else{o.fn.offset=function(){if(!this[0]){return{top:0,left:0}}if(this[0]===this[0].ownerDocument.body){return o.offset.bodyOffset(this[0])}o.offset.initialized||o.offset.initialize();var J=this[0],G=J.offsetParent,F=J,O=J.ownerDocument,M,H=O.documentElement,K=O.body,L=O.defaultView,E=L.getComputedStyle(J,null),N=J.offsetTop,I=J.offsetLeft;while((J=J.parentNode)&&J!==K&&J!==H){M=L.getComputedStyle(J,null);N-=J.scrollTop,I-=J.scrollLeft;if(J===G){N+=J.offsetTop,I+=J.offsetLeft;if(o.offset.doesNotAddBorder&&!(o.offset.doesAddBorderForTableAndCells&&/^t(able|d|h)$/i.test(J.tagName))){N+=parseInt(M.borderTopWidth,10)||0,I+=parseInt(M.borderLeftWidth,10)||0}F=G,G=J.offsetParent}if(o.offset.subtractsBorderForOverflowNotVisible&&M.overflow!=="visible"){N+=parseInt(M.borderTopWidth,10)||0,I+=parseInt(M.borderLeftWidth,10)||0}E=M}if(E.position==="relative"||E.position==="static"){N+=K.offsetTop,I+=K.offsetLeft}if(E.position==="fixed"){N+=Math.max(H.scrollTop,K.scrollTop),I+=Math.max(H.scrollLeft,K.scrollLeft)}return{top:N,left:I}}}o.offset={initialize:function(){if(this.initialized){return}var L=document.body,F=document.createElement("div"),H,G,N,I,M,E,J=L.style.marginTop,K='<div style="position:absolute;top:0;left:0;margin:0;border:5px solid #000;padding:0;width:1px;height:1px;"><div></div></div><table style="position:absolute;top:0;left:0;margin:0;border:5px solid #000;padding:0;width:1px;height:1px;" cellpadding="0" cellspacing="0"><tr><td></td></tr></table>';M={position:"absolute",top:0,left:0,margin:0,border:0,width:"1px",height:"1px",visibility:"hidden"};for(E in M){F.style[E]=M[E]}F.innerHTML=K;L.insertBefore(F,L.firstChild);H=F.firstChild,G=H.firstChild,I=H.nextSibling.firstChild.firstChild;this.doesNotAddBorder=(G.offsetTop!==5);this.doesAddBorderForTableAndCells=(I.offsetTop===5);H.style.overflow="hidden",H.style.position="relative";this.subtractsBorderForOverflowNotVisible=(G.offsetTop===-5);L.style.marginTop="1px";this.doesNotIncludeMarginInBodyOffset=(L.offsetTop===0);L.style.marginTop=J;L.removeChild(F);this.initialized=true},bodyOffset:function(E){o.offset.initialized||o.offset.initialize();var G=E.offsetTop,F=E.offsetLeft;if(o.offset.doesNotIncludeMarginInBodyOffset){G+=parseInt(o.curCSS(E,"marginTop",true),10)||0,F+=parseInt(o.curCSS(E,"marginLeft",true),10)||0}return{top:G,left:F}}};o.fn.extend({position:function(){var I=0,H=0,F;if(this[0]){var G=this.offsetParent(),J=this.offset(),E=/^body|html$/i.test(G[0].tagName)?{top:0,left:0}:G.offset();J.top-=j(this,"marginTop");J.left-=j(this,"marginLeft");E.top+=j(G,"borderTopWidth");E.left+=j(G,"borderLeftWidth");F={top:J.top-E.top,left:J.left-E.left}}return F},offsetParent:function(){var E=this[0].offsetParent||document.body;while(E&&(!/^body|html$/i.test(E.tagName)&&o.css(E,"position")=="static")){E=E.offsetParent}return o(E)}});o.each(["Left","Top"],function(F,E){var G="scroll"+E;o.fn[G]=function(H){if(!this[0]){return null}return H!==g?this.each(function(){this==l||this==document?l.scrollTo(!F?H:o(l).scrollLeft(),F?H:o(l).scrollTop()):this[G]=H}):this[0]==l||this[0]==document?self[F?"pageYOffset":"pageXOffset"]||o.boxModel&&document.documentElement[G]||document.body[G]:this[0][G]}});o.each(["Height","Width"],function(I,G){var E=I?"Left":"Top",H=I?"Right":"Bottom",F=G.toLowerCase();o.fn["inner"+G]=function(){return this[0]?o.css(this[0],F,false,"padding"):null};o.fn["outer"+G]=function(K){return this[0]?o.css(this[0],F,false,K?"margin":"border"):null};var J=G.toLowerCase();o.fn[J]=function(K){return this[0]==l?document.compatMode=="CSS1Compat"&&document.documentElement["client"+G]||document.body["client"+G]:this[0]==document?Math.max(document.documentElement["client"+G],document.body["scroll"+G],document.documentElement["scroll"+G],document.body["offset"+G],document.documentElement["offset"+G]):K===g?(this.length?o.css(this[0],J):null):this.css(J,typeof K==="string"?K:K+"px")}})})();
\ No newline at end of file
/**
* .disableTextSelect - Disable Text Select Plugin
*
* Version: 1.1
* Updated: 2007-11-28
*
* Used to stop users from selecting text
*
* Copyright (c) 2007 James Dempster (letssurf@gmail.com, http://www.jdempster.com/category/jquery/disabletextselect/)
*
* Dual licensed under the MIT (MIT-LICENSE.txt)
* and GPL (GPL-LICENSE.txt) licenses.
**/
/**
* Requirements:
* - jQuery (John Resig, http://www.jquery.com/)
**/
(function($) {
if ($.browser.mozilla) {
$.fn.disableTextSelect = function() {
return this.each(function() {
$(this).css({
'MozUserSelect' : 'none'
});
});
};
$.fn.enableTextSelect = function() {
return this.each(function() {
$(this).css({
'MozUserSelect' : ''
});
});
};
} else if ($.browser.msie) {
$.fn.disableTextSelect = function() {
return this.each(function() {
$(this).bind('selectstart.disableTextSelect', function() {
return false;
});
});
};
$.fn.enableTextSelect = function() {
return this.each(function() {
$(this).unbind('selectstart.disableTextSelect');
});
};
} else {
$.fn.disableTextSelect = function() {
return this.each(function() {
$(this).bind('mousedown.disableTextSelect', function() {
return false;
});
});
};
$.fn.enableTextSelect = function() {
return this.each(function() {
$(this).unbind('mousedown.disableTextSelect');
});
};
}
})(jQuery);
\ No newline at end of file
var sankoreLang = {
"en":{
"fnc":"Function: ",
"display":"Display",
"x_axis":"X-axis",
"y_axis":"Y-axis",
"zoom":"Zoom",
"color":"Color:",
"menus":"Menu",
"tools":"Tools",
"options":"Options",
"help":"Help",
"about":"About",
"mouse_events":"Mouse events:",
"moving":"Moving",
"tangente":"Tangente",
"point":"Point",
"choosing_color":"Choosing the color:",
"value":"Value:",
"saturation":"Saturation:",
"red":"Red:",
"green":"Green:",
"blue":"Blue:",
"opacity":"Opacity:",
"check":"Check",
"derivative":"Derivative:",
"square_under_func":"Square under function:",
"from":"From",
"to":"To",
"calculate":"Calculate",
"draw":"Draw",
"point_calculate":"Calculate the point on the function:",
"estimate":"Estimate",
"analysis_of_func":"Analysis of function:",
"start_to_analysis":"Start to analysis",
"quit":"Quit",
"display_test":"Display the test:",
"test":"Test",
"widget":"Widget",
"widget_options":"Widget options",
"themes_of_widget":"Themes of the widget:",
"black":"Black",
"white":"White",
"control_options":"Control options:",
"save":"Save",
"load":"Load",
"del":"Delete",
"save_a_widget_options":"Save a widget options in cookies or load an options from cookies or delete a registered options.",
"auto_update":"Automatically update when a widget opening.",
"reload_widget":"Reload widget",
"update":"Update",
"the_graphical":"The graphical method displaying:",
"lines":"lines",
"points":"points",
"image":"image",
"zoom_def":"Zoom default:",
"update_zoom":"Update zoom",
"show_grid":"Show grid",
"show_axis":"Show axis",
"scale":"Scale",
"thickness":"Thickness:",
"offset_diagram":"Offset diagram:",
"accuracy_graph":"Accuracy graph:",
"show_the_style":"Show the style:",
"surfaces":"surfaces",
"points":"points",
"reset_display":"Reset display",
"accuracy_func":"Accuracy function:",
"use_the_color":"Use the color:",
"positive_value":"positive value",
"negative_value":"negative value",
"general_value":"general value",
"how_it_work":"How it works",
"this_widget_allow":"This widget allows to draw mathematical function. Enter function in the field in the top part of the widget and press\"Display\"",
"you_can_enter":"You can enter following mathematical functions:",
"basic_operations":"Basic operations",
"plus":"Plus",
"minus":"Minus",
"multi":"Multiplication",
"division":"Division",
"mod":"Mod",
"trigonometric":"Trigonometric functions",
"sine":"Sine",
"cosine":"Cosine",
"tangent":"Tangent",
"cotangent":"Cotangent",
"secant":"Secant",
"cosecant":"Cosecant",
"arc_sine":"Arc sine",
"arc_cosine":"Arc cosine",
"arc_tangent":"Arc tangent",
"arc_cotangent":"Arc cotangent",
"hyperbolic_func":"Hyperbolic functions",
"hyp_sine":"Hyperbolic sine",
"hyp_cosine":"Hyperbolic cosine",
"hyp_tangent":"Hyperbolic tangent",
"hyp_cotangent":"Hyperbolic cotangent",
"hyp_secant":"Hyperbolic secant",
"hyp_cosecant":"Hyperbolic cosecant",
"hyp_arc_sine":"Hyperbolic arc sine",
"hyp_arc_cosine":"Hyperbolic arc cosine",
"hyp_arc_tangent":"Hyperbolic arc tangent",
"hyp_arc_cotangent":"Hyperbolic arc cotangent",
"square_roots_and_degrees":"Square roots and degrees",
"square_root":"Square root",
"degree":"Degree",
"root":"Root",
"variable_x":"Variable x to the power y",
"root_y":"Root y of x",
"exponential":"Exponential and logarithm",
"natural_log":"Natural logarithm",
"decimal_log":"Decimal logarithm",
"abs":"Absolute number value",
"rounding":"Rounding",
"round_nearest":"Rounding to the nearest whole number",
"round_nearest_big":"Rounding to the nearest whole number in a big way",
"round_nearest_small":"Rounding to the nearest whole number the smaller side",
"consts":"Constants",
"available_const":"Also are some constants available:",
"keys":"Keyboard keys",
"moved_left":"Graph will be moved left",
"moved_top":"Graph will be moved top",
"moved_right":"Graph will be moved right",
"moved_botom":"Graph will be moved bottom",
"guide":"User's guide",
"using":"Using",
"examples":"Examples",
"other":"Other",
"you_can_view":"You can view example. Don't forget to set a accuracy in option if it will be necessary.",
"save_graph":"Save graph",
"in_some_browsers":"In some browsers when display method \"Canvas\" used you can save graph by clcking it with right mouse button and selecting \"Save image\". Also you can save 3D-graphs.",
"offset":"Offset",
"if_graph_isnt":"If graph isn't in the right plase (larger than canvas) then can you set necessary parameters graph displaying in settings menu.",
"history":"History",
"current":"Current",
"additional":"Additional",
"left_arrow":"left arrow",
"right_arrow":"right arrow",
"top_arrow":"top arrow",
"bottom_arrow":"bottom arrow",
"or":"or",
"funcs":"Functions",
"widget_is_developed":"Widget is developed by",
"if_you_want_to":"If you want to inform about a bug, make a proposal or just ask some questions. You can contact to me at the following e-mail:",
"if_you_want_to_change":"If you want to change background design then you can contact at following address:",
"set_of_def":"Set of definitions:",
"parity":"Parity:",
"zeros":"Zeros of function:",
"signe":"Sign:",
"asympt":"Asymptotes",
"min":"Min",
"ev":"even",
"unev":"uneven",
"na":"n/a",
"curve_lower":"curve is lower than a AH",
"curve_higher":"curve is higher than a AH",
"max":"Max",
"no_min":"No minimum",
"no_max":"No maximum",
"tool_for":"Tool for analysis of function is not reliable on 100%. Don't forget check results of analysis before use it.",
"ah_left":"AH left:",
"ah_right":"AH right:",
"av":"AV:",
"options_saved":"Options saved!",
"cur_version":"Current version:",
"last_version":"The last on-line version:",
"using_web":"This widget is available to using on web-site:",
"show_saved":"Now parameters will be saved"
},
"ru":{
"fnc": "Функция: ",
"display":"Показать",
"x_axis":"ось X",
"y_axis":"ось Y",
"zoom":"Размер",
"color":"Цвет:",
"menus":"Меню",
"tools":"Инструменты",
"options":"Опции",
"help":"Помощь",
"about":"О программе",
"mouse_events":"События мыши:",
"moving":"Движение",
"tangente":"Касательная",
"point":"Точка",
"choosing_color":"Выбор цвета:",
"value":"Значение:",
"saturation":"Насыщенность:",
"red":"Красный:",
"green":"Зеленый:",
"blue":"Голубой:",
"opacity":"Прозрачность:",
"check":"Применить",
"derivative":"Производная:",
"square_under_func":"Область функции:",
"from":"От",
"to":"До",
"calculate":"Посчитать",
"draw":"Зарисовать",
"point_calculate":"Рассчитать точку функции:",
"estimate":"Оценить",
"analysis_of_func":"Анализ функции:",
"start_to_analysis":"Начать анализ",
"quit":"Выйти",
"display_test":"Показать тест:",
"test":"Тест",
"widget":"Виджет",
"widget_options":"Настройки виджета",
"themes_of_widget":"Темы виджета:",
"black":"Черный",
"white":"Белый",
"control_options":"Опции управления:",
"save":"Сохранить",
"load":"Загрузить",
"del":"Удалить",
"save_a_widget_options":"Сохранить или загрузить настройки виджета в/из куки-файлов, или же удалить выбранные опции",
"auto_update":"Автоматическое обновление виджета при загрузке",
"reload_widget":"Перегрузить виджет",
"update":"Обновить",
"the_graphical":"Графический метод отображения:",
"lines":"линии",
"points":"точки",
"image":"изображения",
"zoom_def":"Размер по-умолчанию:",
"update_zoom":"Изменить размер:",
"show_grid":"Показать таблицу",
"show_axis":"Показать оси",
"scale":"Масштаб",
"thickness":"Толщина",
"offset_diagram":"Смещение диаграммы:",
"accuracy_graph":"Точность графика:",
"show_the_style":"Показать стиль:",
"surfaces":"поверхности",
"points":"точки",
"reset_display":"Обновить отображение",
"accuracy_func":"Точность функции:",
"use_the_color":"Использовать цвет:",
"positive_value":"положительное значение",
"negative_value":"отрицательное значение",
"general_value":"основное значение",
"how_it_work":"Как это работает",
"this_widget_allow":"Этот виджет позволяет рисовать математические функции. Введите функцию в верхней части виджета и нажмите \"Показать\"",
"you_can_enter":"Вы можете использовать следующие математические функции:",
"basic_operations":"Основные операции",
"plus":"Сложение",
"minus":"Вычетание",
"multi":"Произведение",
"division":"Частное",
"mod":"Остаток от деления",
"trigonometric":"Тригонометрические функции",
"sine":"Синус",
"cosine":"Косинус",
"tangent":"Тангенс",
"cotangent":"Котангенс",
"secant":"Секанс",
"cosecant":"Косеканс",
"arc_sine":"Арксинус",
"arc_cosine":"Арккосинус",
"arc_tangent":"Арктангенс",
"arc_cotangent":"Арккотангенс",
"hyperbolic_func":"Гиперболические функции",
"hyp_sine":"Гиперболический синус",
"hyp_cosine":"Гиперболический косинус",
"hyp_tangent":"Гиперболический тангенс",
"hyp_cotangent":"Гиперболический котангенс",
"hyp_secant":"Гиперболический секанс",
"hyp_cosecant":"Гиперболический косеканс",
"hyp_arc_sine":"Гиперболический арксинус",
"hyp_arc_cosine":"Гиперболический арккосинус",
"hyp_arc_tangent":"Гиперболический арктангенс",
"hyp_arc_cotangent":"Гиперболический арккотангенс",
"square_roots_and_degrees":"Квардатные корни и степени",
"square_root":"Квадратный корень",
"degree":"Степень",
"root":"Корень",
"variable_x":"Переменная х в степени у",
"root_y":"Корень y степени x",
"exponential":"Экспоненты и логарифмы",
"natural_log":"Натуральный логарифм",
"decimal_log":"Десятичный логарифм",
"abs":"Абсолютное значение числа",
"rounding":"Округление",
"round_nearest":"Округление до ближайшего целого числа",
"round_nearest_big":"Округление до ближайшего целого числа в большую сторону",
"round_nearest_small":"Округление до ближайшего целого числа в меньую сторону",
"consts":"Константы",
"available_const":"Также доступны некоторые константы:",
"keys":"Горячие клавиши",
"moved_left":"График будет сдвинут влево",
"moved_top":"График будет сдвинут вверх",
"moved_right":"График будет сдвинут вправо",
"moved_bottom":"График будет сдвинут вниз",
"guide":"Руководство пользователя",
"using":"Использование",
"examples":"Примеры",
"other":"Другое",
"you_can_view":"Вы можете посмотреть примеры. Не забывайте выставить точность в настройках, если это необходимо.",
"save_graph":"Сохранить график",
"in_some_browsers":"В некоторых браузерах при выборе метода отоюражения \"Canvas\" вы можете сохранить гафик кликом ПКМ на нем и выбором пункта \"Сохранить изображение\". Таким же способом вы можете сохранять 3D-графики.",
"offset":"Смещение",
"if_graph_isnt":"Если график арсположен в неправильном месте (больше, чем холст), то Вы можете выставить необходимые параметры отображения графа в настройках виджета.",
"history":"История",
"current":"Текущие",
"additional":"Дополнительные",
"left_arrow":"стрелка влево",
"right_arrow":"стрелка вправо",
"top_arrow":"стрелка вверх",
"bottom_arrow":"стрелка вниз",
"or":"или",
"funcs":"Функции",
"widget_is_developed":"Виджет разработан ",
"if_you_want_to":"Если вы хотите сообщить о проблеме, внести предложение или задать некоторые вопросы, то можете связаться со мной через электронную почту:",
"if_you_want_to_change":"Если вы хотите изменить дизайн, обращайтесь по адресу:",
"set_of_def":"Набор определений:",
"parity":"Равенство:",
"zeros":"Нули функции:",
"signe":"Знак:",
"asympt":"Ассимптоты",
"min":"Мин",
"ev":"равны",
"unev":"не равны",
"na":"не определено",
"curve_lower":"кривая ниже, чем горизонтальная ассимптота",
"curve_higher":"кривая выше, чем горизонтальная ассимптота",
"max":"Макс",
"no_min":"Нет минимума",
"no_max":"Нет максимума",
"tool_for":"Анализ функции не надежен на 100%. Не забывайте проверить результат анализа перед их использованием.",
"ah_left":"ГА слева:",
"ah_right":"ГА справа:",
"av":"ВА:",
"options_saved":"Настройки сохранены!",
"cur_version":"Текущая версия:",
"last_version":"Последняя он-лайн версия:",
"using_web":"Этот виджет доступен для использования на сайте:",
"show_saved":"Теперь параметры будут сохранены"
},
"fr":{
"fnc":"Fonction: ",
"display":"Afficher",
"x_axis":"Axe des X de:",
"y_axis":"Axe des Y de:",
"zoom":"Zoom",
"color":"Couleur:",
"menus":"Menus",
"tools":"Outils",
"options":"Options",
"help":"Aide",
"about":"À propos",
"mouse_events":"Action de la souris:",
"moving":"Déplacement",
"tangente":"Tangente",
"point":"Point",
"choosing_color":"Choix de la couleur:",
"value":"Valeur:",
"saturation":"Saturation:",
"red":"Rouge:",
"green":"Vert:",
"blue":"Bleu:",
"opacity":"Opacité:",
"check":"Valider",
"derivative":"Dessiner la dérivée de la fonction:",
"square_under_func":"Aire sous la fonction:",
"from":"From",
"to":"To",
"calculate":"Calculer",
"draw":"Dessiner",
"point_calculate":"Calculer un point de la fonction:",
"estimate":"Évaluer",
"analysis_of_func":"Analyse de la fonction:",
"start_to_analysis":"Démarrer l'étude",
"quit":"Fermer",
"display_test":"Afficher les tests:",
"test":"Test",
"widget":"Widget",
"widget_options":"Options du widget",
"themes_of_widget":"Thème du widget:",
"black":"Noir",
"white":"Blanc",
"control_options":"Gèrer les options:",
"save":"Sauvegarder",
"load":"Charger",
"del":"Supprimer",
"save_a_widget_options":"Sauvegarder les options du widget dans les cookies, charger les options depuis les cookies ou supprimer les options actuellement enregistrées.",
"auto_update":"Mise à jour automatique à l'ouverture du widget.",
"reload_widget":"Recharger le widget",
"update":"Mise à jour",
"the_graphical":"Méthode d'affichage du graphique:",
"lines":"lignes",
"points":"points",
"image":"image",
"zoom_def":"Zoom par défaut:",
"update_zoom":"Réinitialiser le zoom",
"show_grid":"Afficher la grille",
"show_axis":"Afficher les axes ",
"scale":"Afficher l'échelle ",
"thickness":"Épaisseur de la fonction:",
"offset_diagram":"Décalage du graphique:",
"accuracy_graph":"Précision des calculs du graphique:",
"show_the_style":"Style d'affichage:",
"surfaces":"surfaces",
"points":"points",
"reset_display":"Réinitialiser l'affichage",
"accuracy_func":"Précision de la fonction:",
"use_the_color":"Utilisation des couleurs:",
"positive_value":"valeur positive",
"negative_value":"valeur négative",
"general_value":"valeur générale",
"how_it_work":"Fonctionnement",
"this_widget_allow":"Ce widget vous permet de dessiner des fonctions mathématiques. Entrez une fonction dans le champ en haut du widget et cliquez sur le bouton \"Afficher\".",
"you_can_enter":"Vous pouvez saisir les fonctions mathématiques suivantes:",
"basic_operations":"Les opérations de base",
"plus":"Addition",
"minus":"Soustraction",
"multi":"Multiplication",
"division":"Division",
"mod":"Modulo",
"trigonometric":"Les fonctions trigonométriques",
"sine":"Sinus",
"cosine":"Cosinus",
"tangent":"Tangente",
"cotangent":"Cotangente",
"secant":"Secante",
"cosecant":"Cosecante",
"arc_sine":"Arcsinus",
"arc_cosine":"Arccosinus",
"arc_tangent":"Arctangente",
"arc_cotangent":"Arccotangente",
"hyperbolic_func":"Les fonctions hyperboliques",
"hyp_sine":"Sinus hyp",
"hyp_cosine":"Cosinus hyp",
"hyp_tangent":"Tangente hyp",
"hyp_cotangent":"Cotangente hyp",
"hyp_secant":"Secante hyp",
"hyp_cosecant":"Cosecante hyp",
"hyp_arc_sine":"Arcsinus hyp",
"hyp_arc_cosine":"Arccosinus hyp",
"hyp_arc_tangent":"Arctangente hyp",
"hyp_arc_cotangent":"Arccotangente hyp",
"square_roots_and_degrees":"Les racines et les puissances",
"square_root":"Racine carrée",
"degree":"Puissances",
"root":"Racines",
"variable_x":"Élève x à une puissance y",
"root_y":"Racine y d'un nombre x",
"exponential":"Les exponentielles et logarithmes",
"natural_log":"logarithme naturel",
"decimal_log":"logarithme de base",
"abs":"La valeur absolue d'un nombre",
"rounding":"Les arrondis",
"round_nearest":"arrondit à l'entier le plus proche",
"round_nearest_big":"arrondit à l'entier supérieur",
"round_nearest_small":"arrondit à l'entier inférieur",
"consts":"Constantes",
"available_const":"Quelques constantes sont aussi disponibles:",
"keys":"Touches clavier",
"moved_left":"déplacer le graphique à gauche",
"moved_top":"déplacer le graphique en haut",
"moved_right":"déplacer le graphique à droite",
"moved_botom":"déplacer le graphique en bas",
"guide":"Guide d'utilisation",
"using":"Utilisation",
"examples":"Exemples",
"other":"Autres",
"you_can_view":"Vous pouvez cliquer sur un exemple pour l'afficher. Pensez à ajuster la précision du graphique dans les options si nécessaire",
"save_graph":"Enregistrer le graphique",
"in_some_browsers":"Dans certains navigateurs, lorsque vous utilisez la méthode d'affichage \"Canvas\", vous pouvez sauvegarder le graphique en cliquant avec le bouton de droite de la souris sur celui-ci et en séléctionnant \"Enregistrer l'image\". Vous pouvez aussi sauvegarder le graphique 3D. ",
"offset":"Décalage",
"if_graph_isnt":"Si le graphique n'est pas à la bonne place (il dépasse de la zone prévue), ajustez le \"décalage du graphique\" dans le menu des options. Pour Konqueror, il faut utiliser un décalage de x=122 et y=48.",
"history":"Historique",
"current":"Actuelle",
"additional":"Supplémentaires",
"left_arrow":"flèche gauche",
"right_arrow":"flèche droite",
"top_arrow":"flèche haut",
"bottom_arrow":"flèche bas",
"or":"ou",
"funcs":"Fonction",
"widget_is_developed":"Widget réalisé par",
"if_you_want_to":"Si vous voulez rapporter un bug, avez une suggestion par rapport au widget ou voulez simplement poser une question, merci de me contacter par:",
"if_you_want_to_change":"Les images d'arrière-plan du widget on été tirées des thèmes du bureau \"plasma-desktop\" de l'environnement:",
"set_of_def":"Ensemble de définition:",
"parity":"Parité:",
"zeros":"Zéros de la fonction:",
"signe":"Signe:",
"asympt":"Asymptotes",
"min":"Min",
"ev":"paire",
"unev":"impaire",
"na":"aucune",
"curve_lower":"courbe au-dessus de l'AH",
"curve_higher":"courbe au-dessous de l'AH",
"max":"Max",
"no_min":"Aucun minimum",
"no_max":"Aucun maximum",
"tool_for":"L'outil permettant d'étudier les fonctions n'est pas fiable à 100%. Pensez à vérifier les résultats de l'étude avant d'en faire une quelconque utilisation.",
"ah_left":"AH gauche:",
"ah_right":"AH droite:",
"av":"AV:",
"options_saved":"Options sauvegardées!",
"cur_version":"Version en cours d'utilisation:",
"last_version":"Dernière version disponible en ligne:",
"using_web":"Ce widget est également utilisable dans un navigateur internet sur le site:",
"show_saved":"Options actuellement sauvegardées"
},
"sk":{
"fnc":"Funkcia: ",
"display":"Zobraziť",
"x_axis":"Os x",
"y_axis":"Os y",
"zoom":"Lupa",
"color":"Farba:",
"menus":"Menu",
"tools":"Nástroje",
"options":"Možnosti",
"help":"Pomoc",
"about":"O aplikácii",
"mouse_events":"Činnosti s myšou:",
"moving":"Presúvanie",
"tangente":"Dotyčnica",
"point":"Bod",
"choosing_color":"Výber farby:",
"value":"Hodnota:",
"saturation":"Nasýtenie:",
"red":"Červená:",
"green":"Zelená:",
"blue":"Modrá:",
"opacity":"Priehľadnosť:",
"check":"Vyskúšať",
"derivative":"Derivovaná funkcia:",
"square_under_func":"Štvorec pod funkciou:",
"from":"Od",
"to":"Do",
"calculate":"Vypočítať",
"draw":"Vyznačiť",
"point_calculate":"Vypočítať bod podľa funkcie:",
"estimate":"Odhadnúť",
"analysis_of_func":"Analýza funkcie:",
"start_to_analysis":"Spustiť analýzu",
"quit":"Koniec",
"display_test":"Zobraziť test:",
"test":"Test",
"widget":"Widget",
"widget_options":"Možnosti widgetu",
"themes_of_widget":"Farba widgetu:",
"black":"čierna",
"white":"biela",
"control_options":"Možnosti ovládania:",
"save":"Uložiť",
"load":"Spustiť",
"del":"Vymazať",
"save_a_widget_options":"Uloží nastavenia widgetu do cookies alebo spustí nastavenia z cookies alebo vymaže uložené nastavenia.",
"auto_update":"Automaticky aktualizovať pri otvorení widgetu.",
"reload_widget":"Znova spustiť widget",
"update":"Aktualizovať",
"the_graphical":"Spôsob grafického zobrazenia: ",
"lines":"čiary",
"points":"body",
"image":"obrázok",
"zoom_def":"Predvolená lupa:",
"update_zoom":"Aktualizovať lupu",
"show_grid":"Zobraziť mriežku",
"show_axis":"Zobraziť os",
"scale":"Mierka",
"thickness":"Hrúbka:",
"offset_diagram":"Posunúť diagram:",
"accuracy_graph":"Presnosť grafu:",
"show_the_style":"Zobraziť štýl:",
"surfaces":"plocha",
"points":"body",
"reset_display":"Obnoviť zobrazenie",
"accuracy_func":"Presnosť funkcie:",
"use_the_color":"Použiť farbu:",
"positive_value":"positívna hodnota",
"negative_value":"negatívna hodnota",
"general_value":"všeobecná hodnota",
"how_it_work":"Ako to funguje",
"this_widget_allow":"Tento widget vám umožňuje nakresliť graf matematickej funkcie. Zadajte funkciu do poľa v hornej časti a stlačte tlačidlo\"Zobraziť\"",
"you_can_enter":"Môžete zadať tieto matematické funkcie:",
"basic_operations":"Základné operácie",
"plus":"plus",
"minus":"mínus",
"multi":"násobenie",
"division":"delenie",
"mod":"mod",
"trigonometric":"Trigonometrické funkcie",
"sine":"sínus",
"cosine":"kosínus",
"tangent":"tangens",
"cotangent":"kotangens",
"secant":"sekant",
"cosecant":"kosekant",
"arc_sine":"arkus sínus",
"arc_cosine":"arkus kosínus",
"arc_tangent":"arkus tangens",
"arc_cotangent":"arkus kotangens",
"hyperbolic_func":"Hyperbolické funkcie",
"hyp_sine":"hyperbolický sínus",
"hyp_cosine":"hyperbolický kosínus",
"hyp_tangent":"hyperbolický tangens",
"hyp_cotangent":"hyperbolický kotangens",
"hyp_secant":"hyperbolický sekant",
"hyp_cosecant":"hyperbolický kosecant",
"hyp_arc_sine":"hyperbolický arkus sínus",
"hyp_arc_cosine":"hyperbolický arkus kosínus",
"hyp_arc_tangent":"hyperbolický arkus tangens",
"hyp_arc_cotangent":"hyperbolický arkus kotangens",
"square_roots_and_degrees":"Mocminy a odmocniny",
"square_root":"Druhá odmocnina",
"degree":"Mocniny",
"root":"Odmocniny",
"variable_x":"hodnota x umocnená na y",
"root_y":"Odmocnina y z čísla x",
"exponential":"Exponenciálne funkcie a logaritmy",
"natural_log":"Prirodzený logaritmus",
"decimal_log":"Dekadický logaritmus",
"abs":"Absolútna hodnota čísla",
"rounding":"Zaokrúhľovanie",
"round_nearest":"zaokrúhlenie na najbližšie celé číslo",
"round_nearest_big":"zaokrúhlenie na najbližšie väčšie celé číslo",
"round_nearest_small":"zaokrúhlenie na najbližšie menšie celé číslo",
"consts":"Konštanty",
"available_const":"K dispozíci je aj niekoľko konštánt:",
"keys":"Klávesové skratky",
"moved_left":"graf sa posunie doľava",
"moved_top":"graf sa posunie nahor",
"moved_right":"graf sa posunie doprava",
"moved_botom":"graf sa posunie nadol",
"guide":"Používateľská príručka",
"using":"Použitie",
"examples":"Príklady",
"other":"Iné",
"you_can_view":"Tento príklad si môžete zobraziť. Nezabudnite v možnostiach nastaviť presnosť, ak to bude potrebné.",
"save_graph":"Uloženie grafu",
"in_some_browsers":"V niektorých prehliadačoch pri použití metódy zobrazenia \"Plátno\" môžete uložiť graf tak, že naň kliknete pravým tlačidlom myši a vyberiete možnosť \"Uložiť obrázok\". Môžete ukladať aj 3D-grafy.",
"offset":"Posun",
"if_graph_isnt":"Ak graf nie je na správnom mieste (je väčší ako plátno), môžete nastaviť potrebné nastavenia v menu.",
"history":"História",
"current":"Súčasná",
"additional":"Ďalšia",
"left_arrow":"šípka doľava",
"right_arrow":"šípka doprava",
"top_arrow":"šípka nahor",
"bottom_arrow":"šípka nadol",
"or":"alebo",
"funcs":"Funkcie",
"widget_is_developed":"Widget programuje",
"if_you_want_to":"Ak nás chcete informovať o chybe, napísať nám podnet alebo sa len niečo opýtať, môžete napísať na tento e-mail:",
"if_you_want_to_change":"Ak chcete zmeniť dizajn pozadia, potom môžete napísať na túto adresu:",
"set_of_def":"Definičný obor:",
"parity":"Párnosť:",
"zeros":"Núl vo funcii:",
"signe":"Znamienko:",
"asympt":"Asymptoty",
"min":"Min",
"ev":"párna",
"unev":"nepárna",
"na":"–",
"curve_lower":"Krivka je nižšie ako HA",
"curve_higher":"Krivka je vyššie ako HA",
"max":"Max",
"no_min":"Žiadne minimum",
"no_max":"Žiadne maximum",
"tool_for":"Nástroj na analýzu funkcie nie je spoľahlivý na 100 %. Nezabudnite si skontrolovať výsledky analýzy predtým, ako ich použijete.",
"ah_left":"HA vľavo:",
"ah_right":"HA vpravo:",
"av":"AV:",
"options_saved":"Nastavenia uložené!",
"cur_version":"Súčasná verzia:",
"last_version":"Najnovšia on-line verzia:",
"using_web":"Tento widget je dostupný na používanie na stránke:",
"show_saved":"Teraz budú parametre uložené"
}
};
/* ColorPicker */
#canvasSV{
width: 250px;
height: 250px;
border: 1px solid black;
}
#canvasT{
width: 25px;
height: 250px;
border: 1px solid black;
position: relative;
left: 10px;
}
#canvasO{
width: 290px;
height: 25px;
position: relative;
top: 5px;
}
/* Valeurs de la couleur dans le ColorPicker */
#colorValues{
position: relative;
left: 10px;
font-size: 11px;
float: right;
}
#colorValues td{
vertical-align: middle;
text-align: right;
}
/* Aperçus dans le ColorPicker */
#apercuCouleur{
position: absolute;
right: 20px;
bottom: 40px;
width: 40px;
height: 30px;
border: 1px white solid;
border-radius: 5px;
-webkit-border-radius: 5px;
background-color: rgb(193,255,0);
}
#apercuCouleur2{
position: absolute;
right: 65px;
bottom: 40px;
width: 40px;
height: 30px;
border: 1px white solid;
border-radius: 5px;
-webkit-border-radius: 5px;
background-color: rgb(193,255,0);
}
/* Boutons qui sont en haut du widget */
#haut{
position: absolute;
top: 0px;
left: 8px;
right: 0px;
height: 30px;
z-index: 2;
pointer-events: none;
}
#haut > *{
pointer-events: auto;
}
/* Onglets */
.ongletHaut{
/* background-color: rgba(255, 255, 255, 0.3); */
background-image: url('../Images/gradient2.png');
border-color: rgba(255, 255, 255, 0.2);
border-style: none solid solid solid;
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
border-width: 1px;
box-shadow: 0px 0px 2px rgba(0,0,0,0.5);
color: white;
font-size: 16px;
text-align: center;
display: inline-block;
min-width: 90px;
height: 19px;
margin-right: 5px;
padding: 2px 8px;
opacity: 0.9;
cursor: pointer;
vertical-align: bottom;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.ongletHaut:hover{
background-color: rgba(0,180,255,0.3);
/* border-color: rgba(255, 255, 255, 0.6); */
box-shadow:0px 0px 6px rgba(0,180,255,1), 0px 0px 3px rgba(0,0,0,1);
opacity: 1;
}
.ongletHaut:active{
background-color: rgba(0,90,128,0.3);
box-shadow:0px 0px 6px rgba(0,90,128,1), 0px 0px 3px rgba(0,0,0,1);
position: relative;
color: rgba(255,255,255,0.8);
padding-top: 1px;
bottom: 1px;
}
.premierOngletHaut{
font-weight: bold;
background-color: rgba(255,160,0,0.3);
}
.premierOngletHaut:hover{
background-color: rgba(255,160,0,0.5);
box-shadow:0px 0px 6px rgba(255,160,0,1), 0px 0px 3px rgba(0,0,0,1);
}
.premierOngletHaut:active{
background-color: rgba(128,80,0,0.5);
box-shadow:0px 0px 6px rgba(128,80,0,1), 0px 0px 3px rgba(0,0,0,1);
/* position: relative; */
/* bottom: 1px; */
}
/* Bouton qui sert à choisir entre l'affichage 3D et 2D */
#onglet3D{
position: absolute;
top: 8px;
left: 538px;
width: 40px;
height: 19px;
padding-top: 2px;
color: white;
font-size: 16px;
text-align: center;
background-color: rgba(255,255,255,0);
background-image: url('../Images/gradient2.png');
/* background-image: url("../Images/onglet1.png"); */
border: 1px solid rgba(255,255,255,0.2);
border-bottom: none;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
-webkit-border-top-left-radius: 4px;
-webkit-border-top-right-radius: 4px;
box-shadow: 0px 0px 2px rgba(0,0,0,0.2);
cursor: pointer;
opacity: 0.8;
z-index: 3;
}
#onglet3D:hover{
background-color: rgba(255, 255, 255, 0.2);
box-shadow: 0px 0px 4px rgba(255,255,255,1);
opacity: 1;
}
#onglet3D:active{
background-color: rgba(255, 255, 255, 0.1);
box-shadow: 0px 0px 4px rgba(255,255,255,0.5);
top: 9px;
color: rgba(255,255,255,0.8);
}
/* Petits boutons en haut à droite du widget */
#topRightButtons{
position: absolute;
right: 10px;
top: 3px;
z-index: 4;
}
.miniBouton{
display: inline-block;
width: 12px;
height: 12px;
color: white;
font-size: 12px;
text-align: center;
background-color: rgba(255,255,255,0);
background-image: url('../Images/gradient.png');
background-position: 0px 0px;
border: 1px solid rgba(255,255,255,0.5);
border-radius: 6px;
-webkit-border-radius: 6px;
box-shadow: 0px 0px 2px rgba(0,0,0,1);
cursor: pointer;
opacity: 0.5;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.miniBouton:hover{
opacity: 1;
box-shadow: 0px 0px 4px rgba(255,255,255,1);
}
.miniBouton:active{
box-shadow: 0px 0px 4px rgba(255,255,255,0.5);
border: 1px solid rgba(255,255,255,0.4);
width: 11px;
height: 11px;
font-size: 11px;
margin-left: 1px;
}
/* Bouton permettant de minimiser et maximiser le widget */
/* Non utilisé pour le moment...*/
#miniMax{
position: absolute;
left: 564px;
top: 3px;
z-index: 3;
}
/* Boutons pour changer l'action de la souris*/
#zoomButtons{
position: absolute;
left: 13px;
top: 70px;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
#toolButtons{
position: absolute;
left: 23px;
top: 103px;
padding: 2px;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
#toolButtons .toolButton{
margin-bottom: 5px;
margin-top: 0px;
}
#toolButtons .toolButton:active{
margin-bottom: 7px;
}
.toolButton{
margin-left: auto;
margin-right: auto;
width: 16px;
height: 16px;
color: white;
font-size: 14px;
text-align: center;
font-weight: bold;
background-color: rgba(255,255,255,0);
background-image: url('../Images/gradient.png');
background-position: 0px 0px;
border: 1px solid rgba(255,255,255,0.5);
border-radius: 100%;
-webkit-border-radius: 10px;
box-shadow: 0px 0px 2px rgba(0,0,0,1);
cursor: pointer;
opacity: 0.5;
}
.toolButton:hover{
opacity: 1;
box-shadow: 0px 0px 4px rgba(255,255,255,1);
}
.toolButton:active{
box-shadow: 0px 0px 4px rgba(255,255,255,0.5);
border: 1px solid rgba(255,255,255,0.4);
width: 14px;
height: 14px;
font-size: 12px;
position: relative;
top: 1px;
}
.toolButton.selectedTool{
/* background-color: rgba(255,255,255,0); */
background-color: rgba(0,180,255,0.3);
box-shadow:0px 0px 6px rgba(0,180,255,1), 0px 0px 3px rgba(0,0,0,1);
opacity: 0.7;
}
.zoomButton{
display: inline-block;
width: 22px;
height: 22px;
border-radius: 6px;
box-sizing: border-box;
padding: 2px;
}
.zoomButton:active{
width: 20px;
height: 20px;
top: 0px;
}
#zoomOut{
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
}
#zoomOut:active{
margin-left: 2px;
}
#zoomIn{
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
}
.toolButton > .icon{
background-size: 100%;
width: 100%;
height: 100%;
}
#moveTool > .icon{
background-image: url('../Images/move.png');
}
#tangentTool> .icon{
background-image: url('../Images/tangent.png');
}
/* Joystick de déplacement */
#zoneJoystick{
position: absolute;
left: 8px;
top: 8px;
width: 50px;
height: 50px;
padding-left: 6px;
padding-top: 6px;
/* border: 1px solid green; */
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
#joystick{
width: 40px;
height: 40px;
color: white;
font-size: 14px;
text-align: center;
font-weight: bold;
background-color: rgba(255,255,255,0.2);
background-image: url('../Images/gradient4.png');
background-position: 0px 0px;
border: 1px solid rgba(255,255,255,0.5);
border-radius: 25px; /*100% bug dans uniboard*/
-webkit-border-radius: 25px;
box-shadow: 0px 0px 2px rgba(0,0,0,1);
cursor: pointer;
opacity: 0.5;
}
#joystick:hover{
opacity: 1;
box-shadow: 0px 0px 2px rgba(255,255,255,1);
}
#joystick:active{
/* box-shadow: 0px 0px 4px rgba(255,255,255,0.5); */
/* border: 1px solid rgba(255,255,255,0.4); */
/* width: 38px; */
/* height: 38px; */
/* font-size: 12px; */
/* position: relative; */
/* top: 1px; */
/* left: 1px; */
/* margin-bottom: 7px; */
}
#joystick table{
border-collapse: collapse;
width: 40px;
height: 40px;
font-size: 11px;
}
#joystick table tr td{
padding: 0px;
text-shadow: 0px 0px 5px black;
/* border: 1px solid orange; */
opacity: 0.5;
}
#joystick table tr td:hover{
text-shadow: 0px 0px 3px white;
opacity: 1;
}
#joystick table tr td:active{
opacity: 0.8;
}
/* Style pour les menus */
.menu{
position: absolute;
top: 0%;
width: 100%;
max-width: 800px;
min-height: 411px;
max-height: 100%;
overflow: auto;
background-color: rgba(255, 255, 255, 0.7);
border-style: none;
border-width: 1px;
border-color: rgba(0,70,128, 0.9);
border-radius: 4px;
-webkit-border-radius: 4px;
z-index: 2;
display: none;
box-sizing: border-box;
}
.barreBasMenu{
position: absolute;
bottom: 0px;
/* right: 0px; */
}
.barreBasMenu > div{
position: fixed;
width: 100%;
max-width: 800px;
box-sizing: border-box;
/* right: 0px; */
/* bottom: 14px; */
}
.barreBasMenu > div > div{
position: absolute;
bottom: 0px;
right: 0px;
width: 100%;
box-sizing: border-box;
padding-right: 28px;
/* background-color: rgba(255,0,0,0.3); */
text-align: right;
}
.contenuMenu{
font-size: 14px;
padding: 15px;
padding-top: 40px;
/* overflow: auto; */
/* height: 100%; */
/* position: absolute; */
/* top: 0px; */
/* bottom: 0px; */
}
.avecBordures{
/* border-top: 1px solid rgba(255, 255, 255, 0.4); */
/* height: 80% */
}
.ongletMenu{
position: fixed;
/* top: 0px; */
width: 100%;
max-width: 800px;
/* height: 50px; */
/* background-color: rgba(255,0,0,0.3); */
/* border-spacing: 15px; */
box-sizing: border-box;
padding-right: 14px;
text-align: center;
z-index: 1;
}
.ongletMenu > div{
/* position: fixed; */
/* width: inherit; */
/* top: 0px; */
/* left: 0px; */
/* right: 0px; */
}
.deuxOnglets span{
width: 44%;
}
.troisOnglets span{
width: 28%;
}
.ongletMenu span{
display: inline-block;
min-width: 150px;
padding: 5px;
margin: 0px 7px;
text-align: center;
font-weight: normal;
background-color: rgba(255, 255, 255, 0.8);
background-image: url('../Images/gradient3.png');
border: 1px solid rgba(255, 255, 255, 0.9);
border-top: none;
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
-webkit-border-bottom-left-radius: 6px;
-webkit-border-bottom-right-radius: 6px;
box-shadow: 0px 0px 3px rgba(0,0,0,0.5);
opacity: 0.7;
cursor: pointer;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.ongletMenu span.ongletMenuActuel{
opacity: 0.9;
font-weight: bold;
background-color: rgba(255, 255, 255, 0.9);
}
.ongletMenu span:hover{
opacity: 1;
box-shadow:0px 0px 3px rgba(0,0,0,0.5), 0px 0px 7px rgba(255,255,255,1);
}
.ongletMenu span:active{
opacity: 0.7;
font-weight: bold;
box-shadow:0px 0px 3px rgba(0,0,0,0.5), 0px 0px 7px rgba(255,255,255,0.5);
}
.menu table.colonnes tr td{
vertical-align: top;
}
.menu table.colonnes tr td{
border-left: 1px solid rgba(255,255,255,0.5);
padding-left: 4px;
}
.menu table.colonnes tr td.premiereColonne{
border: none;
padding-right: 4px;
}
.miniMenu{
position: absolute;
top: 45%;
left: 50%;
margin-left: -160px;
margin-top: -120px;
width: 320px;
min-height: 240px;
padding: 5px;
text-align: center;
font-size: 14px;
overflow: auto;
background-color: rgba(255, 255, 255, 0.6);
background-image: url('../Images/gradient2.png');
background-size: 100% 100%;
box-shadow: 0px 0px 5px rgba(0,0,0,0.5);
border-style: solid;
border-width: 1px;
border-color: rgba(255,255,255, 0.5);
border-radius: 8px;
-webkit-border-radius: 8px;
z-index: 2;
display: none;
}
.alertMenu{
position: absolute;
top: 126px;
left: 206px;
width: 220px;
height: 140px;
padding: 10px;
text-align: center;
font-size: 14px;
overflow: auto;
background-color: rgba(255, 255, 255, 0.9);
background-image: url('../Images/gradient2.png');
background-size: 100% 100%;
border-style: solid;
border-width: 1px;
border-color: rgba(0,70,128, 0.9);
border-radius: 15px;
-webkit-border-radius: 15px;
z-index: 3;
display: none;
}
.miniMenu select{
/* width: 65px; */
}
.miniMenu input{
width: 45%;
height: 32px;
}
.miniMenu input.smallInput{
width: 45%;
height: 16px;
}
.alertMenu input{
width: 45%;
height: 32px;
}
/* Menu "à propos" */
#credits{
width: 80%;
margin: auto;
margin-top: 10px;
}
#credits tr td{
padding: 10px;
width: 100%;
height: 150px;
text-align: center;
text-shadow: 2px 2px 6px rgba(255,255,255,1);
vertical-align: middle;
background-color: rgba(255,220,150,0.5);
background-image: url('../Images/gradient2.png');
background-size: 100% 100%;
border: 1px solid rgba(255,230,150,0.6);
border-radius: 10px;
-webkit-border-radius: 10px;
box-shadow: 0px 0px 8px rgba(140,70,0,0.5) ;
}
#credits tr td img{
float: left;
margin-top: 20px;
margin-bottom: 20px;
}
#credits tr td a{
font-size: 80%;
}
#credits tr td h3{
text-align:center;
}
#saveImageContent{
width: 100%;
height: 100%;
box-sizing: border-box;
padding-bottom: 30px;
}
#saveImageContent img{
max-width: 100%;
max-height: 100%;
}
/* ----------------- */
/* CSS */
/* ----------------- */
/* Arrière plan du widget */
body{
background-color: transparent;
font-family: Sans-Serif;
}
table tr td{
padding: 0px;
background-image: url('../Images/fond2.png');
background-repeat: no-repeat;
background-position: 0px 0px;
}
/* Widget background */
html, body{
height: 100%;
margin: 0px;
/* Zone d'affichage des fonctions */
#affichage{
position: absolute;
top: 52px;
left: 129px;
width: 500px;
height: 400px;
overflow:hidden;
border: 2px solid black;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
#background{
width: 100%;
height: 100%;
border-spacing: 0;
border-collapse: collapse;
}
.background-border-x{
height: 14px;
padding: 0px;
background-color: "black";
}
.background-border-y{
width: 14px;
padding: 0px;
background-color: "black";
}
#background-top-left{
background-image: url('../Images/darkblue/top-left.png');
background-size: 100% 100%;
}
#background-top{
background-image: url('../Images/darkblue/top.png');
background-size: 100% 100%;
}
#background-top-right{
background-image: url('../Images/darkblue/top-right.png');
background-size: 100% 100%;
}
#background-bottom-left{
background-image: url('../Images/darkblue/bottom-left.png');
background-size: 100% 100%;
}
#background-bottom{
background-image: url('../Images/darkblue/bottom.png');
background-size: 100% 100%;
}
#background-bottom-right{
background-image: url('../Images/darkblue/bottom-right.png');
background-size: 100% 100%;
}
#background-left{
background-image: url('../Images/darkblue/left.png');
background-size: 100% 100%;
}
#background-right{
background-image: url('../Images/darkblue/right.png');
background-size: 100% 100%;
}
#background-center{
background-image: url('../Images/darkblue/center.png');
background-size: 100% 100%;
height: 100%;
padding-top: 30px;
position: relative;
/* Texte et boutons qui sont en haut du widget */
#haut{
position: relative;
top: 13px;
left: 20px;
width: 500px;
z-index: 2;
}
/* Widget center */
#widgetCenter{
height: 100%;
position: relative;
/* Champ permettant d'entrer la fonction à dessiner */
#inputEq{
width: 200px;
}
/* Zone d'affichage des fonctions */
#eventAffichage{
height: 100%;
position: relative;
}
#eventAffichage canvas{
display: block;
/* Texte à côté du champ de la fonction à dessiner */
#texteFonction{
color: white;
font-weight: bold;
}
#affichage{
height: 100%;
box-sizing: border-box;
overflow: hidden;
border: 1px solid rgba(255,255,255,0.5);
/* Partie gauche du widget comprenant les boutons des menus et les options rapides */
#gauche{
position: absolute;
top: 62px;
left: 18px;
width: 100px;
height: 380px;
padding: 2px;
color: white;
font-size: 80%;
background-image: url('../Images/gauche2.png');
border-color: black;
/*border-width: 2px;*/
border-width: 0px;
border-style: solid;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
#affichageOutils{
position: absolute;
top: 0px;
box-sizing: border-box;
height: 100%;
/* Boutons qui sont dans la partie gauche et qui ouvrent les différents menus */
.boutonGauche{
width: 100%;
height: 32px;
text-align: center;
}
#divInputRapide{
display: none;
/* Partie gauche du widget lorsque l'affichage 3D est activé */
#gauche3D{
position: absolute;
top: 11px;
left: 108px;
padding: 3px;
color: white;
text-align: center;
border: 1px solid rgba(255,255,255,0.2);
left: -149px;
top: 234px;
width: 360px;
height: 32px;
padding: 2px;
padding-left: 14px;
border: 2px solid rgba(255, 255, 255, 0.4);
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
box-shadow: 0px 0px 2px rgba(0,0,0,0.5);
background-image: url('../Images/gradient3.png');
background-color: rgba(255,255,255,0.1);
background-size: 100% 100%;
z-index: 2;
background-color: rgba(255, 255, 255, 0.3);
-moz-transform: rotate(270deg);
-webkit-transform: rotate(270deg);
-o-transform: rotate(270deg);
display: none;
z-index: -1;
}
#inputRapide{
width: 270px;
#gauche3D input.boutonGauche3D{
width: 90px;
height: 30px;
}
#menuFonctions3D{
position: absolute;
top: 11px;
left: 108px;
padding: 3px;
color: white;
text-align: center;
border: 1px solid rgba(255,255,255,0.2);
border-radius: 5px;
-webkit-border-radius: 5px;
box-shadow: 0px 0px 2px rgba(0,0,0,0.5);
background-image: url('../Images/gradient3.png');
background-color: rgba(255,255,255,0.1);
background-size: 100% 100%;
z-index: 2;
/* Style pour les menus */
.menu{
position: absolute;
top: 68px;
left: 121px;
width: 450px;
height: 350px;
padding: 10px;
overflow: hidden;
background-color: rgba(255, 255, 255, 0.7);
border-style: none;
border-width: 1px;
border-color: rgba(0,70,128, 0.9);
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
z-index: 2;
display: none;
}
.barreBasMenu{
position: absolute;
right: 0px;
bottom: 0px;
}
#input3D{
width: 265px;
.contenuMenu{
font-size: 14px;
padding: 10px;
overflow: auto;
max-height: 315px;
}
/* Messages */
#divMessages div{
position: absolute;
background-image: url('../Images/cursor.png');
background-repeat: no-repeat;
z-index: 4;
pointer-events: none;
min-height: 24px;
.avecBordures{
border-top: 1px solid rgba(255, 255, 255, 0.4);
height: 80%
}
#divMessages div span{
.ongletMenu{
position: relative;
left: 19px;
top: 20px;
padding: 2px;
color: white;
font-size: 11px;
top: 3px;
width: 100%;
}
.ongletMenu tr td{
width: 30%;
height: 30px;
text-align: center;
border: 1px solid rgba(255,255,255,0.2);
border-radius: 5px;
-webkit-border-radius: 5px;
box-shadow: 0px 0px 2px rgba(0,0,0,0.5);
text-shadow: 0px 0px 3px rgba(0,165,255,0.7);
background-image: url('../Images/gradient2.png');
background-color: rgba(0,86,134,0.6);
pointer-events: auto;
}
#divMessages div span a{
color : rgb(135,210,255);
font-weight: normal;
background-color: rgba(255, 255, 255, 0.7);
border: 1px solid rgba(255, 255, 255, 0.9);
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
opacity: 0.5;
cursor: pointer;
}
#divMessages div span a:hover{
color : rgb(110,200,255);
text-decoration: underline;
text-decoration-style: dotted;
.ongletMenu tr td:hover{
opacity: 1;
}
.ongletMenu tr td.ongletMenuActuel{
position:relative;
top:-1px;
opacity: 0.9;
font-weight: bold;
border-bottom : none;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
-moz-border-radius-bottomleft: 0px;
-moz-border-radius-bottomright: 0px;
-webkit-border-bottom-left-radius: 0px;
-webkit-border-bottom-right-radius: 0px;
}
.miniMenu{
position: absolute;
top: 120px;
left: 170px;
width: 320px;
height: 240px;
padding: 10px;
text-align: center;
font-size: 14px;
overflow: auto;
background-color: rgba(255, 255, 255, 0.9);
border-style: solid;
border-width: 1px;
border-color: rgba(0,70,128, 0.9);
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
z-index: 2;
display: none;
}
.alertMenu{
position: absolute;
top: 170px;
left: 220px;
width: 220px;
height: 140px;
padding: 10px;
text-align: center;
font-size: 14px;
overflow: auto;
background-color: rgba(255, 255, 255, 0.9);
border-style: solid;
border-width: 1px;
border-color: rgba(0,70,128, 0.9);
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
z-index: 3;
display: none;
}
.miniMenu input{
width: 45%;
height: 32px;
}
/* Taille standard des boutons*/
.bouton{
/*width: 100px;*/
height: 25px;
font-size: 12px;
.alertMenu input{
width: 45%;
height: 32px;
}
/* Boutons qui sont dans la partie gauche et qui ouvrent les différents menus */
.boutonGauche{
width: 100%;
height: 32px;
text-align: center;
/* Menu des crédits */
#credits{
width: 80%;
margin: auto;
}
#credits tr td{
padding: 20px;
width: 100%;
height: 150px;
text-align: center;
vertical-align: middle;
background-color: rgba(255, 255, 255, 0.7);
border: 2px solid white;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
#credits tr td img{
float: left;
}
#credits tr td a{
font-size: 80%;
}
#credits tr td h3{
text-align:center;
}
/* Aperçu couleur 3D*/
#apercuCouleur3D{
border: 1px solid rgba(0, 0, 0, 0.7);
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
}
......@@ -201,29 +252,102 @@ html, body{
.smallInput{
width: 35px;
}
.mediumInput{
width: 45px;
/* Choix de la saturation et de la valeur dans le ColorPicker */
#colorSV{
float: left;
width: 255px;
height: 255px;
border: 1px solid black;
background-color: red;
cursor: crosshair;
}
/* Choix de la teinte dans le ColorPicker */
#colorT{
float: left;
width: 20px;
height: 255px;
margin-left: 10px;
border: 1px solid black;
background-color: black;
cursor: crosshair;
}
/* Valeurs de la couleur dans le ColorPicker */
#colorValues{
position: relative;
left: 10px;
font-size: 80%;
}
/* Boutons qui ouvrent le ColorPicker */
/*Menu de gauche*/
#buttonColor{
float: left;
position: relative;
left: 75px;
top: -18px;
width: 20px;
height: 20px;
border: 1px white solid;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
background-color: rgb(193,255,0);
cursor:pointer;
}
#buttonColor:hover{
border-width: 2px;
left: 74px;
top: -19px;
}
#apercuCouleur{
position: absolute;
right: 20px;
bottom: 40px;
width: 40px;
height: 30px;
border: 1px white solid;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
background-color: rgb(193,255,0);
}
#apercuCouleur2{
position: absolute;
right: 65px;
bottom: 40px;
width: 40px;
height: 30px;
border: 1px white solid;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
background-color: rgb(193,255,0);
}
/*Fonctions supplémentaires*/
.boutonCouleur{
position: relative;
left: 2px;
top: 4px;
width: 15px;
height: 15px;
border: 1px solid rgba(0,0,0,0.5);
top: 0px;
width: 20px;
height: 20px;
color: rgba(0,0,0,0);
border: 1px white solid;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
background-color: rgba(0,128,255,0.8);
display: inline-block;
background-color: rgb(0,171,255);
cursor:pointer;
opacity: 0.7;
}
.boutonCouleur:hover{
box-shadow: 0px 0px 2px rgba(0,128,255,1);
opacity: 1;
border-width: 2px;
left: 1px;
top: 0px;
}
/* Texte d'information (plus petit) */
......@@ -236,12 +360,9 @@ html, body{
/* Style pour le texte où on peut cliquer dessus */
.survol{
cursor: pointer;
color: rgb(0,70,120);
}
.survol:hover{
color: rgb(0,110,150);
opacity: 0.7;
/* text-shadow: 0px 0px 3px white; */
color: rgba(0,0,0,0.5);
}
/* Texte en gras */
......@@ -251,58 +372,57 @@ html, body{
/* Flèches permettant de deplacer l'affichage */
.flecheDeplacement{
color: black;
text-shadow: 0px 0px 20px rgba(255,255,255,1);
opacity: 0;
font-size: 56px;
text-align: center;
cursor: pointer;
z-index: 1;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
color: black;
opacity: 0;
font-size: 56px;
text-align: center;
cursor: pointer;
z-index: 1;
}
.flecheDeplacement:hover{
opacity: 0.4;
}
.flecheDeplacement:active{
opacity: 0.3;
opacity: 0.4;
}
#flecheHaut{
position: absolute;
top: 15px;
left: 50%;
margin-left: -35px;
width: 70px;
height: 55px;
position: absolute;
top: 46px;
left: 345px;
width: 70px;
height: 55px;
}
#flecheBas{
position: absolute;
bottom: 20px;
left: 50%;
margin-left: -35px;
width: 70px;
height: 55px;
position: absolute;
top: 381px;
left: 345px;
width: 70px;
height: 55px;
}
#flecheGauche{
position: absolute;
top: 50%;
margin-top: -36px;
left: 15px;
width: 55px;
height: 70px;
position: absolute;
top: 216px;
left: 137px;
width: 55px;
height: 70px;
}
#flecheDroite{
position: absolute;
top: 50%;
margin-top: -36px;
right: 15px;
width: 55px;
height: 70px;
position: absolute;
top: 216px;
left: 567px;
width: 55px;
height: 70px;
}
/* Bouton permettant de minimiser et maximiser le widget */
#miniMax{
position: absolute;
right: 10px;
top: 10px;
font-size: 24px;
color: rgba(0,0,0,0.4);
cursor: pointer;
}
#miniMax:hover{
color: rgba(0,0,0,1);
}
/* Boutons permettant de choisir l'action de la souris dans le menu des outils */
.choixOutil{
......@@ -312,6 +432,29 @@ html, body{
cursor: pointer;
}
/* Point sous la souris */
#point{
position: absolute;
top: -10px;
left: -10px;
color: white;
}
/* Coordonnées du points sous la souris */
#info{
position: absolute;
top: 57px;
left: 137px;
color: white;
}
/* Outil de tangente */
#tangente{
position: absolute;
top: 52px;
left: 129px;
width: 500px;
height: 400px;
z-index: -1;
}
/* Petits boutons plus et moins dans les options */
.boutonPlus{
......@@ -325,6 +468,7 @@ html, body{
background-color: rgba(0, 140, 255, 0.2);
border: 1px rgba(0,0,0,0.5) solid;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
cursor: pointer;
display: inline-block;
......@@ -340,6 +484,7 @@ html, body{
background-color: rgba(0, 140, 255, 0.2);
border: 1px rgba(0,0,0,0.5) solid;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
cursor: pointer;
display: inline-block;
......@@ -353,36 +498,44 @@ html, body{
background-color: rgba(0, 140, 255, 0.5);
}
/* Menu etudes fonctions*/
#menuEtude p{
margin-top: 7px;
margin-bottom: 0px;
/* font-weight: bold; */
/* Bouton qui sert à choisir entre l'affichage 3D et 2D */
#onglet3D{
position: absolute;
top: 30px;
left: 570px;
width: 40px;
height: 21px;
color: white;
text-align: center;
background-color: rgba(255, 255, 255, 0.4);
background-image: url("../Images/onglet1.png");
border: 1px solid black;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
-moz-border-radius-topleft: 4px;
-moz-border-radius-topright: 4px;
-webkit-border-top-left-radius: 4px;
-webkit-border-top-right-radius: 4px;
cursor: pointer;
opacity: 0.4;
z-index: 3;
}
#menuEtude span{
/* font-weight : normal; */
#onglet3D:hover{
opacity: 0.9;
}
/* Tableau du signe dans le menu d'étude de la fonction*/
#etudeSigne{
/* border-collapse: collapse; */
border-spacing: 0px;
}
#etudeSigne td{
min-width: 25px;
text-align: center;
padding: 0px;
}
#etudeSigne td.premier{
font-weight: bold;
}
#etudeSigne td.bordure{
#etudeSigne td.border{
border: 1px solid black;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
#etudeSigne td.fondNoir{
#etudeSigne td.infini{
background-color: rgba(0,0,0,0.5);
}
......@@ -406,7 +559,7 @@ h3{
font-weight: 600;
text-align: left;
/*font-style: italic;*/
margin-top: 7px;
margin-top: 10px;
margin-bottom: 20px;
}
h4{
......@@ -418,6 +571,36 @@ h4{
margin-bottom: 10px;
}
/* Petits boutons en haut à droite du widget */
.miniBouton{
width: 12px;
height: 12px;
color: white;
font-size: 12px;
text-align: center;
background-color: rgba(255,255,255,0.5);
border: 1px solid white;
border-radius: 6px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
cursor: pointer;
opacity: 0.5;
}
.miniBouton:hover{
opacity: 1;
}
#boutonAgrandir{
position: absolute;
left: 635px;
top: 11px;
z-index: 3;
}
#boutonFermer{
position: absolute;
left: 615px;
top: 11px;
z-index: 3;
}
/* Menu Mise à Jour */
#mAj{
......@@ -437,7 +620,7 @@ h4{
overflow: hidden;
}
#mAj input{
min-height: 27px;
height: 32px;
}
.boutonSauvegarde{
......@@ -446,214 +629,31 @@ h4{
}
#cacheCookies{
position: absolute;
top: 150px;
left: 10px;
top: 170px;
left: 14px;
width: 93%;
height: 150px;
height: 130px;
background-color: rgba(255,255,255,0.7);
border: 1px rgba(255,255,255,0.8) solid;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
text-align: center;
display: none;
}
#cacheMaJ{
position: absolute;
padding-top: 20px;
padding-bottom: 10px;
top: 250px;
padding-top: 10px;
top: 270px;
left: 14px;
width: 93%;
height: 25px;
background-color: rgba(255,255,255,0.8);
border: 1px rgba(255,255,255,0.8) solid;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
text-align: center;
font-weight: bold;
display: none;
}
/* Menu clique droite sur le graphique */
#ctxMenu{
position: absolute;
border: 1px solid black;
border-radius: 5px;
background-color: rgba(255,255,255,0.8);
box-shadow: 0px 0px 5px rgba(0,64,126,0.5);
font-size: 12px;
padding: 2px;
z-index: 2;
display: none;
}
#ctxMenu input.bouton{
width: 140px;
height: 25px;
}
#ctxMenu h1{
font-size: 14px;
text-align: center;
text-decoration: underline;
text-shadow: 0px 0px 4px rgba(0,100,200,0.7);
margin: 3px;
}
#ctxMenu div.fermer{
position: absolute;
right: 0px;
top: 0px;
width: 10px;
height: 10px;
font-size: 10px;
cursor: pointer;
opacity: 0.7;
}
#ctxMenu div.fermer:hover{
text-shadow: 0px 0px 2px rgba(0,128,255,1);
opacity: 1;
}
.miniCouleur{
display: inline-block;
width: 10px;
height: 10px;
border: 1px solid rgba(0,0,0,0.5);
border-radius: 3px;
background-color: rgba(0,128,255,0.8);
cursor: pointer;
opacity: 0.7;
}
.miniCouleur:hover{
box-shadow: 0px 0px 2px rgba(0,128,255,1);
opacity: 1;
}
/* Editeur de fonctions dans le menu + */
#functionMenuRight{
position: absolute;
right: 15px;
width: 45%;
box-sizing: border-box;
}
#functionMenuLeft{
max-width: 50%;
/* min-height: 400px; */
box-sizing: border-box;
}
#fonctionsSupp{
width: 100%;
min-height: 305px;
/* height: 245px; */
/* border: 1px solid blue; */
overflow: auto;
}
.spanFonction{
/* width: 320px; */
border: 1px solid rgba(0,0,0,0.3);
border-radius: 5px;
background-color: rgba(255,255,255,0.2);
background-image: url('../Images/gradient2.png');
background-position: 0px -2px;
box-shadow: 0px 0px 4px rgba(0,64,126,0.2);
padding: 2px;
margin: 4px;
font-weight: bold;
text-align: center;
overflow: hidden;
cursor: pointer;
}
.spanFonction:hover{
background-color: rgba(164,228,255,0.2);
box-shadow: 0px 0px 2px rgba(0,150,255,0.6);
}
.spanFonctionSelect{
background-color: rgba(118,214,255,0.4);
border-color: rgba(0,63,126,0.3);
}
.spanFonctionSelect:hover{
background-color: rgba(118,214,255,0.6);
}
#editeurFonction{
/* position: absolute; */
/* right: 15px; */
/* top: 45px; */
min-width: 300px;
/* height: 75%; */
border: 1px solid rgba(255,255,255,0.7);
/* border-top: 1px solid rgba(255,255,255,0.3); */
border-radius: 5px;
background-color: rgba(255,255,255,0.2);
background-image: url('../Images/gradient2.png');
background-size: 100% 100%;
box-shadow: 0px 0px 4px rgba(0,64,126,0.2);
font-size: 12px;
padding: 2px;
}
#editeurApercu{
position: relative;
display : block;
margin : auto;
width: 100px;
height : 80px;
border: 1px solid white;
border-radius: 3px;
background-color: rgba(255,255,255,0.8);
box-shadow: 0px 0px 2px rgba(0,64,126,0.5);
font-size: 12px;
padding: 2px;
}
.editeurOnglets{
position: relative;
bottom: 3px;
width: 100%;
text-align: center;
}
.editeurOnglets span{
display: inline-block;
min-width: 70px;
width: 40%;
padding: 5px;
margin: 0px 2px;
text-align: center;
font-weight: normal;
background-color: rgba(255, 255, 255, 0.7);
background-image: url('../Images/gradient3.png');
border: 1px solid rgba(255, 255, 255, 0.9);
border-top: 1px solid white;
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
-webkit-border-bottom-left-radius: 6px;
-webkit-border-bottom-right-radius: 6px;
box-shadow: 0px 0px 3px rgba(0,0,0,0.5);
opacity: 0.5;
cursor: pointer;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.editeurOnglets span.ongletActuel{
opacity: 0.8;
font-weight: bold;
}
.editeurOnglets span:hover{
opacity: 1;
box-shadow:0px 0px 3px rgba(0,0,0,0.5), 0px 0px 7px rgba(255,255,255,1);
}
.editeurOnglets span:active{
opacity: 0.7;
font-weight: bold;
box-shadow:0px 0px 3px rgba(0,0,0,0.5), 0px 0px 7px rgba(255,255,255,0.5);
}
#divSuppOutil div{
position: absolute;
width: 10px;
height: 10px;
font-size: 10px;
cursor: pointer;
opacity: 1;
z-index: 1;
}
#divSuppOutil div:hover{
color: rgb(200,0,0);
}
}
\ No newline at end of file
<?xml version="1.0" encoding="UTF-8"?>
<widget xmlns="http://www.w3.org/ns/widgets"
identifier="http://getuniboard.com/"
version="1.6.0"
width="800"
height="600"
ub:resizable="true">
<name>Mathematical function plotter</name>
<content src="Grapheur.html"/>
identifier="http://getuniboard.com/"
version="1.3"
width="675"
height="490"
ub:resizable="false">
<name>Traceur de fonctions mathématiques</name>
<content src="Grapheur.xhtml"/>
</widget>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>GraphMe - Version</title>
</head>
<body>
<span style="font-size:12px; text-align:center;">2.1.0 (2018-06-04)</span>
<span style="font-size:12px; text-align:center;">1.3.1 (2010/09/25)</span>
</body>
</html>
</html>
\ No newline at end of file
██████ ███ ███
██ ██████ █████ ██████ ██ ██ ████ ████ ███████
██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ████ ██ ██
██ ███ ███████ ███████ ██████ ███████ ██ ██ ██ █████
██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██
██████ ██ ██ ██ ██ ██ ██ ██ ██ ██ ███████
---- 2.1 ----
Général:
- Résolution de bugs avec l'historique des fonctions
- Reprogrammation de la liste des fonctions
- Gestion des erreurs lors de la restauration de l'état sauvegardé
- Sauvegarde du mode d'affichage en cours, 3D ou 2D
- Sauvegarde de l'état de la liste des fonctions
- Sauvegarde de l'outil sélectionné
- Icône du widget amélioré pour OpenBoard
Interface:
- Amélioration de l'interface pour le changelog et l'aide
- Masquage des boutons de l'affichage en plein à écran avec OpenBoard
- Amélioration de l'affichage des fonctions dans l'historique
- Message d'info au chargement du widget en cas de fonctions restaurées
- Thème bleu foncé avec les coins carrés
Outils:
- Correction des outils décalés par rapport à la souris
---- 2.0.x ----
- (2.0.2) Amélioration de la sauvegarde du graphique en image:
affichage de l'image générée dans un menu
- (2.0.1) Cacher les nouveaux boutons de zoom en mode affichage 3D
- Bug: Impossible de changer de thème avec OpenBoard
- Bug: Les fonctions d'exemple ne fonctionnent pas si un autre type
que cartésien est sélectionné dans l'interface des fonctions
---- 2.0 ----
Général:
- Nouvelle interface adaptive selon la taille de la fenêtre
- Bug: Passer de 3D à 2D essaie de dessiner la fonction 3D en 2D
- Mettre en évidence l'outil sélectionné
- Boutons de zoom
- Historique des dernières fonctions pour tous les types de fonction
- Réinitialisation des inputs quand la page est actualisée
- Sauvegarde de l'état des inputs et de l'historique
---- 1.6 ----
Fonctions:
- Fonctions implicites (Par exemple un cercle: y^2 + x^2 = 9)
- Fonctions polaires (Par exemple une spirale: r(t) = t)
- Fonctions paramétriques (Par exemple un cercle: x(t) = cos(t) et y(t) = sin(t))
Interface:
- Traduction anglais/français selon la langue du navigateur
- Police d'écriture sans-serif
- Aperçu des fonctions implicites, polaires et paramétriques
- Dans la liste des fonctions, afficher la fonction ouverte dans l'éditeur
- Bug: L'éditeur permet d'éditer une fonction alors que la liste est vide
- Bug: Le choix du style de ligne par défaut ne fonctionne pas
- Bug: Bouton non cliquable près d'un message d'aide
Outils:
- Outil point et tangente pour les fonctions polaires et paramétriques.
---- 1.5.x ----
- (1.5.1) Sauvegarde du graphique 3D
- Amélioration du menu des mises à jour, prise en compte de tous les serveur
- Menu pour afficher les options sauvegardées dans les cookies
- Correction des problèmes de l'échelle et de la grille du graphique
- Bug: L'outil déplacement est stoppé quand on passe sur une flèche de déplacement
---- 1.5 ----
Fonction:
- Pouvoir changer le style de chaque fonction (ligne, points, traits)
- Bug: l'outil déplacement est toujours actif quand on sort du graphique
- Bug: le bouton dupliquer dans l'éditeur fonctionne mal
- Condition initiale de la primitive à coté de F(x) dans l'éditeur
(utilisation de disabled="disabled" lorsque F(x) n'est pas coché)
- Bug: impossible de modifier la fonction principale avec l'éditeur de fonctions
- Nouveau menu pour modifier les valeurs par défaut des fonctions
Affichage 3D:
- La partie de la fonction éloignée est maintenant dessinée après la partie proche
- La grille est plus visible
Outils:
- Suppression du menu des outils
- Outils pour chaque fonction dans le menu "fonctions"
Interface:
- Nouvelle interface. Onglets en haut du widget. Boutons "animés"
- Modifier l'aide pour qu'elle corresponde à la nouvelle interface
- Suppression de la sélection du texte sur les boutons et les onglets
- Joystick de déplacement en haut à gauche de l'affichage
- Choix des outils à la souris plus facile (ajout de boutons à gauche de l'affichage)
- Zone de texte au millieu de l'écran pour écrire facilement la première fonction
Focus automatique sur la zone
- Bulles d'aide
---- 1.4.x ----
- (1.4.3) ColorPicker: Récupérer la bonne couleur lors de l'ouverture
- ColorPicker: Pouvoir changer la couleur à partir des inputs
- ColorPicker: Choisir la couleur avec la roulette de la souris
- (1.4.2) Amélioration de la qualité et de la rapidité des études de fonction
- Pouvoir choisir la fonction à étudier
- Bug: impossible de modifier les fonctions depuis l'éditeur
- (1.4.1) Choisir la taille et la couleur de fond du graphique sauvegardé
- L'utilisation de ^ dans les fonctions n'est possible qu'avec un chiffre.
Il faudrait pouvoir écrire 2^x ou 4^(x+2)
- Bug: fermer le menu clique droit ajoute un point sur le graphique
---- 1.4 ----
Fonctions:
- Affichages canvas, svg et uniboard complétement refaits
- Grande amélioration des perfomances d'affichage 2D et 3D en définissant
les fonctions avec "new Function()"
- Amélioration des fonctions supplémentaires
- Suppression de la méthode d'affichage xpm
- Style de la fonction (continu, points, traits)
- Bug: la fonction 3D "sin(x)+cos(y)" afficher l'erreur "y is not defined";
- Couleur aléatoire pour les nouvelles fonctions supplémentaires
Interface:
- Menu clique droite sur le graphique
- Fenêtre d'édition des fonctions supplémentaires
- Désactiver le bouton de mise à jour automatique lorsqu'on utilise la version online du widget
(utiliser disabled="disabled")
Outils:
- Outils pour le nouvel affichage
- Outil point refait avec canvas
- Déplacer les informations des outils (point et tangente) à coté de la souris
- Bug: le déplacement de l'affichage 3D à la souris va dans le mauvais sens
- Cliquer permet de conserver le point ou la tangente actuelle
- Tous les outils fonctionnent en plein écran
- Outils sur plusieurs fonctions
ColorPicker:
- Bug: mauvaise couleur lorsque la teinte est à 240 ou 120
Général:
- Abandon du format xhtml pour passer à l'html5
- Sauvegardes pour les nouvelles options
- Amélioration des messages d'erreur
- Amélioration du système de mise à jour
---- 1.3.x ----
- (1.3.4) ColorPicker: Slide barre permettant de changer la transparence
- ColorPicker: Reprogrammer en canvas
- (1.3.3) Sauvegarde du graphique
- Remplacer les ^ par pow() pour pouvoir écrire des fonctions plus facilement,
comme x^2 ou (4-x)^5
- La couleur des fonctions supplémentaires n'est pas toujours juste
- (1.3.2) Modification de la taille des boutons
- (1.3.1) Mise à jour automatique
---- 1.3 ----
Fonctions:
- Amélioration des études de fonctions
- Pouvoir dessiner la dérivée seconde
- Corriger la tangente lorsque la zone d'affichage est modifiée
- Corriger l'échelle lors du déplacement de la fonction
- Ajout des fonctions sec, csc, arcsec, arccsc, sinh, cosh, tanh, coth, sech, csch
ainsi que arcsinh, arccosh, arctanh et arccoth
- Supprimer les traits où la fonction n'est pas définie
- Corriger l'outil point sur certaines fonctions (root(x,4))
(problème lié à la fonction non-définie)
- Aire sous la fonction
- Corrigé bug canvas lors de l'agrandissement
- Les outils de la souris ne fonctionnent pas au survol des flèches de déplacement
Interface:
- Sauvegarder les options
- Explication de la sauvegarde du graphique dans l'aide
- Guide d'utilisation
- Corrections dans l'aide
ColorPicker:
- Aperçu de la couleur
Autres:
- Modification de la précision par défaut
---- 1.2 ----
Fonctions:
- Dessiner plusieurs fonctions
- Historique
- Bug: certaines fonctions ne s'affichent pas correctement
exemples: pow(1-x*x*x, 1/3) , pow(x*x*x-3*x, 1/3) , pow(x*x*x-3*x+2, 1/3)
- Corriger l'affichage de la dérivée lorsqu'on change la précision d'affichage
- Corriger l'affichage des coordonnées
- Gestion des erreurs avec try and catch
- Outil tangente
Interface:
- Défilement des menus
- Tests d'affichage
- Bouton de maximisation du widget
- Mise à Jour
Affichage 3D:
- Zoom
-------------------------------
Idées d'améliorations futures
-------------------------------
Fonctions:
- Ajouter les fonctions arcsech et arccsch
- Détecter et mettre en évidence les AV
- Progression pendant le calcul des fonctions 3D
- Progression pendant l'étude de fonction
- Écrire le nom de la fonction sur le graphique
- Récupérer la fonction à partir de l'URL, pour pouvoir
envoyer le lien d'une fonction à qqn
- Bug: la puissance de la fonction sin(x)*cos(x)^2 n'est pas remplacée juste
- Sauvegarder l'historique
- Afficher le type de fonction dans l'éditeur
- Ne pas choisir aléatoirement la même couleur qu'une couleur déjà utilisée
- Amélioration du dessin des fonctions implicites
- Aperçu des fonctions d'exemple avant de les ajouter au graphique
Fonction 3D:
- Amélioration du choix de la couleur (interpolation entre 2 couleurs)
- Affichage 3D avec WebGL
Outils:
- Outils point et tangente pour les fonctions implicites
- Personnalisation de la sauvegarde du graphique
- Magnétisme de l'outil point
- Calculer le volume du corps de rotation de la fonction
- Outil affichant le cercle tangent à la courbe (selon la seconde dérivée)
- Utiliser le point de la fonction le plus proche de la position de la souris
Affichage:
- Style de grille: quadrillée, polaire, aucune
- Mode "trigonomètrique" pour que l'échelle soit affichée sur des multiples de PI
- Mode d'affichage ASCII
Affichage uniboard:
- Finir de coder
- Choisir où placer le graphique
- Uniboard 3D
Interface:
- Option pour redimensionner le widget dans OpenBoard / Sankoré
- Bulles d'aide
- Scroll dans uniboard
- Menu clique droit dans uniboard
- Le bouton actualiser dans le menu étude n'actualise pas forcément la bonne fonction
- Icone du bouton sauvegarder
- Cacher le joystick et les boutons des outils en mode plein écran après 5s
ColorPicker:
- Dessiner avec svg lorsqu'on choisit svg dans les options
- Vérifier les valeurs entrées dans les inputs
- Annuler le choix de la couleur ne revient pas au menu précédent
Général:
- Récupérer le numéro de la version en ligne pour comparer les versions
- Multithreading
!- Rendu des dessins progressivement de plus en plus précis
- Sauvegarder les options automatiquement, bouton reset dans le menu GraphMe
Script portable:
- Créer un script pour intégrer le widget à n'importe quelle page web
- Personnalisation de la taille du widget portable
- Déplacement du widget comme une fenêtre
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