Clément Fauconnier
6 years ago
parent
b94ec80753
commit
812b446f46
@ -0,0 +1,921 @@ |
||||
<!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"/> |
||||
|
||||
<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> |
||||
|
||||
<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> |
||||
File diff suppressed because it is too large
Load Diff
|
After Width: | Height: | Size: 431 B |
|
After Width: | Height: | Size: 447 B |
|
After Width: | Height: | Size: 738 B |
|
After Width: | Height: | Size: 26 KiB |
|
After Width: | Height: | Size: 890 B |
|
After Width: | Height: | Size: 856 B |
|
After Width: | Height: | Size: 410 B |
|
After Width: | Height: | Size: 441 B |
|
After Width: | Height: | Size: 785 B |
|
After Width: | Height: | Size: 482 B |
|
After Width: | Height: | Size: 505 B |
|
After Width: | Height: | Size: 5.0 KiB |
|
After Width: | Height: | Size: 167 KiB |
|
After Width: | Height: | Size: 4.0 KiB |
|
After Width: | Height: | Size: 4.0 KiB |
|
After Width: | Height: | Size: 473 B |
|
After Width: | Height: | Size: 502 B |
|
After Width: | Height: | Size: 4.3 KiB |
|
After Width: | Height: | Size: 846 B |
|
After Width: | Height: | Size: 320 B |
|
After Width: | Height: | Size: 316 B |
|
After Width: | Height: | Size: 1.5 KiB |
|
After Width: | Height: | Size: 98 KiB |
|
After Width: | Height: | Size: 1.0 KiB |
|
After Width: | Height: | Size: 861 B |
|
After Width: | Height: | Size: 324 B |
|
After Width: | Height: | Size: 323 B |
|
After Width: | Height: | Size: 1.3 KiB |
|
Before Width: | Height: | Size: 24 KiB |
|
Before Width: | Height: | Size: 34 KiB |
|
Before Width: | Height: | Size: 28 KiB |
|
Before Width: | Height: | Size: 138 KiB |
|
Before Width: | Height: | Size: 41 KiB |
|
Before Width: | Height: | Size: 8.0 KiB |
|
Before Width: | Height: | Size: 8.6 KiB |
|
Before Width: | Height: | Size: 9.7 KiB |
|
After Width: | Height: | Size: 544 B |
|
After Width: | Height: | Size: 500 B |
|
After Width: | Height: | Size: 475 B |
|
After Width: | Height: | Size: 453 B |
|
After Width: | Height: | Size: 602 B |
|
After Width: | Height: | Size: 2.1 KiB |
|
After Width: | Height: | Size: 567 B |
|
After Width: | Height: | Size: 353 B |
|
After Width: | Height: | Size: 341 B |
|
After Width: | Height: | Size: 350 B |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 93 KiB |
|
After Width: | Height: | Size: 3.1 KiB |
|
After Width: | Height: | Size: 1.9 KiB |
|
After Width: | Height: | Size: 386 B |
|
After Width: | Height: | Size: 418 B |
|
After Width: | Height: | Size: 2.0 KiB |
@ -0,0 +1,386 @@ |
||||
|
||||
// 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(); |
||||
} |
||||
}; |
||||
@ -1,332 +1,407 @@ |
||||
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 |
||||
|
||||
var fonction3D = false; |
||||
var outilPrecedent = ""; |
||||
|
||||
function activer3D(){ |
||||
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) |
||||
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 |
||||
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() |
||||
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(); |
||||
} |
||||
|
||||
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); |
||||
|
||||
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) |
||||
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 |
||||
continue; |
||||
} |
||||
point3D(coordX, coordY, coordZ) |
||||
this.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 |
||||
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 = eval(eq) |
||||
x4 = x3 - precisionFonction3D |
||||
y4 = y3 |
||||
x = x4 |
||||
//y = y4
|
||||
z4 = eval(eq) |
||||
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 |
||||
continue; |
||||
} |
||||
polygone3D(x1, y1, z1, x2, y2, z2, x3, y3, z3, x4, y4, z4) |
||||
this.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 |
||||
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; |
||||
} |
||||
if(couleur[0] > 255){ |
||||
couleur[0] = 255 |
||||
this.polygone3D(x1, y1, z1, x2, y2, z2, x3, y3, z3, x4, y4, z4); |
||||
} |
||||
if(couleur[0] < 0){ |
||||
couleur[0] = 0 |
||||
} |
||||
if(couleur[1] > 255){ |
||||
couleur[1] = 255 |
||||
} |
||||
if(couleur[1] < 0){ |
||||
couleur[1] = 0 |
||||
} |
||||
// var tf = new Date().getTime();
|
||||
// window.console.log(tf-ti);
|
||||
}, |
||||
|
||||
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 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; |
||||
|
||||
// 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 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; } |
||||
|
||||
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 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(); |
||||
}, |
||||
|
||||
ctx.fillStyle = "rgba("+couleur[rouge3D]+","+couleur[vert3D]+", "+couleur[bleu3D]+", "+opacity+")" |
||||
ctx.closePath() |
||||
ctx.fill() |
||||
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(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));
|
||||
// }
|
||||
|
||||
// Dessine les axes
|
||||
function axes(){ |
||||
for(var i=-5; i<5; i+=precisionDroite3D){ |
||||
point3D(0, 0, i) |
||||
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[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
|
||||
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+=precisionDroite3D){ |
||||
point3D(i, 0, 0) |
||||
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+=precisionDroite3D){ |
||||
point3D(0, i, 0) |
||||
for(var i=-5.5; i<5.5; i+=this.linePrecision){ |
||||
this.point3D(0, i, 0); |
||||
} |
||||
} |
||||
}, |
||||
|
||||
function cube(x, y, z, r){ |
||||
cube: function(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+=this.linePrecision){ |
||||
this.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+=this.linePrecision){ |
||||
this.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+=this.linePrecision){ |
||||
this.point3D(x+r-i, y+r, z); |
||||
} |
||||
for(var i=0; i<r; i+=precisionDroite3D){ |
||||
point3D(x, y+r-i, 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+=precisionDroite3D){ |
||||
point3D(x+i, y, z+r) |
||||
for(var i=0; i<r; i+=this.linePrecision){ |
||||
this.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+=this.linePrecision){ |
||||
this.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+=this.linePrecision){ |
||||
this.point3D(x+r-i, y+r, z+r); |
||||
} |
||||
for(var i=0; i<r; i+=precisionDroite3D){ |
||||
point3D(x, y+r-i, 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+=precisionDroite3D){ |
||||
point3D(x, y, z+i) |
||||
for(var i=0; i<r; i+=this.linePrecision){ |
||||
this.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+=this.linePrecision){ |
||||
this.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+=this.linePrecision){ |
||||
this.point3D(x+r, y, z+i); |
||||
} |
||||
for(var i=0; i<r; i+=precisionDroite3D){ |
||||
point3D(x+r, y+r, 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.
|
||||
function checkCouleurs3D(){ |
||||
var rouge, vert, bleu |
||||
var sensRouge, sensVert, sensBleu |
||||
var precisionApercu = 64 |
||||
couleurGenerale = parseInt(document.getElementById("couleur3Dgenerale").value) |
||||
if(!couleurGenerale){ |
||||
couleurGenerale = 0 |
||||
// 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(couleurGenerale < 0){ |
||||
couleurGenerale = 0 |
||||
if(this.couleurGenerale < 0){ |
||||
this.couleurGenerale = 0; |
||||
} |
||||
if(couleurGenerale > 255){ |
||||
couleurGenerale = 255 |
||||
if(this.couleurGenerale > 255){ |
||||
this.couleurGenerale = 255; |
||||
} |
||||
switch(document.getElementById("selectRouge3D").value){ |
||||
case "plus": |
||||
rouge3D = 0 |
||||
rouge = 255 |
||||
sensRouge = -1 |
||||
break |
||||
this.rouge3D = 0; |
||||
rouge = 255; |
||||
sensRouge = -1; |
||||
break; |
||||
case "moins": |
||||
rouge3D = 1 |
||||
rouge = 0 |
||||
sensRouge = 1 |
||||
break |
||||
this.rouge3D = 1; |
||||
rouge = 0; |
||||
sensRouge = 1; |
||||
break; |
||||
case "tout": |
||||
rouge3D = 2 |
||||
rouge = couleurGenerale |
||||
sensRouge = 0 |
||||
break |
||||
this.rouge3D = 2; |
||||
rouge = this.couleurGenerale; |
||||
sensRouge = 0; |
||||
break; |
||||
} |
||||
switch(document.getElementById("selectVert3D").value){ |
||||
case "plus": |
||||
vert3D = 0 |
||||
vert = 255 |
||||
sensVert = -1 |
||||
break |
||||
this.vert3D = 0; |
||||
vert = 255; |
||||
sensVert = -1; |
||||
break; |
||||
case "moins": |
||||
vert3D = 1 |
||||
vert = 0 |
||||
sensVert = 1 |
||||
break |
||||
this.vert3D = 1; |
||||
vert = 0; |
||||
sensVert = 1; |
||||
break; |
||||
case "tout": |
||||
vert3D = 2 |
||||
vert = couleurGenerale |
||||
sensVert = 0 |
||||
break |
||||
this.vert3D = 2; |
||||
vert = this.couleurGenerale; |
||||
sensVert = 0; |
||||
break; |
||||
} |
||||
switch(document.getElementById("selectBleu3D").value){ |
||||
case "plus": |
||||
bleu3D = 0 |
||||
bleu = 255 |
||||
sensBleu = -1 |
||||
break |
||||
this.bleu3D = 0; |
||||
bleu = 255; |
||||
sensBleu = -1; |
||||
break; |
||||
case "moins": |
||||
bleu3D = 1 |
||||
bleu = 0 |
||||
sensBleu = 1 |
||||
break |
||||
this.bleu3D = 1; |
||||
bleu = 0; |
||||
sensBleu = 1; |
||||
break; |
||||
case "tout": |
||||
bleu3D = 2 |
||||
bleu = couleurGenerale |
||||
sensBleu = 0 |
||||
break |
||||
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>" |
||||
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>" |
||||
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(); |
||||
} |
||||
}; |
||||
|
||||
function zoom3D(valeur){ |
||||
valeurZoom3D *= valeur |
||||
gauche3D /= valeur |
||||
droite3D /= valeur |
||||
precisionFonction3D /= valeur |
||||
precisionDroite3D /= valeur |
||||
//alert(valeurZoom3D+" ; "+gauche3D+" ; "+droite3D+" ; "+precisionFonction3D+" ; "+precisionDroite3D)
|
||||
actualiserGraph() |
||||
} |
||||
|
After Width: | Height: | Size: 3.8 KiB |
@ -1,432 +0,0 @@ |
||||
// ------------------ 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() |
||||
} |
||||
} |
||||
@ -1,60 +1,299 @@ |
||||
// -------------------- sankore --------------------
|
||||
// Ces fonctions permettent de dessiner le graphique directement dans sankore.
|
||||
|
||||
// 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 |
||||
|
||||
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') |
||||
// -------------------- Uniboard --------------------
|
||||
// Ces fonctions permettent de dessiner le graphique directement dans Uniboard.
|
||||
|
||||
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(); |
||||
}
|
||||
|
||||
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);
|
||||
} |
||||
} |
||||
|
||||
@ -1,65 +0,0 @@ |
||||
// -------------------- 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 |
||||
} |
||||
@ -0,0 +1,337 @@ |
||||
|
||||
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; |
||||
} |
||||
}; |
||||
} |
||||
@ -1,108 +1,580 @@ |
||||
|
||||
// -------------------- 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 |
||||
|
||||
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 |
||||
} |
||||
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() |
||||
} |
||||
|
||||
function colorT(e){ |
||||
var element = document.getElementById('colorT') |
||||
var posDiv = 0 |
||||
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){ |
||||
posDiv = posDiv + element.offsetTop |
||||
element = element.offsetParent |
||||
posDivY = posDivY + element.offsetTop; |
||||
element = element.offsetParent; |
||||
} |
||||
T = (e.clientY - posDiv -0) / 256*360 |
||||
r,g,b = 0 |
||||
while (true){ |
||||
|
||||
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; |
||||
|
||||
if (T<60){ |
||||
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) |
||||
} |
||||
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(); |
||||
} |
||||
}; |
||||
|
||||
|
||||
|
||||
@ -0,0 +1,216 @@ |
||||
|
||||
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();
|
||||
} |
||||
}; |
||||
@ -1,356 +0,0 @@ |
||||
|
||||
// -------------------- 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; |
||||
} |
||||
@ -0,0 +1,520 @@ |
||||
|
||||
// -------------------- 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; |
||||
}, |
||||
|
||||
} |
||||
@ -0,0 +1,226 @@ |
||||
|
||||
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); |
||||
} |
||||
} |
||||
}; |
||||
@ -0,0 +1,79 @@ |
||||
|
||||
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();
|
||||
}; |
||||
} |
||||
@ -0,0 +1,508 @@ |
||||
|
||||
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..." |
||||
} |
||||
}; |
||||
|
||||
File diff suppressed because one or more lines are too long
@ -0,0 +1,116 @@ |
||||
|
||||
|
||||
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(); |
||||
} |
||||
}; |
||||
} |
||||
@ -0,0 +1,112 @@ |
||||
|
||||
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(); |
||||
} |
||||
}; |
||||
} |
||||
@ -0,0 +1,92 @@ |
||||
|
||||
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"; |
||||
} |
||||
} |
||||
|
||||
@ -0,0 +1,228 @@ |
||||
|
||||
// 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(); |
||||
} |
||||
@ -0,0 +1,186 @@ |
||||
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); |
||||
} |
||||
}; |
||||
File diff suppressed because one or more lines are too long
@ -1,62 +0,0 @@ |
||||
/** |
||||
* .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); |
||||
@ -0,0 +1,56 @@ |
||||
/* 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); |
||||
} |
||||
@ -0,0 +1,341 @@ |
||||
/* 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; |
||||
} |
||||
@ -0,0 +1,238 @@ |
||||
/* 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%; |
||||
} |
||||
@ -0,0 +1,659 @@ |
||||
body{ |
||||
background-color: transparent; |
||||
font-family: Sans-Serif; |
||||
} |
||||
table tr td{ |
||||
padding: 0px; |
||||
} |
||||
|
||||
/* Widget background */ |
||||
html, body{ |
||||
height: 100%; |
||||
margin: 0px; |
||||
} |
||||
|
||||
#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; |
||||
} |
||||
|
||||
/* Widget center */ |
||||
#widgetCenter{ |
||||
height: 100%; |
||||
position: relative; |
||||
} |
||||
|
||||
/* Zone d'affichage des fonctions */ |
||||
#eventAffichage{ |
||||
height: 100%; |
||||
position: relative; |
||||
} |
||||
#eventAffichage canvas{ |
||||
display: block; |
||||
} |
||||
#affichage{ |
||||
height: 100%; |
||||
box-sizing: border-box; |
||||
overflow: hidden; |
||||
border: 1px solid rgba(255,255,255,0.5); |
||||
border-radius: 5px; |
||||
-webkit-border-radius: 5px; |
||||
} |
||||
#affichageOutils{ |
||||
position: absolute; |
||||
top: 0px; |
||||
box-sizing: border-box; |
||||
height: 100%; |
||||
width: 100%; |
||||
} |
||||
|
||||
#divInputRapide{ |
||||
display: none; |
||||
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; |
||||
} |
||||
#inputRapide{ |
||||
width: 270px; |
||||
} |
||||
|
||||
#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; |
||||
} |
||||
#input3D{ |
||||
width: 265px; |
||||
} |
||||
|
||||
/* Messages */ |
||||
#divMessages div{ |
||||
position: absolute; |
||||
background-image: url('../Images/cursor.png'); |
||||
background-repeat: no-repeat; |
||||
z-index: 4; |
||||
pointer-events: none; |
||||
min-height: 24px; |
||||
} |
||||
#divMessages div span{ |
||||
position: relative; |
||||
left: 19px; |
||||
top: 20px; |
||||
padding: 2px; |
||||
color: white; |
||||
font-size: 11px; |
||||
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); |
||||
cursor: pointer; |
||||
} |
||||
#divMessages div span a:hover{ |
||||
color : rgb(110,200,255); |
||||
text-decoration: underline; |
||||
text-decoration-style: dotted; |
||||
} |
||||
|
||||
|
||||
/* Taille standard des boutons*/ |
||||
.bouton{ |
||||
/*width: 100px;*/ |
||||
height: 25px; |
||||
font-size: 12px; |
||||
} |
||||
|
||||
/* Boutons qui sont dans la partie gauche et qui ouvrent les différents menus */ |
||||
.boutonGauche{ |
||||
width: 100%; |
||||
height: 32px; |
||||
text-align: center; |
||||
} |
||||
|
||||
/* Aperçu couleur 3D*/ |
||||
#apercuCouleur3D{ |
||||
border: 1px solid rgba(0, 0, 0, 0.7); |
||||
border-radius: 4px; |
||||
-webkit-border-radius: 4px; |
||||
} |
||||
|
||||
/* Taille des champs contenant seulement 2 ou 3 caractères */ |
||||
.smallInput{ |
||||
width: 35px; |
||||
} |
||||
.mediumInput{ |
||||
width: 45px; |
||||
} |
||||
|
||||
|
||||
/* Boutons qui ouvrent le ColorPicker */ |
||||
.boutonCouleur{ |
||||
position: relative; |
||||
left: 2px; |
||||
top: 4px; |
||||
width: 15px; |
||||
height: 15px; |
||||
border: 1px solid rgba(0,0,0,0.5); |
||||
border-radius: 5px; |
||||
-webkit-border-radius: 5px; |
||||
background-color: rgba(0,128,255,0.8); |
||||
display: inline-block; |
||||
cursor:pointer; |
||||
opacity: 0.7; |
||||
} |
||||
.boutonCouleur:hover{ |
||||
box-shadow: 0px 0px 2px rgba(0,128,255,1); |
||||
opacity: 1; |
||||
} |
||||
|
||||
/* Texte d'information (plus petit) */ |
||||
.texteSecondaire{ |
||||
font-size: 11px; |
||||
color: rgba(0,0,0,0.5); |
||||
margin-left: 10px; |
||||
} |
||||
|
||||
/* 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; */ |
||||
} |
||||
|
||||
/* Texte en gras */ |
||||
.gras{ |
||||
font-weight: bold; |
||||
} |
||||
|
||||
/* 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; |
||||
} |
||||
.flecheDeplacement:hover{ |
||||
opacity: 0.4; |
||||
} |
||||
.flecheDeplacement:active{ |
||||
opacity: 0.3; |
||||
} |
||||
#flecheHaut{ |
||||
position: absolute; |
||||
top: 15px; |
||||
left: 50%; |
||||
margin-left: -35px; |
||||
width: 70px; |
||||
height: 55px; |
||||
} |
||||
#flecheBas{ |
||||
position: absolute; |
||||
bottom: 20px; |
||||
left: 50%; |
||||
margin-left: -35px; |
||||
width: 70px; |
||||
height: 55px; |
||||
} |
||||
#flecheGauche{ |
||||
position: absolute; |
||||
top: 50%; |
||||
margin-top: -36px; |
||||
left: 15px; |
||||
width: 55px; |
||||
height: 70px; |
||||
} |
||||
#flecheDroite{ |
||||
position: absolute; |
||||
top: 50%; |
||||
margin-top: -36px; |
||||
right: 15px; |
||||
width: 55px; |
||||
height: 70px; |
||||
} |
||||
|
||||
|
||||
/* Boutons permettant de choisir l'action de la souris dans le menu des outils */ |
||||
.choixOutil{ |
||||
width: 125px; |
||||
height: 40px; |
||||
font-size: 14px; |
||||
cursor: pointer; |
||||
} |
||||
|
||||
|
||||
/* Petits boutons plus et moins dans les options */ |
||||
.boutonPlus{ |
||||
position: relative; |
||||
top: -7px; |
||||
left: -5px; |
||||
width: 10px; |
||||
height: 10px; |
||||
font-size: 9px; |
||||
text-align: center; |
||||
background-color: rgba(0, 140, 255, 0.2); |
||||
border: 1px rgba(0,0,0,0.5) solid; |
||||
border-radius: 3px; |
||||
-webkit-border-radius: 3px; |
||||
cursor: pointer; |
||||
display: inline-block; |
||||
} |
||||
.boutonMoins{ |
||||
position: relative; |
||||
top: 6px; |
||||
left: -17px; |
||||
width: 10px; |
||||
height: 10px; |
||||
font-size: 9px; |
||||
text-align: center; |
||||
background-color: rgba(0, 140, 255, 0.2); |
||||
border: 1px rgba(0,0,0,0.5) solid; |
||||
border-radius: 3px; |
||||
-webkit-border-radius: 3px; |
||||
cursor: pointer; |
||||
display: inline-block; |
||||
} |
||||
.boutonPlus:hover{ |
||||
border: 1px rgba(0,0,0,0.7) solid; |
||||
background-color: rgba(0, 140, 255, 0.5); |
||||
} |
||||
.boutonMoins:hover{ |
||||
border: 1px rgba(0,0,0,0.7) solid; |
||||
background-color: rgba(0, 140, 255, 0.5); |
||||
} |
||||
|
||||
|
||||
|
||||
/* Menu etudes fonctions*/ |
||||
#menuEtude p{ |
||||
margin-top: 7px; |
||||
margin-bottom: 0px; |
||||
/* font-weight: bold; */ |
||||
} |
||||
#menuEtude span{ |
||||
/* font-weight : normal; */ |
||||
} |
||||
/* 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{ |
||||
border: 1px solid black; |
||||
border-radius: 3px; |
||||
-webkit-border-radius: 3px; |
||||
} |
||||
#etudeSigne td.fondNoir{ |
||||
background-color: rgba(0,0,0,0.5); |
||||
} |
||||
|
||||
/* Titres des menus */ |
||||
h1{ |
||||
font-size: 16px; |
||||
font-weight: 600; |
||||
text-align: center; |
||||
/*font-style: italic;*/ |
||||
margin-top: 15px; |
||||
margin-bottom: 25px; |
||||
} |
||||
h2{ |
||||
font-size: 14px; |
||||
font-weight: normal; |
||||
font-style: italic; |
||||
margin-top: 30px; |
||||
} |
||||
h3{ |
||||
font-size: 16px; |
||||
font-weight: 600; |
||||
text-align: left; |
||||
/*font-style: italic;*/ |
||||
margin-top: 7px; |
||||
margin-bottom: 20px; |
||||
} |
||||
h4{ |
||||
font-size: 16px; |
||||
font-weight: 600; |
||||
text-align: center; |
||||
/*font-style: italic;*/ |
||||
margin-top: 15px; |
||||
margin-bottom: 10px; |
||||
} |
||||
|
||||
|
||||
/* Menu Mise à Jour */ |
||||
#mAj{ |
||||
text-align: center; |
||||
font-size: 14px; |
||||
} |
||||
#mAj h1{ |
||||
font-size: 22px; |
||||
margin-top: 5px; |
||||
margin-bottom: 15px; |
||||
} |
||||
#mAj span object{ |
||||
position: relative; |
||||
bottom: 4px; |
||||
width: 150px; |
||||
height: 27px; |
||||
overflow: hidden; |
||||
} |
||||
#mAj input{ |
||||
min-height: 27px; |
||||
} |
||||
|
||||
.boutonSauvegarde{ |
||||
width: 100px; |
||||
height: 32px; |
||||
} |
||||
#cacheCookies{ |
||||
position: absolute; |
||||
top: 150px; |
||||
left: 10px; |
||||
width: 93%; |
||||
height: 150px; |
||||
background-color: rgba(255,255,255,0.7); |
||||
border: 1px rgba(255,255,255,0.8) solid; |
||||
border-radius: 3px; |
||||
-webkit-border-radius: 3px; |
||||
text-align: center; |
||||
display: none; |
||||
} |
||||
#cacheMaJ{ |
||||
position: absolute; |
||||
padding-top: 20px; |
||||
padding-bottom: 10px; |
||||
top: 250px; |
||||
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; |
||||
-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); |
||||
} |
||||
@ -1,659 +0,0 @@ |
||||
/* ----------------- */ |
||||
/* CSS */ |
||||
/* ----------------- */ |
||||
|
||||
|
||||
/* Arrière plan du widget */ |
||||
body{ |
||||
background-image: url('../Images/fond2.png'); |
||||
background-repeat: no-repeat; |
||||
background-position: 0px 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; |
||||
} |
||||
|
||||
/* Texte et boutons qui sont en haut du widget */ |
||||
#haut{ |
||||
position: relative; |
||||
top: 13px; |
||||
left: 20px; |
||||
width: 500px; |
||||
z-index: 2; |
||||
} |
||||
|
||||
/* Champ permettant d'entrer la fonction à dessiner */ |
||||
#inputEq{ |
||||
width: 200px; |
||||
} |
||||
|
||||
/* Texte à côté du champ de la fonction à dessiner */ |
||||
#texteFonction{ |
||||
color: white; |
||||
font-weight: bold; |
||||
} |
||||
|
||||
/* 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; |
||||
} |
||||
|
||||
/* Boutons qui sont dans la partie gauche et qui ouvrent les différents menus */ |
||||
.boutonGauche{ |
||||
width: 100%; |
||||
height: 32px; |
||||
text-align: center; |
||||
} |
||||
|
||||
/* Partie gauche du widget lorsque l'affichage 3D est activé */ |
||||
#gauche3D{ |
||||
position: absolute; |
||||
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; |
||||
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; |
||||
} |
||||
#gauche3D input.boutonGauche3D{ |
||||
width: 90px; |
||||
height: 30px; |
||||
} |
||||
|
||||
/* 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; |
||||
} |
||||
.contenuMenu{ |
||||
font-size: 14px; |
||||
padding: 10px; |
||||
overflow: auto; |
||||
max-height: 315px; |
||||
} |
||||
.avecBordures{ |
||||
border-top: 1px solid rgba(255, 255, 255, 0.4); |
||||
height: 80% |
||||
} |
||||
.ongletMenu{ |
||||
position: relative; |
||||
top: 3px; |
||||
width: 100%; |
||||
} |
||||
.ongletMenu tr td{ |
||||
width: 30%; |
||||
height: 30px; |
||||
text-align: center; |
||||
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; |
||||
} |
||||
.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; |
||||
} |
||||
.alertMenu input{ |
||||
width: 45%; |
||||
height: 32px; |
||||
} |
||||
|
||||
/* 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; |
||||
} |
||||
|
||||
/* Taille des champs contenant seulement 2 ou 3 caractères */ |
||||
.smallInput{ |
||||
width: 35px; |
||||
} |
||||
|
||||
/* 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: 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: rgb(0,171,255); |
||||
cursor:pointer; |
||||
} |
||||
.boutonCouleur:hover{ |
||||
border-width: 2px; |
||||
left: 1px; |
||||
top: 0px; |
||||
} |
||||
|
||||
/* Texte d'information (plus petit) */ |
||||
.texteSecondaire{ |
||||
font-size: 11px; |
||||
color: rgba(0,0,0,0.5); |
||||
margin-left: 10px; |
||||
} |
||||
|
||||
/* Style pour le texte où on peut cliquer dessus */ |
||||
.survol{ |
||||
cursor: pointer; |
||||
} |
||||
.survol:hover{ |
||||
color: rgba(0,0,0,0.5); |
||||
} |
||||
|
||||
/* Texte en gras */ |
||||
.gras{ |
||||
font-weight: bold; |
||||
} |
||||
|
||||
/* Flèches permettant de deplacer l'affichage */ |
||||
.flecheDeplacement{ |
||||
color: black; |
||||
opacity: 0; |
||||
font-size: 56px; |
||||
text-align: center; |
||||
cursor: pointer; |
||||
z-index: 1; |
||||
} |
||||
.flecheDeplacement:hover{ |
||||
opacity: 0.4; |
||||
} |
||||
#flecheHaut{ |
||||
position: absolute; |
||||
top: 46px; |
||||
left: 345px; |
||||
width: 70px; |
||||
height: 55px; |
||||
} |
||||
#flecheBas{ |
||||
position: absolute; |
||||
top: 381px; |
||||
left: 345px; |
||||
width: 70px; |
||||
height: 55px; |
||||
} |
||||
#flecheGauche{ |
||||
position: absolute; |
||||
top: 216px; |
||||
left: 137px; |
||||
width: 55px; |
||||
height: 70px; |
||||
} |
||||
#flecheDroite{ |
||||
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{ |
||||
width: 125px; |
||||
height: 40px; |
||||
font-size: 14px; |
||||
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{ |
||||
position: relative; |
||||
top: -7px; |
||||
left: -5px; |
||||
width: 10px; |
||||
height: 10px; |
||||
font-size: 9px; |
||||
text-align: center; |
||||
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; |
||||
} |
||||
.boutonMoins{ |
||||
position: relative; |
||||
top: 6px; |
||||
left: -17px; |
||||
width: 10px; |
||||
height: 10px; |
||||
font-size: 9px; |
||||
text-align: center; |
||||
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; |
||||
} |
||||
.boutonPlus:hover{ |
||||
border: 1px rgba(0,0,0,0.7) solid; |
||||
background-color: rgba(0, 140, 255, 0.5); |
||||
} |
||||
.boutonMoins:hover{ |
||||
border: 1px rgba(0,0,0,0.7) solid; |
||||
background-color: rgba(0, 140, 255, 0.5); |
||||
} |
||||
|
||||
/* 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; |
||||
} |
||||
#onglet3D:hover{ |
||||
opacity: 0.9; |
||||
} |
||||
|
||||
/* Tableau du signe dans le menu d'étude de la fonction*/ |
||||
#etudeSigne td{ |
||||
min-width: 25px; |
||||
text-align: center; |
||||
} |
||||
#etudeSigne td.border{ |
||||
border: 1px solid black; |
||||
border-radius: 3px; |
||||
-moz-border-radius: 3px; |
||||
-webkit-border-radius: 3px; |
||||
} |
||||
#etudeSigne td.infini{ |
||||
background-color: rgba(0,0,0,0.5); |
||||
} |
||||
|
||||
/* Titres des menus */ |
||||
h1{ |
||||
font-size: 16px; |
||||
font-weight: 600; |
||||
text-align: center; |
||||
/*font-style: italic;*/ |
||||
margin-top: 15px; |
||||
margin-bottom: 25px; |
||||
} |
||||
h2{ |
||||
font-size: 14px; |
||||
font-weight: normal; |
||||
font-style: italic; |
||||
margin-top: 30px; |
||||
} |
||||
h3{ |
||||
font-size: 16px; |
||||
font-weight: 600; |
||||
text-align: left; |
||||
/*font-style: italic;*/ |
||||
margin-top: 10px; |
||||
margin-bottom: 20px; |
||||
} |
||||
h4{ |
||||
font-size: 16px; |
||||
font-weight: 600; |
||||
text-align: center; |
||||
/*font-style: italic;*/ |
||||
margin-top: 15px; |
||||
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{ |
||||
text-align: center; |
||||
font-size: 14px; |
||||
} |
||||
#mAj h1{ |
||||
font-size: 22px; |
||||
margin-top: 5px; |
||||
margin-bottom: 15px; |
||||
} |
||||
#mAj span object{ |
||||
position: relative; |
||||
bottom: 4px; |
||||
width: 150px; |
||||
height: 27px; |
||||
overflow: hidden; |
||||
} |
||||
#mAj input{ |
||||
height: 32px; |
||||
} |
||||
|
||||
.boutonSauvegarde{ |
||||
width: 100px; |
||||
height: 32px; |
||||
} |
||||
#cacheCookies{ |
||||
position: absolute; |
||||
top: 170px; |
||||
left: 14px; |
||||
width: 93%; |
||||
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: 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; |
||||
} |
||||
@ -1,10 +1,10 @@ |
||||
<?xml version="1.0" encoding="UTF-8"?> |
||||
<widget xmlns="http://www.w3.org/ns/widgets" |
||||
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"/> |
||||
version="1.6.0" |
||||
width="800" |
||||
height="600" |
||||
ub:resizable="true"> |
||||
<name>Mathematical function plotter</name> |
||||
<content src="Grapheur.html"/> |
||||
</widget> |
||||
|
||||
@ -1,10 +1,11 @@ |
||||
<!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;">1.3.1 (2010/09/25)</span> |
||||
<span style="font-size:12px; text-align:center;">2.1.0 (2018-06-04)</span> |
||||
</body> |
||||
</html> |
||||
@ -0,0 +1,294 @@ |
||||
|
||||
██████ ███ ███ |
||||
██ ██████ █████ ██████ ██ ██ ████ ████ ███████ |
||||
██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ████ ██ ██ |
||||
██ ███ ███████ ███████ ██████ ███████ ██ ██ ██ █████ |
||||
██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ |
||||
██████ ██ ██ ██ ██ ██ ██ ██ ██ ██ ███████ |
||||
|
||||
|
||||
---- 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 |
||||
|
||||
Loading…
Reference in new issue