317 lines
8.8 KiB
JavaScript
317 lines
8.8 KiB
JavaScript
function select_model(){
|
|
|
|
// ✅ Auto-select second option for characterSelect
|
|
const charSelect = document.getElementById('characterSelect');
|
|
if (charSelect && charSelect.options.length > 1) {
|
|
charSelect.selectedIndex = 1;
|
|
// Trigger change if costumeSelect depends on it
|
|
charSelect.dispatchEvent(new Event('change'));
|
|
|
|
|
|
console.log("hello");
|
|
|
|
setTimeout(() => {
|
|
document.getElementById('addL2DModelBtn').click();
|
|
}, 1000); // Adjust delay if needed
|
|
}
|
|
}
|
|
|
|
function select_dress(){
|
|
// ✅ Auto-select second option for costumeSelect
|
|
const costumeSelect = document.getElementById('costumeSelect');
|
|
if (costumeSelect && costumeSelect.options.length > 1) {
|
|
costumeSelect.selectedIndex = 1;
|
|
}
|
|
}
|
|
|
|
function display_none(){
|
|
let myDiv = document.getElementById("collapsible-id");
|
|
myDiv.style.display = "none";
|
|
}
|
|
|
|
|
|
function do_the_clicking(){
|
|
|
|
setTimeout(() => {
|
|
document.getElementById('model-setting-btn-id').click();
|
|
document.getElementById('display-collapsible-button').click();
|
|
}, 100); // Adjust delay if needed
|
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
|
|
|
|
|
eyeBlinkingCheckbox.checked = true;
|
|
// Fire the event manually
|
|
eyeBlinkingCheckbox.dispatchEvent(new Event('change'));
|
|
|
|
|
|
|
|
|
|
breathingCheckbox.checked = true;
|
|
// Fire the event manually
|
|
breathingCheckbox.dispatchEvent(new Event('change'));
|
|
|
|
document.getElementById('collapsible-Motions').click();//CLICK Motions
|
|
|
|
document.getElementById('collapsible-Parameters(beta)').click();// CLICK Parameters(beta)
|
|
// display_none();
|
|
}, 300); // Adjust delay if needed
|
|
|
|
|
|
setTimeout(async () => {
|
|
// display_none();
|
|
|
|
// make_background__round();
|
|
|
|
const move_lipps_randomly = getQueryParam('move_lipps_randomly', 0); // Returns "22" or 0 if not found
|
|
if(move_lipps_randomly == 1){
|
|
// this.loadBG('./bg/background004_1/manifest.json')
|
|
mouth_movement();
|
|
}
|
|
|
|
const move_face_imotions_randomly = getQueryParam('move_face_imotions_randomly', 0); // Returns "22" or 0 if not found
|
|
if(move_face_imotions_randomly != 0 ){
|
|
|
|
continously___load_list_for_buttons_from_a_div__and_programatically_click_button(move_face_imotions_randomly);
|
|
}
|
|
|
|
await drag_body_on_y_axis(3000);
|
|
|
|
const display_none_ = getQueryParam('display_none', 0); // Returns "22" or 0 if not found
|
|
if(display_none_ == 1){
|
|
display_none();
|
|
}
|
|
}, 500); // Adjust delay if needed
|
|
}
|
|
|
|
|
|
// #pose of the model
|
|
function load_list_for_buttons_from_a_div__and_programatically_click_button(motionslist , index=16 , loop_debug=false){
|
|
|
|
// console.log("below is the another object")
|
|
|
|
|
|
|
|
let childrenArray = Array.from(motionslist.children);
|
|
|
|
// Get the 4th element (index 3)
|
|
let child__button = childrenArray[index];
|
|
|
|
// Make sure it's there before clicking
|
|
if (child__button) {
|
|
child__button.click(); // 🔥 CLICK!
|
|
|
|
if (loop_debug === true) console.log(childrenArray[index]);
|
|
} else {
|
|
console.warn("That bastard isn't in the array!");
|
|
}
|
|
|
|
}
|
|
|
|
|
|
loop_debug = false;
|
|
function continously___load_list_for_buttons_from_a_div__and_programatically_click_button( emotions ){
|
|
let interval = setInterval(() => {
|
|
|
|
|
|
setTimeout(() => {
|
|
|
|
if (loop_debug === true) console.log("happy");
|
|
|
|
let expressionslist = document.getElementById('expressions-list')
|
|
load_list_for_buttons_from_a_div__and_programatically_click_button(expressionslist,0); // facial expressions / emotions
|
|
|
|
// drag_body_on_y_axis(0);
|
|
}, 1000); // Adjust delay if needed
|
|
|
|
|
|
|
|
setTimeout(() => {
|
|
|
|
if (loop_debug === true) console.log("sad");
|
|
|
|
let expressionslist = document.getElementById('expressions-list')
|
|
load_list_for_buttons_from_a_div__and_programatically_click_button(expressionslist,2); // facial expressions / emotions
|
|
|
|
// drag_body_on_y_axis(0);
|
|
}, 2000); // Adjust delay if needed
|
|
}, 2000); // Lower number = faster animation
|
|
|
|
}
|
|
|
|
function mouth_movement(){
|
|
let slider = document.getElementById("paramMouthOpenYRange");
|
|
|
|
let value = 0;
|
|
let direction = 1; // 1 = opening, -1 = closing
|
|
|
|
let interval = setInterval(() => {
|
|
// Change value based on direction
|
|
value += direction * 0.01;
|
|
|
|
// Reverse at boundaries
|
|
if (value >= 1) {
|
|
value = 1;
|
|
direction = -1;
|
|
} else if (value <= 0) {
|
|
value = 0;
|
|
direction = 1;
|
|
}
|
|
|
|
// Set the slider value
|
|
slider.value = value.toFixed(2);
|
|
|
|
// Trigger input event (if something listens to slider)
|
|
slider.dispatchEvent(new Event('input'));
|
|
|
|
}, 30); // Lower number = faster animation
|
|
|
|
}
|
|
|
|
function real_lipsing(value){
|
|
readShm('/handler1').then(value => console.log(value));
|
|
|
|
// let value = 0;
|
|
let slider = document.getElementById("paramMouthOpenYRange");
|
|
// Set the slider value
|
|
slider.value = value.toFixed(2);
|
|
|
|
// Trigger input event (if something listens to slider)
|
|
slider.dispatchEvent(new Event('input'));
|
|
}
|
|
|
|
|
|
async function readShm(endpoint) {
|
|
return new Promise((resolve) => {
|
|
const ws = new WebSocket(`ws://localhost:3000${endpoint}`);
|
|
ws.onmessage = (event) => {
|
|
resolve(event.data);
|
|
ws.close();
|
|
};
|
|
});
|
|
}
|
|
// Usage:
|
|
// const value = await readShm('/handler1');
|
|
// console.log(value);
|
|
|
|
|
|
async function real_lipsing_from_backend_web_socket(){
|
|
let value = await readShm('/handler1');
|
|
console.log(value);
|
|
value = parseInt(value);
|
|
if (isNaN(value)) { value = 0; alert('WebSocket returned non-integer, defaulting to 0'); }
|
|
|
|
// let value = 0;
|
|
let slider = document.getElementById("paramMouthOpenYRange");
|
|
// Set the slider value
|
|
slider.value = value.toFixed(2);
|
|
|
|
// Trigger input event (if something listens to slider)
|
|
slider.dispatchEvent(new Event('input'));
|
|
}
|
|
|
|
|
|
|
|
|
|
function start_lipsync_websocket() {
|
|
const ws = new WebSocket(`ws://localhost:3000/handler1`);
|
|
|
|
ws.onmessage = (event) => {
|
|
let value = parseFloat(event.data);
|
|
if (isNaN(value)) { value = 0.0; }
|
|
|
|
let slider = document.getElementById("paramMouthOpenYRange");
|
|
slider.value = value.toFixed(2);
|
|
slider.dispatchEvent(new Event('input'));
|
|
};
|
|
|
|
ws.onclose = () => {
|
|
console.log('WebSocket closed, reconnecting...');
|
|
setTimeout(start_lipsync_websocket, 1000);
|
|
};
|
|
|
|
ws.onerror = (err) => {
|
|
console.log('WebSocket error', err);
|
|
ws.close();
|
|
};
|
|
}
|
|
|
|
start_lipsync_websocket();
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
async function drag_body_on_y_axis(delay){
|
|
|
|
|
|
// setTimeout(() => {
|
|
|
|
// let slider = document.getElementById("Param_horizontal-id");
|
|
// slider.value = -30;
|
|
|
|
// // Trigger input event (if something listens to slider)
|
|
// slider.dispatchEvent(new Event('input'));
|
|
|
|
// slider.dispatchEvent(new Event('change'));
|
|
// }, 2000); // Adjust delay if needed
|
|
|
|
|
|
|
|
|
|
// setTimeout(() => {
|
|
|
|
// let slider = document.getElementById("Param_horizontal-id");
|
|
// slider.value = 30;
|
|
|
|
// // Trigger input event (if something listens to slider)
|
|
// slider.dispatchEvent(new Event('input'));
|
|
|
|
// slider.dispatchEvent(new Event('change'));
|
|
// }, 4000); // Adjust delay if needed
|
|
|
|
|
|
|
|
return new Promise((resolve) => {
|
|
setTimeout(() => {
|
|
let slider = document.getElementById("Param_horizontal-id");
|
|
if (slider) {
|
|
slider.value = 1;
|
|
|
|
// Trigger input and change events
|
|
slider.dispatchEvent(new Event('input'));
|
|
slider.dispatchEvent(new Event('change'));
|
|
}
|
|
resolve(0); // Return 0 after action is done
|
|
}, delay); // Adjust delay if needed
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
function resizeCanvasToParent() {
|
|
const canvas = document.getElementById("viewer");
|
|
const parent = canvas.parentElement;
|
|
|
|
// Get parent dimensions
|
|
const parentWidth = parent.clientWidth;
|
|
const parentHeight = parent.clientHeight;
|
|
|
|
// Set canvas CSS to fill parent
|
|
canvas.style.width = "100%";
|
|
canvas.style.height = "100%";
|
|
|
|
// Set canvas resolution to match parent (avoid blur)
|
|
canvas.width = parentWidth;
|
|
canvas.height = parentHeight;
|
|
}
|
|
window.addEventListener('resize', resizeCanvasToParent);
|
|
resizeCanvasToParent(); // Initial call
|