From 5098db94eb368aac650098e07a661ab9200ba4aa Mon Sep 17 00:00:00 2001 From: sandbender Date: Sat, 13 Nov 2010 23:15:03 +0100 Subject: [PATCH] More configurability through config.php --- .htaccess | 5 - admin.php | 50 -------- index.html | 14 --- index.php | 24 ++++ js/pamela-buttons.js | 3 +- js/pamela-conf.php | 10 ++ js/pamela-nodes.js | 238 ++++++++++++++++++------------------- js/pamela.js | 271 ++++++++++++++++++++++--------------------- 8 files changed, 291 insertions(+), 324 deletions(-) delete mode 100644 .htaccess delete mode 100644 admin.php delete mode 100644 index.html create mode 100644 index.php create mode 100644 js/pamela-conf.php diff --git a/.htaccess b/.htaccess deleted file mode 100644 index 82f84f7..0000000 --- a/.htaccess +++ /dev/null @@ -1,5 +0,0 @@ -Addtype application/octet-stream .ttf .otf -AddType application/vnd.ms-fontobject .eot - -RewriteRule (.*).php $1 -RewriteRule (.*).hmtl $1 diff --git a/admin.php b/admin.php deleted file mode 100644 index 202edd2..0000000 --- a/admin.php +++ /dev/null @@ -1,50 +0,0 @@ - - - - Pamela - - - - -
-
- Pamela -
-
-

Name your macs

-

If you want to have a name shown instead of your mac, enter your mac and desired name below.

-
- - - - - - - - $name) { -?> - - - - - - - - - - - - -
MacNameVisible
/>
- -
- - diff --git a/index.html b/index.html deleted file mode 100644 index b4ed8fb..0000000 --- a/index.html +++ /dev/null @@ -1,14 +0,0 @@ - - - Pamela - - - - - - - - - - - diff --git a/index.php b/index.php new file mode 100644 index 0000000..32f6306 --- /dev/null +++ b/index.php @@ -0,0 +1,24 @@ + + + Pamela + + + + + + + + + + + + diff --git a/js/pamela-buttons.js b/js/pamela-buttons.js index f174661..eb43d66 100644 --- a/js/pamela-buttons.js +++ b/js/pamela-buttons.js @@ -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); diff --git a/js/pamela-conf.php b/js/pamela-conf.php new file mode 100644 index 0000000..48f7efe --- /dev/null +++ b/js/pamela-conf.php @@ -0,0 +1,10 @@ + +config = new function() { + this.bgcolor = ""; + this.image = ""; + this.buttonColor = ""; + this.buttonShow = ; +} diff --git a/js/pamela-nodes.js b/js/pamela-nodes.js index 65a5555..f304687 100644 --- a/js/pamela-nodes.js +++ b/js/pamela-nodes.js @@ -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); }; diff --git a/js/pamela.js b/js/pamela.js index cb8f5e3..909b91b 100644 --- a/js/pamela.js +++ b/js/pamela.js @@ -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(); });