【得捷电子Follow me第4期】终极任务一：DigiKey电子元器件价格及库存监视器（下）

HonestQiao

【得捷电子Follow me第4期】终极任务一：DigiKey电子元器件价格及库存监视器（下） [复制链接]

<i class="pstatus"> 本帖最后由 HonestQiao 于 2024-1-23 09:10 编辑 </i>

> ■终极任务一：访问 [https://www.digikey.cn/zh/resources/api-solutions](https://www.digikey.cn/zh/resources/api-solutions "https://www.digikey.cn/zh/resources/api-solutions")，以了解得捷(DigiKey)数字化解决方案及其API操作，设计一款DigiKey电子元器件价格及库存监视器，能实时同步并显示指定，电子元器件的价格、库存等信息。

在 [【得捷电子Follow me第4期】终极任务一：DigiKey电子元器件价格及库存监视器（上）](https://bbs.eeworld.com.cn/thread-1270489-1-1.html)中，已经分享了得捷(DigiKey)数字化解决方案及其API操作的相关知识，要完成的任务 DigiKey电子元器件价格及库存监视器的程序逻辑规划，以及
服务端程序的开发，实现了和DigiKey API 解决方案账号平台的交互和oAUth认账，并通过API接口提供了JSON数据的返回。
在本篇中，将分享W5500_Evb_Pico的开发工作，让其与服务端对接起来，从而根据返回的JSON数据，确定是要显示二维码（服务端未登录），还是要显示产品信息（服务端已登录）。

## 六、设备端程序
设备端是W5500_Evb_Pico，使用Arduino环境进行开发。

### 功能开发
要实现设备端与服务端对接，需要完成如下的功能：
1. 网络设置：使得W5500_Evb_Pico通过W5500连接到有线网络
2. 屏幕驱动：驱动墨水屏
3. 网络请求：通过网络请求服务器端的API接口
4. JSON解析：解析通过API接口获取的JSON数据
5. 屏幕内容显示：通过获取的JSON数据，来将对应的信息，显示到屏幕上
6. 二维码生成：根据服务端返回的网址，生成对应的二维码显示到屏幕上
7. 定时请求：定时发起新的网络请求，获取最新的数据

#### 1. 网络设置
在之前的分享：[【得捷电子Follow me第4期】基础任务一：静态IP配置、Ping、抓包分析](https://bbs.eeworld.com.cn/thread-1269759-1-1.html "【得捷电子Follow me第4期】基础任务一：静态IP配置、Ping、抓包分析") 中，已经介绍过静态IP地址、子网掩码、DNS、网关的设置。
在这里，使用同样的方式，进行网络配置。
具体代码如下：
```cpp
#include <SPI.h>
#include <Ethernet.h>

// 网卡mac地址
byte mac[] = { 0xDE, 0xAD, 0xBE, 0xE1, 0xF2, 0xE4 };

// 静态ip地址、DNS服务、网关、子网掩码
IPAddress ip(192, 168, 1, 238);
IPAddress myDns(192, 168, 1, 1);
IPAddress gateway(192, 168, 1, 1);
IPAddress subnet(255, 255, 255, 0);

void setup() {
// ...

// 静态IP设置
Serial.println("Ethernet Begin");
Ethernet.init(17);
Ethernet.begin(mac, ip, myDns, gateway, subnet);

// 输出网卡mac地址、IP地址、子网掩码、DNS、网关
Serial.print("My Mac address: ");
byte macBuffer[6];     // 设置mac地址存储buff
Ethernet.MACAddress(macBuffer);// 读取mac地址
for (byte octet = 0; octet < 6; octet++) {
  Serial.print(macBuffer[octet], HEX);
  if (octet < 5) {
  Serial.print('-');
  }
}
Serial.println("");

Serial.print("My IP address: ");
Serial.println(Ethernet.localIP());

Serial.print("My subnet: ");
Serial.println(Ethernet.subnetMask());

Serial.print("My DNS address: ");
Serial.println(Ethernet.dnsServerIP());

Serial.print("My GateWay address: ");
Serial.println(Ethernet.gatewayIP());

Serial.println(" OK!");

// 检查联网状态
while (true) {
  if (Ethernet.linkStatus() == Unknown) {
  Serial.println("Link status unknown. Link status detection is only available with W5200 and W5500.");
  } else if (Ethernet.linkStatus() == LinkON) {
  Serial.println("Link status: On");
  break;
  } else if (Ethernet.linkStatus() == LinkOFF) {
  Serial.println("Link status: Off");
  }
  wait(1);
}

// ...
}
```

在上述代码中，当最终检测到 Ethernet.linkStatus() 为 LinkON 时，表示网络连接成功，从while循环中中断，继续执行后面的代码。

#### 2. 屏幕驱动
在之前的分享：[ 【得捷电子Follow me第4期】入门任务：开箱，开发环境，BLINK，驱动液晶显示器 ](https://bbs.eeworld.com.cn/thread-1268978-1-1.html " 【得捷电子Follow me第4期】入门任务：开箱，开发环境，BLINK，驱动液晶显示器 ") 中，已经介绍过如何驱动我本次使用的Pervasive Displays的EPD(墨水屏)。
在这里，也使用同样的方式，进行该墨水屏的驱动。
具体代码如下：
```cpp
// 墨水屏屏幕库
#include "PDLS_EXT3_Basic_Global.h"

// 实例化屏幕类
Screen_EPD_EXT3 myScreen(eScreen_EPD_EXT3_370, boardRaspberryPiPico_RP2040);

void setup() {
// ...

// 屏幕初始化
Serial.println("begin... ");
myScreen.begin();
Serial.println(formatString("%s %ix%i", myScreen.WhoAmI().c_str(), myScreen.screenSizeX(), myScreen.screenSizeY()));

// ...
}
```

#### 3. 网络请求
在Arduino中，驱动W5500使用Ethernet库，该库提供了EthernetClient，可以用于网络连接。
完成网络连接，对应的代码如下：
```cpp
#include <SPI.h>
#include <Ethernet.h>
#include <HTTPClient.h>

void request_json_and_display() {
// ...

if (Ethernet.linkStatus() == LinkON) {
  // 网络CLient
  EthernetClient client;

// 连接网络服务
  client.setTimeout(10000);
  if (!client.connect(API_URL_HOST, API_URL_PORT)) {
  Serial.println(F("Connection failed"));
  return;
  }

// 请求API接口
  client.println(formatString("GET %s HTTP/1.0", API_URL_PATH));
  client.println(formatString("Host: %s", API_URL_HOST));
  client.println(F("Connection: close"));

// 请求完毕
  if (client.println() == 0) {
  Serial.println(F("Failed to send request"));
  client.stop();
  return;
  } else {
  // HTTP
  Serial.print("[HTTP] GET...\n");
    
  // 检查返回状态
  char status[32] = { 0 };
  client.readBytesUntil('\r', status, sizeof(status));

// 正确返回 "HTTP/1.0 200 OK" or "HTTP/1.1 200 OK"
  if (strcmp(status + 9, "200 OK") != 0) {
  Serial.print(F("Unexpected response: "));
  Serial.println(status);
  client.stop();
  return;
  }

// 设置返回码
  int httpCode = 200;

// 跳过 HTTP headers信息
  char endOfHeaders[] = "\r\n\r\n";
  if (!client.find(endOfHeaders)) {
  Serial.println(F("Invalid response"));
  client.stop();
  return;
  }

// ...

}
    
    // ...
    
}

// ...
}
```

在上述代码中，先用 EthernetClient client 实例化一个网络client对象，然后通过该client发起网络连接。
使用该client发起网络连接时，使用的是socket模式，需要参考HTTP协议规范，来发送请求数据到服务端，才能够完成HTTP请求，并获取数据进行解析。

要了解学习HTTP协议，可以阅读这篇文章：[HTTP协议详解](https://jacktang816.github.io/post/http_protocol/)，解释的非常清楚：
* **请求报文：**

<ignore_js_op>

<div class="tip tip_4 aimg_tip" id="aimg_779568_menu" style="position: absolute; display: none" disautofocus="true">
<div class="xs0">
<p><strong>http-request-format.png</strong> <em class="xg1">(24.2 KB, 下载次数: 0)</em></p>
<p>
<a href="javascript:;" class="loginf" >下载附件</a>

<a href="javascript:;" onclick="showWindow(this.id, this.getAttribute('url'), 'get', 0);" id="savephoto_779568" url="home.php?mod=spacecp&ac=album&op=saveforumphoto&aid=779568&handlekey=savephoto_779568">保存到相册</a>

</p>

</div>
<div class="tip_horn"></div>
</div>

</ignore_js_op>

* **响应报文：**

<ignore_js_op>

<div class="tip tip_4 aimg_tip" id="aimg_779569_menu" style="position: absolute; display: none" disautofocus="true">
<div class="xs0">
<p><strong>http-response-format.png</strong> <em class="xg1">(26.29 KB, 下载次数: 0)</em></p>
<p>
<a href="javascript:;" class="loginf" >下载附件</a>

<a href="javascript:;" onclick="showWindow(this.id, this.getAttribute('url'), 'get', 0);" id="savephoto_779569" url="home.php?mod=spacecp&ac=album&op=saveforumphoto&aid=779569&handlekey=savephoto_779569">保存到相册</a>

</p>

</div>
<div class="tip_horn"></div>
</div>

</ignore_js_op>

需要注意的是，上述代码中，API_URL_HOST、API_URL_PORT 定义的是Python从服务所使用的HOST和端口，为普通HTTP请求，而不是HTTPS请求。

#### 4.JSON数据解析
通过服务端API接口获取的数据是JSON格式的，可以使用ArduinoJson库进行解析。
在上一步完成了HTTP请求后，接下来就是调用JSON库的时候。
具体代码如下：
```cpp
// JSON库
#include <ArduinoJson.h>

void request_json_and_display() {
// ...

// ...
        
    // JsonDocument实例
    JsonDocument doc;

// 解析为JSON
    DeserializationError error = deserializeJson(doc, client);
    if (error) {
    Serial.print(F("deserializeJson() failed: "));
    Serial.println(error.f_str());
    client.stop();
    return;
    } else {
    // 解析数据内容
    int x_offset = 0;
    int y_offset = 0;
    int orientation = 2;

interval = doc["interval"].as<long>();
    x_offset = doc["offset"][0].as<long>();
    y_offset = doc["offset"][1].as<long>();
    orientation = doc["orientation"].as<long>();

// ...
// ...
}

```
ArduinoJson库非常强大，它提供的deserializeJson()调用，用于解析JSON数据。其传入的参数，不仅可以是JSON数据的字符串，还可以是client对象，会自动从client对象获取服务器返回的数据进行解析，大大方便了实际代码的编写。

在解析完成后，就可以通过JSON对象中的属性字段来获取对应的值了。

#### 5. 屏幕内容显示：
在上一步，使用ArduinoJson来解析获得服务器段返回的JSON数据，下一步就可以根据获取的内容，来调用屏幕驱动提供的函数，进行信息显示了。

在之前的分享 [【DigiKey“智造万物，快乐不停”创意大赛】经典老黄历](https://bbs.eeworld.com.cn/thread-1269394-1-1.html "【DigiKey“智造万物，快乐不停”创意大赛】经典老黄历") 中，我介绍过：定义一套JSON格式的数据规范，来控制M5Paper提供的屏幕处理，让 M5Paper 上的程序，通过网络请求并解析JSON数据，并根据JSON数据，决定实际该调用哪个屏幕函数，以及传递什么参数。通过这样的数据规范，把M5Paper 上的程序写好了，后面就需要简单修改JSON数据，就能够实现屏幕的更新了。

在这个项目中，我采用了同样的方法，来使用 Pervasive Displays的EPD(墨水屏) 进行信息显示。
但让，Pervasive Displays的EPD(墨水屏) 所使用的屏幕驱动与把M5Paper不一样，调用的处理函数也不一样。

具体的处理代码如下：
```cpp
// JSON库
#include <ArduinoJson.h>

void request_json_and_display() {
// ...

// ...
        
    // 解析数据内容
    int x_offset = 0;
    int y_offset = 0;
    int orientation = 2;

interval = doc["interval"].as<long>();
    x_offset = doc["offset"][0].as<long>();
    y_offset = doc["offset"][1].as<long>();
    orientation = doc["orientation"].as<long>();

Serial.println(F("Response:"));
    Serial.println(formatString("name: %s", doc["name"].as<const char *>()));
    Serial.println(formatString("orientation: %d", orientation));
    Serial.println(formatString("offset: (%d,%d)", x_offset, y_offset));
    Serial.println(formatString("version: %0.2f", doc["version"].as<float>()));
    Serial.println(formatString("data size: %d", doc["data"].size()));

// 设置默认方向
    myScreen.setOrientation(orientation);

for (int i = 0; i < doc["data"].size(); i++) {
    String type = doc["data"]<i>["type"];
    if (type == "comment") {
      // 注释
      String comment = doc["data"]<i>["value"];
      Serial.println(formatString("comment: %s", comment.c_str()));
    } else if (type == "setOrientation") {
      // 设置方向
      int value = doc["data"]<i>["value"].as<long>();
      Serial.println(formatString("setOrientation: %d", value));
      myScreen.setOrientation(value);
    } else if (type == "setOffset") {
      // 设置方向
      x_offset = doc["data"]<i>["x"].as<long>();
      y_offset = doc["data"]<i>["y"].as<long>();
      Serial.println(formatString("setOffset: (x, y)=(%d, %d)", x_offset, y_offset));
    } else if (type == "setPenSolid") {
      // 设置落笔抬笔
      int value = doc["data"]<i>["value"].as<bool>();
      Serial.println(formatString("setPenSolid: %d", value));
      myScreen.setPenSolid(value);
    } else if (type == "selectFont") {
      // 设置字体
      String font_name = doc["data"]<i>["value"];
      Serial.println(formatString("selectFont: %s", font_name.c_str()));
      uint8_t font = get_font(font_name);
      myScreen.selectFont(font);
    } else if (type == "setFontSolid") {
      // 设置字体落笔抬笔
      int value = doc["data"]<i>["value"].as<bool>();
      Serial.println(formatString("setFontSolid: %d", value));
      myScreen.setFontSolid(value);
    } else if (type == "gText") {
      // 显示文本
      int x = doc["data"]<i>["x"].as<long>();
      int y = doc["data"]<i>["y"].as<long>();
      String text = doc["data"]<i>["text"];
      String color_name = doc["data"]<i>["color"];
      Serial.println(formatString("gText: (x,y)=(%d,%d) text=%s color=%s", x, y, text.c_str(), color_name.c_str()));
      uint16_t color = get_color(color_name);
      myScreen.gText(x + x_offset, y + y_offset, text, color);
    } else if (type == "point") {
      // 画点
      int x = doc["data"]<i>["x"].as<long>();
      int y = doc["data"]<i>["y"].as<long>();
      String color_name = doc["data"]<i>["color"];
      Serial.println(formatString("point: (x,y)=(%d,%d) color=%s", x, y, color_name.c_str()));
      uint16_t color = get_color(color_name);
      myScreen.point(x + x_offset, y + y_offset, color);
    } else if (type == "line") {
      // 画线
      int x = doc["data"]<i>["x"].as<long>();
      int y = doc["data"]<i>["y"].as<long>();
      int x1 = doc["data"]<i>["x1"].as<long>();
      int y1 = doc["data"]<i>["y1"].as<long>();
      String color_name = doc["data"]<i>["color"];
      Serial.println(formatString("line: (x,y)=(%d,%d) (x1,y1)=(%d,%d) color=%s", x, y, x1, y1, color_name.c_str()));
      uint16_t color = get_color(color_name);
      myScreen.line(x + x_offset, y + y_offset, x1 + x_offset, y1 + y_offset, color);
    } else if (type == "rectangle") {
      // 画矩形
      int x = doc["data"]<i>["x"].as<long>();
      int y = doc["data"]<i>["y"].as<long>();
      int x1 = doc["data"]<i>["x1"].as<long>();
      int y1 = doc["data"]<i>["y1"].as<long>();
      String color_name = doc["data"]<i>["color"];
      Serial.println(formatString("rectangle: (x,y)=(%d,%d) (x1,y1)=(%d,%d) color=%s", x, y, x1, y1, color_name.c_str()));
      uint16_t color = get_color(color_name);
      myScreen.rectangle(x + x_offset, y + y_offset, x1 + x_offset, y1 + y_offset, color);
    } else if (type == "circle") {
      // 画圆
      int x = doc["data"]<i>["x"].as<long>();
      int y = doc["data"]<i>["y"].as<long>();
      int r = doc["data"]<i>["r"].as<long>();
      String color_name = doc["data"]<i>["color"];
      Serial.println(formatString("circle: (x,y)=(%d,%d) r=%d color=%s", x, y, r, color_name.c_str()));
      uint16_t color = get_color(color_name);
      myScreen.circle(x + x_offset, y + y_offset, r, color);
    } else if (type == "triangle") {
      // 画三角形
      int x = doc["data"]<i>["x"].as<long>();
      int y = doc["data"]<i>["y"].as<long>();
      int x1 = doc["data"]<i>["x1"].as<long>();
      int y1 = doc["data"]<i>["y1"].as<long>();
      int x2 = doc["data"]<i>["x2"].as<long>();
      int y2 = doc["data"]<i>["y2"].as<long>();
      String color_name = doc["data"]<i>["color"];
      Serial.println(formatString("triangle: (x,y)=(%d,%d) (x1,y1)=(%d,%d) (x2,y2)=(%d,%d) color=%s", x, y, x1, y1, x2, y2, color_name.c_str()));
      uint16_t color = get_color(color_name);
      myScreen.triangle(x + x_offset, y + y_offset, x1 + x_offset, y1 + y_offset, x2 + x_offset, y2 + y_offset, color);
    } else if (type == "dLine") {
      // 画线(向量)
      int x = doc["data"]<i>["x"].as<long>();
      int y = doc["data"]<i>["y"].as<long>();
      int w = doc["data"]<i>["w"].as<long>();
      int h = doc["data"]<i>["h"].as<long>();
      String color_name = doc["data"]<i>["color"];
      Serial.println(formatString("dLine: (x,y)=(%d,%d) (w,h)=(%d,%d) color=%s", x, y, w, h, color_name.c_str()));
      uint16_t color = get_color(color_name);
      myScreen.dLine(x + x_offset, y + y_offset, w, h, color);
    } else if (type == "dRectangle") {
      // 画矩形(向量)
      int x = doc["data"]<i>["x"].as<long>();
      int y = doc["data"]<i>["y"].as<long>();
      int w = doc["data"]<i>["w"].as<long>();
      int h = doc["data"]<i>["h"].as<long>();
      String color_name = doc["data"]<i>["color"];
      Serial.println(formatString("dRectangle: (x,y)=(%d,%d) (w,h)=(%d,%d) color=%s", x, y, w, h, color_name.c_str()));
      uint16_t color = get_color(color_name);
      myScreen.dRectangle(x + x_offset, y + y_offset, w, h, color);
    } else if (type == "qrcode") {
      // 画二维码
      int x = doc["data"]<i>["x"].as<long>();
      int y = doc["data"]<i>["y"].as<long>();
      int w = doc["data"]<i>["w"].as<long>();
      int h = doc["data"]<i>["h"].as<long>();
      String text = doc["data"]<i>["text"];
      String color_name = doc["data"]<i>["color"];
      Serial.println(formatString("qrcode: (x,y)=(%d,%d) text=%s color=%s", x, y, text.c_str(), color_name.c_str()));
      uint16_t color = get_color(color_name);
      draw_qrcode(x + x_offset, y + y_offset, w, h, text, color);
    } else {
      Serial.println(formatString("type: %s", type));
    }
    }
    myScreen.flush();
            
    // ...
// ...
}
```

在上述代码中，就是根据返回的JSON数据，检测其中的相关字段，来进行屏幕显示基础参数的设置，并根据显示控制部分的type参数，来决定具体调用哪个屏幕处理函数进行处理。

关于JSON信息的定义规则，请查看[【DigiKey“智造万物，快乐不停”创意大赛】经典老黄历](https://bbs.eeworld.com.cn/thread-1269394-1-1.html "【DigiKey“智造万物，快乐不停”创意大赛】经典老黄历")中的 **JSON数据规范** 部分的详细说明。

#### 6. 二维码生成
在上一步的屏幕显示处理中，有一个函数draw_qrcode()，这个不是屏幕显示处理的默认调用函数，是自己写的，调用屏幕处理函数来生成二维码的。

在Arduino中，使用 qrcode 库，可以很方便的生成二维码，具体调用如下：
```cpp
// 二维码库
#include "qrcode.h"

///
/// <a href="https://bbs.eeworld.com.cn/home.php?mod=space&uid=159083" target="_blank">@brief</a> 绘制二维码
/// @param uint16_t x0 (aka unsigned short)
/// @param uint16_t y0 (aka unsigned short)
/// @param class arduino::String text
/// @param uint16_t textColour = myColours.black (aka unsigned short)
/// //@param uint16_t backColour = myColours.white (aka unsigned short)
///
void draw_qrcode(uint16_t x_offset, uint16_t y_offset, uint16_t w, uint16_t h, arduino::String text, uint16_t textColour) {
// 开始时间
uint32_t dt = millis();

// 创建二维码
QRCode qrcode;
uint8_t qrcodeData[qrcode_getBufferSize(3)];
qrcode_initText(&qrcode, qrcodeData, 3, 0, text.c_str());

// 处理时间计算
dt = millis() - dt;
Serial.print("QR Code Generation Time: ");
Serial.print(dt);
Serial.print("\n");

// 输出二维码信息
Serial.print("\n\n\n\n");

uint16_t backColour = get_color("white");
for (uint8_t y = 0; y < qrcode.size; y++) {

// 左则空区域
  Serial.print("  ");

// 水平模块
  for (uint8_t x = 0; x < qrcode.size; x++) {
  bool p = qrcode_getModule(&qrcode, x, y);
  // 打印每个模块 (UTF-8 \u2588 is a solid block)
  Serial.print(p ? "\u2588\u2588" : "");

// 打印每个模块
  uint16_t color = p ? textColour : backColour;
  myScreen.dRectangle(x * w + x_offset, y * h + y_offset, w, h, color);
  }

Serial.print("\n");
}

// 底部空区域
Serial.print("\n\n\n\n");
}
```
上述代码，参考了qrcode库的演示代码，并结合实际需要，添加了宽度和高度设置，以及屏幕绘图处理。
要了解二维码的知识，可以查看：[什么是 QR 码？](https://www.keyence.com.cn/ss/products/auto_id/barcode_lecture/basic_2d/qr/ "什么是 QR 码？")

当调用 draw_qrcode()后，将会在串口调试输出中输出二维码，同时在屏幕上显示二维码。

#### 7. 定时请求：
在W5500_Evb_Pico启动并完成网络设置、屏幕初始化以后，会自动进行一次 API 网络请求，获取最新的产品数据。
但产品信息可能会更新，因此需要定时发起新的网络请求，获取最新的数据。
在Arduino框架的loop()做这个工作最合适了，具体代码如下：
```cpp
// 变量定义
uint32_t interval = 300;// 刷新间隔时间
uint32_t now = 0;   // 当前时间
bool refresh = false; // 刷新标志

void loop() {
// 定时刷新检查
if (millis() - now > interval * 1000) {
  refresh = true;
}

// BOOTSEL按键检查
if (BOOTSEL) {
  refresh = true;

// 按下，灯亮
  digitalWrite(LED_BUILTIN, HIGH);

Serial.printf("\a\aYou pressed BOOTSEL!\n");
  // 等待BOOTSEL被释放
  while (BOOTSEL) {
  delay(1);
  }

// 释放，灯灭
  digitalWrite(LED_BUILTIN, LOW);
  delay(100);
}

// 检查是否需要刷新数据
if (refresh) {
  now = millis();
  refresh = false;

// 开始请求JSON数据，灯亮
  Serial.println("request json and display... ");
  digitalWrite(LED_BUILTIN, HIGH);

// 清屏
  myScreen.clear();
  // 请求API接口获取数据并进行处理
  request_json_and_display();

// 开始请求JSON数据，请求完毕，灯灭
  digitalWrite(LED_BUILTIN, LOW);
}
}
```
在上述代码中，设置了一个now变量，用于存储上次更新时的时间，并在每次循环时，进行对比，达到了interval 定义的间隔，就自动发起一次新的情况。
代码中，还包含了检测到BOOTSEL按键按下后的检测代码，以便可以通过BOOTSEL按键，来强制触发一次更新操作。

完成以上的各部分功能代码，最后整合起来，就能完成实际需要的功能了。
最终的代码，可以查看本项目的代码库 [https://gitee.com/honestqiao/digikey_api_solutions](https://gitee.com/honestqiao/digikey_api_solutions "https://gitee.com/honestqiao/digikey_api_solutions") 中Arduino部分的代码：**digikey_api_product_monitor.ino**

### 功能测试
#### 1. 服务器端未登录
当服务器端未登录时，屏幕上会显示二维码：

<ignore_js_op>

<div class="tip tip_4 aimg_tip" id="aimg_779571_menu" style="position: absolute; display: none" disautofocus="true">
<div class="xs0">
<p><strong>WechatIMG4591.jpg</strong> <em class="xg1">(231.09 KB, 下载次数: 0)</em></p>
<p>
<a href="javascript:;" class="loginf" >下载附件</a>

<a href="javascript:;" onclick="showWindow(this.id, this.getAttribute('url'), 'get', 0);" id="savephoto_779571" url="home.php?mod=spacecp&ac=album&op=saveforumphoto&aid=779571&handlekey=savephoto_779571">保存到相册</a>

</p>

</div>
<div class="tip_horn"></div>
</div>

</ignore_js_op>

查看 W5500_Evb_Pico 串口输出，会看到如下信息：

<ignore_js_op>

<div class="tip tip_4 aimg_tip" id="aimg_779607_menu" style="position: absolute; display: none" disautofocus="true">
<div class="xs0">
<p><strong>iShot_2024-01-23_08.50.07.png</strong> <em class="xg1">(221.13 KB, 下载次数: 0)</em></p>
<p>
<a href="javascript:;" class="loginf" >下载附件</a>

<a href="javascript:;" onclick="showWindow(this.id, this.getAttribute('url'), 'get', 0);" id="savephoto_779607" url="home.php?mod=spacecp&ac=album&op=saveforumphoto&aid=779607&handlekey=savephoto_779607">保存到相册</a>

</p>

</div>
<div class="tip_horn"></div>
</div>

</ignore_js_op>

可以使用微信扫描该二维码进行识别：

<ignore_js_op>

<div class="tip tip_4 aimg_tip" id="aimg_779570_menu" style="position: absolute; display: none" disautofocus="true">
<div class="xs0">
<p><strong>WechatIMG4592.jpg</strong> <em class="xg1">(841.66 KB, 下载次数: 0)</em></p>
<p>
<a href="javascript:;" class="loginf" >下载附件</a>

<a href="javascript:;" onclick="showWindow(this.id, this.getAttribute('url'), 'get', 0);" id="savephoto_779570" url="home.php?mod=spacecp&ac=album&op=saveforumphoto&aid=779570&handlekey=savephoto_779570">保存到相册</a>

</p>

</div>
<div class="tip_horn"></div>
</div>

</ignore_js_op>

识别成功后，会自动打开登录页面：

<ignore_js_op>

<div class="tip tip_4 aimg_tip" id="aimg_779609_menu" style="position: absolute; display: none" disautofocus="true">
<div class="xs0">
<p><strong>WechatIMG4594.jpg</strong> <em class="xg1">(113.95 KB, 下载次数: 0)</em></p>
<p>
<a href="javascript:;" class="loginf" >下载附件</a>

<a href="javascript:;" onclick="showWindow(this.id, this.getAttribute('url'), 'get', 0);" id="savephoto_779609" url="home.php?mod=spacecp&ac=album&op=saveforumphoto&aid=779609&handlekey=savephoto_779609">保存到相册</a>

</p>

</div>
<div class="tip_horn"></div>
</div>

</ignore_js_op>

然后点击页面中的 **使用DigiKey API 解决方案账号登录** 链接进行登录验证，验证完成后，将会自动跳转到回调网址，并显示最新的产品信息：

<ignore_js_op>

<div class="tip tip_4 aimg_tip" id="aimg_779610_menu" style="position: absolute; display: none" disautofocus="true">
<div class="xs0">
<p><strong>WechatIMG4595.jpg</strong> <em class="xg1">(186.51 KB, 下载次数: 0)</em></p>
<p>
<a href="javascript:;" class="loginf" >下载附件</a>

<a href="javascript:;" onclick="showWindow(this.id, this.getAttribute('url'), 'get', 0);" id="savephoto_779610" url="home.php?mod=spacecp&ac=album&op=saveforumphoto&aid=779610&handlekey=savephoto_779610">保存到相册</a>

</p>

</div>
<div class="tip_horn"></div>
</div>

</ignore_js_op>

此时，按一下 W5500_Evb_Pico 上的BOOTSEL按键，就会自动获取最新的产品信息，并显示到屏幕上：

<ignore_js_op>

<div class="tip tip_4 aimg_tip" id="aimg_779616_menu" style="position: absolute; display: none" disautofocus="true">
<div class="xs0">
<p><strong>WechatIMG4596.jpg</strong> <em class="xg1">(179.73 KB, 下载次数: 0)</em></p>
<p>
<a href="javascript:;" class="loginf" >下载附件</a>

<a href="javascript:;" onclick="showWindow(this.id, this.getAttribute('url'), 'get', 0);" id="savephoto_779616" url="home.php?mod=spacecp&ac=album&op=saveforumphoto&aid=779616&handlekey=savephoto_779616">保存到相册</a>

</p>

</div>
<div class="tip_horn"></div>
</div>

</ignore_js_op>

查看 W5500_Evb_Pico 串口输出，则会看到如下信息：

<ignore_js_op>

<div class="tip tip_4 aimg_tip" id="aimg_779608_menu" style="position: absolute; display: none" disautofocus="true">
<div class="xs0">
<p><strong>iShot_2024-01-23_08.51.29.png</strong> <em class="xg1">(379.91 KB, 下载次数: 0)</em></p>
<p>
<a href="javascript:;" class="loginf" >下载附件</a>

<a href="javascript:;" onclick="showWindow(this.id, this.getAttribute('url'), 'get', 0);" id="savephoto_779608" url="home.php?mod=spacecp&ac=album&op=saveforumphoto&aid=779608&handlekey=savephoto_779608">保存到相册</a>

</p>

</div>
<div class="tip_horn"></div>
</div>

</ignore_js_op>

看来，昨天库存还有224，今天已经变成200了，W5500_Evb_Pico又成功带货4件了！

通过上面的步骤，只要服务器端启动了，那么就可以通过手机和W5500_Evb_Pico显示的二维码，在手机上完成登录验证和授权。

在授权完成后，服务器端会自动定期刷新。而W5500_Evb_Pico也会定期调用APIJ接口，获取最新的产品信息，并进行显示。

## 七、总结
这个项目(DigiKey电子元器件价格及库存监视器)的完成，综合运用到了W5500_Evb_Pico、Pervasive Displays的EPD(墨水屏)的多种能力，包括网络连接、屏幕驱动、二维码显示、WEB(HTTP/HTTPS)服务、oAuth认证和授权、API请求和服务、JSON数据解析和提供等功能。小小说明一下，服务端程序，在本文发布时，还有oAuth的Toke自动刷新以防过期未处理，感兴趣的同学，可以处理了PR一下哦。

得益于W5500_Evb_Pico的强大，以及本次选择的上好屏幕Pervasive Displays的EPD(墨水屏)，让各项功能的开发和运行，得以顺利的开展和应用。

做为同级别同类型中的王者Raspberry Pico，具有无尽的潜力，结合W5500有线网络模块，让其网络连接能力发挥到极致，运用好了，能够做出非常非常棒的项目和作品。

感谢得捷和EEWorld提供了本次机会，新的一年(农历)即将到来，提前祝得捷、EEWorld、各位同学朋友龍年都龙马精神龙腾虎跃！！！

eew_cT3H5d

这个项目看似简单，其实需要懂很多东西，大佬果然是大佬

HonestQiao

eew_cT3H5d 发表于 2024-1-23 19:10 这个项目看似简单，其实需要懂很多东西，大佬果然是大佬

主要就是把各个环节给理清楚，一步步来就成。

bitter

牛牛牛

zygalaxy

乔帮主，有这款墨水屏幕显示中文的文档不

HonestQiao

zygalaxy 发表于 2024-2-22 16:53 乔帮主，有这款墨水屏幕显示中文的文档不

告诉你2个悲催的消息。

1. 我咨询过官方，他们说，有自定义字体的版本，需要收费才能发放。

2. 一怒之下，我自己hack了一下，支持中文了；但是，忘记拷贝出来了。前些日子他们更新了库，把我改的内容，都给恢复了，哭死。

等我有时间，再弄一遍，专门发出来吧。

通途科技

#在这里快速回复#图文并茂，受益匪浅，收藏学习中。加油加油！！！

【得捷电子Follow me第4期】终极任务一：DigiKey电子元器件价格及库存监视器（下） [复制链接]

最新回复

点评

点评