Datamash has created “Creative Widget technology” or simply Crewidget.
Crewidget enables the creation of Datamash Software Chips using a very simple technique. It is so simple that my 13 year old son has done it.
Let’s imagine that a Datamash Software Chip (or Wrap in our old terminology) contains JavaScript as in this illustration.
Such architecture is very flexible and useful. On one hand it is pluggable to the Datamash Smart Directory. This means that you can link connectors of this chip with connectors of other Datamash Software Chips. On the other hand it is pluggable into any website, blog or widget because of the JS code inside a chip.
What is even more remarkable, you don’t think about files, databases and queries. You just define named connectors and you are done.
Even very simple HTML code is useful. For example, you can define input connectors and output connectors by so called Short Tags.
How to start
You should click to left blue button on the Crewidget Chip card and edit HTML or Rich text inside.
Even short line is enough to get first result. For example, start from:
[[Hello World]]
You will notice the appearance of a green input connector named “Hello World” when you save this text after editing.
Short tags
A short tag is enclosed in the double square brackets [[]]. It is replaced by one-value data: by the left-top value from a spreadsheet or by the full text from an HTML source.
[[in data 1]]: -58
[[datamash|in data 2]]: 27
Short tags define input and output connectors for Datamash Software Chips and enable the use of this data inside HTML code. You can connect and re-connect your Datamash Software Chip and the HTML page or widget attached to your Datamash Software Chip will show this data in your website or such social networks as FaceBook, MySpace, Friendster, etc.
Full tags
Full tags are enclosed in the standard HTML angle brackets <>, or in the rich-text compatible double braces {{}}. The tag can contain many parameters. It is replaced by a <span> tag. The replacement text is used when no incoming data source is set or connected.
Simple example:
{{datamash in="in data 1"/}}: -58
<datamash in=”in data 2″/>: 27
A couple of such lines in the content of widget causes an appearance of 2 green rectangles. When you move the mouse over a green rectangle you can see the hint “in data 1″. In the picture below you can see that one green rectangle is filled by green and another one is empty. It happens when I connected upper rectangle with Excel Chip card connector by drag and drop. I didn’t perform such operation with lower Crewidget connector, this is why it is left white.
Replacement text example:
{{datamash in="in data 1"}}
The socket is not connected
{{/datamash}}: -58
<datamash in=”in data 2″>
The socket is not connected
</datamash>: 27
Table generation without CSS:
{{datamash in="in data 1" table="true"/}},
<datamash in="in data 1" table="true"/>:
This looks nice, but sometimes you need more accurate representation of data. Yes, you can use CSS!
Table generation with CSS:
<style type="text/css">
span.my table {
background-color: yellow;
color: blue;
padding: 10px;
border: thick double green;
}
span.my td {
padding: 2px;
border: 1px solid black;
text-align:center;
}
</style>
Let’s use it:
{{datamash in="in data 1" table="true" class="my"/}},
<datamash in="in data 1" table="true" class="my"/>:
This is almost perfect, but what if you need very specific sophisticated data representation? Use JavaScript in Crewidgets! Do not forget that Java scipt should be embedded into tag “script”:
<script type="text/javascript">
your text here
</script>
Let’s make Java Script function maketable for generating our table:
JavaScript-driven table generation:
function maketable(rows) {
var result = "<table style=\"padding:5px;border:2px dashed black\">";
for (var r = 0; r < rows.length; r++) {
var row = rows[r];
result += “<tr>”;
for (var c = 0; c < row.length; c++) {
result += “<td ” + (r % 2 && c % 3 ? “bgcolor=\”#eeaaee\”" : “bgcolor=\”#eeeeaa\”") + “>” + row[c] + “</td>”;
}
result += “</tr>”;
}
document.write(result + “</table>”);
}
{{datamash in="in data 1" table="maketable"/}},
<datamash in="in data 1" table="maketable"/>:
Now this looks gorgeous! With JavaScript you have almost no limits. For example, you can render incoming data as a Google map.
JavaScript-driven Google map generation:
function makemap(rows) {
document.write('<div id="google-map" ' +
'style="width: 300px; height: 300px; ' +
'border: 1px solid black;">Loading Google map...</div>');
if (!GBrowserIsCompatible()) return;
window.unload = GUnload;
var map = new GMap2(document.getElementById("google-map"),
{size:new GSize(400, 300)});
map.addControl(new GSmallMapControl);
map.addControl(new GMapTypeControl);
map.setCenter(new GLatLng(0, 0), 0);
var bounds = new GLatLngBounds;
for (var r = 0; r < rows.length; r++) {
var row = rows[r];
if (row.length < 4) continue;
try {
var point = new GLatLng(row[2], row[3]);
bounds.extend(point);
var marker = new GMarker(point, {title:row[0]});
marker.description = row[1];
GEvent.addListener(marker, “click”,
function() {
this.openInfoWindowHtml(this.description);
}
);
map.addOverlay(marker);
}
catch (ex) {
}
}
map.setCenter(bounds.getCenter(), map.getBoundsZoomLevel(bounds));
}
{{datamash in="in data 1" table="makemap"/}},
<datamash in="in data 1" table="makemap"/>:
Points in this map show the data from connectors which you defined in your code.
I see many useful applications with connecting your data to Google map and show your trip, show location of your friends, put information about web site visitors, etc. Some of such services you may have seen, but now you can make your own.
Loading ...
(3 votes, average: 4 out of 5)
(5 votes, average: 4.4 out of 5)
