I have a question too.
for the website:
def web_page():
"""Content for the web page."""
content = f"""
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<script type="text/javascript" src="smoothie.js"></script>
<title>Daten Logger FP2017</title>
<!-- CSS could also be loaded from local storage or be embedded. --->
<link rel='stylesheet' href='
https://cdn.jsdelivr.net/npm/water.css@2/out/water.css'>
</head>
<body>
<h1>Daten Logger FP2017</h1>
<p>Übersicht für die Powersupply FP2017</p>
<!-- All details are shown in a table --->
<div id="details"></div>
<!-- If you include Javascript then keep an eye on the escaping, here it's a Python f-string. --->
<form action="/logging_start" method="get">
Start Data Logging:
<button name="subject" type="submit" value="log_start">START</button>
</form>
<form action="/logging_stop" method="get">
Stop Data Logging:
<button name="subject" type="submit" value="log_stop">STOP</button>
</form>
<form action="/logging_file" method="get">
Logged Data:
<button name="subject_file" type="submit_file" value="csv_download">Download_CSV_File</button>
</form>
<canvas id="mycanvas" width="400" height="100"></canvas>
<script>
window.addEventListener('load', () => {{
// The dict can not be used directly
data = JSON.parse('{json.dumps(details)}');
var table = document.createElement('table'), row, cell1, cell2, cell3, cell4;
document.getElementById('details').appendChild(table);
for (let key in data) {{
row = table.insertRow();
cell1 = row.insertCell();
cell2 = row.insertCell();
cell3 = row.insertCell();
cell4 = row.insertCell();
cell1.innerHTML = key;
cell2.innerHTML = data[key];
}}
var smoothie = new SmoothieChart();
smoothie.streamTo(document.getElementById("mycanvas"));
// Data
var line1 = new TimeSeries();
var line2 = new TimeSeries();
// Add a random value to each line every second
setInterval(function() {{
line1.append({time.time()}, {time.monotonic()});
line2.append({time.time()}, {time.monotonic()});
}}, 1000);
// Add to SmoothieChart
smoothie.addTimeSeries(line1);
smoothie.addTimeSeries(line2);
}});
</script>
</body>
</html>
"""
return content
Somehow I am not getting any charts