You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
190 lines
5.9 KiB
HTML
190 lines
5.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<link rel="stylesheet" href="/static/style.css">
|
|
<link rel=" stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.27.2/axios.min.js" integrity="sha512-odNmoc1XJy5x1TMVMdC7EMs3IVdItLPlCeL5vSUPN2llYKMJ2eByTTAIiiuqLg+GdNr9hF6z81p27DArRFKT7A==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
|
|
|
<title>Harvesting the Net</title>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<!-- Loading gif -->
|
|
<!-- <div id="loading" class="animate__animated">
|
|
<img src="https://shortpixel.com/img/spinner2.gif" alt="">
|
|
</div> -->
|
|
|
|
<div id="text">
|
|
<p class="marquee">
|
|
<!-- Here is where the text is rendered -->
|
|
</p>
|
|
</div>
|
|
|
|
<img id="pic" src="">
|
|
<div class="viewport">
|
|
<div class="scene3D-container">
|
|
<div class="scene3D">
|
|
<!-- Here is where the pics are rendered -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<script>
|
|
// TODO: list setup to museum
|
|
|
|
// TODO: check higher quality pics
|
|
// TODO: comments on scripts
|
|
// TODO: automation scripts in parallel
|
|
// TODO: credits at the end
|
|
// TODO: attempt on button to start everything
|
|
|
|
|
|
let n = 0
|
|
let scrollVal = 0
|
|
|
|
// Automate scrolling
|
|
function pageScroll(scroll) {
|
|
window.scrollBy(0, scroll);
|
|
scrolldelay = setTimeout(pageScroll, 10, scroll);
|
|
}
|
|
|
|
|
|
|
|
// After 100 pics appeared, delete the farer pic
|
|
// at the bottom every time a new pic is added
|
|
//
|
|
// Otherwise the computational work would be too heavy
|
|
|
|
function removeElements(num) {
|
|
let hold = 100
|
|
if (num >= hold) {
|
|
var elem = document.getElementById(`num${num-hold}`);
|
|
elem.remove()
|
|
console.log(num)
|
|
}
|
|
}
|
|
|
|
|
|
|
|
// Fetch data from a json read by Flask
|
|
|
|
function getData() {
|
|
|
|
url = "/api/datapoint";
|
|
|
|
function r(x) {
|
|
return Math.floor(Math.random() * 300 + x)
|
|
}
|
|
|
|
axios.get(url)
|
|
.then(function(response) {
|
|
if (response.data.pics[String(n)]) {
|
|
scrollVal = 1
|
|
pageScroll(scrollVal)
|
|
// Inject the HTML page with the src of the scraped picture and the scraped text of the metadata from Google
|
|
document.querySelector(".marquee").insertAdjacentHTML("afterbegin", `${response.data.meta[String(n)]} --- `)
|
|
document.querySelector('.scene3D').innerHTML += `<div><img id="num${String(n)}" style='margin:${r(1)}% ${r(2)}% ${r(3)}% -${r(4)}%' src=${response.data.pics[String(n)]}></div>`
|
|
n++
|
|
} else {
|
|
// if the data is empty, stop the automatic scrolling
|
|
console.log('pause')
|
|
scrollVal = 0
|
|
pageScroll(scrollVal)
|
|
}
|
|
removeElements(n)
|
|
})
|
|
.catch(function(error) {
|
|
console.log(error);
|
|
});
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
// Loading gif for 15 seconds
|
|
// then start to scroll after 7 seconds
|
|
|
|
// setTimeout(() => {
|
|
// document.getElementById('loading').classList.add('animate__fadeOut')
|
|
// var intervalID = window.setInterval(getData, 2000);
|
|
// setTimeout(() => {
|
|
// pageScroll(scrollVal)
|
|
// }, 7000);
|
|
// }, 15000);
|
|
|
|
|
|
|
|
|
|
// 3D stuff
|
|
|
|
var numberOfItems = 20000;
|
|
|
|
document.addEventListener("DOMContentLoaded", function() {
|
|
window.addEventListener("scroll", moveCamera);
|
|
window.addEventListener("mousemove", moveCameraAngle);
|
|
setSceneHeight();
|
|
})
|
|
|
|
function moveCamera() {
|
|
document.documentElement.style.setProperty("--cameraZ", window.pageYOffset);
|
|
}
|
|
|
|
function setSceneHeight() {
|
|
|
|
const itemZ = parseFloat(
|
|
getComputedStyle(document.documentElement).getPropertyValue("--itemZ")
|
|
);
|
|
const scenePerspective = parseFloat(
|
|
getComputedStyle(document.documentElement).getPropertyValue(
|
|
"--scenePerspective"
|
|
)
|
|
);
|
|
const cameraSpeed = parseFloat(
|
|
getComputedStyle(document.documentElement).getPropertyValue("--cameraSpeed")
|
|
);
|
|
|
|
const height =
|
|
window.innerHeight +
|
|
scenePerspective * cameraSpeed +
|
|
itemZ * cameraSpeed * numberOfItems;
|
|
|
|
document.documentElement.style.setProperty("--viewportHeight", height);
|
|
}
|
|
|
|
function moveCameraAngle(event) {
|
|
const xGap =
|
|
(((event.clientX - window.innerWidth / 2) * 100) /
|
|
(window.innerWidth / 2)) *
|
|
-1;
|
|
const yGap =
|
|
(((event.clientY - window.innerHeight / 2) * 100) /
|
|
(window.innerHeight / 2)) *
|
|
-1;
|
|
const newPerspectiveOriginX =
|
|
perspectiveOrigin.x + (xGap * perspectiveOrigin.maxGap) / 100;
|
|
const newPerspectiveOriginY =
|
|
perspectiveOrigin.y + (yGap * perspectiveOrigin.maxGap) / 40;
|
|
|
|
document.documentElement.style.setProperty(
|
|
"--scenePerspectiveOriginX",
|
|
newPerspectiveOriginX
|
|
);
|
|
document.documentElement.style.setProperty(
|
|
"--scenePerspectiveOriginY",
|
|
newPerspectiveOriginY
|
|
);
|
|
}
|
|
</script>
|
|
</body>
|
|
|
|
</html> |