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
Impresionante nax no me imagina que se pudiese desarrollar algo por el estilo.
hola este es un genial aporte
pero cuando ya tengo todo listo cuando doy click en el boton crear me sale esto
Fatal error: Call to undefined function imagecreate()
necesito saber como funciona completamente
atte franzky
franz_hola@hotmail.com
hola, me alegro que te guste el aporte.
El problema es que necesitas tener la libreria GD activa en tu localhost/servidor
Me ha sido muy útil tu aportación.
Pero intento darle el valor de la coordenada, en vez que con el textarea, con la suma del valor de varios radiobutton, pero no consigo hacerlo.
podrias plantear un code? y lo reviso?
no tengo el blog activo ya pero mirare que puedo hacer ;)