Ladder-Climbers / magic-mouse

一个基于 HTML5 和 Go 语言后端的，可将任意带陀螺仪的移动设备（例如智能手机）变成控制电脑屏幕上光标的“空中鼠标”的前后端项目。

MagicMouse：空中鼠标 APP

网页版的无线飞鼠，使用移动硬件的陀螺仪控制鼠标。

控制原理

HTML5 网页能获取到移动设备的陀螺仪信息，可以利用这个信息控制屏幕上的鼠标移动。

计划

可行性验证

• HTML5 能否获取陀螺仪信息（https://blog.csdn.net/qq_30100043/article/details/73323617）

  

• 陀螺仪信息处理

  • 映射方式 1：计算角度和初始的差，直接应用到x/y坐标（三角函数）
  • 映射方式 2：（未定）

• 后端能否简便使用 WebSocket

  • NodeJS的 WebSocket 原生支持
  • Go WebSocket
  • GoFrame
    • GoFrame WebSocket（https://www.bookstack.cn/read/goframe-1.11/net-ghttp-websocket-index.md）
    • 解析 JSON：encoding/json 包（https://www.cnblogs.com/ycyoes/p/5398796.html）

• 后端能否控制鼠标移动

  • RobotJs
  • RobotGo

• 后端能否在屏幕绘图起到提示作用

• 前端跨平台特性

  • 判断平台对陀螺仪硬件/软件的支持

• 后端跨平台特性

• 后端软件封装

接口

API

1. /**：静态网页
2. /api/v1/ws：websocket接口

Websocket 数据帧

开始连接

{
  "cmd": "start"
}

服务器返回

{
    "cmd": "start_done",
    "message": "OK"
}

单个角数据帧

{
  "cmd": "data_angle_frame",
  "data": {
    "alpha": 120.8,
    "beta": 10.64,
    "gamma": 100
  }
}

信息提示

{
    "cmd": "message",
    "data": {
        "message": "遇到异常！"
    }
}

键盘按键

{
    "cmd": "key",
    "data": {
        "keys": [
            
        ]
    }
}

鼠标按键

0：左键 1：右键 2：滚轮上 3：滚轮下

{
    "cmd": "mouse",
    "data": {
        "mouse_key": 1
    }
}

停止

{
    "cmd": "stop_from_client"
}

服务端返回

{
    "cmd": "stop_from_server"
}

文件结构

• magic_mouse.go：主程序
• /public/**：前端的静态文件

逻辑设计

1. 处理映射
   1. 按照三角函数映射
   2. 自定义屏幕映射区域
2. 控制
   1. 当控制鼠标移出映射区域的时候，暂时取消对鼠标的控制
   2. 当点击停止的时候，和服务端断开连接
3. 显示
   1. 前端/服务端显示/提示当前控制状态
4. 网络支持
   1. 本地网络支持
      1. 在本地服务端建立连接
      2. 让前端连接本地创建的网络服务
   2. 远程网络服务
      1. 本地服务端连接远端服务器
      2. 前端也连接远端服务器
      3. 通过服务器进行通讯

前端设计

需要可操作的功能

1. 调试
   1. 显示传感器信息
   2. 显示传感器数据
   3. 显示连接情况
   4. 修改连接URL
2. 操作
   1. 操作按钮
      1. 控制开始/停止
      2. 复位按键，重新设置定位偏移
   2. 控制按钮
      1. 在陀螺仪尚不可用时，使用方向键控制鼠标（计划）
      2. 鼠标点击按钮（短按右键，长按左键，按住移动鼠标为拖动/绘图）
      3. 绑定的按键
         1. F5：开始幻灯片放映
         2. Esc：退出幻灯片/退出到播放模式
         3. Ctrl+P：打开/关闭幻灯片书写
         4. Ctrl+L：打开/关闭激光笔模式
         5. Ctrl+M：打开/关闭墨迹
         6. Ctrl+S：切换到某幻灯片
         7. W/B：白/黑屏
         8. Win+D：回到桌面
         9. 方向键
         10. 空格
         11. 回车
3. 自定义
   1. 修改对应按键码
   2. 修改按键位置/设置按键排布模板

UI设计

前端

大概长这样

服务端

普通的单页

远程转发服务器

使用逻辑

1. 维护一个已登录表
2. 连接上的设备设定自己是server还是client，提供自己的版本，确定接头暗号（key），key应保持不同设备不同
3. 设备连接远程服务器，服务器判断来访IP，如果IP一致就返回从同IP来的设备列表
4. 选择连接之后，标记已经使用状态

API：/api/v1/remote/

HTTP请求

• server/
  • login：服务端登录，参数：
    • key：唯一指定辨别方式
    • ip：本地可用IP，为一个字符串列表
  • connect：服务端连接前端
    • 参数
      • key：前端的key
    • 返回
      • token：WebSocket连接使用的标识
• client/
  • login：前端登录，参数：
    • key：唯一指定辨别方式
  • connect：前端连接服务端
    • 参数
      • key：服务端的key
    • 返回
      • token：WebSocket连接使用的标识

WebSocket接口：ws，格式：

{
    "cmd": "...",
    "data": {...}
}

// 返回接近HTTP接口
{
    "cmd": "...",
    "code": 0,
    "message": "...",
    "data": {...}
}

WebSocket命令：

connect：参数：token；发送/接收

执行connect之后的命令同内网连接

开放源代码许可

本项目采用 MIT 许可证。

本项目使用到的其他开源库：

• RobotGo，遵循 Apache 许可证。
• GoFrame，遵循 MIT 许可证。