CANVAS LOADING INDICATOR FOR THE IPHONE AND BEYOND
Adam van den Hoven wrote a Canvas Loading Indicator after he realised that animated gifs and the iPhone didn't mesh.
First he wrote the basic spinner:
-
-
function getLoading(context, bars, center, innerRadius, size, color) {
-
var animating = true,
-
currentOffset = 0;
-
-
function makeRGBA(){
-
return "rgba(" + [].slice.call(arguments, 0).join(",") + ")";
-
}
-
function drawBlock(ctx, barNo){
-
ctx.fillStyle = makeRGBA(color.red, color.green, color.blue, (bars+1-barNo)/(bars+1));
-
ctx.fillRect(-size.width/2, 0, size.width, size.height);
-
}
-
function calculateAngle(barNo){
-
return 2 * barNo * Math.PI / bars;
-
}
-
function calculatePosition(barNo){
-
angle = calculateAngle(barNo);
-
return {
-
y: (innerRadius * Math.cos(-angle)),
-
x: (innerRadius * Math.sin(-angle)),
-
angle: angle
-
};
-
}
-
function draw(ctx, offset) {
-
clearFrame(ctx);
-
ctx.save();
-
ctx.translate(center.x, center.y);
-
for(var i = 0; i<bars; i++){
-
var curbar = (offset+i) % bars,
-
pos = calculatePosition(curbar);
-
ctx.save();
-
ctx.translate(pos.x, pos.y);
-
ctx.rotate(pos.angle);
-
drawBlock(context, i);
-
ctx.restore();
-
}
-
ctx.restore();
-
}
-
function clearFrame(ctx) {
-
ctx.clearRect(0, 0, ctx.canvas.clientWidth, ctx.canvas.clientHeight);
-
}
-
function nextAnimation(){
-
if (!animating) {
-
return;
-
};
-
currentOffset = (currentOffset + 1) % bars;
-
draw(context, currentOffset);
-
setTimeout(nextAnimation, 50);
-
}
-
nextAnimation(0);
-
return {
-
stop: function (){
-
animating = false;
-
clearFrame(context);
-
},
-
start: function (){
-
animating = true;
-
nextAnimation(0);
-
}
-
};
-
}
-
And then to use it:
-
-
var controller = getLoading(canvas.getContext("2d"), 9, {x:100, y:100}, 10, {width: 2, height:10}, {red: 0, green: 17, blue: 58});
-
GWT AND THE IPHONE SITTING IN A TREE…
As soon as the iPhone was released, Bob Vawter of the GWT team had some fun playing around with the experience of creating iPhone applications within GWT. To do this, he wrote a demo application that uses the Ajax Feed API to read feeds.
He open sourced the code, and wrote up a detailed article on the design decisions and implementation of the app. For example, how do GWT events tie into the iPhone gestures; using DeferredCommand.addCommand(), history support,
The Google Web Toolkit can be used to create applications that, in the same code base, work well on an iPhone and a traditional desktop browser.
After deciding on the UI layout style, implementing the RSS reader application was just like writing any other GWT application. Much of the gross feature set was worked out with hosted-mode development and then the fit-and-finish of the application was finalized using a combination of Safari3 and an iPhone. Most of the time, the test application was accessed over the EDGE network, to simulate the typical use case. Targeting the high-latency, low-bandwidth configuration makes using the application on a WiFi network even better.
DOMASSISTANT 2.0 RELEASED. ADDS CHAINABILITY, AJAX, AND MORE
The folks at 456 bereastreet are reporting about the newest release of Robert Nyman’s DOM Assistant.
In case you aren’t aware of DOM Assistant:
DOMAssistant is plainly an extremely efficient way to work tightly on conjunction with the DOM without worrying about web browser caveats and inconsistencies. No matter what you do, you will always get back a proper reference to the actual DOM element, or an array of references to DOM elements. This means that you can use DOMAssistant for the tasks you want to, and then just hook in your own scripts or other JavaScript libraries wherever and whenever you want to.
DOM Assistant v2.0 now includes several new features which should appeal to those looking for robust functionality in an extremely lightweight library:
- Chainability
- Basic Ajax capabilities
- New DOMReady() method to better identify when the DOM is fully loaded
- XPath support
If you’re looking for a tiny alternative to the slew of JS libs out there, then DOMAssistant might be right up your alley. You can find more details about DOMAssistant via the library’s website.
GEARS AND THE MASHUP PROBLEM
Douglas Crockford popped up the road from Sunnyvale to chat with Googlers on the topic of Gears and the Mashup Problem:
Mashups are the most interesting innovation in software development in decades. … all » Unfortunately, the browser’s security model did not anticipate this development, so mashups are not safe if there is any confidential information in the page. Since virtually every page has at least some confidential information in it, this is a big problem. Google Gears may lead to the solution.
Douglas played the role of the curmudgeon with his usual panache and hit at the problems that he sees with the Open Web, and the direction he would like to see people going. He was excited about WorkerPool for the sandbox perspective, and also discussed many JSON*-y things.
We are excited to have Douglas speaking and participating at The Ajax Experience once again.
CSS SPRITE GENERATOR RELEASED
Stuart Collville and Ed Eliot meet launched a newborn CSS Sprite Generator tool, which is the prototypal of some in a program of web-site action tools.
For the uninitiated, a CSS Sprite is a azygos ikon enter which contains individual graphics. Using CSS scenery positions it’s doable to pass some digit of the graphics. By using a sprite you spend on binary http requests which helps pace up the performance of your page.
The agency allows you to upload a fix of images which the playscript then concatenates into digit ikon to be utilised as a CSS Sprite. The CSS offsets for apiece ikon are created and production and class-names for apiece ikon in the sprite crapper be generated from the filenames of apiece of the example images. In fact this move is recommended.
A feature I’m rattling entertained with is the knowledge to concealment discover replicate images, and either cut them or hit the classes merged to saucer to the aforementioned graphic. This is achieved finished comparability of MD5 hashes of every of the uploaded files.
APPLE STORE HITS THE DOJO
We got quite a few emails to ajaxians@ajaxian.com letting us know that Apple is now using the Dojo Toolkit for their store after a quick refresh, which people seem to find interesting as it seems to be a bit of a switch from Prototype (although there is some Prototype code copied over too).
It is also interesting that they are using 0.4.0. Not 0.4.3, let alone 0.9. It takes time to get applications from concept to production though, so this shouldn't be so surprising to people.
The look is very clean and decidedly un-flashy. They did encapsulate some reuseable widgets.
This is what the Apple Blog had to say about it:
Apple launched a revamped online store on Wednesday, giving it a refreshed look and just the polish it deserves. Product categorization is greatly improved, making it much easier to visually make connections between products and accessories. More emphasis is being put on new and top selling products (taking a cue from Amazon perhaps?), and alot of the tabs and buttons got really big. Navigation has also greatly improved, with an obvious breadcrumb trail at the top of each page.
But overall the store just looks and feels rock solid. It’s big, beautiful and welcoming. I’ve always had issues with the organization (or seemingly lack thereof) and aesthetic of the online store in the past, and have cited it as the weakest part of the Apple online experience. It’s nice to finally see Apple rectify that and make a place where I want to shop even more.
VORTEX: A NEW OFFLINE ABSTRACTION ON TOP OF GOOGLE GEARS
Brian Dunnington liked what he saw with the Dojo Offline Toolkit, and wanted to abstract it out so you could use functionality with any JavaScript library.
He ended up with a new library called Vortex, a 10k JavaScript file that features:
- Ability to automatically detect referenced resources such as images, scripts, and stylesheets (including nested @imported stylesheets)
- Automatic detection of network state with corresponding UI/feature changes (also implements .isOnline() and .isOffline() methods)
- Auto syncing of events. it essentially records any user-defined actions and automatically plays them back when the network comes back online
- A generic storage provider to quickly and easily save javascript objects (JSON-encoded)
- Graceful fallback if no offline support is available (google gears not installed or not allowed to run)
- Library-independent (does not require dojo, prototype, Ext, YUI, etc) and cross-browser compatible
He has a simple RSS demo that shows the library at work.
I took it for a spin and went online and offline to see how it automatically detects. Also in the video below I take a peak at the code and we see what the definition of “online” means (able to XHR a particular file).