├── map.png
├── index.html
├── README.md
├── LICENSE
├── data.js
└── index.js
/map.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/progressbar/space-map/master/map.png
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
15 | 
16 |
17 |
18 |
19 |
20 |
21 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # space-map
2 |
3 | # start
4 |
5 | Clone the repo and move to it's base directory
6 |
7 | ## with server
8 |
9 | ```bash
10 | $ npm i -g http-server
11 | $ http-server
12 | ```
13 |
14 | Navigate to http://localhost:8080 or the other chosen path
15 |
16 | ## without server (some things may go wrong)
17 |
18 | Navigate to `file:///index.html`
19 |
20 | # controls
21 |
22 | black textarea - pick the current working label
23 |
24 | backspace - remove last point. If there are no more points on the label, the label gets deleted
25 |
26 | arrow keys - move the last dot in that direction
27 |
28 | click - create a new point
29 |
30 | # extracting
31 |
32 | data - it's `console.log`ged at every change
33 |
34 | image - right click the image, and the raster of the paths will be selected. Then pick "copy image" or "save image"
35 |
36 | # saving current path for future use
37 |
38 | copy-paste the logged output to line 3 of `data.js`
39 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2018 Copot Matei
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/data.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable */
2 | const data =
3 | {"ProgressBar":[[278,62],[810,52],[1193,43],[1195,890],[783,921],[14,941],[16,231],[276,225]],"cowork":[[367,254],[362,598],[958,600],[973,795],[556,794],[558,903],[21,913],[20,597],[40,597],[40,573],[23,573],[22,258],[37,258],[37,237],[285,237],[285,251]],"meetupArea":[[482,263],[506,263],[506,254],[937,253],[974,794],[557,802],[557,901],[387,907],[382,598],[488,598],[480,368]],"entrance":[[286,252],[292,572],[384,573],[384,595],[487,595],[480,371],[366,370],[367,252]],"meetingRoom":[[974,792],[960,603],[1186,600],[1186,865],[1132,874],[1126,807],[1120,807],[1124,872],[1070,874],[1064,813],[1058,813],[1065,873],[1008,878],[1003,816],[998,605]],"restrooms":[[1031,246],[1036,243],[1040,233],[1061,231],[1063,193],[1032,191],[1032,183],[1060,183],[1063,130],[1054,128],[1052,123],[1060,123],[1062,72],[978,73],[978,84],[967,84],[967,118],[1012,121],[1012,127],[968,127],[967,141],[957,141],[957,107],[908,107],[908,184],[990,182],[992,244],[993,252],[1030,252]],"shower":[[978,246],[980,245],[983,193],[907,193],[906,243],[940,246],[937,255],[974,254]],"kitchen":[[1120,252],[1120,244],[1185,243],[1187,67],[1071,73],[1070,251]],"bkbStairs":[[557,830],[776,826],[990,810],[995,880],[783,897],[558,903]],"elevator":[[380,254],[381,358],[385,358],[385,365],[443,367],[443,358],[467,356],[468,254]],"managementRoom":[[741,257],[741,250],[730,250],[728,110],[761,110],[761,80],[867,77],[868,110],[897,110],[897,246],[788,247],[788,256]],"fireStairs":[[312,252],[312,232],[306,232],[304,155],[292,155],[290,84],[710,81],[712,234],[365,233],[366,250]],"entranceColumn":[[358,597],[358,573],[382,573],[382,594]],"meetupColumn":[[701,597],[700,573],[724,573],[724,595]],"hackerspaceColumn":[[1040,597],[1040,573],[1063,573],[1063,595]],"hackerspace":[[961,601],[937,254],[1185,250],[1186,600]],"treetiDesks1":[[21,572],[358,575],[358,467],[22,467]],"treetiDesks2":[[286,305],[287,393],[21,395],[23,305]],"treetiDesks":[[23,574],[356,574],[356,466],[290,466],[287,392],[287,305],[285,236],[40,240],[40,257],[23,257]],"biotronDesks":[[21,694],[357,694],[358,777],[20,782]],"miscDesks":[[20,913],[38,911],[414,905],[411,863],[23,873]],"hotDesks1":[[557,796],[558,668],[671,675],[664,792]],"hotDesks2":[[807,792],[806,677],[908,675],[910,790]],"hotDesks":[[561,796],[558,668],[911,675],[911,790]],"clothesHanger":[[452,372],[454,432],[482,431],[477,370]],"projector":[[658,580],[658,600],[680,600],[677,578]],"projectorScreen":[[481,277],[744,273],[744,277],[484,284]],"fireDoors":[[311,235],[364,235],[364,252],[312,252]],"elevatorDoors":[[383,357],[383,366],[442,368],[442,361]],"managementDoors":[[742,257],[742,252],[788,248],[788,255]],"showerDoors":[[941,254],[974,254],[974,248],[941,245]],"restroomsDoors":[[994,251],[1028,252],[1028,245],[996,245]],"kitchenDoors":[[1072,254],[1116,251],[1116,244],[1071,243]],"outsideDoors":[[281,152],[290,152],[292,87],[282,87]]}
4 | ;
5 |
--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
1 | /* global window, c, img, pre, data, input */
2 |
3 | c.width = img.width;
4 | c.height = img.height;
5 |
6 | const ctx = c.getContext('2d');
7 |
8 | const noClicks = [input, pre];
9 | let lastPath = [];
10 | let lastPathString = '';
11 | let lastNode = [];
12 |
13 | const [x, y] = [0, 1];
14 | const [
15 | backspaceKey,
16 | spaceKey,
17 | beginArrowKeys,
18 | endArrowKeys,
19 | ] = [
20 | 8,
21 | 32,
22 | 37,
23 | 40,
24 | ];
25 |
26 |
27 | const draw = () => {
28 | ctx.clearRect(0, 0, c.width, c.height);
29 |
30 | const paths = Object.keys(data);
31 | pre.textContent = paths.join('\n');
32 |
33 | let lastNodeColor = '';
34 |
35 | paths.forEach((pathString, pathIndex) => {
36 | const path = data[pathString];
37 | const isLastPath = pathString === lastPathString;
38 | ctx.lineWidth = isLastPath ? 4 : 1;
39 | const color = `hsla(${(pathIndex / paths.length) * 360}, 80%, 50%, ${isLastPath ? 0.3 : 0.8})`;
40 | ctx.fillStyle = color;
41 | ctx.strokeStyle = color;
42 |
43 | let [avgX, avgY] = [0, 0];
44 | let [minX, minY] = [Infinity, Infinity];
45 | let [maxX, maxY] = [-Infinity, -Infinity];
46 |
47 | ctx.beginPath();
48 | data[pathString].forEach((node, coordIndex) => {
49 | const [px, py] = node;
50 |
51 | ctx[`${coordIndex === 0 ? 'move' : 'line'}To`](px, py);
52 | avgX += px / path.length;
53 | avgY += py / path.length;
54 |
55 | if(lastNode === node) {
56 | lastNodeColor = color;
57 | }
58 |
59 | minX = Math.min(minX, px);
60 | minY = Math.min(minY, py);
61 | maxX = Math.max(maxX, px);
62 | maxY = Math.max(maxY, py);
63 | });
64 |
65 | ctx.closePath();
66 | ctx.stroke();
67 |
68 | ctx.font = `${Math.sqrt((maxX - minX) * (maxY - minY)) / 10}px monospace`;
69 |
70 | ctx.fillText(pathString, avgX - (ctx.measureText(pathString).width / 2), avgY);
71 | });
72 |
73 | // eslint-disable-next-line no-console
74 | console.log(JSON.stringify(data));
75 | };
76 | draw();
77 |
78 | window.onclick = (e) => {
79 | if (noClicks.includes(e.target)) {
80 | return;
81 | }
82 |
83 | if (!data[input.value]) {
84 | data[input.value] = [];
85 | }
86 |
87 | lastPathString = input.value;
88 | lastPath = data[input.value];
89 | lastNode = [
90 | e.clientX,
91 | e.clientY,
92 | ];
93 | data[input.value].push(lastNode);
94 |
95 | draw();
96 | };
97 | const speed = 1;
98 | const movements = [
99 | [-1, 0],
100 | [0, -1],
101 | [1, 0],
102 | [0, 1],
103 | ];
104 | window.onkeydown = (e) => {
105 | if (noClicks.includes(e.target)) {
106 | return;
107 | }
108 |
109 | if (e.keyCode === backspaceKey) {
110 | lastPath.pop();
111 |
112 | if (lastPath.length === 0) {
113 | delete data[lastPathString];
114 | }
115 |
116 | draw();
117 | }
118 | console.log(e.keyCode, spaceKey);
119 | if (e.keyCode === spaceKey) {
120 | // eslint-disable-next-line no-console
121 | console.log(JSON.stringify(data));
122 | }
123 |
124 | // if arrows, move last point on path
125 | if (e.keyCode >= beginArrowKeys && e.keyCode <= endArrowKeys) {
126 | const [vx, vy] = movements[e.keyCode - 37];
127 | lastNode[x] += vx * speed;
128 | lastNode[y] += vy * speed;
129 |
130 | draw();
131 | }
132 | };
133 |
--------------------------------------------------------------------------------