Мобильная версияPressure Waveform and Control Data
Pressure (cmH20)
%SLIDERVALUE%
Download Data
User Manual
< /code>
window.addEventListener('load', getReadings);
function updateslider(element) {
var sliderValue = document.getElementById("pressureSlider").value;
document.getElementById("pressliderValue").innerHTML = sliderValue;
console.log(sliderValue);
var xhr = new XMLHttpRequest();
xhr.open("GET", "/slider?value="+sliderValue, true);
xhr.send();
}
window.updateslider = updateslider;
const pressureData = [];
function updateChart(newValue) {
pressureData.push(parseFloat(newValue)); // Ensure numerical values
if (pressureData.length > 20) {
pressureData.shift();
pressureChart.data.labels.shift(); // Remove oldest label
}
// Update labels dynamically to match data points
pressureChart.data.labels = pressureData.map((_, index) => index + 1);
// Explicitly update the dataset reference
pressureChart.data.datasets[0].data = [...pressureData];
// Ensure Chart.js properly detects the update
pressureChart.update('none');
}
const ctx = document.getElementById('pressuregraph').getContext('2d');
const pressureChart = new Chart(ctx, {
type: 'line',
data: {
labels: [],
datasets: [{
label: 'Pressure (cmH20)',
data: [],
borderColor: 'blue',
borderWidth: 2,
fill: false,
tension: 0.2
}]
},
options: {
responsive: false,
scales: {
x: { title: { display: true, text: 'Data Points' } },
y: { title: { display: true, text: 'Pressure (cmH20)' } }
}
}
});
function getReadings() {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
}
};
xhr.open("GET", "/readings", true);
xhr.send();
}
if (!!window.EventSource) {
var source = new EventSource('/events');
source.addEventListener('open', function (e) {
console.log("Events Connected");
}, false);
source.addEventListener('error', function (e) {
if (e.target.readyState != EventSource.OPEN) {
console.log("Events Disconnected");
}
}, false);
source.addEventListener('pressure', function (e) {
updateChart(e.data);
}, false);
}
< /code>
#include
#include
#include
#include
#include
#include
const char* ssid = "";
const char* password = "";
AsyncWebServer server(80);
AsyncEventSource events("/events");
String sliderValue = "0";
const char* PARAM_INPUT = "value";
unsigned long lastTime = 0;
unsigned long timerDelay = 750;
String processor(const String& var){
//Serial.println(var);
if (var == "SLIDERVALUE"){
return sliderValue;
}
return String();
}
void initLittleFS() {
if (!LittleFS.begin()) {
Serial.println("An error has occurred while mounting LittleFS");
}
else{
Serial.println("LittleFS mounted successfully");
}
}
void initWiFi() {
WiFi.mode(WIFI_STA);
WiFi.begin(ssid, password);
Serial.println("Connecting to WiFi ..");
//Serial.println(cmH20)
while (WiFi.status() != WL_CONNECTED) {
Serial.print('.');
delay(1000);
}
Serial.println(WiFi.localIP());
}
void setup() {
Serial.begin(115200);
initWiFi();
Serial.println();
initLittleFS();
server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
request->send(LittleFS, "/index.html", "text/html");
});
server.on("/pressureslider", HTTP_GET, [] (AsyncWebServerRequest *request) {
String inputMessage;
// GET input1 value on /slider?value=
if (request->hasParam(PARAM_INPUT)) {
inputMessage = request->getParam(PARAM_INPUT)->value();
sliderValue = inputMessage;
}
else {
inputMessage = "No message sent";
}
Serial.println(inputMessage);
request->send(200, "text/plain", "OK");
});
server.on("/readings", HTTP_GET, [](AsyncWebServerRequest *request){
String json = "sample";
request->send(200, "application/json", json);
json = String();
});
events.onConnect([](AsyncEventSourceClient *client){
if(client->lastId()){
Serial.printf("Client reconnected! Last message ID that it got is: %u\n", client->lastId());
}
// send event with message "hello!", id current millis
// and set reconnect delay to 1 second
client->send("hello!", NULL, millis(), 10000);
});
server.addHandler(&events);
// Start server
server.begin();
}
void loop() {
String pressuredata = "sample";
if ((millis() - lastTime) > timerDelay) {
// Send Events to the client with the Sensor Readings Every 10 seconds
events.send("ping",NULL,millis());
events.send(pressuredata.c_str(),"pressure",millis());
lastTime = millis();
}
delay(100);
}
< /code>
When running the HTML file directly (locally), the script is recognized. So it can't be a naming issue. I
I have run out of ideas that I could implement.
Подробнее здесь: https://stackoverflow.com/questions/794 ... cript-file
