Skip to content

Commit 8e47d99

Browse files
ToniBloney23ToniBloney23
authored
Update index.html
1 parent 66ec383 commit 8e47d99

File tree

1 file changed

+56
-307
lines changed

1 file changed

+56
-307
lines changed

‎index.html‎

Lines changed: 56 additions & 307 deletions
Original file line numberDiff line numberDiff line change
@@ -1136,7 +1136,6 @@
11361136
</div>
11371137
<div class="loader-percentage" id="loader-percentage">0%</div>
11381138
<div class="loader-message">Preparing your workout experience</div>
1139-
<button id="retry-loading" class="btn btn-primary" style="margin-top: 20px; display: none;">Retry Loading</button>
11401139
</div>
11411140
</div>
11421141

@@ -2924,42 +2923,14 @@ <h1 class="page-title">Motion Rep Counter</h1>
29242923
}
29252924
}
29262925

2927-
// Load OpenCV.js with progress tracking and fallback mechanism
2926+
// Simple OpenCV.js loading function
29282927
function loadOpenCV() {
29292928
return new Promise((resolve, reject) => {
29302929
const progressBar = document.getElementById('loader-progress');
29312930
const percentageText = document.getElementById('loader-percentage');
29322931
const loaderText = document.querySelector('.loader-text');
29332932
const loaderMessage = document.querySelector('.loader-message');
29342933

2935-
// Define multiple CDN sources for fallback with more options
2936-
const openCVSources = [
2937-
// Try local file first if available (you'll need to download this file)
2938-
window.location.origin + '/opencv.js',
2939-
window.location.origin + '/lib/opencv.js',
2940-
window.location.origin + '/js/opencv.js',
2941-
// Then try CDN sources
2942-
'https://docs.opencv.org/4.5.5/opencv.js', // Try older versions first as they might be more stable
2943-
'https://docs.opencv.org/4.6.0/opencv.js',
2944-
'https://docs.opencv.org/4.7.0/opencv.js',
2945-
'https://docs.opencv.org/4.8.0/opencv.js',
2946-
'https://docs.opencv.org/4.9.0/opencv.js',
2947-
'https://cdn.jsdelivr.net/npm/opencv.js@1.2.1/opencv.min.js',
2948-
'https://unpkg.com/opencv.js@1.2.1/opencv.js',
2949-
'https://cdn.jsdelivr.net/npm/@techstark/opencv-js@4.7.0-release.1/opencv.js',
2950-
'https://cdn.jsdelivr.net/npm/opencv-wasm@4.3.0-10/opencv.js',
2951-
// Additional fallbacks
2952-
'https://cdn.jsdelivr.net/npm/@techstark/opencv-js@4.5.5-release.2/opencv.js',
2953-
'https://cdn.jsdelivr.net/npm/@techstark/opencv-js@4.5.4-release.2/opencv.js'
2954-
];
2955-
2956-
// Log available sources for debugging
2957-
console.log('OpenCV sources to try:', openCVSources);
2958-
2959-
let currentSourceIndex = 0;
2960-
let loadAttempts = 0;
2961-
const maxAttempts = 2; // Try each source up to 2 times
2962-
29632934
// Check if OpenCV is already loaded
29642935
if (typeof cv !== 'undefined') {
29652936
console.log('OpenCV.js already available');
@@ -2968,289 +2939,67 @@ <h1 class="page-title">Motion Rep Counter</h1>
29682939
return resolve();
29692940
}
29702941

2971-
function tryLoadOpenCV() {
2972-
if (currentSourceIndex >= openCVSources.length) {
2973-
if (loadAttempts < maxAttempts) {
2974-
loadAttempts++;
2975-
currentSourceIndex = 0;
2976-
console.log(`Retrying all sources (attempt ${loadAttempts} of ${maxAttempts})`);
2977-
loaderMessage.textContent = `Retrying all sources (attempt ${loadAttempts} of ${maxAttempts})...`;
2978-
setTimeout(tryLoadOpenCV, 1000); // Wait a second before retrying
2979-
return;
2942+
// Use a direct script tag to load OpenCV.js
2943+
const script = document.createElement('script');
2944+
script.src = 'https://docs.opencv.org/4.8.0/opencv.js';
2945+
script.async = true;
2946+
2947+
// Set up onload handler
2948+
script.onload = function() {
2949+
console.log('OpenCV.js script loaded');
2950+
progressBar.style.width = '100%';
2951+
percentageText.textContent = '100%';
2952+
loaderText.textContent = 'Initializing OpenCV.js...';
2953+
loaderMessage.textContent = 'Almost there! Setting up the workout environment...';
2954+
2955+
// Set up onRuntimeInitialized handler
2956+
if (typeof cv !== 'undefined') {
2957+
if (cv.onRuntimeInitialized) {
2958+
const originalOnRuntimeInitialized = cv.onRuntimeInitialized;
2959+
cv.onRuntimeInitialized = () => {
2960+
originalOnRuntimeInitialized?.();
2961+
console.log('OpenCV.js initialized successfully');
2962+
resolve();
2963+
};
2964+
} else {
2965+
console.log('OpenCV.js already initialized');
2966+
resolve();
29802967
}
2968+
} else {
2969+
// If cv doesn't exist yet, wait a bit and check again
2970+
let checkInterval = setInterval(() => {
2971+
if (typeof cv !== 'undefined') {
2972+
clearInterval(checkInterval);
2973+
console.log('OpenCV.js initialized after waiting');
2974+
resolve();
2975+
}
2976+
}, 100);
29812977

2982-
// If all XHR attempts failed, try direct script loading as a last resort
2983-
if (loadAttempts >= maxAttempts) {
2984-
loaderMessage.textContent = 'Trying alternative loading method...';
2985-
console.log('Trying direct script loading as last resort');
2986-
2987-
// Try to load directly from a reliable CDN
2988-
const script = document.createElement('script');
2989-
script.src = 'https://docs.opencv.org/4.5.5/opencv.js'; // Use a stable version
2990-
script.async = true;
2991-
2992-
script.onload = function() {
2993-
console.log('OpenCV.js loaded via direct script tag');
2994-
progressBar.style.width = '100%';
2995-
percentageText.textContent = '100%';
2996-
loaderText.textContent = 'Initializing OpenCV.js...';
2997-
2998-
// Check if cv object exists and wait for initialization
2999-
if (typeof cv !== 'undefined') {
3000-
if (cv.onRuntimeInitialized) {
3001-
cv.onRuntimeInitialized = () => {
3002-
console.log('OpenCV.js initialized successfully via direct script');
3003-
resolve();
3004-
};
3005-
} else {
3006-
console.log('OpenCV.js already initialized via direct script');
3007-
resolve();
3008-
}
3009-
} else {
3010-
// If cv doesn't exist yet, wait a bit and check again
3011-
let checkInterval = setInterval(() => {
3012-
if (typeof cv !== 'undefined') {
3013-
clearInterval(checkInterval);
3014-
console.log('OpenCV.js initialized after waiting (direct script)');
3015-
resolve();
3016-
}
3017-
}, 100);
3018-
3019-
// Set a timeout to prevent infinite waiting
3020-
setTimeout(() => {
3021-
clearInterval(checkInterval);
3022-
if (typeof cv === 'undefined') {
3023-
loaderMessage.textContent = 'Failed to load OpenCV.js. Please check your internet connection and try again.';
3024-
loaderText.textContent = 'Loading Failed';
3025-
loaderText.style.color = 'var(--danger)';
3026-
3027-
// Show retry button
3028-
const retryButton = document.getElementById('retry-loading');
3029-
if (retryButton) {
3030-
retryButton.style.display = 'block';
3031-
retryButton.onclick = () => {
3032-
// Reset UI
3033-
loaderText.textContent = 'Loading OpenCV.js...';
3034-
loaderText.style.color = 'var(--light)';
3035-
loaderMessage.textContent = 'Retrying download...';
3036-
retryButton.style.display = 'none';
3037-
3038-
// Reset counters and try again
3039-
loadAttempts = 0;
3040-
currentSourceIndex = 0;
3041-
tryLoadOpenCV();
3042-
};
3043-
}
3044-
3045-
// Don't reject the promise yet, allow retry
3046-
// reject(new Error('Failed to load OpenCV.js via direct script tag'));
3047-
}
3048-
}, 15000); // Wait 15 seconds max
3049-
}
3050-
};
3051-
3052-
script.onerror = function() {
3053-
loaderMessage.textContent = 'Failed to load OpenCV.js from all sources. Please check your internet connection and try again.';
2978+
// Set a timeout to prevent infinite waiting
2979+
setTimeout(() => {
2980+
clearInterval(checkInterval);
2981+
if (typeof cv === 'undefined') {
2982+
console.error('OpenCV.js failed to initialize');
2983+
loaderMessage.textContent = 'Failed to initialize OpenCV.js. Please refresh the page to try again.';
30542984
loaderText.textContent = 'Loading Failed';
30552985
loaderText.style.color = 'var(--danger)';
3056-
3057-
// Show retry button
3058-
const retryButton = document.getElementById('retry-loading');
3059-
if (retryButton) {
3060-
retryButton.style.display = 'block';
3061-
retryButton.onclick = () => {
3062-
// Reset UI
3063-
loaderText.textContent = 'Loading OpenCV.js...';
3064-
loaderText.style.color = 'var(--light)';
3065-
loaderMessage.textContent = 'Retrying download...';
3066-
retryButton.style.display = 'none';
3067-
3068-
// Reset counters and try again
3069-
loadAttempts = 0;
3070-
currentSourceIndex = 0;
3071-
tryLoadOpenCV();
3072-
};
3073-
}
3074-
3075-
// Don't reject the promise yet, allow retry
3076-
// reject(new Error('Failed to load OpenCV.js from all sources including direct script tag'));
3077-
};
3078-
3079-
document.head.appendChild(script);
3080-
return;
3081-
}
3082-
3083-
loaderMessage.textContent = 'Failed to load OpenCV.js from all sources. Please check your internet connection and try again.';
3084-
loaderText.textContent = 'Loading Failed';
3085-
loaderText.style.color = 'var(--danger)';
3086-
3087-
// Show retry button
3088-
const retryButton = document.getElementById('retry-loading');
3089-
if (retryButton) {
3090-
retryButton.style.display = 'block';
3091-
retryButton.onclick = () => {
3092-
// Reset UI
3093-
loaderText.textContent = 'Loading OpenCV.js...';
3094-
loaderText.style.color = 'var(--light)';
3095-
loaderMessage.textContent = 'Retrying download...';
3096-
retryButton.style.display = 'none';
3097-
3098-
// Reset counters and try again
3099-
loadAttempts = 0;
3100-
currentSourceIndex = 0;
3101-
tryLoadOpenCV();
3102-
};
3103-
}
3104-
3105-
// Don't reject the promise yet, allow retry
3106-
// reject(new Error('Failed to load OpenCV.js from all sources'));
3107-
return;
2986+
reject(new Error('Failed to initialize OpenCV.js'));
2987+
}
2988+
}, 10000); // Wait 10 seconds max
31082989
}
3109-
3110-
const currentSource = openCVSources[currentSourceIndex];
3111-
loaderMessage.textContent = `Trying source ${currentSourceIndex + 1}/${openCVSources.length}`;
3112-
console.log(`Attempting to load OpenCV.js from: ${currentSource}`);
3113-
3114-
// Reset progress indicators
3115-
progressBar.style.width = '0%';
3116-
percentageText.textContent = '0%';
3117-
3118-
// First, we need to fetch the file to track progress
3119-
const xhr = new XMLHttpRequest();
3120-
xhr.open('GET', currentSource, true);
3121-
xhr.responseType = 'blob';
3122-
3123-
// Set timeout for the request
3124-
xhr.timeout = 30000; // 30 seconds timeout - increased for slower connections
3125-
3126-
// Log the attempt
3127-
console.log(`Fetching OpenCV.js from: ${currentSource} (attempt ${loadAttempts + 1}, source ${currentSourceIndex + 1}/${openCVSources.length})`);
3128-
loaderMessage.textContent = `Downloading from source ${currentSourceIndex + 1}/${openCVSources.length}...`;
3129-
3130-
// Track loading progress
3131-
xhr.onprogress = (event) => {
3132-
if (event.lengthComputable) {
3133-
const percentComplete = Math.round((event.loaded / event.total) * 100);
3134-
progressBar.style.width = percentComplete + '%';
3135-
percentageText.textContent = percentComplete + '%';
3136-
}
3137-
};
3138-
3139-
xhr.onload = function() {
3140-
if (this.status === 200) {
3141-
// Create a URL for the blob
3142-
const blob = new Blob([this.response], {type: 'application/javascript'});
3143-
const scriptURL = URL.createObjectURL(blob);
3144-
3145-
// Now create and load the script
3146-
const script = document.createElement('script');
3147-
script.setAttribute('type', 'text/javascript');
3148-
script.setAttribute('src', scriptURL);
3149-
3150-
// Set a timeout for script loading
3151-
const scriptLoadTimeout = setTimeout(() => {
3152-
console.error(`Script load timeout for source ${currentSourceIndex + 1}`);
3153-
URL.revokeObjectURL(scriptURL);
3154-
currentSourceIndex++;
3155-
tryLoadOpenCV(); // Try next source
3156-
}, 20000); // 20 seconds timeout for script loading
3157-
3158-
script.onload = () => {
3159-
clearTimeout(scriptLoadTimeout);
3160-
console.log('OpenCV.js script loaded');
3161-
progressBar.style.width = '100%';
3162-
percentageText.textContent = '100%';
3163-
loaderText.textContent = 'Initializing OpenCV.js...';
3164-
loaderMessage.textContent = 'Almost there! Setting up the workout environment...';
3165-
3166-
// Check if cv object exists and wait for initialization
3167-
if (typeof cv !== 'undefined') {
3168-
if (cv.onRuntimeInitialized) {
3169-
// If cv exists but not initialized yet
3170-
const originalOnRuntimeInitialized = cv.onRuntimeInitialized;
3171-
cv.onRuntimeInitialized = () => {
3172-
originalOnRuntimeInitialized?.();
3173-
console.log('OpenCV.js initialized successfully');
3174-
// Clean up the URL object
3175-
URL.revokeObjectURL(scriptURL);
3176-
resolve();
3177-
};
3178-
} else {
3179-
// If cv exists and is already initialized
3180-
console.log('OpenCV.js already initialized');
3181-
URL.revokeObjectURL(scriptURL);
3182-
resolve();
3183-
}
3184-
} else {
3185-
// If cv doesn't exist yet, wait a bit and check again
3186-
let checkInterval = setInterval(() => {
3187-
if (typeof cv !== 'undefined') {
3188-
clearInterval(checkInterval);
3189-
3190-
if (cv.onRuntimeInitialized) {
3191-
const originalOnRuntimeInitialized = cv.onRuntimeInitialized;
3192-
cv.onRuntimeInitialized = () => {
3193-
originalOnRuntimeInitialized?.();
3194-
console.log('OpenCV.js initialized after waiting');
3195-
URL.revokeObjectURL(scriptURL);
3196-
resolve();
3197-
};
3198-
} else {
3199-
console.log('OpenCV.js already initialized after waiting');
3200-
URL.revokeObjectURL(scriptURL);
3201-
resolve();
3202-
}
3203-
}
3204-
}, 100);
3205-
3206-
// Set a timeout to prevent infinite waiting
3207-
setTimeout(() => {
3208-
clearInterval(checkInterval);
3209-
if (typeof cv === 'undefined') {
3210-
console.error(`OpenCV object not found after loading from source ${currentSourceIndex + 1}`);
3211-
URL.revokeObjectURL(scriptURL);
3212-
currentSourceIndex++;
3213-
tryLoadOpenCV(); // Try next source
3214-
}
3215-
}, 10000); // Wait 10 seconds max
3216-
}
3217-
};
3218-
3219-
script.onerror = () => {
3220-
clearTimeout(scriptLoadTimeout);
3221-
console.error(`Failed to initialize OpenCV.js from source ${currentSourceIndex + 1}`);
3222-
URL.revokeObjectURL(scriptURL);
3223-
currentSourceIndex++;
3224-
tryLoadOpenCV(); // Try next source
3225-
};
3226-
3227-
document.body.appendChild(script);
3228-
} else {
3229-
console.error(`Failed to load OpenCV.js from source ${currentSourceIndex + 1}: HTTP ${this.status}`);
3230-
currentSourceIndex++;
3231-
tryLoadOpenCV(); // Try next source
3232-
}
3233-
};
3234-
3235-
xhr.onerror = (error) => {
3236-
console.error(`Network error loading OpenCV.js from source ${currentSourceIndex + 1}:`, error);
3237-
loaderMessage.textContent = `Network error with source ${currentSourceIndex + 1}. Trying next source...`;
3238-
currentSourceIndex++;
3239-
setTimeout(() => tryLoadOpenCV(), 1000); // Add a small delay before trying next source
3240-
};
3241-
3242-
xhr.ontimeout = () => {
3243-
console.error(`Timeout loading OpenCV.js from source ${currentSourceIndex + 1}`);
3244-
loaderMessage.textContent = `Timeout with source ${currentSourceIndex + 1}. Trying next source...`;
3245-
currentSourceIndex++;
3246-
setTimeout(() => tryLoadOpenCV(), 1000); // Add a small delay before trying next source
3247-
};
3248-
3249-
xhr.send();
3250-
}
2990+
};
2991+
2992+
// Set up error handler
2993+
script.onerror = function() {
2994+
console.error('Failed to load OpenCV.js');
2995+
loaderMessage.textContent = 'Failed to load OpenCV.js. Please check your internet connection and refresh the page.';
2996+
loaderText.textContent = 'Loading Failed';
2997+
loaderText.style.color = 'var(--danger)';
2998+
reject(new Error('Failed to load OpenCV.js'));
2999+
};
32513000

3252-
// Start the loading process
3253-
tryLoadOpenCV();
3001+
// Add the script to the document
3002+
document.head.appendChild(script);
32543003
});
32553004
}
32563005

0 commit comments

Comments
 (0)