modify legend colors, widen box line

index.html

@@ -86,12 +86,11 @@
 
         #weatherInfo {
             max-width: 100%;
+            position: relative;
             margin: auto;
-            margin-top: 20px;
+            margin-top: 10px; /* Add some margin between legend and weatherInfo */
             padding: 15px;
             background-color: var(--light-color);
-            box-shadow: 0 0 10px rgba(52, 47, 47, 0.1);
-            border-radius: 5px;
             color: var(--dark-color);
         }
 
@@ -161,40 +160,70 @@
         }
 
         #legend {
-    position: absolute;
+            position: relative;
-    top: 20px;
+            top: 0px;
-    left: 20px;
+            align-items: center;
-    background-color: rgba(255, 255, 255, 0.8); /* Tło legenda z lekkim przezroczystością */
+            display: flex;
-    padding: 10px;
+            background-color: rgba(255, 255, 255, 0.8);
-    border-radius: 5px;
+            padding: 10px;
-    font-size: 16px;
+            font-size: 16px;
-    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+            flex-wrap: wrap;
-}
+            justify-content: center;
+            margin-top: 0;
+        }
 
-#legend h3 {
+        #legend h3 {
-    margin-bottom: 10px;
+            margin-bottom: 10px;
-    font-size: 18px;
+            font-size: 18px;
-}
+            position: relative;
+        }
 
-.legend-item {
+        .legend-item {
-    display: flex;
+            display: flex;
-    align-items: center;
+            align-items: center;
-    margin-bottom: 5px;
+            margin-right: 15px; /* Add some spacing between legend items */
-}
+        }
 
-.legend-color {
+        .legend-color {
-    width: 20px;
+            width: 20px;
-    height: 20px;
+            height: 20px;
-    margin-right: 10px;
+            margin-right: 5px;
-    border-radius: 5px;
+            border-radius: 5px;
-}
+        }
+
+        .legend-label {
+            font-weight: bold;
+        }
+
+        #weatherInfo.dark-mode {
+            background-color: var(--dark-color);
+            color: var(--light-color);
+        }
+
+        #legend.dark-mode {
+            background-color: rgba(0, 0, 0, 0.8);
+            color: var(--light-color);
+        }
 
-.legend-label {
-    font-weight: bold;
-}
 
         /* dodałem zapytania medialne, aby dostosować styl strony do różnych szerokości okna przeglądarki */
         @media (max-width: 768px) {
+
+            #legend {
+                position: relative;
+                align-items: left;
+                display: flex;
+                top: auto; /* Reset the top position */
+                bottom: 20px; /* Add some distance from the bottom of the page */
+                justify-content: center;
+                margin-top: 10px;
+            }
+
+            .legend-item {
+                margin-right: 0; /* Remove right margin on smaller screens */
+                margin-bottom: 10px; /* Add some spacing between legend items */
+            }
+        }
             
 
             #darkModeToggle {
@@ -202,7 +231,6 @@
                 transform: none;
                 margin-top: 10px;
             }
-        }
 
         @media (max-width: 600px) {
             body {
@@ -227,6 +255,21 @@
             button {
                 font-size: 14px;
             }
+            #legend {
+                
+                align-items: left;
+                top: auto; /* Reset the top position */
+                bottom: 20px; /* Add some distance from the bottom of the page */
+                margin-top: 10px;
+                flex-direction: column;
+                justify-content: left;
+            }
+
+            .legend-item {
+                margin-right: 0; /* Remove right margin on smaller screens */
+                margin-bottom: 10px; /* Add some spacing between legend items */
+                justify-content: left;
+            }
         }
     </style>
 </head>
@@ -257,6 +300,8 @@
     <div id="loadingMessage" style="display: none;">Loading...</div>
 
     <canvas style="display: none; max-width: 100%;"></canvas>
+
+    <div id="legend" style="display: none;"></div>
     
     <div id="weatherInfo" style="display: none;"></div>
 
@@ -266,122 +311,168 @@
         const weatherInfo = document.getElementById("weatherInfo");
         const canvas = document.querySelector("canvas");
 
-        form.addEventListener("submit", async (event) => {
+    form.addEventListener("submit", async (event) => {
-            event.preventDefault();
+        event.preventDefault();
 
-            // Show loading message and weather info
+        // Show loading message and weather info
-            loadingMessage.style.display = "block";
+        loadingMessage.style.display = "block";
-            weatherInfo.style.display = "block";
+        weatherInfo.style.display = "block";
 
-            // Disable the button to prevent multiple submissions
+        // Disable the button to prevent multiple submissions
-            document.getElementById("checkRipenessBtn").disabled = true;
+        document.getElementById("checkRipenessBtn").disabled = true;
 
-            const fileInput = document.getElementById("uploadInput");
+        const fileInput = document.getElementById("uploadInput");
-            const cropTypeInput = document.getElementById("cropType");
+        const cropTypeInput = document.getElementById("cropType");
-            const locationInput = document.getElementById("location");
+        const locationInput = document.getElementById("location");
 
-            const file = fileInput.files[0];
+        const file = fileInput.files[0];
 
-            const data = new FormData();
+        const data = new FormData();
-            data.append("image_file", file);
+        data.append("image_file", file);
-            data.append("cropType", cropTypeInput.value);
+        data.append("cropType", cropTypeInput.value);
-            data.append("location", locationInput.value);
+        data.append("location", locationInput.value);
 
-            const response = await fetch("/detect", {
+        const response = await fetch("/detect", {
-                method: "post",
+            method: "post",
-                body: data
+            body: data
+        });
+
+        const boxes = await response.json();
+        draw_image_and_boxes(file, boxes);
+
+        // Hide loading message and enable the button after canvas is loaded
+        loadingMessage.style.display = "none";
+        document.getElementById("checkRipenessBtn").disabled = false;
+
+        const location = locationInput.value;
+
+        if (cropTypeInput.value === "external") {
+            updateWeatherInfo(location, cropTypeInput.value);
+        } else {
+            const randomTips = [
+                "water your tomatoes every day.",
+                "keep the temperature between 20-25 degrees Celsius.",
+                "place the tomatoes in sunlight."
+            ];
+
+            const randomTip = randomTips[Math.floor(Math.random() * randomTips.length)];
+            weatherInfo.innerText = "TIP! To maximize your yields " + randomTip;
+        }
+    });
+
+    function draw_image_and_boxes(file, boxes) {
+        const img = new Image()
+        img.src = URL.createObjectURL(file);
+        img.onload = () => {
+            // Show canvas once the image is loaded
+            canvas.style.display = "block";
+            //weatherInfo.innerText = ""; // Clear previous weather info
+
+            const ctx = canvas.getContext("2d");
+            canvas.width = img.width;
+            canvas.height = img.height;
+            ctx.drawImage(img, 0, 0);
+            ctx.lineWidth = 15;
+            ctx.font = "30px serif"; // Zwiększono rozmiar czcionki
+
+            // Draw bounding boxes
+            boxes.forEach(([x1, y1, x2, y2, object_type, prob]) => {
+                
+                switch (object_type) {
+                    case "b_fully_ripened":
+                        object_type = "big fully ripened"; 
+                        break;
+                    case "b_half_ripened":
+                        object_type = "big half ripened"; 
+                        break;
+                    case "b_green":
+                        object_type = "big unripe";
+                        break;
+                    case "l_fully_ripened":
+                        object_type = "small fully ripened"; 
+                        break;
+                    case "l_half_ripened":
+                        object_type = "small half ripened"; 
+                        break;
+                    case "l_green":
+                        object_type = "small unripe"; 
+                        break;
+                    default:
+                        object_type = "#000000";
+                        break;
+                }
+                
+                const label = `${object_type}`;
+                
+                // Przypisz różne kolory do różnych klas
+                let boxColor;
+                switch (object_type) {
+                    case "big fully ripened":
+                        boxColor = "#0077FF"; 
+                        break;
+                    case "big half ripened":
+                        boxColor = "#00FFDE"; 
+                        break;
+                    case "big unripe":
+                        boxColor = "#B2EBF2";
+                        break;
+                    case "small fully ripened":
+                        boxColor = "#C62828"; 
+                        break;
+                    case "small half ripened":
+                        boxColor = "#E57373"; 
+                        break;
+                    case "small unripe":
+                        boxColor = "#FBD943"; 
+                        break;
+                    default:
+                        boxColor = "#000000";
+                        break;
+                }
+
+
+                ctx.strokeStyle = boxColor;
+                ctx.strokeRect(x1, y1, x2 - x1, y2 - y1);
+                ctx.fillStyle = boxColor;
+                const width = ctx.measureText(label).width;
+                ctx.fillRect(x1, y1, width + 10, 25);
+                ctx.fillStyle = "#000000";
+                ctx.fillText(label, x1 + width + 15, y1 + 28); // Przesunięcie etykiety
             });
 
-            const boxes = await response.json();
+            // Draw legend
-            draw_image_and_boxes(file, boxes);
+            drawLegend(ctx);
-
-            // Hide loading message and enable the button after canvas is loaded
-            loadingMessage.style.display = "none";
-            document.getElementById("checkRipenessBtn").disabled = false;
-
-            // Update weather info text
-            updateWeatherInfo(locationInput.value, cropTypeInput.value);
-        });
-
-        function draw_image_and_boxes(file, boxes) {
-    const img = new Image()
-    img.src = URL.createObjectURL(file);
-    img.onload = () => {
-        // Show canvas once the image is loaded
-        canvas.style.display = "block";
-        weatherInfo.innerText = ""; // Clear previous weather info
-
-        const ctx = canvas.getContext("2d");
-        canvas.width = img.width;
-        canvas.height = img.height;
-        ctx.drawImage(img, 0, 0);
-        ctx.lineWidth = 5;
-        ctx.font = "30px serif"; // Zwiększono rozmiar czcionki
-
-        // Draw bounding boxes
-        boxes.forEach(([x1, y1, x2, y2, object_type, prob]) => {
-            const label = `${object_type}`;
             
-            // Przypisz różne kolory do różnych klas
+        };
-            let boxColor;
-            switch (object_type) {
-                case "b_fully_ripened":
-                    boxColor = "#ff0000"; // Czerwony dla b_fully_ripened
-                    break;
-                case "b_half_ripened":
-                    boxColor = "#00ff00"; // Zielony dla b_half_ripened
-                    break;
-                case "b_green":
-                    boxColor = "#0000ff"; // Niebieski dla b_green
-                    break;
-                case "l_fully_ripened":
-                    boxColor = "#ffcc00"; // Pomarańczowy dla l_fully_ripened
-                    break;
-                case "l_half_ripened":
-                    boxColor = "#9900cc"; // Fioletowy dla l_half_ripened
-                    break;
-                case "l_green":
-                    boxColor = "#ff9900"; // Pomarańczowy dla l_green
-                    break;
-                default:
-                    boxColor = "#000000"; // Domyślny kolor dla nieznanych klas
-                    break;
-            }
-
-            ctx.strokeStyle = boxColor;
-            ctx.strokeRect(x1, y1, x2 - x1, y2 - y1);
-            ctx.fillStyle = boxColor;
-            const width = ctx.measureText(label).width;
-            ctx.fillRect(x1, y1, width + 10, 25);
-            ctx.fillStyle = "#000000";
-            ctx.fillText(label, x1 + width + 15, y1 + 28); // Przesunięcie etykiety
-        });
-
-        // Draw legend
-        drawLegend(ctx);
-    }
 }
 
 function drawLegend(ctx) {
+    // Remove existing legend container
+    const existingLegend = document.getElementById("legend");
+    if (existingLegend) {
+        existingLegend.parentNode.removeChild(existingLegend);
+    }
+
     const legendContainer = document.createElement("div");
     legendContainer.id = "legend";
 
     const legendTitle = document.createElement("h3");
-    legendTitle.textContent = "Legend";
+    legendTitle.textContent = "";
 
     legendContainer.appendChild(legendTitle);
 
     const legendItems = [
-        { label: "b_fully_ripened", color: "#ff0000" },
+        { label: "big fully ripened", color: "#0077FF" },
-        { label: "b_half_ripened", color: "#00ff00" },
+        { label: "big half ripened", color: "#00FFDE" },
-        { label: "b_green", color: "#0000ff" },
+        { label: "big unripe", color: "#B2EBF2" },
-        { label: "l_fully_ripened", color: "#ffcc00" },
+        { label: "small fully ripened", color: "#C62828" },
-        { label: "l_half_ripened", color: "#9900cc" },
+        { label: "small half ripened", color: "#E58633" },
-        { label: "l_green", color: "#ff9900" },
+        { label: "small unripe", color: "#FBD943" },
     ];
 
     legendItems.forEach(item => {
         const legendItem = document.createElement("div");
+        
         legendItem.classList.add("legend-item");
 
         const legendColor = document.createElement("div");
@@ -440,14 +531,28 @@ function drawLegend(ctx) {
     </script>  
         <script>
             // Dark mode toggle functionality
-            function toggleDarkMode() {
+    function toggleDarkMode() {
-                const body = document.body;
+        const body = document.body;
-                body.classList.toggle('dark-mode');
+        body.classList.toggle('dark-mode');
-                
+
-                // Change the text content of the toggle icon
+        // Toggle dark mode for weatherInfo and legend
-                const toggleIcon = document.getElementById('darkModeToggle');
+        const weatherInfo = document.getElementById('weatherInfo');
-                toggleIcon.textContent = body.classList.contains('dark-mode') ? 'Light Mode' : 'Dark Mode';
+        const legend = document.getElementById('legend');
-            }
+
+        if (body.classList.contains('dark-mode')) {
+            weatherInfo.classList.add('dark-mode');
+            legend.classList.add('dark-mode');
+            
+        } else {
+            weatherInfo.classList.remove('dark-mode');
+            legend.classList.remove('dark-mode');
+            
+        }
+
+        // Change the text content of the toggle icon
+        const toggleIcon = document.getElementById('darkModeToggle');
+        toggleIcon.textContent = body.classList.contains('dark-mode') ? 'Light Mode' : 'Dark Mode';
+    }
         </script>
 </body>
 </html>