（待开发） | ✅ | ✅ | | 物理模拟 | ✅
（仅动画） | ✅
（所有状态） | ❌
（好像有，还没深究） | ❌
（Spine 跟我扯这个？） | | 参数控制 | 变形 | 变形 | Parameter
Part | ❌
（人懒没做） | | 面部捕捉 | ✅ | ✅ | ✅ | ❌
（无参数规范） | | 全身捕捉 | ✅ | ✅ | ❌
（无参数规范） | ❌
（无参数规范） | ## 主要开发技术 本应用使用前端技术，基于[Electron](https://www.electronjs.org/)开发，构建工具使用了[Vite](https://vitejs.dev/)。 数据库存储采用了[lowdb](https://github.com/typicode/lowdb)。 多语言的支持采用了[i18next](https://www.i18next.com/)。 控制面板采用[Vue](https://vuejs.org/)框架开发，使用了[Element Plus](https://element-plus.org/)组件库。 2D 模型使用[Pixi.js](https://pixijs.com/)作为渲染引擎，3D 模型使用[Three.js](https://threejs.org/)作为渲染引擎。 动作捕捉使用了 Google 的[MediaPipe](https://mediapipe.dev/)进行识别，并使用[Kalidokit](https://github.com/yeemachine/kalidokit)进行捕捉数据解析。 ## 开发 ```bash # 安装依赖 yarn # 启动 yarn start # 构建（具体build版本可以在根目录下的build.config.js文件中配置） yarn build ``` ## Special Thanks 这是我的初次尝试开发一个完整的应用，各方面经验都十分欠缺。 本项目的文件结构参考了同样使用 Electron 开发的下载工具[Motrix](https://motrix.app/)，在此表示感谢。 感谢 [笺染菲素](https://space.bilibili.com/33572615) 测试应用并提供了不少建议。 感谢 [HuiDesktop](https://github.com/HuiDesktop/HuiDesktop) 的作者 [pure01fx](https://github.com/pure01fx) 提供的 Spine 方面的一些技术支持。 感谢 [greenjerry](https://github.com/greenjerry) 对我在物质，精神层面，以及软件和硬件上的大力支持。 ================================================ FILE: README-JP.md ================================================ # Hime Display
(開発予定) | ✅ | ✅ | | 物理シミュレーション | ✅
(アニメーションのみ) | ✅
(すべての状態) | ❌
(まだ調べていません) | ❌
(スパインは無理) | | パラメータ制御 | モーフ | モーフ | Parameter
Part | ❌ | | 顔キャプチャ | ✅ | ✅ | ✅ | ❌
(パラメータ基準なし) | | 全身キャプチャ | ✅ | ✅ | ❌
(パラメータ基準なし) | ❌
(パラメータ基準なし) | ## 主な開発技術 このアプリケーションは、フロントエンド技術を使用し、[Electron](https://www.electronjs.org/) に使って開発されており、構築ツールは [Vite](https://vitejs.dev/) を使用しています。 データベースは [lowdb](https://github.com/typicode/lowdb) を使用しています。 多言語対応は[i18next](https://www.i18next.com/) を採用。 コントロールパネルは [Vue](https://vuejs.org/) フレームワークで開発され、[Element Plus](https://element-plus.org/) コンポーネントライブラリを使用します。 2D モデルはレンダリングエンジンに[Pixi.js](https://pixijs.com/)を、3D モデルはレンダリングエンジンに[Three.js](https://threejs.org/)を使用しています。 モーション キャプチャは、Google の [MediaPipe](https://mediapipe.dev/) を使用し、キャプチャデータの分析は [Kalidokit](https://github.com/yeemachine/kalidokit) を使用します。 ## 開発 ```bash # デペンデンシーのインストール yarn # 起動 yarn start # ビルド（具体的なビルドタイプは、ルートディレクトリのbuild.config.jsファイルで配置できます） yarn build ``` ## スペシャルサンクス 私にとって、健全なアプリケーションを開発のは初めてで、まだ右も左もわかりません。 このプロジェクトのファイル構造は、同じく Electron によって開発されたダウンロードツール [Motrix](https://motrix.app/) を参照しています。ありがとうございます。 アプリケーションをテストし、多くの提案を提供してくれた [笺染菲素](https://space.bilibili.com/33572615) に感謝します。 [HuiDesktop](https://github.com/HuiDesktop/HuiDesktop) の作成者 [pure01fx](https://github.com/pure01fx) による Spine のテクニカルサポートに感謝します。 [greenjerry](https://github.com/greenjerry) には、物質的、精神的、そしてソフトウェア、およびハードウェアで私をサポートしていただき、本当にありがとうございます。 ================================================ FILE: README.md ================================================ # Hime Display
(Developing) | ✅ | ✅ | | Physics Simulation | ✅
(Animation only) | ✅
(All status) | ❌
(Considering) | ❌
(Not support) | | Parameter Control | Morph | Morph | Parameter
Part | ❌
(TODO) | | Face Capture | ✅ | ✅ | ✅ | ❌
(No specification) | | Holistic Capture | ✅ | ✅ | ❌
(No specification) | ❌
(No specification) | ## Main Techniques This application mainly uses Front-end technology, based on [Electron](https://www.electronjs.org/), mainly uses [Vite](https://vitejs.dev/) as build tools. Uses [lowdb](https://github.com/typicode/lowdb) as the database. Multilingual support adopted [i18next](https://www.i18next.com/). The control panel adopted [Vue](https://vuejs.org/) framework and [Element Plus](https://element-plus.org/) component library. Uses [Pixi.js](https://pixijs.com/) as the rendering engine of 2D models, and the 3D models use [Three.js](https://threejs.org/). Motion capture adopts Google's [MediaPipe](https://mediapipe.dev/), and adopts [Kalidokit](https://github.com/yeemachine/kalidokit) to analyse captured data. ## Develop ```bash # Install dependencies yarn # start yarn start # build (The specific build version can be configured in the `build.config.js` file in the root directory) yarn build ``` ## Special Thanks This is my first attempt to develop a full application, maybe there are some deficiencies. The file structure of this application refers to a download tool [Motrix](https://motrix.app/) which is also developed by Electron. Thanks to [笺染菲素](https://space.bilibili.com/33572615) for testing the application and providing many suggestions. Thanks to [pure01fx](https://github.com/pure01fx), the author of [HuiDesktop](https://github.com/HuiDesktop/HuiDesktop) for some technical support on Spine. Thanks to [greenjerry](https://github.com/greenjerry) for supporting me in material, spiritual, software and hardware. ================================================ FILE: build.config.js ================================================ /** * @type {import('electron-builder').CliOptions} * {@link https://www.electron.build/configuration/configuration} */ const options = { // targets: builder.createTargets([ // builder.Platform.WINDOWS, // builder.Platform.MAC, // ]), // config: { productName: "Hime Display", directories: { output: "build", }, // https://github.com/electron-userland/electron-builder/issues/5463 // 太脑瘫了，electron-builder在使用GitHub Actions时必须手动指定不自动执行publish过程 publish: null, files: ["dist/renderer/**/*", "dist/main/**/*"], // asar: false, dmg: { background: "public/background/background.tiff", window: { width: 540, height: 380, }, contents: [ { x: 410, y: 230, type: "link", path: "/Applications", }, { x: 130, y: 230, type: "file", }, ], }, mac: { icon: "public/icons/icon.png", extendInfo: { // 现在的macOS应用想要访问摄像机等权限必须在此声明，i18n我是没本事做到这儿来了，因此就用英文了 NSCameraUsageDescription: "Face mesh and holistic capturing need to access to your camera", "com.apple.security.device.camera": true, }, }, nsis: { oneClick: false, allowElevation: true, allowToChangeInstallationDirectory: true, createDesktopShortcut: true, createStartMenuShortcut: false, }, win: { icon: "public/icons/icon.png", target: [ { target: "nsis", arch: ["x64"], }, ], }, // linux: { // icon: "public/icons", // }, // }, }; module.exports = options; ================================================ FILE: package.json ================================================ { "name": "hime-display", "version": "1.2.0", "description": "A universal desktop model displayer for Live2D, Spine, MMD and VRoid.", "main": "./dist/main/main.cjs.js", "repository": { "type": "git", "url": "https://github.com/TSKI433/hime-display" }, "author": "TSKI433", "license": "GPL-3.0", "private": true, "workspaces": { "packages": [ "src/*" ] }, "scripts": { "start": "node ./scripts/dev-runner", "build": "node ./scripts/build", "build:macos": "node ./scripts/build --macos", "build:windows": "node ./scripts/build --windows" }, "dependencies": { "electron-is": "^3.0.0", "electron-log": "^5.3.4", "lowdb": "1.0.0" }, "devDependencies": { "chalk": "^5.4.1", "electron": "^35.2.1", "electron-builder": "^26.0.12", "eslint": "^9.25.1", "eslint-config-prettier": "^10.1.2", "eslint-plugin-prettier": "^5.2.6", "eslint-plugin-vue": "^10.0.0", "listr": "^0.14.3", "vite": "^6.3.3" } } ================================================ FILE: scripts/build.js ================================================ const path = require("path"); const chalk = require("chalk"); const ListR = require("listr"); const builder = require("electron-builder"); const { build: viteBuild, createLogger } = require("vite"); const builderConfig = require("../build.config"); const { MAIN_ROOT, MAIN_CONTROL_PRELOAD_ROOT, MAIN_DISPLAY_PRELOAD_ROOT, RENDERER_ROOT, } = require("./constants"); const args = process.argv.slice(2); let targets = null; if (args.includes("--macos")) { targets = builder.Platform.MAC.createTarget(); } else if (args.includes("--windows")) { targets = builder.Platform.WINDOWS.createTarget(); } else { targets = builder.createTargets([ builder.Platform.WINDOWS, builder.Platform.MAC, ]); } function build() { const tasks = new ListR([ { title: "building renderer process", task: buildRenderer, }, { title: "building main process", task: buildMainProcess(MAIN_ROOT), }, { title: "building main control preload process", task: buildMainProcess(MAIN_CONTROL_PRELOAD_ROOT), }, { title: "building main display preload process", task: buildMainProcess(MAIN_DISPLAY_PRELOAD_ROOT), }, ]); tasks .run() .then(() => { builder.build({ targets, config: builderConfig, }); }) .catch((error) => { createLogger().error( chalk.red(`error during build application:\n${error.stack}`) ); process.exit(1); }); } async function buildRenderer() { try { const rendererOutput = await viteBuild({ root: RENDERER_ROOT, base: "./", build: { outDir: path.resolve(__dirname, "../dist/renderer"), }, }); return rendererOutput; } catch (error) { createLogger().error( chalk.red(`error during build renderer:\n${error.stack}`) ); process.exit(1); } } function buildMainProcess(root) { return async function () { try { const buildOutput = await viteBuild({ root, build: { outDir: path.resolve(__dirname, "../dist/main"), }, }); return buildOutput; } catch (error) { createLogger().error( chalk.red(`error during build main process:\n${error.stack}`) ); process.exit(1); } }; } build(); ================================================ FILE: scripts/constants.js ================================================ const path = require("path"); module.exports = { MAIN_ROOT: path.resolve(__dirname, "../src/main"), // MAIN_PRELOAD_ROOT: path.resolve(__dirname, "../src/preload"), MAIN_CONTROL_PRELOAD_ROOT: path.resolve(__dirname, "../src/preload/control"), MAIN_DISPLAY_PRELOAD_ROOT: path.resolve(__dirname, "../src/preload/display"), RENDERER_ROOT: path.resolve(__dirname, "../src/renderer"), }; ================================================ FILE: scripts/dev-runner.js ================================================ const path = require("path"); const chalk = require("chalk"); const electron = require("electron"); const { spawn } = require("child_process"); const { createServer, createLogger, build } = require("vite"); const { MAIN_ROOT, MAIN_CONTROL_PRELOAD_ROOT, MAIN_DISPLAY_PRELOAD_ROOT, RENDERER_ROOT, } = require("./constants"); let manualRestart; let electronProcess; async function startRenderer() { try { const viteServer = await createServer({ root: RENDERER_ROOT, }); await viteServer.listen(); return viteServer; } catch (error) { createLogger().error( chalk.red(`error when starting dev server:\n${error.stack}`) ); } } async function watchMainProcess(root) { try { const rollupWatcher = await build({ root, mode: "development", build: { emptyOutDir: false, outDir: path.resolve(__dirname, "../dist/dev"), watch: true, }, }); return await new Promise((resolve, reject) => { rollupWatcher.on("event", (event) => { if (event.code === "BUNDLE_END") { resolve(rollupWatcher); } }); }); } catch (error) { createLogger().error( chalk.red(`error during watch main process:\n${error.stack}`) ); process.exit(1); } } function startElectron(RENDERER_URL) { let args = [ "--inspect=5858", path.join(__dirname, "../dist/dev/main.cjs.js"), ]; if (process.env.npm_execpath.endsWith("yarn.js")) { args = args.concat(process.argv.slice(3)); } else if (process.env.npm_execpath.endsWith("npm-cli.js")) { args = args.concat(process.argv.slice(2)); } electronProcess = spawn(electron, args, { env: { ...process.env, RENDERER_URL, }, stdio: "inherit", }); electronProcess.on("close", () => { if (!manualRestart) process.exit(); }); } async function start() { const rendererServer = await startRenderer(); const { port = 3000, https = false } = rendererServer.config.server; const RENDERER_URL = `http${https ? "s" : ""}://localhost:${port}`; const mainWatcher = await watchMainProcess(MAIN_ROOT); const mainControlPreloadWatcher = await watchMainProcess( MAIN_CONTROL_PRELOAD_ROOT ); const mainDisplayPreloadWatcher = await watchMainProcess( MAIN_DISPLAY_PRELOAD_ROOT ); startElectron(RENDERER_URL); const manageElectronProcess = (event) => { if (event.code !== "BUNDLE_END") { return; } if (electronProcess && electronProcess.kill) { manualRestart = true; process.kill(electronProcess.pid); electronProcess = null; startElectron(RENDERER_URL); setTimeout(() => { manualRestart = false; }, 5000); } }; mainWatcher.on("event", manageElectronProcess); mainControlPreloadWatcher.on("event", manageElectronProcess); mainDisplayPreloadWatcher.on("event", manageElectronProcess); } start(); ================================================ FILE: src/main/Application.js ================================================ import { EventEmitter } from "events"; import { WindowManager } from "./ui/WindowManager"; import { ThemeManager } from "./ui/ThemeManager"; import { TrayManager } from "./ui/TrayManager"; import fs from "fs"; import { Buffer } from "buffer"; import low from "lowdb"; import lowFileSync from "lowdb/adapters/FileSync"; import { APP_CONFIG_PATH, APP_DATA_PATH, CHROMIUM_PREFERENCE_PATH, } from "./options/paths"; import { defaultConfig } from "@shared/defaults/defaultConfig"; import { ipcMain, dialog, systemPreferences, app } from "electron"; import is from "electron-is"; import i18next from "@shared/locales/i18next"; export class Application extends EventEmitter { constructor() { super(); // this.isReady = false; this.init(); } init() { this.setChromiumPreference(); this.initConfigDB(); this.initLanguage(); this.initWindowManager(); this.initThemeManager(); this.initTrayManager(); this.handleIpcMessages(); } startApp() { // 为了实现展示器加载上一次的模型这种操作，控制面板必须要在启动应用的时候启动，只是show与hide的区别，而这个判断已经下方到windowManager里面去了 this.openWindow("controlPanel"); if (this.configDB.get(["general", "open-display-at-launch"]).value()) { this.openWindow(this.configDB.get(["display", "display-mode"]).value()); } // win.once("ready-to-show", () => { // this.isReady = true; // this.emit("ready"); // }); } openWindow(windowName) { return this.windowManager.openWindow(windowName); } setChromiumPreference() { // 每一次启动应用时，将默认的开发者工具窗口设定为一个独立的窗口，防止全屏透明的展示器打开窗口内开发者工具的时候透明失效 low(new lowFileSync(CHROMIUM_PREFERENCE_PATH)) .set("electron.devtools.preferences.currentDockState", '"undocked"') .write(); } initConfigDB() { this.configDB = low(new lowFileSync(APP_CONFIG_PATH)); // 看样子lowdb的这个defaults只能浅层defaults，到第二级就不管用了 this.configDB.defaults(defaultConfig).write(); } initLanguage() { i18next.changeLanguage(this.configDB.get(["general", "language"]).value()); } initWindowManager() { // 启动window时也需要读取配置数据库 this.windowManager = new WindowManager(this.configDB); } initThemeManager() { this.themeManager = new ThemeManager(); this.themeManager.on("system-theme-change", (theme) => { this.windowManager.sendMessageToWindow( "control", "main:update-theme", theme ); }); } initTrayManager() { this.trayManager = new TrayManager(); this.trayManager.buildMenu(); this.trayManager.on("tray:open-control-window", () => { // this.openWindow("controlPanel"); // 更改机制，目前控制面板永远不会被关闭，只会隐藏 this.windowManager.windows.control.show(); }); this.trayManager.on("tray:open-display-window", () => { this.openWindow(this.configDB.get(["display", "display-mode"]).value()); }); this.trayManager.on("tray:quit-app", () => { // this.windowManager.windows.control.destroy(); // 使用before-quit事件来处理应用无法正确退出的问题，直接上exit实在是有点暴力 app.quit(); }); } handleIpcMessages() { // 向子进程提供数据库存储目录 ipcMain.on("control2main:query-data-path", (event) => { event.returnValue = APP_DATA_PATH; }); ipcMain.on("control2main:query-system-theme", (event) => { event.returnValue = this.themeManager.getSystemTheme(); }); ipcMain.handle("control2main:select-path", (windowName) => { return dialog.showOpenDialogSync(this.windowManager.windows[windowName], { properties: ["openDirectory"], }); }); ipcMain.on("control2main:launch-display-window", () => { this.openWindow(this.configDB.get(["display", "display-mode"]).value()); }); ipcMain.on("control2main:relaunch-display-window", () => { // 使用destroy方法，防止使用close导致关闭窗口受阻 this.windowManager.windows.display.destroy(); this.openWindow(this.configDB.get(["display", "display-mode"]).value()); }); ipcMain.on("control2main:close-display-window", () => { this.windowManager.windows.display.destroy(); }); ipcMain.handle("control2main:query-window-ids", () => { // 因为关闭了新建窗口的this.allUpdateWindowIds();，对展示器的通知状态只能在这里进行 this.windowManager.updateWindowIds("display"); return this.windowManager.windowIds; }); ipcMain.handle("display2main:query-window-ids", () => { // 控制面板有必要确认展示器的模型载入状态，刷新页面后模型也会变为未载入状态 // 这里仅向控制面板发送消息，如果展示器发送消息，展示器的windowId在query状态同时成了update，会导致奇怪的问题，id直接变undefined了 // 为实现启动展示器自动加载之前的模型，也必须这么设计，而且还要把主进程检测到窗口打开时的广播操作关了，因为这个时候新建的窗口可能还没有准备接收消息 this.windowManager.updateWindowIds("control"); return this.windowManager.windowIds; }); ipcMain.handle("display2main:query-config", () => { return { config: this.configDB.value(), // 属于是让windowName搭个顺风车……免得初始化的时候多弄出一个通信来 windowName: this.windowManager.windows.display.windowName, }; }); ipcMain.on("control2main:update-config", () => { this.configDB.read(); }); ipcMain.on("control2main:open-dev-tool", (event, type) => { if ( type === "display" && this.windowManager.windows.display.windowName === "displayFullScreen" ) { dialog .showMessageBox(this.windowManager.windows.control, { type: "info", message: i18next.t("message.display-open-dev-title"), detail: i18next.t("message.display-open-dev-detail"), buttons: [ i18next.t("message.confirm"), i18next.t("message.cancel"), ], defaultId: 0, cancelId: 1, }) .then((result) => { result.response === 0 && this.windowManager.windows[type].webContents.openDevTools(); }); } else { this.windowManager.windows[type].webContents.openDevTools(); } }); ipcMain.handle("display2main:ask-for-media-access", () => { return this.askForMediaAccess(); }); ipcMain.on("display2main:set-ignore-mouse-events", (event, ...args) => { this.windowManager.windows.display.setIgnoreMouseEvents(...args); }); ipcMain.on("control2main:change-language", (event, language) => { console.log("[Hime Display] change language to", language); i18next.changeLanguage(language); this.trayManager.buildMenu(); }); // 窗口之间的消息中转 const routes = [ ["display2control:model-control-info", "control"], ["display2control:send-to-model-control", "control"], ["display2control:send-display-window-state", "control"], ["display2control:error", "control"], ["control2display:load-model", "display"], ["control2display:send-to-model-manager", "display"], ["control2display:query-display-window-state", "display"], ["control2display:screenshot", "display"], ]; routes.forEach(([channel, targetWindowKey]) => { ipcMain.on(channel, (event, ...args) => { const targetWindow = this.windowManager.windows[targetWindowKey]; if (targetWindow) { targetWindow.webContents.send(channel, ...args); } }); }); } async askForMediaAccess() { if (is.macOS()) { return systemPreferences.askForMediaAccess("camera"); } else { return true; } } quitApp() {} } ================================================ FILE: src/main/Launcher.js ================================================ import { EventEmitter } from "events"; import { app } from "electron"; // import is from "electron-is"; import { ExceptionHandler } from "./core/ExceptionHandler"; import { logger } from "./core/Logger"; import { Application } from "./Application"; export class Launcher extends EventEmitter { constructor() { super(); this.file = ""; this.init(); } init() { this.exceptionHandler = new ExceptionHandler(); // this.openedAtLogin = is.macOS() // ? app.getLoginItemSettings().wasOpenedAtLogin // : false; // logger.info("[Hime Display] openedAtLogin:", this.openedAtLogin); this.handleAppEvents(); } handleAppEvents() { app.on("ready", () => { this.application = new Application(); this.application.startApp(); // this.application.on("ready", () => { // this.sendFileToApplication(); // }); }); app.on("activate", () => { if (this.application) { logger.info("[Hime Display] activate"); // this.application.openWindow("controlPanel"); this.application.windowManager.windows.control.show(); } }); // 为了实现缓存不被清理的效果，展示器的close事件的默认行为已经被阻止，若不对app执行exit，应用会因为展示器未关闭而不退出，这里在应用希望退出时强制关闭展示器来解决这个问题 app.on("before-quit", () => { this.application.windowManager.windows.control.destroy(); }); app.on("will-quit", () => { logger.info("[Hime Display] will-quit"); if (this.application) { this.application.quitApp(); } }); // 监听此事件后，将不会在所有窗口退出时自动退出 app.on("window-all-closed", () => {}); } } ================================================ FILE: src/main/core/ExceptionHandler.js ================================================ import { app, dialog } from "electron"; import { logger } from "./Logger"; import is from "electron-is"; export class ExceptionHandler { constructor() { this.init(); } init() { if (is.dev()) { return; } process.on("uncaughtException", (error) => { const { message, stack } = error; logger.error(`[Hime Display] Uncaught exception: ${message}`); logger.error(stack); dialog.showErrorBox("Hime Display Error: ", stack); app.quit(); }); } } ================================================ FILE: src/main/core/Logger.js ================================================ import logger from "electron-log"; logger.info("[Hime Display] Logger init"); export { logger }; ================================================ FILE: src/main/index.js ================================================ import { Launcher } from "./Launcher"; new Launcher(); ================================================ FILE: src/main/menus/tray.js ================================================ export const trayMenuTemplate = [ { locale: "tray.open-control-window", event: "tray:open-control-window" }, { locale: "tray.open-display-window", event: "tray:open-display-window" }, { locale: "tray.quit-app", event: "tray:quit-app" }, ]; ================================================ FILE: src/main/options/paths.js ================================================ import { app } from "electron"; import { resolve } from "path"; export const APP_DATA_PATH = app.getPath("userData"); export const APP_CONFIG_PATH = resolve(APP_DATA_PATH, "config.json"); export const APP_DATABASE_PATH = resolve(APP_DATA_PATH, "database.json"); export const CHROMIUM_PREFERENCE_PATH = resolve(APP_DATA_PATH, "Preferences"); ================================================ FILE: src/main/options/windows.js ================================================ import { resolve } from "path"; import { DEV_SERVER_PORT } from "@shared/constants"; export const windowsOptions = { controlPanel: { attrs: { title: "Hime Display 控制面板", height: 600, width: 700, titleBarStyle: "hidden", vibrancy: "menu", autoHideMenuBar: true, titleBarOverlay: true, resizable: false, // visualEffectState: "active", // skipTaskbar: true, // 默认不显示，但必须启动 show: false, webPreferences: { // nodeIntegration: true, // contextIsolation: false, // webSecurity: false, devTools: true, sandbox: false, preload: resolve(__dirname, "./control-preload.cjs.js"), }, }, url: import.meta.env.DEV ? `http://localhost:${DEV_SERVER_PORT}/control.html` : "file://" + resolve(__dirname, "../renderer/control.html"), dev: { autoOpenDevTool: false, }, pageType: "control", }, displayFullScreen: { attrs: { title: "Hime Display", frame: false, //去除边框 hasShadow: false, //live2d模型会动，导致阴影出问题，所以干脆不要了 transparent: true, //让窗口透明 autoHideMenuBar: true, skipTaskbar: true, roundedCorners: false, //去除边角圆角，本来就是要占满整个屏幕的，stats面板被圆角弄掉一块实在有点难看 webPreferences: { // nodeIntegration: true, // contextIsolation: false, // 便于访问本地文件 webSecurity: false, devTools: true, preload: resolve(__dirname, "./display-preload.cjs.js"), }, }, url: import.meta.env.DEV ? `http://localhost:${DEV_SERVER_PORT}/display.html` : "file://" + resolve(__dirname, "../renderer/display.html"), dev: { autoOpenDevTool: false, }, pageType: "display", }, displayWindowed: { attrs: { title: "Hime Display", // frame: false, //去除边框 // hasShadow: false, //live2d模型会动，导致阴影出问题，所以干脆不要了 // transparent: true, //让窗口透明 autoHideMenuBar: true, // skipTaskbar: true, webPreferences: { // nodeIntegration: true, // contextIsolation: false, webSecurity: false, devTools: true, preload: resolve(__dirname, "./display-preload.cjs.js"), }, }, url: import.meta.env.DEV ? `http://localhost:${DEV_SERVER_PORT}/display.html` : "file://" + resolve(__dirname, "../renderer/display.html"), dev: { autoOpenDevTool: false, }, pageType: "display", }, }; ================================================ FILE: src/main/package.json ================================================ { "name": "@app/main", "version": "0.0.0", "dependencies": { "electron": "^35.2.1", "electron-is": "^3.0.0", "electron-log": "^5.3.4", "lowdb": "1.0.0" }, "devDependencies": { "rollup-plugin-auto-external": "^2.0.0", "vite": "^6.3.3" } } ================================================ FILE: src/main/ui/ThemeManager.js ================================================ import { nativeTheme } from "electron"; import { EventEmitter } from "events"; export class ThemeManager extends EventEmitter { constructor() { super(); this.init(); } init() { this.handelEvents(); } handelEvents() { nativeTheme.on("updated", () => { this.emit("system-theme-change", this.getSystemTheme()); }); } getSystemTheme() { return nativeTheme.shouldUseDarkColors ? "dark" : "light"; } } ================================================ FILE: src/main/ui/TrayManager.js ================================================ import i18next from "@shared/locales/i18next"; import { trayMenuTemplate } from "../menus/tray"; import { Tray, Menu } from "electron"; import path from "path"; import { EventEmitter } from "events"; import is from "electron-is"; // 我其实已经注意到macOS上显示的菜单为英语了，之所以没有对其进行处理，是因为这个应用用不到那个菜单，但是如果把菜单弄成null的话，默认注册的快捷键会失效，复制粘贴什么都用不了，所以直接懒得干了 export class TrayManager extends EventEmitter { constructor() { super(); this.template = trayMenuTemplate; if (is.macOS()) { this.tray = new Tray( path.resolve(__dirname, "./assets/trayTemplate.png") ); } else { this.tray = new Tray(path.resolve(__dirname, "./assets/trayWindows.png")); } } translateTemplate() { for (const item of this.template) { item.label = i18next.t(item.locale); item.click = () => { this.emit(item.event); }; } } buildMenu() { this.translateTemplate(); this.menu = Menu.buildFromTemplate(this.template); this.tray.setContextMenu(this.menu); } } ================================================ FILE: src/main/ui/WindowManager.js ================================================ import { EventEmitter } from "events"; import { windowsOptions } from "../options/windows"; import { BrowserWindow } from "electron"; import { logger } from "../core/Logger"; import is from "electron-is"; export class WindowManager extends EventEmitter { constructor(configDB) { super(); this.configDB = configDB; this.windows = { control: null, display: null, }; this.windowIds = { control: -1, display: -1, }; } openWindow(windowName) { const pageOptions = windowsOptions[windowName]; const pageType = pageOptions.pageType; if (this.windows[pageType] !== null) { // return new Error(`${pageType} window opened again before set to null`); // this.windows[pageType].show(); return this.windows[pageType]; } const window = new BrowserWindow(pageOptions.attrs); logger.info( `[Hime Display] new window created, windowName: ${windowName}, ID: ${window.webContents.id}` ); // 此标识主要用于展示器判断自身类型 window.windowName = windowName; this.windows[pageType] = window; this.windowIds[pageType] = window.webContents.id; window.loadURL(pageOptions.url); if (import.meta.env.DEV && pageOptions.dev.autoOpenDevTool) { window.webContents.openDevTools(); } window.on("closed", () => { this.windows[pageType] = null; this.windowIds[pageType] = -1; this.allUpdateWindowIds(); }); if (windowName === "displayFullScreen") { window.maximize(); window.setIgnoreMouseEvents(true, { forward: true, }); if (this.configDB.get(["display", "keep-display-at-top"]).value()) { // 之前这个级别太高了，搞不好会出大问题…… // window.setAlwaysOnTop(true, "screen-saver", 1); // 对于macOS而言，默认的层级已经足够了，但Windows在该层级下无法置顶 if (is.macOS()) { window.setAlwaysOnTop(true); } else { window.setAlwaysOnTop(true, "screen-saver"); } } switch (this.configDB.get(["display", "display-range"]).value()) { case "singleDesktop": { break; } case "allDesktops": { window.setVisibleOnAllWorkspaces(true); break; } case "allWorkspaces": { window.setVisibleOnAllWorkspaces(true, { visibleOnFullScreen: true, //在所有窗口上显示，全屏应用也不例外，目前已证实这个操作会带来一些问题，例如菜单栏无法正确显示，好像跟内部的进程转换有关 // 实测该项目设定为true时，在全屏状态下窗口不会显示 // skipTransformProcessType: true, }); break; } } } if (windowName === "controlPanel") { if (this.configDB.get(["general", "open-control-at-launch"]).value()) { window.once("ready-to-show", () => { window.show(); }); } //保持display窗口一直处于聚焦状态，以处理鼠标事件 window.on("blur", () => { if (this.windows.display?.windowName === "displayFullScreen") { this.windows.display.focus(); } }); // 更改机制，目前控制面板永远不会被关闭，只会隐藏 window.on("close", (event) => { event.preventDefault(); window.hide(); }); } // 为实现启动展示器自动加载之前的模型，需要在这里关闭事件通知，因为展示器窗口是在启动触发下方函数时，展示器只是开始加载了，并不一定准备好了接受消息，这时告知控制面板展示器已经准备好了的话，控制面板发送的消息无法被接收到 // this.allUpdateWindowIds(); return this.windows[pageType]; } sendMessageToWindow(windowName, message, ...args) { const window = this.windows[windowName]; if (window === null) { return; } logger.info(`[Hime Display] send to ${windowName}: ${message}`, ...args); window.webContents.send(message, ...args); } allUpdateWindowIds() { Object.keys(this.windows).forEach((key) => { this.updateWindowIds(key); }); } updateWindowIds(windowName) { this.sendMessageToWindow( windowName, "main2control&display:update-window-ids", this.windowIds ); } // 备选方案，使用MessageChannel实现两个渲染进程的通信 // buildMessagePort() { // const { port1, port2 } = new MessageChannel(); // this.windows.control.webContents.postMessage("buildMessagePort", null, [ // port1, // ]); // this.windows.display.webContents.postMessage("buildMessagePort", null, [ // port2, // ]); // } } ================================================ FILE: src/main/vite.config.js ================================================ import { resolve } from "path"; import { defineConfig } from "vite"; import autoExternal from "rollup-plugin-auto-external"; // https://vitejs.dev/config/ export default defineConfig({ build: { lib: { entry: resolve(__dirname, "./index.js"), name: "main", formats: ["cjs"], fileName: (format) => `main.${format}.js`, }, rollupOptions: { plugins: [ autoExternal({ packagePath: resolve(__dirname, "./package.json"), }), ], }, }, resolve: { alias: { "@shared": resolve(__dirname, "../shared"), }, }, }); ================================================ FILE: src/preload/control/config.js ================================================ // 几经考虑，还是把配置数据库也搬到控制面板了，IPC通信实在是麻烦了，不如直接在控制面板的preload中加载数据库 import low from "lowdb"; import lowFileSync from "lowdb/adapters/FileSync"; import path from "path"; import { APP_DATA_PATH } from "./paths"; import { ipcRenderer } from "electron"; import { defaultConfig } from "@shared/defaults/defaultConfig"; const APP_CONFIG_PATH = path.join(APP_DATA_PATH, "config.json"); const db = low(new lowFileSync(APP_CONFIG_PATH)); // 不是我想重复写代码，这个config和database绝对用不了class的继承，preload暴露的对象直接把原型链全灭了，所以只能一个一个写函数，也不用class了 export function value() { return db.value(); } export function write(value, data) { db.set(value, data).write(); // display从主进程请求配置，还得通知主进程更新一下 ipcRenderer.send("control2main:update-config"); } export function resetAllConfig() { db.setState(defaultConfig).write(); ipcRenderer.send("control2main:update-config"); } ================================================ FILE: src/preload/control/database.js ================================================ // 由于数据库仅在控制面板使用而不在主进程以及展示器使用，决定直接在控制面板的preload中加载数据库，减少IPC通信，优化性能 import low from "lowdb"; import lowFileSync from "lowdb/adapters/FileSync"; import fs from "fs"; import util from "util"; import path from "path"; import { defalutDatabase } from "@shared/defaults/defalutDatabase"; import { APP_DATA_PATH } from "./paths"; import { detectSpineVersionFromBinary } from "./utils"; const APP_DATABASE_PATH = path.join(APP_DATA_PATH, "database.json"); const db = low(new lowFileSync(APP_DATABASE_PATH)); db.defaults(defalutDatabase).write(); export function value() { return db.value(); } export function write(value, data) { db.set(value, data).write(); } export function removeDataFromSourcePath(sourcePath) { // 不愧是lodash，极致精简语法，remove({sourcePath})，优雅啊 // 从本源来讲，要追溯到_.matches，然后再到_.isMatch，然后再搭配上ES6的对象属性简写，最终浓缩成这个简单的语句 ["model", "motion3D", "audio3D"].forEach((type) => { db.get(type).remove({ sourcePath }).write(); }); } export async function loadDataFromSourcePathInfo(sourcePathInfo) { // 已改变载入机制 // removeRemovedSourceTypeData(sourcePathInfo); // await removeDeletedData(sourcePathInfo.sourcePath); removeDataFromSourcePath(sourcePathInfo.sourcePath); // 这里的await后面虽然没有任何操作，但是还是必要的，因为可以推住Promise的resolve时机，确保控制面板载入刷新以后的数据 await loadDataFromPath( sourcePathInfo.sourcePath, sourcePathInfo.sourceTypes, sourcePathInfo.sourcePath ); } // 造了半天我在造个寂寞，跟异步同步扯了半天有意思吗？改变思路，直接把刷新数据源的相关数据全删了重载 // // 若更改过一个数据源的sourceTypes，需要删除一些原来sourceType允许载入的数据 // function removeRemovedSourceTypeData(sourcePathInfo) { // db.get("model") // .remove( // (item) => // item.sourcePath === sourcePathInfo.sourcePath && // !sourcePathInfo.sourceTypes[item.modelType] // ) // .write(); // if (!sourcePathInfo.sourceTypes.motion3D) { // db.get("motion3D") // .remove({ sourcePath: sourcePathInfo.sourcePath }) // .write(); // } // if (!sourcePathInfo.sourceTypes.audio3D) { // db.get("audio3D").remove({ sourcePath: sourcePathInfo.sourcePath }).write(); // } // } // // 移除目录中被删除的模型数据 // function removeDeletedData(sourcePath) { // const promises = []; // ["model", "motion3D", "audio3D"].forEach((type) => { // db.get(type) // .value() // .forEach((item) => { // if (item.sourcePath === sourcePath) { // promises.push( // new Promise((resolve) => { // fs.access( // item.entranceFile.slice(7).split("/").join(path.sep), // fs.constants.F_OK, // (err) => { // console.log(item.entranceFile, err); // if (err) { // console.log(`${item.entranceFile} is deleted`); // db.get(type) // .remove({ entranceFile: item.entranceFile }) // .write(); // } // // 又被坑了，resolve一定要放在if之后，不然一些promise一直没有resolve，导致程序卡在这个程序的await上。 // resolve(); // } // ); // }) // ); // } // }); // }); // return Promise.all(promises); // } // 后面这些函数里面带的sourcePath都是最原始，不受递归影响的那个sourcePath，用于判断一个模型由哪个源检索到的，方便跟随删除 async function loadDataFromPath(dataPath, sourceTypes, sourcePath) { //根据文件路径读取文件，返回文件列表 // 全部使用箭头函数，确保this对象可以传进去 const files = await util.promisify(fs.readdir)(dataPath); let promises = []; //遍历读取到的文件列表 // 为了保证顶级的Promise在所有目录读取结束后再返回，这里无法使用forEach，因为这样以来就无法await了，直接在里面forEach里面async整活也做不到让顶级的一步函数等着 for (const filename of files) { //获取当前文件的绝对路径 const dir = path.join(dataPath, filename); //根据文件路径获取文件信息，返回一个fs.Stats对象 const stats = await util.promisify(fs.stat)(dir); const isFile = stats.isFile(); //是文件 const isDir = stats.isDirectory(); //是文件夹 if (isFile) { //是文件 // 这里也需要加到promise里面，不然会出现还没有检索完成，整个promise就已经resolve了，导致后面的数据没有载入 promises.push(detectDatabaseItem(dir, sourceTypes, sourcePath)); } if (isDir) { //递归，如果是文件夹，就继续遍历该文件夹下面的文件 // 这里不能在push里面写await，Promise.all应该接收一个Promise的列表 promises.push(loadDataFromPath(dir, sourceTypes, sourcePath)); // 这样写的话和同步都没有区别了 // await this.refreshModelDB(dir); } } // console.log(sourcePath); // 异步的关键 return Promise.all(promises); } async function detectDatabaseItem(fileDir, sourceTypes, sourcePath) { const extensionName = path.extname(fileDir); switch (extensionName) { case ".json": { // 回调函数往上无法嵌套，转换成Promise const fileData = await util.promisify(fs.readFile)(fileDir); let fileJson; try { fileJson = JSON.parse(fileData.toString()); if (sourceTypes["Live2D"]) { processLive2dJson(fileDir, fileJson, sourcePath); } if (sourceTypes["Spine"]) { processSpineJson(fileDir, fileJson, sourcePath); } } catch (e) { console.warn(`File ${fileDir} is not a valid json file`); } break; } case ".pmx": { if (sourceTypes["MMD"]) { processPmx(fileDir, sourcePath); } break; } case ".vrm": { if (sourceTypes["VRoid"]) { processVrm(fileDir, sourcePath); } break; } case ".skel": { if (sourceTypes["Spine"]) { const fileData = await util.promisify(fs.readFile)(fileDir); processSkel(fileDir, sourcePath, fileData); } break; } case ".vmd": { if (sourceTypes["motion3D"]) { processVmd(fileDir, sourcePath); } break; } case ".fbx": { if (sourceTypes["motion3D"]) { processFbx(fileDir, sourcePath); } break; } case ".wav": { if (sourceTypes["audio3D"]) { processWav(fileDir, sourcePath); } break; } case ".mp3": { if (sourceTypes["audio3D"]) { processMp3(fileDir, sourcePath); } break; } } } function processLive2dJson(fileDir, fileJson, sourcePath) { if ("model" in fileJson) { writeModelInfo({ name: splitDirName(fileDir), modelType: "Live2D", extensionName: "moc", entranceFile: resolveEntrancePath(fileDir), themeColor: "#ff6e2d", sourcePath, // has_motion: "motions" in fileJson ? true : false; }); } else if ("FileReferences" in fileJson) { writeModelInfo({ name: splitDirName(fileDir), modelType: "Live2D", extensionName: "moc3", entranceFile: resolveEntrancePath(fileDir), themeColor: "#ff6e2d", sourcePath, // has_motion:"Motions" in fileJson.FileReferences ? true : false }); } } function processPmx(fileDir, sourcePath) { writeModelInfo({ name: splitDirName(fileDir), modelType: "MMD", extensionName: "pmx", entranceFile: resolveEntrancePath(fileDir), themeColor: "#39c5bb", sourcePath, }); } function processVrm(fileDir, sourcePath) { writeModelInfo({ name: splitDirName(fileDir), modelType: "VRoid", extensionName: "vrm", entranceFile: resolveEntrancePath(fileDir), themeColor: "#ffec00", sourcePath, }); } // todo: spine模型比较特殊，即使是加载模型，版本也不向下兼容……因此之后有必要进一步对模型版本进行判断 function processSkel(fileDir, sourcePath, fileData) { const version = detectSpineVersionFromBinary(fileData); writeModelInfo({ name: splitDirName(fileDir), modelType: "Spine", extensionName: "skel", entranceFile: resolveEntrancePath(fileDir), themeColor: "#3fa9f5", sourcePath, version, }); } function processSpineJson(fileDir, fileJson, sourcePath) { if ("skeleton" in fileJson && "spine" in fileJson.skeleton) { writeModelInfo({ name: splitDirName(fileDir), modelType: "Spine", extensionName: "json", entranceFile: resolveEntrancePath(fileDir), themeColor: "#3fa9f5", sourcePath, version: fileJson.skeleton.spine, }); } } function processVmd(fileDir, sourcePath) { writeMotion3DInfo({ // 根据我在B碗上的下载经验，有一些配布中都会带有多个版本的vmd，这些文件的名称都不是曲名，但没有办法，只能让用户手动改一下文件名了 name: path.basename(fileDir), extensionName: "vmd", entranceFile: resolveEntrancePath(fileDir), sourcePath, }); } function processFbx(fileDir, sourcePath) { writeMotion3DInfo({ name: path.basename(fileDir), extensionName: "fbx", entranceFile: resolveEntrancePath(fileDir), sourcePath, }); } function processWav(fileDir, sourcePath) { writeAudio3DInfo({ name: path.basename(fileDir), extensionName: "wav", entranceFile: resolveEntrancePath(fileDir), sourcePath, }); } function processMp3(fileDir, sourcePath) { writeAudio3DInfo({ name: path.basename(fileDir), extensionName: "mp3", entranceFile: resolveEntrancePath(fileDir), sourcePath, }); } // 因为有些模型入口文件名完全没有辨识度，如model.json，以模型入口文件的的上级目录名作为模型名称 function splitDirName(fileDir) { // 同时切分Windows和UNIX路径 return path.dirname(fileDir).split("/").pop().split("\\").pop(); } // Windows下使用file:会导致路径出错，热重载开发环境下不使用file:会导致路径报错 // Windows的路径斜杠导致MMD和Spine模型无法加载，这里统一又进行了一次斜杠的替换……Windows我忍你很久了啊，光在这个路径上这已经是第三次出问题了 function resolveEntrancePath(fileDir) { return ( (import.meta.env.DEV ? "file:///" : "") + path.resolve(fileDir).split(path.sep).join("/") ); } function writeModelInfo(modelInfo) { // 防止重复写入模型数据 // 现在以模型入口文件的路径作为唯一标识，如果已经存在，则不再写入。不直接用motionInfo是考虑到万一有人载入了具有包含关系的多个源路径，这会导致模型重复写入 if ( db .get("model") .findIndex((item) => item.entranceFile === modelInfo.entranceFile) .value() == -1 ) { db.get("model").push(modelInfo).write(); } } function writeMotion3DInfo(motionInfo) { if ( db .get("motion3D") .findIndex((item) => item.entranceFile === motionInfo.entranceFile) .value() == -1 ) { db.get("motion3D").push(motionInfo).write(); } } function writeAudio3DInfo(audioInfo) { if ( db .get("audio3D") .findIndex((item) => item.entranceFile === audioInfo.entranceFile) .value() == -1 ) { db.get("audio3D").push(audioInfo).write(); } } ================================================ FILE: src/preload/control/index.js ================================================ import { contextBridge } from "electron"; import { shell } from "electron"; import * as database from "./database"; import * as config from "./config"; import * as ipc from "./ipc"; import "./theme"; contextBridge.exposeInMainWorld("nodeAPI", { database, config, ipc, showInFolder, openLink, }); function showInFolder(path) { shell.showItemInFolder(path); } function openLink(link) { shell.openExternal(link); } ================================================ FILE: src/preload/control/ipc.js ================================================ import { ipcRenderer } from "electron"; export function selectPath() { return ipcRenderer.invoke("control2main:select-path", "controlPanel"); } export function launchDisplayWindow() { ipcRenderer.send("control2main:launch-display-window"); } export function relaunchDisplayWindow() { ipcRenderer.send("control2main:relaunch-display-window"); } export function closeDisplayWindow() { ipcRenderer.send("control2main:close-display-window"); } export function queryWindowIds() { return ipcRenderer.invoke("control2main:query-window-ids"); } export function handleUpdateWindowIds(callback) { ipcRenderer.on("main2control&display:update-window-ids", callback); } export function receiveModelControlInfo(callback) { ipcRenderer.once("display2control:model-control-info", callback); } export function handleSendToModelControl(callback) { console.log("handleSendToModelControl"); ipcRenderer.on("display2control:send-to-model-control", callback); } export function removeManagerListeners() { ipcRenderer.removeAllListeners("display2control:send-to-model-control"); } export function openDevTool(type) { ipcRenderer.send("control2main:open-dev-tool", type); } export function changeLanguage(language) { ipcRenderer.send("control2main:change-language", language); } export function handleDisplayWindowState(callback) { ipcRenderer.once("display2control:send-display-window-state", callback); } export function handleDisplayWindowError(callback) { ipcRenderer.on("display2control:error", callback); } export function loadModel(modelInfo) { ipcRenderer.send("control2display:load-model", modelInfo); } export function sendToModelManager(message) { ipcRenderer.send("control2display:send-to-model-manager", message); } export function queryDisplayWindowState() { ipcRenderer.send("control2display:query-display-window-state"); } export function screenshot() { ipcRenderer.send("control2display:screenshot"); } ================================================ FILE: src/preload/control/paths.js ================================================ import { ipcRenderer } from "electron"; // console.time("control:query-database-path"); // 应用的许多后续操作必须要等到数据库加载完成，若使用异步请求可能有一定概率导致无法访问数据库报错 // 毕竟涉及到主进程通信，能少一次算一次，数据库路径到后方再拼接吧 export const APP_DATA_PATH = ipcRenderer.sendSync( "control2main:query-data-path" ); // console.timeEnd("control:query-database-path"); ================================================ FILE: src/preload/control/theme.js ================================================ import { ipcRenderer } from "electron"; // document.addEventListener("DOMContentLoaded", () => { // ipcRenderer.invoke("control2main:query-system-theme").then((theme) => { // updateTheme(theme); // }); // }); // 经测试，采用异步函数加载深色主题时，会出现又浅色到深色主题的闪烁，因此只能改用同步阻塞函数 // 放到DOMContentLoaded之前有助于减少等待时长，虽然说相对于DOMContentLoaded完成所花的几百甚至一千多ms来讲，这里省下的约0.5ms可能什么都不是 // console.time("control2main:query-system-theme"); const theme = ipcRenderer.sendSync("control2main:query-system-theme"); // 不放在DOMContentLoaded事件之后会导致document.documentElement为null document.addEventListener("DOMContentLoaded", () => { // console.timeEnd("control2main:query-system-theme"); updateTheme(theme); }); ipcRenderer.on("main:update-theme", (evnet, theme) => { updateTheme(theme); }); function updateTheme(theme) { if (theme === "dark") { document.documentElement.className = "dark"; } else if (theme === "light") { document.documentElement.className = ""; } } ================================================ FILE: src/preload/control/utils.js ================================================ export function detectSpineVersionFromBinary(dataToParse) { const versionOld = readSpineVersionOldFormat(dataToParse); if (isSpineValidVersion(versionOld)) { return versionOld; } const versionNew = readSpineVersionNewFormat(dataToParse); if (isSpineValidVersion(versionNew)) { return versionNew; } return "Unknown"; } function readSpineVersionOldFormat(dataToParse) { const input = new SpineBinaryInput(dataToParse); let version = ""; try { input.readString(); version = input.readString(); } catch (e) { version = ""; } return version; } function readSpineVersionNewFormat(dataToParse) { const input = new SpineBinaryInput(dataToParse); let version = ""; try { input.readInt32(); input.readInt32(); version = input.readString(); } catch (e) { version = ""; } return version; } function isSpineValidVersion(version) { return typeof version === "string" && /^\d+\.\d+\.\d+$/.test(version); } class SpineBinaryInput { constructor( data, strings = new Array(), index = 0, buffer = new DataView(data.buffer) ) { this.data = data; this.strings = strings; this.index = index; this.buffer = buffer; } readByte() { return this.buffer.getInt8(this.index++); } readUnsignedByte() { return this.buffer.getUint8(this.index++); } readShort() { const value = this.buffer.getInt16(this.index); this.index += 2; return value; } readInt32() { const value = this.buffer.getInt32(this.index); this.index += 4; return value; } readInt(optimizePositive) { let b = this.readByte(); let result = b & 0x7f; if ((b & 0x80) != 0) { b = this.readByte(); result |= (b & 0x7f) << 7; if ((b & 0x80) != 0) { b = this.readByte(); result |= (b & 0x7f) << 14; if ((b & 0x80) != 0) { b = this.readByte(); result |= (b & 0x7f) << 21; if ((b & 0x80) != 0) { b = this.readByte(); result |= (b & 0x7f) << 28; } } } } return optimizePositive ? result : (result >>> 1) ^ -(result & 1); } readStringRef() { const index = this.readInt(true); return index == 0 ? null : this.strings[index - 1]; } readString() { let byteCount = this.readInt(true); switch (byteCount) { case 0: return null; case 1: return ""; } byteCount--; let chars = ""; for (let i = 0; i < byteCount; ) { const b = this.readUnsignedByte(); switch (b >> 4) { case 12: case 13: chars += String.fromCharCode( ((b & 0x1f) << 6) | (this.readByte() & 0x3f) ); i += 2; break; case 14: chars += String.fromCharCode( ((b & 0x0f) << 12) | ((this.readByte() & 0x3f) << 6) | (this.readByte() & 0x3f) ); i += 3; break; default: chars += String.fromCharCode(b); i++; } } return chars; } readFloat() { const value = this.buffer.getFloat32(this.index); this.index += 4; return value; } readBoolean() { return this.readByte() != 0; } } ================================================ FILE: src/preload/control/vite.config.js ================================================ import { resolve } from "path"; import { defineConfig } from "vite"; import autoExternal from "rollup-plugin-auto-external"; // https://vitejs.dev/config/ export default defineConfig({ build: { lib: { entry: resolve(__dirname, "./index.js"), name: "main", formats: ["cjs"], fileName: (format) => `control-preload.${format}.js`, }, rollupOptions: { plugins: [ autoExternal({ packagePath: resolve(__dirname, "../package.json"), }), ], }, }, resolve: { alias: { "@shared": resolve(__dirname, "../../shared"), }, }, }); ================================================ FILE: src/preload/display/index.js ================================================ import { contextBridge } from "electron"; import * as ipc from "./ipc"; contextBridge.exposeInMainWorld("nodeAPI", { ipc, }); ================================================ FILE: src/preload/display/ipc.js ================================================ import { ipcRenderer } from "electron"; export function handleLoadModel(callback) { ipcRenderer.on("control2display:load-model", callback); } export function queryWindowIds() { return ipcRenderer.invoke("display2main:query-window-ids"); } export function handleUpdateWindowIds(callback) { ipcRenderer.on("main2control&display:update-window-ids", callback); } export function queryConfig() { // 尬住了，这里请求配置是后续操作的基础，必须要用同步请求 // 然而electron的API里，ipcRenderer有sendTo，但是没有sendSyncTo，也没有invokeTo……用成sendTo本来就是考虑到之后通信频率比较高，不想走主进程的中继，这里请求要等待相应，实在没办法，不然要实现类似invokeTo的话，大概得这么写： // return new Promise((resolve, reject) => { // ipcRenderer.sendTo(controlWindowId, "display2main:query-config"); // ipcRenderer.once("control-resopnce:query-config", (event, config) => { // resolve(config); // }); // }); // config数据主进程也有，这里还是invoke主进程吧 return ipcRenderer.invoke("display2main:query-config"); } export function handleSendToModelManager(callback) { ipcRenderer.on("control2display:send-to-model-manager", callback); } export function askForMediaAccess() { return ipcRenderer.invoke("display2main:ask-for-media-access"); } export function setIgnoreMouseEvents(...args) { ipcRenderer.send("display2main:set-ignore-mouse-events", ...args); } export function handleQueryDisplayWindowState(callback) { ipcRenderer.on("control2display:query-display-window-state", callback); } export function sendModelControlInfo(modelControlInfo) { ipcRenderer.send("display2control:model-control-info", modelControlInfo); } export function sendToModelControl(message) { ipcRenderer.send("display2control:send-to-model-control", message); } export function sendDisplayWindowState(state) { ipcRenderer.send("display2control:send-display-window-state", state); } export function throwError(message) { ipcRenderer.send("display2control:error", message); } export function handleScreenshot(callback) { ipcRenderer.on("control2display:screenshot", callback); } ================================================ FILE: src/preload/display/vite.config.js ================================================ import { resolve } from "path"; import { defineConfig } from "vite"; import autoExternal from "rollup-plugin-auto-external"; // https://vitejs.dev/config/ export default defineConfig({ build: { lib: { entry: resolve(__dirname, "./index.js"), name: "main", formats: ["cjs"], fileName: (format) => `display-preload.${format}.js`, }, rollupOptions: { plugins: [ autoExternal({ packagePath: resolve(__dirname, "../package.json"), }), ], }, }, }); ================================================ FILE: src/preload/package.json ================================================ { "name": "@app/preload", "version": "0.0.0", "dependencies": { "electron": "^35.2.1", "lowdb": "1.0.0" }, "devDependencies": { "rollup-plugin-auto-external": "^2.0.0", "vite": "^6.3.3" } } ================================================ FILE: src/renderer/control/App.vue ================================================
{{ label }}:
Hime Display
Version 1.2.0
Developed by
TSKI433
Illustrated by
MakoSaikou
Special Thanks:
greenjerry
|
pure01fx
Links:
GitHub
|
Documention
{{ $t(`control.description.spine-license`) }}
{{ $t("control.load-a-model-to-control") }}
0%
0%
0%
0%
{{ $t("display.display-window-state") }}
{{
appStore.displayWindowId !== -1
? $t("display.launched")
: $t("display.not-launched")
}}