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

news2024/11/21 10:59:38

基于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 IE
      marginRight: 10,
      events: {
        load: function() {
          var series = this.series[0];
          setInterval(function() {
            var x = (new Date()).getTime(), // current time
                y = 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 data
        var 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 network
  Serial.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 drive

    server.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.coloradmin.cn/o/2244636.html

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

相关文章

PostgreSQL常用时间函数与时间计算提取示例说明

PostgreSQL常用时间函数与时间计算提取示例说明

文章目录 常用函数与常量to_timestamp(字符串转时间戳、数字转时间戳)date与to_date(字符串转日期、时间戳转日期)interval(时间计算)基本操作与格式混合运算 to_char(各种时间转字符串)extract(提取时间字段&#xff0c;年月日时分秒&#xff0c;周、季度&#xff0c;第几周、…
阅读更多...
【MATLAB源码-第218期】基于matlab的北方苍鹰优化算法(NGO)无人机三维路径规划，输出做短路径图和适应度曲线.

【MATLAB源码-第218期】基于matlab的北方苍鹰优化算法(NGO)无人机三维路径规划，输出做短路径图和适应度曲线.

操作环境&#xff1a; MATLAB 2022a 1、算法描述 北方苍鹰优化算法&#xff08;Northern Goshawk Optimization&#xff0c;简称NGO&#xff09;是一种新兴的智能优化算法&#xff0c;灵感来源于北方苍鹰的捕猎行为。北方苍鹰是一种敏捷且高效的猛禽&#xff0c;广泛分布于北…
阅读更多...
Android Studio启动模拟器显示超时

Android Studio启动模拟器显示超时

问题报错: Timed out after 300seconds waiting for emulator to come online. 解决方案&#xff1a;升级Android Emulator 情况二&#xff1a;Error while waiting for device:AVD Pixel_4a_API_32 is already running. If that is not the case, delete the files at E:\An…
阅读更多...
Stable Diffusion经典应用场景

Stable Diffusion经典应用场景

&#x1f33a;系列文章推荐&#x1f33a; 扩散模型系列文章正在持续的更新&#xff0c;更新节奏如下&#xff0c;先更新SD模型讲解&#xff0c;再更新相关的微调方法文章&#xff0c;敬请期待&#xff01;&#xff01;&#xff01;&#xff08;本文及其之前的文章均已更新&…
阅读更多...
linux 常用命令指南（存储分区、存储挂载、docker迁移）

linux 常用命令指南（存储分区、存储挂载、docker迁移）

前言&#xff1a;由于目前机器存储空间不够&#xff0c;所以‘斥巨资’加了一块2T的机械硬盘&#xff0c;下面是对linux扩容的一系列操作&#xff0c;包含了磁盘空间的创建、删除&#xff1b;存储挂载&#xff1b;docker迁移&#xff1b;anaconda3迁移等。 一、存储分区 1.1 …
阅读更多...
AI时代，百度的三大主义

AI时代，百度的三大主义

现实主义、长期主义、理想主义。 定焦One&#xff08;dingjiaoone&#xff09;原创 作者 | 苏琦 郑浩钧 编辑 | 魏佳 “人工智能很像是一次新的工业革命&#xff0c;这意味着它不会三五年就结束&#xff0c;也不会一两年就出现‘超级应用’&#xff0c;它更像是三五十年对于整…
阅读更多...
服务器Docker OOM RSS高问题排查思路

服务器Docker OOM RSS高问题排查思路

优质博文&#xff1a;IT-BLOG-CN 防走弯路为防止走弯路&#xff0c;强烈建议先仔细阅读以下加粗内容&#xff1a; 如果你的应用是因为公司最近降成本调小实例物理内存才出现docker oom&#xff0c;而之前从来没有出现过&#xff0c;那么大概率是堆内存太大导致&#xff0c;这种…
阅读更多...
Ubuntu Linux使用前准备动作_使用root登录图形化界面

Ubuntu Linux使用前准备动作_使用root登录图形化界面

Ubuntu默认是不允许使用 root 登录图形化界面的。这是出于安全考虑的设置。但如果有需要&#xff0c;可以通过以下步骤来实现使用 root 登录&#xff1a; 1、设置 root 密码 打开终端&#xff0c;使用当前的管理员账户登录系统。在终端中输入命令sudo passwd root&#xff0c…
阅读更多...
core 不可变类型 线程安全 record

core 不可变类型 线程安全 record

当一个类型的对象在创建时被指定状态后&#xff0c;就不会再变化的对象&#xff0c;我们称之为不可变类型。这种类型是线程安全的&#xff0c;不需要进行线程同步&#xff0c;非常适合并行计算的数据共享。它减少了更新对象会引起各种bug的风险&#xff0c;更为安全。 System.D…
阅读更多...
Python-简单病毒程序合集(一)

Python-简单病毒程序合集(一)

前言&#xff1a;简单又有趣的Python恶搞代码&#xff0c;往往能给我们枯燥无味的生活带来一点乐趣&#xff0c;激发我们对编程的最原始的热爱。那么话不多说&#xff0c;我们直接开始今天的编程之路。 编程思路&#xff1a;本次我们将会用到os,paltform,threading,ctypes,sys,…
阅读更多...
ForEach刷新UI机制

ForEach刷新UI机制

官网地址&#xff1a;ForEach 在ArkUI中&#xff0c;提供了ForEach循环语句&#xff0c;用来初始化一个列表数据&#xff0c;我们知道&#xff0c;当ForEach中的数组发生变化时&#xff0c;会引起UI的刷新&#xff0c;但是究竟如何变化&#xff0c;会引起UI怎样的刷新&#xf…
阅读更多...
如何解决pdf.js跨域从url动态加载pdf文档

如何解决pdf.js跨域从url动态加载pdf文档

摘要 当我们想用PDF.js从URL加载文档时&#xff0c;将会因遇到跨域问题而中断&#xff0c;且是因为会触发了PDF.js和浏览器的双重CORS block&#xff0c;这篇文章将会介绍&#xff1a;①如何禁用pdf.js的跨域&#xff1f;②如何绕过浏览器的CORS加载URL文件&#xff1f;②如何使…
阅读更多...
Three.js 相机控制器Controls

Three.js 相机控制器Controls

在 3D 场景中&#xff0c;摄像机的控制尤为重要&#xff0c;因为它决定了用户如何观察和与场景互动。Three.js 提供了多种相机控制器&#xff0c;最常用的有 OrbitControls、TrackballControls、FlyControls 和 FirstPersonControls。OrbitControls 适合用于查看和检查 3D 模型…
阅读更多...
C++小白实习日记——Day 5 gitee怎么删文件，测试文件怎么写循环

C++小白实习日记——Day 5 gitee怎么删文件，测试文件怎么写循环

昨晚一直内耗&#xff0c;一个程序写了三天写不出来&#xff0c;主要是耗时太多了&#xff0c;老板一直不满意。想在VScode上跑一下&#xff0c;昨晚一直报错。今天来公司重新搞了一下&#xff0c; 主要工作有&#xff1a; 1&#xff0c;读取当前时间用tscns 2&#xff0c;输…
阅读更多...
【从零开始的LeetCode-算法】3301. 高度互不相同的最大塔高和

【从零开始的LeetCode-算法】3301. 高度互不相同的最大塔高和

给你一个数组 maximumHeight &#xff0c;其中 maximumHeight[i] 表示第 i 座塔可以达到的 最大 高度。 你的任务是给每一座塔分别设置一个高度&#xff0c;使得&#xff1a; 第 i 座塔的高度是一个正整数&#xff0c;且不超过 maximumHeight[i] 。所有塔的高度互不相同。 请…
阅读更多...
利用uniapp开发鸿蒙：运行到鸿蒙模拟器—踩坑合集

利用uniapp开发鸿蒙：运行到鸿蒙模拟器—踩坑合集

从uniapp运行到鸿蒙模拟器上这一步&#xff0c;就有非常多的坑&#xff0c;一些常见的坑&#xff0c;官网都有介绍&#xff0c;就不再拿出来了&#xff0c;这里记录一下官网未记录的大坑 1.运行路径从hbuilderx启动鸿蒙模拟器 解决方法&#xff1a; Windows系统&#xff0c;官…
阅读更多...
基于UDP和TCP实现回显服务器

基于UDP和TCP实现回显服务器

目录 一. UDP 回显服务器 1. UDP Echo Server 2. UDP Echo Client 二. TCP 回显服务器 1. TCP Echo Server 2. TCP Echo Client 回显服务器 (Echo Server) 就是客户端发送什么样的请求, 服务器就返回什么样的响应, 没有任何的计算和处理逻辑. 一. UDP 回显服务器 1. UD…
阅读更多...
游戏引擎学习第17天

游戏引擎学习第17天

视频参考:https://www.bilibili.com/video/BV1LPUpYJEXE/ 回顾上一天的内容 1. 整体目标&#xff1a; 处理键盘输入&#xff1a;将键盘输入的处理逻辑从平台特定的代码中分离出来&#xff0c;放入更独立的函数中以便管理。优化消息循环&#xff1a;确保消息循环能够有效处理 …
阅读更多...
Ubuntu常见命令

Ubuntu常见命令

关于export LD_LIBRARY_PATHcmake默认地址CMakelists.txt知识扩充/home&#xff1a;挂载新磁盘到 /home 子目录 关于export LD_LIBRARY_PATH 程序运行时默认的依赖库的位置包括lib, /usr/lib ,/usr/local/lib 通过命令export LD_LIBRARY_PATHdesired_path:$LD_LIBRARY_PATH追加…
阅读更多...
Linux驱动开发快速入门——字符设备驱动（直接操作寄存器设备树版）

Linux驱动开发快速入门——字符设备驱动（直接操作寄存器设备树版）

Linux驱动开发快速入门——字符设备驱动 前言 笔者使用开发板型号&#xff1a;正点原子的IMX6ULL-alpha开发板。ubuntu版本为&#xff1a;20.04。写此文也是以备忘为目的。 字符设备驱动 本小结将以直接操作寄存器的方式控制一个LED灯&#xff0c;可以通过read系统调用可以…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023