diff --git a/README.md b/README.md index 64c9460..24deecd 100644 --- a/README.md +++ b/README.md @@ -13,6 +13,7 @@ A project that builds showcase webpage for Arknights Live2D-equipped operators. - For Linux users: You power user should be able to find your solutions! ## Usage +### Command Line Tool ``` bash $ python3 aklive2d.py -h @@ -47,6 +48,27 @@ optional arguments: -o {all,skadi} [{all,skadi} ...], --operators {all,skadi} [{all,skadi} ...] Operators to build (default: ['all']) ``` +### Webpage & JavaScript + +Add query string `settings` to bring up the settings panel to adjust your settings. Then use appropriate JavaScript code to load your settings + +``` javascript +settings.setFPS(integer) // set FPS +settings.displayLogo(boolean) // display logo or not +settings.resizeLogo(float) // the ratio of the logo +settings.opacityLogo(float) // the opacity of the logo +settings.setLogo(url, removeInvert) // change the logo, url: image url, removeInvert: boolean +settings.setBackground(url) // change the background, url: image url +settings.positionPadding("padLeft", integer) // left padding +settings.positionPadding("padRight", integer) // right padding +settings.positionPadding("padTop", integer) // top padding +settings.positionPadding("padBottom", integer) // bottom padding + +settings.open() // open settings panel +settings.close() // close settings panel +settings.reset() // reset settings +``` + ## Config ``` yaml # List all the supported operators under block diff --git a/Version b/Version index f93ea0c..6acdb44 100644 --- a/Version +++ b/Version @@ -1 +1 @@ -2.0.2 \ No newline at end of file +2.0.3 \ No newline at end of file diff --git a/template/assets/runner.js b/template/assets/runner.js index 776d91b..a87b9b6 100644 --- a/template/assets/runner.js +++ b/template/assets/runner.js @@ -1,3 +1,5 @@ +const params = new URLSearchParams(window.location.search); + function supportsWebGL() { try { let canvas = document.createElement("canvas"); @@ -55,6 +57,9 @@ if (!supportsWebGL()) { window.operatorSettings.success(e); settings.spinePlayerLoaded = true; settings.loadViewport(); + if (params.has("settings")) { + settings.open(); + } }, }); settings = new Settings({ diff --git a/template/assets/settings.js b/template/assets/settings.js index 60401f8..f38842a 100644 --- a/template/assets/settings.js +++ b/template/assets/settings.js @@ -89,10 +89,10 @@ var Settings = (function () { this.spinePlayer.updateViewport(this.viewport); }; Settings.prototype.open = function () { - this.el.classList.add("website-settings"); + this.el.style.display = "inherit"; }; Settings.prototype.close = function () { - this.el.classList.remove("website-settings"); + this.el.style.display = "none"; }; Settings.prototype.reset = function () { this.setFPS(this.fps); @@ -201,7 +201,7 @@ var Settings = (function () { ` - + this.el.classList.add("website-settings"); this.el.innerHTML = htmldata; document.body.appendChild(this.el); @@ -326,7 +326,7 @@ var Settings = (function () { document.getElementById("settings_reset").addEventListener("click", e => { _this.reset(); }) - document.getElementById("settings_reset").addEventListener("click", e => { + document.getElementById("settings_close").addEventListener("click", e => { _this.close(); }) }; diff --git a/template/assets/style.css b/template/assets/style.css index 256cbbc..5eccfd3 100644 --- a/template/assets/style.css +++ b/template/assets/style.css @@ -16,6 +16,8 @@ body { background-image: url("../operator/operator_bg.png"); height: 100%; width: 100%; + touch-action: none; + -ms-touch-action: none; } .logo { @@ -49,4 +51,5 @@ body { background-color: white; user-select: auto; z-index: 999; + display: none; } \ No newline at end of file