Home
About
Color Tool
 

Share Wonders is proudly powered by WordPress
Entries (RSS) and Comments (RSS).
11 queries. 0.343 seconds.
Valid XHTML

Archive for the 'Imported' Category

Getting Color Information From Images with JavaScript, PHP, and the GDLib

Sunday, April 23rd, 2006

Colr.org has the ability to generate random colors from an image that you can load. I looked at the code and wondered why only one hundred randomly selected colors were loaded into the script, and I have now realized why.

There is a lot of data in image.

My own attempt at getting colors from images is a lot less random. You can hover over the image to get the color value for the pixel pointed at. It’s a nice feature, but it has draw backs. For one, it is really, really slow. Opera is the slowest and Firefox will throw ’script unresponsive’ warnings at the user (even though it’s just taking its time and will respond). Nevertheless I had fun making this. It works, and you can use it to get the RGB values from JPEG and PNG file types. It loads colors for GIF file types, but I’ve seen some inconsistency in it. There’s nothing to be done about it, I blame the GD Graphics Library, which only recently started to support gifs again.

So how do I do it? The image is loaded into PHP which uses the PHP image functions to get information for colors, including the color values for pixels. PHP records all the colors and their locations (for tens to hundreds of thousands of pixels), stores it in a string and sends it to JavaScript via AJAX. JavaScript then splits the string into several arrays, and associates rgb values with locations in a big multidimensional object. As the mouse hovers over the image, JavaScript uses onmousemove to get the X and Y position of the mouse pointer, calculates where it is above the image, and uses the location to retrieve the RGB values. JavaScript then converts the RGB values into a webcolor.

So there you go! Hopefully you’ll have some use for it. I know I will.

JavaScript and SVG

Sunday, April 23rd, 2006

Check out the following two pages. They’re an example of how JavaScript can be used to manipulate SVG. SVG are scalable vector graphics. It’s very cool!

(Note you’ll need to use Firefox or IE with the Adobe SVG Viewer plugin for you to be able to see this).

A clock SVG image that tells the time with JavaScript.

Three clickable elements in an SVG document that will change colors when you click on them. Yes, you can add events to elements in an SVG document!

I plan on doing some SVG manipulation with JavaScript too. It looks like you could do just about anything with this, perhaps even build a vector drawing application for the browser!

HOWTO: Include JavaScript Code

Sunday, April 23rd, 2006

Those familiar with PHP will know what these include functions do:
[PHP]require(’file.php’);
require_once(’file.php’);
include(’file.php’);
[/PHP]
They enable PHP programmers to include code only when needed. The benefit of using such functions is that it reduces the server load and the response time. Many web applications are thousands of lines long and to parse each of these lines whenever a request is made to the server is very inefficient.

JavaScript does not have similar functions. But it is possible to include JavaScript code only when needed by utilizing the DOM methods. I have created a JavaScript Include Test Page to show how it can be done. On this test page, there are two links. The first link tests to see if the code from script2.js is ‘included.’ The second link runs the function that will include the extra script file. Once you’ve clicked the second link, the first link will show you that you’ve included the code:
Include Test
Let me explain how it works. The HTML only links to one script file initially:
[HTML]


[/HTML]he DOM Inspector, it will show there’s only one script element attached to the head element:
DOM Inspectore Before
When you click the first link without first including the second script file you’ll see from the code it will not recognize the function, ‘is_included,’ which is declared on that file:
[js]function include_test(){
var test = typeof is_included;
if(test != ‘function’){
alert(’The code from script2.js is not included.’);
}else{
is_included();
}
return;
}[/js]
If it had been included, the ‘typeof’ statement would have returned ‘function’ but instead it returns ‘undefined.’ Once script2.js is included, it will recognize the function as in the scope chain and execute it.

So how does the include work? With the DOM element methods:
[js]scriptElement = document.createElement(’script’);
scriptElement.type = “text/javascript”;
scriptElement.src = filename;
head[0].appendChild(scriptElement);[/js]
This will create an additional script element. The src will be whatever string is within the variable ‘filename.’ In this case it is script2.js. Once the second link is clicked you can check the DOM Inspector yourself to see the extra script element has been created:
DOM Inspectore After

Here’s the code on the second file:
[js]function is_included(){
alert(’The code from script2.js is included!’);
return;
}
[/js]
You see, there’s no way that alert shown in the first image could have been called if the second file had not been incorporated into the (modest) test application.

The benefit to including JavaScript only when needed is that you’ll keep your file sizes smaller. My ColorTool is getting close to 200kb in size. I never made use of the benefit of a DOM include, and therefore it is a large load, and a strain on the server, because most people do not use all of the code available every time they visit. It is a waste of resources and sloppy design.

There’s a couple of things to remember if you decide to use this. One is, check to make sure that you have not included the extra JavaScript file already, otherwise you’ll just keep including the same file over and over again whenever the include processes is enacted. This will eat up the client’s memory. Check to make sure you haven’t included the file already. For the purposes of this test I set a global variable that I test when the include process begins:
[js] if(included == false){
scriptElement = document.createElement(’script’);
scriptElement.type = “text/javascript”;
scriptElement.src = filename;
head[0].appendChild(scriptElement);
alert(’Attempting to include script2.js..’);
included = true;
}else{
alert(”Oops! You’ve already included script2.js successfully!”);
}[/js]
The other thing to remember is that code included will not be available right away, and you should be sure to test to see if it is ready before you attempt to use it.

That’s it! I hope this helped you in your JavaScripting.

Ruby on Rails

Sunday, April 16th, 2006

Ruby on Rails

BehindPHP…introducing the PHP developers

Friday, April 14th, 2006

addslashes

This is what happens…

Friday, April 14th, 2006

Finally

 

Share Wonders

Look out honey, because I’m using Technology