Merge pull request #14 from AkiChase/dev

Scrcpy Mask v0.1.7

README.md

@@ -13,9 +13,19 @@ Due to the delay and blurred image quality of the mirror screen. This project fo
 - [x] Visually setting the mapping
 - [x] Key mapping config import and export
 - [x] Update check
+- [ ] Internationalization (i18n)
 - [ ] Switch between key mapping and raw input
+- [ ] Gamepad key mapping
 - [ ] Better macro support
 - [ ] Provide external interface through websocket
+- [ ] Help document
+
+## Demonstration video
+
+- [M 系列 Mac 电脑玩王者，暃排位实录，使用 Android Stuido 模拟器和开源 Scrcpy Mask 按键映射工具-哔哩哔哩](https://b23.tv/q6iDW1w)
+- [自制跨平台开源项目 Scrcpy Mask ，像模拟器一样用键鼠控制任意安卓设备！以 M 系列芯片 MacBook 打王者为例-哔哩哔哩](https://b23.tv/gqmriXr)
+- [如何用 PC 控制安卓手机打王者？只要思想不滑坡，办法总比困难多！-哔哩哔哩](https://b23.tv/dmUOpff)
+- [M 芯片 Mac 怎么用 Android Studio 模拟器打王者？这是 Up 耗时数个月给出的答案-哔哩哔哩](https://b23.tv/ckJgyK5)
 
 ## Screenshot
 
@@ -31,6 +41,25 @@ Due to the delay and blurred image quality of the mirror screen. This project fo
 
 ![](https://pic.superbed.cc/item/66373c8cf989f2fb97679dfd.png)
 
+## Basic using
+
+1. Install software suitable for your system platform from [releases](https://github.com/AkiChase/scrcpy-mask/releases)
+2. Identify your Android device type
+	1. For physical devices like phones or tablets
+		1. You need to solve the problem of screen casting on your own. Recommend using the official screen mirror method of your device brand to achieve the minimum delay
+		2. Enable ADB debugging on your device via USB or wirelessly, then connect it to your computer.
+	2. For emulator, you don't need screen mirror, and emulator generally default to enabling ADB wired debugging. So this is the best way for game, I think.
+3. Launch the software and navigate to the Device page.
+	1. Find your device among the available devices (if not found, please search for how to enable ADB debugging for your device).
+	2. Right-click on your device and choose "Get Screen Size". Use the obtained screen size as a reference and enter the device's width and height correctly. Note: If the width or height is incorrect (for example, they are reversed in portrait and landscape modes), all touch operations will be ignored, but no error message will appear.
+	3. Right-click on your device again and choose "Control this device".
+4. Navigate to the Settings page -> Mask Settings, and set the width and height of the mask to a certain multiple of the device's size to ensure the mask size is appropriate.
+5. Navigate to the Mask page where you can see a transparent mask. Next, adjust and move your emulator window or screen mirroring window to align the displayed content area with the transparent mask area.
+6. Navigate to the Key mapping page and switch or edit the key mapping configs.
+7. Return to the Mask page and start enjoying.
+
 ## Contribution.
 
 If you are interested in this project, you are welcome to submit pull request or issue. But my time and energy is limited, so I may not be able to deal with it all.
+
+[![Star History Chart](https://api.star-history.com/svg?repos=AkiChase/scrcpy-mask&type=Date)](https://star-history.com/#AkiChase/scrcpy-mask&Date)

package.json

@@ -1,7 +1,7 @@
 {
   "name": "scrcpy-mask",
   "private": true,
-  "version": "0.1.6",
+  "version": "0.1.7",
   "type": "module",
   "scripts": {
     "dev": "vite",

src-tauri/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "scrcpy-mask"
-version = "0.1.6"
+version = "0.1.7"
 description = "A Tauri App"
 authors = ["AkiChase"]
 edition = "2021"

src-tauri/tauri.conf.json

@@ -1,6 +1,6 @@
 {
   "productName": "scrcpy-mask",
-  "version": "0.1.6",
+  "version": "0.1.7",
   "identifier": "com.akichase.mask",
   "build": {
     "beforeDevCommand": "pnpm dev",
@@ -31,6 +31,10 @@
       "icons/icon.icns",
       "icons/icon.ico"
     ],
-    "resources": ["resource/*"]
+    "resources": [
+      "resource/default-key-config.json",
+      "resource/scrcpy-server-v2.4",
+      "resource/adb"
+    ]
   }
 }

src-tauri/tauri.windows.conf.json

@@ -0,0 +1,11 @@
+{
+  "bundle": {
+    "resources": [
+      "resource/default-key-config.json",
+      "resource/scrcpy-server-v2.4",
+      "resource/adb.exe",
+      "resource/AdbWinApi.dll",
+      "resource/AdbWinUsbApi.dll"
+    ]
+  }
+}

src/components/keyboard/KeyBoard.vue

@@ -212,6 +212,11 @@ function handleKeyUp(event: KeyboardEvent) {
   setCurButtonKey(event.code);
 }
 
+function handleKeyDown(event: KeyboardEvent) {
+  // prevent F1-F12
+  if (/^F(1[0-2]|[1-9])$/.test(event.code)) event.preventDefault();
+}
+
 function handleMouseWheel(event: WheelEvent) {
   if (event.deltaY > 0) {
     // WheelDown
@@ -231,12 +236,14 @@ function resetKeyMappingConfig() {
 }
 
 onActivated(() => {
+  document.addEventListener("keydown", handleKeyDown);
   document.addEventListener("keyup", handleKeyUp);
   document.addEventListener("wheel", handleMouseWheel);
 });
 
 onBeforeRouteLeave(() => {
   return new Promise((resolve, _) => {
+    document.removeEventListener("keydown", handleKeyDown);
     document.removeEventListener("keyup", handleKeyUp);
     document.removeEventListener("wheel", handleMouseWheel);
     if (keyboardStore.edited) {

src/hotkey.ts

@@ -846,28 +846,14 @@ function handleMouseWheel(event: WheelEvent) {
   if (event.deltaY > 0 && event.timeStamp - lastWheelDownTime > 50) {
     lastWheelDownTime = event.timeStamp;
     // WheelDown
-    if (downKeyMap.has("WheelDown")) {
-      if (!downKeyMap.get("WheelDown")) {
-        downKeyMap.set("WheelDown", true);
     downKeyCBMap.get("WheelDown")?.();
-      } else {
-        downKeyMap.set("WheelDown", false);
     upKeyCBMap.get("WheelDown")?.();
-      }
-    }
   } else if (event.deltaY < 0 && event.timeStamp - lastWheelUpTime > 50) {
     lastWheelUpTime = event.timeStamp;
     // WheelUp
-    if (downKeyMap.has("WheelUp")) {
-      if (!downKeyMap.get("WheelUp")) {
-        downKeyMap.set("WheelUp", true);
     downKeyCBMap.get("WheelUp")?.();
-      } else {
-        downKeyMap.set("WheelUp", false);
     upKeyCBMap.get("WheelUp")?.();
   }
-    }
-  }
 }
 
 function addShortcut(