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.
// -------------------- sankore --------------------
// Ces fonctions permettent de dessiner le graphique directement dans sankore.
function colorToHex(color) {
var addZero = function(myString){
if (myString.length == 1) return "0" + myString;
else return myString;
}
var digits = /(.*?)rgb\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)/.exec(color);
if (digits == null){
digits = /(.*?)rgba\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)/.exec(color);
}
if(digits == null){
return "";
}
var red = parseInt(digits[2]);
var green = parseInt(digits[3]);
var blue = parseInt(digits[4]);
var hexcode = addZero(red.toString(16)) + addZero(green.toString(16)) + addZero(blue.toString(16));
return '#' + hexcode.toUpperCase();
}
// Calcule tous les points de la fonction mathématique et les place dans des tableaux.
function evaluerUniboard(eq) {
largeur += 100
hauteur += 100
decalageX -= 250
decalageY -= 200
borneXGauche = parseFloat(document.getElementById("borneXGauche").value)
borneXDroite = parseFloat(document.getElementById("borneXDroite").value)
borneYGauche = parseFloat(document.getElementById("borneYGauche").value)
borneYDroite = parseFloat(document.getElementById("borneYDroite").value)
multiplicateurX = (largeur)/Math.abs(borneXDroite - borneXGauche)
multiplicateurY = (hauteur)/Math.abs(borneYDroite - borneYGauche)
lineWidth = document.getElementById("inputTaille").value
var i = 0
function initUniboard(){
if(!window.uniboard && window.sankore){
uniboard = sankore;
}
uniboard.centerOn(337,245);
// uniboard.setTool("pen");
// Paramètres par défaut
uniboard.lineWidth = 1;
uniboard.fillStyle = "black";
uniboard.strokeStyle = "black";
// Position du curseur pour écrire des nombres
uniboard.cursorX = 0;
uniboard.cursorY = 0;
// Fonctions
uniboard.strokeColor = function(){
this.setPenColor(colorToHex(this.strokeStyle));
};
uniboard.fillColor = function(){
this.setPenColor(colorToHex(this.fillStyle));
};
uniboard.lineTo = function(x, y){
if(y>-20 && y<affichage.hauteur+20){
this.strokeColor();
this.drawLineTo(x, y, this.lineWidth/2);
}
};
uniboard.arc = function(x, y, r){
this.fillColor();
this.moveTo(x, y);
this.drawLineTo(x, y, r*2);
};
uniboard.clearRect = function(x, y, width, height){
if(height<0){
height = Math.abs(height);
y -= height;
}
if(width<0){
width = Math.abs(width);
x -= width;
}
this.moveTo(x, y)
this.eraseLineTo(x+width, y+height, this.lineWidth);
};
uniboard.fillRect = function(x, y, width, height){
this.fillColor();
if(height<0){
height = Math.abs(height);
y -= height;
}
if(width<0){
width = Math.abs(width);
x -= width;
}
this.moveTo(x, y)
this.drawLineTo(x+width, y+height, this.lineWidth);
};
uniboard.fillText = function(txt, x, y){
// TODO
this.fillNumber(txt, x, y);
};
uniboard.beginPath = function(){
this.moveTo(0, 0);
};
uniboard.fill = function(){};
uniboard.stroke = function(){};
uniboard.fillNumber = function(nbr, x, y){
var w = 5;
var number = "" + nbr;
if(!x || !y){
x = this.cursorX;
y = this.cursorY;
}
else{
x += 3;
y -= 12;
}
this.moveTo(x, y);
this.fillColor();
var move = function(){
uniboard.moveTo(x, y);
};
var draw = function(){
uniboard.drawLineTo(x, y, uniboard.lineWidth)
};
var space = function(){
x += 2*w/3;
move();
};
for(var i=0; i<number.length; i++){
switch(number.charAt(i)){
case "1":
y += w
move()
x += w
y -= w
draw()
y += 2*w
draw()
y -= 2*w
space()
break;
case "2":
x += w
draw()
y += w
draw()
x -= w
draw()
y += w
draw()
x += w
draw()
y -= 2*w
space()
break;
case "3":
x += w
draw()
y += w
draw()
x -= w
draw()
x += w
move()
y += w
draw()
x -= w
draw()
y -= 2*w
x += w
space()
break;
case "4":
y += w
draw()
x += w
draw()
y -= w
draw()
y += w
move()
y += w
draw()
y -= 2*w
space()
break;
case "5":
x += w
move()
x -= w
draw()
y += w
draw()
x += w
draw()
y += w
draw()
x -= w
draw()
x += w
y -= 2*w
space()
break;
case "6":
x += w
move()
x -= w
draw()
y += w
draw()
x += w
draw()
y += w
draw()
x -= w
draw()
y -= w
draw()
x += w
y -= w
space()
break;
case "7":
x += w
draw()
x -= w/2
y += 2*w
draw()
x += w/2
y -= 2*w
space()
break;
case "8":
x += w
draw()
y += 2*w
draw()
x -= w
draw()
y -= 2*w
draw()
y += w
move()
x += w
draw()
y -= w
move()
space()
break;
case "9":
x += w
move()
x -= w
draw()
y += w
draw()
x += w
draw()
y += w
draw()
x -= w
draw()
y -= w
x += w
move()
y -= w
draw()
space()
break;
case "0":
x += w
draw()
y += 2*w
draw()
x -= w
draw()
y -= 2*w
draw()
x += w
move()
space()
break;
case "-":
y += w
move()
x += w
draw()
y -= w
move()
space()
break;
default: // Nombre inconnu
// this.showMessage("Error : "+number.charAt(i)+" isn't a number");
}
}
this.cursorX = x;
this.cursorY = y;
// this.showMessage(number);
BoucleFor: for(x=borneXGauche; x<=(borneXDroite+0); x=x+precision){
i++
y = eval(eq)
pointX[i] = Math.round((x - borneXGauche) * multiplicateurX)
pointY[i] = hauteur - Math.round((y - borneYGauche) * multiplicateurY)
}
calculerGraphUniboard(i)
}
}
// Regarde chaque coordonnées stockées dans le tableau et dessine le graphique
function calculerGraphUniboard(fin){
document.getElementById("affichage").innerHTML = ""
sankore.setTool('pen')
sankore.moveTo(pointX[2]+decalageX, pointY[2]+decalageY)
for (i=3; i<fin; i++){
if ((pointY[i]<0) || (pointY[i]>hauteur)){
sankore.moveTo(pointX[i+1]+decalageX,pointY[i+1]+decalageY)
continue
}
sankore.drawLineTo(pointX[i]+decalageX, pointY[i]+decalageY, lineWidth)
}
//dessiner le cadre
sankore.moveTo(0+decalageX,0+decalageY)
sankore.drawLineTo(largeur+decalageX, 0+decalageY, lineWidth)
sankore.drawLineTo(largeur+decalageX, hauteur+decalageY, lineWidth)
sankore.drawLineTo(0+decalageX, hauteur+decalageY, lineWidth)
sankore.drawLineTo(0+decalageX, 0+decalageY, lineWidth)
//dessiner les axes
sankore.moveTo((-borneXGauche*multiplicateurX)+decalageX, 0+decalageY)
sankore.drawLineTo((-borneXGauche*multiplicateurX)+decalageX, hauteur+decalageY, lineWidth)
sankore.moveTo(0+decalageX, (hauteur-(-borneYGauche*multiplicateurY))+decalageY)
sankore.drawLineTo(largeur+decalageX, (hauteur-(-borneYGauche*multiplicateurY))+decalageY, lineWidth)
decalageX += 250
decalageY += 200
largeur -= 100
hauteur -= 100
sankore.setTool('arrow')
}
\ No newline at end of file
// -------------------- XPM --------------------
// Diverses fonctions permettant de dessiner la fonction mathématique à
// l'aide d'une image au format XPM
// Permet de calculer tous les points de l'image et de les placer dans un tableau.
// Chaque "case" du tableau est un point de l'image.
// Plus tard, chaque pixel de l'image correspondra a une case du tableau.
// Le pixel sera blanc si la "case" vaut 0 et sera noir si la "case" vaut 1
function evaluerXPM(eq){
tableauUni(0)
var y = 0
BoucleFor: for (x=0; x<largeur; x++){
y = Math.round(eval(eq))
if (y>hauteur-1){ break BoucleFor }
tableau[y][x] = 1
}
tableau.reverse()
graphique = ""
calculerGraphXPM()
}
// Permet de remplir le tableau avec uniquement des 1 ou des 0.
// (pour que l'image soit toute blanche ou toute noir)
function tableauUni(valeurCouleur){
for (i=0; i<hauteur; i++){
ligne = new Array()
for (k=0; k<largeur; k++){
ligne.push(valeurCouleur)
}
tableau[i] = ligne
}
graphique = ""
calculerGraphXPM()
}
// Cette fonction regarde chaque "case" du tableau.
// Elle permet de générer le texte ASCII de l'image XPM.
function calculerGraphXPM() {
graphique = graphique + '"'
for (i=0; i<largeur; i++){
switch (tableau[j][i]){
case 1:
graphique = graphique + ' '
break
default:
graphique = graphique + '.'
break
}
}
j++
graphique = graphique + '",'
if (j == hauteur){
afficherGraphXPM()
j = 0
return true
}
calculerGraphXPM()
}
// Cette fonction génére le code HTML nécessaire à afficher l'image XPM.
// Elle place ce code dans la div "affichage" ce qui permet d'afficher le graphique.
function afficherGraphXPM(){
image = "<img src='data:image/xpm;ASCII,"+'/* XPM */static char * test_xpm[] = {"'+largeur+' '+hauteur+' 2 1"," c #000000",". c #FFFFFF",' + graphique + "};'"+" />"
document.getElementById("affichage").innerHTML = image
}
\ No newline at end of file
This diff is collapsed.
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"/>
identifier="http://getuniboard.com/"
version="1.3"
width="675"
height="490"
ub:resizable="false">
<name>Traceur de fonctions mathématiques</name>
<content src="Grapheur.xhtml"/>
</widget>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>GraphMe - Version</title>
</head>
<body>
<span style="font-size:12px; text-align:center;">2.1.0 (2018-06-04)</span>
<span style="font-size:12px; text-align:center;">1.3.1 (2010/09/25)</span>
</body>
</html>
</html>
\ No newline at end of file
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