From 340f58fbabe18ba2f463c8446384345f877ae16c Mon Sep 17 00:00:00 2001 From: jonobr1 Date: Tue, 25 Jan 2011 16:07:51 -0800 Subject: [PATCH] decided not to use svgs and am using the native font method for the canvas object --- demo/assets/a.svg | 22 -- demo/assets/b.svg | 18 -- demo/assets/c.svg | 17 -- demo/assets/d.svg | 17 -- demo/assets/e.svg | 18 -- demo/assets/f.svg | 15 -- demo/assets/favicon.gif | Bin 169 -> 0 bytes demo/assets/g.svg | 20 -- demo/assets/h.svg | 16 -- demo/assets/i.svg | 13 - demo/assets/j.svg | 15 -- demo/assets/k.svg | 13 - demo/assets/l.svg | 13 - demo/assets/m.svg | 19 -- demo/assets/n.svg | 15 -- demo/assets/o.svg | 17 -- demo/assets/p.svg | 18 -- demo/assets/q.svg | 18 -- demo/assets/r.svg | 15 -- demo/assets/s.svg | 20 -- demo/assets/t.svg | 15 -- demo/assets/u.svg | 16 -- demo/assets/v.svg | 13 - demo/assets/w.svg | 14 -- demo/assets/x.svg | 13 - demo/assets/y.svg | 16 -- demo/assets/z.svg | 13 - demo/demo.js | 30 +++ demo/swell.js | 512 ---------------------------------------- index.html | 27 ++- 30 files changed, 45 insertions(+), 943 deletions(-) delete mode 100644 demo/assets/a.svg delete mode 100644 demo/assets/b.svg delete mode 100644 demo/assets/c.svg delete mode 100644 demo/assets/d.svg delete mode 100644 demo/assets/e.svg delete mode 100644 demo/assets/f.svg delete mode 100644 demo/assets/favicon.gif delete mode 100644 demo/assets/g.svg delete mode 100644 demo/assets/h.svg delete mode 100644 demo/assets/i.svg delete mode 100644 demo/assets/j.svg delete mode 100644 demo/assets/k.svg delete mode 100644 demo/assets/l.svg delete mode 100644 demo/assets/m.svg delete mode 100644 demo/assets/n.svg delete mode 100644 demo/assets/o.svg delete mode 100644 demo/assets/p.svg delete mode 100644 demo/assets/q.svg delete mode 100644 demo/assets/r.svg delete mode 100644 demo/assets/s.svg delete mode 100644 demo/assets/t.svg delete mode 100644 demo/assets/u.svg delete mode 100644 demo/assets/v.svg delete mode 100644 demo/assets/w.svg delete mode 100644 demo/assets/x.svg delete mode 100644 demo/assets/y.svg delete mode 100644 demo/assets/z.svg delete mode 100644 demo/swell.js diff --git a/demo/assets/a.svg b/demo/assets/a.svg deleted file mode 100644 index 0a96e0d..0000000 --- a/demo/assets/a.svg +++ /dev/null @@ -1,22 +0,0 @@ - - - -]> - - - - - diff --git a/demo/assets/b.svg b/demo/assets/b.svg deleted file mode 100644 index d12fea7..0000000 --- a/demo/assets/b.svg +++ /dev/null @@ -1,18 +0,0 @@ - - - -]> - - - - - diff --git a/demo/assets/c.svg b/demo/assets/c.svg deleted file mode 100644 index f768013..0000000 --- a/demo/assets/c.svg +++ /dev/null @@ -1,17 +0,0 @@ - - - -]> - - - - - diff --git a/demo/assets/d.svg b/demo/assets/d.svg deleted file mode 100644 index 26fc963..0000000 --- a/demo/assets/d.svg +++ /dev/null @@ -1,17 +0,0 @@ - - - -]> - - - - - diff --git a/demo/assets/e.svg b/demo/assets/e.svg deleted file mode 100644 index f67668b..0000000 --- a/demo/assets/e.svg +++ /dev/null @@ -1,18 +0,0 @@ - - - -]> - - - - - diff --git a/demo/assets/f.svg b/demo/assets/f.svg deleted file mode 100644 index b911c4d..0000000 --- a/demo/assets/f.svg +++ /dev/null @@ -1,15 +0,0 @@ - - - -]> - - - - - diff --git a/demo/assets/favicon.gif b/demo/assets/favicon.gif deleted file mode 100644 index c5d5b3fa2f016427cdb3b2ab2550f5ceb9137b3a..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 169 zcmV;a09OA;Nk%w1VITk?0FeLyR5@Ps%&e*DlogY%Wn{^Xx=H@sOM}FVRu;l-=~k;8pjPp0#iBUHz9IW-+EwCU{1eX1IpfrufDf X=Qjsg=Xgh%XSs*jr}@V@Pyhfsn^H-B diff --git a/demo/assets/g.svg b/demo/assets/g.svg deleted file mode 100644 index 2abeb04..0000000 --- a/demo/assets/g.svg +++ /dev/null @@ -1,20 +0,0 @@ - - - -]> - - - - - diff --git a/demo/assets/h.svg b/demo/assets/h.svg deleted file mode 100644 index 953a079..0000000 --- a/demo/assets/h.svg +++ /dev/null @@ -1,16 +0,0 @@ - - - -]> - - - - - diff --git a/demo/assets/i.svg b/demo/assets/i.svg deleted file mode 100644 index 32df9d3..0000000 --- a/demo/assets/i.svg +++ /dev/null @@ -1,13 +0,0 @@ - - - -]> - - - - - diff --git a/demo/assets/j.svg b/demo/assets/j.svg deleted file mode 100644 index f7ccfd3..0000000 --- a/demo/assets/j.svg +++ /dev/null @@ -1,15 +0,0 @@ - - - -]> - - - - - diff --git a/demo/assets/k.svg b/demo/assets/k.svg deleted file mode 100644 index f4c61d6..0000000 --- a/demo/assets/k.svg +++ /dev/null @@ -1,13 +0,0 @@ - - - -]> - - - - - diff --git a/demo/assets/l.svg b/demo/assets/l.svg deleted file mode 100644 index dc59937..0000000 --- a/demo/assets/l.svg +++ /dev/null @@ -1,13 +0,0 @@ - - - -]> - - - - - diff --git a/demo/assets/m.svg b/demo/assets/m.svg deleted file mode 100644 index ebf2905..0000000 --- a/demo/assets/m.svg +++ /dev/null @@ -1,19 +0,0 @@ - - - -]> - - - - - diff --git a/demo/assets/n.svg b/demo/assets/n.svg deleted file mode 100644 index 959f78c..0000000 --- a/demo/assets/n.svg +++ /dev/null @@ -1,15 +0,0 @@ - - - -]> - - - - - diff --git a/demo/assets/o.svg b/demo/assets/o.svg deleted file mode 100644 index 15ecae7..0000000 --- a/demo/assets/o.svg +++ /dev/null @@ -1,17 +0,0 @@ - - - -]> - - - - - diff --git a/demo/assets/p.svg b/demo/assets/p.svg deleted file mode 100644 index 3f095d8..0000000 --- a/demo/assets/p.svg +++ /dev/null @@ -1,18 +0,0 @@ - - - -]> - - - - - diff --git a/demo/assets/q.svg b/demo/assets/q.svg deleted file mode 100644 index f9c19c8..0000000 --- a/demo/assets/q.svg +++ /dev/null @@ -1,18 +0,0 @@ - - - -]> - - - - - diff --git a/demo/assets/r.svg b/demo/assets/r.svg deleted file mode 100644 index 20e759e..0000000 --- a/demo/assets/r.svg +++ /dev/null @@ -1,15 +0,0 @@ - - - -]> - - - - - diff --git a/demo/assets/s.svg b/demo/assets/s.svg deleted file mode 100644 index 45e88b8..0000000 --- a/demo/assets/s.svg +++ /dev/null @@ -1,20 +0,0 @@ - - - -]> - - - - - diff --git a/demo/assets/t.svg b/demo/assets/t.svg deleted file mode 100644 index e406c50..0000000 --- a/demo/assets/t.svg +++ /dev/null @@ -1,15 +0,0 @@ - - - -]> - - - - - diff --git a/demo/assets/u.svg b/demo/assets/u.svg deleted file mode 100644 index 04606d8..0000000 --- a/demo/assets/u.svg +++ /dev/null @@ -1,16 +0,0 @@ - - - -]> - - - - - diff --git a/demo/assets/v.svg b/demo/assets/v.svg deleted file mode 100644 index fcba554..0000000 --- a/demo/assets/v.svg +++ /dev/null @@ -1,13 +0,0 @@ - - - -]> - - - - - diff --git a/demo/assets/w.svg b/demo/assets/w.svg deleted file mode 100644 index 384291b..0000000 --- a/demo/assets/w.svg +++ /dev/null @@ -1,14 +0,0 @@ - - - -]> - - - - - diff --git a/demo/assets/x.svg b/demo/assets/x.svg deleted file mode 100644 index 0957a24..0000000 --- a/demo/assets/x.svg +++ /dev/null @@ -1,13 +0,0 @@ - - - -]> - - - - - diff --git a/demo/assets/y.svg b/demo/assets/y.svg deleted file mode 100644 index b442724..0000000 --- a/demo/assets/y.svg +++ /dev/null @@ -1,16 +0,0 @@ - - - -]> - - - - - diff --git a/demo/assets/z.svg b/demo/assets/z.svg deleted file mode 100644 index cfff0d1..0000000 --- a/demo/assets/z.svg +++ /dev/null @@ -1,13 +0,0 @@ - - - -]> - - - - - diff --git a/demo/demo.js b/demo/demo.js index e69de29..2e4c70a 100644 --- a/demo/demo.js +++ b/demo/demo.js @@ -0,0 +1,30 @@ + +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, height); + +} \ No newline at end of file diff --git a/demo/swell.js b/demo/swell.js deleted file mode 100644 index 62933dd..0000000 --- a/demo/swell.js +++ /dev/null @@ -1,512 +0,0 @@ -/** - * @author george michael brower / http://georgemichaelbrower.com/ - */ - -function loadSVG(loc, success, fail) { - var xmlhttp = new XMLHttpRequest(); - xmlhttp.onreadystatechange=function() { - if (xmlhttp.readyState==4) { - if (xmlhttp.status == 200) { - if (xmlhttp.responseXML == null) { - if (fail != undefined) fail.call(this, loc); - } else { - var node = xmlhttp.responseXML.getElementsByTagName("svg").item(0); - var svg = new SVG(node); - svg.filename = loc; - success.call(this, svg, loc); - } - } else { - if (fail != undefined) fail.call(this, loc); - } - - } - } - xmlhttp.open("GET", loc, true); - xmlhttp.send(null); -} - -function createSVG(svgText) { - var node = document.createElement("svg"); - node.innerHTML = svgText; - return new SVG(node); -} - -var SVG = function(node) { - this.filename = ""; - - this.children = []; - - // TODO interpret things other than pixels. - - var w = node.getAttribute("width"); - var h = node.getAttribute("height"); - - this.width = w == null ? 0 : parseFloat(w.replace("px", "")); - this.height = h == null ? 0 : parseFloat(h.replace("px", "")); - - for (var i = 0; i < node.childNodes.length; i++) { - - if (!node.childNodes.item(i).getAttribute) continue; - - var toAdd; - if (node.childNodes.item(i).nodeName == "g") { - toAdd = new SVG(node.childNodes.item(i)); - } else { - toAdd = new Path(node.childNodes.item(i)); - } - - this.children.push(toAdd); - - } - - // Draws every path in this SVG to the specified context. - this.draw = function(context) { - for (var i = 0; i < this.children.length; i++) { - this.children[i].draw(context); - } - }; - - -} - -var Path = function(element) { - - this.element = element; - this.commands = commands(element); - this.lineWidth = parseLineWidth(element); - this.strokeStyle = parseStrokeStyle(element); - this.fillStyle = parseFillStyle(element); - -// for at - this.totalLength = 0; - this.lengths = []; - this.tlengths = [] - - - var turtle = function() { - this.x; - this.y; - this.x1; - this.y1; - this.x2; - this.y2; - this.reset = function() { - this.x = this.y = this.x1 = this.y1 = this.x2 = this.y2 = 0; - } - this.reset(); - } - - // Draws this entire path to the specified context. - this.draw = function(context) { - this.style(context); - context.beginPath(); - this.shape(context); - this.end(context); - - }; - - // Calls canvas shape methods such as moveTo(), lineTo(), bezierCurveTo() based on the commands in this path. - this.shape = function(context) { - for (var i = 0; i < this.commands.length; i++) { - this.commands[i].shape(turtle, context); - } - }; - - this.lerp = function(a,b,c,d,t) { - var t1 = 1.0 - t; - return a*t1*t1*t1 + 3*b*t*t1*t1 + 3*c*t*t*t1 + d*t*t*t; - - }; - - this.at = function(t, c) { - var rx, ry; - if (this.lengths.length == 0) { - this.calcLengths(c); - } - - var tt = this.tlengths[0]; - var i = 0; - - while (t > tt) { - i++; - tt += this.tlengths[i]; - } - - pt = tt - this.tlengths[i]; - - - - var it = this.map(t, pt, tt, 0, 1); - - - for (var j = 0; j <= i; j++) { - this.commands[j].shape(turtle, c); - } - var px = turtle.x; - var py = turtle.y; - - this.commands[i+1].shape(turtle, c); - - - rx = this.lerp(px, turtle.x1, turtle.x2, turtle.x, it); - ry = this.lerp(py, turtle.y1, turtle.y2, turtle.y, it); - - return {x:rx, y:ry}; - }; - - this.map = function(v, i1, i2, o1, o2) { - return o1 + (o2 - o1) * ((v - i1) / (i2 - i1)); - } - - - this.calcLengths = function(c) { - var rx,ry; - var prx, pry; - - // go through and get the length of the entire path - // as well as the lengths of each indiv. path - - var curLength = 0; - - var lengthAccuracy = 0.001; - - this.commands[0].shape(turtle, c); - - var px = prx = turtle.x; - var py = pry = turtle.y; - - for (var i = 1; i < this.commands.length; i++) { - - curLength = 0; - - px = turtle.x; - py = turtle.y; - this.commands[i].shape(turtle, c); - - for (var tt = 0; tt <=1; tt+= lengthAccuracy) { - - rx = this.lerp(px, turtle.x1, turtle.x2, turtle.x, tt); - ry = this.lerp(py, turtle.y1, turtle.y2, turtle.y, tt); - - - curLength += this.dist(rx, ry, prx, pry); - - - prx = rx; - pry = ry; - - } - - this.lengths.push(curLength); - this.totalLength += curLength; - - - } - - for (var j = 0; j < this.lengths.length; j++) { - this.tlengths.push(this.lengths[j]/this.totalLength); - } - } - - this.dist = function (x, y, xx, yy) { - return Math.sqrt((x - xx) * (x - xx) + (y - yy) * (y - yy)); - }; - - // Sets the drawing style of the canvas context based on the styles in this Path. - this.style = function(context) { - - if (this.lineWidth != null) { - context.lineWidth = this.lineWidth; - } - - if (this.strokeStyle != null) { - context.strokeStyle = this.strokeStyle; - if (this.lineWidth == undefined) { - context.lineWidth = 1; - } - } - - if (this.fillStyle != null) { - context.fillStyle = this.fillStyle; - } - - }; - - // Calls context.fill() and/or context.stroke() depending on the styles in this Path. - this.end = function(context) { - if (this.fillStyle != null) context.fill(); - if (this.strokeStyle != null) context.stroke(); - } - -} - -var parseLineWidth = function(element) { - var a = element.attributes.getNamedItem("stroke-width"); - return a == null ? null : parseFloat(a.nodeValue); -} - -var parseStrokeStyle = function(element) { - var a = element.attributes.getNamedItem("stroke"); - return a == null ? null : a.nodeValue; -} - -var parseFillStyle = function(element) { - var a = element.attributes.getNamedItem("fill"); - if (a == null) { - var s = element.attributes.getNamedItem("stroke"); - if (s != null) { - return null; - } else { - return "#000000"; - } - } else { - if (a.nodeValue == "none") return null; - return a.nodeValue; - } -} - -var Command = function(type, data) { - this.type = type; - this.data = data; - this.debug = false; - - // Calls context shape methods such as moveTo(), lineTo(), bezierCurveTo(), etc. - this.shape = function(turtle, c) { - - var px = turtle.x; - var py = turtle.y; - - if (this.type == "M") { - - turtle.x = this.data[0]; - turtle.y = this.data[1]; - if (c) c.moveTo(turtle.x, turtle.y); - - - } else if (this.type == "C") { - - turtle.x = this.data[4]; - turtle.y = this.data[5]; - if (c) c.bezierCurveTo(turtle.x1 = this.data[0], - turtle.y1 = this.data[1], - turtle.x2 = this.data[2], - turtle.y2 = this.data[3], - turtle.x, - turtle.y); - - } else if (this.type == "c") { - - if (c) c.bezierCurveTo(turtle.x1 = turtle.x+this.data[0], - turtle.y1 = turtle.y+this.data[1], - turtle.x2 = turtle.x+this.data[2], - turtle.y2 = turtle.y+this.data[3], - turtle.x += this.data[4], - turtle.y += this.data[5]); - - } else if (this.type == "S") { - - turtle.x = this.data[2]; - turtle.y = this.data[3]; - var dx = turtle.x - turtle.x2; - var dy = turtle.y - turtle.y2; - if (c) c.bezierCurveTo(turtle.x1 = turtle.x+dx, - turtle.y1 = turtle.y+dy, - turtle.x2 = this.data[0], - turtle.y2 = this.data[1], - turtle.x, - turtle.y); - - } else if (this.type == "s") { - - var dx = turtle.x - turtle.x2; - var dy = turtle.y - turtle.y2; - if (c) c.bezierCurveTo(turtle.x1 = turtle.x+dx, - turtle.y1 = turtle.y+dy, - turtle.x2 = turtle.x+this.data[0], - turtle.y2 = turtle.y+this.data[1], - turtle.x += this.data[2], - turtle.y += this.data[3]); - - } else if (this.type == "L") { - - turtle.x1 = turtle.x; - turtle.y1 = turtle.y; - if (c) c.lineTo(turtle.x = this.data[0], - turtle.y = this.data[1]); - turtle.x2 = turtle.x; - turtle.y2 = turtle.y; - - } else if (this.type == "l") { - - turtle.x1 = turtle.x; - turtle.y1 = turtle.y; - if (c) c.lineTo(turtle.x+=this.data[0], turtle.y+=this.data[1]); - turtle.x2 = turtle.x; - turtle.y2 = turtle.y; - - } else if (this.type == "H") { - - turtle.x1 = turtle.x; - turtle.y1 = turtle.y; - if (c) c.lineTo(turtle.x = this.data[0], turtle.y) - turtle.x2 = turtle.x; - turtle.y2 = turtle.y; - - } else if (this.type == "h") { - - turtle.x1 = turtle.x; - turtle.y1 = turtle.y; - if (c) c.lineTo(turtle.x += this.data[0], turtle.y) - turtle.x2 = turtle.x; - turtle.y2 = turtle.y; - - } else if (this.type == "V") { - - turtle.x1 = turtle.x; - turtle.y1 = turtle.y; - if (c) c.lineTo(turtle.x, turtle.y = this.data[0]); - turtle.x2 = turtle.x; - turtle.y2 = turtle.y; - - } else if (this.type == "v") { - - turtle.x1 = turtle.x; - turtle.y1 = turtle.y; - if (c) c.lineTo(turtle.x, turtle.y += this.data[0]); - turtle.x2 = turtle.x; - turtle.y2 = turtle.y; - - } else if (this.type == "z") { - - c.closePath(); - - } else { - - alert("unrecognized command " + this.type); - - } - - if (c){ - c.strokeStyle = "#000000"; - c.lineWidth = 1; - if (this.debug) { - c.strokeRect(turtle.x-1.5, turtle.y-1.5, 3, 3); - c.beginPath(); - c.moveTo(turtle.px, turtle.py); - c.lineTo(turtle.x1, turtle.y1); - c.closePath(); - c.stroke(); - } - } - - } - -} - -// Utility functions - -var commands = function(element) { - - if (element.nodeName.toLowerCase() == "path") { - return commandsFromD(element.getAttribute("d")); - } - - if (element.nodeName.toLowerCase() == "polygon") { - return commandsFromPoints(element.getAttribute("points")); - } - - if (element.nodeName.toLowerCase() == "line") { - return commandsFromLine(element); - } - - if (element.nodeName.toLowerCase() == "rect") { - return commandsFromRect(element); - } - - return []; - -} - -// Returns an array of commands as interpreted by the "d" attribute of a path. -var commandsFromD = function(d) { - - var toReturn = []; - var commands = d.match(/[a-zA-Z][0-9\.\-\,]+/g); - - for (var i = 0; i < commands.length; i++) { - - var type = commands[i].charAt(0); - - // Dirty time. - var commandData = commands[i].substr(1); - commandData = commandData.replace(/\-/g, ",-") - - if (commandData.charAt(0) == ",") { - commandData = commandData.substr(1); - } - commandData = commandData.split(","); - for (var j = 0; j < commandData.length; j++) { - commandData[j] = parseFloat(commandData[j]); - } - - toReturn.push(new Command(type, commandData)); - - } - - return toReturn; -} - -var commandsFromLine = function(element) { - var toReturn = []; - var x1 = parseFloat(element.getAttribute("x1")); - var x2 = parseFloat(element.getAttribute("x2")); - var y1 = parseFloat(element.getAttribute("y1")); - var y2 = parseFloat(element.getAttribute("y2")); - toReturn.push(new Command("M", [x1,y1])); - toReturn.push(new Command("L", [x2,y2])); - return toReturn; -} - -// Returns an array of commands as interpreted by the "points" attribute of a polygon. -var commandsFromPoints = function(pointAttribute) { - //pointAttribute = pointAttribute.replace(/\,\-/g, "-"); - - - var shouldBeComma = true; - if (pointAttribute.indexOf(",") == -1) { - for (var i = 0; i < pointAttribute.length; i++) { - var c = pointAttribute.charAt(i); - if (c == " ") { - if (shouldBeComma) { - pointAttribute = pointAttribute.setCharAt(i, ","); - } - shouldBeComma = !shouldBeComma; - } - } - } - - pointAttribute = "M"+pointAttribute; - pointAttribute = pointAttribute.replace(/ /g, "L") + "z"; - var toReturn = commandsFromD(pointAttribute); - return toReturn; -} - -String.prototype.setCharAt = function(index,chr) { - if(index > this.length-1) return str; - return this.substr(0,index) + chr + this.substr(index+1); -} - -var commandsFromRect = function(element) { - - var toReturn = []; - var x = parseFloat(element.getAttribute("x")); - var y = parseFloat(element.getAttribute("y")); - var w = parseFloat(element.getAttribute("width")); - var h = parseFloat(element.getAttribute("height")); - toReturn.push(new Command("M", [x,y])); - toReturn.push(new Command("h", [w])); - toReturn.push(new Command("v", [h])); - toReturn.push(new Command("h", [-w])); - toReturn.push(new Command("v", [-h])); - return toReturn; -} \ No newline at end of file diff --git a/index.html b/index.html index 8415cf0..1cb2d22 100644 --- a/index.html +++ b/index.html @@ -15,14 +15,15 @@ + - -

GUI-DAT flagGUI-DAT

+

GUI-DAT flaggui-dat

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

+ 
 var controllableObject = 
    {