...
Here is an example of an icon with a point. The second line Line 3 of the code shown below is a finstack.eval which calls 4 points. This query can be changed to output a different result. On line 8 we call points.push. In this is where the main Icon and Icon color can be defined. Also the smaller icon and label at the bottom (btIcon and btIconText) can also be defined here as well.
| Code Block | ||
|---|---|---|
| ||
var ractiveComponent = query('stackRactive');
finstack.eval("readAll(point and his and curVal).get(0..3)").then(function(data) {
var points = [];
var realPoints = data.result.toObj();
realPoints.forEach(function(p,index) {
points.push({
mainIcon : "icon-location",
iconColor : "#c9b4e0",
backgroundColor : "#ff0000",
mainText : p.navName,
mainValue : fin.Data.PointUtil.GetPrettyValue(p),
btIcon : "icon-clockwise",
btIconText : "Refresh",
view : 'icon',
range : "today()",
pointId : p.id,
index : index,
original : p,
fold : "live"
});
});
ractiveComponent.ractive.set({points:points});
ractiveComponent.ractive.get('updatePoll').call(ractiveComponent);
}, function(err) {
console.error(err);
}); |
We put our code on a button. Drag out a button from components. Right click on it, select create event, mouse, mouse click, and then paste in the code above.
