Visual Effetcs / Alerts

 
 
What properties can you manipulate
 
Each widget contains a set of properties that you can directly manipulate.
 
 
Right click on the widget and select "Edit Properties"
 
It shows the available properties
 
  1. "dWidth":200,   [change the width of the object]
  2. "dHeight":200,  [change the height]
  3. "dx":0,                [change the x location]
  4. "dy":186,           [change the y location]
  5. "fillColor":"#533813",  [change the fill color]
  6. "fontName":"default",  [change the font name - this is disabled]
  7. "fontSize":57,               [change the font size]
  8. "fontStyle":" ",               [change the font style - not needed, manipulate through showBold, showItalic etc]
  9. "horizCellPadding":10, [change cell padding]
  10. "horizObjectPadding":15,  [change overall padding]
  11. "lineColor":"default",           [change line color]
  12. "lineWidth":1,                       [change line width]
  13. "margin":5,                           [change margin]
  14. "opactiy":0.4,                       [change transparency]
  15. "showBackground":true,    
  16. "showBold":false,
  17. "showBorder":false,
  18. "showItalic":false,
  19. "showStrike":false,
  20. "showUnderline":false,
  21. "textBackgroundColor":"none",
  22. "textColor":"red",
  23. "textHorizAlign":"center",
  24. "textX":-10,                            [change the relative position of text X location in icons]
  25. "textY":0,
  26. "vertObjectPadding":10,
  27. "zIndex":-1,
  28. "showTextShadow":false,
  29. "textShadowOffsetX":0,
  30. "textShadowOffsetY":0,
  31. "textShadowBlur":0,
  32. "textShadowColor":"white",
  33. "showBoxShadow":true,
  34. "boxShadowOffsetX":0,
  35. "boxShadowOffsetY":0,
  36. "boxShadowBlur":0,
  37. "boxShadowColor":"white"
 
 
You can access the widget's properties using the "this" operator
 
for e.g in the javascript if you simply say this.textColor="blue"; // property # 22 above
 
then upon the first refresh the text will go red and stay that way until you add another logic
 
 
Note, in the designer even though you can change the font settings and cosmetics, the difference right now is that you are doing it programmatically and at run time when the data refresh occurs. So this is powerful stuff.
 
When your data is refreshed and depending or independent of your data, You can do the following
 
  • change the position of the widget
  • change text color
  • change text size
  • change size of the widget
 
 
Heat Map Style Grid
 
Consider this simple MySQL based Grid data
 
 
It is a two column grid.
 
Let us add some javascript. Before we move further familiarize with how the data arrives and which arrays are available for reference
 
 
The "glb" is a global array containing the latest data for the current widget.
 
The data arrives in separate columns.
 
First column is data[0] and second column is data[1]
 
Having this array gives us full control so let us try to change the colors of the data that arrives
 
But before doing something ambitious, let us simply change the data in the first column.
 
We will add a simple javascript
 
  1. var cols=glb["_odata"].length;
  2. var rows=glb["_odata"][0].length;
  3.  
  4. for (var i=0; i < rows; i++)
  5. {
  6.   glb["_odata"][0][i] = glb["_odata"][0][i] +"x";
  7. }
 
In the first line we collect the number of columns, remember the variable glb["_odata"] is a 2 dimensional array, first the columns and second the elements in the column
 
In the second line, we get the number of rows by just checking the length of the first column
 
Next we have a for loop to go through each element and simple append a "x" to the data.
 
So effectively we did the most dangerous thing, changed incoming data.
 
Here is how our new grid looks
 
Note the x at the end of the period column data
 
Now let us modify a little bit to change colors only for the obj column
 
 
 
The result is
 
 
Code :
 
var cols=glb["_odata"].length;
var rows=glb["_odata"][0].length;
 
for (var i=0; i < rows; i++)
{
  glb["_odata"][1][i] = "<color=blue>"+glb["_odata"][1][i] +"<color=default>";
}
 
 
Note that we change the column from 0 to 1 and we encapsulate our data with two color tags.
 
What fun is to change color for all data
 
Let us add one more condition to change the color only if it is above 50 to red
 
var cols=glb["_odata"].length;
var rows=glb["_odata"][0].length;
 
for (var i=0; i < rows; i++)
{
  if (glb["_odata"][1][i]>50)
  {
    glb["_odata"][1][i] = "<color=red>"+glb["_odata"][1][i] +"<color=default>";
  }
}
 
 
So using same approach you can pretty much do anything with the incoming data.
 
 
Moving objects around
 
Even though you have direct access to the dx and dy properties, you should use the following methods
 
Below is an example where three icons are pitted against each other for a random number race
 
 
So when the new value arrives the position of the icon is set to  new value depending on what the value is
 
Same for  the other two icons.
 
The Parameters for the above icons are
 
 
 
Functions
 
setXY(x,y) : This just positions to the new position
 
objectmove(x,y) : This adds to the existing postion. For e.g if you passed objectmove(10,0) then it will move the object 10 pixels along X and keep the y position same.
Use online Web Dashboards in the cloud or download and host your own Dashboards