From c978215749ecfbb8d084a87809ddd795f0b96f23 Mon Sep 17 00:00:00 2001 From: "Adam S. Kirschner" Date: Sun, 15 May 2011 17:57:03 -0400 Subject: [PATCH] wrapping up first implementation, this all works --- docs/demo.js | 20 ++++++++++++++------ index.html | 12 ++++-------- src/DAT/GUI/ControllerObject.js | 7 ------- src/DAT/GUI/ControllerString.js | 1 - src/DAT/GUI/GUI.css | 2 +- 5 files changed, 19 insertions(+), 23 deletions(-) diff --git a/docs/demo.js b/docs/demo.js index fb923df..4c51048 100644 --- a/docs/demo.js +++ b/docs/demo.js @@ -1,4 +1,4 @@ -function FizzyText(message) { +function FizzyText(message, font) { var that = this; @@ -6,6 +6,7 @@ function FizzyText(message) { // Notice they're all defined with "this". That makes them public. // Otherwise, gui-dat can't see them. + this.growthSpeed = 0.2; // how fast do particles change size? this.maxSize = 5.59; // how big can they get? this.noiseStrength = 10; // how turbulent is the flow? @@ -25,7 +26,16 @@ function FizzyText(message) { this.__defineSetter__("message", function (m) { message = m; - createBitmap(message); + createBitmap(message, font); + }); + + this.__defineGetter__("font", function () { + return font; + }); + + this.__defineSetter__("font", function (f) { + font = f; + createBitmap(message, font); }); // We can even add functions to the DAT.GUI! As long as they have @@ -87,9 +97,8 @@ function FizzyText(message) { // This function creates a bitmap of pixels based on your message // It's called every time we change the message property. - var createBitmap = function (msg) { - s.font = g.font = "800 82px " + that.allFonts[ that.font ]; - console.log('createBitmap: ', s.font); + var createBitmap = function (msg, font) { + s.font = g.font = "800 82px " + that.allFonts[ font ]; s.fillStyle = "#fff"; s.fillRect(0, 0, width, height); @@ -107,7 +116,6 @@ function FizzyText(message) { that.framesRendered ++; s.font = g.font = "800 82px " + that.allFonts[ that.font ]; - console.log('render: ', s.font); g.clearRect(0, 0, width, height); diff --git a/index.html b/index.html index fbc11bb..c9aed82 100644 --- a/index.html +++ b/index.html @@ -37,22 +37,18 @@ prettyPrint(); - window.fizzyText = new FizzyText('dat.gui'); + window.fizzyText = new FizzyText('dat.gui', 0); var gui = new DAT.GUI(); // Text field - gui.add(fizzyText, 'message') - + gui.add(fizzyText, 'message'); // Sliders with min + max gui.add(fizzyText, 'maxSize').min(0.5).max(7); gui.add(fizzyText, 'growthSpeed').min(0.01).max(1).step(0.05); gui.add(fizzyText, 'speed', 0.1, 2, 0.05); // shorthand for min/max/step - gui.add(fizzyText, 'font', fizzyText.allFonts ) // Font toggle - .onChange(function(newValue) { - fizzyText.message = fizzyText.message; - }); - + gui.add(fizzyText, 'font', fizzyText.allFonts ); // Font toggle + // Sliders with min, max and increment. gui.add(fizzyText, 'noiseStrength', 10, 100, 5); diff --git a/src/DAT/GUI/ControllerObject.js b/src/DAT/GUI/ControllerObject.js index 8cf9a02..b6e765b 100644 --- a/src/DAT/GUI/ControllerObject.js +++ b/src/DAT/GUI/ControllerObject.js @@ -20,15 +20,8 @@ DAT.GUI.ControllerObject = function( gui, object, propertyName, options ) { _this.setValue(select.value); }, false); - this.domElement.style.cursor = "pointer"; - this.propertyNameElement.style.cursor = "pointer"; this.domElement.appendChild(select); - this.updateDisplay = function() { - - }; - - this.setValue = function(val) { val = select.value; return DAT.GUI.Controller.prototype.setValue.call(this, val); diff --git a/src/DAT/GUI/ControllerString.js b/src/DAT/GUI/ControllerString.js index 9642e82..496c4a5 100644 --- a/src/DAT/GUI/ControllerString.js +++ b/src/DAT/GUI/ControllerString.js @@ -51,7 +51,6 @@ DAT.GUI.ControllerString = function() { }; this.domElement.appendChild(input); - }; DAT.GUI.extendController(DAT.GUI.ControllerString); diff --git a/src/DAT/GUI/GUI.css b/src/DAT/GUI/GUI.css index 3433fab..3dfded0 100644 --- a/src/DAT/GUI/GUI.css +++ b/src/DAT/GUI/GUI.css @@ -116,7 +116,7 @@ a.guidat-toggle:hover { } .guidat-controller.object { - border-left: 5px solid #f00; + border-left: 5px solid #ffff00; } .guidat-controller.number input[type=text] {