Permalink
Browse files

Simple shader saving via URL hash params

  • Loading branch information...
1 parent 45a397f commit f72f95c7ce2080b05cc5424142d7aca2b7192608 @notlion notlion committed Mar 6, 2012
Showing with 4,024 additions and 58 deletions.
  1. +66 −29 css/style.css
  2. +35 −26 css/style.scss
  3. +6 −0 index.html
  4. +126 −0 lib/lzma/lzma.js
  5. +3,674 −0 lib/lzma/lzma_worker.js
  6. +30 −3 main.js
  7. +87 −0 params.js
View
@@ -19,7 +19,7 @@ body {
right: 50%;
top: 30px;
bottom: 30px;
- padding: 10px;
+ padding: 20px 10px 10px 10px;
border-radius: 5px;
opacity: 1;
-webkit-transition-property: background-color, opacity;
@@ -36,7 +36,12 @@ body {
-moz-transition-timing-function: ease-in;
-ms-transition-timing-function: ease-in;
-o-transition-timing-function: ease-in;
- transition-timing-function: ease-in; }
+ transition-timing-function: ease-in;
+ -webkit-transition-delay: 0;
+ -moz-transition-delay: 0;
+ -ms-transition-delay: 0;
+ -o-transition-delay: 0;
+ transition-delay: 0; }
#code:hover {
-webkit-transition-duration: 0.1s;
-moz-transition-duration: 0.1s;
@@ -73,44 +78,46 @@ body {
text-shadow: #000 0px 1px 3px; }
#code-text.error {
color: #f00; }
+ #code-text::selection {
+ background: #0cc;
+ color: #fff; }
+ #code-text::-moz-selection {
+ background: #0cc;
+ color: #fff; }
+ #code-text::-webkit-selection {
+ background: #0cc;
+ color: #fff; }
-#code-text::selection {
- background: #0cc;
- color: #fff; }
-
-#code-text::-moz-selection {
- background: #0cc;
- color: #fff; }
-
-#code-text::-webkit-selection {
- background: #0cc;
- color: #fff; }
+#code-toggle, #code-save {
+ position: absolute;
+ stroke: #fff;
+ stroke-width: 2px;
+ cursor: pointer; }
#code-toggle {
- position: absolute;
left: 12px;
top: 12px;
- stroke: #fff;
fill: #012;
- stroke-width: 2px;
- cursor: pointer;
- -webkit-transition-property: -webkit-transform;
- -moz-transition-property: -moz-transform;
- -ms-transition-property: -ms-transform;
- -o-transition-property: -o-transform;
- transition-property: transform;
+ -webkit-transition-property: -webkit-transform, -moz-transform, -ms-transform, -o-transform, transform;
+ -moz-transition-property: -webkit-transform, -moz-transform, -ms-transform, -o-transform, transform;
+ -ms-transition-property: -webkit-transform, -moz-transform, -ms-transform, -o-transform, transform;
+ -o-transition-property: -webkit-transform, -moz-transform, -ms-transform, -o-transform, transform;
+ transition-property: -webkit-transform, -moz-transform, -ms-transform, -o-transform, transform;
+ -webkit-transition-duration: 0.2s;
+ -moz-transition-duration: 0.2s;
+ -ms-transition-duration: 0.2s;
+ -o-transition-duration: 0.2s;
+ transition-duration: 0.2s;
-webkit-transition-timing-function: ease-out;
-moz-transition-timing-function: ease-out;
-ms-transition-timing-function: ease-out;
-o-transition-timing-function: ease-out;
transition-timing-function: ease-out;
- -webkit-transition-duration: 0.2s;
- -moz-transition-duration: 0.2s;
- -ms-transition-duration: 0.2s;
- -o-transition-duration: 0.2s;
- transition-duration: 0.2s; }
- #code-toggle:hover {
- fill: #239; }
+ -webkit-transition-delay: 0;
+ -moz-transition-delay: 0;
+ -ms-transition-delay: 0;
+ -o-transition-delay: 0;
+ transition-delay: 0; }
#code-toggle.open {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
@@ -124,3 +131,33 @@ body {
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg); }
+ #code-toggle:hover {
+ fill: #239; }
+
+#code-save {
+ left: 46px;
+ top: 12px;
+ fill: #000;
+ opacity: 0;
+ -webkit-transition-property: opacity;
+ -moz-transition-property: opacity;
+ -ms-transition-property: opacity;
+ -o-transition-property: opacity;
+ transition-property: opacity;
+ -webkit-transition-duration: 0.2s;
+ -moz-transition-duration: 0.2s;
+ -ms-transition-duration: 0.2s;
+ -o-transition-duration: 0.2s;
+ transition-duration: 0.2s;
+ -webkit-transition-timing-function: ease-out;
+ -moz-transition-timing-function: ease-out;
+ -ms-transition-timing-function: ease-out;
+ -o-transition-timing-function: ease-out;
+ transition-timing-function: ease-out;
+ -webkit-transition-delay: 0;
+ -moz-transition-delay: 0;
+ -ms-transition-delay: 0;
+ -o-transition-delay: 0;
+ transition-delay: 0; }
+ #code-save:hover {
+ fill: #282; }
View
@@ -21,12 +21,10 @@ body {
#code {
position: absolute;
left: 30px; right: 50%; top: 30px; bottom: 30px;
- padding: 10px;
+ padding: 20px 10px 10px 10px;
border-radius: 5px;
opacity: 1;
- @include transition-property(background-color, opacity);
- @include transition-duration(0.2s);
- @include transition-timing-function(ease-in);
+ @include transition((background-color, opacity), 0.2s, ease-in);
&:hover {
@include transition-duration(0.1s);
@include transition-timing-function(ease-out);
@@ -55,38 +53,49 @@ body {
&.error {
color: #f00;
}
+ &::selection {
+ background: #0cc;
+ color: #fff;
+ }
+ &::-moz-selection {
+ background: #0cc;
+ color:#fff;
+ }
+ &::-webkit-selection {
+ background: #0cc;
+ color:#fff;
+ }
}
-#code-text::selection {
- background: #0cc;
- color: #fff; }
-#code-text::-moz-selection {
- background: #0cc;
- color:#fff; }
-#code-text::-webkit-selection {
- background: #0cc;
- color:#fff; }
-#code-toggle {
+#code-toggle, #code-save {
position: absolute;
- left: 12px; top: 12px;
- stroke: #fff; fill: #012;
+ stroke: #fff;
stroke-width: 2px;
cursor: pointer;
- -webkit-transition-property: -webkit-transform;
- -moz-transition-property: -moz-transform;
- -ms-transition-property: -ms-transform;
- -o-transition-property: -o-transform;
- transition-property: transform;
- @include transition-timing-function(ease-out);
- @include transition-duration(0.2s);
- &:hover {
- fill: #239;
- }
+}
+#code-toggle {
+ left: 12px;
+ top: 12px;
+ fill: #012;
+ @include transition((-webkit-transform, -moz-transform, -ms-transform, -o-transform, transform), 0.2s, ease-out);
&.open {
@include transform(rotate(45deg));
fill: #000;
}
&.shut {
@include transform(rotate(0deg));
}
+ &:hover {
+ fill: #239;
+ }
+}
+#code-save {
+ left: 46px;
+ top: 12px;
+ fill: #000;
+ opacity: 0;
+ @include transition(opacity, 0.2s, ease-out);
+ &:hover {
+ fill: #282;
+ }
}
View
@@ -54,5 +54,11 @@
<path d="M -7,0 L 7,0 M 0,-7 L 0,7"/>
</g>
</svg>
+ <svg id="code-save" class="hidden" title="Save Shader Source" width="30" height="30" version="1.2" xmlns="http://www.w3.org/2000/svg">
+ <g transform="translate(15,15)rotate(45)">
+ <circle cx="0" cy="0" r="13"/>
+ <path d="M -7,0 L 0,-7 L 7,0 M 0,-7 L 0,7"/>
+ </g>
+ </svg>
</body>
</html>
View
@@ -0,0 +1,126 @@
+/// This code is licensed under the MIT License. See LICENSE for more details.
+
+/// Does the environment support web workers? If not, let's fake it.
+if (!Worker) {
+ ///NOTE: IE8 needs onmessage to be created first, IE9 cannot, IE7- do not care.
+ /*@cc_on
+ /// Is this IE8-?
+ @if (@_jscript_version < 9)
+ var onmessage = function () {};
+ @end
+ @*/
+
+ /// If this were a regular function statement, IE9 would run it first and therefore make the Worker variable truthy because of hoisting.
+ var Worker = function(script) {
+ var global_var,
+ return_object = {};
+
+ /// Determine the global variable (it's called "window" in browsers, "global" in Node.js).
+ if (typeof window !== "undefined") {
+ global_var = window;
+ } else if (global) {
+ global_var = global;
+ }
+
+ /// Is the environment is browser?
+ /// If not, create a require() function, if it doesn't have one.
+ if (global_var.document && !global_var.require) {
+ global_var.require = function (path) {
+ var script_tag = document.createElement("script");
+ script_tag.type ="text/javascript";
+ script_tag.src = path;
+ document.getElementsByTagName('head')[0].appendChild(script_tag);
+ };
+ }
+
+ /// Dummy onmessage() function.
+ return_object.onmessage = function () {};
+
+ /// This is the function that the main script calls to post a message to the "worker."
+ return_object.postMessage = function (message) {
+ /// Delay the call just in case the "worker" script has not had time to load.
+ setTimeout(function () {
+ /// Call the global onmessage() created by the "worker."
+ ///NOTE: Wrap the message in an object.
+ global_var.onmessage({data: message});
+ }, 10);
+ };
+
+ /// Create a global postMessage() function for the "worker" to call.
+ global_var.postMessage = function (e) {
+ ///NOTE: Wrap the message in an object.
+ ///TODO: Add more properties.
+ return_object.onmessage({data: e, type: "message"});
+ };
+
+ require(script);
+
+ return return_object;
+ };
+}
+
+
+///NOTE: The "this" keyword is the global context ("window" variable) if loaded via a <script> tag
+/// or the function context if loaded as a module (e.g., in Node.js).
+this.LZMA = function (lzma_path) {
+ var action_compress = 1,
+ action_decompress = 2,
+ action_progress = 3,
+
+ callback_obj = {},
+
+ ///NOTE: Node.js needs something like "./" or "../" at the beginning.
+ lzma_worker = new Worker((typeof lzma_path === "undefined" ? "./lzma_worker.js" : lzma_path));
+
+ lzma_worker.onmessage = function (e) {
+ if (e.data.action === action_progress) {
+ if (callback_obj[e.data.callback_num] && typeof callback_obj[e.data.callback_num].on_progress === "function") {
+ callback_obj[e.data.callback_num].on_progress(e.data.result);
+ }
+ } else {
+ if (callback_obj[e.data.callback_num] && typeof callback_obj[e.data.callback_num].on_finish === "function") {
+ callback_obj[e.data.callback_num].on_finish(e.data.result);
+
+ /// Since the (de)compression is complete, the callbacks are no longer needed.
+ delete callback_obj[e.data.callback_num];
+ }
+ }
+ };
+
+ /// Very simple error handling.
+ lzma_worker.onerror = function(event) {
+ throw new Error(event.message + " (" + event.filename + ":" + event.lineno + ")");
+ };
+
+ return (function () {
+
+ function send_to_worker(action, data, mode, on_finish, on_progress) {
+ var callback_num;
+
+ do {
+ callback_num = Math.floor(Math.random() * (10000000));
+ } while(typeof callback_obj[callback_num] !== "undefined");
+
+ callback_obj[callback_num] = {
+ on_finish: on_finish,
+ on_progress: on_progress
+ };
+
+ lzma_worker.postMessage({
+ action: action,
+ callback_num: callback_num,
+ data: data,
+ mode: mode
+ });
+ }
+
+ return {
+ compress: function (string, mode, on_finish, on_progress) {
+ send_to_worker(action_compress, String(string), mode, on_finish, on_progress);
+ },
+ decompress: function (byte_arr, on_finish, on_progress) {
+ send_to_worker(action_decompress, byte_arr, false, on_finish, on_progress);
+ }
+ };
+ }());
+};
Oops, something went wrong.

0 comments on commit f72f95c

Please sign in to comment.