mirror of
https://github.com/overte-org/overte.git
synced 2025-08-10 11:42:55 +02:00
120 lines
4.2 KiB
HTML
Executable file
120 lines
4.2 KiB
HTML
Executable file
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8"/>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
|
<link rel="stylesheet" href="index.css"/>
|
|
<title>Character Smoothing</title>
|
|
</head>
|
|
|
|
<body>
|
|
<div id="target-list"></div>
|
|
|
|
<div class="button-container">
|
|
<button id="apply-settings">
|
|
<span>Apply</span>
|
|
</button>
|
|
<!-- <button id="toggle-smooth-active" class="unactive">
|
|
<span>Enable</span>
|
|
</button> -->
|
|
</div>
|
|
</body>
|
|
|
|
<template id="target-listing">
|
|
<div data-name="left-hand" class="container-1">
|
|
<div class="title">Left Hand</div>
|
|
<div class="list">
|
|
<div class="option">
|
|
<div>Transform</div>
|
|
<input min="0" max="1" step="0.01" data-name="value" data-target="transform" type="number"/>
|
|
</div>
|
|
<div class="option">
|
|
<div>Rotation</div>
|
|
<input min="0" max="1" step="0.01" data-name="value" data-target="rotation" type="number"/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
let smoothing_settings = {};
|
|
|
|
// Helper functions
|
|
const qs = (target) => document.querySelector(target);
|
|
const qsa = (target) => document.querySelectorAll(target);
|
|
|
|
// Emit messages to the script backend
|
|
function _sendMessage(message) {
|
|
EventBridge.emitWebEvent(JSON.stringify(message));
|
|
}
|
|
// Handle new messages
|
|
EventBridge.scriptEventReceived.connect((message) => {
|
|
message = JSON.parse(message);
|
|
newMessage(message);
|
|
});
|
|
|
|
qsa("button").forEach((button) => button.addEventListener("click", (event) => event.target.blur()));
|
|
|
|
function newMessage(message) {
|
|
if (message.action === "load_listings")
|
|
buildTargetListings(message.data);
|
|
|
|
|
|
|
|
}
|
|
|
|
// We supply a list of targets we allow adjustments for from the script.
|
|
// Using that list we generate the listings on the app view
|
|
function buildTargetListings(target_list) {
|
|
smoothing_settings = target_list;
|
|
|
|
// Clear all existing listings (if any)
|
|
qsa("body .container-1").forEach((item) => item.remove());
|
|
|
|
// Build list
|
|
Object.keys(smoothing_settings.targets).forEach((target) => {
|
|
let template = qs("#target-listing").content.cloneNode(true);
|
|
template.querySelector(".container-1").dataset.name = target;
|
|
|
|
template.querySelector(".container-1 .title").innerText = _formatName(target);
|
|
template.querySelector(".container-1 [data-target='transform']").value = smoothing_settings.targets[target].transform;
|
|
template.querySelector(".container-1 [data-target='rotation']").value = smoothing_settings.targets[target].rotation;
|
|
|
|
qs("#target-list").appendChild(template);
|
|
});
|
|
}
|
|
|
|
qs('#apply-settings').addEventListener('click', updateSettings)
|
|
|
|
function updateSettings() {
|
|
qsa(".container-1").forEach((listing) => {
|
|
let target_name = listing.dataset.name;
|
|
let target_rotation = listing.querySelector('[data-target="rotation"]').value;
|
|
let target_transform = listing.querySelector('[data-target="transform"]').value;
|
|
|
|
smoothing_settings.targets[target_name] = {
|
|
transform: target_transform,
|
|
rotation: target_rotation
|
|
}
|
|
});
|
|
|
|
_sendMessage({action: 'new_settings', data: smoothing_settings})
|
|
}
|
|
|
|
// Pretty formats a string for visual display
|
|
function _formatName(string) {
|
|
let string_parts = [];
|
|
let return_string = "";
|
|
|
|
string = string.replace("_", " ");
|
|
|
|
string_parts = string.split(" ");
|
|
|
|
string_parts.forEach((word) => {
|
|
return_string += word.charAt(0).toUpperCase() + word.slice(1)
|
|
});
|
|
|
|
return return_string;
|
|
}
|
|
</script>
|
|
</html>
|