From 9a177b814d5da9a094b6a028ce3fa4a13458b9f5 Mon Sep 17 00:00:00 2001 From: asivery Date: Wed, 6 Apr 2022 15:29:40 +0200 Subject: [PATCH] Added the ability to selectively override images, removed old, commented-out code from atlas.js, added more info into the info block (position, area). --- web/_js/atlas.js | 96 ++++--------------- web/_js/infoblock.js | 24 ++++- web/_js/stats.js | 7 -- web/_js/view.js | 32 ++++++- .../Put the image overrides in this directory | 0 5 files changed, 69 insertions(+), 90 deletions(-) create mode 100644 web/imageOverrides/Put the image overrides in this directory diff --git a/web/_js/atlas.js b/web/_js/atlas.js index 72b75f33..92bada94 100644 --- a/web/_js/atlas.js +++ b/web/_js/atlas.js @@ -29,86 +29,30 @@ window.addEventListener("error", function (e) { document.getElementById("loadingContent").innerHTML = errorMessage; }); -function pointIsInPolygon (point, polygon) { - // ray-casting algorithm based on - // http://www.ecse.rpi.edu/Homepages/wrf/Research/Short_Notes/pnpoly.html - - var x = point[0], y = point[1]; - - var inside = false; - for (var i = 0, j = polygon.length - 1; i < polygon.length; j = i++) { - var xi = polygon[i][0], yi = polygon[i][1]; - var xj = polygon[j][0], yj = polygon[j][1]; - - var intersect = ((yi > y) != (yj > y)) - && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); - if (intersect) inside = !inside; - } - return inside; -}; - -//console.log("There are "+atlas.length+" entries in the Atlas."); - -/* -atlas.sort(function(a, b) { - if (a.id < b.id) { - return -1; - } - if (a.id > b.id) { - return 1; - } - // a must be equal to b - return 0; -}); - -for(var i = 0; i < atlas.length; i++) { - if(atlas[i-1]){ - if(atlas[i-1].id == atlas[i].id) { - console.log(atlas[i-1].id + ": "+ atlas[i-1].name); - console.log(atlas[i ].id + ": "+ atlas[i ].name); - } +function getPositionOfEntry(entry){ + let startX = 2000, startY = 2000; + for(let [x, y] of entry.path){ + startX = Math.min(x, startX); + startY = Math.min(y, startY) } + if(startX === 2000 || startY === 2000) return null; + return [parseInt(startX), parseInt(startY)]; } -console.log("biggest id: "+atlas[atlas.length-1].id + ", " + atlas[atlas.length-1].name); -*/ -/* -for(var i = 0; i < atlas.length; i++) { - if(typeof atlas[i].website == "undefined") { - console.log(atlas[i].name); - } else if(atlas[i].website.trim() != "") { - if(atlas[i].website.trim().substring(0, 4) != "http") { - console.log(atlas[i].name + ": " + atlas[i].website); - } - } -} -*/ +// Modified from https://stackoverflow.com/a/33670691 +function calcPolygonArea(vertices) { + var total = 0; -// sort by center.y, so that lines will overlap less + for (var i = 0, l = vertices.length; i < l; i++) { + var addX = vertices[i][0]; + var addY = vertices[i == vertices.length - 1 ? 0 : i + 1][1]; + var subX = vertices[i == vertices.length - 1 ? 0 : i + 1][0]; + var subY = vertices[i][1]; -/* + total += (addX * addY * 0.5); + total -= (subX * subY * 0.5); + } -// Populate with test data - -for(var i = 0; i < 10000; i++) { - var x = ~~(Math.random() * 1000)+0.5; - var y = ~~(Math.random() * 1000)+0.5; - var w = ~~(Math.random()*100); - var h = ~~(Math.random()*100); - atlas.push( { - "id": 5, - "name": "test"+(i+3), - "website": "", - "subreddit": "", - "center": [0, 0], - "path":[ - [x, y], - [x+w, y], - [x+w, y+h], - [x, y+h] - ] - }); -} - -*/ + return Math.floor(Math.abs(total)); +} \ No newline at end of file diff --git a/web/_js/infoblock.js b/web/_js/infoblock.js index edbaccb1..759e0e32 100644 --- a/web/_js/infoblock.js +++ b/web/_js/infoblock.js @@ -1,4 +1,16 @@ function createInfoBlock(entry) { + function createInfoParagraph(name, value){ + let entryParagraphPositionElement = document.createElement("p"); + let nameElement = document.createElement("span"); + nameElement.style.fontWeight = "bold"; + nameElement.innerText = name; + let valueElement = document.createElement("span"); + valueElement.innerText = value; + entryParagraphPositionElement.appendChild(nameElement); + entryParagraphPositionElement.appendChild(valueElement); + return entryParagraphPositionElement; + } + var element = document.createElement("div"); element.className = "object"; @@ -15,6 +27,15 @@ function createInfoBlock(entry) { descElement.innerText = entry.description; element.appendChild(descElement); } + + let [x, y] = entry.center; + element.appendChild(createInfoParagraph("Position: ", `${Math.floor(x)}x${Math.floor(y)}`)); + + if(entry.path){ + let area = calcPolygonArea(entry.path); + element.appendChild(createInfoParagraph("Area: ", `${area} pixels`)); + } + if (entry.website) { let websiteLinkElement = document.createElement("a"); websiteLinkElement.target = "_blank"; @@ -39,9 +60,8 @@ function createInfoBlock(entry) { element.appendChild(subredditLinkElement); } } - let idElement = document.createElement("p"); + let idElement = createInfoParagraph("ID: ", entry.id); idElement.style.fontFamily = "Dejavu Sans Mono, sans, Sans-Serif;"; - idElement.innerText = "id: " + entry.id; element.appendChild(idElement); return element; diff --git a/web/_js/stats.js b/web/_js/stats.js index b75bafcb..2a88e87f 100644 --- a/web/_js/stats.js +++ b/web/_js/stats.js @@ -21,13 +21,6 @@ for(var q = 0; q < atlas.length; q++){ area = Math.abs(area/2); - if(atlas[q].name == "Companion Cube"){ - var w = atlas[q].path[1][0] - atlas[q].path[0][0]; - var h = atlas[q].path[2][1] - atlas[q].path[1][1]; - console.log(w, h, w*h); - console.log(area, Math.sqrt(area)); - } - areasSum += area; areas.push(area); diff --git a/web/_js/view.js b/web/_js/view.js index 51c107e0..124118b3 100644 --- a/web/_js/view.js +++ b/web/_js/view.js @@ -273,12 +273,12 @@ function initView(){ //var id = parseInt(window.location.hash.substring(3)); - var entry = atlas.filter(function(e){ + var entries = atlas.filter(function(e){ return e.id === id; }); - if (entry.length === 1){ - entry = entry[0]; + if (entries.length === 1){ + let entry = entries[0]; document.title = entry.name + " on the 2022 /r/place Atlas"; @@ -532,7 +532,6 @@ function initView(){ applyView(); } if(document.documentElement.clientWidth < 500){ - objectsContainer.innerHTML = ""; entriesListShown = false; @@ -591,7 +590,7 @@ function initView(){ } } - function render(){ + async function render(){ context.clearRect(0, 0, canvas.width, canvas.height); @@ -636,6 +635,29 @@ function initView(){ context.globalCompositeOperation = "source-out"; context.drawImage(backgroundCanvas, 0, 0); + if(hovered.length === 1 && hovered[0].path.length && hovered[0].overrideImage){ + let undisputableHovered = hovered[0]; + // Find the left-topmost point of all the paths + let entryPosition = getPositionOfEntry(undisputableHovered); + if(entryPosition){ + const [startX, startY] = entryPosition; + let overrideImage = new Image(); + const loadingPromise = new Promise((res, rej) => { + overrideImage.onerror = rej; + overrideImage.onload = res; + }); + overrideImage.src = "imageOverrides/" + undisputableHovered.overrideImage; + try{ + await loadingPromise; + context.globalCompositeOperation = "source-over"; + context.drawImage(overrideImage, startX, startY); + }catch(ex){ + console.log("Cannot override image."); + console.log(ex); + } + } + } + for(var i = 0; i < hovered.length; i++){ var path = hovered[i].path; diff --git a/web/imageOverrides/Put the image overrides in this directory b/web/imageOverrides/Put the image overrides in this directory new file mode 100644 index 00000000..e69de29b