Van Conversion Electrical System Diagrammer

Van Electrical System Diagrammer (12V)

Load Calculation & Component Schematic

Total Load: 0 Ah/Day

12V System Block Diagram

Calculated Battery Size: 0 Ah | Solar Required: 0 W

Appliance Load Summary

Appliance Wattage (W) Hours/Day Load (Ah/Day)
TOTAL DAILY AH LOAD

Disclaimer: This schematic is a planning guide. Actual wiring must be sized and fused according to NEC standards.

Generated by Van Electrical System Diagrammer

Primary Component Sizing

Input the core specs for your $12\text{V}$ system components.

Lithium users: typically $100\text{Ah}$ to $400\text{Ah}$.
Required for AC appliances (e.g., blender, laptop charger).
Total wattage from all rooftop panels.
Charge current from the van's engine/alternator.

Appliance Energy Consumption

Calculations use a $12\text{V}$ system. $\text{Ah}/\text{Day} = (\text{W} \times \text{Hours}) / 12\text{V}$.

Current Appliance List

List is empty.

"; return; } vecData.appliances.forEach(app => { const row = document.createElement('div'); row.className = 'vec-app-row'; row.innerHTML = `
${app.name} (${app.watts}W, ${app.hours}hrs)
${app.load.toFixed(1)} Ah/Day
`; outputs.applianceEditor.appendChild(row); }); } // --- 6. DIAGRAM LOGIC (CSS Positioning) --- function renderDiagram() { outputs.diagramContainer.innerHTML = ""; const battAh = vecData.specs.battAh; const invW = vecData.specs.invW; const solarW = vecData.specs.solarW; const dcdcAmps = vecData.specs.dcdcAmps; // Helper to create wire lines const createWire = (cls, top, left, size, isVertical = false) => { const w = document.createElement('div'); w.className = `wire ${cls} ${isVertical ? 'v' : 'h'}`; w.style.top = `${top}px`; w.style.left = `${left}px`; if (isVertical) { w.style.height = `${size}px`; w.style.width = '2px'; } else { w.style.width = `${size}px`; w.style.height = '2px'; } outputs.diagramContainer.appendChild(w); }; // Helper to create component boxes const createComponent = (cls, top, left, label) => { const box = document.createElement('div'); box.className = `comp-box ${cls}`; box.style.top = `${top}px`; box.style.left = `${left}px`; box.innerHTML = label; outputs.diagramContainer.appendChild(box); }; // --- Components --- createComponent('solar', 10, 200, `SOLAR ARRAY
${solarW} W`); createComponent('dcdc', 10, 50, `DC/DC CHARGER
${dcdcAmps} A`); createComponent('batt', 130, 150, `HOUSE BATTERY BANK
${battAh} Ah, 12V`); createComponent('fuse', 230, 250, `FUSE BLOCK
(DC Loads)`); createComponent('inv', 230, 50, `INVERTER
${invW} W (AC)`); createComponent('app_dc', 130, 450, `DC APPLIANCES
(Fan, Lights)`); createComponent('app_ac', 230, 450, `AC APPLIANCES
(Laptop, Blender)`); // --- Wiring (Simplified Block Diagram) --- // 1. Solar to Battery via Controller (Assume Controller is part of Solar line) createWire('h red', 45, 200, 120); createWire('v red', 45, 320, 105); createWire('h red thick', 150, 290, 30); // Battery input // 2. DC/DC to Battery createWire('h red', 45, 100, 50); createWire('v red', 45, 100, 105); createWire('h red thick', 150, 240, -100); // Connects to battery bank // 3. Battery to Fuse Block (DC Loads) & Inverter (AC Loads) createWire('v blue thick', 180, 240, 50); // To Busbar/Shunt createWire('h blue thick', 255, 200, 50); // To Fuse Block createWire('h blue thick', 255, 150, 50); // To Inverter // 4. Fuse Block to DC Appliances createWire('h red', 255, 400, 50); createWire('v red', 150, 450, 105); // 5. Inverter to AC Appliances createWire('h blue', 255, 150, 300); // AC Line } // --- 7. EVENT LISTENERS & ACTIONS --- function attachListeners() { // Spec Inputs const specInputs = Object.values(inputs).filter(i => !i.id.includes('app-')); specInputs.forEach(inp => inp.addEventListener('input', renderAll)); // Add Appliance document.getElementById('btn-add-app').addEventListener('click', addAppliance); } function addAppliance() { const name = inputs.applianceName.value.trim(); const watts = parseFloat(inputs.applianceW.value) || 0; const hours = parseFloat(inputs.applianceH.value) || 0; if (!name || watts <= 0 || hours <= 0) { alert("Please enter a name, valid wattage, and usage hours."); return; } const newApp = { id: Date.now(), name: name, watts: watts, hours: hours }; vecData.appliances.push(newApp); // Clear inputs inputs.applianceName.value = ""; inputs.applianceW.value = ""; inputs.applianceH.value = ""; renderAll(); } window.removeAppliance = function(id) { if(confirm("Remove this appliance load item?")) { vecData.appliances = vecData.appliances.filter(a => a.id !== id); renderAll(); } }; // --- 8. TAB NAVIGATION --- window.vecSwitchTab = function(tabId) { document.querySelectorAll('.vec-tab-pane').forEach(p => p.classList.remove('active')); document.querySelectorAll('.vec-tab-btn').forEach(b => b.classList.remove('active')); document.getElementById(tabId).classList.add('active'); document.querySelector(`.vec-tab-btn[data-tab="${tabId}"]`).classList.add('active'); document.getElementById('van-elec-tool').scrollIntoView({behavior: 'smooth'}); }; document.querySelectorAll('.vec-tab-btn').forEach(btn => { btn.addEventListener('click', function() { vecSwitchTab(this.dataset.tab); }); }); // --- 9. PDF EXPORT --- const btnDown = document.getElementById('vec-download-btn'); if(btnDown) { btnDown.addEventListener('click', function() { renderAll(); const element = document.getElementById('vec-render-area'); const opt = { margin: 0.4, filename: `Van_Electrical_Schematic.pdf`, image: { type: 'jpeg', quality: 0.98 }, html2canvas: { scale: 2, useCORS: true }, jsPDF: { unit: 'in', format: 'letter', orientation: 'portrait' } }; const origText = btnDown.innerText; btnDown.innerText = "Processing Schematic..."; html2pdf().set(opt).from(element).save().then(() => { btnDown.innerText = origText; }); }); } // Start init(); });
Scroll to Top