From 45bec9a8f68c95b9bc9ccca4de13f8bfb98b91de Mon Sep 17 00:00:00 2001 From: Haoyu Xu Date: Sun, 5 Feb 2023 21:30:53 -0500 Subject: [PATCH] feat(showcase): add settings to set the position of the operator logo --- config/_project_json.yaml | 78 +++++++++++++++++++++++++++++++----- libs/content_processor.js | 7 ++++ libs/project_json.js | 1 - src/components/settings.js | 74 +++++++++++++++++++++++++++++++++- src/components/voice.css | 0 src/components/voice.js | 6 +++ src/libs/wallpaper_engine.js | 6 +++ 7 files changed, 161 insertions(+), 11 deletions(-) create mode 100644 src/components/voice.css create mode 100644 src/components/voice.js diff --git a/config/_project_json.yaml b/config/_project_json.yaml index 11199ad..8a72f97 100644 --- a/config/_project_json.yaml +++ b/config/_project_json.yaml @@ -1,37 +1,76 @@ description: !match "~{split('config', 'title' ,' - ')[0]} Live 2D\n~{split('config', 'title' ,' - ')[1]} Live 2D\nThe model is extracted from game with Spine support.\n模型来自游戏内提取，支持Spine\nPlease set your FPS target in Wallpaper Engine > Settings > Performance > FPS\n请在 Wallpaper Engine > 设置 > 性能 > FPS 下设置FPS\n\nLive preview on: https://arknights.halyul.dev/~{var('config', 'link')}\nGithub: https://github.com/Halyul/aklive2d" localization: en-us: + ui_notice_title:

📝 Notes

+ ui_notice_set_fps: Set FPS target in Settings + ui_notice_github: "Github: https://github.com/Halyul/aklive2d" + ui_notice_other_operators: "Previews: https://arknights.halyul.dev/" + ui_notice_version: !match "~{version('Version: ', '')}" + ui_background_title:

🖼️ Background

ui_custom_background: Custom Background ui_default_background: Default Background + ui_logo_title:

😐 Logo

ui_logo_image: Logo Image - ui_logo_notice: Notice ui_logo_opacity: Logo Opacity ui_logo_ratio: Logo Ratio ui_operator_logo: Operator Logo - ui_position: "USE WITH CAUTION: Position" + ui_translate_x: X Axis Position + ui_translate_y: Y Axis Position + ui_position_title:

⚠️ Posistion

ui_position_padding_bottom: Padding Bottom ui_position_padding_left: Padding Left ui_position_padding_right: Padding Right ui_position_padding_top: Padding Top + ui_voice_title:

🔈Voice

+ ui_voice_lang: Voice Language + ui_subtitle_title:

📑 Subtitle

+ ui_subtitle_lang: Subtitle Language + ui_voice_actor_title:

🗣️ Voice Actor

zh-chs: + ui_notice_title:

📝 通知

+ ui_notice_set_fps: 在设置中设定FPS目标 + ui_notice_github: "Github: https://github.com/Halyul/aklive2d" + ui_notice_other_operators: "预览: https://arknights.halyul.dev/" + ui_notice_version: !match "~{version('版本: ', '')}" + ui_background_title:

🖼️ 背景

ui_custom_background: 背景图片 ui_default_background: 默认背景 + ui_logo_title:

😐 图标

ui_logo_image: 图标图片 - ui_logo_notice: 通知 ui_logo_opacity: 图标透明度 ui_logo_ratio: 图标比例 ui_operator_logo: 干员图标 - ui_position: "注意使用: 位置" + ui_translate_x: X 轴位置 + ui_translate_y: Y 轴位置 + ui_position_title:

⚠️ 位置

ui_position_padding_bottom: 底部距离 ui_position_padding_left: 左部距离 ui_position_padding_right: 右部距离 ui_position_padding_top: 上部距离 + ui_voice_title:

🔈语音

+ ui_voice_lang: 语音语言 + ui_subtitle_title:

📑 字幕

+ ui_subtitle_lang: 字幕语言 + ui_voice_actor_title:

🗣️ 声优

properties: - - key: notice + - key: notice_title value: - text: ui_logo_notice - type: textinput - value: Set FPS target in Settings + text: ui_notice_title + - key: notice_set_fps + value: + text: ui_notice_set_fps + - key: notice_github + value: + text: ui_notice_github + - key: notice_other_operators + value: + text: ui_notice_other_operators + - key: notice_version + value: + text: ui_notice_version + - key: logo_title + value: + text: ui_logo_title - key: logo value: text: ui_operator_logo @@ -63,6 +102,27 @@ properties: fraction: false max: 100 min: 0 + - key: logox + value: + text: ui_translate_x + type: slider + value: 0 + condition: logo.value == true + fraction: false + max: 100 + min: 0 + - key: logoy + value: + text: ui_translate_y + type: slider + value: 0 + condition: logo.value == true + fraction: false + max: 100 + min: 0 + - key: background_title + value: + text: ui_background_title - key: defaultbackground value: text: ui_default_background @@ -79,7 +139,7 @@ properties: value: "" - key: position value: - text: ui_position + text: ui_position_title type: bool value: false - key: paddingleft diff --git a/libs/content_processor.js b/libs/content_processor.js index 4a37c1d..2b5c26c 100644 --- a/libs/content_processor.js +++ b/libs/content_processor.js @@ -1,3 +1,6 @@ +import path from 'path' +import { readSync } from "./file.js" + export default class Matcher { #start #end @@ -48,6 +51,10 @@ class Evalable { return this.#step(location, varName) } + version(prefix, suffix) { + return `${prefix}${readSync(path.join(__dirname, 'Version'))}${suffix}` + } + #step(location, varName) { let content = this.#config varName.split("->").forEach((item) => { diff --git a/libs/project_json.js b/libs/project_json.js index 2234e82..ab60fef 100644 --- a/libs/project_json.js +++ b/libs/project_json.js @@ -62,7 +62,6 @@ export default class ProjectJson { ...this.#json.general, localization: this.#template.localization, properties: { - ...this.#json.general.properties, ...this.#properties } }, diff --git a/src/components/settings.js b/src/components/settings.js index a0b0982..277257c 100644 --- a/src/components/settings.js +++ b/src/components/settings.js @@ -16,6 +16,8 @@ export default class Settings { #defaultPadRight = getPercentage(`${import.meta.env.VITE_VIEWPORT_RIGHT}%`) #defaultPadTop = getPercentage(`${import.meta.env.VITE_VIEWPORT_TOP}%`) #defaultPadBottom = getPercentage(`${import.meta.env.VITE_VIEWPORT_BOTTOM}%`) + #defaultLogoX = 0 + #defaultLogoY = 0 #defaultViewport = { debugRender: false, padLeft: `${this.#defaultPadLeft}%`, @@ -33,6 +35,8 @@ export default class Settings { #padRight = this.#defaultPadRight #padTop = this.#defaultPadTop #padBottom = this.#defaultPadBottom + #logoX = this.#defaultLogoX + #logoY = this.#defaultLogoY constructor(el, logoEl) { this.#el = el @@ -70,6 +74,7 @@ export default class Settings { #resize(_this, value) { _this = _this || this _this.#logoEl.width = window.innerWidth / 2 * (value || _this.#ratio) / 100 + _this.elementPosition(this.#logoEl, this.#logoX, this.#logoY) } #setLogoInvertFilter(flag) { @@ -199,6 +204,44 @@ export default class Settings { document.getElementById("position_padding_bottom_input").value = this.#defaultPadBottom } + elementPosition(el, x, y) { + const elWidth = getComputedStyle(el).width + const elHeight = getComputedStyle(el).height + const windowWidth = window.innerWidth + const windowHeight = window.innerHeight + const xRange = windowWidth - parseInt(elWidth) + const yRange = windowHeight - parseInt(elHeight) + const xpx = x * xRange / 100 + const ypx = y * yRange / 100 + el.style.transform = `translate(${xpx}px, ${ypx}px)` + } + + logoPadding(key, value) { + switch (key) { + case "x": + this.#logoX = value + break; + case "y": + this.#logoY = value + break; + default: + this.#logoX = value.x + this.#logoY = value.y + break; + } + this.elementPosition(this.#logoEl, this.#logoX, this.#logoY) + } + + logoReset() { + this.#logoX = this.#defaultLogoX + this.#logoY = this.#defaultLogoY + this.elementPosition(this.#logoEl, this.#logoX, this.#logoY) + document.getElementById("logo_padding_x_slider").value = this.#defaultLogoX + document.getElementById("logo_padding_x_input").value = this.#defaultLogoX + document.getElementById("logo_padding_y_slider").value = this.#defaultLogoY + document.getElementById("logo_padding_y_input").value = this.#defaultLogoY + } + open() { this.#el.hidden = false; } @@ -216,6 +259,7 @@ export default class Settings { document.getElementById("logo_opacity_slider").value = this.#defaultOpacity document.getElementById("logo_opacity_input").value = this.#defaultOpacity this.resetLogoImage() + this.logoReset() this.resetBackground() this.setLogoDisplay(this.#defaulthideLogo) this.setFPS(this.#defaultFps) @@ -251,7 +295,17 @@ export default class Settings { +
+ + +
+
+ + + +
+
@@ -292,7 +346,7 @@ export default class Settings {
-
+
@@ -356,6 +410,24 @@ export default class Settings { _this.setLogoOpacity(e.currentTarget.value); }) + document.getElementById("logo_padding_x_slider").addEventListener("input", e => { + _this.#sync(e.currentTarget, "logo_padding_x_input"); + _this.logoPadding("x", e.currentTarget.value); + }) + document.getElementById("logo_padding_x_input").addEventListener("change", e => { + _this.#sync(e.currentTarget, "logo_padding_x_slider"); + _this.logoPadding("x", e.currentTarget.value); + }) + + document.getElementById("logo_padding_y_slider").addEventListener("input", e => { + _this.#sync(e.currentTarget, "logo_padding_y_input"); + _this.logoPadding("y", e.currentTarget.value); + }) + document.getElementById("logo_padding_y_input").addEventListener("change", e => { + _this.#sync(e.currentTarget, "logo_padding_y_slider"); + _this.logoPadding("y", e.currentTarget.value); + }) + document.getElementById('default_background_select').addEventListener("change", e => _this.setDefaultBackground(e.currentTarget.value)) document.getElementById("custom_background").addEventListener("change", e => _this.setBackground(e)) diff --git a/src/components/voice.css b/src/components/voice.css new file mode 100644 index 0000000..e69de29 diff --git a/src/components/voice.js b/src/components/voice.js new file mode 100644 index 0000000..91460fd --- /dev/null +++ b/src/components/voice.js @@ -0,0 +1,6 @@ +import charword_table from '!/charword_table.json' +import '@/components/voice.css' + +export default function Voice() { + +} \ No newline at end of file diff --git a/src/libs/wallpaper_engine.js b/src/libs/wallpaper_engine.js index a837fca..35e8e28 100644 --- a/src/libs/wallpaper_engine.js +++ b/src/libs/wallpaper_engine.js @@ -25,6 +25,12 @@ window.wallpaperPropertyListener = { window.settings.resetLogoImage() } } + if (properties.logox) { + window.settings.logoPadding("x", properties.logox.value) + } + if (properties.logoy) { + window.settings.logoPadding("y", properties.logoy.value) + } if (properties.defaultbackground) { if (properties.defaultbackground.value) { window.settings.setDefaultBackground(properties.defaultbackground.value)