Merge pull request #1052 from placeAtlas/time-travel-2
|
@ -648,16 +648,101 @@ #exportOverlay {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
#zoomControls {
|
#bottomBar {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: 10px;
|
bottom: 10px;
|
||||||
left: 370px;
|
left: 10px;
|
||||||
width: 90px;
|
right: 10px;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
gap: 10px;
|
||||||
|
z-index: 100;
|
||||||
}
|
}
|
||||||
|
|
||||||
.listHidden #zoomControls {
|
div:not(.listHidden) > #bottomBar {
|
||||||
left: 10px;
|
left: 370px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1120px) {
|
||||||
|
div:not(.listHidden) > #bottomBar {
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.listHidden #author {
|
||||||
|
flex: 1 !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 800px) {
|
||||||
|
#bottomBar {
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
#timeControls {
|
||||||
|
min-width: calc(100vw - 390px) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
#author {
|
||||||
|
flex: 1;
|
||||||
|
min-width: 100% !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#timeControls {
|
||||||
|
flex: 1;
|
||||||
|
background-color: #555;
|
||||||
|
border: 1px #000 solid;
|
||||||
|
font-size: 12px;
|
||||||
|
text-align: center;
|
||||||
|
min-width: 300px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#timeControls input {
|
||||||
|
height: 100%;
|
||||||
|
background: #555;
|
||||||
|
-webkit-appearance: none;
|
||||||
|
appearance: none;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slider::-webkit-slider-thumb {
|
||||||
|
-webkit-appearance: none;
|
||||||
|
appearance: none;
|
||||||
|
width: 10px;
|
||||||
|
height: 25px;
|
||||||
|
background: #d3d3d3;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slider::-moz-range-thumb {
|
||||||
|
appearance: none;
|
||||||
|
width: 10px;
|
||||||
|
height: 25px;
|
||||||
|
background: #d3d3d3;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
#author {
|
||||||
|
background-color: #555;
|
||||||
|
border: 1px #000 solid;
|
||||||
|
padding: 3px;
|
||||||
|
font-size: 12px;
|
||||||
|
z-index: 1100;
|
||||||
|
min-width: 320px;
|
||||||
|
text-align: center;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#author p {
|
||||||
|
margin: 0;
|
||||||
|
line-height: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
#zoomControls {
|
||||||
|
width: 90px;
|
||||||
|
display: flex;
|
||||||
|
align-self: flex-end;
|
||||||
}
|
}
|
||||||
|
|
||||||
#zoomControls button {
|
#zoomControls button {
|
||||||
|
@ -715,8 +800,8 @@ @media (max-width: 500px) {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
div:not(.listHidden) > #zoomControls {
|
div:not(.listHidden) > #bottomBar {
|
||||||
display: none;
|
display: none !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
div:not(.listHidden) > button#hideListButton {
|
div:not(.listHidden) > button#hideListButton {
|
||||||
|
@ -736,18 +821,6 @@ @media (max-width: 500px) {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 750px) {
|
|
||||||
div:not(.listHidden) > #author {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 400px) {
|
|
||||||
#author {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 350px) {
|
@media (max-width: 350px) {
|
||||||
#entriesListContainer > nav > a#drawLink {
|
#entriesListContainer > nav > a#drawLink {
|
||||||
display: none;
|
display: none;
|
||||||
|
@ -947,18 +1020,6 @@ #entriesList .object {
|
||||||
text-align: left;
|
text-align: left;
|
||||||
}
|
}
|
||||||
|
|
||||||
#author {
|
|
||||||
position: absolute;
|
|
||||||
bottom: 10px;
|
|
||||||
right: 10px;
|
|
||||||
background-color: #555;
|
|
||||||
border: 1px #000 solid;
|
|
||||||
padding: 3px;
|
|
||||||
font-size: 12px;
|
|
||||||
z-index: 1100;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
#aboutContainer {
|
#aboutContainer {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 50px;
|
top: 50px;
|
||||||
|
|
Before Width: | Height: | Size: 182 KiB |
Before Width: | Height: | Size: 1.1 MiB |
Before Width: | Height: | Size: 2.4 MiB |
Before Width: | Height: | Size: 4 MiB |
Before Width: | Height: | Size: 4.1 MiB |
Before Width: | Height: | Size: 1 MiB |
Before Width: | Height: | Size: 86 KiB |
Before Width: | Height: | Size: 457 KiB |
BIN
web/_img/place/1648822500.png
Normal file
After Width: | Height: | Size: 513 KiB |
BIN
web/_img/place/1648847036.png
Normal file
After Width: | Height: | Size: 441 KiB |
BIN
web/_img/place/1648870452.png
Normal file
After Width: | Height: | Size: 563 KiB |
BIN
web/_img/place/1648893666.png
Normal file
After Width: | Height: | Size: 523 KiB |
BIN
web/_img/place/1648917500.png
Normal file
After Width: | Height: | Size: 506 KiB |
BIN
web/_img/place/1648942113.png
Normal file
After Width: | Height: | Size: 1.2 MiB |
BIN
web/_img/place/1648956234.png
Normal file
After Width: | Height: | Size: 1.3 MiB |
BIN
web/_img/place/1648968061.png
Normal file
After Width: | Height: | Size: 1.3 MiB |
BIN
web/_img/place/1648979987.png
Normal file
After Width: | Height: | Size: 1.3 MiB |
BIN
web/_img/place/1648992274.png
Normal file
After Width: | Height: | Size: 1.3 MiB |
BIN
web/_img/place/1649012915.png
Normal file
After Width: | Height: | Size: 1.4 MiB |
BIN
web/_img/place/1649037182.png
Normal file
After Width: | Height: | Size: 2.8 MiB |
BIN
web/_img/place/1649060793.png
Normal file
After Width: | Height: | Size: 2.8 MiB |
BIN
web/_img/place/1649084741.png
Normal file
After Width: | Height: | Size: 2.8 MiB |
Before Width: | Height: | Size: 953 KiB After Width: | Height: | Size: 953 KiB |
|
@ -92,6 +92,8 @@ async function init(){
|
||||||
// a must be equal to b
|
// a must be equal to b
|
||||||
return 0;
|
return 0;
|
||||||
});
|
});
|
||||||
|
//TEMP FOR TIME TRAVEL
|
||||||
|
atlasBackup = atlas;
|
||||||
|
|
||||||
|
|
||||||
//console.log(document.documentElement.clientWidth, document.documentElement.clientHeight);
|
//console.log(document.documentElement.clientWidth, document.documentElement.clientHeight);
|
||||||
|
|
112
web/_js/time.js
Normal file
|
@ -0,0 +1,112 @@
|
||||||
|
const timeConfig = [
|
||||||
|
{
|
||||||
|
timestamp: 1648822500,
|
||||||
|
url: "/_img/place/1648822500.png",
|
||||||
|
image: null
|
||||||
|
},
|
||||||
|
{
|
||||||
|
timestamp: 1648847036,
|
||||||
|
url: "/_img/place/1648847036.png",
|
||||||
|
image: null
|
||||||
|
},
|
||||||
|
{
|
||||||
|
timestamp: 1648870452,
|
||||||
|
url: "/_img/place/1648870452.png",
|
||||||
|
image: null
|
||||||
|
},
|
||||||
|
{
|
||||||
|
timestamp: 1648893666,
|
||||||
|
url: "/_img/place/1648893666.png",
|
||||||
|
image: null
|
||||||
|
},
|
||||||
|
{
|
||||||
|
timestamp: 1648917500,
|
||||||
|
url: "/_img/place/1648917500.png",
|
||||||
|
image: null
|
||||||
|
},
|
||||||
|
{
|
||||||
|
timestamp: 1648942113,
|
||||||
|
url: "/_img/place/1648942113.png",
|
||||||
|
image: null
|
||||||
|
},
|
||||||
|
{
|
||||||
|
timestamp: 1648956234,
|
||||||
|
url: "/_img/place/1648956234.png",
|
||||||
|
image: null
|
||||||
|
},
|
||||||
|
{
|
||||||
|
timestamp: 1648968061,
|
||||||
|
url: "/_img/place/1648968061.png",
|
||||||
|
image: null
|
||||||
|
},
|
||||||
|
{
|
||||||
|
timestamp: 1648979987,
|
||||||
|
url: "/_img/place/1648979987.png",
|
||||||
|
image: null
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
timestamp: 1648992274,
|
||||||
|
url: "/_img/place/1648992274.png",
|
||||||
|
image: null
|
||||||
|
},
|
||||||
|
{
|
||||||
|
timestamp: 1649012915,
|
||||||
|
url: "/_img/place/1649012915.png",
|
||||||
|
image: null
|
||||||
|
},
|
||||||
|
{
|
||||||
|
timestamp: 1649037182,
|
||||||
|
url: "/_img/place/1649037182.png",
|
||||||
|
image: null
|
||||||
|
},
|
||||||
|
{
|
||||||
|
timestamp: 1649060793,
|
||||||
|
url: "/_img/place/1649060793.png",
|
||||||
|
image: null
|
||||||
|
},
|
||||||
|
{
|
||||||
|
timestamp: 1649084741,
|
||||||
|
url: "/_img/place/1649084741.png",
|
||||||
|
image: null
|
||||||
|
},
|
||||||
|
{
|
||||||
|
timestamp: 1649113199,
|
||||||
|
url: "/_img/place/final.png",
|
||||||
|
image: null,
|
||||||
|
showAtlas: true,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
let slider = document.getElementById("timeControlsSlider");
|
||||||
|
let image = document.getElementById("image");
|
||||||
|
|
||||||
|
let timeCallback = (a) => {};
|
||||||
|
let atlasBackup = [];
|
||||||
|
|
||||||
|
// SETUP
|
||||||
|
slider.max = timeConfig.length;
|
||||||
|
slider.value = timeConfig.length;
|
||||||
|
updateTime(timeConfig.length)
|
||||||
|
|
||||||
|
slider.oninput = (event) => {
|
||||||
|
updateTime(parseInt(event.target.value))
|
||||||
|
};
|
||||||
|
|
||||||
|
async function updateTime(index) {
|
||||||
|
let configObject = timeConfig[index-1];
|
||||||
|
if (!configObject.image) {
|
||||||
|
console.log("fetching");
|
||||||
|
let fetchResult = await fetch(configObject.url);
|
||||||
|
let imageBlob = await fetchResult.blob();
|
||||||
|
configObject.image = URL.createObjectURL(imageBlob);
|
||||||
|
}
|
||||||
|
image.src = configObject.image;
|
||||||
|
// TEMP ATLAS ONLY ON LAST TIMESTAMP
|
||||||
|
if (configObject.showAtlas) {
|
||||||
|
atlas = atlasBackup
|
||||||
|
} else {
|
||||||
|
atlas = []
|
||||||
|
}
|
||||||
|
timeCallback(atlas)
|
||||||
|
}
|
|
@ -155,6 +155,11 @@ function initView(){
|
||||||
|
|
||||||
buildObjectsList(null, null);
|
buildObjectsList(null, null);
|
||||||
|
|
||||||
|
timeCallback = (tempAtlas) => {
|
||||||
|
renderBackground(tempAtlas);
|
||||||
|
render();
|
||||||
|
}
|
||||||
|
|
||||||
// parse linked atlas entry id from link hash
|
// parse linked atlas entry id from link hash
|
||||||
/*if (window.location.hash.substring(3)){
|
/*if (window.location.hash.substring(3)){
|
||||||
zoom = 4;
|
zoom = 4;
|
||||||
|
|
|
@ -99,7 +99,8 @@ <h1 id="title">The 2022 /r/place Atlas</h1>
|
||||||
<canvas id="linesCanvas"></canvas>
|
<canvas id="linesCanvas"></canvas>
|
||||||
<div id="innerContainer">
|
<div id="innerContainer">
|
||||||
<canvas id="highlightCanvas" width="2000" height="2000"></canvas>
|
<canvas id="highlightCanvas" width="2000" height="2000"></canvas>
|
||||||
<img id="image" src="./_img/place-indexed-final-place.png" width="2000" height="2000" alt="Canvas of /r/place in the state of when the experiment was concluded." />
|
|
||||||
|
<img id="image" width="2000" height="2000" alt="Canvas of /r/place in the state of when the experiment was concluded." />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
@ -138,7 +139,19 @@ <h1 id="title">The 2022 /r/place Atlas</h1>
|
||||||
|
|
||||||
<button id="hideListButton"></button>
|
<button id="hideListButton"></button>
|
||||||
|
|
||||||
<div id="zoomControls"><button title="Zoom In" id="zoomInButton"></button><button title="Reset View" id="zoomResetButton"></button><button title="Zoom Out" id="zoomOutButton"></button></div>
|
<div id="bottomBar">
|
||||||
|
<div id="zoomControls">
|
||||||
|
<button title="Zoom In" id="zoomInButton"></button>
|
||||||
|
<button title="Reset View" id="zoomResetButton"></button>
|
||||||
|
<button title="Zoom Out" id="zoomOutButton"></button>
|
||||||
|
</div>
|
||||||
|
<div id="timeControls">
|
||||||
|
<input type="range" min="1" max="1" value="1" class="slider" id="timeControlsSlider">
|
||||||
|
</div>
|
||||||
|
<div id="author">
|
||||||
|
<p>Code by <a href="https://draemm.li/various/place-atlas/" target="_blank" rel="author">Roland Rytz</a>. Source on <a target="_blank" href="https://github.com/placeAtlas/atlas">GitHub</a>. This site is powered by <a href="https://www.netlify.com">Netlify</a>. Images provided by <a target="_blank" href="https://place.thatguyalex.com/">Alex Tsernoh</a>.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div id="drawControlsContainer">
|
<div id="drawControlsContainer">
|
||||||
<a id="drawBackButton" href="./">< Back to the Atlas</a>
|
<a id="drawBackButton" href="./">< Back to the Atlas</a>
|
||||||
|
@ -222,10 +235,8 @@ <h2>Donation Links</h2>
|
||||||
<br>
|
<br>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div id="author">
|
|
||||||
Code forked by <a href="https://place-atlas.stefanocoding.me/" target="_blank" rel="author">Stefano Haagmans</a>. Source on <a target="_blank" href="https://github.com/placeAtlas/atlas">GitHub</a>, Images provided by <a target="_blank" href="https://place.thatguyalex.com/">Alex Tsernoh</a>. This site is powered by <a href="https://www.netlify.com">Netlify</a>.
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
<script type="text/javascript" src="./_js/time.js?version=1.0.3"></script>
|
||||||
<script type="text/javascript" src="./_js/infoblock.js?version=1.0"></script>
|
<script type="text/javascript" src="./_js/infoblock.js?version=1.0"></script>
|
||||||
<script type="text/javascript" src="./_js/pointInPolygon.js?version=1.0"></script>
|
<script type="text/javascript" src="./_js/pointInPolygon.js?version=1.0"></script>
|
||||||
<script type="text/javascript" src="./_js/atlas.js?version=1.0.50"></script>
|
<script type="text/javascript" src="./_js/atlas.js?version=1.0.50"></script>
|
||||||
|
|