TC4.8: Widget Single Content on IOT Applications

×

Warning message

  • You can't delete this newsletter because it has not been sent to all its subscribers.
  • You can't delete this newsletter because it has not been sent to all its subscribers.

Test Case Title

TC4.8: Widget Single Content on IOT Applications

Goal

the show of data dynamically on  a Widget into the Dashboard, from number, float, string, etc., and formatting them for a minimum using HTML  commands

Prerequisites

the Users has to capable to use and IOT App, and know a little of JavaScript and HTML

Expected successful result

Activate a dashboard in which dynamic data cam be shown from IOT App and thus for shiwing any kind of single content.

Steps

 

installation info into the dashboard builder .


The Single Content is capable of showing content in different formats: number (integer or float), text, formatted text in HTML. In the following some examples.

the Elements:

Where: Function F is:

msg.payload = 12;
return msg;

and  the resulting data on Single Content Widget named "Dynamic Single Content" is: (in dashboard https://www.snap4city.org/dashboardSmartCity/view/index.php?iddasboard=MjQ2OQ==

   

so that chnging the message the Single Content is showing different results

msg.payload = "this is a string";
return msg;
msg.payload = "<H1>This is a Header</H1>";
return msg;
msg.payload = "<font color=\"red\">This is some text!</font>"
return msg;
msg.payload = "<p style=\"font-size:50px;\">I am big</p><body style=\"background-color:powderblue;\"><H1>This is back grounded text header</H1>";
return msg;
switch (msg.payload)
{
case 1:
        msg.payload = "<H1 style=\"background-color:DodgerBlue;padding-top:50px;padding-bottom:50px;\">1) This is back grounded text header</H1>";
     break;
case 2:
    msg.payload = "<H2 style=\"background-color:#39e600;padding-top:50px;padding-bottom:50px;\">2) This is back grounded text header</H2>";
    break;
case 3:
    msg.payload = "<H1 style=\"background-color:#ff5c33;padding-top:50px;padding-bottom:50px;\">3) This is back grounded text header</H1>";
    break;
}
return msg;

For more custom widgets you can use:

Morevoer, you can create your own Widgets in PHP as described in: TC3.11- New graphics widget can be easily created, Dashboard Widget Creation