21ic电子技术开发论坛 › 单片机与嵌入式系统 › 英飞凌MCU论坛 › 【英飞凌PSOC 4000T DIY】4、悬停触摸按键控制WebServer ...
返回列表 发新帖我要提问

[CAPSENSE™] 【英飞凌PSOC 4000T DIY】4、悬停触摸按键控制WebServer红色方块运动

[复制链接]
 楼主| sujingliang 发表于 2025-5-7 14:06 | 显示全部楼层 |阅读模式
<
英飞凌PSOC, 4000T, DIY, Psoc 4
本帖最后由 sujingliang 于 2025-5-8 16:24 编辑

感应按键和悬停触摸技术是PSOC 4000T系列套装的亮点。英飞凌 PSOC 4000T 提供的感应按键和悬停触摸扩展板，以其卓越的性能和精致的设计，为按键控制带来了全新的体验。为了实现更灵活的控制功能，我设计并制作了一个 WIFI + BLE 模块连接扩展板。该扩展板能够将 MCU 开发板与感应按键及悬停触摸扩展板连接，并借助串口无线模块实现信号的发送与接收。
在之前的文章《【英飞凌 PSOC 4000T DIY】3、液位监测之 MQTT》中，我已初步展示了该扩展板的应用潜力。本文将在此基础上进一步拓展，结合自制的扩展板和悬停触摸扩展板，实现一个有趣的交互功能：通过悬停触摸按键控制 WebServer 上的红色方块运动。这是交互设计的一次探索。




一、硬件连接&逻辑示意图




MCU端使用WIFI模块,通过http协议将按键指令发送Webserver，观察者可以登录浏览器查看结果。

二、Web服务器搭建（node.js）
1、安装依赖
复制
  1. npm install express body-parser

2、创建server.js

这里采用无刷新实时更新，使用 Server-Sent Events (SSE) 实现这个功能。
复制
  1. const express = require('express');
    

  2. const app = express();
    


  3. 

  4. // 存储最新数据（内存中）
    

  5. let latestData = { value: null, time: null };
    


  6. 

  7. // 提供静态页面（可选）
    

  8. app.get('/', (req, res) => {
    

  9.   res.sendFile(__dirname + '/index.html'); // 见下方的HTML文件
    

  10. });
    


  11. 

  12. // 接收传感器数据的API（WiFi模块POST到此接口）
    

  13. app.post('/data', express.json(), (req, res) => {
    

  14.   latestData = {
    

  15.          sensor: req.body.sensor || 'unknown',
    

  16.     value: req.body.value|| 0,
    

  17.     time: new Date().toLocaleTimeString()
    

  18.   };
    

  19.   res.send('OK');
    

  20. });
    


  21. 

  22. // SSE 路由 - 向浏览器推送数据
    

  23. app.get('/sse', (req, res) => {
    

  24.   // 设置SSE所需的响应头
    

  25.   res.setHeader('Content-Type', 'text/event-stream');
    

  26.   res.setHeader('Cache-Control', 'no-cache');
    

  27.   res.setHeader('Connection', 'keep-alive');
    


  28. 

  29.   // 首次连接立即发送当前数据
    

  30.   sendSSEData(res);
    


  31. 

  32.   // 定时推送数据（示例：每2秒一次）
    

  33.   const intervalId = setInterval(() => {
    

  34.     sendSSEData(res);
    

  35.   }, 2000);
    


  36. 

  37.   // 客户端断开连接时清理定时器
    

  38.   req.on('close', () => {
    

  39.     clearInterval(intervalId);
    

  40.     console.log('Client disconnected');
    

  41.   });
    

  42. });
    


  43. 

  44. // 发送SSE数据（格式必须符合SSE协议）
    

  45. function sendSSEData(res) {
    

  46.   const data = {
    

  47.         sensor: latestData.sensor || 'N/A',
    

  48.     value: latestData.value || 'N/A',
    

  49.     time: latestData.time || 'N/A'
    

  50.   };
    

  51.   // SSE数据格式要求：
    

  52.   // - "data:" 开头 + 实际数据 + 两个换行符
    

  53.   res.write(`data: ${JSON.stringify(data)}\n\n`);
    

  54. }
    


  55. 

  56. // 启动服务器
    

  57. const PORT = 3000;
    

  58. app.listen(PORT, () => {
    

  59.   console.log(`Server running at http://localhost:${PORT}`);
    

  60. });
3、创建index.html
复制
  1. <!DOCTYPE html>
    

  2. <html lang="en">
    

  3. <head>
    

  4.     <meta charset="UTF-8">
    

  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    

  6.     <title>SSE Example with Grid</title>
    

  7.     <style>
    

  8.           body { font-family: Arial; text-align: center; margin-top: 50px; }
    

  9.           #data { font-size: 24px; margin: 20px; padding: 20px; border: 0px solid #ddd; }
    

  10.         
    

  11.         body {
    

  12.             margin: 0;
    

  13.             overflow: hidden;
    

  14.         }
    

  15.         #grid {
    

  16.             position: absolute;
    

  17.             top: 0;
    

  18.             left: 0;
    

  19.             width: 100%;
    

  20.             height: 100%;
    

  21.             pointer-events: none; /* 防止网格干扰鼠标事件 */
    

  22.         }
    

  23.         .grid-line {
    

  24.             stroke: #ccc;
    

  25.             stroke-width: 1;
    

  26.         }
    

  27.         #square {
    

  28.             width: 50px;
    

  29.             height: 50px;
    

  30.             background-color: red;
    

  31.             position: absolute;
    

  32.             top: 0; /* 初始位置调整为网格起点 */
    

  33.             left: 0; /* 初始位置调整为网格起点 */
    

  34.         }
    

  35.     </style>
    

  36. </head>
    

  37. <body>
    

  38.     <svg id="grid"></svg>
    

  39.     <div id="square"></div>
    

  40.         
    

  41.         <h1>利用PSOC™ 4000T Multi-Sense Kit隔空按键产生指令<br><small>发送给WebServer-控制红色方块运行</small></h1>
    

  42.         <div id="data">等待数据...</div>
    

  43.   
    

  44.     <script>
    

  45.         const square = document.getElementById('square');
    

  46.         const step = 50; // 网格大小和方块大小一致
    

  47.         const gridSize = 50; // 网格大小
    


  48. 

  49.         // 创建网格
    

  50.         const grid = document.getElementById('grid');
    

  51.         const width = window.innerWidth;
    

  52.         const height = window.innerHeight;
    


  53. 

  54.         for (let x = 0; x <= width; x += gridSize) {
    

  55.             const line = document.createElementNS("http://www.w3.org/2000/svg", "line");
    

  56.             line.setAttribute('x1', x);
    

  57.             line.setAttribute('y1', 0);
    

  58.             line.setAttribute('x2', x);
    

  59.             line.setAttribute('y2', height);
    

  60.             line.classList.add('grid-line');
    

  61.             grid.appendChild(line);
    

  62.         }
    


  63. 

  64.         for (let y = 0; y <= height; y += gridSize) {
    

  65.             const line = document.createElementNS("http://www.w3.org/2000/svg", "line");
    

  66.             line.setAttribute('x1', 0);
    

  67.             line.setAttribute('y1', y);
    

  68.             line.setAttribute('x2', width);
    

  69.             line.setAttribute('y2', y);
    

  70.             line.classList.add('grid-line');
    

  71.             grid.appendChild(line);
    

  72.         }
    

  73.                 var lasttime;
    

  74.         const eventSource = new EventSource('/sse');
    

  75.         eventSource.onmessage = function(event) {
    

  76.             const instruction = event.data;
    

  77.                         
    

  78.                         
    

  79.                         
    

  80.                          const data = JSON.parse(event.data);
    

  81.                          
    

  82.                          document.getElementById('data').innerHTML = `
    

  83.                                 <p>传感器: ${data.sensor || '无'}</p>
    

  84.                                 <p>数值: ${data.value || '0'}</p>
    

  85.                                 <p>更新时间: ${data.time || '未知'}</p>
    

  86.                           `;
    

  87.                         
    

  88.                         if(lasttime!=data.time)
    

  89.                         {
    

  90.                         
    

  91.             let currentTop = parseInt(square.offsetTop, 10);
    

  92.             let currentLeft = parseInt(square.offsetLeft, 10);
    


  93. 

  94.             switch (data.value) {
    

  95.                 case 'up':
    

  96.                     currentTop = Math.max(0, currentTop - step);
    

  97.                     break;
    

  98.                 case 'down':
    

  99.                     currentTop = Math.min(height - square.offsetHeight, currentTop + step);
    

  100.                     break;
    

  101.                 case 'left':
    

  102.                     currentLeft = Math.max(0, currentLeft - step);
    

  103.                     break;
    

  104.                 case 'right':
    

  105.                     currentLeft = Math.min(width - square.offsetWidth, currentLeft + step);
    

  106.                     break;
    

  107.                                 default:
    

  108.                                         
    

  109.                                         break;
    

  110.             }
    


  111. 

  112.                         
    

  113.             // 更新方块位置
    

  114.             square.style.top = `${currentTop}px`;
    

  115.             square.style.left = `${currentLeft}px`;
    

  116.                         lasttime=data.time;
    

  117.                         }
    

  118.         };
    

  119.     </script>
    

  120. </body>
    

  121. </html>

4、运行server.js
复制
  1. C:\Infineon\webserver>node server.js
    

  2. Server running at http://localhost:3000
此时websever已搭建完成并运行。
打开浏览器访问：http://localhost:3000

可以看到红色方形已绘制，等待接收http协议的数据进行执行并改变位置
三、MCU软件部分
基于例程MSCLP_CAPSENSE_Hover_Touch修改

1、初始化串口并使能中断
复制
  1.    /* Configure and enable the UART peripheral */
    

  2.     Cy_SCB_UART_Init(scb_0_HW, &scb_0_config, &CYBSP_UART_context);
    

  3.     Cy_SCB_UART_Enable(scb_0_HW);
    


  4. 

  5.     /* 配置 UART 中断 */
    

  6.         Cy_SysInt_Init(&UART_IRQ_cfg, UART_InterruptHandler);
    

  7.         NVIC_EnableIRQ(UART_IRQ_cfg.intrSrc);  // 使能 NVIC 中断
    


  8. 

  9.         // Register the event callback function
    

  10.         //Cy_SCB_UART_RegisterCallback(scb_0_HW,(cy_cb_scb_uart_handle_events_t)UART_InterruptHandler, &CYBSP_UART_context);
    


  11. 

  12.         // 当 RX FIFO 非空时启用 UART RX 中断
    

  13.         Cy_SCB_SetRxInterruptMask(scb_0_HW , CY_SCB_RX_INTR_NOT_EMPTY);
    


  14. 


  15. 

  16.         // 当 TX FIFO 未满时启用 UART TX 中断
    

  17.         Cy_SCB_SetTxInterruptMask (scb_0_HW ,CY_SCB_TX_INTR_LEVEL);
    


  18. 

  19.     /* Enable global interrupts */
    

  20.     __enable_irq();
RX中断处理:
复制
  1. static void UART_InterruptHandler(void)
    

  2. {
    

  3.     /* 检查是否 RX FIFO 非空 */
    

  4.     if (Cy_SCB_GetRxInterruptStatusMasked(scb_0_HW) & CY_SCB_UART_RX_NOT_EMPTY)
    

  5.     {
    

  6.         /* 读取接收到的数据 */
    

  7.         uint8_t rxData = Cy_SCB_UART_Get(scb_0_HW);
    


  8. 

  9.         /* 存入缓冲区（可改为环形缓冲区） */
    

  10.         if (rxCount < RX_BUFFER_SIZE)
    

  11.         {
    

  12.             rxBuffer[rxCount++] = rxData;
    

  13.         }
    


  14. 

  15.         /* 可选：检查结束符（如 '\n'） */
    

  16.         if (rxData == '\n'&&rxCount>2)
    

  17.         {
    

  18.             // 可以设置标志位通知主循环
    


  19. 

  20.                 atResponseReady=true;
    

  21.         }
    


  22. 

  23.     }
    


  24. 

  25.     /* 清除中断标志 */
    

  26.     Cy_SCB_ClearRxInterrupt(scb_0_HW, CY_SCB_UART_RX_NOT_EMPTY);
    

  27. }



2、发送AT指令函数
复制
  1. bool sendATCommand(const char* cmd, const char* expectedResponse, uint32_t timeout) {
    

  2.     Cy_SCB_UART_PutString(scb_0_HW, cmd);
    

  3.     Cy_SysLib_Delay(timeout);
    

  4.         return true;
    

  5. }
3、连接wifi，关闭所有tcp连接
复制
  1. void wifiConnect(void)
    

  2. {
    

  3.         sendATCommand("AT+RST\r\n", "OK", AT_TIMEOUT_MS);
    

  4.         sendATCommand("AT+CWJAP=ssid,passwordpassword\r\n", "OK", 5000);
    


  5. 


  6. 

  7.         //closeAllConnections();
    

  8.         sendATCommand("AT+CIPCLOSE=20\r\n", "OK", AT_TIMEOUT_MS);
    

  9. }
4、建立TCP连接并保存linkid
复制
  1. bool tcpLink(const char* host)
    

  2. {
    

  3.         char tcpCmd[128];
    

  4.         snprintf(tcpCmd, sizeof(tcpCmd), "AT+CIPSTART=TCP,%s,3000\r\n", host);
    


  5. 

  6.         Cy_SCB_UART_PutString(scb_0_HW, tcpCmd);
    

  7.         while(!atResponseReady){}
    


  8. 

  9.         sscanf(rxBuffer, "+CIPSTART:%d", &linkId);
    

  10.         atResponseReady=false;
    

  11.         rxCount=0;
    

  12.         memset(rxBuffer,0,RX_BUFFER_SIZE);
    


  13. 

  14.         for(int i=0;i<linkId;i++)
    

  15.         {
    

  16.                 Cy_GPIO_Set(CYBSP_CS_HT_LED1_PORT, CYBSP_CS_HT_LED1_PIN);
    

  17.                 Cy_SysLib_Delay(200);
    

  18.                 Cy_GPIO_Clr(CYBSP_CS_HT_LED1_PORT, CYBSP_CS_HT_LED1_PIN);
    

  19.                 Cy_SysLib_Delay(200);
    


  20. 

  21.         }
    

  22.         return true;
    

  23. }

5、发送HTTP POST请求
复制
  1. // 发送HTTP POST请求
    

  2. void sendHttpPost(const char* url, const char* host, const char* jsonData) {
    

  3.     char cipsendCmd[32];
    

  4.     char postHeader[256];
    


  5. 

  6.     sendATCommand("AT+CIPCLOSE=20\r\n", "OK", 300);
    

  7.     // 1. 建立TCP连接
    

  8.     char tcpCmd[128];
    

  9.     tcpLink(host);
    


  10. 

  11.     // 2. 透传,发送POST数据
    

  12.     int dataLen = strlen(jsonData);
    

  13.     snprintf(postHeader, sizeof(postHeader),
    

  14.         "POST %s HTTP/1.1\r\n"
    

  15.         "Host: %s\r\n"
    

  16.         "Content-Type: application/json\r\n"
    

  17.         "Content-Length: %d\r\n\r\n"
    

  18.         "%s\r\n", url, host, dataLen, jsonData);
    

  19.     snprintf(cipsendCmd, sizeof(cipsendCmd), "AT+CIPSEND=%d,%d\r\n", linkId,strlen(postHeader));
    

  20.     sendATCommand(cipsendCmd, ">", 300);
    

  21.     sendATCommand(postHeader, "OK", 1000);
    


  22. 

  23.     // 3. 关闭连接
    

  24.     snprintf(cipsendCmd, sizeof(cipsendCmd), "AT+CIPCLOSE=%d\r\n", linkId);
    

  25.     sendATCommand(cipsendCmd, "OK", 1000);
    

  26. }
通过POST向服务器发送json数据
格式{"sensor":"direction","value":"up"}
复制
  1. void sendHttpData(uint8_t dat)
    

  2. {
    

  3.         char* action[4]={
    

  4.                         "up","down","left","right"
    

  5.         };
    

  6.         const char* url = "/data";
    

  7.         //const char* host = "192.168.31.45";
    

  8.         const char* host = "192.168.8.11";
    

  9.         //const char* jsonData = "{"sensor":"temp","value":25}";
    

  10.         char jsonData[50]={0};
    

  11.         snprintf(jsonData, sizeof(jsonData),
    

  12.                          "{"sensor":"direction","value":"%s"}",
    

  13.                          action[dat]);
    


  14. 

  15.         sendHttpPost(url, host, jsonData);
    

  16. }


6、悬停触摸处理

按下触摸执行点灯，并调用sendHttpData发送POST给webserver

复制
  1. void led_control(){
    


  2. 

  3.     if(Cy_CapSense_IsWidgetActive(CY_CAPSENSE_BUTTON1_WDGT_ID, &cy_capsense_context)){
    

  4.         Cy_GPIO_Set(CYBSP_CS_HT_LED1_PORT, CYBSP_CS_HT_LED1_PIN);
    

  5.         Cy_GPIO_Clr(CYBSP_CS_HT_LED2_PORT, CYBSP_CS_HT_LED2_PIN);
    

  6.         Cy_GPIO_Clr(CYBSP_CS_HT_LED3_PORT, CYBSP_CS_HT_LED3_PIN);
    

  7.         Cy_GPIO_Clr(CYBSP_CS_HT_LED4_PORT, CYBSP_CS_HT_LED4_PIN);
    

  8.         sendHttpData(0);
    

  9.     }
    

  10.     else if(Cy_CapSense_IsWidgetActive(CY_CAPSENSE_BUTTON2_WDGT_ID, &cy_capsense_context)){
    

  11.         Cy_GPIO_Clr(CYBSP_CS_HT_LED1_PORT, CYBSP_CS_HT_LED1_PIN);
    

  12.         Cy_GPIO_Set(CYBSP_CS_HT_LED2_PORT, CYBSP_CS_HT_LED2_PIN);
    

  13.         Cy_GPIO_Clr(CYBSP_CS_HT_LED3_PORT, CYBSP_CS_HT_LED3_PIN);
    

  14.         Cy_GPIO_Clr(CYBSP_CS_HT_LED4_PORT, CYBSP_CS_HT_LED4_PIN);
    

  15.         sendHttpData(1);
    

  16.     }
    

  17.     else if(Cy_CapSense_IsWidgetActive(CY_CAPSENSE_BUTTON3_WDGT_ID, &cy_capsense_context)){
    

  18.         Cy_GPIO_Clr(CYBSP_CS_HT_LED1_PORT, CYBSP_CS_HT_LED1_PIN);
    

  19.         Cy_GPIO_Clr(CYBSP_CS_HT_LED2_PORT, CYBSP_CS_HT_LED2_PIN);
    

  20.         Cy_GPIO_Set(CYBSP_CS_HT_LED3_PORT, CYBSP_CS_HT_LED3_PIN);
    

  21.         Cy_GPIO_Clr(CYBSP_CS_HT_LED4_PORT, CYBSP_CS_HT_LED4_PIN);
    

  22.         sendHttpData(2);
    

  23.     }
    

  24.     else if(Cy_CapSense_IsWidgetActive(CY_CAPSENSE_BUTTON4_WDGT_ID, &cy_capsense_context)){
    

  25.         Cy_GPIO_Clr(CYBSP_CS_HT_LED1_PORT, CYBSP_CS_HT_LED1_PIN);
    

  26.         Cy_GPIO_Clr(CYBSP_CS_HT_LED2_PORT, CYBSP_CS_HT_LED2_PIN);
    

  27.         Cy_GPIO_Clr(CYBSP_CS_HT_LED3_PORT, CYBSP_CS_HT_LED3_PIN);
    

  28.         Cy_GPIO_Set(CYBSP_CS_HT_LED4_PORT, CYBSP_CS_HT_LED4_PIN);
    

  29.         sendHttpData(3);
    

  30.     }
    

  31.     else {
    

  32.         Cy_GPIO_Clr(CYBSP_CS_HT_LED1_PORT, CYBSP_CS_HT_LED1_PIN);
    

  33.         Cy_GPIO_Clr(CYBSP_CS_HT_LED2_PORT, CYBSP_CS_HT_LED2_PIN);
    

  34.         Cy_GPIO_Clr(CYBSP_CS_HT_LED3_PORT, CYBSP_CS_HT_LED3_PIN);
    

  35.         Cy_GPIO_Clr(CYBSP_CS_HT_LED4_PORT, CYBSP_CS_HT_LED4_PIN);
    

  36.     }
    

  37. }



四、运行效果



发送AT的串口输出：



本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？注册

×
回复 赏

举报

相关帖子
星辰大海不退缩 发表于 2025-5-26 17:38 | 显示全部楼层
非常不错的控制教学
回复 赏

举报

小夏天的大西瓜 发表于 2025-5-27 10:03 | 显示全部楼层
感应按键和悬停触摸技术是PSOC 4000T系列套装的亮点
回复 赏

举报

封存into 发表于 2025-5-29 13:48 | 显示全部楼层
悬停触摸是非接触么？》
回复 赏

举报

喂什么玩意 发表于 2025-6-29 00:56 | 显示全部楼层
可将电极划分为 “上、下、左、右” 四个方向区，手指悬停或滑动时，电极电容变化被实时捕捉。
回复 赏

举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 注册

本版积分规则

sujingliang

84

主题

146

帖子

3

粉丝
快速回复 在线客服 返回列表 返回顶部