Using DS3231 RTC to timestamp the chart?
35 views
Skip to first unread message
Charles
Jan 26, 2023, 12:46:10 PM1/26/23
to Smoothie Charts
I use ESP32 to serve a webpage in AP mode. The client do not have access to internet and Date.now() do not work. I guess?
My logger measure sensors value every second (temperature and time) that I want to plot.
The basic smoothie chart example do not show the data and I think this is cause by the Date.now function not working. I tried to put my own timestamp data (rtc.timestamp()) but this also fail.
Can someone guide me?
Thank you
My code:
def web_page():
html = """<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="/smoothie.js"></script>
<script type="text/javascript">
// Randomly add a data point every 500ms
var line1 = new TimeSeries();
setInterval(function() {
line1.append(Date.now(), Math.random()); ****<--------** Here is my problem I think?
}, 1000);
function createTimeline() {
var chart = new SmoothieChart();
chart.addTimeSeries(line1, { strokeStyle: 'rgba(0, 255, 0, 1)', fillStyle: 'rgba(0, 255, 0, 0.2)', lineWidth: 4 });
chart.streamTo(document.getElementById("chart"), 500);
}
</script>
</head>
<body onload="createTimeline()">
<p>The <em>hello world</em> of <a href="../">Smoothie Charts</a>. View source.</p>
<canvas id="chart" width="400" height="100"></canvas>
</body>
</html>"""
return html
html = """<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="/smoothie.js"></script>
<script type="text/javascript">
// Randomly add a data point every 500ms
var line1 = new TimeSeries();
setInterval(function() {
line1.append(Date.now(), Math.random()); ****<--------** Here is my problem I think?
}, 1000);
function createTimeline() {
var chart = new SmoothieChart();
chart.addTimeSeries(line1, { strokeStyle: 'rgba(0, 255, 0, 1)', fillStyle: 'rgba(0, 255, 0, 0.2)', lineWidth: 4 });
chart.streamTo(document.getElementById("chart"), 500);
}
</script>
</head>
<body onload="createTimeline()">
<p>The <em>hello world</em> of <a href="../">Smoothie Charts</a>. View source.</p>
<canvas id="chart" width="400" height="100"></canvas>
</body>
</html>"""
return html
Reply all
Reply to author
Forward
0 new messages