En este artículo te mostraré una plantilla de ejemplo para mostrar la temperatura y humedad. Será una plantilla simple y minimalista que solo tendrá el propósito de mostrar los datos de un termómetro.

Como lo dije anteriormente, será una plantilla de ejemplo para mostrar los datos de un termómetro como lo son la temperatura y humedad. Puedes basarte en ella para mostrar los datos de un sensor físico o de una API.

Diseño de la plantilla para termómetro

Plantilla para temperatura y humedad

En este template de ejemplo tenemos el título, un icono del termómetro (con FontAwesome), el porcentaje de humedad y la temperatura. También muestra cuándo fue la última lectura.

Estos datos pueden venir de cualquier lugar, yo solo he puesto algunos de ejemplo. Eres libre de modificar la plantilla y agregar o remover algunas cosas.

Código fuente

El código de la plantilla queda así:

En el caso del termómetro, FontAwesome ofrece 5 clases distintas para el termómetro. Podemos mostrar el termómetro vacío, a un cuarto, a la mitad, tres cuartos o lleno. De este modo podemos agregar más dinamismo al termómetro.

Fíjate en la línea 19: el termómetro tiene la clase fa-thermometer-half así que está a la mitad, pero como lo dije, puede ser cualquiera de estas:

  • fa-thermometer-empty – Vacío
  • fa-thermometer-quarter – Un cuarto
  • fa-thermometer-half – A la mitad
  • fa-thermometer-three-quarters – Tres cuartos
  • fa-thermometer-full – Lleno

Además de las clases, siempre eres libre de cambiar el icono o modificar la plantilla en general. Por cierto, en este caso toda la plantilla está hecha con Bulma.

Si quieres puedes ver la plantilla en vivo, o ver más contenido sobre Bulma en mi blog.


Estoy disponible para trabajar en tu proyecto o realizar tu tarea pendiente, no dudes en ponerte en contacto conmigo.
Si el post fue de tu agrado muestra tu apoyo compartiéndolo, suscribiéndote al blog, siguiéndome o realizando una donación.

Suscribir por correo

Ingresa tu correo y recibirás mis últimas entradas sobre programación, open source, bases de datos y todo lo relacionado con informática

Únete a otros 6,836 suscriptores

parzibyte

Programador freelancer listo para trabajar contigo. Aplicaciones web, móviles y de escritorio. PHP, Java, Go, Python, JavaScript, Kotlin y más :) https://parzibyte.me/blog/software-creado-por-parzibyte/

0 Comentarios

Deja un comentario

Marcador de posición del avatar

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

A %d blogueros les gusta esto: