vitrinekast
/
granularchive
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

added superzoom

Browse Source
master
vitrinekast 1 year ago
parent 287c2adf5a
commit ebc1ab7fc5
3 changed files with 117 additions and 42 deletions
Show Stats Download Patch File Download Diff File

22
index.php
Unescape Escape View File

@ -1,7 +1,7 @@
<?php
$path = $_SERVER['DOCUMENT_ROOT'];
$root = ".";
$dataset = file_get_contents('exiftool.json');
$path = $_SERVER['DOCUMENT_ROOT'];
$root = ".";
$dataset = file_get_contents('exiftool.json');
?>
<!DOCTYPE html>
@ -25,18 +25,18 @@
</head>
<body>
<div id="container"></div>
for
<header>
<h1>Granularchive</h1>
</header>
<aside class="text fn-text">
<h2 class='fn-title'></h2>
<iframe src="" frameborder="0"></iframe>
</aside>
<main>
<div id="container"></div>
<section class="loading">building graph...</section>
<?php print("<pre>" . print_r($dataset, true) . "</pre>"); ?>
<section class="loading fn-loading">building graph...</section>
<script type="text/javascript">
var dataset = <?php echo $dataset; ?>;
@ -44,9 +44,9 @@
</script>
</main>
<footer>
<audio controls src="/small-filesize/output_lower.mp3" autoplay></audio>
<footer>
<audio controls src="/small-filesize/output_lower.mp3" class="fn-audio" autoplay></audio>
</footer>
<script src="https://cdn.jsdelivr.net/npm/d3@7"></script>
<script type="text/javascript" src="script.js"> </script>

95
script.js
Unescape Escape View File

@ -1,10 +1,15 @@
// Create some global variables
var width, height, audioEl;
var width, height, audioEl, textEl;
let currentTransform;
var links = [],
nodes = [],
groups = [];
let zoomLvl = 1;
let lastK = 0;
let svg;
var zoom;
let simulation;
const ROOT = "https://hub.xpub.nl/chopchop/archive_non-tree/";
function parseExifData(files) {
// loop trough all files in JSON and add each to the list of nodes
@ -72,8 +77,9 @@ function parseExifData(files) {
function createGraph() {
// Create a scale to set the radius based on a file size (0 to 3 GB)
var rScale = d3.scaleLinear().domain([0, 30000000]).range([2, 15]);
currentTransform = [width / 2, height / 2, height];
const simulation = d3
simulation = d3
.forceSimulation(nodes)
.force("center", d3.forceCenter(width / 2, height / 2))
.force(
@ -95,7 +101,7 @@ function createGraph() {
// .alphaTarget(0.3); // stay hot
const svg = d3
svg = d3
.create("svg") //
.attr("width", width)
.attr("height", height);
@ -132,11 +138,20 @@ function createGraph() {
.attr("r", 3)
.attr("stroke", "black")
.attr("fill", (d) => {
return d.FileType === "directory" ? "orange" : "white";
if (d.FileType === "directory") {
return "orange";
} else if (d.FileType === "TXT") {
return "blue";
} else if (d.FileType === "PNG") {
return "pink";
} else {
return "white";
}
})
// .attr("fill","rgba(255,255,255,.5)")
.attr("label", (d) => d.id)
.attr("path", (d) => d.id)
.attr("file-type", (d) => d.FileType)
.attr("group", (d) => d.group);
// Add a drag behavior.
@ -161,17 +176,15 @@ function createGraph() {
});
// add zoom behavior
svg.call(
d3
.zoom()
.extent([
[0, 0],
[width, height],
])
.scaleExtent([1, 100])
.on("zoom", zoomed)
);
var zoom = d3
.zoom()
.extent([
[0, 0],
[width, height],
])
.scaleExtent([1, 100])
.on("zoom", zoomed);
svg.call(zoom);
// add some mouse behaviors
svg
.selectAll("circle")
@ -185,10 +198,20 @@ function createGraph() {
d3.select(this).attr("fill", "black");
var path = this.getAttribute("path");
svg
.transition() //
.duration(300)
.ease(d3.easeCubic)
.call(zoom.translateTo, this.getAttribute("cx"), this.getAttribute("cy"));
// do things based on the file type
if (path.match(/\.(?:wav|mp3|flac)$/i)) {
playAudio(path);
}
if (path.match(/\.(?:txt|png)$/i)) {
playText(path);
}
})
.on("mouseleave", function () {
if (d3.select(this).attr("fill") !== "black") {
@ -234,20 +257,56 @@ function createGraph() {
}
function playAudio(src) {
console.log("play audio: ", src);
audioEl.src = src;
audioEl.currentTime = 0;
audioEl.play();
}
function playText(src) {
textEl.setAttribute("active", "true");
textEl.querySelector(".fn-title").textContent = src.split("/")[src.split("/").length - 1];
textEl.querySelector("iframe").src = ROOT + "/" + src;
window.setTimeout(function () {
svg.on("click", onBodyClick);
}, 300);
}
function onBodyClick() {
textEl.setAttribute("active", "false");
svg.on("click", null);
}
function updateWindow() {
width = window.innerWidth - 10;
height = window.innerHeight - 10;
simulation.force("center", d3.forceCenter(width / 2, height / 2));
svg.attr("width", width).attr("height", height);
}
window.onload = function () {
// TODO: add resize function
width = window.innerWidth;
height = window.innerHeight;
width = window.innerWidth - 10;
height = window.innerHeight - 10;
audioEl = document.querySelector(".fn-audio");
textEl = document.querySelector(".fn-text");
parseExifData(dataset);
createGraph();
var filetypes = [];
nodes.forEach((node) => {
if (filetypes.indexOf(node.FileType) == -1) {
filetypes.push(node.FileType);
}
});
console.log(filetypes);
// clear loading screen
document.querySelector(".loading").style.display = "none";
// Add resize features
d3.select(window).on("resize.updatesvg", updateWindow);
};

42
styles.css
Unescape Escape View File

@ -11,15 +11,36 @@ body {
}
footer,
header {
header,
aside {
position: fixed;
bottom: .5rem;
left: .5rem;
width: calc(100% - 1rem);
background-color: white;
border: 2px solid black;
box-shadow: -5px -5px 0px rgba(0, 0, 0, .1);
padding: .5rem 1rem;
text-align: center;
position: fixed;
bottom: 0;
width: 100%;
background-color: white;
}
aside {
width: 30%;
min-width: 500px;
right: 0;
top: 4rem;
left: auto;
right: .5rem;
bottom: 6rem;
display: none;
flex-direction: column;
}
aside[active="true"] {
display: flex;
}
aside iframe {
flex-grow: 1;
}
h1 {
@ -28,19 +49,14 @@ h1 {
header {
bottom: auto;
top: 0;
font-size: 1rem;
top: .5rem;
text-align: center;
}
footer audio {
width: 100%;
}
main {
margin-top: 4rem;
margin-bottom: 4rem;
}
pre {
max-width: 50svw;
}

Write Preview
Loading…
Cancel
Save