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:
- External Service widget directly from the Dashboard Builder, while you can create an HTML page into the IOT App which can be shown into that widget. The example is reported into TC2.36: advanced mode for HTML CSS embed into dashboards
- SVG custom widgets that you can create with the SVG editor and control with an additional HTML page as described in: Custom Synoptics and Widgets for Dashboards
Morevoer, you can create your own Widgets in PHP as described in: TC3.11- New graphics widget can be easily created, Dashboard Widget Creation