{"id":6865,"date":"2026-03-24T14:27:48","date_gmt":"2026-03-24T14:27:48","guid":{"rendered":"https:\/\/femaindustry.com\/?page_id=6865"},"modified":"2026-03-24T15:12:43","modified_gmt":"2026-03-24T15:12:43","slug":"hotspot","status":"publish","type":"page","link":"https:\/\/femaindustry.com\/en\/hotspot\/","title":{"rendered":"hotspot"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"6865\" class=\"elementor elementor-6865\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-0e1b787 e-flex e-con-boxed e-con e-parent\" data-id=\"0e1b787\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c88029f elementor-widget elementor-widget-html\" data-id=\"c88029f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"it\">\r\n<head>\r\n<meta charset=\"UTF-8\">\r\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n<title>Hotspot Position Tool<\/title>\r\n<style>\r\n  * { box-sizing: border-box; margin: 0; padding: 0; }\r\n  body { font-family: sans-serif; padding: 1.5rem; background: #f5f5f5; color: #222; }\r\n\r\n  #drop-zone {\r\n    border: 2px dashed #ccc;\r\n    border-radius: 10px;\r\n    padding: 2rem;\r\n    text-align: center;\r\n    cursor: pointer;\r\n    color: #888;\r\n    font-size: 14px;\r\n    background: #fff;\r\n    transition: background 0.2s;\r\n    margin-bottom: 1rem;\r\n  }\r\n  #drop-zone:hover { background: #f0f0f0; }\r\n  #drop-zone.hidden { display: none; }\r\n\r\n  #canvas-wrap {\r\n    position: relative;\r\n    display: none;\r\n    border-radius: 10px;\r\n    overflow: hidden;\r\n    border: 1px solid #ddd;\r\n    cursor: crosshair;\r\n    margin-bottom: 1rem;\r\n    background: #fff;\r\n  }\r\n  #canvas-wrap img { width: 100%; display: block; }\r\n\r\n  .dot {\r\n    position: absolute;\r\n    width: 18px; height: 18px;\r\n    background: #CC0000;\r\n    border: 2px solid #fff;\r\n    border-radius: 50%;\r\n    transform: translate(-50%, -50%);\r\n    cursor: pointer;\r\n    box-shadow: 0 1px 4px rgba(0,0,0,0.35);\r\n    transition: transform 0.15s;\r\n    z-index: 10;\r\n  }\r\n  .dot:hover { transform: translate(-50%, -50%) scale(1.3); }\r\n\r\n  .dot-label {\r\n    position: absolute;\r\n    background: #CC0000;\r\n    color: #fff;\r\n    font-size: 10px;\r\n    font-weight: 600;\r\n    padding: 1px 5px;\r\n    border-radius: 4px;\r\n    transform: translate(-50%, -220%);\r\n    white-space: nowrap;\r\n    pointer-events: none;\r\n    font-family: sans-serif;\r\n  }\r\n\r\n  #hint {\r\n    font-size: 13px;\r\n    color: #888;\r\n    margin-bottom: 0.75rem;\r\n    display: none;\r\n  }\r\n\r\n  button {\r\n    font-size: 13px;\r\n    padding: 7px 16px;\r\n    border-radius: 6px;\r\n    border: 1px solid #ccc;\r\n    background: #fff;\r\n    cursor: pointer;\r\n    transition: background 0.15s;\r\n  }\r\n  button:hover { background: #f0f0f0; }\r\n\r\n  #controls {\r\n    display: none;\r\n    gap: 8px;\r\n    margin-bottom: 1rem;\r\n    align-items: center;\r\n  }\r\n  #reset-btn { color: #888; }\r\n\r\n  #coords-list {\r\n    display: none;\r\n    border-radius: 10px;\r\n    border: 1px solid #ddd;\r\n    overflow: hidden;\r\n    background: #fff;\r\n    margin-bottom: 0.75rem;\r\n  }\r\n\r\n  .coord-row {\r\n    display: grid;\r\n    grid-template-columns: 32px 1fr 1fr auto;\r\n    align-items: center;\r\n    gap: 8px;\r\n    padding: 8px 12px;\r\n    border-bottom: 1px solid #eee;\r\n    font-size: 13px;\r\n  }\r\n  .coord-row:last-child { border-bottom: none; }\r\n  .coord-row.header {\r\n    background: #f8f8f8;\r\n    font-size: 12px;\r\n    color: #888;\r\n    font-weight: 600;\r\n  }\r\n\r\n  .coord-num {\r\n    width: 22px; height: 22px;\r\n    background: #CC0000;\r\n    color: #fff;\r\n    border-radius: 50%;\r\n    display: flex; align-items: center; justify-content: center;\r\n    font-size: 11px; font-weight: 600;\r\n  }\r\n\r\n  .coord-val {\r\n    font-family: monospace;\r\n    font-size: 13px;\r\n    color: #222;\r\n    background: #f5f5f5;\r\n    padding: 4px 8px;\r\n    border-radius: 4px;\r\n    border: 1px solid #e0e0e0;\r\n    width: 100%;\r\n    cursor: pointer;\r\n    user-select: all;\r\n    transition: background 0.15s;\r\n  }\r\n  .coord-val:hover { background: #e8e8e8; }\r\n\r\n  .del-btn {\r\n    background: none;\r\n    border: none;\r\n    color: #bbb;\r\n    cursor: pointer;\r\n    font-size: 16px;\r\n    padding: 2px 6px;\r\n    border-radius: 4px;\r\n    line-height: 1;\r\n  }\r\n  .del-btn:hover { color: #CC0000; background: #fef0f0; }\r\n\r\n  #copy-all {\r\n    display: none;\r\n    font-size: 13px;\r\n    background: #CC0000;\r\n    color: #fff;\r\n    border: none;\r\n    padding: 8px 18px;\r\n    border-radius: 6px;\r\n  }\r\n  #copy-all:hover { background: #aa0000; }\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<div id=\"drop-zone\" onclick=\"document.getElementById('file-input').click()\">\r\n  <div style=\"font-size: 32px; margin-bottom: 8px;\">+<\/div>\r\n  <div style=\"font-weight: 600; color: #444; margin-bottom: 4px; font-size: 15px;\">Carica immagine<\/div>\r\n  <div>Clicca oppure trascina qui il file<\/div>\r\n  <input type=\"file\" id=\"file-input\" accept=\"image\/*\" style=\"display:none\">\r\n<\/div>\r\n\r\n<div id=\"canvas-wrap\">\r\n  <img decoding=\"async\" id=\"preview-img\" src=\"\" alt=\"\">\r\n<\/div>\r\n\r\n<p id=\"hint\">Clicca sull'immagine per aggiungere un pallino. Clicca su un pallino per rimuoverlo.<\/p>\r\n\r\n<div id=\"controls\">\r\n  <button id=\"reset-btn\" onclick=\"resetAll()\">Ricomincia<\/button>\r\n<\/div>\r\n\r\n<div id=\"coords-list\"><\/div>\r\n<button id=\"copy-all\" onclick=\"copyAll()\">Copia tutti i valori<\/button>\r\n\r\n<script>\r\nconst dots = [];\r\nconst dropZone = document.getElementById('drop-zone');\r\nconst canvasWrap = document.getElementById('canvas-wrap');\r\nconst img = document.getElementById('preview-img');\r\nconst coordsList = document.getElementById('coords-list');\r\nconst hint = document.getElementById('hint');\r\nconst controls = document.getElementById('controls');\r\nconst copyAllBtn = document.getElementById('copy-all');\r\nconst fileInput = document.getElementById('file-input');\r\n\r\ndropZone.addEventListener('dragover', e => { e.preventDefault(); dropZone.style.background = '#f0f0f0'; });\r\ndropZone.addEventListener('dragleave', () => { dropZone.style.background = ''; });\r\ndropZone.addEventListener('drop', e => { e.preventDefault(); loadFile(e.dataTransfer.files[0]); });\r\nfileInput.addEventListener('change', e => loadFile(e.target.files[0]));\r\n\r\nfunction loadFile(file) {\r\n  if (!file || !file.type.startsWith('image\/')) return;\r\n  const reader = new FileReader();\r\n  reader.onload = e => {\r\n    img.src = e.target.result;\r\n    dropZone.classList.add('hidden');\r\n    canvasWrap.style.display = 'block';\r\n    hint.style.display = 'block';\r\n    controls.style.display = 'flex';\r\n  };\r\n  reader.readAsDataURL(file);\r\n}\r\n\r\ncanvasWrap.addEventListener('click', function(e) {\r\n  if (e.target.classList.contains('dot')) return;\r\n  const rect = canvasWrap.getBoundingClientRect();\r\n  const x = parseFloat(((e.clientX - rect.left) \/ rect.width * 100).toFixed(1));\r\n  const y = parseFloat(((e.clientY - rect.top) \/ rect.height * 100).toFixed(1));\r\n  addDot(x, y);\r\n});\r\n\r\nfunction addDot(x, y) {\r\n  dots.push({ x, y });\r\n  renderDots();\r\n  renderList();\r\n}\r\n\r\nfunction renderDots() {\r\n  canvasWrap.querySelectorAll('.dot').forEach(d => d.remove());\r\n  dots.forEach((d, i) => {\r\n    const dot = document.createElement('div');\r\n    dot.className = 'dot';\r\n    dot.style.left = d.x + '%';\r\n    dot.style.top = d.y + '%';\r\n    dot.dataset.idx = i;\r\n    const label = document.createElement('div');\r\n    label.className = 'dot-label';\r\n    label.textContent = i + 1;\r\n    dot.appendChild(label);\r\n    dot.addEventListener('click', function(e) {\r\n      e.stopPropagation();\r\n      removeDot(parseInt(this.dataset.idx));\r\n    });\r\n    canvasWrap.appendChild(dot);\r\n  });\r\n}\r\n\r\nfunction removeDot(idx) {\r\n  dots.splice(idx, 1);\r\n  renderDots();\r\n  renderList();\r\n}\r\n\r\nfunction renderList() {\r\n  if (dots.length === 0) {\r\n    coordsList.style.display = 'none';\r\n    copyAllBtn.style.display = 'none';\r\n    coordsList.innerHTML = '';\r\n    return;\r\n  }\r\n  coordsList.style.display = 'block';\r\n  copyAllBtn.style.display = 'inline-block';\r\n\r\n  let html = `<div class=\"coord-row header\"><div>#<\/div><div>pos_x<\/div><div>pos_y<\/div><div><\/div><\/div>`;\r\n  dots.forEach((d, i) => {\r\n    html += `\r\n      <div class=\"coord-row\">\r\n        <div class=\"coord-num\">${i+1}<\/div>\r\n        <div class=\"coord-val\" onclick=\"copyVal(this)\" title=\"Clicca per copiare\">${d.x}<\/div>\r\n        <div class=\"coord-val\" onclick=\"copyVal(this)\" title=\"Clicca per copiare\">${d.y}<\/div>\r\n        <button class=\"del-btn\" onclick=\"removeDot(${i})\">&#x2715;<\/button>\r\n      <\/div>`;\r\n  });\r\n  coordsList.innerHTML = html;\r\n}\r\n\r\nfunction copyVal(el) {\r\n  navigator.clipboard.writeText(el.textContent).then(() => {\r\n    const orig = el.textContent;\r\n    el.textContent = 'Copiato!';\r\n    setTimeout(() => el.textContent = orig, 1000);\r\n  });\r\n}\r\n\r\nfunction copyAll() {\r\n  const text = dots.map((d, i) => `Pallino ${i+1}: pos_x = ${d.x} | pos_y = ${d.y}`).join('\\n');\r\n  navigator.clipboard.writeText(text).then(() => {\r\n    const orig = copyAllBtn.textContent;\r\n    copyAllBtn.textContent = 'Copiato!';\r\n    setTimeout(() => copyAllBtn.textContent = orig, 1500);\r\n  });\r\n}\r\n\r\nfunction resetAll() {\r\n  dots.length = 0;\r\n  renderDots();\r\n  coordsList.style.display = 'none';\r\n  coordsList.innerHTML = '';\r\n  copyAllBtn.style.display = 'none';\r\n  dropZone.classList.remove('hidden');\r\n  canvasWrap.style.display = 'none';\r\n  hint.style.display = 'none';\r\n  controls.style.display = 'none';\r\n  img.src = '';\r\n  fileInput.value = '';\r\n}\r\n<\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Hotspot Position Tool + Carica immagine Clicca oppure trascina qui il file Clicca sull&#8217;immagine per aggiungere un pallino. Clicca su un pallino per rimuoverlo. Ricomincia Copia tutti i valori<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-6865","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/femaindustry.com\/en\/wp-json\/wp\/v2\/pages\/6865","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/femaindustry.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/femaindustry.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/femaindustry.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/femaindustry.com\/en\/wp-json\/wp\/v2\/comments?post=6865"}],"version-history":[{"count":7,"href":"https:\/\/femaindustry.com\/en\/wp-json\/wp\/v2\/pages\/6865\/revisions"}],"predecessor-version":[{"id":6878,"href":"https:\/\/femaindustry.com\/en\/wp-json\/wp\/v2\/pages\/6865\/revisions\/6878"}],"wp:attachment":[{"href":"https:\/\/femaindustry.com\/en\/wp-json\/wp\/v2\/media?parent=6865"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}