为自己没有驱动的机械键盘做一个网页驱动

为什么要做网页驱动

米饭现在用的机械键盘的GeekElite Lio87，是一款超级超级好看，很有复古韵味但是又充满了RGB的键盘。
最特别的就是不仅仅键盘有灯光，正面还有一条贯穿式的灯条。

之前有听到说官方在制作网页驱动的消息，再后来就听到驱动做了一半，公司消失了导致驱动没有了的消息。
这个键盘左侧有好多快捷键，如果都设定不了的话感觉好可惜。而且没有驱动的话，也没办法对灯光颜色进行很准确的更改，更换键帽之类的想要换匹配的灯光就很困难。

开始制作

因为现在AI发展的特别快，所以米饭就去问ChatGPT有没有什么方法制作一个驱动。首先查看了键盘的硬件ID，得到了明 Lio87/Leo87 属于 Telink + EVISION 一类的键盘方案生态，而刚好WOB的Rainy75y也是这个方案。所以尝试直接使用WOB的网页驱动。

本来只是想着试一试，没想到真的可以使用。灯光控制和键位绑定基本都正常。支持WOB驱动没办法正确识别Lio87的键位map，导致键位绑定会出错。

同时使用了lsusb工具，获得到了HIDx信息，信息都是16进制的，不过伟大的ChatGpt直接完成了对信息的解析：

    GeekElite Leo87 配置通道
    
    VID        0x320F
    PID        0x5055
    
    Usage Page 0xFF1C
    Usage      0x0092
    
    Report ID  0x04
    
    OUT:
      Report ID + 63 byte payload
      = 64 bytes
    
    IN:
      Report ID + 63 byte payload
      = 64 bytes


Interface 0
└── Keyboard
    ├── 普通 6KRO 键盘输入
    ├── Num/Caps/Scroll LED Output
    └── 一个 64-byte Feature Report

    Interface 1
    │
    ├── Report ID 1
    │   └── Keyboard
    │       120 bit NKRO 输入
    │
    ├── Report ID 2
    │   └── System Control
    │
    ├── Report ID 3
    │   └── Consumer Control
    │
    ├── Report ID 4                     ★
    │   └── FF1C:0092 Vendor Control
    │       ├── OUT 63 bytes
    │       └── IN  63 bytes
    │
    ├── Report ID 5
    │   └── Generic Desktop
    │       ├── OUT 32 bytes
    │       └── IN  32 bytes
    │
    └── Report ID 6
        └── Mouse

之后通过Hook WOB网页驱动，获取到更改颜色时，驱动向键盘发送的数据。

HIDDevice.prototype.sendReport


const oldSendReport = HIDDevice.prototype.sendReport;

HIDDevice.prototype.sendReport = async function(reportId, data) {
    console.log(
        "HID TX",
        "reportId =", reportId,
        "data =",
        Array.from(new Uint8Array(data))
            .map(x => x.toString(16).padStart(2, "0"))
            .join(" ")
    );

    return oldSendReport.call(this, reportId, data);
};

通过抓取更改颜色的信息，交给ChatGPT完成了颜色更改部分的整理。之后通过同样的方法得到了宏的设置、键位设置的方法。再通过对Rainy75键位MAP与Lio87键位MAP的对比，得到了知道所有信息的Lio87键位MAP （AI真的好厉害，这一段就是两个超级长的十六进制文件进行对比，AI很快就找到了规律并且得到了结果）

完成网页端驱动的制作

刚刚的步骤都是与网页版ChatGPT一起完成的，接下来因为要写网页了，所以转到了Codex中继续完成。后面的步骤就很简单了，把抓取整理得到的MAP，颜色控制、宏控制说明文件给Codex，然后Codex就直接给出了第一版可用的驱动。
在完成基础框架和功能的搭建之后，就不再需要很厉害的ChatGPT啦，于是转为通过CodeBuy，使用DeepSeek V4.1 Flash完成后续的UI制作以及一些小BUG的修复。
最终得到了完整版网页驱动

使用驱动

驱动已经开源啦，大家可以前往GitHub自行部署驱动：https://github.com/cc2562/GeekElite-Lio87-web-driver
或者使用米饭用Cloudflare Page搭建的在线版本：https://lio87.ccrice.com/
驱动目前的功能：

• 设置键盘颜色和动画
• 支持设定单键颜色
• 更改键位，包括左侧快捷键
• 录制宏和设定宏