TrueTalk Dev: August 2007

Sunday, August 26, 2007

Load image from chrome

Previously, we load images from my googlepage. Now there's a faster way, that is, loading it from Chrome. What we need to do is just include this in chrome.manifest:

skin exte_name classic/1.0 chrome/skin/classic/

and load all images into the \chrome\skin\classic folder.

after that, we can simply load image using:

img.src = "chrome://exte_name/skin/image_name.jpg";

drawWindow can't grab flash videos?

drawWindow() is a handy function included with Mozilla's <canvas> tag. With it you can capture or grab the snapshot of what's in the content area of your browser.

Since it only takes snapshots, sometimes, it can grab flash video, but only after the video has finished loading. (proved by tabpreview) and will only get 1 frame of the video at 1 time, so will look awkward.

Setting online/offline to buddies

- able to get each incoming presence, using channel
- can't re-populate buddy list
- when disable channel and get presence only using xmpp.cache, it detects buddies on re-login only

-random development notes that relates to presence:
http://dev.hyperstruct.net/xmpp4moz/wiki/DocDevelopmentNotes

Monday, August 13, 2007

Checking whether windows has focus or not

- first... set focus on the window first with window.focus
- then.. add event listener to the window onblur event :
window.onblur = afunction()
- you're set!

Issues:
onBlur = called when lost focus
onFocus = called when got focus

There are 2 big areas that may clashes with focus, namely <window> and document <body>. Normally we want to detect when the user is not 'looking' at the browser window, maybe while doing work in MS Word. But if the last focus was given to the <body>, not <window>, even when you are looking at the browser window (but with a body element, such as a textbox is currently in focus), the onBlur event for window will be triggered.

Getting image width and height

- attach a function that gets the width and height of an image to the onload event for each images.
- once the images is finished loading, the function will be called, and we can get the values.
- 3 ways of attaching function to event:
myImage.setAttribute("onload", "getWH();");
myImage.onload = getWH;
myImage.addEventListener("load", getWH, true);

- we can pass parameters for the function only using the 1st method.
- loading animated gif requires longer time than still gif.

Image loaded directly inside browser, had no <head> tag

- try loading an image directly using a URL ending with image format extensions (.jpg, .png, .bmp)
- using DOM Inspector, try to view the hierarchy, there's no <head> tag !

Thursday, August 2, 2007

XEP-0104: HTTP Scheme for URL Data

XEP-0104: HTTP Scheme for URL Data

An article that relates to sending URLs inside xmpp stanza.

Animation-like behaviour in Javascript

I came across a website called Super Maryo World :D As you can figure out by its name, its another remake of the infamous Super Mario Bros. What catches my attention is that it's a game, created entirely in Javascript and can be played in the browser!

To satisfy my curiosity, I tried to somewhat try to code the character movements (move left, right and jump). It does requires some pretty tricky algo.

I was trying to move a div around. First I start of by some basic algo, which is:

OnPress Left
    Move Div Left by 10px

OnPress Right
    Move Div Right by 10px

OnPress Shift
    Move Div Up by 10px

Issues:

There's a 0.5 second pause after first movement of 10px, when pressing LEFT or RIGHT before the div continuously moving
You can only jump and move... by pressing UP, then DIRECTIONs, not by pressing DIRECTIONs first, then UP.

I'm not quite sure what is really the problem, but I do know that pressing keys may cause events to 'bubble' up (events are collected before it triggers). So it doesn't feels 'real'

Hence, inspired by ActionScript's onEnterFrame() method, a more realistic approach would be:

Use timer to create movements and jump
OnPress Left
    startTimer To call MoveDiv(left)
       When timer expires, calls MoveDiv(left) recursively while pressing LEFT

OnPress Right
    startTimer To call MoveDiv(right)
       When timer expires, calls MoveDiv(right) recursively while pressing RIGHT

OnPress Shift
     startTimer To call MoveDiv(up)
       When timer expires, calls MoveDiv(up) recursively while pressing UP

and also you must put RETURN FALSE onkeypress ENTER key, to avoid unwanted auto-move bugs :D

TrueTalk Dev