Modul ESP32 uporabimo za prikaz analogne vrednosti. Prav tako bomo s pomočjo gumba na uporabniškem vmesniku kontrolirali svetlečo diodo, ki je sicer vgrajena na modulu.
<html>
<head>
</head>
<body onload="load();">
<div >
<button type="button" onclick="vklop();">Vklop</button>
<button type="button" onclick="izklop();">Izklop</button>
<p></p>
<canvas id="cv" width = "300" height = "100" style="border:1px dashed #00c3c3; "></canvas>
</div>
<div class = "izpisRazred" id="izpis"></div>
<script type="text/javascript" charset="UTF-8">
var refreshInterval = 10;
var signData = '';
var beatData = '';
var timeData = '';
var potVrednost = 0;
var output = document.getElementById('izpis');
var stevec = 0;
var vrednostPotenc;
var prejVrednostPotenc;
var x = new Array(); // polje (Array) za x spremenljivko
var y = new Array();
var x2 = new Array(); // polje (Array) za x spremenljivko
var y2 = new Array();
var x3 = new Array(); // polje (Array) za x spremenljivko
var y3 = new Array();
var x4 = new Array(); // polje (Array) za x spremenljivko
var y4 = new Array();
var x5 = new Array(); // polje (Array) za x spremenljivko
var y5 = new Array();
var x6 = new Array(); // polje (Array) za x spremenljivko
var y6 = new Array();
var canvas, ctx; // spremenljivki za platno in kontekst (ctx)
var canvas2, ctx2; // spremenljivki za platno in kontekst (ctx)
var canvas3, ctx3; // spremenljivki za platno in kontekst (ctx)
function load() {
canvas = document.getElementById("cv");
ctx = canvas.getContext("2d");
ctx.font = '20px arial';
//* GRAF ******************************************************************************
ctx.lineWidth = "3";
ctx.strokeStyle = "#ef0077";
for (var i=0; i < 300; i++) { // zanka za zapolnitev polj z naključnimi vrednostmi
x[i] = i; // za x so vrednosti: 0, 1, 2, ...
y[i] = 50; // za y so vrednosti 300
ctx.lineTo(x[i], y[i]); // narišemo linijo do naslednje točke (postavimo jo na platno; ni še prikazana)
// za prikaz moramo zapisati še ctx.stroke()
}
ctx.stroke(); // linijo prikažemo na platnu (canvas)
//* GRAF *****************************************************************************
}
function log(msg) { // funkcija za izpis sporočil z izvedenim pomikom (scroll)
var node=document.createElement("tr"); // ustvarimo spremenljivko node kot vrstico tabele za izpis
var textnode=document.createTextNode(stevec + " | " + msg); // ustvarimo element s tekstom (vrednost stanja)
node.appendChild(textnode); // dodamo izpis k "node" t.j. vrstici tabele
output.insertBefore(node,output.childNodes[0]); // output je spremenljivka div-a t.j. output = document.getElementById("output")
if (stevec > 9) { // če je vrstic več kot 10 (šteti začnemo z 0)
output.removeChild(output.childNodes[10],output.childNodes[10]); // odstranimo najstarejši zapis
}
stevec = stevec + 1; // povečamo števec števila izpisanih sporočil
}
var connection = new WebSocket('ws://192.168.1.134:81/', ['arduino']);
var tempval = 0;
var messageReceived = true;
var BPM = 60; // used to hold the pulse rate
var Signal; // holds the incoming raw data
var IBI = 600; // holds the time between beats, the Inter-Beat Interval
var Pulse = false; // true when pulse wave is high, false when it's low
var QS = false; // becomes true when finds a beat.
var rate = Array(10);
var sampleCounter = 0;
var lastBeatTime = 0;
var P = 3071; // used to find peak in pulse wave
var T = 3071; // used to find trough in pulse wave
var thresh = 3071; // used to find instant moment of heart beat
var amp = 100; // used to hold amplitude of pulse waveform
var firstBeat = true; // used to seed rate array so we startup with reasonable BPM
var secondBeat = true; // used to seed rate array so we startup with reasonable BPM
connection.onopen = function () {
//connection.send('Message from Browser to ESP8266 yay its Working!! ' + new Date());
//connection.send('ping');
setInterval(function() {
//console.log('sending message to NODEMCU');
tempval++
if(messageReceived)
//connection.send('tempval: ' + tempval);
connection.send("msgFromCli");
messageReceived = false;
}, refreshInterval);
//connection.send('Time: ' + new Date());
};
connection.onerror = function (error) {
console.log('WebSocket Error ', error);
};
connection.onmessage = function (e) {
messageReceived = true;
//console.log('Server: ', e.data);
//connection.send('Time: ' + new Date());
potVrednost = parseInt(e.data);
Signal = potVrednost;
//console.log(Signal);
//console.log(Date.now());
sampleCounter = Date.now();
ctx.clearRect(0,0,canvas.width, canvas.height); // brišemo platno -> clearRect
ctx.beginPath(); // to vrstico moramo zapisati, da se prične izris vsebine na platnu znova
y.splice(0,1); // na mestu 0 v polju y izbrišemo eno vrednost
y[299] = potVrednost;
//var factor=1023; //faktor za skaliranje grafa, 300 UZ, 1023 za optiko
for (var i=0; i<300; i++)
{ // zanka za izris vrednosti na platnu
ctx.lineTo(x[i], (100 - (y[i] / 4095) * 100)); // narišemo linijo do naslednje točke ; 300 -, zaradi obrnjenega izrisa grafa, 0,0 je levo zgoraj na monitorju
}
ctx.stroke(); // če želimo linijo prikazati na platnu moramo uporabiti "stroke()"
ctx.fillText(potVrednost, 1, 15); //Izpišemo trenutno vrednost potenciometra
ctx.fillText("4095", 253, 15); //Izpišemo min vrednost potenciometra
ctx.fillText("0", 285, 100); // Izpišemo max vrednost potenciometra*/
//////////////////////////////////////////////////////////////////////////////
};
function vklop () {
connection.send("vklop");
}
function izklop () {
connection.send("izklop");
}
</script>
</body>
</html>
#include <Arduino.h>
#include "WiFi.h"
#include "ESPAsyncWebServer.h"
//#include "Hash.h"
const char* ssid = "kibernetika";
const char* password = "fovkranj";
AsyncWebServer server(81);
AsyncWebSocket ws("/");
volatile int Signal = 500; // holds the incoming raw data
char buffer[50];
const int numReadings = 33;
int readings[numReadings]; // the readings from the analog input
int readIndex = 0; // the index of the current reading
int total = 0; // the running total
int average = 0; // the average
int flag = 1;
int LED_BUILTIN = 2; // za vgrajeno LED
void onWsEvent(AsyncWebSocket * server, AsyncWebSocketClient * client,
AwsEventType type, void * arg, uint8_t *data, size_t len){
if(type == WS_EVT_CONNECT){
Serial.println("Websocket client connection received");
flag = 1; // smo povezani
} else if(type == WS_EVT_DISCONNECT){
flag = 0; // nismo povezani
Serial.println("Client disconnected");
} else if(type == WS_EVT_DATA){
//flag = 1;
Serial.println("Data received: ");
//for(int i=0; i < len; i++) {
String text = String((char) data[0]);
Serial.print((char) data[0]);
//Serial.print("x0" + (char) data[0]);
//}
if (text == "v") {
Serial.print("vklop");
digitalWrite(LED_BUILTIN, HIGH);
}
if (text == "i") {
Serial.print("izklop");
digitalWrite(LED_BUILTIN, LOW);
}
//uint8_t content[3] = {10,22,43};
//client->binary(content, 3);
Signal = average;
itoa(Signal,buffer,10);
//webSocket.sendTXT(num, buffer);
//webSocket.sendTXT(num, payload, lenght);
client->text(buffer);
//}
//Serial.println();
}
}
void setup() {
// Start Serial port
Serial.begin(115200);
//Serial.begin(9600);
pinMode (LED_BUILTIN, OUTPUT); // za vgrajeno LED
for (int thisReading = 0; thisReading < numReadings; thisReading++) {
readings[thisReading] = 0;
}
// Connect to access point
Serial.println("Connecting");
WiFi.begin(ssid, password);
while ( WiFi.status() != WL_CONNECTED ) {
delay(500);
Serial.print(".");
}
// Print our IP address
Serial.println("Connected!");
Serial.print("My IP address: ");
Serial.println(WiFi.localIP());
// Start WebSocket server and assign callback
//webSocket.begin();
//webSocket.onEvent(onWebSocketEvent);
ws.onEvent(onWsEvent);
server.addHandler(&ws);
server.begin();
}
void loop() {
// subtract the last reading:
total = total - readings[readIndex];
// read from the sensor:
readings[readIndex] = analogRead(A4);
// add the reading to the total:
total = total + readings[readIndex];
// advance to the next position in the array:
readIndex = readIndex + 1;
// if we're at the end of the array...
if (readIndex >= numReadings) {
// ...wrap around to the beginning:
readIndex = 0;
}
// calculate the average:
average = total / numReadings;
// send it to the computer as ASCII digits
// Look for and handle WebSocket data
//webSocket.loop();
delay(3); // delay in between reads for stability
}
/*
Smoothing
Reads repeatedly from an analog input, calculating a running average and
printing it to the computer. Keeps ten readings in an array and continually
averages them.
The circuit:
- analog sensor (potentiometer will do) attached to analog input 0
created 22 Apr 2007
by David A. Mellis <dam@mellis.org>
modified 9 Apr 2012
by Tom Igoe
This example code is in the public domain.
http://www.arduino.cc/en/Tutorial/Smoothing
*/