Ubidots Community

progress bar widget

Hi, I’m trying to make a progress bar widget from 0 to 100%.

But I don’t know what the variable is in the JS code.

Take this example: HTML Canvas: Creating a Real Time Widget | Ubidots Help Center

I hope you can help me.

var socket;
var srv = "industrial.ubidots.com:443";
var VAR_ID = "5a0f6e7a76254211cac86bea"; // Put here your var Id
var TOKEN = "..."  // Put here your token
$( document ).ready(function() {
// Implements the connection to the server
socket = io.connect("https://"+ srv, {path: '/notifications'});
var subscribedVars = [];

// Function to publish the variable ID
var subscribeVariable = function (variable, callback) {
  // Publishes the variable ID that wishes to listen
  socket.emit('rt/variables/id/last_value', {
    variable: variable
  });
  // Listens for changes
  socket.on('rt/variables/' + variable + '/last_value', callback);
  subscribedVars.push(variable);
};

// Function to unsubscribed for listening
var unSubscribeVariable = function (variable) {
  socket.emit('unsub/rt/variables/id/last_value', {
    variable: variable
  });
  var pst = subscribedVars.indexOf(variable);
  if (pst !== -1){
    subscribedVars.splice(pst, 1);
  }
};

var connectSocket = function (){

  // Implements the socket connection
  socket.on('connect', function(){
    socket.emit('authentication', {token: TOKEN});
  });
  window.addEventListener('online', function () {
    socket.emit('authentication', {token: TOKEN});
  });
  socket.on('authenticated', function () {
    subscribedVars.forEach(function (variable_id) {
      socket.emit('rt/variables/id/last_value', { variable: variable_id });
    });
  });
}

/* Main Routine */

connectSocket();
// Should try to connect again if connection is lost
socket.on('reconnect', connectSocket);

// Subscribe Variable with your own code.
subscribeVariable(VAR_ID, function(value){
  var parsedValue = JSON.parse(value);
  console.log(parsedValue);
  $('#content').text(value);
  })
});

Good day @brandonnrs,

I hope all is well,

You need to replace the variable id in VAR_ID for the id of the variable you want to monitor and also add your Ubidots account TOKEN, which you can find here.

Now, can you please give us a little more context about what you are trying to achieve? To start getting familiar with HTML Canvas widget and how to create one, please refer to the following article where you can find multiple examples.

All the best,
-Isabel