{"id":115,"date":"2026-09-04T20:48:09","date_gmt":"2026-09-04T20:48:09","guid":{"rendered":"https:\/\/www.dmx-tool.com\/?page_id=115"},"modified":"2026-10-03T22:47:04","modified_gmt":"2026-10-03T22:47:04","slug":"dip-switch-calculator","status":"publish","type":"page","link":"https:\/\/www.dmx-tool.com\/index.php\/dip-switch-calculator\/","title":{"rendered":"DIP SWITCH CALCULATOR"},"content":{"rendered":"\n<!-- DIP Switch DMX Calculator \u2014 adapt\u00e9 \u00e0 la palette style-v2 (th\u00e8me sombre) -->\n<div id=\"dip-switch-calculator\" class=\"dip-calculator\">\n\n  <h3 class=\"dip-title\">DIP SWITCH CALCULATOR<\/h3>\n\n  <label for=\"dmx-address\" class=\"dip-label\">\n    DMX ADDRESS :\n  <\/label>\n\n  <input\n    type=\"number\"\n    id=\"dmx-address\"\n    min=\"1\"\n    max=\"512\"\n    step=\"1\"\n    value=\"1\"\n  >\n\n  <div class=\"dip-switches\">\n\n    <label class=\"dip-item\">\n      <span>DIP 1<\/span>\n      <input type=\"checkbox\" data-value=\"1\">\n    <\/label>\n\n    <label class=\"dip-item\">\n      <span>DIP 2<\/span>\n      <input type=\"checkbox\" data-value=\"2\">\n    <\/label>\n\n    <label class=\"dip-item\">\n      <span>DIP 3<\/span>\n      <input type=\"checkbox\" data-value=\"4\">\n    <\/label>\n\n    <label class=\"dip-item\">\n      <span>DIP 4<\/span>\n      <input type=\"checkbox\" data-value=\"8\">\n    <\/label>\n\n    <label class=\"dip-item\">\n      <span>DIP 5<\/span>\n      <input type=\"checkbox\" data-value=\"16\">\n    <\/label>\n\n    <label class=\"dip-item\">\n      <span>DIP 6<\/span>\n      <input type=\"checkbox\" data-value=\"32\">\n    <\/label>\n\n    <label class=\"dip-item\">\n      <span>DIP 7<\/span>\n      <input type=\"checkbox\" data-value=\"64\">\n    <\/label>\n\n    <label class=\"dip-item\">\n      <span>DIP 8<\/span>\n      <input type=\"checkbox\" data-value=\"128\">\n    <\/label>\n\n    <label class=\"dip-item\">\n      <span>DIP 9<\/span>\n      <input type=\"checkbox\" data-value=\"256\">\n    <\/label>\n\n    <label class=\"dip-item\">\n      <span>DIP 10<\/span>\n      <input type=\"checkbox\" data-value=\"512\">\n    <\/label>\n\n  <\/div>\n\n  <div class=\"dip-binary\">\n    DIP switch position :\n    <strong id=\"dip-result-binary\">1000000000<\/strong>\n  <\/div>\n<\/div>\n\n<style>\n  \/* ========== CONTENEUR PRINCIPAL (palette style-v2) ========== *\/\n  .dip-calculator {\n    max-width: 650px;\n    margin: 30px auto;\n    padding: 25px;\n    background: #2b2b2b;\n    color: #eee;\n    border-radius: 8px;\n    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);\n    font-family: Arial, sans-serif;\n    text-align: center;\n  }\n\n  \/* ========== TITRE (style .cf-block-title) ========== *\/\n  .dip-title {\n    margin: 0 0 20px 0;\n    padding: 12px 20px;\n    background-color: #4ea3ff;\n    border-bottom: 1px solid #3a3a3a;\n    color: #ffffff;\n    font-size: 16px;\n    font-weight: 700;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    text-align: center;\n    border-radius: 7px;\n  }\n\n  \/* ========== LABEL ADRESSE (style .cf-label-*) ========== *\/\n  .dip-label {\n    display: block;\n    font-size: 12px;\n    font-weight: 700;\n    color: #2271b1;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    margin: 0 0 8px 0;\n    text-align: left;\n  }\n\n  \/* ========== SAISIE ADRESSE (style .cf-chan) ========== *\/\n  #dip-switch-calculator #dmx-address {\n    width: 160px;\n    padding: 8px 12px;\n    margin: 0 0 20px 0;\n    background-color: #ffffff;\n    color: #000000;\n    font-weight: 700;\n    border: 1px solid #555;\n    border-radius: 6px;\n    font-size: 16px;\n    text-align: center;\n    box-sizing: border-box;\n    -moz-appearance: textfield;\n    transition: border-color 0.2s ease;\n  }\n\n  #dmx-address::-webkit-outer-spin-button,\n  #dmx-address::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n\n  #dmx-address:hover { border-color: #777; }\n  #dmx-address:focus {\n    border-color: #4ea3ff;\n    outline: none;\n  }\n\n  \/* ========== GRILLE DES DIP ========== *\/\n  .dip-switches {\n    display: grid;\n    width: 100%;\n    box-sizing: border-box;\n    grid-template-columns: repeat(5, minmax(0, 1fr));\n    gap: 16px 4px;\n    align-items: center;\n    margin-bottom: 8px;\n  }\n\n  .dip-item {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    min-width: 0;\n    width: 100%;\n    box-sizing: border-box;\n    gap: 7px;\n    font-size: 12px;\n    color: #eee;\n  }\n\n  \/* ========== INTERRUPTEUR VISUEL (gard\u00e9 physique, accent bleu style-v2) ========== *\/\n  .dip-item input {\n    appearance: none;\n    -webkit-appearance: none;\n    width: 36px;\n    height: 58px;\n    border: 2px solid #555;\n    border-radius: 5px;\n    background: #000000;\n    position: relative;\n    cursor: pointer;\n    transition: background 0.15s ease, border-color 0.15s ease;\n  }\n\n  .dip-item input:hover { border-color: #777; }\n\n  .dip-item input::before {\n    content: \"OFF\";\n    position: absolute;\n    left: 2px;\n    right: 2px;\n    bottom: 3px;\n    padding: 4px 0;\n    border-radius: 3px;\n    background: #2b2b2b;\n    color: #eee;\n    font-size: 9px;\n    font-weight: bold;\n    text-align: center;\n  }\n\n  .dip-item input:checked {\n    background: #4ea3ff;\n    border-color: #4ea3ff;\n  }\n\n  .dip-item input:checked::before {\n    content: \"ON\";\n    top: 3px;\n    bottom: auto;\n    background: #ffffff;\n    color: #2b2b2b;\n  }\n\n  \/* ========== BLOCS R\u00c9SULTAT (style .cf-block) ========== *\/\n  .dip-binary {\n    margin-top: 16px;\n    padding: 14px 18px;\n    background: #202020;\n    border: 1px solid #3a3a3a;\n    border-radius: 8px;\n    font-size: 14px;\n    color: #eee;\n  }\n\n  .dip-binary strong {\n    display: block;\n    margin-top: 6px;\n    font-size: 25px;\n    color: #4ea3ff;\n    letter-spacing: 2px;\n    font-weight: 700;\n  }\n\n  \/* La grille de base est pr\u00e9vue pour les t\u00e9l\u00e9phones. *\/\n  @media (min-width: 769px) {\n    #dip-switch-calculator .dip-switches {\n      grid-template-columns: repeat(10, minmax(0, 1fr));\n      gap: 8px;\n    }\n  }\n\n  \/* ========== RESPONSIVE ========== *\/\n  @media (max-width: 768px) {\n    .dip-calculator {\n      box-sizing: border-box;\n      padding: 18px 12px;\n    }\n\n    #dip-switch-calculator .dip-switches {\n      display: grid;\n      width: 100%;\n      grid-template-columns: repeat(5, minmax(0, 1fr));\n      gap: 16px 4px;\n    }\n\n    #dip-switch-calculator .dip-item {\n      width: 100%;\n      min-width: 0;\n    }\n\n    .dip-item input {\n      width: 36px;\n      height: 58px;\n    }\n\n    .dip-item span {\n      font-size: 10px;\n    }\n\n    #dip-switch-calculator #dmx-address {\n      width: 100%;\n    }\n  }\n<\/style>\n\n<script>\n  document.addEventListener(\"DOMContentLoaded\", function () {\n    const addressInput = document.getElementById(\"dmx-address\");\n\n    const switches = document.querySelectorAll(\n      \"#dip-switch-calculator input[data-value]\"\n    );\n\n    const resultBinary = document.getElementById(\"dip-result-binary\");\n\n    \/* Calcul des valeurs (DIP 1=1, DIP 2=2, DIP 3=4, ... DIP 10=512) *\/\n    const dipValues = [];\n    switches.forEach(function (dipSwitch) {\n      dipValues.push(Number(dipSwitch.dataset.value));\n    });\n\n    \/* Bornes DMX *\/\n    const MIN_ADDR = 1;\n    const MAX_ADDR = 512;\n\n    \/* Force la saisie dans l'intervalle [1..512] et corrige les NaN *\/\n    function clampAddress(raw) {\n      let address = Number(raw);\n\n      if (!Number.isFinite(address) || address < MIN_ADDR) {\n        address = MIN_ADDR;\n      }\n\n      if (address > MAX_ADDR) {\n        address = MAX_ADDR;\n      }\n\n      return Math.trunc(address);\n    }\n\n    \/* Met \u00e0 jour l'\u00e9tat des switches depuis une adresse *\/\n    function updateFromAddress(address, syncInput = true) {\n      switches.forEach(function (dipSwitch, i) {\n        dipSwitch.checked = (address & dipValues[i]) !== 0;\n      });\n\n      updateDisplay(syncInput);\n    }\n\n    \/* Recalcule adresse + cha\u00eene binaire depuis l'\u00e9tat des switches *\/\n    function updateDisplay(syncInput = true) {\n      let address = 0;\n      let binary = \"\";\n\n      switches.forEach(function (dipSwitch, i) {\n        if (dipSwitch.checked) {\n          address += dipValues[i];\n          binary += \"1\";\n        } else {\n          binary += \"0\";\n        }\n      });\n\n      resultBinary.textContent = binary;\n\n      \/* Synchronise le champ de saisie avec la valeur calcul\u00e9e *\/\n      if (addressInput && syncInput) {\n        addressInput.value = address;\n      }\n    }\n\n    if (addressInput) {\n      \/* Laisser le champ vide pendant la saisie, sans r\u00e9injecter imm\u00e9diatement 1. *\/\n      addressInput.addEventListener(\"input\", function () {\n        const raw = addressInput.value.trim();\n        if (raw === \"\") return;\n\n        const address = Number(raw);\n        if (Number.isInteger(address) && address >= MIN_ADDR && address <= MAX_ADDR) {\n          updateFromAddress(address, false);\n        }\n      });\n\n      \/* Corriger une valeur incompl\u00e8te ou hors plage seulement \u00e0 la fin. *\/\n      addressInput.addEventListener(\"blur\", function () {\n        updateFromAddress(clampAddress(addressInput.value));\n      });\n\n      addressInput.addEventListener(\"keydown\", function (event) {\n        if (event.key === \"Enter\") addressInput.blur();\n      });\n    }\n\n    switches.forEach(function (dipSwitch) {\n      dipSwitch.addEventListener(\"change\", function () {\n        if (dipSwitch.checked) {\n          if (Number(dipSwitch.dataset.value) === 512) {\n            switches.forEach(function (other) {\n              if (other !== dipSwitch) other.checked = false;\n            });\n          } else {\n            const dipTen = document.querySelector(\n              '#dip-switch-calculator input[data-value=\"512\"]'\n            );\n            if (dipTen) dipTen.checked = false;\n          }\n        }\n        updateDisplay();\n      });\n    });\n\n    \/* Initialisation : partir de la valeur du champ, born\u00e9e *\/\n    if (addressInput) {\n      updateFromAddress(clampAddress(addressInput.value));\n    } else {\n      updateDisplay();\n    }\n  });\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>DIP SWITCH CALCULATOR DMX ADDRESS : DIP 1 DIP 2 DIP 3 DIP 4 DIP 5 DIP 6 DIP 7 DIP 8 DIP 9 DIP 10 DIP switch position : 1000000000<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-115","page","type-page","status-publish","hentry"],"blocksy_meta":{"styles_descriptor":{"styles":{"desktop":"","tablet":"","mobile":""},"google_fonts":[],"version":8}},"_links":{"self":[{"href":"https:\/\/www.dmx-tool.com\/index.php\/wp-json\/wp\/v2\/pages\/115","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.dmx-tool.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.dmx-tool.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.dmx-tool.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.dmx-tool.com\/index.php\/wp-json\/wp\/v2\/comments?post=115"}],"version-history":[{"count":9,"href":"https:\/\/www.dmx-tool.com\/index.php\/wp-json\/wp\/v2\/pages\/115\/revisions"}],"predecessor-version":[{"id":252,"href":"https:\/\/www.dmx-tool.com\/index.php\/wp-json\/wp\/v2\/pages\/115\/revisions\/252"}],"wp:attachment":[{"href":"https:\/\/www.dmx-tool.com\/index.php\/wp-json\/wp\/v2\/media?parent=115"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}