From 5aa8b8a37facc480286bdd63b54e245dba80a610 Mon Sep 17 00:00:00 2001 From: jomo Date: Fri, 5 Aug 2022 21:58:53 +0200 Subject: [PATCH] set item coords via map, closes #3 --- static/80x80.svg | 2231 ++++++++++++++++++++++++++++++++++++++++++++++ static/form.html | 15 +- static/form.js | 42 + static/shared.js | 25 + static/style.css | 34 +- 5 files changed, 2341 insertions(+), 6 deletions(-) create mode 100644 static/80x80.svg create mode 100644 static/shared.js diff --git a/static/80x80.svg b/static/80x80.svg new file mode 100644 index 0000000..f66d103 --- /dev/null +++ b/static/80x80.svg @@ -0,0 +1,2231 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + /home/me/stuff/cccac/clubraum/plan_0.5.sh3d + Creator: FreeHEP Graphics2D Driver Producer: com.eteks.sweethome3d.swing.PlanComponent$SVGSupport$1 Revision: 12753 Source: me Date: Monday, June 6, 2022 11:58:58 PM CEST + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + /home/me/stuff/cccac/clubraum/plan_0.5.sh3d + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/static/form.html b/static/form.html index ab29a11..b6745f5 100644 --- a/static/form.html +++ b/static/form.html @@ -4,6 +4,7 @@ in? +

in?

@@ -16,11 +17,15 @@ - - - - - + Coordinates (click on map) + +
+ +
+
+ + + diff --git a/static/form.js b/static/form.js index 22ae40b..b2f0949 100644 --- a/static/form.js +++ b/static/form.js @@ -34,6 +34,8 @@ function fillForm() { document.getElementById('content').value = item.content; document.getElementById('note').value = item.note; document.getElementById('hidden').checked = item.hidden; + + coordsToMap(item.coords_bl, item.coords_tr); } const saveBtn = document.getElementById('save'); @@ -101,3 +103,43 @@ function del() { }); } } + +let clicks = {x: [], y: []}; +function mapClick(e) { + let x = Math.floor(31 / e.target.width * e.layerX); + let y = Math.floor(10 / e.target.height * e.layerY); + + let humanPos = (x, y) => { + return `${String.fromCharCode(65 + 8 - y)}${x}`; + }; + + if (x > 0 && x < 31 && y > 0 && y < 9) { + if (clicks.x.length > 1) { + clicks.x = [x]; + clicks.y = [y]; + } else { + clicks.x.push(x); + clicks.y.push(y); + } + + if (clicks.x.length > 1) { + clicks.x.sort((a,b) => a-b); + clicks.y.sort((a,b) => a-b); + renderMap(clicks.x, clicks.y); + + let coords_bl = humanPos(clicks.x[0], clicks.y[1]); + let coords_tr = humanPos(clicks.x[1], clicks.y[0]); + + document.getElementById('coords_bl').value = coords_bl; + document.getElementById('coords_tr').value = coords_tr; + } + } +} + +function formCoordsToMap() { + const coords_bl = document.getElementById('coords_bl').value || ''; + const coords_tr = document.getElementById('coords_tr').value || ''; + if (coords_bl.length > 1 && coords_tr.length > 1) { + coordsToMap(coords_bl, coords_tr); + } +} diff --git a/static/shared.js b/static/shared.js new file mode 100644 index 0000000..10a5128 --- /dev/null +++ b/static/shared.js @@ -0,0 +1,25 @@ +function renderMap(xx, yy) { + if (xx[0] > 0 && xx[0] < 31 && yy[0] > 0 && yy[0] < 9 && + xx[1] > 0 && xx[1] < 31 && yy[1] > 0 && yy[1] < 9 && + xx[1] >= xx[0] && yy[1] >= yy[0]) { + let grid = document.getElementById('grid'); + grid.style.top = `${yy[0]*10}%`; + grid.style.left = `${100/31*xx[0]}%`; + grid.style.height = `${(yy[1] - yy[0] + 1) * 10}%`; + grid.style.width = `${100/31*(xx[1] - xx[0] + 1)}%`; + } else { + alert(`invalid coordinates x=${xx} y=${yy}`); + } +} + +function coordsToMap(coords_bl, coords_tr) { + let bl_y = coords_bl[0]; + let tr_y = coords_tr[0]; + let bl_x = parseInt(coords_bl.slice(1)); + let tr_x = parseInt(coords_tr.slice(1)); + + bl_y = 8 - (bl_y.charCodeAt(0) - 65); + tr_y = 8 - (tr_y.charCodeAt(0) - 65); + + renderMap([bl_x, tr_x], [tr_y, bl_y]); +} \ No newline at end of file diff --git a/static/style.css b/static/style.css index bdbd379..489e22a 100644 --- a/static/style.css +++ b/static/style.css @@ -91,7 +91,7 @@ h2 { font-weight: bold; text-align: center; font-size: 1.5em; - margin-bottom: 0.5em; + margin: 0.5em 0; cursor: pointer; } @@ -112,6 +112,12 @@ form label { margin-bottom: 0.3em; } +form label[for=coords_bl], form label[for=coords_tr], #coords_bl, #coords_tr { + display: inline-block; + min-width: unset; + width: 50%; +} + input, textarea, select { display: block; width: 100%; @@ -134,3 +140,29 @@ input[type=checkbox] { textarea { min-height: 8em; } + +#plan { + position: relative; + border: 1px solid black; + background: #fff; +} + +#plan img { + width: 100%; + display: block; +} + +form #plan { + margin: 0.3em 0 1em 0; +} + +#grid { + position: absolute; + pointer-events: none; + outline: 2px solid #f00; + background: #ff08; +} + +#grid:not([style]) { + outline: none; +} \ No newline at end of file