Tag Archives: Graphics file formats

Computer Algorithms: Lossy Image Compression with Run-Length Encoding

algorithms, , , , , , , , , , , , , , , ,

Introduction

Run-length encoding is a data compression algorithm that helps us encode large runs of repeating items by only sending one item from the run and a counter showing how many times this item is repeated. Unfortunately this technique is useless when trying to compress natural language texts, because they don’t have long runs of repeating elements. In the other hand RLE is useful when it comes to image compression, because images happen to have long runs pixels with identical color.

As you can see on the following picture we can compress consecutive pixels by only replacing each run with one pixel from it and a counter showing how many items it contains.

Lossless RLE for Images
Although lossless RLE can be quite effective for image compression, it is still not the best approach!

In this case we can save only counters for pixels that are repeated more than once. Such the input stream “aaaabbaba” will be compressed as “[4]a[2]baba”.

Actually there are several ways run-length encoding can be used for image compression. A possible way of compressing a picture can be either row by row or column by column, as it is shown on the picture below.

Row by row or column by column compression
Row by row or column by column compression.
Continue reading Computer Algorithms: Lossy Image Compression with Run-Length Encoding →

Computer Algorithms: Data Compression with Bitmaps

algorithms, PHP, , , , , , , , , , , , , , ,

Overview

In my previous post we saw how to compress data consisting of very long runs of repeating elements. This type of compression is known as “run-length encoding” and can be very handy when transferring data with no loss. The problem is that the data must follow a specific format. Thus the string “aaaaaaaabbbbbbbb” can be compressed as “a8b8”. Now a string with length 16 can be compressed as a string with length 4, which is 25% of its initial length without loosing any information. There will be a problem in case the characters (elements) were dispersed in a different way. What would happen if the characters are the same, but they don’t form long runs? What if the string was “abababababababab”? The same length, the same characters, but we cannot use run-length encoding! Indeed using this algorithm we’ll get at best the same string.

In this case, however, we can see another fact. The string consists of too many repeating elements, although not arranged one after another. We can compress this string with a bitmap. This means that we can save the positions of the occurrences of a given element with a sequence of bits, which can be easily converted into a decimal value. In the example above the string “abababababababab” can be compressed as “1010101010101010”, which is 43690 in decimals, and even better AAAA in hexadecimal. Thus the long string can be compressed. When decompressing (decoding) the message we can convert again from decimal/hexadecimal into binary and match the occurrences of the characters. Well, the example above is too simple, but let’s say only one of the characters is repeating and the rest of the string consists of different characters like this: “abacadaeafagahai”. Then we can use bitmap only for the character “a” – “1010101010101010” and compress it as “AAAA bcdefghi”. As you can see all the example strings are exactly 16 characters and that is a limitation. To use bitmaps with variable length of the data is a bit tricky and it is not always easy (if possible) to decompress it.

Bitmap Compression
Basically bitmap compression saves the positions of an element that is repeated very often in the message!

Continue reading Computer Algorithms: Data Compression with Bitmaps →

Looping Animation with JavaScript and Raphaël

javascript, micro tutorial, , , , , , , , , , , , ,

Raphael is a popular JavaScript library helping you to manage vectors via SVG or VML in your browser. It is extremely helpful and very easy to learn and use. The interesting thing is that in the browser you can do very powerful things with vectors, but they remain very less known. However with such libraries like Raphael the task is really simple.

Animation

As I said animating some vector properties is as simple as:

var paper = Raphael('canvas', 1024, 500);
var c = paper.circle(50, 50, 6).attr({fill : '#f00'});
c.animate({r : 10, fill : '#00f'}, 1000);

Here we change the radius and the background color of the circle for 1000 milliseconds.

The same thing can be done with any property with any other JavaScript library as jQuery. But as in jQuery, Raphael or whatever library the animation is not looping. That’s natural you can just change a property by animating it, but the looping animation suggests at least two animations. So it’s a developers job to implement this. Here’s a simple way to do this.

Two Way Animation

The solution here is using two functions calling each other.

var paper = Raphael('canvas', 1024, 500);
var c = paper.circle(50, 50, 6).attr({fill : '#f00'});
 
function a() {
    c.animate({r : 10, fill : '#00f'}, 1000, b);
}
function b() {
    c.animate({r : 6, fill : '#f00'}, 1000, a);
}
a();

Download Files with Zend Framework

micro tutorial, PHP, zend framework, , , , , , , , ,

Download a File

The title may sound unclear enough, but the task is simple. You’ve to make a file download process within a Zend Framework’s controller. Let’s assume we’ve the DownloadController setup:

<?php
 
class DownloadController extends Zend_Controller_Action
{
	public function indexAction()
	{}	
}

In PHP there are at least three simple lines of code that will do the job of downloading a file.

header('Content-Type: image/jpeg');
header('Content-Disposition: attachment; filename="logo.jpg"');
readfile('images/logo.jpg');

Note that here there is a content-type header, which is important cause the browsers understands what kind of file is supposed to be downloaded. The second line suggests a name of the downloaded file and the third one returns the file to the client.

Download a File … within Zend Framework

Those three lines wont work alone in a ZF application, because there’s no view, but even if you create a .phtml (view) file for this action it won’t work, because the header of the returned file is modified.

The question is how to possibly return the file for download, perhaps write some statistics to the database and if there’s a problem (some permission issues for instance) return a message to the user.

The Basic Solution

The solution is simple. First make it work by disabling the view and possibly the layout for this action:

public function indexAction()
{
	header('Content-Type: image/jpeg');
	header('Content-Disposition: attachment; filename="logo.jpg"');
	readfile('images/logo.jpg');
 
	// disable the view ... and perhaps the layout
	$this->view->layout()->disableLayout();
        $this->_helper->viewRenderer->setNoRender(true);
}

Than add some code where you can check the permissions. Just because there’s no view for this action you can redirect to another – errorAction():

public function indexAction()
{
    if (userHasNoPermissions) {
        $this->view->msg = 'This file cannot be downloaded!';
        $this->_forward('error', 'download');
    }
 
    header('Content-Type: image/jpeg');
    header('Content-Disposition: attachment; filename="logo.jpg"');
    readfile('images/logo.jpg');
 
    // disable layout and view
    $this->view->layout()->disableLayout();
    $this->_helper->viewRenderer->setNoRender(true);
}

But that still will prompt you a file to download, so there should be a return statement that will return false:

public function indexAction()
{
    if (userHasNoPermissions) {
        $this->view->msg = 'This file cannot be downloaded!';
        $this->_forward('error', 'download');
        return FALSE;
    }
 
    header('Content-Type: image/jpeg');
    header('Content-Disposition: attachment; filename="logo.jpg"');
    readfile('images/logo.jpg');
 
    // disable layout and view
    $this->view->layout()->disableLayout();
    $this->_helper->viewRenderer->setNoRender(true);
}

So here’s the complete source of DownloadController.php:

<?php
 
class DownloadController extends Zend_Controller_Action
{
	public function indexAction()
	{
	    if (userHasNoPermissions) {
	        $this->view->msg = 'This file cannot be downloaded!';
	        $this->_forward('error', 'download');
	        return FALSE;
	    }
 
	    header('Content-Type: image/jpeg');
	    header('Content-Disposition: attachment; filename="logo.jpg"');
	    readfile('images/logo.jpg');
 
	    // disable layout and view
	    $this->view->layout()->disableLayout();
	    $this->_helper->viewRenderer->setNoRender(true);
	}	
 
	public function errorAction()
	{}
}

and the error.phtml:

<?php echo $this->msg ?>

Cross-browser rounded corners! Works on IE but, but not on Opera!

css, , , , , , , , , ,

What’s this that works on IE and any other browser, except on Opera?!

Rounded Corners

That was a strange answer. Who’s making rounded corners with CSS?! on IE and more important how? There is a way to make it, but not entirely with CSS and HTML. The solution is with VML a subset of XML to deal with vectors, and CSS of course.

The original solution I found on snook.ca.

It is really working fine as described and shown in the example, but there are some issues as well. There is no way to setup background image on the container, and the width and height are behaving strange.

However this gives you an opportunity to make cross browser rounded corners with no scripting that slows down the page and except Opera it’s quite working!