new GraphMe widget (fixed)

resources/library/applications/GraphMe.wgt/JavaScript/AffichageSVG.svg

+<?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

resources/library/applications/GraphMe.wgt/JavaScript/AffichageUniboard.js

-// -------------------- 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);
 	}
+}
 

resources/library/applications/GraphMe.wgt/JavaScript/AffichageXPM.js

-// -------------------- 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

resources/library/applications/GraphMe.wgt/JavaScript/ImplicitFunction.js

+ 
+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();
+	};
+}

resources/library/applications/GraphMe.wgt/config.xml

 <?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>

resources/library/applications/GraphMe.wgt/version.html

 <!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>