Phantoms 2.11 JS doesn’t handle various Webworkers at the same time.

I have an application using Phantoms JS 2.11 that uses a pool of webworkers. I couldn’t make it work. I changed my code, and set only one webworker at a time (I implemented a queue), and it worked perfectly.

I couldn’t find anything on the web about that problem, so I am posting that here.

 

Create thumbnail with HTML5 Canvas

The HTML5 Canvas comes with the drawImage and toDataURL functions which are very usefull when it comes to Image manipulation. In fact, you can use those functions in order to resize or crop your images client side. Here a function I wrote which resize and image and sends back the base64 string :

 

function resizeImageBase64(img, width, height) {
   var canvas = document.createElement('canvas'),
   ctx = canvas.getContext('2d');

   canvas.width = width;
   canvas.height = height;

   ctx.drawImage(img, 0, 0, width, height);

   var str = canvas.toDataURL('image/jpeg', quality);
   canvas = null; // in order to garbage collect those elements
   ctx = null; // it helps if you launch that function on several bug size images
   return str;
}

Filters on large images

In Flex and Flash in you put a filter on a large image, it won’t work. You will see in your console messages something like :

Warning: Filter will not render. The DisplayObject’s filtered dimensions (6302, 3540) are too large to be drawn.

There is a way to make your filters work any way. Below you will find my code for a ColorMatrixFilter.

– Before :

var colorMatrix:ColorMatrix = new ColorMatrix();
colorMatrix.adjustColor( photoComponent.luminosity, photoComponent.contrast, photoComponent.saturation, 0);

image.filters = [new ColorMatrixFilter(colorMatrix)];

– After:

var colorMatrix:ColorMatrix = new ColorMatrix();
colorMatrix.adjustColor( photoComponent.luminosity, photoComponent.contrast, photoComponent.saturation, 0);

Bitmap(image.data).bitmapData.applyFilter( Bitmap(image.data).bitmapData, new Rectangle(0,0, image.width, image.height), new Point(0,0), new ColorMatrixFilter(colorMatrix) );

Installing Adobe Air 2.6 on Ubuntu 12.04 64 bit

First, go to Adobe’s archived Air files and grab Adobe AIR 2.6.0 Linux (15.4 MB). Next, grab the file getlibs-all.deb right here. The guy who wrote it doesn’t seem to be hosting it anymore, and it’s not a huge program, just extremely useful for finding 32-bit libraries for a 64-bit system. You can right-click “getlibs-all.deb” and open with Gdebi Package Manager, and click Install. So far, so good.

Next, you need to make sure to install libhal-storage1, lib32nss-mdns, and libgnome-keyring0 if it’s not installed. Open a terminal and run:

sudo apt-get install libhal-storage1 libgnome-keyring0 lib32nss-mdns

It should ask you to install (Y/n) if they’re not already there. Let them install, and rejoice. Now, we need to install all the missing 32-bit libraries that it will need. You can’t get these from apt-get unless you know what they all are. Simply use the following commands: (Note! Since I wrote this, libgnome-keyring0 has been updated to a newer version!)

sudo getlibs -l libhal-storage.so.1 sudo getlibs -l libgnome-keyring.so.0.1.1

Or possibly, if you’ve updated libgnome-keyring:

sudo getlibs -l libgnome-keyring.so.0.2.0

For each one, it will ask if you want to install (a lot of) libraries. Let them all download and install, and we’re almost done! Next, we link a couple of libraries (they’re there, but not where Air is looking for them). Run the following:

sudo ln -s /usr/lib/i386-linux-gnu/libgnome-keyring.so.0 /usr/lib/libgnome-keyring.so.0

And then run the actual Air installer. In a terminal, cd to the directory you stored “AdobeAIRInstaller.bin” in and run this:

chmod +x ./AdobeAIRInstaller.bin sudo ./AdobeAIRInstaller.bin

 

Copied from http://jeffhendricks.net/?p=68

Remove recursively a folder

find -name -type d -exec rm -rf {} +

Flex, actionscript getBounds(), getRect(), getVisibleRect() sucks !

After playing for quite long with getBounds(), getRect(), getVisibleRect(), I ended up understanding those function suck.

In fact if you want to get the rect of a UIComponent, when this is one is supposed to be rotated, those functions will give you shit.

so here, the function I wrote, which works :
public static function getBounds( component:UIComponent ):Rectangle
{
return new Rectangle(component.getLayoutBoundsX(), component.getLayoutBoundsY(), component.getLayoutBoundsWidth(), component.getLayoutBoundsHeight() );
}

Preserving whitespace when importing html into RichText / RichEditableText

If you import some HTML into a RichText or RichEditableText by default it won’t preserve whitespaces.

myRichTextComponent.textFlow = TextConverter.importToFlow(value, TextConverter.TEXT_FIELD_HTML_FORMAT);

To make it preserve whitespace you have to create a configuration and set it properly like that :

var format:TextLayoutFormat = new TextLayoutFormat();
format.whiteSpaceCollapse = WhiteSpaceCollapse.PRESERVE;
var config:Configuration = new Configuration();
config.textFlowInitialFormat = format;

And then you can use it to import your HTML in your RichText or RichEditableText :

myRichTextComponent.textFlow = TextConverter.importToFlow(html, TextConverter.TEXT_FIELD_HTML_FORMAT, config);

Flexilivre.com : result of one year working on Flex/Php/Mysql

I am used to only talk about IT stuff here related to Flex, HTML, Mysql, etc.. But this time I would like to talk about the result of using those technologies : flexilivre.com

First when I started this blog, I was creating a website which doesn’t exist anymore: wegook.com. It was an online travel guide service. The idea was great, the IT challenge wasn’t that big, but the amount of touristic information required was too huge…

So after one year and a half and I stopped working on wegook.com, no more money to invest. And I started thinking about a new project to work on. Being a world traveler, I had to print at least one time a book with pics about my travels. And every time I tried to do so, I was so disappointed. Almost all websites will make you download software, and install it on your computer. The downloaded software looked like old IT stuff.. Really surprising. The internet technologies are so developed, and companies keep asking to their customers to use old IT.

So very quickly I decided to dig on that, and try to find out if it could be possible to compete on this market. With a friend we met a few printing companies, and we realized that prices given to us were so low that we could easily compete the biggest websites!

It took me 2 months to develop the first version on my website : flexilivre.com. By using Flex, I was able to build so quickly a very interactive web interface for creating picture book on a web page. Then with JQuery/HTML/CSS, I created to rest of the website: ordering, contact form, etc.. This was even easier; it took less than 2weeks. And all of that used a Mysql database.

This project has been a real IT challenge so far. Every day, I try to find a solution to do better than our competitors. And by using FLEX it’s just so easy.

At this time, Flexilivre.com is one year and 3months old. It makes good money. We are only two people managing this new company. So we can propose the best prices to our customers, in fact at this day our books are the cheapest in France. The printing company we are working with believes in us. So they are very reactive, they print any book we send to them within 48h. So our customers receive their book within 3 to 4days after ordering. It makes us the fastest on the french market.

Convert all images in a folder on linux with imagick

Not complicated, but it took me a little while to figure it out. So here it comes :

for f in *; do convert “$f” -quality 50 “$f”; done

if you want to change the name of the output files :

for f in *; do convert “$f” -quality 50 “XXXXXX$f”; done

ImageSnapshot and BitmapData size limit

With Flex you can use ImageSnapshot class to copy FlexComponent to an image (PNG or JPEG).

It’s very easy, all you have to do if to execute those two lines :

var encoder:PNGEncoder= new PNGEncoder();
var imageSnap:ImageSnapshot = ImageSnapshot.captureImage(mycomponent, 300, encoder);

mycomponent is you Flex component (UIComponent), 300 is the resolution (DPI) and I used a PNGEncoder to get a PNG file. I could have used a JPEGEncoder to get a Jpeg File.

This class uses BitmapData class to create a bitmap file and encode it. Until Flash Player 9, BitmapData was limited in size to 2880 pixels.
So if your component was bigger than that, it would be scalled to fit that size 2880 x 2880.

From Flash Player 10, BitmapData can go till 8191 pixels width or height. But it seems ImageSnapshot class was not updated. It still uses the old limit. So if you need more resolution on your screenshots, you will have to override the ImageSnapshot class.

I overrided it and set the const MAX_BITMAP_DIMENSION to 4600 and it’s working fine, and my screenshots are twice better.

UPDATE : 4600 was fine for a while, then depending on the area I try to create a snapshot from, it wasn’t always working.
I reduced it to 3950, and it’s working now.