Aansluitschema

Met deze configurator stel je eenvoudig het juiste aansluitschema samen voor jouw tracker installatie. Kies eerst de gewenste voedingsbron, bepaal vervolgens of de tracker op contact of op beweging moet werken, en selecteer daarna eventuele accessoires zoals bestuurdersidentificatie, een privéknop of een relais.

#ic-configurator * { margin: 0; padding: 0; box-sizing: border-box; } #ic-configurator { font-family: ‘Segoe UI’, Tahoma, Geneva, Verdana, sans-serif; max-width: 1200px; margin: 0 auto; } #ic-configurator .ic-config-panel { position: relative; } #ic-configurator .ic-options-panel { width: 340px; } #ic-configurator .ic-section-title { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: #666; margin-bottom: 12px; padding-left: 4px; } #ic-configurator .ic-power-section { background: white; border-radius: 12px; padding: 20px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.08); } #ic-configurator .ic-power-options { display: flex; gap: 8px; } #ic-configurator .ic-power-option { flex: 1; position: relative; } #ic-configurator .ic-power-option input[type=”radio”] { display: none; } #ic-configurator .ic-power-option label { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 12px; border: 2px solid #e0e0e0; border-radius: 10px; cursor: pointer; transition: all 0.2s; background: #fafafa; } #ic-configurator .ic-power-option label:hover { border-color: #aaa; } #ic-configurator .ic-power-option input[type=”radio”]:checked + label { border-color: #2563eb; background: #eff6ff; } #ic-configurator .ic-power-option label img { width: 64px; height: 64px; object-fit: contain; } #ic-configurator .ic-power-option label span { font-size: 14px; font-weight: 600; color: #333; } #ic-configurator .ic-obd-warning { display: none; margin-top: 12px; padding: 10px 14px; background: #fff7ed; border: 1px solid #fed7aa; border-radius: 8px; font-size: 13px; color: #9a3412; line-height: 1.4; } #ic-configurator .ic-obd-warning.ic-visible { display: block; } #ic-configurator .ic-ignition-section { background: white; border-radius: 12px; padding: 20px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.08); transition: opacity 0.3s; } #ic-configurator .ic-ignition-section.ic-disabled { opacity: 0.4; pointer-events: none; } #ic-configurator .ic-accessories-section { background: white; border-radius: 12px; padding: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.08); transition: opacity 0.3s; } #ic-configurator .ic-accessories-section.ic-disabled { opacity: 0.4; pointer-events: none; } #ic-configurator .ic-sub-options { margin-left: 34px; padding-left: 12px; border-left: 2px solid #e0e0e0; max-height: 0; overflow: hidden; transition: max-height 0.3s ease; } #ic-configurator .ic-sub-options.ic-visible { max-height: 300px; } #ic-configurator .ic-accessory-item { display: flex; align-items: center; gap: 12px; padding: 10px 8px; border-radius: 8px; transition: background 0.15s; } #ic-configurator .ic-accessory-item:hover { background: #f5f5f5; } #ic-configurator .ic-accessory-item + .ic-accessory-item { border-top: 1px solid #f0f0f0; } #ic-configurator .ic-accessory-item input[type=”checkbox”] { display: none; } #ic-configurator .ic-custom-checkbox { width: 22px; height: 22px; border: 2px solid #ccc; border-radius: 6px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all 0.15s; cursor: pointer; } #ic-configurator .ic-custom-checkbox svg { width: 14px; height: 14px; opacity: 0; transition: opacity 0.15s; } #ic-configurator .ic-accessory-item input[type=”checkbox”]:checked ~ .ic-custom-checkbox { background: #2563eb; border-color: #2563eb; } #ic-configurator .ic-accessory-item input[type=”checkbox”]:checked ~ .ic-custom-checkbox svg { opacity: 1; } #ic-configurator .ic-accessory-item img { width: 44px; height: 44px; object-fit: contain; } #ic-configurator .ic-accessory-label { font-size: 15px; font-weight: 500; color: #333; cursor: pointer; flex: 1; } #ic-configurator .ic-preview-panel { background: white; border-radius: 12px; padding: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.08); } #ic-configurator .ic-preview-wrapper { position: absolute; top: 0; right: 0; left: 372px; } #ic-configurator .ic-preview-area { position: relative; height: 0; padding-bottom: 100%; background: #fafafa; border-radius: 8px; border: 1px solid #eee; overflow: hidden; } #ic-configurator .ic-preview-area img { position: absolute; top: 5%; left: 5%; width: 85%; height: 85%; object-fit: contain; transition: opacity 0.3s ease; } #ic-configurator .ic-preview-area img.ic-hidden { opacity: 0; } #ic-configurator .ic-preview-area img.ic-visible { opacity: 1; } #ic-configurator .ic-preview-area img[data-layer=”connector”] { z-index: 10; } #ic-configurator .ic-preview-area img[data-layer=”power”] { z-index: 5; } #ic-configurator .ic-preview-area img[data-layer=”accessory”] { z-index: 8; } #ic-configurator .ic-preview-area img[data-layer=”ignition”] { z-index: 9; } @media (max-width: 768px) { #ic-configurator .ic-config-panel { flex-direction: column-reverse; } #ic-configurator .ic-options-panel { flex: none; width: 100%; } #ic-configurator .ic-preview-wrapper { position: sticky; top: 0; z-index: 100; margin-left: -12px; margin-right: -12px; width: calc(100% + 24px); } #ic-configurator .ic-preview-wrapper .ic-section-title { display: none; } #ic-configurator .ic-preview-panel { border-radius: 0; padding: 8px; } #ic-configurator .ic-preview-area { min-height: 70vw; } #ic-configurator .ic-options-panel .ic-section-title { display: none; } #ic-configurator { padding: 0 12px 24px; } #ic-configurator .ic-power-option label img { width: 48px; height: 48px; } #ic-configurator .ic-accessory-item img { width: 36px; height: 36px; } } (function() { var root = document.getElementById(‘ic-configurator’); var powerRadios = root.querySelectorAll(‘input[name=”ic-power”]’); var ignitionRadios = root.querySelectorAll(‘input[name=”ic-ignition”]’); var ignitionSection = document.getElementById(‘ic-ignition-section’); var accessoriesSection = document.getElementById(‘ic-accessories-section’); var obdWarning = document.getElementById(‘ic-obd-warning’); var driverIdCheckbox = document.getElementById(‘ic-opt-driverid’); var driverIdOptions = document.getElementById(‘ic-driverid-options’); var startonderbrekerCheckbox = document.getElementById(‘ic-opt-startonderbreker’); var buzzerCheckbox = document.getElementById(‘ic-opt-buzzer’); var ledCheckbox = document.getElementById(‘ic-opt-led’); var buttonCheckbox = document.getElementById(‘ic-opt-button’); var relaisCheckbox = document.getElementById(‘ic-opt-relais’); var relaisOptions = document.getElementById(‘ic-relais-options’); var startercutoutCheckbox = document.getElementById(‘ic-opt-startercutout’); var relaisItem = relaisCheckbox.closest(‘.ic-accessory-item’); var driverIdItem = driverIdCheckbox.closest(‘.ic-accessory-item’); function update() { var isObd = root.querySelector(‘input[name=”ic-power”]:checked’).value === ‘obd2’; var isContact = root.querySelector(‘input[name=”ic-ignition”]:checked’).value === ‘contact’; // Power images document.getElementById(‘ic-img-battery’).className = isObd ? ‘ic-hidden’ : ‘ic-visible’; document.getElementById(‘ic-img-obd2’).className = isObd ? ‘ic-visible’ : ‘ic-hidden’; // Ignition image document.getElementById(‘ic-img-ignition’).className = (!isObd && isContact) ? ‘ic-visible’ : ‘ic-hidden’; if (isObd) { ignitionSection.classList.add(‘ic-disabled’); root.querySelector(‘#ic-ignition-beweging’).checked = true; accessoriesSection.classList.add(‘ic-disabled’); obdWarning.classList.add(‘ic-visible’); driverIdCheckbox.checked = false; startonderbrekerCheckbox.checked = false; buzzerCheckbox.checked = false; ledCheckbox.checked = false; buttonCheckbox.checked = false; relaisCheckbox.checked = false; startercutoutCheckbox.checked = false; } else if (!isContact) { ignitionSection.classList.remove(‘ic-disabled’); accessoriesSection.classList.add(‘ic-disabled’); obdWarning.classList.remove(‘ic-visible’); driverIdCheckbox.checked = false; startonderbrekerCheckbox.checked = false; buzzerCheckbox.checked = false; ledCheckbox.checked = false; buttonCheckbox.checked = false; relaisCheckbox.checked = false; startercutoutCheckbox.checked = false; } else { ignitionSection.classList.remove(‘ic-disabled’); accessoriesSection.classList.remove(‘ic-disabled’); obdWarning.classList.remove(‘ic-visible’); } // Bestuurdersidentificatie sub-opties if (driverIdCheckbox.checked) { driverIdOptions.classList.add(‘ic-visible’); relaisCheckbox.checked = false; startercutoutCheckbox.checked = false; relaisOptions.classList.remove(‘ic-visible’); relaisItem.style.opacity = ‘0.4’; relaisItem.style.pointerEvents = ‘none’; } else { driverIdOptions.classList.remove(‘ic-visible’); startonderbrekerCheckbox.checked = false; buzzerCheckbox.checked = false; ledCheckbox.checked = false; relaisItem.style.opacity = ”; relaisItem.style.pointerEvents = ”; } // Relais standalone + sub-opties if (relaisCheckbox.checked) { relaisOptions.classList.add(‘ic-visible’); driverIdCheckbox.checked = false; driverIdOptions.classList.remove(‘ic-visible’); startonderbrekerCheckbox.checked = false; buzzerCheckbox.checked = false; driverIdItem.style.opacity = ‘0.4’; driverIdItem.style.pointerEvents = ‘none’; } else { relaisOptions.classList.remove(‘ic-visible’); startercutoutCheckbox.checked = false; if (!driverIdCheckbox.checked) { driverIdItem.style.opacity = ”; driverIdItem.style.pointerEvents = ”; } } // Preview images var isDriverId = driverIdCheckbox.checked; document.getElementById(‘ic-img-ibutton’).className = isDriverId ? ‘ic-visible’ : ‘ic-hidden’; document.getElementById(‘ic-img-relais’).className = (isDriverId && startonderbrekerCheckbox.checked) ? ‘ic-visible’ : ‘ic-hidden’; document.getElementById(‘ic-img-relais2’).className = relaisCheckbox.checked ? ‘ic-visible’ : ‘ic-hidden’; document.getElementById(‘ic-img-startercutout’).className = startercutoutCheckbox.checked ? ‘ic-visible’ : ‘ic-hidden’; document.getElementById(‘ic-img-buzzer’).className = (isDriverId && buzzerCheckbox.checked) ? ‘ic-visible’ : ‘ic-hidden’; document.getElementById(‘ic-img-led’).className = (isDriverId && ledCheckbox.checked) ? ‘ic-visible’ : ‘ic-hidden’; document.getElementById(‘ic-img-button’).className = buttonCheckbox.checked ? ‘ic-visible’ : ‘ic-hidden’; } powerRadios.forEach(function(r) { r.addEventListener(‘change’, update); }); ignitionRadios.forEach(function(r) { r.addEventListener(‘change’, update); }); [driverIdCheckbox, startonderbrekerCheckbox, buzzerCheckbox, ledCheckbox, buttonCheckbox, relaisCheckbox, startercutoutCheckbox].forEach(function(cb) { cb.addEventListener(‘change’, update); }); })();