OpenBoard/resources/library/applications/GraphMe.wgt/JavaScript/Affichage.js

// Convertir une coordonnée sur le graphique en position relative à l'affichage (ou à l'écran si ecran = true)
function coordToPosX(x, ecran){
	if(ecran){
		return coordToPosX(x, false)+affichage.offsetLeft;
	}
	else{
		return (x - affichage.xGauche) * affichage.multX;
	}
}
function coordToPosY(y, ecran){
	if(ecran){
		return coordToPosY(y, false)+affichage.offsetTop;
	}
	else{
		return affichage.hauteur - (y - affichage.yBas) * affichage.multY;
	}
}

var affichage = {
	// Options
	id : "affichage",
	largeur : 640, // Set by init
	hauteur : 430, // Set by init
	couleurFond : "rgba(0,0,0,0)",
	
	// Bornes (zone d'affichage)
	xGauche : -5.5, // Set by init
	xDroite : 5.5, // Set by init
	yBas : -3.7,
	yHaut : 3.7,
	
	multX : 1,
	multY : 1,
	
	// Axes
	axes : true,
	couleurAxes : "rgba(0,0,0,0.5)",
	widthAxes : 2,
	// Grille
	grille : true,
	couleurGrille : "rgba(255,255,255,0.1)",
	widthGrille : 2,
	// Echelle
	echelle : true,
	couleurEchelle : "rgba(255,255,255,1)",
	
	// Précision
	precision : 100,
	precisionAmelioree : true, // false = fonction plus jolie lorsqu'on dé-zoom, true = affichage plus rapide lors du dé-zoom.
	
	// Méthode et style
	methode : "canvas",
	style : "continu",
	
	// Variable définies lors de l'initialisation
	canvas : null,
	ctx : null,
	object : null,
	offsetTop : null, // Position de l'affichage par rapport à la page
	offsetLeft : null,
	
	init : function(element, width, height){
		this.setBornes();
		
		// Supprimer le contenu de l'affichage
		if(!element){
			element = document.getElementById(this.id);
		}
		if(element.hasChildNodes()){
			while(element.childNodes.length >= 1 ){
				element.removeChild(element.firstChild);
			}
		}
		
		// Définir la taille
		this.largeur = width || element.clientWidth;
		this.hauteur = height || element.clientHeight;
		
		// Set left and right proportionally to width, height, top and bottom
		var centerX = this.xGauche + (this.xDroite - this.xGauche)/2;
		var centerY = this.yBas + (this.yHaut - this.yBas)/2;
		var dx = ((this.yHaut - this.yBas) / 2) * this.largeur / this.hauteur;
		this.xGauche = Math.round((centerX - dx)*100)/100;
		this.xDroite=  Math.round((centerX + dx)*100)/100;
		this.setBornes();
		
		// Récupérer la position
		var boundingClientRect = element.getBoundingClientRect();
		this.offsetTop = boundingClientRect.top;
		this.offsetLeft = boundingClientRect.left;

		// Sélectionner la méthode d'affichage
		if(this.methode == "svg"){
// 			this.object = document.createElement("embed");
// 			this.object.type = "image/svg+xml";
// 			this.object.src = "AffichageSVG.svg";
			this.object = document.getElementById("embedSVG");
			this.object.width = this.largeur;
			this.object.height = this.hauteur;
			this.object.style.top = this.offsetTop +1 +"px";
			this.object.style.left = this.offsetLeft +1 +"px";
			this.object.style.display = "block";
// 			element.appendChild(this.object);
			
// 			affichage.ctx = svg;
// 			affichage.dessiner();
// 			// Exécuter this.dessiner() maintenant ne va pas car svg n'est pas
// 			// encore défini dans cette fonction, il faut en lancer un nouvelle...
			setTimeout("affichage.ctx = svg", 50);
			setTimeout("affichage.dessiner()", 100);
		}
		else if(this.methode == "uniboard"){
			if(window.uniboard || window.sankore){
				try{
				initUniboard();
				this.ctx = uniboard;
				this.dessiner();
				}
				catch(err){
					alert(err.message);
				}
			}
			else{
				this.methode = "canvas";
				this.setOptions();
				this.init();
			}
		}
		else{
			document.getElementById("embedSVG").style.display = "none";
			
			this.canvas = document.createElement("canvas");
			this.canvas.width = this.largeur;
			this.canvas.height = this.hauteur;
			element.appendChild(this.canvas);
			
			this.ctx = this.canvas.getContext("2d");
			
			this.dessiner();
		}
		
		// Événements
		if(window.addEventListener){
			element = document.getElementById("eventAffichage");
			element.addEventListener('DOMMouseScroll', souris.wheel, false);
			element.onmousewheel = souris.wheel;
			element.oncontextmenu = ctxMenu.ouvrir;
		}
	},
	
	calculer : function(){
		this.getBornes();
		this.getOptions();
		if(fonction3D){
			display3D.draw()
		}
		else{
			this.dessiner();
		}
		saveOptions();
	},
	
	dessiner : function(){
		try{
// 			var ti = new Date().getTime();
			var precision;
			if(this.precisionAmelioree){
				precision = 10/this.precision;
			}
			else{
				precision = Math.abs(this.xDroite - this.xGauche)/this.precision;
			}
			this.multX = this.largeur/Math.abs(this.xDroite - this.xGauche);
			this.multY = this.hauteur/Math.abs(this.yHaut - this.yBas);
			
			var ctx = new Object();
			ctx = this.ctx;
			ctx.clearRect(0,0,this.largeur,this.hauteur);
			
			ctx.fillStyle = this.couleurFond;
			ctx.fillRect(0,0,this.largeur,this.hauteur);
			
			ctx.strokeOpacity = 1; // svg
			
			// Couleur pour l'aire sous la fonction
			ctx.fillStyle = "rgba(0,180,255,0.3)";
			
			// Fonctions
			for(var i=0; i<fct.list.length; i++){
				if(!fct.list[i]){
					continue;
				}
				fct.list[i].plot(ctx, precision, affichage);
			}
			
			ctx.strokeOpacity = 0.2; // svg
			
			// Grille et échelle
// 			var intervalX = Math.round(Math.abs(this.xGauche-this.xDroite)/10);
			var interval = Math.round(Math.abs(this.yBas-this.yHaut)/10);
			if(interval <= 0){
				interval = 1;
			}
// 			if(intervalY <= 0){
// 				intervalY = 1;
// 			}
			var initialX = Math.floor(-this.xGauche) % interval;
			var initialY = Math.floor(-this.yBas) % interval;
			ctx.beginPath();
			ctx.fillStyle = this.couleurEchelle;
			ctx.strokeStyle = this.couleurEchelle;
			ctx.lineWidth = this.widthGrille;
				if(this.methode == "uniboard"){
					ctx.lineWidth /= 2;
					ctx.fillStyle = "rgb(0,0,0)";
					ctx.strokeStyle = "rgb(100,100,100)";
				}
			for(var i=initialX; i<=Math.round(this.xDroite-this.xGauche); i=i+interval){
				var position = Math.round((Math.ceil(this.xGauche) - this.xGauche +i) * this.multX);
				if(this.grille){
					ctx.moveTo(position, 0);
					ctx.lineTo(position, this.hauteur);
				}

				if(this.echelle){
					ctx.fillText(Math.ceil(i+this.xGauche), position-6, (this.hauteur-(-this.yBas*this.multY))-2);
				}
			}
			for(var i=initialY;i<=Math.round(this.yHaut-this.yBas);i=i+interval){
				var position = this.hauteur - Math.round((Math.ceil(this.yBas) - this.yBas +i) * this.multY);
				if(this.grille){
					ctx.moveTo(0, position);
					ctx.lineTo(this.largeur, position);
				}

				if(this.echelle){
					ctx.fillText(Math.ceil(i+this.yBas), (-this.xGauche*this.multX)+2, position+6);
				}
			}
			ctx.strokeStyle = this.couleurGrille;
			ctx.stroke();
			
			ctx.strokeOpacity = 0.8; //svg
			
			// Axes
			if(this.axes){
				ctx.beginPath();
				ctx.strokeStyle = this.couleurAxes;
				ctx.lineWidth = this.widthAxes;
				if(this.methode == "uniboard"){
					ctx.lineWidth *= 2;
					ctx.strokeStyle = "rgb(0,0,0)";
				}
				ctx.moveTo(-this.xGauche*this.multX, 0)
				ctx.lineTo(-this.xGauche*this.multX, this.hauteur)

				ctx.moveTo(0, this.hauteur+this.yBas*this.multY)
				ctx.lineTo(this.largeur, this.hauteur+this.yBas*this.multY)
				ctx.stroke()
			}
			
			// Autres
			outil.dessinerListe();
// 			var tf = new Date().getTime();
// 			window.console.log(tf-ti);
		}
		catch(err){
			var message = err.message;
			afficherErreur(message);
		}
	},
	
	getBornes : function(){
		this.xGauche = parseFloat(document.getElementById("borneXGauche").value);
		this.xDroite = parseFloat(document.getElementById("borneXDroite").value);
		this.yBas = parseFloat(document.getElementById("borneYGauche").value);
		this.yHaut = parseFloat(document.getElementById("borneYDroite").value);
	},
	
	setBornes : function(){
		document.getElementById("borneXGauche").value = this.xGauche;
		document.getElementById("borneXDroite").value = this.xDroite;
		document.getElementById("borneYGauche").value = this.yBas;
		document.getElementById("borneYDroite").value = this.yHaut;
	},
	
	getOptions : function(){
		this.axes = document.getElementById("checkAxes").checked ? true : false;
		this.grille = document.getElementById("checkGrille").checked ? true : false;
		this.echelle = document.getElementById("checkEchelle").checked ? true : false;
		this.precision = document.getElementById("inputPrecision").value;
		this.precisionAmelioree = document.getElementById("checkPrecision").checked ? true : false;
		var methode = document.getElementById("selectMethodeAffichage").value;
		if(methode != this.methode){
			this.methode = methode;
			this.init();
		}
	},
	
	setOptions : function(){
		document.getElementById("selectMethodeAffichage").value = this.methode;
		document.getElementById("checkGrille").checked = this.grille;
		document.getElementById("checkAxes").checked = this.axes;
		document.getElementById("checkEchelle").checked = this.echelle;
		document.getElementById("inputPrecision").value = this.precision;
		document.getElementById("checkPrecision").checked = this.precisionAmelioree;
	},
	
	deplacerX : function(x){
		if(fonction3D){
			display3D.move(x);
			return;
		}
		this.xGauche += x;
		this.xDroite += x;
		this.dessiner();
		this.setBornes();
		saveOptions();
	},
	deplacerY : function(y){
		if(fonction3D){
			return;
		}
		this.yHaut += y;
		this.yBas += y;
		this.dessiner();
		this.setBornes();
		saveOptions();
	},
	centrer: function(){
		var valeurX = (this.xDroite-this.xGauche)/2;
		var valeurY = (this.yHaut-this.yBas)/2;
		this.initZoom(valeurX, valeurY);
	},
	initZoom : function(valeurX, valeurY){
		if(fonction3D){
			display3D.initZoom();
		}
		this.xGauche = -valeurX;
		this.xDroite = valeurX;
		this.yBas = -valeurY;
		this.yHaut = valeurY;
		this.setBornes();
		this.dessiner();
	},
	initZoom2 : function(valeur){
		var valeurY = parseFloat(valeur);
		var valeurX = valeurY * this.largeur / this.hauteur;
		this.initZoom(valeurX, valeurY);
	},
	zoom : function(facteur){
		if(fonction3D){
			return;
		}
		var diffBornes, ajouter;
		
		// Horizontal
		diffBornes = Math.abs(this.xDroite - this.xGauche);
		ajouter = Math.round(diffBornes * (facteur-1)*2)/4;
// 		log(diffBornes, ajouter, facteur)
		if(ajouter == 0){
			ajouter = 0.25;
// 			log("affichage.zoom -> x : ajouter = 0.5")
		}
		
		this.xGauche -= ajouter;
		this.xDroite += ajouter;
		
		// Vertical
		diffBornes = Math.abs(this.yHaut - this.yBas);
		ajouter = Math.round(diffBornes * (facteur-1)*2)/4;
		if(ajouter == 0){
			ajouter = 0.25;
// 			log("affichage.zoom -> y : ajouter = 0.5")
		}
		
		this.yBas -= ajouter;
		this.yHaut += ajouter;
		
		this.dessiner();
		this.setBornes();
		
		saveOptions();
	}
};