library-mirrors/dat.gui
1
0
Fork 0
mirror of https://github.com/dataarts/dat.gui.git synced 2024-12-12 04:08:27 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

I made a composition in gui-dat/time. It is not that good, but you can save and load.

Browse Source
This commit is contained in:
George Michael Brower 2011-02-13 12:23:10 -05:00
parent ffa9af2e82
commit 9843e59773
7 changed files with 175 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
controllers/controller.js
View File

@ -47,7 +47,6 @@ GUI.Controller.prototype.setValue = function(n) {
this.object[this.propertyName] = n;
for (var i in this.changeListeners) {
console.log("Telling you I changed to " + n);
this.changeListeners[i].call(this, n);
}
// Whenever you call setValue, the display will be updated automatically.

56
demo/demo.js
View File

@ -1,9 +1,9 @@
function FizzyText(message) {
var that = this;
var _this = this;
// These are the variables that we manipulate with gui-dat.
// Notice they're all defined with "this". That makes them public.
// These are the variables _this we manipulate with gui-dat.
// Notice they're all defined with "this". _this makes them public.
// Otherwise, gui-dat can't see them.
this.growthSpeed = 0.5; // how fast do particles change size?
@ -12,8 +12,11 @@ function FizzyText(message) {
this.speed = 0.4; // how fast do particles move?
this.displayOutline = false; // should we draw the message as a stroke?
this.framesRendered = 0;
this.x = 0;
this.y = 0;
this.scale = 1;
// __defineGetter__ and __defineSetter__ makes JavaScript believe that
// __defineGetter__ and __defineSetter__ makes JavaScript believe _this
// we've defined a variable 'this.message'. This way, whenever we
// change the message variable, we can call some more functions.
@ -42,8 +45,8 @@ function FizzyText(message) {
var _this = this;
var width = 550;
var height = 200;
var width, height;
var textAscent = 140;
var textOffsetLeft = 20;
var noiseScale = 300;
@ -60,10 +63,17 @@ function FizzyText(message) {
var c = document.createElement('canvas');
var g = c.getContext('2d');
r.setAttribute('width', width);
c.setAttribute('width', width);
r.setAttribute('height', height);
c.setAttribute('height', height);
var onResize = function() {
r.width = c.width = width = window.innerWidth;
r.height = c.height = height = window.innerHeight;
console.log(width, height);
}
window.addEventListener('resize', function() {
onResize();
createBitmap(this.message);
}, false);
onResize();
// Add our demo to the HTML
document.getElementById('helvetica-demo').appendChild(c);
@ -76,10 +86,10 @@ function FizzyText(message) {
// Set g.font to the same font as the bitmap canvas, incase we
// want to draw some outlines.
s.font = g.font = "800 " + textAscent + "px helvetica, arial, sans-serif";
s.font = g.font = "bold " + textAscent + "px Helvetica, Arial, sans-serif";
// Instantiate some particles
for (var i = 0; i < 1000; i++) {
for (var i = 0; i < 1500; i++) {
particles.push(new Particle(Math.random() * width, Math.random() * height));
}
@ -91,7 +101,8 @@ function FizzyText(message) {
s.fillRect(0, 0, width, height);
s.fillStyle = "#222";
s.fillText(msg, textOffsetLeft, textAscent);
s.textAlign = 'center';
s.fillText(msg, width/2, height/2);
// Pull reference
var imageData = s.getImageData(0, 0, width, height);
@ -102,24 +113,31 @@ function FizzyText(message) {
// Called once per frame, updates the animation.
var render = function () {
that.framesRendered ++;
_this.framesRendered ++;
g.fillStyle="#000";
g.fillRect(0, 0, width, height);
g.clearRect(0, 0, width, height);
g.save();
g.translate(width/2, height/2);
g.scale(_this.scale, _this.scale);
g.translate(-width/2+_this.x, -height/2+_this.y);
if (_this.displayOutline) {
g.globalCompositeOperation = "source-over";
g.strokeStyle = "#000";
g.lineWidth = .5;
g.strokeText(message, textOffsetLeft, textAscent);
g.strokeText(message, textOffsetLeft+width/2, textAscent+height/2);
}
g.globalCompositeOperation = "darker";
g.globalCompositeOperation = "lighter";
for (var i = 0; i < particles.length; i++) {
g.fillStyle = colors[i % colors.length];
particles[i].render();
}
g.restore();
};
// Returns x, y coordinates for a given index in the pixel array.
@ -148,12 +166,8 @@ function FizzyText(message) {
this.message = message;
var loop = function() {
// Don't render if we don't see it.
// Would be cleaner if I dynamically acquired the top of the canvas.
if (document.body.scrollTop < height + 20) {
render();
}
}
// This calls the render function every 30 milliseconds.
setInterval(loop, frameTime);

35
gui.css
View File

@ -31,6 +31,41 @@
height: 31px;
}
#guidat-save-dialogue {
z-index: 1001;
-webkit-box-shadow: rgba(0,0,0,0.6) 0px 0px 10px;
position: fixed;
top: 50%;
left: 50%;
background-color: #111;
color: #ccc;
width: 400px;
height: 228px;
margin-top: -114px;
margin-left: -200px;
text-align: center;
padding: 10px;
}
#guidat-save-dialogue textarea {
margin-top: 9px;
width: 390px;
height: 160px;
font-size: 9px;
border: 0;
font-family: Monaco, monospace;
padding: 5px;
}
#guidat-save-dialogue a {
display: block;
text-decoration: none;
background-color: rgba(255,255,255,0.1);
border: 1px outset #444;
margin-bottom: 9px;
padding: 5px;
}
.guidat {
color: #fff;
opacity: 0.97;

19
gui.js
View File

@ -7,6 +7,10 @@ var GUI = function() {
var json = GUI.loadedJSON.guis.splice(0, 1)[0];
}
this.__defineGetter__("json", function() {
return json;
});
var _this = this;
// For use with GUIScrubber
@ -351,7 +355,7 @@ var GUI = function() {
GUI.allControllers.push(controllerObject);
// Do we have a saved value for this controller?
if (json.values.length > 0) {
if (json && json.values.length > 0) {
var val = json.values.splice(0, 1)[0];
if (type != "function") {
controllerObject.setValue(val);
@ -435,7 +439,11 @@ var GUI = function() {
values.push(val);
}
return {open:open, width:width, openHeight:openHeight, scroll:controllerContainer.scrollTop, values:values}
var obj= {open:open, width:width, openHeight:openHeight, scroll:controllerContainer.scrollTop, values:values}
if (this.timer) {
obj.timer = timer.getJSON();
}
return obj;
}
// GUI ... GUI
@ -465,11 +473,6 @@ var GUI = function() {
toggleButton.innerHTML = n;
}
// used in saveURL
this.appearanceVars = function() {
return [open, width, openHeight, controllerContainer.scrollTop]
}
var beginResize = function() {
//console.log("Resizing from " + curControllerContainerHeight + " to " + resizeTo);
curControllerContainerHeight += (resizeTo - curControllerContainerHeight)*0.6;
@ -508,7 +511,7 @@ var GUI = function() {
}
// Add hide listener if this is the first GUI.
if (GUI.allGuis.length == 0) {
if (GUI.allGuis.length == 1) {
window.addEventListener('keyup', function(e) {
// Hide on "H"
if (e.keyCode == 72) {

31
index.html
View File

@ -24,31 +24,48 @@
var timer;
window.onload = function() {
GUI.loadJSON('{"guis":[{"open":true,"width":279,"openHeight":95,"scroll":0,"values":["gui-datddd",3.315,0.5841]},{"open":true,"width":283,"openHeight":127,"scroll":0,"values":[1.71,45,true,null]}],"timers":[]}');
GUI.loadJSON({"guis":[{"open":true,"width":280,"openHeight":287,"scroll":1,"values":["over time",1.35,8.955,0.9833,1.254,10,false,null,0],"timer":{"windowMin":1687.2598554396586,"windowWidth":11596,"playhead":6413.8663,"snapIncrement":250,"useSnap":false,"scrubbers":[{"points":[{"value":"","time":-961.1787},{"value":"gui-dat","time":197.8981},{"value":"over time","time":5000}]},{"points":[{"value":1.3499999999999999,"time":644.1387}]},{"points":[{"value":0.5,"time":72.8056,"tween":"CircularEaseOut"},{"value":7,"time":659.1556},{"value":7,"time":2211.2348},{"value":5.525,"time":4992.5319},{"value":8.955,"time":6413.8663}]},{"points":[{"value":0.5049,"time":-532.8902,"tween":"Hold"},{"value":0.5544,"time":1666.4321},{"value":0.01,"time":3382.0743,"tween":"Hold"},{"value":0.01,"time":4969.9097},{"value":1,"time":6393.5388}]},{"points":[{"value":0.39899999999999997,"time":1652.5592,"tween":"QuarticEaseIn"},{"value":1.254,"time":3471.5432}]},{"points":[{"value":10,"time":795.5192,"tween":"Hold"},{"value":10,"time":5000}]},{"points":[]},{"points":[]},{"points":[{"value":0,"time":250,"tween":"Hold"}]}]}},{"open":true,"width":280,"openHeight":127,"scroll":0,"values":[null,false,250,null]}]});
var fizzyText = new FizzyText("gui-dat");
var gui = new GUI();
var gui2 = new GUI();
var timerControls = new GUI();
timer = new GUI.Timer(gui);
// Text field
gui.add(fizzyText, "message");
gui.add(fizzyText, "scale", 0.25, 4);
// Sliders with min and max
gui.add(fizzyText, "maxSize", 0.5, 7);
gui.add(fizzyText, "growthSpeed", 0.01, 1);
gui2.add(fizzyText, "speed", 0.1, 2);
gui.add(fizzyText, "speed", 0.1, 2);
// Sliders with min, max and increment.
gui2.add(fizzyText, "noiseStrength", 10, 100, 5);
gui.add(fizzyText, "noiseStrength", 10, 100, 5);
// Boolean checkbox
gui2.add(fizzyText, "displayOutline");
gui.add(fizzyText, "displayOutline");
// Fires a function called "explode"
gui2.add(fizzyText, "explode");
gui.add(fizzyText, "explode");
timerControls.add(timer, "playPause");
timerControls.add(timer, "useSnap");
timerControls.add(timer, "snapIncrement");
timerControls.add(GUI, "save");
gui.add(fizzyText, 'y', -500, 500);
GUI.hide();
timer.playhead = 0;
timer.play();
};

27
time/scrubber.js
View File

@ -2,6 +2,7 @@ GUI.Scrubber = function(controller, timer) {
var _this = this;
this.points = [];
this.timer = timer;
this.timer.scrubbers.push(this);
@ -32,7 +33,6 @@ GUI.Scrubber = function(controller, timer) {
this.add = function(p) {
this.points.push(p);
this.getJSON();
this.sort();
};
@ -374,9 +374,22 @@ GUI.Scrubber = function(controller, timer) {
};
this.timer.addPlayListener(onPlayChange);
this.timer.addWindowListener(this.render);
// Load saved points!!!!
if (timer.gui.json) {
var json = timer.gui.json.timer.scrubbers.splice(0, 1)[0];
for (var i in json.points) {
var p = json.points[i];
var pp = new GUI.ScrubberPoint(this, p.time, p.value);
if (p.tween) {
pp.tween = GUI.Easing[p.tween];
}
this.add(pp);
}
}
};
@ -452,10 +465,18 @@ GUI.ScrubberPoint = function(scrubber, time, value) {
}
this.getJSON = function() {
var obj = { 'value': _this.value, 'time': time };
var obj = { 'value': _this.value, 'time': GUI.roundToDecimal(time,4) };
// TODO: save tweens
if (this.tween != GUI.Easing.Linear) {
for (var i in GUI.Easing) {
if (this.tween == GUI.Easing[i]) {
obj.tween = i;
}
}
}
return obj;
};

52
time/timer.js
View File

@ -4,6 +4,7 @@ GUI.millis = function() {
};
GUI.Controller.prototype.at = function(when, what, tween) {
// TODO: Disable if we're using loaded JSON. Don't want to duplicate events.
if (!this.scrubber) {
GUI.error('You must create a new Timer for this GUI in order to define events.');
return this;
@ -20,28 +21,48 @@ GUI.loadJSON = function(json) {
GUI.loadedJSON = json;
}
GUI.loadedJSON = null;
GUI.getJSON = function() {
var guis = [], timers = [];
var guis = [];
for (var i in GUI.allGuis) {
guis.push(GUI.allGuis[i].getJSON());
}
for (var i in GUI.allTimers) {
timers.push(GUI.allTimers[i].getJSON());
}
var obj = {guis:guis, timers:timers};
return obj;
var obj = {guis:guis};
return {guis:guis};
}
GUI.save = function() {
var jsonString = JSON.stringify(GUI.getJSON());
var dialogue = document.createElement('div');
dialogue.setAttribute('id', 'guidat-save-dialogue');
var a = document.createElement('a');
a.setAttribute('href', window.location.href+'?gui='+escape(jsonString));
a.innerHTML = 'Use this URL.';
var span2 = document.createElement('span');
span2.innerHTML = '&hellip; or paste this into the beginning of your source:';
var textarea = document.createElement('textarea');
textarea.setAttribute('disabled', 'true');
textarea.innerHTML += 'GUI.loadJSON('+jsonString+');';
//textarea.select();
dialogue.appendChild(a);
dialogue.appendChild(span2);
dialogue.appendChild(textarea);
document.body.appendChild(dialogue);
}
GUI.allTimers = [];
GUI.Timer = function(gui) {
GUI.allTimers.push(this);
var _this = this;
this.hoverPoint = null;
@ -171,6 +192,7 @@ GUI.Timer = function(gui) {
'windowWidth':_this.windowWidth,
'playhead':_this.playhead,
'snapIncrement': _this.snapIncrement,
'useSnap': _this.useSnap,
'scrubbers': scrubberArr};
return obj;
@ -262,4 +284,12 @@ GUI.Timer = function(gui) {
windowListeners.push(fnc);
};
// Load saved stuff.
if (gui.json && gui.json.timer) {
this.playhead = gui.json.timer.playhead;
this.snapIncrement = gui.json.timer.snapIncrement;
this.useSnap = gui.json.timer.useSnap;
this.windowMin = gui.json.timer.windowMin;
this.windowWidth = gui.json.timer.windowWidth;
}
}