stuff by antimatter15

ipod-nxt

I don’t have an iPad, nor is it #1 on my wish list (It mostly means any tablet platform but since none of the other ones are really recognizable, I’m jumping on the 4-letter apple product bandwagon). But I am fascinated by touchscreens.

I started programming when I was 7 when I got my first Lego Mindstorms RIS/RCX 2.0 kit (and I loved the 13+ sticker on the box back then :P). So I’ve always had a fondness for the platform, it’s really great for getting kids into robotics and engineering. Kudos to Lego.

Recently, I’ve played around with the current rendition of the Mindstorms platform, the NXT. It’s an evolutionary advancement for the platform and maintains the original intuition of the system while catering to those who don’t really grow out of the original system.

The interface is, a very kid-friendly drag-and-drop block layout. I actually sort of like it, though it’s not something which a desktop application could easily be made in. It’s very procedural, and that’s well suited for telling a car to explode and magically arrange red and blue balls into designated corners.

But really, where drag and drop really shines, the place where it really is meant to be, is on a multitouch tablet. It just makes sense. On a large multitouch surface, coding using simple finger gestures and dragging just makes sense. Lego’s own Labview interface, called NXT-G has large icons and is built entirely on the dragging and dropping. Its something that just feels right on a touchscreen.

The gestures need to be tailored to the specific platform, I propose that two fingers, like on a Macbook, should be used to pan around the canvas of the code. Blocks are dragged from a list on the side onto an execution path. On a block already on the canvas, touching and dragging does the logical thing: it moves the position. Touching a block on the canvas without dragging makes a pie menu type display ooze out from the block. The list would be a bunch of output “pipes” which another finger can be used to drag and link onto other blocks which display another pie menu (though only showing inputs rather than outputs) where letting go would create the connection.

Implementation-wise, one could try porting NBC/NXC (which is written in Pascal and already has the makefiles for WinCE/ARM and FreePascal does seem to be able to compile to iPhone/iPod Touch and the iPad should be a virtually equivalent platform). Probably something made in SVG and/or <canvas> could be used to create the interface which can be loaded with a UIWebView or using the PhoneGap platform. Then it would convert the graphical representation into some NXC code, compile it, and use the built in Bluetooth 2.1 + EDR support in an iPad to send it to the Lego NXT brick and do magic.

Screenshot-1

vX was an old project which aimed to do lots of nifty things in the least code possible (3KB without gzip!), but among its goals, developer friendliness wasn’t present. So now, I made a new library, this one is 5KB before gzip, and supports most of what vX does, but with DOM manipulation as well, in a jquery-like manner, and animations with queuing and easing. The new library (which doesn’t yet have a name) aims to be really lightweight (which really doesn’t matter much), while being more developer friendly.

For example, I can select all elements with the class “test” using .cls(“test”), and make them purple by doing .cls(“test”).css(“color”,”purple”) similar to jQuery. I can do .id(“yay”).load(“lib.js”) to load something using ajax. Creating elements is pretty easy too, say I want to load a random script, I can do .create(“script”).attr(“src”,”url”).appendTo(.tag(“body”)) and I can add events to something using .tag(“button”).index(0).on(“click”,function(e){alert(“yay”)}).

Here’s a nice little demo of what it can do http://jsbin.com/owuge/31

I intended to post this back in March 7th, but I was working on a rewrite of the library, which would be a tiny bit larger but implement CSS-selectors and be easier to maintain.

The Ajax Animator (Wave/Mini interface version) now has support for basic Onion skinning, where the last keyframe is semitransparently placed in the background to aid in the positioning of the next keyframe. It’s now enabled by default at 20% opacity but can be disabled.

ajax-animator

To disable it, click the advanced button on the right side of the toolbar and find the entry labeled Onion Skinning, there you can set the onion skinning opacity or disable it with 0% opacity.

onion-skinning

Screenshot

Ubuntu’s weird and adding a bar on top of all my screenshots

http://antimatter15.com/ajaxanimator/VectorEditor/stickfigure.html

I like stick figures, and browsing YouTube, I found some things on Pivot and Pencil (really awesome free desktop animation apps), and that made me think, Stick figures are awesome. So I’m going to add some better Stick Figure features into Ajax Animator and possibly upstream to VectorEditor eventually.

Screenshot

Web interfaces right now are either multi-window by design (and only multi-windowed), which aren’t that common and are pretty annoying some times. Most of the time, it’s single windowed, and all the document elements are constrained to a single web page. The problem with this, is that it’s a lot less flexible, I can’t have, for instance, for the ajax animator, I wouldn’t be able to have the tools on the very left side, the timeline on the bottom, a web browser pointing at my RSS in between and the canvas on my second monitor (Not really a functional arrangement, but multiple monitors is a biggie). Even cooler, would be to have it all synchronized using Comet or WebSocket and having part of the interface on a separate device. For devices with smaller displays, like netbooks, I would imagine having a web application to seamlessly move the tools and preference panes to a, for instance, iPhone screen, would be awesome.

http://jsbin.com/orida/30 is a tiny prototype where a new window can be created, and an element, along with event handlers (though only for a root node) gets moved into the new window with a reference to the first window.