基于arduino 用ESP8266获取实时MAX30102 血氧数据动态曲线显示在网页上

基于arduino 用ESP8266获取实时MAX30102 血氧数据动态曲线显示在网页上

原理： ESP8266获取MAX30102 血氧数据（R,IR,G的值）发送到路由器局域网内，局域网内的手机电脑，访问ESP的ip地址，获取实时的血氧数据动态曲线显示在网页上

网页显示内容：
在这里插入图片描述
代码见最后，打开arduino创建一个文件，将C语言部分的代码拷贝到arduino中，另存为AXJXDemo4，在文件夹中新建txt，打开讲HTML部分代码粘贴到txt中，另存为index.h ，如图所示：
在这里插入图片描述
用arduino打开AXJXDemo4.ino，如图所示;
在这里插入图片描述
添加相关的库文件，添加wifi，密码。打开串口监视器，编译上传。串口监视器显示局域网的ip 地址。
连接MAX30102，接线信息：-5V = 5V (3.3V is allowed) -GND = GND -SDA = A4 (or SDA) -SCL = A5 (or SCL)
重启ESP, 局域网内的手机电脑访问ip地址，如图一所示,
串口监视器打印了MAX30102 的三种数据R,IR,G值）示例显示的是G,可以根据实际情况修改，位置在html： y = parseFloat(document.getElementById(“adc_G”).innerText);

Html网页显示代码：

const char webpage[] PROGMEM = R"=====(
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<TITLE>心电图DEMO演示</TITLE><script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="http://code.highcharts.com/highcharts.js"></script>
<script type="text/javascript">
$(function () {
$(document).ready(function() {Highcharts.setOptions({global: {useUTC: false}});var chart;var display_value= parseFloat(document.getElementById("adc_R").innerText); $('#container').highcharts({chart: {type: 'spline',animation: Highcharts.svg, // don't animate in old IEmarginRight: 10,events: {load: function() {var series = this.series[0];setInterval(function() {var x = (new Date()).getTime(), // current timey = parseFloat(document.getElementById("adc_G").innerText);series.addPoint([x, y], true, true);}, 1000);// 间隔}}},title: {text: '心电动态图'},xAxis: {type: 'datetime',tickPixelInterval: 100},yAxis: {title: {text: '纵轴'},plotLines: [{value: 0,width: 1,color: '#808080'}]},tooltip: {formatter: function() {return Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +Highcharts.numberFormat(this.y, 2);}},legend: {enabled: false},exporting: {enabled: false},series: [{name: 'Random data',data: (function() {// generate an array of random datavar data = [],time = (new Date()).getTime(),i;// 数据在这里初始化for (i = -9; i <= 0; i++) {data.push({x: time + i * 10000, y: Math.random()*5  //Math.random()*500   // y: 5});}return data;})()}]});
});});setInterval(function() {getData_R();getData_IR();getData_G();
}, 1000); function getData_R() {var xhttp_R = new XMLHttpRequest();xhttp_R.onreadystatechange = function() {if (this.readyState == 4 && this.status == 200) {document.getElementById("adc_R").innerHTML = this.responseText; } };xhttp_R.open("GET", "adcread_R", true);xhttp_R.send();
}
function getData_IR() {var xhttp_IR = new XMLHttpRequest();xhttp_IR.onreadystatechange = function() {if (this.readyState == 4 && this.status == 200) {document.getElementById("adc_IR").innerHTML = this.responseText; } };xhttp_IR.open("GET", "adcread_IR", true);xhttp_IR.send();
}
function getData_G() {var xhttp_G = new XMLHttpRequest();xhttp_G.onreadystatechange = function() {if (this.readyState == 4 && this.status == 200) {document.getElementById("adc_G").innerHTML = this.responseText; } };xhttp_G.open("GET", "adcread_G", true);xhttp_G.send();
}function getData_value() {
var a=document.getElementById("test").value;if (a==1) {parseFloat(document.getElementById("adc_span").innerText=a);} else if (a==2) {parseFloat(document.getElementById("adc_span").innerText=a);} else {parseFloat(document.getElementById("adc_span").innerText=a);}}
</script>
<style>/* 隐藏原生的select样式 */select {-webkit-appearance: none;-moz-appearance: none;appearance: none;padding: 5px;border: 0px solid #999;border-radius: 5px;background-color: #f1f1f1;color: #333;font-size: 16px;width: 50px;text-align: center;float: right;}
</style>
</HEAD>
<BODY>
<div name="status" style="text-align:center"><b>MAX30105:_R:<span type="text" id="adc_R" style="color:#F00" >6</span>  <!--网页测试期间值为6，其他时间为空-->_IR:<span id="adc_IR" style="color:rgb(9, 226, 56)">7</span>_G:<span id="adc_G" style="color:rgb(15, 7, 228)">8</span>
</b></div><select id="test" onchange="getData_value()"><option value ="1">R</option><option value ="2">IR</option><option value ="3">G</option></select><span id="adc_span" style="float: right;">3</span><br><div id="container" style="width:100%;height:calc(100vh - 60px);margin:0 auto;"></div>
</BODY>
</HTML>)=====";

C语言部分：

#include <ESP8266WiFi.h>
#include <WiFiClient.h>
#include <ESP8266WebServer.h>
#include "index.h"
#include "MAX30105.h"
MAX30105 particleSensor;const char* ssid = " ";            // WIFI名和密码
const char* password = " ";
ESP8266WebServer server(80);void handleRoot(){String s = webpage;server.send(200, "text/html", s);
}
void MAX30105_R(){server.send(200, "text/plane", String(particleSensor.getRed()));
}
void MAX30105_IR(){server.send(200, "text/plane", String(particleSensor.getIR()));
}
void MAX30105_G(){server.send(200, "text/plane", String(particleSensor.getGreen()));
}
void setup(){// put your setup code here, to run once:Serial.begin(115200);Serial.println();         // Connect to WiFi networkSerial.println();Serial.print("Connecting to "); Serial.println(ssid);WiFi.begin(ssid, password);while (WiFi.status() != WL_CONNECTED) { delay(500); Serial.print(".");}Serial.println("");Serial.println("WiFi connected");server.begin();Serial.println(WiFi.localIP());Serial.println("MAX30105 is running！！！");if (particleSensor.begin() == false){Serial.println("MAX30105 was not found. Please check wiring/power. "); while (1); }particleSensor.setup(); //Configure sensor. Use 6.4mA for LED driveserver.on("/", handleRoot);server.on("/adcread_R", MAX30105_R);server.on("/adcread_IR", MAX30105_IR);server.on("/adcread_G", MAX30105_G);server.begin();
}void loop(){// put your main code here, to run repeatedly:Serial.print(" R["); Serial.print(particleSensor.getRed());  Serial.print("] IR["); Serial.print(particleSensor.getIR());Serial.print("] G["); Serial.print(particleSensor.getGreen()); Serial.print("]"); Serial.println();//delay(1000);server.handleClient();
}

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/web/60188.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

OpenCV DNN

OpenCV DNN

OpenCV DNN 和 PyTorch 都是常用的深度学习框架&#xff0c;但它们的定位、使用场景和功能有所不同。让我们来对比一下这两个工具&#xff1a; 1. 框架和功能 OpenCV DNN&#xff1a;OpenCV DNN 模块主要用于加载和运行已经训练好的深度学习模型&#xff0c;支持多种深度学习…
阅读更多...
vue3:scss引用

vue3:scss引用

原文查看&#xff1a;https://mp.weixin.qq.com/s?__bizMzg3NTAzMzAxNA&mid2247484356&idx2&sn44b127cd394e217b9e3c4eccafdc0aa9&chksmcec6fb1df9b1720b7bd0ca0b321bf8a995fc8cba233deb703512560cbe451cfb1f05cdf129f6&token1776233257&langzh_CN#rd…
阅读更多...
在使用 TypeORM 的项目中，如果不希望查询返回 password 字段，可以通过以下几种方式实现

在使用 TypeORM 的项目中，如果不希望查询返回 password 字段，可以通过以下几种方式实现

在使用 TypeORM 的项目中&#xff0c;如果不希望查询返回 password 字段&#xff0c;可以通过以下几种方式实现&#xff1a; 1. 使用 Exclude 装饰器&#xff08;推荐&#xff09; 通过 class-transformer 的 Exclude 装饰器隐藏字段&#xff0c;使得返回的对象在序列化时不会…
阅读更多...
Gentoo的软件包管理机制学习笔记

Gentoo的软件包管理机制学习笔记

Gentoo的软件包被mask锁定主要是出于以下几个原因&#xff1a; 防止安装可能导致系统不稳定的软件包&#xff1a;有时候&#xff0c;新的软件版本可能存在问题&#xff0c;或者与当前系统不兼容&#xff0c;为了防止这些问题影响系统的稳定性&#xff0c;开发者会将这些软件包m…
阅读更多...
SrpingBoot基础

SrpingBoot基础

SpringBoot基本框架中重要常用的包讲解: .idea包和.mvn包框架生成不经常用 src包下主要存放前后端代码: main包下的java包存放的是后端java代码主要负责数据处理 resource包下存放的是配置资源和前端页面,其中static中存放的是前端html网页一般存放静 态资源,templates包…
阅读更多...
Nacos实现IP动态黑白名单过滤

Nacos实现IP动态黑白名单过滤

一些恶意用户&#xff08;可能是黑客、爬虫、DDoS 攻击者&#xff09;可能频繁请求服务器资源&#xff0c;导致资源占用过高。因此我们需要一定的手段实时阻止可疑或恶意的用户&#xff0c;减少攻击风险。 本次练习使用到的是Nacos配合布隆过滤器实现动态IP黑白名单过滤 文章…
阅读更多...
vue-next-admin框架配置（vue）

vue-next-admin框架配置（vue）

vue-next-admin 先安装依赖 npm i 依赖, npm run dev 运行 1.配置代理 2.把他的逻辑和自己的登录判断逻辑结合(我的放下面&#xff0c;可以参考哦&#xff0c;可以直接使用&#xff0c;到时候修改登录逻辑就好)&#xff0c;别忘了引入ajxio哦 const onSignIn async () &g…
阅读更多...
算法定制LiteAIServer视频智能分析平台工业排污检测算法智控环保监管

算法定制LiteAIServer视频智能分析平台工业排污检测算法智控环保监管

随着工业化进程的加快&#xff0c;环境污染问题愈加严重&#xff0c;尤其是工业排污对生态环境的影响引发了广泛关注。在此背景下&#xff0c;视频智能分析平台LiteAIServer工业排污检测算法应运而生&#xff0c;作为一种先进的智能化解决方案&#xff0c;它在监测和管理工业排…
阅读更多...
使用 Postman 设置 Bearer Token 进行身份验证

使用 Postman 设置 Bearer Token 进行身份验证

学习笔记 1. 打开 Postman 并创建新请求 打开 Postman。 在左上角点击 按钮&#xff0c;创建一个新的请求。 2. 选择 HTTP 方法 在请求类型&#xff08;默认为 GET&#xff09;旁边的下拉菜单中&#xff0c;选择你需要的 HTTP 方法&#xff0c;如 POST、GET、PUT 等。 3…
阅读更多...
mini-lsm通关笔记Week2Day5

mini-lsm通关笔记Week2Day5

项目地址&#xff1a;https://github.com/skyzh/mini-lsm 个人实现地址&#xff1a;https://gitee.com/cnyuyang/mini-lsm Summary 在本章中&#xff0c;您将&#xff1a; 实现manifest文件的编解码。系统重启时从manifest文件中恢复。 要将测试用例复制到启动器代码中并运行…
阅读更多...
【WPF】Prism学习（六）

【WPF】Prism学习（六）

Prism Dependency Injection 1.依赖注入&#xff08;Dependency Injection&#xff09; 1.1. Prism与依赖注入的关系&#xff1a; Prism框架一直围绕依赖注入构建&#xff0c;这有助于构建可维护和可测试的应用程序&#xff0c;并减少或消除对静态和循环引用的依赖。 1.2. P…
阅读更多...
学习ASP.NET Core的身份认证（基于Cookie的身份认证1）

学习ASP.NET Core的身份认证（基于Cookie的身份认证1）

B/S架构程序可通过Cookie、Session、JWT、证书等多种方式认证用户身份&#xff0c;虽然之前测试过用户登录代码&#xff0c;也学习过开源项目中的登录认证&#xff0c;但其实还是对身份认证疑惑甚多&#xff0c;就比如登录验证后用户信息如何保存、客户端下次连接时如何获取用户…
阅读更多...
使用Cursor和Claude AI打造你的第一个App

使用Cursor和Claude AI打造你的第一个App

大家好&#xff0c;使用Cursor和Claude AI打造应用程序是一个结合智能代码辅助和人工智能对话的创新过程。Cursor是一个编程辅助工具&#xff0c;它通过智能代码补全、聊天式AI对话和代码生成等功能&#xff0c;帮助开发者提高编程效率。Claude AI则是一个强大的人工智能平台&a…
阅读更多...
ssm152家庭财务管理系统设计与实现+jsp(论文+源码)_kaic

ssm152家庭财务管理系统设计与实现+jsp(论文+源码)_kaic

毕 业 设 计&#xff08;论 文&#xff09; 题目&#xff1a;家庭财务管理系统设计与实现 摘 要 现代经济快节奏发展以及不断完善升级的信息化技术&#xff0c;让传统数据信息的管理升级为软件存储&#xff0c;归纳&#xff0c;集中处理数据信息的管理方式。本家庭财务管理系…
阅读更多...
Spring Boot3 实战案例合集上线了

Spring Boot3 实战案例合集上线了

Spring Boot3实战案例合集
阅读更多...
《深入理解 Spring MVC 工作流程》

《深入理解 Spring MVC 工作流程》

一、Spring MVC 架构概述 Spring MVC 是一个基于 Java 的轻量级 Web 应用框架&#xff0c;它遵循了经典的 MVC&#xff08;Model-View-Controller&#xff09;设计模式&#xff0c;将请求、响应和业务逻辑分离&#xff0c;从而构建出灵活可维护的 Web 应用程序。 在 Spring MV…
阅读更多...
LeetCode - #139 单词拆分

LeetCode - #139 单词拆分

文章目录 前言摘要1. 描述2. 示例3. 答案题解动态规划的思路代码实现代码解析1. **将 wordDict 转换为 Set**2. **初始化 DP 数组**3. **状态转移方程**4. **返回结果** **测试用例**示例 1:示例 2:示例 3: 时间复杂度空间复杂度总结关于我们 前言 本题由于没有合适答案为以往遗…
阅读更多...
LLM( Large Language Models)典型应用介绍 1 -ChatGPT Large language models

LLM( Large Language Models)典型应用介绍 1 -ChatGPT Large language models

ChatGPT 是基于大型语言模型&#xff08;LLM&#xff09;的人工智能应用。 GPT 全称是Generative Pre-trained Transformer。-- 生成式预训练变换模型&#xff1a; Generative&#xff08;生成式&#xff09;&#xff1a;可以根据输入生成新的文本内容&#xff0c;例如回答问题…
阅读更多...
维护在线重做日志

维护在线重做日志

学习目标 解释在线重做日志文件的目的概述在线重做日志文件的结构控制日志开关和检查点多路复用和维护在线重做日志文件使用OMF管理在线重做日志文件获取在线重做日志文件信息 在线重做日志文件提供了在数据库发生故障时重做事务的方法。 每个事务都同步写入重做日志缓冲区&a…
阅读更多...
分布式数据库中间件可以用在哪些场景呢

分布式数据库中间件可以用在哪些场景呢

在数字化转型的浪潮中&#xff0c;企业面临着海量数据的存储、管理和分析挑战。华为云分布式数据库中间件&#xff08;DDM&#xff09;作为一款高效的数据管理解决方案&#xff0c;致力于帮助企业在多个场景中实现数据的高效管理和应用&#xff0c;提升业务效率和用户体验。九河…
阅读更多...
最新文章

Copyright @ 2022~2023