From 7913c0d0b76103a000a0b2a4c06d65fb44e57dfb Mon Sep 17 00:00:00 2001 From: jonobr1 Date: Tue, 25 Jan 2011 17:58:52 -0700 Subject: [PATCH] removed canvas element to be just html --- demo/demo.css | 17 +++++++++++++++-- demo/demo.js | 30 ------------------------------ index.html | 43 ++++++++++++++++++++++--------------------- 3 files changed, 37 insertions(+), 53 deletions(-) diff --git a/demo/demo.css b/demo/demo.css index de418d3..6a3440b 100644 --- a/demo/demo.css +++ b/demo/demo.css @@ -18,7 +18,7 @@ h1 { font-weight: 800; text-transform: lowercase; 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 { @@ -31,7 +31,6 @@ h1 img { height: 45px; -moz-border-radius: 9px; border-radius: 9px; - margin-bottom: 20px; } pre { @@ -57,6 +56,20 @@ a:active { 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. */ .str { color: #0fa954; } .kwd { color: #e61d5f; } diff --git a/demo/demo.js b/demo/demo.js index 58c179a..e69de29 100644 --- a/demo/demo.js +++ b/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); - -} \ No newline at end of file diff --git a/index.html b/index.html index fb683f1..4a68188 100644 --- a/index.html +++ b/index.html @@ -15,8 +15,7 @@ - - + -

GUI-DAT flaggui-dat

+

GUI-DAT flaggui-dat

is a super-light javascript library for making GUI elements. It is inspired by controlP5.

@@ -70,20 +69,22 @@ 
 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!");
-	  }
+      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
@@ -91,12 +92,12 @@ window.onload = function() {
 
    // 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");
+   GUI.add(controllableObject, "pageTitle");
 
    // Creates a checkbox
    GUI.add(controllableObject, "booleanProperty");
@@ -104,11 +105,11 @@ window.onload = function() {
    // Creates a button
    GUI.add(controllableObject, "functionProperty")
       .setName("Fire a Function");
-
 };
+
\ No newline at end of file