Update build, screenshot, readme, test

README.md

@@ -1,6 +1,6 @@
 # Timeliner
 
-Timeliner is a graphical javascript library that can prototype and create animations quickly that works across different javascript / webgl frameworks. You may find timeline familiar if you have used adobe flash, after effects, edge animate or other animation software. Except this in its really early (prototyping) stage with no testers/users but myself, so expect breakages and use at your own risk.
+Timeliner is a graphical javascript library that helps create and prototype animations quickly. It's works with different javascript / webgl frameworks. You may find timeline familiar if you have used adobe flash, after effects, edge animate or other animation software. Except this in its really early (prototyping) stage with no testers/users but myself, so expect breakages and use at your own risk.
 
 Follow [blurspline](https://twitter.com/blurspline) on twitter for updates.
 
@@ -21,19 +21,21 @@ There are currently already couple of timeline libraries which are pretty good (
 (Side note: mrdoob's [talk on this](http://2013.jsconf.asia/blog/2013/11/8/jsconfasia-2013-mrdoob-ricardo-cabello-framejs) also showcase interesting editors used by the demoscene)
 4. [TweenTime](https://github.com/idflood/TweenTime/) by idflood.
 
-I initally wanted to polish and improve this to the point I'm satisfied first. However hearing Ben Schwarz say that a cat dies everytime code doesn't get publish during cssconf asia 2014, here it is.
+I had initally wanted to polish and improve this to the point I'm satisfied first. However hearing Ben Schwarz say that a cat dies everytime code doesn't get publish during cssconf asia 2014, here it is.
 
 ## Philosophy
-Timeliner should be lightweight and can be added into any webpages with ease. It could work as an included script, bookmarklet, or part of a bigger project with capabilities to work with other controls like dat.gui or gui.js.
+Timeliner should be lightweight and can be added into any webpages with ease. It could work as an included script, bookmarklet, or part of a bigger project with capabilities to work with other controls like dat.gui or gui.js. Styles, HTML, Icons are all embed in the Javascript code.
 
 ## Usage
 
-include the timeliner.js file.
+Include the timeliner.js file.
 
 ```js
 <script src="timeliner.js"></script>
 ```
 
+Load data by code, file upload or loading from saved localStorage.
+
 ```js
 // target is a "pojo" which gets updated when values change.
 var target = {
@@ -63,15 +65,23 @@ or
 2. Select easing type from the dropdown
 
 ## Curent Features
+1.3.0
+- autosave
+- load (localstorage, new, autosave, filesystem)
+- save (export, localstorage, download)
+- ui tweaks
+
 1.2.0
 - icons using extracted fontawesome data
 - slightly npm-ify
 - [window management](http://codepen.io/zz85/pen/gbOoVP)
 - basic keyboard shortcuts
 - basic hdpi
 - basic touch support
+
 1.1.0
 - undo / redo (basic)
+
 1.0.0
 - slider time scale (basic)
 - fix positioning mouse events
@@ -92,14 +102,13 @@ or
 - adjust values (basic)
 
 ## TODO
-- save / load
+- scrolling
 - attempt virtual-dom / v.rendering
 - curve editor
+- graph editor
 - support audio
-- scrolling
 - support guestures
 - remote control
 - insert keyframes should interpolate
-- tweened values
-- ghosting / onioning skinning
+- ghosting / onioning skinning tweened values
 - a whole ton more

test.html

@@ -44,8 +44,11 @@
 // timeliner.addLayer('y');
 // timeliner.addLayer('rotate');
 
-var o = [{"name":"x","values":[],"tmpValue":0,"_color":"#10b00d"},{"name":"y","values":[{"time":0,"value":3,"_color":"#4a2392","tween":"quadEaseIn"},{"time":3.3,"value":-1.1999850000000003,"_color":"#cddfd8"}],"tmpValue":-1.1999850000000003,"_color":"#344260"},{"name":"rotate","values":[{"time":0,"value":4.200005,"_color":"#ec9bb5","tween":"quadEaseInOut"},{"time":2.1,"value":9.300005,"_color":"#ac8e14","tween":"quadEaseIn"},{"time":5,"value":9.300005,"_color":"#5c659"}],"tmpValue":9.300005,"_color":"#1fa995"}];
-timeliner.load(o);
+// var o = {"version":"1.2.0","modified":"Mon Dec 08 2014 10:41:11 GMT+0800 (SGT)","title":"Untitled", "layers": [{"name":"x","values":[],"tmpValue":0,"_color":"#10b00d"},{"name":"y","values":[{"time":0,"value":-1.2999770000000004,"_color":"#4a2392","tween":"quadEaseIn"},{"time":3.3,"value":-1.1999850000000003,"_color":"#cddfd8"}],"tmpValue":-1.2999770000000004,"_color":"#344260"},{"name":"rotate","values":[{"time":0,"value":4.200005,"_color":"#ec9bb5","tween":"quadEaseInOut"},{"time":2.1,"value":28.000009,"_color":"#ac8e14","tween":"quadEaseIn"},{"time":5,"value":50.400018,"_color":"#5c659"}],"tmpValue":50.400018,"_color":"#1fa995"}]};
+// timeliner.load(o);
+
+
+timeliner.load({"version":"1.2.0","modified":"Mon Dec 08 2014 10:41:11 GMT+0800 (SGT)","title":"Untitled","layers":[{"name":"x","values":[{"time":0.1,"value":0,"_color":"#893c0f","tween":"quadEaseIn"},{"time":3,"value":3.500023,"_color":"#b074a0"}],"tmpValue":3.500023,"_color":"#6ee167"},{"name":"y","values":[{"time":0.1,"value":0,"_color":"#abac31","tween":"quadEaseOut"},{"time":0.5,"value":-1.000001,"_color":"#355ce8","tween":"quadEaseIn"},{"time":1.1,"value":0,"_color":"#47e90","tween":"quadEaseOut"},{"time":1.7,"value":-0.5,"_color":"#f76bca","tween":"quadEaseOut"},{"time":2.3,"value":0,"_color":"#d59cfd"}],"tmpValue":-0.5,"_color":"#8bd589"},{"name":"rotate","values":[{"time":0.1,"value":-25.700014000000003,"_color":"#f50ae9","tween":"quadEaseInOut"},{"time":2.8,"value":0,"_color":"#2e3712"}],"tmpValue":-25.700014000000003,"_color":"#2d9f57"}]});
 
 var w2 = window.innerWidth / 2;
 var h2 = window.innerHeight / 2;