Show current value on load of the html canvas

Data management
1

Hello, I don’t know much about web programming and I want to display the values of my variables as an image. For example if my light sensor detects a low luminosity, I send this value directly to ubidots which then displays a cloud image to me, and if the luminosity is strong I will display a sun and so on. I wanted to implement my idea as an if-else condition, I first started by retrieving the value of my variable (thanks to this tutorial: HTML Canvas: Creating a Real Time Widget | Ubidots Help Center) but now I have two problems:

  1. how to make the values load as soon as the dashboard is launched (in the current situation the value must change after loading the dashboard for something to be displayed)
  2. how to display an image instead of a text

I would be highly grateful to anyone who would help me implement my idea.

2

Good day @abdouTobblaze

Sorry for the delay in our response.

About the questions you made in the last months, we made an example code in which you can:

  1. See the changes in real time and as soon as the dashboard loads for the first time, this way you don’t have to refresh the dashboard to see the changes nor poll data continuously.
  2. Show an image instead of a text based on the last value of the selected variable.

The HTML Canvas widget is divided, as you may know, into three main coding sections: HTML, CSS, and JS. The HTML and CSS are pretty simple, as follows:

HTML

<div>
    <p id="image_background"></p>
    <p id="content"></p>
    <p id="eventToken"></p>
    <p id="eventRefresh"></p>
</div>

CSS

@import url('https://fonts.googleapis.com/css?family=VT323');

#image_background {
  font-family: "VT323";
  font-size: 25px;
  letter-spacing: 10.5px;
  height: 220px;
  width: 450px;
}

#image_background p, #image_background_text {
  margin: 0;
  left: 75px;
  position: absolute;
}

#image_background p {
  top: 88px;
  font-size: 25px !important;
}

#image_background_text {
  top: 121px;
}

The JS code will make use of the socket.IO library to, basically, connect to Ubidots’ real time engine. In consequence, every time a new value is received in the selected variable, the widget will apply the image selection logic and change accordingly.

This code also has a segment with a conditional to define the image to be displayed based on the last value of the variable.

JS

//Define your constants and initialize your variables
var VAR_ID = "YOUR-VARIABLE-ID"; 
var TOKEN = null;
var srv = "industrial.ubidots.com:443";
var socket;
var subscribedVars = [];
var $bg = $("#image_background");
var $text = $("#image_background_text");
var initValue = null;
var ubidots = new Ubidots();

// Implements the connection to the server
function changeImage(value) {
  var choose = "sun";
  var background = {
    cloud:
      "https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/160/apple/21/cloud_2601.png",
    mix: "http://cdn.shopify.com/s/files/1/1061/1924/products/Emoji_Sun_Behind_Cloud_Emoji_grande.png?v=1571606088",
    sun: "http://cdn.shopify.com/s/files/1/1061/1924/products/The_Sun_Emoji_grande.png?v=1571606063",
    rain: "https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/facebook/158/cloud-with-rain_1f327.png",
    //Add here more images
  };
  if (value <= 25) {
    choose = "rain";
    $bg.css("color", "white");
  } else if (value > 25 && value <= 50) {
    choose = "cloud";
    $bg.css("color", "white");
  } else if (value > 50 && value <= 75) {
    choose = "mix";
    $bg.css("color", "white");
  } else if (value > 75 && value <= 100) {
    choose = "sun";
    $bg.css("color", "white");
    //Add here more conditionals
    /*
        else if (value > 75 && value <= 100) {
        choose = 'sun';
        $bg.css('color', 'white');
        */
  }

  $bg.css(
    "background",
    "url(" + background[choose] + ") 0 / contain no-repeat"
  );
}

//Function to get LastValue (when the dashboard is refreshed)
function getLastValue(variableId, token) {
  var url =
    "https://industrial.api.ubidots.com/api/v1.6/variables/" +
    variableId +
    "/values";
  $.get(url, { token: token, page_size: 1 }, function (res) {
    if (initValue === null || res.results[0].value !== initValue) {
      $text.text(res.results[0].value);
      initValue = res.results[0].value;
      changeImage(initValue);
    }
  });
}

// 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);
  }
};

// Implements the socket connection
var connectSocket = function () {
  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 });
    });
  });
};

ubidots.on("receivedToken", function (data) {
  TOKEN = data;
  //Main function
  getLastValue(VAR_ID, TOKEN);
  connectSocket();
  socket.on("reconnect", connectSocket); //Try to connect again if connection is lost

  // Subscribe Variable with your own code.
  subscribeVariable(VAR_ID, function (res) {
    var parsedValue = JSON.parse(res);
    lastValue = parsedValue.value;
    changeImage(lastValue);
  });
});

ubidots.on('dashboardRefreshed', function (data) {
  getLastValue(VAR_ID, TOKEN);
});

socket = io.connect("https://" + srv, { path: "/notifications" });

NOTE: VAR_ID must be replaced with the variable ID from which you want to retrieve the data.

//Define your constants and initialize your variables
var VAR_ID = "YOUR-VARIABLE-ID";

Bear in mind that, in the below snippet, you must change the URLs of the background variable with those of the images you want to use, and change their names to how they will be called with the choose variable in the conditionals. You can add as many images and conditionals as you want.

// Function to change the image
function changeImage(value) {
  var choose = 'sun';
  var background = {
    cloud: 'https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/160/apple/21/cloud_2601.png',
    mix: 'http://cdn.shopify.com/s/files/1/1061/1924/products/Emoji_Sun_Behind_Cloud_Emoji_grande.png?v=1571606088',
    sun: 'http://cdn.shopify.com/s/files/1/1061/1924/products/The_Sun_Emoji_grande.png?v=1571606063',
    rain: 'https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/facebook/158/cloud-with-rain_1f327.png'
    //Add here more images
  }
if (value <= 25) {
    choose = 'rain';
    $bg.css('color', 'white');
  } else if (value > 25 && value <= 50) {
    choose = 'cloud';
    $bg.css('color', 'white');
  } else if (value > 50 && value <= 75) {
    choose = 'mix';
    $bg.css('color', 'white');
  } else if (value > 75 && value <= 100) {
    choose = 'sun';
    $bg.css('color', 'white');
    //Add here more conditionals
    /*
    else if (value > 75 && value <= 100) {
    choose = 'sun';
    $bg.css('color', 'white');
    */
  }

$bg.css('background', 'url(' + background[choose] + ') 0 / contain no-repeat');
}

Do not forget to import the necessary JS libraries to run this example:

Finally, this is how it would look:

1 Like