-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathflow.html
28 lines (24 loc) · 1.11 KB
/
flow.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<html>
<body>
<!--
tibberflow.html
connects to Tibber API, subscribes to realtime websocket
draws chart using chart.js
uses Tibber demo token / homeid if nothing is provided
very basic HTML / Javascript only
websocket script based on: https://github.com/gulars/Tibber-Realtime-Kw-Meter
chart script based on dynamic chart by jordanwillis: https://codepen.io/jordanwillis/pen/bqaGRR
Questions? Ask me: [email protected]
-->
<div id="display" style="background-color: #e9e9e9"></div>
Tibber Token: <input type="text" id="token" name="token" placeholder="Tibber Token" size="30"></br>
Tibber homeId: <input type="text" id="homeid" name="homeid" placeholder="Tibber homeId" size="30"></br>
Interval: <select id="interval"><option value="3">3s</option><option value="10">10s</option><option value="30">30s</option></select>
<input type="button" id="startstop" value="Let's go!" onClick="startStop();">
<div style="width:80%;">
<canvas id="chart"></canvas>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<script src="tibber-flow.js"></script>
</body>
</html>