Some users have asked through our social media and support channel about how you can show the actual timed data readings in their dashboards. In this tutorial, you will learn how how you can build a time stamp widget quickly.
Getting Started:
By default Ubidots does not convert the time stamp to show a custom time data in the widget. But, this is not a problem, we will use a powerful tool that Ubidots already has, the context data to get it done.
But what exactly do we mean by 'context'? Context is the best way to store custom data that is not necessarily a fixed value, i.e char strings. A context that is an array of characters i.e if you want to send your name and surname to ubidots and to retrieve it later you would build a context like this: context = {"name" : "John", "surname" : "Smith"} , with this chat string Ubidots will store a "name" with value "John" and a "surname" with value "Smith".
Now we will use another feature of the context to build a time stamp. With it we can avoid using one variable to store the hour, another to store minutes, and one more for seconds; we will send the entire packet of data as a single context within single variable.
If you want to know more about context and other features to store and move values, refer to our API.
Coding:
Now let's see how to send data; we will use a Particle Photon device to send the time values using TCP compressed into a context and transmitted to Ubidots as a variable. Below you will find the code to execute this step:
/***************************************************************************
* Libraries to Include
* ***************************************************************************/
#include <Ubidots.h>
/***************************************************************************
* Constants and objects
* ***************************************************************************/
#ifndef TOKEN
#define TOKEN "" // Put here your TOKEN
#endif
Ubidots ubidots(TOKEN);
char currentTime[40];
/***************************************************************************
* Auxiliar Functions
* ***************************************************************************/
void getTime(){
// Stores in local variables the time data
int hour = Time.hour();
int minute = Time.minute();
int second = Time.second();
// Creates the context char
sprintf(currentTime, "%s", ""); // Cleans the array
sprintf(currentTime, "hour=%d$minute=%d$second=%d", hour, minute, second); // creates the char array with the hour format
// Debug purpose lines
Serial.print("time:");
Serial.println(currentTime);
}
/***************************************************************************
* Main Functions
* ***************************************************************************/
void setup() {
ubidots.setDebug(true);
}
void loop() {
getTime(); // Obtains time hour
// Sends data to Ubidots
ubidots.add("current-time", 1.0, currentTime);
ubidots.sendAll();
delay (5000);
}
Let's begin to explain the code section by section:
Libraries to include: Here we include the Ubidots Library for Particle devices
Constants and objects: You will have to input your unique Ubidots TOKEN here, if you don't know how to retrieve the TOKEN from your account refer to this article. Then we can initialize an Ubidots object with the sentence Ubidots ubidots(TOKEN); and finally we declare a char array that will store time data later in the routine.
Auxiliar Functions: There will be only one auxiliar function called getTime() , it has been purposed to build the char array for sending the variable's context. We need to retrieve the time data from our device, and for this we will use the Time object from the Spark firmware, it has the methods hour(), minute() and second() that will serve us in retrieving the necessary time data; so we call them and store the values into the int type variables hour, minute and second declared at the beginning of the function (for more information about the Time object, refer to the Spark's firmware documents)
We will store three different data points into our context (hour, minute and second) so we will need to build this char array: hour={HOUR}$minute={MINUTE}$second={SECOND} , i.e if you need to store the data time 14:35:56 you will need to build this char array: hour=14$minute=35$second=56 , the '$' symbol serves as separator for every different keys in your context (Note: For this tutorial we are using the custom translate service referenced here, if you use HTTP - we are using TCP- you will have to send a the context a different way, please refer to the API to know how) . The context char array is implemented by the C method sprintf()and stored into the currentTime char array.
Main Functions: In the Setup()function we simply make available the debug messages from the library to be printed through serial port, this is optional.
The main logic comes in the loop()function, first we call the auxiliargetTime() function to retrieve the actual time, then we use the add()to send data to a variable called "current-time; the value one, '1', can be any number as the value is irrelevant. The context is sent as a third argument in the add()method. Finally we send the data using the sendAll() method.
Setting Up your Ubidots Account:
Once you begin to send data, you should see the context inside your variable:
Now let's create a custom stamp widget to display your time. To do this we will use the Metric / Last Value.
Once you have created your widget, edit it, and copy and paste this the below into html section of your Metric Widget:
<p>Last value {{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>
GOAL REACHED:
With the completed code, our digital time stamp now reflects on your dashboard and works great! Now it is your turn to give it a try.
Do not forget to leave us your comments in our community forums or you can connect with us vis social media at Facebook, Twitter or Hackster.