Cómo agregar amarillo a un sitio web que muestra los datos de su proyecto

Es posible que esta pantalla de temperatura no destruya sus calcetines, pero es una demostración simple de cómo puede usar gráficos vectoriales como un navegador web para datos (traducido). [Luca] escribió este tutorial de cuatro páginas para ayudar a otros, hace que parezca muy fácil, y el cielo es el límite para los atractivos visuales una vez que aprendes lo básico.

El primer paso es crear el archivo SVG dinámico (gráficos vectoriales) utilizando Inkscape que será utilizado por la página web. Esto comienza con un fondo estacionario, en este caso las partes grises del termómetro que no cambiarán. Encima de la parte superior, se agregaron las partes azules, con solo un poco de edición de XML para darles a esas partes un gancho que se usará en el siguiente paso. La demostración anterior tendrá una barra azul en movimiento y una salida de número cambiante para que coincida con los datos provenientes de un sensor de temperatura.

Un archivo SVG es un archivo de solo texto que se muestra como un gráfico cuando se carga. [Luca] le muestra cómo usar los ID establecidos al crear el gráfico para cambiar dinámicamente el tamaño y el valor de las partes azules con PHP del lado del servidor antes de enviar el gráfico al navegador. Con eso en su lugar, solo necesita dar acceso al archivo PHP a los datos. Él le muestra cómo usar la API de Pachube, pero puede obtenerla fácilmente por serie o de otra manera.

  • Colecago dice:

    Muy genial. Hice algo similar con el módulo WiFly, tengo una página php, inícielo en mysql db, luego use PChart para graficar algunos valores de termistor.
    http://www.pchart.net/features-charting
    no es demasiado difícil de hacer, y ni siquiera sabía php antes de comenzar esto.

  • Doihn dice:

    Hay una versión en inglés en su sitio web, http://www.lucadentella.it/en/2012/01/22/dashboard-in-svg/ Google no lo traduce 🙂

  • Roel dice:

    ¡Buen artículo!

  • syale dice:

    No se puede acceder a la página: Bloqueado por mod_slotlimit. Puede haber más información disponible sobre este error en el registro de errores del servidor.

  • ScottInNH dice:

    hackdotted ... intente http://www.lucadentella.it.nyud.net/2012/01/22/dashboard-in-svg/

    Si encuentra la URL anterior en Google Chrome, el navegador le ofrecerá traducir la página por usted.

  • Lari dice:

    Si alguien está interesado en enviar y recibir datos de Arduino a través de un navegador, esto podría ayudar http://code.google.com/p/serwebproxy/. Es algo que he hecho para mi propio uso, está un poco hackeado, pero podría ser de gran ayuda. No se requiere servidor, javascript limpio es suficiente (use websocket). El proyecto necesita limpiezas y más ejemplos y si la gente los pide, con gusto los ayudaré.

  • Velifer dice:

    d3.js es muy agradable.

  • taylor alexander dice:

    Yo hice algo parecido hace un tiempo.

    Escribí una aplicación ac # que tomaría algunos datos por serie y usaría HTTP-POST (¿creo?) Para volcarlos en una base de datos en un servidor web.

    Luego escribí algunas cosas de ajax-y que actualizarían los datos cada 200 ms aproximadamente sin actualizar toda la página. ¡Fue muy divertido! Solo una experiencia de aprendizaje, nunca hice nada con eso. Pero los sitios web son divertidos.

  • luca dentella dice:

    ¡Hola!

    Gracias a todos ustedes, mi ISP me llamó por un ataque DDOS;) Lo siento, su IDS (sistema de detección de intrusos) está bloqueando cualquier conexión, ¡tenga paciencia que solucionarán el problema pronto!

    Si tienes alguna pregunta... y sí, mi blog está en italiano e inglés, así que probablemente hice una mejor traducción que Google;)

  • nep dice:

    Desafortunadamente, no puede ver el sitio, pero ¿cómo maneja los navegadores que no renderizan svg de forma nativa como IE?

    ¿Podría rasterizar el svg en el servidor con imagemagick tal vez?

  • ScottInNH dice:

    @nes -

    Punto importante: el autor está ejecutando un script PHP en un servidor web "real" (potencia normal). En ese escenario, PUEDE usar imagemagick... sería una opción.

    En un servidor de muy baja potencia (como uno que se ejecuta en Arduino), las bibliotecas de imágenes no son realmente posibles. debido a la falta de poder de procesamiento. Pero si su Arduino tuviera el espacio flash, podría generar el XML y el script para hacer la carga pesada en el lado del cliente.

    (No es que alguna vez ejecutaría un servidor web en un arduino ... es más inteligente usar el poder de procesamiento limitado que tiene para enviar los datos a Pachube, como lo hizo el autor).

    pero es posible que se quede con un proveedor de servidor web que no le permita usar imagemagic como la página web gratuita de su proveedor de Internet.

  • Sr. Dan dice:

    ¿Podrías simplemente usar CSS?

    Contiene 1 div con fondo azul dentro de otro con fondo blanco y borde negro.

    Cambie el tamaño del div interno para que coincida con el valor que necesita.

  • ScottInNH dice:

    Para un "gráfico" cuyo interior es cuadrado (como en este termómetro), estaría de acuerdo en que CSS es mucho menos código y probablemente más amigable entre navegadores.

    Dicho esto, si su gráfico / indicador fuera un tacómetro, un voltímetro o una burbuja en un fluido, entonces SVG sería la única forma (a menos que recurra al feo Flash).

  • luca dentella dice:

    ¡Hola!

    Con IE9, Microsoft ha agregado soporte nativo para archivos SVG:
    http://msdn.microsoft.com/library/gg589526(v=VS.85).aspx

    Para una versión anterior, puede probar uno de los complementos gratuitos disponibles.

    Como escribió Scott, SVG te permite crear medidores, voltímetros y todo tipo de dibujos, diagramas...

    Por supuesto, puede "presentar" archivos SVG con un script de servidor llamado ImageMagick o Batik en Java...

  • la colmena dice:

    ¿Alguna vez lo vi hace algún tiempo pero con HTML5 canvas y algo de javascript para una estación meteorológica conectada a Internet?
    Estación meteorológica > mysql. PHP> mysql> html5 + javascript.
    Hizo viles los termómetros, los indicadores y las escalas.
    Funcionó bastante bien.

  • la prisa dice:

    Aunque reconozco que los archivos svg son necesarios para gráficos de barras más complejos, y no es que sienta la necesidad de acomodar MSIE, no veo por qué el gráfico de barras del termómetro no se puede hacer con CSS puro. Tenga una imagen x por y que muestre el mercurio como azul (los degradados también funcionan) y extiéndala por css a una altura particular. Los números en el gráfico de barras también se pueden colocar con css.
    Se pueden combinar varios degradados (que van desde el azul hasta el amarillo y el rojo) de varias imágenes para mostrar un degradado no lineal usando css también. Prueba de principio aquí.

  • ppz dice:

    Hay una muy buena alternativa gratuita: biblioteca de diagramas Javascript HTML5

    Rgraph: http://www.rgraph.net

    Miguel

Isabella Ortiz
Isabella Ortiz

Deja una respuesta

Tu dirección de correo electrónico no será publicada.