Hi! I'm using a GSR sensor to measure stress levels, and want to display them in a html webpage I made. I'm using an Arduino UNO with a Grove Base shield that connects to the GSR sensor. The Arduino is connected to my computer via USB, and I want to display the html data in this same computer. What is the simplest way to achieve this?
Here is the code I'm using to obtain the GSR and stress data:
const int GSR = A0;
int sensorValue = 0;
int gsr_average = 0;
int samples = 20;
// Calibration values based on your observations
int minGSR = 0; // Minimum GSR value when stressed
int maxGSR = 390; // Maximum GSR value when relaxed
void setup() {
Serial.begin(9600);
}
void loop() {
long sum = 0;
for (int i = 0; i < samples; i++) {
sensorValue = analogRead(GSR);
sum += sensorValue;
delay(5);
}
gsr_average = sum / samples;
// Map the GSR average value to a 0-100 scale
int stressPercentage = map(gsr_average, minGSR, maxGSR, 100, 0);
// Ensure the stress percentage is within the range 0-100
stressPercentage = constrain(stressPercentage, 0, 100);
Serial.print("GSR Average: ");
Serial.print(gsr_average);
Serial.print(" - Stress Level: ");
Serial.print(stressPercentage);
Serial.println("%");
delay(500);
}
As you can seem the data is constantly changing, so the HTML webpage would have to be updated accordingly. Here is the HTML code (file paths have been redacted):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>VITA</title>
<style>
body {
margin: 0;
padding: 0;
background-image: url("C:/Users/graci/OneDrive/Documentos/Tesina/HTML/FONDO.png"); /* Specify the file path to your background image */
background-size: cover; /* Adjusts the size of the background image to cover the entire container */
background-position: center; /* Centers the background image */
font-family: Outfit, sans-serif; /* Example font-family */
}
/* Additional CSS styles for your elements */
</style>
</head>
<body>
<div style="width: 1890px; height: 1120px; position: relative;">
<div style="width: 1299.38px; left: 295px; top: 80px; position: absolute; text-align: center; color: #1E455B; font-size: 126px; font-family: Outfit; font-weight: 700; letter-spacing: 6.30px; word-wrap: break-word">Mis signos VITAles</div>
<div style="left: 1157.25px; top: 367px; position: absolute; flex-direction: column; justify-content: flex-start; align-items: center; gap: 29.53px; display: inline-flex">
<div style="width: 252px; height: 252px; position: relative">
<div style="width: 252px; height: 252px; left: 0px; top: 0px; position: absolute">
<div style="width: 252px; height: 252px; left: 0px; top: 0px; position: absolute; background: #A3DCEE; border-radius: 9999px"></div>
<div style="width: 189px; height: 189px; left: 31.50px; top: 31.50px; position: absolute; background: #C1E7F4; border-radius: 9999px"></div>
<div style="width: 126px; height: 126px; left: 63px; top: 63px; position: absolute; background: #EBF7FB; border-radius: 9999px"></div>
</div>
<img src="C:\Users\graci\OneDrive\Documentos\Tesina\HTML\cardiaca.svg" style="width: 52.50px; height: 48.17px; left: 99.75px; top: 102.38px; position: absolute;">
</div>
<div style="flex-direction: column; justify-content: flex-start; align-items: center; gap: 31.50px; display: flex">
<div style="width: 630px; height: 59.06px; text-align: center; color: #31A3C6; font-size: 63px; font-family: Outfit; font-weight: 500; letter-spacing: 1.26px; word-wrap: break-word">Frecuencia Cardiaca</div>
<div style="width: 630px; text-align: center; color: #0D0D0D; font-size: 55.13px; font-family: Outfit; font-weight: 400; line-height: 63px; word-wrap: break-word">- lpm</div>
<div style="width: 630px; height: 39.38px; text-align: center; color: #909DA6; font-size: 39.38px; font-family: Outfit; font-weight: 300; line-height: 63px; word-wrap: break-word">Pulso regular en adultos: 60/100</div>
</div>
</div>
<div style="left: 102px; top: 367px; position: absolute; flex-direction: column; justify-content: flex-start; align-items: center; gap: 29.53px; display: inline-flex">
<div style="width: 252px; height: 252px; position: relative">
<div style="width: 252px; height: 252px; left: 0px; top: 0px; position: absolute">
<div style="width: 252px; height: 252px; left: 0px; top: 0px; position: absolute; background: #A3DCEE; border-radius: 9999px"></div>
<div style="width: 189px; height: 189px; left: 31.50px; top: 31.50px; position: absolute; background: #C1E7F4; border-radius: 9999px"></div>
<div style="width: 126px; height: 126px; left: 63px; top: 63px; position: absolute; background: #EBF7FB; border-radius: 9999px"></div>
</div>
<img src="C:\Users\graci\OneDrive\Documentos\Tesina\HTML\estres.svg" style="width: 52.37px; height: 52.50px; left: 99.82px; top: 99.75px; position: absolute;">
</div>
<div style="flex-direction: column; justify-content: flex-start; align-items: center; gap: 31.50px; display: flex">
<div style="width: 630px; height: 59.06px; text-align: center; color: #31A3C6; font-size: 63px; font-family: Outfit; font-weight: 500; letter-spacing: 1.26px; word-wrap: break-word">Nivel de Estrés</div>
**<div style="width: 630px; text-align: center; color: #0D0D0D; font-size: 55.13px; font-family: Outfit; font-weight: 400; line-height: 63px; word-wrap: break-word">stressPercentage</div>**
** <div style="width: 630px; height: 39.38px; text-align: center; color: #909DA6; font-size: 39.38px; font-family: Outfit; font-weight: 300; line-height: 63px; word-wrap: break-word">Nivel GSR: gsr_average</div>**
</div>
</div>
</div>
</body>
</html>
The relevant lines are, where stressPercentage and gsr_average are the data obtained in the Arduino Code.
**<div style="width: 630px; text-align: center; color: #0D0D0D; font-size: 55.13px; font-family: Outfit; font-weight: 400; line-height: 63px; word-wrap: break-word">stressPercentage</div>**
** <div style="width: 630px; height: 39.38px; text-align: center; color: #909DA6; font-size: 39.38px; font-family: Outfit; font-weight: 300; line-height: 63px; word-wrap: break-word">Nivel GSR: gsr_average</div>**
It's my first Arduino project, so any help would be appreciated!