Programación WEB: CGI, JS, HTML, comunicarlos entre e ellos, alternativas...

[3L_S4N70]

Hola gente, os vengo a plantear otra duda: ¿es posible cargar imágenes en una web en relación a lo que te dice un cgi? Tengo un cgi que recibe información de lo que ve el robot (que tiene dos sensores que le sirven para ver si lleva debajo una línea negra o no) y ahora mismo tengo puesto que me dé una salida tal que así (si por ejemplo ve algo en el lado derecho):
_|__|_o_|_

La idea sería eso mismo, pero en lugar de ascii art (llamar q esto ascii art es ser pretencioso, ¿verdad? Jaja); que sea alternando entre dos imágenes, una que sea un cuadro negro, y otra un cuadro blanco. El cgi lo llamo con el Ajax.PeriodicalUpdater que me sugeristéis, con una frecuencia de 10 milisegundos (lo soporta de lujo, yo que pensé que bajar mucho de un segundo lo mataría), y con "get".

Pues eso, a ver si alguien me hace ver un poco la luz, o al menos me guía hacia dónde ir.

Gracias de antemano

[xzakox]

Pues si, con javascript es bastante sencillo.
Defines un <div id="imagen_cambiante"> donde iria la imagen y nada, luego en ajax recibirias ese texto como dices con el periodical updater, pues lo analizarias para ver que imagen mostrar y luego solo tendrias que hacer algo asi:

if (condicion de la imagen1) {
document.getElementById("imagen_cambiante").innerH TML = "<img src="imagen1.png">";
} else {
document.getElementById("imagen_cambiante").innerH TML = "<img src="imagen2.png">";
}

Algo asi.

[3L_S4N70]

Gracias xzakox, parece sencillo, luego lo pruebo y si acaso te vuelvo a consultar.

Un saludo

[Gammenon]

Tira de AJAX, que es javascript. Esto se ejecutara en el navegador, y periodicamente tendra que consultar si hay datos nuevos en el servidor. En el servidor con un fichero php podras crear el xml o lo que sea que trague el AJAX y mostrarlo en pantalla. El chat de gmail por ejemplo lo hace asi.

Puedes usar jQuery, una libreria de javascript, que te facilitara este tema.

[3L_S4N70]

Gracias Gammenon, le echaré un vistazp al jQuery, aunque la verdad, como lo que necesito es bastante sencillo y poca cosa, tiraré a pelo.

Respecto al PHP, el servidor no tiene espacio sufieciente para meterselo (es una Fonera, un router con muy poquita flash) y como la idea es mantener sencillez y costes bajos, debo prescindir de ponerle un lector de tarjetas de memoria, que sí que me daría el espacio suficiente, y más.

Lo dicho, gracias

[Gammenon]

Si tan limitado estas, mejor que pases del navegador y te montas un programilla (incluso en consola) que se comunique mediante sockets con el servidor. Si son pocos datos y no hace falta mucha sofisticacion, no necesitas mas

[3L_S4N70]

Ya, en consola está tirado, me conecto por SSH, o si no, desde cualquier máquina que tenga las librerías necesarias para programar clientes para el programa en concreto que corre el servidor. El tema está en que quería dar más facilidad de manejo, haciendo prescindible todo salvo un navegador, de ahí que vaya así. Estoy limitado para instalarme cosas como el soporte PHP (no cabe, ya lo probé), pero alguna imagencilla sí que me cabe. De momento como digo ya tengo un servidor web escupiendo carácteres ascii, pero quería algo más visible.

Bueno, luego, cuando pueda probarlo, os informo. No obstante, cualquier otra sugerencia la podéis seguir dejando aquí.

Un saludo famigos.

[3L_S4N70]

Pues si, con javascript es bastante sencillo.
Defines un <div id="imagen_cambiante"> donde iria la imagen y nada, luego en ajax recibirias ese texto como dices con el periodical updater, pues lo analizarias para ver que imagen mostrar y luego solo tendrias que hacer algo asi:

if (condicion de la imagen1) {
document.getElementById("imagen_cambiante").innerH TML = "<img src="imagen1.png">";
} else {
document.getElementById("imagen_cambiante").innerH TML = "<img src="imagen2.png">";
}

Algo asi.

Tengo un problema, ¿cómo defino lo que se actualiza con periodicalupdater, para que la condición lo cace?
Si lo defino como var, sin inicializar, y lo veo con alert, me dice que vale undefined. Si le doy un valor (al hacer var), por ejemplo, el que quiero que evalúe en la condición, siempre vale eso, y la condición siempre se cumple.

Tengo algo así:

imagen: <div id="imagen_cambiante"></div>

<script type="text/javascript">
var caca;
new Ajax.PeriodicalUpdater('caca', '/cgi_bin/fifos.cgi', {
method: 'get', frequency: 0.01, decay: 1,
evalScripts: true,
}):

alert(caca);

if (caca == "_|_o_|_o_|_") {
document.getElementById("imagen_cambiante").innerH TML = "<img src="ghost1.png">";
} else {
document.getElementById("imagen_cambiante").innerH TML = "<img src="ghost.png">";
}
</script>

He hecho pruebas mil, pero creo que sencillamente no sé definir la variable a evaluar en la condición para que la actualice periodicalupdater.

Mil gracias de antemano

[Gammenon]

Aqui

new Ajax.PeriodicalUpdater('caca', '/cgi_bin/fifos.cgi', {
method: 'get', frequency: 0.01, decay: 1,
evalScripts: true,
}):

Para empezar cambia ":" por ";"

Con Ajax.PeriodicalUpdater actualizas un container, osea un elemento HTML como puede ser un div, no una variable javascript. Prueba a cambiar 'caca' por 'imagen_cambiante' en la llamada a Ajax.PeriodicalUpdater

[3L_S4N70]

Para empezar cambia ":" por ";"

No te fíes, lo he transcrito del portátil al sobremesa, y me he colado

Con Ajax.PeriodicalUpdater actualizas un container, osea un elemento HTML como puede ser un div, no una variable javascript. Prueba a cambiar 'caca' por 'imagen_cambiante' en la llamada a Ajax.PeriodicalUpdater

El tema está en que imagen cambiante es un png, no un texto, no creo que pueda hacer eso. Pero en esa línea, ¿no hay algún elemento, que no sea visible, en HTML, al que poder asignarle el cambio?

¿El if está bien colocado ahí?

Un saludo y mil gracias

[Gammenon]

Si es cambiar un tag <img> cada cierto tiempo, quizas no necesites ajax y con ir cambiando el atributo "src" del tag te sirva. Usa setInterval() para llamar a una funcion cada tantos milisegundos y dentro de esta funcion cambia el tag src del img. Algo asi:

function updateImg()
{
var img = document.getElementById('dynamicImg');
img.src = '[aqui va la url]';
}

En alguna parte:

setInterval(updateImg, 100); // Cada 100 milisegundos se llamara a updateImg()

Y en otra parte del html:

<img id='dynamicImg' />

No se si funcionara porque igual la cache del navegador hara que no se cargue el nuevo src. Si te pasa esto prueba a fijar antes el src = '', y si esto no te va quizas tengas que destruir y crear el <img> sobre la marcha, que no es dificil. Tambien puedes probar a desactivar la cache del navegador

[3L_S4N70]

Si es cambiar un tag <img> cada cierto tiempo, quizas no necesites ajax y con ir cambiando el atributo "src" del tag te sirva. Usa setInterval() para llamar a una funcion cada tantos milisegundos y dentro de esta funcion cambia el tag src del img. Algo asi:

No se si funcionara porque igual la cache del navegador hara que no se cargue el nuevo src. Si te pasa esto prueba a fijar antes el src = '', y si esto no te va quizas tengas que destruir y crear el <img> sobre la marcha, que no es dificil. Tambien puedes probar a desactivar la cache del navegador

Muchas gracias por el ejemplo, pero no me vale, porque yo requiero cambiarlo en función del valor devuelto al llamar a un CGI.
Además, para el tema de la caché, pereferiría que cualquier movida la hiciese el servidor (o la web tal cual), sin requerir que el cliente desde el navegador haga nada más allá de llamar a la página.

Estoy con lo siguiente, pero creo que no tiene ningún sentido, o sí, no soy muy ducho en el tema:

imagen: <div id="imagen_cambiante"></div>
<var id="variable"></var>

<script type="text/javascript">
document.getElementById('variable').style.visibili ty='hidden';

new Ajax.PeriodicalUpdater('variable', '/cgi_bin/fifos.cgi', {
method: 'get', frequency: 0.01, decay: 1,
evalScripts: true,
});

if (variable == "_|_o_|_o_|_") {
document.getElementById("imagen_cambiante").innerH TML = "<img src="ghost1.png">";
} else {
document.getElementById("imagen_cambiante").innerH TML = "<img src="ghost.png">";
}
</script>

¿Cómo puedo hacerlo? Es que la verdad, estoy bloqueado.

[Gammenon]

Lo del cache seria una opcion del navegador

Que es eso de <var>? Eso no existe en html, hasta donde yo se :-|

Prototype debe tener otra manera de llamar a ajax de forma que te devuelva un string que puedas tratar en javascript, y en funcion de ello cargar una imagen u otra.

[^MiSaTo^]

Muchas gracias por el ejemplo, pero no me vale, porque yo requiero cambiarlo en función del valor devuelto al llamar a un CGI.
Además, para el tema de la caché, pereferiría que cualquier movida la hiciese el servidor (o la web tal cual), sin requerir que el cliente desde el navegador haga nada más allá de llamar a la página.

Estoy con lo siguiente, pero creo que no tiene ningún sentido, o sí, no soy muy ducho en el tema:





¿Cómo puedo hacerlo? Es que la verdad, estoy bloqueado.

Perdona que me meta pero por lo que acabo de leer sobre esa función de PeriodicalUpdater lo que hace es actualizar un div con lo que devuelve al script al que llamas. Bueno en ese caso a lo mejor puedes hacer que el cgi devuelva directamente el código HTML.
Yo esque lo que haría es, si usas JQuery por ejemplo, hacer la llamada AJAX y en el callback comprobar el valor de esa variable qe te devuelve el CGI y cambiar la imagen en consecuencia.
Pero por lo que leo sobre la función que usas tú ahora mismo, creo que es más rebuscado ya que actualiza un div. (corregidme si me equivoco porque no he usado prototype más que para 2 cosas)

EDIT: que digo yo que por qué usas prototype cuando puedes hacer una llamada normal de ajax y con el setInterval ponerle cada cuanto quieres que se llame. Después ya puedes tocar lo que sea con lo que te devuelva esa llamada

[3L_S4N70]

Lo del cache seria una opcion del navegador

Que es eso de <var>? Eso no existe en html, hasta donde yo se :-|

Prototype debe tener otra manera de llamar a ajax de forma que te devuelva un string que puedas tratar en javascript, y en funcion de ello cargar una imagen u otra.

No sé, lo de var lo he sacado de aquí: http://www.htmlquick.com/es/reference/tags.html

Perdona que me meta pero por lo que acabo de leer sobre esa función de PeriodicalUpdater lo que hace es actualizar un div con lo que devuelve al script al que llamas. Bueno en ese caso a lo mejor puedes hacer que el cgi devuelva directamente el código HTML.
Yo esque lo que haría es, si usas JQuery por ejemplo, hacer la llamada AJAX y en el callback comprobar el valor de esa variable qe te devuelve el CGI y cambiar la imagen en consecuencia.
Pero por lo que leo sobre la función que usas tú ahora mismo, creo que es más rebuscado ya que actualiza un div. (corregidme si me equivoco porque no he usado prototype más que para 2 cosas)

Voy a mirarme otra vez eso del jQuery, a ver si saco algo en claro. La verdad, lo que yo haga puede ser rebuscado, porque estoy aprendiendo de esto sobre la marcha, e intento aplicar las cosillas que voy viendo, pero que pueden no ser la mejor opción (hasta el punto de que pueden no ser solución sino fuente de más problemas, como me da a mi que es lo que estoy intentando hacer).

Un ejemplillo para saber por donde tirar te lo agradecería infinito.