will/pamela
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

More configurability through config.php

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
.htaccess
View File

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

50
admin.php
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>

14
index.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>

3
js/pamela-buttons.js
View File

@ -98,7 +98,8 @@ function DownloadScriptButton(x, y) {
DownloadScriptButton.prototype.draw = function() { DownloadScriptButton.prototype.draw = function() {
if (this.isHover) { 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.font = "18pt sans-serif";
context.fillText("Download pamela scanner script", this.x, this.y - 10); context.fillText("Download pamela scanner script", this.x, this.y - 10);
context.drawImage(this.dlCol, this.x, this.y); 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"; ?>;
}

222
js/pamela-nodes.js
View File

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

237
js/pamela.js
View File

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