Adamas Pro Polygon Visualizer<\/title>\n<style>\nbody { font-family: Arial, sans-serif; margin:20px; background:#f5f5f5; }\nh2 { text-align:center; margin-bottom:10px; }\n#instructions { text-align:center; margin-bottom:10px; font-size:14px; color:#333; background:#fff3cd; padding:10px; border-radius:5px; border:1px solid #ffeeba; max-width:800px; margin:auto; }\n#controls { text-align:center; margin-bottom:10px; }\ncanvas { border:1px solid #ccc; display:block; margin:auto; cursor:crosshair; max-width:100%; height:auto; }\nselect { margin:0 5px; padding:3px 5px; }\nbutton { margin:0 5px; padding:5px 8px; border-radius:4px; cursor:pointer; }\n#maskList { text-align:center; margin-top:10px; }\n.maskItem { display:inline-block; padding:4px 8px; margin:2px; border-radius:4px; background:#fff; border:1px solid #ccc; cursor:pointer; }\n.maskColorBox { width:14px; height:14px; display:inline-block; margin-right:4px; vertical-align:middle; }\n#colorPalette { display:flex; flex-wrap:wrap; justify-content:center; margin-top:15px; background:#fff; padding:10px; border-radius:5px; border:1px solid #ccc; max-width:900px; margin-left:auto; margin-right:auto;}\n#colorPalette div { text-align:center; margin:4px; }\n#colorPalette button { width:40px; height:40px; border-radius:50%; border:2px solid #888; cursor:pointer; box-shadow:1px 1px 3px rgba(0,0,0,0.3);}\n#colorPalette div div { margin-top:2px; font-size:10px; text-align:center; max-width:60px; word-wrap:break-word;}\n<\/style>\n<\/head>\n<body>\n\n<h2>Adamas Pro \u2014 Polygon Visualizer<\/h2>\n\n<div id=\"instructions\">\n <p>1. \u039a\u03ac\u03bd\u03b5 upload \u03c4\u03b7 \u03c6\u03c9\u03c4\u03bf\u03b3\u03c1\u03b1\u03c6\u03af\u03b1 \u03c4\u03c9\u03bd \u03b5\u03c0\u03af\u03c0\u03bb\u03c9\u03bd \u03c3\u03bf\u03c5.<\/p>\n <p>2. \u039a\u03ac\u03bd\u03b5 \u03ba\u03bb\u03b9\u03ba \u03c3\u03c4\u03bf “\u039d\u03ad\u03b1 \u039c\u03ac\u03c3\u03ba\u03b1” \u03ba\u03b1\u03b9 \u03b5\u03c0\u03af\u03bb\u03b5\u03be\u03b5 \u03c7\u03c1\u03ce\u03bc\u03b1 \u03b1\u03c0\u03cc \u03c4\u03b1 \u03ba\u03cd\u03ba\u03bb\u03bf\u03c5\u03c2 \u03c0\u03b1\u03c1\u03b1\u03ba\u03ac\u03c4\u03c9.<\/p>\n <p>3. \u03a3\u03c7\u03b5\u03b4\u03af\u03b1\u03c3\u03b5 \u03b3\u03cd\u03c1\u03c9 \u03b1\u03c0\u03cc \u03c4\u03bf \u03ad\u03c0\u03b9\u03c0\u03bb\u03bf \u03bc\u03b5 polygon.<\/p>\n <p>4. \u03a7\u03c1\u03b7\u03c3\u03b9\u03bc\u03bf\u03c0\u03bf\u03af\u03b7\u03c3\u03b5 Undo, \u0394\u03b9\u03b1\u03b3\u03c1\u03b1\u03c6\u03ae \u03ae \u0391\u03c0\u03bf\u03b8\u03ae\u03ba\u03b5\u03c5\u03c3\u03b7 \u03b5\u03b9\u03ba\u03cc\u03bd\u03b1\u03c2.<\/p>\n<\/div>\n\n<div id=\"controls\">\n <input type=\"file\" id=\"upload\" accept=\"image\/*\">\n <button id=\"newMask\">\u039d\u03ad\u03b1 \u039c\u03ac\u03c3\u03ba\u03b1<\/button>\n <button id=\"undo\">Undo<\/button>\n <button id=\"clear\">\u0394\u03b9\u03b1\u03b3\u03c1\u03b1\u03c6\u03ae \u038c\u03bb\u03c9\u03bd<\/button>\n <button id=\"save\">\u0391\u03c0\u03bf\u03b8\u03ae\u03ba\u03b5\u03c5\u03c3\u03b7<\/button>\n<\/div>\n\n<div id=\"maskList\"><\/div>\n<canvas id=\"canvas\"><\/canvas>\n\n<div id=\"colorPalette\"><\/div>\n\n<script>\n\/\/ \u03a7\u03c1\u03ce\u03bc\u03b1\u03c4\u03b1 Adamas Pro\nconst colors = [\n{code:\"01\",name:\"Blanco\",hex:\"#ffffff\"},{code:\"02\",name:\"Ivory Cream\",hex:\"#faf1dd\"},\n{code:\"03\",name:\"Linen\",hex:\"#dddddd\"},{code:\"04\",name:\"Taupe Greize\",hex:\"#d7cec8\"},\n{code:\"05\",name:\"Sand\",hex:\"#e4d2aa\"},{code:\"06\",name:\"Sepia\",hex:\"#ad905a\"},\n{code:\"07\",name:\"Mocha Mousse\",hex:\"#b08d6a\"},{code:\"08\",name:\"Leather\",hex:\"#a96a2d\"},\n{code:\"09\",name:\"Chocolato\",hex:\"#744f42\"},{code:\"10\",name:\"Espresso\",hex:\"#5a3726\"},\n{code:\"11\",name:\"Burnt Brown\",hex:\"#58462b\"},{code:\"12\",name:\"Nero\",hex:\"#000000\"},\n{code:\"13\",name:\"Off Black\",hex:\"#3b4345\"},{code:\"14\",name:\"Dark Grey\",hex:\"#515151\"},\n{code:\"15\",name:\"Pepper\",hex:\"#4e544e\"},{code:\"16\",name:\"Roccia Grey\",hex:\"#bdbec3\"},\n{code:\"17\",name:\"Clear Sky\",hex:\"#b1adc1\"},{code:\"18\",name:\"Morning Fog\",hex:\"#babfb5\"},\n{code:\"19\",name:\"Vino\",hex:\"#9f021b\"},{code:\"20\",name:\"Rosseto\",hex:\"#af080f\"},\n{code:\"21\",name:\"Terracotta Rosso\",hex:\"#c55a4c\"},{code:\"22\",name:\"Nude Pink\",hex:\"#ecbeb4\"},\n{code:\"23\",name:\"Rose Mist\",hex:\"#f598a3\"},{code:\"24\",name:\"Fucsia\",hex:\"#af2744\"},\n{code:\"25\",name:\"Bougainville\",hex:\"#78000e\"},{code:\"26\",name:\"Mandarino\",hex:\"#f1771f\"},\n{code:\"27\",name:\"Mango Split\",hex:\"#f0a311\"},{code:\"28\",name:\"Butter Cream\",hex:\"#f6e667\"},\n{code:\"29\",name:\"Royal Blue\",hex:\"#003771\"},{code:\"30\",name:\"Lavender\",hex:\"#475696\"},\n{code:\"31\",name:\"Blue Jean\",hex:\"#417080\"},{code:\"32\",name:\"Lagoon\",hex:\"#588c7c\"},\n{code:\"33\",name:\"Pavone\",hex:\"#1c4755\"},{code:\"34\",name:\"Wood Pine\",hex:\"#27431d\"},\n{code:\"35\",name:\"Olive\",hex:\"#6f712b\"},{code:\"36\",name:\"Leaf\",hex:\"#516b46\"},\n{code:\"37\",name:\"Sea Salt\",hex:\"#8bc094\"},{code:\"38\",name:\"Magenda\",hex:\"#910e48\"}\n];\n\nconst upload=document.getElementById('upload');\nconst canvas=document.getElementById('canvas');\nconst ctx=canvas.getContext('2d');\nconst newMaskBtn=document.getElementById('newMask');\nconst undoBtn=document.getElementById('undo');\nconst clearBtn=document.getElementById('clear');\nconst saveBtn=document.getElementById('save');\nconst maskList=document.getElementById('maskList');\nconst paletteContainer=document.getElementById('colorPalette');\n\nlet image=null;\nlet drawing=false;\nlet masks=[];\nlet currentMask=null;\n\n\/\/ \u0394\u03b7\u03bc\u03b9\u03bf\u03c5\u03c1\u03b3\u03af\u03b1 \u03c7\u03c1\u03c9\u03bc\u03b1\u03c4\u03bf\u03bb\u03bf\u03b3\u03af\u03bf\u03c5\ncolors.forEach(c=>{\n const wrapper=document.createElement('div');\n const btn=document.createElement('button');\n btn.style.background=c.hex;\n btn.title=c.code + \" \" + c.name;\n btn.onclick=()=>{ \n if(currentMask) currentMask.color=c.hex; \n updatePaletteHighlight();\n redraw();\n };\n const label=document.createElement('div');\n label.textContent=c.code + \" \" + c.name;\n wrapper.appendChild(btn);\n wrapper.appendChild(label);\n paletteContainer.appendChild(wrapper);\n});\n\nfunction updatePaletteHighlight(){\n paletteContainer.querySelectorAll('button').forEach(btn=>{\n if(currentMask && btn.style.background === currentMask.color){\n btn.style.border=\"4px solid #000\";\n } else { btn.style.border=\"2px solid #888\"; }\n });\n}\n\n\/\/ Upload \u03c6\u03c9\u03c4\u03bf\u03b3\u03c1\u03b1\u03c6\u03af\u03b1\u03c2\nupload.addEventListener('change',e=>{\n const file=e.target.files[0];\n if(!file) return;\n const reader=new FileReader();\n reader.onload=evt=>{\n image=new Image();\n image.onload=()=>{\n canvas.width=image.width>800?800:image.width;\n canvas.height=image.height>600?600:image.height;\n redraw();\n };\n image.src=evt.target.result;\n };\n reader.readAsDataURL(file);\n});\n\n\/\/ \u03a3\u03c7\u03b5\u03b4\u03af\u03b1\u03c3\u03b7 polygon\ncanvas.addEventListener('mousedown',e=>{\n if(!currentMask) return;\n drawing=true;\n currentMask.path.push(getPos(e));\n redraw();\n});\ncanvas.addEventListener('mousemove',e=>{\n if(drawing && currentMask){\n currentMask.path.push(getPos(e));\n redraw();\n }\n});\ncanvas.addEventListener('mouseup',e=>{ drawing=false; });\ncanvas.addEventListener('mouseleave',e=>{ drawing=false; });\n\nfunction getPos(e){\n const rect=canvas.getBoundingClientRect();\n return {x:e.clientX-rect.left, y:e.clientY-rect.top};\n}\n\nfunction redraw(){\n if(!image) return;\n ctx.clearRect(0,0,canvas.width,canvas.height);\n ctx.drawImage(image,0,0,canvas.width,canvas.height);\n masks.forEach(m=>{\n if(m.path.length>0){\n ctx.fillStyle=m.color+'cc';\n ctx.beginPath();\n ctx.moveTo(m.path[0].x,m.path[0].y);\n for(let i=1;i<m.path.length;i++) ctx.lineTo(m.path[i].x,m.path[i].y);\n ctx.closePath();\n ctx.fill();\n }\n });\n}\n\n\/\/ \u039a\u03bf\u03c5\u03bc\u03c0\u03b9\u03ac \u03bb\u03b5\u03b9\u03c4\u03bf\u03c5\u03c1\u03b3\u03b9\u03ce\u03bd\nnewMaskBtn.addEventListener('click',()=>{\n currentMask={color:colors[0].hex,path:[]};\n masks.push(currentMask);\n updateMaskList();\n updatePaletteHighlight();\n});\n\nundoBtn.addEventListener('click',()=>{\n if(currentMask && currentMask.path.length>0){\n currentMask.path.pop();\n redraw();\n }\n});\n\nclearBtn.addEventListener('click',()=>{\n masks=[]; currentMask=null; updateMaskList(); redraw();\n});\n\nsaveBtn.addEventListener('click',()=>{\n if(!image) return;\n const link=document.createElement('a');\n link.download='visualized.png';\n link.href=canvas.toDataURL();\n link.click();\n});\n\n\/\/ \u039b\u03af\u03c3\u03c4\u03b1 \u03bc\u03ac\u03c3\u03ba\u03b1\u03c2\nfunction updateMaskList(){\n maskList.innerHTML=\"\";\n masks.forEach((m,i)=>{\n const div=document.createElement('div');\n div.className='maskItem';\n div.innerHTML='<span class=\"maskColorBox\" style=\"background:'+m.color+'\"><\/span>\u039c\u03ac\u03c3\u03ba\u03b1 '+(i+1);\n div.onclick=()=>{ currentMask=m; updatePaletteHighlight(); };\n const delBtn=document.createElement('button');\n delBtn.textContent='X';\n delBtn.style.marginLeft='4px';\n delBtn.onclick=(e)=>{ e.stopPropagation(); masks.splice(i,1); if(currentMask===m) currentMask=null; updateMaskList(); redraw(); };\n div.appendChild(delBtn);\n maskList.appendChild(div);\n });\n}\n<\/script>\n\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Adamas Pro Polygon Visualizer Adamas Pro \u2014 Polygon Visualizer 1. \u039a\u03ac\u03bd\u03b5 upload \u03c4\u03b7 \u03c6\u03c9\u03c4\u03bf\u03b3\u03c1\u03b1\u03c6\u03af\u03b1 \u03c4\u03c9\u03bd \u03b5\u03c0\u03af\u03c0\u03bb\u03c9\u03bd \u03c3\u03bf\u03c5. 2. \u039a\u03ac\u03bd\u03b5 \u03ba\u03bb\u03b9\u03ba \u03c3\u03c4\u03bf “\u039d\u03ad\u03b1 \u039c\u03ac\u03c3\u03ba\u03b1” \u03ba\u03b1\u03b9 \u03b5\u03c0\u03af\u03bb\u03b5\u03be\u03b5 \u03c7\u03c1\u03ce\u03bc\u03b1 \u03b1\u03c0\u03cc \u03c4\u03b1 \u03ba\u03cd\u03ba\u03bb\u03bf\u03c5\u03c2 \u03c0\u03b1\u03c1\u03b1\u03ba\u03ac\u03c4\u03c9. 3. \u03a3\u03c7\u03b5\u03b4\u03af\u03b1\u03c3\u03b5 \u03b3\u03cd\u03c1\u03c9 \u03b1\u03c0\u03cc \u03c4\u03bf \u03ad\u03c0\u03b9\u03c0\u03bb\u03bf \u03bc\u03b5 polygon. 4. \u03a7\u03c1\u03b7\u03c3\u03b9\u03bc\u03bf\u03c0\u03bf\u03af\u03b7\u03c3\u03b5 Undo, \u0394\u03b9\u03b1\u03b3\u03c1\u03b1\u03c6\u03ae \u03ae \u0391\u03c0\u03bf\u03b8\u03ae\u03ba\u03b5\u03c5\u03c3\u03b7 \u03b5\u03b9\u03ba\u03cc\u03bd\u03b1\u03c2. \u039d\u03ad\u03b1 \u039c\u03ac\u03c3\u03ba\u03b1 Undo \u0394\u03b9\u03b1\u03b3\u03c1\u03b1\u03c6\u03ae \u038c\u03bb\u03c9\u03bd \u0391\u03c0\u03bf\u03b8\u03ae\u03ba\u03b5\u03c5\u03c3\u03b7<\/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-170","page","type-page","status-publish","hentry"],"jetpack_sharing_enabled":true,"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/pglivaditi.gr\/index.php?rest_route=\/wp\/v2\/pages\/170","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pglivaditi.gr\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/pglivaditi.gr\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/pglivaditi.gr\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/pglivaditi.gr\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=170"}],"version-history":[{"count":17,"href":"https:\/\/pglivaditi.gr\/index.php?rest_route=\/wp\/v2\/pages\/170\/revisions"}],"predecessor-version":[{"id":566,"href":"https:\/\/pglivaditi.gr\/index.php?rest_route=\/wp\/v2\/pages\/170\/revisions\/566"}],"wp:attachment":[{"href":"https:\/\/pglivaditi.gr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=170"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":170,"date":"2025-10-01T20:58:05","date_gmt":"2025-10-01T17:58:05","guid":{"rendered":"https:\/\/23948599251.thesite.link\/?page_id=170"},"modified":"2026-01-05T01:08:48","modified_gmt":"2026-01-04T23:08:48","slug":"%ce%b4%ce%bf%ce%ba%ce%af%ce%bc%ce%b1%cf%83%ce%b5-%cf%84%ce%b1-%cf%87%cf%81%cf%8e%ce%bc%ce%b1%cf%84%ce%b1-adamas","status":"publish","type":"page","link":"https:\/\/pglivaditi.gr\/?page_id=170","title":{"rendered":"\u0394\u03bf\u03ba\u03af\u03bc\u03b1\u03c3\u03b5 \u03c4\u03b1 \u03c7\u03c1\u03ce\u03bc\u03b1\u03c4\u03b1 Adamas"},"content":{"rendered":"\n\n\n\n\nAdamas Pro Polygon Visualizer<\/title>\n<style>\nbody { font-family: Arial, sans-serif; margin:20px; background:#f5f5f5; }\nh2 { text-align:center; margin-bottom:10px; }\n#instructions { text-align:center; margin-bottom:10px; font-size:14px; color:#333; background:#fff3cd; padding:10px; border-radius:5px; border:1px solid #ffeeba; max-width:800px; margin:auto; }\n#controls { text-align:center; margin-bottom:10px; }\ncanvas { border:1px solid #ccc; display:block; margin:auto; cursor:crosshair; max-width:100%; height:auto; }\nselect { margin:0 5px; padding:3px 5px; }\nbutton { margin:0 5px; padding:5px 8px; border-radius:4px; cursor:pointer; }\n#maskList { text-align:center; margin-top:10px; }\n.maskItem { display:inline-block; padding:4px 8px; margin:2px; border-radius:4px; background:#fff; border:1px solid #ccc; cursor:pointer; }\n.maskColorBox { width:14px; height:14px; display:inline-block; margin-right:4px; vertical-align:middle; }\n#colorPalette { display:flex; flex-wrap:wrap; justify-content:center; margin-top:15px; background:#fff; padding:10px; border-radius:5px; border:1px solid #ccc; max-width:900px; margin-left:auto; margin-right:auto;}\n#colorPalette div { text-align:center; margin:4px; }\n#colorPalette button { width:40px; height:40px; border-radius:50%; border:2px solid #888; cursor:pointer; box-shadow:1px 1px 3px rgba(0,0,0,0.3);}\n#colorPalette div div { margin-top:2px; font-size:10px; text-align:center; max-width:60px; word-wrap:break-word;}\n<\/style>\n<\/head>\n<body>\n\n<h2>Adamas Pro \u2014 Polygon Visualizer<\/h2>\n\n<div id=\"instructions\">\n <p>1. \u039a\u03ac\u03bd\u03b5 upload \u03c4\u03b7 \u03c6\u03c9\u03c4\u03bf\u03b3\u03c1\u03b1\u03c6\u03af\u03b1 \u03c4\u03c9\u03bd \u03b5\u03c0\u03af\u03c0\u03bb\u03c9\u03bd \u03c3\u03bf\u03c5.<\/p>\n <p>2. \u039a\u03ac\u03bd\u03b5 \u03ba\u03bb\u03b9\u03ba \u03c3\u03c4\u03bf “\u039d\u03ad\u03b1 \u039c\u03ac\u03c3\u03ba\u03b1” \u03ba\u03b1\u03b9 \u03b5\u03c0\u03af\u03bb\u03b5\u03be\u03b5 \u03c7\u03c1\u03ce\u03bc\u03b1 \u03b1\u03c0\u03cc \u03c4\u03b1 \u03ba\u03cd\u03ba\u03bb\u03bf\u03c5\u03c2 \u03c0\u03b1\u03c1\u03b1\u03ba\u03ac\u03c4\u03c9.<\/p>\n <p>3. \u03a3\u03c7\u03b5\u03b4\u03af\u03b1\u03c3\u03b5 \u03b3\u03cd\u03c1\u03c9 \u03b1\u03c0\u03cc \u03c4\u03bf \u03ad\u03c0\u03b9\u03c0\u03bb\u03bf \u03bc\u03b5 polygon.<\/p>\n <p>4. \u03a7\u03c1\u03b7\u03c3\u03b9\u03bc\u03bf\u03c0\u03bf\u03af\u03b7\u03c3\u03b5 Undo, \u0394\u03b9\u03b1\u03b3\u03c1\u03b1\u03c6\u03ae \u03ae \u0391\u03c0\u03bf\u03b8\u03ae\u03ba\u03b5\u03c5\u03c3\u03b7 \u03b5\u03b9\u03ba\u03cc\u03bd\u03b1\u03c2.<\/p>\n<\/div>\n\n<div id=\"controls\">\n <input type=\"file\" id=\"upload\" accept=\"image\/*\">\n <button id=\"newMask\">\u039d\u03ad\u03b1 \u039c\u03ac\u03c3\u03ba\u03b1<\/button>\n <button id=\"undo\">Undo<\/button>\n <button id=\"clear\">\u0394\u03b9\u03b1\u03b3\u03c1\u03b1\u03c6\u03ae \u038c\u03bb\u03c9\u03bd<\/button>\n <button id=\"save\">\u0391\u03c0\u03bf\u03b8\u03ae\u03ba\u03b5\u03c5\u03c3\u03b7<\/button>\n<\/div>\n\n<div id=\"maskList\"><\/div>\n<canvas id=\"canvas\"><\/canvas>\n\n<div id=\"colorPalette\"><\/div>\n\n<script>\n\/\/ \u03a7\u03c1\u03ce\u03bc\u03b1\u03c4\u03b1 Adamas Pro\nconst colors = [\n{code:\"01\",name:\"Blanco\",hex:\"#ffffff\"},{code:\"02\",name:\"Ivory Cream\",hex:\"#faf1dd\"},\n{code:\"03\",name:\"Linen\",hex:\"#dddddd\"},{code:\"04\",name:\"Taupe Greize\",hex:\"#d7cec8\"},\n{code:\"05\",name:\"Sand\",hex:\"#e4d2aa\"},{code:\"06\",name:\"Sepia\",hex:\"#ad905a\"},\n{code:\"07\",name:\"Mocha Mousse\",hex:\"#b08d6a\"},{code:\"08\",name:\"Leather\",hex:\"#a96a2d\"},\n{code:\"09\",name:\"Chocolato\",hex:\"#744f42\"},{code:\"10\",name:\"Espresso\",hex:\"#5a3726\"},\n{code:\"11\",name:\"Burnt Brown\",hex:\"#58462b\"},{code:\"12\",name:\"Nero\",hex:\"#000000\"},\n{code:\"13\",name:\"Off Black\",hex:\"#3b4345\"},{code:\"14\",name:\"Dark Grey\",hex:\"#515151\"},\n{code:\"15\",name:\"Pepper\",hex:\"#4e544e\"},{code:\"16\",name:\"Roccia Grey\",hex:\"#bdbec3\"},\n{code:\"17\",name:\"Clear Sky\",hex:\"#b1adc1\"},{code:\"18\",name:\"Morning Fog\",hex:\"#babfb5\"},\n{code:\"19\",name:\"Vino\",hex:\"#9f021b\"},{code:\"20\",name:\"Rosseto\",hex:\"#af080f\"},\n{code:\"21\",name:\"Terracotta Rosso\",hex:\"#c55a4c\"},{code:\"22\",name:\"Nude Pink\",hex:\"#ecbeb4\"},\n{code:\"23\",name:\"Rose Mist\",hex:\"#f598a3\"},{code:\"24\",name:\"Fucsia\",hex:\"#af2744\"},\n{code:\"25\",name:\"Bougainville\",hex:\"#78000e\"},{code:\"26\",name:\"Mandarino\",hex:\"#f1771f\"},\n{code:\"27\",name:\"Mango Split\",hex:\"#f0a311\"},{code:\"28\",name:\"Butter Cream\",hex:\"#f6e667\"},\n{code:\"29\",name:\"Royal Blue\",hex:\"#003771\"},{code:\"30\",name:\"Lavender\",hex:\"#475696\"},\n{code:\"31\",name:\"Blue Jean\",hex:\"#417080\"},{code:\"32\",name:\"Lagoon\",hex:\"#588c7c\"},\n{code:\"33\",name:\"Pavone\",hex:\"#1c4755\"},{code:\"34\",name:\"Wood Pine\",hex:\"#27431d\"},\n{code:\"35\",name:\"Olive\",hex:\"#6f712b\"},{code:\"36\",name:\"Leaf\",hex:\"#516b46\"},\n{code:\"37\",name:\"Sea Salt\",hex:\"#8bc094\"},{code:\"38\",name:\"Magenda\",hex:\"#910e48\"}\n];\n\nconst upload=document.getElementById('upload');\nconst canvas=document.getElementById('canvas');\nconst ctx=canvas.getContext('2d');\nconst newMaskBtn=document.getElementById('newMask');\nconst undoBtn=document.getElementById('undo');\nconst clearBtn=document.getElementById('clear');\nconst saveBtn=document.getElementById('save');\nconst maskList=document.getElementById('maskList');\nconst paletteContainer=document.getElementById('colorPalette');\n\nlet image=null;\nlet drawing=false;\nlet masks=[];\nlet currentMask=null;\n\n\/\/ \u0394\u03b7\u03bc\u03b9\u03bf\u03c5\u03c1\u03b3\u03af\u03b1 \u03c7\u03c1\u03c9\u03bc\u03b1\u03c4\u03bf\u03bb\u03bf\u03b3\u03af\u03bf\u03c5\ncolors.forEach(c=>{\n const wrapper=document.createElement('div');\n const btn=document.createElement('button');\n btn.style.background=c.hex;\n btn.title=c.code + \" \" + c.name;\n btn.onclick=()=>{ \n if(currentMask) currentMask.color=c.hex; \n updatePaletteHighlight();\n redraw();\n };\n const label=document.createElement('div');\n label.textContent=c.code + \" \" + c.name;\n wrapper.appendChild(btn);\n wrapper.appendChild(label);\n paletteContainer.appendChild(wrapper);\n});\n\nfunction updatePaletteHighlight(){\n paletteContainer.querySelectorAll('button').forEach(btn=>{\n if(currentMask && btn.style.background === currentMask.color){\n btn.style.border=\"4px solid #000\";\n } else { btn.style.border=\"2px solid #888\"; }\n });\n}\n\n\/\/ Upload \u03c6\u03c9\u03c4\u03bf\u03b3\u03c1\u03b1\u03c6\u03af\u03b1\u03c2\nupload.addEventListener('change',e=>{\n const file=e.target.files[0];\n if(!file) return;\n const reader=new FileReader();\n reader.onload=evt=>{\n image=new Image();\n image.onload=()=>{\n canvas.width=image.width>800?800:image.width;\n canvas.height=image.height>600?600:image.height;\n redraw();\n };\n image.src=evt.target.result;\n };\n reader.readAsDataURL(file);\n});\n\n\/\/ \u03a3\u03c7\u03b5\u03b4\u03af\u03b1\u03c3\u03b7 polygon\ncanvas.addEventListener('mousedown',e=>{\n if(!currentMask) return;\n drawing=true;\n currentMask.path.push(getPos(e));\n redraw();\n});\ncanvas.addEventListener('mousemove',e=>{\n if(drawing && currentMask){\n currentMask.path.push(getPos(e));\n redraw();\n }\n});\ncanvas.addEventListener('mouseup',e=>{ drawing=false; });\ncanvas.addEventListener('mouseleave',e=>{ drawing=false; });\n\nfunction getPos(e){\n const rect=canvas.getBoundingClientRect();\n return {x:e.clientX-rect.left, y:e.clientY-rect.top};\n}\n\nfunction redraw(){\n if(!image) return;\n ctx.clearRect(0,0,canvas.width,canvas.height);\n ctx.drawImage(image,0,0,canvas.width,canvas.height);\n masks.forEach(m=>{\n if(m.path.length>0){\n ctx.fillStyle=m.color+'cc';\n ctx.beginPath();\n ctx.moveTo(m.path[0].x,m.path[0].y);\n for(let i=1;i<m.path.length;i++) ctx.lineTo(m.path[i].x,m.path[i].y);\n ctx.closePath();\n ctx.fill();\n }\n });\n}\n\n\/\/ \u039a\u03bf\u03c5\u03bc\u03c0\u03b9\u03ac \u03bb\u03b5\u03b9\u03c4\u03bf\u03c5\u03c1\u03b3\u03b9\u03ce\u03bd\nnewMaskBtn.addEventListener('click',()=>{\n currentMask={color:colors[0].hex,path:[]};\n masks.push(currentMask);\n updateMaskList();\n updatePaletteHighlight();\n});\n\nundoBtn.addEventListener('click',()=>{\n if(currentMask && currentMask.path.length>0){\n currentMask.path.pop();\n redraw();\n }\n});\n\nclearBtn.addEventListener('click',()=>{\n masks=[]; currentMask=null; updateMaskList(); redraw();\n});\n\nsaveBtn.addEventListener('click',()=>{\n if(!image) return;\n const link=document.createElement('a');\n link.download='visualized.png';\n link.href=canvas.toDataURL();\n link.click();\n});\n\n\/\/ \u039b\u03af\u03c3\u03c4\u03b1 \u03bc\u03ac\u03c3\u03ba\u03b1\u03c2\nfunction updateMaskList(){\n maskList.innerHTML=\"\";\n masks.forEach((m,i)=>{\n const div=document.createElement('div');\n div.className='maskItem';\n div.innerHTML='<span class=\"maskColorBox\" style=\"background:'+m.color+'\"><\/span>\u039c\u03ac\u03c3\u03ba\u03b1 '+(i+1);\n div.onclick=()=>{ currentMask=m; updatePaletteHighlight(); };\n const delBtn=document.createElement('button');\n delBtn.textContent='X';\n delBtn.style.marginLeft='4px';\n delBtn.onclick=(e)=>{ e.stopPropagation(); masks.splice(i,1); if(currentMask===m) currentMask=null; updateMaskList(); redraw(); };\n div.appendChild(delBtn);\n maskList.appendChild(div);\n });\n}\n<\/script>\n\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Adamas Pro Polygon Visualizer Adamas Pro \u2014 Polygon Visualizer 1. \u039a\u03ac\u03bd\u03b5 upload \u03c4\u03b7 \u03c6\u03c9\u03c4\u03bf\u03b3\u03c1\u03b1\u03c6\u03af\u03b1 \u03c4\u03c9\u03bd \u03b5\u03c0\u03af\u03c0\u03bb\u03c9\u03bd \u03c3\u03bf\u03c5. 2. \u039a\u03ac\u03bd\u03b5 \u03ba\u03bb\u03b9\u03ba \u03c3\u03c4\u03bf “\u039d\u03ad\u03b1 \u039c\u03ac\u03c3\u03ba\u03b1” \u03ba\u03b1\u03b9 \u03b5\u03c0\u03af\u03bb\u03b5\u03be\u03b5 \u03c7\u03c1\u03ce\u03bc\u03b1 \u03b1\u03c0\u03cc \u03c4\u03b1 \u03ba\u03cd\u03ba\u03bb\u03bf\u03c5\u03c2 \u03c0\u03b1\u03c1\u03b1\u03ba\u03ac\u03c4\u03c9. 3. \u03a3\u03c7\u03b5\u03b4\u03af\u03b1\u03c3\u03b5 \u03b3\u03cd\u03c1\u03c9 \u03b1\u03c0\u03cc \u03c4\u03bf \u03ad\u03c0\u03b9\u03c0\u03bb\u03bf \u03bc\u03b5 polygon. 4. \u03a7\u03c1\u03b7\u03c3\u03b9\u03bc\u03bf\u03c0\u03bf\u03af\u03b7\u03c3\u03b5 Undo, \u0394\u03b9\u03b1\u03b3\u03c1\u03b1\u03c6\u03ae \u03ae \u0391\u03c0\u03bf\u03b8\u03ae\u03ba\u03b5\u03c5\u03c3\u03b7 \u03b5\u03b9\u03ba\u03cc\u03bd\u03b1\u03c2. \u039d\u03ad\u03b1 \u039c\u03ac\u03c3\u03ba\u03b1 Undo \u0394\u03b9\u03b1\u03b3\u03c1\u03b1\u03c6\u03ae \u038c\u03bb\u03c9\u03bd \u0391\u03c0\u03bf\u03b8\u03ae\u03ba\u03b5\u03c5\u03c3\u03b7<\/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-170","page","type-page","status-publish","hentry"],"jetpack_sharing_enabled":true,"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/pglivaditi.gr\/index.php?rest_route=\/wp\/v2\/pages\/170","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pglivaditi.gr\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/pglivaditi.gr\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/pglivaditi.gr\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/pglivaditi.gr\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=170"}],"version-history":[{"count":17,"href":"https:\/\/pglivaditi.gr\/index.php?rest_route=\/wp\/v2\/pages\/170\/revisions"}],"predecessor-version":[{"id":566,"href":"https:\/\/pglivaditi.gr\/index.php?rest_route=\/wp\/v2\/pages\/170\/revisions\/566"}],"wp:attachment":[{"href":"https:\/\/pglivaditi.gr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=170"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}