olinpin/twitter-project
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

main layout and template

Browse Source
This commit is contained in:
Tim Wijma
2022-10-31 17:37:59 +01:00
parent 968c2686d6
commit da225e3d52
17 changed files with 44 additions and 697 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
dashboard_static/index.html
View File

@@ -1,48 +1,37 @@
<!DOCTYPE html>
<html>
<html lang="en">
<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>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Twitter sports dashboard</title>
<link rel="stylesheet" href="./style/style.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="./js/code.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.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>
<body>
<div class="container">
<div class="header">
<div class="sports">
<div class="sport baseball"></div>
<div class="sport basketball"></div>
<div class="sport volleyball"></div>
<div class="sport tennis"></div>
<div class="sport cricket"></div>
<div class="sport soccer"></div>
<div class="sport football"></div>
<div class="sport rugby"></div>
</div>
</div>
<div class="main">
<div class="leftcol"></div>
<div class="centercol"></div>
<div class="rightcol"></div>
</div>
</div>
</body>
<!-- <script>
// create a rolling chart block
block('#graph').rolling_chart({
memory: 150,
@@ -59,6 +48,5 @@ block('#graph').rolling_chart({
// connect sample event to graph
events.connect('sample', '#graph');
</script>
</body>
</html>
</script> -->
</html>