Mika Tuupola

Lazy Load 1.7.0 Released

2012-01-28T23:30:00+02:00

Photo by Marise Caetano

Previous version of Lazy Load gained traction pretty fast. Good patches were submitted to GitHub. This version of plugin mostly concentrates on speed optimization and event handlers.

New Events

Two new events were added. Handler for appear event is called when image appears to viewport but before it is loaded. Handler for load event is called when image is loaded. Both event handler receive two parameters. First parameter elements_left is numbers of images left to load. Second parameter settings is the settings passed to Lazy Load plugin. Inside both handlers this refers to the image dom element.

$("img.lazy").lazyload({
    appear : function(elements_left, settings) {
        console.log(this, elements_left, settings);
    },
    load : function(elements_left, settings) {
        console.log(this, elements_left, settings);
    }
});

New Parameter

New parameter data_attribute was added. It allows custom naming of original image attribute.

$("img.lazy").lazyload({
  data_attribute  : "kitten"
});

<img src="/img/placeholder.gif" data-kitten="/img/real-image.png" width="640" height="480" />

Renamed Parameter

Parameter effecspeed was renamed to effect_speed. Old version will work for couple of versions. This parameter has existed before but it was previously undocumented.

Selectors

Viewport selectors got tuned up. Internally they are used to determine when image appears on screen. Speed up is around 25%. You can compare speed tests of 1.6.0 and 1.7.0. While you’re at there click the Run tests button to help me collect better data. Some selector names were added and changed to match Viewport Selectors plugin.

$("img:in-viewport").something();
$("img:below-the-fold").something();
$("img:above-the-top").something();
$("img:left-of-screen").something();
$("img:right-of-screen").something();

Download

Latest source or minified. Plugin has been tested with Safari 5.1, Firefox 3.6, Firefox 7.0, Firefox 8.0 on OSX and Firefox 3.0, Chrome 14 and IE 8 on Windows and Safari 5.1 on iOS 5 both iPhone and iPad.

Driving 595 Shift Registers

2012-01-02T21:00:00+02:00

Photo by Windell Oskay

595 series shift registers come in many flavors. SN74HC595 is the most usual. TPIC6B595 is similar but can be used with more power hungry applications. Pin layouts are different but they all operate in the same way.

Shift register is controlled with three pins. They are usually called DATA, LATCH and CLOCK. Chip manufacturers have different names. See the table below for two examples from Texas Instruments.

	74HC595	TPIC6B595
DATA	SER	SER IN
LATCH	RCLK	RCK
CLOCK	SRCLK	SRCK

CLOCK is an constant high – low signal used to synchronize data transfer. Each time CLOCK goes high two things happen. Current value in shift register gets shifted left by one. Last bit is dropped out. First bit will be set to current value of DATA. To write a byte to shift register this has to happen eight times in a loop.

#define LATCH   B0  
#define CLOCK   B1
#define DATA    B2
  
void shift_out(uint8_t data) {
    for(uint8_t i = 0; i < 8; i++) {
        /* Write bit to data port. */
        if (0 == (data & _BV(7 - i))) {
            digital_write(DATA, LOW);            
        } else {
            digital_write(DATA, HIGH);
        }
        
        /* Pulse clock input to write next bit. */
        digital_write(CLOCK, LOW);
        digital_write(CLOCK, HIGH);
    }
}

After calling shift_out() the shift register internally contains new value. To update output pins you must pull LATCH high. This is sometimes called latching on pulsing the latch. Note that it is not enough to hold LATCH high. Data transfer happens on transition from low to high. This is also called rising edge. Code for a led binary counter from 0 to 65535 would look like the following:

int main(void) { 
  
    for(uint16_t i = 0; i < 0xffff; i++) {
        /* Shift high byte first to shift registers. */
        shift_out(i >> 8); 
        shift_out(i & 0xff);

        /* Pulse latch to transfer data from shift registers */
        /* to storage registers. */
        digital_write(LATCH, LOW); 
        digital_write(LATCH, HIGH);

        _delay_ms(50);
    }

    return 0;
}

The technique above is called bit banging. Bit banging is a technique for serial communications using software instead of dedicated hardware. Good thing is it is cheap to implement. Bad thing is it wastes processing time. Luckily most AVR chips provide an alternative.

Serial Peripheral Interface Bus

The Serial Peripheral Interface Bus or SPI is a synchronous serial data connection. It provides hardware implementation of the clock pulse and writing data serially. SPI terminology differs from bit banging a bit. You can use SPI with three pins only. If you also want to read value back from the slave device you must use fourth pin. This is what MISO is used for.

Bit Bang	SPI	Description
DATA	MOSI	Master Out Slave In
LATCH	SS	Slave Select
CLOCK	SCLK	Serial Clock
-	MISO	Master In Slave Out

Before you can use SPI it must be configured. Main things to do are setting the device to work as master and the data order. Most of the time this is enough. Configuration is done by setting the appropriate bit in the SPI Control Register SPCR. For all configurable options see the Control and Status Registers table. When using SPI you cannot use any arbitrary pins. Instead read your datasheet to find out which pins your microcontroller uses for SPI. Values below are for ATmega32U4 which is used in both Adafruit ATmega32U4 Breakout Board and Teensy USB Development Board.

#define SS   B0 
#define SCLK B1 
#define MOSI B2 
#define MISO B3

void spi_init(void) {
    pin_mode(SCLK, OUTPUT);
    pin_mode(MOSI, OUTPUT);
    pin_mode(SS, OUTPUT); /* Should be output in Master mode. */
    
    SPCR &= ~(_BV(DORD)); /* MSB first. */
    SPCR |= _BV(MSTR);    /* Act as master. */
    SPCR |= _BV(SPE);     /* Enable SPI. */
}

After SPI is configured reading and writing to it is easy. When byte is written to SPI Data Register SPDR it will be transmitted to slave. Received bytes (if any) are written to hardware receive buffer. Reading SPDR will return the data in receive buffer.

uint8_t spi_transfer(volatile uint8_t data) {
    SPDR = data;
    loop_until_bit_is_set(SPSR, SPIF);
    return SPDR;
}

Why spi_transfer() and not separate spi_read() and spi_write() functions? Internally both master and slave are 8-bit shift registers (do not confuse this with the TPIC6B595 shift register used in article). One bit is shifted from the master to the slave and from the slave to the master simultaneously in one serial clock cycle. After eight SLCK pulses data has been exchanged between master and slave. Slave never sends data to master by itself. Master always must write something to slave.

Main program is essentially the same as when using shift_out() function. Since we do not read anything back we can just ignore return value of spi_transfer() call.

int main(void) {    
  
    spi_init();

    for(uint16_t i = 0; i < 0xffff; i++) {
        /* Shift high byte first to shift registers. */
        spi_transfer(i >> 8); 
        spi_transfer(i & 0xff);

        /* Pulse latch to transfer data from shift registers */
        /* to storage registers. */
        digital_write(SPI_SS, LOW); 
        digital_write(SPI_SS, HIGH);
    }

    return 0;
}

Control and Status Registers

SPCR Bit #	Name	Description
bit 7	`SPIE`	SPI Interrupt Enable.
bit 6	`SPE`	SPI Enable. When set hardware SPI operations will be enabled.
bit 5	`DORD`	Data Order. When set LSB will be transmitted first.
bit 4	`MSTR`	Master / Slave Select. When set device will act as SPI master.
bit 3	`CPOL`	Clock Polarity. When set leading edge will be falling and trailing edge rising. Vice versa when unset.
bit 2	`CPHA`	Clock Phase. When set data will be sampled on trailing edge of the clock. Vice versa when unset.
bit 1 bit 0	`SPR1` `SPR0`	SPI Clock Rate Select 1 and 0. Used together with `SPI2X` to set the `SCK` frequency.

SPSR Bit #	Name	Description
bit 7	`SPIF`	SPI Interrupt Flag. Set when a serial transfer is complete. An interrupt is generated if `SPIE` in `SPCR` is set and global interrupts are enabled. Cleared by hardware when interrupt handling vector is executed.
bit 6	`WCOL`	Write Collision Flag. Set if the `SPDR` is written during a data transfer.
bit 5 bit 4 bit 3 bit 2 bit 1		Reserved. Always zero.
bit 0	`SPI2X`	Double SPI Speed. Used together with `SPR1` and `SPR0` to set the `SCK` frequency.

SPI2X	SPR1	SPR0	SCK Frequency
0	0	0	f_osc/4
0	0	1	f_osc/16
0	1	0	f_osc/64
0	1	1	f_osc/128
1	0	0	f_osc/2
1	0	1	f_osc/8
1	1	0	f_osc/32
1	1	1	f_osc/64

Wiring TPIC6B595

Wiring is pretty straight forward but depends on the chip used. TPIC6B595 from Adafruit was used when writing this article.

All shift registers should share CLOCK and LATCH signals. When cascading more than one shift register DATA is redirected to next register by connecting SER OUT to SER IN. Outputs are connected to corresponding leds. To enable outputs of TPIC6B595 you must also tie SRCLR pin to positive voltage and G pin to ground.

In image below CLOCK is blue, LATCH is yellow and DATA is orange.

Lazy Load 1.6.0 Released

2011-12-27T02:00:00+02:00

Photo by Guilherme Jófili

After neglecting the code for a while I was finally able to release new version of Lazy Load plugin. Changes are not dramatic but there is one important thing. New browsers load image even if you remove the src attribute with JavaScript. Because of this you must alter your html code. Put placeholder image into src attribute of your img tag. Real image url should be stored data-original attribute.

<img data-original=“img/example.jpg” src=“img/grey.gif”>

All code regarding the old behavior where you could just include plugin code in your page and it would automagically lazyload your images was removed.

Ignore Hidden Images

There are cases when you have invisible images. For example when using plugin in together with a large filterable list of items that can have their visibility state changed dynamically. To improve performance hidden images are now ignored by default. If you want to load hidden images set the new skip_invisible parameter to false.

$("img.lazy").lazyload({ 
    skip_invisible : false
});

New Scrollstop Event

Support for James Padolseys scrollstop event was added. Use it when you have hundreds of images on page. Check the demo page to see it in action. I have extracted the code from James’ webpage and put it into separate file.

<script src="jquery.scrollstop.js" type="text/javascript" charset="utf-8"></script>

$("img").lazyload({
    event: "scrollstop"
});

Renamed Parameter

Parameter failurelimit was renamed to failure_limit. Old version will work for couple of versions. I cannot seem to be able to decide on my own coding standards…

Download

Simple Serial Communications With AVR Libc

2011-11-19T22:00:00+02:00

Photo by Pete Prodoehl

I like to use various Arduino boards for AVR development. What I do not like are the Arduino libraries. They are often just wrappers around libc functions or rewrites of functions libc already provides. Serial communications is one good example. Arduino provides you with its own implementation of Serial.print(), Serial.println() and Serial.read() methods. At the same time AVR Libc has proven printf(), puts() and getchar() functions. This article explains easy implementation of libc functions used for serial communications.

If you do not have much experience in programming it is probably better to stick with Arduino libraries. They are good at hiding some of the confusing features of embedded programming. However changes are you grow out of them after few projects. Atmel datasheets are not as confusing as they first appear. You might also want to check the finished code of this article.

Configuring UART

AVR microcontrollers have three control and status registers. Register UCSR0A mostly contains status data. UCSR0B and UCSR0C contain all the configuration settings. See the tables in the end of article for all possible values.

AVR Libc provides helper macros for baud rate calculations. Header file requires F_CPU and BAUD to be defined. After including the header file UBRRL_VALUE, UBRRH_VALUE and USE_2X are defined. First two are used to set UART speed. Last one is used to determine if UART has to be configured to run in double speed mode with given baud rate.

UCSZ20 UCSZ01 and UCSZ00 control the data size. Possible sizes are 5-bit (000), 6-bit (001), 7-bit (010), 8-bit (011) and 9-bit (111). Most common used data size is 8-bit.

With above bits we can set most common configuration: no parity, 8 data bits, 1 stop bit.

#define F_CPU 16000000UL
#define BAUD 9600

#include <util/setbaud.h>
  
void uart_init(void) {
    UBRR0H = UBRRH_VALUE;
    UBRR0L = UBRRL_VALUE;

#if USE_2X
    UCSR0A |= _BV(U2X0);
#else
    UCSR0A &= ~(_BV(U2X0));
#endif

    UCSR0C = _BV(UCSZ01) | _BV(UCSZ00); /* 8-bit data */ 
    UCSR0B = _BV(RXEN0) | _BV(TXEN0);   /* Enable RX and TX */
}

Writing and Reading From UART

You can transmit data to UART by writing a byte to USART Data Register UDR0. First you have to make sure UART is ready to transmit new data. You can wait until USART Data Register Empty UDRE flag is set. Alternatively you can wait after each byte to transmission be ready. USART Transmit Complete TXC0 is set when transmission is ready.

void uart_putchar(char c) {
    loop_until_bit_is_set(UCSR0A, UDRE0); /* Wait until data register empty. */
    UDR0 = c;
}

void uart_putchar(char c) {
    UDR0 = c;
    loop_until_bit_is_set(UCSR0A, TXC0); /* Wait until transmission ready. */
}

You can receive data from UART by reading a byte from USART Data Register UDR0. USART Receive Complete RXC0 flag is set if to unread data exists in data register.

char uart_getchar(void) {
    loop_until_bit_is_set(UCSR0A, RXC0); /* Wait until data exists. */
    return UDR0;
}

Redirecting STDIN and STDOUT to UART

FDEV_SETUP_STREAM macro can be used to setup a buffer which is valid for stdio operations. Initialized buffer will be of type FILE. You can define separate buffers for input and output. Alternatively you can define only one buffer which works for both input and output. First and second parameters are names of the functions which will be called when data is either read from or written to the buffer.

FILE uart_output = FDEV_SETUP_STREAM(uart_putchar, NULL, _FDEV_SETUP_WRITE);
FILE uart_input = FDEV_SETUP_STREAM(NULL, uart_getchar, _FDEV_SETUP_READ);

FILE uart_io FDEV_SETUP_STREAM(uart_putchar, uart_getchar, _FDEV_SETUP_RW);

To prepare our uart_putchar and uart_getchar function to be used with streams we have to change the definition a bit. To properly format output we also force adding a carriage return after newline has been sent.

void uart_putchar(char c, FILE *stream) {
    if (c == '\n') {
        uart_putchar('\r', stream);
    }
    loop_until_bit_is_set(UCSR0A, UDRE0);
    UDR0 = c;
}

char uart_getchar(FILE *stream) {
    loop_until_bit_is_set(UCSR0A, RXC0); /* Wait until data exists. */
    return UDR0;
}

Now we can redirect both STDIN and STDOUT to UART. This enables us to use AVR Libc provided functions to read and write to serial port.

int main(void) {    

    uart_init();
    stdout = &uart_output;
    stdin  = &uart_input;
                
    char input;

    while(1) {
        puts("Hello world!");
        input = getchar();
        printf("You wrote %c\n", input);
    }
        
    return 0;
}

Control and Status Registers

UCSR0A Bit #	Name	Description
bit 7	`RXC0`	USART Receive Complete. Set when data is available and the data register has not be read yet.
bit 6	`TXC0`	USART Transmit Complete. Set when all data has transmitted.
bit 5	`UDRE0`	USART Data Register Empty. Set when the `UDR0` register is empty and new data can be transmitted.
bit 4	`FE0`	Frame Error. Set when next byte in the `UDR0` register has a framing error.
bit 3	`DOR0`	Data OverRun. Set when the `UDR0` was not read before the next frame arrived.
bit 2	`UPE0`	USART Parity Error. Set when next frame in the `UDR0` has a parity error.
bit 1	`U2X0`	USART Double Transmission Speed. When set decreases the bit time by half doubling the speed.
bit 0	`MPCM0`	Multi-processor Communication Mode. When set incoming data is ignored if no addressing information is provided.

UCSR0B Bit #	Name	Description
bit 7	`RXCIE0`	RX Complete Interrupt Enable. Set to allow receive complete interrupts.
bit 6	`TXCIE0`	TX Complete Interrupt Enable. Set to allow transmission complete interrupts.
bit 5	`UDRIE0`	USART Data Register Empty Interrupt Enable. Set to allow data register empty interrupts.
bit 4	`RXEN0`	Receiver Enable. Set to enable receiver.
bit 3	`TXEN0`	Transmitter enable. Set to enable transmitter.
bit 2	`UCSZ20`	USART Character Size 0. Used together with `UCSZ01` and `UCSZ00` to set data frame size. Available sizes are 5-bit (000), 6-bit (001), 7-bit (010), 8-bit (011) and 9-bit (111).
bit 1	`RXB80`	Receive Data Bit 8. When using 8 bit transmission the 8th bit received.
bit 0	`TXB80`	Transmit Data Bit 8. When using 8 bit transmission the 8th bit to be submitted.

UCSR0C Bit #	Name	Description
bit 7 bit 6	`UMSEL01` `UMSEL00`	USART Mode Select 1 and 0. `UMSEL01` and `UMSEL00` combined select the operating mode. Available modes are asynchronous (00), synchronous (01) and master SPI (11).
bit 5 bit 4	`UPM01` `UPM00`	USART Parity Mode 1 and 0. `UPM01` and `UPM00` select the parity. Available modes are none (00), even (10) and odd (11).
bit 3	`USBS0`	USART Stop Bit Select. Set to select 1 stop bit. Unset to select 2 stop bits.
bit 2 bit 1	`UCSZ01` `UCSZ00`	USART Character Size 1 and 0. Used together with with `UCSZ20` to set data frame size. Available sizes are 5-bit (000), 6-bit (001), 7-bit (010), 8-bit (011) and 9-bit (111).
bit 0	`UCPOL0`	USART Clock Polarity. Set to transmit on falling edge and sample on rising edge. Unset to transmit on rising edge and sample on falling edge.

How Does Led Matrix Work?

2011-11-04T01:25:00+02:00

Photo by Windell Oskay

Led matrices are fun toys. Who would not love blinkenlights? Electronics is hard. Electronics is much harder than programming. I had hard time trying to understand how do the led matrices work. What is best way to learn something? Build one yourself.

Structure of Led Matrix

In a matrix format LEDs are arranged in rows and columns. You can also think of them as y and x coordinates. Lets assume we have 4×4 matrix. Rows would be marked from A to D and columns from 1 to 4. Now we can address each LED by row and column. Top left led would be (A,1). Bottom down led would be (D,4).

Led matrices come in two flavors. Common-row anode (left) and common-row cathode (right).

Figure above shows the different configurations. The difference between these two configurations is how you lit a led. With common-row anode current sources (positive voltage) are attached to rows A..D and currents sinks (negative voltage, ground) to columns 1..4. With common-row cathode current sinks are attached to rows A..D and currents sources to columns 1..4.

For example. To light bottom down led (D,4) of common cathode matrix you would feed positive voltage to column 4 and connect row D to ground. For sake of clarity I will using common-row cathode in examples for the rest of this article.

Building a LED Matrix

To build a 4×4 common-row cathode matrix you will need 16 LEDs, four resistors, some headers and prototyping board. I started by gluing the leds to prototyping board with epoxy glue. This way it is easier to have LEDs beautifully aligned. When gluing the leds make sure long and short legs are aligned the same way.

When glue is dry it is time to bend and solder. First bend all cathodes to left as close to prototyping board as possible. Solder all cathodes in each row together. When cathodes are ready, bend all anodes. Anodes must not touch cathodes. I used piece of plastic tubing to help bending the anodes to form a bridge above cathodes.

Now solder together all anodes in each row. Solder the headers and connect cathode rows directly to the header.

Anode rows are connected to header with current limiting resistors. Value of the resistor depends on the LED used. Check the LED datasheet for forward voltage and current. LED calculator will help you finding out correct resistor. Matrix is now ready for testing.

Addressing Single LED

Connecting ground to row A and positive voltage to column 1 will light the top right LED (A,1).

Connecting ground to row D and positive voltage to column 4 will light the bottom down LED (D,4).

Intuition would say lighting the both (A,1) and (D,4) at the same time is just connecting all the four wires. This is not the case. There are four LEDs which are lit. This is because current is also flowing through (A,4) and (D,1).

Multiplexing and Persistence of Vision

Multiplexing can be used to display arbitrary patterns with led matrices. Multiplexing is sometimes also called scanning. It scans rows (usually from up to down) and lights needed leds only in one row at time. Something like following:

Start by having everything disconnected.
Connect positive voltage all the needed columns.
Connect row to ground. This lights the needed leds in the row.
Disconnect the row and all columns.
Do the same steps one by one to all rows and then start from the beginning.

Do this slowly and you would see blinking LED rows. Do it really fast and human eye can see the whole pattern. Phenomenon is called persistence of vision.

Draw a Pattern

Lets write some simple code for drawing a pattern on the matrix. Note! Even though I am using Arduino board I do not use Arduino libraries nor IDE for developing. I do however like the Arduino pin numbering scheme. Functions pin_mode() and digital_write() work exactly the same way as their Arduino equivalents.

We start by setting up the pins and default state for them.

uint8_t column_pins[4] = { 2, 3, 4, 5 };
uint8_t row_pins[4]    = { 11, 10, 9, 8 };

static void init(void) {
  
    /* Turn all columns off by setting then low. */
    for (uint8_t x=0; x<4; x++) { 
        pin_mode(column_pins[x], OUTPUT);
        digital_write(column_pins[x], LOW);
    }
    
    /* Turn all rows off by setting then high. */
    for (uint8_t y=0; y<4; y++) { 
        pin_mode(row_pins[y], OUTPUT);
        digital_write(row_pins[y], HIGH);
    }
}

To display a pattern on matrix we use draw() function. Bitmap is passed as two dimensional array. Delay is used only to demonstrate persistence of vision.

uint8_t pattern[4][4]  = {{1,0,0,1}, {0,1,0,0}, {0,0,1,0}, {1,0,0,1}};

void draw(uint8_t buffer[4][4], uint8_t delay) {

    for (uint8_t row=0; row<4; ++row) {
        /* Connect or disconnect columns as needed. */
        for (uint8_t column=0; column<4; ++column) {
            digital_write(column_pins[column], buffer[row][column]);                    
        }

        /* Turn on whole row. */
        digital_write(row_pins[row], LOW);

        _delay_ms(delay);

        /* Turn off whole row. */
        digital_write(row_pins[row], HIGH);
    }
}

To examine persistence of vision effect we draw the pattern with different delays.

uint8_t main(void) {    
    
    init();
    
    /* With 100ms delay eye can see updating row by row. */
    for (uint8_t i=0; i<10; i++) { 
        draw(pattern, 100);
    }

    /* With 10ms delay pattern appears but flickers. */
    for (uint16_t i=0; i<100; i++) { 
        draw(pattern, 10);
    }
    
    /* Withoud delay solid pattern appears. */
    while (1) {
        draw(pattern, 1);        
    }
    
    return 0;
}

Full code can be found from GitHub. Check the output from video below.

Facebook POST for Canvas fix

2011-04-17T01:50:00+03:00

Latest usage and examples can be found from Rack::Facebook::MethodFix project page.

In early 2011 Facebook started to send all iframe application requests as POST. Because of this most REST based applications broke. Lets say you have object called User. To get list of users in RESTful application you would issue the following request:

GET /users/

New user is created with POST request:

POST /users/

I’m sure you can spot the problem here. You try to retrieve list of users. That does not work. Instead you end up creating new object because your request was converted to POST.

Usually this could be fixed by sending the intended HTTP verb using _method parameter. However it is not supported by Facebook.

Rack::Facebook::MethodFix middleware looks for incoming POST requests. If the request contains signed_request parameter it converts request to GET as originally intended. Optionally if you pass in Facebook application secret_id it will also require the contents of signed_request to be valid.

Usage

Install the gem by issuing command:

gem install rack-facebook-method-fix

After just it is just matter of requiring and using the middleware.

require "rack-facebook-method-fix"
use Rack::Facebook::MethodFix

Optionally if you want to validate contents of signed_request pass also the application secret.

require "rack-facebook-method-fix"
use Rack::Facebook::MethodFix, :secret_id => "c561df165eacdd6e32672c9eaee10318"

Related articles: Rake Tasks For Easier Facebook Development.

How To Make Facebook iFrame Tab Higher Than 800 Pixels?

2011-02-21T10:40:00+02:00

One of the best things to happen in Facebook development lately was to enable iframe application tabs. This was widely welcomed by developers. However many blog posts wrongly assumed there was a 800 pixel limit on the tab height. Behold, here is the 5000 pixel tab.

New Tab is iFrame Canvas Application

New tab works the same way as iframe canvas application. First load the JavaScript SDK. Easiest is to load it synchronously using a script tag (for production you want to load SDK asynchronously since it gives impression of faster loading page).

<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script>
<script type="text/javascript" charset="utf-8">
    /* Resizing code will be here. */
</script>

When JavaScript SDK is loaded you have access to FB.Canvas.setSize and FB.Canvas.setAutoResize methods. If you know the content size wont change later resize the frame only once when page loads.

FB.Canvas.setSize();

You can also pass the desired size as parameter.

FB.Canvas.setSize({ width: 520, height: 600 });

If content is dynamic and size might change tell Facebook to resize the iframe periodically.

FB.Canvas.setAutoResize();

Default is to try resizing every 100ms. If you want to force resizing more often you can pass desired interval as parameter.

FB.Canvas.setAutoResize(50);

Is There a Maximum Limit?

Quick search on Google did not reveal any browser limitation. Theoretically on 32 bit machines maximum page length would be 4 294 967 295 pixels. On 64 bit machines theoretical limit would be 8 446 744 073 709 551 615 pixels. Now I’m sure real limit is smaller but the bottom line is: there is enough pixels for marketers to create their next Facebook campaign…

Using Goo.gl With Ruby and HTTParty

2011-02-20T21:10:00+02:00

I had totally missed that Google recently opened the API of their URL shortening service. I love short and clean APIs. Accessing it using HTTParty is just few lines of code.

require "rubygems"
require "httparty"
require "json"

class Googl
  include HTTParty
  base_uri "https://www.googleapis.com"
  headers  "Content-Type" => "application/json"

  def self.shorten(url)
    post("/urlshortener/v1/url", :body => {:longUrl => url}.to_json)["id"]
  end
end

puts Googl.shorten("http://www.appelsiini.net/")

iPhone Controlled HTML5 Logo and Color Cube

2011-02-02T19:35:00+02:00

When Apple released iOS 4.2 end of last year I was on a boat trip to Finland. For me the most interesting features were added to Safari browser. I wanted to learn about WebSockets. New DeviceOrientation API just begged to be abused. I had an idea to control the content of laptop browser by tilting and rotating the phone. I had working but ugly code before ship arrived to Helsinki.

If you have short attention span go straight to the HTML5 logo demo.

Code has been sitting on my hard drive since. I cleaned it up during last couple of days. Also added additional eye candy by using the oh-so-hot-at-the-moment HTML5 logo.

How Does It Look?

How Does It Work?

First open demo page with your browser. Browser must support WebSockets. If you are using Safari which also support CSS 3D transforms check HTML5 Logo page. If you are using Chrome try Colour Cube page. When you open a demo page it generates a random PIN number and connects to a WebSocket server. PIN number is used as part of channel name.

var socket = new WebSocket("ws://ws.appelsiini.net:8080/iphone/" + pin);

Next open the mobile page with you iPhone or iPod. Enter PIN number from previous page and press connect. Your mobile browser now connects to same WebSocket server.

var socket = new WebSocket("ws://ws.appelsiini.net:8080/iphone/" + pin);

If the PIN numbers match your browsers are effectively paired. Mobile browser then uses DeviceOrientation API do determine iPhone orientation. When user tilts or turn the device new orientation is sent via WebSocket to server. Server in turn sends the same data to computer browser which is listening on same channel.

Every time HTML5 Logo page receives WebSocket message it animates the logo using CSS 3D transforms.

socket.onmessage = function(event) {
    var payload = JSON.parse(event.data);
    $("#elevator").css("-webkit-transform", "rotateX(" + payload.data.x * -1 + "deg)");
    $("#aileron").css("-webkit-transform", "rotateZ(" + payload.data.y * 1 + "deg)");
    $("#pitch").css("-webkit-transform", "rotateY(" + payload.data.z * 1 + "deg)");             
}

Colour Cube is almost the same. Only difference is It uses Pre3d JavaScript 3d rendering engine to draw and animate the cube.

Note! Spinning HTML5 logo is taken from HTML5 demo by Boaz Sender. Color cube is taken from Pre3d demo gallery by Dean McNamee. I did not originally create them. I just adapted them to connect and animate with iPhones.

WebSocket Server

WebSocket server itself is simple Ruby script based on Event Machine and em-websocket. I could have used Pusher which provides a hosted service. However I wanted to use this as learning experience. Also if this demo goes popular I might hit some message limits of Pusher.

Ajax Fails After Facebook.showPermissionDialog()

2011-01-27T22:50:00+02:00

Facebook developing is pretty much trial and error. Documentation has lately been improving a lot. Still there are lot of surprises. Especially with FBJS. Recently I got stuck with a problem of Ajax requests sometimes silently failing. Developer forums and Stack Overflow had the same problem but no answer.

Failing FBJS Code

First user clicks a submit button in application tab. Code will then show dialog requesting for extra permissions.

After giving the permissions code should submit form data to server. I also wanted to to receive the uid of current user. Hence the parameter ajax.requireLogin is set to true.

var form      = document.getElementById("form");
var form_data = form.serialize();
    
Facebook.showPermissionDialog("publish_stream", function(permissions) {
  
    var ajax = new Ajax();
    ajax.responseType = Ajax.RAW;
    ajax.requireLogin = true;
    ajax.ondone = function(data) {
    };
    ajax.onerror = function() {            
    };
    
    ajax.post("http://www.example.com/submit", form_data);
            
    return false;
});

Code above worked just fine while developing. While doing final testing I noticed a problem. Ajax request was silently ignored when new user gave application extra permissions. If user had given permissions before or denied the permissions everything was fine. Reloading the page also fixed the problem.

Trial and Error to the Rescue!

Forcing a page reload would have been an ugly fix. After hour of hair pulling and trying other things the solution was quite simple:

    ajax.requireLogin = false;

This parameter simply asks for basic permissions. With basic permissions Facebook sends the user uid with Ajax request. We already ask publish_stream permission using a dialog. When extra permissions are given application automatically receives also the basic permissions.

Mika Tuupola

Lazy Load 1.7.0 Released

New Events

New Parameter

Renamed Parameter

Selectors

Download

Driving 595 Shift Registers

Serial Peripheral Interface Bus

Control and Status Registers

Wiring TPIC6B595

More Reading

Lazy Load 1.6.0 Released

Ignore Hidden Images

New Scrollstop Event

Renamed Parameter

Download

Simple Serial Communications With AVR Libc

Configuring UART

Writing and Reading From UART

Redirecting STDIN and STDOUT to UART

Control and Status Registers

More Reading

How Does Led Matrix Work?

Structure of Led Matrix

Building a LED Matrix

Addressing Single LED

Multiplexing and Persistence of Vision

Draw a Pattern

More Reading

Facebook POST for Canvas fix

Usage

How To Make Facebook iFrame Tab Higher Than 800 Pixels?

New Tab is iFrame Canvas Application

Is There a Maximum Limit?

Using Goo.gl With Ruby and HTTParty

iPhone Controlled HTML5 Logo and Color Cube

How Does It Look?

How Does It Work?

WebSocket Server

Ajax Fails After Facebook.showPermissionDialog()

Failing FBJS Code

Trial and Error to the Rescue!