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.

216 lines
7.4 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 -->
2 years ago
<div id="loading" class="animate__animated">
2 years ago
<img src="https://shortpixel.com/img/spinner2.gif" alt="">
2 years ago
</div>
2 years ago
2 years ago
<!-- Here is where the text is rendered -->
<!-- <div id="text">
2 years ago
<p class="marquee">
2 years ago
2 years ago
</p>
2 years ago
</div> -->
2 years ago
<img id="pic" src="">
<div class="viewport">
2 years ago
<div id="view" class="scene3D-container animate__animated">
2 years ago
<div class="scene3D">
<!-- Here is where the pics are rendered -->
</div>
</div>
</div>
<script>
2 years ago
var findMe = document.querySelectorAll('.element');
var picsBeforeScroll = 20
var fetchInterval = 4000 //3200
var scrollTime = 80
var end
2 years ago
let n = 0
let scrollVal = 0
// Automate scrolling
function pageScroll(scroll) {
window.scrollBy(0, scroll);
2 years ago
scrolldelay = setTimeout(pageScroll, scrollTime, scroll);
2 years ago
}
2 years ago
// ViewPort check
var notInViewport = function(elem) {
var distance = elem.getBoundingClientRect();
return (distance.bottom < 0)
};
2 years ago
2 years ago
// Fetch data from a json read by Flask
2 years ago
function getData() {
url = "/api/datapoint";
2 years ago
// Random value function
2 years ago
function r(x) {
return Math.floor(Math.random() * 300 + x)
}
axios.get(url)
.then(function(response) {
2 years ago
findMe.forEach(element => {
if (notInViewport(element)) {
if (element.id == end) {
pageScroll(0)
setTimeout(() => {
document.getElementById('view').classList.add('animate__bounceOut');
}, 3000);
} else {
element.remove()
let currentDeleted = element.id
// document.getElementById(currentDeleted).style.display = "none"
}
}
});
2 years ago
if (response.data.pics[String(n)]) {
2 years ago
if (response.data.pics[String(n)].endsWith('.')) {
// Inject the last sentence to view
document.querySelector('.scene3D').innerHTML += `<div><h1>${response.data.pics[String(n)]}</h1></div>`
} else {
if (n >= picsBeforeScroll) {
// pageScroll(0)
document.querySelector('.scene3D').innerHTML += `<div><img class="element" id="num${String(n)}" style='margin:${r(1)}% ${r(2)}% ${r(3)}% -${r(4)}%' src=${response.data.pics[String(n)]}></div>`
pageScroll(2)
} else {
document.querySelector('.scene3D').innerHTML += `<div><img class="element" id="num${String(n)}" style='margin:${r(1)}% ${r(2)}% ${r(3)}% -${r(4)}%' src=${response.data.pics[String(n)]}></div>`
}
2 years ago
}
2 years ago
n++
2 years ago
findMe = document.querySelectorAll('.element');
2 years ago
} else {
2 years ago
end = `num${n-5}`
2 years ago
}
})
2 years ago
2 years ago
.catch(function(error) {
console.log(error);
});
}
// Loading gif for 15 seconds
// then start to scroll after 7 seconds
2 years ago
setTimeout(() => {
document.getElementById('loading').classList.add('animate__fadeOut')
var intervalID = window.setInterval(getData, fetchInterval);
}, 5000); //TODO: rimettere 15s
2 years ago
2 years ago
// Delete passed pictures
// document.addEventListener('scroll', function() {
// findMe.forEach(element => {
// if (notInViewport(element)) {
// if (element.id == end) {
// pageScroll(0)
// setTimeout(() => {
// document.getElementById('view').classList.add('animate__bounceOut');
// }, 3000);
// } else {
// element.remove()
// let currentDeleted = element.id
// // document.getElementById(currentDeleted).style.display = "none"
// }
// }
// });
// })
2 years ago
// 3D stuff
2 years ago
var numberOfItems = 280;
2 years ago
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;
2 years ago
// 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
// );
2 years ago
}
</script>
</body>
</html>