Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
A rectangle made by Google Web Designer
<!DOCTYPE html>
<html>
<head data-gwd-animation-mode="quickMode">
<title>Index</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="generator" content="Google Web Designer 1.0.0.924">
<style type="text/css">
html, body {
width: 100%;
height: 100%;
margin: 0px;
}
body {
background-color: transparent;
-webkit-transform: perspective(1400px) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-webkit-transform-style: preserve-3d;
}
.gwd-canvas-en54 {
position: absolute;
width: 201px;
height: 104px;
left: 298px;
top: 226px;
-webkit-transform-style: preserve-3d;
}
</style>
<script type="text/x-serialization" data-gwd-canvas="serialization">
{"useCanvas":1,"useWebGl":0,"data":["{\"version\":0.1,\"id\":\"sp22shh7\",\"fov\":45,\"zNear\":0.1,\"zFar\":100,\"viewDist\":5,\"webGL\":false,\"lightAmount\":0.3,\"children\":[{\"type\":1,\"xoff\":0,\"yoff\":-1.4210854715202004e-14,\"strokeWidth\":1,\"strokeColor\":[0,0,0,1],\"fillColor\":[1,0,0,1],\"tlRadius\":0,\"trRadius\":0,\"blRadius\":0,\"brRadius\":0,\"width\":201,\"height\":104.00000000000003,\"strokeStyle\":\"Solid\",\"strokeMat\":null,\"fillMat\":null}]}"]}
</script>
<script data-gwd-canvas="runtime" type="text/javascript">
// Copyright 2013 Google Inc. All Rights Reserved.
// Copyright 2013 Google Inc. All Rights Reserved.
(function () {
var t = function (c, a) {
this.c = void 0 !== c ? c : 0;
this.d = void 0 !== a ? a : 0
};
t.prototype.ceil = function () {
this.c = Math.ceil(this.c);
this.d = Math.ceil(this.d);
return this
};
t.prototype.floor = function () {
this.c = Math.floor(this.c);
this.d = Math.floor(this.d);
return this
};
window.addEventListener("load", function () {
window.removeEventListener("load", x, !1);
x()
}, !1);
var x = function () {
for (var c, a, h = [], d = document.querySelectorAll('[type="text/x-serialization"][data-gwd-canvas="serialization"]'), m = d.length, g = 0; g < m; g++)h.push(JSON.parse(d[g].textContent));
d = h.length;
for (m = 0; m < d; m++)for (var g = h[m].data, n = document.body, f = g.length, r = 0; r < f; r++) {
var b = JSON.parse(g[r]);
if (b.children && 1 === b.children.length && (c = b.id) && (c = n.querySelector("canvas[data-RDGE-id='" + c + "']"))) {
a = c;
var e = b.children[0], b = a.getContext("2d");
c = a.width;
a = a.height;
switch (e.type) {
case 1:
var k = e.strokeWidth;
b.beginPath();
var p = Math.ceil(k) - 0.5;
e.fillColor && (b.fillStyle = y(b, e.fillColor, c, a, k, p), b.lineWidth = k, B(e, p, b, c, a), b.fill(), b.closePath());
b.beginPath();
p = Math.ceil(0.5 * k) - 0.5;
e.strokeColor && (b.strokeStyle = y(b, e.strokeColor, c, a, k, 0), b.lineWidth = k, B(e, p, b, c, a), b.stroke(), b.closePath());
break;
case 2:
var k = e.strokeWidth, p = e.innerRadius, s = e.strokeColor, e = e.fillColor, l = 0.5 * (c - k), q = 0.5 * (a - k), u = 0.5 * (p * c - k), D = 0.5 * (p * a - k), v = 0.5 * c, w = 0.5 * a, z = null != e, A = null != s && 0 < k;
z && (b.fillStyle = y(b, e, c, a, k, k));
A && (b.strokeStyle =
y(b, s, c, a, k, k), b.lineWidth = k);
0 === p ? (C(b, v, w, l, q, !0, !0), z && b.fill(), A && b.stroke()) : (z && (C(b, v, w, l, q, !0, !0), C(b, v, w, u, D, !1, !1), b.fill()), A && (C(b, v, w, l, q, !0, !0), b.stroke(), C(b, v, w, u, D, !1, !0), b.stroke()));
break;
case 3:
l = e.strokeColor;
k = e.slope;
p = e.xAdj;
s = e.yAdj;
b.beginPath();
b.lineWidth = e.strokeWidth;
if (l) {
b.strokeStyle = y(b, l, c, a, 0, 0);
l = [];
e = [];
switch (k) {
case "vertical":
l = [0.5 * c, 0];
e = [0.5 * c, a];
break;
case "horizontal":
l = [0, 0.5 * a];
e = [c, 0.5 * a];
break;
default:
0 < k ? (l = [p, s], e = [c - p, a - s]) : (l = [p, a - s], e = [c - p, s])
}
c =
new t(l[0], l[1]);
a = new t(e[0], e[1]);
b.moveTo(c.c, c.d);
b.lineTo(a.c, a.d);
b.stroke()
}
break;
case 5:
b.save();
k = null != e.fillColor;
p = null != e.strokeColor && 0 < e.strokeWidth;
b.lineCap = "round";
b.lineJoin = "round";
s = e.anchors.length;
q = l = null;
if (1 < s) {
b.beginPath();
l = e.anchors[0];
b.moveTo(l[1][0], l[1][1]);
for (u = 1; u < s; u++)q = e.anchors[u], b.bezierCurveTo(l[2][0], l[2][1], q[0][0], q[0][1], q[1][0], q[1][1]), l = q;
e.isClosed && (q = e.anchors[0], b.bezierCurveTo(l[2][0], l[2][1], q[0][0], q[0][1], q[1][0], q[1][1]));
k && (b.fillStyle =
y(b, e.fillColor, c, a, e.strokeWidth, 0), b.fill());
p && (b.lineWidth = e.strokeWidth, b.strokeStyle = y(b, e.strokeColor, c, a, e.strokeWidth, 0), b.stroke())
}
b.restore()
}
}
}
}, y = function (c, a, h, d, m, g) {
if (a.gradientMode) {
var n = 0.5 * h, f = 0.5 * d;
c = "radial" == a.gradientMode ? c.createRadialGradient(n, f, 0, n, f, Math.max(h - 2 * m, d - 2 * m) / 2) : c.createLinearGradient(g, f, h - g, f);
a = a.color;
h = a.length;
for (d = 0; d < h; d++)m = a[d].value, c.addColorStop(a[d].position / 100, "rgba(" + m.r + "," + m.g + "," + m.b + "," + m.a + ")");
return c
}
return"rgba(" + Math.floor(255 *
a[0]) + "," + Math.floor(255 * a[1]) + "," + Math.floor(255 * a[2]) + "," + a[3] + ")"
}, B = function (c, a, h, d, m) {
var g = 0.5 * d, n = 0.5 * m, f = [a, a], r = c.tlRadius, b = c.trRadius, e = c.blRadius;
c = c.brRadius;
g = g < n ? g : n;
r > g && (r = g);
e > g && (e = g);
c > g && (c = g);
b > g && (b = g);
g = d - a;
n = m - a;
0 >= r && 0 >= e && 0 >= c && 0 >= b ? h.rect(f[0], f[1], d - 2 * a, m - 2 * a) : (d = r - a, 0 > d && (d = 0), f[1] += d, 0.001 > Math.abs(d) && (f[1] = a), h.moveTo(f[0], f[1]), f = [a, n], d = e - a, 0 > d && (d = 0), f[1] -= d, h.lineTo(f[0], f[1]), 0.001 < d && h.arcTo(a, n, a + d, n, e - a), f = [g, n], d = c - a, 0 > d && (d = 0), f[0] -= d, h.lineTo(f[0], f[1]),
0.001 < d && h.arcTo(g, n, g, n - d, c - a), f = [g, a], d = b - a, 0 > d && (d = 0), f[1] += d, h.lineTo(f[0], f[1]), 0.001 < d && h.arcTo(g, a, g - d, a, b - a), f = [a, a], d = r - a, 0 > d && (d = 0), f[0] += d, h.lineTo(f[0], f[1]), 0.001 < d ? h.arcTo(a, a, a, a + d, r - a) : h.lineTo(a, 2 * a))
}, C = function (c, a, h, d, m, g, n) {
c.save();
n && c.beginPath();
c.translate(a, h);
c.scale(d, m);
c.arc(0, 0, 1, 0, 2 * Math.PI, g);
c.restore()
};
})();
</script>
</head>
<body>
<canvas data-rdge-id="sp22shh7" width="201" height="104" class="gwd-canvas-en54"></canvas>
</body>
</html>
@sergiotapia

This comment has been minimized.

Copy link

@sergiotapia sergiotapia commented Sep 30, 2013

lol +1

@sergiotapia

This comment has been minimized.

Copy link

@sergiotapia sergiotapia commented Sep 30, 2013

lol +1

@ckelner

This comment has been minimized.

Copy link

@ckelner ckelner commented Sep 30, 2013

ewwww

@alvatar

This comment has been minimized.

Copy link

@alvatar alvatar commented Sep 30, 2013

my eyes are bleeding

@andybak

This comment has been minimized.

Copy link

@andybak andybak commented Sep 30, 2013

A silly experiment. This isn't a tool for drawing rectangles - it's a tool for creating web-based animation. And yes - it probably still produces more verbose output than handcoding complex animations. But that's a truism for any GUI-based tool.

The jury is still out on this thing but you're not raising the tone of the debate here.

@cweekly

This comment has been minimized.

Copy link

@cweekly cweekly commented Sep 30, 2013

@andybak - mostly agreed. But it's still helpful (to me) to see what its "Hello World" looks like. (shrug)

@usure

This comment has been minimized.

Copy link

@usure usure commented Sep 30, 2013

ew

@hamorim

This comment has been minimized.

Copy link

@hamorim hamorim commented Sep 30, 2013

Clean Code! oO

@andybak

This comment has been minimized.

Copy link

@andybak andybak commented Sep 30, 2013

@cweekly

Fair enough but you can see the kind of people that have jumped in on the comments.

@ericguzman

This comment has been minimized.

Copy link

@ericguzman ericguzman commented Sep 30, 2013

In Web Designer, when using the shape tools (rect and oval) and pen tool, you'll create canvas elements which require JavaScript to render. Here's a gist using a div for a rectangle: https://gist.github.com/ericguzman/6768395, which requires no javascript.

It's also worth it to note that the large script block is our canvas runtime, which is a hit of fixed size for creating canvas content. Any subsequently added canvas elements will re-use the same runtime.

Hope that helps,
Eric - GWD team member

@tilsammans

This comment has been minimized.

Copy link

@tilsammans tilsammans commented Sep 30, 2013

WAT

@blhack

This comment has been minimized.

Copy link

@blhack blhack commented Sep 30, 2013

Did you actually read through any of that code at the top, or are you just assuming it's useless?

It looks like pretty boilerplate stuff that is probably included in /every/ page that this tool generates.

@cliffordoravec

This comment has been minimized.

Copy link

@cliffordoravec cliffordoravec commented Oct 1, 2013

Good to see FrontPage alive and well!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.