User:Lbattich/Library of Babel Generator: Difference between revisions

Revision as of 17:05, 9 June 2015

What is this

The aim is create a webpage where the USER can generate a custom-made brand new VOLUME of the Borges' Library of Babel (complete with its 410 pages of charater permutations...)

TEST SITE go on have a try!!

some images

Background

code

HTML & CSS

<!DOCTYPE html>


<html>
	<head>
		<meta name="author" content="Lucas Battich">
		<meta name="description" content="Library of Babel Volume Generator by Lucas Battich">
		<meta content="text/html; charset=utf-8" http-equiv="content-type">
		<script src="http://code.jquery.com/jquery-1.11.2.js"></script>
		<script type="text/javascript" src="js/jspdf.js"></script>
		<script type="text/javascript" src="js/FileSaver.js"></script>
		<script type="text/javascript" src="js/standard_fonts_metrics.js"></script>        
		<title>The Library of Babel Book Page - Lucas Battich</title>

		<style type="text/css">
			body{
				margin:20px;
				font-size: 11px;
				font-family:"arial";
				background-color: Gray;
			}
			h1{font-size: 2em;}
			#heading{
				color:white;
				width:400px;
				margin-right: auto;
				margin-left: auto;
				text-align: center;
			}
			#menu{
				position:absolute;
				top:100px;
				width:150px;
				height:150px;
			}
			table {
				position:absolute;
				width:60%;
				height:80%;
				top:10%;
				left:20%;
				transition: all 0.4s;
				-webkit-transition: all 0.4s;
			}
			td {
				height: 100%;
				width: 100%;
				padding: 5%;
				text-align: center;
				vertical-align: middle;
			}
			textarea{
				font-size: 0.9em;
				font-family:Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", serif;
				text-align:justify;
			}

		</style>
	</head>
	<body>
		
		<div id="heading">
			<h1>Library of Babel Volume Generator</h1>
			<p>by Lucas Battich</p>
			<p>online pdf encription via <a href="http://parall.ax/products/jspdf" target="_blank">jsPDF</a></p>
		</div>

		<div id="menu">
			<button onclick="generate()">Generate Page</button>
			<button onclick="savepdf()">Generate PDF Volume</button>
		</div>
		<table><td>
			<p id="ip"></p>
			<textarea id="output" rows="80" cols="100"></textarea>
		</table>
	</body>
</html>

JavaScript

window.onload=generate();
var myip = '<!--#echo var="REMOTE_ADDR"-->';

function generate() {
	var x=document.getElementById("output")
	var page = "";
	for( var i=0; i < 40; i++ )
	page += makeline() + "\n" + "\n";
	x.innerHTML = page;
	return page;
}

function makeline() {
	var line = "";
	var string = "ABCDEFGHIJKLMNOPQRSTVZ .,";
	for( var i=0; i < 80; i++ ) {
		line += string.charAt(Math.floor(Math.random() * string.length));
	}
	return line;
}

function savepdf() {
	var vol = Math.floor(Math.pow(10,16)*Math.random());
	var doc = new jsPDF("p", "mm", "a4");

	doc.setProperties({
		title: 'Library of Babel Volume #' + vol,
		subject: 'Library of Babel Volume',		
		author: 'Lucas Battich & User with IP ' + myip,
		keywords: 'generated, library, babel',
		creator: 'Unknown'
	});
	doc.setDrawColor(0);
	doc.setFillColor(200);
	doc.rect(0, 0, 210, 297, 'F');
	doc.setLineWidth(0.8);
	doc.rect(25, 25, 160, 247); //x1, y1, w, h
	doc.setLineWidth(0.3);
	doc.rect(26.5, 26.5, 157, 244);
	doc.rect(28, 28, 154, 241);
	doc.setFont('times');
	doc.setFontSize(19);
	doc.text(37, 50, "Library of Babel Volume No. " + vol);
	doc.setFontSize(15);
	doc.text(37, 70, "Retrieved on " + day()+ "\n" + "From IP " + myip);
	doc.setFontSize(8);
	for( var i=0; i < 410; i++ ) {
		doc.addPage();
		doc.text(32, 25, generate());
	}
	doc.save('Library of Babel Volume #' + vol + '.pdf')
}

function day() {
	var today = new Date();
	var localdate = today.toString();
	return localdate
}