Blog » future

The future of the Ajax Animator

admin — Sat, 12 Dec 2009 21:27:55 +0000

Eventually, what will happen is a pluggable editor system and swapping between the new Mini UI and the old standard UI. The pluggable editor system will enable switching between the existing VectorEditor and OnlyPaths editors as well as SVG-edit. Possibly, OnlyPaths will be phased out as SVG-edit supports every feature of the former as well as many more. The priority editors with the new version will be VectorEditor (the Mini UI editor, based on Raphael so it works fine cross-browser, but is also much more limiting than the rest, including OnlyPaths which it partially replaces). SVG-edit is an awesome project which is being actively developed, and will add new features that may make the Ajax Animator viable for more than just stick figures. New features that will come from the transition could include Gradients, Curved paths, Wireframes, Zoom, Groups, Align tools, Rotation and Resizing (without bugs!), Polygon/Polyline editing, to name a small subset. It’s likely that SVG-edit will have far more features by the time it’s fully implemented. It’ll be awesome.

The SVG-edit UI won’t fit well with the Mini UI (which I actually like more), so the classical UI will be revived.

XPath Bookmark Bookmarklet

admin — Sun, 01 Nov 2009 21:33:48 +0000

javascript:(function(){

//inspired by http://userscripts.org/scripts/show/8924

var s = document.createElement(‘script’);

s.setAttribute(‘src’,'http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js’);

if(typeof jQuery==’undefined’) document.getElementsByTagName(‘head’)[0].appendChild(s);

(function() {

if(typeof jQuery==’undefined’) setTimeout(arguments.callee, 100)

else{

jQuery(“*”).one(“click”,function(event){

//http://snippets.dzone.com/posts/show/4349

for(var path = ”, elt = jQuery(this)[0]; elt && elt.nodeType==1; elt=elt.parentNode){

var idx = jQuery(elt.parentNode).children(elt.tagName).index(elt)+1;

idx>1 ? (idx=’['+idx+']‘) : (idx=”);

path=’/'+elt.tagName.toLowerCase()+idx+path;

}

window.location.hash = “#xpath:”+path

event.stopImmediatePropagation()

})

}

})();

})()

Sometimes you want to link to a certain part of a web page. That’s great and works well if its a nice site that clearly defines anchor tags to link to, but what if there isn’t?

Today I just remembered something and I thought that I saw something earlier with a xpath URL hash. I googled it and couldn’t find anything native to the browser (please correct me if I’m wrong) but found this script: http://userscripts.org/scripts/show/8924 which is basically what I was thinking about. But it was allegedly hard to make those URLs, so I thought why not make a bookmarklet to make linking to those URLs simple? So I quickly hacked this together

1?(b="["+b+"]"):(b="");e="/"+c.tagName.toLowerCase()+b+e}window.location.hash="#xpath:"+e;d.preventDefault();d.stopPropagation();jQuery("*").unbind("click",arguments.callee)})}})()})(); ">XPathLink (Just drag it over to your bookmarks bar as with any other bookmarklet). To use, just click on the bookmark, and click on the element you want to link to. You should see the URL will update with a xpath hash showing you the copy-pastable link to that element. The code is quite simple and should work on Firefox, Chrome and all the other browsers (maybe even IE) but the ability to auto-scroll and actually use the links is only available to Firefox and potentially Opera and Chrome.

And I’m working on a Chrome Extension for the original userscript (which should work with Chrome’s userscript support, but I’m going to try packaging it as a chrome extension file) But sadly chromium for linux isnt up to speed especially with extension development.

The source can be found http://gist.github.com/223708.

Update: Fixed the link for the path and added some stuff. Update 2: Fixed bookmarklet, now scrolls to clicked, executes only once, prevents default

ShinyTouch/JS

admin — Sat, 29 Aug 2009 02:17:23 +0000

Yay for yet another demo that strives to mix an mash almost everything HTML5 related! ShinyTouch in JS dumps the stuff from a tag with ogg encoded video (well, almost all video from linux is ogg encoded so it’s just whatever format i got first from cheese). It gets dumped into

Interestingly, if you don’t use the video and just do data from a raw image, you get upwards of 125fps on V8. Adding the video, it ceases to work on Chromium (maybe a linux thing? this tells me it’s just linux, but you can never be so sure).

//At this point, run away as the algorithm gets messy and hackish

So the thing just searches from right to left up to down within the quad. When it finds a column of something that fits the rgb range of the finger that is larger than a certain threshold, it checks for a reflection from the point. If it detects a reflection then yay! it throws the data at the perspective warper (based on a python one which is based on a C# one and though it would probably be easier to port from C# to JS making long chains of derivative work is fun). If there wasnt a reflection then it logs that and if that number is larger than some othe rthreshold then it kills the scanning and goes on with it’s life. The reflection algorithm just takes the point 5 pixels to the right and assumes that would be a reflection if there was one and a point 15px above and 5px to the left (nasty stuff) and takes the hue value from their RGB values. It takes the absolute value of the difference of the hue values multiplied by 100 (or 200 in the python version) and compares it with a preset configuration variable.

So now that that horrible algorithm which was just whatever came to my little totally untrained mind first. But it works semi-decently, at least for me. But you can hopefully see how nasty it’s inner workings are and it inspires people to clean it up. It’s quite a bit more readable than the Python version and only 200 lines of JS so it won’t be too hard to understand.

But since HTML5 has no Video capture thing for webcams, and my webcam doesn’t work with flash so I can’t use that canvas<-flash webcam bridge i built, uh, almost 2 years ago. So now you just get to gaze at my finger moving for like 20 seconds!

http://antimatter15.com/misc/shiny/shinytouch.html

Freemovie/JS: Pure Javascript SWF Generator

admin — Mon, 17 Aug 2009 16:12:28 +0000

I’m making a crude python script that translates PHP to JS rather hideously. It probably will not work on any other codebase. It was a script quickly hacked together to one purpose.

Freemovie is

FreeMovie is an SWF generator library written in PHP and ported to Ruby. FreeMovie can be used to develop Web and desktop aplications.

Speaking of the Ruby port, I can’t find it. So if anyone finds it, I think it might be useful somewhere. Found it in the CVS, it’s really incomplete compared to the PHP version.

The machine translated code (Not *entirely* autogenerated, I wrote a line or two of it) is not too hideous, the tabbing is slightly off, but it’s at least mostly readable. It was a lot worse 2 hours ago (half of the lines had indentation, other without any, debugging comments everywhere saying useless and distracting things).

The translator is only 107 lines of (hideous code, though the language is beautiful, I guess if you loved JS enough, you could try running the program though skulpt) python (+ 20 or so in another file to change chr() to String.fromCharCode, etc). After that, it uses 6 PHP compatibility functions and 5 from the PHP.js project to cover the features that I’m too lazy to put in the compiler or are just not features in JS.

http://antimatter15.com/misc/freemovie/js/demo/fm-demo-0.htm

The above demo generates a flash image entirely client-side, though the resulting base64 encoded data is sent to be decoded on the server since you can’t load a SWF from a data-url. If someone finds out how, it would be cool to tell me.

A big issue though, is that for some odd reason half the shapes don’t work. The ones in the demo work, but all filled shapes, and the circles/arcs do not work.