Skip to content

Commit e284fd9

Browse files
AavirashAavirash
committed
fix 43
1 parent d97d619 commit e284fd9

File tree

1 file changed

+133
-49
lines changed

1 file changed

+133
-49
lines changed

‎js/mood-palette.js‎

Lines changed: 133 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -118,8 +118,8 @@ function showScreen3() {
118118
return;
119119
}
120120

121-
// Start analyzing colors immediately
122-
analyzeColorsFromImage();
121+
// Start analyzing colors immediately - NO FALLBACKS
122+
directColorExtraction();
123123

124124
// Set up event listener
125125
document.getElementById('emailBtn').addEventListener('click', emailPalette);
@@ -132,8 +132,8 @@ function startCamera() {
132132

133133
isCapturing = true; // Set capture mode
134134

135-
// Test network connectivity
136-
testNetworkConnectivity();
135+
// Remove network connectivity test - not needed for color extraction
136+
// testNetworkConnectivity();
137137

138138
if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
139139
navigator.mediaDevices.getUserMedia({ video: { facingMode: 'environment' } })
@@ -169,37 +169,6 @@ function startCamera() {
169169
}
170170
}
171171

172-
// Function to test network connectivity
173-
async function testNetworkConnectivity() {
174-
console.log('Testing network connectivity...');
175-
showStatus('TESTING NETWORK...', 'info');
176-
177-
try {
178-
// Try a simple fetch to test connectivity with timeout
179-
const controller = new AbortController();
180-
const timeoutId = setTimeout(() => controller.abort(), 5000); // 5 second timeout
181-
182-
const response = await fetch('https://httpbin.org/get', {
183-
method: 'GET',
184-
mode: 'no-cors', // Use no-cors to avoid CORS issues
185-
signal: controller.signal
186-
});
187-
188-
clearTimeout(timeoutId);
189-
console.log('Network test response:', response.status);
190-
showStatus('NETWORK CONNECTED', 'info');
191-
return true;
192-
} catch (error) {
193-
console.error('Network test failed:', error);
194-
if (error.name === 'AbortError') {
195-
showStatus('NETWORK TEST TIMED OUT', 'error');
196-
} else {
197-
showStatus('NETWORK ISSUE: ' + error.message, 'error');
198-
}
199-
return false;
200-
}
201-
}
202-
203172
function captureImageFromPTT() {
204173
if (!videoElement) {
205174
console.log('ERROR: No video element available for capture');
@@ -587,6 +556,122 @@ function generatePalette() {
587556
showScreen3();
588557
}
589558

559+
// Simplified direct color extraction - NO FALLBACKS, NO ERROR COLORS
560+
function directColorExtraction() {
561+
console.log('=== DIRECT COLOR EXTRACTION STARTED ===');
562+
563+
if (!capturedImageData) {
564+
console.log('ERROR: No captured image data!');
565+
showStatus('NO IMAGE CAPTURED', 'error');
566+
displayPalette(['#000000', '#000000', '#000000', '#000000', '#000000']);
567+
return;
568+
}
569+
570+
console.log('Image data length:', capturedImageData.length);
571+
console.log('Image data preview:', capturedImageData.substring(0, 100));
572+
573+
showStatus('EXTRACTING COLORS...', 'info');
574+
575+
try {
576+
// Create image element from data URL
577+
const img = new Image();
578+
img.onload = function() {
579+
try {
580+
console.log('Image loaded. Dimensions:', img.width, 'x', img.height);
581+
582+
// Create canvas to analyze image
583+
const canvas = document.createElement('canvas');
584+
const ctx = canvas.getContext('2d');
585+
586+
// Set canvas size
587+
canvas.width = 200;
588+
canvas.height = 200;
589+
590+
console.log('Canvas size set to:', canvas.width, 'x', canvas.height);
591+
592+
// Draw image on canvas
593+
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
594+
595+
// Get image data
596+
const imageDataObj = ctx.getImageData(0, 0, canvas.width, canvas.height);
597+
const data = imageDataObj.data;
598+
599+
console.log('Raw image data length:', data.length);
600+
601+
// Simple color extraction - take samples from different parts of the image
602+
const colors = [];
603+
const step = Math.max(1, Math.floor(canvas.width * canvas.height / 1000));
604+
605+
console.log('Sampling step:', step);
606+
607+
// Sample pixels across the image
608+
for (let i = 0; i < data.length; i += step * 4) {
609+
const r = data[i];
610+
const g = data[i + 1];
611+
const b = data[i + 2];
612+
const a = data[i + 3];
613+
614+
// Skip transparent pixels
615+
if (a < 128) continue;
616+
617+
// Convert to hex
618+
const hex = '#' + [r, g, b].map(x => {
619+
const hex = x.toString(16);
620+
return hex.length === 1 ? '0' + hex : hex;
621+
}).join('');
622+
623+
colors.push(hex);
624+
625+
// Limit to 100 samples for performance
626+
if (colors.length >= 100) break;
627+
}
628+
629+
console.log('Sampled colors:', colors.length);
630+
631+
// If we don't have enough colors, use what we have
632+
if (colors.length === 0) {
633+
console.log('No colors found, using default');
634+
displayPalette(['#808080', '#808080', '#808080', '#808080', '#808080']);
635+
showStatus('NO COLORS FOUND', 'error');
636+
return;
637+
}
638+
639+
// Take first 5 colors as our palette
640+
const palette = colors.slice(0, 5);
641+
642+
// Fill up to 5 colors if needed
643+
while (palette.length < 5) {
644+
palette.push(palette[palette.length % palette.length]);
645+
}
646+
647+
console.log('Final palette:', palette);
648+
currentPalette = palette;
649+
displayPalette(palette);
650+
showStatus('PALETTE READY! EMAIL TO SEND', 'success');
651+
console.log('=== DIRECT COLOR EXTRACTION COMPLETED ===');
652+
} catch (error) {
653+
console.error('Error in image processing:', error);
654+
showStatus('PROCESSING ERROR', 'error');
655+
displayPalette(['#000000', '#000000', '#000000', '#000000', '#000000']);
656+
}
657+
};
658+
659+
img.onerror = function() {
660+
console.error('Failed to load image');
661+
showStatus('IMAGE LOAD ERROR', 'error');
662+
displayPalette(['#000000', '#000000', '#000000', '#000000', '#000000']);
663+
};
664+
665+
console.log('Setting image source...');
666+
img.src = capturedImageData;
667+
} catch (error) {
668+
console.error('Error in directColorExtraction:', error);
669+
showStatus('EXTRACTION ERROR', 'error');
670+
displayPalette(['#000000', '#000000', '#000000', '#000000', '#000000']);
671+
}
672+
}
673+
674+
// Simplified display function - NO ERROR COLORS
590675
function displayPalette(colors) {
591676
console.log('=== DISPLAYING PALETTE ===');
592677
console.log('Colors to display:', colors);
@@ -600,13 +685,13 @@ function displayPalette(colors) {
600685
const paletteContainer = document.createElement('div');
601686
paletteContainer.className = 'palette-container';
602687
paletteContainer.style.display = 'flex';
603-
paletteContainer.style.gap = '8px'; // Reduced gap
688+
paletteContainer.style.gap = '8px';
604689
paletteContainer.style.justifyContent = 'center';
605690
paletteContainer.style.flexWrap = 'wrap';
606691
paletteContainer.style.alignItems = 'center';
607-
paletteContainer.style.marginTop = '5px'; // Reduced margin
608-
paletteContainer.style.maxHeight = '100px'; // Limit height
609-
paletteContainer.style.overflow = 'hidden'; // Prevent overflow
692+
paletteContainer.style.marginTop = '5px';
693+
paletteContainer.style.maxHeight = '100px';
694+
paletteContainer.style.overflow = 'hidden';
610695

611696
colors.forEach((color, index) => {
612697
// Validate that color is a valid hex code
@@ -615,24 +700,24 @@ function displayPalette(colors) {
615700
swatchContainer.style.display = 'flex';
616701
swatchContainer.style.flexDirection = 'column';
617702
swatchContainer.style.alignItems = 'center';
618-
swatchContainer.style.margin = '3px'; // Reduced margin
703+
swatchContainer.style.margin = '3px';
619704

620-
// Create a rectangle shape for the color (smaller size)
705+
// Create a rectangle shape for the color
621706
const colorSwatch = document.createElement('div');
622707
colorSwatch.style.backgroundColor = color;
623-
colorSwatch.style.width = '30px'; // Smaller width
624-
colorSwatch.style.height = '30px'; // Smaller height
708+
colorSwatch.style.width = '30px';
709+
colorSwatch.style.height = '30px';
625710
colorSwatch.style.border = '2px solid #fff';
626711
colorSwatch.style.borderRadius = '4px';
627712
colorSwatch.style.boxSizing = 'border-box';
628713
colorSwatch.title = color;
629714

630-
// Add a label with the hex code (smaller font)
715+
// Add a label with the hex code
631716
const colorLabel = document.createElement('div');
632717
colorLabel.textContent = color;
633718
colorLabel.style.color = '#fff';
634-
colorLabel.style.fontSize = '8px'; // Smaller font
635-
colorLabel.style.marginTop = '2px'; // Reduced margin
719+
colorLabel.style.fontSize = '8px';
720+
colorLabel.style.marginTop = '2px';
636721
colorLabel.style.fontFamily = 'Courier New, monospace';
637722
colorLabel.style.textAlign = 'center';
638723
colorLabel.style.maxWidth = '30px';
@@ -654,10 +739,9 @@ function displayPalette(colors) {
654739

655740
console.log('Palette displayed successfully');
656741
} else {
657-
console.log('ERROR: No valid colors to display');
658-
paletteDisplay.innerHTML = '<div class="placeholder-text">NO VALID COLORS FOUND</div>';
742+
console.log('No colors to display, showing placeholder');
743+
paletteDisplay.innerHTML = '<div class="placeholder-text">NO COLORS FOUND</div>';
659744
currentPalette = [];
660-
console.log('No valid colors to display');
661745
}
662746

663747
console.log('=== PALETTE DISPLAY COMPLETED ===');

0 commit comments

Comments
 (0)