65 lines
2.4 KiB
HTML
65 lines
2.4 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/core.js"></script>
|
|
<script src="/lib/charts.js"></script>
|
|
<script src="/lib/log.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="graph" class="grid_8 vert_4"></div>
|
|
|
|
<script>
|
|
// create a rolling chart block
|
|
block('#graph').rolling_chart({
|
|
memory: 150,
|
|
chart: {
|
|
yaxis: {
|
|
min: -100,
|
|
max: 100
|
|
},
|
|
xaxis: {
|
|
show: false
|
|
}
|
|
}
|
|
});
|
|
|
|
// connect sample event to graph
|
|
events.connect('sample', '#graph');
|
|
</script>
|
|
</body>
|
|
</html>
|