interfaces updated

app/cover.py

@@ -1,5 +1,6 @@
 import PyPDF2
 from wand.image import Image
+from wand.color import Color
 import io
 import os
 
@@ -19,7 +20,9 @@ def pdf_page_to_png(src_pdf, pagenum = 0, resolution = 72,):
     pdf_bytes.seek(0)
 
     img = Image(file = pdf_bytes, resolution = resolution)
-    img.convert("png")
+    img.background_color = Color('white')
+    img.alpha_channel = 'remove'
+    img.convert("jpeg")
 
     return img
 
@@ -45,17 +48,17 @@ def get_cover(file_path, filename):
 
     # Convert each page to a png image.
     for page in pages:
-        big_filename = "app/cover/"+page["filename"] + "_cover.png"
-        small_filename = "app/cover/"+page["filename"] + "cover_small" + ".png"
+        big_filename = "app/cover/"+page["filename"] + "_cover.jpeg"
+        #small_filename = "app/cover/"+page["filename"] + "cover_small" + ".jpeg"
 
-        img = pdf_page_to_png(src_pdf, pagenum = page["pagenum"], resolution = 200)
-        img.save(filename = big_filename)
+        img = pdf_page_to_png(src_pdf, pagenum = page["pagenum"], resolution = 130)
+        #img.save(filename = big_filename)
 
         # Ensmallen
-        img.transform("", "200")
-        img.save(filename = small_filename)
+        img.transform("", "250")
+        img.save(filename = big_filename)
 
-    return page["filename"] + "_cover.png"
+    return page["filename"] + "_cover.jpeg"
 
 #---
 #epub

app/static/css/style.css

@@ -548,3 +548,12 @@ nav { font-size: .7em }
 @media print {
     nav { display: none }
 }
+
+
+#interface_links{
+  font-size: 32px;
+  margin-top: 40px;
+}
+#interface_links a{
+  margin-right:10px;
+}

app/templates/home.html

@@ -9,10 +9,12 @@ On instance: {{server}} / From: {{client}}
 Feel free to browse our catalogue, interfaced in many different ways.
 </p>
 
-<a href="{{url_for('scape')}}">Scape</a>
+<div id = "interface_links">
 <a href="{{url_for('show_books_grid')}}">Grid</a>
 <a href="{{url_for('show_books')}}">List</a>
-
+<a href="{{url_for('volumetric_catalog')}}">Volumetric</a>
+<a href="{{url_for('scape')}}">Scape</a>
+</div>
 <br><br><br>
 
 {%if light%}

app/templates/scape_new.html

@@ -4,21 +4,35 @@
   <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
       <script src="{{ url_for("static", filename="js/d3.min.js") }}"></script>
+      <script src="{{ url_for("static", filename="js/jquery-3.3.1.min.js") }}"></script>
 <style>
+body{
+  width:100%;
+  height:100%;
+  padding: 0;
+  margin:0;
+
+}
 rect{
   width: 40px;
   height: 40px;
   stroke: black;
-  fill: yellow;
+  fill: none;
 }
 svg{
   width:100%;
   height:100%;
-
+  padding: 0;
+  margin:0;
 }
 .bg{
   fill: blue;
+  width: 100%;
+  height:100%;
+}
 
+.no_cover{
+fill: yellow;
 }
 
 </style>
@@ -59,7 +73,7 @@ d3.json("/api/books").then(function(data){
     .attr("height", height)
     .style("pointer-events", "all")
     .call(d3.zoom()
-            .scaleExtent([1/2, 4])
+            .scaleExtent([0.1, 6])
           .on("zoom", zoomed));
 
   function zoomed(){
@@ -78,25 +92,76 @@ g.attr("transform", d3.event.transform);
 //  .text(function(d){return d.title})
   .style("position", "absolute")
   .attr("transform", function (d) { return "translate("+d.scapeX+","+d.scapeY+")"})
-  .append("a")
   .call(d3.drag()
-    .container(function(){return this.parentNode})
-    .on("start", function(){})
-    .on("drag", function(d){
-      console.log("dragging", this, d3.event);
-      d3.select(this).attr("transform", "translate("+d3.event.x+"," +d3.event.y+")" )
+  .on("start", function(d) {
+    svg.selectAll("g.item").sort(function (a, b) { // select the parent and sort the path's
+      if (a.id != d.id) return -1;               // a is not the hovered element, send "a" to the back
+      else return 1;                             // a is the hovered element, bring "a" to the front
+  });
 })
-  )
-  .attr("xlink:href", function(d){return "/books/"+d.id})
-  .append("rect")
-  .attr("width", "40")
-  .attr("height", "40");
+  .on("drag", function(d,i) {
+
+  d.scapeX += d3.event.dx
+  d.scapeY += d3.event.dy
+  updateDB(d.id, d.scapeX, d.scapeY);
+  d3.select(this).attr("transform", function(d,i){
+    return "translate(" + [ d.scapeX,d.scapeY ] + ")"
+  })})
+);
+
+  var itemLink = g.selectAll("g.item")
+  .append("a")
+  .attr("xlink:href", function(d){return "/books/"+d.id});
+
+
+/*itemLink.append("rect")
+.attr("class", "no_cover")
+.attr('x', 0)
+.attr('y', 0)
+.attr('height', 60)
+.attr('width', 40);*/
+
+
+  itemLink.append("svg:image")
+.attr("class", "no_cover")
+.attr('x', 0)
+.attr('y', 0)
+.attr('height', 60)
+.attr('width', 40)
+.attr("xlink:href", function(d){if(d.cover!=null) return "/cover/"+d.cover});
+
+itemLink.append("text")
+.text(function(d){return d.title})
+.attr("x", 0)
+ .attr("y", 80)
+.style("font-size", "6px");
+/* .style("font-size", "10px")
+
+  .attr("width", 80);*/
   // update existing elements
   join.transition(1000).attr("transform", function (d) { return "translate("+d.scapeX+","+d.scapeY+")"});
   join.exit().remove();
 
 
 
+
+
+  function updateDB(id, xPos, yPos){
+    var postForm = { //Fetch form data
+   'id'     : id,
+   'x'     : xPos, //Store name fields value,
+   'y'     : yPos
+};
+
+    $.ajax({ //Process the form using $.ajax()
+  type      : 'POST', //Method type
+  url       : '/scape', //Your form processing file URL
+  data      : postForm, //Forms name
+  dataType  : 'json'
+});
+
+  }
+
 })
 
 </script>

app/templates/volumetric_catalog/Raycaster.js

@@ -0,0 +1,134 @@
+import { Ray } from '../math/Ray.js';
+
+/**
+ * @author mrdoob / http://mrdoob.com/
+ * @author bhouston / http://clara.io/
+ * @author stephomi / http://stephaneginier.com/
+ */
+
+function Raycaster( origin, direction, near, far ) {
+
+	this.ray = new Ray( origin, direction );
+	// direction is assumed to be normalized (for accurate distance calculations)
+
+	this.near = near || 0;
+	this.far = far || Infinity;
+
+	this.params = {
+		Mesh: {},
+		Line: {},
+		LOD: {},
+		Points: { threshold: 1 },
+		Sprite: {}
+	};
+
+	Object.defineProperties( this.params, {
+		PointCloud: {
+			get: function () {
+
+				console.warn( 'THREE.Raycaster: params.PointCloud has been renamed to params.Points.' );
+				return this.Points;
+
+			}
+		}
+	} );
+
+}
+
+function ascSort( a, b ) {
+
+	return a.distance - b.distance;
+
+}
+
+function intersectObject( object, raycaster, intersects, recursive ) {
+
+	if ( object.visible === false ) return;
+
+	object.raycast( raycaster, intersects );
+
+	if ( recursive === true ) {
+
+		var children = object.children;
+
+		for ( var i = 0, l = children.length; i < l; i ++ ) {
+
+			intersectObject( children[ i ], raycaster, intersects, true );
+
+		}
+
+	}
+
+}
+
+Object.assign( Raycaster.prototype, {
+
+	linePrecision: 1,
+
+	set: function ( origin, direction ) {
+
+		// direction is assumed to be normalized (for accurate distance calculations)
+
+		this.ray.set( origin, direction );
+
+	},
+
+	setFromCamera: function ( coords, camera ) {
+
+		if ( ( camera && camera.isPerspectiveCamera ) ) {
+
+			this.ray.origin.setFromMatrixPosition( camera.matrixWorld );
+			this.ray.direction.set( coords.x, coords.y, 0.5 ).unproject( camera ).sub( this.ray.origin ).normalize();
+
+		} else if ( ( camera && camera.isOrthographicCamera ) ) {
+
+			this.ray.origin.set( coords.x, coords.y, ( camera.near + camera.far ) / ( camera.near - camera.far ) ).unproject( camera ); // set origin in plane of camera
+			this.ray.direction.set( 0, 0, - 1 ).transformDirection( camera.matrixWorld );
+
+		} else {
+
+			console.error( 'THREE.Raycaster: Unsupported camera type.' );
+
+		}
+
+	},
+
+	intersectObject: function ( object, recursive, optionalTarget ) {
+
+		var intersects = optionalTarget || [];
+
+		intersectObject( object, this, intersects, recursive );
+
+		intersects.sort( ascSort );
+
+		return intersects;
+
+	},
+
+	intersectObjects: function ( objects, recursive, optionalTarget ) {
+
+		var intersects = optionalTarget || [];
+
+		if ( Array.isArray( objects ) === false ) {
+
+			console.warn( 'THREE.Raycaster.intersectObjects: objects is not an Array.' );
+			return intersects;
+
+		}
+
+		for ( var i = 0, l = objects.length; i < l; i ++ ) {
+
+			intersectObject( objects[ i ], this, intersects, recursive );
+
+		}
+
+		intersects.sort( ascSort );
+
+		return intersects;
+
+	}
+
+} );
+
+
+export { Raycaster };

app/templates/volumetric_catalog/ascii_json_js_4.html

@@ -0,0 +1,81 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Collection</title>
+    <script>
+        var booktitles = [
+                        {
+                            title: "Mac OS X Leopard Edition",
+                            id: "1",
+ 
+                        },
+                        {
+                            title: "The Qmail Handbook",
+                            id: "2",
+ 
+                        },
+                        {
+                            title: "Hardening Network Infrastructure: Bulletproof Your Systems Before You Are Hacked!",
+                            id: "3",
+ 
+                        },
+                        {
+                            title: "Cocoa Programming for Mac OS X Second Edition",
+                            id: "4",
+ 
+                        },
+                        {
+                            title: "LDAP System Administration",
+                            id: "5",
+ 
+                        }
+ 
+                        ];
+ 
+ 
+    </script>
+ 
+</head>
+<body>
+<ul>
+    <script>
+        for(i =0; i < booktitles.length;i++){
+            document.write('<h4>'+booktitles[i].title+'</h4>');
+ 
+            var myCoords = xyzGen(booktitles[i].title)
+            console.log("Coordinates of " + booktitles[i].title)
+            console.log("x : " + myCoords.x)
+            console.log("y : " + myCoords.y)
+            console.log("z : " + myCoords.z)
+ 
+        }
+    //  console.log(booktitles);
+ 
+        var x,y,z
+ 
+        function xyzGen(string) {
+            let coords = {
+                x: 0,
+                y: 0,
+                z: 0,
+            }
+            string = string.split(' ')
+ 
+            for (var i = 0; i < 3; i++) {
+                for (c in string[i]) {
+                    if (i == 0) {
+                        coords.x += string[i].charCodeAt(c)
+                    } else if (i == 1) {
+                        coords.y += string[i].charCodeAt(c)
+                    } else if (i == 2) {
+                        coords.z += string[i].charCodeAt(c)
+                    }
+                }
+            }
+            return coords
+        }
+    </script>
+</ul>
+ 
+</body>
+</html>

app/templates/volumetric_catalog/books9_final.html

@@ -0,0 +1,382 @@
+<!DOCTYPE html>
+
+<html>
+<head>
+    <title>XPPL VOLUMETRIC CATALOGUE </title>
+    <meta charset="utf-8">
+    <link href="https://fonts.googleapis.com/css?family=Karla" rel="stylesheet">
+    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
+    <style>
+        body{
+            cccccc;
+                font-family: 'Karla', sans-serif;
+                font-size:15px;
+
+                text-align:left;
+                background-color: #140b33;
+                margin: 0px;
+                overflow: hidden;
+            }
+            #info {
+                position: absolute;
+                top: 0px; width: 10%;
+                padding: 10px;
+            }
+            a {
+                color: #444b7c;
+            }
+
+            .swal-button {
+                padding: 7px 19px;
+                
+                background-color: #aca4c1;
+                font-size: 12px;
+                
+                
+}
+
+            .swal-title {
+                margin: 0px;
+                font-size: 16px;
+                box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.21);
+                margin-bottom: 28px;
+}
+
+            .swal-overlay {
+                background-color: rgba(20, 13, 50, 0.6);
+}
+            .swal-modal {
+                background-color: rgba(172, 164, 193, 1);
+                
+}
+            
+                
+
+    </style>
+</head>
+<body>
+    <div id="info"><a  target="_blank" rel="noopener">XPPL VOLUMETRIC CATALOGUE  <br> <br> Feel free to move around and explore the content of the library by clicking on the volumetric shapes</div>
+    <div id="container"></div>
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/4.4.0/bootbox.min.js"></script>
+    <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
+
+    <script src="three.min.js"></script>
+    <script src="OrbitControls.js"></script>
+
+    <script>
+
+
+var category2color = new Object();
+category2color["Technical"] = "#003d5d";
+category2color["Science/History"] = "#f23d5d";
+category2color["Media studies"] = "#8c3d5d";
+category2color["Philosophy"] = "#723d5d";
+category2color["Computer culture"] = "#423d5d";
+category2color["Design / writing / publishing"] = "#ff0000";
+category2color["Desk"] = "#09edff";
+category2color["Art"] = "#ffedff";
+category2color["Digital (Steve Trim 2 reading)"] = "#ffe1cc";
+category2color["Media Studies (Femke Trim 3)"] = "#00e1cc";
+category2color["Literature, Culture, Theory"] = "#00a1d4";
+
+category2color["default"] = "#cdc1ec";
+
+
+
+
+        console.clear();
+
+const MAX_DISTANCE = 13000;
+//
+const MIN_DISTANCE = 200;
+ 
+const MAX_SPHERE_RADIUS = 700;
+
+var bookTitles;
+var request = new XMLHttpRequest();
+request.open('GET', 'export.json', true);
+
+request.onload = function() {
+  if (request.status >= 200 && request.status < 400) {
+    var data = JSON.parse(request.responseText);
+    //bookTitles = data;
+    bookTitles = data.books[0];
+    
+    bookTitles.forEach(function(book) {
+      book.type = "sphere";
+      console.log('BOOK:', book);
+
+
+
+    });
+    console.log("got books", bookTitles)
+    // loaded data, start  
+    init();
+    animate();  
+  } else {
+    // We reached our target server, but it returned an error
+
+  }
+};
+
+request.onerror = function() {
+  // There was a connection error of some sort
+};
+
+request.send();
+
+
+// --- threeJS --- //
+var renderer, scene, camera, distance, raycaster, projector;
+
+var container = document.getElementById('container');
+var raycaster = new THREE.Raycaster(),INTERSECTED;
+var mouse = new THREE.Vector2();
+var distance = 400;
+
+// -- basic initialization -- //
+function init() {
+    renderer = new THREE.WebGLRenderer({
+        antialias: true
+    });
+    renderer.setSize(window.innerWidth, window.innerHeight);
+    renderer.setClearColor(0x140b33, 1);
+    container.appendChild(renderer.domElement);
+
+    scene = new THREE.Scene();
+    camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 0.2, 25000);
+    controls = new THREE.OrbitControls(camera);
+/*
+    controls = new THREE.OrbitControls(camera, renderer.domElement);
+    controls.maxDistance = MAX_DISTANCE * 3;
+    controls.target = new THREE.Vector3(0, 0, 0);
+    controls.rotateSpeed = .2;
+    controls.enableDamping = true;
+    console.log(controls.enableDamping);
+    controls.dampingFactor = .15;
+    controls.panSpeed = .15;
+    controls.screenSpacePanning = true;*/
+   
+
+
+
+
+    camera.position.set(100, 100, 2000);
+    controls.update();
+    scene.add(camera);
+
+    light = new THREE.PointLight(0xffffff, 1, 4000);
+    light.position.set(50, 0, 0);
+    light_two = new THREE.PointLight(0xffffff, 1, 4000);
+    light_two.position.set(-100, 800, 800);
+    lightAmbient = new THREE.AmbientLight(0x404040);
+    scene.add(light, light_two, lightAmbient);
+
+    // createSpheres();
+
+    createDiamond();
+
+    createSpace();
+
+    renderer.render(scene, camera);
+
+    document.addEventListener('mousemove', onMouseMove, false);
+    document.addEventListener('mousedown', onDocumentMouseDown, false);
+    window.addEventListener('resize', onWindowResize, false);
+}
+
+// -- diamonds -- //
+
+            
+function catInobject(obj, category){ //checks if category is in object, if so return corresponding color
+    if (obj.hasOwnProperty(category)) { 
+    var color = obj[category];
+    } else { var color = obj["default"];
+ }
+    return color;
+}
+
+function createDiamond() {
+    
+    diamondsGroup = new THREE.Object3D();
+    
+    
+        console.log();
+         
+        bookTitles.forEach(function (book) {
+            var chosencolor = catInobject(category2color, book.category);
+            var sphere = new THREE.SphereGeometry(1, Math.random() * 100, Math.random() * 100);
+            var material = new THREE.MeshPhongMaterial({
+                color: chosencolor,//Math.random() * 0xff00000 - 0xff00000,
+                shading: THREE.FlatShading
+            });
+            var sphere = new THREE.Mesh(sphere, material);
+            sphere.position.x = Math.random() * -distance * 6;
+            sphere.position.y = Math.random() * -distance * 2;
+            sphere.position.z = Math.random() * distance * 3;
+            sphere.rotation.y = Math.random() * 2 * Math.PI;
+            sphere.scale.x = sphere.scale.y = sphere.scale.z = Math.random() * 50 + 10;
+
+            sphere.userData = book;
+            diamondsGroup.add(sphere);
+
+        })
+        diamondsGroup.position.x = 1400;
+        scene.add(diamondsGroup);
+    
+};
+
+// -- dots on the back -- //
+function createSpace() {
+    
+    dots = new THREE.Object3D();
+
+    for (var i = 0; i < 1000; i++) {
+        var circleGeometry = new THREE.SphereGeometry(2, Math.random() * 5, Math.random() * 5);
+        var color;
+        if (Math.round(Math.random()) === 0) 
+            color = new THREE.Color('#003d5d');
+        else
+            //color = new THREE.Color('#f23d5d');
+            color = new THREE.Color('#4f2939');
+
+        var material = new THREE.MeshBasicMaterial({
+            color: color
+        });
+        material.flatShading = true;
+
+        //var material = new THREE.MeshBasicMaterial({
+            //color : new THREE.Color(Math.floor(Math.random() * 1) === 1),
+            //color : new THREE.Color(Math.random() * 0.5 + 0.5, Math.random() * 0.5 + 0.5, 0),
+            //shading: THREE.FlatShading,
+        //})
+        var circle = new THREE.Mesh(circleGeometry, material);
+        material.side = THREE.DoubleSide;
+
+        circle.position.x = Math.random() * -distance * 50;
+        circle.position.y = Math.random() * -distance * 8;
+        circle.position.z = Math.random() * distance * 5;
+        circle.rotation.y = Math.random() * 2 * Math.PI;
+        circle.scale.x = circle.scale.y = circle.scale.z = Math.random() * 6 + 5;
+        dots.add(circle);
+    }
+
+    dots.position.x = 14000;
+    dots.position.y = 1500;
+    dots.position.z = -4000;
+    dots.rotation.y = Math.PI * 600;
+    dots.rotation.z = Math.PI * 500;
+
+    scene.add(dots);
+}; 
+
+
+
+// -- events -- //
+function onMouseMove(event) {
+    mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
+    mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
+    mouseX = event.clientX - window.innerWidth / 2;
+    mouseY = event.clientY - window.innerHeight / 2;
+    camera.position.x += (mouseX - camera.position.x) * 0.01;
+    controls.update();
+    camera.position.y += (mouseY - camera.position.y) * 0.01;
+    controls.update();
+    camera.lookAt(scene.position);
+    controls.update();
+};
+
+function onDocumentMouseDown(event) {
+
+    event.preventDefault();
+    mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
+    mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
+
+    raycaster.setFromCamera(mouse, camera);
+
+    var intersects = raycaster.intersectObjects(diamondsGroup.children);
+    if (intersects.length > 0) {
+        var book = intersects[0].object.userData;
+        console.log("click", book);
+        //alert("book" + book.title);
+
+        //swal(book.title + book.authors);
+
+        swal(book.title + " \n " + " " + book.authors[0].author_name +   " \n" + book.category, {
+            button: {
+                text: "Open",
+            }
+            
+
+        }). then (function() {
+                window.location = "/books/"+book.id
+});
+       
+
+    }
+
+};
+
+function onDocumentMouseWheel( event ) {
+
+    fov -= event.wheelDeltaY * 0.05;
+    camera.projectionMatrix = THREE.Matrix4.makePerspective( fov, window.innerWidth / window.innerHeight, 1, 1100 );
+
+}
+
+
+function onWindowResize() {
+    camera.aspect = window.innerWidth / window.innerHeight;
+    renderer.setSize(window.innerWidth, window.innerHeight);
+    camera.updateProjectionMatrix();
+    controls.update();
+};
+
+// ---- //
+function animate() {
+    requestAnimationFrame(animate);
+    controls.update();
+    render();
+};
+
+// -- render all -- //
+function render() {
+
+    var timer = 0.00001 * Date.now();
+
+    for (var i = 0, l = diamondsGroup.children.length; i < l; i++) {
+        var object = diamondsGroup.children[i];
+        object.position.y = 500 * Math.cos(timer + i);
+        object.rotation.y += Math.PI / 500;
+    }
+
+    // update the picking ray with the camera and mouse position    
+    raycaster.setFromCamera(mouse, camera);
+
+    // calculate objects intersecting the picking ray
+    var intersects = raycaster.intersectObjects(diamondsGroup.children);
+
+    if (intersects.length > 0) {
+        if (INTERSECTED != intersects[0].object) {
+            if (INTERSECTED) INTERSECTED.material.emissive.setHex(INTERSECTED.currentHex);
+            INTERSECTED = intersects[0].object;
+            INTERSECTED.currentHex = INTERSECTED.material.emissive.getHex();
+            INTERSECTED.material.emissive.setHex(Math.random() * 0xff00000 - 0xff00000);
+        }
+    } else {
+        if (INTERSECTED) INTERSECTED.material.emissive.setHex(INTERSECTED.currentHex);
+        INTERSECTED = null;
+    }
+
+    renderer.render(scene, camera);
+};
+
+// -- run functions -- //
+//init();
+//animate();
+    
+    </script>
+
+</body>
+</html>

app/templates/volumetric_catalog/books9_final_a 2.html

@@ -0,0 +1,458 @@
+<!DOCTYPE html>
+
+<html>
+<head>
+    <title>XPPL VOLUMETRIC CATALOGUE </title>
+    <meta charset="utf-8">
+    <link href="https://fonts.googleapis.com/css?family=Karla" rel="stylesheet">
+    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
+    <style>
+        body{
+            cccccc;
+                font-family: 'Karla', sans-serif;
+                font-size:15px;
+
+                text-align:left;
+                background-color: #140b33;
+                margin: 0px;
+                overflow: hidden;
+            }
+            #info {
+                position: absolute;
+                top: 0px; width: 10%;
+                padding: 10px;
+            }
+            a {
+                color: #444b7c;
+            }
+
+            .swal-button {
+                padding: 7px 19px;
+
+                background-color: #aca4c1;
+                font-size: 12px;
+
+
+}
+
+            .swal-title {
+                margin: 0px;
+                font-size: 16px;
+                box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.21);
+                margin-bottom: 28px;
+}
+
+            .swal-overlay {
+                background-color: rgba(20, 13, 50, 0.6);
+}
+            .swal-modal {
+                background-color: rgba(172, 164, 193, 1);
+
+}
+
+
+
+    </style>
+</head>
+<body>
+   
+    <div id="container"></div>
+    <canvas id="viewer"></canvas>
+    <script src="https://rawgit.com/mrdoob/three.js/dev/build/three.min.js"></script>
+    <script src="https://rawgit.com/mrdoob/three.js/dev/examples/js/controls/OrbitControls.js"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/4.4.0/bootbox.min.js"></script>
+    <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
+    <script>
+
+
+var category2color = new Object();
+category2color["Technical"] = "#003d5d";
+category2color["Science/History"] = "#f23d5d";
+category2color["Media studies"] = "#8c3d5d";
+category2color["Philosophy"] = "#723d5d";
+category2color["Computer culture"] = "#423d5d";
+category2color["Design / writing / publishing"] = "#ff0000";
+category2color["Desk"] = "#09edff";
+category2color["Art"] = "#ffedff";
+category2color["Digital (Steve Trim 2 reading)"] = "#ffe1cc";
+category2color["Media Studies (Femke Trim 3)"] = "#00e1cc";
+category2color["Literature, Culture, Theory"] = "#00a1d4";
+
+category2color["default"] = "#cdc1ec";
+
+
+
+
+        console.clear();
+
+const MAX_DISTANCE = 1000;
+//
+const MIN_DISTANCE = 200;
+
+const MAX_SPHERE_RADIUS = 700;
+
+var bookTitles;
+var request = new XMLHttpRequest();
+request.open('GET', 'export.json', true);
+
+request.onload = function() {
+  if (request.status >= 200 && request.status < 400) {
+    var data = JSON.parse(request.responseText);
+    //bookTitles = data;
+    bookTitles = data.books[0];
+
+    bookTitles.forEach(function(book) {
+      book.type = "sphere";
+      console.log('BOOK:', book);
+
+
+
+    });
+    console.log("got books", bookTitles)
+    // loaded data, start
+    init();
+    animate();
+  } else {
+    // We reached our target server, but it returned an error
+
+  }
+};
+
+request.onerror = function() {
+  // There was a connection error of some sort
+};
+
+request.send();
+
+
+// --- threeJS --- //
+var renderer, scene, camera, distance, raycaster, projector;
+
+var container = document.getElementById('container');
+var raycaster = new THREE.Raycaster(),INTERSECTED;
+var mouse = new THREE.Vector2();
+var distance = 600;
+
+// -- basic initialization -- //
+function init() {
+    renderer = new THREE.WebGLRenderer({
+        antialias: true
+    });
+
+    renderer.setSize(window.innerWidth, window.innerHeight);
+    renderer.setClearColor(0x140b33, 1);
+    container.appendChild(renderer.domElement);
+
+    scene = new THREE.Scene();
+    camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.01, 300000);
+  //  controls = new THREE.OrbitControls(camera);
+    //camera.position.set(1, 1, -5);
+    camera.position.set(MAX_DISTANCE/2, MAX_DISTANCE/20, MAX_DISTANCE/20);
+
+    camera.updateProjectionMatrix();
+
+    controls = new THREE.OrbitControls(camera, renderer.domElement);
+  //  controls.maxDistance = MAX_DISTANCE * 3;
+    controls.target = new THREE.Vector3(0, 0, 0);
+    controls.rotateSpeed = .2;
+    controls.enableDamping = true;
+    console.log(controls.enableDamping);
+    controls.dampingFactor = .15;
+    controls.panSpeed = .15;
+    controls.screenSpacePanning = true;
+    // to disable zoom
+    controls.enableZoom = true;
+    // to disable rotation
+    controls.enableRotate = true;
+    // to disable pan
+    controls.enablePan = true;
+    scene.add(camera);
+
+    //camera.position.set(-150, 10, 1);
+    //controls.update();
+   // scene.add(camera);
+/*
+    light = new THREE.PointLight(0xffffff, 1, 4000);
+    light.position.set(50, 0, 0);
+    light_two = new THREE.PointLight(0xffffff, 1, 4000);
+    light_two.position.set(-100, 800, 800);
+    lightAmbient = new THREE.AmbientLight(0x404040);
+    scene.add(light, light_two, lightAmbient);*/
+
+    // createSpheres();
+
+    scene.add(new THREE.DirectionalLight(0xffffff));
+    scene.add(new THREE.AmbientLight(0x222222));
+
+    renderer.setPixelRatio(window.devicePixelRatio);
+
+    let viewer = document.querySelector('#viewer');
+    viewer.parentNode.replaceChild(renderer.domElement, viewer);
+
+    createDiamond();
+
+    createSpace();
+
+    renderer.render(scene, camera);
+
+    document.addEventListener('mousemove', onMouseMove, false);
+    document.addEventListener('mousedown', onDocumentMouseDown, false);
+    window.addEventListener('resize', onWindowResize, false);
+
+
+}
+
+// -- diamonds -- //
+
+
+function catInobject(obj, category){ //checks if category is in object, if so return corresponding color
+    if (obj.hasOwnProperty(category)) {
+    var color = obj[category];
+    } else { var color = obj["default"];
+ }
+    return color;
+}
+
+function createDiamond() {
+
+    diamondsGroup = new THREE.Object3D();
+
+
+        console.log();
+
+        bookTitles.forEach(function (book) {
+            var chosencolor = catInobject(category2color, book.category);
+            var sphere = new THREE.SphereGeometry(50, Math.random() * 1, Math.random() * 1);
+            var material = new THREE.MeshPhongMaterial({
+                color: chosencolor,//Math.random() * 0xff00000 - 0xff00000,
+                shading: THREE.FlatShading
+            });
+            var sphere = new THREE.Mesh(sphere, material);
+            sphere.position.x = get_x(book.title) * Math.random() * 100 - 1000;
+            sphere.position.z = get_z(book.category) * Math.random() *  100 - 1000;
+            sphere.rotation.y =get_y(book.fileformat) * Math.random() * 100 - 1000;
+            //sphere.scale.x = sphere.scale.y = sphere.scale.z = Math.random() * 50 + 10;
+            sphere.scale.x = sphere.scale.y = sphere.scale.z = get_size(book.title);
+
+            sphere.userData = book;
+            diamondsGroup.add(sphere);
+
+        })
+        diamondsGroup.position.x = 500;
+        scene.add(diamondsGroup);
+
+};
+
+function get_size(title){
+    radius = 0;
+    for (var i = 0; i < title.length; i++) {
+      radius = radius + title.charCodeAt(i)
+    }
+    console.log(radius)
+    return radius/100;
+}
+
+function get_x(title){
+    radius = 0;
+    for (var i = 0; i < title.length; i++) {
+      radius = radius + title.charCodeAt(i)
+    }
+    console.log(radius)
+    return radius/100;
+}
+function get_y(title){
+    radius = 0;
+    for (var i = 0; i < title.length; i++) {
+      radius = radius + title.charCodeAt(i)
+    }
+    console.log(radius)
+    return radius/100;
+}
+function get_z(title){
+    radius = 0;
+    for (var i = 0; i < title.length; i++) {
+      radius = radius + title.charCodeAt(i)
+    }
+    console.log(radius)
+    return radius/100;
+}
+
+// -- dots on the back -- //
+function createSpace() {
+
+    let dots = new THREE.Object3D();
+
+    for (let i = 0; i < 1000; i++) {
+        let circleGeometry = new THREE.SphereGeometry(2, Math.random() * 5, Math.random() * 5);
+        let color;
+        if (Math.round(Math.random()) === 0)
+            color = new THREE.Color('#003d5d');
+        else
+            //color = new THREE.Color('#f23d5d');
+            color = new THREE.Color('#4f2939');
+
+        let material = new THREE.MeshPhongMaterial({
+            color: color
+            //side: THREE.DoubleSide
+        });
+
+        material.flatShading = true;
+
+        //var material = new THREE.MeshBasicMaterial({
+            //color : new THREE.Color(Math.floor(Math.random() * 1) === 1),
+            //color : new THREE.Color(Math.random() * 0.5 + 0.5, Math.random() * 0.5 + 0.5, 0),
+            //shading: THREE.FlatShading,
+        //})
+       var circle = new THREE.Mesh(circleGeometry, material);
+        material.side = THREE.DoubleSide;
+
+        circle.position.x = Math.random() * -distance * 50;
+        circle.position.y = Math.random() * -distance * 8;
+        circle.position.z = Math.random() * distance * 5;
+        circle.rotation.y = Math.random() * 2 * Math.PI;
+        circle.scale.x = circle.scale.y = circle.scale.z = Math.random() * 6 + 5;
+        dots.add(circle);
+    }
+
+    dots.position.x = 14000;
+    dots.position.y = 1500;
+    dots.position.z = -4000;
+    dots.rotation.y = Math.PI * 600;
+    dots.rotation.z = Math.PI * 500;
+
+    scene.add(dots);
+};
+
+
+ /*   let circle = new THREE.Mesh(circleGeometry, material);
+
+    let direction = getRandomVector().normalize();
+    let minDistance = MAX_DISTANCE * 8;
+    let maxDistance = minDistance + 0.5;
+    direction.multiplyScalar(Math.random() * (maxDistance - minDistance) + minDistance);
+
+    circle.position.add(direction);
+
+    dots.add(circle);
+    }
+    scene.add(dots);
+} */
+
+function getRandomVector(max_distance) {
+    if (max_distance === undefined)
+        max_distance = 1;
+    return new THREE.Vector3(getRandom(max_distance), getRandom(max_distance), getRandom(max_distance));
+}
+
+function getRandom(max_distance) {
+    let random = Math.random() * max_distance;
+    random *= Math.floor(Math.random() * 2) === 1 ? 1 : -1;
+    return random;
+}
+
+
+
+// -- events -- //
+function onMouseMove(event) {
+    mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
+    mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
+     mouseX = event.clientX - window.innerWidth / 2 ;
+     mouseY = event.clientY - window.innerHeight / 2 ;
+    camera.position.x += (mouseX - camera.position.x) * 0.01;
+    camera.position.y += (mouseY - camera.position.y) * 0.01;
+    camera.lookAt(scene.position);
+};
+
+function onDocumentMouseDown(event) {
+
+    event.preventDefault();
+    mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
+    mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
+
+    raycaster.setFromCamera(mouse, camera);
+
+    var intersects = raycaster.intersectObjects(diamondsGroup.children);
+    if (intersects.length > 0) {
+        var book = intersects[0].object.userData;
+        console.log("click", book);
+        //alert("book" + book.title);
+
+        //swal(book.title + book.authors);
+
+        swal(book.title + " \n " + " " + book.authors[0].author_name +   " \n" + book.category, {
+            button: {
+                text: "Open",
+            }
+        }).then (function(){
+            window.location = "/books/"+book.id
+        });
+
+
+
+    }
+
+};
+
+function onDocumentMouseWheel( event ) {
+
+    fov -= event.wheelDeltaY * 0.05;
+    camera.projectionMatrix = THREE.Matrix4.makePerspective( fov, window.innerWidth / window.innerHeight, 1, 1100 );
+
+}
+
+
+function onWindowResize() {
+    camera.aspect = window.innerWidth / window.innerHeight;
+    renderer.setSize(window.innerWidth, window.innerHeight);
+    camera.updateProjectionMatrix();
+    controls.update();
+};
+
+// ---- //
+function animate() {
+    requestAnimationFrame(animate);
+    controls.update();
+    render();
+};
+
+// -- render all -- //
+function render() {
+
+    var timer = 0.00001 * Date.now();
+
+    for (var i = 0, l = diamondsGroup.children.length; i < l; i++) {
+        var object = diamondsGroup.children[i];
+        object.position.y = 500 * Math.cos(timer + i);
+        object.rotation.y += Math.PI / 500;
+    }
+
+    // update the picking ray with the camera and mouse position
+    raycaster.setFromCamera(mouse, camera);
+
+    // calculate objects intersecting the picking ray
+    var intersects = raycaster.intersectObjects(diamondsGroup.children);
+
+    if (intersects.length > 0) {
+        if (INTERSECTED != intersects[0].object) {
+            if (INTERSECTED) INTERSECTED.material.emissive.setHex(INTERSECTED.currentHex);
+            INTERSECTED = intersects[0].object;
+            INTERSECTED.currentHex = INTERSECTED.material.emissive.getHex();
+            INTERSECTED.material.emissive.setHex(Math.random() * 0xff00000 - 0xff00000);
+        }
+    } else {
+        if (INTERSECTED) INTERSECTED.material.emissive.setHex(INTERSECTED.currentHex);
+        INTERSECTED = null;
+    }
+
+    renderer.render(scene, camera);
+};
+
+// -- run functions -- //
+//init();
+//animate();
+
+    </script>
+
+</body>
+</html>

app/templates/volumetric_catalog/books9_final_a.html

@@ -0,0 +1,459 @@
+<!DOCTYPE html>
+
+<html>
+<head>
+    <title>XPPL VOLUMETRIC CATALOGUE </title>
+    <meta charset="utf-8">
+    <link href="https://fonts.googleapis.com/css?family=Karla" rel="stylesheet">
+    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
+    <style>
+        body{
+            cccccc;
+                font-family: 'Karla', sans-serif;
+                font-size:15px;
+
+                text-align:left;
+                background-color: #140b33;
+                margin: 0px;
+                overflow: hidden;
+            }
+            #info {
+                position: absolute;
+                top: 0px; width: 10%;
+                padding: 10px;
+            }
+            a {
+                color: #444b7c;
+            }
+
+            .swal-button {
+                padding: 7px 19px;
+
+                background-color: #aca4c1;
+                font-size: 12px;
+
+
+}
+
+            .swal-title {
+                margin: 0px;
+                font-size: 16px;
+                box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.21);
+                margin-bottom: 28px;
+}
+
+            .swal-overlay {
+                background-color: rgba(20, 13, 50, 0.6);
+}
+            .swal-modal {
+                background-color: rgba(172, 164, 193, 1);
+
+}
+
+
+
+    </style>
+</head>
+<body>
+    <div id="info"><a  target="_blank" rel="noopener">XPPL VOLUMETRIC CATALOGUE  <br> <br> Feel free to move around and explore the content of the library by clicking on the volumetric shapes</div>
+    <div id="container"></div>
+    <canvas id="viewer"></canvas>
+    <script src="https://rawgit.com/mrdoob/three.js/dev/build/three.min.js"></script>
+    <script src="https://rawgit.com/mrdoob/three.js/dev/examples/js/controls/OrbitControls.js"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/4.4.0/bootbox.min.js"></script>
+    <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
+    <script>
+
+
+var category2color = new Object();
+category2color["Technical"] = "#003d5d";
+category2color["Science/History"] = "#f23d5d";
+category2color["Media studies"] = "#8c3d5d";
+category2color["Philosophy"] = "#723d5d";
+category2color["Computer culture"] = "#423d5d";
+category2color["Design / writing / publishing"] = "#ff0000";
+category2color["Desk"] = "#09edff";
+category2color["Art"] = "#ffedff";
+category2color["Digital (Steve Trim 2 reading)"] = "#ffe1cc";
+category2color["Media Studies (Femke Trim 3)"] = "#00e1cc";
+category2color["Literature, Culture, Theory"] = "#00a1d4";
+
+category2color["default"] = "#cdc1ec";
+
+
+
+
+        console.clear();
+
+const MAX_DISTANCE = 1000;
+//
+const MIN_DISTANCE = 200;
+
+const MAX_SPHERE_RADIUS = 700;
+
+var bookTitles;
+var request = new XMLHttpRequest();
+request.open('GET', 'export.json', true);
+
+request.onload = function() {
+  if (request.status >= 200 && request.status < 400) {
+    var data = JSON.parse(request.responseText);
+    //bookTitles = data;
+    bookTitles = data.books[0];
+
+    bookTitles.forEach(function(book) {
+      book.type = "sphere";
+      console.log('BOOK:', book);
+
+
+
+    });
+    console.log("got books", bookTitles)
+    // loaded data, start
+    init();
+    animate();
+  } else {
+    // We reached our target server, but it returned an error
+
+  }
+};
+
+request.onerror = function() {
+  // There was a connection error of some sort
+};
+
+request.send();
+
+
+// --- threeJS --- //
+var renderer, scene, camera, distance, raycaster, projector;
+
+var container = document.getElementById('container');
+var raycaster = new THREE.Raycaster(),INTERSECTED;
+var mouse = new THREE.Vector2();
+var distance = 600;
+
+// -- basic initialization -- //
+function init() {
+    renderer = new THREE.WebGLRenderer({
+        antialias: true
+    });
+
+    renderer.setSize(window.innerWidth, window.innerHeight);
+    renderer.setClearColor(0x140b33, 1);
+    container.appendChild(renderer.domElement);
+
+    scene = new THREE.Scene();
+    camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.01, 300000);
+  //  controls = new THREE.OrbitControls(camera);
+    //camera.position.set(1, 1, -5);
+    camera.position.set(MAX_DISTANCE/2, MAX_DISTANCE/20, MAX_DISTANCE/20);
+
+    camera.updateProjectionMatrix();
+
+    controls = new THREE.OrbitControls(camera, renderer.domElement);
+  //  controls.maxDistance = MAX_DISTANCE * 3;
+    controls.target = new THREE.Vector3(0, 0, 0);
+    controls.rotateSpeed = .2;
+    controls.enableDamping = true;
+    console.log(controls.enableDamping);
+    controls.dampingFactor = .15;
+    controls.panSpeed = .15;
+    controls.screenSpacePanning = true;
+    // to disable zoom
+    controls.enableZoom = true;
+    // to disable rotation
+    controls.enableRotate = true;
+    // to disable pan
+    controls.enablePan = true;
+    scene.add(camera);
+
+    //camera.position.set(-150, 10, 1);
+    //controls.update();
+   // scene.add(camera);
+
+    light = new THREE.PointLight(0x404040);
+    light.position.set(50, 0, 0);
+    scene.add(light);
+   /* light_two = new THREE.PointLight(0xffffff, 1, 4000);
+    light_two.position.set(-100, 800, 800);
+    lightAmbient = new THREE.AmbientLight(0x404040);
+    scene.add(light, light_two, lightAmbient);*/
+
+    // createSpheres();
+
+    scene.add(new THREE.DirectionalLight(0xffffff));
+    scene.add(new THREE.AmbientLight(0x222222));
+
+    renderer.setPixelRatio(window.devicePixelRatio);
+
+    let viewer = document.querySelector('#viewer');
+    viewer.parentNode.replaceChild(renderer.domElement, viewer);
+
+    createDiamond();
+
+    createSpace();
+
+    renderer.render(scene, camera);
+
+    document.addEventListener('mousemove', onMouseMove, false);
+    document.addEventListener('mousedown', onDocumentMouseDown, false);
+    window.addEventListener('resize', onWindowResize, false);
+
+
+}
+
+// -- diamonds -- //
+
+
+function catInobject(obj, category){ //checks if category is in object, if so return corresponding color
+    if (obj.hasOwnProperty(category)) {
+    var color = obj[category];
+    } else { var color = obj["default"];
+ }
+    return color;
+}
+
+function createDiamond() {
+
+    diamondsGroup = new THREE.Object3D();
+
+
+        console.log();
+
+        bookTitles.forEach(function (book) {
+            var chosencolor = catInobject(category2color, book.category);
+            var sphere = new THREE.SphereGeometry(1.3, Math.random() * 50, Math.random() * 50);
+            var material = new THREE.MeshPhongMaterial({
+                color: chosencolor,//Math.random() * 0xff00000 - 0xff00000,
+                shading: THREE.FlatShading
+            });
+            var sphere = new THREE.Mesh(sphere, material);
+            sphere.position.x = get_x(book.title) * Math.random() * 100 - 1000;
+            sphere.position.z = get_z(book.category) * Math.random() *  100 - 1000;
+            sphere.rotation.y =get_y(book.fileformat) * Math.random() * 100 - 1000;
+            //sphere.scale.x = sphere.scale.y = sphere.scale.z = Math.random() * 50 + 10;
+            sphere.scale.x = sphere.scale.y = sphere.scale.z = get_size(book.title);
+
+            sphere.userData = book;
+            diamondsGroup.add(sphere);
+
+        })
+        diamondsGroup.position.x = 500;
+        scene.add(diamondsGroup);
+
+};
+
+function get_size(title){
+    radius = 0;
+    for (var i = 0; i < title.length; i++) {
+      radius = radius + title.charCodeAt(i)
+    }
+    console.log(radius)
+    return radius/100;
+}
+
+function get_x(title){
+    radius = 0;
+    for (var i = 0; i < title.length; i++) {
+      radius = radius + title.charCodeAt(i)
+    }
+    console.log(radius)
+    return radius/100;
+}
+function get_y(title){
+    radius = 0;
+    for (var i = 0; i < title.length; i++) {
+      radius = radius + title.charCodeAt(i)
+    }
+    console.log(radius)
+    return radius/100;
+}
+function get_z(title){
+    radius = 0;
+    for (var i = 0; i < title.length; i++) {
+      radius = radius + title.charCodeAt(i)
+    }
+    console.log(radius)
+    return radius/100;
+}
+
+// -- dots on the back -- //
+function createSpace() {
+
+    let dots = new THREE.Object3D();
+
+    for (let i = 0; i < 1000; i++) {
+        let circleGeometry = new THREE.SphereGeometry(2, Math.random() * 5, Math.random() * 5);
+        let color;
+        if (Math.round(Math.random()) === 0)
+            color = new THREE.Color('#003d5d');
+        else
+            //color = new THREE.Color('#f23d5d');
+            color = new THREE.Color('#f23d5d');
+
+        let material = new THREE.MeshPhongMaterial({
+            color: color
+            //side: THREE.DoubleSide
+        });
+
+        material.flatShading = true;
+
+        //var material = new THREE.MeshBasicMaterial({
+            //color : new THREE.Color(Math.floor(Math.random() * 1) === 1),
+            //color : new THREE.Color(Math.random() * 0.5 + 0.5, Math.random() * 0.5 + 0.5, 0),
+            //shading: THREE.FlatShading,
+        //})
+       var circle = new THREE.Mesh(circleGeometry, material);
+        material.side = THREE.DoubleSide;
+
+        circle.position.x = Math.random() * -distance * 100;
+        circle.position.y = Math.random() * -distance * 8;
+        circle.position.z = Math.random() * distance * 5;
+        circle.rotation.y = Math.random() * 2 * Math.PI;
+        circle.scale.x = circle.scale.y = circle.scale.z = Math.random() * 6 + 5;
+        dots.add(circle);
+    }
+
+    dots.position.x = 14000;
+    dots.position.y = 1500;
+    dots.position.z = 4000;
+    dots.rotation.y = Math.PI * 600;
+    dots.rotation.z = Math.PI * 500;
+
+    scene.add(dots);
+};
+
+
+ /*   let circle = new THREE.Mesh(circleGeometry, material);
+
+    let direction = getRandomVector().normalize();
+    let minDistance = MAX_DISTANCE * 8;
+    let maxDistance = minDistance + 0.5;
+    direction.multiplyScalar(Math.random() * (maxDistance - minDistance) + minDistance);
+
+    circle.position.add(direction);
+
+    dots.add(circle);
+    }
+    scene.add(dots);
+} */
+
+function getRandomVector(max_distance) {
+    if (max_distance === undefined)
+        max_distance = 1;
+    return new THREE.Vector3(getRandom(max_distance), getRandom(max_distance), getRandom(max_distance));
+}
+
+function getRandom(max_distance) {
+    let random = Math.random() * max_distance;
+    random *= Math.floor(Math.random() * 2) === 1 ? 1 : -1;
+    return random;
+}
+
+
+
+// -- events -- //
+function onMouseMove(event) {
+    mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
+    mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
+     mouseX = event.clientX - window.innerWidth / 2 ;
+     mouseY = event.clientY - window.innerHeight / 2 ;
+    camera.position.x += (mouseX - camera.position.x) * 0.01;
+    camera.position.y += (mouseY - camera.position.y) * 0.01;
+    camera.lookAt(scene.position);
+};
+
+function onDocumentMouseDown(event) {
+
+    event.preventDefault();
+    mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
+    mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
+
+    raycaster.setFromCamera(mouse, camera);
+
+    var intersects = raycaster.intersectObjects(diamondsGroup.children);
+    if (intersects.length > 0) {
+        var book = intersects[0].object.userData;
+        console.log("click", book);
+        //alert("book" + book.title);
+
+        //swal(book.title + book.authors);
+
+        swal(book.title + " \n " + " " + book.authors[0].author_name +   " \n" + book.category, {
+            button: {
+                text: "Open",
+            }
+        }).then (function(){
+            window.location = "/books/"+book.id
+        });
+
+
+
+    }
+
+};
+
+function onDocumentMouseWheel( event ) {
+
+    fov -= event.wheelDeltaY * 0.05;
+    camera.projectionMatrix = THREE.Matrix4.makePerspective( fov, window.innerWidth / window.innerHeight, 1, 1100 );
+
+}
+
+
+function onWindowResize() {
+    camera.aspect = window.innerWidth / window.innerHeight;
+    renderer.setSize(window.innerWidth, window.innerHeight);
+    camera.updateProjectionMatrix();
+    controls.update();
+};
+
+// ---- //
+function animate() {
+    requestAnimationFrame(animate);
+    controls.update();
+    render();
+};
+
+// -- render all -- //
+function render() {
+
+    var timer = 0.00001 * Date.now();
+
+    for (var i = 0, l = diamondsGroup.children.length; i < l; i++) {
+        var object = diamondsGroup.children[i];
+        object.position.y = 500 * Math.cos(timer + i);
+        object.rotation.y += Math.PI / 500;
+    }
+
+    // update the picking ray with the camera and mouse position
+    raycaster.setFromCamera(mouse, camera);
+
+    // calculate objects intersecting the picking ray
+    var intersects = raycaster.intersectObjects(diamondsGroup.children);
+
+    if (intersects.length > 0) {
+        if (INTERSECTED != intersects[0].object) {
+            if (INTERSECTED) INTERSECTED.material.emissive.setHex(INTERSECTED.currentHex);
+            INTERSECTED = intersects[0].object;
+            INTERSECTED.currentHex = INTERSECTED.material.emissive.getHex();
+            INTERSECTED.material.emissive.setHex(Math.random() * 0xff00000 - 0xff00000);
+        }
+    } else {
+        if (INTERSECTED) INTERSECTED.material.emissive.setHex(INTERSECTED.currentHex);
+        INTERSECTED = null;
+    }
+
+    renderer.render(scene, camera);
+};
+
+// -- run functions -- //
+//init();
+//animate();
+
+    </script>
+
+</body>
+</html>

app/templates/volumetric_catalog/index.html

@@ -0,0 +1,474 @@
+<!DOCTYPE html>
+
+<html>
+<head>
+    <title>XPPL VOLUMETRIC CATALOGUE </title>
+    <meta charset="utf-8">
+    <link href="https://fonts.googleapis.com/css?family=Karla" rel="stylesheet">
+    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
+    <style>
+        body{
+
+                font-family: 'Karla', sans-serif;
+                font-size:15px;
+
+                text-align:left;
+                background: #140b33;
+                margin: 0px;
+                overflow: hidden;
+            }
+            #info {
+                position: absolute;
+                top: 0px; width: 10%;
+                padding: 10px;
+            }
+            a {
+                color: #444b7c;
+            }
+
+            .swal-button {
+                padding: 7px 19px;
+
+                background-color: #aca4c1;
+                font-size: 12px;
+
+
+}
+
+            .swal-title {
+                margin: 0px;
+                font-size: 16px;
+                box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.21);
+                margin-bottom: 28px;
+}
+
+            .swal-overlay {
+                background-color: rgba(20, 13, 50, 0.6);
+}
+            .swal-modal {
+                background-color: rgba(172, 164, 193, 1);
+
+}
+
+
+
+    </style>
+</head>
+<body>
+    <div id="info"><a href ="/">back to library</a> <br><br><a  target="_blank" rel="noopener">  <b>  <font size="5"> XPPL VOLUMETRIC CATALOGUE </font> </b> <br>  <br> Feel free to move around and explore the content of the library by clicking on the volumetric shapes</div>
+    <div id="container"></div>
+    <canvas id="viewer"></canvas>
+    <script src="https://rawgit.com/mrdoob/three.js/dev/build/three.min.js"></script>
+    <script src="https://rawgit.com/mrdoob/three.js/dev/examples/js/controls/OrbitControls.js"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/4.4.0/bootbox.min.js"></script>
+    <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
+    <script>
+
+
+var category2color = new Object();
+category2color["Technical"] = "#003d5d";
+category2color["Science/History"] = "#f23d5d";
+category2color["Media studies"] = "#8c3d5d";
+category2color["Philosophy"] = "#723d5d";
+category2color["Computer culture"] = "#423d5d";
+category2color["Design / writing / publishing"] = "#ff0000";
+category2color["Desk"] = "#09edff";
+category2color["Art"] = "#ffedff";
+category2color["Digital (Steve Trim 2 reading)"] = "#ffe1cc";
+category2color["Media Studies (Femke Trim 3)"] = "#00e1cc";
+category2color["Literature, Culture, Theory"] = "#00a1d4";
+
+category2color["default"] = "#cdc1ec";
+
+
+
+
+        console.clear();
+
+const MAX_DISTANCE = 1000;
+//
+const MIN_DISTANCE = 200;
+
+const MAX_SPHERE_RADIUS = 700;
+
+var bookTitles;
+var request = new XMLHttpRequest();
+request.open('GET', '/api/books', true);
+
+request.onload = function() {
+  if (request.status >= 200 && request.status < 400) {
+    var data = JSON.parse(request.responseText);
+    //bookTitles = data;
+    bookTitles = data.books;
+
+    bookTitles.forEach(function(book) {
+      book.type = "sphere";
+      console.log('BOOK:', book);
+
+
+
+    });
+    console.log("got books", bookTitles)
+    // loaded data, start
+    init();
+    animate();
+
+  } else {
+    // We reached our target server, but it returned an error
+
+  }
+};
+
+request.onerror = function() {
+  // There was a connection error of some sort
+};
+
+request.send();
+
+
+// --- threeJS --- //
+var renderer, scene, camera, distance, raycaster, projector;
+
+var container = document.getElementById('container');
+var raycaster = new THREE.Raycaster(),INTERSECTED;
+var mouse = new THREE.Vector2();
+var distance = 600;
+
+// -- basic initialization -- //
+function init() {
+    renderer = new THREE.WebGLRenderer({
+        antialias: true
+    });
+
+
+    renderer.setClearColor(0x140b33, 1);
+    //renderer.setClearColor(0xFF00FF, 1.0);
+    renderer.setSize(window.innerWidth, window.innerHeight);
+    container.appendChild(renderer.domElement);
+    renderer.clear();
+    scene = new THREE.Scene();
+    camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.01, 300000);
+  //  controls = new THREE.OrbitControls(camera);
+    //camera.position.set(1, 1, -5);
+    camera.position.set(MAX_DISTANCE/2, MAX_DISTANCE/20, MAX_DISTANCE/20);
+
+    camera.updateProjectionMatrix();
+
+    controls = new THREE.OrbitControls(camera, renderer.domElement);
+  //  controls.maxDistance = MAX_DISTANCE * 3;
+    controls.target = new THREE.Vector3(0, 0, 0);
+    controls.rotateSpeed = .2;
+    controls.enableDamping = true;
+    console.log(controls.enableDamping);
+    controls.dampingFactor = .15;
+    controls.panSpeed = .15;
+    controls.screenSpacePanning = true;
+    // to disable zoom
+    controls.enableZoom = true;
+    // to disable rotation
+    controls.enableRotate = true;
+    // to disable pan
+    controls.enablePan = true;
+    scene.add(camera);
+
+    //camera.position.set(-150, 10, 1);
+    //controls.update();
+   // scene.add(camera);
+
+    light = new THREE.PointLight(0x404040);
+    light.position.set(50, 0, 0);
+    scene.add(light);
+   /* light_two = new THREE.PointLight(0xffffff, 1, 4000);
+    light_two.position.set(-100, 800, 800);
+    lightAmbient = new THREE.AmbientLight(0x404040);
+    scene.add(light, light_two, lightAmbient);*/
+
+    // createSpheres();
+    scene.add(new THREE.DirectionalLight(0xffffff));
+    scene.add(new THREE.AmbientLight(0x222222));
+
+    renderer.setPixelRatio(window.devicePixelRatio);
+    renderer.clear();
+
+    let viewer = document.querySelector('#viewer');
+    viewer.parentNode.replaceChild(renderer.domElement, viewer);
+
+
+
+
+window.onload = function () {
+
+    createDiamond();
+    createSpace();
+
+
+    document.addEventListener('mousemove', onMouseMove, false);
+    document.addEventListener('mousedown', onDocumentMouseDown, false);
+    window.addEventListener('resize', onWindowResize, false);
+};
+
+
+}
+
+// -- diamonds -- //
+
+
+function catInobject(obj, category){ //checks if category is in object, if so return corresponding color
+    if (obj.hasOwnProperty(category)) {
+    var color = obj[category];
+    } else { var color = obj["default"];
+ }
+    return color;
+}
+
+function createDiamond() {
+
+    diamondsGroup = new THREE.Object3D();
+
+
+        console.log();
+
+        bookTitles.forEach(function (book) {
+            var chosencolor = catInobject(category2color, book.category);
+            var sphere = new THREE.SphereGeometry(1.3, Math.random() * 50, Math.random() * 50);
+            var material = new THREE.MeshPhongMaterial({
+                color: chosencolor,//Math.random() * 0xff00000 - 0xff00000,
+                shading: THREE.FlatShading
+            });
+            var sphere = new THREE.Mesh(sphere, material);
+            sphere.position.x = get_x(book.title) * Math.random() * 100 - 1000;
+            sphere.position.z = get_z(book.category) * Math.random() *  100 - 1000;
+            sphere.rotation.y =get_y(book.fileformat) * Math.random() * 100 - 1000;
+            //sphere.scale.x = sphere.scale.y = sphere.scale.z = Math.random() * 50 + 10;
+            sphere.scale.x = sphere.scale.y = sphere.scale.z = get_size(book.title);
+
+            sphere.userData = book;
+            diamondsGroup.add(sphere);
+
+        })
+        diamondsGroup.position.x = 500;
+        scene.add(diamondsGroup);
+
+};
+
+function get_size(title){
+    radius = 0;
+    for (var i = 0; i < title.length; i++) {
+      radius = radius + title.charCodeAt(i)
+    }
+    console.log(radius)
+    return radius/100;
+}
+
+function get_x(title){
+    radius = 0;
+    for (var i = 0; i < title.length; i++) {
+      radius = radius + title.charCodeAt(i)
+    }
+    console.log(radius)
+    return radius/100;
+}
+function get_y(title){
+    radius = 0;
+    for (var i = 0; i < title.length; i++) {
+      radius = radius + title.charCodeAt(i)
+    }
+    console.log(radius)
+    return radius/100;
+}
+function get_z(title){
+    radius = 0;
+    for (var i = 0; i < title.length; i++) {
+      radius = radius + title.charCodeAt(i)
+    }
+    console.log(radius)
+    return radius/100;
+}
+
+// -- dots on the back -- //
+function createSpace() {
+
+    let dots = new THREE.Object3D();
+
+    for (let i = 0; i < 1000; i++) {
+        let circleGeometry = new THREE.SphereGeometry(2, Math.random() * 5, Math.random() * 5);
+        let color;
+        if (Math.round(Math.random()) === 0)
+            color = new THREE.Color('#003d5d');
+        else
+            //color = new THREE.Color('#f23d5d');
+            color = new THREE.Color('#f23d5d');
+
+        let material = new THREE.MeshPhongMaterial({
+            color: color
+            //side: THREE.DoubleSide
+        });
+
+        material.flatShading = true;
+
+        //var material = new THREE.MeshBasicMaterial({
+            //color : new THREE.Color(Math.floor(Math.random() * 1) === 1),
+            //color : new THREE.Color(Math.random() * 0.5 + 0.5, Math.random() * 0.5 + 0.5, 0),
+            //shading: THREE.FlatShading,
+        //})
+
+
+       var circle = new THREE.Mesh(circleGeometry, material);
+        material.side = THREE.DoubleSide;
+
+        circle.position.x = Math.random() * -distance * 100;
+        circle.position.y = Math.random() * -distance * 8;
+        circle.position.z = Math.random() * distance * 5;
+        circle.rotation.y = Math.random() * 2 * Math.PI;
+        circle.scale.x = circle.scale.y = circle.scale.z = Math.random() * 8 + 5;
+        dots.add(circle);
+    }
+
+    dots.position.x = 14000;
+    dots.position.y = 1500;
+    dots.position.z = 4000;
+    dots.rotation.y = Math.PI * 600;
+    dots.rotation.z = Math.PI * 500;
+
+    scene.add(dots);
+};
+/*
+
+
+   let circle = new THREE.Mesh(circleGeometry, material);
+
+    let direction = getRandomVector().normalize();
+    let minDistance = MAX_DISTANCE * 8;
+    let maxDistance = minDistance + 0.5;
+    direction.multiplyScalar(Math.random() * (maxDistance - minDistance) + minDistance);
+
+    circle.position.add(direction);
+
+    dots.add(circle);
+    }
+    scene.add(dots);
+}
+*/
+
+
+function getRandomVector(max_distance) {
+    if (max_distance === undefined)
+        max_distance = 1;
+    return new THREE.Vector3(getRandom(max_distance), getRandom(max_distance), getRandom(max_distance));
+}
+
+function getRandom(max_distance) {
+    let random = Math.random() * max_distance;
+    random *= Math.floor(Math.random() * 2) === 1 ? 1 : -1;
+    return random;
+}
+
+
+
+// -- events -- //
+function onMouseMove(event) {
+    mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
+    mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
+     mouseX = event.clientX - window.innerWidth / 2 ;
+     mouseY = event.clientY - window.innerHeight / 2 ;
+    //camera.position.x += (mouseX - camera.position.x) * 0.01;
+    //camera.position.y += (mouseY - camera.position.y) * 0.01;
+    // camera.lookAt(scene.position);
+};
+
+function onDocumentMouseDown(event) {
+
+    event.preventDefault();
+    mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
+    mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
+
+    raycaster.setFromCamera(mouse, camera);
+
+    var intersects = raycaster.intersectObjects(diamondsGroup.children);
+    if (intersects.length > 0) {
+        var book = intersects[0].object.userData;
+        console.log("click", book);
+        //alert("book" + book.title);
+
+        //swal(book.title + book.authors);
+
+
+        swal(book.title + " \n " + " " + book.authors.map(function(x){return x.author_name}).join(", ") +   " \n" + book.category, {
+            buttons: ["return", "open" ],
+        }).then (function(button){
+            console.log("button", button)
+            if (button) {
+               window.location = "/books/"+book.id
+            }
+
+        });
+
+
+
+    }
+
+};
+
+function onDocumentMouseWheel( event ) {
+
+    fov -= event.wheelDeltaY * 0.05;
+    camera.projectionMatrix = THREE.Matrix4.makePerspective( fov, window.innerWidth / window.innerHeight, 1, 1100 );
+
+}
+
+
+function onWindowResize() {
+    camera.aspect = window.innerWidth / window.innerHeight;
+    renderer.setSize(window.innerWidth, window.innerHeight);
+    camera.updateProjectionMatrix();
+    controls.update();
+};
+
+// ---- //
+function animate() {
+    requestAnimationFrame(animate);
+    controls.update();
+    render();
+};
+
+// -- render all -- //
+function render() {
+
+    var timer = 0.00001 * Date.now();
+
+    for (var i = 0, l = diamondsGroup.children.length; i < l; i++) {
+        var object = diamondsGroup.children[i];
+        object.position.y = 500 * Math.cos(timer + i);
+        object.rotation.y += Math.PI / 500;
+    }
+
+    // update the picking ray with the camera and mouse position
+    raycaster.setFromCamera(mouse, camera);
+
+    // calculate objects intersecting the picking ray
+    var intersects = raycaster.intersectObjects(diamondsGroup.children);
+
+    if (intersects.length > 0) {
+        if (INTERSECTED != intersects[0].object) {
+            if (INTERSECTED) INTERSECTED.material.emissive.setHex(INTERSECTED.currentHex);
+            INTERSECTED = intersects[0].object;
+            INTERSECTED.currentHex = INTERSECTED.material.emissive.getHex();
+            INTERSECTED.material.emissive.setHex(Math.random() * 0xff00000 - 0xff00000);
+        }
+    } else {
+        if (INTERSECTED) INTERSECTED.material.emissive.setHex(INTERSECTED.currentHex);
+        INTERSECTED = null;
+    }
+
+    renderer.render(scene, camera);
+};
+
+// -- run functions -- //
+//init();
+//animate();
+
+    </script>
+
+</body>
+</html>

app/views.py

@@ -151,6 +151,10 @@ def get_updates():
     latest_upload = allbooks[-1]
     return "This is the XPPL ~ Library XPUB ~ Updates / / / / / / / Last viewed: " + userin.info + " / / / / / / / " + str(len(allbooks)) + " Books online "+ " / / / / / / / " + "Latest entry: " + latest_upload.title
 
+@app.route('/volumetric_catalog', methods=['GET'])
+def volumetric_catalog():
+    return render_template('volumetric_catalog/index.html')
+
 @app.route('/scape', methods=['POST', 'GET'])
 def scape():
     if request.method == 'POST':