projects / z_archive / floorplanning.git / blame
| Commit | Line | Data |
|---|---|---|
| 74d590bd JR |
1 | <!DOCTYPE html> |
| 2 | <svg id="map" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1525 405" width="1525"> | |
| 3 | <style> | |
| 4 | .block { | |
| 5 | fill: rgba(0,255,255,0.8); | |
| 6 | } | |
| 7 | </style> | |
| 8 | <?php | |
| 9 | require 'config.php'; | |
| 10 | $sth = $dbh->prepare('SELECT id, x, y, width, height, occupant FROM rects'); | |
| 11 | $sth->execute(); | |
| 12 | $sth->bind_result($id, $x, $y, $w, $h, $occupant); | |
| 13 | while ($sth->fetch()) { | |
| 14 | echo '<rect x="' . $x . '" y="' . $y . '" width="' . $w . '" height="' . $h . '" class="block" />' . PHP_EOL; | |
| 15 | } | |
| 16 | $sth->close(); | |
| 17 | ||
| 18 | $sth = $dbh->prepare('SELECT id, pointset, occupant FROM polys'); | |
| 19 | $sth->execute(); | |
| 20 | $sth->bind_result($id, $pointset, $occupant); | |
| 21 | while ($sth->fetch()) { | |
| 22 | echo '<polygon points="' . $pointset . '" class="block" />' . PHP_EOL; | |
| 23 | } | |
| 24 | ?> | |
| 25 | <image href="https://private.simplynuc.com/john-test/plan/495.svg" width="1525" /> | |
| 26 | </svg> | |
| 27 | <script> | |
| 28 | var max_variance = 5; | |
| 29 | ||
| 30 | var svgNS = "http://www.w3.org/2000/svg"; | |
| 31 | ||
| 32 | var ele = document.getElementById('map'); | |
| 33 | var startpos = null; | |
| 34 | var poslist = []; | |
| 35 | var in_progress = null; | |
| 36 | ele.addEventListener('mousedown', function (ev) { | |
| 37 | in_progress = document.createElementNS(svgNS, 'circle'); | |
| 38 | in_progress.setAttributeNS(null,'r',5); | |
| 39 | in_progress.setAttributeNS(null,'cx',ev.offsetX); | |
| 40 | in_progress.setAttributeNS(null,'cy',ev.offsetY); | |
| 41 | ele.appendChild(in_progress); | |
| 42 | startpos = [ev.offsetX, ev.offsetY]; | |
| 43 | }); | |
| 44 | ele.addEventListener('mouseup', function (ev) { | |
| 45 | if (startpos) { | |
| 46 | if (!poslist.length && (Math.abs(startpos[0]-ev.offsetX) > max_variance || Math.abs(startpos[1]-ev.offsetY) > max_variance)) { | |
| 47 | // rectangle mode | |
| 48 | console.log(startpos, [ev.offsetX, ev.offsetY]); | |
| 49 | in_progress.parentNode.removeChild(in_progress); | |
| 50 | } else { | |
| 51 | // polygon mode | |
| 52 | poslist.push(in_progress); | |
| 53 | } | |
| 54 | startpos = null; | |
| 55 | } | |
| 56 | }); | |
| 57 | ele.addEventListener('mousemove', function (ev) { | |
| 58 | if (startpos && !poslist.length) { | |
| 59 | if (Math.abs(startpos[0]-ev.offsetX) > max_variance || Math.abs(startpos[1]-ev.offsetY) > max_variance) { | |
| 60 | if (in_progress.tagName == 'circle') { | |
| 61 | in_progress.parentNode.removeChild(in_progress); | |
| 62 | in_progress = null; | |
| 63 | } | |
| 64 | if (!in_progress) { | |
| 65 | in_progress = document.createElementNS(svgNS, 'rect'); | |
| 66 | } | |
| 67 | in_progress.setAttributeNS(null,'fill','rgba(0,0,255,0.5)'); | |
| 68 | in_progress.setAttributeNS(null,'x',startpos[0]); | |
| 69 | in_progress.setAttributeNS(null,'y',startpos[1]); | |
| 70 | in_progress.setAttributeNS(null,'width',ev.offsetX-startpos[0]); | |
| 71 | in_progress.setAttributeNS(null,'height',ev.offsetY-startpos[1]); | |
| 72 | ele.appendChild(in_progress); | |
| 73 | // display in-progress rectangle | |
| 74 | } | |
| 75 | } | |
| 76 | }); | |
| 77 | ||
| 78 | function clear_poslist() { | |
| 79 | poslist.forEach(function (v) { v.parentNode.removeChild(v); }); | |
| 80 | poslist = []; | |
| 81 | } | |
| 82 | </script> |