More configurability through config.php

This commit is contained in:
sandbender 2010-11-13 23:15:03 +01:00
parent cd979d0bf6
commit 5098db94eb
8 changed files with 291 additions and 324 deletions

View File

@ -1,5 +0,0 @@
Addtype application/octet-stream .ttf .otf
AddType application/vnd.ms-fontobject .eot
RewriteRule (.*).php $1
RewriteRule (.*).hmtl $1

View File

@ -1,50 +0,0 @@
<?php
require_once("lib/trans.php");
?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Pamela</title>
<script src="js/jquery-1.3.2.js" type="text/javascript"></script>
<link rel="stylesheet" href="pamela.css" type="text/css" media="screen" />
</head>
<body>
<header id="hdr">
<div>
<img src="img/pamela-logo.png" alt="Pamela" />
</div>
</header>
<h1>Name your macs</h1>
<p>If you want to have a name shown instead of your mac, enter your mac and desired name below.</p>
<form method="post">
<table>
<thead>
<th>Mac</th>
<th>Name</th>
<th>Visible</th>
</thead>
<tbody>
<?php
$known_macs = known_macs_get();
$counter = 0;
foreach ($known_macs as $mac => $name) {
?>
<tr>
<td><input name="mac-<?=$counter?>" type="text" value="<?=$mac?>" /></td>
<td><input name="name-<?=$counter?>" type="text" value="<?=$name?>" /></td>
<td><input name="show-<?=$counter?>" type="checkbox" <?=$name==NULL?"":"checked"?> /></td>
</tr>
<?php
$counter++;
}
?>
<tr>
<td><input name="mac-<?=$counter?>" type="text" /></td>
<td><input name="name-<?=$counter?>" type="text" /></td>
<td><input name="show-<?=$counter?>" type="checkbox" /></td>
</tr>
</tbody>
</table>
<input type="submit" value="submit" name="submit" />
</form>
</body>
</html>

View File

@ -1,14 +0,0 @@
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Pamela</title>
<script src="js/jquery-1.3.2.js" type="text/javascript"></script>
<script src="js/pamela-buttons.js" type="text/javascript"></script>
<script src="js/pamela-nodes.js" type="text/javascript"></script>
<script src="js/pamela-matrices.js" type="text/javascript"></script>
<script src="js/pamela.js" type="text/javascript"></script>
<style type="text/css">* {margin:0; padding:0} body { background-color: #fff; }</style>
</head>
<body>
<canvas id="pamela"></canvas>
</body>
</html>

24
index.php Normal file
View File

@ -0,0 +1,24 @@
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Pamela</title>
<script src="js/jquery-1.3.2.js" type="text/javascript"></script>
<script src="js/pamela-conf.php" type="text/javascript"></script>
<script src="js/pamela-buttons.js" type="text/javascript"></script>
<script src="js/pamela-nodes.js" type="text/javascript"></script>
<script src="js/pamela-matrices.js" type="text/javascript"></script>
<script src="js/pamela.js" type="text/javascript"></script>
<style type="text/css">
* {
margin:0;
padding:0;
}
body {
background-color: <?php echo PAM_BGCOLOR; ?>;
}
</style>
</head>
<body>
<canvas id="pamela"></canvas>
</body>
</html>

View File

@ -98,7 +98,8 @@ function DownloadScriptButton(x, y) {
DownloadScriptButton.prototype.draw = function() {
if (this.isHover) {
context.fillStyle = 'rgb(192,192,192)';
//context.fillStyle = 'rgb(192,192,192)';
context.fillStyle = config.buttonColor;
context.font = "18pt sans-serif";
context.fillText("Download pamela scanner script", this.x, this.y - 10);
context.drawImage(this.dlCol, this.x, this.y);

10
js/pamela-conf.php Normal file
View File

@ -0,0 +1,10 @@
<?php
require_once("../config.php");
header('Content-Type: application/javascript');
?>
config = new function() {
this.bgcolor = "<?php echo PAM_BGCOLOR; ?>";
this.image = "<?php echo PAM_IMAGE; ?>";
this.buttonColor = "<?php echo PAM_BUT_COLOR; ?>";
this.buttonShow = <?php echo PAM_BUT_SHOW=="TRUE"?"true":"false"; ?>;
}

View File

@ -21,25 +21,25 @@
// Class color generator
function ColorGenerator() {
this.colors = [
[255, 0, 0],
[255, 255, 0],
[ 0, 255, 0],
[ 0, 255, 255],
[ 0, 0, 255],
[255, 0, 255]
];
this.colorGeneratorValue = 0;
this.colors = [
[255, 0, 0],
[255, 255, 0],
[ 0, 255, 0],
[ 0, 255, 255],
[ 0, 0, 255],
[255, 0, 255]
];
this.colorGeneratorValue = 0;
}
ColorGenerator.prototype.generate = function() {
if (this.colorGeneratorValue > this.colors.length)
this.colorGeneratorValue = 0;
if (this.colorGeneratorValue > this.colors.length)
this.colorGeneratorValue = 0;
// weirdo fix for chrome bug where the colors get
// garbage collected. I think.
var c = this.colors[this.colorGeneratorValue++];
return [c[0], c[1], c[2]];
// weirdo fix for chrome bug where the colors get
// garbage collected. I think.
var c = this.colors[this.colorGeneratorValue++];
return [c[0], c[1], c[2]];
};
var colorGenerator = new ColorGenerator();
@ -47,124 +47,124 @@ var colorGenerator = new ColorGenerator();
// Class Node
function Node(name) {
this.name = name;
this.modeTime = (new Date).getTime();
this.setMode("newNode");
var size = Math.min(width, height);
//this.color = [
// Math.random() * 128,
// Math.random() * 128,
// Math.random() * 128];
this.color = colorGenerator.generate();
this.position = new Vector(
(Math.random() * size) - (size / 2),
(Math.random() * size) - (size / 2),
(Math.random() * size) - (size / 2));
this.position.scale(0.5);
this.name = name;
this.modeTime = (new Date).getTime();
this.setMode("newNode");
var size = Math.min(width, height);
//this.color = [
// Math.random() * 128,
// Math.random() * 128,
// Math.random() * 128];
this.color = colorGenerator.generate();
this.position = new Vector(
(Math.random() * size) - (size / 2),
(Math.random() * size) - (size / 2),
(Math.random() * size) - (size / 2));
this.position.scale(0.5);
}
Node.prototype.setMode = function(mode) {
this.modeTime = (new Date).getTime();
if (mode == "newNode") {
jQuery.extend(this, Node.prototype.newNode);
} else if (mode == "dying") {
jQuery.extend(this, Node.prototype.dying);
} else if (mode == "dead") {
jQuery.extend(this, Node.prototype.dead);
this.isDead = true;
} else {
jQuery.extend(this, Node.prototype.normal);
}
this.modeTime = (new Date).getTime();
if (mode == "newNode") {
jQuery.extend(this, Node.prototype.newNode);
} else if (mode == "dying") {
jQuery.extend(this, Node.prototype.dying);
} else if (mode == "dead") {
jQuery.extend(this, Node.prototype.dead);
this.isDead = true;
} else {
jQuery.extend(this, Node.prototype.normal);
}
};
Node.prototype.alphaForDepth = function(d, start, cutoff) {
d = d < cutoff ? cutoff : d > start ? start : d;
return 1 - (d - start) / (cutoff - start);
d = d < cutoff ? cutoff : d > start ? start : d;
return 1 - (d - start) / (cutoff - start);
};
//Normal mode
Node.prototype.normal = {
project: function(m) {
this.projection = m.project(this.position);
this.alpha = 255 * this.alphaForDepth(this.projection.z, 0, -400);
},
project: function(m) {
this.projection = m.project(this.position);
this.alpha = 255 * this.alphaForDepth(this.projection.z, 0, -400);
},
draw: function() {
if (this.projection.z > -1) return;
var scale = width * 3 / -this.projection.z;
var alphaScale = 0.5 + this.alpha / 128;
var invAlphaScale = 1 - alphaScale;
var col =
/* [
Math.round(this.color[0]),
Math.round(this.color[1]),
Math.round(this.color[2]),
]; */
[
Math.round(128 * invAlphaScale + this.color[0] * alphaScale),
Math.round(128 * invAlphaScale + this.color[1] * alphaScale),
Math.round(128 * invAlphaScale + this.color[2] * alphaScale),
];
context.fillStyle = 'rgb(' + col[0] + ',' + col[1] + ',' + col[2] + ')';
//context.globalAlpha = this.alpha / 255;
context.beginPath();
context.arc(this.projection.x, this.projection.y, scale, 0, Math.PI * 2, false);
context.fill();
context.font = scale + "pt sans-serif";
context.fillText(this.name, this.projection.x + (scale * 1.5), this.projection.y + (scale / 1.5));
context.closePath();
context.globalAlpha = 1;
}
draw: function() {
if (this.projection.z > -1) return;
var scale = width * 3 / -this.projection.z;
var alphaScale = 0.5 + this.alpha / 128;
var invAlphaScale = 1 - alphaScale;
var col =
/* [
Math.round(this.color[0]),
Math.round(this.color[1]),
Math.round(this.color[2]),
]; */
[
Math.round(128 * invAlphaScale + this.color[0] * alphaScale),
Math.round(128 * invAlphaScale + this.color[1] * alphaScale),
Math.round(128 * invAlphaScale + this.color[2] * alphaScale),
];
context.fillStyle = 'rgb(' + col[0] + ',' + col[1] + ',' + col[2] + ')';
//context.globalAlpha = this.alpha / 255;
context.beginPath();
context.arc(this.projection.x, this.projection.y, scale, 0, Math.PI * 2, false);
context.fill();
context.font = scale + "pt sans-serif";
context.fillText(this.name, this.projection.x + (scale * 1.5), this.projection.y + (scale / 1.5));
context.closePath();
context.globalAlpha = 1;
}
};
//New mode
Node.prototype.newNode = {
project: function(m) {
var newTime = (new Date).getTime() - this.modeTime;
if (newTime > 1000) {
this.setMode("normal");
this.project(m);
return;
}
var scale = Math.sqrt(1000 / Math.max(newTime, 1));
this.projection = m.clone().scale(scale, scale, scale).project(this.position);
this.alpha = 255 * this.alphaForDepth(this.projection.z, 0, -500);
}
project: function(m) {
var newTime = (new Date).getTime() - this.modeTime;
if (newTime > 1000) {
this.setMode("normal");
this.project(m);
return;
}
var scale = Math.sqrt(1000 / Math.max(newTime, 1));
this.projection = m.clone().scale(scale, scale, scale).project(this.position);
this.alpha = 255 * this.alphaForDepth(this.projection.z, 0, -500);
}
};
//Dying mode
Node.prototype.dying = {
project: function(m) {
var dyingTime = (new Date).getTime() - this.modeTime;
if (dyingTime > 1000) {
this.setMode("dead");
return;
}
var scale = Math.sqrt(1000 / Math.max(1000 - dyingTime, 1));
this.projection = m.clone().scale(scale, scale, scale).project(this.position);
this.alpha = 255 * this.alphaForDepth(this.projection.z, 0, -500);
}
project: function(m) {
var dyingTime = (new Date).getTime() - this.modeTime;
if (dyingTime > 1000) {
this.setMode("dead");
return;
}
var scale = Math.sqrt(1000 / Math.max(1000 - dyingTime, 1));
this.projection = m.clone().scale(scale, scale, scale).project(this.position);
this.alpha = 255 * this.alphaForDepth(this.projection.z, 0, -500);
}
};
//Dead mode
Node.prototype.dead = {
project: function(m) {
},
project: function(m) {
},
draw: function() {
}
draw: function() {
}
};
// For inheriting classes
@ -174,22 +174,22 @@ Node.prototype.draw = Node.prototype.normal.draw;
// Class NorbertNode
jQuery.extend(NorbertNode.prototype, Node.prototype);
function NorbertNode() {
this.norbert = new Image();
this.norbert.src = "img/whitespace-logo-square-transp-drop.png";
self = this;
this.norbertLoaded = false;
this.norbert.onload=function() { self.norbertLoaded = true; }
this.position = new Vector(0, 0, 0);
parent = this;
this.norbert = new Image();
this.norbertLoaded = false;
$(this.norbert).load(function() {
parent.norbertLoaded = true;
parent.width = parent.norbert.width;
parent.height = parent.norbert.height;
});
this.norbert.src = config.image;
this.position = new Vector(0, 0, 0);
}
NorbertNode.prototype.draw = function() {
var s = Math.abs(this.projection.z / (width / 2));
s *= 2;
var x = Math.floor(this.projection.x - (280 / s));
var y = Math.floor(this.projection.y - (240 / s));
//var x = Math.floor(this.projection.x - (192 / s));
//var y = Math.floor(this.projection.y - (180 / s));
if (this.norbertLoaded)
context.drawImage(this.norbert, x, y);
if (!this.norbertLoaded) return;
var x = this.projection.x - this.width / 2;
var y = this.projection.y - this.height / 2;
context.drawImage(this.norbert, x, y);
};

View File

@ -23,183 +23,184 @@ var height;
// Class Pamela
function Pamela(canvas) {
context = canvas.getContext("2d");
width = context.canvas.clientWidth;
height = context.canvas.clientHeight;
this.norbertNode = new NorbertNode();
this.nodes = [this.norbertNode];
this.mouse = {
x: 0,
y: 0
};
this.buttons = new IFaceButtons();
this.downloadScriptButton = new DownloadScriptButton();
this.buttons.add(this.downloadScriptButton);
this.resize();
context = canvas.getContext("2d");
width = context.canvas.clientWidth;
height = context.canvas.clientHeight;
this.norbertNode = new NorbertNode();
this.nodes = [this.norbertNode];
this.mouse = {
x: 0,
y: 0
};
this.buttons = new IFaceButtons();
this.downloadScriptButton = new DownloadScriptButton();
this.buttons.add(this.downloadScriptButton);
this.resize();
this.m = new Matrix();
this.startTime = this.millis();
var self = this;
canvas.onmousemove = function(event) { self.mousemove(event); };
canvas.onmouseup = function(event) { self.mouseclick(event); };
$(window).resize(function () { self.resize(); });
this.m = new Matrix();
this.startTime = this.millis();
var self = this;
canvas.onmousemove = function(event) { self.mousemove(event); };
canvas.onmouseup = function(event) { self.mouseclick(event); };
$(window).resize(function () { self.resize(); });
}
Pamela.prototype.updateNodes = function(entities) {
// copy current nodes
var curN = this.nodes;
// reset current nodes
this.nodes = [];
// copy current nodes
var curN = this.nodes;
// reset current nodes
this.nodes = [];
while (curN.length > 0) {
var n = curN.pop();
// remove dead nodes
if (n.isDead)
continue;
// keep norbert around always
if (n == this.norbertNode) {
this.nodes.push(n);
continue;
}
while (curN.length > 0) {
var n = curN.pop();
// remove dead nodes
if (n.isDead)
continue;
// keep norbert around always
if (n == this.norbertNode) {
this.nodes.push(n);
continue;
}
// was around and keep around?
var found = false;
for (var i = 0; i < entities.length; i++) {
// was around and keep around?
var found = false;
for (var i = 0; i < entities.length; i++) {
if (entities[i] != n.name)
continue;
if (entities[i] != n.name)
continue;
this.nodes.push(n);
entities[i] = null;
found = true;
break;
}
// no longer around
if (!found) {
n.setMode("dying");
this.nodes.push(n);
}
}
// wasn't around before
for (var i = 0; i < entities.length; i++) {
if (entities[i] == null)
continue;
this.nodes.push(new Node(entities[i]));
}
this.nodes.push(n);
entities[i] = null;
found = true;
break;
}
// no longer around
if (!found) {
n.setMode("dying");
this.nodes.push(n);
}
}
// wasn't around before
for (var i = 0; i < entities.length; i++) {
if (entities[i] == null)
continue;
this.nodes.push(new Node(entities[i]));
}
};
Pamela.prototype.millis = function() {
return (new Date).getTime();
return (new Date).getTime();
};
Pamela.prototype.animate = function(secs) {
return -0.5 + (this.millis() % secs) / secs;
return -0.5 + (this.millis() % secs) / secs;
};
Pamela.prototype.start = function() {
if (this.play) return;
this.play = true;
this.updateEntries();
this.fire();
if (this.play) return;
this.play = true;
this.updateEntries();
this.fire();
};
Pamela.prototype.mousemove = function(event) {
this.buttons.mousemove(event);
this.mouse.x = event.clientX;
this.mouse.y = event.clientY;
this.buttons.mousemove(event);
this.mouse.x = event.clientX;
this.mouse.y = event.clientY;
};
Pamela.prototype.mouseclick = function(event) {
this.buttons.mouseclick(event);
this.buttons.mouseclick(event);
};
Pamela.prototype.fire = function() {
if (!this.play) return;
var self = this;
this.timer = setTimeout(function() { self.draw(); }, 50);
if (!this.play) return;
var self = this;
this.timer = setTimeout(function() { self.draw(); }, 50);
};
Pamela.prototype.stop = function() {
clearTimeout(this.timer);
clearTimeout(this.entriesTimer);
this.play = false;
clearTimeout(this.timer);
clearTimeout(this.entriesTimer);
this.play = false;
};
Pamela.prototype.draw = function() {
if (!this.play)
return;
var m = this.m;
m.resetMatrix();
var startAnimation = 1 - ((this.millis() - this.startTime) / 3000);
if (startAnimation > 0) {
startAnimation *= startAnimation;
m.translate((width / 4) * startAnimation, 0 ,0);
m.translate(0, 0, Math.PI * startAnimation);
}
m.translate(0, 0, -width / 5);
m.rotateY(this.animate(7000) * 2 * Math.PI);
m.rotateX(this.animate(12000) * 2 * Math.PI);
m.rotateY((this.mouse.x % width) / width * Math.PI);
m.rotateX((this.mouse.y % height) / height * Math.PI);
for (var i = 0; i < this.nodes.length; i++) {
this.nodes[i].project(m);
}
this.nodes.sort(function(a, b) {
return a.projection.z - b.projection.z;
});
if (!this.play)
return;
var m = this.m;
m.resetMatrix();
var startAnimation = 1 - ((this.millis() - this.startTime) / 3000);
if (startAnimation > 0) {
startAnimation *= startAnimation;
m.translate((width / 4) * startAnimation, 0 ,0);
m.translate(0, 0, Math.PI * startAnimation);
}
m.translate(0, 0, -width / 5);
m.rotateY(this.animate(7000) * 2 * Math.PI);
m.rotateX(this.animate(12000) * 2 * Math.PI);
m.rotateY((this.mouse.x % width) / width * Math.PI);
m.rotateX((this.mouse.y % height) / height * Math.PI);
for (var i = 0; i < this.nodes.length; i++) {
this.nodes[i].project(m);
}
this.nodes.sort(function(a, b) {
return a.projection.z - b.projection.z;
});
context.save();
context.fillStyle = "#fff";
context.fillRect( 0, 0, width, height );
context.translate(width / 2, height / 2);
for (var i = 0; i < this.nodes.length; i++) {
this.nodes[i].draw();
}
context.restore();
this.buttons.draw();
context.save();
context.fillStyle = config.bgcolor;
context.fillRect( 0, 0, width, height );
context.translate(width / 2, height / 2);
for (var i = 0; i < this.nodes.length; i++) {
this.nodes[i].draw();
}
context.restore();
this.fire();
if (config.buttonShow)
this.buttons.draw();
this.fire();
};
Pamela.prototype.resize = function() {
var canvas = $("#pamela")[0];
var windowWidth = window.innerWidth ? window.innerWidth : document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body.clientWidth;
var windowHeight = window.innerHeight ? window.innerHeight : document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight;
canvas.width = windowWidth - 10;
canvas.height = windowHeight - 10;
width = context.canvas.clientWidth;
height = context.canvas.clientHeight;
this.buttons.reposition();
var canvas = $("#pamela")[0];
var windowWidth = window.innerWidth ? window.innerWidth : document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body.clientWidth;
var windowHeight = window.innerHeight ? window.innerHeight : document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight;
canvas.width = windowWidth - 10;
canvas.height = windowHeight - 10;
width = context.canvas.clientWidth;
height = context.canvas.clientHeight;
this.buttons.reposition();
};
Pamela.prototype.updateEntries = function() {
var self = this;
$.getJSON("macs.php", function(data) {
self.updateNodes(data);
});
self.entriesTimer = setTimeout(function() { self.updateEntries(); }, 20000);
var self = this;
$.getJSON("macs.php", function(data) {
self.updateNodes(data);
});
self.entriesTimer = setTimeout(function() { self.updateEntries(); }, 20000);
};
$(document).ready(function() {
var canvas = $("#pamela")[0];
var pamela = new Pamela(canvas);
pamela.start();
var canvas = $("#pamela")[0];
var pamela = new Pamela(canvas);
pamela.start();
});