I’ve tried this before but it didn’t work. <canvas> can’t do toDataURL(‘image/gif’), and the primitive GLIF library couldn’t do much so I never had the opportunity to test my gif-merging code that I had. But I’m at it again, this time, porting it from the AS3GIF library, an awesomely comprehensive bitmap to binary gif encoder that even supports LZW compression (and the patent has luckily expired. Yay!). AS3Gif is supposed to “play and encode animated GIFs”, but since web pages can usually natively play GIFs fine, it’s only a port of the GIFEncoder portions of the library. And it works really well. The rest of this post is copied from the Github readme. Interesting how the w2_embed/anonybot embed post was a blog post turned into readme, this is a readme turned into blogpost. I’ll start with a link to the Github repo anyway:

http://github.com/antimatter15/jsgif

Basic Usage

Since it pretty much is GIFEncoder, you could consult the as3gif how-to page

But there are some differences so I’ll cover it here anyway.

You first need to include the JS files. It’s probably best if you include it in this order, but it shouldnt’ matter too much.

<script type="text/javascript" src="LZWEncoder.js"></script>
<script type="text/javascript" src="NeuQuant.js"></script>
<script type="text/javascript" src="GIFEncoder.js"></script>

If you want to render the gif through an inline <img> tag or try to save to disk or send to server or anything that requires
conversion into a non-binary string form, you should probably include b64.js too.

<script type="text/javascript" src="b64.js"></script>

Simple enough right? Now to convert stuff to GIF, you need to have a working or at least some imageData-esque array.

<canvas id="bitmap"></canvas>
<script>
  var canvas = document.getElementById('bitmap');
  var context = canvas.getContext('2d');
  context.fillStyle = 'rgb(255,255,255)';
  context.fillRect(0,0,canvas.width, canvas.height); //GIF can't do transparent so do white

  context.fillStyle = "rgb(200,0,0)";
  context.fillRect (10, 10, 75, 50);   //draw a little red box

Now we need to init the GIFEncoder.

  var encoder = new GIFEncoder();

If you are making an animated gif, you need to add the following

  encoder.setRepeat(0); //0  -> loop forever
                        //1+ -> loop n times then stop
  encoder.setDelay(500); //go to next frame every n milliseconds

Now, you need to tell the magical thing that you’re gonna start inserting frames (even if it’s only one).

  encoder.start();

And for the part that took the longest to port: adding a real frame.

  encoder.addFrame(context);

In the GIFEncoder version, it accepts a Bitmap. Well, that doesn’t exist in Javascript (natively, anyway) so instead, I use what I feel is a decent analogue: the canvas context. However, if you’re in a situation where you don’t have a real <canvas> element. That’s okay. You can set the second parameter to true and pass a imageData.data-esque array as your first argument. So in other words, you can do encoder.addFrame(fake_imageData, true) as an alternative. However, you must do an encoder.setSize(width, height); before you do any of the addFrames if you pass a imageData.data-like array. If you pass a canvas context, then that’s all okay, because it will automagically do a setSize with the canvas width/height stuff.

Now the last part is to finalize the animation and get it for display.

  encoder.finish();
  var binary_gif = encoder.stream().getData() //notice this is different from the as3gif package!
  var data_url = 'data:image/gif;base64,'+encode64(binary_gif);

Docs

Each of the files exposes a single global (see, at least it’s considerate!). But since there’s three files, that means that there’s three globals. But two of them are more of supporting libraries that I don’t totally understand or care about enough to document. So I’m just gonna document GIFEncoder.

new GIFEncoder() This is super parent function. You really don’t need the new keyword because It’s not really even using any special inheritance pattern. It’s a closure that does some var blah = exports.blah = function blah(){ for no good reason. Anyway, it returns an object with a bunch of methods that the section will be devoted to documenting. Note that I’ve never tested more than half of these, so good luck.

Boolean start() This writes the GIF Header and returns false if it fails.

Boolean addFrame(CanvasRenderingContext2D context) This is the magical magic behind everything. This adds a frame.

Boolean addFrame(CanvasPixelArray image, true) This is the magical magic behind everything. This adds a frame. This time you need
you pass true as the second argument and then magic strikes and it loads your canvas pixel array (which can be a real array, I dont care and I think the program has learned from my constant apathy to also not care). But note that if you do, you must first manually call
setSize which is happily defined just below this one.

void setSize(width, height) Sets the canvas size. It’s supposed to be private, but I’m exposing it anyway. Gets called automagically as the size of the first frame if you don’t do that crappy hacky imageData.data hack.

void setDelay(int milliseconds) the number of milliseconds to wait on each frame

void setDispose(int code) Sets the GIF frame disposal code for the last added frame and any subsequent frames. Default is 0 if no transparent color has been set, otherwise 2. I have no clue what this means so I just copypasted
it from the actionscript docs.

void setFrameRate(Number fps) Sets frame rate in frames per second. Equivalent to setDelay(1000/fps). I think that’s stupid.

void setQuality(int quality) Sets quality of color quantization (conversion of images to the maximum 256 colors allowed by the GIF specification). Lower values (minimum = 1) produce better colors, but slow processing significantly. 10 is the default, and produces good color mapping at reasonable speeds. Values greater than 20 do not yield significant improvements in speed. BLAH BLAH BLAH. Whatever

void setRepeat(int iter) Sets the number of times the set of GIF frames should be played. Default is 1; 0 means play indefinitely. Must be invoked before the first image is added.

void setTransparent(Number color) Sets the transparent color for the last added frame and any subsequent frames. Since all colors are subject to modification in the quantization process, the color in the final palette for each frame closest to the given color becomes the transparent color for that frame. May be set to null to indicate no transparent color.

ByteArray finish() Adds final trailer to the GIF stream, if you don’t call the finish method the GIF stream will not be valid.

String stream() Yay the only function that returns a non void/boolean. It’s the magical stream function which should have been a getter which JS does support but I didnt’ feel like making it a getter because getters are so weird and inconsistent. Like sure there’s the nice pretty get thing but I think IE9/8 doesn’t implement it because it’s non standard or something and replaced it with a hideously ugly blah blah. So Anyway, it’s a function. It returns a byteArray with three writeByte functions that you wouldn’t care about and a getData() function which returns a binary string with the GIF. There’s also a .bin attribute which contains an array with the binary stuff that I don’t care about.

WebWorkers

The process isn’t really the fastest thing ever, so you should use WebWorkers for piecing together animations more than a few frames long. You can find the rest of the WebWorkers section on the actual readme, because the rest is just a huge block of code with comments.

http://github.com/antimatter15/jsgif

Google’s working on a notification API for Chrome. Chrome has a Pin Tab feature. Firefox has Faviconize Tab. Gears has a basic privledge escalation (not very fine grained yet). Firefox shows UAC-type privledge escalation for storing data and Geolocation.

To review the old post, this is how I think Chrome OS might work. All user facing applications (all apps other than the window manager, kernel, browser, should be user facing) should operate in Tabs. There are two types of tabs, “pinned” tabs and normal browsing tabs. Pinned tabs are automatically loaded when the user is logged in, are only a tiny icon, but are still always visible.

There will be a unified and consistent way for the user to voluntarily grant privledges to a web site that requests it. It won’t be a catch-all i-totally-trust-this-app-to-every-bit-of-data-on-my-HDD sort of system that most operating systems use. It will be very fine grained, you can grant access to XHRs to a certain domain and huge warnings if the site requires access to the wildcard *. The privledges can extend from just accessing the notification API, cross domain XHR, geolocation, and communicating with other tabs. Communication with other tabs should be dome something like cross domain XHR, by allowing the user to grant a tab access to a certain domain/url. I would prefer the permissions dialog to be something less of a modal window that is employed by Gears or the little thing that pops up on the top for Firefox, and more of a icon that subtly appears somewhere that the user can click voluntarily. I think a UAC type stop-what-youre-doing-to-show-a-scary-message dialog is horrible and makes the user incapable of deciding intelligently. If there were a button which would make a box filled with checkboxes and a green/red gradient safety bar with messages, and educating the user that he or she really does not have to give the site permissions).

A typical application such as a mail notifier would be as follows







The great thing about the thing above is that it gracefully degrades into a functionless web page if its not running in my imaginary super browser OS of the future. It’s quite easy to make and requrires no API documentation (or at least for me since there’s only 2 API calls and I just totally made them up). It’s similar to the Jetpack and Chrome extensions idea in which the developer has little to learn for making an extension, but lowers the barrier even more: There’s nothing to learn. Whats above is just a standard html5 web page with jQuery. The only thing different is the hasPermission and requestPermission functions which don’t exist so I made them up. It’s not that it has anythign different, its just that the developer is thinking of the web page as a background process instead of thinking of it as static content.

It’s the same idea is Google Wave, it could be a Wiki, IM, or Email, all depending on how you think about it.

For the permissions system, it really doesn’t matter how it’s implemented but it really has to eventually be done. The web is getting new abilities, and things like Geolocation, Local Storage, Offline SQL DB, Saving to disk, Reading files, and such all require special permissions (You wouldn’t want any random site uploading your SAM file from your hard disk). Each of them have their own modal type dialog which queries the user if they want to grant the permission. Eventually, things like Audio from microphone, Video from webcam, cross-domain XHR,  and other peripherals like toasters get their own implementation, requiring special user granted permissions, an application may want 3 or more permissions simultaneously, it becomes very obvious a more consistent UI is needed for delegating these abilities.

For the interface, its easier for both users and developers. Developers dont need to do something like write complex xml manifests showing which location the file which shows the about text is and which one is the help. Here, you just have a web page that you put stuff in. Since the interface is the page. The tab/web page is a unified Install Page, Help Page, About Dialog, Credits, Donation Box, everything, but unified (sure you could split it into multiple pages if you wanted like with any other web page). Installing is just right-clicking on the tab and selecting the menu button that says “Pin Tab”. If the application requires special privledges, the user can click the icon which show you what the site wants, and you just check off whatever you feel the site deserves.

Certainly this almost capitalistic approach is efficient for the massively popular files where the chances are that you will encounter many fast seeds. But for those less fortunate, the downloads may slow to a crawl as peers may be geographically distant.

What about something like freenet, where everyone has a cache of data that they may or may not be interested in. With such a massive netowrk, you no longer have to worry about trackers taking over as all of them are now on equal ground, finding trackers is useless as they are inhrently found. Leeching is solved by a global karma system, and all of the other problems are replaced with the single complicated problem of scalability (which totally makes the whole concept crap).

I think a good idea would to expose the power to web pages. The page could request special capabilities through a magical button dropdown or bouncy annoying notifier on a corner of the page saying permissions, populated by checkboxes of whatever features that the page wants to be able to use.

I think bookmarklets are almost perfect. Adding some more greasemonkey-like features would make it just about perfect. Scripts can run with the same permissions as the page, and the page’s permissions can be granted easily by the user (and the permissions persist through refreshes and browser restarts). Again, if functionality is not supported, things can gracefully degrade with partial functionality.

After that, is the idea of background tabs or alternatively, merging the statusbar type widgets into the tab bar. This is logical with everything merged into the page, and allows things to gracefully degrade if they don’t support the feature. You also get the benefits of being able to reorder remove, get info (which would be the contents of an extension page), etc. I think the interface for a plugin that operates in the background (like a gmail notifier) would be just a small tab that only has an icon, with special flag that makes it run on browser start (I think this could be one of the things for the permissions panel).

So one problem I see in the way Jetpack works, is that it doesn’t easily allow you to make a jetpack that hacks another running jetpack. Sure you can “fork” it, but that defeats the purpose of extensions, rather than having extensions only 1-level deep, make it work all the way down. The easy way I see is just to use the bookmarklet philosophy, and everything can mess around with anything within the page. So if you have a GMail notifier, that came out before the tab persist feature existed, you could just add a simple bookmarklet-type-greasemonkey thing that adds something to the permissions box that says “Persist Page” and then the user could check that in order to make a background GMail Notifier that runs on browser startup.

Malware is easy to fight now. Imagine if every application was forced to have a icon in the taskbar of windows at all times. Finding malware is as easy as looking for things you dont want running and closing it. And if some tab-bar autohide is to be implemented on the system, only people who are quite experienced would use 10+ extension/notifier pages and it would still be easier to recognize than finding some other strange wcultns.exe or whatever when half of the system things look like that.

With these features, Browser as an OS would really make sense. I wouldn’t be suprised if Google Chrome OS implements some stuff that are similar to what I’ve listed here.

I’ve been watching some google techtalks in the past few days, and I think it was interesting how the one on Wuala (a distributed filesystem) was started with the google guy saying “this talk is being recorded so please refrain from mentioning any google sensitive information in your questions”. While it may be referring to the Google File System, I don’t think it’s too similar to Wuala. So I think the idea of cloud storage distributed among peers is an attractive idea since what would you actually use the hard disk which most netbooks do have, and keeping all your data locally doesn’t really contribute to the whole idea to cloud computing.

(Potential number of jobs is no longer theoretically finite)

I made a purtyful VM which displays the memory and colorizes real-time diffs against a real-time running program.

http://antimatter15.110mb.com/misc/purtyleq.htm

it’s currently running

http://99-bottles-of-beer.net/language-oisc-1395.html

The pi calculator has reached the Feynman Point!

One problem though, is that it gets slower every iteration (to find the net block of digits). Finding .141592653 will be roughly 20ms faster than the next 9 digits (it processes in blocks of 9). Not only would it take longer, but it occupied 100% of the CPU, and it would pop up that ever-annoying “This script may make your computer non responsive” window. So I implemented this pattern to make it not lock up any browser other than Chrome (and possibly WebKit Nightly).

Still, it would take up 100% of the CPU. I ran it overnight and got to digit 17,000.

Eventually, it would take about half an hour for a single iteration (at the 20000th digit). With web-based distributed computing, I can’t rely much more time than what Google Analytics reports to be 00:02:24 (my Average Time on Site). And that’s half an hour with a 3ghz Intel Core 2 Duo (it’s dual core, but the script, is single threaded).

I then split the function into smaller parts. the main function was split up, and the loops were divided across users. Now, it can scale easily. It uses virtually no visible CPU. and fits well into that 2 minute timeframe.

Try it out here, but don’t stay too long, because i only set there to be 500 “jobs”.