'Not able to plot voltages graph (v1 vs v2) in a website using esp32 and arduino
I have started learning to build some good websites. In one of my projects, I wanted to display two voltages (named "POTvalue1" & "POTvalue2") on a website. The values of both the voltages will vary using a potentiometer.
Till here I have written an Arduino script and it is working perfectly fine. The problem arose when I tried to plot a graph (POTvalue1 vs POTvalue2 OR V1 vs V2) using chart.js. I tried to plot the graph, but the code seemed to be wrong. The graph wasn't showing any values neither on the x-axis nor on the y-axis. I wanted to plot a live graph on the website and the values changes when I change the value of the potentiometer.
It will be very helpful if someone can help me.
I am attaching both the Arduino code and HTML code here...
#include <WebServer.h>
#include <WebSocketsServer.h>
#include "webpage.h"
WebServer server(80);
WebSocketsServer webSocket = WebSocketsServer(81);
String JSONtxt;
const char* ssid = "realme 6i";
const char* password = "112233456789";
const int potPin1 = 34;
const int potPin2 = 35;
int offset = -10;
float v = 0;
float i = 0;
void handleRoot()
{
server.send(200, "text/html", webpageCode); //send webpage to the web browser
}
void setup()
{
Serial.begin(115200);
WiFi.begin(ssid, password);
while(WiFi.status() != WL_CONNECTED)
{
Serial.print("."); delay(500);
}
WiFi.mode(WIFI_STA);
Serial.print(" Local IP: ");
Serial.println(WiFi.localIP());
server.on("/", handleRoot);
server.begin();
webSocket.begin();
}
void loop()
{
webSocket.loop(); server.handleClient();
int volt1 = analogRead(35);
int volt2 = analogRead(34);
double voltage1 = map(volt1, 0,1023,0,2500)+offset;
double voltage2 = map(volt2, 0,1023, 0, 2500)+offset;
String voltage1String = String(float(voltage1)/500.0);
String voltage2String = String(float(voltage2)/500.0);
JSONtxt = "{\"POT1\":\""+voltage1String+"\",";
JSONtxt += "\"POT2\":\""+voltage2String+"\"}";
webSocket.broadcastTXT(JSONtxt);
String v1 = voltage1String;
Serial.print("voltage v1 = ");
Serial.println(v1);
String v2 = voltage2String;
Serial.print("voltage v2 = ");
Serial.println(v2);
delay(500);
}
And the webpage script
R"=====(
<!DOCTYPE HTML>
<html>
<head>
<style>
#dynRectangle1
{
width:0px;
height:12px;
top: 9px;
background-color: red;
z-index: -1;
margin-top:8px;
}
#dynRectangle2
{
width:0px;
height:12px;
top: 9px;
background-color: red;
z-index: -1;
margin-top:8px;
}
body {background-color:rgba(128,128,128,0.322); font-family:calibri}
h1 {font-size: 40px; color: black; text-align: center}
h2 {font-size: 30px; color: blue}
h3 {font-size: 17px; color:blue}
div.h1 {background-color: whitesmoke;}
</style>
<script type="text/javascript">
window.onload = function () {
var dps = []; //dataPoints.
var chart = new CanvasJS.Chart("chartContainer",{
title :{
text: "Graph"
},
axisX: {
title: "V1"
},
axisY: {
title: "V2"
},
data: [{
type: "spline",
dataPoints : dps
}]
});
chart.render();
var xVal = dps.length + 1;
var yVal = dps.length + 1;
var updateInterval = 1000;
var updateChart = function () {
yVal = POTvalue1;
dps.push({x: xVal,y: yVal});
xval = POTvalue2;
if (dps.length > 10 )
{
dps.shift();
}
chart.render();
};
setInterval(function(){updateChart()}, updateInterval);
}
</script>
<script type=" " src=" "></script>
</head>
<body>
<h1><div class="h1">Voltage V1</div></h1>
<h2>
POT voltage 1: <span style="color:rgb(216, 3, 3)" id="POTvalue1">0</span> V
</h2>
<h3>
0V             
             3.5V
<div id="dynRectangle1"></div>
</h3>
<h1><div class="h1">Voltage V2</div></h1>
<h2>
POT voltage 2: <span style="color:rgb(216, 3, 3)" id="POTvalue2">0</span> V
</h2>
<h3>
0V             
             3.5V
<div id="dynRectangle2"></div>
</h3>
<div id="chartContainer" style="height: 370px; width: 100%;"></div>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<script>
InitWebSocket()
function InitWebSocket()
{
websock = new WebSocket('ws://'+window.location.hostname+':81/');
websock.onmessage=function(evt)
{
JSONobj = JSON.parse(evt.data);
document.getElementById('POTvalue1').innerHTML = JSONobj.POT1;
var pot1 = parseInt(JSONobj.POT1 * 135);
document.getElementById("dynRectangle1").style.width = pot1+"px";
document.getElementById('POTvalue2').innerHTML = JSONobj.POT2;
var pot2 = parseInt(JSONobj.POT2 * 135);
document.getElementById("dynRectangle2").style.width = pot2+"px";
}
}
</script>
</body>
</html>
)=====";
Please help me out Elements
- esp32
- potentimeter*1
- diode*1
- resistor 10K*1
- voltage sensor*2
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|