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

2 years ago
<!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>