r1521 - in branches/paul: experimental experimental/gecko experimental/gecko/renderToCanvas exper...
Author: paul.bakaus
Date: Tue Jan 6 00:45:04 2009
New Revision: 1521
Added:
branches/paul/experimental/
branches/paul/experimental/gecko/
branches/paul/experimental/gecko/renderToCanvas/
branches/paul/experimental/gecko/renderToCanvas/index.html
branches/paul/experimental/gecko/renderToCanvas/renderToCanvas.js
branches/paul/experimental/gecko/transformff/
branches/paul/experimental/gecko/transformff/index.xml
branches/paul/experimental/gecko/transformff/svgbase64test/
branches/paul/experimental/gecko/transformff/svgbase64test/svg64lion.html
branches/paul/experimental/gecko/transformff/svgbase64test/svg64test.xhtml
branches/paul/suite/
Log:
paul-dev: added some experimental things, folder for the new suite
Added: branches/paul/experimental/gecko/renderToCanvas/index.html
==============================================================================
--- (empty file)
+++ branches/paul/experimental/gecko/renderToCanvas/index.html Tue Jan 6
00:45:04 2009
@@ -0,0 +1,35 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+ "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html>
+ <head>
+ <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
+ <title>Render To Canvas</title>
+
+ <script type="text/javascript"
src="../../../../trunk/jquery-1.2.6.js"></script>
+ <script type="text/javascript"
src="../../../../trunk/ui/ui.core.js"></script>
+
+ <script type="text/javascript" src="renderToCanvas.js"></script>
+
+ <script type="text/javascript">
+
+ $.fx.step.rotate = function(fx) {
+ $(fx.elem).render('rotate', fx.now);
+ };
+
+ $(document).ready(function() {
+ $("div.test").render();
+ });
+
+ </script>
+
+ </head>
+ <body style="margin: 0; padding: 0;">
+
+ <div class="test" style="position: absolute; top: 100px; left: 100px;
height: 100px; width: 100px; background: green; border: 5px solid black;
padding: 10px; color: white;">
+ Test element
+ <div style="height: 20px; background: #fff; border: 2px solid red;
margin: 10px; color: black;">Hello!</div>
+ <div style="width: 30px; height: 20px; background: #fff; border: 2px
solid red;"></div>
+ </div>
+
+ </body>
+</html>
\ No newline at end of file
Added: branches/paul/experimental/gecko/renderToCanvas/renderToCanvas.js
==============================================================================
--- (empty file)
+++ branches/paul/experimental/gecko/renderToCanvas/renderToCanvas.js Tue
Jan 6 00:45:04 2009
@@ -0,0 +1,155 @@
+$.widget("ui.render", {
+
+
+ rotate: function(angle) {
+
+ //Rotate the viewport
+
+ this.element.show();
+
+ this.origin = { x: -(this.element[0].offsetWidth/2), y:
-(this.element[0].offsetHeight/2) };
+ this.canvas.attr("width", 400).attr("height", 400);
+ this.context.translate(-this.origin.x,-this.origin.y);
+ this.context.rotate(angle * (Math.PI/180));
+
+ this.redraw();
+ this.element.hide();
+
+ },
+
+ redraw: function() {
+
+
this.context.clearRect(0,0,parseInt(this.canvas.attr("width")),parseInt(this.canvas.attr("height")));
+
+ //Draw the borders and background of the first element
+ this.drawBorders(this.element,this.origin.x,this.origin.y);
+ this.drawBackground(this.element,this.origin.x,this.origin.y);
+
+ //Draw sub content
+ this.drawChildren(this.element,this.origin.x,this.origin.y);
+
+ },
+
+ _init: function() {
+
+ //Prepare the outer canvas position and size
+ this.canvas = $(document.createElement("canvas"))
+ .attr("width", this.element[0].offsetWidth)
+ .attr("height", this.element[0].offsetHeight)
+ .css({
+ position: this.element.css("position"),
+ top: this.element.css("top"),
+ left: this.element.css("left"),
+ 'float': this.element.css("float"),
+ clear: this.element.css("clear")
+ });
+
+ //Get the context
+ this.context = this.canvas[0].getContext('2d');
+ this.origin = { x: 0, y: 0 }; //Default viewport startvalues;
+
+ this.redraw();
+ this.element.hide();
+
+ //Replace the original element with its canvas representation
+ this.element.after(this.canvas);
+
+ },
+
+ drawChildren: function(element, x, y) {
+
+ var children = element[0].childNodes;
+ var pos = { x: (x ||
0)+parseInt(element.css("borderLeftWidth"))+parseInt(element.css("paddingLeft")),
y: (y ||
0)+parseInt(element.css("borderTopWidth"))+parseInt(element.css("paddingTop"))
};
+
+ for (var i=0; i < children.length; i++) {
+
+ switch(children[i].nodeType) {
+ case 1:
+ var ownPos = this.drawElement(
+ pos,
+ children[i],
+ element
+ );
+
+ if(children[i].childNodes.length)
+
this.drawChildren($(children[i]),pos.x+parseInt($(children[i]).css("marginLeft")),ownPos);
+ break;
+ case 3:
+ this.drawText(
+ pos,
+ children[i],
+ element
+ );
+ break;
+ }
+
+ };
+
+ },
+
+ drawText: function(pos,node,parent) {
+
+ //Draw the text
+ if(!node.nodeValue.match(/[^\s]/)) return;
+ pos.y += 6+(parseInt(parent.css("lineHeight"))/2);
+
+ this.context.save();
+ this.context.translate(pos.x, pos.y);
+ this.context.mozTextStyle =
parent.css("fontSize")+" "+parent.css("fontFamily");
+ this.context.fillStyle = parent.css("color");
+ this.context.mozDrawText(node.nodeValue);
+ this.context.restore();
+
+ pos.y += 4; //I have no idea why that should make sense
+
+ },
+
+ drawElement: function(pos, node) {
+
+ //Add marginTop to the pos before drawing it out
+ pos.y += parseInt($(node).css("marginTop"));
+
+ var ownPos = pos.y;
+
+ this.drawBorders($(node),pos.x,pos.y);
+ this.drawBackground($(node),pos.x,pos.y);
+
+ pos.y += node.offsetHeight + parseInt($(node).css("marginBottom"));
+
+ return ownPos;
+
+ },
+
+ drawBackground: function(element, x, y) {
+
+ //Draw the background
+ this.context.fillStyle = element.css("backgroundColor");
+ this.context.fillRect(
+
x+parseInt(element.css("borderLeftWidth"))+parseInt(element.css("marginLeft")),
+ y+parseInt(element.css("borderTopWidth")),
+ element[0].offsetWidth - parseInt(element.css("borderLeftWidth")) -
parseInt(element.css("borderRightWidth")),
+ element[0].offsetHeight - parseInt(element.css("borderTopWidth")) -
parseInt(element.css("borderBottomWidth"))
+ );
+
+ },
+
+ drawBorders: function(element, x, y) {
+
+ var width = element[0].offsetWidth;
+ var height = element[0].offsetHeight;
+
+ this.context.fillStyle = element.css("borderTopColor");
+
this.context.fillRect(x+parseInt(element.css("marginLeft")),y,width,parseInt(element.css("borderTopWidth")));
//border-top
+
+ this.context.fillStyle = element.css("borderBottomColor");
+
this.context.fillRect(x+parseInt(element.css("marginLeft")),y+height-parseInt(element.css("borderBottomWidth")),width,parseInt(element.css("borderBottomWidth")));
//border-bottom
+
+ this.context.fillStyle = element.css("borderLeftColor");
+
this.context.fillRect(x+parseInt(element.css("marginLeft")),y,parseInt(element.css("borderLeftWidth")),height);
//border-left
+
+ this.context.fillStyle = element.css("borderRightColor");
+
this.context.fillRect(x+parseInt(element.css("marginLeft"))+width-parseInt(element.css("borderRightWidth")),y,parseInt(element.css("borderRightWidth")),height);
//border-right
+
+ }
+
+});
\ No newline at end of file
Added: branches/paul/experimental/gecko/transformff/index.xml
==============================================================================
--- (empty file)
+++ branches/paul/experimental/gecko/transformff/index.xml Tue Jan 6
00:45:04 2009
@@ -0,0 +1,46 @@
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+ <title>XTech SVG Demo</title>
+ <style>
+ stop.begin { stop-color:yellow; }
+ stop.end { stop-color:green; }
+ body.invalid stop.end { stop-color:red; }
+ #err { display:none; }
+ body.invalid #err { display:inline; }
+ </style>
+ <script>
+ function signalError() {
+ document.getElementById('body').
+ setAttribute("class", "invalid");
+ }
+ </script>
+</head>
+<body id="body"
+ style="position:absolute; z-index:0; border:1px solid black; left:5%;
top:5%; width:90%; height:90%;">
+
+ <form>
+ <fieldset>
+ <legend>HTML Form</legend>
+ <label>Enter something:</label>
+ <input type="text"/>
+ <span id="err">Incorrect value!</span>
+ <button onclick="signalError();">Activate!</button>
+
+ </fieldset>
+ </form>
+ <svg xmlns="http://www.w3.org/2000/svg" version="1.1"
+ viewBox="0 0 100 100"
+ preserveAspectRatio="xMidYMid slice"
+ style="width:100%; height:100%; position:absolute; top:0; left:0;
z-index:-1;">
+ <linearGradient id="gradient">
+ <stop class="begin" offset="0%"/>
+ <stop class="end" offset="100%"/>
+ </linearGradient>
+ <rect x="0" y="0" width="100" height="100"
+ style="fill:url(#gradient)" />
+ <circle cx="50" cy="50" r="30"
+ style="fill:url(#gradient)" />
+
+ </svg>
+</body>
+</html>
Added:
branches/paul/experimental/gecko/transformff/svgbase64test/svg64lion.html
==============================================================================
--- (empty file)
+++
branches/paul/experimental/gecko/transformff/svgbase64test/svg64lion.html
Tue Jan 6 00:45:04 2009
@@ -0,0 +1,124 @@
+<html>
+<head>
+<title>SVG: base64 lion</title>
+
+<script type="text/javascript">
+function convertStringToBase64(string)
+{
+ var out='', charCode=0, i=0, endBytes='', length=string.length;
+ var puffer=[];
+ var base64EncodeChars
="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";
+ while(charCode=string.charCodeAt(i++))
+ {
+ // convert to utf-8
+ //000000–00007F
+ //0xxxxxxx
+ if(charCode<0x80)
+ {
+ puffer[puffer.length]=charCode;
+ }
+ //000080–0007FF
+ //110xxxxx 10xxxxxx
+ else if(charCode<0x800)
+ {
+ puffer[puffer.length]=0xc0|(charCode>>6);
+ puffer[puffer.length]=0x80|(charCode&0x3f);
+ }
+ //000800–00FFFF
+ //1110xxxx 10xxxxxx 10xxxxxx
+ else if(charCode<0x10000)
+ {
+ puffer[puffer.length]=0xe0|(charCode>>12);
+ puffer[puffer.length]=0x80|((charCode>>6)&0x3f);
+ puffer[puffer.length]=0x80|(charCode&0x3f);
+ }
+ //010000–10FFFF
+ //11110xxx 10xxxxxx 10xxxxxx 10xxxxxx
+ else
+ {
+ puffer[puffer.length]=0xf0|(charCode>>18);
+ puffer[puffer.length]=0x80|((charCode>>12)&0x3f);
+ puffer[puffer.length]=0x80|((charCode>>6)&0x3f);
+ puffer[puffer.length]=0x80|(charCode&0x3f);
+ }
+ if(i==length)
+ {
+ while(puffer.length%3)
+ {
+ puffer[puffer.length]=0;
+ endBytes+='=';
+ }
+ }
+ if(puffer.length>2)
+ {
+ out+=base64EncodeChars[puffer[0]>>2];
+ out+=base64EncodeChars[((puffer.shift()&3)<<4)|(puffer[0]>>4)];
+ out+=base64EncodeChars[((puffer.shift()&0xf)<<2)|(puffer[0]>>6)];
+ out+=base64EncodeChars[puffer.shift()&0x3f];
+ }
+ }
+ return (out+endBytes);
+}
+</script>
+
+<script type="text/javascript"
src="../../../../../trunk/jquery-1.2.6.js"></script>
+<script type="text/javascript">
+
+var _emptyTags = {
+ "IMG": true,
+ "BR": true,
+ "INPUT": true,
+ "META": true,
+ "LINK": true,
+ "PARAM": true,
+ "HR": true
+};
+
+HTMLElement.prototype.__defineGetter__("outerHTML", function () {
+ var attrs = this.attributes;
+ var str = "<" + this.tagName;
+ for (var i = 0; i < attrs.length; i++)
+ str += " " + attrs[i].name + "=\"" + attrs[i].value + "\"";
+
+ if (_emptyTags[this.tagName])
+ return str + ">";
+
+ return str + ">" + this.innerHTML + "</" + this.tagName + ">";
+});
+
+
+ $(document).ready(function() {
+
+
+var element = $('.test')[0].outerHTML;
+var sample = convertStringToBase64('<?xml version="1.0"?><!DOCTYPE svg
PUBLIC "-//W3C//DTD SVG
1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" width="15cm" height="15cm"><g
transform="rotate(10) scale (1) translate (100,10)"><foreignObject x="10"
y="10" width="800" height="800"><body
xmlns="http://www.w3.org/1999/xhtml">'+element+'</body></foreignObject></g></svg>');
+
+
+
+
+
+
+
+
+ var newLion = document.createElement("embed");
+ newLion.setAttribute("type", "image/svg+xml");
+ newLion.setAttribute("style", "width:500px; height:500px;");
+ newLion.setAttribute('src', "data:image/svg+xml;base64,"+sample);
+ document.body.appendChild(newLion);
+
+ $(".test").hide();
+
+ });
+
+</script>
+</head>
+ <body style="margin: 0; padding: 0;">
+
+ <div class="test" style="position: absolute; top: 100px; left: 100px;
height: 100px; width: 100px; background: green; border: 5px solid black;
padding: 10px; color: white;">
+ Test element
+ <div style="height: 20px; background: #fff; border: 2px solid red;
margin: 10px; color: black;">Hello!</div>
+ <div style="width: 30px; height: 20px; background: #fff; border: 2px
solid red;"></div>
+ </div>
+
+ </body>
+</html>
Added:
branches/paul/experimental/gecko/transformff/svgbase64test/svg64test.xhtml
==============================================================================
--- (empty file)
+++
branches/paul/experimental/gecko/transformff/svgbase64test/svg64test.xhtml
Tue Jan 6 00:45:04 2009
@@ -0,0 +1,64 @@
+<?xml version="1.0"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
+"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
+<head>
+<title>SVG: base64 test</title>
+<script type="application/x-javascript">
+<![CDATA[
+ var worker = {
+ init: function(embed) {
+ this.codeString = document.getElementsByTagName("code")[0];
+ this.serializer = new XMLSerializer();
+
+ this.emb = embed;
+ this.attr = [this.emb.width, this.emb.height];
+
+ this.SVGDocument = this.emb.getSVGDocument();
+ this.svg = this.SVGDocument.documentElement;
+
+ this.svg.setAttribute("width", 1210);
+ this.svg.setAttribute("height", 1200);
+
+ var newRect, sc = 1;
+ for each (scale in [1,4,5,5]) {
+ sc *= scale;
+ newRect =
document.createElementNS("http://www.w3.org/2000/svg", "rect");
+ newRect.setAttributeNS(null, "width", 10 * sc);
+ newRect.setAttributeNS(null, "height", 10 * sc);
+ newRect.setAttributeNS(null, "x", 2 * sc);
+ newRect.setAttributeNS(null, "y", 2 * sc);
+ newRect.setAttributeNS(null, "fill", "red");
+ this.svg.appendChild(newRect);
+ }
+
+ this.showSVGContent();
+ this.svg.addEventListener("click", this, false);
+ },
+
+ showSVGContent: function() {
+ this.codeString.textContent = this.serializer
+ .serializeToString(this.SVGDocument)
+ .replace(/></g, ">\r\n<")
+ .replace(/<r/g, "\t<r");
+ },
+
+ handleEvent: function(e) {
+ switch (e.type) {
+ case "click":
+ this.attr = this.attr[0] == 121 ? [1210,1200] : [121,120];
+ this.emb.width = this.svg.width.baseVal.value = this.attr[0];
+ this.emb.height = this.svg.height.baseVal.value = this.attr[1];
+ this.showSVGContent();
+ break;
+ }
+ },
+ };
+]]>
+</script>
+</head>
+<body>
+ <pre><code>{SVGDocument content here}</code></pre>
+ <embed
src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4wLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL1RSLzIwMDEvUkVDLVNWRy0yMDAxMDkwNC9EVEQvc3ZnMTAuZHRkIj48c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIvPg=="
width="1210" height="1200" type="image/svg+xml" onload="worker.init(this)"/>
+</body>
+</html>