calcs prototype final

main.py

@@ -36,6 +36,8 @@ def get_db():
 def calculate_voltage_drop(voltage, load, length, resistance):
     voltage_drop = load * length * resistance
     final_voltage = voltage - voltage_drop
+    if final_voltage < 0:
+        final_voltage = 0
     return final_voltage
 
 @app.get("/", response_class=HTMLResponse)
@@ -50,8 +52,8 @@ async def calculate(request: MultipleCablesRequest, db: Session = Depends(get_db
         cable = db.query(Cable).filter(Cable.type == cable_request.cable_type).first()
         if not cable:
             raise HTTPException(status_code=400, detail="Invalid cable type")
-        voltage_drop = calculate_voltage_drop(cable_request.voltage, cable_request.load, cable_request.length, cable.resistance)
-        results.append({"voltage_drop": voltage_drop})
+        final_voltage = calculate_voltage_drop(cable_request.voltage, cable_request.load, cable_request.length, cable.resistance)
+        results.append({"voltage_drop": cable_request.voltage - final_voltage})
     return results
 
 @app.get("/edit_cables", response_class=HTMLResponse)

static/app.js

@@ -25,11 +25,11 @@ document.addEventListener('DOMContentLoaded', function() {
         const cableGroups = document.querySelectorAll('.cable-group');
         cableGroups.forEach((group, index) => {
             group.querySelectorAll('input, select').forEach(input => {
-                // Update the id and name attributes to include the index
                 const baseName = input.name.split('[')[0]; // Get the base name without the index
                 input.name = `${baseName}[${index}]`;
                 input.id = `${baseName}-${index}`; // Update the id as well for accessibility
             });
+            group.querySelector('h2').textContent = `Cable ${index + 1}`; // Update the cable group title
         });
     }
 
@@ -67,7 +67,7 @@ document.addEventListener('DOMContentLoaded', function() {
             // Append the new cable group to the container
             cableContainer.appendChild(newCableGroup);
             cableCount++;
-            updateCableGroupInputs();
+            updateCableGroupInputs(); // Update IDs and titles
             updateRemoveButtons();
             checkFormValidity();
         }
@@ -76,13 +76,14 @@ document.addEventListener('DOMContentLoaded', function() {
         }
     });
 
+
     // Remove a cable section
     cableContainer.addEventListener('click', function(event) {
         if (event.target.classList.contains('btn-remove-cable')) {
             if (cableCount > 1) {
                 event.target.closest('.cable-group').remove();
                 cableCount--;
-                updateCableGroupInputs();
+                updateCableGroupInputs(); // Update IDs and titles
                 addCableButton.disabled = false;
                 updateRemoveButtons();
                 checkFormValidity();
@@ -124,7 +125,24 @@ document.addEventListener('DOMContentLoaded', function() {
             // Display the results
             let resultsHtml = '';
             results.forEach((result, index) => {
-                resultsHtml += `<p>Cable ${index + 1}: Voltage Drop: ${result.voltage_drop.toFixed(2)} V</p>`;
+                let remainingVoltage = cablesData[index].voltage - result.voltage_drop;
+
+                // Ensure voltage doesn't go below 0
+                if (remainingVoltage < 0) remainingVoltage = 0;
+
+                // Calculate the percentage drop
+                const voltageDropPercentage = ((cablesData[index].voltage - remainingVoltage) / cablesData[index].voltage) * 100;
+
+                // Determine the color based on the percentage drop
+                let colorClass = '';
+                if (voltageDropPercentage > 10) {
+                    colorClass = 'red-text';
+                } else if (voltageDropPercentage > 5) {
+                    colorClass = 'orange-text';
+                }
+
+                resultsHtml += `<p class="${colorClass}">Cable ${index + 1} Voltage: ${remainingVoltage.toFixed(2)} V</p>`;
+                resultsHtml += `<p class="${colorClass}">Voltage Drop: ${voltageDropPercentage.toFixed(2)}%</p>`;
             });
             document.getElementById('result').innerHTML = resultsHtml;
         } else {
@@ -132,8 +150,6 @@ document.addEventListener('DOMContentLoaded', function() {
         }
     });
 
-
-
     // Helper function to calculate voltage drop
     function calculateVoltageDrop(voltage, current, length, resistance) {
         return current * length * resistance;

static/cg.js

@@ -27,16 +27,14 @@ document.addEventListener('DOMContentLoaded', function() {
             event.preventDefault();  // Prevent the default form submission
 
             const formData = new FormData(cgForm);
-            const voltage = parseFloat(formData.get('voltage')) || null;
-            const cableLength = parseFloat(formData.get('cable_length')) || null;
+            
+            // Get the selected LED type, which includes both voltage and power
+            const [voltage, ledPower] = formData.get('led_type').split(',').map(Number);
+            const cableLength = parseFloat(formData.get('cable_length')) || 3;
             const awg = formData.get('awg') || null;
             const fixtureHeight = parseFloat(formData.get('fixture_height')) || null;
             const levels = parseInt(formData.get('levels')) || null;
             const ledsPerLevel = parseInt(formData.get('leds_per_level')) || 6;
-            const ledPower = parseFloat(formData.get('led_power')) || null;
-
-            const totalLEDs = levels && ledsPerLevel ? levels * ledsPerLevel : null;
-            const levelHeight = fixtureHeight && levels ? fixtureHeight / levels : null;
 
             if (awg && voltage && cableLength) {
                 try {
@@ -45,18 +43,58 @@ document.addEventListener('DOMContentLoaded', function() {
                         const { resistance } = await response.json();
 
                         let resultsHtml = '';
-                        if (totalLEDs !== null && levelHeight !== null && ledPower !== null) {
+                        const totalLEDs = levels && ledsPerLevel ? levels * ledsPerLevel : null;
+                        const levelHeight = fixtureHeight && levels ? fixtureHeight / levels : null;
+
+                        if (totalLEDs !== null && levelHeight !== null) {
                             const totalPower = totalLEDs * ledPower;
                             const current = totalPower / voltage;
                             let remainingVoltage = voltage;
+                            const initialVoltage = voltage; // Store the initial voltage for percentage calculation
+                            let finalVoltage = voltage; // Track final voltage for drop percentage
+
+                            // Total LEDs
+                            resultsHtml += `<p>Total LEDs: ${totalLEDs} pcs</p>`;
+                            resultsHtml += `<p>&nbsp;</p>`;  // non-breaking space,
 
-                            resultsHtml += `<p>Total LEDs: ${totalLEDs}</p>`;
+                            // Calculate and display voltage for each level
                             for (let i = 1; i <= levels; i++) {
                                 const length = i * levelHeight + cableLength;
                                 const voltageDrop = calculateVoltageDrop(current, length, resistance);
                                 remainingVoltage -= voltageDrop;
-                                resultsHtml += `<p>Level ${i}: Final Voltage: ${remainingVoltage.toFixed(2)} V</p>`;
+
+                                // Ensure voltage doesn't go below 0
+                                if (remainingVoltage < 0) remainingVoltage = 0;
+
+                                // Determine the color based on the voltage drop percentage
+                                let colorClass = '';
+                                const currentDropPercentage = ((initialVoltage - remainingVoltage) / initialVoltage) * 100;
+                                if (currentDropPercentage > 10) {
+                                    colorClass = 'red-text';
+                                } else if (currentDropPercentage > 5) {
+                                    colorClass = 'orange-text';
+                                }
+
+                                resultsHtml += `<p class="${colorClass}">Level ${i} Voltage: ${remainingVoltage.toFixed(2)} V</p>`;
+                                finalVoltage = remainingVoltage; // Update final voltage after each level
+                            }
+
+                            // Calculate the percentage drop from initial voltage to final voltage
+
+                            const voltageDropPercentage = ((initialVoltage - finalVoltage) / initialVoltage) * 100;
+                            
+                            // print the voltage drop percentage:
+                            //console.log(`Voltage Drop Percentage: ${voltageDropPercentage.toFixed(2)}%`);
+
+                            let colorClass = '';
+
+                            if (voltageDropPercentage > 10) {
+                                colorClass = 'red-text';
+                            } else if (voltageDropPercentage > 5) {
+                                colorClass = 'orange-text';
                             }
+                            resultsHtml += `<p>&nbsp;</p>`;             
+                            resultsHtml += `<p class="${colorClass}">Voltage Drop: ${voltageDropPercentage.toFixed(2)}%</p>`;
                         } else {
                             resultsHtml = `<p>Partial data provided. Calculation incomplete.</p>`;
                         }
@@ -70,7 +108,7 @@ document.addEventListener('DOMContentLoaded', function() {
                     document.getElementById('result').innerHTML = `<p>Error: An unexpected error occurred.</p>`;
                 }
             } else {
-                document.getElementById('result').innerHTML = `<p>Please provide at least Voltage, Cable Length, and AWG to perform calculations.</p>`;
+                document.getElementById('result').innerHTML = `<p>Please provide at least the Number of Levels.</p>`;
             }
         });
     }

static/styles.css

@@ -50,7 +50,6 @@ h1 {
     gap: 10px; /* Spacing between buttons */
 }
 
-
 .calculator-main {
     flex: 1;
     display: flex;
@@ -61,15 +60,16 @@ h1 {
     border-radius: 8px;
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
     box-sizing: border-box;
+    width: 33%;
 }
 
 #cable-container {
     display: flex;
-    gap: 20px;
+    gap: 10px; /* Reduce gap between tiles */
     justify-content: center;
     width: 100%;
     margin-bottom: 20px;
-    flex-wrap: wrap;  /* Allow wrapping for better responsiveness */
+    flex-wrap: nowrap;  /* No wrapping */
 }
 
 .cable-group {
@@ -79,9 +79,9 @@ h1 {
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
     box-sizing: border-box;
     position: relative;
-    flex: auto; /* Let the items grow and shrink based on space */
-    max-width: 800px; /* Optional maximum width */
-    min-width: 500px; /* Optional minimum width */
+    flex: 1 1 40%; /* Each cable group takes up 30% of the container */
+    min-width: 280px; /* Optional minimum width */
+    max-width: 40%; /* Ensure the maximum width is constrained */
 }
 
 .cable-group h2 {
@@ -168,7 +168,6 @@ h1 {
     cursor: pointer;
 }
 
-
 .btn-cg-calculate {
     background-color: #6c757d; /* Disabled state */
     cursor: not-allowed;
@@ -209,7 +208,6 @@ h1 {
     background-color: #0056b3;
 }
 
-
 .action-buttons {
     display: flex;
     justify-content: center;
@@ -218,19 +216,6 @@ h1 {
     margin-bottom: 20px;
 }
 
-.result-display {
-    margin-top: 20px;
-    font-size: 20px;
-    color: #28a745;
-    text-align: center;
-    padding: 20px;
-    border-top: 2px solid #dee2e6;
-    width: 50%;
-    background-color: white;
-    border-radius: 8px;
-    box-sizing: border-box;
-}
-
 .btn-back {
     background-color: #007bff;
     color: white;
@@ -321,3 +306,55 @@ h1 {
     margin-bottom: 20px;
     color: #343a40;
 }
+
+.result-display {
+    width: 100%; /* Fixed width to ensure consistency */
+    font-size: 20px;
+    color: #28a745;
+    text-align: center;
+    background-color: white;
+    min-height: 300px; /* Ensures the container has a minimum height */
+}
+
+
+/* CG */
+.result-visual-container {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    width: 100%;
+    margin-top: 20px;
+    gap: 20px;
+}
+
+.result-display-cg {
+
+    margin-top: 8px;
+    width: 100%; /* Fixed width to ensure consistency */
+    font-size: 20px;
+    color: #28a745;
+    text-align: right;
+    background-color: white;
+    min-height: 100%; /* Ensures the container has a minimum height */
+}
+
+.fixture-visual {
+    width: 100%; /* Fixed width to ensure consistency */
+    text-align: left;
+    margin-right: 20px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.fixture-visual img {
+    width: 75%;
+}
+
+.red-text {
+    color: red;
+}
+
+.orange-text {
+    color: orange;
+}

templates/cg.html

@@ -1,4 +1,3 @@
-<!-- cg.html -->
 <!DOCTYPE html>
 <html lang="en">
 <head>
@@ -14,12 +13,23 @@
     <main class="calculator-main">
         <form id="cg-calculator-form">
             <div class="form-row">
-                <label for="voltage">Voltage (V):</label>
-                <input type="number" id="voltage" name="voltage">
+                <label for="led_type">LED Type:</label>
+                <select id="led_type" name="led_type">
+                    <option value="12,1">DMX (12V/1W)</option>
+                    <option value="24,2" selected>Static (24V/2W)</option>
+                </select>
+            </div>
+            <div class="form-row">
+                <label for="levels">Number of Levels:</label>
+                <input type="number" id="levels" name="levels" required>
+            </div>
+            <div class="form-row">
+                <label for="fixture_height">Fixture Height (m):</label>
+                <input type="number" id="fixture_height" name="fixture_height">
             </div>
             <div class="form-row">
                 <label for="cable_length">Input Cable Length (m):</label>
-                <input type="number" id="cable_length" name="cable_length">
+                <input type="number" id="cable_length" name="cable_length" value="3">
             </div>
             <div class="form-row">
                 <label for="awg">Cable AWG:</label>
@@ -29,29 +39,22 @@
                     {% endfor %}
                 </select>
             </div>
-            <div class="form-row">
-                <label for="fixture_height">Fixture Height (m):</label>
-                <input type="number" id="fixture_height" name="fixture_height">
-            </div>
-            <div class="form-row">
-                <label for="levels">Number of Levels:</label>
-                <input type="number" id="levels" name="levels">
-            </div>
             <div class="form-row">
                 <label for="leds_per_level">LEDs per Level:</label>
                 <input type="number" id="leds_per_level" name="leds_per_level" value="6">
             </div>
-            <div class="form-row">
-                <label for="led_power">LED Power (W):</label>
-                <input type="number" id="led_power" name="led_power">
-            </div>
 
             <div class="action-buttons">
                 <button type="submit" class="btn btn-cg-calculate">Calculate</button>
             </div>
         </form>
 
-        <div id="result" class="result-display"></div>
+        <div class="result-visual-container">
+            <div id="result" class="result-display-cg"></div>
+            <div class="fixture-visual">
+                <img src="/static/cg.png" alt="Fixture Visual" id="fixture-image">
+            </div>
+        </div>
 
         <a href="/" class="btn btn-back">Back to Calculator</a>
     </main>

templates/index.html

@@ -37,7 +37,7 @@
                         </div>
 
                         <div class="form-row">
-                            <label for="voltage-0">Voltage:</label>
+                            <label for="voltage-0">Voltage (V):</label>
                             <input type="number" id="voltage-0" name="voltage[0]" required>
                         </div>