Componentes de páginas web SVG para IoT y creadores (Parte 1)

 

 

 

  • Design System Planning and Process, with Nathan Curtis
  • SmashingConf Freiburg 2024

  • Índice
    1. IoT y el rápido crecimiento de las páginas web
    2. Arquitectura de alto nivel para una aplicación web de IoT
    3. Elegir SVG para paneles
    4. Paneles de construcción a partir de componentes VUE
      1. Selección grupal de paneles relacionados

    IoT está creciendo para incluir muchos dispositivos con muchos propietarios. Los desarrolladores web se enfrentarán al problema de encontrar formas de permitir a los propietarios interactuar con sus dispositivos. Pero este problema da lugar a una gran cantidad de negocios. Exploremos algunos aspectos del desarrollo de páginas web para Internet de las cosas (IoT) que ya tienen demanda.

     

    El mercado de IoT aún se encuentra en sus primeras etapas, pero está ganando fuerza. Estamos en una cúspide en la historia del IoT. Los mercados se están cuadriplicando en el transcurso de cinco años, de 2015 a 2020. Para los desarrolladores web, este crecimiento de IoT es significativo. Ya existe una gran demanda de técnicas web de IoT.

    Muchos dispositivos estarán distribuidos geoespacialmente y sus propietarios desearán control y gestión remotos. Se deben crear pilas web completas para crear canales para la teleoperación. Además, la interacción será con uno o más dispositivos IoT a la vez. La interacción debe ser en el tiempo real del mundo físico.

    Esta discusión profundiza en los requisitos de la interfaz que utiliza Vue.js como catalizador e ilustra un método de comunicación entre una página web y un dispositivo entre muchas sustituciones.

    Éstos son algunos de los objetivos previstos para este debate:

    1. Crear una aplicación web SPWA de una sola página que aloje grupos de interfaces hombre-máquina de IoT (podemos llamarlos "grupos de paneles");
    2. Mostrar listas de identificadores de grupos de paneles como resultado de consultar un servidor;
    3. Mostrar los paneles de un grupo seleccionado como resultado de una consulta;
    4. Asegúrese de que la pantalla del panel se cargue de forma lenta y se anime rápidamente;
    5. Asegúrese de que los paneles se sincronicen con los dispositivos IoT.

    IoT y el rápido crecimiento de las páginas web

    La presentación de gráficos para visualización y control remoto de hardware junto con la sincronización de páginas web con procesos físicos en tiempo real están dentro del ámbito de la resolución de problemas de páginas web inherentes a este futuro de IoT.

    Muchos de nosotros estamos comenzando nuestra búsqueda de técnicas de presentación de IoT, pero existen algunos estándares web junto con algunas técnicas de presentación que podemos comenzar a usar ahora. A medida que exploremos juntos estos estándares y técnicas, podremos unirnos a esta ola de IoT.

    Hay demanda de paneles de control y visualización de datos. Además, la demanda de ir más allá de las páginas web que proporcionan formularios o listas de visualización o contenido textual es alta. Los paneles de IoT deben ser pictográficos y animados. Las animaciones deben sincronizarse con procesos físicos en tiempo real para proporcionar una visión verídica del estado de la máquina a los usuarios. El estado de la máquina, como si la llama está encendida o no, prevalece sobre el estado de la aplicación y proporciona información crítica a los operadores, tal vez incluso información de seguridad.

    Los paneles de control requieren más que la visualización de datos. Tenemos que tener en cuenta que lo que forma parte de IoT son dispositivos que no solo tienen sensores sino también interfaces de control. En las implementaciones de hardware, las MCU se amplían con interruptores, interruptores de umbral, configuraciones de parámetros y más. Aún así, las páginas web pueden reemplazar esos componentes de control de hardware .

    Nada nuevo. Las interfaces informáticas para hardware existen desde hace mucho tiempo, pero el rápido crecimiento del uso de páginas web para estas interfaces es parte de nuestra experiencia actual. WebRTC y Speech API están en un camino de desarrollo que comenzó en 2012. WebSockets se ha estado desarrollando en un período de tiempo similar.

    IoT lleva mucho tiempo en nuestra mente. IoT ha sido parte del diálogo humano desde 1832. Pero, IoT y lo inalámbrico tal como lo conocemos fueron concebidos por Tesla alrededor de 1926. Forbes 2018 State of IoT nos dice el enfoque actual del mercado para IoT. De interés para los desarrolladores web, el artículo menciona los paneles:

    "Los primeros usuarios o defensores de IoT dan prioridad a los paneles de control, los informes y los casos de uso de IoT que proporcionan flujos de datos integrales para el análisis, la visualización avanzada y la extracción de datos".

    El mercado de IoT es enorme. Este artículo sobre el tamaño del mercado ofrece una predicción del número de dispositivos que aparecerán: 2018: 23,14 mil millones ⇒ 2025: 75,44 mil millones. E intenta ponerle una cifra financiera: 2014: $2,99 billones ⇒ 2020: $8,90 billones. La demanda de habilidades de IoT será la de más rápido crecimiento: IoT in Demand .

    A medida que desarrollamos interfaces claras para controlar y monitorear dispositivos, nos encontramos con un nuevo problema para desarrollar nuestras interfaces. Todos los miles de millones de dispositivos serán propiedad de muchas personas (u organizaciones). Además, cada persona puede poseer cualquier número de dispositivos. Quizás incluso algunos de los dispositivos sean compartidos.

     

    Las interfaces modernas que se han creado para controles de máquinas a menudo tienen un diseño bien definido y específico para una máquina en particular o para la instalación de algunas máquinas. Por ejemplo, en una casa inteligente, un sistema de alta gama tendrá una pantalla LCD con paneles para dispositivos colocados cuidadosamente. Pero, a medida que crezcamos con la versión web de IoT, habrá cualquier cantidad de paneles para un flujo dinámico e incluso móvil de dispositivos.

    La gestión de paneles para dispositivos se vuelve similar a la gestión de conexiones sociales en sitios web sociales.

    "Nuestras interfaces de usuario tendrán que ser dinámicas a la hora de gestionar qué panel altamente animado en tiempo real debe mostrarse en cualquier momento para cada usuario en particular".

    El panel es una aplicación web SPWA de una sola página. Y podemos imaginar una base de datos de paneles. Entonces, si un solo usuario va a acceder a varios paneles y configuraciones para sus dispositivos repartidos por el planeta, el SPWA necesita acceder a los componentes del panel a pedido. Los paneles y parte del JavaScript de soporte tendrán que cargarse lentamente.

    "Nuestras interfaces tendrán que funcionar con marcos de páginas web que puedan permitir incorporar enlaces de componentes asincrónicos sin reinicializar sus marcos".

    Utilicemos Vue.js, WebSockets, MQTT y SVG para dar el paso hacia el mercado de IoT.

    Lectura recomendada : Creación de una infografía interactiva con Vue.js

    Arquitectura de alto nivel para una aplicación web de IoT

    Al diseñar la interfaz para una página web de IoT, siempre hay muchas opciones. Una opción podría ser dedicar una sola página a un solo dispositivo. La página podría incluso representarse en el lado del servidor. El servidor tendría la tarea de consultar al dispositivo para obtener los valores de sus sensores y luego colocar los valores en los lugares apropiados de la cadena HTML.

    Muchos de nosotros estamos familiarizados con herramientas que permiten escribir plantillas HTML con marcadores especiales que indican dónde colocar los valores de las variables. Ver {{temperature}}en dicha plantilla nos indica a nosotros y al motor de visualización que tomemos la temperatura consultada desde un dispositivo y reemplacemos el {{temperature}}símbolo con ella. Entonces, después de esperar a que el servidor consulte el dispositivo, el dispositivo responda, muestre la página y la entregue, el usuario finalmente podrá ver la temperatura informada por el dispositivo.

    Para esta página por arquitectura de dispositivo, es posible que el usuario desee enviar un comando al dispositivo. No hay problema, puede completar un formulario HTML y enviarlo. El servidor podría incluso tener una ruta solo para el dispositivo, o quizás, de manera un poco más inteligente, una ruta para el tipo de dispositivo y su ID. Luego, el servidor traduciría los datos del formulario en un mensaje para enviarlo al dispositivo, lo escribiría en algún controlador de dispositivo y esperaría un reconocimiento. Luego, el servidor finalmente puede responder a la solicitud de publicación y decirle al usuario que todo está bien con el dispositivo.

     

    Una arquitectura de página web para tratar el IoT como un servidor de formularios, buscando algo mejor. ( Vista previa grande )

    Muchos CMS funcionan de esta manera para actualizar entradas de blogs y similares. Nada parece extraño al respecto. Parece que HTML sobre HTTP siempre ha tenido el diseño de obtener páginas que han sido representadas y de enviar datos de formulario para que sean manejados por el servidor web. Es más, hay miles de CMS para elegir. Entonces, para mejorar nuestro sistema de IoT, parece razonable revisar esos miles de CMS para ver cuál es el adecuado para el trabajo. O bien, para empezar, podríamos aplicar un filtro en los CMS.

    Tenemos que tener en cuenta la naturaleza en tiempo real de lo que estamos tratando. Entonces, si bien HTML en su forma original es bastante bueno para muchas tareas empresariales, necesita un poco de ayuda para convertirse en el mecanismo de entrega para la gestión de IoT. Por lo tanto, necesitamos un CMS o un servidor web personalizado que ayude a HTML a realizar este trabajo de IoT. También podemos pensar en el servidor, ya que asumimos que los CMS proporcionan la funcionalidad del servidor. Solo debemos tener en cuenta que el servidor debe proporcionar animación basada en eventos, por lo que la página no se puede imprimir estáticamente al 100%.

    Aquí hay algunos parámetros que pueden guiar las elecciones de nuestra página web vinculada al dispositivo, cosas que debería hacer:

    1. Reciba datos del sensor y otros mensajes de estado del dispositivo de forma asincrónica ;
    2. Representar los datos del sensor para la página en el cliente (casi corolario de 1);
    3. Publicar comandos en un dispositivo o grupo de dispositivos en particular de forma asincrónica ;
    4. Opcionalmente, envíe comandos a través del servidor o evítelo.
    5. Mantener de forma segura la relación de propiedad entre el dispositivo y el usuario;
    6. Administre el funcionamiento crítico del dispositivo, ya sea sin interferir ni anularlo.

    La lista viene a la mente cuando pensamos en una sola página que actúa como interfaz para un dispositivo seleccionado . Queremos poder comunicarnos con el dispositivo libremente en lo que respecta a comandos y datos.

    En cuanto a la página, sólo necesitamos solicitarla una vez al servidor web. Es de esperar que el servidor web (o la aplicación asociada) proporcione una vía de comunicación segura. Y la ruta no tiene que ser a través del servidor, o tal vez debería evitarlo por completo, ya que el servidor puede tener tareas de mayor prioridad además de encargarse de la comunicación de una página para los datos provenientes de los sensores.

    De hecho, podemos imaginar que los datos provienen de un sensor una vez por segundo, y no esperaríamos que el servidor web proporcionara una actualización constante segundo tras segundo para miles de flujos de sensores individuales multiplicados por miles de espectadores. Por supuesto, un servidor web se puede particionar o configurar en un marco de equilibrio de carga, pero existen otros servicios que se personalizan para la entrega de sensores y la clasificación de comandos al hardware.

    El servidor web deberá entregar algún paquete para que la página pueda establecer canales de comunicación seguros con el dispositivo. Tenemos que tener cuidado al enviar mensajes en canales que no brindan cierta gestión de los tipos de mensajes que se transmiten. Tiene que haber cierto conocimiento sobre si un dispositivo está en un modo que puede interrumpirse o si puede haber una demanda de acción por parte del usuario si un dispositivo está fuera de control. Así, el servidor web puede ayudar al cliente a obtener los recursos adecuados que pueden saber más sobre el dispositivo. La mensajería se podría realizar con algo como un servidor MQTT. Y podría haber algunos servicios para preparar el servidor MQTT que pueden iniciarse cuando el usuario accede a su panel a través del servidor web.

     

    Debido al mundo físico con sus requisitos de tiempo real y a consideraciones de seguridad adicionales, nuestro diagrama se vuelve un poco diferente del original.

    Una aplicación de una sola página que se comunica con una MCU. Ahora interactúa de forma asincrónica con la MCU independientemente del servidor de páginas web. ( Vista previa grande )

    No podemos detenernos aquí. Configurar una sola página por dispositivo, incluso si responde y maneja bien la comunicación, no es lo que pedimos. Tenemos que asumir que un usuario iniciará sesión en su cuenta y accederá a su panel de control. A partir de ahí, le pedirá una lista de proyectos de contenido (muy probablemente proyectos en los que esté trabajando). Cada elemento de la lista hará referencia a una serie de recursos. Cuando selecciona un elemento haciendo clic o tocando, obtendrá acceso a una colección de paneles, cada uno de los cuales tendrá información sobre un recurso o dispositivo de IoT en particular.

    Cualquier número de paneles entregados en respuesta a la consulta generada como resultado de la acción de la interfaz del usuario pueden ser aquellos paneles que interactúan con dispositivos en vivo. Entonces, tan pronto como aparezca un panel, se espera que muestre actividad en tiempo real y pueda enviar un comando a un dispositivo.

    Cómo se ven los paneles en la página es una decisión de diseño. Pueden ser ventanas flotantes o cuadros sobre un fondo desplazable. Independientemente de cómo se presente, los paneles marcarán el tiempo, la temperatura, la presión, la velocidad del viento o cualquier otra cosa que puedas imaginar. Esperamos que los paneles estén animados con respecto a varias escalas gráficas. La temperatura se puede presentar como un termómetro, la velocidad como un velocímetro semicircular, el sonido como una forma de onda fluida, etc. Foro ciclismo

    El servidor web tiene la tarea de entregar los paneles correctos al usuario correcto, dadas las consultas a una base de datos de paneles y dado que los dispositivos deben estar físicamente disponibles. Es más, dado que habrá muchos tipos diferentes de dispositivos, es probable que los paneles de cada dispositivo sean diferentes. Por lo tanto, el servidor web debería poder entregar la información pictográfica necesaria para representar un panel. Sin embargo, no es necesario cargar la página HTML del panel con todos los paneles posibles. No se tiene idea de cuántos serán.

    Aquí hay algunos parámetros que pueden guiar las elecciones para nuestra página del panel, cosas que debería hacer:

    1. Presentar una forma de seleccionar grupos de paneles de dispositivos relacionados;
    2. Hacer uso de mecanismos de comunicación de dispositivos simultáneos para una cierta cantidad de dispositivos;
    3. Activar paneles de dispositivos cuando el usuario los solicite;
    4. Incorpore gráficos cargados de forma diferida para diseños de paneles únicos;
    5. Hacer uso de tokens y parámetros de seguridad con respecto a cada panel;
    6. Mantener la sincronicidad con todos los dispositivos bajo inspección del usuario.

    Una aplicación de una sola página que se comunica con múltiples MCU, de forma asincrónica e independiente del servidor de la página web. ( Vista previa grande )

     

    Podemos empezar a ver cómo cambia el juego, pero en el mundo del diseño de tableros, el juego ha estado cambiando un poco aquí y allá durante algún tiempo. Sólo tenemos que limitarnos a algunas herramientas de desarrollo de páginas útiles y actualizadas para ponernos en marcha.

    Comencemos con cómo podemos renderizar los paneles. Esto ya parece un gran trabajo. Estamos imaginando muchos tipos diferentes de paneles. Pero, si alguna vez usaste un DAW de música, verías cómo han usado gráficos para hacer que los paneles se parezcan a los dispositivos analógicos utilizados por las bandas de antaño. Todos los paneles de las DAW están dibujados por complementos que operan con sonido. De hecho, muchos de esos complementos de DAW pueden usar SVG para representar sus interfaces. Así que nos limitamos a manejar interfaces SVG, que a su vez pueden ser cualquier gráfico que podamos imaginar.

    Elegir SVG para paneles

    Por supuesto, me gustan los DAW y los usaría como ejemplo, pero SVG es un estándar de páginas web. SVG es un estándar W3C. Es para llevar dibujos lineales a las páginas web. SVG solía ser un ciudadano de segunda clase en las páginas web, obligado a vivir en iFrames. Pero, desde HTML5, ha sido un ciudadano de primera clase. Quizás, cuando salga SVG2, podrá utilizar elementos de formulario. Por ahora, los elementos del formulario son objetos extraños en SVG. Pero eso no debería impedirnos hacer de SVG el sustrato para paneles.

    SVG se puede dibujar, almacenar para su visualización y se puede cargar de forma diferida. De hecho, a medida que exploremos el sistema de componentes, veremos que SVG se puede utilizar para plantillas de componentes. En esta discusión, usaremos Vue.js para crear componentes para los paneles.

    Dibujar SVG no es difícil, porque hay muchos programas de dibujo lineal que son fáciles de conseguir. Si gastas el dinero, puedes obtener Adobe Illustrator, que exporta SVG. Inkscape ha sido una opción para la creación de SVG durante algún tiempo. Es de código abierto y funciona bien en Linux, pero también se puede ejecutar en Mac y Windows. Luego, existen varios programas de edición SVG de páginas web que son de código abierto, y también algunas versiones SaaS.

    He estado buscando un editor SVG de código abierto basado en web. Después de mirar un poco, encontré SVG-Edit . Puedes incluirlo en tus propias páginas web, tal vez si estás creando un blog basado en SVG o algo así.

    Un diagrama eléctrico es bastante detallado, pero podemos obtenerlo fácilmente en SVG y animarlo con sólo un poco de código. ( Vista previa grande )

    Cuando guarda su trabajo en un archivo, SVG-Edit lo descarga en su navegador y puede recoger el archivo de su directorio de descarga.

     

    La imagen que he dibujado muestra una puerta AND que controla un integrador. Eso no es lo que normalmente uno esperaría ver en un panel de una MCU. Quizás el panel tenga un botón para alimentar una de las entradas de la puerta AND. Entonces podría tener una pantalla de un ADC que lea la salida del integrador. Quizás sea un gráfico de líneas en un eje temporal. La mayoría de los paneles tendrán gráficos que permitirán al usuario identificarse con lo que sucede dentro de la MCU. Y, si nuestro circuito va a vivir en algún lugar, será dentro de la MCU.

    De todos modos, nuestro diagrama electrónico se puede utilizar para hablar de animación. Lo que queremos hacer es echar un vistazo al SVG y ver dónde podemos obtener algunas de las etiquetas DOM que nos gustaría cambiar de alguna manera. Luego podemos animar el SVG usando un poco de JavaScript básico y un temporizador. Hagamos que la puerta AND parpadee en diferentes colores.

    El SVG que estamos buscando se encuentra en el siguiente cuadro de código. No parece muy amigable para el programador, aunque el usuario estará bastante contento. Sin embargo, todavía quedan algunas pistas para encontrar en qué elemento DOM queremos operar. Primero, la mayoría de las herramientas de dibujo SVG tienen una forma de acceder a las propiedades del objeto, en particular, el idatributo. SVG-Edit también tiene una manera. En el editor, seleccione la puerta AND y observe la barra de herramientas. Verá un campo para y también idel CSS .class

    Una de las herramientas de dibujo SVG con una forma de capturar la identificación del objeto utilizando la interfaz proporcionada. ( Vista previa grande )

    Si por algún motivo no puede acceder a una herramienta de edición, puede abrir el SVG en un navegador e inspeccionar el DOM. En cualquier caso, descubrimos que nuestra puerta tenía id= “svg_1”.

    svg xmlns_svg="https://www.w3.org/2000/svg" g titleLayer 1/title path d="m80.59881,87.020171l14.714795,0m-14.714793,-11.938687l14.714797,0.000004m-0.033867,-6.543869l0,24.758504c42.377882,2.221929 43.364812,-27.139117 0,-24.758504zm47.366321,12.333056l-15.303943,0m-48.188699,-6.489897l1.454753,0l0,1.454751l-1.454753,0l0,-1.454751zm-0.068425,11.869359l1.454753,0l0,1.454753l-1.454753,0l0,-1.454753zm63.545246,-6.089294l1.454751,0l0,1.454751l-1.454751,0l0,-1.454751z" fill="#FF0000" stroke="#000000"/ path d="m48.58886,119.662231l18.234678,0l2.523043,-7.173309l4.128604,13.808613l4.587337,-13.987948l4.013933,13.808613l4.35797,-13.629278l4.35797,13.718944l2.408353,-6.72497l18.349357,0m-64.482612,-0.623112l1.515724,0l0,1.515728l-1.515724,0l0,-1.515728zm64.484275,-0.103111l1.515721,0l0,1.515728l-1.515721,0l0,-1.515728z" fill="#FF0000" stroke="#000000" stroke-dasharray="null" stroke-linecap="null" stroke-linejoin="null" transform="rotate(90.3367 80.0675 119.304)"/ polygon cx="108.5" cy="79.5" edge="0" fill="#ffffff" orient="x" shape="regularPoly" sides="3" strokeWidth="null" strokecolor="#000000"/ polygon cx="215.5" cy="192.5" edge="0" fill="#ffffff" orient="x" shape="regularPoly" sides="3" strokeWidth="null" strokecolor="none"/ polygon cx="165.5" cy="164.5" edge="0" fill="#ffffff" orient="x" shape="regularPoly" sides="3" strokeWidth="null" strokecolor="none"/ polygon cx="161.5" cy="138.5" edge="0" fill="#ffffff" orient="x" shape="regularPoly" sides="3" strokeWidth="null" strokecolor="none"/ polygon cx="160.5" cy="161.5" edge="0" fill="#ffffff" orient="x" shape="regularPoly" sides="3" strokeWidth="null" strokecolor="none"/ g path d="m225.016923,53.008793l0,3.419331m-4.558966,-1.709666l9.11791,0m10.303228,4.235512l-25.770656,0m-34.429182,0l24.544724,0m0.220544,-4.058194l1.543807,0l0,8.164451l-1.543807,0l0,-8.164451zm7.939567,-4.473673l1.543805,0l0,16.999955l-1.543805,0l0,-16.999955zm-34.176663,8.126854l1.474036,0l0,0.747515l-1.474036,0l0,-0.747515zm61.677552,0.018809l1.474038,0l0,0.747515l-1.474038,0l0,-0.747515z" fill="#FF0000" sides="3" stroke="#000000" stroke-dasharray="null" stroke-linecap="null" stroke-linejoin="null" stroke-width="null"/ polygon cx="171.5" cy="159.5" edge="43.256342" fill="#ffffff" orient="x" points="223.47406005859375,91.5 186.01296997070312,113.128173828125 186.01296997070312,69.871826171875 223.47406005859375,91.5 " shape="regularPoly" sides="3" stroke="#000000" stroke-width="null" strokeWidth="null" strokecolor="#000000"/ line fill="none" stroke="#000000" stroke-dasharray="null" stroke-linecap="null" stroke-linejoin="null" stroke-width="null" x1="171" x2="186" y1="103.5" y2="103.5"/ path d="m130.801817,80.659041l15.333707,0l2.12165,-4.564833l3.47178,8.787299l3.857534,-8.901421l3.375353,8.787299l3.664657,-8.673176l3.664657,8.730237l2.025206,-4.279526l15.430142,0m-54.224016,-0.396526l1.274586,0l0,0.964554l-1.274586,0l0,-0.964554zm54.225414,-0.065616l1.274584,0l0,0.964554l-1.274584,0l0,-0.964554z" fill="none" stroke="#000000" stroke-dasharray="null" stroke-linecap="null" stroke-linejoin="null" stroke-width="null"/ line fill="none" stroke="#000000" stroke-dasharray="null" stroke-linecap="null" stroke-linejoin="null" stroke-width="null" x1="171.5" x2="171.5" y1="103.75" y2="135.388167"/ line fill="none" stroke="#000000" stroke-dasharray="null" stroke-linecap="null" stroke-linejoin="null" stroke-width="null" x1="177.75" x2="177.75" y1="58.75" y2="80.255951"/ line fill="none" stroke="#000000" stroke-dasharray="null" stroke-linecap="null" stroke-linejoin="null" stroke-width="null" x1="223.75" x2="266.854524" y1="91.75" y2="91.75"/ line fill="none" stroke="#000000" stroke-dasharray="null" stroke-linecap="null" stroke-linejoin="null" stroke-width="null" x1="241.75" x2="241.75" y1="59.75" y2="91.754167"/ line fill="none" stroke="#000000" stroke-dasharray="null" stroke-linecap="null" stroke-linejoin="null" stroke-width="null" x1="168.25" x2="180.75" y1="135.75" y2="135.75"/ line fill="none" stroke="#000000" stroke-dasharray="null" stroke-linecap="null" stroke-linejoin="null" stroke-width="null" x1="169.75" x2="179.25" y1="138.5" y2="138.5"/ line fill="none" stroke="#000000" stroke-dasharray="null" stroke-linecap="null" stroke-linejoin="null" x1="171" x2="179.75" y1="141.25" y2="141.25"/ /g /g /svg

    Todo lo que necesitamos ahora es un poco de JavaScript. Primero tomamos nota de que el atributo del elemento "relleno" está presente. Luego está sólo el programa simple que sigue:

     

    html head /headbody !-- ALL THE SVG FROM ABOVE GOES HERE --/bodyhtml/svgscript // Set up a timer interval flash the color. var gateElement = document.getElementById("svg_1"); if ( gateElement ) { setInterval( () = { var fillC = gateElement.getAttribute("fill"); gateElement.setAttribute("fill", (fillC == "#00FF00") ? "#FF0000" : "#00FF00" ); }, 2000 ) }/script

    Observe que lo que tenemos es una página HTML mínima. Puedes cortar y pegar el código en tu editor favorito. Y luego no olvides cortar y pegar el SVG para reemplazar el comentario. Mi versión de Chrome requiere que la página sea HTML para poder tener la sección JavaScript. Entonces, ese es un navegador que todavía trata SVG como algo separado. Pero está muy lejos de los iframedías.

     

    Si corta y pega correctamente, puede abrir la página y ver la puerta AND pasar de rojo a verde una y otra vez.

    Lectura recomendada : Descomposición de círculos SVG en caminos

    Paneles de construcción a partir de componentes VUE

    Ya estamos en camino de hacer que cualquier panel cobre vida, pero si queremos gestionar grandes colecciones de paneles de manera sensata, tendríamos mucho trabajo por delante. Ese sería especialmente el caso si simplemente nos basáramos en nuestro primer ejemplo.

    Si bien el primer ejemplo nos muestra cómo podemos cambiar asincrónicamente la vista de un objeto, no nos muestra cómo vincular la vista al estado de cualquier objeto de datos y mucho menos uno que administre una máquina. Ciertamente podemos entender cómo setIntervalse puede reemplazar la demostración por un fetchcontrolador, pero es posible que ni siquiera obtengamos el estado de una máquina del servidor web que sirve la página que contiene SVG. Además, cuando obtenemos los datos, nuestros programas ahora deben conocer la estructura DOM de la página determinada.

    Afortunadamente, frameworks como Vue se han vuelto populares y pueden ahorrarnos mucho trabajo.

    Es fácil conocer Vue. La documentación de Vue es muy accesible. Entonces, si esta discusión avanza demasiado, entonces puede dedicar algún tiempo a aprender sobre Vue en su propio sitio web. Pero hay muy buenas discusiones dentro de las páginas de Smashing. Krutie Patel escribió un artículo sorprendente sobre cómo hacer una infografía. Souvik Sarkar nos cuenta cómo crear un panel meteorológico con Vue.

    Selección grupal de paneles relacionados

    Para el primer paso, debemos abordar la búsqueda de grupos de paneles. Una razón para hacer esto primero es que está en el nivel marco de nuestras interacciones humanas.

    El usuario busca algo que le interesa. Quizás le interesen todos los dispositivos de una misma ciudad. Quizás tenga muchos lotes de productos líquidos y quiera limitarse a un tipo de producto con cada lote gobernado por una pequeña colección de dispositivos IoT. Entonces, el usuario primero buscará para obtener una pequeña lista.

    Aquí está el proceso:

    1. Búsqueda de grupos de paneles por características/parámetros.
    2. Vea una lista de iconos que representan grupos.
    3. Seleccione un icono (haga clic/toque).
    4. Comience a utilizar paneles identificados con el ícono cuando aparezcan.

    Otra razón por la que este es un buen primer paso es que podemos usar Vue en su forma más simple. No se necesitan herramientas de construcción. Simplemente lo incluiremos vue.jscon una etiqueta de secuencia de comandos en HTML. De hecho, ni siquiera tenemos que descargarlo. Hay un sitio donde vue.jsse sirve una copia de trabajo.

    Todo lo que necesitamos es la siguiente etiqueta:

    script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"/script

    Copié la etiqueta del script directamente de la documentación de Vue sobre la instalación.

    Ahora, necesitamos una página web que pueda cargar íconos y convertirlos en algo que haga clic. Vue lo hace muy fácil. De hecho, acabo de escribir una pequeña aplicación para administrar una lista de Twitter usando Vue. Simplemente administra campos de texto. Como es un poquito más simple que un SPWA que usa íconos, podemos echarle un vistazo y luego cambiarlo para que sea el marco de aplicación de una sola página que deseemos.

    A continuac






    Tal vez te puede interesar:

    1. ¿Deberían abrirse los enlaces en ventanas nuevas?
    2. 24 excelentes tutoriales de AJAX
    3. 70 técnicas nuevas y útiles de AJAX y JavaScript
    4. Más de 45 excelentes recursos y repositorios de fragmentos de código

    Componentes de páginas web SVG para IoT y creadores (Parte 1)

    Componentes de páginas web SVG para IoT y creadores (Parte 1)

    Design System Planning and Process, with Nathan Curtis SmashingConf Freiburg 2024 Índice IoT y el rápido

    programar

    es

    https://aprendeprogramando.es/static/images/programar-componentes-de-paginas-web-svg-para-iot-y-creadores-parte-1-982-0.jpg

    2024-05-20

     

    Componentes de páginas web SVG para IoT y creadores (Parte 1)
    Componentes de páginas web SVG para IoT y creadores (Parte 1)

    Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente

     

     

    Top 20