Background noise in Magento image resize

After getting new LED monitors I discovered that all the images with white backgrounds in the Magento sites I was making had an annoying background noise/artifacts. Since the noise is very close to white (#fefefe or #fdfdfd) most people with LCD monitors will not notice.

The problem has to do with the php function imagecopyresampled in the resize function inside lib/Varien/Image/Adapter/Gd2.php, there are some rounding issues that occur to make a smoothly resized image.

My solution is to simply change any very light grey pixels in the image to pure white after the image has been resized. To do so first copy lib/Varien/Image/Adapter/Gd2.php to app/code/local/Varien/Image/Adapter/Gd2.php

Next find the following code inside the resize function (around line 312)

        // resample source image and copy it into new frame
        imagecopyresampled(
            $newImage,
            $this->_imageHandler,
            $dstX, $dstY,
            $srcX, $srcY,
            $dstWidth, $dstHeight,
            $this->_imageSrcWidth, $this->_imageSrcHeight
        );

Then add the following code underneath:

// Clean noise on white background images
if ($isTrueColor) {
	$colorWhite = imagecolorallocate($newImage,255,255,255);
	$processHeight = $dstHeight+$dstY;
	$processWidth = $dstWidth+$dstX;
	//Travel y axis
	for($y=$dstY; $y<($processHeight); ++$y){
		// Travel x axis
		for($x=$dstX; $x<($processWidth); ++$x){
			// Change pixel color
			$colorat=imagecolorat($newImage, $x, $y);
			$r = ($colorat >> 16) & 0xFF;
			$g = ($colorat >> 8) & 0xFF;
			$b = $colorat & 0xFF;
			if(($r==253 && $g == 253 && $b ==253) || ($r==254 && $g == 254 && $b ==254)) {
				imagesetpixel($newImage, $x, $y, $colorWhite);
			}
		}
	}
}

Flush the images cache from the Cache management in Magento, and you should have nicer images for the new displays. Few things to note when implementing this, there is a small performance hit the first time you generate the images again, and images with shadows may have sharper edges as the very light greys have been removed.

If anyone has a better solution please leave a comment.

Posted in Magento | 1 Comment

Text Scramble Cycle Plugin

This plugin basically just cycles between several text elements, extending on a technique from http://onehackoranother.com/projects/jquery/jquery-grab-bag/text-effects.html for the effect. Useful only for text transitions.

Demo

View demo page

Download

Text Scramble Cycle Plugin (587)

Options

Defaults:

$("#text-nodes").scrambleCycle({
revealsteps: 20, // How many animations or steps for the transition effect
timeout: 4000, // Timeout between animations</p>
speed: 100, // Speed of the steps</p>
itemIndex: 0 // An offset to control which text element is displayed first
});
Posted in jQuery | Leave a comment

SQLSTATE[HY000]: General error: 1452 Cannot add or update a child row: a foreign key constraint fails

Ran across this error today when upgrading a Magento install to 1.5.1 and the Category Products index wasn’t working.

SQLSTATE[HY000]: General error: 1452 Cannot add or update a child row: a foreign key constraint fails (`magento`.`catalog_category_product_index`, CONSTRAINT `FK_CATALOG_CATEGORY_PROD_IDX_CATEGORY_ENTITY` FOREIGN KEY (`category_id`) REFERENCES `catalog_category_entity` (`entity_id`) ON DELETE)

To fix it I ran the following SQL to find the rows that were causing the problem, then deleted the rows and ran the indexer again.

SELECT *
FROM `catalog_category_product`
WHERE `category_id` NOT
IN (
SELECT `entity_id`
FROM `catalog_category_entity`
)

Posted in Magento | Leave a comment

Dripping Text Plugin (Beta)

Here is something I’ve been working on lately. It’s still needs work but it’s looking good enough to show.

Demo

View demo 1 (Basic up/down animation effect)
View demo 2 (Experimenting with the jquery animation path plugin)

Download

Version 0.5 (beta)
Dripping Text (643)

Let me know if you have suggestions or want me to work faster at releasing a complete version in the comments.

Posted in jQuery | Leave a comment

Grid Slide Plugin

This plugin shuffles and animates your slides in a grid. In brief you set the number of viewports that you want your slides to be shown in. There will be no duplicate slides shown on the page, extra slides are shuffled and evenly distributed between the viewports. If a viewport doesn’t have any extra slides assigned to it, it will not animate until the next time it does.

Demo

View Demo

In Action

Here are live sites using this plugin. If you have a site using this plugin and want a link here post a comment.
Glue Store

Download

Version 1.01
Download link: Grid Slide (1344)

Change Log

Version 1.01 (17 Jan 2011)

  • Added better context selectors so the plugin can be used multiple times on a single page.
  • Fixed support for non-square slide dimensions.
  • Added another demo

Version 1.0 (14 Jan 2011)
First release.

Usage

Apart from the main jQuery library there are no other dependencies needed.

You can use the jQuery easing plugin for extra animation effects. The demo shows the use of setting easing to ‘easeOutBounce’.

All the files needed are available in the download link above.

You will need to copy the styles from gridslide.css or link the stylesheet.

Below is an example of the minimum code in your head you will need to get the plugin running.

		<link href="gridslide.css" type="text/css" rel="stylesheet" />
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript">
		</script>
		<script src="jquery.gridslide.js" type="text/javascript">
		</script>
		<script type="text/javascript">
			$(function(){
				$('#gridslide').gridslide();
			});
		</script>

Options

Option Default Description
shown 8 How many viewports are created, should be set to less than the number of slides
direction ‘random’ Setting ‘random’ shuffles between top, right, bottom, left for each viewport. Otherwise you can set a single direction like ‘left’.
timeout 2200 Length of time between animations
speed 2000 Animation Speed
viewportClass ‘viewport’ Lets you change the css class of the viewports that are created
easing ‘linear’ Standard jquery easing setting, use the easing plugin for more effects
viewHeight parseInt($(this).children().css(‘height’),0) The plugin tries to find the height of the first slide automatically. Set this manually if encountering problems.
viewWidth parseInt($(this).children().css(‘width’),0) The plugin tries to find the width of the first slide automatically. Set this manually if encountering problems.
Posted in jQuery | 1 Comment

Colorlist

Here is a quick jQuery script I made after liking the effect on this flash site today (http://www.fromscratch.us)

Demo

View Demo

I also put it at the top of this site, hover over the navigation bar.

Download

Download here: Colorlist (637)

Usage

I didn’t make it a full jQuery plugin, but usage is fairly simple. It requires a plugin that enables background color animations, I included the one from http://www.bitstorm.org/jquery/color-animation/ in the download. To use it call colorlist(jquery selector) inside your document ready wrapper, e.g.

$(function(){
colorlist($('#main ul'));
});

The colorlist function only takes the one parameter, which is what container you want to target.

The colors are just an array that you can edit for yourself in the script to match any theme requirements you have.

Posted in jQuery | Leave a comment

New site, first post

Welcome to my new site. This will be replacing justjquery.com as I want to post stuff other than jquery plugins occasionally, and I felt a new domain was more appropriate. Hope you find some use in what I post, and constructive criticism is appreciated.

Posted in Uncategorized | Leave a comment