101 lines
3.3 KiB
HTML
101 lines
3.3 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Neca Test</title>
|
|
<link rel="stylesheet" href="/style/layout.css"/>
|
|
<link rel="stylesheet" href="/style/theme.css"/>
|
|
<script src="/lib/jquery-2.1.1.min.js"></script>
|
|
<script src="/lib/jquery.flot.min.js"></script>
|
|
<script src="/lib/jquery.flot.categories.min.js"></script>
|
|
<script src="/lib/jquery.flot.pie.js"></script>
|
|
<script src="/lib/events.js"></script>
|
|
<script src="/lib/blocks.js"></script>
|
|
<script src="/lib/charts.js"></script>
|
|
<script src="/lib/piecharts.js"></script>
|
|
<script src="/lib/barcharts.js"></script>
|
|
<script src="/lib/log.js"></script>
|
|
|
|
<link rel="stylesheet" type="text/css" href="lib/jqcloud.css" />
|
|
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js"></script>
|
|
<script type="text/javascript" src="lib/jqcloud-1.0.4.js"></script>
|
|
<script src="/lib/wordcloud.js"></script>
|
|
|
|
</head>
|
|
<body class="container_12">
|
|
<h1>ECA Dashboard Template</h1>
|
|
|
|
<div class="grid_6 vert_4">
|
|
<p>This is the dashboard template file. The easiest way to get started is to think up a simple name (let's say we take 'dashboard'). Now copy <code>template.py</code> to <code>{name}.py</code> start a new module (so that's <code>dashboard.py</code>) and copy <code>template_static</code> to <code>{name}_static</code>.
|
|
<p>Now you can run the new project with: <pre>python neca.py -s {name}.py</pre>
|
|
<p>Further documentation on the ECA system can be found at <a href="https://github.com/utwente-db/eca/wiki">github.com/utwente-db/eca/wiki</a>, and demos can be found in the <code>demos/</code> directory.
|
|
</div>
|
|
<div class="grid_6 vert_4">
|
|
<p>In the sample <code>template.py</code> (which comes with the dashboard you're looking at right now), you will find the rules that power this example.
|
|
<p>Rules are written in <a href="https://www.python.org/">Python</a> and work as follows:
|
|
<pre>@event("foo")
|
|
def action(context, event):
|
|
print("Event " + event.name + "!")
|
|
</pre>
|
|
The <code>@event</code> part tells the system to fire the action whenever the event 'foo' occurs. The <code>def action(context, event):</code> part defines a new action that takes two arguments: the context and the event. The rest of the code is the action body.
|
|
</div>
|
|
|
|
<div class="clear"></div>
|
|
|
|
<div class="grid_4">
|
|
<p>The graph to the right is continuously filled with data generated by the rules.
|
|
<p>In <code>template.py</code> you can see that an event called 'sample' is fired again and again to create new data points for the graph.
|
|
<p>These points are then sent to the browser with:
|
|
<pre>emit('sample',{
|
|
'action': 'add',
|
|
'value': sample
|
|
})</pre>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div id="bargraph" class="grid_8 vert_4"></div>
|
|
|
|
<script>
|
|
// create a barchart chart block
|
|
block('#bargraph').barchart({
|
|
bar_options:
|
|
{
|
|
series: {
|
|
bar: { show: true }
|
|
},
|
|
bars: {
|
|
align: "center",
|
|
barWidth: 0.5
|
|
}
|
|
}
|
|
});
|
|
|
|
// connect sample event to graph
|
|
events.connect('barsample', '#bargraph');
|
|
</script>
|
|
|
|
<div id="wordcloud" class="grid_8 vert_4"></div>
|
|
|
|
<script>
|
|
// create a wordcloud block
|
|
block('#wordcloud').wordcloud({
|
|
word_options:
|
|
{
|
|
series: {
|
|
pie: { show: true }
|
|
},
|
|
legend: { show: false }
|
|
}
|
|
});
|
|
|
|
// connect sample event to graph
|
|
events.connect('wordsample', '#wordcloud');
|
|
</script>
|
|
|
|
|
|
// <div id="my_favorite_latin_words" class="grid_12 vert_8"></div>
|
|
|
|
</body>
|
|
</html>
|