TOUCHLESS - Actuator Kit [for doors with NO LOCK]

.red { color: rgb(255,0,0); } #green { color: #32cd30; } #blue { color: rgb(0,0,255); } .grey { color: #D3D3D3; } body { font-family: 'Helvetica', 'Arial', sans-serif; /* Choose your preferred font-family */ font-size: 16px; /* Choose your preferred font-size */ } p, li { font-size: 0.9rem; /* Adjust the font-size as needed */ line-height: 1.5; /* Set line-height for better readability */ margin-bottom: 10px; /* Add some spacing between paragraphs and list items */ } strong { font-weight: bold; /* Ensure strong text is bold */ } h1 { font-size: 2rem; font-weight: bold; margin-top: 0; } code { font-family: monospace; font-size: 1.2rem; background-color: #ebebee; padding: 0.2rem 0.4rem; border-radius: 0.25rem; } .selections { display: inline-block; } .topOptions { display: flex; justify-content: left; align-items: center; margin-bottom: 1rem; } .separator { margin: 0 1em; border-left: 3px solid #e2e2e2; height: 135px; } .selection-radio, .selection-radio .icons { display: flex; justify-content: left; align-items: left; } .selection-radio label, .selection-radio .icons label { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; text-align: center; font-size: 0.9em; min-height: 125px; border-radius: 0.2rem; transition: background-color 0.2s ease-in-out; } .selection-radio label { height: 150px !important; width: 185px !important; padding: 0.5rem 1rem; margin-right: 0.5rem; background-color: #f3f3f3; } .selection-radio label:hover { cursor: pointer; background-color: #d9d9d9; } .selection-radio input, .selection-radio .icons input { display: none; } .selection-radio .icons label { width: 163px !important; height: 110px; } .selectedValue { border-left: 4px solid rgb(166, 166, 166); background-color: #d9d9d9 !important; } .variant-sku { text-transform: uppercase; font-weight: bold; font-size: 1em; } .variant-sku span { color: #ff0000; } .SKU-change { color: #fff !important; width: 270px; background-color: #ff0000; animation: fadeOut 0.5s ease-in-out; } @keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } .selection-radio label img, .selection-radio .icons label img.selection-radio { width: 75px; height: auto; } .selection-radio label img.selection-radio { margin: 0.5em 0 0.75em 0; } .title { margin-top: 2em; } h4.title { margin: 1.5em 0 1em 0 !important; } .selection-radio .icons label img.selection-radio { margin-bottom: 0.85em; } .selection-radio label p, .selection-radio .icons label p { margin: 0; } .selection-radio .icons img.selection-radio { margin: 0; padding: 0; transition: all 0.1s ease-in-out; } .image-container { position: relative; display: inline-block; } .color-block { width: 20px; height: 20px; background-color: #9a2d2d; position: absolute; top: 0; right: 0; } img.lock-icon { width: 20px; height: 20px; position: absolute; margin-top: 8px; top: 0; right: 0; } .idle-button { background-color: rgb(11, 87, 238); } .activated-button { background-color: rgb(18, 235, 18); } .locked-button { background-color: rgb(240, 28, 28) !important; } .hidden { display: none !important; } #lockBtn { margin: 1em 0 2.5em 0; font-size: 0.85em; padding: 0.5em; width: 125px; border-radius: 0.2em; border: none; color: #fff; background-color: rgb(219, 22, 22); cursor: pointer; transition: background-color 0.125s ease-in-out; } #lockBtn:hover { background-color: rgb(244, 52, 52); } #lockBtn:active { background-color: rgb(203, 14, 14); } .color-block { position: absolute; top: 0; right: 0; margin: 0; width: 18px; height: 18px; background-color: rgb(37, 37, 37); z-index: 1; } img.lock-icon { width: 18px !important; height: auto; position: absolute; top: 0; right: 0; margin: 0; z-index: 2; } .device-sizing { transform: scale(1); transform-origin: left; } @media (max-width: 500px) { .device-sizing { transform: scale(0.85); } } @media (min-width: 501px) and (max-width: 750px) { .device-sizing { transform: scale(0.85); } } @media (min-width: 751px) and (max-width: 990px) { .device-sizing { transform: scale(0.85); } } Activation Standard Kit Bottom Activation Icon Selection Wheelchair Hand Active Wheelchair Locked-state Documentation Wiring Diagram Introducing our latest innovation, the touchless IR actuator kit [BAA10-XXX-S-BAC01-KIT], specifically designed for doors with NO LOCK. For added convenience, optional bottom activation is also available upon request. This advanced kit incorporates cutting-edge infrared motion sensor technology for touchless activation. Featuring a 2-wire BUS interface control and an optional audible signal. This touchless IR actuator kit combines seamless integration, convenience, and elegance. Its sleek design, complemented by the illuminated icon, adds a captivating touch of sophistication to interior doors, making it an outstanding choice for a wide range of settings. Whether it's hospitals, hotels, high-tech facilities, or any environment that values cleanliness and convenience, this advanced kit presents the perfect solution for upgrading and enhancing door functionality. Features: Touchless IR activation with infrared motion sensor (front range adjustable up to 12") Optional Bottom Activation [BAA10-XXX-B-BAC01-KIT] (no range adjustment required) Slim design Easy retrofit, NO additional wires required Illuminated exchangeable icons BLUE when door operator is available GREEN when actuator is sending activation signal Audible signal on activation [Option ON/OFF] 2-wire BUS interface control Power consumption 2.4W [max] Operating temperature range -40 to 85 °C Surface mount Interior use only (exterior actuator coming soon) 2 Year limited manufacturer's warranty Kit Includes: 2x BAA10 Touchless IR actuators with NO LOCK icon and infrared motion sensor 1x BAC01 BUS interface control (for door without lock that is controlled by any of the following: door operator, access system, timer, FOB, card access, etc.) Installation: Fits on a 2X4, 4X4 electrical box or can be installed directly on the wall surface Enclosure with mounting bracket and hardware Dimensions: 6.25 x 5.25 x 1 inches (157 x 133 x 25 mm) const products = [ { regular: "BAA10-XXX-S-BAC02(LL)-KIT", bottom: "BAA10-XXX-B-BAC02(LL)-KIT", graphics: { wheelchair: "002", hand: "012", active_wheelchair: "004" } }, { regular: "BAA10-XXX-S-BAC02(L)-KIT", bottom: "BAA10-XXX-B-BAC02(L)-KIT", graphics: { wheelchair: "002", hand: "012", active_wheelchair: "004" } }, { regular: "BAA10-XXX-S-BAC01-KIT", bottom: "BAA10-XXX-B-BAC01-KIT", graphics: { wheelchair: "001", hand: "011", active_wheelchair: "003" } } ]; // holds the SKU info let activation = ""; let icon = ""; // default product let product = products[2]; let SKUtag = document.querySelector('.variant-sku'); function buildSKU(activation) { let btn = activation; let icon_num = icon; btn = btn.replace("XXX", icon_num); SKUtag.innerHTML = btn; SKUtag.classList.add("SKU-change"); setTimeout(() => { SKUtag.classList.remove("SKU-change"); }, 500); } SKUtag.style.color = "red"; // ------------------------------ // Bottom Activation radio buttons const activationRadio = document.querySelectorAll('input[name="kit"]'); const activationLabels = Array.from(activationRadio, radioButton => radioButton.parentElement); // set initial state const checkedRadioButton = document.querySelector('input[name="kit"]:checked'); if (checkedRadioButton) { const checkedIndex = Array.from(activationRadio).indexOf(checkedRadioButton); activationLabels[checkedIndex].classList.add("selectedValue"); activation = product.regular; if (product === products[1]) { icon = `${products[2].graphics.wheelchair}/${product.graphics.wheelchair}`; } else { icon = product.graphics.wheelchair; } buildSKU(activation, icon); } activationRadio.forEach((radioButton, index) => { radioButton.addEventListener('change', e => { // remove selector from all labels activationLabels.forEach(label => { label.classList.remove("selectedValue"); // remove product.regular or product.bottom from itemArr }); // apply selector to the one that was clicked activationLabels[index].classList.add("selectedValue"); // add product.regular or product.bottom to itemArr if (index === 0) { activation = product.regular; } else if (index === 1) { activation = product.bottom; } buildSKU(activation, icon); }); }); // ------------------------------ // Bottom Activation radio buttons const graphicRadio = document.querySelectorAll('input[name="graphics"]'); const graphicLabels = Array.from(graphicRadio, radioButton => radioButton.parentElement); // set initial state const checkedGraphic = document.querySelector('input[name="graphics"]:checked'); if (checkedGraphic) { const checkedIndex = Array.from(graphicRadio).indexOf(checkedGraphic); graphicLabels[checkedIndex].classList.add("selectedValue"); if (product === products[1]) { icon = `${products[2].graphics.wheelchair}/${product.graphics.wheelchair}`; } else { icon = product.graphics.wheelchair; } } graphicRadio.forEach((radioButton, index) => { radioButton.addEventListener('change', event => { // remove selector from all labels graphicLabels.forEach(label => { label.classList.remove("selectedValue"); // remove product.regular or product.bottom from itemArr }); // apply selector to the one that was clicked graphicLabels[index].classList.add("selectedValue"); // edit itemArr if (product === products[1]) { switch (index) { case 0: icon = `${products[2].graphics.wheelchair}/${product.graphics.wheelchair}`; break; case 1: icon = `${products[2].graphics.hand}/${product.graphics.hand}`; break; case 2: icon = `${products[2].graphics.active_wheelchair}/${product.graphics.active_wheelchair}`; break; default: // handle default case console.log('Error..'); break; } } else { switch (index) { case 0: icon = product.graphics.wheelchair; break; case 1: icon = product.graphics.hand; break; case 2: icon = product.graphics.active_wheelchair; break; default: console.log('Error..'); break; } } buildSKU(activation, icon); }); }); // ------------------------------ const allBtns = document.querySelectorAll('.selection-radio.icons img.radio-icons'); const locks = document.querySelectorAll('.color-block'); console.log(locks); // Add the idle-button class to all images allBtns.forEach(btn => { btn.classList.add('idle-button'); }); // Add the activated-button class to the first image initially allBtns[0].classList.add('activated-button'); // apply the activated-button class to image of clicked button allBtns.forEach(btn => { btn.parentElement.parentElement.addEventListener('click', event => { // remove activated-button class from all images allBtns.forEach(btn => { btn.classList.remove('activated-button'); }); // apply activated-button class to the one that was clicked btn.classList.add('activated-button'); }); }); // locked state function lockedState() { locks.forEach(lock => { lock.classList.add('locked-button'); setTimeout(() => { lock.classList.remove('locked-button'); }, 3500); }); allBtns.forEach(btn => { btn.classList.add('locked-button'); setTimeout(() => { btn.classList.remove('locked-button'); // locks.classList.remove('locked-button'); }, 3500); }); } const lockColor = document.querySelectorAll('.color-block'); const lockBtn = document.getElementById('lockBtn'); const lastDiv = document.querySelector('.selection-radio.icons'); lockColor.forEach(lock => { lock.style.backgroundColor = '#000'; }); lockBtn.style.display = 'none'; lastDiv.style.marginBottom = '1.5em';