El script nace con la idea de crear una representación de rectas según una equación tipo:
y = 5x+2
La idea era generar dinámicamente una gráfica donde se representara dicha recta y se calcularan diversos valores como su pendiente y una tabla de valores.
También incluía un sistema ajax con un panel bastante completo para representar puntos, rectas y vectores y poder trabajar con los mismos en tiempo real, es decir, cada ves que se modifica un valor la imagen se actualiza.
El problema surge cuando me entero que js no puede convertir el binario de mi php a una imagen.. ahí se arruina la idea, al menos de momento.
Ideo una segunda forma, guardar el .png y cargarlo en el mismo script y devolver el string listo para insertar en el html. Perfecto! se carga la imagen sin problemas, pero no se actualiza al enviar las coordenadas... así que el sistema ajax a la porra hasta que encuentre un método eficaz para actualizar la imagen...
Así que de momento el script se queda en un simple sistema de coordenadas al cual hay que hacer un 'refresh' cada vez que se quiere modificar la imagen, eso si, la primera ves la carga con ajax o.O"
El script:
- Geometria.html:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Graficas by Nax</title>
<script language="javascript" src="ajax.js"></script>
</head>
<body>
<div id="opciones">
<b>Puntos:</b><br />
Inserta los puntos (0,0):<br />
<textarea name="puntos" id="puntos" cols="10" rows="5">0,0</textarea><br /><br />
<input type="button" id="enviar" value="Crear" />
</div>
<br />
<br />
<div id="grafica">Aqui va la grafica</div>
</body>
</html>
- ajax.js
addEvent(window,'load',cargar,false);
function cargar() {
var but = document.getElementById('enviar');
addEvent(but, 'click', creargrafica,false);
}
function enviarcomentario(e) {
if(window.event)
window.event.returnValue = false;
else
if (e)
e.preventDefault();
enviarFormulario();
}
var conexion;
function creargrafica() {
var points = document.getElementById('puntos');
var ran = Math.random();
conexion=crearXMLHttpRequest();
conexion.onreadystatechange = procesarEventos;
conexion.open('GET','grafica.php?points=' + encodeURIComponent(points.value) + '&'+ ran + '=' + ran, true);
conexion.send();
}
function procesarEventos() {
var graf = document.getElementById('grafica');
if (conexion.readyState == 4) {
graf.innerHTML = conexion.responseText;
} else{
graf.innerHTML = "wait";
}
}
//Funciones comunes de ajax
function addEvent(elemento,nomevento,funcion,captura)
{
if (elemento.attachEvent)
{
elemento.attachEvent('on'+nomevento,funcion);
return true;
}
else
if (elemento.addEventListener)
{
elemento.addEventListener(nomevento,funcion,captura);
return true;
}
else
return false;
}
function crearXMLHttpRequest()
{
var xmlHttp=null;
if (window.ActiveXObject)
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
else
if (window.XMLHttpRequest)
xmlHttp = new XMLHttpRequest();
return xmlHttp;
}
- grafica.php
<?php
@unlink('test.png');
$points = explode(' ',preg_replace('/rn|r|n/',' ',$_GET['points']));
$y = 400; $y0 = $y / 2; //coordenadas 0,0
$x = 500; $x0 = $x / 2;
$cm = 10; //1 cm = 10 px
//basic
$img = imagecreate($x,$y);
$background = imagecolorallocate($img, 0, 0 , 0);
$color = imagecolorallocate($img, 255, 255, 255);
$green = imagecolorallocate($img, 50, 255, 0);
$red = imagecolorallocate($img, 255, 50, 0);
imagestring($img, 2, 10 ,$y-50, "http://nax-syntaxerror.blogspot.com/", $red);
//ejes basicos
imageline($img, $x0, 0, $x0, $y, $color);
imageline($img, 0, $y0, $x, $y0, $color);
// Lineas de X
for ($i = 0; $i <= $x; $i +=10)
imageline($img, 0+$i,$y0+5,0+$i, $y0-5, $color);
//Lineas de Y
for ($i = 0; $i <= $y; $i += 10)
imageline($img, $x0+5, 0+$i, $x0-5, 0+$i, $color);
//puntos
foreach ($points as $key => $value) {
$ejes = explode(',', $value);
$ejes[0] = $ejes[0] * $cm; $ejes[1] = $ejes[1] * $cm;
imageline($img, $x0+$ejes[0], $y0+(-$ejes[1]), $x0+$ejes[0], $y0+(-$ejes[1])+3, $green);
}
imagepng($img,"test.png");
echo '<img src="test.png" />';
imagedestroy($img);
?>
Cualquier duda o aporte es bien recibido
nax
