Algunos usuarios han preguntado a través de nuestras redes sociales y canal de soporte sobre cómo pueden mostrar las lecturas de datos temporales reales en sus paneles de control. En este tutorial, aprenderás cómo puedes construir un widget de marca de tiempo rápidamente.
Comenzando:
Por defecto, Ubidots no convierte la marca de tiempo para mostrar datos de tiempo personalizados en el widget. Pero, esto no es un problema, utilizaremos una herramienta poderosa que Ubidots ya tiene, los datos de contexto para lograrlo.
¿Pero qué queremos decir exactamente con 'contexto'? El contexto es la mejor manera de almacenar datos personalizados que no son necesariamente un valor fijo, es decir, cadenas de caracteres. Un contexto que es un arreglo de caracteres, es decir, si deseas enviar tu nombre y apellido a Ubidots y recuperarlo más tarde, construirías un contexto como este: context = {"name" : "John", "surname" : "Smith"}, con esta cadena de caracteres Ubidots almacenará un "name" con valor "John" y un "surname" con valor "Smith".
Ahora utilizaremos otra característica del contexto para construir una marca de tiempo. Con esto podemos evitar usar una variable para almacenar la hora, otra para almacenar los minutos y una más para los segundos; enviaremos todo el paquete de datos como un solo contexto dentro de una sola variable.
Si deseas saber más sobre el contexto y otras características para almacenar y mover valores, consulta nuestra API.
Codificación:
Ahora veamos cómo enviar datos; utilizaremos un dispositivo Particle Photon para enviar los valores de tiempo utilizando TCP comprimidos en un contexto y transmitidos a Ubidots como una variable. A continuación, encontrarás el código para ejecutar este paso:
/*************************************************************************** * Bibliotecas a incluir * ***************************************************************************/#include <Ubidots.h>/*************************************************************************** * Constantes y objetos * ***************************************************************************/#ifndef TOKEN#define TOKEN "" // Coloca aquí tu TOKEN#endifUbidots ubidots(TOKEN);char currentTime[40];/*************************************************************************** * Funciones Auxiliares * ***************************************************************************/void getTime(){ // Almacena en variables locales los datos de tiempo int hour = Time.hour(); int minute = Time.minute(); int second = Time.second(); // Crea la cadena de contexto sprintf(currentTime, "%s", ""); // Limpia el arreglo sprintf(currentTime, "hour=%d$minute=%d$second=%d", hour, minute, second); // crea el arreglo de caracteres con el formato de hora // Líneas para propósito de depuración Serial.print("time:"); Serial.println(currentTime);}/*************************************************************************** * Funciones Principales * ***************************************************************************/ void setup() { ubidots.setDebug(true);}void loop() { getTime(); // Obtiene la hora // Envía datos a Ubidots ubidots.add("current-time", 1.0, currentTime); ubidots.sendAll(); delay (5000); }
Comencemos a explicar el código sección por sección:
Bibliotecas a incluir: Aquí incluimos la Biblioteca Ubidots para dispositivos Particle
Constantes y objetos: Tendrás que ingresar tu TOKEN único de Ubidots aquí, si no sabes cómo recuperar el TOKEN de tu cuenta, consulta este artículo. Luego podemos inicializar un objeto Ubidots con la sentencia Ubidots ubidots(TOKEN); y finalmente declaramos un arreglo de caracteres que almacenará los datos de tiempo más adelante en la rutina.
Funciones Auxiliares: Solo habrá una función auxiliar llamada getTime(), que ha sido diseñada para construir el arreglo de caracteres para enviar el contexto de la variable. Necesitamos recuperar los datos de tiempo de nuestro dispositivo, y para esto utilizaremos el objeto Time del firmware de Spark, que tiene los métodos hour(), minute() y second() que nos servirán para recuperar los datos de tiempo necesarios; así que los llamamos y almacenamos los valores en las variables de tipo int hour, minute y second declaradas al principio de la función (para más información sobre el objeto Time, consulta los documentos del firmware de Spark)
Almacenaremos tres puntos de datos diferentes en nuestro contexto (hora, minuto y segundo) así que necesitaremos construir este arreglo de caracteres: hour={HOUR}$minute={MINUTE}$second={SECOND}, es decir, si necesitas almacenar la hora 14:35:56, necesitarás construir este arreglo de caracteres: hour=14$minute=35$second=56, el símbolo '$' sirve como separador para cada clave diferente en tu contexto (Nota: Para este tutorial estamos utilizando el servicio de traducción personalizado referenciado aquí, si usas HTTP - estamos usando TCP - tendrás que enviar el contexto de una manera diferente, consulta la API para saber cómo). El arreglo de caracteres de contexto se implementa mediante el método C sprintf() y se almacena en el arreglo de caracteres currentTime.
Funciones Principales: En la función Setup() simplemente habilitamos los mensajes de depuración de la biblioteca para que se impriman a través del puerto serie, esto es opcional.
La lógica principal se encuentra en la función loop(), primero llamamos a la función auxiliar getTime() para recuperar la hora actual, luego usamos add() para enviar datos a una variable llamada "current-time"; el valor uno, '1', puede ser cualquier número ya que el valor es irrelevante. El contexto se envía como un tercer argumento en el método add(). Finalmente, enviamos los datos utilizando el método sendAll().
Configurando tu Cuenta de Ubidots:
Una vez que comiences a enviar datos, deberías ver el contexto dentro de tu variable:
Ahora vamos a crear un widget de marca personalizada para mostrar tu hora. Para hacer esto, utilizaremos el Métrico / Último Valor.
Una vez que hayas creado tu widget, edítalo y copia y pega esto a continuación en la sección HTML de tu Widget Métrico:
<p>Último valor ##{{item_shared}}:<br><font size="2"><strong><span style="color: #2fbd68; font-size: 55px;">##{{context.hour}}:</span></strong><strong><span style="color: #2fbd68; font-size: 55px;">##{{context.minute}}:</span></strong></font><font size="2"><strong><span style="color: #2fbd68; font-size: 55px;">##{{context.second}}</span></strong></font>##{{unit}}</p>
OBJETIVO ALCANZADO:
Con el código completado, nuestra marca de tiempo digital ahora se refleja en tu panel de control y funciona genial. ¡Ahora es tu turno de intentarlo!
No olvides dejarnos tus comentarios en nuestros foros comunitarios o puedes conectarte con nosotros a través de las redes sociales en Facebook, Twitter o Hackster.