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

revert GraphMe widget

parent 1688bd53
This diff is collapsed.
This diff is collapsed.
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%">
<script type="text/javascript">
<![CDATA[
top.svg = {
cursorX : 50,
cursorY : 50,
fillStyle : "blue",
fillOpacity : 1,
strokeStyle : "red",
strokeOpacity : 1,
lineWidth : 1,
moveTo : function(x, y){
this.cursorX = x;
this.cursorY = y;
},
lineTo : function(x, y){
var newLine = document.createElementNS("http://www.w3.org/2000/svg", "line");
newLine.setAttribute("x1", this.cursorX);
newLine.setAttribute("y1", this.cursorY);
newLine.setAttribute("x2", x);
newLine.setAttribute("y2", y);
newLine.setAttribute("stroke", this.strokeStyle);
newLine.setAttribute("stroke-width", this.lineWidth);
newLine.setAttribute("stroke-opacity", this.strokeOpacity);
document.getElementById("affichageSVG").appendChild(newLine);
this.moveTo(x, y);
},
beginPath : function(){
this.moveTo(0,0);
},
stroke : function(){
// rien
},
fill : function(){
// rien
},
clearRect : function(){
var element = document.getElementById("affichageSVG");
if(element.hasChildNodes()){
while(element.childNodes.length >= 1 ){
element.removeChild(element.firstChild);
}
}
},
fillRect : function(x, y, l, h){
if(h<0){
h = Math.abs(h);
y -= h;
}
if(l<0){
l = Math.abs(l);
x -= l;
}
var newRect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
newRect.setAttribute("x", x);
newRect.setAttribute("y", y);
newRect.setAttribute("width", l);
newRect.setAttribute("height", h);
newRect.setAttribute("fill", this.fillStyle);
newRect.setAttribute("fill-opacity", this.fillOpacity);
document.getElementById("affichageSVG").appendChild(newRect);
},
arc : function(cx, cy, r){
var newCircle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
newCircle.setAttribute("cx", cx);
newCircle.setAttribute("cy", cy);
newCircle.setAttribute("r", r);
newCircle.setAttribute("fill", this.fillStyle);
newCircle.setAttribute("fill-opacity", this.fillOpacity);
document.getElementById("affichageSVG").appendChild(newCircle);
},
fillText : function(txt, x, y){
var newText = document.createElementNS("http://www.w3.org/2000/svg", "text");
newText.setAttribute("x", x);
newText.setAttribute("y", y);
newText.setAttribute("fill", this.fillStyle);
newText.setAttribute("fill-opacity", 0.6);
newText.setAttribute("style", "font-size: 14px;");
newText.textContent = txt;
document.getElementById("affichageSVG").appendChild(newText);
}
}
]]>
</script>
<g id="affichageSVG">
</g>
</svg>
\ No newline at end of file
// -------------------- 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);
// -------------------- 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')
}
}
\ No newline at end of file
// -------------------- XPM --------------------
// Diverses fonctions permettant de dessiner la fonction mathématique à
// l'aide d'une image au format XPM
// Permet de calculer tous les points de l'image et de les placer dans un tableau.
// Chaque "case" du tableau est un point de l'image.
// Plus tard, chaque pixel de l'image correspondra a une case du tableau.
// Le pixel sera blanc si la "case" vaut 0 et sera noir si la "case" vaut 1
function evaluerXPM(eq){
tableauUni(0)
var y = 0
BoucleFor: for (x=0; x<largeur; x++){
y = Math.round(eval(eq))
if (y>hauteur-1){ break BoucleFor }
tableau[y][x] = 1
}
tableau.reverse()
graphique = ""
calculerGraphXPM()
}
// Permet de remplir le tableau avec uniquement des 1 ou des 0.
// (pour que l'image soit toute blanche ou toute noir)
function tableauUni(valeurCouleur){
for (i=0; i<hauteur; i++){
ligne = new Array()
for (k=0; k<largeur; k++){
ligne.push(valeurCouleur)
}
tableau[i] = ligne
}
graphique = ""
calculerGraphXPM()
}
// Cette fonction regarde chaque "case" du tableau.
// Elle permet de générer le texte ASCII de l'image XPM.
function calculerGraphXPM() {
graphique = graphique + '"'
for (i=0; i<largeur; i++){
switch (tableau[j][i]){
case 1:
graphique = graphique + ' '
break
default:
graphique = graphique + '.'
break
}
}
j++
graphique = graphique + '",'
if (j == hauteur){
afficherGraphXPM()
j = 0
return true
}
calculerGraphXPM()
}
// Cette fonction génére le code HTML nécessaire à afficher l'image XPM.
// Elle place ce code dans la div "affichage" ce qui permet d'afficher le graphique.
function afficherGraphXPM(){
image = "<img src='data:image/xpm;ASCII,"+'/* XPM */static char * test_xpm[] = {"'+largeur+' '+hauteur+' 2 1"," c #000000",". c #FFFFFF",' + graphique + "};'"+" />"
document.getElementById("affichage").innerHTML = image
}
\ No newline at end of file
This diff is collapsed.
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();
};
}
This diff is collapsed.
<?xml version="1.0" encoding="UTF-8"?>
<widget xmlns="http://www.w3.org/ns/widgets"
identifier="http://getuniboard.com/"
version="1.6.0"
width="800"
height="600"
ub:resizable="true">
<name>Mathematical function plotter</name>
<content src="Grapheur.html"/>
version="1.3"
width="675"
height="490"
ub:resizable="false">
<name>Traceur de fonctions mathématiques</name>
<content src="Grapheur.xhtml"/>
</widget>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>GraphMe - Version</title>
</head>
<body>
<span style="font-size:12px; text-align:center;">2.1.0 (2018-06-04)</span>
<span style="font-size:12px; text-align:center;">1.3.1 (2010/09/25)</span>
</body>
</html>
\ No newline at end of file
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment