mirror of
https://github.com/dataarts/dat.gui.git
synced 2024-12-12 04:08:27 +00:00
removed canvas element to be just html
This commit is contained in:
jonobr1
parent
fa4df59d0e
commit
7913c0d0b7
@ -18,7 +18,7 @@ h1 {
|
|||||||
font-weight: 800;
|
font-weight: 800;
|
||||||
text-transform: lowercase;
|
text-transform: lowercase;
|
||||||
line-height: 80px;
|
line-height: 80px;
|
||||||
margin: 20px 0 0 0;
|
margin: 20px 0 20px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
h1 a:link, h1 a:visited, h1 a:hover, h1 a:active {
|
h1 a:link, h1 a:visited, h1 a:hover, h1 a:active {
|
||||||
@ -31,7 +31,6 @@ h1 img {
|
|||||||
height: 45px;
|
height: 45px;
|
||||||
-moz-border-radius: 9px;
|
-moz-border-radius: 9px;
|
||||||
border-radius: 9px;
|
border-radius: 9px;
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
pre {
|
pre {
|
||||||
@ -57,6 +56,20 @@ a:active {
|
|||||||
color: #54396e;
|
color: #54396e;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#columns {
|
||||||
|
position: fixed;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#columns div {
|
||||||
|
float: left;
|
||||||
|
width : auto;
|
||||||
|
height: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
/* SPAN elements with the classes below are added by prettyprint. */
|
/* SPAN elements with the classes below are added by prettyprint. */
|
||||||
.str { color: #0fa954; }
|
.str { color: #0fa954; }
|
||||||
.kwd { color: #e61d5f; }
|
.kwd { color: #e61d5f; }
|
||||||
|
|||||||
30
demo/demo.js
30
demo/demo.js
@ -1,30 +0,0 @@
|
|||||||
|
|
||||||
var c, g;
|
|
||||||
var frameRate = 1000/60;
|
|
||||||
var width, height;
|
|
||||||
|
|
||||||
var checkAsset = 0;
|
|
||||||
var letterWidth = 50;
|
|
||||||
|
|
||||||
function setup() {
|
|
||||||
|
|
||||||
c = document.getElementById('helvetica-demo');
|
|
||||||
g = c.getContext('2d');
|
|
||||||
|
|
||||||
width = c.width;
|
|
||||||
height = c.height;
|
|
||||||
|
|
||||||
g.font = "800 80px helvetica, arial, sans-serif";
|
|
||||||
frameRate = setInterval("draw()", frameRate);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
function draw() {
|
|
||||||
|
|
||||||
g.fillStyle = "#fff";
|
|
||||||
g.fillRect(0, 0, width, height);
|
|
||||||
|
|
||||||
g.fillStyle = "#222";
|
|
||||||
g.fillText(controllableObject.pageTitle, 0, 80);
|
|
||||||
|
|
||||||
}
|
|
||||||
103
index.html
103
index.html
@ -15,8 +15,7 @@
|
|||||||
<script type="text/javascript" src="controllers/controller.number.js"></script>
|
<script type="text/javascript" src="controllers/controller.number.js"></script>
|
||||||
<script type="text/javascript" src="controllers/controller.boolean.js"></script>
|
<script type="text/javascript" src="controllers/controller.boolean.js"></script>
|
||||||
<script type="text/javascript" src="controllers/controller.function.js"></script>
|
<script type="text/javascript" src="controllers/controller.function.js"></script>
|
||||||
<script type="text/javascript" src="demo/swell.js"></script>
|
<!-- <script type="text/javascript" src="demo/demo.js"></script> -->
|
||||||
<script type="text/javascript" src="demo/demo.js"></script>
|
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var controllableObject =
|
var controllableObject =
|
||||||
{
|
{
|
||||||
@ -41,6 +40,56 @@
|
|||||||
// Creates a number box
|
// Creates a number box
|
||||||
GUI.add(controllableObject, "numberProperty");
|
GUI.add(controllableObject, "numberProperty");
|
||||||
|
|
||||||
|
// Creates a slider (min, max)
|
||||||
|
GUI.add(controllableObject, "constrainedNum", 0, 16);
|
||||||
|
|
||||||
|
// Creates a slider with notches
|
||||||
|
GUI.add(controllableObject, "notchedNum", 0, 800, 100);
|
||||||
|
|
||||||
|
// Creates a text field
|
||||||
|
GUI.add(document.getElementById('helvetica-demo'), "innerHTML");
|
||||||
|
|
||||||
|
// Creates a checkbox
|
||||||
|
GUI.add(controllableObject, "booleanProperty");
|
||||||
|
|
||||||
|
// Creates a button
|
||||||
|
GUI.add(controllableObject, "functionProperty")
|
||||||
|
.setName("Fire a Function");
|
||||||
|
|
||||||
|
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<h1><a href = "http://twitter.com/guidat"><img src = "demo/assets/favicon.gif" border = "0" alt = "GUI-DAT flag" /></a><span id = "helvetica-demo">gui-dat</span></h1>
|
||||||
|
<p>
|
||||||
|
is a super-light javascript library for making GUI elements. It is inspired by <a href = "http://www.sojamo.de/libraries/controlP5/">controlP5</a>.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<pre id="demo-pre" class="prettyprint">
|
||||||
|
var controllableObject =
|
||||||
|
{
|
||||||
|
numberProperty: 20,
|
||||||
|
constrainedNum: 0,
|
||||||
|
notchedNum: 240,
|
||||||
|
pageTitle: "gui-dat",
|
||||||
|
anotherTextProperty: "another string",
|
||||||
|
booleanProperty: false,
|
||||||
|
anotherBooleanProperty: false,
|
||||||
|
functionProperty: function() {
|
||||||
|
alert("I am a function!");
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
window.onload = function() {
|
||||||
|
|
||||||
|
prettyPrint();
|
||||||
|
|
||||||
|
GUI.start();
|
||||||
|
|
||||||
|
// Creates a number box
|
||||||
|
GUI.add(controllableObject, "numberProperty");
|
||||||
|
|
||||||
// Creates a slider (min, max)
|
// Creates a slider (min, max)
|
||||||
GUI.add(controllableObject, "constrainedNum", -100, 100)
|
GUI.add(controllableObject, "constrainedNum", -100, 100)
|
||||||
|
|
||||||
@ -56,59 +105,11 @@
|
|||||||
// Creates a button
|
// Creates a button
|
||||||
GUI.add(controllableObject, "functionProperty")
|
GUI.add(controllableObject, "functionProperty")
|
||||||
.setName("Fire a Function");
|
.setName("Fire a Function");
|
||||||
|
|
||||||
setup();
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<h1><a href = "http://twitter.com/guidat"><img src = "demo/assets/favicon.gif" border = "0" alt = "GUI-DAT flag" /></a><canvas id = "helvetica-demo" width = "500" height = "100">gui-dat</canvas></h1>
|
|
||||||
<p>
|
|
||||||
is a super-light javascript library for making GUI elements. It is inspired by <a href = "http://www.sojamo.de/libraries/controlP5/">controlP5</a>.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<pre id="demo-pre" class="prettyprint">
|
|
||||||
var controllableObject =
|
|
||||||
{
|
|
||||||
numberProperty: 20,
|
|
||||||
constrainedNum: 0,
|
|
||||||
notchedNum: 240,
|
|
||||||
textProperty: "a string",
|
|
||||||
anotherTextProperty: "another string",
|
|
||||||
booleanProperty: false,
|
|
||||||
anotherBooleanProperty: false,
|
|
||||||
functionProperty: function() {
|
|
||||||
alert("I am a function!");
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
window.onload = function() {
|
|
||||||
|
|
||||||
GUI.start();
|
|
||||||
|
|
||||||
// Creates a number box
|
|
||||||
GUI.add(controllableObject, "numberProperty");
|
|
||||||
|
|
||||||
// Creates a slider (min, max)
|
|
||||||
GUI.add(controllableObject, "constrainedNum", -100, 100)
|
|
||||||
|
|
||||||
// Creates a slider with notches
|
|
||||||
GUI.add(controllableObject, "notchedNum", 0, 800, 100)
|
|
||||||
|
|
||||||
// Creates a text field
|
|
||||||
GUI.add(controllableObject, "textProperty");
|
|
||||||
|
|
||||||
// Creates a checkbox
|
|
||||||
GUI.add(controllableObject, "booleanProperty");
|
|
||||||
|
|
||||||
// Creates a button
|
|
||||||
GUI.add(controllableObject, "functionProperty")
|
|
||||||
.setName("Fire a Function");
|
|
||||||
|
|
||||||
};
|
};
|
||||||
</pre>
|
</pre>
|
||||||
<footer>
|
<footer>
|
||||||
By <a href="http://georgemichaelbrower.com/">George Michael Brower</a>, <a href="http://jonobr1.com/">Jono Brandel</a>, and <a href="http://github.com/jonobr1/GUI-DAT">you</a>.
|
By <a href="http://georgemichaelbrower.com/">George Michael Brower</a>, <a href="http://jonobr1.com/">Jono Brandel</a>, and <a href="http://github.com/jonobr1/GUI-DAT">you</a>.
|
||||||
</footer>
|
</footer>
|
||||||
|
<div id = "columns"></div>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
Loading…
Reference in New Issue
Block a user