<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
< html xmlns = "http://www.w3.org/1999/xhtml" xmlns:svg = "http://www.w3.org/2000/svg" xmlns:xlink = "http://www.w3.org/1999/xlink" >
< head >
< meta http-equiv = "Content-Type" content = "text/html; charset=utf-8" / >
< meta name = "description" content = "Traceur de fonctions mathématiques en JavaScript" / >
< meta name = "author" content = "Yannick Vessaz" / >
< meta name = "revised" content = "2010/09/25" / >
< title > Graphics< / title >
< link rel = "stylesheet" type = "text/css" href = "Style/default.css" / >
< script type = "text/javascript" src = "JavaScript/ColorPicker.js" > < / script >
< script type = "text/javascript" src = "JavaScript/Interface.js" > < / script >
< script type = "text/javascript" src = "JavaScript/Outils.js" > < / script >
< script type = "text/javascript" src = "JavaScript/AffichageStandard.js" > < / script >
< script type = "text/javascript" src = "JavaScript/Affichage3D.js" > < / script >
< script type = "text/javascript" src = "JavaScript/AffichageUniboard.js" > < / script >
< script type = "text/javascript" src = "JavaScript/AffichageXPM.js" > < / script >
< script type = "text/javascript" src = "JavaScript/languages.js" > < / script >
< script type = "text/javascript" src = "JavaScript/Etude.js" > < / script >
< script type = "text/javascript" src = "JavaScript/Sauvegardes.js" > < / script >
< script src = "JavaScript/jquery-1.3.2.min.js" type = "text/javascript" > < / script >
< script src = "JavaScript/jquery.disable.text.select.js" type = "text/javascript" > < / script >
< script type = "text/javascript" >
// < ![CDATA[
// --- Variables nécessaires au fonctionnement du widget ---
var lang = ""; //locale language
var loadingFlag = false
var largeur = 500
var hauteur = 400
var graphique = ""
var image = ""
var tableau = new Array()
var ligne = new Array()
var j = 0
var interdit = new Array(";", "interdit", "'", '"', "eval", "new", "sankore", "=", "document", "window", "alert")
var menuActuel = ""
var mouseDown = false
var outil = "point"
var pointX = new Array()
var pointY = new Array()
var pente = new Array()
var pente2 = new Array()
var precision = 0.02
var couleurFonction = "rgb(193,255,0)"
var r = 255
var g = 0
var b = 0
var couleurEchelle = "rgba(255,255,255,0.8)"
var couleurGrille = "rgba(255,255,255,0.1)"
var couleurAxes = "rgba(0,0,0,0.5)"
var decalageX = 0
var decalageY = 0
var lineWidth = 3
if(window.sankore){
try{
lang = sankore.locale().substr(0,2);
sankoreLang[lang].display;
} catch(e){
lang = "en";
}
} else
lang = "en";
$(document).ready(function(){
if(window.sankore){
$("#inputEq").val(sankore.preference("functionData", ""));
$("#inputTeinte").val(sankore.preference("functionColor",""));
$("#inputValeur").val(sankore.preference("functionValue","0"));
$("#inputSaturation").val(sankore.preference("functionSaturation","0"));
$("#inputRouge").val(sankore.preference("functionRed","255"));
$("#inputVert").val(sankore.preference("functionGreen","0"));
$("#inputBleu").val(sankore.preference("functionBlue","0"));
$("#inputOpacity").val(sankore.preference("functionOpacity","1"));
idColor = sankore.preference("functionColorId","");
actualiserGraph();
if(sankore.preference("simplefx","0") == 1)
$("#checkDerivee").attr("checked", "checked");
else
$("#checkDerivee").removeAttr('checked');
if(sankore.preference("hardfx","0") == 1)
$("#checkDerivee2").attr("checked", "checked");
else
$("#checkDerivee2").removeAttr('checked');
actualiserGraph();
$("#aireG").val(sankore.preference("squareUnderFrom","-5"));
$("#aireD").val(sankore.preference("squareUnderTo","5"));
calculerAire();
$("#inputX").val(sankore.preference("calculateThePoint","0"));
execute($("#inputEq").val());
if(sankore.preference("checkboxDraw","0") == 1)
$("#checkAire").attr("checked", "checked");
else
$("#checkAire").removeAttr('checked');
actualiserGraph();
$("#selectTheme").val(sankore.preference("selectedTheme","noir"));
changerTheme($("#selectTheme").val());
$("#selectMethodeAffichage").val(sankore.preference("graphicalMethodDisplaying", "canvas"));
$("#zoomDefaut").val(sankore.preference("defaultZoom", "4"));
reinitialiserZoom($("#zoomDefaut").val());
if(sankore.preference("showGrid","1") == 1)
$("#checkGrille").attr("checked", "checked");
else
$("#checkGrille").removeAttr('checked');
if(sankore.preference("showAxis","1") == 1)
$("#checkAxes").attr("checked", "checked");
else
$("#checkAxes").removeAttr('checked');
if(sankore.preference("showScale","1") == 1)
$("#checkEchelle").attr("checked", "checked");
else
$("#checkEchelle").removeAttr('checked');
actualiserGraph();
$("#inputTaille").val(sankore.preference("thickness", "3"));
actualiserGraph();
$("#inputDecalageX").val(sankore.preference("offsetDiagrammX", "0"));
decalageX = parseFloat($("#inputDecalageX").val())
$("#inputDecalageY").val(sankore.preference("offsetDiagrammY", "0"));
decalageY = parseFloat($("#inputDecalageY").val())
$("#inputPrecision").val(sankore.preference("accuracyGraph", "0.02"));
precision = parseFloat($("#inputPrecision").val());
$("#selectAffichage3D").val(sankore.preference("styleOf3DShow", "surfaces"));
reinitialiserZoom(5);
$("#inputPrecision3D").val(sankore.preference("accuracyFunction", "0.2"));
precisionFonction3D = parseFloat($("#inputPrecision3D").val());
$("#selectRouge3D").val(sankore.preference("redColor", "plus"));
$("#selectVert3D").val(sankore.preference("greenColor", "moins"));
$("#selectBleu3D").val(sankore.preference("blueColor", "tout"));
checkCouleurs3D();
$("#couleur3Dgenerale").val(sankore.preference("3DGeneralColor", "0"));
checkCouleurs3D();
actualiserGraph();
$("#borneXGauche").val(sankore.preference("xAxisFrom", "-5"));
$("#borneXDroite").val(sankore.preference("xAxisTo", "5"));
$("#borneYGauche").val(sankore.preference("yAxisFrom", "-5"));
$("#borneYDroite").val(sankore.preference("yAxisTo", "5"));
var tempArray;
if(sankore.preference("graphmeHistory",""))
tempArray = sankore.preference("graphmeHistory","").split(",");
if(sankore.preference("graphmeHistory","")){
for(i in tempArray)
evaluer(tempArray[i]);
}
actualiserGraph();
loadingFlag = true;
////////////////////////////////////// languages suppot
document.getElementById("texteFonction").innerHTML = sankoreLang[lang].fnc;
$("#xAxis").html(sankoreLang[lang].x_axis);
$("#yAxis").html(sankoreLang[lang].y_axis);
$("#scaleZoom").html(sankoreLang[lang].zoom);
$("#graphColor").html(sankoreLang[lang].color);
$("#menuCouleur .contenuMenu em").text(sankoreLang[lang].choosing_color);
$("#colorValues tr").eq(0).find("td").eq(0).html(sankoreLang[lang].color + ":");
$("#colorValues tr").eq(1).find("td").eq(0).html(sankoreLang[lang].value);
$("#colorValues tr").eq(2).find("td").eq(0).html(sankoreLang[lang].saturation);
$("#colorValues tr").eq(3).find("td").eq(0).html(sankoreLang[lang].red);
$("#colorValues tr").eq(4).find("td").eq(0).html(sankoreLang[lang].green);
$("#colorValues tr").eq(5).find("td").eq(0).html(sankoreLang[lang].blue);
$("#colorValues tr").eq(6).find("td").eq(0).html(sankoreLang[lang].opacity);
$("#menuOutils .contenuMenu h3").eq(0).text(sankoreLang[lang].tools);
$("#menuOutils .contenuMenu span").each(function(){
switch($(this).html()){
case "Mouse events:":
$(this).html(sankoreLang[lang].mouse_events);
break;
case "Derivative:":
$(this).html(sankoreLang[lang].derivative);
break;
case "Square under function:":
$(this).html(sankoreLang[lang].square_under_func);
break;
case "Calculate the point on the function:":
$(this).html(sankoreLang[lang].point_calculate);
break;
case "Analysis of function:":
$(this).html(sankoreLang[lang].analysis_of_func);
break;
case "Display test:":
$(this).html(sankoreLang[lang].display_test);
break;
case "From":
$(this).html(sankoreLang[lang].from);
break;
case "to":
$(this).html(sankoreLang[lang].to);
break;
default:
break;
}
return true;
});
$("label[for*='checkAire']").text(sankoreLang[lang].draw);
$("label[for*='checkMaJ']").text(sankoreLang[lang].auto_update);
$("#menuOptions td").eq(0).html(sankoreLang[lang].widget);
$("#menuOptions h3").eq(0).text(sankoreLang[lang].widget_options);
$("#menuOptions2D h3").eq(0).text(sankoreLang[lang].options + " 2D");
$("#menuOptions2D span").each(function(){
switch($(this).html()){
case "The graphical method displaying:":
$(this).html(sankoreLang[lang].the_graphical);
break;
case "Zoom default:":
$(this).html(sankoreLang[lang].zoom_def);
break;
case "Thickness:":
$(this).html(sankoreLang[lang].thickness);
break;
case "Offset diagram:":
$(this).html(sankoreLang[lang].offset_diagram);
break;
case "Accuracy graph:":
$(this).html(sankoreLang[lang].accuracy_graph);
break;
}
return true;
});
$("#selectMethodeAffichage option").eq(0).text("canvas (" + sankoreLang[lang].lines + ")")
.next().text("canvas (" + sankoreLang[lang].points + ")")
.next().next().text("svg (1 " + sankoreLang[lang].image + ")");
$("label[for*='checkGrille']").text(sankoreLang[lang].show_grid);
$("label[for*='checkAxes']").text(sankoreLang[lang].show_axis);
$("label[for*='checkEchelle']").text(sankoreLang[lang].scale);
$("#menuOptions3D h3").eq(0).text(sankoreLang[lang].options + " 3D");
$("#menuOptions3D span").each(function(){
switch($(this).html()){
case "Show the style:":
$(this).html(sankoreLang[lang].show_the_style);
break;
case "Accuracy function:":
$(this).html(sankoreLang[lang].accuracy_func);
break;
case "Use the color":
$(this).html(sankoreLang[lang].use_the_color);
break;
case "red:":
$(this).html(sankoreLang[lang].red);
break;
case "green:":
$(this).html(sankoreLang[lang].green);
break;
case "blue:":
$(this).html(sankoreLang[lang].blue);
break;
case "General value:":
$(this).html(sankoreLang[lang].general_value);
break;
case "from":
$(this).html(sankoreLang[lang].from);
break;
case "to":
$(this).html(sankoreLang[lang].to);
break;
}
return true;
});
$("#selectAffichage3D option").eq(0).text(sankoreLang[lang].surfaces)
.next().text(sankoreLang[lang].points);
$("#selectRouge3D option").eq(0).text(sankoreLang[lang].positive_value)
.next().text(sankoreLang[lang].negative_value)
.next().text(sankoreLang[lang].general_value);
$("#selectVert3D option").eq(0).text(sankoreLang[lang].negative_value)
.next().text(sankoreLang[lang].positive_value)
.next().text(sankoreLang[lang].general_value);
$("#selectBleu3D option").eq(0).text(sankoreLang[lang].general_value)
.next().text(sankoreLang[lang].positive_value)
.next().text(sankoreLang[lang].negative_value);
$("#menuAide .ongletMenu td, #menuAideExemples .ongletMenu td, #menuAideAutres .ongletMenu td").each(function(){
switch($(this).html()){
case "Using":
$(this).html(sankoreLang[lang].using);
break;
case "Examples":
$(this).html(sankoreLang[lang].examples);
break;
case "Other":
$(this).html(sankoreLang[lang].other);
break;
}
});
$("#menuAide h1").each(function(){
switch($(this).html()){
case "How it work.":
$(this).html(sankoreLang[lang].how_it_work);
break;
case "Constants":
$(this).html(sankoreLang[lang].consts);
break;
case "Keyboard keys":
$(this).html(sankoreLang[lang].keys);
break;
}
return true;
});
$("#menuAide h2").each(function(){
switch($(this).html()){
case "Basic operations":
$(this).html(sankoreLang[lang].basic_operations);
break;
case "Trigonometric functions":
$(this).html(sankoreLang[lang].trigonometric);
break;
case "Hyperbolic functions":
$(this).html(sankoreLang[lang].hyperbolic_func);
break;
case "Square roots and degrees":
$(this).html(sankoreLang[lang].square_roots_and_degrees);
break;
case "Exponential and logarithm":
$(this).html(sankoreLang[lang].exponential);
break;
case "Absolute number value":
$(this).html(sankoreLang[lang].abs);
break;
case "Rounding":
$(this).html(sankoreLang[lang].rounding);
break;
}
return true;
});
$("#menuAide span").each(function(){
switch($(this).html()){
case "This widget allow to draw mathematical function. Enter function in the field in the top part of widget and press \"Show\".":
$(this).html(sankoreLang[lang].this_widget_allow);
break;
case "You can enter following mathematical function:":
$(this).html(sankoreLang[lang].you_can_enter);
break;
case "Plus":
$(this).html(sankoreLang[lang].plus);
break;
case "Minus":
$(this).html(sankoreLang[lang].minus);
break;
case "Multiplication":
$(this).html(sankoreLang[lang].multi);
break;
case "Division":
$(this).html(sankoreLang[lang].division);
break;
case "Mod":
$(this).html(sankoreLang[lang].mod);
break;
case "Sine":
$(this).html(sankoreLang[lang].sine);
break;
case "Cosine":
$(this).html(sankoreLang[lang].cosine);
break;
case "Tangent":
$(this).html(sankoreLang[lang].tangent);
break;
case "Cotangent":
$(this).html(sankoreLang[lang].cotangent);
break;
case "Secant":
$(this).html(sankoreLang[lang].secant);
break;
case "Cosecant":
$(this).html(sankoreLang[lang].cosecant);
break;
case "Arc sine":
$(this).html(sankoreLang[lang].arc_sine);
break;
case "Arc cosine":
$(this).html(sankoreLang[lang].arc_cosine);
break;
case "Arc tangent":
$(this).html(sankoreLang[lang].arc_tangent);
break;
case "Arc cotangent":
$(this).html(sankoreLang[lang].arc_cotangent);
break;
case "Hyperbolic sine":
$(this).html(sankoreLang[lang].hyp_sine);
break;
case "Hyperbolic cosine":
$(this).html(sankoreLang[lang].hyp_cosine);
break;
case "Hyperbolic tangent":
$(this).html(sankoreLang[lang].hyp_tangent);
break;
case "Hyperbolic cotangent":
$(this).html(sankoreLang[lang].hyp_cotangent);
break;
case "Hyperbolic secant":
$(this).html(sankoreLang[lang].hyp_secant);
break;
case "Hyperbolic cosecant":
$(this).html(sankoreLang[lang].hyp_cosecant);
break;
case "Hyperbolic arc sine":
$(this).html(sankoreLang[lang].hyp_arc_sine);
break;
case "Hyperbolic arc cosine":
$(this).html(sankoreLang[lang].hyp_arc_cosine);
break;
case "Hyperbolic arc tangent":
$(this).html(sankoreLang[lang].hyp_arc_tangent);
break;
case "Hyperbolic arc cotangent":
$(this).html(sankoreLang[lang].hyp_arc_cotangent);
break;
case "Square root":
$(this).html(sankoreLang[lang].square_root);
break;
case "Degree":
$(this).html(sankoreLang[lang].degree);
break;
case "Root":
$(this).html(sankoreLang[lang].root);
break;
case "Variable x to the power y":
$(this).html(sankoreLang[lang].variable_x);
break;
case "Root y of x":
$(this).html(sankoreLang[lang].root_y);
break;
case "Natural logarithm":
$(this).html(sankoreLang[lang].natural_log);
break;
case "Decimal logarithm":
$(this).html(sankoreLang[lang].decimal_log);
break;
case "rounding to the nearest whole number":
$(this).html(sankoreLang[lang].round_nearest);
break;
case "rounding to the nearest whole number in a big way":
$(this).html(sankoreLang[lang].round_nearest_big);
break;
case "rounding to the nearest whole number the smaller side":
$(this).html(sankoreLang[lang].round_nearest_small);
break;
case "Also are available some constants:":
$(this).html(sankoreLang[lang].available_const);
break;
case "reset widget":
$(this).html(sankoreLang[lang].reload_widget);
break;
case "left arrow":
$(this).html(sankoreLang[lang].left_arrow);
break;
case "top arrow":
$(this).html(sankoreLang[lang].top_arrow);
break;
case "right arrow":
$(this).html(sankoreLang[lang].right_arrow);
break;
case "bottom arrow":
$(this).html(sankoreLang[lang].bottom_arrow);
break;
case "graph will be moved left":
$(this).html(sankoreLang[lang].moved_left);
break;
case "graph will be moved top":
$(this).html(sankoreLang[lang].moved_top);
break;
case "graph will be moved right":
$(this).html(sankoreLang[lang].moved_right);
break;
case "graph will be moved bottom":
$(this).html(sankoreLang[lang].moved_bottom);
break;
case "or":
$(this).html(sankoreLang[lang].or);
break;
}
return true;
});
$("#menuAideExemples h1").each(function(){
if($(this).text() == "Functions 2D")
$(this).text(sankoreLang[lang].funcs + " 2D");
else
$(this).text(sankoreLang[lang].funcs + " 3D");
});
$("#menuAideExemples span").eq(0).html("(" + sankoreLang[lang].you_can_view + ")");
$("#menuAideAutres h4").eq(0).text(sankoreLang[lang].save_graph);
$("#menuAideAutres h4").eq(1).text(sankoreLang[lang].offset);
$("#menuAideAutres span").eq(0).text(sankoreLang[lang].in_some_browsers);
$("#menuAideAutres span").eq(1).text(sankoreLang[lang].if_graph_isnt);
$("#credits h3").eq(0).text(sankoreLang[lang].widget_is_developed);
$("#menuCredits .texteSecondaire span").eq(0).html(sankoreLang[lang].if_you_want_to);
$("#menuCredits .texteSecondaire span").eq(1).html(sankoreLang[lang].if_you_want_to_change);
$("#menuFonctions td").eq(0).text(sankoreLang[lang].funcs);
$("#menuFonctions td").eq(1).text(sankoreLang[lang].history);
$("#menuFonctions em").eq(0).text(sankoreLang[lang].current);
$("#menuFonctions em").eq(1).text(sankoreLang[lang].additional);
$("#menuHistorique td").eq(0).text(sankoreLang[lang].funcs);
$("#menuHistorique td").eq(1).text(sankoreLang[lang].history);
$("#menuEtude h3").text(sankoreLang[lang].analysis_of_func);
$("#menuEtude span").each(function(){
switch($(this).html()){
case "Set of definitions:":
$(this).html(sankoreLang[lang].set_of_def);
break;
case "Parity:":
$(this).html(sankoreLang[lang].parity);
break;
case "Zeros of functions:":
$(this).html(sankoreLang[lang].zeros);
break;
case "Signe:":
$(this).html(sankoreLang[lang].signe);
break;
case "Asymptotes":
$(this).html(sankoreLang[lang].asympt);
break;
case "AH left:":
$(this).html(sankoreLang[lang].ah_left);
break;
case "AH right:":
$(this).html(sankoreLang[lang].ah_right);
break;
case "AV:":
$(this).html(sankoreLang[lang].av);
break;
case "Tool for analysis of function is not reliable on 100%. Don't forget check results of analysis before use it.":
$(this).html(sankoreLang[lang].tool_for);
break;
}
return true;
});
$("#infoSauvegarde h1").text(sankoreLang[lang].options_saved);
$("#mAj h1").text(sankoreLang[lang].update);
$("#mAj span").each(function(){
switch($(this).html()){
case "Current version:":
$(this).html(sankoreLang[lang].cur_version);
break;
case "The last on-line version:":
$(this).html(sankoreLang[lang].last_version);
break;
case "This widget is available to using on web-site:":
$(this).html(sankoreLang[lang].using_web);
break;
}
});
$("#menuOptions span").each(function(){
switch($(this).html()){
case "Themes of widget:":
$(this).html(sankoreLang[lang].themes_of_widget);
break;
case "Control options:":
$(this).html(sankoreLang[lang].control_options);
break;
case "Save a widget options in cookies or load an options from cookies or delete a registered options.":
$(this).html(sankoreLang[lang].save_a_widget_options);
break;
}
return true;
});
$("#selectTheme option").eq(0).text(sankoreLang[lang].black).next().text(sankoreLang[lang].blue).next().text(sankoreLang[lang].white);
$("input:button").each(function(){
switch($(this).val()){
case "Check":
$(this).val(sankoreLang[lang].check);
break;
case "Cancel":
$(this).val(sankoreLang[lang].quit);
break;
case "Tools":
$(this).val(sankoreLang[lang].tools);
break;
case "Options":
$(this).val(sankoreLang[lang].options);
break;
case "Help":
$(this).val(sankoreLang[lang].help);
break;
case "About":
$(this).val(sankoreLang[lang].about);
break;
case "Moving":
$(this).val(sankoreLang[lang].moving);
break;
case "Tangente":
$(this).val(sankoreLang[lang].tangente);
break;
case "Point":
$(this).val(sankoreLang[lang].point);
break;
case "Calculate":
$(this).val(sankoreLang[lang].calculate);
break;
case "Estimate":
$(this).val(sankoreLang[lang].estimate);
break;
case "Start to analysis":
$(this).val(sankoreLang[lang].start_to_analysis);
break;
case "Test XPM":
$(this).val(sankoreLang[lang].test + " XPM");
break;
case "Test SVG":
$(this).val(sankoreLang[lang].test + " SVG");
break;
case "Test Canvas":
$(this).val(sankoreLang[lang].test + " Canvas");
break;
case "Save":
$(this).val(sankoreLang[lang].save);
break;
case "Load":
$(this).val(sankoreLang[lang].load);
break;
case "Delete":
$(this).val(sankoreLang[lang].del);
break;
case "Display":
$(this).val(sankoreLang[lang].display);
break;
case "Reload widget":
$(this).val(sankoreLang[lang].reload_widget);
break;
case "Updated":
$(this).val(sankoreLang[lang].update);
break;
case "Update zoom":
$(this).val(sankoreLang[lang].update_zoom);
break;
case "Reset display":
$(this).val(sankoreLang[lang].reset_display);
break;
case "User's guide":
$(this).val(sankoreLang[lang].guide);
break;
default:
break;
}
return true;
});
}
$(document).disableTextSelect();
$("input, select").mouseover(function(){
$(document).enableTextSelect();
});
$("input, select").mouseout(function(){
$(document).disableTextSelect();
});
$("body").mouseout(function(){
if(window.sankore & & loadingFlag){
sankore.setPreference("functionData",$("#inputEq").val());
sankore.setPreference("xAxisFrom",$("#borneXGauche").val());
sankore.setPreference("xAxisTo",$("#borneXDroite").val());
sankore.setPreference("yAxisFrom",$("#borneYGauche").val());
sankore.setPreference("yAxisTo",$("#borneYDroite").val());
sankore.setPreference("functionColor",$("#inputTeinte").val());
sankore.setPreference("functionValue",$("#inputValeur").val());
sankore.setPreference("functionSaturation",$("#inputSaturation").val());
sankore.setPreference("functionRed",$("#inputRouge").val());
sankore.setPreference("functionGreen",$("#inputVert").val());
sankore.setPreference("functionBlue",$("#inputBleu").val());
sankore.setPreference("functionOpacity",$("#inputOpacity").val());
sankore.setPreference("functionColorId", idColor);
if ($('#checkDerivee').is(":checked"))
sankore.setPreference("simplefx","1");
else
sankore.setPreference("simplefx","0");
if ($('#checkDerivee2').is(":checked"))
sankore.setPreference("hardfx","1");
else
sankore.setPreference("hardfx","0");
sankore.setPreference("squareUnderFrom", $("#aireG").val());
sankore.setPreference("squareUnderTo", $("#aireD").val());
sankore.setPreference("calculateThePoint", $("#inputX").val());
if ($('#checkAire').is(":checked"))
sankore.setPreference("checkboxDraw","1");
else
sankore.setPreference("checkboxDraw","0");
sankore.setPreference("selectedTheme", $("#selectTheme").val());
sankore.setPreference("graphicalMethodDisplaying", $("#selectMethodeAffichage").val());
sankore.setPreference("defaultZoom", $("#zoomDefaut").val());
if ($('#checkGrille').is(":checked"))
sankore.setPreference("showGrid","1");
else
sankore.setPreference("showGrid","0");
if ($('#checkAxes').is(":checked"))
sankore.setPreference("showAxis","1");
else
sankore.setPreference("showAxis","0");
if ($('#checkEchelle').is(":checked"))
sankore.setPreference("showScale","1");
else
sankore.setPreference("showScale","0");
sankore.setPreference("styleOf3DShow", $("#selectAffichage3D").val());
sankore.setPreference("accuracyFunction", $("#inputPrecision3D").val());
sankore.setPreference("redColor", $("#selectRouge3D").val());
sankore.setPreference("greenColor", $("#selectVert3D").val());
sankore.setPreference("blueColor", $("#selectBleu3D").val());
sankore.setPreference("3DGeneralColor", $("#couleur3Dgenerale").val());
sankore.setPreference("thickness", $("#inputTaille").val());
sankore.setPreference("offsetDiagrammX", $("#inputDecalageX").val());
sankore.setPreference("offsetDiagrammY", $("#inputDecalageY").val());
sankore.setPreference("accuracyGraph", $("#inputPrecision").val());
if(historique.length)
sankore.setPreference("graphmeHistory", historique.toString());
}
});
});
//alert(navigator.appName+" ; "+navigator.appVersion+" ; "+navigator.userAgent)
// ------------- Fonctions du widgets -------------
// Lance la procédure pour dessiner la fonction qui se trouve dans l'input en haut du widget.
// Permet aussi d'actualiser le graphique.
function actualiserGraph(){
evaluer(document.getElementById("inputEq").value)
}
// Cette fonction détermine si la fonction entrée est valide ou non.
// Elle retourne "true" si la fonction ne comporte pas de caractères interdits et "false" dans le cas contraire.
function check(eq){
for(var i=0; i< interdit.length ; i + + ) {
var condition = ""
for(var k=0; k< interdit [ i ] . length ; k + + ) {
if(k==0){
condition = condition + "eq.charAt(j) == interdit[i].charAt(0)"
}
else{
condition = condition + "& & eq.charAt(j+"+k+") == interdit[i].charAt("+k+")"
}
}
//alert(interdit[i]+" ; "+condition)
for(var j=0; j< eq.length ; j + + ) {
if(eval(condition)){
document.getElementById("spanFctInterdite").innerHTML = interdit[i]
afficherMenu("fctInterdite")
//alert("------- Erreur -------\nImpossible de dessiner la fonction ... \nExpression ou carractère invalide : "+interdit[i]+"")
return false
}
}
}
return true
}
// Cette fonction permet de choisir la méthode d'affichage entre:
// 1) Image au format XPM
// 2) Affichage directe dans sankore
// 3) Autres Méthodes d'affichages (svg ou canvas)
function evaluer(eq){
if(check(eq)){
try{
if(historique[0]!=eq & & eq!="1000"){
for(var i=0;i< historique.length ; i + + ) {
if(historique[i]==eq){
historique.splice(i, 1)
}
}
historique.unshift(eq)
actualiserHistorique()
}
if(fonction3D){
dessiner3D(eq)
}
else if(document.getElementById("selectMethodeAffichage").value == "xpm"){
evaluerXPM(eq)
}
else if(document.getElementById("selectMethodeAffichage").value == "sankore"){
evaluerUniboard(eq)
}
else if(document.getElementById("selectMethodeAffichage").value == "canvas" || document.getElementById("selectMethodeAffichage").value == "canvas2"){
evaluerCanvas(eq)
}
else{
evaluerSVG(eq)
}
}
catch(err){
afficherMenu("erreurFct")
}
}
}
// ---- Fonctions Mathématiques et constantes ----
// (rempalce sin() par Math.sin(), cos() par Math.cos(), tan() par Math.tan(), etc.
var pi = 4 * atan(1)
var e = exp(1)
function sin(valeur){
return Math.sin(valeur)
}
function cos(valeur){
return Math.cos(valeur)
}
function tan(valeur){
return Math.tan(valeur)
}
function cot(valeur){
return 1/Math.tan(valeur)
}
function sec(valeur){
return 1/cos(valeur)
}
function csc(valeur){
return 1/sin(valeur)
}
function asin(valeur){
return Math.asin(valeur)
}
function acos(valeur){
return Math.acos(valeur)
}
function atan(valeur){
return Math.atan(valeur)
}
function acot(valeur){
return Math.atan(1/valeur)
}
function asec(valeur){
return Math.acos(1/valeur)
}
function acsc(valeur){
return Math.asin(1/valeur)
}
var arcsin = asin
var arccos = acos
var arctan = atan
var arccot = acot
var arcsec = asec
var arccsc = acsc
function sinh(valeur){
return (Math.exp(valeur)-Math.exp(-valeur))/2
}
function cosh(valeur){
return (Math.exp(valeur)+Math.exp(-valeur))/2
}
function tanh(valeur){
return (Math.exp(valeur)-Math.exp(-valeur))/(Math.exp(valeur)+Math.exp(-valeur))
}
function coth(valeur){
return (Math.exp(valeur)+Math.exp(-valeur))/(Math.exp(valeur)-Math.exp(-valeur))
}
function sech(valeur){
return 1/cosh(valeur)
}
function csch(valeur){
return 1/sinh(valeur)
}
function asinh(valeur){
return Math.log(valeur+Math.sqrt(Math.pow(valeur,2)+1))
}
function acosh(valeur){
return Math.log(valeur+Math.sqrt(Math.pow(valeur,2)-1))
}
function atanh(valeur){
return Math.log((1+valeur)/(1-valeur))/2
}
function acoth(valeur){
return Math.log((valeur+1)/(valeur-1))/2
}
var arcsinh = asinh
var arccosh = acosh
var arctanh = atanh
var arccoth = acoth
function sqrt(valeur){
return Math.sqrt(valeur)
}
function pow(valeur1, valeur2){
return Math.pow(valeur1, valeur2)
}
function root(valeur1, valeur2){
if(valeur2%2==1 & & valeur1< 0 ) {
return -Math.pow(-valeur1, (1/valeur2))
}
else{
return Math.pow(valeur1, (1/valeur2))
}
}
function exp(valeur){
return Math.exp(valeur)
}
function log(valeur){
return Math.log(valeur)/Math.log(10)
}
function ln(valeur){
return Math.log(valeur)
}
function abs(valeur){
return Math.abs(valeur)
}
function sign(valeur){
if(valeur< 0 ) {
return -1
}
else if(valeur>0){
return 1
}
else{
return undefined
}
}
function round(valeur){
return Math.round(valeur)
}
function ceil(valeur){
return Math.ceil(valeur)
}
function floor(valeur){
return Math.floor(valeur)
}
function random(){
return Math.random()
}
// ]]>
< / script >
< / head >
< body onload = "evaluer(1000);checkCouleurs3D();loadOptions();majAuto()" onkeypress = "keyPress(event)" >
<!-- ..... Haut du Widget ..... -->
< span id = "haut" >
< span id = "texteFonction" > Function: < / span > < input id = "inputEq" onkeypress = 'if(event.keyCode==13) evaluer(this.value)' onkeyup = "document.getElementById('fonctionActuelle').innerHTML = this.value" / >
< input type = "button" onclick = 'evaluer(document.getElementById("inputEq").value)' value = "Display" / > < input type = "button" style = "width:21px;" onclick = "menuFonctions()" value = "+" / >
< / span >
<!-- <div id="miniMax" onclick="miniMax()"> - </div> ▶▼ -->
< div id = "boutonAgrandir" class = "miniBouton" onclick = "agrandirAffichage()" > ^< / div >
<!-- <div id="boutonFermer" class="miniBouton" onclick="close()"></div> -->
< br / >
<!-- ..... Millieu du Widget ..... -->
<!-- Zone d'affichage -->
< div id = "affichage" onmousedown = "sourisDown()" onmouseup = "sourisUp()" onmousemove = "sourisMove(event)" ondblclick = "doubleClick(event.ctrlKey)" > < / div >
<!-- Zone de boutons gauche -->
< div id = "gauche" >
< span id = "xAxis" > X-axis:< / span > < br / >
< input id = "borneXGauche" class = "smallInput" value = "-5" onkeypress = 'if(event.keyCode==13) actualiserGraph()' / > ... < input id = "borneXDroite" class = "smallInput" value = "5" onkeypress = 'if(event.keyCode==13) actualiserGraph()' / > < br / >
< span id = "yAxis" > Y-axis:< / span > < br / >
< input id = "borneYGauche" class = "smallInput" value = "-5" onkeypress = 'if(event.keyCode==13) actualiserGraph()' / > ... < input id = "borneYDroite" class = "smallInput" value = "5" onkeypress = 'if(event.keyCode==13) actualiserGraph()' / >
< br / > < span id = "scaleZoom" > Zoom:< / span > < br / >
< input type = "button" style = "width:45%;" onclick = 'zoom(1.25)' value = "-" / > < input type = "button" style = "width:45%; position:relative; left: 9px;" onclick = 'zoom(0.8)' value = "+" / > < br / > < br / >
< span id = "graphColor" > Color:< / span > < br / >
< div id = "buttonColor" title = "couleurFonction" onclick = "colorPicker(this.id); afficherMenu('menuCouleur')" > < / div >
< br / > < br / >
< hr / >
< br / >
Menus:
< input type = "button" class = "boutonGauche" onclick = 'document.getElementById("etudeFct").innerHTML = document.getElementById("inputEq").value;afficherMenu("menuOutils")' value = "Tools" / >
< input type = "button" class = "boutonGauche" onclick = 'afficherMenu("menuOptions")' value = "Options" / >
< input type = "button" class = "boutonGauche" onclick = 'afficherMenu("menuAide")' value = "Help" / >
< input type = "button" class = "boutonGauche" onclick = 'afficherMenu("menuCredits")' value = "About" / >
<!-- ..... Menus ..... -->
< div id = "menu" class = "menu" >
< div id = "contenuMenu" class = "contenuMenu" > < / div >
< div class = "barreBasMenu" >
< input type = "button" onclick = 'cacherMenu()' value = "Cancel" / >
< / div >
< / div >
< / div >
< div id = "gauche3D" >
< input type = "button" class = "boutonGauche3D" onclick = 'afficherMenu("menuCredits")' value = "About" / >
< input type = "button" class = "boutonGauche3D" onclick = 'afficherMenu("menuAide")' value = "Help" / >
< input type = "button" class = "boutonGauche3D" onclick = 'afficherMenu("menuOptions")' value = "Options" / >
< input type = "button" style = "width:30px;" onclick = 'zoom3D(0.8)' value = "-" / > < input type = "button" style = "width:30px;" onclick = 'zoom3D(1.25)' value = "+" / >
< / div >
<!-- Options -->
< div id = "menuOptions" class = "menu" >
< table class = "ongletMenu" >
< tr >
< td class = "ongletMenuActuel" onclick = 'afficherMenu("menuOptions")' > Widget< / td >
< td onclick = 'afficherMenu("menuOptions2D")' > 2D< / td >
< td onclick = 'afficherMenu("menuOptions3D")' > 3D< / td >
< / tr >
< / table >
< div class = "contenuMenu avecBordures" >
< h3 > Widget options< / h3 >
< span > Themes of widget:< / span > < select id = "selectTheme" onchange = "changerTheme(this.value)" >
< option value = "noir" > Black< / option >
< option value = "bleu" > Blue< / option >
< option value = "blanc" > White< / option >
< / select > < br / >
< br / > < br / > < br / >
< span class = "gras" > Control options:< / span > < br / >
< input type = "button" class = "boutonSauvegarde" onclick = "saveOptions()" value = "Save" / > < input type = "button" class = "boutonSauvegarde" onclick = "loadOptions()" value = "Load" / > < input class = "boutonSauvegarde2" type = "button" onclick = "delOptions()" value = "Delete" / > < input class = "boutonSauvegarde2" type = "button" onclick = "alertOptions()" value = "Display" / > < br / >
< span class = "texteSecondaire" > Save a widget options in cookies or load an options from cookies or delete a registered options.< / span >
< br / > < br / >
< label for = "checkMaJ" > Automatically update when a widget opening.< / label > < input type = "checkbox" id = "checkMaJ" onclick = "checkboxMaJ()" / >
< br / >
< div id = "cacheCookies" > < br / > < br / > < h1 > Cookies are disabled. You cannot save an options...< / h1 > < / div >
< div id = "cacheMaJ" > You are using the last version of this widget.< / div >
< input type = "button" onclick = 'reset()' value = "Reload widget" style = "position:absolute; bottom:20px; width:140px; height:32px;" / >
< input type = "button" onclick = 'miseAjour()' value = "Updated" style = "position:absolute; bottom:20px; left:160px; width:140px; height:32px;" / >
< / div >
< div class = "barreBasMenu" > < input type = "button" onclick = "cacherMenu(); actualiserGraph()" value = "Check" / > < / div >
< / div >
< div id = "menuOptions2D" class = "menu" >
< table class = "ongletMenu" >
< tr >
< td onclick = 'afficherMenu("menuOptions")' > Widget< / td >
< td class = "ongletMenuActuel" onclick = 'afficherMenu("menuOptions2D")' > 2D< / td >
< td onclick = 'afficherMenu("menuOptions3D")' > 3D< / td >
< / tr >
< / table >
< div class = "contenuMenu avecBordures" >
< h3 > Options 2D< / h3 >
< span > The graphical method displaying:< / span > < select id = "selectMethodeAffichage" >
< option value = "canvas" > canvas (lines)< / option >
< option value = "canvas2" > canvas (points)< / option >
< option value = "svg" > svg< / option >
< option value = "svg2" > svg (1 image)< / option >
< option value = "xpm" > xpm< / option >
< option value = "sankore" > sankore< / option >
< / select > < br / >
< span > Zoom default:< / span >
< input value = "5" class = "smallInput" id = "zoomDefaut" / >
< input type = "button" onclick = 'reinitialiserZoom(document.getElementById("zoomDefaut").value)' value = "Update zoom" / > < br / >
< br / >
< input type = "checkbox" id = "checkGrille" checked = "true" onclick = "actualiserGraph()" / > < label for = "checkGrille" > Show grid< / label > < br / >
< input type = "checkbox" id = "checkAxes" checked = "true" onclick = "actualiserGraph()" / > < label for = "checkAxes" > Show axis< / label > < br / >
< input type = "checkbox" id = "checkEchelle" checked = "true" onclick = "actualiserGraph()" / > < label for = "checkEchelle" > Scale< / label > < br / >
< span > Thickness:< / span > < input id = "inputTaille" class = "smallInput" value = "3" onkeypress = 'if(event.keyCode==13) actualiserGraph()' style = "" / >
< div class = "boutonPlus" type = "button" onclick = "boutonPlus('inputTaille', 1); actualiserGraph()" > +< / div > < div class = "boutonMoins" type = "button" onclick = "boutonMoins('inputTaille', 1); actualiserGraph()" > -< / div > < br / >
< br / >
< span > Offset diagram:< / span >
x=< input value = "0" class = "smallInput" id = "inputDecalageX" onkeyup = "decalageX = parseFloat(this.value)" / >
y=< input value = "0" class = "smallInput" id = "inputDecalageY" onkeyup = "decalageY = parseFloat(this.value)" / >
< br / >
< span > Accuracy graph:< / span >
< input value = "0.02" class = "smallInput" id = "inputPrecision" onkeyup = "precision = parseFloat(this.value)" / >
< div class = "boutonPlus" type = "button" onclick = "boutonPlus('inputPrecision', 0.01); precision = parseFloat(document.getElementById('inputPrecision').value); actualiserGraph()" > +< / div > < div class = "boutonMoins" type = "button" onclick = "boutonMoins('inputPrecision', 0.01); precision = parseFloat(document.getElementById('inputPrecision').value); actualiserGraph()" > -< / div > < br / >
< br / >
< / div >
< div class = "barreBasMenu" > < input type = "button" onclick = 'cacherMenu(); actualiserGraph()' value = "Check" / > < / div >
< / div >
< div id = "menuOptions3D" class = "menu" >
< table class = "ongletMenu" >
< tr >
< td onclick = 'afficherMenu("menuOptions")' > Widget< / td >
< td onclick = 'afficherMenu("menuOptions2D")' > 2D< / td >
< td class = "ongletMenuActuel" onclick = 'afficherMenu("menuOptions3D")' > 3D< / td >
< / tr >
< / table >
< div class = "contenuMenu avecBordures" >
< h3 > Options 3D< / h3 >
< span > Show the style:< / span >
< select id = "selectAffichage3D" >
< option value = "surfaces" > surfaces < / option >
< option value = "points" > points < / option >
< / select > < input type = "button" onclick = 'reinitialiserZoom(5)' value = "Reset display" / > < br / >
< br / >
< span > Accuracy function:< / span > < input value = "0.2" class = "smallInput" id = "inputPrecision3D" onkeyup = "precisionFonction3D = parseFloat(this.value)" / >
< div class = "boutonPlus" type = "button" onclick = "boutonPlus('inputPrecision3D', 0.1); precisionFonction3D = parseFloat(document.getElementById('inputPrecision3D').value); actualiserGraph()" > +< / div > < div class = "boutonMoins" type = "button" onclick = "boutonMoins('inputPrecision3D', 0.1); precisionFonction3D = parseFloat(document.getElementById('inputPrecision3D').value); actualiserGraph()" > -< / div > < br / >
< br / >
< span > Use the color:< / span > < br / >
< span > red:< / span >
< select onchange = "checkCouleurs3D()" id = "selectRouge3D" >
< option value = "plus" > positive value< / option >
< option value = "moins" > negative value< / option >
< option value = "tout" > general value< / option >
< / select >
< br / >
< span > green:< / span >
< select onchange = "checkCouleurs3D()" id = "selectVert3D" >
< option value = "moins" > negative value< / option >
< option value = "plus" > positive value< / option >
< option value = "tout" > general value< / option >
< / select >
< br / >
< span > blue:< / span >
< select onchange = "checkCouleurs3D()" id = "selectBleu3D" >
< option value = "tout" > general value< / option >
< option value = "plus" > positive value< / option >
< option value = "moins" > negative value< / option >
< / select >
< br / >
< span > General value:< / span > < input class = "smallInput" id = "couleur3Dgenerale" type = "texte" value = "0" onkeyup = "checkCouleurs3D()" / > (< span > from< / span > 0 < span > to< / span > 255)
< br / >
< span id = "apercuCouleur3D" > < / span >
< / div >
< div class = "barreBasMenu" > < input type = "button" onclick = 'cacherMenu(); actualiserGraph()' value = "Check" / > < / div >
< / div >
<!-- Aide -->
< div id = "menuAide" class = "menu" >
< table class = "ongletMenu" >
< tr >
< td class = "ongletMenuActuel" onclick = 'afficherMenu("menuAide")' > Using< / td >
< td onclick = 'afficherMenu("menuAideExemples")' > Examples< / td >
< td onclick = 'afficherMenu("menuAideAutres")' > Other< / td >
< / tr >
< / table >
< div class = "contenuMenu avecBordures" >
< h1 > How it work.< / h1 >
< p > < span > This widget allow to draw mathematical function. Enter function in the field in the top part of widget and press "Show".< / span > < / p >
< p > < span > You can enter following mathematical function:< / span > < br / >
< h2 > Basic operations< / h2 >
< ul >
< li > < span > Plus< / span > -> < span class = "gras" > +< / span > < / li >
< li > < span > Minus< / span > -> < span class = "gras" > -< / span > < / li >
< li > < span > Multiplication< / span > -> < span class = "gras" > *< / span > < / li >
< li > < span > Division< / span > -> < span class = "gras" > /< / span > < / li >
< li > < span > Mod< / span > -> < span class = "gras" > %< / span > < / li >
< / ul >
< h2 > Trigonometric functions< / h2 >
< ul >
< li > < span > Sine< / span > -> < span class = "gras" > sin(x)< / span > < / li >
< li > < span > Cosine< / span > -> < span class = "gras" > cos(x)< / span > < / li >
< li > < span > Tangent< / span > -> < span class = "gras" > tan(x)< / span > < / li >
< li > < span > Cotangent< / span > -> < span class = "gras" > cot(x)< / span > < / li >
< li > < span > Secant< / span > -> < span class = "gras" > sec(x)< / span > < / li >
< li > < span > Cosecant< / span > -> < span class = "gras" > csc(x)< / span > < / li >
< / ul >
< ul >
< li > < span > Arc sine< / span > -> < span class = "gras" > arcsin(x)< / span > < span > or< / span > < span class = "gras" > asin(x)< / span > < / li >
< li > < span > Arc cosine< / span > -> < span class = "gras" > arccos(x)< / span > < span > or< / span > < span class = "gras" > acos(x)< / span > < / li >
< li > < span > Arc tangent< / span > -> < span class = "gras" > arctan(x)< / span > < span > or< / span > < span class = "gras" > atan(x)< / span > < / li >
< li > < span > Arc cotangent< / span > -> < span class = "gras" > arccot(x)< / span > < span > or< / span > < span class = "gras" > acot(x)< / span > < / li >
< / ul >
< h2 > Hyperbolic functions< / h2 >
< ul >
< li > < span > Hyperbolic sine< / span > -> < span class = "gras" > sinh(x)< / span > < / li >
< li > < span > Hyperbolic cosine< / span > -> < span class = "gras" > cosh(x)< / span > < / li >
< li > < span > Hyperbolic tangent< / span > -> < span class = "gras" > tanh(x)< / span > < / li >
< li > < span > Hyperbolic cotangent< / span > -> < span class = "gras" > coth(x)< / span > < / li >
< li > < span > Hyperbolic secant< / span > -> < span class = "gras" > sech(x)< / span > < / li >
< li > < span > Hyperbolic cosecant< / span > -> < span class = "gras" > csch(x)< / span > < / li >
< / ul >
< ul >
< li > < span > Hyperbolic arc sine< / span > -> < span class = "gras" > arcsinh(x)< / span > < span > or< / span > < span class = "gras" > asinh(x)< / span > < / li >
< li > < span > Hyperbolic arc cosine< / span > -> < span class = "gras" > arccosh(x)< / span > < span > or< / span > < span class = "gras" > acosh(x)< / span > < / li >
< li > < span > Hyperbolic arc tangent< / span > -> < span class = "gras" > arctanh(x)< / span > < span > or< / span > < span class = "gras" > atanh(x)< / span > < / li >
< li > < span > Hyperbolic arc cotangent< / span > -> < span class = "gras" > arccoth(x)< / span > < span > or< / span > < span class = "gras" > acoth(x)< / span > < / li >
< / ul >
< h2 > Square roots and degrees< / h2 >
< ul >
< li > < span > Square root< / span > -> < span class = "gras" > sqrt(x)< / span > < / li >
< li > < span > Degree< / span > -> < span class = "gras" > pow(x, y)< / span > < span class = "texteSecondaire" > Variable x to the power y< / span > < / li >
< li > < span > Root< / span > -> < span class = "gras" > root(x, y)< / span > < span class = "texteSecondaire" > Root y of x< / span > < / li >
< / ul >
< h2 > Exponential and logarithm< / h2 >
< ul >
< li > e< span style = "vertical-align:super;" > x< / span > -> < span class = "gras" > exp(x)< / span > < / li >
< li > < span > Natural logarithm< / span > -> < span class = "gras" > ln(x)< / span > < / li >
< li > < span > Decimal logarithm< / span > -> < span class = "gras" > log(x)< / span > < / li >
< / ul >
< h2 > Absolute number value< / h2 >
< ul >
< li > |x| -> < span class = "gras" > abs(x)< / span > < / li >
< / ul >
< h2 > Rounding< / h2 >
< ul >
< li > < span class = "gras" > round(x)< / span > -> < span > rounding to the nearest whole number< / span > < / li >
< li > < span class = "gras" > ceil(x)< / span > -> < span > rounding to the nearest whole number in a big way< / span > < / li >
< li > < span class = "gras" > floor(x)< / span > -> < span > rounding to the nearest whole number the smaller side< / span > < / li >
< / ul >
< / p > < br / >
< hr / >
< h1 > Constants< / h1 >
< p > < span > Also are available some constants:< / span > < br / >
< ul >
< li > < span class = "gras" > pi< / span > = 4 * atan(1) ≈ 3,141592653589793< / li >
< li > < span class = "gras" > e< / span > = exp(1) ≈ 2.718281828459045< / li >
< / ul >
< / p >
< br / >
< hr / >
< h1 > Keyboard keys< / h1 >
< p style = "font-size:90%;" >
esc -> < span > reset widget< / span > < br / >
ctrl + < span > left arrow< / span > -> < span > graph will be moved left< / span > < br / >
ctrl + < span > top arrow< / span > -> < span > graph will be moved top< / span > < br / >
ctrl + < span > right arrow< / span > -> < span > graph will be moved right< / span > < br / >
ctrl + < span > bottom arrow< / span > -> < span > graph will be moved bottom< / span > < br / >
< br / >
< / p >
< br / >
< input type = "button" value = "User's guide" onclick = "navigateur('Guide_Utilisateur.html')" style = "position:absolute;bottom:0px;left:0px;" / >
< / div >
< div class = "barreBasMenu" > < input type = "button" onclick = 'cacherMenu()' value = "Cancel" / > < / div >
< / div >
< div id = "menuAideExemples" class = "menu" >
< table class = "ongletMenu" >
< tr >
< td onclick = 'afficherMenu("menuAide")' > Using< / td >
< td class = "ongletMenuActuel" onclick = 'afficherMenu("menuAideExemples")' > Examples< / td >
< td onclick = 'afficherMenu("menuAideAutres")' > Other< / td >
< / tr >
< / table >
< div class = "contenuMenu avecBordures" >
< span class = "texteSecondaire" > (You can view example. Do not forget to set accuracy in options if necessary.)< / span >
< br / > < br / >
< hr / >
< h1 > Functions 2D< / h1 >
< p >
< span class = "survol" onclick = "document.getElementById('inputEq').value = '0.5*x+1' ; actualiserGraph()" > 0.5*x+1< / span > < br / >
< span class = "survol" onclick = "document.getElementById('inputEq').value = 'pow(x,2)-3' ; actualiserGraph()" > pow(x,2)-3< / span > < br / >
< span class = "survol" onclick = "document.getElementById('inputEq').value = '1/x' ; actualiserGraph()" > 1/x< / span > < br / >
< span class = "survol" onclick = "document.getElementById('inputEq').value = 'atan(x)' ; actualiserGraph()" > atan(x)< / span > < br / >
< span class = "survol" onclick = "document.getElementById('inputEq').value = '(x+1/x)/1.2' ; actualiserGraph()" > (x+1/x)/1.2< / span > < br / >
< span class = "survol" onclick = "document.getElementById('inputEq').value = 'sin(10*x*x)*0.5' ; actualiserGraph()" > sin(10*x*x)*0.5< / span > < br / >
< span class = "survol" onclick = "document.getElementById('inputEq').value = 'log(pow(x-2,2))' ; actualiserGraph()" > log(pow(x-2,2))< / span > < br / >
< span class = "survol" onclick = "document.getElementById('inputEq').value = '(x*x-5*x+5)*exp(x)/5' ; actualiserGraph()" > (x*x-5*x+5)*exp(x)/5< / span > < br / >
< span class = "survol" onclick = "document.getElementById('inputEq').value = 'random()' ; evaluer('random()')" > random()< / span > < br / >
< / p >
< br / > < br / >
< hr / >
< h1 > Functions 3D< / h1 >
< p >
< span class = "survol" onclick = "document.getElementById('inputEq').value = 'sin(x)+cos(y)' ; actualiserGraph()" > sin(x)+cos(y)< / span > < br / >
< span class = "survol" onclick = "document.getElementById('inputEq').value = 'sqrt(10-x*x)' ; actualiserGraph()" > sqrt(10-x*x)< / span > < br / >
< span class = "survol" onclick = "document.getElementById('inputEq').value = 'atan(x)+atan(y)' ; actualiserGraph()" > atan(x)+atan(y)< / span > < br / >
< / p >
< br / >
< / div >
< div class = "barreBasMenu" > < input type = "button" onclick = 'cacherMenu()' value = "Cancel" / > < / div >
< / div >
< div id = "menuAideAutres" class = "menu" >
< table class = "ongletMenu" >
< tr >
< td onclick = 'afficherMenu("menuAide")' > Using< / td >
< td onclick = 'afficherMenu("menuAideExemples")' > Examples< / td >
< td class = "ongletMenuActuel" onclick = 'afficherMenu("menuAideAutres")' > Other< / td >
< / tr >
< / table >
< div class = "contenuMenu avecBordures" >
< h4 > Save graph< / h4 >
< span > In some browsers when used display method "Canvas" you can save graph by clicking it with right mouse button and selecting "Save image". Also you can save 3D-graphs.< / span >
< br / > < br / >
< h4 > Offset< / h4 >
< span > If graph isn't in the right place (larger than canvas) then can you set necessary parameters graph displaying in settings menu.< / span >
< / div >
< div class = "barreBasMenu" > < input type = "button" onclick = 'cacherMenu()' value = "Cancel" / > < / div >
< / div >
<!-- Crédits -->
< div id = "menuCredits" class = "menu" >
< div class = "contenuMenu" style = "text-align:justify;" >
< br / >
< table id = "credits" >
< tr >
< td >
< img src = "icon.png" / >
< h3 > Widget is developed by< / h3 >
Yannick Vessaz < br / >
< a href = 'mailto:yannick.vessaz@gmail.com' > yannick.vessaz@gmail.com< / a >
< / td >
< / tr >
< / table >
< span class = "texteSecondaire" >
< br / > < br / >
< span > If you want to inform about bug, make a proposal or just ask some questions then you can contact to me at the following e-mail:< / span > < a href = 'mailto:yannick.vessaz@gmail.com' > e-mail< / a > .
< br / > < br / >
< span > If you want to change background design then you can contact at following address:< / span > < a href = "http://kde.org" > KDE< / a > .
< / span >
< span id = "version" class = "texteSecondaire" style = "position:absolute;bottom:10px;left:15px;" > version 1.3< / span >
< / div >
< div class = "barreBasMenu" > < input type = "button" onclick = 'cacherMenu()' value = "Cancel" / > < / div >
< / div >
<!-- Outils -->
< div id = "menuOutils" class = "menu" >
< div class = "contenuMenu" >
< h3 style = "margin-top:0px; margin-bottom:15px;" > Tools< / h3 >
< span > Mouse events:< / span > < br / >
< input type = "button" class = "choixOutil" onclick = "choixOutil('deplacement');cacherMenu()" value = "Moving" / >
< input type = "button" class = "choixOutil" onclick = "choixOutil('tangente');cacherMenu()" value = "Tangente" / >
< input type = "button" class = "choixOutil" onclick = "choixOutil('point');cacherMenu()" value = "Point" / >
< br / > < br / >
< span > Derivative:< / span > < br / >
< label for = "checkDerivee" > f'(x) < / label > < input type = "checkbox" id = "checkDerivee" onclick = "actualiserGraph()" / > < label for = "checkDerivee2" > f''(x) < / label > < input type = "checkbox" id = "checkDerivee2" onclick = "actualiserGraph()" / >
< br / > < br / >
< span > Square under function:< / span > < br / >
< span > From< / span > < input value = "-5" class = "smallInput" id = "aireG" / > < span > to< / span > < input value = "5" class = "smallInput" id = "aireD" / > < input type = "button" onclick = 'calculerAire()' value = "Calculate" / > < span id = "outputAire" > < / span >
< div style = "float: right;" > < label for = "checkAire" > Draw < / label > < input type = "checkbox" id = "checkAire" onclick = "actualiserGraph()" / > < / div >
< br / > < br / >
< span > Calculate the point on the function:< / span > < br / >
x=< input value = "0" class = "smallInput" id = "inputX" onkeypress = 'if(event.keyCode==13) execute(document.getElementById("inputEq").value)' / >
< input type = "button" onclick = 'execute(document.getElementById("inputEq").value)' value = "Estimate" / >
< span id = "outputX" > < / span >
< br / > < br / >
< span > Analysis of function:< / span > < br / >
f(x) = < span id = "etudeFct" > < / span > < input type = "button" value = "Start to analysis" onclick = 'etudier(document.getElementById("inputEq").value);afficherMenu("menuEtude")' / >
< br / > < br / >
< span > Display test:< / span > < br / >
< input type = "button" onclick = 'cacherMenu(); testXPM()' value = "Test XPM" / > < input type = "button" onclick = 'cacherMenu(); testSVG()' value = "Test SVG" / > < input type = "button" onclick = 'cacherMenu(); testCanvas()' value = "Test Canvas" / >
< / div >
< div class = "barreBasMenu" > < input type = "button" onclick = 'cacherMenu()' value = "Cancel" / > < / div >
< / div >
<!-- Etude de fonction -->
< div id = "menuEtude" class = "menu" >
< div class = "contenuMenu" >
< h3 > Analysis of function< / h3 >
< span > Set of definitions:< / span > < span id = "etudeEDF" > ...< / span > < br / >
< span > Parity:< / span > < span id = "etudeParite" > ...< / span > < br / >
< span > Zeros of functions:< / span > < span id = "etudeZeros" > ...< / span > < br / >
< table >
< tr id = "etudeSigne" >
< td > Sign : ...< / td >
< / tr >
< / table >
< span > Asymptotes< / span > < br / >
< span > AH left:< / span > : < span id = "etudeAHG" > ...< / span > < br / >
< span > AH right:< / span > < span id = "etudeAHD" > ...< / span > < br / >
< span > AV:< / span > < span id = "etudeAV" > ...< / span >
< span id = "etudeMin" > ...< / span >
< span id = "etudeMax" > ...< / span >
< span id = "etudeI" > ...< / span > < br / > < br / >
< span class = "texteSecondaire" style = "font-size:10px;" > Tool for analysis of function is not reliable on 100%. Don't forget check results of analysis before use it.< / span >
< / div >
< div class = "barreBasMenu" > < input type = "button" onclick = 'cacherMenu()' value = "Cancel" / > < / div >
< / div >
<!-- Fonctions multiples -->
< div id = "menuFonctions" class = "menu" >
< table class = "ongletMenu" >
< tr >
< td class = "ongletMenuActuel" onclick = 'afficherMenu("menuFonctions")' > Functions< / td >
< td onclick = 'afficherMenu("menuHistorique")' > History< / td >
< / tr >
< / table >
< div class = "contenuMenu avecBordures" >
< em > Current< / em > < br / >
f(x) = < span id = "fonctionActuelle" > x< / span > < input type = "button" value = "+" onclick = "ajouterFonction(document.getElementById('fonctionActuelle').innerHTML)" / >
< br / > < br / >
< em > Additional< / em > < br / >
< span id = "fonctionsSupp" > n/a ...< / span >
< / div >
< div class = "barreBasMenu" > < input type = "button" onclick = 'cacherMenu()' value = "Cancel" / > < / div >
< / div >
<!-- Historique -->
< div id = "menuHistorique" class = "menu" >
< table class = "ongletMenu" >
< tr >
< td onclick = 'afficherMenu("menuFonctions")' > Functions< / td >
< td class = "ongletMenuActuel" onclick = 'afficherMenu("menuHistorique")' > History< / td >
< / tr >
< / table >
< div class = "contenuMenu avecBordures" id = "divHistorique" >
< span id = "spanHistorique" > < / span >
< / div >
< div class = "barreBasMenu" > < input type = "button" onclick = 'cacherMenu()' value = "Cancel" / > < / div >
< / div >
<!-- Couleur -->
< div id = "menuCouleur" class = "menu" >
< div class = "contenuMenu" >
< em > Choosing the color:< / em > < br / > < br / >
< div id = "colorSV" onmousemove = "if(mouseDown==true){colorSV(event)}" onmousedown = "colorSV(event); mouseDown = true" onmouseup = "mouseDown = false" >
< svg:svg width = "100%" height = "100%" version = "1.1" xmlns = "http://www.w3.org/2000/svg" >
< svg:defs id = "defs1" >
< svg:linearGradient id = "linearGradient1" x1 = "0%" y1 = "0%" x2 = "100%" y2 = "0%" >
< svg:stop
style="stop-color:#000000;stop-opacity:1;"
offset="0%" />
< svg:stop
style="stop-color:#000000;stop-opacity:0;"
offset="100%" />
< / svg:linearGradient >
< svg:linearGradient id = "linearGradient2" x1 = "0%" y1 = "0%" x2 = "0%" y2 = "100%" >
< svg:stop
style="stop-color:#ffffff;stop-opacity:0;"
offset="0%" />
< svg:stop
style="stop-color:#ffffff;stop-opacity:1;"
offset="100%" />
< / svg:linearGradient >
< / svg:defs >
< svg:rect
style="fill:url(#linearGradient2);fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;fill-opacity:1"
width="255"
height="255"
x="0"
y="0"
ry="0" />
< svg:rect
style="fill:url(#linearGradient1);fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;fill-opacity:1"
width="255"
height="255"
x="0"
y="0"
ry="0" />
< svg:line
id="ligneValeur"
x1="255"
y1="0"
x2="255"
y2="255"
style="stroke:rgb(0,0,0);stroke-width:2"/>
< svg:line
id="ligneSaturation"
x1="0"
y1="0"
x2="255"
y2="0"
style="stroke:rgb(0,0,0);stroke-width:2"/>
< / svg:svg >
< / div >
< div id = "colorT" onmousemove = "if(mouseDown==true){colorT(event)}" onmousedown = "colorT(event); mouseDown = true" onmouseup = "mouseDown = false" >
< svg:svg width = "100%" height = "100%" version = "1.1" xmlns = "http://www.w3.org/2000/svg" >
< svg:defs id = "defs2" >
< svg:linearGradient id = "linearGradient3" x1 = "0%" y1 = "100%" x2 = "0%" y2 = "0%" >
< svg:stop
style="stop-color:#ff0000;stop-opacity:1;"
offset="0%" />
< svg:stop
style="stop-color:#ff00ff;stop-opacity:1;"
offset="16.66%" />
< svg:stop
style="stop-color:#0000ff;stop-opacity:1;"
offset="33.33%" />
< svg:stop
style="stop-color:#00ffff;stop-opacity:1;"
offset="50%" />
< svg:stop
style="stop-color:#00ff00;stop-opacity:1;"
offset="66.66%" />
< svg:stop
style="stop-color:#ffff00;stop-opacity:1;"
offset="83.33%" />
< svg:stop
style="stop-color:#ff0000;stop-opacity:1;"
offset="100%" />
< / svg:linearGradient >
< / svg:defs >
< svg:rect
style="fill:url(#linearGradient3);fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;fill-opacity:1"
width="255"
height="255"
x="0"
y="0"
ry="0" />
< svg:line
id="ligneTeinte"
x1="0"
y1="0"
x2="20"
y2="0"
style="stroke:rgb(0,0,0);stroke-width:2"/>
< / svg:svg >
< / div >
< table id = "colorValues" >
< tr >
< td > Color: < / td > < td > < input id = "inputTeinte" class = "smallInput" value = "0" onkeypress = '' / > < / td >
< / tr > < tr >
< td > Value: < / td > < td > < input id = "inputValeur" class = "smallInput" value = "0" onkeypress = '' / > < / td >
< / tr > < tr >
< td > Saturation: < / td > < td > < input id = "inputSaturation" class = "smallInput" value = "0" onkeypress = '' / > < / td >
< / tr > < tr >
< td > Red: < / td > < td > < input id = "inputRouge" class = "smallInput" value = "255" onkeypress = '' / > < / td >
< / tr > < tr >
< td > Green: < / td > < td > < input id = "inputVert" class = "smallInput" value = "0" onkeypress = '' / > < / td >
< / tr > < tr >
< td > Blue: < / td > < td > < input id = "inputBleu" class = "smallInput" value = "0" onkeypress = '' / > < / td >
< / tr > < tr >
< td > Opacity: < / td > < td > < input id = "inputOpacity" class = "smallInput" value = "1" onkeypress = '' / > < / td >
< / tr > <!-- <tr>
< td > < input id = "inputCouleur" style = "width: 70%" value = "cyan" onkeypress = 'couleurFonction = this.value; if(event.keyCode==13) actualiserGraph()' / > < / td >
< / tr > -->
< / table >
< div id = "apercuCouleur" title = "New Color" > < / div > < div id = "apercuCouleur2" title = "Old Color" > < / div >
< / div >
< div class = "barreBasMenu" > < input type = "button" onclick = "if(idColor=='buttonColor'){cacherMenu()}else{afficherMenu('menuFonctions')}; actualiserGraph()" value = "Check" / > < / div >
< / div >
<!-- Erreurs Fonctions interdites -->
< div id = "fctInterdite" class = "miniMenu" >
< br / >
< h1 > ------- Error -------< / h1 >
< br / >
Impossible to draw the function ...
< br / > < br / >
Error in expression or unexpected char: < br / >
< span id = "spanFctInterdite" style = "font-style:italic;" > < / span >
< br / > < br / >
< input type = "button" onclick = "cacherMenu()" value = "Ok" / >
< / div >
<!-- Autres erreurs -->
< div id = "erreurFct" class = "miniMenu" >
< h1 > ------- Error -------< / h1 >
Runtime error! Check your function and try to draw it again.
< br / >
Description and parameters various functions which are available to help.
< br / > < br / >
< input type = "button" onclick = "afficherMenu('menuAide')" value = "Help" / >
< input type = "button" onclick = "cacherMenu()" value = "Ok" / >
< / div >
<!-- Menu des mises à jour -->
< div id = "mAj" class = "menu" >
< h1 > Updated< / h1 >
< span > Current version:< / span > < br / > < span id = "thisVersion" > < / span > < br / >
< span > The last on-line version:< / span > < br / > < span id = "newVersion" > < / span > < br / >
< br / >
< span > This widget is available to using on web-site:< / span > < em > http://gyb.educanet2.ch/tm-widgets/yannick< / em > < br / >
< br / >
< / div >
<!-- Erreur mise à jour -->
< div id = "erreurMaJ" class = "miniMenu" >
< br / >
< h1 > ------- Error -------< / h1 >
< br / > < br / >
Update to latest version is not available because you already use the latest version.
< br / > < br / > < br / >
< input type = "button" onclick = "cacherMenu()" value = "Ok" / >
< / div >
<!-- Info options sauvegardées -->
< div id = "infoSauvegarde" class = "alertMenu" >
< br / >
< h1 > Options saved!< / h1 >
< br / >
< input type = "button" onclick = "document.getElementById('infoSauvegarde').style.display = 'none'" value = "Ok" / >
< / div >
<!-- ..... Flèches de déplacement ..... -->
< div class = "flecheDeplacement" id = "flecheHaut" onclick = "if(fonction3D){zoom3D(1.25)}else{deplacerY(1)}" onmousemove = "sourisMove(event)" > ▲< / div >
< div class = "flecheDeplacement" id = "flecheGauche" onclick = "deplacerX(-1)" onmousemove = "sourisMove(event)" > ◀< / div >
< div class = "flecheDeplacement" id = "flecheBas" onclick = "if(fonction3D){zoom3D(0.8)}else{deplacerY(-1)}" onmousemove = "sourisMove(event)" > ▼< / div >
< div class = "flecheDeplacement" id = "flecheDroite" onclick = "deplacerX(1)" onmousemove = "sourisMove(event)" > ▶< / div >
<!-- ..... Bas du Widget ..... -->
< div class = "info" id = "info" > < / div >
< div id = "point" > o< / div >
< div id = "tangente" > < / div >
<!-- .... Autres .... -->
< div id = "onglet3D" onclick = "activer3D()" > 3D< / div >
< / body >
<!-- .............................. Widget réalisé par Yannick Vessaz .............................. -->
<!-- .............................. e - mail: yannick.vessaz@gmail.com .............................. -->
< / html >
