chizui/aklive2d
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(settings): add a settings panel

Browse Source
This commit is contained in:
Halyul
2021-06-03 22:26:00 -04:00
parent 3a43468d57
commit 3e02683d49
8 changed files with 404 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
README.md
View File

@@ -62,9 +62,9 @@ operators:
use_skel: true # For the Spine model, <true> for using skel file, otherwise use json
# Development server settings
server:
operator_folder: /operator/ # The path that the showcase webpage accesses game files
operator_folder: ./operator/ # The path that the showcase webpage accesses game files
release_folder: ./release/ # The folder that stores the showcase webpage
template_folder: /template/ # The folder that stores the showcase template
template_folder: ./template/ # The folder that stores the showcase template
```
## LICENSE
@@ -81,4 +81,4 @@ The `LICENSE` file applies to all files unless listed specifically.
- all files under `operator` folder and its sub-folders
- all files under `release/*/operator/*` folder
- `release/*/operator/operator.js`
- `release/*/operator/operator_assets.js`

2
Version
View File

@@ -1 +1 @@
2.0.1
2.0.2

4
lib/builder.py
View File

@@ -33,13 +33,13 @@ class Builder:
skel=target_path + common_name + ".skel",
)
operator_file = pathlib.Path.cwd().joinpath(target_path, "..", "operator.js")
operator_file = pathlib.Path.cwd().joinpath(target_path, "..", "operator_assets.js")
if operator_file.exists() is False:
print("Building operaotr data for {}...".format(operator_name))
alpha_composite_threads = list()
png_to_base64_threads = list()
prefix = "window.operator = "
prefix = "window.operatorAssets = "
data = dict()
ar = AtlasReader(source_path + common_name, target_path + common_name)

119
template/assets/runner.js
View File

@@ -1,15 +1,3 @@
const params = new URLSearchParams(window.location.search);
var RATIO = 0.618;
var fps = 60;
var viewport = Object.assign({}, window.settings.viewport);
if (params.has("fps")) {
var tmp = parseInt(params.get("fps"));
if (!isNaN(tmp)) {
fps = tmp;
}
}
function supportsWebGL() {
try {
let canvas = document.createElement("canvas");
@@ -18,14 +6,6 @@ function supportsWebGL() {
} catch (e) {
return false;
}
}
function calculateScale(width, height) {
let windowWidth = window.innerWidth;
let windowHeight = window.innerHeight;
let scaleX = windowWidth / width;
let scaleY = windowHeight / height;
return { x: scaleX, y: scaleY };
};
if (!supportsWebGL()) {
@@ -34,14 +14,22 @@ if (!supportsWebGL()) {
e.classList.add("fallback");
e.parentElement.classList.add("widget-wrapper");
function calculateScale(width, height) {
let windowWidth = window.innerWidth;
let windowHeight = window.innerHeight;
let scaleX = windowWidth / width;
let scaleY = windowHeight / height;
return { x: scaleX, y: scaleY };
}
function fallback() {
const scale = calculateScale(window.settings.fallbackImage.width, window.settings.fallbackImage.height);
const scale = calculateScale(window.operatorSettings.fallbackImage.width, window.operatorSettings.fallbackImage.height);
if (scale.x > scale.y) {
e.style.width = window.settings.fallbackImage.width * scale.y + "px";
e.style.height = window.settings.fallbackImage.height * scale.y + "px";
e.style.width = window.operatorSettings.fallbackImage.width * scale.y + "px";
e.style.height = window.operatorSettings.fallbackImage.height * scale.y + "px";
} else if (scale.x < scale.y) {
e.style.width = window.settings.fallbackImage.width * scale.x + "px";
e.style.height = window.settings.fallbackImage.height * scale.x + "px";
e.style.width = window.operatorSettings.fallbackImage.width * scale.x + "px";
e.style.height = window.operatorSettings.fallbackImage.height * scale.x + "px";
}
}
@@ -49,105 +37,84 @@ if (!supportsWebGL()) {
fallback();
} else {
var e = document.getElementById("container");
var resetTime = window.performance.now();
var spinePlayer = new spine.SpinePlayer(e, {
jsonUrl: window.settings.jsonUrl,
skelUrl: window.settings.skelUrl,
atlasUrl: window.settings.atlasUrl,
animation: window.settings.animation,
rawDataURIs: window.operator,
jsonUrl: window.operatorSettings.jsonUrl,
skelUrl: window.operatorSettings.skelUrl,
atlasUrl: window.operatorSettings.atlasUrl,
animation: window.operatorSettings.animation,
rawDataURIs: window.operatorAssets,
premultipliedAlpha: true,
alpha: true,
backgroundColor: "#00000000",
fps: fps,
viewport: window.settings.viewport,
viewport: window.operatorSettings.viewport,
showControls: false,
defaultMix: window.settings.defaultMix,
success: window.settings.success,
fps: window.operatorSettings.fps,
defaultMix: window.operatorSettings.defaultMix,
success: window.operatorSettings.success,
});
var settings = new Settings({
logo: document.getElementById("logo"),
spinePlayer: spinePlayer,
operatorSettings: window.operatorSettings
});
}
function resizeLogo() {
document.getElementById("logo").width = window.innerWidth / 2 * RATIO
}
window.addEventListener('resize', resizeLogo, true);
resizeLogo()
window.addEventListener("contextmenu", e => e.preventDefault());
document.addEventListener("gesturestart", e => e.preventDefault());
settings.setup()
// wallpaper engine
window.wallpaperPropertyListener = {
applyGeneralProperties: function (properties) {
if (properties.fps) {
spinePlayer.setFps(properties.fps);
settings.setFPS(properties.fps);
}
},
applyUserProperties: function (properties) {
if (properties.logo) {
if (!properties.logo.value) {
document.getElementById("logo").style.display = "none";
} else {
document.getElementById("logo").style.display = "inherit";
}
settings.displayLogo(properties.logo.value)
}
if (properties.logoratio) {
if (properties.logoratio.value) {
RATIO = properties.logoratio.value / 100;
resizeLogo();
settings.resizeLogo(properties.logoratio.value)
}
}
if (properties.logoopacity) {
if (properties.logoopacity.value) {
var opacity= properties.logoopacity.value / 100;
document.getElementById('logo').style.opacity = opacity;
settings.opacityLogo(properties.logoopacity.value)
}
}
if (properties.logoimage) {
var logoImage;
const e = document.getElementById('logo');
if (properties.logoimage.value) {
logoImage = 'file:///' + properties.logoimage.value;
e.style.filter = "invert(0)";
var logoImage = 'file:///' + properties.logoimage.value;
settings.setLogo(logoImage, true);
} else {
logoImage = "./operator/operator_logo.png"
e.style.filter = "invert(1)";
settings.resetLogo();
}
e.src = logoImage;
resizeLogo();
}
if (properties.background) {
var background;
if (properties.background.value) {
background = 'file:///' + properties.background.value;
var background = 'file:///' + properties.background.value;
settings.setBackground(background);
} else {
background = "./operator/operator_bg.png"
settings.resetBackground();
}
document.body.style.backgroundImage = `url(${background})`
}
if (properties.position) {
if (!properties.position.value) {
spinePlayer.updateViewport(window.settings.viewport)
settings.positionReset();
}
}
if (properties.paddingleft) {
viewport.padLeft = `${properties.paddingleft.value}%`
spinePlayer.updateViewport(viewport)
settings.positionPadding("padLeft", properties.paddingleft.value)
}
if (properties.paddingright) {
viewport.padRight = `${properties.paddingright.value}%`
spinePlayer.updateViewport(viewport)
settings.positionPadding("padRight", properties.paddingright.value)
}
if (properties.paddingtop) {
viewport.padTop = `${properties.paddingtop.value}%`
spinePlayer.updateViewport(viewport)
settings.positionPadding("padTop", properties.paddingtop.value)
}
if (properties.paddingbottom) {
viewport.padBottom = `${properties.paddingbottom.value}%`
spinePlayer.updateViewport(viewport)
settings.positionPadding("padBottom", properties.paddingbottom.value)
}
},
};

332
template/assets/settings.js Normal file
View File

@@ -0,0 +1,332 @@
var Settings = (function () {
function Settings(config) {
this.logoEl = config.logo;
this.spinePlayer = config.spinePlayer;
this.operatorSettings = config.operatorSettings;
this.validateConfig();
this.fps = 60;
this.ratio = this.defaultRatio = 0.618 * 100;
this.viewport = Object.assign({}, window.operatorSettings.viewport);
this.backgroundImage = getComputedStyle(document.body).backgroundImage;
this.logoSrc = this.logoEl.src;
this.opacity = parseFloat(getComputedStyle(this.logoEl).opacity) * 100;
this.el = document.createElement("div");
}
Settings.prototype.validateConfig = function () {
if (typeof this.logoEl === "string")
this.logoEl = document.getElementById(this.logoEl);
else
this.logoEl = this.logoEl;
if (typeof this.spinePlayer !== "object") {
var message = "Invalid spine player, the showcase will not work properly.";
alert(message);
throw new Error(message);
}
};
Settings.prototype.setFPS = function (value) {
value = parseInt(value);
this.spinePlayer.setFps(value);
};
Settings.prototype.displayLogo = function (bool) {
if (bool) {
this.logoEl.style.display = "inherit";
} else {
this.logoEl.style.display = "none";
}
};
Settings.prototype.setBackground = function (url) {
url = `url("${url}")`;
document.body.style.backgroundImage = url
};
Settings.prototype.resetBackground = function () {
document.body.style.backgroundImage = this.backgroundImage;
};
Settings.prototype.setLogo = function (url, removeInvert) {
this.logoEl.src = url;
this.resizeLogo(this.ratio);
if (removeInvert) {
this.logoEl.style.filter = "invert(0)";
} else {
this.logoEl.style.filter = "invert(1)";
}
};
Settings.prototype.resetLogo = function () {
this.setLogo(this.logoSrc, false);
};
Settings.prototype.resizeLogo = function (value) {
this.ratio = parseFloat(value);
this.logoEl.width = window.innerWidth / 2 * this.ratio / 100
};
Settings.prototype.opacityLogo = function (value) {
var opacity = parseFloat(value);
this.logoEl.style.opacity = opacity / 100;
};
Settings.prototype.positionReset = function () {
this.spinePlayer.updateViewport(window.operatorSettings.viewport)
};
Settings.prototype.positionPadding = function (key, value) {
switch (key) {
case "padLeft":
this.viewport.padLeft = `${value}%`;
break;
case "padRight":
this.viewport.padRight = `${value}%`;
break;
case "padTop":
this.viewport.padTop = `${value}%`;
break;
case "padBottom":
this.viewport.padBottom = `${value}%`;
break;
}
this.spinePlayer.updateViewport(this.viewport)
};
Settings.prototype.open = function () {
this.el.classList.add("website-settings");
};
Settings.prototype.close = function () {
this.el.classList.remove("website-settings");
};
Settings.prototype.reset = function () {
this.setFPS(this.fps);
this.displayLogo(true);
this.resizeLogo(this.defaultRatio);
this.opacityLogo(this.opacity);
this.positionReset();
this.resetBackground();
this.resetLogo();
this.spinePlayer.play();
this._removeHTML();
this._insertHTML();
};
Settings.prototype.setup = function () {
var _this = this;
_this._insertHTML();
function resize() {
document.getElementById("logo").width = window.innerWidth / 2 * _this.ratio / 100
}
window.addEventListener("resize", resize, true);
resize()
window.addEventListener("contextmenu", e => e.preventDefault());
document.addEventListener("gesturestart", e => e.preventDefault());
};
Settings.prototype.sync = function (source, targetID) {
document.getElementById(targetID).value = source.value;
};
Settings.prototype._showRelated = function (e, relatedSettingsID) {
var eRelatedSettings = document.getElementById(relatedSettingsID)
if (e.checked) {
eRelatedSettings.style.display = "inherit";
} else {
eRelatedSettings.style.display = "none";
}
};
Settings.prototype._removeHTML = function () {
this.el.innerHTML = null;
};
Settings.prototype._insertHTML = function () {
var htmldata =
`
<div>
<label for="fps">FPS</label>
<input type="range" min="1" max="60" value="${this.operatorSettings.fps}" step="1" id="fps_slider">
<input type="number" id="fps_input" name="fps" value="${this.operatorSettings.fps}">
</div>
<div>
<label for="operator_logo">Operator Logo</label>
<input type="checkbox" id="operator_logo" name="operator_logo" checked data-checked="true">
<div id="operator_logo_realted">
<div>
<label for="logo_image">Logo Image (Store Locally)</label>
<input type="file" id="logo_image">
<button type="button" id="logo_image_clear" disabled>Clear</button>
</div>
<div>
<label for="logo_ratio">Logo Ratio</label>
<input type="range" min="0" max="100" step="0.1" id="logo_ratio_slider" value="${this.ratio}">
<input type="number" id="logo_ratio_input" name="logo_ratio" value="${this.ratio}">
</div>
<div>
<label for="logo_opacity">Logo Opacity</label>
<input type="range" min="0" max="100" data-css-class="logo" step="1" id="logo_opacity_slider" value="${this.opacity}">
<input type="number" id="logo_opacity_input" name="logo_opacity" value="${this.opacity}">
</div>
</div>
</div>
<div>
<label for="background_image">Background Image (Store Locally)</label>
<input type="file" id="background_image">
<button type="button" id="background_image_clear" disabled>Clear</button>
</div>
<div>
<label for="position">Position</label>
<input type="checkbox" id="position" name="position">
<div id="position_realted" style="display: none;">
<div>
<label for="position_padding_left">Padding Left</label>
<input type="range" min="-100" max="100" id="position_padding_left_slider" value="${this._getPercentage(this.operatorSettings.viewport.padLeft)}">
<input type="number" id="position_padding_left_input" name="position_padding_left" value="${this._getPercentage(this.operatorSettings.viewport.padLeft)}">
</div>
<div>
<label for="position_padding_right">Padding Right</label>
<input type="range" min="-100" max="100" id="position_padding_right_slider" value="${this._getPercentage(this.operatorSettings.viewport.padRight)}">
<input type="number" id="position_padding_right_input" name="position_padding_right" value="${this._getPercentage(this.operatorSettings.viewport.padRight)}">
</div>
<div>
<label for="position_padding_Top">Padding Top</label>
<input type="range" min="-100" max="100" id="position_padding_top_slider" value="${this._getPercentage(this.operatorSettings.viewport.padTop)}">
<input type="number" id="position_padding_top_input" name="position_padding_top" value="${this._getPercentage(this.operatorSettings.viewport.padTop)}">
</div>
<div>
<label for="position_padding_bottom">Padding Bottom</label>
<input type="range" min="-100" max="100" id="position_padding_bottom_slider" value="${this._getPercentage(this.operatorSettings.viewport.padBottom)}">
<input type="number" id="position_padding_bottom_input" name="position_padding_bottom" value="${this._getPercentage(this.operatorSettings.viewport.padBottom)}">
</div>
</div>
</div>
<div>
<button type="button" id="settings_play" disabled>Play</button>
<button type="button" id="settings_pause">Pause</button>
<button type="button" id="settings_reset">Reset</button>
<button type="button" id="settings_close">Close</button>
</div>
`
this.el.innerHTML = htmldata;
document.body.appendChild(this.el);
this._addEventListener();
};
Settings.prototype._addEventListener = function () {
var _this = this;
document.getElementById("fps_slider").addEventListener("input", e => {
_this.sync(e.currentTarget, "fps_input");
_this.setFPS(e.currentTarget.value);
})
document.getElementById("fps_input").addEventListener("change", e => {
_this.sync(e.currentTarget, "fps_slider");
_this.setFPS(e.currentTarget.value);
})
document.getElementById("operator_logo").addEventListener("click", e => {
_this._showRelated(e.currentTarget, "operator_logo_realted");
_this.displayLogo(e.currentTarget.checked)
})
document.getElementById("logo_image").addEventListener("change", e => {
var file = e.target.files[0];
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = readerEvent => {
var content = readerEvent.target.result;
this.setLogo(content, true);
}
document.getElementById("logo_image_clear").disabled = false;
})
document.getElementById("logo_image_clear").addEventListener("click", e => {
this.resetLogo();
e.currentTarget.disabled = true;
})
document.getElementById("logo_ratio_slider").addEventListener("input", e => {
_this.sync(e.currentTarget, "logo_ratio_input");
_this.resizeLogo(e.currentTarget.value);
})
document.getElementById("logo_ratio_input").addEventListener("change", e => {
_this.sync(e.currentTarget, "logo_ratio_slider");
_this.resizeLogo(e.currentTarget.value);
})
document.getElementById("logo_opacity_slider").addEventListener("input", e => {
_this.sync(e.currentTarget, "logo_opacity_input");
_this.opacityLogo(e.currentTarget.value);
})
document.getElementById("logo_opacity_input").addEventListener("change", e => {
_this.sync(e.currentTarget, "logo_opacity_slider");
_this.opacityLogo(e.currentTarget.value);
})
document.getElementById("background_image").addEventListener("change", e => {
var file = e.target.files[0];
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = readerEvent => {
var content = readerEvent.target.result;
this.setBackground(content);
}
document.getElementById("background_image_clear").disabled = false;
})
document.getElementById("background_image_clear").addEventListener("click", e => {
this.resetBackground();
e.currentTarget.disabled = true;
})
document.getElementById("position").addEventListener("click", e => {
_this._showRelated(e.currentTarget, "position_realted");
if (e.currentTarget.checked) _this.positionReset();
})
document.getElementById("position_padding_left_slider").addEventListener("input", e => {
_this.sync(e.currentTarget, "position_padding_left_input");
_this.positionPadding("padLeft", e.currentTarget.value);
})
document.getElementById("position_padding_left_input").addEventListener("change", e => {
_this.sync(e.currentTarget, "position_padding_left_slider");
_this.positionPadding("padLeft", e.currentTarget.value);
})
document.getElementById("position_padding_right_slider").addEventListener("input", e => {
_this.sync(e.currentTarget, "position_padding_right_input");
_this.positionPadding("padRight", e.currentTarget.value);
})
document.getElementById("position_padding_right_input").addEventListener("change", e => {
_this.sync(e.currentTarget, "position_padding_right_slider");
_this.positionPadding("padRight", e.currentTarget.value);
})
document.getElementById("position_padding_top_slider").addEventListener("input", e => {
_this.sync(e.currentTarget, "position_padding_top_input");
_this.positionPadding("padTop", e.currentTarget.value);
})
document.getElementById("position_padding_top_input").addEventListener("change", e => {
_this.sync(e.currentTarget, "position_padding_top_slider");
_this.positionPadding("padTop", e.currentTarget.value);
})
document.getElementById("position_padding_bottom_slider").addEventListener("input", e => {
_this.sync(e.currentTarget, "position_padding_bottom_input");
_this.positionPadding("padBottom", e.currentTarget.value);
})
document.getElementById("position_padding_bottom_input").addEventListener("change", e => {
_this.sync(e.currentTarget, "position_padding_bottom_slider");
_this.positionPadding("padBottom", e.currentTarget.value);
})
document.getElementById("settings_play").addEventListener("click", e => {
this.spinePlayer.play();
e.currentTarget.disabled = true;
document.getElementById("settings_pause").disabled = false;
})
document.getElementById("settings_pause").addEventListener("click", e => {
this.spinePlayer.pause();
e.currentTarget.disabled = true;
document.getElementById("settings_play").disabled = false;
})
document.getElementById("settings_reset").addEventListener("click", e => {
_this.reset();
})
document.getElementById("settings_reset").addEventListener("click", e => {
_this.close();
})
};
Settings.prototype._getPercentage = function (value) {
return parseInt(value.replace("%", ""));
};
return Settings;
}());

20
template/assets/spine-player.js
View File

@@ -11188,13 +11188,13 @@ var spine;
SpinePlayer.prototype.play = function () {
var _this = this;
this.paused = false;
var remove = function () {
if (!_this.paused)
_this.playerControls.classList.add("spine-player-controls-hidden");
};
this.cancelId = setTimeout(remove, 1000);
this.playButton.classList.remove("spine-player-button-icon-play");
this.playButton.classList.add("spine-player-button-icon-pause");
// var remove = function () {
// if (!_this.paused)
// _this.playerControls.classList.add("spine-player-controls-hidden");
// };
// this.cancelId = setTimeout(remove, 1000);
// this.playButton.classList.remove("spine-player-button-icon-play");
// this.playButton.classList.add("spine-player-button-icon-pause");
if (this.config.animation) {
if (!this.animationState.getCurrent(0)) {
this.setAnimation(this.config.animation);
@@ -11203,10 +11203,10 @@ var spine;
};
SpinePlayer.prototype.pause = function () {
this.paused = true;
this.playerControls.classList.remove("spine-player-controls-hidden");
// this.playerControls.classList.remove("spine-player-controls-hidden");
clearTimeout(this.cancelId);
this.playButton.classList.remove("spine-player-button-icon-pause");
this.playButton.classList.add("spine-player-button-icon-play");
// this.playButton.classList.remove("spine-player-button-icon-pause");
// this.playButton.classList.add("spine-player-button-icon-play");
};
SpinePlayer.prototype.setAnimation = function (animation) {
this.previousViewport = this.currentViewport;

9
template/assets/style.css
View File

@@ -40,4 +40,13 @@ body {
background-image: url("../operator/fallback.png");
width: 100%;
height: 100%;
}
.website-settings {
position: fixed;
left: 0;
top: 0;
background-color: white;
user-select: auto;
z-index: 999;
}

7
template/index.html
View File

@@ -12,7 +12,7 @@
</head>
<body>
<div id="dev" style="position: fixed;left: 0;left: 0;background-color: white;"></div>
<div id="dev" style="position: fixed;left: 0;top: 0;background-color: white;"></div>
<image src="./operator/operator_logo.png" class="logo" id="logo" alt="operator logo" />
<div id="widget-wrapper" style="width: 100%; height: 100%;">
<div id="container" style="width: 100%; height: 100%;"></div>
@@ -20,8 +20,9 @@
</body>
<script type="text/javascript" src="./assets/spine-player.js?v={version}"></script>
<script type="text/javascript" src="./operator/operator.js?v={version}"></script>
<script type="text/javascript" src="./operator/settings.js?v={version}"></script>
<script type="text/javascript" src="./operator/operator_assets.js?v={version}"></script>
<script type="text/javascript" src="./operator/operator_settings.js?v={version}"></script>
<script type="text/javascript" src="./assets/settings.js?v={version}"></script>
<script type="text/javascript" src="./assets/runner.js?v={version}"></script>
</html>