diff --git a/macrovision.css b/macrovision.css
index 92baebfe..4440b685 100644
--- a/macrovision.css
+++ b/macrovision.css
@@ -75,6 +75,10 @@ body.toggle-entity-name .entity-name,
filter: brightness(var(--brightness)) drop-shadow(0px 0px 5px gold);
}
+.entity-box.prevSelected > img {
+ filter: brightness(var(--brightness)) drop-shadow(0px 0px 5px darkorange);
+}
+
body.toggle-entity-glow .entity-box:not(.selected) > img{
filter: brightness(var(--brightness)) drop-shadow(0px 0px 2px white);
}
@@ -695,6 +699,14 @@ option.filtered {
background: #ffffff11;
}
+.ratio-info {
+ position: absolute;
+ top: 5%;
+ right: 5%;
+ z-index: 1002;
+ pointer-events: none;
+}
+
#zoom-out {
left: 0%;
top: 0%;
diff --git a/macrovision.html b/macrovision.html
index b3535615..f5766899 100644
--- a/macrovision.html
+++ b/macrovision.html
@@ -279,6 +279,9 @@
+
+ sdfasdofnsdn
+
diff --git a/macrovision.js b/macrovision.js
index 611563d8..9cae7fc5 100644
--- a/macrovision.js
+++ b/macrovision.js
@@ -1,5 +1,7 @@
let selected = null;
+let prevSelected = null;
let selectedEntity = null;
+let prevSelectedEntity = null;
let entityIndex = 0;
@@ -527,8 +529,42 @@ function updateEntityElement(entity, element) {
}
}
+function updateRatios() {
+ if (config.showRatios) {
+ if (selectedEntity !== null && prevSelectedEntity !== null && selectedEntity !== prevSelectedEntity) {
+ let first = selectedEntity.currentView.height;
+ let second = prevSelectedEntity.currentView.height;
+
+ let text = ""
+
+ if (first.toNumber("meters") < second.toNumber("meters")) {
+ text += selectedEntity.name + " is " + math.format(math.divide(second, first), { precision: 5 }) + " times smaller than " + prevSelectedEntity.name;
+ } else {
+ text += selectedEntity.name + " is " + math.format(math.divide(first, second), { precision: 5 })+ " times taller than " + prevSelectedEntity.name;
+ }
+
+ text += "\n";
+
+ let apparentHeight = math.multiply(math.divide(second, first), math.unit(6, "feet"));
+
+ if (config.units === "metric") {
+ apparentHeight = apparentHeight.to("meters");
+ }
+
+ text += prevSelectedEntity.name + " looks " + math.format(apparentHeight, { precision: 3}) + " tall to " + selectedEntity.name;
+
+ document.querySelector(".ratio-info").innerText = text;
+ } else {
+ document.querySelector(".ratio-info").innerText = "";
+ }
+ }
+
+}
+
function updateSizes(dirtyOnly = false) {
+ updateRatios();
+
if (config.lockYAxis) {
config.y = 0;
}
@@ -1173,6 +1209,9 @@ function deselect(e) {
if (selected) {
selected.classList.remove("selected");
}
+ if (prevSelected) {
+ prevSelected.classList.remove("prevSelected");
+ }
document.getElementById("options-selected-entity-none").selected = "selected";
@@ -1191,12 +1230,24 @@ function deselect(e) {
}
function select(target) {
+
+ if (prevSelected !== null) {
+ prevSelected.classList.remove("prevSelected");
+ }
+
+ prevSelected = selected;
+ prevSelectedEntity = selectedEntity;
deselect();
selected = target;
selectedEntity = entities[target.dataset.key];
+ updateRatios();
+
document.getElementById("options-selected-entity-" + target.dataset.key).selected = "selected";
+ if (prevSelected !== null && config.showRatios && selected !== prevSelected) {
+ prevSelected.classList.add("prevSelected");
+ }
selected.classList.add("selected");
displayAttribution(selectedEntity.views[selectedEntity.view].image.source);
@@ -2188,6 +2239,23 @@ const settingsData = {
config.autoFitSize = param;
}
},
+ "show-ratios": {
+ name: "Show Ratios",
+ desc: "Show the proportions between the current selection and the most recent selection.",
+ type: "toggle",
+ default: true,
+ get value() {
+ return config.showRatios;
+ },
+ set value(param) {
+ config.showRatios = param;
+ if (param) {
+ document.body.querySelector(".ratio-info").style.display = "block";
+ } else {
+ document.body.querySelector(".ratio-info").style.display = "none";
+ }
+ }
+ },
"units": {
name: "Default Units",
desc: "Which kind of unit to use by default",
@@ -2204,6 +2272,7 @@ const settingsData = {
},
set value(param) {
config.units = param;
+ updateSizes();
}
},
"names": {