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;
  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
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