Starting on sliders. Still some kinks.

This commit is contained in:
George Michael Brower 2011-01-25 02:35:45 -07:00
parent 6660144ab2
commit a6aea7d30b
4 changed files with 110 additions and 27 deletions

View File

@ -39,15 +39,15 @@ var NumberController = function() {
var slider; var slider;
if (min && max) { if (min != undefined && max != undefined) {
slider = new Slider(); slider = new Slider(this, min, max, step, this.getValue());
this.domElement.appendChild(slider.domElement); this.domElement.appendChild(slider.domElement);
} }
numberField.addEventListener('blur', function(e) { numberField.addEventListener('blur', function(e) {
var val = parseFloat(this.value); var val = parseFloat(this.value);
if (!isNaN(val)) { if (!isNaN(val)) {
updateValue(val); _this.updateValue(val);
} else { } else {
this.value = _this.getValue(); this.value = _this.getValue();
} }
@ -55,7 +55,7 @@ var NumberController = function() {
numberField.addEventListener('mousewheel', function(e) { numberField.addEventListener('mousewheel', function(e) {
e.preventDefault(); e.preventDefault();
updateValue(_this.getValue() + Math.abs(e.wheelDeltaY)/e.wheelDeltaY*step); this.updateValue(_this.getValue() + Math.abs(e.wheelDeltaY)/e.wheelDeltaY*step);
return false; return false;
}, false); }, false);
@ -77,7 +77,8 @@ var NumberController = function() {
clickedNumberField = false; clickedNumberField = false;
}, false); }, false);
if(navigator.appVersion.indexOf('chrome') != -1) { // Kinda nast
if (navigator.appVersion.indexOf('chrome') != -1) {
document.addEventListener('mouseout', function(e) { document.addEventListener('mouseout', function(e) {
document.removeEventListener('mousemove', dragNumberField, false); document.removeEventListener('mousemove', dragNumberField, false);
}, false); }, false);
@ -97,11 +98,11 @@ var NumberController = function() {
y = e.pageY; y = e.pageY;
var dy = py - y; var dy = py - y;
var newVal = _this.getValue() + dy*step; var newVal = _this.getValue() + dy*step;
updateValue(newVal); _this.updateValue(newVal);
return false; return false;
} }
var updateValue = function(val) { this.updateValue = function(val) {
val = parseFloat(val); val = parseFloat(val);

View File

@ -1,4 +1,16 @@
var Slider = function() { // TODO: Leaving the window while dragging the slider and then removing the mouse
// still leaves slider in focus.
// TODO: Problem with multiple sliders.
var Slider = function(numberController, min, max, step, initValue) {
var min = min;
var max = max;
var step = step;
var clicked = false;
var _this = this;
var x, px;
this.domElement = document.createElement('div'); this.domElement = document.createElement('div');
this.domElement.setAttribute('class', 'guidat-slider-bg'); this.domElement.setAttribute('class', 'guidat-slider-bg');
@ -8,4 +20,52 @@ var Slider = function() {
this.domElement.appendChild(this.fg); this.domElement.appendChild(this.fg);
var map = function(v, i1, i2, o1, o2) {
return o1 + (o2 - o1) * ((v - i1) / (i2 - i1));
}
var findPos = function(obj) {
var curleft = curtop = 0;
if (obj.offsetParent) {
do {
curleft += obj.offsetLeft;
curtop += obj.offsetTop;
} while (obj = obj.offsetParent);
return [curleft,curtop];
}
}
this.__defineSetter__('value', function(e) {
var pct = map(e, min, max, 0, 100);
this.fg.style.width = pct+"%";
});
var onDrag = function(e) {
if (!clicked) return;
var pos = findPos(_this.domElement);
var val = map(e.pageX, pos[0], pos[0] + _this.domElement.offsetWidth, min, max);
val = Math.round(val/step)*step;
numberController.updateValue(val);
}
this.domElement.addEventListener('mousedown', function(e) {
clicked = true;
x = px = e.pageX;
onDrag(e);
}, false);
this.domElement.addEventListener('mouseup', function(e) {
clicked = false;
}, false);
document.addEventListener('mousemove', onDrag, false);
this.value = initValue;
} }

32
gui.css
View File

@ -3,7 +3,7 @@
position: fixed; position: fixed;
width: 320px; width: 320px;
z-index: 200; z-index: 200;
opacity: 0.95; opacity: 0.97;
top: 0; top: 0;
left: 100%; left: 100%;
margin-left: -340px; margin-left: -340px;
@ -65,13 +65,10 @@
background-color: #222; background-color: #222;
} }
.guidat-controller input::selection {
background-color: #000;
}
.guidat-controller input:hover { .guidat-controller input:hover {
background-color: #444; background-color: #444;
} }
.guidat-controller input:focus { .guidat-controller input:focus {
background-color: #555; background-color: #555;
} }
@ -87,7 +84,8 @@ background-color: #000;
.guidat-controller.string input { .guidat-controller.string input {
border: 0; border: 0;
color: #1ed36f; color: #1ed36f;
margin-right: 1px; margin-right: 2px;
width: 170px;
} }
.guidat-controller.boolean { .guidat-controller.boolean {
@ -100,7 +98,7 @@ background-color: #000;
.guidat-controller.number input[type=text] { .guidat-controller.number input[type=text] {
width: 35px; width: 35px;
margin-left: 10px; margin-left: 5px;
margin-right: 2px; margin-right: 2px;
color: #00aeff; color: #00aeff;
} }
@ -116,9 +114,9 @@ background-color: #000;
.guidat-controller:last-child { .guidat-controller:last-child {
border-bottom: none; border-bottom: none;
-webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5);
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1); box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5);
} }
.guidat-propertyname { .guidat-propertyname {
@ -126,4 +124,18 @@ background-color: #000;
padding-top: 7px; padding-top: 7px;
cursor: default; cursor: default;
display: inline-block; display: inline-block;
}
.guidat-slider-bg {
background-color: #222;
cursor: ew-resize;
width: 130px;
margin-top: 2px;
float: right;
height: 21px;
}
.guidat-slider-fg {
background-color: #00aeff;
height: 20px;
} }

View File

@ -20,6 +20,7 @@
{ {
numberProperty: 20, numberProperty: 20,
constrainedNum: 0, constrainedNum: 0,
notchedNum: 240,
textProperty: "a string", textProperty: "a string",
anotherTextProperty: "another string", anotherTextProperty: "another string",
booleanProperty: false, booleanProperty: false,
@ -40,6 +41,9 @@
// Creates a slider (min, max) // Creates a slider (min, max)
GUI.add(controllableObject, "constrainedNum", -100, 100) GUI.add(controllableObject, "constrainedNum", -100, 100)
// Creates a slider with notches
GUI.add(controllableObject, "notchedNum", 0, 800, 20)
// Creates a text field // Creates a text field
GUI.add(controllableObject, "textProperty"); GUI.add(controllableObject, "textProperty");
@ -58,13 +62,16 @@
<pre id="demo-pre" class="prettyprint"> <pre id="demo-pre" class="prettyprint">
var controllableObject = var controllableObject =
{ {
numberProperty: 20, numberProperty: 20,
constrainedNum: 0, constrainedNum: 0,
textProperty: "a string", notchedNum: 240,
booleanProperty: false, textProperty: "a string",
functionProperty: function() { anotherTextProperty: "another string",
alert("I am a function!"); booleanProperty: false,
} anotherBooleanProperty: false,
functionProperty: function() {
alert("I am a function!");
}
}; };
window.onload = function() { window.onload = function() {
@ -75,7 +82,10 @@ window.onload = function() {
GUI.add(controllableObject, "numberProperty"); GUI.add(controllableObject, "numberProperty");
// Creates a slider (min, max) // Creates a slider (min, max)
GUI.add(controllableObject, "constrainedNum", -100, 100, 0); GUI.add(controllableObject, "constrainedNum", -100, 100)
// Creates a slider with notches
GUI.add(controllableObject, "notchedNum", 0, 800, 20)
// Creates a text field // Creates a text field
GUI.add(controllableObject, "textProperty"); GUI.add(controllableObject, "textProperty");
@ -90,7 +100,7 @@ window.onload = function() {
}; };
</pre> </pre>
<footer> <footer>
By <a href="http://georgemichaelbrower.com">George Michael Brower</a>, <a href="">Jono Brandel</a>, and <a href="https://github.com/jonobr1/GUI-DAT">you</a>. By <a href="http://georgemichaelbrower.com">George Michael Brower</a>, <a href="jonobr1.com">Jono Brandel</a>, and <a href="https://github.com/jonobr1/GUI-DAT">you</a>.
</footer> </footer>
</body> </body>
</html> </html>